@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
  --bg:#04080f;--bg2:#070d18;--steel:#0d1626;--steel2:#131f33;--edge:#1e2d45;--edge2:#2a3c5a;
  --fg:#e3ebf7;--muted:#8a9bb6;--dim:#4f6182;
  --cold:#b9d6ff;--cold-lo:rgba(150,190,255,.10);
  --amber:#f0a23a;--amber-hi:#ffc46a;--amber-fg:#150c00;--glow:rgba(240,162,58,.35);
  --ok:#5ed58c;--warn:#f0a23a;--bad:#ff5b4f;--off:#27354d;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Jost",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --cham:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 var(--sans);font-weight:300;min-height:100vh;min-height:100dvh;min-height:100svh;overflow-x:hidden}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--amber-hi)}
main{position:relative;z-index:2}
.wrap{max-width:1180px;margin:0 auto;padding:0 36px}
.mono{font-family:var(--mono)}

/* top bar */
header.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 max(36px,calc((100% - 1180px)/2));
  background:rgba(4,8,15,.82);backdrop-filter:blur(10px);border-bottom:1px solid rgba(30,45,69,.6);font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.brand{display:flex;align-items:center;gap:14px;color:var(--fg);font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:.42em;text-transform:uppercase}
.mark{width:18px;height:18px;display:inline-block;position:relative;background:var(--amber);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mark::after{content:"";position:absolute;left:6px;top:6px;width:6px;height:6px;background:var(--bg);border-radius:50%}
nav{display:flex;align-items:center;gap:30px}
nav a:not(.btn){color:var(--muted)}
nav .who{color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:none}
nav a:not(.btn):hover{color:var(--fg)}
.clock{color:var(--dim)}.clock b{color:var(--muted);font-weight:400}
@media(max-width:820px){nav a:not(.btn),.clock{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--amber);color:var(--amber-fg)!important;font-family:var(--sans);font-weight:500;padding:14px 30px;border:0;cursor:pointer;font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:0 0 30px var(--glow);white-space:nowrap}
.btn:hover{background:var(--amber-hi);box-shadow:0 0 50px var(--glow)}
.btn.small{padding:9px 18px;font-size:11px}
.btn.ghost{background:transparent;color:var(--muted)!important;box-shadow:none;outline:1px solid var(--edge2);outline-offset:-1px}
.btn.ghost:hover{color:var(--fg)!important;outline-color:var(--muted);background:transparent}

/* type */
h1,h2,h3{font-family:var(--sans);text-transform:uppercase;font-weight:400}
h1{font-size:clamp(44px,7.4vw,104px);line-height:1;margin:0 0 30px;letter-spacing:.3em;text-indent:.3em;text-shadow:0 0 60px rgba(185,214,255,.25)}
h1 em{font-style:normal;font-weight:300;letter-spacing:.3em;font-size:.36em;line-height:1.3;display:block;margin:22px auto 0;color:var(--muted);text-indent:0}
h2{font-size:clamp(24px,3.2vw,40px);line-height:1.15;margin:0 0 24px;letter-spacing:.14em}
h3{margin:0 0 14px;font-size:14px;letter-spacing:.22em;color:var(--fg)}
.eyebrow{color:var(--amber);font-family:var(--mono);letter-spacing:.3em;text-transform:uppercase;font-size:11px;margin:0 0 26px}
.lead{font-size:18px;color:var(--muted);max-width:620px;margin:0 auto 34px;font-weight:300}
.fine{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
em{color:var(--amber);font-style:normal}

/* signup */
.signup{display:flex;max-width:560px;margin:0 auto;border:1px solid var(--edge2);background:rgba(7,13,24,.7);backdrop-filter:blur(8px);clip-path:var(--cham);padding:6px}
.signup input{flex:1;min-width:0;padding:12px 18px;border:0;background:transparent;color:var(--fg);font:15px var(--mono);letter-spacing:.02em}
.signup input::placeholder{color:var(--dim)}
.signup input:focus{outline:none}
.signup:focus-within{border-color:var(--amber);box-shadow:0 0 40px var(--glow)}
.signup .btn{clip-path:none;box-shadow:none}
.hero .fine{margin-top:16px}

/* readouts */
.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge);margin:-1px 0 0;clip-path:var(--cham)}
.hud div{background:var(--steel);padding:22px 26px;display:flex;flex-direction:column;gap:6px;position:relative}
.hud small{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.hud b{font-weight:400;font-size:22px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);display:flex;align-items:center;gap:12px}
@media(max-width:820px){.hud{grid-template-columns:1fr 1fr}}

/* sections */
section{padding:110px 0;position:relative}
section.deck{background:
  linear-gradient(180deg,var(--bg2),var(--bg)),
  repeating-linear-gradient(90deg,transparent 0 118px,rgba(255,255,255,.025) 118px 120px);
  border-top:1px solid var(--edge)}
.grate{position:absolute;left:0;right:0;height:22px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 12px);opacity:.6}
.grate.t{top:0;border-bottom:1px solid var(--edge)}.grate.b{bottom:0;border-top:1px solid var(--edge)}
.sec{display:flex;align-items:center;gap:18px;margin-bottom:18px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--amber)}
.sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--edge2),transparent)}
.sec .tape{width:52px;height:6px;background:repeating-linear-gradient(135deg,var(--amber) 0 7px,transparent 7px 14px);opacity:.7}

