/* ==========================================================================
   th6mis.ai — one stylesheet, no imports, no third-party anything.

   Tokens and components are lifted from the v3 motion deck (BRAND.md §1–4)
   and extended for a scrolling one-pager. The deck's argument is carried by
   colour, so the semantics are load-bearing:
     mint  = observed / proven / delivered
     amber = declared / prescribed intent
     red   = failure / violation

   The signature component is `.rail`: a real uSID destination address pinned
   under the nav, consumed one instruction per section as the reader scrolls.
   The deck's own words for it — "the destination has become a program
   counter" — so the rail carries a cursor that points at the instruction
   currently executing. Reader as packet. Section as hop.
   ========================================================================== */

/* --- 1. tokens ----------------------------------------------------------- */
:root{
  /* The deck's void is a cold blue-cyan (#05161B). These are the same values
     rotated toward green and warmed in the mids: the ground reads warmer, mint
     stays the hero accent, and amber now harmonises with the page instead of
     fighting it. Every pair below is AA-verified in the comment at --faint-ink. */
  --void:  #0B1613;
  --panel: #132420;
  --panel2:#1B2F29;
  --edge:  rgba(150,200,180,.16);

  --mint:  #4FE3C1;  --mint-dim:  rgba(79,227,193,.14);
  --amber: #F2B441;  --amber-dim: rgba(242,180,65,.13);
  --red:   #FF7A63;  --red-dim:   rgba(255,122,99,.13);

  --ink:   #EDF6F1;
  --mute:  #9DB8AC;
  --faint: #5B7C82;

  /* Derived, per CLAUDE.md's instruction to verify anything we derive.
     BRAND's --faint measures 4.09:1 on the ground and fails AA for the footnote
     and source lines it is specified for. It stays the token for non-text roles
     (hairlines, spent carrier slots); small copy uses --faint-ink.
     On --void / --panel: ink 16.7/14.7 · mute 8.7/7.6 · faint-ink 5.5/4.8 ·
     mint 11.5/10.1 · amber 10.0/8.8 · red 7.2/6.3 — all AA. */
  --faint-ink: #71938A;

  /* The inverted band (§20). The ground is the brand's own --ink, so the
     evidence page reads as the site printed rather than as a second theme.
     Measured on --paper: paper-ink 16.7 · paper-mute 6.2 · paper-faint 4.7 ·
     paper-mint 5.6 · paper-amber 5.4 · paper-red 6.1 — all AA. */
  --paper:       #EDF6F1;
  --paper-ink:   #0B1613;
  --paper-mute:  #46605A;
  --paper-faint: #5A736B;
  --paper-mint:  #0E6E5B;
  --paper-amber: #8A5A05;
  --paper-red:   #A8321E;
  --paper-edge:  rgba(11,22,19,.16);

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.19,.85,.24,1);

  --nav-h: 58px;
  --rail-h: 34px;
  --wrap: 1120px;
  --gut: clamp(1.15rem, 5vw, 2.5rem);
}

/* --- 2. reset ------------------------------------------------------------ */
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + var(--rail-h));}
body{
  background:var(--void); color:var(--ink); font-family:var(--sans);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;}
a{color:var(--mint); text-decoration:none;}
a:hover{text-decoration:underline; text-underline-offset:3px;}
:focus-visible{outline:2px solid var(--mint); outline-offset:3px; border-radius:3px;}
::selection{background:var(--mint); color:var(--void);}

/* the ambient routing grid — fixed, so long pages don't tile it visibly */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background:
    repeating-linear-gradient(0deg, rgba(150,200,180,.04) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(90deg, rgba(150,200,180,.04) 0 1px, transparent 1px 68px);
}
/* Warmth lives here rather than in the base hex: two slow blooms, amber-heavy,
   drifting just enough that a long page never feels like a flat sheet. */
body::after{
  content:""; position:fixed; inset:-20%; pointer-events:none; z-index:0;
  background:
    radial-gradient(46% 40% at 76% 12%, rgba(79,227,193,.10), transparent 64%),
    radial-gradient(52% 46% at 10% 88%, rgba(242,180,65,.11), transparent 66%),
    radial-gradient(40% 38% at 92% 78%, rgba(242,148,65,.06), transparent 68%);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  font-family:var(--mono); font-size:.75rem; padding:.7rem 1rem;
  background:var(--mint); color:var(--void);
}
.skip:focus{left:0;}

/* --- 3. type ------------------------------------------------------------- */
/* The eyebrow is not a label for the section, it is the uSID instruction the
   section executes — the same string the rail is pointing at. Structure that
   encodes something true, per BRAND.md §2. */
.eyebrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mint); display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin-bottom:1.1rem;
}
.eyebrow::before{content:""; width:26px; height:1px; background:currentColor; opacity:.6; flex:none;}
.eyebrow.declared{color:var(--amber);}
.eyebrow b{
  font-weight:700; color:var(--ink); letter-spacing:.1em;
  padding:.16rem .42rem; border-radius:4px; background:var(--mint-dim);
  border:1px solid rgba(79,227,193,.3); font-size:.66rem;
}
.cap{text-transform:none;}

