/* wovu.dev — page styles.
   Every colour, radius, blur and duration comes from tokens.css (a verbatim
   copy of the product's packages/ui/tokens.css). Layout numbers are local. */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--env-base);color:var(--text-hi);font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--glass-2);border:1px solid var(--glass-border);
  padding:10px 16px;border-radius:var(--r-sm)}

/* ---------- environment ---------- */
.environment{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 90% at 25% 0%,var(--env-base-2),var(--env-base) 60%)}
.orb{position:absolute;border-radius:50%;filter:blur(var(--blur-orb));will-change:transform}
.orb-1{width:640px;height:640px;background:var(--glow-orb-warm-strong);top:-16%;left:1%;opacity:.34}
.orb-2{width:520px;height:520px;background:var(--glow-orb-cool-soft);top:48%;right:-6%;opacity:.24}
.orb-3{width:440px;height:440px;background:var(--glow-orb-warm-soft);top:120%;left:22%;opacity:.22}

/* ---------- the thread ---------- */
.thread{position:fixed;left:76px;top:0;bottom:0;width:2px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--glass-border) 6%,var(--glass-border) 94%,transparent)}
.thread .fill{position:absolute;left:0;top:0;width:100%;height:0;
  background:linear-gradient(180deg,var(--accent),var(--accent-glow));
  box-shadow:0 0 14px var(--accent-glow);transition:height .2s linear}
.ticks i{position:fixed;left:74px;width:6px;height:6px;border-radius:50%;background:var(--text-faint);
  z-index:1;pointer-events:none;animation:drift 11s linear infinite}
.ticks i:nth-child(2){animation-delay:3.7s}
.ticks i:nth-child(3){animation-delay:7.4s}
@keyframes drift{0%{top:-2%;opacity:0}12%{opacity:.45}88%{opacity:.45}100%{top:102%;opacity:0}}