/* plates */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px;align-items:start}
/* setup panes: three independent stacks, so a collapsed pane never holds a row open beside a tall one */
.account .cards.panes{grid-template-columns:repeat(3,1fr)}
.account .cards.panes .stack{display:flex;flex-direction:column;gap:26px;min-width:0}
@media(max-width:1000px){.account .cards.panes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.account .cards.panes{grid-template-columns:1fr}}
.card{background:linear-gradient(160deg,var(--steel2),var(--steel));border:1px solid var(--edge2);padding:36px 34px;position:relative;clip-path:var(--cham);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(0,0,0,.4)}
.card::before{content:attr(data-id);position:absolute;right:20px;top:14px;font:10px var(--mono);letter-spacing:.26em;color:var(--dim)}
.card .lamp{position:absolute;left:20px;top:18px;width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.card p{margin:0 0 12px;color:var(--muted);font-size:15px}
.card p:last-child{margin-bottom:0}
pre{background:rgba(4,8,15,.8);border:1px solid var(--edge);border-left:2px solid var(--amber);padding:14px 18px;margin:16px 0;overflow-x:auto;font-size:13px;line-height:1.8}
code{font-family:var(--mono);font-size:.95em}
.dim{color:var(--dim);text-decoration:line-through}
pre b{color:var(--amber);font-weight:400}

/* schematic */
.schem{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.schem svg{width:100%;height:auto;overflow:visible}
.schem .lbl{font:10px var(--mono);fill:var(--muted);letter-spacing:.24em;text-transform:uppercase}
.schem .box{fill:var(--steel);stroke:var(--edge2)}
.schem .hold{fill:rgba(240,162,58,.06);stroke:var(--amber)}
.schem .flow{stroke:var(--cold);stroke-width:1;fill:none;stroke-dasharray:4 12;animation:flow 1.6s linear infinite;opacity:.8}
@keyframes flow{to{stroke-dashoffset:-32}}
@media(max-width:900px){.schem{grid-template-columns:1fr}}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:22px}
.checks li{padding-left:34px;position:relative;color:var(--muted);font-size:15px}
.checks li b{color:var(--fg);font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:13px;display:block;margin-bottom:4px}
.checks li::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber)}

.future{text-align:center}
.future .sec{justify-content:center}.future .sec::after{display:none}
.future p{max-width:640px;margin:0 auto 16px;color:var(--muted)}
.future .btn{margin-top:22px}

/* auth / account / prose */
.auth,.account,.prose{padding:92px 36px 60px;max-width:720px;margin:0 auto}
.auth{text-align:center}
.account{max-width:1180px}
.account .cards{margin:30px 0}
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--edge);margin:0 0 26px;font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.tabs a{color:var(--dim);padding:10px 2px;border-bottom:1px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--fg);border-bottom-color:var(--amber)}
.tabs a:hover{color:var(--fg)}
.account .hud{margin:0 0 6px}
.copywrap{position:relative}
.copywrap pre{white-space:pre-wrap;word-break:break-all;overflow:visible;padding:36px 16px 14px}
.pane summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px}
.pane summary::-webkit-details-marker{display:none}
.pane summary::before{content:"\25B8";color:var(--dim);font-size:12px;transition:transform .2s}
.pane[open] summary::before{transform:rotate(90deg)}
.pane summary h3{margin:0}
.pane[open] summary{margin-bottom:12px}
.dl{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 10px}
.copy{position:absolute;top:8px;right:8px;font:15px/1 var(--mono);color:var(--amber);background:transparent;border:1px solid var(--amber);border-radius:3px;padding:4px 9px;cursor:pointer}
.copy:hover{background:rgba(240,162,58,.1)}
.rewrite{margin-top:14px}
.rewrite input{width:100%;padding:9px 12px;border:1px solid var(--edge2);background:var(--bg);color:var(--fg);font:13px var(--mono)}
.rewrite input:focus{outline:none;border-color:var(--amber)}
.rewrite pre{margin:8px 0 0;border-left-color:var(--amber);white-space:pre-wrap;word-break:break-all}
.account h1{font-size:24px;letter-spacing:.14em;text-indent:0;text-shadow:none;margin:0 0 8px}
.account .lead{text-align:left;font-size:14px;margin:0 0 8px}
.account h2{margin-top:56px;font-size:20px}
.notice{padding:12px 16px;background:var(--steel);border:1px solid var(--edge2);border-left:2px solid var(--muted);font-size:14px}
.notice.error{border-left-color:var(--bad);color:var(--bad)}
.notice.ok{border-left-color:var(--ok)}
.prose h2{font-size:18px;margin-top:32px}
.prose p{color:var(--muted)}