h1,h2,h3,h4{font-family:var(--mono); font-weight:700; letter-spacing:-.03em; line-height:1.06;}
h1{font-size:clamp(1.72rem, 3.4vw, 2.9rem); max-width:22ch;}
h2{font-size:clamp(1.4rem, 2.7vw, 2.2rem); letter-spacing:-.025em; line-height:1.1; max-width:26ch;}
h3{font-size:1rem; letter-spacing:-.01em;}
.lo{color:var(--faint);} .hi{color:var(--mint);} .warn{color:var(--red);} .dec{color:var(--amber);}
h1 .lo,h2 .lo{color:#7C9A8D;}   /* the faint token is too dim to carry headline words */

.support{
  font-size:clamp(.95rem,1.15vw,1.06rem); color:var(--mute);
  max-width:58ch; line-height:1.55; margin-top:1.1rem;
}
.support.wide{max-width:68ch;}
.support strong,.lede strong{color:var(--ink); font-weight:600;}
.lede{font-size:clamp(1rem,1.35vw,1.18rem); color:var(--ink); max-width:58ch; margin-top:1.1rem;}

/* the one quotable line per section, set larger than body and hung on a mint
   hairline — used where the deck would have given a whole slide to a sentence */
.pull{
  font-family:var(--mono); font-size:clamp(1rem,1.55vw,1.3rem); line-height:1.4;
  letter-spacing:-.02em; color:var(--ink); max-width:44ch;
  border-left:2px solid var(--mint); padding-left:1.1rem; margin-top:2rem;
}
.pull.dec{border-left-color:var(--amber);}
.pull em{font-style:normal; color:var(--mint);}
.pull.dec em{color:var(--amber);}

p + p{margin-top:.75rem;}

.foot{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--faint-ink);
  margin-top:1.7rem; padding-top:.95rem; line-height:1.7; border-top:1px solid var(--edge);
  max-width:78ch;
}
.foot b{color:var(--mute); font-weight:600;}
.src{
  font-family:var(--mono); font-size:.66rem; color:var(--faint-ink);
  letter-spacing:.02em; line-height:1.6; margin-top:.8rem;
}

/* --- 4. layout ----------------------------------------------------------- */
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); position:relative; z-index:1;}
/* the unlisted /flows/ page exists to show two wide diagrams at full size */
.wrap--flows{max-width:1320px;}

/* Sections are separated by air and by a soft change of ground, never by a
   rule. Hairlines are reserved for things that are actually tabular. */
.band{padding:clamp(4rem,8vw,7rem) 0; position:relative; z-index:1;}
.band--wash{
  background:linear-gradient(180deg,
    rgba(27,47,41,0) 0%, rgba(27,47,41,.42) 18%, rgba(27,47,41,.42) 82%, rgba(27,47,41,0) 100%);
}
/* a single seam of light where two bands meet — the only "divider" on the site */
.band--seam::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(680px,72%); height:1px;
  background:linear-gradient(90deg, transparent, rgba(79,227,193,.32), transparent);
}
main{padding-top:calc(var(--nav-h) + var(--rail-h));}

.cols{display:grid; gap:1.1rem; margin-top:2rem;}
.c2{grid-template-columns:repeat(2,1fr);}
.c3{grid-template-columns:repeat(3,1fr);}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start;}
/* The copy column has to hold a mono headline at ~21 characters a line, which
   sets the ratio: anything narrower and the h1 breaks mid-phrase. */
.split--fig{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); align-items:center;}

/* --- 5. nav -------------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:52; height:var(--nav-h);
  background:rgba(11,22,19,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.nav__in{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); height:100%;
  display:flex; align-items:center; gap:1.25rem;
}
.brand{display:flex; align-items:center; gap:.55rem; flex:none;}
.brand:hover{text-decoration:none;}
.brand svg{width:22px; height:22px; display:block;}
.brand__wm{font-family:var(--mono); font-weight:700; font-size:1.06rem; letter-spacing:-.04em; color:var(--ink);}
.brand__wm i{font-style:normal; color:var(--mint);}
.nav__links{display:flex; align-items:center; gap:1.35rem; margin-left:auto;}
/* :not(.btn) matters — a bare `.nav__links a` outranks `.btn` on specificity
   and would repaint the CTA's label in --mute over its mint fill. */
.nav__links a:not(.btn),.nav__trigger{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; color:var(--mute);
  padding:.3rem 0; border:0; border-bottom:1px solid transparent; white-space:nowrap;
  background:transparent; cursor:pointer;
}
.nav__links a:not(.btn):hover,.nav__trigger:hover{color:var(--ink); text-decoration:none;}
.nav__links a:not(.btn)[aria-current]{color:var(--mint); border-bottom-color:var(--mint);}

/* the use-case flyout: hover on pointer devices, click/Enter everywhere */
.nav__menu{position:relative;}
.nav__trigger{display:flex; align-items:center; gap:.4rem;}
.nav__trigger::after{
  content:""; width:5px; height:5px; border-right:1px solid currentColor;
  border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-1px);
}
.nav__menu.is-open > .nav__trigger{color:var(--mint);}
/* on a use-case page the trigger is the current nav item, and has to say so the
   same way a plain link does */
.nav__menu.is-here > .nav__trigger{color:var(--mint); border-bottom-color:var(--mint);}
.flyout a[aria-current] .fo__t{color:var(--mint);}
.flyout a[aria-current]{background:rgba(79,227,193,.08);}
.flyout{
  position:absolute; top:calc(100% + .85rem); right:-1rem; width:min(30rem,calc(100vw - 2rem));
  /* opaque, not tinted: a headline reading through the panel is worse than a
     panel that stops being part of the page */
  background:#0E1D19;
  border:1px solid rgba(150,200,180,.22); border-radius:12px; padding:.5rem;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(-6px);
}
.nav__menu.is-open .flyout{opacity:1; visibility:visible; transform:none;}
.flyout::before{  /* keeps the pointer inside the hover region across the gap */
  content:""; position:absolute; left:0; right:0; top:-.9rem; height:.9rem;
}
.flyout a{
  display:block; padding:.7rem .8rem; border-radius:9px; border-bottom:0 !important;
}
.flyout a:hover{background:rgba(79,227,193,.07); text-decoration:none;}
.flyout .fo__t{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.82rem; color:var(--ink); letter-spacing:-.01em;
}
.flyout .fo__t i{font-style:normal; color:var(--mint); font-size:.66rem; letter-spacing:.1em;}
.flyout a:hover .fo__t{color:var(--mint);}
.flyout .fo__d{display:block; font-family:var(--sans); font-size:.78rem; color:var(--mute); margin-top:.2rem; line-height:1.4;}
.flyout__foot{
  display:flex !important; align-items:center; justify-content:space-between; gap:.6rem;
  margin-top:.25rem; border-top:1px solid var(--edge); border-radius:0 0 9px 9px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--mint);
}

