/*
 * orbit — the site is the product.
 *
 * Three surfaces, one identity: the door (the sign-in's dawn), the sky (home:
 * the dial, the manifest, the drawers) and the dusk (the goodbye), with the
 * first-run film played over the real elements. Every rule here is carried
 * from the app's own stylesheets — packs.css, flight.css, home.css and the
 * ratified home mockup — and spends only the packs' tokens.
 */

:root{
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ui:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Space Grotesk',var(--ui);
}

/* ── the packs ─────────────────────────────────────────────────────────── */
[data-theme=starchart]{
  --bg:#060b1c; --panel:rgba(13,20,44,.55); --panel-raised:rgba(19,28,58,.75);
  --line:#243259; --line-soft:#17203f;
  --ink:#e9edf8; --ink-mid:#8791b3; --ink-faint:#737e9e;
  --accent:#d8b45a; --ok:#4ade80; --warm:#f0b429; --overdue:#f87171; --upcoming:#8fb8ff;
  --degraded:#fb8b24;
  --sun:#ffe9c4; --sun-core:#fff6e6; --stars:1; --celestial:block;
  --star-far:#e9edf8; --star-near:#f4f0ff;
  --chart-line:#243259; --chart-line-soft:#17203f; --chart-ink:#737e9e;
  --ink-quiet:#8b95b6; --accent-text:var(--accent); --ok-text:var(--ok);
  --overdue-text:var(--overdue); --warm-text:var(--warm); --upcoming-text:var(--upcoming);
  --sec-sage:#8fbf9f; --sec-blue:#8fb8ff; --sec-sand:#d8b45a; --sec-plum:#b79ae0; --sec-coral:#f0907a;
}
[data-theme=afterdark]{
  --bg:#05070d; --panel:rgba(11,15,26,.6); --panel-raised:rgba(15,21,36,.8);
  --line:#1c2434; --line-soft:#151b28;
  --ink:#e7e9ee; --ink-mid:#9fa6b2; --ink-faint:#717c8e;
  --accent:#7dd3fc; --ok:#4ade80; --warm:#f0b429; --overdue:#f87171; --upcoming:#7dd3fc;
  --degraded:#fb8b24;
  --sun:#dbe9ff; --sun-core:#ffffff; --stars:.6; --celestial:none;
  --star-far:#e9edf8; --star-near:#f4f0ff;
  --chart-line:#1c2434; --chart-line-soft:#151b28; --chart-ink:#717c8e;
  --ink-quiet:#768295; --accent-text:var(--accent); --ok-text:var(--ok);
  --overdue-text:var(--overdue); --warm-text:var(--warm); --upcoming-text:var(--upcoming);
  --sec-sage:#7fb79a; --sec-blue:#7dd3fc; --sec-sand:#d9bd83; --sec-plum:#a99ae0; --sec-coral:#ef9b86;
}
[data-theme=dawn],[data-theme=clouds]{
  --sky-1:#b0bed6; --sky-2:#c2cad9; --sky-3:#d7d5cf; --sky-4:#eedfc8; --sky-5:#f8e9d2;
  --bg:#d2d3d4;
  --panel:rgba(233,239,249,.58); --panel-raised:rgba(241,245,252,.80);
  --line:#a6b2c5; --line-soft:#c0c8d6;
  --ink:#18202f; --ink-mid:#343d51; --ink-faint:#414d62;
  --accent:#1f7ac2; --ok:#178a4c; --warm:#c06a12; --overdue:#c22a63; --upcoming:#1f7ac2;
  --degraded:#c2570e;
  --sun:#eda253; --sun-core:#9c4a10; --stars:1; --celestial:none;
  --star-far:var(--ink); --star-near:var(--ink);
  --chart-line:rgba(26,34,51,.45); --chart-line-soft:rgba(26,34,51,.24); --chart-ink:#40506e;
  --p-jade-1:#e8f6ec; --p-jade-2:#95cfab; --p-jade-3:#4f9070;
  --p-amber-1:#fff0d8; --p-amber-2:#f0c076; --p-amber-3:#ad7830;
  --p-ruby-1:#ffe2e1; --p-ruby-2:#ec949c; --p-ruby-3:#a9505f;
  --p-sky-1:#e6eefc; --p-sky-2:#9dbce6; --p-sky-3:#5b80b8;
  --ink-quiet:var(--ink-faint); --accent-text:#134a72; --ok-text:#0d4e30;
  --overdue-text:color-mix(in srgb,var(--overdue) 70%,black 30%);
  --warm-text:color-mix(in srgb,var(--warm) 70%,black 30%);
  --upcoming-text:var(--accent-text);
  --sec-sage:#2f7d55; --sec-blue:#1f7ac2; --sec-sand:#8f6c00; --sec-plum:#71499a; --sec-coral:#bd4f36;
}
[data-theme=retrograde]{
  --bg:#080a14; --panel:rgba(12,20,30,.62); --panel-raised:rgba(16,26,38,.86);
  --line:#1d4a5a; --line-soft:#12303c;
  --ink:#eef6ff; --ink-mid:#a9d8e6; --ink-faint:#6f9fb1;
  --accent:#ff4fd8; --ok:#3ef2a0; --warm:#ffd23f; --overdue:#ff3864; --upcoming:#2de2e6;
  --degraded:#ff9f1c;
  --sun:#ff4fd8; --sun-core:#fff0fb; --stars:1; --celestial:block;
  --star-far:#9fd6e6; --star-near:#ffffff;
  --chart-line:#2a7f96; --chart-line-soft:#164b5c; --chart-ink:#6f9fb1;
  --bloom:color-mix(in srgb,var(--accent) 45%,transparent);
  --p-jade-1:#c4ffe4; --p-jade-2:#3ef2a0; --p-jade-3:#0e7a55;
  --p-amber-1:#fff3b0; --p-amber-2:#ffd23f; --p-amber-3:#8a6b00;
  --p-ruby-1:#ffb3c4; --p-ruby-2:#ff3864; --p-ruby-3:#8a0f2e;
  --p-sky-1:#b6fbff; --p-sky-2:#2de2e6; --p-sky-3:#0d6b78;
  --ink-quiet:#74a4b4; --accent-text:var(--accent); --ok-text:var(--ok);
  --overdue-text:var(--overdue); --warm-text:var(--warm); --upcoming-text:var(--upcoming);
  --sec-sage:#3ef2a0; --sec-blue:#2de2e6; --sec-sand:#ffd23f; --sec-plum:#ff4fd8; --sec-coral:#ff9f1c;
}

/* ── the ground ───────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
html[data-theme=starchart],html[data-theme=afterdark],html[data-theme=retrograde]{color-scheme:dark}
html[data-theme=dawn],html[data-theme=clouds]{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--ui);min-height:100vh;overflow-x:hidden}
[data-theme=dawn] body,[data-theme=clouds] body{
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 28%,var(--sky-3) 55%,var(--sky-4) 80%,var(--sky-5) 100%) fixed}
body.at-door{overflow:hidden}
a{color:var(--accent-text);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
/* what the page focuses for the visitor (a landing's heading, so Tab goes on from there) is no control: no ring, though
   iOS Safari counts that focus as visible (#48; Bootstrap's Reboot and GOV.UK do the same) */
[tabindex="-1"]:focus{outline:none}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
button{font-family:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;margin:0}
p{margin:0}
[hidden]{display:none!important}
.mono{font-family:var(--mono)}
.corner{font:10.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-quiet);
  text-shadow:0 0 2px var(--bg),0 0 5px var(--bg),0 0 11px var(--bg)}
noscript .corner,.nojs .corner{display:block;max-width:60ch;margin:0;padding:24px;line-height:1.8}
noscript .corner a,.nojs .corner a{color:var(--accent-text)}

/* the sky: two tiled layers, drifting (POL-11), never sitting still */
.sky{position:fixed;inset:-4%;z-index:0;pointer-events:none;opacity:var(--stars);transition:opacity .4s;overflow:hidden}
/* each layer is a tile of stars and its copy just past the right edge (sky.js); the layer is the screen's size, so
   it must draw past its own edge for the copy to be there as the tile drifts off: a seamless loop, drawn once and
   only moved (the compositor's), never redrawn */
.sky svg{position:absolute;inset:0;width:100%;height:100%;will-change:transform;overflow:visible}
.sky .far{animation:driftf 400s linear infinite}
.sky .near{animation:driftn 195s linear infinite}
/* the tile is 1600 units; --tile is that in pixels at this size (sky.js measures it) */
/* (driftf and driftn, the tiles' drift, are the shared door's: assets/door/door.css) */
[data-theme=dawn] .sky .far circle,[data-theme=clouds] .sky .far circle{opacity:.5;stroke:var(--star-far);stroke-width:.7}
[data-theme=dawn] .sky .near circle,[data-theme=clouds] .sky .near circle{opacity:.8;stroke:var(--star-near);stroke-width:.7}
.sky .cam{transition:transform 1.25s cubic-bezier(.5,.4,.15,1)}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 34%,transparent 55%,rgba(0,0,0,.28) 100%)}
[data-theme=dawn] .vignette,[data-theme=clouds] .vignette{background:linear-gradient(180deg,transparent 60%,rgba(255,196,120,.16) 100%)}
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.26}
.grain canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .5s ease-out}
.grain[data-ready] canvas{opacity:1}
[data-theme=dawn] .grain,[data-theme=clouds] .grain{opacity:.16}
body.at-door .grain{opacity:.26}

/* ══ THE DOOR: the site's own parts (the door itself is the shared door's: assets/door/door.css, loaded before this sheet) ══ */
/* the planets come in by their pictures, never by their container or their anchor: an element mid-fade is flattened
   with everything inside it into one layer under the ring, and the near planets and the gold one would come up
   behind the ring and jump in front of it as the fade ended */