/* health lights */
.light{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--off);vertical-align:middle;margin-right:8px;border:1px solid rgba(255,255,255,.1)}
.light.ok{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.light.warn{background:var(--warn);box-shadow:0 0 10px var(--warn)}
/* .warn is ALSO a callout class further down this stylesheet -- border-left 2px, padding
   6px 0 6px 12px, font-size 13px -- and a status lamp's class is "light warn", so every
   amber lamp on the site was being drawn as a warning box. That is why an 8px dot measured
   15x14 and would not sit on its word's centre line. Two-class selector so it outranks the
   callout, and the box is reset outright rather than nudged. */
.light.ok,.light.warn,.light.bad{padding:0;margin-bottom:0;font-size:0;line-height:0;
  border:1px solid rgba(255,255,255,.1);box-sizing:border-box}
.light.bad{background:var(--bad);box-shadow:0 0 10px var(--bad);animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.lights{display:flex;flex-wrap:wrap;gap:6px 20px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:10px 0 0}
.device{padding:16px 0;border-top:1px solid var(--edge)}
.device:first-of-type{border-top:0;padding-top:4px}
.device .dname{margin:0 0 6px;display:flex;align-items:center}
.device .dname .light{flex:0 0 auto}
.device .name{color:var(--fg);font-weight:400;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.device .readout{margin:0}
.readout{font-family:var(--mono);font-size:12px;color:var(--muted);margin:4px 0 0}

/* forms & tables */
.stack{display:grid;gap:8px}
.stack input[type=text],.stack input:not([type]){padding:9px 12px;border:1px solid var(--edge2);background:var(--bg);color:var(--fg);font:13px var(--mono)}
.stack input:focus{outline:none;border-color:var(--amber)}
.stack label{color:var(--muted);font-size:14px}
.tablewrap{overflow-x:auto;border:1px solid var(--edge2)}
table{border-collapse:collapse;width:100%;font-size:13px;font-family:var(--mono)}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--edge);overflow-wrap:anywhere}
/* which column may wrap is a property of the table, not of column 3 */
th,td{white-space:nowrap}
td.wrap{white-space:normal;min-width:210px}
tr:last-child td{border-bottom:0}
th{color:var(--dim);font-weight:400;font-size:10px;letter-spacing:.24em;text-transform:uppercase;background:var(--steel)}
td{color:var(--muted)}td:first-child{color:var(--fg)}

footer{margin:0;padding:26px max(36px,calc((100% - 1180px)/2));border-top:1px solid var(--edge);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase}
footer a{color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
/* ================= HOME: one scene, one switch ================= */
.page-home header.top,.page-home footer{display:none}
.page-home main{max-width:none;padding:0}
.board{position:relative;height:100vh;height:100dvh;min-height:620px;overflow:hidden;background:var(--bg);border-top:1px solid var(--amber);
  background-image:linear-gradient(to right,rgba(120,160,220,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(120,160,220,.06) 1px,transparent 1px);background-size:56px 56px;
  display:grid;grid-template-rows:auto 1fr 68px}
.board > .brand{display:none}
.board .brand{position:absolute;left:44px;top:30px;z-index:5;font-family:var(--sans);font-weight:500;font-size:34px;letter-spacing:-.01em;text-transform:none;gap:12px}
.board .brand .mark{width:20px;height:20px}
.board .brand .mark::after{left:7px;top:7px}

/* switch */
.switch{grid-row:1;z-index:5;display:flex;flex-direction:column;align-items:center;gap:12px;padding:34px 0 0}
.switch small{font:11px var(--mono);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--muted)}
.track{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--edge2);background:var(--bg);border-radius:999px;padding:4px}
.track input{position:absolute;opacity:0;pointer-events:none}
.track label{position:relative;z-index:1;padding:12px 34px;font-family:var(--sans);font-weight:300;font-size:15px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--muted);cursor:pointer;text-align:center;white-space:nowrap;transition:color .4s}
.track .knob{position:absolute;top:4px;bottom:4px;left:4px;width:calc(33.3333% - 2.6667px);border-radius:999px;background:transparent;border:1px solid var(--muted);transition:transform .55s cubic-bezier(.65,0,.2,1),border-color .55s}
.track input:focus-visible+label{outline:1px solid var(--amber);outline-offset:4px;border-radius:999px}
[data-mode=now] #m-now+label{color:var(--fg)}
[data-mode=with] #m-with+label{color:var(--amber)}
[data-mode=with] .knob{transform:translateX(100%);border-color:var(--amber)}
[data-mode=mix] #m-mix+label{color:var(--amber)}
[data-mode=mix] .knob{transform:translateX(200%);border-color:var(--amber)}

/* The three stages differ only in which strands are lit, so both beam sets are drawn
   once and the mode decides. Middle strand is always nth-child(2) -- the ring is authored
   outward-in and the chest arcs inward-out, but the centre is the second of three in both. */
.ring>*,.beads>*,.over path,.ret path,.mixarc{transition:opacity .5s}
[data-mode=with] .ret path:nth-child(1),[data-mode=with] .ret path:nth-child(3){opacity:0}
/* Re:mix: the crew still runs three streams, but only one of them still leaves the
   building. Clip the outer two to the upper half so they stop at 9 and 3 o'clock -- the
   retrainer and the archive -- and the middle strand alone carries on round the bottom
   to the frontier. .cycle scopes this to the loop: .over is the chest overlay, also
   named .ring, and it lives in the top half already. */