/* ---------- sections ---------- */
main{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 44px 0 160px}
.s{position:relative;padding:120px 0;scroll-margin-top:60px}
.s.hero{padding-top:130px}
.node{position:absolute;left:-90px;top:132px;width:12px;height:12px;border-radius:var(--r-pill);
  background:var(--env-base);border:2px solid var(--glass-border-strong);
  transition:border-color var(--dur-3) var(--ease-out),background var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
.s.on .node{border-color:var(--accent);background:var(--accent);
  box-shadow:0 0 0 5px var(--accent-wash),0 0 18px var(--accent-glow)}
/* Every section hangs off the thread by the same connector, drawn as the
   section arrives. One rule for all ten, so none of them reads as an
   exception. The branch and split classes in the markup are inert now. */
.node::before{content:"";position:absolute;left:5px;top:6px;width:44px;height:58px;
  border-left:2px solid var(--glass-border);border-bottom:2px solid var(--glass-border);
  border-bottom-left-radius:22px;transform:scaleX(-1);
  clip-path:inset(0 0 100% 0);transition:border-color var(--dur-3) var(--ease-out)}
.s.on .node::before{border-color:var(--accent-glow);animation:draw-arm 1s var(--ease-out) .3s forwards}
@keyframes draw-arm{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* reveal */
.eyebrow,h1,h2,.lede,.cta,.win,.race,.quotes,.bandhead,.bandfoot,.flow,.deny,.tools,.cap,.verdict{
  opacity:0;transform:translateY(16px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.s.on .eyebrow{opacity:1;transform:none;transition-delay:0s}
.s.on h1,.s.on h2{opacity:1;transform:none;transition-delay:.06s}
.s.on .lede,.s.on .bandhead{opacity:1;transform:none;transition-delay:.14s}
.s.on .cta,.s.on .tools{opacity:1;transform:none;transition-delay:.22s}
.s.on .win,.s.on .race,.s.on .quotes,.s.on .flow,.s.on .deny{opacity:1;transform:none;transition-delay:.28s}
.s.on .cap,.s.on .verdict,.s.on .bandfoot{opacity:1;transform:none;transition-delay:.5s}

/* ---------- type ---------- */
.eyebrow{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-low);margin-bottom:22px}
h1{font-size:clamp(38px,5.4vw,60px);font-weight:430;letter-spacing:-.03em;line-height:1.06;margin-bottom:22px}
h2{font-size:clamp(27px,3.4vw,37px);font-weight:440;letter-spacing:-.022em;line-height:1.2;margin-bottom:18px}
.lede{font-size:var(--text-base);line-height:1.7;color:var(--text-mid);max-width:620px}
.cap{margin-top:14px;font-size:var(--text-xs);color:var(--text-faint)}
.verdict{margin-top:28px;font-size:var(--text-lg);color:var(--text-mid)}
.verdict b{color:var(--text-hi);font-weight:500}

/* ---------- cta ---------- */
.cta{margin-top:32px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cmd{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-hi);background:var(--glass-1);
  border:1px solid var(--glass-border);border-radius:var(--r-sm);padding:12px 18px;cursor:pointer;
  display:inline-flex;align-items:center;gap:14px;transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.cmd:hover{background:var(--glass-2);border-color:var(--glass-border-strong)}
.cmd em{font-style:normal;font-size:var(--text-2xs);color:var(--text-low);letter-spacing:.06em;text-transform:uppercase}
.cmd.done em{color:var(--p-aqua)}
.lnk{font-size:var(--text-sm);color:var(--text-mid);text-decoration:none;border-bottom:1px solid var(--glass-border);padding-bottom:2px}
.lnk:hover{color:var(--text-hi);border-color:var(--accent)}
.lnk.btn{border:1px solid var(--glass-border);border-radius:var(--r-sm);padding:11px 18px}

/* ---------- window chrome ---------- */
.win{margin-top:44px;border-radius:12px;overflow:hidden;position:relative;background:rgba(22,19,17,.72);
  backdrop-filter:blur(var(--blur-heavy));border:1px solid rgba(255,250,244,.09);
  box-shadow:0 2px 4px rgba(0,0,0,.3),0 12px 28px rgba(0,0,0,.45),0 48px 96px -24px rgba(0,0,0,.75),
    0 0 0 .5px rgba(255,255,255,.06) inset}
.win.tilt{transform:perspective(2200px) rotateX(2deg) rotateY(-1.2deg) translateY(16px)}
.s.on .win.tilt{transform:perspective(2200px) rotateX(2deg) rotateY(-1.2deg)}
.chrome{height:40px;display:flex;align-items:center;gap:10px;padding:0 14px;position:relative;
  background:linear-gradient(180deg,rgba(255,253,250,.075),rgba(255,253,250,.03));
  border-bottom:1px solid rgba(255,250,244,.08)}
.chrome::after{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--glass-specular),transparent)}
.lts{display:flex;gap:8px}
.lts i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 .5px rgba(0,0,0,.25) inset}
.lts .r{background:#ff5f57}.lts .y{background:#febc2e}.lts .g{background:#28c840}
.url{margin:0 auto;display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:var(--text-2xs-plus);
  color:var(--text-mid);background:rgba(0,0,0,.28);border:1px solid rgba(255,250,244,.07);
  border-radius:7px;padding:4px 14px;min-width:300px;justify-content:center}
.url b{color:var(--text-hi);font-weight:500}
.url .lock{width:9px;height:9px;border-radius:2px;border:1.4px solid var(--text-low);border-bottom-width:4px;opacity:.75}
.gap{width:52px;flex:none}
.appbar{display:flex;align-items:center;padding:15px 20px;border-bottom:1px solid var(--glass-border);background:var(--glass-1)}
.ttl{font-size:var(--text-xs-plus);color:var(--text-mid)}
.ttl b{color:var(--text-hi);font-weight:560}
.live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:var(--text-2xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent-glow);
  animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pill{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-2xs-plus);color:var(--text-low);
  border:1px solid var(--glass-border);border-radius:var(--r-pill);padding:3px 10px}
.winfoot{padding:14px 20px;border-top:1px solid var(--glass-border);background:var(--glass-1);
  font-size:var(--text-xs-plus);color:var(--text-low)}

/* avatars */
.who{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:var(--text-2xs);
  font-weight:700;color:#161310;flex:none}
.who.a{background:var(--p-aqua)}.who.k{background:var(--p-gold)}
.who.c{background:var(--p-lilac)}.who.r{background:var(--p-rose)}

/* ---------- scene: live session ---------- */
.presence{display:flex;padding:12px 20px 2px}
.presence .who{width:26px;height:26px;margin-left:-6px;border:2px solid #17140f;opacity:0;transform:translateY(-6px) scale(.7)}
.presence .who:first-child{margin-left:0}
.feed{padding:10px 0 14px;min-height:300px;background:linear-gradient(180deg,var(--glass-1),transparent)}
.ev{display:grid;grid-template-columns:62px 20px 1fr;gap:12px;align-items:baseline;padding:9px 20px;opacity:0;transform:translateY(8px)}
.ev .t{font-family:var(--font-mono);font-size:var(--text-2xs-plus);color:var(--text-low)}
.ev .by{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:700;color:#161310}
.ev .by.ag{background:var(--text-faint);color:var(--text-hi)}
.ev .by.a{background:var(--p-aqua)}.ev .by.k{background:var(--p-gold)}
.ev .w{font-size:var(--text-sm);line-height:1.5;color:var(--text-mid)}
.ev code{font-family:var(--font-mono);font-size:var(--text-xs-plus);color:var(--text-hi);background:var(--glass-2);
  padding:2px 7px;border-radius:6px;border:1px solid var(--glass-border)}
.ev em{font-style:normal;color:var(--text-hi)}
.tag{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--accent);letter-spacing:.04em}
.bdg{display:inline-block;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-low);
  border:1px solid var(--glass-border);border-radius:var(--r-pill);padding:1px 8px;margin-left:8px}
.ev.steer{background:linear-gradient(90deg,var(--accent-wash),transparent 70%);border-left:2px solid var(--accent);padding-left:18px}
.ev.hand{background:linear-gradient(90deg,rgba(227,195,104,.09),transparent 70%);border-left:2px solid var(--p-gold);padding-left:18px}
.play .presence .who,.play .ev{animation:rise .55s var(--ease-out) forwards}
.play .e1{animation-delay:.5s}.play .e2{animation-delay:1.3s}.play .e3{animation-delay:2.2s}
.play .c{animation-delay:2.8s}.play .e4{animation-delay:3.6s}.play .a{animation-delay:3.7s}
.play .e5{animation-delay:5.3s}.play .e6{animation-delay:6.6s}.play .e7{animation-delay:7.7s}
.play .k{animation-delay:8.8s}.play .e8{animation-delay:9s}.play .e9{animation-delay:10.2s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- scene: the race ---------- */
.race{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pane{border-radius:16px;border:1px solid var(--glass-border);overflow:hidden;min-height:404px;
  background:linear-gradient(180deg,var(--glass-1),transparent)}
.pane.bad{border-color:rgba(168,117,106,.26)}
.pane.good{border-color:rgba(238,140,100,.3)}
.ph{padding:14px 18px;border-bottom:1px solid var(--glass-border);display:flex;align-items:center;gap:10px}
.pn{font-size:var(--text-xs-plus);color:var(--text-hi);font-weight:500}
.ps{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-low)}
.ctr{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-2xs-plus);padding:3px 10px;
  border-radius:var(--r-pill);border:1px solid var(--glass-border);color:var(--text-low)}
.ctr.zero{color:#a8756a;border-color:rgba(168,117,106,.35)}
.ctr.hit{color:var(--p-aqua);border-color:rgba(142,210,198,.4)}
.stored,.brief{margin:16px 18px;padding:12px 14px;border-radius:11px}
.stored{border:1px dashed rgba(255,250,244,.16);background:rgba(255,253,250,.03)}
.brief{border:1px solid rgba(238,140,100,.35);background:linear-gradient(180deg,var(--accent-wash),transparent)}
.lb{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:6px}
.brief .lb{color:var(--accent)}
.tx{font-size:var(--text-xs-plus);line-height:1.45;color:var(--text-low)}
.brief .tx{color:var(--text-hi)}
.stp{padding:4px 18px 20px}
.st{display:flex;align-items:baseline;gap:10px;padding:6px 0;font-family:var(--font-mono);
  font-size:var(--text-xs);color:var(--text-low);opacity:0;transform:translateX(-6px)}
.st i{font-style:normal;color:var(--text-faint);width:20px;flex:none}
.st.warn{color:#a8756a}
.st.win{color:var(--p-aqua)}
.st.sum{font-family:var(--font-ui);font-size:var(--text-xs-plus);margin-top:10px;padding-top:12px;
  border-top:1px solid var(--glass-border);display:block}
.st.sum.bad{color:#a8756a}.st.sum.good{color:var(--p-aqua)}
.play .st{animation:slide .45s var(--ease-out) forwards}
.play .b1{animation-delay:.8s}.play .b2{animation-delay:1.4s}.play .b3{animation-delay:2s}
.play .b4{animation-delay:2.7s}.play .b5{animation-delay:3.4s}.play .b6{animation-delay:4.1s}
.play .b7{animation-delay:4.8s}.play .b8{animation-delay:5.5s}.play .b9{animation-delay:6.4s}
.play .g1{animation-delay:1.1s}.play .g2{animation-delay:1.7s}.play .g3{animation-delay:2.4s}.play .g4{animation-delay:3.2s}
@keyframes slide{to{opacity:1;transform:none}}

/* ---------- evidence band ---------- */
.band{border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);padding:70px 0}
.bandhead{font-size:var(--text-sm);color:var(--text-low);margin-bottom:30px;max-width:640px}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.q blockquote{font-size:var(--text-sm-plus);line-height:1.62;color:var(--text-mid);margin-bottom:14px}
.q figcaption{font-size:var(--text-2xs-plus);color:var(--text-low);line-height:1.55}
.q figcaption b{display:block;color:var(--text-hi);font-weight:500;font-size:var(--text-xs);margin-bottom:2px}
.q figcaption span{display:block;font-family:var(--font-mono);font-size:9.5px;color:var(--text-faint);margin-top:5px}
.bandfoot{margin-top:28px;font-size:var(--text-xs-plus);color:var(--text-faint)}

/* ---------- scene: verdict ---------- */
.vbody{padding:26px 22px 22px;background:linear-gradient(180deg,var(--glass-1),transparent)}
.entry{border:1px solid var(--glass-border);border-radius:16px;padding:24px 26px;background:var(--glass-1)}
.play .entry{animation:turn 1s var(--ease-out) 5.4s forwards}
@keyframes turn{to{border-color:rgba(238,140,100,.45);
  background:linear-gradient(160deg,rgba(238,140,100,.13),var(--glass-1) 60%)}}
.vhead{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.kind{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-low);padding-top:5px}
.slot{margin-left:auto;position:relative;width:172px;height:26px;flex:none}
.bdge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;font-weight:400;
  font-family:var(--font-mono);font-size:var(--text-2xs-plus);border-radius:var(--r-pill);
  border:1px solid var(--glass-border);color:var(--text-low)}
.bdge i{width:5px;height:5px;border-radius:50%;background:currentColor}
.bdge.ok{opacity:0;color:var(--p-aqua);border-color:rgba(142,210,198,.4);background:rgba(142,210,198,.07)}
.bdge.no{opacity:0;color:var(--accent);border-color:rgba(238,140,100,.5);background:var(--accent-wash)}
.play .bdge.pend{animation:fade-out .4s var(--ease-out) 2.1s forwards}
.play .bdge.ok{animation:fade-in .5s var(--ease-out) 2.2s forwards,fade-out .4s var(--ease-out) 5.4s forwards}
.play .bdge.no{animation:fade-in .5s var(--ease-out) 5.5s forwards}
@keyframes fade-in{to{opacity:1}}@keyframes fade-out{to{opacity:0}}
.claim{font-size:var(--text-lg);line-height:1.45;color:var(--text-hi);font-weight:420;letter-spacing:-.01em;
  margin-bottom:14px;max-width:600px}
.vmeta{display:flex;align-items:center;gap:10px;font-size:var(--text-xs);color:var(--text-low);
  padding-bottom:18px;border-bottom:1px solid rgba(255,250,244,.07)}
.vmeta .who{width:20px;height:20px}
.mono{font-family:var(--font-mono);font-size:var(--text-2xs-plus);color:var(--text-faint)}
.checks{padding-top:16px;display:grid;gap:11px}
.ck{display:flex;align-items:center;gap:12px;font-size:var(--text-xs-plus);color:var(--text-mid);opacity:0;transform:translateX(-8px)}
.ck i{font-style:normal;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:9px;
  border:1px solid var(--glass-border);color:var(--text-faint);flex:none}
.ck.pass i{border-color:rgba(142,210,198,.45);color:var(--p-aqua);background:rgba(142,210,198,.06)}
.ck.fail{color:var(--text-hi)}
.ck.fail i{border-color:rgba(238,140,100,.55);color:var(--accent);background:var(--accent-wash)}
.ck em{margin-left:auto;font-style:normal;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-faint)}
.play .ck{animation:slide .5s var(--ease-out) forwards}
.play .k1{animation-delay:.7s}.play .k2{animation-delay:1.1s}.play .k3{animation-delay:1.5s}.play .k4{animation-delay:4.8s}
.ev-box{margin-top:18px;padding:14px 16px;border-radius:12px;background:rgba(238,140,100,.07);
  border:1px solid rgba(238,140,100,.2);opacity:0;transform:translateY(8px)}
.play .ev-box{animation:rise .6s var(--ease-out) 5.9s forwards}
.ev-box .when{font-family:var(--font-mono);font-size:var(--text-2xs-plus);color:var(--accent);letter-spacing:.04em;margin-bottom:7px}
.ev-box p{font-size:var(--text-xs-plus);line-height:1.55;color:var(--text-mid)}
.ev-box p b{color:var(--text-hi);font-weight:500}
.ev-box .srcs{margin-top:9px;font-family:var(--font-mono);font-size:var(--text-2xs-plus);color:var(--text-low)}
.blast{margin-top:24px;opacity:0}
.play .blast{animation:fade-in .6s var(--ease-out) 6.8s forwards}
.blast h5{font-size:var(--text-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.blast h5::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(238,140,100,.25),transparent)}
.sess-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.sess{background:linear-gradient(180deg,var(--accent-wash),var(--glass-1));border:1px solid rgba(238,140,100,.28);
  border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.sess .who{width:18px;height:18px;font-size:9px}
.sess b{font-size:var(--text-xs-plus);color:var(--text-hi);font-weight:500}
.sess .dt{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-faint)}
.sess em{grid-column:1/-1;font-style:normal;font-family:var(--font-mono);font-size:var(--text-2xs-plus);color:var(--accent)}

/* ---------- scene: fleet ---------- */
.lanes{display:grid;grid-template-columns:1fr 1fr}
.lane{padding:18px 20px 24px;min-height:296px}
.lane+.lane{border-left:1px solid var(--glass-border)}
.lane h4{font-size:var(--text-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-low);
  font-weight:600;margin-bottom:14px;display:flex;gap:8px}
.lane h4 span{font-family:var(--font-mono);color:var(--text-faint)}
.lane.flags h4{color:var(--accent)}
.card{background:var(--glass-1);border:1px solid var(--glass-border);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:10px;opacity:0;transform:translateY(10px)}
.card .ct{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.card .who{width:20px;height:20px;font-size:9.5px}
.card b{font-size:var(--text-xs-plus);color:var(--text-hi);font-weight:500}
.tl{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-low);border:1px solid var(--glass-border);
  border-radius:5px;padding:1px 6px}
.el{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-2xs-plus);color:var(--text-low)}
.tk{font-size:var(--text-xs);color:var(--text-mid);line-height:1.45}
.bar{display:block;height:3px;border-radius:3px;background:var(--glass-2);margin-top:9px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--text-faint);width:22%}
.card.flag{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-wash),var(--glass-1))}
.why{margin-top:8px;font-family:var(--font-mono);font-size:var(--text-2xs-plus);color:var(--accent);letter-spacing:.03em}
.empty{font-size:var(--text-xs);color:var(--text-faint);padding:6px 2px}
.play .card{animation:rise .6s var(--ease-out) forwards}
.play .f1{animation-delay:.3s}.play .f2{animation-delay:.5s}.play .f3{animation-delay:.7s}.play .f4{animation-delay:.9s}
.play .f5{animation-delay:5.2s}.play .f6{animation-delay:7.4s}
/* The card does not fade in place, it leaves the lane: it slides out and then
   the space closes, because the agent moved to the other lane. */