/* mobile: a real hamburger, drawn in CSS */
.nav__toggle{
  display:none; margin-left:auto; width:38px; height:34px; flex:none;
  background:transparent; border:1px solid var(--edge); border-radius:8px; cursor:pointer;
  position:relative;
}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
  position:absolute; left:50%; width:16px; height:1.5px; background:var(--ink);
  border-radius:2px; content:"";
}
.nav__toggle span{top:50%; margin-left:-8px; transform:translateY(-50%);}
.nav__toggle span::before{left:0; top:-5px; margin:0;}
.nav__toggle span::after{left:0; top:5px; margin:0;}
.nav__toggle[aria-expanded="true"] span{background:transparent;}
.nav__toggle[aria-expanded="true"] span::before{top:0; transform:rotate(45deg);}
.nav__toggle[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg);}

/* --- 6. the rail: the address as a program counter ----------------------- */
/* A uSID destination really is rewritten at every hop: the node matching the
   leading instruction shifts the address left and forwards on what is now in
   front of it. Six 16-bit instructions after a 32-bit block is exactly 128
   bits, which is why this page has exactly six sections after the hero. */
.rail{
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:51; height:var(--rail-h);
  background:rgba(11,22,19,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--edge); overflow:hidden;
}
.rail__in{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); height:100%;
  display:flex; align-items:center; gap:.9rem;
}
/* The address is assembled by script from the sections themselves. With JS off,
   or on a page that declares no itinerary at all (404), there is nothing to
   show — take the strip and its reserved space back. */
html:not(.js) .rail,.no-rail .rail{display:none;}
html:not(.js) main,.no-rail main{padding-top:var(--nav-h);}
/* overall scroll progress, drawn as the one mint line on the page */
.rail__fill{
  position:absolute; left:0; bottom:0; height:1px; background:var(--mint);
  width:calc(var(--p,0) * 100%); box-shadow:0 0 12px rgba(79,227,193,.6);
}
.rail__addr{
  display:flex; align-items:center; position:relative; flex:none;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.02em; color:var(--mute);
}
.rail__addr .g{padding:.1rem .1rem; color:var(--faint-ink); white-space:nowrap;}
.rail__addr .sep{color:var(--faint); opacity:.5;}
.rail__addr .g.blk{color:var(--mute);}
.rail__addr .g.spent{color:var(--faint); opacity:.42; text-decoration:line-through; text-decoration-thickness:1px;}
.rail__addr .g.now{color:var(--void); background:var(--mint); border-radius:3px; padding:.1rem .28rem; font-weight:700;}
.rail__addr .g.end.now{background:var(--amber);}
/* the cursor: a mint caret under the instruction being executed */
.rail__cur{
  position:absolute; bottom:-2px; left:0; width:var(--w,28px); height:2px;
  background:var(--mint); border-radius:2px; transform:translateX(var(--x,0));
  box-shadow:0 0 10px rgba(79,227,193,.7);
}
.rail__cur.is-end{background:var(--amber); box-shadow:0 0 10px rgba(242,180,65,.7);}
.rail__cur.is-idle{opacity:0;}   /* ingress: nothing has executed yet */
.rail__now{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rail__now.is-end{color:var(--amber);}
/* arrival: End.DT6 has fired, the itinerary is spent, and the only instruction
   left on the page is the one in the nav */
.rail.is-arrived .rail__now{color:var(--amber);}

/* --- 7. buttons ---------------------------------------------------------- */
.btns{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem; align-items:center;}
.btn{
  display:inline-block; white-space:nowrap; flex:none; position:relative;
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:.72rem 1.1rem; border-radius:8px;
  background:var(--mint); color:var(--void); border:1px solid var(--mint);
}
.btn:hover{box-shadow:0 0 26px rgba(79,227,193,.35); text-decoration:none;}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--edge);}
.btn--ghost:hover{border-color:rgba(150,200,180,.4); box-shadow:none;}
.btn--sm{padding:.55rem .85rem; font-size:.66rem;}
.btn--lg{padding:.95rem 1.5rem; font-size:.8rem;}
/* the primary CTA breathes: a slow ring, never a bounce */
.btn--pulse::after{
  content:""; position:absolute; inset:-1px; border-radius:8px;
  border:1px solid var(--mint); opacity:0;
}
.btn-note{font-family:var(--mono); font-size:.68rem; color:var(--faint-ink); letter-spacing:.04em;}

/* --- 8. tiles ------------------------------------------------------------ */
.tile{
  background:linear-gradient(180deg, var(--panel) 0%, rgba(19,36,32,.55) 100%);
  border:1px solid var(--edge); border-radius:12px; padding:1.15rem 1.2rem;
}
.tile h3{color:var(--mint); margin-bottom:.7rem;}
.tile.declared h3{color:var(--amber);}
.tile.hot{border-color:rgba(255,122,99,.3);}
.tile.hot h3{color:var(--red);}
.tile p{font-size:.93rem; line-height:1.55; color:var(--mute);}
.tile p + p{margin-top:.55rem;}
.tile strong{color:var(--ink); font-weight:600;}
.tile .lead{color:var(--ink); font-size:1rem; line-height:1.45; margin-bottom:.6rem;}
a.tile{display:block;}
a.tile:hover{border-color:rgba(79,227,193,.35); text-decoration:none;}
a.tile:hover h3{text-decoration:underline; text-underline-offset:3px;}