#door .lockup .planet .body,#door .lockup .trdot{opacity:0;transition:opacity 1.3s ease 1.6s}
body.lit #door .lockup .planet .body,body.lit #door .lockup .trdot{opacity:1}
.doorfoot{position:absolute;left:0;right:0;bottom:22px;z-index:3;text-align:center;font:10.5px var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:#7c8699;opacity:0;transition:opacity 1.2s ease 1.5s;padding:0 16px}
body.lit .doorfoot{opacity:1}
.doorfoot a{color:#a6b0c8}
.doorfoot a:hover{color:#d8b45a}
.doorfoot .sep{margin:0 10px;color:#4a5468}


/* ══ THE SKY: home ══════════════════════════════════════════════════════ */
#home{position:relative;z-index:2;opacity:0;transition:opacity 1.2s ease}
#home.shown{opacity:1}
.back{position:fixed;top:30px;left:26px;z-index:6;background:none;border:0;cursor:pointer;padding:0}
.back:hover{color:var(--accent-text)}
.orb{position:fixed;top:22px;right:26px;z-index:6;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;display:grid;place-items:center;
  font:12px var(--mono);color:var(--ink-mid)}
.orb:hover{border-color:var(--accent)}
.inbox-orb{right:76px;color:var(--ink-mid);text-decoration:none}
.inbox-orb.waiting{color:var(--accent-text);border-color:var(--accent)}
.inbox-orb.waiting svg{animation:breathe 3.2s ease-in-out infinite}
.inbox-orb .count{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--accent);color:var(--bg);
  font:600 9.5px var(--mono);font-style:normal;display:grid;place-items:center}
.inbox-orb:not(.waiting) .count{display:none}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.55}}
.account{position:fixed;top:70px;right:26px;z-index:12;width:250px;background:var(--panel-raised);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:16px;padding:18px 20px;opacity:0;transform:translateY(-6px);pointer-events:none;
  visibility:hidden;transition:opacity .25s,transform .25s,visibility 0s .25s}
.account.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.account .who b{display:block;font-size:14px;font-weight:560}
.account .who span{font-size:12px;color:var(--ink-mid)}
.account nav{display:flex;flex-direction:column;gap:2px;margin:14px 0;padding:12px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.account nav a,.account nav button{font:13.5px var(--ui);color:var(--ink-mid);text-decoration:none;padding:6px 8px;border-radius:8px;
  background:none;border:0;text-align:left;cursor:pointer;width:100%}
.account nav a:hover,.account nav button:hover{color:var(--ink);background:var(--panel)}
.swatches{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.swatches span{font:10.5px var(--mono);color:var(--ink-quiet);margin-right:2px}
.swatches button{width:18px;height:18px;border-radius:50%;cursor:pointer;border:1px solid var(--line);padding:0;background:var(--sw);box-shadow:var(--sw-shadow,none)}
.swatches button[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}
.acctfoot{display:flex;justify-content:space-between;gap:12px;align-items:center}
.signout{font:12px var(--mono);color:var(--ink-quiet);background:none;border:0;cursor:pointer;padding:0}
.signout.reset:hover{color:var(--warm-text)}
.signout:hover{color:var(--overdue-text)}

/* the create drawer, from the top; the north star is its handle (CON-12) */
.drawer-top{position:fixed;top:0;left:0;right:0;z-index:11;background:var(--panel-raised);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);transform:translateY(-102%);transition:transform .4s cubic-bezier(.3,.7,.3,1)}
.drawer-top.open{transform:none}
.drawer-top .inner{max-width:760px;margin:0 auto;padding:28px 24px 24px;display:flex;flex-direction:column;gap:16px;align-items:center}
.drawer-top h4,.drawer h4{font:10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0}
.ctypes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ctype{display:flex;align-items:center;gap:9px;font:12.5px var(--mono);color:var(--ink-mid);border:1px solid var(--line);border-radius:99px;
  padding:8px 16px;cursor:pointer;background:var(--panel)}
.ctype:hover{border-color:var(--accent);color:var(--ink)}
.ctype[aria-pressed=true]{border-color:var(--accent);color:var(--accent-text)}
.ctype .dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.ctype .dot.con{background:radial-gradient(circle,currentColor 24%,var(--panel-raised) 34%,currentColor 52%)}
.ctype .dot.ter{background:linear-gradient(90deg,currentColor 50%,rgba(0,0,0,.5) 50%)}
.ctype .dot.sug{background:none;border:1.6px solid currentColor}
.cfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;width:100%}
.cfield{display:grid;gap:5px;min-width:0}
.cfield label{font:10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.cfield input,.cfield select{font:13.5px var(--ui);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;outline:0;width:100%;min-width:0}
.cfield input:focus,.cfield select:focus{border-color:var(--accent)}
.cfield input::placeholder{color:var(--ink-faint)}
.cfield.wide{grid-column:1/-1}
.crow{display:flex;gap:14px;align-items:center;justify-content:space-between;width:100%;flex-wrap:wrap}
.crow .note{font:11px var(--mono);color:var(--ink-faint);letter-spacing:.04em}
.btn-primary{font:600 12px var(--display);color:#04060e;background:var(--accent);border:0;border-radius:99px;padding:10px 22px;cursor:pointer;letter-spacing:.04em}
[data-theme=dawn] .btn-primary,[data-theme=clouds] .btn-primary{color:#fff}
.nstar{position:absolute;top:100%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:0;cursor:pointer;padding:8px 16px;z-index:11}
.nstar svg{overflow:visible}
.nstar .glint{animation:northpulse 5.5s ease-in-out infinite}
@keyframes northpulse{0%,100%{opacity:.85}50%{opacity:1}}
.nstar span{font:10px var(--mono);letter-spacing:.22em;color:var(--ink-faint);text-transform:uppercase;opacity:0;transition:opacity .3s}
.nstar:hover span,.drawer-top.open .nstar span{opacity:1;color:var(--accent-text)}
.drawer-top.open .nstar{background:var(--panel-raised);border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px}
.drawer-top.open .nstar .classic path{fill:var(--accent)}
.nstar .tron,.nstar .sonde{display:none}
[data-theme=retrograde] .nstar .classic{display:none}
[data-theme=retrograde] .nstar .tron{display:block;filter:drop-shadow(0 0 3px var(--bloom))}
[data-theme=clouds] .nstar .classic{display:none}
[data-theme=clouds] .nstar .sonde{display:block}
.scrim{position:fixed;inset:0;z-index:10;background:rgba(2,4,10,.42);opacity:0;pointer-events:none;transition:opacity .35s}
.scrim.on{opacity:1;pointer-events:auto}
[data-theme=dawn] .scrim,[data-theme=clouds] .scrim{background:rgba(24,32,47,.22)}

/* the edge drawers: the word IS the handle (CON-7) */
.drawer{position:fixed;top:0;bottom:0;z-index:10;width:min(330px,92vw);background:var(--panel-raised);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:26px 26px 110px;transition:transform .35s cubic-bezier(.3,.7,.3,1);overflow-y:auto}
.drawer h4{margin:18px 0 10px}
.drawer h4:first-of-type{margin-top:0}
.drawer .close{position:absolute;top:12px;background:none;border:0;color:var(--ink-faint);font:14px var(--mono);cursor:pointer}
.drawer-right{right:0;border-left:1px solid var(--line);transform:translateX(102%)}
.drawer-right.open{transform:none}
.drawer-right .close{left:14px}
.drawer-left{left:0;border-right:1px solid var(--line);transform:translateX(-102%)}
.drawer-left.open{transform:none}
.drawer-left .close{right:14px}
.handle{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;cursor:pointer;
  font:11px var(--mono);letter-spacing:.14em;writing-mode:vertical-rl;color:var(--ink);background:var(--panel);border:1px solid var(--line);
  padding:14px 6px}
.drawer-right .handle{right:auto;left:-46px;width:46px;padding:14px 21px 14px 7px;border-right:0;border-radius:10px 0 0 10px}
.keyrow{display:flex;align-items:center;gap:10px;font:12px var(--mono);color:var(--ink-mid);padding:6px 2px}
.keyrow .sw{width:12px;height:12px;border-radius:50%;flex:none}
.kv{display:flex;justify-content:space-between;gap:18px;font:11.5px var(--mono);color:var(--ink-mid);padding:8px 2px;border-bottom:1px solid var(--line-soft)}
.kv:last-of-type{border-bottom:0}
.kv b{color:var(--ink);font-weight:500;text-align:right}
.kv b.over{color:var(--overdue-text)}
.kv b.ok{color:var(--ok-text)}
.kv b.opt{color:var(--ink-quiet);font-weight:400}
.kv b .sure{font-size:9.5px;letter-spacing:.1em;color:var(--ok-text);margin-left:8px;font-style:normal}
.kv b .sure.unsure{color:var(--warm-text)}
.relay-card{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--panel);margin-bottom:6px}
.relay-card .addr{display:block;font:11px var(--mono);color:var(--accent-text);border:1px dashed var(--line);border-radius:10px;
  padding:9px 10px;text-align:center;margin:10px 0 8px;overflow-wrap:anywhere}
.lane{margin-top:18px;border-radius:14px;padding:2px 0}
.lane h4{margin:0 0 8px}
.receipt{border:1px solid var(--line-soft);border-radius:12px;padding:12px 14px;background:var(--panel);margin-bottom:8px}
.receipt.suggest{border-style:dashed}
.receipt b{display:block;font-size:13.5px;font-weight:520}
.receipt small{display:block;font:11px/1.5 var(--mono);color:var(--ink-mid);margin-top:4px}
.receipt.failed small{color:var(--overdue-text)}
.receipt .kv{padding:6px 0}
.receipt .kv b{display:flex;align-items:center;gap:0;font-size:11.5px}
.receipt .actions{display:flex;gap:8px;margin-top:10px}
.receipt .actions button{font:12px var(--mono);border-radius:9px;padding:6px 12px;cursor:pointer;border:1px solid var(--line);background:none;color:var(--ink-mid)}
.receipt .actions button.yes{border-color:var(--accent);color:var(--accent-text)}
.receipt .actions button.armed{background:var(--accent);color:var(--bg)}
.cmd{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 8px 9px 12px;min-width:0}
.cmd code{flex:1;min-width:0;font:11.5px var(--mono);color:var(--ink);white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.cmd code::-webkit-scrollbar{display:none}
.cmd .prompt{color:var(--accent-text);margin-right:6px;user-select:none}
.copy{flex:none;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-quiet);background:none;
  border:1px solid var(--line);border-radius:8px;padding:6px 9px;cursor:pointer}
.copy:hover{color:var(--ink);border-color:var(--ink-faint)}
.copy[data-done]{color:var(--ok-text);border-color:var(--ok)}
.drawer p{font-size:13px;color:var(--ink-mid);margin:0 0 10px}
.drawer p a{white-space:nowrap}
.drawer .gate{opacity:1;transform:none;transition:filter .35s ease;margin-top:6px}

/* the hero: the dial, the other systems, the explore field */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:64px 0 96px}
.galaxy{position:absolute;inset:0;pointer-events:none}
.minisys{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;
  transition:transform 1.25s cubic-bezier(.5,.4,.15,1),opacity .6s}
.minisys svg{position:absolute;left:-90px;top:-90px;width:180px;height:180px;overflow:visible;pointer-events:none}
.minisys .hit{pointer-events:all;cursor:pointer}
.minisys .mslabel{font:9px var(--mono);letter-spacing:.2em;fill:var(--chart-ink);text-transform:uppercase}
.minisys .msring{fill:none;stroke:var(--chart-line);stroke-width:.9;stroke-dasharray:2 4;transition:stroke .3s,stroke-opacity .3s}
.minisys .lead{fill:none;stroke:var(--chart-line);stroke-width:.8}
.minisys:hover .msring{stroke:var(--accent);stroke-opacity:.9}
.dialwrap{position:relative;width:min(560px,92vw,58vh);aspect-ratio:1;transition:transform 1.25s cubic-bezier(.5,.4,.15,1),opacity .6s}
.hero.flying .dialwrap{transform:translate(calc(var(--flyx)*-1.7),calc(var(--flyy)*-1.7)) scale(.45);opacity:0}
.hero.flying .minisys{opacity:.08}
.hero.flying .minisys.target{opacity:1;transform:translate(0,0) scale(2.3)}
.hero.arriving .dialwrap{transform:none;opacity:1;transition:none}
.dial{width:100%;height:100%;display:block;overflow:visible;transform-origin:50% 50%}
.dial.arrive{animation:arrive 1s cubic-bezier(.2,.7,.2,1) 1}
@keyframes arrive{from{transform:scale(.16);opacity:0}60%{opacity:1}to{transform:scale(1)}}
.dial.bloom{animation:bloom 2.4s cubic-bezier(.2,.7,.2,1) 1}
@keyframes bloom{from{transform:scale(.28);opacity:0}28%{opacity:1}to{transform:scale(1);opacity:1}}
.dial text{font-family:var(--mono);letter-spacing:.06em}
.dial .now-month{fill:var(--accent);font-weight:600}
.dial #dial-name{font-family:var(--ui);letter-spacing:0}
.dial .ping{animation:ping 3.4s ease-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes ping{0%{transform:scale(.6);stroke-opacity:.7}70%{transform:scale(3.2);stroke-opacity:0}100%{stroke-opacity:0}}
.dial .breathe{animation:breathe 4.2s ease-in-out infinite}
.dial .body-link{cursor:pointer}
.dial .body-link:focus:not(:focus-visible){outline:none}
.dial :is(.chrome,.trails,.pings,.belts){pointer-events:none}
.dial .body-link :is(circle,path){pointer-events:all;transition:transform .25s;transform-origin:center;transform-box:fill-box}
.dial .body-link:hover circle,.dial .body-link.lit circle{transform:scale(1.5)}
.dial .body-link:focus-visible{outline:none}
.dial .body-link.landing{animation:land .9s cubic-bezier(.2,.7,.2,1) 1;transform-origin:center;transform-box:fill-box}
@keyframes land{from{transform:scale(3);opacity:0}to{transform:scale(1);opacity:1}}
.dial .sun-link{cursor:pointer}
.dial .sun-link circle[filter]{transition:opacity .3s}
.dial .sun-link:hover circle[filter]{opacity:1}
.dial .comet{stroke:var(--ok);stroke-width:2;stroke-linecap:round;opacity:0}
.dial .comet.fly{animation:comet 1.6s ease-out 1}
@keyframes comet{0%{opacity:.7;stroke-dashoffset:110}100%{opacity:0;stroke-dashoffset:0}}
[data-theme=dawn] .dial circle[filter],[data-theme=clouds] .dial circle[filter]{filter:none}
[data-theme=dawn] .dial .spec,[data-theme=clouds] .dial .spec{fill:transparent}
[data-theme=dawn] .dial .body-link :is(circle,path),[data-theme=clouds] .dial .body-link :is(circle,path){filter:drop-shadow(0 0 3px rgba(255,240,220,.85))}
[data-theme=retrograde] .dial .now-month,[data-theme=retrograde] .dial [style*="--accent"]{filter:drop-shadow(0 0 2.5px var(--bloom))}
/* POL-6: the chart callout — legible, quadrant-aware */
.chart-callout{position:fixed;z-index:8;pointer-events:none;opacity:0;transition:opacity .12s;background:var(--panel-raised);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:10px;padding:9px 13px;font:13.5px var(--ui);color:var(--ink);white-space:nowrap}
.chart-callout.show{opacity:1}
.chart-callout .line{position:absolute;top:50%;width:26px;height:1px;background:var(--accent);opacity:.85}
.chart-callout.side-right .line{left:-27px}
.chart-callout.side-left .line{right:-27px}
.chart-callout.side-below .line,.chart-callout.side-above .line{top:auto;left:var(--tail,50%);width:1px;height:26px}
.chart-callout.side-below .line{top:-27px}
.chart-callout.side-above .line{bottom:-27px}
.chart-callout b{display:block;font-weight:600;font-size:13.5px}
.chart-callout small{font:11.5px var(--mono);color:var(--ink-mid)}
.chart-callout .chip{display:none;margin-top:7px;font:11px var(--mono);color:var(--accent-text);border:1px solid var(--line);border-radius:99px;padding:5px 12px;cursor:pointer;background:none}
.chart-callout.tap{pointer-events:auto;cursor:pointer}
.chart-callout.tap .chip{display:block;width:max-content}
.hero-foot{position:relative;margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:13px;width:min(360px,90vw)}
.splash-search{position:relative;width:100%}
.splash-search input{background:none;border:0;outline:0;border-bottom:1px solid var(--line);width:100%;text-align:center;
  font:12.5px var(--mono);color:var(--ink);padding:6px 4px;transition:border-color .25s}
.splash-search input::placeholder{color:var(--ink-faint)}
.splash-search input:focus{border-color:var(--accent)}
.palette{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:10px;width:100%;background:var(--panel-raised);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;padding:8px;display:none;text-align:left;z-index:5}
.palette.open{display:block}
.palette button{display:block;width:100%;text-align:left;font:12.5px var(--mono);color:var(--ink-mid);padding:8px 10px;border-radius:8px;background:none;border:0;cursor:pointer}
.palette button b{color:var(--ink);font-weight:500}
.palette button:hover{background:var(--panel)}
.palette button.act{color:var(--accent-text)}
.palette .none{font:12px var(--mono);color:var(--ink-faint);padding:8px 10px}
.cue{font:10.5px var(--mono);letter-spacing:.22em;color:var(--ink-faint);text-transform:uppercase}
.chips{display:none;flex-wrap:wrap;gap:8px;justify-content:center;padding:0 16px;margin-top:18px}
.chips button{font:11px var(--mono);letter-spacing:.06em;color:var(--ink-mid);background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:7px 12px;cursor:pointer}
.chips button:hover{border-color:var(--accent);color:var(--ink)}
@media (max-width:900px){.galaxy{display:none}.chips{display:flex}.back,.orb{position:absolute}}
@media (max-width:599.98px){.item.suggest{flex-direction:column;align-items:stretch}.item.suggest .actions{justify-content:flex-end}}

/* the manifest: the corridor, the spine of time */
.manifest{max-width:820px;margin:0 auto;padding:30px 16px 140px}
.corridor{position:relative;margin-top:14px;padding-left:46px}
.corridor::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:1.5px;background:var(--chart-line)}
.redzone{position:relative;border-radius:14px;margin-bottom:6px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--overdue) 7%,transparent),color-mix(in srgb,var(--overdue) 2%,transparent))}
.redzone::before{content:"";position:absolute;left:-31px;top:0;bottom:0;width:1.5px;background:var(--overdue);opacity:.55}
.today{position:relative;display:flex;align-items:center;gap:12px;margin:16px 0 22px;scroll-margin-top:90px}
.today .sunmark{position:absolute;left:-38px;width:15px;height:15px}
.today .sunmark i{position:absolute;inset:0;border-radius:50%;background:var(--sun);filter:blur(4px);opacity:.8}
.today .sunmark b{position:absolute;inset:4px;border-radius:50%;background:var(--sun-core)}
.today span{font:11px var(--mono);letter-spacing:.18em;color:var(--accent-text)}
.today .rule{flex:1;height:1px;background:var(--accent);opacity:.4}
.month{position:relative;display:flex;align-items:center;gap:12px;margin:26px 0 12px}
.month::before{content:"";position:absolute;left:-34px;width:7px;height:7px;border-radius:50%;border:1px solid var(--chart-ink);background:var(--bg)}
.month span{font:10.5px var(--mono);letter-spacing:.22em;color:var(--chart-ink)}
.month .rule{flex:1;height:1px;background:var(--chart-line-soft)}
.month small{font:10.5px var(--mono);color:var(--ink-faint)}
.item{position:relative;display:flex;align-items:center;gap:15px;border-radius:14px;padding:14px 18px;margin-bottom:6px;
  border:1px solid var(--line-soft);background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);scroll-margin-top:90px}