.card{max-height:240px}
.play .card.move{animation:rise .6s var(--ease-out) forwards,leave .8s var(--ease-out) 4.6s forwards}
@keyframes leave{
  0%{opacity:1;transform:none;max-height:240px}
  45%{opacity:0;transform:translateX(26px) scale(.97);max-height:240px}
  100%{opacity:0;transform:translateX(26px) scale(.97);max-height:0;
    margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}}
.play .bar.warn i{background:var(--accent);width:18%;animation:grow 6s var(--ease-out) 2s forwards}
@keyframes grow{to{width:86%}}
.play .empty{animation:vanish .3s linear 5.1s forwards}
@keyframes vanish{to{opacity:0;height:0;padding:0;margin:0}}

/* ---------- scene: review ---------- */
.qhead{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--glass-border);background:var(--glass-1)}
.cnt{font-family:var(--font-mono);font-size:var(--text-xs-plus);color:var(--text-mid)}
.cnt b{color:var(--accent)}
.keys{margin-left:auto;display:flex;gap:6px}
.keys i{font-style:normal;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-low);
  border:1px solid var(--glass-border);border-radius:6px;padding:2px 7px}
.qrow{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;padding:14px 20px;
  border-bottom:1px solid rgba(255,250,244,.05);position:relative}
