/* ================================================================
   AdeptOps — dark system, rebuilt from the original site's language
   #0a0a0f ground · teal primary · glass surfaces · glow
   ================================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
::selection{background:rgba(0,212,170,.28);color:#fff}

:root{
  --bg:#08080d;
  --bg-2:#0b0c13;
  --bg-3:#10121b;
  --teal:#00d4aa;
  --teal-2:#00b894;
  --blue:#4a9eff;
  --purple:#7b61ff;
  --amber:#f5b544;
  --text:#e6edf5;
  --dim:#96a1b3;
  --dimmer:#5d6675;
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --glow:rgba(0,212,170,.30);

  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1220px;
  --pad:clamp(1.25rem,5vw,4rem);
  --sec:clamp(4.5rem,10vw,9rem);
  --ease:cubic-bezier(.22,.68,.36,1);
}

body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* ambient field behind everything */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 45% at 12% 8%,rgba(0,212,170,.10),transparent 62%),
    radial-gradient(55% 40% at 88% 22%,rgba(123,97,255,.09),transparent 62%),
    radial-gradient(50% 40% at 50% 100%,rgba(74,158,255,.07),transparent 60%);
}
body > *{position:relative;z-index:1}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec);position:relative}
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(1.75rem,4vw,4rem);align-items:start}
.split-r{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split-mid{align-items:center}
.split-even{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
@media(max-width:900px){
  .split,.split-r{grid-template-columns:1fr;gap:2rem}
  .split-r > .order-first{order:-1}
}

/* ---------- type ---------- */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.03em;line-height:1.0;text-wrap:balance}
h1{font-size:clamp(2.6rem,7vw,5.4rem)}
h2{font-size:clamp(2rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.7rem);font-weight:600;letter-spacing:-.02em;line-height:1.12}
h4{font-size:1.06rem;font-weight:600;line-height:1.25}

p{color:var(--dim)}
p + p{margin-top:1.05rem}
strong{color:var(--text);font-weight:600}
.lead{font-size:clamp(1.06rem,1.6vw,1.3rem);color:var(--dim);line-height:1.6;max-width:60ch}
.measure{max-width:58ch}

.grad{background:linear-gradient(105deg,var(--teal) 0%,#57e6c8 38%,var(--blue) 78%,var(--purple) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.lbl{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dimmer);display:block}
.lbl-t{color:var(--teal)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.sx{display:flex;align-items:center;gap:.9rem;margin-bottom:1.2rem}
.sx .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--teal);
  font-variant-numeric:tabular-nums}
.sx .r{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent);
  transform-origin:0 50%;transition:transform 1.2s var(--ease) .1s}
.js .sx .r{transform:scaleX(0)}
.js .sx.in .r{transform:scaleX(1)}

.hdr{margin-bottom:clamp(2.25rem,4.5vw,3.5rem)}
.hdr .lead{margin-top:1.25rem}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.55rem;overflow:hidden;
  font-family:var(--sans);font-weight:600;font-size:.98rem;
  background:linear-gradient(120deg,var(--teal),var(--teal-2));color:#04120e;
  padding:.88rem 1.7rem;border:0;border-radius:4px;cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,212,170,.4),0 10px 34px -10px var(--glow);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.btn:hover{transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(0,212,170,.6),0 16px 44px -10px rgba(0,212,170,.55)}
.btn:active{transform:translateY(0)}
.btn::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.35) 50%,transparent 68%);
  transform:translateX(-110%);transition:transform .75s var(--ease)}
.btn:hover::after{transform:translateX(110%)}
.btn-o{background:transparent;color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line-2);text-shadow:none}
.btn-o:hover{background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--teal),0 10px 30px -14px var(--glow)}
.btn-o::after{display:none}

.tlink{position:relative;display:inline-flex;align-items:center;gap:.45rem;
  font-weight:600;font-size:.95rem;color:var(--teal)}
.tlink i{font-style:normal;transition:transform .28s var(--ease)}
.tlink:hover i{transform:translateX(5px)}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .42s var(--ease)}
.tlink:hover::after{transform:scaleX(1);transform-origin:0 50%}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}

/* ---------- glass surface ---------- */
.glass{position:relative;background:var(--glass);border:1px solid var(--line);
  border-radius:10px;backdrop-filter:blur(10px);overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),
    rgba(0,212,170,.13),transparent 42%);opacity:0;transition:opacity .35s}
.glass:hover::before{opacity:1}
.glass:hover{border-color:rgba(0,212,170,.32)}

/* border trace on hover */
.trace::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--a,0deg),transparent 0deg,var(--teal) 40deg,transparent 110deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;pointer-events:none}
.trace:hover::after{opacity:1;animation:trace 2.6s linear infinite}
@keyframes trace{to{--a:360deg}}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:70;background:rgba(8,8,13,.72);
  backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--line);
  transition:transform .45s var(--ease)}
.nav.up{transform:translateY(-102%)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:.8rem var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav .mark{display:flex;align-items:center}
/* the wordmark lives inside the image, so it carries the whole lockup */
.nav .mark img{height:26px;width:auto;display:block}
.nav ul{display:flex;align-items:center;gap:1.7rem}
.nav ul a{font-size:.92rem;font-weight:500;color:var(--dim);transition:color .2s}
.nav ul a:hover{color:var(--teal)}
.nav .btn{padding:.55rem 1.15rem;font-size:.9rem}
@media(max-width:860px){.nav ul li:not(.keep){display:none}}

.prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;
  background:linear-gradient(90deg,var(--teal),var(--blue));
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(96vh,940px);display:flex;align-items:center;
  padding-block:clamp(4.5rem,10vw,7rem);overflow:hidden}

.hero .wrap{position:relative;z-index:2}
.hero h1{margin-top:1.5rem}
.hero .lead{margin-top:1.9rem}
.hero .acts{margin-top:2.5rem;display:flex;gap:.9rem;flex-wrap:wrap}
.hero .strip{margin-top:3.2rem;padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap}
.hero .strip div{font-family:var(--mono);font-size:clamp(1.15rem,2vw,1.6rem);
  color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.hero .strip span{display:block;font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dimmer);margin-top:.35rem;font-weight:500}

/* ================================================================
   SCROLL-SCRUBBED PIPELINE — the centrepiece
   ================================================================ */
.scrub{position:relative;height:520vh}
.scrub-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.scrub-in{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

.scrub-head{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;margin-bottom:clamp(1.2rem,3vw,2.2rem)}
.scrub-head h2{font-size:clamp(1.7rem,3.6vw,2.8rem)}
.scrub-stagelbl{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal)}

/* stage rail */
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:clamp(1.4rem,3vw,2.4rem)}
.rail div{position:relative;padding-top:.7rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);transition:color .35s}
.rail div::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--line);border-radius:2px}
.rail div::after{content:"";position:absolute;top:0;left:0;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--teal),var(--blue));transition:width .25s linear;
  box-shadow:0 0 12px var(--glow)}
.rail div.on{color:var(--text)}
.rail div.on::after{width:100%}
.rail div.act::after{width:var(--sp,0%)}
@media(max-width:700px){.rail{grid-template-columns:repeat(2,1fr);gap:.5rem .9rem}}

/* the two panels */
.scrub-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1rem,2.5vw,2rem);align-items:stretch}
@media(max-width:860px){.scrub-body{grid-template-columns:1fr}
  .scrub{height:460vh}
  .scrub-doc{display:none}}