/* --- 9. the 01–05 sequence ---------------------------------------------- */
/* A real sequence: audit → locator → segment → verify → approve. The hairline
   travels it once, on scroll, in order. */
.seq{display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem; margin-top:2.2rem;}
.seq .st{border-top:1px solid var(--edge); padding-top:.9rem; position:relative;}
.seq .st::before{content:""; position:absolute; top:-1px; left:0; height:1px; width:0; background:var(--mint);}
.seq .n{font-family:var(--mono); font-size:.68rem; color:var(--mint); letter-spacing:.15em;}
.seq h4{font-size:.98rem; margin:.45rem 0 .35rem;}
.seq p{font-size:.82rem; color:var(--mute); line-height:1.45;}
.seq .st.declared .n{color:var(--amber);}

/* --- 10. KPI numerals ---------------------------------------------------- */
.kpi{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2rem;}
.kpi .k{border-left:2px solid var(--mint); padding-left:1rem;}
.kpi .k.declared{border-left-color:var(--amber);}
.kpi .n{
  font-family:var(--mono); font-size:clamp(1.7rem,3.1vw,2.6rem); font-weight:700;
  letter-spacing:-.03em; color:var(--ink); line-height:1;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.kpi .n em{font-style:normal; color:var(--mint);}
.kpi .k.declared .n em{color:var(--amber);}
.kpi .l{display:block; font-size:.9rem; color:var(--mute); margin-top:.55rem; line-height:1.4;}
.kpi .l strong{color:var(--ink); font-weight:600;}
.kpi .s{display:block; font-family:var(--mono); font-size:.6rem; color:var(--faint-ink); margin-top:.7rem; line-height:1.6; letter-spacing:.02em;}
/* the arithmetic strip: 5 → 1, 39,800 → 0. The arrow is the whole argument. */
.kpi--arith .n{display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap;}
.kpi--arith .n s{text-decoration:none; color:var(--faint); font-size:.62em;}
/* the provenance of a number sits under it, in the source register, never
   underlined inline in the middle of the label */
.kpi .l u{
  display:block; text-decoration:none; font-family:var(--mono); font-size:.6rem;
  color:var(--faint-ink); letter-spacing:.02em; margin-top:.45rem; line-height:1.6;
}

/* --- 11. rows ------------------------------------------------------------ */
.rows{display:flex; flex-direction:column; gap:.55rem; margin-top:1.8rem;}
.row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:1px solid var(--edge); border-radius:10px; padding:.8rem 1rem; background:rgba(19,36,32,.6);
}
.row .rt{font-family:var(--mono); font-size:.92rem; letter-spacing:-.01em; color:var(--ink);}
.row .rd{font-size:.84rem; color:var(--mute); line-height:1.45;}
.row.hot{border-color:rgba(255,122,99,.4); background:rgba(255,122,99,.06);}
.row__n{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--mint);
  flex:none; opacity:.8;
}

/* --- 12. the carrier (footer motif + 404) -------------------------------- */
.carrier{
  display:flex; align-items:center; gap:.3rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:clamp(.85rem,1.7vw,1.35rem); letter-spacing:.01em; margin-top:2rem;
}
.carrier .slot{
  padding:.42rem .62rem; border-radius:8px; border:1px solid var(--edge);
  color:var(--mute); background:rgba(19,36,32,.7);
}
.carrier .slot.blk{color:var(--ink); border-color:rgba(150,200,180,.3);}
.carrier .slot.bad{color:var(--red); border-color:rgba(255,122,99,.45); background:var(--red-dim);}
.carrier .tail{color:var(--faint-ink); padding-left:.2rem;}
.carrier-note{
  font-family:var(--mono); font-size:.66rem; color:var(--faint-ink); letter-spacing:.1em;
  margin-top:.9rem; text-transform:uppercase;
}
@keyframes consume{
  0%,2%   {color:var(--mute); border-color:var(--edge); background:rgba(19,36,32,.7); box-shadow:none; opacity:1;}
  7%,13%  {color:var(--void); border-color:var(--mint); background:var(--mint); box-shadow:0 0 26px rgba(79,227,193,.45); opacity:1;}
  22%,100%{color:var(--faint); border-color:var(--edge); background:rgba(19,36,32,.35); box-shadow:none; opacity:.5;}
}

/* --- 14. figures --------------------------------------------------------- */
/* Inline figures carry the deck's motion vocabulary unchanged (draw / run /
   pulse / drift / fire / encap). Nothing animates until the figure is in view:
   JS adds .is-live on intersection and removes it on exit, so a long page never
   burns cycles on loops nobody is looking at. */
.fig{width:100%; height:auto; display:block; overflow:visible;}
.fig text{font-family:var(--mono); fill:var(--mute);}
.fig .lbl{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;}
.fig .lbl.cap{text-transform:none; letter-spacing:.08em;}
.fig .big{font-size:13.5px; fill:var(--ink);}
.fig .sm{font-size:10.5px;}
.fig .xs{font-size:9px; letter-spacing:.1em;}
.fig .band-r{fill:rgba(19,36,32,.75); stroke:var(--edge);}
.fig .wire{stroke:rgba(150,200,180,.35); fill:none; stroke-width:1.4;}
.fig .wire.mint{stroke:var(--mint);} .fig .wire.amber{stroke:var(--amber);} .fig .wire.red{stroke:var(--red);}
.fig .node{fill:var(--panel2); stroke:var(--mint); stroke-width:1.3;}
.fig .node.amber{stroke:var(--amber);} .fig .node.off{stroke:var(--faint);}

.fig-wrap{
  margin-top:1.8rem; border:1px solid var(--edge); border-radius:12px;
  background:rgba(11,22,19,.55); padding:.6rem; overflow-x:auto;
}
.fig-wrap img,.fig-wrap svg{width:100%; height:auto; display:block;}
.fig-cap{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; color:var(--faint-ink);
  margin-top:.7rem; line-height:1.6;
}
.fig-cap b{color:var(--mute); font-weight:600;}