.qrow .sel{position:absolute;inset:0;border-left:2px solid var(--accent);
  background:linear-gradient(90deg,var(--accent-wash),transparent 60%);opacity:0}
.qf b{display:block;font-family:var(--font-mono);font-size:var(--text-xs-plus);color:var(--text-hi);font-weight:400}
.qf em{display:block;font-style:normal;font-size:var(--text-xs);color:var(--text-mid);margin-top:3px}
.qs{font-family:var(--font-mono);font-size:var(--text-2xs-plus);color:var(--text-low)}
.fix{display:block;margin-top:8px;font-size:var(--text-xs);color:var(--accent);border-left:2px solid var(--accent);
  padding-left:9px;opacity:0}
.play .qa .sel{animation:fade-in .1s linear .8s forwards,fade-out .1s linear 2.6s forwards}
.play .qb .sel{animation:fade-in .1s linear 2.7s forwards,fade-out .1s linear 5.4s forwards}
.play .qc .sel{animation:fade-in .1s linear 5.5s forwards}
.play .qa{animation:approve .6s var(--ease-out) 2.4s forwards}
@keyframes approve{to{opacity:.28;transform:translateX(-10px)}}
.play .qa .qs::after{content:" approved";color:var(--p-aqua)}
.play .fix{animation:rise .5s var(--ease-out) 4.2s forwards}