.scrub-doc{position:relative;background:linear-gradient(160deg,#12141d,#0c0d13);
  border:1px solid var(--line);border-radius:10px;padding:1.4rem;overflow:hidden;
  min-height:clamp(280px,42vh,420px)}
.scrub-doc .dh{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);padding-bottom:.75rem;border-bottom:1px solid var(--line);margin-bottom:1rem}
.sd-noise{height:5px;border-radius:3px;background:rgba(255,255,255,.07);margin:.6rem 0}
.sd-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.8rem;align-items:baseline;
  padding:.42rem .5rem;margin:.14rem -.5rem;border-radius:4px;
  transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.sd-row .k{font-family:var(--mono);font-size:.69rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dimmer);transition:color .3s}
.sd-row .v{font-family:var(--mono);font-size:.84rem;color:var(--dim);
  font-variant-numeric:tabular-nums;transition:color .3s}
.sd-row.lit{background:rgba(0,212,170,.10);box-shadow:inset 2px 0 0 var(--teal)}
.sd-row.lit .k{color:var(--teal)}
.sd-row.lit .v{color:var(--text)}

.beam{position:absolute;left:0;right:0;height:110px;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,transparent,rgba(0,212,170,.12) 55%,rgba(0,212,170,.30) 92%,transparent);
  border-bottom:1px solid var(--teal);box-shadow:0 0 26px var(--glow)}
.beam.on{opacity:1}

.scrub-out{position:relative;background:var(--glass);border:1px solid var(--line);
  border-radius:10px;padding:1.4rem;display:flex;flex-direction:column;backdrop-filter:blur(10px);
  min-height:clamp(280px,42vh,420px)}
.scrub-out .dh{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);padding-bottom:.75rem;border-bottom:1px solid var(--line);margin-bottom:1rem}
.so-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.8rem;align-items:baseline;
  padding:.46rem 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateX(14px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.so-item.on{opacity:1;transform:none}
.so-item .k{font-family:var(--mono);font-size:.69rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dimmer)}
.so-item .v{font-family:var(--mono);font-size:.84rem;color:var(--text);font-variant-numeric:tabular-nums}
.so-item .c{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal);margin-top:.22rem;opacity:0;transition:opacity .35s}
.so-item .c.on{opacity:1}
.so-item .c::before{content:"\2713  "}
.so-item.flag .c{color:var(--amber)}

.verdict{margin-top:auto;padding-top:1.1rem;opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.verdict.on{opacity:1;transform:none}
.verdict .vb{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:.5rem .9rem;border-radius:4px}
.verdict.pass .vb{background:rgba(0,212,170,.16);color:var(--teal);
  box-shadow:inset 0 0 0 1px rgba(0,212,170,.4),0 0 26px -6px var(--glow)}
.verdict.esc .vb{background:rgba(245,181,68,.14);color:var(--amber);
  box-shadow:inset 0 0 0 1px rgba(245,181,68,.4)}
.verdict p{font-size:.92rem;margin-top:.8rem;color:var(--dim)}

.scrub-hint{margin-top:1.2rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer);display:flex;align-items:center;gap:.6rem}
.scrub-hint b{color:var(--teal);font-weight:400;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* ---------- proof figures ---------- */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;
  margin-top:clamp(2rem,4vw,3rem)}
@media(max-width:820px){.figs{grid-template-columns:1fr}}
.fig{padding:clamp(1.5rem,3vw,2.3rem);border-radius:10px}
.fig .n{display:block;font-family:var(--mono);font-weight:500;letter-spacing:-.05em;
  font-size:clamp(2.3rem,6.4vw,4.4rem);line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,var(--teal),#6fe9d0 45%,var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(0,212,170,.28))}
.fig .k{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dimmer);margin-top:1rem}
.fig .s{font-size:.92rem;color:var(--dim);margin-top:.55rem}

/* ---------- proof rows ---------- */
.prow{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto;
  gap:clamp(.7rem,2.4vw,2.4rem);align-items:center;padding:clamp(1.2rem,2.5vw,1.85rem) 1rem;
  border-bottom:1px solid var(--line);border-radius:8px;
  transition:background .3s var(--ease),padding-inline .3s var(--ease)}
.prow:first-of-type{border-top:1px solid var(--line)}
.prow:hover{background:var(--glass);padding-inline:1.5rem}
.prow .who{font-weight:600;font-size:clamp(1.02rem,1.8vw,1.24rem);letter-spacing:-.02em}
.prow .who span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);margin-top:.4rem;font-weight:400}
.prow .claim{font-size:.97rem;color:var(--dim)}
.prow .claim b{color:var(--text);font-weight:600}
.prow .go{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);white-space:nowrap}
.prow .go i{font-style:normal;display:inline-block;transition:transform .28s var(--ease)}
.prow:hover .go i{transform:translateX(6px)}
@media(max-width:860px){.prow{grid-template-columns:1fr;gap:.55rem;padding-inline:0}
  .prow:hover{padding-inline:.5rem}}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:1.1rem}
.card{padding:clamp(1.4rem,2.5vw,1.95rem);display:flex;flex-direction:column;
  transition:transform .3s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px)}
/* the Ask Nox card is a button: strip UA styling, keep the card */
button.card{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
button.card:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.card .ix{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--teal)}
.card h3{margin:.65rem 0 .5rem}
.card p{font-size:.96rem;flex:1}
.card .tlink{margin-top:1.15rem}

.status{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(0,212,170,.6);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(0,212,170,.5)}70%{box-shadow:0 0 0 10px rgba(0,212,170,0)}100%{box-shadow:0 0 0 0 rgba(0,212,170,0)}}

/* ---------- stack / ledger ---------- */
.stack > li{padding:1.5rem 0;border-top:1px solid var(--line)}
.stack > li:last-child{border-bottom:1px solid var(--line)}
.stack h3{margin-bottom:.45rem}
.stack p{font-size:.97rem}

.ledger{border-top:1px solid var(--line-2)}
.ledger > div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem;align-items:baseline;
  padding:.92rem 0;border-bottom:1px solid var(--line)}
.ledger .k{font-weight:500;font-size:.97rem;color:var(--text)}
.ledger .v{font-family:var(--mono);font-size:.86rem;color:var(--teal);
  font-variant-numeric:tabular-nums;text-align:right}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  border-top:1px solid var(--line)}
.step{padding:1.8rem clamp(1rem,2vw,1.8rem) 1.8rem 0;border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step .ix{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;color:var(--teal);
  display:block;margin-bottom:.75rem}
.step p{font-size:.96rem}
@media(max-width:820px){.steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .step:last-child{border-bottom:0}}

/* ---------- diagram / figure ---------- */
.dgm{padding:clamp(1.1rem,2.4vw,1.7rem);border-radius:10px}
.dgm figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer);margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--line)}
.shot{border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.shot img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:74% 28%}

/* ---------- form ---------- */
.form{display:grid;gap:1.1rem;max-width:600px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:600px){.f2{grid-template-columns:1fr}}
.field label{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);display:block;margin-bottom:.5rem}
.field input,.field textarea{width:100%;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:5px;padding:.82rem .95rem;color:var(--text);
  font-size:1rem;transition:border-color .22s,box-shadow .22s,background .22s}
.field input::placeholder,.field textarea::placeholder{color:var(--dimmer)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--teal);
  background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(0,212,170,.14)}
.field textarea{min-height:120px;resize:vertical}
.fstatus{font-family:var(--mono);font-size:.79rem;min-height:1.3em;margin-top:.8rem}
.fstatus.ok{color:var(--teal)}
.fstatus.err{color:var(--amber)}
.fnote{font-size:.9rem;color:var(--dimmer);margin-top:.5rem}
.fnote a{color:var(--teal)}

