/* ══════════════════════════════════════════════════════════════════════
   SpeedyDb — departure-board landing page
   Train-station / industrial "Steel" feel: mostly black & white, with a
   single green "signal" accent reserved for live connectors.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #0b0c0e;   /* night platform            */
  --bg-2:      #101216;   /* raised steel panel        */
  --board:     #131417;   /* the split-flap housing    */
  --flap-bg:   #1b1c20;   /* a single flap card        */
  --flap-hi:   #26272c;   /* flap top-half sheen       */
  --flap-ink:  #f2efe6;   /* warm ivory flap glyph     */
  --ink:       #eceae4;   /* primary text              */
  --muted:     #9a9ca3;   /* secondary text            */
  --dim:       #5c5f66;   /* tertiary text             */
  --line:      #23252b;   /* hairlines                 */
  --steel:     #34373d;   /* brushed steel edge        */
  --signal:    #3fb950;   /* the green track signal    */
  --signal-lo: #1f6f2c;
  --red:       #ff5b52;   /* red stop signal — until you arrive */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --flip-dur: 130ms;
}

* { box-sizing: border-box; }
/* keep the hidden attribute authoritative — a class's `display: flex` must not
   resurrect an element JS hid (e.g. #tryq / #tryview before their reveal) */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, #16181d 0%, var(--bg) 55%) fixed,
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

code {
  font-family: var(--mono);
  font-size: .92em;
  color: var(--ink);
  background: #1a1c21;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .05em .35em;
}

/* ─────────────────────────────  navbar  ───────────────────────────── */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 22px;
  height: 58px;
  padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(12, 13, 15, .82);
  backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 8px 30px -18px #000;
}

.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav__mark  { width: 30px; color: var(--ink); display: block; }
.nav__mark svg { width: 100%; height: auto; display: block; }
.nav__word  { font-weight: 700; letter-spacing: .04em; font-size: 15px; }

/* falcon logo: black shapes → currentColor, white cutouts → page background */
.lg__fg  { fill: currentColor; }
.lg__cut { fill: var(--bg); }

.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a {
  text-decoration: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 7px;
  transition: color .15s, background .15s;
}
.nav__links a:hover { color: var(--ink); background: var(--bg-2); }
.nav__links a.is-current { color: var(--signal); }
/* "Try it now" — the one action link; signal-tinted so it reads as the CTA */
.nav__links a.is-cta { color: var(--signal); border: 1px solid var(--signal); border-radius: 8px; }
.nav__links a.is-cta:hover { background: var(--signal); color: var(--bg); }

.nav__clock {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────  hero  ───────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vh, 64px);
  padding: 80px 16px 48px;
  overflow: hidden;
}

/* faint receding rails / platform floor */
.hero__rails {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.014) 46px 47px),
    linear-gradient(to top, rgba(255,255,255,.04), transparent 42%);
  mask-image: radial-gradient(120% 90% at 50% 60%, #000 30%, transparent 78%);
}

/* ── the board housing ── */
.board {
  position: relative;
  z-index: 1;
  width: min(96vw, 1120px);
  padding: clamp(12px, 2vw, 22px);
  background: linear-gradient(180deg, #17181c, var(--board));
  border: 1px solid var(--steel);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 30px 80px -40px #000,
    0 0 0 6px rgba(0,0,0,.25);
}

.board__header,
.board__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: clamp(9px, 1.3vw, 12px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px clamp(4px, 1vw, 10px);
}
.board__header { margin-bottom: clamp(10px, 1.6vw, 16px); }
.board__footer { margin-top: clamp(10px, 1.6vw, 16px); color: var(--dim); }

.board__title { color: var(--ink); font-weight: 700; letter-spacing: .06em; }
.board__mid   { color: var(--signal); letter-spacing: .22em; }
.board__clock { color: var(--muted); font-variant-numeric: tabular-nums; }

.board__lamp { display: inline-flex; align-items: center; gap: 8px; }
.board__lamp i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal);
  animation: lampPulse 2.4s ease-in-out infinite;
}
@keyframes lampPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.board__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.3vw, 16px);
  padding: clamp(12px, 2vw, 22px) clamp(8px, 1.4vw, 16px);
  background: #050506;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: inset 0 2px 18px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.02);
}

/* ── a row of flaps ── */
.flaprow {
  --cell-w: clamp(9px, 3vw, 34px);
  --cell-h: calc(var(--cell-w) * 1.44);
  --flap-fs: calc(var(--cell-w) * 1.18);
  --flap-gap: max(1px, calc(var(--cell-w) * 0.05));   /* barely-there seam between flaps */
  width: 100%;                                        /* JS sizes cells to fill this exactly */
  display: flex;
  justify-content: center;
  gap: var(--flap-gap);
}

/* ── a single split-flap cell ── */
.flap {
  position: relative;
  width: var(--cell-w);
  height: var(--cell-h);
  border-radius: 3px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--flap-fs);
  color: var(--flap-ink);
  perspective: 200px;
  box-shadow: 0 1px 1px rgba(0,0,0,.6);
  flex: none;
}
/* the horizontal seam across the middle of every cell — a hairline (hidden on phones) */
.flap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  transform: translateY(-0.5px);
  background: rgba(0,0,0,.7);
  z-index: 6;
  pointer-events: none;
}
@media (max-width: 600px) { .flap::after { display: none; } }

.flap__half,
.flap__fold {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background: var(--flap-bg);
  backface-visibility: hidden;
}
.flap__half span,
.flap__fold span {
  display: block;
  width: 100%;
  height: var(--cell-h);
  line-height: var(--cell-h);
  text-align: center;
}

.flap__half--top,
.flap__fold--top {
  top: 0;
  align-items: flex-start;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--flap-hi), var(--flap-bg));
}
.flap__half--bottom,
.flap__fold--bottom {
  bottom: 0;
  align-items: flex-end;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, var(--flap-bg), #171418);
}

/* static halves sit underneath the folding leaves */
.flap__half { z-index: 1; }

/* the two folding leaves */
.flap__fold { z-index: 4; opacity: 0; }
.flap__fold--top    { transform-origin: bottom center; transform: rotateX(0deg); }
.flap__fold--bottom { transform-origin: top center;    transform: rotateX(90deg); }

.flap.is-flipping .flap__fold { opacity: 1; }
.flap.is-flipping .flap__fold--top    { animation: flapTop    var(--flip-dur) ease-in forwards; }
.flap.is-flipping .flap__fold--bottom { animation: flapBottom var(--flip-dur) cubic-bezier(.33,1.12,.5,1) forwards; }