/* ---------- continuity flow ---------- */
.flow{margin-top:40px;display:flex;align-items:stretch;gap:0}
.fnode{flex:1;border:1px solid var(--glass-border);border-radius:var(--r-md);padding:18px 20px;background:var(--glass-1)}
.fnode b{display:block;font-size:var(--text-sm);color:var(--text-hi);font-weight:500;margin-bottom:5px}
.fnode em{font-style:normal;font-size:var(--text-xs);color:var(--text-low)}
.fnode.dead{opacity:.42}
.fnode.keep{border-color:rgba(238,140,100,.4);background:linear-gradient(180deg,var(--accent-wash),var(--glass-1))}
.fline{width:44px;align-self:center;height:1px;background:linear-gradient(90deg,var(--glass-border),var(--accent),var(--glass-border))}

/* ---------- enforcement ---------- */
.deny{margin-top:36px;border:1px solid rgba(238,140,100,.3);border-radius:var(--r-md);padding:20px 22px;
  background:linear-gradient(180deg,var(--accent-wash),transparent);max-width:640px}
.dcmd code{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-hi)}
.drule{margin-top:10px;font-family:var(--font-mono);font-size:var(--text-2xs-plus);color:var(--text-low)}
.dout{margin-top:12px;font-size:var(--text-xs-plus);color:var(--text-mid)}
.dout b{color:var(--accent);font-weight:500}