/* ---------- case study pages ---------- */
.cs-hero{padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem)}
.cs-hero h1{font-size:clamp(2.1rem,5.2vw,4rem);margin-top:1.2rem}
.cs-hero .lead{margin-top:1.5rem}
.cs-key{border-radius:10px;padding:clamp(1.5rem,3vw,2.3rem);margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.cs-key .n{font-family:var(--mono);font-weight:500;font-size:clamp(1.7rem,4.4vw,2.9rem);
  line-height:1.05;letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,var(--teal),#6fe9d0 50%,var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(0,212,170,.26))}
.cs-key .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);margin-top:.9rem;display:block}
.cs-block{padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.cs-block .lead{margin-top:1.2rem}
.cs-block h3{margin-top:1.8rem;margin-bottom:.5rem}
.cs-note{background:rgba(0,212,170,.07);border:1px solid rgba(0,212,170,.22);
  padding:1.25rem 1.45rem;border-radius:8px;margin-top:1.6rem}
.cs-note p{color:var(--dim);font-size:.96rem}
.cs-note .lbl{margin-bottom:.55rem;color:var(--teal)}
.dtable{width:100%;border-collapse:collapse;margin-top:1.5rem;font-size:.95rem}
.dtable th,.dtable td{text-align:left;padding:.78rem .9rem;border-bottom:1px solid var(--line)}
.dtable th{font-family:var(--mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer);font-weight:500;border-bottom-color:var(--line-2)}
.dtable td{color:var(--dim)}
.dtable td:last-child,.dtable th:last-child{text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums;color:var(--teal)}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding-block:2.8rem;font-size:.92rem;color:var(--dimmer)}
footer .wrap{display:flex;flex-wrap:wrap;gap:.9rem 2rem;justify-content:space-between;align-items:center}
footer a:hover{color:var(--teal)}

/* ---------- motion ----------
   Hiding is gated on .js. No JS = fully visible static page. */
.js .rise{opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .rise.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.js .ln-i{display:block;transform:translateY(112%);
  transition:transform .95s var(--ease)}
.js .in .ln-i{transform:none}

@media(prefers-reduced-motion:reduce){
  .js .rise{opacity:1!important;transform:none!important;transition:none!important}
  .js .ln-i{transform:none!important;transition:none!important}
  .js .sx .r{transform:scaleX(1)!important}
  .prog{display:none}
  .nav.up{transform:none}
  .btn::after,.trace::after{display:none}
  .status::before,.scrub-hint b{animation:none}
  *{animation-duration:.001ms!important}
}

/* ================================================================
   ASK ADEPTOPS — chat widget
   ================================================================ */
.chat-fab{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:150;
  display:flex;align-items:center;gap:.6rem;padding:.8rem 1.25rem;border:0;cursor:pointer;
  border-radius:100px;font-family:var(--sans);font-weight:600;font-size:.94rem;
  background:linear-gradient(120deg,var(--teal),var(--teal-2));color:#04120e;
  box-shadow:0 0 0 1px rgba(0,212,170,.4),0 14px 40px -12px rgba(0,212,170,.6);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),opacity .25s}
.chat-fab:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(0,212,170,.6),0 20px 50px -12px rgba(0,212,170,.7)}
.chat-fab svg{width:17px;height:17px}
.chat-fab.hide{opacity:0;pointer-events:none;transform:translateY(10px)}

.chat-panel{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:151;
  width:min(400px,calc(100vw - 2rem));height:min(560px,calc(100vh - 3rem));
  display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:rgba(14,16,24,.93);border:1px solid var(--line-2);backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.85);
  opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.chat-panel.open{opacity:1;transform:none;pointer-events:auto}

.chat-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.9rem 1.1rem;border-bottom:1px solid var(--line);flex:0 0 auto}
.chat-top .t{font-weight:600;font-size:.98rem;letter-spacing:-.02em}
.chat-top .t span{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-top:.2rem;font-weight:400}
.chat-x{background:none;border:0;cursor:pointer;color:var(--dimmer);font-size:1.4rem;
  line-height:1;padding:.15rem .4rem;border-radius:4px;transition:color .2s,background .2s}
.chat-x:hover{color:var(--text);background:var(--glass-2)}

.chat-log{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.85rem;
  scrollbar-width:thin}
.chat-log::-webkit-scrollbar{width:5px}
.chat-log::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}

.msg{max-width:88%;padding:.7rem .9rem;border-radius:10px;font-size:.93rem;line-height:1.55}
.msg.bot{background:var(--glass);border:1px solid var(--line);color:var(--text);align-self:flex-start;
  border-bottom-left-radius:3px}
.msg.me{background:rgba(0,212,170,.14);border:1px solid rgba(0,212,170,.3);color:var(--text);
  align-self:flex-end;border-bottom-right-radius:3px}
.msg.sys{align-self:center;background:none;border:0;color:var(--dimmer);font-family:var(--mono);
  font-size:.71rem;letter-spacing:.06em;text-align:center;max-width:100%}
.msg .src{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dimmer);margin-top:.5rem;padding-top:.5rem;
  border-top:1px solid var(--line)}

.chat-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.1rem .85rem;flex:0 0 auto}
.chip{background:var(--glass);border:1px solid var(--line);color:var(--dim);cursor:pointer;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;padding:.42rem .7rem;
  border-radius:100px;transition:border-color .2s,color .2s,background .2s}
.chip:hover{border-color:var(--teal);color:var(--teal);background:rgba(0,212,170,.08)}

.chat-in{display:flex;gap:.5rem;padding:.85rem 1.1rem 1.1rem;border-top:1px solid var(--line);flex:0 0 auto}
.chat-in input{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:8px;padding:.7rem .85rem;color:var(--text);font-size:.94rem;
  transition:border-color .2s,box-shadow .2s}
.chat-in input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,212,170,.13)}
.chat-send{background:linear-gradient(120deg,var(--teal),var(--teal-2));border:0;cursor:pointer;
  color:#04120e;border-radius:8px;padding:0 .95rem;font-weight:700;font-size:1.05rem;
  transition:transform .2s var(--ease),opacity .2s}
.chat-send:hover{transform:translateY(-1px)}
.chat-send:disabled{opacity:.4;cursor:not-allowed;transform:none}

.dots{display:inline-flex;gap:4px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--teal);
  animation:dot 1.3s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.18s}
.dots i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

@media(prefers-reduced-motion:reduce){
  .chat-panel{transition:none}
  .dots i{animation:none;opacity:.7}
}

/* ================================================================
   INTERACTIVE DEMOS — four systems you can actually operate
   ================================================================ */
.demos-wrap{position:relative}
.dm{padding-block:clamp(3.5rem,7vw,6rem);border-top:1px solid var(--line);position:relative}
.dm:first-of-type{border-top:0}

.dm-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;
  align-items:end;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.dm-head .who{font-family:var(--mono);font-size:.71rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal);display:block;margin-bottom:.9rem}
.dm-head h3{font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.02}
.dm-head p{margin-top:.85rem;max-width:52ch;font-size:1rem}
.dm-num{font-family:var(--mono);font-size:clamp(2.5rem,6vw,4.5rem);line-height:1;
  letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px var(--line-2);
  font-variant-numeric:tabular-nums;user-select:none}
@media(max-width:760px){.dm-head{grid-template-columns:1fr}.dm-num{display:none}}