/* --- 15. the drift figure (declared / configured / observed) ------------- */
/* Three tracks that start aligned and slide out of alignment: the gap the
   product exists to close, stated as motion rather than as a bullet. */
.drift{margin-top:2.4rem; display:flex; flex-direction:column; gap:.75rem;}
.drift__t{display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:1rem; align-items:center;}
.drift__l{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  text-align:right; color:var(--faint-ink);
}
.drift__t.dec .drift__l{color:var(--amber);}
.drift__t.obs .drift__l{color:var(--mint);}
.drift__bar{
  position:relative; height:34px; border:1px solid var(--edge); border-radius:8px;
  background:rgba(19,36,32,.5); overflow:hidden;
}
.drift__bar i{
  position:absolute; top:6px; bottom:6px; border-radius:4px;
  background:rgba(150,200,180,.22); border:1px solid var(--edge);
}
.drift__t.dec .drift__bar i{background:var(--amber-dim); border-color:rgba(242,180,65,.4);}
.drift__t.obs .drift__bar i{background:var(--mint-dim); border-color:rgba(79,227,193,.4);}
/* has to outrank the per-track colour rules above it, hence the full path */
.drift__t.obs .drift__bar i.miss{background:var(--red-dim); border-color:rgba(255,122,99,.55);}
.drift__cap{
  font-family:var(--mono); font-size:.66rem; color:var(--faint-ink); letter-spacing:.06em;
  margin-top:.4rem; padding-left:9.5rem;
}
.drift__cap b{color:var(--red); font-weight:600;}

/* --- 16. the operator switcher ------------------------------------------ */
.sw{margin-top:2.2rem; display:grid; grid-template-columns:15rem minmax(0,1fr); gap:clamp(1.2rem,3vw,2.4rem);}
.sw__tabs{display:flex; flex-direction:column; gap:.4rem;}
.sw__tab{
  text-align:left; background:transparent; cursor:pointer; color:var(--mute);
  border:1px solid transparent; border-left:2px solid var(--edge); border-radius:0 8px 8px 0;
  padding:.7rem .85rem; font-family:var(--mono); font-size:.8rem; letter-spacing:-.01em;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}
.sw__tab:hover{color:var(--ink); background:rgba(150,200,180,.05);}
.sw__tab i{font-style:normal; font-size:.6rem; letter-spacing:.1em; color:var(--faint-ink); opacity:0;}
.sw__tab[aria-selected="true"]{
  color:var(--mint); border-left-color:var(--mint); background:rgba(79,227,193,.07);
}
.sw__tab[aria-selected="true"] i{opacity:1; color:var(--mint);}
.sw__panel{border:1px solid var(--edge); border-radius:12px; padding:clamp(1.1rem,2.5vw,1.6rem); background:rgba(19,36,32,.45);}
.sw__panel[hidden]{display:none;}
.sw__panel h3{color:var(--ink); font-size:clamp(1.05rem,1.7vw,1.32rem); line-height:1.2; max-width:30ch;}
.sw__who{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mint); margin-bottom:.7rem;
}
.sw__panel p{font-size:.93rem; color:var(--mute); line-height:1.55; margin-top:.85rem; max-width:60ch;}
.sw__panel p strong{color:var(--ink); font-weight:600;}
.sw__list{list-style:none; margin-top:1rem; display:flex; flex-direction:column; gap:.5rem;}
.sw__list li{
  font-size:.89rem; color:var(--mute); line-height:1.5; padding-left:1.15rem; position:relative;
}
.sw__list li::before{
  content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:1px;
  background:var(--mint); opacity:.75;
}
.sw__list li b{color:var(--ink); font-weight:600;}

/* --- 16b. the defined term ----------------------------------------------
   The product sells declared intent, so it declares its own vocabulary rather
   than letting a buyer discover the definition later. Used once per site. */
.def{
  margin-top:clamp(2rem,4vw,2.8rem); border:1px solid rgba(79,227,193,.3); border-radius:12px;
  background:linear-gradient(180deg, rgba(27,47,41,.8) 0%, rgba(19,36,32,.45) 100%);
  padding:clamp(1.1rem,2.4vw,1.5rem);
}
.def__t{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mint); margin-bottom:.75rem;
}
.def__d{
  font-family:var(--mono); font-size:clamp(.98rem,1.5vw,1.24rem); line-height:1.4;
  letter-spacing:-.02em; color:var(--ink); max-width:52ch;
}
.def__d em{font-style:normal; color:var(--mint);}
.def__d s{text-decoration:none; color:var(--faint-ink);}
.def__l{list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.1rem;}
.def__l li{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--mute);
  border:1px solid var(--edge); border-radius:6px; padding:.36rem .62rem;
  background:rgba(11,22,19,.5); display:flex; align-items:center; gap:.45rem;
}
.def__l li::before{content:"\2715"; color:var(--red); font-size:.72rem; opacity:.85;}
.def__l li.yes::before{content:"\2713"; color:var(--mint);}
.def__note{
  font-family:var(--mono); font-size:.66rem; color:var(--faint-ink); line-height:1.7;
  margin-top:1rem; letter-spacing:.02em;
}
.def__note b{color:var(--mute); font-weight:600;}

/* --- 17. the gate figure (verify) --------------------------------------- */
.gate{
  font-family:var(--mono); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin-top:1.4rem; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
}
.gate span{padding:.34rem .6rem; border-radius:6px; border:1px solid var(--edge); color:var(--faint-ink);}
.gate span.on{color:var(--mint); border-color:rgba(79,227,193,.45); background:var(--mint-dim);}
.gate span.off{color:var(--red); border-color:rgba(255,122,99,.4); background:var(--red-dim);}