[data-mode=mix] .cycle .ring>*:nth-child(1),[data-mode=mix] .cycle .ring>*:nth-child(3),
[data-mode=mix] .beads>*:nth-child(1),[data-mode=mix] .beads>*:nth-child(3){opacity:0}
.mixarc{opacity:0}
[data-mode=mix] .mixarc{opacity:.9;transition-delay:.3s}
/* Re:mix reads as one material: every dotted line amber, and the axis drops its cold
   glow with the white. Set on the groups, whose strokes the strands inherit. */
[data-mode=mix] .ret,[data-mode=mix] .beads{stroke:#f0a23a}
[data-mode=mix] .ret{filter:drop-shadow(0 0 6px rgba(240,162,58,.45))}

/* scene */
.scene{grid-row:2;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;min-height:0;padding:10px 20px 46px}
.scene svg{flex:1;min-height:0;width:min(1200px,100%);height:100%;overflow:visible;display:block}
.scene .cap{position:absolute;bottom:14px;left:0;right:0;text-align:center;margin:0;font:11px var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.scene .cap b{font-weight:400;display:none}
.scene .cap span+span::before{content:" · ";color:var(--dim)}
[data-mode=now] .scene .cap .c-now,[data-mode=with] .scene .cap .c-with,[data-mode=mix] .scene .cap .c-with{display:inline}
[data-mode=now] .scene .cap{visibility:hidden}
[data-mode=with] .cap .light,[data-mode=mix] .cap .light{background:var(--ok);box-shadow:0 0 10px var(--ok)}

.ring>*,.mixarc>*,.linear path{animation:fall 1.2s linear infinite}
.linear path:nth-child(2){animation-duration:1.45s}
.linear path:nth-child(3){animation-duration:1s}
.cycle,.linear{transition:opacity .8s}
[data-mode=now] .cycle{opacity:0}
[data-mode=with] .linear,[data-mode=mix] .linear{opacity:0}
[data-mode=with] .cycle,[data-mode=mix] .cycle{opacity:1;transition-delay:.3s}
@keyframes fall{to{stroke-dashoffset:-20}}
.layer{transition:opacity .9s,filter .9s}
[data-mode=now] .layer{opacity:.5;filter:grayscale(1) brightness(.55)}
[data-mode=with] .layer,[data-mode=mix] .layer{opacity:1;filter:none;transition-delay:.3s}
.layer .ret,.layer .stream,.layer .glowe{transition:opacity .6s}
[data-mode=now] .layer .ret,[data-mode=now] .layer .stream,[data-mode=now] .layer .glowe,[data-mode=now] .layer .over,[data-mode=now] .pile{opacity:0}
.layer .over,.pile{transition:opacity .6s}
.lid{transform-box:view-box;transition:transform .9s cubic-bezier(.3,.9,.4,1)}
[data-mode=now] .lid{transform:rotate(0deg);transition:none}
[data-mode=with] .lid,[data-mode=mix] .lid{transform:rotate(66deg)}
[data-mode=with] .layer .ret,[data-mode=mix] .layer .ret{transition-delay:1s}
.side{font-family:var(--mono);font-style:italic;font-size:11px;letter-spacing:.18em;text-transform:uppercase;fill:#8a9bb6}

.wordmark text{font-family:var(--sans);font-weight:500;font-size:50.9px;fill:var(--fg)}
/* the mobile scene stretches vertically; .fx holds each solid object to its own shape */
.fx{transform-box:fill-box;transform-origin:center;transform:translate(var(--sx,0px),calc(var(--d,0px) + var(--sd,0px))) scaleY(var(--fx,1)) scale(var(--pc,1))}
.wordmark{transition:opacity .6s}
[data-mode=now] .wordmark{opacity:0}
[data-mode=with] .wordmark,[data-mode=mix] .wordmark{opacity:1;transition-delay:1s}
.rt{transform-box:view-box}
[data-mode=with] .rt,[data-mode=mix] .rt{animation:spin 3.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.host{font-family:var(--mono);font-style:italic;font-size:8.5px;letter-spacing:1px;fill:#6b7f9e;transition:opacity .5s}
.h-with{fill:#f0a23a}
[data-mode=now] .h-with,[data-mode=with] .h-now,[data-mode=mix] .h-now{opacity:0}
[data-mode=with] .h-with,[data-mode=mix] .h-with{transition-delay:.5s}
.vendors .core{transition:r .8s,filter .8s}
.stream path{animation:fall .9s linear infinite}
.stream path:nth-child(2){animation-duration:1.15s}.stream path:nth-child(3){animation-duration:.8s}
.grotto{transition:transform .8s cubic-bezier(.65,0,.2,1),opacity .6s}
.pile{transform-box:fill-box;transform-origin:bottom;transition:transform 8s cubic-bezier(.4,0,.6,1)}
.drum path:first-child{transition:fill-opacity 2.2s ease-out}
.drum .slot{transition:fill 1.2s}
[data-mode=with] .drum path:first-child,[data-mode=mix] .drum path:first-child{fill-opacity:.24;transition-delay:calc(1s + var(--b) * 2.2s)}
[data-mode=with] .drum .slot,[data-mode=mix] .drum .slot{fill:#f0a23a;transition-delay:calc(2.4s + var(--b) * 2.2s)}
[data-mode=now] .drum path:first-child{fill-opacity:0;transition:none}
[data-mode=now] .drum .slot{fill:#4f6182;transition:none}
.grains circle{opacity:0;transform-box:fill-box;transform-origin:center}
[data-mode=with] .grains circle,[data-mode=mix] .grains circle{animation:grain 2.4s ease-in infinite}
[data-mode=with] .grains circle:nth-child(2),[data-mode=mix] .grains circle:nth-child(2){animation-delay:.8s}
[data-mode=with] .grains circle:nth-child(3),[data-mode=mix] .grains circle:nth-child(3){animation-delay:1.6s}
@keyframes grain{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}100%{opacity:0;transform:translateY(26px)}}
.ret{transition:opacity .8s;filter:drop-shadow(0 0 6px rgba(185,214,255,.6))}
.ret path{animation:rise 1.3s linear infinite}
.layer .ret path{animation-name:flow15}
.layer .ret path:nth-child(2){animation-duration:1.05s}
.layer .ret path:nth-child(3){animation-duration:1.5s}
@keyframes flow15{to{stroke-dashoffset:-15}}
@keyframes flow18{to{stroke-dashoffset:-18}}
@keyframes rise{to{stroke-dashoffset:15}}
.cur{animation:xmas 3.6s steps(1) infinite;animation-delay:calc(var(--i) * 1.2s)}
.bead{animation:bead 3.6s linear infinite;animation-delay:calc(var(--i) * 1.2s)}
@keyframes bead{to{stroke-dashoffset:-60}}
@keyframes xmas{0%{opacity:1}33%{opacity:.12}100%{opacity:.12}}
[data-mode=now] .pile{transform:scaleY(.3);transition:none}
[data-mode=now] .ret{opacity:0}
[data-mode=with] .pile,[data-mode=mix] .pile{transform:scaleY(1)}
[data-mode=with] .ret,[data-mode=mix] .ret{opacity:1;transition-delay:.9s}
.tag{grid-row:3;z-index:1;text-align:center;margin:0;padding:22px 20px 26px;font-family:var(--sans);font-weight:300;font-size:clamp(20px,2.4vw,32px);letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;line-height:1.35;color:var(--fg);text-shadow:0 0 40px rgba(185,214,255,.3);border-top:1px solid var(--edge);background:rgba(4,8,15,.6);position:relative}
.bar{grid-row:3;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:20px;padding:0 44px;border-top:1px solid var(--edge);background:rgba(4,8,15,.85);font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);position:relative}
.bar .left a{color:var(--muted)}
.bar .left a:hover{color:var(--fg)}
.go{display:flex;gap:8px}
.go input{width:250px;padding:9px 14px;border:1px solid var(--edge2);background:var(--bg);color:var(--fg);font:13px var(--mono)}
.go input::placeholder{color:var(--dim)}
.go input:focus{outline:none;border-color:var(--amber)}
.go .btn,.go-console{padding:9px 18px;font-size:11px;letter-spacing:.2em;clip-path:none;border-radius:6px;box-shadow:none;background:transparent;color:var(--amber)!important;outline:1px solid var(--amber);outline-offset:-1px;font-family:var(--mono);text-transform:none;letter-spacing:.02em;font-size:13px}
.go .btn:hover,.go-console:hover{background:rgba(240,162,58,.08)}
@media(max-width:900px){
  .board{--edgepad:13.33px}                 /* the page's own air at both edges, 40 device px at 3x */
  /* svh, not dvh: some iOS browsers (Brave) overlay their bottom chrome on the
     layout viewport, and a form flush on the floor gets clipped. svh is the height
     with browser UI maximally shown, so nothing can be covered. */
  .board{height:auto;min-height:100vh;min-height:100dvh;min-height:100svh;grid-template-rows:auto 1fr auto}
  .switch{grid-row:1;padding-top:var(--edgepad)}
  .track label{padding:9.5px 18px;font-size:13px;line-height:1.2}  /* sizes the amber knob to the Let's ride button */
  .scene{grid-row:2;justify-content:center;padding:0 8px}
  .scene svg{flex:none;height:auto;width:100%;aspect-ratio:810/1082;--fx:.6895}
  .scene svg .pc{--pc:1.18}                 /* the pieces round the clock carry more weight on a phone */
  .scene .cap{position:static;padding:10px 16px 14px;line-height:1.8}
  .scene .cap span{display:block}
  .scene .cap span:first-of-type{display:inline}
  .scene .cap span+span::before{content:none}
  /* On a phone the label has no outboard room: at 20 it hangs off its icon toward the
     screen edge, and centring it on the mark drops it onto the ring. Smaller, and pulled
     in from the edge, keeps it beside its mark at a height the strands do not cross. */
  .side{font-size:16px;letter-spacing:.14em}
  /* Outboard is the ONLY clear space at this height -- the ring's descending strand owns
     everything inboard of the mark. 16px is what buys the margin off the screen edge; do
     not buy it by moving the label inward, which puts it in the stream.
     --sx is measured against the strand on an iPhone 17 at 402pt: the tails of RETRAIN and
     ANYTIME sat 2.3 CSS px off it, ARCHIVE NOW 4. Both go outboard until nothing is inside
     3 on either axis. 1 CSS px is ~2.1 user units at this width. */
  /* Solved, not eyeballed: measured gapX (to the nearest ring strand across the label's
     own y band) and gapY (to the drum / hex above it) as separate numbers, then moved each
     label until they are EQUAL. Scale at the measuring width was 0.5975 CSS px per user
     unit in x and 0.8666 in y, and both scale linearly with viewport, so the equality
     holds at 402pt too. */
  .scene svg .sidelbl.L{--sx:-14px;--sd:7px}
  .scene svg .sidelbl.R{--sx:9px;--sd:10px}
  /* Re:mix drops the outer strands below the midline, so the nearest stream sits ~2.3
     further out and the same offset is no longer equidistant. Stage gets its own. */
  [data-mode=mix] .scene svg .sidelbl.L{--sx:-9px}
  [data-mode=mix] .scene svg .sidelbl.R{--sx:4px}
  /* one centred column, widest hostname first */
  .host{font-size:20px;letter-spacing:.14em;text-anchor:middle}  /* size AND tracking as .side */
  .h-with.v-openrouter{transform:translate(0px,4.5px)}
  .h-with.v-anthropic{transform:translate(-59.9px,57px)}
  .h-with.v-deepseek{transform:translate(59.9px,83px)}
  .h-now.v-anthropic{transform:translate(-59.9px,31px)}
  .h-now.v-openrouter{transform:translate(0px,30.5px)}
  .h-now.v-deepseek{transform:translate(59.9px,83px)}
  /* 16.33px = 49 device px on a 3x phone, which is the space Safari's own chrome
     leaves below the viewport before its toolbar pill: the form sits centred between
     the bar's border and the controls */
  .bar{grid-row:3;flex-direction:column;justify-content:flex-start;gap:7px;padding:var(--edgepad) 20px;height:auto;line-height:1.25}
  .go input,.go .btn,.go-console{padding-top:7px;padding-bottom:7px}
  .go input{width:200px}
}

.pager{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px}
.pager .fine{margin:0}

.gear{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--muted);outline:1px solid var(--edge2);outline-offset:-1px}
.gear:hover,.gear.on{color:var(--amber)}

tr.go-tab{cursor:pointer}
tr.go-tab:hover td{background:var(--steel2)}
tr.go-tab a{color:var(--fg)}
tr.go-tab:hover a{color:var(--amber)}

.payopts{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.qr{width:180px;padding:14px;background:var(--bg);border:1px solid var(--edge2);margin:14px 0}
.qr svg{display:block;width:100%;height:auto}
.warnline{color:var(--warn)}
.pay .tablewrap{max-width:520px}
.paybtn{margin-top:16px}

table tr.on td{color:var(--amber)}
table tr.on td:first-child::after{content:" \2190 you";color:var(--dim);font-size:10px;letter-spacing:.18em}

/* The corpus curve. One accent carries the data; everything structural is edge ink,
   so the amber line is the only thing that reads as a value. Flat fills, no gradient. */
.corpus{position:relative}
.corpus svg{display:block;overflow:visible}
.corpus .ax{stroke:var(--edge2);stroke-width:1}
.corpus .done{stroke:var(--edge);stroke-width:1}
.corpus .cut{stroke:var(--edge2);stroke-width:1;stroke-dasharray:4 4}
.corpus .fill{fill:var(--cold-lo);stroke:none}
.corpus .line{fill:none;stroke:var(--amber);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.corpus .proj{fill:none;stroke:var(--amber);stroke-width:2;stroke-dasharray:3 5;opacity:.55;stroke-linejoin:round}
.corpus .now{fill:var(--amber);stroke:var(--bg);stroke-width:2}
.corpus .dot{fill:none;stroke:var(--amber);stroke-width:2;opacity:.7}
.corpus .tick,.corpus .cutlab{fill:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.08em}
.corpus .cutlab{fill:var(--muted)}
.corpus .hair{stroke:var(--edge2);stroke-width:1;pointer-events:none}
.corpus .hit{fill:transparent;cursor:crosshair}
.corpus figcaption{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em;
  min-height:1.4em;margin-top:6px}
.corpus figcaption b{color:var(--fg)}
/* Past and future share the axes; the tint is the only thing that says where
   measurement stops and arithmetic begins. */
.corpus .ahead{fill:var(--steel);opacity:.45}
.corpus .nowline{stroke:var(--edge2);stroke-width:1}
.corpus .cut.far{opacity:.5}
.corpus .cutlab.far{fill:var(--dim)}

/* admin: one-line add form above a table, and the per-row buttons beside it */
.addrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.addrow input{flex:1 1 140px;min-width:0;padding:9px 12px;border:1px solid var(--edge2);background:var(--bg);color:var(--fg);font:13px var(--mono)}
.addrow input::placeholder{color:var(--dim)}
.addrow input:focus{outline:none;border-color:var(--amber)}
td.ops{display:flex;gap:8px}
td select{padding:5px 8px;border:1px solid var(--edge2);background:var(--bg);color:var(--muted);font:12px var(--mono)}
td select:focus{outline:none;border-color:var(--amber)}
.subtabs{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 16px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.subtabs a{color:var(--dim);padding:4px 0;border-bottom:1px solid transparent}
.subtabs a.on{color:var(--fg);border-bottom-color:var(--amber)}
.subtabs a:hover{color:var(--fg)}
.subtabs .n{color:var(--dim);margin-left:4px}
h2.sub{margin:34px 0 14px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);font-weight:400;font-family:var(--mono)}
/* a vertical's hunting grounds: named registries, one line each */
td.hunt{white-space:normal;min-width:230px;max-width:280px}
td.hunt .src{display:flex;align-items:center;gap:6px;margin:0 0 3px}
td.hunt .src a{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.hunt .src a:hover{color:var(--amber)}
td.hunt .src form{display:inline}
td.hunt .src button[type=submit]{background:none;border:0;color:var(--dim);cursor:pointer;font:12px var(--mono);padding:0 2px}
td.hunt .src button[type=submit]:hover{color:var(--fg)}
td.hunt .src.add{gap:4px;margin-top:6px}
td.hunt .src.add input{width:76px;padding:4px 6px;border:1px solid var(--edge2);background:var(--bg);color:var(--fg);font:11px var(--mono)}
td.hunt .src.add input:focus{outline:none;border-color:var(--amber)}

/* /gradmin is an internal dashboard, not a reading column: it takes the window. */
.page-gradmin .account{max-width:none;padding:34px 24px 60px}
.page-gradmin .tablewrap{overflow-x:visible}
.page-gradmin table{table-layout:auto}
/* Short cells hold a number or a control and must never break; only the prose and
   link columns wrap, and only they may break inside a word (long urls). */
.page-gradmin th,.page-gradmin td{padding:9px 10px;vertical-align:top;white-space:nowrap;overflow-wrap:normal}
.page-gradmin th:first-child,.page-gradmin td:first-child{white-space:normal;overflow-wrap:normal}
.page-gradmin td.wrap,.page-gradmin th.wrap,.page-gradmin td.hunt,.page-gradmin th.hunt{white-space:normal;overflow-wrap:anywhere}
.page-gradmin td.wrap,.page-gradmin th.wrap{width:34%}
.page-gradmin td.hunt,.page-gradmin th.hunt{width:24%;min-width:0;max-width:none}
.page-gradmin td.hunt .src a{white-space:normal}
.page-gradmin td.ops{flex-wrap:wrap;gap:6px}
.page-gradmin td.ops .btn{white-space:nowrap}
.page-gradmin .addrow input{flex:1 1 120px}
/* The pitch is a paragraph, so it gets the width of the row rather than a column. */
.page-gradmin tr.pitchrow td{padding:0 10px 12px;border-bottom:1px solid var(--edge)}
.page-gradmin tr.pitchrow textarea{width:100%;padding:8px 10px;border:1px solid var(--edge2);background:var(--bg);color:var(--muted);font:12px/1.6 var(--mono);resize:vertical}
.page-gradmin tr.pitchrow textarea:focus{outline:none;border-color:var(--amber);color:var(--fg)}
.page-gradmin tr.pitchrow .btn{margin-top:6px}

/* --- gradmin: partners ------------------------------------------------------ */
/* The key is shown once and never again, so it has to be unmissable and easy to select. */
.freshkey { border: 1px solid var(--accent, #b8ff2e); padding: 12px 14px; margin: 0 0 16px; font-size: 13px; }
.freshkey code { display: block; margin-top: 8px; padding: 8px 10px; border: 1px solid currentColor; font-size: 13px; word-break: break-all; user-select: all; }
.doc { border: 1px solid currentColor; padding: 14px 16px; font-size: 12px; line-height: 1.55; overflow-x: auto; white-space: pre; opacity: .92; }
tr.dim { opacity: .45; }
/* A partner's instructions sit under its own row: the whole block, key included, one selection. */
tr.instr td { padding-top: 0; }
tr.instr .doc { margin: 0 0 10px; user-select: all; }
a.instr-open { margin-right: 14px; white-space: nowrap; }
.warn { border-left: 2px solid var(--accent, #b8ff2e); padding: 6px 0 6px 12px; margin: 0 0 16px; font-size: 13px; }
.docops { display: flex; gap: 8px; margin: 0 0 8px; }

/* ================= RETRAIN TAB: one type scale, one rhythm ================= */
/* Three levels and no more. p is prose. .sub is the quieter line under it.
   .readout is anything the machine produced. .fine goes back to being a LABEL --
   it is mono, uppercase and letterspaced, and asking it to carry whole sentences
   is what turned three explanations into wide all-caps slabs. Scoped to .tidy so
   the other tabs keep the spacing they were designed with. */
.tidy .card > * { margin: 0 }
.tidy .card > * + * { margin-top: 14px }
.tidy .card > h3 + * { margin-top: 12px }
/* Only UNCLASSED paragraphs are prose. Written as `.tidy .card p` this rule was more
   specific than .lights and .readout and quietly captured both -- it pushed the status row
   from 10px to 15px, which is what knocked the lamp off the word and made QUEUED oversized.
   A type rule that has to be this careful is a rule that should name its own target. */
.tidy .card p:not([class]) { font-size: 15px; color: var(--muted) }
.tidy .card .sub { font-size: 13px; line-height: 1.6; color: #6d80a0 }
/* The lamp is a round 8px dot sitting next to uppercase text with .22em tracking, and
   margin alone never fixed it: the dot was not on the word's centre line. vertical-align
   does nothing useful here because the row is already flex. So each status becomes its own
   inline flex row that centres its own dot, and the gap replaces the margin. */
/* .lights is a 10px label, but it is a <p> inside a .card, and `.card p{font-size:15px}`
   outranks `.lights{font-size:10px}` on specificity -- so the status row has been rendering
   at 15px around an 8px dot the whole time. That size mismatch is the alignment complaint:
   a small dot next to a large word reads as two things on two lines. Stated explicitly here
   rather than won on a technicality. */
.tidy .card p.lights { font-size: 10px; line-height: 1 }
.tidy .lights > span { display: inline-flex; align-items: center; gap: 9px; line-height: 1 }
.tidy .lights .light { width: 8px; height: 8px; flex: 0 0 8px; margin-right: 0 }
.tidy .card .readout { font-size: 12px; line-height: 1.7 }
.tidy .card .copywrap + .sub { margin-top: 10px }
/* The card rhythm is `.tidy .card > * + *`, and a .device's contents are one level deeper
   than that -- so the model name, its readout and its status row got no spacing at all and
   sat straight on top of each other. A block needs its own rhythm; it does not inherit the
   card's. */
.tidy .device { padding: 18px 0 }
.tidy .device:first-of-type { padding-top: 0 }
.tidy .device:last-of-type { padding-bottom: 0 }
.tidy .device .name { display: block; font-size: 14px; letter-spacing: .06em; margin: 0 0 7px }
.tidy .device .readout { margin: 0 }
.tidy .device .lights { margin: 11px 0 0 }
/* .fine used as it was meant to be: a short label over a group, not a paragraph. */
.tidy .card .fine { margin-top: 20px; color: var(--dim) }
.tidy .card .fine + .device { padding-top: 10px; border-top: 1px solid var(--edge) }

/* A switch, because a setting that is on or off should look like it. A button
   labelled "Turn off" makes you read the label to learn the state; a switch
   shows it. Still a plain form post -- no JS, works with the keyboard. */
.sw { appearance: none; -webkit-appearance: none; border: 0; padding: 0; cursor: pointer;
      width: 44px; height: 22px; border-radius: 22px; position: relative; flex: 0 0 auto;
      background: var(--edge2); outline: 1px solid var(--edge2); outline-offset: -1px;
      transition: background .16s }
.sw .knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
            border-radius: 50%; background: var(--dim); transition: transform .16s, background .16s }
.sw:hover { outline-color: var(--muted) }
.sw.on { background: var(--amber); outline-color: var(--amber) }
.sw.on .knob { transform: translateX(22px); background: var(--amber-fg) }
.swrow { display: flex; align-items: center; gap: 14px }
.swrow .lab { font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
              text-transform: uppercase; color: var(--dim) }
.swrow .lab b { color: var(--fg); font-weight: 400 }
/* .sub also appears above the card grid, outside .tidy */
.sub{font-size:13px;line-height:1.6;color:#6d80a0}

/* The model page. Its own top padding because the nav is fixed and a page that opens
   scrolled to its own title clipped in half is a page that looks broken on arrival. */
.modelpage{padding-top:48px}
.modelpage .pagetitle{margin:0 0 8px;font-family:var(--sans);font-weight:300;font-size:30px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--fg)}
.modelpage .fine a{color:var(--dim)}
.modelpage .fine a:hover{color:var(--amber)}
.modelpage > .sub{max-width:70ch}

/* The mix bar. One bar, two models -- the only scoreboard this product has: if the left
   side never grows, we sold someone a subscription they already had. */
.card.wide{grid-column:1/-1}
.mixbar{margin:16px 0 0}
.mixbar svg{display:block;height:10px;background:transparent}
.mixbar rect.backing{fill:var(--edge2)}
.mixbar rect.house{fill:var(--amber)}
.mixbar figcaption{display:flex;gap:26px;margin-top:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.mixbar figcaption .k{display:inline-flex;align-items:center;gap:9px}
.mixbar figcaption b{color:var(--fg);font-weight:400}
.mixbar .sw{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.mixbar .sw.house{background:var(--amber)}
.mixbar .sw.backing{background:var(--edge2);outline:1px solid var(--edge2)}

/* Utilisation over time. Same drawing language as the corpus curve so the two charts in
   this console read as one instrument, not two. */
.mixchart{margin:18px 0 0}
.mixchart svg{display:block;overflow:visible}
.mixchart .grid{stroke:var(--edge);stroke-width:1}
.mixchart .ax{stroke:var(--edge2);stroke-width:1}
.mixchart .tick{fill:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.1em}
.mixchart .line{fill:none;stroke:var(--amber);stroke-width:2;stroke-linejoin:round}
.mixchart .below{fill:var(--amber);opacity:.13;stroke:none}
.mixchart .above{fill:var(--muted);opacity:.05;stroke:none}
.mixchart .zone{fill:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase}
.mixchart .zone.yours{fill:var(--amber);opacity:.8}
.mixchart .now{fill:var(--amber);stroke:var(--bg);stroke-width:2}
.mixchart figcaption{margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--dim);
  letter-spacing:.1em}
.mixchart .mhair{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.mixchart .mhit{fill:transparent;cursor:crosshair}