/* control bar */
.dm-ctl{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1.15rem}
.pill{appearance:none;background:var(--glass);border:1px solid var(--line);color:var(--dim);
  cursor:pointer;font-family:var(--mono);font-size:.71rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.5rem .85rem;border-radius:100px;
  transition:border-color .22s,color .22s,background .22s,transform .22s var(--ease)}
.pill:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-1px)}
.pill[aria-pressed="true"],.pill.on{background:rgba(0,212,170,.16);border-color:var(--teal);color:var(--teal)}
.pill.warn[aria-pressed="true"],.pill.warn.on{background:rgba(245,181,68,.16);
  border-color:var(--amber);color:var(--amber)}
.dm-hint{font-family:var(--mono);font-size:.67rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dimmer);margin-left:auto}

/* two-pane stage */
.dm-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:stretch}
@media(max-width:880px){.dm-stage{grid-template-columns:1fr}}
.pane{border-radius:10px;padding:1.25rem;min-height:clamp(260px,36vh,360px);
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.pane-in{background:linear-gradient(160deg,#12141d,#0c0d13);border:1px solid var(--line)}
.pane-out{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px)}
.pane .ph{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);padding-bottom:.7rem;border-bottom:1px solid var(--line);margin-bottom:.9rem;
  display:flex;justify-content:space-between;gap:1rem}
.pane .ph b{color:var(--teal);font-weight:400}

/* generic rows */
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:baseline;
  padding:.44rem .5rem;margin:.1rem -.5rem;border-radius:4px;cursor:default;
  transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.row .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dimmer);transition:color .25s}
.row .v{font-family:var(--mono);font-size:.82rem;color:var(--dim);
  font-variant-numeric:tabular-nums;transition:color .25s}
.row.pick{cursor:pointer}
.row.pick:hover{background:rgba(255,255,255,.05)}
.row.lit{background:rgba(0,212,170,.11);box-shadow:inset 2px 0 0 var(--teal)}
.row.lit .k{color:var(--teal)}
.row.lit .v{color:var(--text)}
.row.flag{background:rgba(245,181,68,.11);box-shadow:inset 2px 0 0 var(--amber)}
.row.flag .k{color:var(--amber)}
.noise{height:5px;border-radius:3px;background:rgba(255,255,255,.06);margin:.55rem 0}

/* out items */
.oi{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:baseline;
  padding:.44rem 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateX(12px);
  transition:opacity .38s var(--ease),transform .38s var(--ease)}
.oi.on{opacity:1;transform:none}
.oi .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dimmer)}
.oi .v{font-family:var(--mono);font-size:.82rem;color:var(--text);font-variant-numeric:tabular-nums}
.oi .c{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--teal);margin-top:.2rem;opacity:0;transition:opacity .32s}
.oi .c.on{opacity:1}
.oi .c::before{content:"\2713  "}
.oi.warn .c{color:var(--amber)}
.oi.warn .c::before{content:"\26A0  "}

/* beam */
.beam2{position:absolute;left:0;right:0;height:96px;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,transparent,rgba(0,212,170,.10) 55%,rgba(0,212,170,.26) 92%,transparent);
  border-bottom:1px solid var(--teal);box-shadow:0 0 26px var(--glow);
  transition:opacity .3s}
.beam2.on{opacity:1}

/* verdict */
.vd{margin-top:auto;padding-top:1rem;opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.vd.on{opacity:1;transform:none}
.vd .b{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding:.48rem .85rem;border-radius:4px}
.vd.pass .b{background:rgba(0,212,170,.16);color:var(--teal);
  box-shadow:inset 0 0 0 1px rgba(0,212,170,.4),0 0 24px -6px var(--glow)}
.vd.esc .b{background:rgba(245,181,68,.14);color:var(--amber);box-shadow:inset 0 0 0 1px rgba(245,181,68,.4)}
.vd.rej .b{background:rgba(239,68,68,.14);color:#f87171;box-shadow:inset 0 0 0 1px rgba(239,68,68,.4)}
.vd p{font-size:.88rem;margin-top:.7rem;color:var(--dim)}

/* transcript (escalate demo) */
.tx{display:flex;flex-direction:column;gap:.6rem;overflow-y:auto;flex:1;padding-right:.25rem}
.tx::-webkit-scrollbar{width:4px}
.tx::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:2px}
.bub{max-width:92%;padding:.6rem .8rem;border-radius:9px;font-size:.87rem;line-height:1.5;
  opacity:0;transform:translateY(8px);transition:opacity .38s var(--ease),transform .38s var(--ease)}
.bub.on{opacity:1;transform:none}
.bub.q{align-self:flex-end;background:rgba(0,212,170,.13);border:1px solid rgba(0,212,170,.28);
  color:var(--text);border-bottom-right-radius:3px}
.bub.a{align-self:flex-start;background:var(--glass);border:1px solid var(--line);
  color:var(--dim);border-bottom-left-radius:3px}
.bub.stop{border-color:rgba(245,181,68,.42);background:rgba(245,181,68,.09)}
.bub .meta{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dimmer);margin-top:.45rem;padding-top:.4rem;
  border-top:1px solid var(--line)}
.bub.stop .meta{color:var(--amber)}

/* signal toggles (decide demo) */
.sig{display:grid;gap:.5rem}
.sig button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem;align-items:center;
  width:100%;text-align:left;background:var(--glass);border:1px solid var(--line);
  border-radius:7px;padding:.62rem .75rem;cursor:pointer;
  transition:border-color .22s,background .22s}
.sig button:hover{border-color:var(--line-2)}
.sig .dot{width:8px;height:8px;border-radius:50%;background:var(--dimmer);transition:background .25s,box-shadow .25s}
.sig button[aria-pressed="true"] .dot{background:var(--teal);box-shadow:0 0 10px var(--glow)}
.sig button[aria-pressed="true"].bad .dot{background:var(--amber);box-shadow:0 0 10px rgba(245,181,68,.6)}
.sig .lb{font-size:.86rem;color:var(--text)}
.sig .st{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer)}
.sig button[aria-pressed="true"] .st{color:var(--teal)}
.sig button[aria-pressed="true"].bad .st{color:var(--amber)}

/* shadow panel */
.shadow{margin-top:.9rem;border:1px dashed var(--line-2);border-radius:8px;padding:.8rem .9rem}
.shadow .h{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:.4rem}
.shadow .op{font-size:.84rem;color:var(--dim)}
.shadow .op b{color:var(--amber);font-weight:500}
.shadow .note{font-family:var(--mono);font-size:.61rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dimmer);margin-top:.5rem}

@media(prefers-reduced-motion:reduce){
  .oi,.bub,.vd{opacity:1!important;transform:none!important;transition:none!important}
  .oi .c{opacity:1!important}
  .beam2{display:none}
}

/* ================================================================
   ARCADE LAYER — each demo is a challenge you can win or lose
   ================================================================ */
.dm-chal{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  border:1px solid var(--line);border-left:2px solid var(--teal);
  border-radius:0 8px 8px 0;padding:.7rem .95rem;margin-bottom:1.1rem;
  background:linear-gradient(90deg,rgba(0,212,170,.07),transparent 60%)}
.dm-chal .tag{font-family:var(--mono);font-size:.63rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal)}
.dm-chal .txt{font-size:.95rem;color:var(--text);font-weight:500}