/* --- 18. tables ---------------------------------------------------------- */
.tbl-wrap{margin-top:1.9rem; overflow-x:auto; border:1px solid var(--edge); border-radius:12px;}
table{border-collapse:collapse; width:100%; min-width:640px; background:rgba(19,36,32,.5);}
th,td{text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--edge); vertical-align:top;}
th{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mint); font-weight:700;
}
td{font-size:.88rem; color:var(--mute); line-height:1.5;}
td:first-child{font-family:var(--mono); font-size:.85rem; color:var(--ink); white-space:nowrap;}
tr:last-child td{border-bottom:0;}

/* --- 19. closing CTA ----------------------------------------------------- */
.cta{
  border:1px solid rgba(79,227,193,.28); border-radius:14px;
  background:linear-gradient(180deg, rgba(27,47,41,.75) 0%, rgba(19,36,32,.5) 100%);
  padding:clamp(1.5rem,3.5vw,2.4rem);
}
.cta h2{max-width:20ch;}
.cta--end{text-align:center; padding:clamp(2rem,5vw,3.4rem);}
.cta--end h2{max-width:22ch; margin:0 auto; font-size:clamp(1.6rem,3.4vw,2.7rem);}
.cta--end .support{margin-left:auto; margin-right:auto;}
.cta--end .btns{justify-content:center;}
.cta--end .eyebrow{justify-content:center;}

/* --- 20. the inverted band: the evidence pack --------------------------- */
/* The product's output is a document. Here the site becomes that document —
   the only light surface on th6mis.ai, and the only place the palette flips. */
.paper{
  background:var(--paper); color:var(--paper-ink); position:relative; z-index:1;
  padding:clamp(3.5rem,7vw,6rem) 0;
}
.paper::before,.paper::after{
  content:""; position:absolute; left:0; right:0; height:2rem; pointer-events:none;
}
.paper::before{top:0; background:linear-gradient(180deg, rgba(11,22,19,.22), transparent);}
.paper::after{bottom:0; background:linear-gradient(0deg, rgba(11,22,19,.22), transparent);}
.paper .eyebrow{color:var(--paper-mint);}
/* the hop chip is ink-on-mint-tint in the dark; inverted it has to be the
   reverse or it disappears into the sheet */
.paper .eyebrow b{color:var(--paper); background:var(--paper-mint); border-color:var(--paper-mint);}
.paper h2,.paper h3{color:var(--paper-ink);}
.paper h2 .hi{color:var(--paper-mint);}
.paper h2 .dec{color:var(--paper-amber);}
.paper .support{color:var(--paper-mute);}
.paper .support strong{color:var(--paper-ink);}
.paper .pull{color:var(--paper-ink); border-left-color:var(--paper-mint);}
.paper .pull em{color:var(--paper-mint);}
.paper .foot,.paper .src{color:var(--paper-faint); border-top-color:var(--paper-edge);}
.paper .foot b{color:var(--paper-mute);}
.paper a{color:var(--paper-mint);}
.paper .btn{background:var(--paper-mint); color:var(--paper); border-color:var(--paper-mint);}
.paper .btn:hover{box-shadow:0 0 22px rgba(14,110,91,.35);}
.paper .btn--ghost{background:transparent; color:var(--paper-ink); border-color:var(--paper-edge);}
.paper ::selection{background:var(--paper-mint); color:var(--paper);}
.paper :focus-visible{outline-color:var(--paper-mint);}

/* the artifact itself: a sheet, ruled and stamped like the thing it mimics */
.sheet{
  margin-top:2.2rem; background:#FBFDFC; border:1px solid var(--paper-edge); border-radius:6px;
  box-shadow:0 1px 0 rgba(11,22,19,.06), 0 18px 40px -28px rgba(11,22,19,.5);
  padding:clamp(1.1rem,2.6vw,1.9rem); position:relative; overflow:hidden;
}
.sheet__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding-bottom:.9rem; border-bottom:1px solid var(--paper-edge); flex-wrap:wrap;
}
.sheet__ttl{font-family:var(--mono); font-size:.92rem; font-weight:700; letter-spacing:-.01em; color:var(--paper-ink);}
.sheet__meta{font-family:var(--mono); font-size:.64rem; color:var(--paper-faint); line-height:1.7; letter-spacing:.02em;}
.sheet__meta b{color:var(--paper-mute); font-weight:600;}
/* the PASS stamp, landing last */
.sheet__stamp{
  font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-mint); border:1.5px solid var(--paper-mint); border-radius:5px;
  padding:.34rem .7rem; flex:none; transform:rotate(-3deg);
}
.sheet__rows{display:flex; flex-direction:column;}
.sheet__r{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.75rem 1rem; align-items:baseline;
  padding:.68rem 0; border-bottom:1px dotted var(--paper-edge);
}
.sheet__r:last-child{border-bottom:0;}
.sheet__k{font-family:var(--mono); font-size:.78rem; color:var(--paper-ink); letter-spacing:-.01em;}
.sheet__d{display:block; font-family:var(--sans); font-size:.8rem; color:var(--paper-mute); margin-top:.2rem; line-height:1.45;}
.sheet__v{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper-mint); white-space:nowrap;
}
.sheet__v.esc{color:var(--paper-amber);}
.sheet__v.no{color:var(--paper-red);}
.sheet__foot{
  margin-top:1.1rem; padding-top:.85rem; border-top:1px solid var(--paper-edge);
  font-family:var(--mono); font-size:.62rem; color:var(--paper-faint); line-height:1.7;
  word-break:break-all;
}
/* the compliance mapping, set as the register it is */
.paper .tbl-wrap{border-color:var(--paper-edge);}
.paper table{background:#FBFDFC; min-width:560px;}
.paper th{color:var(--paper-mint); border-bottom-color:var(--paper-edge);}
.paper td{color:var(--paper-mute); border-bottom-color:var(--paper-edge);}
.paper td:first-child{color:var(--paper-ink); white-space:normal;}

/* --- 21. 404 ------------------------------------------------------------- */
.oops{min-height:calc(100vh - var(--nav-h) - var(--rail-h) - 200px); display:flex; align-items:center;}

/* --- 22. footer ---------------------------------------------------------- */
.site-foot{border-top:1px solid var(--edge); padding:clamp(2.5rem,5vw,3.5rem) 0 2.5rem; position:relative; z-index:1;}
.site-foot__cols{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(1.5rem,4vw,3rem);}
.site-foot h4{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mint); margin-bottom:.9rem; font-weight:700;
}
.site-foot ul{list-style:none; display:flex; flex-direction:column; gap:.5rem;}
.site-foot li a{font-family:var(--mono); font-size:.76rem; color:var(--mute);}
.site-foot li a:hover{color:var(--ink);}
.site-foot__note{font-family:var(--mono); font-size:.72rem; color:var(--mute); line-height:1.75;}
.site-foot__note a{color:var(--mute); text-decoration:underline; text-underline-offset:3px;}
.site-foot__note a:hover{color:var(--mint);}
.site-foot__base{
  margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--edge);
  font-family:var(--mono); font-size:.66rem; color:var(--faint-ink); line-height:1.9;
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:center;
}
/* the carrier again, tiny and already consumed — the motif at rest */
.foot-carrier{display:flex; align-items:center; gap:.18rem; font-family:var(--mono); font-size:.6rem;}
.foot-carrier span{
  padding:.2rem .34rem; border-radius:4px; border:1px solid var(--edge);
  color:var(--faint-ink); background:rgba(19,36,32,.6);
}
.foot-carrier span.blk{color:var(--mute);}