/* ---------- tools ---------- */
.tools{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.tools span{font-size:var(--text-xs-plus);color:var(--text-mid);border:1px solid var(--glass-border);
  border-radius:var(--r-pill);padding:6px 14px}
.tools .more{color:var(--accent);border-color:rgba(238,140,100,.35)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:60px 44px 70px 160px;
  border-top:1px solid var(--glass-border)}
.status{font-size:var(--text-xs-plus);color:var(--text-low);margin-bottom:16px}
.fl{display:flex;gap:20px;flex-wrap:wrap;font-size:var(--text-xs);color:var(--text-faint)}
.fl a{text-decoration:none;color:var(--text-mid)}
.fl a:hover{color:var(--text-hi)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  main,.foot{padding-left:64px;padding-right:22px}
  .thread{left:24px}.ticks i{left:22px}.node{left:-46px}
  .node::before{width:28px;height:38px;border-bottom-left-radius:16px}
  .race,.quotes,.lanes,.sess-grid{grid-template-columns:1fr}
  .lane+.lane{border-left:0;border-top:1px solid var(--glass-border)}
  .win.tilt,.s.on .win.tilt{transform:none}
  .flow{flex-direction:column;gap:12px}.fline{width:1px;height:26px;margin-left:22px;
    background:linear-gradient(180deg,var(--glass-border),var(--accent),var(--glass-border))}
  .s{padding:84px 0}
}

/* Phones. The window is a real interface, not an image, so it has to fit the
   viewport rather than scroll off it: the address pill gives up its minimum
   width and truncates, the feed loses a column of gutter, and the type steps
   down. Nothing is hidden that carries meaning. */
@media (max-width:640px){
  main,.foot{padding-left:44px;padding-right:16px;max-width:100%}
  .thread{left:16px}.ticks i{left:14px}
  .node{left:-34px;top:112px;width:10px;height:10px}
  .node::before{left:4px;top:5px;width:20px;height:30px;border-bottom-left-radius:12px}
  .s{padding:66px 0}.s.hero{padding-top:96px}

  .eyebrow{font-size:9.5px;letter-spacing:.08em;margin-bottom:16px;line-height:1.7}
  h1{font-size:clamp(29px,8.6vw,38px);line-height:1.12;margin-bottom:16px}
  h2{font-size:clamp(22px,6.4vw,27px);margin-bottom:14px}
  .lede{font-size:var(--text-sm);line-height:1.62}
  .verdict{font-size:var(--text-base)}
  .cta{gap:12px;margin-top:24px}
  .cmd{font-size:var(--text-xs-plus);padding:10px 14px;gap:10px}

  /* the window fits, always */
  .win{margin-top:28px;border-radius:10px}
  .chrome{height:34px;padding:0 10px;gap:8px}
  .lts i{width:10px;height:10px}
  .url{min-width:0;flex:1 1 auto;padding:3px 10px;font-size:9.5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;text-align:center;line-height:18px}
  .url .lock{display:none}
  .gap{display:none}
  .appbar{padding:12px 14px;flex-wrap:wrap;gap:8px}
  .ttl{font-size:var(--text-2xs-plus)}
  .pill{margin-left:0;font-size:9.5px;padding:2px 9px}
  .live{font-size:9px;gap:5px}
  .winfoot{padding:11px 14px;font-size:var(--text-2xs-plus);line-height:1.5}

  .feed{min-height:0;padding:8px 0 10px}
  .ev{grid-template-columns:52px 16px 1fr;gap:8px;padding:7px 14px}
  .ev .t{font-size:9.5px}
  .ev .by{width:16px;height:16px;font-size:8px}
  .ev .w{font-size:var(--text-xs)}
  .ev code{font-size:10.5px;padding:1px 5px}
  .ev.steer,.ev.hand{padding-left:12px}
  .bdg,.tag{font-size:9px}
  .presence{padding:10px 14px 0}
  .presence .who{width:22px;height:22px;font-size:10px}

  /* the race stacks, and each pane stays readable */
  .race{margin-top:26px;gap:14px}
  .pane{min-height:0}
  .ph{padding:12px 14px;flex-wrap:wrap;gap:8px}
  .ctr{margin-left:0}
  .stored,.brief{margin:12px 14px;padding:10px 12px}
  .stp{padding:2px 14px 16px}
  .st{font-size:10.5px;padding:5px 0}

  /* verdict card */
  .vbody{padding:16px 14px}
  .entry{padding:18px 16px;border-radius:13px}
  .vhead{flex-wrap:wrap;gap:10px}
  .slot{margin-left:0;width:100%;height:24px}
  .bdge{justify-content:flex-start;padding:0 12px}
  .claim{font-size:var(--text-base);line-height:1.42}
  .ck{font-size:var(--text-xs);gap:9px}
  .ck em{display:none}
  .ev-box{padding:12px 13px}
  .sess{grid-template-columns:auto 1fr auto}

  /* fleet */
  .lane{padding:14px 14px 18px;min-height:0}
  .card{padding:11px 12px}
  .card .ct{flex-wrap:wrap;gap:7px}
  .el{margin-left:auto}

  /* review */
  .qhead{padding:12px 14px;flex-wrap:wrap;gap:8px}
  .keys{margin-left:0}
  .qrow{grid-template-columns:22px 1fr;gap:10px;padding:12px 14px}
  .qs{grid-column:2;font-size:9.5px}
  .cnt{font-size:var(--text-2xs-plus)}

  /* the rest */
  .band{padding:52px 0}
  .quotes{gap:22px}
  .deny{padding:16px 16px}
  .tools{gap:8px}
  .tools span{font-size:var(--text-2xs-plus);padding:5px 11px}
  .fl{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticks{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .eyebrow,h1,h2,.lede,.cta,.win,.race,.quotes,.bandhead,.bandfoot,.flow,.deny,.tools,.cap,.verdict,
  .ev,.st,.card,.ck,.ev-box,.blast,.presence .who,.fix{opacity:1!important;transform:none!important}
  .bdge.pend,.bdge.ok{display:none}
  .bdge.no{opacity:1}
  .node::before{clip-path:none!important;opacity:1!important}
}