/* scoreboard */
.hud{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:baseline;margin-left:auto}
.hud div{text-align:right}
.hud .n{font-family:var(--mono);font-size:1.15rem;font-variant-numeric:tabular-nums;
  color:var(--text);letter-spacing:-.02em;display:block;line-height:1}
.hud .n.good{color:var(--teal)}
.hud .n.bad{color:var(--amber)}
.hud .l{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer);display:block;margin-top:.28rem}

/* big result number */
.bignum{font-family:var(--mono);font-weight:500;letter-spacing:-.05em;line-height:1;
  font-size:clamp(2.2rem,6vw,3.6rem);font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,var(--teal),#6fe9d0 45%,var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(0,212,170,.3))}

/* race bars */
.race{display:grid;gap:.85rem;margin-top:.3rem}
.race .lane .top{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:.35rem}
.race .lane .top b{color:var(--text);font-weight:400;font-variant-numeric:tabular-nums}
.race .bar{height:8px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.race .fill{height:100%;width:0;border-radius:5px;transition:width .1s linear}
.race .ai .fill{background:linear-gradient(90deg,var(--teal),var(--blue));box-shadow:0 0 14px var(--glow)}
.race .human .fill{background:rgba(255,255,255,.22)}
.race .lane.done .top b{color:var(--teal)}

/* flash feedback */
@keyframes flashOk{0%{box-shadow:0 0 0 0 rgba(0,212,170,.5)}100%{box-shadow:0 0 0 22px rgba(0,212,170,0)}}
@keyframes flashNo{0%{box-shadow:0 0 0 0 rgba(245,181,68,.55)}100%{box-shadow:0 0 0 22px rgba(245,181,68,0)}}
@keyframes nudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}60%{transform:translateX(4px)}}
.pane.hit-ok{animation:flashOk .6s ease-out}
.pane.hit-no{animation:flashNo .6s ease-out,nudge .32s ease-out}

/* blocked stamp */
.stamp{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-11deg) scale(.7);
  font-family:var(--mono);font-size:clamp(1.5rem,4vw,2.4rem);letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);border:3px solid var(--amber);
  padding:.4rem 1.1rem;border-radius:6px;opacity:0;pointer-events:none;z-index:3;
  background:rgba(10,12,18,.72);backdrop-filter:blur(3px);
  transition:opacity .22s var(--ease),transform .32s cubic-bezier(.2,1.5,.4,1)}
.stamp.on{opacity:1;transform:translate(-50%,-50%) rotate(-11deg) scale(1)}
.stamp.win{color:var(--teal);border-color:var(--teal)}

/* streak dots */
.streak{display:flex;gap:5px;align-items:center}
.streak i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.14);
  transition:background .3s,box-shadow .3s}
.streak i.on{background:var(--teal);box-shadow:0 0 9px var(--glow)}

@media(prefers-reduced-motion:reduce){
  .pane.hit-ok,.pane.hit-no{animation:none}
  .stamp{transition:none}
  .race .fill{transition:none}
}

/* ================================================================
   DEMOS v2 — bets the visitor loses
   ================================================================ */

/* data table */
.dt{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.79rem}
.dt th{text-align:left;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dimmer);font-weight:500;padding:.4rem .5rem;border-bottom:1px solid var(--line-2)}
.dt td{padding:.42rem .5rem;border-bottom:1px solid var(--line);color:var(--dim);
  font-variant-numeric:tabular-nums;transition:background .3s,color .3s}
.dt tr.hl td{background:rgba(0,212,170,.09);color:var(--text)}
.dt tr.bad td{background:rgba(239,68,68,.08)}
.dt tr.hide td{color:transparent;text-shadow:0 0 9px rgba(150,161,179,.65)}
.dt td.key{color:var(--teal)}
.dt td.gap{color:var(--amber)}
.dt tfoot td{border-bottom:0;padding-top:.7rem;color:var(--dimmer);font-size:.7rem}

/* multiple-choice quiz */
.quiz{display:grid;gap:.5rem}
.quiz button{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:start;
  text-align:left;background:var(--glass);border:1px solid var(--line);border-radius:8px;
  padding:.7rem .85rem;cursor:pointer;transition:border-color .22s,background .22s,transform .22s var(--ease)}
.quiz button:hover:not(:disabled){border-color:var(--line-2);transform:translateX(2px)}
.quiz button:disabled{cursor:default}
.quiz .mk{font-family:var(--mono);font-size:.68rem;color:var(--dimmer);
  border:1px solid var(--line-2);border-radius:4px;width:22px;height:22px;
  display:grid;place-items:center;flex:0 0 auto;transition:all .25s}