/* --- 23. the mobile CTA dock -------------------------------------------- */
/* Appears once the reader is past the hero and disappears at the closing CTA,
   so the ask is never more than a thumb away without ever duplicating itself. */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:48; display:none;
  padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(11,22,19,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--edge);
  transform:translateY(105%);
}
.dock.is-up{transform:none;}
.dock .btn{display:block; text-align:center; width:100%;}

/* --- 24. reveal on scroll ------------------------------------------------ */
/* Hidden only when JS is running, so a no-JS page renders fully. */
.js [data-reveal]{opacity:0; transform:translateY(16px);}
.js [data-reveal].in{opacity:1; transform:none;}

/* --- 25. responsive ------------------------------------------------------ */
@media (max-width:1000px){
  .split--fig{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .split{grid-template-columns:1fr;}
  .site-foot__cols{grid-template-columns:1fr 1fr;}
  .sw{grid-template-columns:1fr;}
  .sw__tabs{flex-direction:row; overflow-x:auto; gap:.35rem; padding-bottom:.3rem;}
  .sw__tab{
    border-left:0; border-bottom:2px solid var(--edge); border-radius:8px 8px 0 0;
    white-space:nowrap; flex:none; font-size:.74rem;
  }
  .sw__tab[aria-selected="true"]{border-left-color:transparent; border-bottom-color:var(--mint);}
  .sw__tab i{display:none;}
}
@media (max-width:820px){
  .c2,.c3,.kpi,.seq{grid-template-columns:1fr;}
  .seq{gap:1rem;}
  h1{max-width:none;}
  h2{max-width:none;}
  .drift__t{grid-template-columns:1fr;}
  .drift__l{text-align:left;}
  .drift__cap{padding-left:0;}

  .nav__toggle{display:block;}
  .nav__links{
    position:fixed; top:calc(var(--nav-h) + var(--rail-h)); left:0; right:0; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(11,22,19,.98); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--edge); padding:.5rem var(--gut) 1.1rem;
    max-height:calc(100vh - var(--nav-h) - var(--rail-h)); overflow-y:auto;
  }
  .nav__links[hidden]{display:none;}
  .nav__links a:not(.btn){padding:.85rem 0; border-bottom:1px solid var(--edge); font-size:.85rem;}
  .nav__links a:not(.btn)[aria-current]{border-bottom-color:var(--mint);}
  .nav__links .btn{margin-top:.9rem; text-align:center; border-bottom:0;}
  /* the flyout stops flying: at mobile the use cases are just nested rows */
  .nav__menu{width:100%;}
  .nav__trigger{
    width:100%; justify-content:space-between; padding:.85rem 0;
    border-bottom:1px solid var(--edge); font-size:.85rem;
  }
  .flyout{
    position:static; width:auto; opacity:1; visibility:visible; transform:none;
    background:transparent; border:0; border-radius:0; box-shadow:none; padding:.2rem 0 .5rem;
    display:none;
  }
  .nav__menu.is-open .flyout{display:block;}
  .flyout::before{display:none;}
  .flyout a{padding:.6rem .75rem;}
  .flyout__foot{margin-top:.4rem; padding:.7rem .75rem;}
  .dock{display:block;}
}
@media (max-width:640px){
  .site-foot__cols{grid-template-columns:1fr;}
  /* dense diagrams stop being legible well before this width — let them scroll */
  .fig-wrap img{min-width:720px;}
  .fig-wrap svg{min-width:560px;}
  .row{flex-direction:column; align-items:flex-start; gap:.6rem;}
  .sheet__r{grid-template-columns:1fr;}
  .rail__now{display:none;}
  .rail__addr{font-size:.6rem;}
}
@media (max-width:420px){
  .rail__addr .g.blk,.rail__addr .sep.b{display:none;}
}