@keyframes flapTop    { 0% { transform: rotateX(0deg); }   50%,100% { transform: rotateX(-90deg); } }
@keyframes flapBottom { 0%,50% { transform: rotateX(90deg); } 100% { transform: rotateX(0deg); } }

/* ── scroll cue ── */
.scrollcue {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  transition: color .2s;
}
.scrollcue:hover { color: var(--ink); }
.scrollcue__arrow { font-size: 15px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } }

/* ─────────────────────────  concept (Stop 01)  ───────────────────────── */
/* Tall section; the scene sticks while its three connectors light in turn. */

.concept {
  position: relative;
  height: 340vh;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #0c0d10, var(--bg));
}

.concept__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vh, 30px);
  padding: 74px clamp(16px, 4vw, 48px) 40px;
  overflow: hidden;
}

.concept__head { text-align: center; max-width: 720px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--red);                 /* red until the stop is reached */
  transition: color .4s ease;
}
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  transition: background .4s ease, box-shadow .4s ease;
}
.eyebrow.is-arrived { color: var(--signal); }              /* green on arrival */
.eyebrow.is-arrived .eyebrow__dot { background: var(--signal); box-shadow: 0 0 10px var(--signal); }

.concept__title {
  margin: 0 0 14px;
  font-size: clamp(30px, 6vw, 60px);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
}
.concept__sub {
  margin: 0;
  color: var(--muted);
  font-size: clamp(13px, 1.7vw, 16px);
  line-height: 1.6;
}
.concept__sub em { color: var(--ink); font-style: normal; font-weight: 600; }
/* Stop 06 intro copy folds away once the demo is in use (app.js toggles it;
   scrolling back up unfolds it) — max-height so the fold animates */
#s6sub { max-height: 240px; overflow: hidden; transition: max-height .45s ease, opacity .3s ease, margin .45s ease; }
#s6sub.is-collapsed { max-height: 0; opacity: 0; margin: 0; }

/* ── the diagram ── */
.diagram {
  width: min(100%, 940px);
  flex: 0 1 auto;
  min-height: 0;
}
.diagram svg {
  width: 100%;
  height: auto;
  max-height: 52vh;
  display: block;
  overflow: visible;
}

/* nodes: black boxes with steel edges; text stays quiet until lit */
.node__box,
.node__box2,
.node__box3,
.node__fold {
  fill: #121317;
  stroke: var(--steel);
  stroke-width: 2;
}
.node__box2 { fill: #101115; }
.node__box3 { fill: #0e0f12; }
.node__fold { fill: #1a1b20; }
.node__ln   { stroke: #33363d; stroke-width: 3; stroke-linecap: round; }
.node__dots circle { fill: #3a3d44; transition: fill .4s ease; }
.node__core { fill: #191b20; stroke: var(--steel); stroke-width: 2; }
.node__ring { fill: none; stroke: #2b2e35; stroke-width: 1.5; stroke-dasharray: 4 6; }

.node__name {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  text-anchor: middle;
  transition: fill .4s ease;
}
.node__tag {
  fill: var(--dim);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-anchor: middle;
}
.node__ext {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  text-anchor: middle;
  transition: fill .4s ease;
}

/* connectors: dim by default, green + flowing when their stage is live */
.wire__base {
  fill: none;
  stroke: #34373d;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke .45s ease, filter .45s ease;   /* smooth fade when powered off */
}
.wire__pulse {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 26 400;
  stroke-dashoffset: 426;
  opacity: 0;
}
/* label card: page-coloured fill so text never blends into the wire,
   with a border that tracks the wire's state (gray when dim, green when live) */
.wire__labelbox {
  fill: var(--bg);
  stroke: #34373d;
  stroke-width: 1.5;
  transition: stroke .45s ease;
}
.wire.is-active .wire__labelbox { stroke: var(--signal); }
.wire__label {
  fill: var(--dim);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .05em;
  text-anchor: middle;
  transition: fill .4s ease;
}

.wire.is-active .wire__base {
  stroke: var(--signal);
  filter: drop-shadow(0 0 5px var(--signal)) drop-shadow(0 0 12px rgba(63,185,80,.45));
  transition: stroke .5s ease, filter .5s ease;
}
.wire.is-active .wire__pulse {
  opacity: 1;
  animation: flow 1.5s linear infinite;
}
.wire.is-active .wire__label { fill: var(--signal); }
@keyframes flow { to { stroke-dashoffset: 0; } }

/* leaving Stop 01: blink the live wires a few times, then JS drops the glow */
#diagram.is-powerdown .wire.is-active { animation: wireBlink .78s ease-in-out both; }
#diagram.is-powerdown .wire.is-active .wire__pulse { animation-play-state: paused; }
@keyframes wireBlink {
  0%   { opacity: 1; }
  12%  { opacity: .12; }
  26%  { opacity: 1; }
  42%  { opacity: .12; }
  58%  { opacity: 1; }
  74%  { opacity: .12; }
  100% { opacity: 1; }
}

/* a node lights up green once its incoming wire is live */
.node.is-lit .node__box,
.node.is-lit .node__box2,
.node.is-lit .node__box3,
.node.is-lit .node__fold,
.node.is-lit .node__core {
  stroke: var(--signal);
  filter: drop-shadow(0 0 6px rgba(63,185,80,.5));
  transition: stroke .5s ease, filter .5s ease;
}
.node.is-lit .node__name,
.node.is-lit .node__ext { fill: var(--ink); }
.node.is-lit .node__ring { stroke: var(--signal-lo); }
.node.is-lit .node__dots circle { fill: var(--signal); }

/* ── station line-map: 3 stops on a rail ── */
.stops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 200px));
  gap: clamp(10px, 4vw, 60px);
  position: relative;
}
/* the rail behind the stops */
.stops::before {
  content: "";
  position: absolute;
  top: 6px; left: 8%; right: 8%;
  height: 2px;
  background: var(--steel);
}
.stop {
  position: relative;
  padding-top: 22px;
  text-align: center;
}
.stop__dot {
  position: absolute;
  top: 0; left: 50%;
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #16181d;
  border: 2px solid var(--steel);
  transition: all .45s ease;
}
.stop__k {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color .4s ease;
}
.stop__v {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--dim);
  opacity: .7;
  transition: color .4s ease, opacity .4s ease;
}
.stop.is-active .stop__dot {
  background: var(--signal);
  border-color: var(--signal);
  box-shadow: 0 0 12px var(--signal);
}
.stop.is-active .stop__k { color: var(--signal); }
.stop.is-active .stop__v { color: var(--muted); opacity: 1; }

/* ─────────────────────────────  footer  ───────────────────────────── */

.foot {
  border-top: 1px solid var(--line);
  padding: clamp(40px, 8vh, 90px) 24px;
  text-align: center;
  background: var(--bg);
}
.foot__word {
  margin: 0 0 10px;
  font-size: clamp(28px, 7vw, 56px);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink);
}
.foot__note {
  margin: 0 0 18px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
}
.foot__tag {
  margin: 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* flip-sound mute toggle (fixed, bottom-right) */
.sfx {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(16, 18, 22, .72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.sfx:hover { color: var(--ink); border-color: var(--steel); }
.sfx svg { width: 20px; height: 20px; display: block; }
.sfx .sfx__off { display: none; }
.sfx.is-muted { color: var(--dim); }
.sfx.is-muted .sfx__on  { display: none; }
.sfx.is-muted .sfx__off { display: block; }
@media (max-width: 600px) { .sfx { width: 36px; height: 36px; right: 12px; bottom: 12px; } }

/* ═════════════════════  Stop 02 — browser → cloud  ═════════════════════ */

.stop2 {
  position: relative;
  height: 320vh;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg), #0c0d10);
}
.stop2__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.6vh, 30px);
  padding: 74px clamp(16px, 4vw, 48px) 40px;
  overflow: hidden;
}

/* policy toggle */
.s2toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-2);
}
.s2toggle__lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 8px;
}
.s2toggle button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px 13px;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.s2toggle button:hover { color: var(--ink); }
.s2toggle button.is-on {
  color: var(--ink);
  background: #1b1e24;
  border-color: var(--steel);
}