.quiz .op{font-family:var(--mono);font-size:.8rem;color:var(--dim);line-height:1.5}
.quiz button.wrong{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.07)}
.quiz button.wrong .mk{border-color:#f87171;color:#f87171}
.quiz button.right{border-color:var(--teal);background:rgba(0,212,170,.1)}
.quiz button.right .mk{border-color:var(--teal);color:var(--teal);background:rgba(0,212,170,.16)}
.quiz button.right .op{color:var(--text)}

.reveal-box{margin-top:1rem;opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal-box.on{opacity:1;transform:none}
.reveal-box .rule{font-family:var(--mono);font-size:.86rem;color:var(--teal);
  background:rgba(0,212,170,.08);border:1px solid rgba(0,212,170,.26);
  border-radius:7px;padding:.7rem .85rem;line-height:1.6}
.reveal-box p{font-size:.92rem;margin-top:.75rem}

/* sparkline grid */
.spark{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.5rem}
.spark button{background:var(--glass);border:1px solid var(--line);border-radius:7px;
  padding:.5rem .55rem;cursor:pointer;text-align:left;
  transition:border-color .2s,background .2s,transform .2s var(--ease)}
.spark button:hover:not(:disabled){border-color:var(--line-2);transform:translateY(-2px)}
.spark button:disabled{cursor:default}
.spark .nm{font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dimmer);display:block;margin-bottom:.3rem}
.spark svg{width:100%;height:26px;display:block;overflow:visible}
.spark path{fill:none;stroke:var(--dim);stroke-width:1.4;stroke-linejoin:round;transition:stroke .3s}
.spark button.found{border-color:var(--amber);background:rgba(245,181,68,.12)}
.spark button.found path{stroke:var(--amber);stroke-width:2}
.spark button.miss{border-color:rgba(239,68,68,.4);opacity:.4}

/* ---------- LIVE DECISION DIAGRAM ---------- */
.diagram-live{position:relative;width:100%}
.diagram-live svg{width:100%;height:auto;display:block;overflow:visible}
.nd rect{transition:fill .35s var(--ease),stroke .35s var(--ease)}
.nd text{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;transition:fill .35s}
.nd.dim rect{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.1)}
.nd.dim text{fill:#5d6675}
.nd.live rect{fill:rgba(0,212,170,.13);stroke:#00d4aa}
.nd.live text{fill:#7ff0d8}
.nd.hot rect{fill:rgba(0,212,170,.22);stroke:#00d4aa}
.nd.hot text{fill:#bdfff0}
.nd.warn rect{fill:rgba(245,181,68,.16);stroke:#f5b544}
.nd.warn text{fill:#ffd894}
.nd.rej rect{fill:rgba(239,68,68,.16);stroke:#f87171}
.nd.rej text{fill:#ffb4b4}
.wire{stroke:rgba(255,255,255,.16);stroke-width:1;fill:none;transition:stroke .35s}
.wire.on{stroke:rgba(0,212,170,.55)}
.wire.ghost{stroke-dasharray:3 3;stroke:rgba(255,255,255,.2)}
.wire.blocked{stroke:rgba(239,68,68,.35)}
.pk{fill:#00d4aa;filter:drop-shadow(0 0 5px rgba(0,212,170,.85))}
.engine-glow{opacity:0;transition:opacity .4s}
.engine-glow.on{opacity:1}
.dg-cap{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer);margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.dg-cap b{color:var(--teal);font-weight:400}
.dg-cap.warn b{color:var(--amber)}
.dg-cap.rej b{color:#f87171}

@media(prefers-reduced-motion:reduce){
  .quiz button:hover,.spark button:hover{transform:none}
  .reveal-box{opacity:1;transform:none}
  .pk{display:none}
}

/* ================================================================
   NOX — the brain that rides the page
   ================================================================ */
/* ---------- the Nox section ---------- */
.nox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.nox-cell{background:var(--bg);padding:1.1rem 1.15rem;transition:background .3s}
.nox-cell:hover{background:var(--bg-3)}
.nox-cell .t{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal);display:block;margin-bottom:.55rem}
.nox-cell .d{font-size:.92rem;color:var(--dim);line-height:1.5}
.nox-rule{display:flex;gap:.8rem;align-items:flex-start;padding:1rem 0;border-top:1px solid var(--line)}
.nox-rule:last-child{border-bottom:1px solid var(--line)}
.nox-rule .ic{font-family:var(--mono);font-size:.66rem;color:var(--teal);
  border:1px solid rgba(0,212,170,.35);border-radius:4px;padding:.18rem .42rem;flex:0 0 auto;margin-top:.1rem}
.nox-rule .bd strong{display:block;font-size:1rem;color:var(--text);margin-bottom:.22rem}
.nox-rule .bd p{font-size:.94rem}

/* ================================================================
   NOX STAGE — one fixed brain behind the entire site
   ================================================================ */
#nox-stage{position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease}
#nox-stage.ready{opacity:1}
#nox-stage canvas{display:block;width:100%;height:100%}

/* everything readable rides above it */
.nav,.hero,.sec,footer,#chatFab,#chatPanel{position:relative;z-index:1}

/* the brain is a control: a circle that rides with it */
#nox-hit{position:fixed;width:clamp(140px,17vw,240px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);z-index:2;cursor:pointer;pointer-events:auto;
  transition:left .95s cubic-bezier(.22,1,.36,1),top .95s cubic-bezier(.22,1,.36,1),
             width .95s cubic-bezier(.22,1,.36,1)}
#nox-hit:focus-visible{outline:2px solid var(--teal);outline-offset:6px}

/* ---------- Nox: narrator and console in one ---------- */
#nox-bubble{position:fixed;z-index:4;width:min(340px,28vw);opacity:0;pointer-events:none;
  transform:translate(-50%,10px);
  transition:opacity .45s ease,transform .45s ease,left .95s cubic-bezier(.22,1,.36,1),
             right .95s cubic-bezier(.22,1,.36,1)}
#nox-bubble.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#nox-bubble .nox-card{background:rgba(9,11,18,.9);border:1px solid rgba(122,215,255,.2);
  border-radius:14px;padding:.9rem 1rem 1rem;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4);
  display:flex;flex-direction:column}
@supports (backdrop-filter:blur(4px)){
  #nox-bubble .nox-card{background:rgba(9,11,18,.72);backdrop-filter:blur(16px)}
}
#nox-bubble .who{flex:none;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);margin-bottom:.6rem}
#nox-bubble .who span{display:flex;align-items:center;gap:.45rem}
#nox-bubble .who span::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 10px var(--teal);animation:noxbeat 3.2s infinite}
@keyframes noxbeat{0%,100%{opacity:1}50%{opacity:.3}}
#nox-bubble .nox-reset{display:none;background:none;border:0;color:var(--dim);
  font-size:.85rem;cursor:pointer;padding:.1rem .3rem;line-height:1}
#nox-bubble .nox-reset:hover{color:var(--teal)}
#nox-bubble.talking .nox-reset{display:block}

#nox-bubble .nox-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
#nox-bubble .nox-line{font-size:.88rem;line-height:1.5;color:var(--text);margin:0}
#nox-bubble .nox-convo[hidden]{display:none}
#nox-bubble .nox-convo{
  display:flex;flex-direction:column;gap:.7rem;padding-right:.2rem}
#nox-bubble .turn{font-size:.9rem;line-height:1.55}
#nox-bubble .turn.me{align-self:flex-end;max-width:88%;background:rgba(0,212,170,.1);
  border:1px solid rgba(0,212,170,.25);color:var(--text);
  border-radius:10px 10px 3px 10px;padding:.45rem .65rem}
#nox-bubble .turn.nox{color:var(--text)}
#nox-bubble .turn.nox p{margin:0}
#nox-bubble .turn a{color:var(--teal)}
#nox-bubble .src{display:block;margin-top:.4rem;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
#nox-bubble .dots{display:inline-flex;gap:4px}
#nox-bubble .dots i{width:5px;height:5px;border-radius:50%;background:var(--teal);
  animation:noxdot 1.3s infinite}
#nox-bubble .dots i:nth-child(2){animation-delay:.18s}
#nox-bubble .dots i:nth-child(3){animation-delay:.36s}
@keyframes noxdot{0%,60%,100%{opacity:.25}30%{opacity:1}}

#nox-bubble .nox-sugg{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem;flex:none}
/* suggestions stay visible while talking: they update per section */
#nox-bubble .nox-sugg button{font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;
  color:var(--dim);background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:99px;padding:.35rem .65rem;cursor:pointer;text-align:left;
  transition:color .25s,border-color .25s,background .25s}
#nox-bubble .nox-sugg button:hover{color:var(--teal);border-color:rgba(0,212,170,.45);
  background:rgba(0,212,170,.08)}

#nox-bubble .nox-ask{display:flex;gap:.4rem;margin-top:.75rem;flex:none;
  border-top:1px solid var(--line);padding-top:.75rem}
#nox-bubble .nox-ask input{flex:1;min-width:0;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:8px;padding:.5rem .65rem;
  color:var(--text);font:inherit;font-size:.85rem}
#nox-bubble .nox-ask input::placeholder{color:var(--dim)}
#nox-bubble .nox-ask input:focus{outline:none;border-color:rgba(0,212,170,.5)}
#nox-bubble .nox-ask button{background:var(--teal);color:#05130f;border:0;border-radius:8px;
  width:34px;flex:none;cursor:pointer;font-size:.9rem}
#nox-bubble .nox-ask button:hover{filter:brightness(1.1)}

/* The panel hangs under the orb wherever the orb is; JS sets left/top and the
   canvas draws the trail of cells between them. */
#nox-bubble.under-orb{transform:translate(-50%,0);bottom:auto;right:auto}
#nox-bubble.under-orb.on{transform:translate(-50%,0)}
/* never let it run off the bottom of the screen */
#nox-bubble{max-height:none}
/* The gap under the orb is applied in JS instead, so it is part of the height
   budget. As a CSS margin it pushed the panel down without shrinking it, and
   the bottom of the card fell off the screen. */

/* Nox is the assistant on desktop, so the corner chat button would be a
   second front door to the same agent. It stays for narrow screens only. */