/* --- 26. motion ---------------------------------------------------------- */
/* Everything that moves is opt-in, per BRAND.md §motion. The vocabulary is the
   deck's, unchanged: reveals fade and rise, figures draw / run / pulse / drift
   / fire, and the carrier consumes itself. Nothing new is invented per section. */
@media (prefers-reduced-motion: no-preference){
  .js [data-reveal]{transition:opacity .55s var(--ease), transform .65s var(--ease); transition-delay:var(--d,0s);}
  .seq .st::before{transition:width .6s var(--ease); transition-delay:var(--d,0s);}
  .seq.in .st::before{width:100%;}

  .btn{transition:box-shadow .3s var(--ease), transform .3s var(--ease);}
  .btn:hover{transform:translateY(-1px);}
  a.tile{transition:border-color .3s var(--ease), transform .3s var(--ease);}
  a.tile:hover{transform:translateY(-2px);}
  .btn--pulse::after{animation:ring 3.6s var(--ease) infinite;}
  @keyframes ring{0%{opacity:.5; transform:scale(1)} 70%,100%{opacity:0; transform:scale(1.14)}}

  .nav__trigger::after{transition:transform .25s var(--ease);}
  .nav__menu.is-open > .nav__trigger::after{transform:rotate(-135deg) translateY(-1px);}
  .flyout{transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;}
  .dock{transition:transform .4s var(--ease);}

  .rail__fill{transition:width .12s linear;}
  .rail__cur{transition:transform .45s var(--ease), width .45s var(--ease);}
  .rail__addr .g{transition:color .35s var(--ease), background .35s var(--ease), opacity .35s var(--ease);}

  .carrier .slot.hop{animation:consume 7.2s var(--ease) infinite;}
  .carrier .slot.hop:nth-of-type(2){animation-delay:.2s}
  .carrier .slot.hop:nth-of-type(3){animation-delay:1.4s}
  .carrier .slot.hop:nth-of-type(4){animation-delay:2.6s}
  .carrier .slot.hop:nth-of-type(5){animation-delay:3.8s}

  /* --- figure motion, live only while the figure is on screen --- */
  .fig.is-live .pkt{animation:run 3.4s var(--ease) infinite;}
  @keyframes run{0%{transform:translateX(0); opacity:0} 6%{opacity:1} 92%{opacity:1} 100%{transform:translateX(var(--dx)); opacity:0}}
  .fig.is-live .pulse{animation:pulse 2.2s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:.25} 50%{opacity:1}}
  .fig.is-live .dropdot{animation:dropfall 3s var(--ease) infinite;}
  @keyframes dropfall{0%{transform:translateY(0); opacity:0} 14%{opacity:1} 86%{opacity:1} 100%{transform:translateY(36px); opacity:0}}
  .fig .encap{transform-box:fill-box; transform-origin:center;}
  .fig.is-live .encap{animation:encapWrap 6s var(--ease) infinite;}
  @keyframes encapWrap{0%,4%{opacity:0; transform:scaleX(.5)} 12%,66%{opacity:1; transform:scaleX(1)} 76%,100%{opacity:0; transform:scaleX(.5)}}
  .fig.is-live .decapH{animation:decapDrop 6s var(--ease) infinite;}
  @keyframes decapDrop{0%,52%{opacity:0} 58%,72%{opacity:1} 82%,100%{opacity:0}}
  .fig.is-live .decapChip{animation:decapLand 6s var(--ease) infinite;}
  @keyframes decapLand{0%,66%{opacity:.22} 76%,92%{opacity:1} 100%{opacity:.22}}
  .fig.is-live .fire{animation:fireSlot 6s var(--ease) infinite;}
  @keyframes fireSlot{
    0%,14%  {fill:rgba(19,36,32,.85); stroke:rgba(150,200,180,.28);}
    20%,27% {fill:rgba(79,227,193,.9);  stroke:#4FE3C1;}
    35%,100%{fill:rgba(19,36,32,.45); stroke:rgba(150,200,180,.18);}
  }
  .fig.is-live .fireT{animation:fireText 6s var(--ease) infinite;}
  @keyframes fireText{0%,14%{fill:#9DB8AC} 20%,27%{fill:#0B1613} 35%,100%{fill:#71938A}}
  /* the gate: green while the policy holds, red on the seeded defect */
  .fig.is-live .gateflip{animation:gateFlip 7s steps(1) infinite;}
  @keyframes gateFlip{0%,64%{opacity:1} 66%,100%{opacity:0}}
  .fig.is-live .gateflip.no{animation-name:gateFlipNo;}
  @keyframes gateFlipNo{0%,64%{opacity:0} 66%,100%{opacity:1}}

  /* the drift tracks slide out of alignment on reveal, then hold */
  .drift__bar i{transition:transform 1.5s var(--ease), background .8s var(--ease), border-color .8s var(--ease);
    transition-delay:var(--d,0s);}
  .drift.in .drift__t.cfg .drift__bar i{transform:translateX(var(--dx,0));}
  .drift.in .drift__t.obs .drift__bar i{transform:translateX(var(--dx,0));}

  /* the sheet stamps itself in, row by row, then the verdict lands */
  .js .sheet__r{opacity:0; transform:translateY(6px);}
  .js .sheet.in .sheet__r{opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:var(--d,0s);}
  .js .sheet__stamp{opacity:0; transform:rotate(-3deg) scale(1.5);}
  .js .sheet.in .sheet__stamp{
    opacity:1; transform:rotate(-3deg) scale(1);
    transition:opacity .3s var(--ease) 1.1s, transform .35s cubic-bezier(.2,1.5,.4,1) 1.1s;
  }
  .sw__panel{transition:opacity .3s var(--ease);}
  .sw__panel.is-swap{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .seq .st::before{width:100%;}
}
@media print{
  .nav,.rail,.dock,body::before,body::after{display:none;}
  body{background:#fff; color:#000;}
  main{padding-top:0;}
}