/* the browser | pipe | cloud lane */
.s2 {
  width: min(100%, 960px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(6px, 1.6vw, 20px);
}

/* ── browser window ── */
.s2win {
  border: 1px solid var(--steel);
  border-radius: 11px;
  background: linear-gradient(180deg, #15171c, #101216);
  overflow: hidden;
  box-shadow: 0 24px 60px -34px #000, inset 0 1px 0 rgba(255,255,255,.04);
}
.s2win__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  background: #0e1014;
  border-bottom: 1px solid var(--line);
}
.s2win__bar i { width: 8px; height: 8px; border-radius: 50%; background: #2b2e35; }
.s2win__bar span {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s2win__body { padding: 15px 14px; display: flex; flex-direction: column; gap: 13px; }

.s2agent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 11px;
  transition: color .4s, border-color .4s;
}
.s2agent__eye { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); transition: background .4s; }
.s2.is-s1 .s2agent { color: var(--ink); border-color: var(--steel); }
.s2.is-s1 .s2agent__eye { background: var(--signal); box-shadow: 0 0 8px var(--signal); animation: lampPulse 1.6s ease-in-out infinite; }

.s2meter { display: flex; flex-direction: column; gap: 7px; }
.s2meter__label {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}
.s2meter__pct { color: var(--muted); font-variant-numeric: tabular-nums; }
.s2meter__track {
  position: relative;
  height: 13px;
  border-radius: 7px;
  background: #08090c;
  border: 1px solid var(--line);
  overflow: hidden;
}
.s2meter__track > i {
  display: block;
  height: 100%;
  width: 6%;
  border-radius: 6px 0 0 6px;
  background: linear-gradient(90deg, #3a3d44, #5b6472);
  transition: width .6s cubic-bezier(.4,0,.2,1), background .5s ease;
}
.s2.is-s1 .s2meter__track > i { width: 58%; }
.s2.is-s2 .s2meter__track > i,
.s2.is-s3 .s2meter__track > i { width: 100%; background: linear-gradient(90deg, #8a6f2a, #e0b64a); }

.s2overflow {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: #e6bd52;
  border: 1px solid #6b5320;
  border-radius: 6px;
  padding: 4px 9px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s, transform .35s;
}
.s2.is-s2 .s2overflow,
.s2.is-s3 .s2overflow { opacity: 1; transform: none; animation: lampPulse 1.7s ease-in-out infinite; }

/* ── pipe with gate + travelling file tokens ── */
.s2pipe { position: relative; height: 156px; }
.s2rail {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px; margin-top: -1px;
  background: repeating-linear-gradient(90deg, var(--steel) 0 8px, transparent 8px 17px);
  transition: background .5s;
}
.s2.is-s3 .s2rail { background: repeating-linear-gradient(90deg, var(--signal-lo) 0 8px, transparent 8px 17px); }

.s2gate {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 3;
  padding: 6px 4px;
  background: radial-gradient(circle at 50% 40%, #101216 55%, transparent 75%);
}
.ico-lock { width: 26px; height: 26px; display: block; }
.ico-lock .lockbody { fill: #15171c; stroke: var(--muted); stroke-width: 1.7; transition: stroke .4s, filter .4s; }
.ico-lock .lockshackle {
  fill: none; stroke: var(--muted); stroke-width: 1.7;
  transform-origin: 15px 9px;
  transition: transform .35s ease, stroke .4s;
}
.s2gate em {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
  font-style: normal;
}
.s2.mode-restrict .ico-lock .lockbody,
.s2.mode-restrict .ico-lock .lockshackle { stroke: var(--ink); }
.s2.mode-restrict.is-s3 .ico-lock .lockbody { stroke: var(--signal); filter: drop-shadow(0 0 5px rgba(63,185,80,.55)); }
.s2.mode-all .ico-lock .lockshackle { transform: translate(6px, -3px) rotate(14deg); } /* unlocked */

/* file tokens */
.tok {
  position: absolute;
  left: 2%;
  width: 15px; height: 19px;
  margin-top: -9.5px;
  border-radius: 2px;
  background: #1b1e24;
  border: 1px solid #4a4f58;
  opacity: 0;
  z-index: 2;
}
/* above the rail = upload (browser→cloud); below = retrieval (cloud→browser) */
.tok--up   { top: calc(50% - (var(--row) + 1) * 15px); }
.tok--down { top: calc(50% + (var(--row) + 1) * 15px); }
.tok::before {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 4px;
  height: 1.5px;
  background: #565b64;
  box-shadow: 0 4px 0 #43474f, 0 8px 0 #43474f;
}
.tok--sensitive { border-color: #7a6326; background: #211d13; }
.tok--sensitive::before { background: #7a6326; box-shadow: 0 4px 0 #5e4c1e; }
.tok--sensitive > b {
  position: absolute;
  left: 50%; top: 50%;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6bd52' stroke-width='2.6'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.2' fill='%23211d13'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
.s2.mode-all .tok--sensitive > b { opacity: .35; }  /* unlocked → passes through */

/* upload lane (above): browser → cloud, left → right */
.s2.is-s3 .tok--up {
  animation: flowToCloud 2.6s linear infinite;
  animation-delay: calc(var(--row) * 0.5s);
}
@keyframes flowToCloud {
  0%   { left: 2%;  opacity: 0; }
  10%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { left: 93%; opacity: 0; }
}
/* retrieval lane (below): cloud → browser, right → left */
.s2.is-s3 .tok--down {
  animation: flowToBrowser 2.6s linear infinite;
  animation-delay: calc(var(--row) * 0.5s + 0.25s);
}
@keyframes flowToBrowser {
  0%   { left: 93%; opacity: 0; }
  10%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { left: 2%;  opacity: 0; }
}
/* restrict mode: sensitive files are rejected at the gate in BOTH directions —
   blocked from spilling up (push) AND from being pulled back down (retrieval) */
.s2.is-s3.mode-restrict .tok--up.tok--sensitive   { animation-name: flowToGate; }
.s2.is-s3.mode-restrict .tok--down.tok--sensitive { animation-name: flowToGateReverse; }
@keyframes flowToGateReverse {
  0%   { left: 93%; opacity: 0; }
  12%  { opacity: 1; }
  50%  { left: 55%; opacity: 1; }
  64%  { left: 60%; }
  80%  { left: 55%; opacity: 1; }
  100% { left: 57%; opacity: 0; }
}
@keyframes flowToGate {
  0%   { left: 2%;  opacity: 0; }
  12%  { opacity: 1; }
  50%  { left: 45%; opacity: 1; }
  64%  { left: 40%; }
  80%  { left: 45%; opacity: 1; }
  100% { left: 43%; opacity: 0; }
}

.s2send,
.s2retrieve {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: 0;
  transition: opacity .5s;
}
.s2send    { top: 2px; }
.s2retrieve { bottom: 2px; }
.s2.is-s3 .s2send,
.s2.is-s3 .s2retrieve { opacity: 1; }
.s2.is-s3 .s2send span,
.s2.is-s3 .s2retrieve span { color: var(--signal); }

/* ── cloud ── */
.s2cloud { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ico-cloud { width: clamp(84px, 15vw, 140px); height: auto; display: block; }
.ico-cloud path { fill: #111317; stroke: var(--steel); stroke-width: 2.4; transition: stroke .5s ease, filter .5s ease; }
.s2.is-s3 .ico-cloud path { stroke: var(--signal); filter: drop-shadow(0 0 8px rgba(63,185,80,.5)); }
.s2cloud__name {
  font-family: var(--mono);
  font-size: 13px; font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
  transition: color .5s;
}
.s2.is-s3 .s2cloud__name { color: var(--ink); }
.s2cloud__sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--dim); }

/* ═══════════════  Stop 03 — embedded, configurable budget  ════════════ */

.stop3 {
  position: relative;
  height: 300vh;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #0c0d10, var(--bg));
}
.stop3__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.6vh, 30px);
  padding: 74px clamp(16px, 4vw, 48px) 40px;
  overflow: hidden;
}

/* size selector — same chrome as the Stop 02 policy toggle */
.s3size {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-2);
}
.s3size__lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 8px;
}
.s3size button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px 13px;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.s3size button:hover { color: var(--ink); }
.s3size button.is-on { color: var(--ink); background: #1b1e24; border-color: var(--steel); }

/* two panels: browser (device-bound) vs application (configurable) */
.s3 {
  width: min(100%, 900px);
  display: grid;
  grid-template-columns: 0.85fr 1.3fr;
  align-items: stretch;
  gap: clamp(10px, 2.5vw, 26px);
}
.s3panel {
  border: 1px solid var(--steel);
  border-radius: 12px;
  background: linear-gradient(180deg, #15171c, #101216);
  padding: 16px 17px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 24px 60px -34px #000;
}
.s3panel--browser { opacity: .8; }
.s3panel--app { transition: border-color .5s, box-shadow .5s; }
.s3.is-s2 .s3panel--app,
.s3.is-s3 .s3panel--app {
  border-color: var(--signal-lo);
  box-shadow: 0 24px 60px -34px #000, 0 0 0 1px rgba(63,185,80,.22);
}

.s3panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.s3lib {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 400;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 3px 9px;
}
.s3lib svg { width: 22px; height: auto; color: var(--muted); display: block; }
.s3lib b { color: var(--ink); font-weight: 700; }
.s3.is-s1 .s3panel--app .s3lib { color: var(--ink); border-color: var(--steel); }
.s3.is-s1 .s3panel--app .s3lib svg { color: var(--signal); }

.s3panel__cap {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}

/* capacity gauge = reserve + used + free headroom */
.s3gauge {
  display: flex;
  height: 15px;
  border-radius: 8px;
  overflow: hidden;
  background: #08090c;
  border: 1px solid var(--line);
}
.s3gauge .seg { height: 100%; transition: width .55s cubic-bezier(.4,0,.2,1), background .4s; }
.seg--reserve { background: #4a4f58; flex: 0 0 auto; min-width: 3px; }
.seg--used {
  background: linear-gradient(90deg, var(--signal-lo), var(--signal));
  flex: 0 0 auto;
  min-width: 3px;
}
.seg--used.seg--amber { background: linear-gradient(90deg, #8a6f2a, #e0b64a); }
.seg--free { background: transparent; flex: 1 1 auto; }

.s3panel__num {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted);
}
.s3panel__num b { color: var(--ink); font-weight: 700; }
.s3panel__hint, .s3free { color: var(--dim); }
.s3.is-s2 .s3panel--app .s3num,
.s3.is-s3 .s3panel--app .s3num { color: var(--signal); }

.s3policy {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--dim);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: auto;
  opacity: 0;
  transition: opacity .5s;
}
.s3.is-s3 .s3policy { opacity: 1; }

/* ═══════════════  Stop 04 — shared context, scoped access  ════════════ */

.stop4 {
  position: relative;
  height: 320vh;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg), #0c0d10);
}
.stop4__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vh, 26px);
  padding: 74px clamp(16px, 4vw, 48px) 40px;
  overflow: hidden;
}

.s4scope-ctl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-2);
}
.s4scope-ctl__lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 8px;
}
.s4scope-ctl button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px 15px;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.s4scope-ctl button:hover { color: var(--ink); }
.s4scope-ctl button.is-on { color: var(--ink); background: #1b1e24; border-color: var(--steel); }

.s4 { width: min(100%, 940px); }
.s4 svg { width: 100%; height: auto; max-height: 54vh; display: block; overflow: visible; }

/* hub */
.s4hub__box { fill: #121317; stroke: var(--steel); stroke-width: 2; transition: stroke .5s, filter .5s; }
.s4.is-s1 .s4hub__box { stroke: var(--signal); filter: drop-shadow(0 0 6px rgba(63,185,80,.5)); }
.s4hub__name {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 16px; font-weight: 700; letter-spacing: .1em;
  text-anchor: middle; transition: fill .5s;
}
.s4.is-s1 .s4hub__name { fill: var(--ink); }
.s4hub__sub { fill: var(--dim); font-family: var(--mono); font-size: 12px; text-anchor: middle; }
.s4scope { fill: var(--dim); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-anchor: middle; }

/* participant nodes */
.s4node__box { fill: #121317; stroke: var(--steel); stroke-width: 2; transition: stroke .5s, filter .5s; }
.s4node__name {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 14px; font-weight: 700; letter-spacing: .08em;
  text-anchor: middle; transition: fill .5s;
}

/* stage 1 — your own devices link up (green) */
.s4.is-s1 .s4node[data-node="browser"] .s4node__box,
.s4.is-s1 .s4node[data-node="app"] .s4node__box { stroke: var(--signal); filter: drop-shadow(0 0 6px rgba(63,185,80,.5)); }
.s4.is-s1 .s4node[data-node="browser"] .s4node__name,
.s4.is-s1 .s4node[data-node="app"] .s4node__name { fill: var(--ink); }

/* stage 2 — other users appear (present, not yet scoped) */
.s4node[data-node="ally"], .s4node[data-node="guest"] { opacity: .32; transition: opacity .5s; }
.s4.is-s2 .s4node[data-node="ally"], .s4.is-s2 .s4node[data-node="guest"] { opacity: 1; }
.s4.is-s2 .s4node[data-node="ally"] .s4node__box,
.s4.is-s2 .s4node[data-node="guest"] .s4node__box { stroke: var(--muted); }
.s4.is-s2 .s4node[data-node="ally"] .s4node__name,
.s4.is-s2 .s4node[data-node="guest"] .s4node__name { fill: var(--ink); }

/* stage 3 — scoped: ally granted (green), guest restricted (red + lock) */
.s4.is-s3 .s4node[data-node="ally"] .s4node__box { stroke: var(--signal); filter: drop-shadow(0 0 6px rgba(63,185,80,.5)); }
.s4.is-s3 .s4node[data-node="ally"] .s4node__name { fill: var(--ink); }
.s4.is-s3 .s4node--guest .s4node__box { stroke: var(--red); filter: drop-shadow(0 0 6px rgba(255,91,82,.4)); }
.s4.is-s3 .s4node--guest .s4node__name { fill: var(--muted); }

.s4lock { opacity: 0; transition: opacity .4s; }
.s4.is-s3 .s4lock { opacity: 1; }
.s4lock rect { fill: #1a1216; stroke: var(--red); stroke-width: 1.6; }
.s4lock path { stroke: var(--red); stroke-width: 1.6; }

/* spokes */
.s4wire__base { fill: none; stroke: #2a2d33; stroke-width: 2.4; stroke-linecap: round; transition: stroke .5s, filter .5s; }
.s4.is-s1 .s4wire[data-w="browser"] .s4wire__base,
.s4.is-s1 .s4wire[data-w="app"] .s4wire__base { stroke: var(--signal); filter: drop-shadow(0 0 5px rgba(63,185,80,.5)); }
.s4.is-s2 .s4wire[data-w="ally"] .s4wire__base,
.s4.is-s2 .s4wire[data-w="guest"] .s4wire__base { stroke: #4a4f58; }
.s4.is-s3 .s4wire[data-w="ally"] .s4wire__base { stroke: var(--signal); filter: drop-shadow(0 0 5px rgba(63,185,80,.5)); }
.s4.is-s3 .s4wire[data-w="guest"] .s4wire__base { stroke: var(--red); stroke-dasharray: 7 7; filter: drop-shadow(0 0 4px rgba(255,91,82,.35)); }

/* ══════════════  Stop 05 — resident footprint / RAM headroom  ═════════ */

.stop5 {
  position: relative;
  height: 300vh;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #0c0d10, var(--bg));
}
.stop5__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.6vh, 30px);
  padding: 74px clamp(16px, 4vw, 48px) 40px;
  overflow: hidden;
}

.s5toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2);
}
.s5toggle__lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); padding: 0 8px; }
.s5toggle button {
  font-family: var(--mono); font-size: 12px; letter-spacing: .05em; color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 7px 13px; cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.s5toggle button:hover { color: var(--ink); }
.s5toggle button.is-on { color: var(--ink); background: #1b1e24; border-color: var(--steel); }

.ram { width: min(100%, 860px); display: flex; flex-direction: column; gap: 14px; }
.ram__scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ram__resident { color: var(--muted); }
.ram__bar {
  position: relative; display: flex; height: clamp(96px, 22vh, 140px);
  border-radius: 12px; overflow: hidden; background: #08090c; border: 1px solid var(--line);
  box-shadow: inset 0 2px 20px rgba(0,0,0,.6);
}
.ramseg {
  height: 100%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: width .6s cubic-bezier(.4,0,.2,1), background .4s;
}
.ramseg + .ramseg { box-shadow: inset 1px 0 0 rgba(0,0,0,.5); }
.ramseg b {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: rgba(255,255,255,.82); white-space: nowrap; opacity: 0;
  transition: opacity .4s ease .2s;
}
.ram.is-s3 .ramseg--model b,
.ram.is-s3 .ramseg--vdb b,
.ram.is-s3 .ramseg--code b { opacity: 1; }
.ramseg--free b { color: var(--dim); opacity: .7; }
.ramseg--spdb { background: var(--signal); flex: 0 0 auto; min-width: 5px; }
.ram.mode-spdb .ramseg--spdb { width: 1.5%; }
.ram.mode-mem  .ramseg--spdb { width: 56%; background: var(--red); }
.ramseg--model { background: #5b6472; flex: 0 0 auto; width: 0; }
.ramseg--vdb   { background: #474d57; flex: 0 0 auto; width: 0; }
.ramseg--code  { background: #383d46; flex: 0 0 auto; width: 0; }
.ram.is-s3 .ramseg--model { width: 42%; }
.ram.is-s3 .ramseg--vdb   { width: 13%; }
.ram.is-s3 .ramseg--code  { width: 19%; }
.ramseg--free { flex: 1 1 auto; background: repeating-linear-gradient(45deg, #0e0f13 0 8px, #0b0c0f 8px 16px); }
.ram__over {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: #ff9b95; background: rgba(40,12,12,.72); border: 1px solid #6b2420; border-radius: 6px; padding: 4px 9px;
  opacity: 0; transition: opacity .4s;
}
.ram.mode-mem.is-s3 .ram__over { opacity: 1; animation: lampPulse 1.7s ease-in-out infinite; }

.ram__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.lg { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--muted); }
.lg::before { content: ""; width: 11px; height: 11px; border-radius: 3px; }
.lg--spdb::before  { background: var(--signal); }
.lg--spdb { color: var(--ink); }
.lg--model::before { background: #5b6472; }
.lg--vdb::before   { background: #474d57; }
.lg--code::before  { background: #383d46; }
.lg--free::before  { background: repeating-linear-gradient(45deg, #2a2d33 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px var(--line); }
.ram.mode-mem .lg--spdb::before { background: var(--red); }
.ram.mode-mem .lg--spdb { color: #ff9b95; }
.ram__note { font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: var(--dim); }

/* ══════════════════  Stop 06 — in-browser upload playground  ══════════ */

.stop6 {
  position: relative;
  height: 260vh;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg), #0c0d10);
}
.stop6__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vh, 28px);
  padding: 74px clamp(16px, 4vw, 48px) 40px;
  overflow: hidden;
  text-align: center;
}
/* stretch: the preview panel matches the try column's height by default */
.try__row { width: 100%; display: flex; gap: 20px; align-items: stretch; justify-content: center; }
.try { flex: 1 1 0; min-width: 0; max-width: 680px; display: flex; flex-direction: column; gap: 16px; }

/* selected-file contents viewer (right of the try column; revealed on selection).
   height: auto + stretch ⇒ same height as the drop/samples/results column until
   the user drag-resizes (the grip writes inline width/height, which then win) */
.tryview {
  flex: 0 1 auto; width: 380px; min-width: 250px; max-width: 680px;
  height: auto; min-height: 160px; max-height: 78vh;
  display: flex; flex-direction: column; text-align: left;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  /* native drag-to-resize (bottom-right grip); children scroll internally */
  resize: both; overflow: hidden;
}
/* source tabs across the top of the preview panel — one per loaded source;
   more than 5 rotate in a loop around the active tab (renderTabs in app.js) */
.trytabs {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.trytab {
  flex: 0 1 auto; min-width: 0; max-width: 132px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: var(--muted);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 7px;
  padding: 5px 9px; cursor: pointer; transition: color .16s, border-color .16s, background .16s;
}
.trytab:hover { color: var(--ink); border-color: var(--steel); }
.trytab.is-on { color: var(--signal); border-color: var(--signal-lo); background: #0f1512; }
.trytab.is-off { opacity: .45; }
.trytabs__nav {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; line-height: 1; color: var(--dim);
  background: none; border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
  transition: color .16s, border-color .16s;
}
.trytabs__nav:hover { color: var(--signal); border-color: var(--signal-lo); }

.tryview__head {
  display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px;
}
.tryview__name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tryview__meta { color: var(--dim); white-space: nowrap; margin-left: auto; }
.tryview__close {
  flex: none; font-family: var(--mono); font-size: 15px; line-height: 1;
  color: var(--dim); background: none; border: none; padding: 0 0 0 4px; cursor: pointer;
}
.tryview__close:hover { color: var(--ink); }
/* no wrapping: the JS virtualizer's spacer math needs every line exactly one
   line-height tall (long lines scroll horizontally instead) */
.tryview__body {
  margin: 0; padding: 12px 14px; flex: 1; overflow: auto;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: var(--muted);
  white-space: pre;
}
.tryview__media { padding: 12px 14px; overflow: auto; flex: 1; min-height: 0; }
.tryview__media img, .tryview__media video {
  display: block; max-width: 100%; height: auto; border-radius: 8px;
}
.tryview__pdf {
  display: block; width: 100%; height: 100%; min-height: 300px; border: 0; border-radius: 8px; background: #fff;
}
/* the scene can't fit a side panel on true mobile widths — the preview becomes
   a fixed bottom-sheet popup instead (dismiss with its × button) */
@media (max-width: 720px) {
  .tryview {
    position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto;
    width: auto; max-width: none; height: auto; max-height: 62vh;
    z-index: 80; resize: none;
    box-shadow: 0 24px 60px -12px #000, 0 0 0 1px rgba(0,0,0,.5);
  }
}

.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 24px; border: 1.5px dashed var(--steel); border-radius: 14px;
  background: var(--bg-2); cursor: pointer; transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone.is-drag { border-color: var(--signal); background: #101418; }
.dropzone__ico { width: 34px; height: 34px; color: var(--muted); transition: color .2s; }
.dropzone:hover .dropzone__ico, .dropzone.is-drag .dropzone__ico { color: var(--signal); }
.dropzone__title { font-size: 15px; color: var(--ink); }
.dropzone__title b { color: var(--signal); font-weight: 700; }
.dropzone__hint { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--muted); }
.dropzone__note { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--dim); }

/* prominent OR divider between "browse" and the samples */
.try__or { display: flex; align-items: center; gap: 16px; margin: 4px 0; }
.try__or::before, .try__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.try__or span {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--steel); border-radius: 50%;
  background: var(--bg-2);
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}

.samples { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.samples__lbl {
  font-family: var(--mono);
  font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
}
.samples__row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sample {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 14px;
  cursor: pointer; transition: color .16s, border-color .16s, background .16s;
}
.sample::before {
  content: ""; width: 9px; height: 11px; border-radius: 1.5px;
  border: 1.5px solid currentColor; opacity: .65;
  display: grid; place-items: center;
  font-size: 9px; line-height: 1; font-weight: 700;
}
.sample:hover { color: var(--ink); border-color: var(--steel); }
.sample.is-on { color: var(--signal); border-color: var(--signal-lo); background: #0f1512; }
.sample.is-on::before { content: "✓"; opacity: 1; }

.tryout {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2);
}
.tryout__state { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.tryout__state b { color: var(--ink); }
.pipe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; }
.pipe__step {
  position: relative;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px;
  transition: color .3s ease, border-color .3s ease;
}
.pipe__step:not(:last-child)::after {
  content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--steel);
}
.pipe__step.is-done {
  color: var(--signal); border-color: var(--signal-lo);
  transition-delay: calc(var(--i) * 0.12s);
}
.tryout__soon { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: #e6bd52; }
.tryout__soon.is-live { color: var(--signal); }
.tryout__reset {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--dim);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line);
  transition: color .16s;
}
.tryout__reset:hover { color: var(--ink); }
.tryout__reset:disabled { cursor: default; opacity: .6; }

/* ── the two-part demo: 1 · load → 2 · search (gotoStep in app.js) ────── */
.trystep { display: flex; flex-direction: column; gap: 16px; }
.try__next {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--signal); background: none; border: 1px solid var(--signal); border-radius: 9px;
  padding: 11px 16px; cursor: pointer; transition: background .16s, color .16s, border-color .16s;
}
.try__next:hover:not(:disabled) { background: var(--signal); color: var(--bg); }
.try__next:disabled { color: var(--dim); border-color: var(--line); cursor: default; }
.try__back {
  align-self: flex-start;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--dim);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line);
  transition: color .16s;
}
.try__back:hover { color: var(--ink); }
.try__foot { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* search-mode toggle: RAG (passages) vs Agent (grounded on-device answer) */
.trymode { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.trymode__btn {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px;
  padding: 7px 14px; cursor: pointer; transition: color .16s, border-color .16s, background .16s;
}
.trymode__btn:hover { color: var(--ink); border-color: var(--steel); }
.trymode__btn.is-on { color: var(--signal); border-color: var(--signal-lo); background: #0f1512; }
.trymode__hint { flex-basis: 100%; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--dim); }

/* agent answer panel: status line + the streamed grounded answer */
.tryagent { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.tryagent__status { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--dim); }
.tryagent__answer {
  border: 1px solid var(--signal-lo); border-radius: 9px; padding: 10px 12px;
  font-size: 13px; line-height: 1.6; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
  max-height: 24vh; overflow-y: auto; background: #0f1512;
}

/* search-what-you-ingested block (revealed after the first live ingest) */
.tryq { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.tryq__input {
  width: 100%; font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
  transition: border-color .16s;
}
/* green until the first query runs (is-armed), and any time it's active */
.tryq__input.is-armed,
.tryq__input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal-lo); }
.tryq__input::placeholder { color: var(--dim); }
.tryq__results {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
  text-align: left; max-height: min(38vh, 300px); overflow-y: auto;
}
.tryq__hit {
  flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
  cursor: pointer; transition: border-color .16s, background .16s;
}
.tryq__hit:not(.is-active):hover { border-color: var(--signal-lo); background: #0f1512; }
.tryq__hit.is-active { cursor: default; }
/* breadth controls: sticky to the results scroller's bottom edge while their
   hit spans it, so they can never be scrolled out of reach */
.tryq__ctl {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: 8px;
  margin: 4px -10px -8px; padding: 8px 10px;
  background: var(--bg-2);
  border-radius: 0 0 9px 9px;
}
.tryq__btn {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--muted); background: var(--bg);
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px;
  cursor: pointer; transition: color .16s, border-color .16s;
}
.tryq__btn:hover { color: var(--signal); border-color: var(--signal-lo); }
/* semantic status line (the embedder auto-downloads on page load) */
.tryq__semantic {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--muted); background: var(--bg);
  border: 1px dashed var(--line); border-radius: 9px; padding: 8px 12px;
  transition: color .16s, border-color .16s;
}
.tryq__semantic.is-on { color: var(--signal); border-style: solid; border-color: var(--signal-lo); }
/* media-typed hits: the matched photo / video frame / pdf page inside the
   result — the WHOLE frame stays visible (contain, capped height, centered),
   and the ⤢ button (or clicking an image) opens it full screen */
.tryq__media { position: relative; margin: 0 0 6px; }
.tryq__media img, .tryq__media video {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 260px;
  margin: 0 auto; object-fit: contain;
  border-radius: 8px; border: 1px solid var(--line); background: #060708;
}
.tryq__media img { cursor: zoom-in; }
.tryq__pdfpage {
  display: block; width: 100%; height: 300px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff;
}
.tryq__media.is-hitframe img, .tryq__media.is-hitframe video, .tryq__media.is-hitframe .tryq__pdfpage {
  border-color: var(--signal-lo);
}
.tryq__expand {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  font-family: var(--mono); font-size: 13px; line-height: 1;
  color: var(--ink); background: rgba(11, 12, 14, .72);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px; cursor: pointer;
  transition: color .16s, border-color .16s;
}
.tryq__expand:hover { color: var(--signal); border-color: var(--signal-lo); }

/* full-screen lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5, 5, 6, .9);
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
}
.lightbox__body { max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; }
.lightbox__body img, .lightbox__body video {
  max-width: 92vw; max-height: 90vh; width: auto; height: auto; border-radius: 10px;
}
.lightbox__body iframe { width: 92vw; height: 90vh; border: 0; border-radius: 10px; background: #fff; }
.lightbox__close {
  position: absolute; top: 14px; right: 20px; z-index: 1;
  font-family: var(--mono); font-size: 26px; line-height: 1;
  color: var(--muted); background: none; border: none; cursor: pointer;
}
.lightbox__close:hover { color: var(--ink); }
.tryq__text { margin: 0 0 4px; font-size: 12.5px; color: var(--ink); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.tryq__text mark { background: transparent; color: var(--signal); font-weight: 700; }
.tryq__more { margin: 0 0 4px; font-size: 12.5px; color: var(--dim); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.tryq__meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--dim); }
.tryq__none { font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* ─────────────────────────  responsive tweaks  ───────────────────────── */

/* narrow desktops/tablets: drop the clock and tighten links so all fit */
@media (max-width: 1040px) {
  .nav__clock { display: none; }
  .nav__links { gap: 1px; }
  .nav__links a { padding: 8px 9px; letter-spacing: .07em; }
}

@media (max-width: 720px) {
  .nav__links a:not(:last-child) { display: none; }   /* keep last link only */
  .nav__clock { display: none; }
  .stops { grid-template-columns: 1fr; gap: 14px; }
  .stops::before { display: none; }
  .stop { padding-top: 0; padding-left: 26px; text-align: left; }
  .stop__dot { top: 4px; left: 0; margin-left: 0; }
  .concept__scene { justify-content: flex-start; gap: 20px; padding-top: 84px; }
  .diagram svg { max-height: 46vh; }

  .stop2__scene { justify-content: flex-start; gap: 18px; padding-top: 84px; }
  .s2 { grid-template-columns: minmax(0,1fr) minmax(96px,1fr) minmax(0,1fr); gap: 6px; }
  .s2win__bar span { display: none; }
  .s2win__body { padding: 11px 9px; gap: 10px; }
  .s2agent { font-size: 10px; padding: 4px 8px; }
  .s2pipe { height: 132px; }
  .tok--up   { top: calc(50% - (var(--row) + 1) * 12px); }
  .tok--down { top: calc(50% + (var(--row) + 1) * 12px); }
  .s2toggle button { padding: 6px 9px; font-size: 11px; }
  .s2toggle__lbl { display: none; }

  .stop3__scene { justify-content: flex-start; gap: 18px; padding-top: 84px; }
  .s3 { grid-template-columns: 1fr; gap: 12px; }
  .s3size button { padding: 6px 9px; font-size: 11px; }
  .s3size__lbl { display: none; }

  .stop4__scene { justify-content: flex-start; gap: 16px; padding-top: 84px; }
  .s4 svg { max-height: 48vh; }
  .s4scope-ctl__lbl { display: none; }

  .stop5__scene { justify-content: flex-start; gap: 18px; padding-top: 84px; }
  .ram__bar { height: 40px; }
  .ram__legend { gap: 6px 12px; }
  .s5toggle__lbl { display: none; }
  .stop6__scene { justify-content: flex-start; gap: 16px; padding-top: 84px; }
  .pipe { gap: 14px; }
  .tryq__input { font-size: 16px; }   /* ≥16px so iOS doesn't zoom the viewport on focus */
}

/* very small phones: trim housing padding so the 25-cell row still fits */
@media (max-width: 480px) {
  .board { padding: 8px; }
  .board__rows { padding: 12px 5px; }
}

/* ─────────────────────────  reduced motion  ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flap.is-flipping .flap__fold--top,
  .flap.is-flipping .flap__fold--bottom { animation: none; }
  .wire.is-active .wire__pulse { animation: none; opacity: 0; }
  #diagram.is-powerdown .wire.is-active { animation: none; }
  .board__lamp i,
  .scrollcue__arrow { animation: none; }
  /* Stop 02: no travelling tokens or pulsing badges — show final state only */
  .s2.is-s3 .tok--up   { animation: none; opacity: 1; left: 88%; }
  .s2.is-s3 .tok--down { animation: none; opacity: 1; left: 12%; }
  .s2.is-s3.mode-restrict .tok--up.tok--sensitive   { animation: none; opacity: 1; left: 43%; }
  .s2.is-s3.mode-restrict .tok--down.tok--sensitive { animation: none; opacity: 1; left: 57%; }
  .s2.is-s2 .s2overflow,
  .s2.is-s3 .s2overflow,
  .s2.is-s1 .s2agent__eye { animation: none; }
}

/* ─────────────────────────  sub-pages (dashboard / docs / examples)  ───── */

.page {
  max-width: 1060px; margin: 0 auto;
  padding: 100px clamp(16px, 4vw, 40px) 72px;
}
.page__eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 10px;
}
.page__eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.page h1 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 8px; letter-spacing: .01em; }
.page__sub { color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 660px; margin: 0 0 30px; }

/* ── dashboard ── */
.dash { display: flex; flex-direction: column; gap: 14px; }
.dash__bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dash__status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.dash__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.dash__status.is-off i { background: var(--dim); box-shadow: none; }
.dash__refresh {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 20px;
  padding: 5px 14px; cursor: pointer; transition: color .16s, border-color .16s;
}
.dash__refresh:hover { color: var(--signal); border-color: var(--signal-lo); }
.dash__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dash__card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.dash__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.dash__v { font-family: var(--mono); font-size: 26px; font-weight: 650; color: var(--ink); margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash__v .u { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.dash__sub { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash__cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start; }
.dash__table { max-height: 340px; overflow-y: auto; }
.dash table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.dash th {
  position: sticky; top: 0; background: var(--bg-2); text-align: left; color: var(--dim);
  font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: 10px;
  padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.dash td { color: var(--muted); padding: 7px 8px; border-bottom: 1px solid var(--line); word-break: break-all; }
.dash td:last-child { text-align: right; color: var(--ink); white-space: nowrap; }
.dash__meter { height: 8px; border-radius: 5px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; margin-top: 12px; }
.dash__meter i { display: block; height: 100%; background: var(--signal-lo); }
.dash__empty {
  border: 1px dashed var(--line); border-radius: 12px; padding: 48px 24px; text-align: center;
  color: var(--muted); font-family: var(--mono); font-size: 12.5px; line-height: 2;
}
.dash__empty a { color: var(--signal); }

/* ── docs ── */
.docs { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 34px; align-items: start; }
.docs__toc { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; }
.docs__toc a {
  text-decoration: none; font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--dim); padding: 6px 10px; border-radius: 7px; transition: color .15s, background .15s;
}
.docs__toc a:hover { color: var(--ink); background: var(--bg-2); }
.docs section { margin-bottom: 44px; scroll-margin-top: 84px; }
.docs h2 { font-size: 19px; margin: 0 0 12px; }
.docs h3 { font-size: 14px; margin: 24px 0 8px; color: var(--ink); }
.docs p, .docs li { color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.docs ul { padding-left: 20px; }
.docs pre {
  background: #0d0f13; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; overflow-x: auto; font-family: var(--mono); font-size: 12px;
  line-height: 1.6; color: var(--muted);
}
.docs pre .c { color: var(--dim); }
.docs table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.docs th {
  text-align: left; font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--dim); font-weight: 400; padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.docs td { color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
.docs td:first-child { font-family: var(--mono); font-size: 12px; color: var(--ink); white-space: nowrap; }
.docs .note {
  border: 1px solid var(--signal-lo); border-radius: 10px; padding: 12px 14px;
  color: var(--muted); font-size: 13px; line-height: 1.6; margin: 14px 0;
}

/* ── under construction ── */
.uc { min-height: calc(100vh - 320px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.uc__stripes {
  width: min(520px, 82vw); height: 26px; border-radius: 8px; border: 1px solid var(--steel);
  background: repeating-linear-gradient(45deg, #e6bd52 0 22px, #14161a 22px 44px); opacity: .85;
}
.uc p { color: var(--muted); font-family: var(--mono); font-size: 12.5px; margin: 0; }

@media (max-width: 860px) {
  .dash__grid { grid-template-columns: 1fr 1fr; }
  .dash__cols { grid-template-columns: 1fr; }
  .docs { grid-template-columns: 1fr; }
  .docs__toc { position: static; flex-direction: row; flex-wrap: wrap; }
}