@media(min-width:1080px){ #chatFab,#chatPanel{display:none!important} }

/* ---------- copy steps aside for the brain ---------- */
@media(min-width:1080px){
  .sec[data-nox="left"]>.wrap,.sec[data-nox="right"]>.wrap,
  .sec[data-nox="leftFar"]>.wrap,.sec[data-nox="rightNear"]>.wrap{max-width:min(720px,52vw)}
  .sec[data-nox="left"]>.wrap,.sec[data-nox="leftFar"]>.wrap{margin-left:auto;margin-right:clamp(2rem,6vw,7rem)}
  .sec[data-nox="right"]>.wrap,.sec[data-nox="rightNear"]>.wrap{margin-right:auto;margin-left:clamp(2rem,6vw,7rem)}
  /* these grids were sized for a full-width page; in half a screen they have
     to give up columns rather than squeeze the text into ribbons */
  .sec[data-nox="left"] .split,.sec[data-nox="right"] .split,.sec[data-nox="leftFar"] .split,.sec[data-nox="rightNear"] .split{grid-template-columns:1fr;gap:2rem}
  .sec[data-nox="left"] .figs,.sec[data-nox="right"] .figs,.sec[data-nox="leftFar"] .figs,.sec[data-nox="rightNear"] .figs{grid-template-columns:1fr 1fr}
  /* the figure type was sized for a third of the page, not a quarter of it */
  .sec[data-nox="left"] .fig .n,.sec[data-nox="right"] .fig .n,.sec[data-nox="leftFar"] .fig .n,.sec[data-nox="rightNear"] .fig .n{font-size:clamp(1.8rem,3vw,2.6rem)}
  .sec[data-nox="left"] .cards,.sec[data-nox="right"] .cards,.sec[data-nox="leftFar"] .cards,.sec[data-nox="rightNear"] .cards{
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  /* auto-fit finds room for three here and leaves a hole; two is the honest fit */
  .sec[data-nox="left"] .nox-grid,.sec[data-nox="right"] .nox-grid,.sec[data-nox="leftFar"] .nox-grid,.sec[data-nox="rightNear"] .nox-grid{
    grid-template-columns:1fr 1fr}
  /* full-width sections keep a lane on the right so the panel never sits on
     top of the content it is talking about */
  .sec[data-nox="back"]>.wrap,.sec[data-nox="center"]>.wrap,.sec[data-nox="inside"]>.wrap{
    max-width:min(var(--wrap),calc(100vw - 640px));
    margin-left:max(var(--pad),calc((100vw - var(--wrap))/2));margin-right:auto}
}
@media(max-width:1079px){
  /* no room to sit beside the copy: the brain goes behind it */
  #nox-stage{opacity:.30}
  #nox-stage.ready{opacity:.30}
  #nox-bubble{display:none}
  #nox-hit{display:none}
}

/* the hero text needs its own ground to stay legible over the core */
/* The hero copy holds the left half and the brain takes the right, so no veil
   is needed. A shadow covers the few nodes that drift under the type. */
.hero h1,.hero .lead,.hero .strip{text-shadow:0 2px 20px rgba(8,8,13,.92)}
@media(min-width:1080px){
  .hero h1,.hero .lead,.hero .acts,.hero .strip,.hero .nox-chips{max-width:min(700px,54%)}
  /* 7vw was set for a full-width hero; in half the width it has to come down */
  .hero h1{font-size:clamp(2.6rem,3.7vw,3.7rem)}
  .hero .lead{margin-top:1.5rem;font-size:1.02rem}
  .hero .acts{margin-top:2rem}
  .hero .strip{margin-top:2.4rem;padding-top:1.3rem}
}

/* hero suggestion chips */
.nox-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}
.nox-chips button{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--dim);background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:99px;padding:.5rem .9rem;cursor:pointer;
  transition:color .25s,border-color .25s,background .25s}
.nox-chips button:hover{color:var(--teal);border-color:rgba(0,212,170,.45);
  background:rgba(0,212,170,.08)}

/* ================================================================
   ONE DOCUMENT, END TO END
   ================================================================ */
.flow{margin-top:clamp(2rem,4vw,3rem)}
.flow-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:0 0 1rem;padding:0}
.flow-steps li{display:flex}
.flow-steps button{flex:1;display:flex;flex-direction:column;gap:.3rem;text-align:left;
  background:none;border:0;border-top:2px solid var(--line);padding:.7rem .1rem 0;cursor:pointer;
  font:inherit;color:var(--dim);transition:color .3s,border-color .3s}
.flow-steps button .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em}
.flow-steps button .t{font-size:.94rem;font-weight:600;letter-spacing:-.01em}
.flow-steps li.on button{color:var(--text);border-top-color:var(--teal)}
.flow-steps button:hover{color:var(--text)}
.flow-steps button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

.flow-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);
  align-items:center;padding:clamp(1.3rem,3vw,2.2rem);border-radius:12px}
.flow-vis{min-height:200px;display:flex;align-items:center;justify-content:center}
.flow-say .lbl{display:block;margin-bottom:.7rem}
.flow-say p{font-size:1rem;line-height:1.6;color:var(--text)}
.flow-note{display:flex;gap:.55rem;align-items:flex-start;margin-top:1rem;
  font-size:.88rem;color:var(--dim);border-top:1px solid var(--line);padding-top:.9rem}
.flow-note .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);
  margin-top:.45rem;flex:none;box-shadow:0 0 8px var(--teal)}
.flow-rail-wrap{position:relative}
.flow-rail{position:relative;height:18px;margin:.55rem 0 1.1rem}
.rail-line{position:absolute;inset:8px 0 auto;height:2px;background:var(--line);border-radius:2px}
.rail-line i{display:block;height:100%;width:0;background:linear-gradient(90deg,
  rgba(0,212,170,.35),var(--teal));border-radius:2px}
.rail-token{position:absolute;top:2px;left:0;width:14px;height:14px;margin-left:-7px}
.rail-token span{display:block;width:100%;height:100%;border-radius:50%;
  background:var(--teal);box-shadow:0 0 0 4px rgba(0,212,170,.16),0 0 14px rgba(0,212,170,.8);
  animation:railBeat 1.8s ease-in-out infinite}
@keyframes railBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}

@media(max-width:820px){
  .flow-body{grid-template-columns:1fr}
  .flow-steps{grid-template-columns:repeat(2,1fr);gap:.6rem}
}

/* ---- where you are, while you are mid-conversation ---- */
/* display:flex beats the UA [hidden] rule, so restore it explicitly */
#nox-bubble .nox-ctx[hidden]{display:none}
#nox-bubble .nox-ctx{display:flex;align-items:center;gap:.5rem;width:100%;
  background:rgba(0,212,170,.07);border:1px solid rgba(0,212,170,.22);border-radius:8px;
  padding:.45rem .6rem;margin-bottom:.7rem;cursor:pointer;font:inherit;text-align:left;
  transition:background .25s,border-color .25s}
#nox-bubble .nox-ctx:hover{background:rgba(0,212,170,.13);border-color:rgba(0,212,170,.45)}
#nox-bubble .nox-ctx .ctx-k{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);flex:none}
#nox-bubble .nox-ctx .ctx-v{font-size:.78rem;color:var(--text);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nox-bubble .nox-ctx .ctx-go{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal);flex:none}
#nox-bubble .nox-ctx.pulse{animation:noxCtx 1.5s var(--ease) 2}
@keyframes noxCtx{0%,100%{background:rgba(0,212,170,.07)}45%{background:rgba(0,212,170,.24)}}

/* ---- pick the kind of document ---- */
.flow-kinds{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.3rem}
.flow-kinds button{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--dim);
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:99px;
  padding:.5rem .9rem;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.flow-kinds button:hover{color:var(--text);border-color:var(--line-2)}