.item:not(.suggest){cursor:pointer}
.item:hover{background:var(--panel-raised);border-color:var(--line)}
.item.lit{border-color:var(--accent)}
.item.open{border-color:var(--accent);background:var(--panel-raised);border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
.item .planet{position:absolute;left:-37px;width:13px;height:13px;display:grid;place-items:center}
.item .planet i{display:block;width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 0 2.5px var(--bg)}
.item .planet.ter i{background:linear-gradient(90deg,currentColor 50%,rgba(0,0,0,.5) 50%)}
.item .planet.con i{background:radial-gradient(circle,currentColor 24%,var(--panel-raised) 34%,currentColor 52%)}
.item .planet.sug i{background:none;border:1.6px solid var(--accent)}
.item .body{flex:1;min-width:0}
.item .body b{display:block;font-size:14.5px;font-weight:520}
.item .body span{font-size:12.5px;color:var(--ink-mid)}
.item .t{font:12px var(--mono);text-align:right;color:var(--ink-mid);flex:none}
.item .t small{display:block;font-size:10.5px;color:var(--ink-faint)}
.item .t.over{color:var(--overdue-text)}
.item .t.soon{color:var(--warm-text)}
.item .t.up{color:var(--upcoming-text)}
.item .t.ok{color:var(--ok-text)}
.item.suggest{border-style:dashed;flex-wrap:wrap}
.item.suggest .body span{color:var(--accent-text)}
.item.suggest .actions{display:flex;gap:8px}
.item.suggest button{font:12px var(--mono);border-radius:9px;padding:6px 12px;cursor:pointer;border:1px solid var(--line);background:none;color:var(--ink-mid)}
.item.suggest button.yes{border-color:var(--accent);color:var(--accent-text)}
.item.suggest button.armed{background:var(--accent);color:var(--bg)}
.itemview{border:1px solid var(--accent);border-top:0;background:var(--panel-raised);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:0 0 14px 14px;
  padding:2px 18px 16px;margin-bottom:6px;animation:ivopen .3s cubic-bezier(.2,.7,.2,1) 1}
@keyframes ivopen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.itemview h4{font:10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:18px 0 8px}
.itemview .doc{position:relative;z-index:2;display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:9px;border:1px solid var(--line-soft);margin-bottom:7px;font-size:13px}
.itemview .doc small{display:block;font:10.5px var(--mono);color:var(--ink-mid)}
.itemview .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.itemview .acts button{font:12px var(--mono);color:var(--ink-mid);background:none;border:1px solid var(--line);border-radius:99px;padding:6px 13px;cursor:pointer}
.itemview .acts button:hover{border-color:var(--accent);color:var(--accent-text)}
.itemview .acts button.done{border-color:var(--ok);color:var(--ok-text)}
.itemview .acts button:disabled{opacity:.55;cursor:default;border-color:var(--line)!important;color:var(--ink-faint)!important}
.itemview .ivfoot{display:flex;align-items:center;gap:18px;margin-top:16px}
.itemview .ivnote{font:11px var(--mono);color:var(--ink-faint);letter-spacing:.04em}
.horizon{margin-top:34px;text-align:center;font:11px var(--mono);color:var(--ink-faint);letter-spacing:.08em}
[data-theme=retrograde] :is(.today span,.suggest .body span,.drawer-top.open .nstar span,.nstar:hover span){text-shadow:0 0 9px var(--bloom)}
[data-theme=retrograde] :is(.inbox-orb.waiting,.suggest button.yes){box-shadow:0 0 12px -2px var(--bloom)}
[data-theme=retrograde] .today .rule{box-shadow:0 0 8px var(--bloom)}
[data-theme=dawn] :is(.item,.ctype,.orb,.palette),[data-theme=clouds] :is(.item,.ctype,.orb,.palette){
  -webkit-backdrop-filter:blur(14px) saturate(1.06);backdrop-filter:blur(14px) saturate(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 20px rgba(48,66,98,.07)}
[data-theme=dawn] :is(.account,.drawer,.drawer-top,.itemview),[data-theme=clouds] :is(.account,.drawer,.drawer-top,.itemview){
  -webkit-backdrop-filter:blur(20px) saturate(1.06);backdrop-filter:blur(20px) saturate(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 16px 36px rgba(48,66,98,.10)}

/* ══ THE FILM ═══════════════════════════════════════════════════════════ */
#veil{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0;transition:opacity .45s ease}
#veil.on{opacity:1}
#veil svg{position:absolute;inset:0;width:100%;height:100%}
#veil .sheet{fill:var(--bg);fill-opacity:.6}
[data-theme=dawn] #veil .sheet,[data-theme=clouds] #veil .sheet{fill:#18202f;fill-opacity:.32}
#film{position:fixed;inset:0;pointer-events:none;z-index:31}
.tourfilm-ring{position:fixed;pointer-events:none;opacity:0;transition:opacity .45s ease,box-shadow .3s ease;
  box-shadow:0 0 0 1.5px var(--accent),0 0 0 8px color-mix(in srgb,var(--accent) 18%,transparent),0 0 34px color-mix(in srgb,var(--accent) 35%,transparent)}
.tourfilm-dot{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 25%,transparent);opacity:0;transition:opacity .2s ease}
.tourfilm-callout{position:fixed;max-width:260px;width:max-content;text-wrap:balance;box-sizing:border-box;background:var(--panel-raised);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font:13.5px/1.45 var(--ui);color:var(--ink);
  opacity:0;pointer-events:none;transition:opacity .24s ease-out,transform .24s ease-out}
.tourfilm-callout.label{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mid)}
.tourfilm-callout i{position:absolute;width:14px;height:14px;background:var(--panel-raised);border:1px solid var(--line);transform:rotate(45deg);z-index:-1}
.tourfilm-callout a{pointer-events:auto;display:inline-block;margin-top:8px;font:600 11px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.tourfilm-typed{position:fixed;display:flex;align-items:center;box-sizing:border-box;overflow:hidden;white-space:pre;pointer-events:none;z-index:2}
.tourfilm-typed i{display:inline-block;width:1.5px;height:1.05em;margin-left:1px;background:var(--accent);vertical-align:text-bottom}
.transport{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:32;width:min(470px,calc(100% - 24px));height:44px;border-radius:99px;
  background:var(--panel-raised);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line);display:grid;grid-template-columns:auto auto 1fr auto;
  align-items:center;gap:2px;padding:0 16px 0 6px;opacity:0;pointer-events:none;transition:opacity .4s}
.transport.on{opacity:1;pointer-events:auto}
.transport.on.playing{opacity:.38}
.transport.on.playing:hover,.transport.on.playing:focus-within{opacity:1}
.transport.on.ended{opacity:.4}
.transport.on.ended:hover,.transport.on.ended:focus-within{opacity:1}
.transport button.tb{width:32px;height:32px;border-radius:50%;border:0;background:none;color:var(--ink-mid);cursor:pointer;display:grid;place-items:center;padding:0}
.transport button.tb:hover{color:var(--ink);background:var(--panel)}
.transport button.tb svg{display:block}
.transport .bar{position:relative;height:100%;margin:0 8px}
.transport .rail{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.transport .played{position:absolute;left:0;top:50%;height:1px;background:var(--accent);width:var(--p,0%);transition:width .3s linear}
.transport .tick{position:absolute;top:0;bottom:0;width:18px;margin-left:-9px;background:none;border:0;padding:0;cursor:pointer}
.transport .tick::before{content:"";position:absolute;left:8.5px;top:18px;width:1px;height:8px;background:var(--ink-faint)}
.transport .tick[aria-current=true]::before{background:var(--accent);height:10px;top:17px}
.transport .tick:hover::before{background:var(--ink)}
.transport .name{position:absolute;bottom:27px;left:var(--p,0%);transform:translateX(-50%);font:10px var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-mid);white-space:nowrap;transition:left .3s linear;pointer-events:none}
.transport .count{font:10.5px var(--mono);letter-spacing:.08em;color:var(--ink-quiet);font-variant-numeric:tabular-nums}
@media (max-width:599.98px){.transport .name{display:none}}

/* ══ THE MARK AND ITS LINE (the home link on each landing; the install drawer's source line) ══ */
.mark-row{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font:600 17px var(--display);letter-spacing:.02em}
.mark-row .tr{animation:spinback 40s linear infinite;transform-origin:100px 100px}
.from{font:12px/1.6 var(--mono);color:var(--ink-mid);margin:0 0 22px;max-width:none}
.from code{font-size:inherit;background:none;border:0;padding:0;color:var(--ink)}
.drawer .from{margin:12px 0 10px}

@media (prefers-reduced-motion:reduce){
  .sky .far,.sky .near,#door .dsky .far,#door .dsky .near,#dusk .dsky .far,#dusk .dsky .near,#door .dsky .tws,#dusk .dsky .tws,.rays .sway1,.rays .sway2,
  .world .breath,.shimmer,.dial.arrive,.dial.bloom,.dial .ping,.dial .breathe,.inbox-orb.waiting svg,
  .nstar .glint,.mark-row .tr,.loginchrome .lockup .glyph .tr,#dusk .afterglow,#dusk .belt,
  /* named by id because the rules that start them outrank this block: #dusk's own rules beat .shimmer and
     .loginchrome … .tr above, and .planets .trdot and .dial.warn .danger come later at the same weight */
  #door .planets .trdot,#dial.warn .danger,#dusk .shimmer,#dusk .lockup .glyph .tr{animation:none}
  .dial .ping{display:none}
  .rays .sway1,.rays .sway2{will-change:auto}
  #door,#door .loginchrome,.dialwrap,.minisys,.sky .cam{transition:none}
}

/* ══ THE FLIGHT, on the site's own surfaces (the canvas and the name on the void are the shared door's: assets/door/door.css) ══ */
body.showwarp .grain{opacity:.26}
/* the sky is not on the screen until the flight lands on it (home.css) */
body.launching #home{visibility:hidden;pointer-events:none}
body.bare #home{opacity:1;transition:none}
body.bare #home .dial .chrome,body.bare #home .orb,body.bare #home .nstar,body.bare #home .drawer,body.bare #home .hero-foot,
body.bare #home .chips,body.bare #home #manifest,body.bare #home .back,body.bare #home .account,body.bare .transport{opacity:0;pointer-events:none}
body.bare #home .dial,body.bare #home .minisys{animation:condense 1.3s cubic-bezier(.2,.75,.25,1) both}
@keyframes condense{from{transform:scale(1.72);opacity:0;filter:blur(11px)}40%{opacity:.8}68%{filter:blur(2.5px)}to{transform:scale(1);filter:blur(0)}}
#home .dial .chrome{transform-box:view-box;transform-origin:50% 50%}
/* the red ring, when the walk names it */
.dial .danger{transform-box:fill-box;transform-origin:center}
.dial.warn .danger{animation:dangerpulse 1.1s ease-in-out infinite}
.dial.warn .danger circle[stroke]{stroke-opacity:.95;stroke-width:1.5}
@keyframes dangerpulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
body.instrument #home .dial .chrome{animation:instrumentarrive 1.8s cubic-bezier(.2,.26,.35,1) both}
@keyframes instrumentarrive{from{transform:scale(.16);opacity:0}55%{opacity:1}to{transform:scale(1);opacity:1}}
body.instrument #home .orb,body.instrument #home .nstar,body.instrument #home .drawer,body.instrument #home .hero-foot,
body.instrument #home .chips,body.instrument #home #manifest,body.instrument #home .back{animation:chromein 1.3s ease .45s both}
@keyframes chromein{from{opacity:0}to{opacity:1}}
body.withdrawing #home .dial .chrome{animation:withdraw .6s cubic-bezier(.55,0,.9,.4) both}
body.withdrawing #home .orb,body.withdrawing #home .nstar,body.withdrawing #home .drawer,body.withdrawing #home .hero-foot,
body.withdrawing #home .chips,body.withdrawing #home #manifest,body.withdrawing #home .back,body.withdrawing .transport{animation:chromeout .45s ease both}
@keyframes withdraw{from{transform:scale(1);opacity:1}45%{opacity:.6}to{transform:scale(.16);opacity:0}}
@keyframes chromeout{to{opacity:0}}
body.dispersing #home{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s ease .15s,visibility 0s linear .85s}
body.dispersing #home .dial,body.dispersing #home .minisys{animation:disperse .8s cubic-bezier(.5,0,.9,.45) both}
@keyframes disperse{from{transform:scale(1);opacity:1;filter:blur(0)}to{transform:scale(1.68);opacity:0;filter:blur(10px)}}
body.dispersing .transport{opacity:0}
@media (prefers-reduced-motion:reduce){
  body.bare #home .dial,body.bare #home .minisys,body.instrument #home .dial .chrome,body.instrument #home .orb,body.instrument #home .nstar,
  body.instrument #home .hero-foot,body.instrument #home .chips,body.instrument #home #manifest,body.instrument #home .back,body.instrument #home .drawer,
  body.withdrawing #home .dial .chrome,body.withdrawing #home .orb,body.withdrawing #home .nstar,body.withdrawing #home .hero-foot,body.withdrawing #home .drawer,
  body.withdrawing #home .chips,body.withdrawing #home #manifest,body.withdrawing #home .back,body.dispersing #home .dial,body.dispersing #home .minisys{animation:none!important}
  body.dispersing #home{transition:none}
}

/* ══ THE DOORS ON THE RING: three more bodies, each a section, each named
   the way the app names the systems in its sky — a hairline leader and a
   small word, upright however far round the ring the body has travelled ══ */
/* the bodies: html over the ring's svg, each turned by the compositor; the
   ring is 200 units across, so a unit is var(--R) / 200 */
.planets{grid-area:1/1;position:relative;width:var(--R);aspect-ratio:1;--u:calc(var(--R) / 200)}
.planets .trdot{pointer-events:none;position:absolute;left:50%;top:50%;width:0;height:0;animation:spinback 40s linear infinite;will-change:transform}
.planets .trdot .trail{display:none}
.planets .trdot i{position:absolute;left:calc(63 * var(--u));top:calc(-36.5 * var(--u));width:calc(14 * var(--u));height:calc(14 * var(--u));border-radius:50%;background:#d8b45a;transform:translate(-50%,-50%)}
.planet{position:absolute;left:50%;top:50%;width:0;height:0;outline:0;text-decoration:none;color:#8791b3}
.planet .spin{position:absolute;left:0;top:0;width:0;height:0;animation:spinback var(--dur) linear infinite;animation-delay:var(--delay);will-change:transform}
.planet .spin i{position:absolute;left:0;top:calc(-1 * var(--r) * var(--u));transform:translate(-50%,-50%);border-radius:50%;box-sizing:border-box}
.planet .hit{width:calc(30 * var(--u));height:calc(30 * var(--u));cursor:pointer}
.planet .halo{width:calc(15.2 * var(--u));height:calc(15.2 * var(--u));border:max(1px,calc(.6 * var(--u))) solid #4a5468;transition:border-color .25s;pointer-events:none}
.planet .body{width:calc(8.4 * var(--u));height:calc(8.4 * var(--u));background:var(--c);transition:transform .25s,box-shadow .25s;pointer-events:none}
.planet .tag{position:absolute;left:0;top:0;white-space:nowrap;font:500 max(9.5px,calc(4.6 * var(--u))) "JetBrains Mono",monospace;letter-spacing:calc(.9 * var(--u));text-transform:uppercase;color:#8791b3;
  text-shadow:0 0 2px #04060e,0 0 4px #04060e,0 0 8px #04060e;transition:color .25s;will-change:transform;pointer-events:none}
.planet:hover .spin,.planet:focus-visible .spin{animation-play-state:paused}
.planet:hover .body,.planet:focus-visible .body{transform:translate(-50%,-50%) scale(1.24);box-shadow:0 0 6px var(--c)}
.planet:hover .halo,.planet:focus-visible .halo{border-color:var(--c)}
.planet:hover .tag,.planet:focus-visible .tag{color:var(--c)}
body.launching #door .planet .body,body.showwarp #door .planet .body,body.launching #door .planet .tag,body.showwarp #door .planet .tag,body.launching #door .trdot,body.showwarp #door .trdot{opacity:0;transition:opacity .3s}
/* the one line beneath the sunrise, and the way it opens */

/* ══ THE LANDINGS: the ring the mark wears, with a section's bodies on it ══ */
.pad{position:fixed;inset:0;z-index:2;background:var(--bg)}
.pad .back{position:absolute;top:22px;left:24px;z-index:4;background:none;border:0;cursor:pointer;color:var(--ink-quiet);text-decoration:none}
.pad .mark-row.home{position:absolute;top:16px;right:24px;z-index:4;font-size:15px;color:var(--ink-mid);text-decoration:none}
.pad .mark-row.home:hover{color:var(--ink)}
.pad .back:hover,#door .back:hover{color:var(--accent-text)}
/* a landing arrives as the sky does: the ring condenses out of the light, the rest comes with the instrument */
body.launching .pad{visibility:hidden;pointer-events:none}
body.bare .pad .back,body.bare .pad .home,body.bare .pad .word{opacity:0;pointer-events:none}
body.instrument .pad .word,body.instrument .pad .back,body.instrument .pad .home{animation:chromein 1.3s ease .45s both}
/* and leaves the way the sky does */
body.withdrawing .pad .word,body.withdrawing .pad .back,body.withdrawing .pad .home{animation:chromeout .45s ease both}
body.dispersing .pad{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s ease .15s,visibility 0s linear .85s}
@media (prefers-reduced-motion:reduce){.planet .spin{animation:none}body.bare .pad .lockup .glyph,body.instrument .pad .word,body.instrument .pad .back,body.withdrawing .pad *,body.dispersing .pad .lockup .glyph{animation:none!important}}
/* the one line at the foot */
.doorfoot.by{bottom:18px;text-transform:none;letter-spacing:.08em;font-size:11px;color:#7c8699}
/* on the door the sun comes up under the middle, so the line keeps to the corner */
@media (min-width:600px){#door .doorfoot.by{left:24px;right:auto;text-align:left}}
.doorfoot.by a{color:#a6b0c8;text-decoration:none}
.doorfoot.by a:hover{color:#d8b45a}
.pad .doorfoot.by{color:var(--ink-quiet)}
.pad .doorfoot.by a{color:var(--ink-mid)}
.pad .doorfoot.by a:hover{color:var(--accent-text)}
body.bare .pad .doorfoot{opacity:0}
body.instrument .pad .doorfoot{animation:chromein 1.3s ease .45s both}
body.withdrawing .pad .doorfoot{animation:chromeout .45s ease both}

/* ══ THE DOCS: an index, searched ══════════════════════════════════════ */
.pad .scroll{position:absolute;inset:0;z-index:3;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin}
.pad .topfade{position:absolute;top:0;left:0;right:0;height:92px;z-index:4;pointer-events:none;background:linear-gradient(to bottom,var(--bg) 34%,transparent)}
.pad .back,.pad .mark-row.home{z-index:5}
.pad.docs .index{width:min(760px,calc(100% - 40px));margin:0 auto;padding:96px 0 40px}
.pad.docs .index>.corner{display:block;margin-bottom:12px}
.pad.docs h1{font:600 clamp(26px,4.2vw,38px)/1.1 var(--display);letter-spacing:-.01em;color:var(--ink);max-width:16ch;text-wrap:balance;margin:0 0 26px}
.pad.docs .search{display:flex;align-items:center;gap:12px;padding:0 16px 0 18px;height:54px;border-radius:99px;background:color-mix(in srgb,var(--bg) 55%,var(--panel-raised));
  border:1px solid var(--line);color:var(--ink-mid);transition:border-color .25s,box-shadow .25s}
.pad.docs .search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text)}
.pad.docs .search input{flex:1;min-width:0;background:none;border:0;outline:0;font:16px var(--ui);color:var(--ink)}
.pad.docs .search input::placeholder{color:var(--ink-faint)}
.pad.docs .search input::-webkit-search-cancel-button{-webkit-appearance:none}
.pad.docs .search kbd{font:10.5px var(--mono);color:var(--ink-faint);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.pad.docs .keys{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 34px}
.pad.docs .keys::before{content:"start here";font:10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);align-self:center;margin-right:4px}
.pad.docs .key{font:12px var(--mono);color:var(--ink-mid);border:1px solid var(--line);border-radius:99px;padding:6px 13px;text-decoration:none;background:var(--panel)}
.pad.docs .key:hover{border-color:var(--accent);color:var(--accent-text)}
.pad.docs .results section{margin:0 0 30px}
.pad.docs .results h4{font:10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 10px 2px;font-weight:500}
.pad.docs .entry{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:14px;row-gap:3px;align-items:baseline;
  padding:13px 16px;margin:0 0 6px;border-radius:12px;border:1px solid var(--line-soft);background:var(--panel);text-decoration:none;color:var(--ink);
  transition:border-color .2s,transform .2s}
.pad.docs .entry:hover{border-color:var(--accent);transform:translateY(-1px)}
.pad.docs .entry b{grid-column:1;font:600 14px var(--display);letter-spacing:.005em}
.pad.docs .entry small{grid-column:1;font:12.5px/1.5 var(--ui);color:var(--ink-mid)}
.pad.docs .entry .where{grid-column:2;grid-row:1/3;align-self:center;font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.pad.docs mark{background:none;color:var(--accent-text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 50%,transparent);text-underline-offset:3px}
.pad.docs .none p{font:14px/1.6 var(--ui);color:var(--ink-mid);margin:0}
.pad.docs .none a{color:var(--accent-text)}
.pad.docs .doorfoot.by{position:static;margin:20px 0 0}
/* arrives as the sky does: the search condenses out of the light, the index with the instrument */
body.bare .pad.docs .index>:not(.search):not(.skymap),body.bare .pad.docs .doorfoot{opacity:0}
body.bare .pad.docs .skymap:not(:has(.chart.settled)){opacity:0}

body.bare .pad.docs .search{animation:slidein 1.1s cubic-bezier(.2,.75,.25,1) both}
@keyframes slidein{from{transform:translateX(56px);opacity:0}to{transform:none;opacity:1}}
body.instrument .pad.docs .index>:not(.search):not(.skymap),body.instrument .pad.docs .doorfoot{animation:chromein 1.3s ease .45s both}
/* the docs keep no dwell: what is read there comes up as the sky lands (the same animation at both stages, so it
   does not run again when the instrument arrives) */
body.bare .pad.docs .index>:not(.search):not(.skymap),body.instrument .pad.docs .index>:not(.search):not(.skymap),
body.bare .pad.docs .back,body.instrument .pad.docs .back,body.bare .pad.docs .home,body.instrument .pad.docs .home{animation:chromein .7s ease .1s both;pointer-events:auto}
body.bare .pad.docs .search,body.instrument .pad.docs .search{animation:slidein .8s cubic-bezier(.2,.75,.25,1) both}
/* leaving, the words go first; the chart stays on its sky until the flight has come up over it, and goes out there */
body.withdrawing .pad.docs .index>:not(.skymap),body.withdrawing .pad.docs .doorfoot{animation:chromeout .45s ease both}
body.dispersing .pad.docs .search{animation:slideout .7s cubic-bezier(.5,0,.9,.45) both}
@keyframes slideout{to{transform:translateX(56px);opacity:0}}

/* ══ THE INFORMATION: the product, told in scenes ══════════════════════
   Each scene a statement and a piece of the product drawn live beside it —
   no screenshots, nothing to pop in. Scenes ease in as they are reached. */
/* the information's world: the dive from the door's coral planet lands here, the planet a great crescent under
   the title; it dims (and stops drawing) as the scenes are read, the page's own stars taking its place */
#infopad .orbitgl{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 1s ease}
#infopad.lit .orbitgl{opacity:var(--worldA,1);transition:opacity .35s linear}
#infopad.lit .sky{opacity:calc(1 - var(--worldA,1))}
#infopad.lit .vignette,#infopad.lit .hero .sun{opacity:0;animation:none}
#infopad.forming{background:transparent;z-index:37}
body.departing #infopad.formed{z-index:37}
#infopad.forming .scroll,#infopad.forming .back,#infopad.forming .home,#infopad.forming .topfade{opacity:0;transition:opacity .6s ease;pointer-events:none}
#infopad.formed .scroll,#infopad.formed .topfade{opacity:1;transition:opacity .9s ease}
#infopad.forming .orbitgl{transition:none}
/* the information is told at night, whatever the theme: its own palette, gold for the sun at its centre */
#infopad{color-scheme:dark;background:#04060c;--bg:#04060c;--line:#1c2434;--line-soft:#151b28;--ink:#ecebf6;--ink-mid:#a3a9bd;--ink-faint:#8d95ab;--ink-quiet:#a2a9bd;
  --accent:#d8b45a;--accent-text:#d8b45a;--sun:#ffe9c4;--sun-core:#fff6e6;--stars:1;--star-far:#e9edf8;--star-near:#f4f0ff}
.pad.info .about{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:0 0 56px}
/* the title and its line sit in the dark sky above the planet's crest (which rises to about two thirds of the way down), centred in it */
.pad.info .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 0 38svh;box-sizing:border-box}
.pad.info .sun{position:absolute;left:50%;top:24svh;width:min(64vw,560px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--sun) 30%,transparent),color-mix(in srgb,var(--sun) 8%,transparent) 38%,transparent 68%);
  animation:breathe-sun 7s ease-in-out infinite alternate}
.pad.info .sun i{position:absolute;left:50%;top:50%;width:9%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fffaf0,#ffe2a0 45%,var(--sun) 100%);
  box-shadow:0 0 50px color-mix(in srgb,var(--sun) 80%,transparent),0 0 160px color-mix(in srgb,var(--sun) 40%,transparent)}
.pad.info .hero>:not(.sun){position:relative}
.pad.info h1{font:600 clamp(38px,min(6vw,10svh),84px)/1 var(--display);letter-spacing:-.03em;color:var(--ink);max-width:16ch;text-wrap:balance;margin:0 0 24px;
  background:linear-gradient(180deg,#fff 20%,color-mix(in srgb,var(--ink) 70%,var(--sun)) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pad.info .lede{font:clamp(17px,1.7vw,20px)/1.55 var(--ui);color:#cfd3e2;max-width:52ch;margin:0;text-wrap:balance;text-shadow:0 1px 2px rgba(4,6,12,.9),0 0 18px rgba(4,6,12,.85)}
.pad.info .hero>.cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font:12px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#e4e6ef;text-shadow:0 1px 2px rgba(4,6,12,.95),0 0 12px rgba(4,6,12,.9)}
.pad.info .cue::after{content:"";display:block;width:1px;height:36px;margin:10px auto 0;background:linear-gradient(#e4e6ef,transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* a scene: copy and stage, side by side on a wide screen */
.pad.info .scene{min-height:86svh;display:flex;flex-direction:column;justify-content:center;padding:72px 0;opacity:0;transform:translateY(28px);
  transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.pad.info .scene.in{opacity:1;transform:none}
.pad.info .scene.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(32px,6vw,96px)}
.pad.info .scene.split.flip .prose{order:2}
.pad.info .kicker{display:block;font:500 12.5px var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--accent-text);margin:0 0 18px}
.pad.info h2{font:600 clamp(30px,4.2vw,54px)/1.02 var(--display);letter-spacing:-.025em;color:var(--ink);margin:0 0 22px;text-wrap:balance}
.pad.info h2.huge{font-size:clamp(34px,5.6vw,72px)}
.pad.info h3{font:600 16px var(--display);color:var(--ink);margin:16px 0 8px}
.pad.info p{font:16px/1.7 var(--ui);color:var(--ink-mid);margin:0 0 14px;max-width:52ch;text-wrap:pretty}
.pad.info p.big{font:500 clamp(19px,2vw,24px)/1.4 var(--display);color:var(--ink);max-width:30ch;letter-spacing:-.01em;margin:0 0 18px}
.pad.info .centre{text-align:center;margin-left:auto;margin-right:auto}
.pad.info .stage{margin:0;position:relative;display:grid;place-items:center}
/* the copy arrives a beat before its stage */
.pad.info .scene .prose>*{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.pad.info .scene.in .prose>*{opacity:1;transform:none}
.pad.info .scene.in .prose>:nth-child(2){transition-delay:.08s}.pad.info .scene.in .prose>:nth-child(3){transition-delay:.16s}.pad.info .scene.in .prose>:nth-child(4){transition-delay:.24s}

/* glass, as the app's panels are */
.pad.info .card{position:relative;border-radius:20px;padding:22px 24px;background:linear-gradient(180deg,rgba(26,30,52,.72),rgba(12,14,28,.72));
  border:1px solid rgba(255,255,255,.08);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4);color:var(--ink)}
.pad.info .btn{display:inline-block;font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.1);color:var(--ink-mid);background:rgba(255,255,255,.03)}
.pad.info .btn.go{background:#d8b45a;color:#1b1206;border-color:transparent}
.pad.info .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 14px var(--c)}

/* 2 · the orbit */
.pad.info .yearring svg{width:min(520px,100%);height:auto;overflow:visible}
.pad.info .yearring .rings circle{fill:none;stroke:rgba(214,210,232,.09);stroke-width:1}
.pad.info .yearring .rings .month{stroke:rgba(214,210,232,.22)}
.pad.info .yearring .rings text,.pad.info .yearring .bodies text{font:9px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;fill:rgba(214,210,232,.42)}
.pad.info .yearring .bodies text{fill:rgba(236,232,248,.72);font-size:9.5px}
.pad.info .yearring .due-ring{fill:none;stroke:#d8b45a;stroke-opacity:.35;stroke-width:1;stroke-dasharray:2 4}
.pad.info .yearring .date{font:600 10px "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;fill:#d8b45a}

/* 3 · the item */
.pad.info .card.unit{width:min(440px,100%)}
.pad.info .unit .head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.pad.info .unit .head b{font:600 20px var(--display);letter-spacing:-.01em}
.pad.info .unit .tag{margin-left:auto;font:12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8fb8ff;border:1px solid rgba(143,184,255,.3);border-radius:99px;padding:4px 9px}
.pad.info .unit dl{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin:0 0 20px}
.pad.info .unit dt{font:12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px}
.pad.info .unit dd{margin:0;font:500 15px var(--ui);color:var(--ink)}
.pad.info .unit .due{position:relative;display:block;height:1.4em}
.pad.info .unit .due span{position:absolute;left:0;top:0;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.pad.info .unit .due .d1{opacity:0;transform:translateY(10px);color:#d8b45a}
.pad.info .unit.done .due .d0{opacity:0;transform:translateY(-10px)}
.pad.info .unit.done .due .d1{opacity:1;transform:none}
.pad.info .unit .actions{display:flex;gap:8px;flex-wrap:wrap}
.pad.info .unit .btn.go{transition:transform .2s ease,filter .2s ease}
.pad.info .unit.press .btn.go{transform:scale(.95);filter:brightness(1.2)}
.pad.info .unit .history{display:grid;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07);font:12.5px var(--mono);letter-spacing:.06em;color:var(--ink-faint)}
.pad.info .unit .history .done{max-height:0;opacity:0;overflow:hidden;color:#4ade80;transition:max-height .6s ease,opacity .6s ease}
.pad.info .unit.done .history .done{max-height:20px;opacity:1}

/* 4 · the relay */
.pad.info .relay{display:grid;gap:14px;width:min(440px,100%)}
.pad.info .relay .step{display:grid;gap:6px;padding:18px 22px;opacity:.18;transform:translateX(18px) scale(.98);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s ease}
.pad.info .relay .step.on{opacity:1;transform:none}
.pad.info .relay .meta{font:12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.pad.info .relay b{font:600 17px var(--display);letter-spacing:-.01em}
.pad.info .relay .file{justify-self:start;font:12.5px var(--mono);color:#a78bfa;border:1px solid rgba(167,139,250,.35);border-radius:8px;padding:5px 9px;margin-top:4px}
.pad.info .relay .fields{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pad.info .relay .fields i{font:normal 12px var(--ui);color:var(--ink);background:rgba(216,180,90,.1);border:1px solid rgba(216,180,90,.25);border-radius:8px;padding:4px 8px}
.pad.info .relay .scan{position:absolute;inset:0;border-radius:20px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(216,180,90,.16),transparent);background-size:40% 100%;background-repeat:no-repeat;opacity:0}
.pad.info .relay .s2.on .scan{animation:scan 1.4s ease-in-out 1}
@keyframes scan{0%{opacity:1;background-position:-40% 0}100%{opacity:1;background-position:140% 0}}
.pad.info .relay .actions{display:flex;gap:8px;margin-top:6px}
.pad.info .relay .s3.on{box-shadow:0 0 0 1px rgba(216,180,90,.35),0 40px 90px -30px rgba(0,0,0,.85)}

/* 5 · around the household */
.pad.info .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.pad.info .tile{padding:24px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.07);
  opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1),border-color .3s}
.pad.info .scene.in .tile{opacity:1;transform:none}
.pad.info .scene.in .tile:nth-child(2){transition-delay:.07s}.pad.info .scene.in .tile:nth-child(3){transition-delay:.14s}
.pad.info .scene.in .tile:nth-child(4){transition-delay:.21s}.pad.info .scene.in .tile:nth-child(5){transition-delay:.28s}.pad.info .scene.in .tile:nth-child(6){transition-delay:.35s}
.pad.info .tile:hover{border-color:rgba(216,180,90,.3)}
.pad.info .tile p{font-size:14px;margin:0}
.pad.info .tile .people{display:flex}
.pad.info .tile .people i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;margin-right:-8px;font:600 12px var(--display);font-style:normal;color:#0b0d18;background:var(--c);box-shadow:0 0 0 2px #0d1020}
.pad.info .tile .glyph{display:flex;gap:6px;height:30px;align-items:center}
.pad.info .tile .glyph i{display:block;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.pad.info .tile .glyph.swatch i{width:22px;height:22px;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.pad.info .tile .glyph.line{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}
.pad.info .tile .glyph.line i{width:40px;height:3px;border-radius:2px;background:rgba(214,210,232,.25);box-shadow:none}
.pad.info .tile .glyph.line i:first-child{background:#4ade80;width:52px}
.pad.info .tile .glyph.phone i{width:16px;height:26px;border-radius:5px;background:none;border:1.5px solid rgba(214,210,232,.5);box-shadow:none}
.pad.info .tile .glyph.lock i{width:18px;height:14px;border-radius:3px;background:#d8b45a;box-shadow:0 0 12px rgba(216,180,90,.5);position:relative;margin-top:8px}
.pad.info .tile .glyph.lock i::before{content:"";position:absolute;left:3px;top:-9px;width:8px;height:9px;border:2px solid #d8b45a;border-bottom:0;border-radius:6px 6px 0 0}

/* 6 · the system */
.pad.info .system{display:block;width:min(520px,100%);height:auto;overflow:visible}
.pad.info .system .orbitline{fill:none;stroke:rgba(214,210,232,.12)}
.pad.info .system .lbl{font:12px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-faint)}
.pad.info .system .o1{transform-origin:200px 130px;animation:swing 26s linear infinite}
.pad.info .system .o2{transform-origin:200px 130px;animation:swing 26s linear infinite;animation-delay:-13s}
@keyframes swing{to{transform:rotate(360deg)}}
.pad.info .system .o1 text,.pad.info .system .o2 text{display:none}

/* the end: the statement, and four ports of call. Each is a small body on its own orbit, in its own colour;
   reached, the body goes round, the card lifts and its edge takes the colour */
.pad.info .scene.last{min-height:80svh;align-items:center;text-align:center}
/* the system's spec: what you bring, what it runs, what is optional, where your data lives, how it updates */
.pad.info .spec{margin:26px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.pad.info .spec>div{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.pad.info .spec dt{font:500 12px/1.9 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.pad.info .spec dd{margin:0;font:15.5px/1.55 var(--ui);color:#c6cbdb}
@media (max-width:599.98px){.pad.info .spec>div{grid-template-columns:1fr;gap:4px}}
.pad.info .ports{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:min(1060px,100%);margin:44px auto 0;text-align:left}
.pad.info .port{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:3px;align-items:center;
  padding:16px 34px 16px 16px;border-radius:16px;text-decoration:none;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -26px rgba(0,0,0,.9);
  opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .3s ease,background .3s ease}
.pad.info .scene.in .port{opacity:1;transform:none}
.pad.info .scene.in .port:nth-child(2){transition-delay:.07s,.07s,0s,0s,0s}.pad.info .scene.in .port:nth-child(3){transition-delay:.14s,.14s,0s,0s,0s}.pad.info .scene.in .port:nth-child(4){transition-delay:.21s,.21s,0s,0s,0s}
.pad.info .port .ob{grid-row:1/3;position:relative;width:38px;height:38px;border-radius:50%;border:1px solid color-mix(in srgb,var(--c) 40%,transparent);
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%)}
.pad.info .port .ob i{position:absolute;inset:-1px;border-radius:50%;transition:transform .9s cubic-bezier(.3,.6,.2,1)}
.pad.info .port .ob i::after{content:"";position:absolute;left:50%;top:0;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);background:var(--c);box-shadow:0 0 10px var(--c)}
.pad.info .port b{font:600 16px var(--display);letter-spacing:.005em;color:var(--ink);align-self:end}
.pad.info .port span:not(.ob){font:14px/1.35 var(--ui);color:var(--ink-mid);align-self:start}
.pad.info .port em{position:absolute;right:14px;top:14px;font:normal 14px var(--ui);color:var(--ink-faint);transition:transform .3s ease,color .3s ease}
.pad.info .port:hover,.pad.info .port:focus-visible{border-color:color-mix(in srgb,var(--c) 55%,transparent);outline:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 10%,transparent),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 3px color-mix(in srgb,var(--c) 14%,transparent),0 22px 44px -24px color-mix(in srgb,var(--c) 45%,transparent)}
.pad.info .scene.in .port:hover,.pad.info .scene.in .port:focus-visible{transform:translateY(-3px)}
.pad.info .port:hover .ob i,.pad.info .port:focus-visible .ob i{transform:rotate(360deg)}
.pad.info .port:hover em,.pad.info .port:focus-visible em{color:var(--c);transform:translate(2px,-2px)}
@media (max-width:900px){.pad.info .ports{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.pad.info .ports{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pad.info .port,.pad.info .port .ob i{transition:none;opacity:1;transform:none}}

body.bare .pad.info .hero>:not(.sun),body.bare .pad.info .scene{opacity:0}
body.bare .pad.info .sun{animation:condense 1.3s cubic-bezier(.2,.75,.25,1) both}
body.instrument .pad.info .hero>:not(.sun){animation:chromein 1.3s ease .45s both}
body.withdrawing .pad.info .about{animation:chromeout .45s ease both}
body.dispersing .pad.info .sun{animation:disperse .8s cubic-bezier(.5,0,.9,.45) both}
@media (max-width:860px){
  .pad.info .scene.split{grid-template-columns:1fr;gap:36px}.pad.info .scene.split.flip .prose{order:0}
  .pad.info .tiles{grid-template-columns:1fr 1fr}.pad.info .scene{min-height:auto;padding:64px 0}
}
@media (max-width:599.98px){.pad.info .tiles{grid-template-columns:1fr}.pad.info .about{width:calc(100% - 32px)}}
@media (max-width:700px){.pad.docs .index{padding-top:84px}.pad.docs .entry .where{display:none}}
@media (prefers-reduced-motion:reduce){.pad.info .scene,.pad.info .scene .prose>*,.pad.info .tile{transition:none;opacity:1;transform:none}.pad.info .sun,.pad.info .system .o1,.pad.info .system .o2,.pad.info .cue::after{animation:none}}

/* the docs are read at night, whatever the theme: a black sky, not a navy one, with the Milky Way across it */
#docspad{color-scheme:dark;background:#05060a;--bg:#05060a;--panel:rgba(20,21,28,.62);--panel-raised:rgba(26,27,36,.84);--line:#252731;--line-soft:#1a1c24;
  --ink:#eceaf2;--ink-mid:#aaaebd;--ink-faint:#8b90a1;--ink-quiet:#a0a5b5;--accent:#d8b45a;--accent-text:#d8b45a;--star-far:#eeebe4;--star-near:#f6f2ea}
/* set to the screen's height, as the flight draws it (its width shows more or less of the same sky): wide enough
   (3:1) for any window, so it meets the flight's last frame exactly (tools/docsky.cjs) */
.pad.docs .milky{position:absolute;inset:0;z-index:0;pointer-events:none;background:url(img/docs/milkyway-sky.webp) center/auto 100% no-repeat #05070d;opacity:1;transition:opacity .8s ease}
.pad.docs:has(.reader:not([hidden])) .milky{opacity:.3}
/* a portrait screen: the flight rests further out there (engine.js: PATH_TALL), the whole spiral filling the height,
   and the page wears that sky, drawn the same way (tools/docsky.cjs --tall) */
@media (max-aspect-ratio:10/11){.pad.docs .milky{background-image:url(img/docs/milkyway-sky-tall.webp)}}
/* the docs' chart: the sources as constellations across the sky */
.pad.docs .skymap{margin:26px -40px 6px;position:relative}
/* wide: the chart is the whole top of the page, ruled edge to edge, the
   heading and the search sitting on it and the figures keeping to its sides */
@media (min-width:1100px){
  /* the heading, the search under it and the way in sit in one column down the middle; the chart is laid behind
     the whole top of the page, its figures nestled down both sides of that column */
  .pad.docs .index{position:relative;width:min(640px,calc(100% - 40px));padding-top:clamp(110px,18svh,200px)}
  .pad.docs .index>:not(.skymap){position:relative;z-index:1}
  .pad.docs .index>.corner{text-align:center}
  .pad.docs h1{margin:0 auto 30px;text-align:center;font-size:clamp(34px,3.3vw,50px)}
  .pad.docs .keys{justify-content:center;margin-bottom:22px}
  .pad.docs .skymap{position:absolute;top:0;left:calc(50% - 50vw);width:100vw;margin:0;z-index:0;pointer-events:none}
  .pad.docs .skymap .star,.pad.docs .skymap .con .name{pointer-events:auto}
  .pad.docs .stamp{margin:0 0 30px}
  .pad.docs .chart.wide .con .name text{font-size:15px;letter-spacing:2.4px}
  .pad.docs .chart.wide .tip text{font-size:15.5px}
}
.pad.docs .chart{display:block;width:100%;height:auto;overflow:visible}
.pad.docs .con .lines line{stroke:var(--c);stroke-opacity:.5;stroke-width:1;stroke-linecap:round;transition:stroke-opacity .5s}
.pad.docs .chart.drawn .con .lines line{animation:drawline 1.1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.35s * var(--g) + 120ms * var(--i))}
@keyframes drawline{to{stroke-dashoffset:0}}
.pad.docs .chart:not(.drawn) .con .lines line{stroke-dashoffset:0}
.pad.docs .star{cursor:pointer;outline:0;opacity:1}
.pad.docs .chart.drawn .star{animation:starin .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.35s * var(--g) + 120ms * var(--i))}
@keyframes starin{from{opacity:0}to{opacity:1}}
.pad.docs .star .hit{fill:transparent}
.pad.docs .star .dot{fill:var(--sc,var(--ink));transition:fill .35s,r .35s,opacity .4s}
.pad.docs .star .glow{fill:var(--c);opacity:0;transition:opacity .35s}
.pad.docs .star.key .dot{fill:var(--c)}
.pad.docs .star.lit .dot,.pad.docs .star.hot .dot,.pad.docs .star:focus-visible .dot{fill:var(--c);r:4}
.pad.docs .star.lit .glow,.pad.docs .star.hot .glow,.pad.docs .star:focus-visible .glow{opacity:.35}
.pad.docs .star.hot .glow{opacity:.55}
.pad.docs .star.dim .dot{opacity:.22;animation:none}
.pad.docs .star .ring{fill:none;stroke:var(--c);stroke-width:.8;stroke-opacity:0;transition:stroke-opacity .4s}
.pad.docs .star.read .ring{stroke-opacity:.55}
.pad.docs .star.read.dim .ring{stroke-opacity:.15}
/* the stars breathe; the field twinkles more slowly */
.pad.docs .chart.drawn .star:nth-child(odd) .dot{animation:twinkle var(--tw,4s) ease-in-out infinite alternate;animation-delay:calc(.35s * var(--g) + 120ms * var(--i) + var(--td,0s))}
.pad.docs .chart.drawn .star.dim .dot,.pad.docs .chart.drawn .star.hot .dot,.pad.docs .chart.drawn .star.lit .dot{animation:none}
@keyframes twinkle{from{opacity:1}to{opacity:.55}}
.pad.docs .field circle{opacity:var(--o)}
/* each star of a figure in its own glow, the brightest with a fine cross; a faint cloud of the figure's colour about it */
.pad.docs .star .aura{opacity:.85;transition:opacity .35s;pointer-events:none}
.pad.docs .star.dim .aura,.pad.docs .star.dim .spk{opacity:.15}
.pad.docs .star .spk{opacity:.55;pointer-events:none}
.pad.docs .star.hot .aura,.pad.docs .star.lit .aura{opacity:1}
.pad.docs .con .neb{pointer-events:none;opacity:.75;transition:opacity .5s}
.pad.docs .con.quiet .neb{opacity:.25}
.pad.docs .con.chosen .neb{opacity:1}
.pad.docs .grat path{fill:none;stroke:#e9e3d6;stroke-opacity:.06;stroke-width:.7}
.pad.docs .con:has(.name:hover) .lines line,.pad.docs .con:has(.name:focus-visible) .lines line{stroke-opacity:.85}
.pad.docs .meteor{stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;opacity:0;stroke-dasharray:var(--l) var(--l);stroke-dashoffset:var(--l)}
.pad.docs .meteor.go{animation:meteor 1.4s cubic-bezier(.3,.6,.3,1) both}
@keyframes meteor{0%{opacity:0;stroke-dashoffset:var(--l)}12%{opacity:.9}70%{opacity:.5}100%{opacity:0;stroke-dashoffset:calc(-1 * var(--l))}}
@media (prefers-reduced-motion:reduce){.pad.docs .chart.drawn .star .dot{animation:none}}
.pad.docs .con.quiet .lines line{stroke-opacity:.12}
.pad.docs .con.chosen .lines line{stroke-opacity:.85}
.pad.docs .con .name{cursor:pointer;outline:0}
.pad.docs .con .name line{stroke:var(--c);stroke-opacity:.4;stroke-width:.8}
/* a figure's name: set small and wide, lit soft on the sky; a shadow under it (pads.js: #lblshade) rather than an outline round it,
   so it reads over the bright band without a hard edge */
.pad.docs .con .name text{font:500 12px "JetBrains Mono",monospace;letter-spacing:2.6px;text-transform:uppercase;fill:#d4d7e2;fill-opacity:.88;transition:fill .3s;filter:url(#lblshade)}
.pad.docs .con .name .n{fill:var(--c);fill-opacity:.9;letter-spacing:1px}
.pad.docs .con .name:hover text,.pad.docs .con .name:focus-visible text,.pad.docs .con.chosen .name text{fill:var(--c)}
.pad.docs .con.chosen .name .n{fill:var(--c)}
.pad.docs .con.quiet .name text{fill:var(--ink-faint)}
.pad.docs .chart .tip{pointer-events:none;opacity:0;transition:opacity .15s}
.pad.docs .chart .tip.show{opacity:1}
.pad.docs .chart .tip line{stroke:var(--c);stroke-width:.8}
.pad.docs .chart .tip text{font:500 11.5px "JetBrains Mono",monospace;letter-spacing:.6px;fill:var(--ink);filter:url(#lblshade)}
.pad.docs .entry.hot{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 14%,transparent)}
.pad.docs .entry.pick{animation:pick 1.8s ease both}
@keyframes pick{0%,60%{border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)}100%{}}
.pad.docs .entry.hot .star{opacity:1;box-shadow:0 0 14px var(--c)}
.pad.docs .results h4 .linkish{margin-left:10px;font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-faint)}
.pad.docs .results h4 .linkish:hover{color:var(--accent-text)}
@media (max-width:700px){.pad.docs .skymap{margin:18px -10px 0}.pad.docs .con .name text{font-size:17px;letter-spacing:1.4px}.pad.docs .chart .tip text{font-size:18px}.pad.docs .star .hit{r:18}}
/* the entries: stars in their constellation's colour, arriving in order */
.pad.docs .entry{grid-template-columns:auto 1fr auto;animation:ivopen .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(28ms * var(--i))}
.pad.docs .entry .star{grid-row:1/3;align-self:center;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px color-mix(in srgb,var(--c) 70%,transparent);opacity:.85}
.pad.docs .entry b{grid-column:2}
.pad.docs .entry small{grid-column:2}
.pad.docs .entry .where{grid-column:3}
.pad.docs .entry.read .star{opacity:.35;box-shadow:none}
.pad.docs .entry.read b::after{content:"read";margin-left:10px;font:9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);vertical-align:middle}
.pad.docs .entry.cursor{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.pad.docs .results h4 i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c,var(--ink-faint));margin:0 8px 1px 0;box-shadow:0 0 8px var(--c,transparent)}
.pad.docs .key{border-color:color-mix(in srgb,var(--c) 28%,var(--line))}
.pad.docs .key:hover{border-color:var(--c);color:var(--c)}
.pad.docs .linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent-text);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pad.docs .hint{margin:8px 0 0;font:10.5px var(--mono);letter-spacing:.08em;color:var(--ink-faint);text-align:center}
.pad.docs .hint kbd{font:inherit;border:1px solid var(--line);border-radius:5px;padding:1px 6px;margin:0 2px}
.pad.docs .hint .sep{margin:0 10px}
.pad.docs .search{box-shadow:0 20px 60px rgba(0,0,0,.35)}
@media (max-width:700px){.pad.docs .hint{display:none}}

/* ══ THE READER: a source from the repositories, set as a page ══ */
.pad.docs .stamp{margin:8px 0 22px;text-align:center;font:12px var(--mono);letter-spacing:.08em;color:var(--ink-faint)}
.pad.docs .reader{--c:var(--accent);width:min(1060px,calc(100% - 40px));margin:0 auto;padding:88px 0 60px}
.pad.docs .reader.in{animation:chromein .5s ease both}
.pad.docs .readhead .from{display:block;margin-bottom:14px;color:var(--c);text-shadow:none}
.pad.docs .readhead .todocs{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink-quiet);cursor:pointer}
.pad.docs .readhead .todocs:hover{color:var(--accent-text)}
.pad.docs .readhead h1{font:600 clamp(30px,4.4vw,46px)/1.08 var(--display);letter-spacing:-.015em;color:var(--ink);margin:0 0 14px;max-width:22ch;text-wrap:balance}
.pad.docs .readhead .source{margin:0 0 44px;font:11px var(--mono);letter-spacing:.06em;color:var(--ink-faint)}
.pad.docs .readhead .source a{color:var(--ink-mid);text-decoration:none;border-bottom:1px solid var(--line)}
.pad.docs .readhead .source a:hover{color:var(--accent-text)}
.pad.docs .readgrid{display:grid;grid-template-columns:minmax(0,720px) 240px;gap:56px;align-items:start}
.pad.docs .onpage{position:sticky;top:96px;order:2}
.pad.docs .onpage .corner{display:block;margin-bottom:6px}
.pad.docs .pagechart{display:block;width:100%;height:auto;overflow:visible}
.pad.docs .pagechart .lines line{stroke:var(--c);stroke-opacity:.38;stroke-width:1}
.pad.docs .pagechart.drawn .lines line{animation:drawline .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(90ms * var(--i))}
.pad.docs .pagechart .pstar{cursor:pointer;outline:0}
.pad.docs .pagechart.drawn .pstar{animation:starin .5s ease both;animation-delay:calc(90ms * var(--i))}
.pad.docs .pagechart .hit{fill:transparent}
.pad.docs .pagechart .dot{fill:var(--ink-mid);transition:fill .3s,r .3s}
.pad.docs .pagechart .glow{fill:var(--c);opacity:0;transition:opacity .3s}
.pad.docs .pagechart .ring{fill:none;stroke:var(--c);stroke-width:.8;stroke-opacity:0;transition:stroke-opacity .3s}
.pad.docs .pagechart .pstar.read .ring{stroke-opacity:.5}
.pad.docs .pagechart text{font:12.5px var(--ui);fill:var(--ink-mid);transition:fill .3s;paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.pad.docs .pagechart .pstar:hover text,.pad.docs .pagechart .pstar:focus-visible text{fill:var(--ink)}
.pad.docs .pagechart .pstar:hover .dot,.pad.docs .pagechart .pstar:focus-visible .dot{fill:var(--c)}
.pad.docs .pagechart .pstar.on .dot{fill:var(--c);r:3.8}
.pad.docs .pagechart .pstar.on .glow{opacity:.4}
.pad.docs .pagechart .pstar.on text{fill:var(--c)}
.pad.docs .others{order:0;position:sticky;top:96px;display:none}
.pad.docs .others .corner{display:block;margin-bottom:10px}
.pad.docs .others .mini{display:block;text-decoration:none;color:var(--ink-faint);margin:0 0 6px;padding:6px 8px 8px;border-radius:12px;transition:background .25s,color .25s;animation:chromein .6s ease both;animation-delay:calc(70ms * var(--i))}
.pad.docs .others .mini svg{display:block;width:100%;height:auto;overflow:visible}
.pad.docs .others .mini .lines line{stroke:var(--c);stroke-opacity:.35;stroke-width:1;transition:stroke-opacity .25s}
.pad.docs .others .mini .stars circle{fill:var(--ink-mid);transition:fill .25s}
.pad.docs .others .mini span{display:block;margin-top:2px;font:500 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;transition:color .25s}
.pad.docs .others .mini:hover,.pad.docs .others .mini:focus-visible{background:var(--panel);color:var(--c);outline:0}
.pad.docs .others .mini:hover .lines line{stroke-opacity:.85}
.pad.docs .others .mini:hover .stars circle{fill:var(--c)}
@media (min-width:1200px){.pad.docs .reader{width:min(1240px,calc(100% - 48px))}.pad.docs .readgrid{grid-template-columns:200px minmax(0,720px) 240px;gap:52px}.pad.docs .others{display:block}}
@media (min-width:1200px) and (max-height:760px){.pad.docs .others{position:static}}
.pad.docs .body{order:1;min-width:0;font:16px/1.7 var(--ui);color:var(--ink)}
.pad.docs .body h2,.pad.docs .body h3,.pad.docs .body h4{position:relative;color:var(--ink);scroll-margin-top:96px}
.pad.docs .body h2{font:600 26px/1.2 var(--display);letter-spacing:-.012em;margin:56px 0 16px}
.pad.docs .body .sec:first-child h2{margin-top:0}
.pad.docs .body h3{font:600 18.5px/1.3 var(--display);margin:36px 0 10px}
.pad.docs .body h4{font:600 15px/1.4 var(--display);margin:26px 0 8px}
.pad.docs .body .anchor{position:absolute;left:-1.2em;width:1.2em;text-align:center;color:var(--ink-faint);text-decoration:none;font-weight:400;opacity:0;transition:opacity .2s}
.pad.docs .body h2:hover .anchor,.pad.docs .body h3:hover .anchor,.pad.docs .body h4:hover .anchor{opacity:.75}
.pad.docs .body p{margin:0 0 16px}
.pad.docs .body a{color:var(--accent-text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset:3px}
.pad.docs .body a:hover{text-decoration-color:var(--accent)}
.pad.docs .body code{font:13.5px var(--mono);background:var(--panel);border:1px solid var(--line-soft);border-radius:6px;padding:1px 6px;color:var(--ink)}
.pad.docs .body pre{position:relative;margin:0 0 20px;padding:16px 18px;background:var(--panel-raised);border:1px solid var(--line);border-radius:14px;overflow:auto;font:13px/1.6 var(--mono);color:var(--ink);tab-size:2}
.pad.docs .body pre code{background:none;border:0;padding:0;font:inherit}
.pad.docs .body pre.code[data-lang]::before{content:attr(data-lang);position:absolute;top:8px;right:14px;font:9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.pad.docs .body ul,.pad.docs .body ol{margin:0 0 16px;padding-left:24px}
.pad.docs .body li{margin:5px 0}
.pad.docs .body li>p{margin:0 0 6px}
.pad.docs .body table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 24px;font-size:14px;line-height:1.5}
.pad.docs .body th{text-align:left;font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);padding:8px 12px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.pad.docs .body td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.pad.docs .body td code{white-space:nowrap}
.pad.docs .body .alert{margin:0 0 20px;padding:14px 18px;border-left:2px solid var(--a,var(--accent));background:var(--panel);border-radius:0 12px 12px 0}
.pad.docs .body .alert b{display:block;font:500 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--a,var(--accent));margin-bottom:6px}
.pad.docs .body .alert :last-child{margin-bottom:0}
.pad.docs .body .alert.note{--a:var(--upcoming)}
.pad.docs .body .alert.tip{--a:var(--ok)}
.pad.docs .body .alert.important{--a:var(--accent)}
.pad.docs .body .alert.warning{--a:var(--warm)}
.pad.docs .body .alert.caution{--a:var(--overdue)}
.pad.docs .body blockquote{margin:0 0 18px;padding:2px 18px;border-left:2px solid var(--line);color:var(--ink-mid)}
.pad.docs .body .centred{text-align:center}
.pad.docs .body img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line-soft);margin:6px 0 18px}
.pad.docs .body hr{border:0;border-top:1px solid var(--line-soft);margin:36px 0}
.pad.docs .body figure.diagram{margin:0 0 22px;padding:18px;background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;overflow-x:auto}
.pad.docs .body figure.diagram svg{max-width:100%;height:auto;display:block;margin:0 auto}
.pad.docs .body figure.diagram figcaption{font:10.5px var(--mono);letter-spacing:.1em;color:var(--ink-faint)}
.pad.docs .body details{margin:0 0 16px;padding:12px 16px;border:1px solid var(--line-soft);border-radius:12px}
.pad.docs .body summary{cursor:pointer;font-weight:500}
.pad.docs .readnav{display:flex;justify-content:space-between;gap:20px;margin-top:64px;padding-top:24px;border-top:1px solid var(--line-soft)}
.pad.docs .readnav a{--c:var(--accent);text-decoration:none;color:var(--ink-mid);font:500 15px var(--display);max-width:46%;transition:color .25s}
.pad.docs .readnav a:hover{color:var(--c)}
.pad.docs .readnav a b{display:block;font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px}
.pad.docs .readnav .next{text-align:right}
body.withdrawing .pad.docs .reader{animation:chromeout .45s ease both}
@media (max-width:900px){.pad.docs .readgrid{grid-template-columns:1fr;gap:0}.pad.docs .onpage{position:static;order:0;margin-bottom:30px;max-width:320px}.pad.docs .body{font-size:15.5px}.pad.docs .body h2{font-size:23px;margin-top:44px}.pad.docs .body .anchor{display:none}}

/* arrived by flight: the chart is already there, whole, under the canvas's */
.pad.docs .chart.settled .con .lines line{animation:none;stroke-dashoffset:0}
.pad.docs .chart.drawn.settled .star{animation:none;opacity:1}
.pad.docs .chart.drawn.settled .star .dot{animation:none}

/* ══ THE INSTALL: into orbit ════════════════════════════════════════════
   The scene is always space, whatever the pack: the words are set for the dark */
#installpad{background:#03040a;color:#ecebf6;user-select:none;-webkit-user-select:none;overflow:hidden}
#installpad .poster,#installpad .orbitgl{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#installpad .poster{background:#03040a url(img/install/orbit.webp) center/cover no-repeat;transition:opacity 1s ease}
@media (max-aspect-ratio:10/11){#installpad .poster{background-image:url(img/install/orbit-tall.webp)}}
#installpad .orbitgl{opacity:0;transition:opacity 1s ease}
#installpad.lit .orbitgl{opacity:1}
#installpad.lit .poster,#installpad .sky,#installpad .vignette{opacity:0}
#installpad.flat .poster{opacity:1}
/* a shade in the corner the words stand in, so they read over any part of the sky */
#installpad .scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(90% 75% at 0% 0%,rgba(3,4,10,.62),rgba(3,4,10,.25) 55%,transparent 80%)}
#installpad .back,#installpad .home{color:rgba(214,210,232,.7)}
#installpad .back:hover,#installpad .home:hover{color:#d8b45a}
#installpad .words{position:absolute;z-index:3;left:clamp(24px,7vw,128px);top:clamp(88px,17vh,220px);width:min(640px,calc(100% - 48px));user-select:text;-webkit-user-select:text}
#installpad .words h1{font:600 clamp(30px,3.9vw,58px)/1.04 var(--display);letter-spacing:-.022em;white-space:nowrap;color:#f4f2fb;margin:0 0 30px;text-shadow:0 2px 32px rgba(0,0,0,.55)}
#installpad .theline{display:flex;align-items:center;gap:10px;margin:0;padding:6px 6px 6px 18px;border-radius:14px;
  background:rgba(12,9,28,.52);border:1px solid rgba(183,154,224,.24);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 50px -20px rgba(0,0,0,.8)}
#installpad .theline code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none;font:13px/2.4 var(--mono);color:#e7e2f6;cursor:copy;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
#installpad .theline code::-webkit-scrollbar{display:none}
#installpad .theline code[data-done]{color:#d8b45a}
#installpad .theline .prompt{color:#b79ae0;margin-right:.7em}
#installpad .theline .copy{flex:none;font:600 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#1b1206;background:#d8b45a;border:0;border-radius:9px;padding:11px 15px;cursor:pointer;transition:filter .2s,transform .2s}
#installpad .theline .copy:hover{filter:brightness(1.12)}
#installpad .theline .copy:active{transform:scale(.97)}
#installpad .made{margin:14px 0 0 18px;font:11.5px/1.5 var(--mono);letter-spacing:.06em;color:rgba(231,226,246,.5);text-shadow:0 1px 12px rgba(0,0,0,.6)}
#installpad .from{margin:16px 2px 0;font:13.5px/1.6 var(--ui);color:rgba(214,210,232,.7);max-width:46ch}
#installpad .from code{font:12.5px var(--mono);color:rgba(236,232,248,.85)}
#installpad .doorfoot.by{z-index:3;color:rgba(214,210,232,.55)}
#installpad .credit{position:absolute;z-index:3;right:24px;bottom:calc(18px + env(safe-area-inset-bottom,0px));margin:0;font:9px/1.4 var(--mono);letter-spacing:.06em;color:rgba(214,210,232,.3);max-width:calc(100% - 48px);text-align:right}
#installpad .credit a{color:inherit;text-decoration:none;transition:color .2s}
#installpad .credit a:hover{color:rgba(236,232,248,.8)}
#installpad.forming .credit{opacity:0}
@media (max-width:599.98px){#installpad .credit{bottom:calc(46px + env(safe-area-inset-bottom,0px))}}
#installpad .doorfoot.by a{color:rgba(214,210,232,.75)}
@media (max-aspect-ratio:10/11){
  #installpad .scrim{background:linear-gradient(180deg,rgba(3,4,10,.6),rgba(3,4,10,.2) 45%,transparent 60%)}
  #installpad .words{top:clamp(76px,12svh,140px)}
  #installpad .words h1{font-size:clamp(28px,8.2vw,44px);margin-bottom:22px}
}
/* the words arrive once the camera has all but settled */
body.instrument #installpad .words{animation:chromein .9s ease .05s both}
body.withdrawing #installpad .words{animation:chromeout .45s ease both}
/* forming: the install is over the door with no floor of its own; the shot starts from the planet that was clicked */
#installpad.forming{background:transparent;z-index:37}
/* and above the door until the door has gone, so the dawn never shows through on arrival */
body.departing #installpad.formed{z-index:37}
#installpad.forming .back,#installpad.forming .home,#installpad.forming .doorfoot,#installpad.forming .words,#installpad.forming .scrim,#installpad.forming .poster{opacity:0;transition:opacity .6s ease;pointer-events:none;animation:none}
#installpad.formed .back,#installpad.formed .home,#installpad.formed .doorfoot,#installpad.formed .scrim{opacity:1;transition:opacity .9s ease}
#installpad.forming .orbitgl{transition:none}
/* while the camera leaves, the door keeps only its sky and its sunrise; the planet that was clicked is the canvas's now */
body.departing #door .lockup>:not(.planets),body.departing #door .doorfoot,body.departing #door .trdot,body.departing #door .planet:not(.chosen) .body,body.departing #door .planet:not(.chosen) .tag,
body.departing #door .planet.chosen .tag,body.departing #door .planet.chosen .halo{opacity:0;transition:opacity .7s ease}
/* the dot holds still, swells and glows as the camera finds it, then gives way to the planet coming up through it */
body.departing #door .planet.chosen .spin{animation-play-state:paused}
body.departing #door .planet.chosen .body{transform:translate(-50%,-50%) scale(1.5);box-shadow:0 0 calc(5 * var(--u)) calc(1.4 * var(--u)) color-mix(in srgb,var(--c) 60%,transparent);opacity:0;
  transition:transform .35s cubic-bezier(.3,0,.2,1),box-shadow .35s ease,opacity .25s ease .2s}
/* the lit door: its world flares as the camera finds it, bright in its own colour, and the dive comes up out of the
   flare (install.js: flare), so the small picture never meets the world side by side */
html.rich body.departing #door .planet.chosen .body{box-shadow:none;filter:brightness(1.5) drop-shadow(0 0 calc(4 * var(--u)) var(--c));opacity:0;
  transition:transform .24s cubic-bezier(.3,0,.2,1),filter .18s ease,opacity .2s ease .1s}
/* the rack focus: the dawn goes soft and dim behind the planet */
#door .dsky,#door .world{transition:filter .9s cubic-bezier(.4,0,.2,1)}
body.racking #door .dsky,body.racking #door .world{filter:blur(10px) brightness(.55)}
/* covered by the world's own sky: not drawn at all */
body.covered #door{visibility:hidden}
/* under the flight, and under a dive's blur (racking: a blur redone every frame anything beneath it moves), the
   door's slow loops wait */
body.showwarp #door .dsky svg,body.showwarp #door .rays svg,body.showwarp #door .world .breath,
body.racking #door .dsky svg,body.racking #door .rays svg,body.racking #door .world .breath{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){body.racking #door .dsky,body.racking #door .world{filter:brightness(.55)}}
body.departing #door .loginchrome{pointer-events:none}

/* ══ THE DOOR, LIT (html.rich): the site's planets (the lockup's own lit look is the shared door's: assets/door/door.css). The planets are small worlds of their own (tools/planets.py),
   backlit by the sunrise and turned as they travel so the light always comes from it (pads.js); the ring and
   the orbits catch the dawn from below; the gold world on the ring draws a trail of light behind it; the name
   is lit from beneath; the way in is a dark glass pill ringed like the logo ══ */
/* the bodies: each picture is 2.57 times its body, for the haze and the rings round it */
/* each world at its own size: the ringed giant largest, the moon smallest */
html.rich .planet .body{--bs:15;width:calc(var(--bs) * var(--u));height:calc(var(--bs) * var(--u));background:none}
html.rich .planet[data-section=install] .body{--bs:17.5}
html.rich .planet[data-section=docs] .body{--bs:12}
/* each picture is turned to the sun as its planet travels (pads.js: keyframes for the lap, on the compositor) */
html.rich .planet .body::before,html.rich .planets .trdot i::before{content:"";position:absolute;inset:-78.6%;background:center/100% no-repeat;rotate:var(--lr,0rad);will-change:transform}
html.rich .planet .body::before{animation:spinback var(--dur) linear infinite reverse;animation-delay:var(--delay)}
html.rich .planets .trdot i::before{animation:spinback 40s linear infinite reverse}
html.rich .planet:hover .body::before,html.rich .planet:focus-visible .body::before,body.departing #door .planet.chosen .body::before{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){html.rich .planet .body::before,html.rich .planets .trdot i::before{animation:none}}
html.rich .planet[data-section=install] .body::before{background-image:url(img/door/planet-install.webp)}
html.rich .planet[data-section=info] .body::before{background-image:url(img/door/planet-info.webp)}
html.rich .planet[data-section=docs] .body::before{background-image:url(img/door/planet-docs.webp)}
html.rich .planets .trdot i{width:calc(15 * var(--u));height:calc(15 * var(--u));background:none}
html.rich .planets .trdot i::before{background-image:url(img/door/planet-gold.webp)}
/* no diagram over the worlds: the halo and the leader are gone, and the halo comes back, in the world's colour, only to answer the pointer */
html.rich .planet .halo{width:calc((var(--bs,15) + 9) * var(--u));height:calc((var(--bs,15) + 9) * var(--u));border-color:color-mix(in srgb,var(--c) 60%,transparent);opacity:0;transition:opacity .25s,border-color .25s}
html.rich .planet[data-section=install] .halo{--bs:17.5}html.rich .planet[data-section=docs] .halo{--bs:12}
html.rich .planet:hover .halo,html.rich .planet:focus-visible .halo{opacity:1}
html.rich .planet:hover .body,html.rich .planet:focus-visible .body{box-shadow:none;filter:drop-shadow(0 0 calc(3 * var(--u)) color-mix(in srgb,var(--c) 70%,transparent))}
html.rich .planet .tag{color:color-mix(in srgb,var(--c) 35%,#e4e7f2);letter-spacing:calc(1 * var(--u))}
/* the orbits in three dimensions (pads.js draws them): the flat circles give way to the tilted paths, the far half
   under the ring and the near half over it; each planet is placed by the page, every frame, at its depth: behind
   the ring and the name, or in front of them. The way in comes up closer, as the orbits no longer reach below */
html.rich #door .o3 path{fill:none;stroke:url(#orblit);stroke-width:.75;stroke-dasharray:.5 2;stroke-linecap:round}
html.rich #door .o3.far path{stroke-opacity:.5}
html.rich #door .lockup .orbits3d,html.rich #door .lockup .o3{opacity:0;transition:opacity 1.4s ease 1s}
html.rich body.lit #door .lockup .o3{opacity:1}
html.rich .planets .trdot{z-index:3}
html.rich .planet .spin{animation:none;will-change:transform}
html.rich .planet .spin i{top:0}
html.rich .planet .body::before{animation:none}
html.rich .planet .tag{z-index:6}
html.rich #door .gate-wrap{margin-top:calc(var(--R) * .03)}
/* the gold world's wake: an arc of the ring lit behind it, fading back the way it came */
html.rich .planets .trdot .trail{display:block;position:absolute;left:calc(-75 * var(--u));top:calc(-75 * var(--u));width:calc(150 * var(--u));height:calc(150 * var(--u));border-radius:50%;
  background:conic-gradient(from -50deg,rgba(255,214,140,0) 0deg,rgba(255,214,140,.08) 50deg,rgba(255,222,160,.75) 108deg,rgba(255,222,160,0) 109deg);
  -webkit-mask:radial-gradient(closest-side,transparent 92.4%,#000 95.4%,#000 96.6%,transparent 99.6%);mask:radial-gradient(closest-side,transparent 92.4%,#000 95.4%,#000 96.6%,transparent 99.6%)}

/* ══ MAINTENANCE (html[data-maintenance]): the door alone ═══════════════════════════════════════════════
   The planets turn on their orbits but are only the picture: no names, no rings about them, nothing to press.
   In place of the way in, the message ("Launching soon", "Back shortly"): a quiet line in the lockup's own gold,
   a hairline either side, its last three points lighting in turn: still to come, not missing */
.notice{display:none}
html[data-maintenance] #door .gate{display:none}
html[data-maintenance] #door .planet .tag,html[data-maintenance] #door .planet .halo{display:none}
html[data-maintenance] #door .planet,html[data-maintenance] #door .planet *{pointer-events:none!important;cursor:default}
html[data-maintenance] #door .notice{display:inline-flex;align-items:center;margin:0;white-space:nowrap;
  font:500 clamp(10.5px,calc(var(--R) * .029),13px) var(--mono);letter-spacing:.42em;text-transform:uppercase;color:#e2cd9c;
  opacity:0;transform:translateY(10px);transition:opacity 1.4s ease 1.25s,transform 1.4s cubic-bezier(.2,.7,.2,1) 1.25s}
html[data-maintenance] body.lit #door .notice{opacity:.86;transform:none}
html[data-maintenance] #door .notice::before,html[data-maintenance] #door .notice::after{content:"";width:calc(var(--R) * .1);height:1px;flex:none}
html[data-maintenance] #door .notice::before{margin-right:1.6em;background:linear-gradient(90deg,transparent,rgba(216,180,90,.6))}
html[data-maintenance] #door .notice::after{margin-left:1.2em;background:linear-gradient(90deg,rgba(216,180,90,.6),transparent)}
html[data-maintenance] #door .notice .d{display:inline-flex;letter-spacing:.18em;margin-left:-.3em}
html[data-maintenance] #door .notice .d i{font-style:normal;opacity:.2;animation:noticedot 2.6s ease-in-out infinite}
html[data-maintenance] #door .notice .d i:nth-child(2){animation-delay:.35s}
html[data-maintenance] #door .notice .d i:nth-child(3){animation-delay:.7s}
@keyframes noticedot{0%,100%{opacity:.2}30%,55%{opacity:1}}
@media (prefers-reduced-motion:reduce){html[data-maintenance] #door .notice .d i{animation:none;opacity:.7}}

/* ══ THE PLANETS, LIVE (?door3d, planets3d.js): the three worlds drawn as lit spheres on two canvases the script lays
   either side of the ring, a square round its centre: the far halves of the orbits under the ring and the name, the
   near halves over them, as the anchors go (pads.js: z-index 1 and 5). They come and go as the planets do ══ */
#door .lockup canvas.planets3d{position:absolute;inset:0;pointer-events:none}
#door .lockup canvas.planets3d.far{z-index:1}
#door .lockup canvas.planets3d.near{z-index:5}
body.launching #door .lockup canvas.planets3d,body.showwarp #door .lockup canvas.planets3d{opacity:0;transition:opacity .3s}
body.departing #door .lockup canvas.planets3d{opacity:0;transition:opacity .7s ease}
/* once they are drawn the pictures give way (on the picture itself, the body's ::before: the body is still what the
   dives measure and swell); the anchor, its halo and its name stay, and still answer the pointer. The planet a dive
   goes to has its picture back at once, for the swell, and loses it again once it is set down */
/* the docs' moon is planets3d's from its first frame: its picture goes as the moon comes; the install's and the
   information's pictures stay until their own worlds draw them (data-worldplanets, below): a stand-in sphere's
   bright, shadowless rings dimming into the world's would catch the eye */
html.planets3d #door .planet[data-section=docs] .body::before{opacity:0;transition:opacity .6s}
html.planets3d #door .planet.chosen .body::before{opacity:1;transition:none}
/* ══ THE WORLD'S OWN PLANETS (?door3d, install.js: doorPlanets): the install's and the information's planets drawn on
   the door by the world each dives into, each in a small canvas of its own at its place on the orbit, behind the ring
   or before it as the anchors go (pads.js: z-index 1 and 5), so a dive goes on from the very frame on the door ══ */
#door .lockup canvas.worldplanet{position:absolute;left:0;top:0;pointer-events:none;z-index:1;transition:opacity .6s ease}
#door .lockup canvas.worldplanet.near{z-index:5}
/* not drawn since the door was last left: nothing stale is shown, and it is back on the door's first frame */
#door .lockup canvas.worldplanet.away{opacity:0}
body.launching #door .lockup canvas.worldplanet,body.showwarp #door .lockup canvas.worldplanet{opacity:0;transition:opacity .3s}
body.departing #door .lockup canvas.worldplanet{opacity:0;transition:opacity .7s ease}
/* the planet a dive goes to stays as it is until the shot's first frame is up over it (the same frame), then goes as
   the rest do */
body.departing #door .lockup>canvas.worldplanet.held{opacity:1;transition:none}
/* and their pictures are not brought back for the swell: the world swells the planet itself */
html[data-worldplanets~=install] #door .planet[data-section=install] .body::before,
html[data-worldplanets~=install] #door .planet[data-section=install].chosen .body::before,
html[data-worldplanets~=info] #door .planet[data-section=info] .body::before,
html[data-worldplanets~=info] #door .planet[data-section=info].chosen .body::before{opacity:0;transition:opacity .6s ease}

/* ══ THE WAYS IN open as each journey is readied (main.js: openWays) ═══════════════════════════════════════════════
   a planet shows from the first but takes no click, and shows no label, until its journey can begin */
#door .planet:not(.ready){pointer-events:none;cursor:default}
#door .planet:not(.ready) .tag{opacity:0}
#door .planet .tag{transition:opacity .8s ease}
/* the backs to the dawn (the docs' and the home's corner and goodbye; the install's and the information's are no flight) are not shown, and take no click, until the
   flight's way in opens; they fade in then (main.js: openNow; ADR-0002 6.8). On filter, as the chrome's own fades are
   on opacity */
#docspad .back.dawn[aria-disabled=true],#back[aria-disabled=true],#signout[aria-disabled=true]{filter:opacity(0);pointer-events:none!important;cursor:default}