.flow-kinds button[aria-pressed="true"]{color:var(--teal);border-color:rgba(0,212,170,.5);
  background:rgba(0,212,170,.1)}
.flow-kinds button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.flow-foot{margin-top:1rem;font-size:.86rem;color:var(--dim);max-width:64ch}
.fv .sheet.skew{transform:rotate(3deg);transform-origin:center;opacity:.85}

#nox-bubble .turn.seg{border-top:1px solid var(--line);padding-top:.6rem;margin-top:.2rem}
#nox-bubble .turn.seg .seg-k{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
#nox-bubble .turn.seg .seg-v{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal)}
#nox-bubble .turn.seg p{margin-top:.4rem}

/* ---- stage devices ---- */
.fv{width:100%;max-width:340px;height:auto}
.fv text{font-family:var(--mono)}
@keyframes fvIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fvWire{from{stroke-dashoffset:var(--len,140)}to{stroke-dashoffset:0}}

/* 01 documents landing */
.v-paper .drop{animation:fvDrop .6s cubic-bezier(.2,.9,.3,1) both}
@keyframes fvDrop{from{opacity:0;transform:translate(-40px,-24px) rotate(-14deg) scale(.9)}
  to{opacity:1;transform:rotate(var(--rot)) scale(1)}}
.v-paper .sheet{fill:rgba(255,255,255,.055);stroke:var(--line-2);stroke-width:1}
.v-paper .smudge{fill:rgba(122,215,255,.16)}
.v-paper .ln{fill:rgba(255,255,255,.2)}
.v-paper .stamp{animation:fvIn .5s var(--ease) both}
.v-paper .stamp circle{fill:rgba(245,181,68,.14);stroke:var(--amber);stroke-width:1}
.v-paper .stamp text{fill:var(--amber);font-size:15px;font-weight:600;text-anchor:middle}

/* 02 web diagram */
.v-web .hub-glow{fill:rgba(0,212,170,.07);animation:fvPulse 3.4s ease-in-out infinite}
@keyframes fvPulse{0%,100%{opacity:.5}50%{opacity:1}}
.v-web .doc-node rect{fill:rgba(255,255,255,.06);stroke:var(--teal);stroke-width:1.1}
.v-web .ln.tiny{fill:rgba(255,255,255,.28)}
.v-web .wire{fill:none;stroke:rgba(122,215,255,.45);stroke-width:1;
  stroke-dasharray:200;--len:200;animation:fvWire .7s var(--ease) both}
.v-web .node{animation:fvIn .4s var(--ease) both}
.v-web .node circle{fill:var(--teal)}
.v-web .node text{fill:var(--dim);font-size:8.5px}
.v-web .node.missing circle{fill:var(--amber)}
.v-web .node.missing text{fill:var(--amber)}

/* 03 decision tree */
.v-tree .seed{fill:var(--teal)}
.v-tree .branch{fill:none;stroke:rgba(0,212,170,.5);stroke-width:1.4;
  stroke-dasharray:170;--len:170;animation:fvWire .75s var(--ease) both}
.v-tree .branch.stop{stroke:rgba(245,181,68,.6)}
.v-tree .gate{animation:fvIn .4s var(--ease) both}
.v-tree .gate rect{fill:rgba(255,255,255,.04);stroke:var(--line);stroke-width:1}
.v-tree .gate circle{fill:var(--teal)}
.v-tree .gate text{fill:var(--text);font-size:8.6px}
.v-tree .gate .vd{text-anchor:end;fill:var(--teal);font-size:8px}
.v-tree .gate.stop rect{fill:rgba(245,181,68,.08);stroke:rgba(245,181,68,.5)}
.v-tree .gate.stop circle,.v-tree .gate.stop .vd{fill:var(--amber)}

/* 04 the trail */
.v-trail .row{animation:fvIn .35s var(--ease) both}
.v-trail .row rect{fill:rgba(255,255,255,.035);stroke:var(--line);stroke-width:1}
.v-trail .row text{fill:var(--dim);font-size:8.4px}
.v-trail .row .vd{text-anchor:end;fill:var(--teal)}
.v-trail .row.stop rect{stroke:rgba(245,181,68,.45)}
.v-trail .row.stop .vd{fill:var(--amber)}
.v-trail .seal{animation:fvSeal .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes fvSeal{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:none}}
.v-trail .seal rect{fill:rgba(245,181,68,.09);stroke:rgba(245,181,68,.5);stroke-width:1}
.v-trail .seal .hd{fill:var(--amber);font-size:13px;font-weight:600;font-family:var(--sans)}
.v-trail .seal .sb{fill:var(--dim);font-size:8.4px}


/* ---- per-kind arrival visuals ---- */
.v-grid .sheet{fill:rgba(255,255,255,.05);stroke:var(--line-2);stroke-width:1}
.v-grid .hdrbar{fill:rgba(122,215,255,.3)}
.v-grid .cell{fill:rgba(255,255,255,.2);animation:fvIn .3s var(--ease) both}
.v-grid .cell.bad{fill:rgba(245,181,68,.75)}

.v-route .route{fill:none;stroke:rgba(122,215,255,.35);stroke-width:1.4;stroke-dasharray:4 5}
.v-route .pin{fill:var(--teal)}
.v-route .pin.end{fill:rgba(122,215,255,.6)}
.v-route .parcel rect{fill:rgba(255,255,255,.08);stroke:var(--teal);stroke-width:1}
.v-route .parcel .tape{fill:rgba(0,212,170,.4);stroke:none}
.v-route .parcel{offset-path:path("M28,150 C90,150 96,54 150,54 C210,54 214,120 272,120");
  animation:fvRoute 3.4s cubic-bezier(.4,0,.5,1) infinite}
@keyframes fvRoute{0%{offset-distance:0%;opacity:0}
  10%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
.v-route .sigbox rect{fill:rgba(245,181,68,.08);stroke:rgba(245,181,68,.5);stroke-width:1;
  stroke-dasharray:4 4}
.v-route .sigbox text{fill:var(--amber);font-size:9px;text-anchor:middle}

.v-hand .sheet{fill:rgba(255,255,255,.05);stroke:var(--line-2);stroke-width:1}
.v-hand .box{fill:none;stroke:var(--line-2);stroke-width:1.2;animation:fvIn .3s var(--ease) both}
.v-hand .box.on{fill:rgba(0,212,170,.5);stroke:var(--teal)}
.v-hand .scrawl{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:120;--len:120;animation:fvWire .8s var(--ease) both}
.v-hand .scrawl.sign{stroke:rgba(245,181,68,.75);stroke-width:2}

/* ---- the exchange you just had, folded away ---- */
#nox-bubble .nox-past{flex:none;margin-top:.7rem;border-top:1px solid var(--line);padding-top:.65rem}
#nox-bubble .nox-past[hidden]{display:none}
#nox-bubble .nox-past summary{display:flex;align-items:center;gap:.5rem;cursor:pointer;
  list-style:none;padding:.15rem 0}
#nox-bubble .nox-past summary::-webkit-details-marker{display:none}
#nox-bubble .nox-past summary::after{content:"\25be";margin-left:auto;color:var(--teal);
  font-size:.7rem;transition:transform .25s}
#nox-bubble .nox-past[open] summary::after{transform:rotate(180deg)}
#nox-bubble .nox-past .pk{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);flex:none}
#nox-bubble .nox-past .pv{font-size:.76rem;color:var(--dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
#nox-bubble .nox-past .past-body{margin-top:.6rem;max-height:34vh;overflow-y:auto}