/* ---------------------------------------------------------------------------
   lab25 · shared stylesheet for home, journey, questions, worlds and the pitch.
   Two modes: [data-mode="user"] (Tyrian, gold) and [data-mode="dev"] (night navy, ice).
   One type system for both: Space Grotesk for headlines and body, JetBrains Mono for labels,
   chips, code and captions. The modes differ by ground, colour, graphics and content.
   Grounds are a fixed layer under the line, so the scenery changes around it.
--------------------------------------------------------------------------- */
/* ---------- the two families, vendored (OFL, see assets/fonts/): nothing is fetched from a third party ---------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/space-grotesk-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/space-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/space-grotesk-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/space-grotesk-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin-600-normal.woff2) format('woff2')}
:root{
  --ink:#120A10; --ink2:#1B0F18; --ty0:#6E1E4F; --ty1:#8A2A62; --glow:#B23A80;
  --gold:#E8B84A; --rose:#D38BC4; --text:#F2EBE6; --body:#CDBFC7; --dim:#A8959F;
  --ice:#7FD3E8;
  --self:#3CC4B4; --mintc:#F0806A; --ext:#A3ACF7;
  --g-dusk:linear-gradient(180deg,#1D0E19 0%,#2A1422 48%,#25111E 100%);
  --g-ember:#2A1614;
  --g-rose:radial-gradient(60% 55% at 62% 52%,#3A1A26 0%,#26121B 55%,#170C13 100%);
  --tile:rgba(18,10,16,.72);
  --sans:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --disp:var(--sans);
  --lc:#D95FA0; --lc2:rgba(217,95,160,.45); --acc:var(--gold); --acc-ink:#1A1206;
  --gut:clamp(20px,6vw,104px);
  --bar:64px;
  --h1:clamp(40px,5vw,74px);
  color-scheme:dark;
}
html[data-mode="dev"]{
  --ink:#05070F; --ink2:#080C18; --ty0:#12203A; --ty1:#1B2E4E; --glow:#3E6E8E;
  --rose:#8FB6C8; --text:#E4EEF3; --body:#AFC3CF; --dim:#8198A7;
  --g-dusk:linear-gradient(180deg,#0A1019 0%,#0E1622 50%,#0B121C 100%);
  --g-ember:#0E1520;
  --g-rose:radial-gradient(60% 55% at 62% 52%,#12202E 0%,#0B131E 58%,#070B14 100%);
  --tile:rgba(6,10,18,.74);
  --lc:rgba(143,216,238,.9); --lc2:rgba(127,211,232,.4); --acc:var(--ice); --acc-ink:#04121C;
}

*{box-sizing:border-box;margin:0;padding:0}
a,button,input{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
code,pre,kbd,samp{font-family:var(--mono)}
html{scroll-padding-top:calc(var(--bar) + 16px);background:var(--ink);color:var(--text);-webkit-text-size-adjust:100%;overflow-x:clip;
  scrollbar-color:var(--ty1) var(--ink)}
body{font-family:var(--sans);background:var(--ink);overflow-x:clip;padding-top:var(--bar);font-feature-settings:"ss01"}
::selection{background:var(--acc);color:var(--ink)}
svg{display:block;overflow:visible}
img{max-width:100%}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
@media (hover:hover) and (pointer:fine){html.cc,html.cc *{cursor:none!important}}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mo{font-family:var(--mono)}

/* ---------- fixed layers: grounds < floor < sky canvas < main ---------- */
.grounds{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--ink)}
.grounds::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 45% at 50% -8%,rgba(138,42,98,.28),transparent 70%),
    radial-gradient(40% 30% at 88% 38%,rgba(110,30,79,.14),transparent 70%)}
html[data-mode="dev"] .grounds::before{
  background:radial-gradient(60% 40% at 50% -6%,rgba(30,64,104,.32),transparent 72%)}
.grounds i{position:absolute;inset:0;opacity:0;will-change:opacity}
.grounds i[data-g="dusk"]{background:var(--g-dusk)}
.grounds i[data-g="ember"]{background:var(--g-ember)}
.grounds i[data-g="rose"]{background:var(--g-rose)}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
main{position:relative;z-index:2}

/* ---------- cursors: written straight from pointermove, never eased ---------- */
.cur,.halo,.xh{position:fixed;left:0;top:0;z-index:90;pointer-events:none;opacity:0;transition:opacity .2s}
html.cc .cur.on,html.cc .halo.on,html.cc .xh.on{opacity:1}
html[data-mode="dev"] .cur,html[data-mode="dev"] .halo{visibility:hidden}
html[data-mode="user"] .xh{visibility:hidden}
.cur i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#FFF1C9,#E8B84A 55%,#B8862A);box-shadow:0 0 12px 3px rgba(232,184,74,.5)}
.halo i{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(232,184,74,.55);transition:transform .22s cubic-bezier(.2,.9,.3,1)}
.halo.big i{transform:scale(1.6)}
.xh i{position:absolute;background:var(--ice)}
.xh i:nth-child(1){left:-11px;top:-.5px;width:8px;height:1px}
.xh i:nth-child(2){left:3px;top:-.5px;width:8px;height:1px}
.xh i:nth-child(3){top:-11px;left:-.5px;width:1px;height:8px}
.xh i:nth-child(4){top:3px;left:-.5px;width:1px;height:8px}
.xh u{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:var(--ice);opacity:.9}
.xh b{position:absolute;left:13px;top:10px;font:400 9px/1 var(--mono);color:var(--ice);white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
.xh.big i{background:#E8FAFF}

/* ---------- the bar: USER · mark (menu) · DEV ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--bar);padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  background:color-mix(in srgb,var(--ink) 90%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb,var(--acc) 24%,transparent)}
.modes{display:grid;grid-template-columns:1fr 76px 1fr;height:100%}
.modes [role="tab"]{grid-row:1;min-height:44px;height:100%;border:0;background:none;color:var(--dim);
  display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 var(--gut);
  transition:background .25s ease,color .25s ease;position:relative}
.modes [data-mode="user"]{grid-column:1;align-items:flex-start;text-align:left}
.modes [data-mode="dev"]{grid-column:3;align-items:flex-end;text-align:right}
.modes [role="tab"] b{font-size:22px;line-height:1;letter-spacing:.14em;font-weight:600}
.modes [data-mode="user"] b{font-family:var(--sans)}
.modes [data-mode="dev"] b{font-family:var(--mono);font-weight:500;letter-spacing:.1em}
.modes [role="tab"] small{font:400 10.5px/1 var(--mono);letter-spacing:.08em;opacity:.9}
.modes [role="tab"]:hover{color:var(--text);background:color-mix(in srgb,var(--acc) 8%,transparent)}
.modes [role="tab"][aria-selected="true"]{background:var(--acc);color:var(--acc-ink)}
.modes [role="tab"].pulse{animation:tabpulse 1.6s ease 1}
@keyframes tabpulse{0%,100%{box-shadow:inset 0 0 0 0 transparent}
  25%{box-shadow:inset 0 0 0 2px var(--acc),0 0 28px -6px var(--acc)}}
.mkbtn{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;z-index:2;
  border-radius:50%;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);
  background:color-mix(in srgb,var(--ink) 80%,transparent);color:var(--acc);
  display:flex;align-items:center;justify-content:center}
.mkbtn:hover{border-color:var(--acc)}
.mkbtn svg{width:26px;height:26px}
.mkbtn svg use{fill:currentColor}
.mkbtn[aria-expanded="true"]{background:var(--acc);color:var(--ink)}
/* the menu unfolds out of the mark */
.menu{position:fixed;left:50%;top:calc(var(--bar) - 1px);z-index:59;width:min(300px,calc(100vw - 32px));
  transform:translateX(-50%);pointer-events:none;visibility:hidden;transition:visibility 0s .4s}
.menu.open{pointer-events:auto;visibility:visible;transition:none}
.menu .sheet{border:1px solid color-mix(in srgb,var(--acc) 36%,transparent);border-top:0;border-radius:0 0 16px 16px;
  background:color-mix(in srgb,var(--ink) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  padding:18px 14px 12px;clip-path:inset(0 0 100% 0 round 0 0 16px 16px);
  transition:clip-path .34s cubic-bezier(.2,.8,.2,1);box-shadow:0 24px 50px -24px rgba(0,0,0,.8)}
.menu.open .sheet{clip-path:inset(0 0 0 0 round 0 0 16px 16px)}
.menu .mdraw{width:42px;height:54px;margin:0 auto 10px;color:var(--acc)}
.menu .mdraw use{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-dasharray:100;stroke-dashoffset:100}
.menu.open .mdraw use{animation:mkdraw .4s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes mkdraw{70%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0;fill-opacity:1}}
.menu ul{list-style:none;display:grid;gap:4px}
.menu li{opacity:0;transform:translateY(-10px) scale(.96);transition:opacity .2s ease,transform .26s cubic-bezier(.2,.8,.2,1)}
.menu.open li{opacity:1;transform:none}
.menu.open li:nth-child(1){transition-delay:.08s}
.menu.open li:nth-child(2){transition-delay:.14s}
.menu.open li:nth-child(3){transition-delay:.2s}
.menu a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 14px;border-radius:10px;
  text-decoration:none;color:var(--text);font:600 18px/1 var(--disp);letter-spacing:-.01em}
.menu a:hover{background:color-mix(in srgb,var(--acc) 12%,transparent)}
.menu a[aria-current="page"]{color:var(--acc)}
.menu a[aria-current="page"]::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc)}

/* ---------- type ---------- */
h1{font-family:var(--disp);font-weight:600;font-size:var(--h1);line-height:.98;letter-spacing:-.04em;text-wrap:balance}
h2{font-family:var(--disp);font-weight:600;font-size:clamp(30px,3.4vw,50px);line-height:1.02;
  letter-spacing:-.03em;margin-bottom:18px;text-wrap:balance}
h3{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.01em}
p{font-size:18px;line-height:1.6;color:var(--body);max-width:44ch}
a{color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em}
a:hover{text-decoration-thickness:2px}
.url{font-family:var(--mono);font-weight:500;color:var(--text)}
.sub{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--rose);max-width:none}

/* ---------- the approve panel: one card, never restyled ---------- */
.panel{position:relative;width:376px;padding:22px 22px 18px;border-radius:18px;
  font-family:var(--mono);color:#D8F1F9;overflow:hidden;text-align:left;
  background:linear-gradient(155deg,rgba(52,80,102,.66),rgba(20,34,48,.9) 60%);
  border:1px solid rgba(143,211,232,.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 14px 30px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(220,245,255,.2)}
.pr{display:flex;justify-content:space-between;gap:14px;font-size:10.5px;letter-spacing:.14em;
  color:#9EC3D2;padding:7px 0;border-bottom:1px solid rgba(143,211,232,.14)}
.pr b{font-weight:500;color:#E3F6FC;letter-spacing:.02em;white-space:nowrap}
.panel .amt{font-size:48px;font-weight:500;letter-spacing:-.04em;margin:16px 0 10px;color:#EAF8FD;line-height:1;max-width:none}
.panel .amt small{font-size:13px;letter-spacing:.1em;color:#9EC3D2;margin-left:8px}
.panel .chip{display:inline-block;font-size:10.5px;letter-spacing:.09em;color:#F5A08C;max-width:none;
  border:1px dashed #F5A08C;border-radius:6px;padding:5px 8px;line-height:1.3}
.pbtns{display:flex;gap:10px;margin-top:18px}
.pbtns button{flex:1;min-height:44px;border-radius:9px;font-family:var(--mono);font-size:12px;
  letter-spacing:.16em;border:1px solid rgba(143,211,232,.4);background:rgba(14,26,38,.6);color:#CDEBF6}
.pbtns button.yes{background:linear-gradient(180deg,rgba(127,211,232,.3),rgba(127,211,232,.12));
  border-color:rgba(143,211,232,.8);color:#EAF8FD}
.pbtns button:hover:not(:disabled){background:rgba(127,211,232,.26)}
.pbtns button:disabled{opacity:.42}
.panel .pst{display:flex;line-height:1.3;align-items:center;gap:10px;margin-top:16px;font-size:10.5px;letter-spacing:.22em;color:#7FD3E8;
  min-height:20px;max-width:none}
.pst svg{width:18px;height:18px;flex:none}
.pst .trk{fill:none;stroke:rgba(127,211,232,.2);stroke-width:2}
.pst .arc{fill:none;stroke:#7FD3E8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.demolbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--dim);max-width:none;
  display:inline-flex;align-items:center;gap:7px}
.demolbl i{width:6px;height:6px;border-radius:50%;background:var(--mintc);flex:none}

/* ---------- the pocket view ---------- */
.pocket{width:min(420px,100%);border-radius:16px;overflow:hidden;border:1px solid rgba(242,235,230,.16);
  background:linear-gradient(180deg,#FBF7F4,#EFE8E3);color:#1A1216;font-family:var(--mono);text-align:left;
  box-shadow:0 34px 70px -28px rgba(0,0,0,.8)}
.pocket .bar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#E3DAD4;
  font-size:11.5px;color:#54464D;border-bottom:1px solid rgba(26,18,22,.1)}
.pocket .bar i{width:8px;height:8px;border-radius:50%;background:#C4B3AB;flex:none}
.pocket .hd{display:flex;align-items:center;gap:10px;padding:14px 16px 10px}
.pocket .hd svg{width:20px;height:24px;flex:none}
.pocket .hd use{fill:#1A1216}
.pocket .hd b{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.32em}
.pocket .hd em{font-style:normal;font-size:10.5px;letter-spacing:.14em;color:#65535B;margin-left:auto}
.prow{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid rgba(26,18,22,.09)}
.prow .cust{width:22px;height:0;border-top-width:2px;flex:none}
.prow.self .cust{border-top-style:solid;border-color:#16796E}
.prow.mint .cust{border-top-style:dashed;border-color:#B7503A}
.prow.ext .cust{border-top-style:dotted;border-color:#4E58A8}
.prow .nm{font-size:13px;color:#1A1216}
.prow .nm small{display:block;font-size:10.5px;color:#65535B;letter-spacing:.04em;margin-top:2px}
.prow .val{margin-left:auto;font-size:13px;color:#1A1216;text-align:right;font-variant-numeric:tabular-nums}
.prow .st{font-size:9.5px;letter-spacing:.14em;color:#65535B;border:1px solid rgba(26,18,22,.24);border-radius:99px;padding:3px 7px;flex:none}
.prow.live .st{color:#8C3A24;border-color:#B7503A}
.prow.dimr{opacity:.56}
.ptot{display:flex;align-items:center;gap:10px;padding:6px 16px;border-top:1px solid rgba(26,18,22,.16);
  font-size:11.5px;color:#46373E;background:#E9E1DC}
.ptot button{margin-left:auto;min-height:44px;min-width:64px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  background:none;border:1px solid rgba(26,18,22,.28);border-radius:7px;padding:6px 10px;color:#46373E}
.ptot button:hover{background:rgba(26,18,22,.06)}
.cap{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim);margin-top:12px;max-width:none}
.custcap{font-family:var(--mono);font-size:11.5px;color:var(--dim);max-width:46ch;margin-top:14px}

/* ---------- NO stamps ---------- */
.nolist{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:20px}
.nolist .nl{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--dim);width:100%}
.nostamp{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--text);border:1px solid color-mix(in srgb,var(--mintc) 55%,transparent);border-radius:99px;padding:6px 11px}
.nostamp b{font-weight:600;color:var(--mintc);letter-spacing:.12em;font-size:11px}

/* ---------- code preview ---------- */
.code{font-family:var(--mono);font-size:13px;line-height:1.8;background:rgba(0,0,0,.34);white-space:pre;
  border:1px solid color-mix(in srgb,var(--acc) 24%,transparent);border-radius:12px;padding:14px 18px;
  color:#D7E9F2;overflow-x:auto;max-width:100%}
.code .cm{color:var(--dim)}
.code .fn{color:var(--acc)}
.codecap{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim);margin-top:8px;max-width:none}

/* ---------- what's next ---------- */
.next{border:1px solid color-mix(in srgb,var(--ext) 44%,transparent);border-radius:14px;padding:22px 24px;
  background:color-mix(in srgb,var(--ext) 7%,var(--ink));max-width:64ch}
.next h3,.next h2{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ext);
  margin-bottom:14px;font-weight:500}
.next ul{list-style:none;display:grid;gap:9px}
.next li{font-size:15.5px;color:var(--body);padding-left:20px;position:relative;line-height:1.5}
.next li::before{content:"";position:absolute;left:0;top:.62em;width:9px;border-top:2px dotted var(--ext)}
.next .lone{margin-top:14px;padding-top:13px;border-top:1px solid color-mix(in srgb,var(--ext) 30%,transparent);
  font-family:var(--mono);font-size:12.5px;color:var(--body);max-width:none}

/* ---------- rails list ---------- */
.railrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
.railrow .cust{width:26px;height:0;border-top-width:2px;flex:none}
.railrow.self .cust{border-top-style:solid;border-color:var(--self)}
.railrow.mint .cust{border-top-style:dashed;border-color:var(--mintc)}
.railrow.ext .cust{border-top-style:dotted;border-color:var(--ext)}
.railrow .nm{font-size:13.5px;color:var(--text);font-family:var(--mono)}
.railrow .st{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);
  border:1px solid color-mix(in srgb,var(--text) 22%,transparent);border-radius:99px;padding:3px 8px;flex:none}
.railrow.live .st{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 60%,transparent)}

/* ---------- credits + end ---------- */
.credits{position:relative;padding:12vh var(--gut) 5vh;text-align:center}
.credits h2{font:500 11.5px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-bottom:24px}
.cr{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;max-width:980px;margin:0 auto}
.cr li{display:flex;align-items:center;gap:9px;font:500 14.5px/1.3 var(--sans);color:var(--text)}
.cr img,.cr svg{width:19px;height:19px;flex:none}
.cr .cashu{width:17px}
.cr code{font-family:var(--mono);font-size:11.5px;color:var(--dim);font-weight:400}
.cr em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);border:1px solid color-mix(in srgb,var(--text) 26%,transparent);border-radius:99px;padding:3px 8px}
.cr em.live{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 60%,transparent)}
.cr .bolt{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linejoin:round}
.end{position:relative;padding:4vh var(--gut) 12vh;text-align:center;display:flex;flex-direction:column;align-items:center}
.end .mk{width:52px;height:68px;color:var(--acc);margin-bottom:18px}
.end .mk use{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:1.4;vector-effect:non-scaling-stroke;
  stroke-dasharray:100;stroke-dashoffset:100}
.end .wm{font:600 21px/1 var(--sans);letter-spacing:.5em;margin:0 auto 16px;padding-left:.5em;color:var(--text);max-width:none}
.end p{font-size:16px;margin-inline:auto}
.end .motto{max-width:none;margin-top:26px;font-family:var(--mono);font-size:12.5px;color:var(--acc)}
.endline{font-family:var(--disp);font-size:clamp(26px,3vw,40px);font-weight:600;letter-spacing:-.03em;color:var(--text);
  max-width:none;line-height:1.1}

@media (prefers-reduced-motion:reduce){
  .end .mk use{stroke-dashoffset:0;fill-opacity:1}
  .modes [role="tab"].pulse{animation:none}
  .menu .sheet,.menu li{transition:none}
  .menu.open .mdraw use{animation:none;stroke-dashoffset:0;fill-opacity:1}
}
/* ===========================================================================
   HOME
   =========================================================================== */
.scene{position:relative;padding:14vh var(--gut)}
.wrap{max-width:1240px;margin:0 auto;position:relative}
.port{position:absolute;width:2px;height:2px;pointer-events:none}

/* S1 hero */
.hero{min-height:calc(100svh - var(--bar));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:8px 56px;grid-template-rows:1fr auto;
  align-items:center;padding:7vh var(--gut) 6vh;max-width:1440px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:30px;color:var(--acc)}
.brand svg{width:22px;height:29px}
.brand use{fill:currentColor}
.brand b{font:600 14px/1 var(--sans);letter-spacing:.44em;color:var(--text)}
.hero .htxt{position:relative;align-self:center}
.hero .hfig{align-self:center}
.hero h1{max-width:15ch}
.hero .lines{margin-top:24px;display:grid;gap:10px}
.hero .lines p{font-size:19px;max-width:40ch}
.proof{grid-column:1 / -1;display:flex;align-items:baseline;gap:12px;margin-top:6px;max-width:none;
  font-size:17px;line-height:1.35;color:var(--text)}
.proof span:last-child{white-space:nowrap}
.proof .lbl{font:500 11px/1 var(--mono);letter-spacing:.22em;color:var(--acc);flex:none;
  border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);border-radius:4px;padding:5px 7px;transform:translateY(-2px)}
.proof span:last-child{font-family:var(--disp);font-weight:500}
.urlchip{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--mono);font-size:14px;
  color:var(--text);border:1px solid color-mix(in srgb,var(--acc) 34%,transparent);border-radius:99px;padding:8px 16px;max-width:none}
.urlchip i{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px 1px var(--acc)}
/* the reveal blade — confined to the graphic */
.blade{position:relative;width:100%;aspect-ratio:5/4;border-radius:18px;overflow:hidden;isolation:isolate;
  border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);background:var(--ink2);touch-action:pan-y}
.blade .layer{position:absolute;inset:0}
.blade .layer > svg{position:absolute;inset:0;width:100%;height:100%}
.blade .inside{clip-path:polygon(0 100%,24% 0,400% 0,400% 100%);will-change:transform}
.blade .ilayer{position:absolute;inset:0;will-change:transform}
.bladeseam{position:absolute;inset:0;pointer-events:none;will-change:transform;background:var(--acc);
  clip-path:polygon(-4px 100%,calc(24% - 4px) 0,24% 0,0 100%);
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--acc) 70%,transparent))}
.bladegrab{position:absolute;left:12%;top:32%;width:46px;height:46px;margin:-23px 0 0 -23px;z-index:3;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--acc) 64%,transparent);background:color-mix(in srgb,var(--ink) 76%,transparent);
  color:var(--acc);display:flex;align-items:center;justify-content:center;will-change:transform}
.bladegrab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.heropanel{position:absolute;left:73%;top:60%;width:376px;transform:translate(-50%,-50%) scale(var(--hps,.56));pointer-events:none}
.bladecap{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;color:var(--dim);max-width:none}
.bladecap b{color:var(--acc);font-weight:500}
.bladecap span,.bladecap b{white-space:nowrap}
/* drawing system shared by every device picture */
.dv .s{fill:none;stroke:var(--lc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dv .a{fill:none;stroke:var(--acc);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dv .t{fill:none;stroke:var(--lc2);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dv .h{fill:none;stroke:color-mix(in srgb,var(--text) 42%,transparent);stroke-width:1.2;stroke-dasharray:3 4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dv .f{fill:color-mix(in srgb,var(--acc) 16%,var(--ink2))}
.dv .k{fill:var(--ink2)}
.dv .d{fill:var(--acc)}
.dv text{font-family:var(--mono);font-size:11px;fill:var(--dim);letter-spacing:.08em}
.dv text.on{fill:var(--acc)}
.bp{display:none}
html[data-mode="dev"] .bp{display:inline}
html[data-mode="dev"] .ux{display:none}
.dv .bpl{fill:none;stroke:rgba(127,211,232,.5);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.dv text.bpt{fill:#9FC8D8;font-size:10px;letter-spacing:.1em}
html[data-mode="dev"] .dv .f{fill:rgba(127,211,232,.07)}
html[data-mode="dev"] .dv .s{stroke-width:1.3}

/* threshold */
.th{position:relative;height:190vh}
.th-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.thstage{position:absolute;left:50%;top:50%;height:min(64vh,112vw);aspect-ratio:742/982;pointer-events:none;
  transform:translate(-50%,-50%);transform-origin:50% 28.5%;perspective:1400px;color:var(--acc)}
.mkglow{position:absolute;inset:-22%;border-radius:50%;opacity:var(--glow,0);
  background:radial-gradient(closest-side,rgba(232,184,74,.32),rgba(232,184,74,.1) 45%,transparent 72%)}
html[data-mode="dev"] .mkglow{background:radial-gradient(closest-side,rgba(127,211,232,.3),rgba(127,211,232,.1) 45%,transparent 72%)}
.spill{position:absolute;left:50%;bottom:4%;width:min(122vh,122vw);height:26vh;transform:translateX(-50%);opacity:var(--glow,0);
  filter:blur(6px);background:radial-gradient(60% 100% at 50% 0%,rgba(232,184,74,.22),transparent 72%)}
html[data-mode="dev"] .spill{background:radial-gradient(60% 100% at 50% 0%,rgba(127,211,232,.2),transparent 72%)}
.arch{position:absolute;inset:0;width:100%;height:100%}
.arch use{fill:url(#tyg);fill-opacity:0;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:100;stroke-dashoffset:100;
  vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.gate{position:absolute;inset:0;display:none;transform-style:preserve-3d}
html[data-mode="dev"] .gate{display:block}
html[data-mode="dev"] .arch{opacity:0}
.gate svg{position:absolute;inset:0;width:100%;height:100%}
.gate svg path{fill:none;stroke:var(--ice);vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100}
.thcap{position:absolute;left:0;right:0;top:calc(50% + 36vh);text-align:center;font:500 11.5px/1 var(--mono);
  letter-spacing:.3em;color:var(--rose);opacity:0;max-width:none}
/* S4 · the demo frames (shared by the six and the three) */
.scr{position:absolute;overflow:hidden}
.scr canvas{position:absolute;inset:0;width:100%;height:100%}
/* (a) the visor */
.fr-vr .scr{left:5%;right:5%;top:12%;height:60%;clip-path:url(#visorclip)}
.fr-vr .lensglow{position:absolute;left:5%;right:5%;top:12%;height:60%;pointer-events:none;clip-path:url(#visorclip);
  background:radial-gradient(40% 50% at 0% 0%,rgba(232,184,74,.22),transparent 70%),radial-gradient(40% 50% at 100% 0%,rgba(232,184,74,.22),transparent 70%),
  radial-gradient(40% 50% at 0% 100%,rgba(178,58,128,.3),transparent 70%),radial-gradient(40% 50% at 100% 100%,rgba(178,58,128,.3),transparent 70%)}
html[data-mode="dev"] .fr-vr .lensglow{background:radial-gradient(40% 50% at 0% 0%,rgba(127,211,232,.2),transparent 70%),radial-gradient(40% 50% at 100% 0%,rgba(127,211,232,.2),transparent 70%),
  radial-gradient(40% 50% at 0% 100%,rgba(62,110,142,.35),transparent 70%),radial-gradient(40% 50% at 100% 100%,rgba(62,110,142,.35),transparent 70%)}
.fr-vr .rim{position:absolute;left:5%;right:5%;top:12%;height:60%;pointer-events:none}
.fr-vr .rim svg,.fr-vr .ctl svg{width:100%;height:100%}
.fr-vr .ctl{position:absolute;bottom:3%;width:22%;height:28%;pointer-events:none}
.fr-vr .ctl.l{left:9%}.fr-vr .ctl.r{right:9%}
.fr-vr .scrui{left:5%;right:5%;top:12%;height:60%}
/* (b) the phone over a room */
.fr-ar .room{position:absolute;inset:0}
.fr-ar .room canvas{position:absolute;inset:0;width:100%;height:100%}
.fr-ar .phone{position:absolute;left:50%;top:4%;bottom:4%;aspect-ratio:9/17;transform:translateX(-50%);
  border-radius:clamp(14px,6cqw,26px);border:2px solid var(--lc);background:#050305;padding:3.2cqw 2.2cqw;
  box-shadow:0 30px 50px -20px rgba(0,0,0,.9)}
html[data-mode="dev"] .fr-ar .phone{border-width:1.5px}
.fr-ar .phone::before{content:"";position:absolute;left:50%;top:1.2cqw;width:14%;height:.9cqw;border-radius:9px;
  transform:translateX(-50%);background:color-mix(in srgb,var(--lc) 60%,transparent)}
.fr-ar .scr{inset:3.2cqw 2.2cqw;border-radius:clamp(8px,3.4cqw,16px)}
.fr-ar .gyro{position:absolute;right:7%;bottom:5%;z-index:5;display:flex;align-items:center;gap:4px;font:400 9px/1 var(--mono);color:var(--acc);
  letter-spacing:.08em;padding:3px 6px;border-radius:99px;background:rgba(0,0,0,.5)}
.fr-ar .gyro svg{width:12px;height:12px}
.fr-ar .gyro path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.fr-ar .hand{position:absolute;left:50%;bottom:-2%;width:62%;transform:translateX(-50%);pointer-events:none}
/* (c) the laptop */
.fr-lp .lap{position:absolute;inset:6% 4% 0 4%;pointer-events:none}
.fr-lp .lap svg{width:100%;height:100%}
.fr-lp .scr{left:13.3%;right:13.3%;top:10.5%;height:54%;border-radius:4px}
.fr-lp .scr .lpbar{position:absolute;left:0;right:0;top:0;height:14px;display:flex;align-items:center;gap:4px;padding:0 7px;z-index:2;
  background:color-mix(in srgb,var(--text) 14%,var(--ink2))}
.fr-lp .scr .lpbar i{width:4px;height:4px;border-radius:50%;background:color-mix(in srgb,var(--text) 40%,transparent)}
.fr-lp .scr .lpbar span{font:400 8px/1 var(--mono);color:var(--dim);margin-left:4px}
/* game UI and panel, shared */
.scrui{position:absolute;z-index:4;pointer-events:none}
.fr-ar .scrui{inset:3.2cqw 2.2cqw}
.fr-lp .scrui{left:13.3%;right:13.3%;top:10.5%;height:54%}
.shots{position:absolute;left:8px;top:8px;display:flex;align-items:center;gap:3px;font:500 10px/1 var(--mono);letter-spacing:.12em;
  color:#FFD9A0;padding:4px 6px;border-radius:99px;background:rgba(0,0,0,.45)}
.fr-vr .shots{left:14%;top:12%}
.fr-lp .shots{top:20px}
.shots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.2)}
.shots i[data-on="1"]{background:#F7931A;box-shadow:0 0 5px 1px rgba(247,147,26,.6)}
.gui{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88%;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;opacity:0;transition:opacity .25s ease;pointer-events:none}
.gui[data-show="1"]{opacity:1;pointer-events:auto}
.gui[data-kind="back"]{top:auto;bottom:7%;transform:translate(-50%,0);z-index:7}
.fr[data-beat="verified"] .fpanel,.fr[data-beat="resumed"] .fpanel{top:40%}
.gbadge{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);letter-spacing:.18em;color:#FFD9A0;
  border:1px solid rgba(247,147,26,.6);background:rgba(40,18,4,.82);border-radius:99px;padding:5px 9px}
.gbadge svg{width:10px;height:10px}
.gbtn{min-height:40px;border-radius:10px;padding:8px 14px;font:600 12.5px/1.2 var(--sans);letter-spacing:.01em;color:#1A1206;border:0;
  background:linear-gradient(180deg,#F9C45A,#E8931A);box-shadow:0 10px 24px -10px rgba(247,147,26,.8)}
.gbtn small{display:block;font:400 11px/1.2 var(--mono);letter-spacing:.08em;opacity:.8;margin-top:3px}
.gui[data-kind="stop"] [data-act="back"],.gui[data-kind="back"] [data-act="pay"],.gui[data-kind="back"] .gbadge{display:none}
.fpanel{position:absolute;left:50%;top:50%;width:376px;z-index:5;transform:translate(-50%,-50%) scale(var(--ps,.5));
  opacity:0;transition:opacity .25s ease;pointer-events:none}
.fpanel[data-show="1"]{opacity:1;pointer-events:auto}
/* the scanner (inside the sticky pocket scene) */
.scan{position:relative;display:flex;justify-content:center;padding:34px 0;touch-action:pan-y;isolation:isolate;--sr:120px}
html[data-mode="dev"] .scan{--sr:142px}
.scan .base{position:relative;z-index:1;width:min(420px,100%)}
.scanin{position:absolute;inset:0;z-index:2;clip-path:circle(var(--sr) at 50% 50%);will-change:transform}
.scanin > div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;will-change:transform;
  background:#170C13}
html[data-mode="dev"] .scanin > div{background:#070B14}
.scanring{position:absolute;left:50%;top:50%;width:calc(var(--sr) * 2);height:calc(var(--sr) * 2);margin:calc(var(--sr) * -1) 0 0 calc(var(--sr) * -1);
  border-radius:50%;z-index:3;border:1.5px solid var(--acc);pointer-events:none;will-change:transform;
  box-shadow:0 0 26px -4px var(--acc),inset 0 0 26px -10px var(--acc)}
.scangrab{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;z-index:4;border-radius:50%;
  border:0;background:transparent;color:var(--acc);
  display:flex;align-items:flex-end;justify-content:center;will-change:transform}
.scangrab span{position:absolute;top:calc(var(--sr) + 4px);font:500 11px/1 var(--mono);letter-spacing:.14em;white-space:nowrap;color:var(--acc)}
.sees{width:190px;text-align:center;font-family:var(--mono)}
.sees .q{font:600 34px/1 var(--sans);color:#F2EBE6;letter-spacing:-.02em;max-width:none}
.sees .yn{display:flex;gap:8px;margin-top:14px}
.sees .yn span{flex:1;border:1px solid rgba(242,235,230,.4);border-radius:8px;padding:9px 0;font-size:11px;letter-spacing:.16em;color:#F2EBE6}
.sees .blank{margin-top:14px;display:grid;gap:7px}
.sees .blank i{height:7px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(242,235,230,.1) 0 10px,transparent 10px 18px)}
.sees.payload{width:236px;text-align:left}
.sees.payload pre{font:400 11px/1.6 var(--mono);color:#CFE6F2;white-space:pre}
.sees.payload .never{margin-top:10px;font-size:11px;line-height:1.5;color:#F5A08C;letter-spacing:.02em}
.sees.payload .never b{display:block;font-weight:500;letter-spacing:.14em;margin-bottom:2px;color:#F5A08C}
/* S7 · the road */
.road{position:relative;height:300vh}
.road-pin{position:sticky;top:var(--bar);height:calc(100svh - var(--bar));overflow:hidden}
.road-pin > canvas{position:absolute;inset:0;width:100%;height:100%}
.road .rtxt{position:absolute;left:var(--gut);top:7vh;max-width:430px;z-index:2}
.road .rtxt p{font-size:17px}
.orbitlbl{position:absolute;left:0;top:0;z-index:3;transform:translate(-50%,0);pointer-events:none;white-space:nowrap;
  font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--text);padding:6px 10px;border-radius:99px;
  background:color-mix(in srgb,var(--ink) 80%,transparent);border:1px solid var(--lblc,var(--acc))}
.orbitcard{position:absolute;right:var(--gut);bottom:6vh;width:min(420px,calc(100% - 2 * var(--gut)));z-index:2;
  padding:18px 20px;border-radius:16px;background:color-mix(in srgb,var(--ink) 84%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.orbitcard .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
#orbitname{font:500 13.5px/1.4 var(--mono);color:var(--text)}
#orbitstatus{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--dim);border:1px solid color-mix(in srgb,var(--text) 26%,transparent);
  border-radius:99px;padding:4px 9px}
#orbitstatus[data-live="1"]{color:var(--acc);border-color:var(--acc)}
#orbittext{margin-top:8px;font-size:15px;max-width:none}
#orbitpick{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
#orbitpick button{min-height:44px;min-width:44px;padding:0 12px;border-radius:9px;font:500 11.5px/1 var(--mono);letter-spacing:.06em;
  color:var(--dim);background:rgba(0,0,0,.3);border:1px solid color-mix(in srgb,var(--text) 18%,transparent)}
#orbitpick button:hover{color:var(--text)}
#orbitpick button[aria-pressed="true"]{color:var(--acc-ink);background:var(--acc);border-color:var(--acc)}
.orbitcard .custcap{margin-top:12px}
/* ---------- tablets ---------- */
@media (max-width:1100px){
  .steprail li span{display:none}
}
@media (max-width:1023px){
  .hero{grid-template-columns:1fr;gap:34px}
  .steprail li span{display:inline}
  .combonote{margin-left:0}
}
/* ---------- phones: last, so it wins ---------- */
@media (max-width:819px){
  :root{--bar:56px;--gut:20px}
  .modes{grid-template-columns:1fr 64px 1fr}
  .modes [role="tab"]{align-items:center!important;padding:0 10px}
  .modes [role="tab"] small{display:none}
  .modes [role="tab"] b{font-size:17px}
  .mkbtn{width:46px;height:46px;margin:-23px 0 0 -23px}
  .scene{padding:10vh 20px 10vh 40px}
  .hero{padding:5vh 20px 8vh 40px;min-height:auto}
  .hero .lines p{font-size:17px}
  .proof{flex-direction:column;gap:8px;font-size:16px}
  .proof span:last-child{white-space:normal}
  p{font-size:16.5px}
  .gap .obj{width:min(280px,76vw)}
  .road-pin .rtxt{left:20px;right:20px;top:3vh}
  .road .rtxt p{font-size:15px}
  .road .rtxt h2{font-size:26px}
  .orbitcard{left:20px;right:20px;width:auto;bottom:2vh;padding:14px}
  #orbittext{font-size:14px}
  .scan{--sr:96px}
  html[data-mode="dev"] .scan{--sr:118px}
  .sees{transform:scale(.8)}
  .credits{text-align:left}
  .cr{flex-direction:column;align-items:flex-start;max-width:320px}
  .credits h2{max-width:320px;margin:0 auto 22px}
}
@media (prefers-reduced-motion:reduce){.bladegrab,.scangrab{display:none}}
/* ---------- floor (lab15's wireframe), fog, and small late additions ---------- */
.floor{position:fixed;inset:0;z-index:0;pointer-events:none;perspective:520px;perspective-origin:50% 36%;opacity:0;overflow:hidden}
.rig{position:absolute;left:50%;top:74%;width:0;height:0;transform-style:preserve-3d}
.rig i{position:absolute;left:-150vw;top:-1px;width:300vw;height:2px;
  background:linear-gradient(90deg,transparent,rgba(178,58,128,.5) 30%,rgba(178,58,128,.5) 70%,transparent)}
.rig b{position:absolute;left:-1px;top:0;width:2px;height:3600px;transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(178,58,128,.44),rgba(178,58,128,.03))}
html[data-mode="dev"] .rig i{background:linear-gradient(90deg,transparent,rgba(62,110,142,.8) 30%,rgba(62,110,142,.8) 70%,transparent)}
html[data-mode="dev"] .rig b{background:linear-gradient(180deg,rgba(62,110,142,.7),rgba(62,110,142,.05))}
.fog{position:absolute;left:-10%;right:-10%;top:26%;height:22%;filter:blur(22px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(138,42,98,.34),rgba(110,30,79,.1) 55%,transparent 75%)}
html[data-mode="dev"] .fog{background:radial-gradient(50% 50% at 50% 50%,rgba(30,70,110,.5),rgba(12,30,54,.18) 55%,transparent 75%)}
.fr-lp .lphand{position:absolute;left:46.2%;top:72.4%;width:22%;pointer-events:none;z-index:6}
.devlive{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:10px}
.devlive .states{margin:0}
.devlive .states li{padding:6px 9px;font-size:11px}
.devlive{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:10px}
.devlive .sdk{font:400 12px/1.4 var(--mono);color:#D7E9F2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.devlive .sdk .cm{color:var(--dim)}.devlive .sdk .fn{color:var(--acc)}
/* the scanner's ghost: the same pocket, as a world sees it */
.ghost{position:relative;width:min(420px,100%);border-radius:16px;border:1px dashed rgba(242,235,230,.28);overflow:hidden;
  background:#170C13;display:flex;flex-direction:column}
html[data-mode="dev"] .ghost{background:#070B14;border-color:rgba(127,211,232,.34)}
.ghost .gbar{display:flex;gap:8px;align-items:center;padding:12px;border-bottom:1px dashed rgba(242,235,230,.14)}
.ghost .gbar i,.ghost .grows i{display:block;height:8px;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(242,235,230,.12) 0 10px,transparent 10px 18px)}
.ghost .gbar i:first-child{width:8px;border-radius:50%}
.ghost .grows{flex:1;display:flex;flex-direction:column;justify-content:space-around;padding:18px 16px}
.ghost .grows i:nth-child(odd){width:72%}.ghost .grows i:nth-child(even){width:48%}
.ghost .gmid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ghost .gmid .sees{padding:14px;border-radius:14px;background:#170C13}
html[data-mode="dev"] .ghost .gmid .sees{background:#070B14}

/* the skip link: fully hidden (not just moved up) until it has keyboard focus; then top-left, over the top bar */
.skip{position:fixed;left:16px;top:8px;z-index:1000;padding:15px 14px;border-radius:8px;background:var(--acc);color:var(--acc-ink);
  font:600 14px/1 var(--mono);text-decoration:none;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;opacity:0;pointer-events:none}
.skip:focus-visible{clip-path:none;width:auto;height:auto;overflow:visible;opacity:1;pointer-events:auto;top:calc(8px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left))}
/* ===========================================================================
   JOURNEY — one flow, six instruments, the line between them
   =========================================================================== */
.jhead{padding:12vh var(--gut) 8vh}
.jhead h1{font-size:clamp(44px,5.4vw,80px)}
.lead{font-size:20px;max-width:52ch;margin-top:22px;color:var(--text)}
.twostates{display:grid;grid-template-columns:1fr 1fr;gap:18px 96px;margin-top:48px}
.st2{margin:0;padding:22px;border-radius:18px;background:var(--tile);border:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.st2 svg{width:100%;height:auto;max-height:170px}
.st2 figcaption{margin-top:14px;font-size:15.5px;line-height:1.55;color:var(--body)}
.st2 figcaption b{display:block;font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:6px}
.st2note{margin-top:18px;font:400 13px/1.5 var(--mono);color:var(--rose);max-width:none}
.jf{position:relative;padding:12vh var(--gut);min-height:88svh;display:flex;align-items:center}
.jf > .wrap{width:100%}
.jgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:160px;align-items:center}
.jgrid.flip .jtxt{order:2}
.jtxt h2{font-size:clamp(30px,3.4vw,48px)}
.jtxt p + p,.jtxt div > p + pre{margin-top:14px}
.jtxt .code{margin-top:16px}
.jstep{display:flex;align-items:center;gap:12px;margin-bottom:16px;max-width:none}
.jstep b{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 14px/1 var(--mono);
  color:var(--acc-ink);background:var(--acc)}
/* instruments */
.inst{position:relative;border-radius:18px;background:var(--tile);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);
  padding:0 0 16px;overflow:hidden;display:flex;flex-direction:column;align-items:center;min-height:384px}
.inst > .demolbl{margin-top:auto;padding-top:10px}
.ibar{align-self:stretch;display:flex;align-items:center;gap:8px;padding:10px 14px;font:400 12px/1 var(--mono);
  color:var(--dim);background:color-mix(in srgb,var(--text) 7%,transparent);border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.ibar i{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--text) 26%,transparent)}
.ibody{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:16px;padding:26px 22px 8px;text-align:center}
.istage{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:16px}
.ihead{font:500 17px/1.4 var(--disp);color:var(--text);max-width:30ch;margin:0 auto}
.ibtn{min-height:48px;border-radius:12px;padding:12px 22px;font:600 15px/1 var(--disp);color:var(--acc-ink);border:0;background:var(--acc);
  transition:transform .15s ease,filter .15s ease}
.ibtn:hover:not(:disabled){filter:brightness(1.08)}
.ibtn:active:not(:disabled){transform:scale(.97)}
.ibtn:disabled{opacity:.45}
.ibtn.ghost{background:none;border:1px solid color-mix(in srgb,var(--acc) 60%,transparent);color:var(--acc)}
.idone{font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--acc);min-height:1.4em;max-width:none}
.imark{width:40px;height:52px;color:var(--acc)}
.imark use{fill:currentColor}
/* wallet pages are the pocket's own: light, like the pocket view */
.inst.wallet,.istage.wallet{background:linear-gradient(180deg,#FBF7F4,#EFE8E3);color:#1A1216}
.inst.wallet{border-color:rgba(242,235,230,.2)}
.wallet .ibar{background:#E3DAD4;color:#54464D;border-color:rgba(26,18,22,.1)}
.wallet .ibar i{background:#C4B3AB}
.wallet .ihead{color:#1A1216;font-family:var(--sans)}
.wallet .imark{color:#1A1216}
.wallet .ibtn{background:#1A1216;color:#FBF7F4;font-family:var(--sans)}
.wallet .ibtn.ghost{background:none;color:#1A1216;border-color:rgba(26,18,22,.35)}
.wallet .idone{color:#8C3A24}
.inst.wallet > .demolbl{color:#65535B}
#i-allow .istage.wallet{background:none}
.wallet .url{color:#1A1216}
/* 1 · pin + words */
.pindots{display:flex;gap:12px}
.pindots i{width:14px;height:14px;border-radius:50%;border:1.5px solid #1A1216}
.pindots i[data-on="1"]{background:#1A1216}
.pinpad{display:grid;grid-template-columns:repeat(3,64px);gap:8px}
.pinpad button{min-height:48px;border-radius:10px;border:1px solid rgba(26,18,22,.18);background:#fff;color:#1A1216;font:600 18px/1 var(--sans)}
.pinpad button:hover{border-color:#1A1216}
.words{list-style:none;counter-reset:w;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 14px;padding:14px 16px;border-radius:12px;
  border:1px dashed rgba(26,18,22,.35);font:500 13px/1.3 var(--mono);color:#1A1216;text-align:left}
.words li{counter-increment:w}
.words li::before{content:counter(w) ". ";color:#6A5860}
/* 2 · receive */
.arrive{position:relative;height:54px;width:200px}
.arrive .bolt{position:absolute;left:50%;top:0;width:30px;height:30px;margin-left:-15px;opacity:0}
.arrive .bolt path{fill:#F7B733;stroke:#8C5A10;stroke-width:1;stroke-linejoin:round}
.arrive .nut{position:absolute;left:50%;top:6px;width:16px;height:16px;margin-left:-8px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 35% 35%,#FFD9A0,#F7931A 60%,#B8640A)}
.arrive.go .bolt{animation:boltin .7s cubic-bezier(.2,.8,.2,1) forwards}
.arrive.go .nut{animation:nutdrop .7s .55s cubic-bezier(.4,0,.6,1) forwards}
@keyframes boltin{0%{opacity:0;transform:translate(-90px,-6px) rotate(-20deg)}60%{opacity:1;transform:none}100%{opacity:0;transform:scale(.4)}}
@keyframes nutdrop{0%{opacity:0;transform:translateY(-6px) scale(.6)}30%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:1;transform:translateY(38px)}}
.mini{align-self:stretch;border-radius:12px;border:1px solid rgba(26,18,22,.12);background:#fff;overflow:hidden;min-height:112px;
  display:flex;flex-direction:column;justify-content:center}
.mini .empty{font:400 13px/1.4 var(--mono);color:#6A5860;margin:0 auto}
.mini .prow{animation:rowin .4s cubic-bezier(.2,.8,.2,1) both}
.mini .prow:nth-child(2){animation-delay:.08s}
.mini .ptot{animation:rowin .4s .16s cubic-bezier(.2,.8,.2,1) both}
@keyframes rowin{from{opacity:0;transform:translateY(8px)}}
/* 3 · a mock world */
.mock{align-self:stretch;margin:0 0 18px}
.mview{position:relative;height:210px;background:#0B0610;transition:height .45s cubic-bezier(.22,1,.3,1)}
html[data-mode="dev"] .mview{background:#050810}
.mview canvas{position:absolute;inset:0;width:100%;height:100%}
.mvisor{position:absolute;inset:6% 4%;opacity:0;transition:opacity .35s ease;pointer-events:none}
.mvisor svg{width:100%;height:100%}
.mock[data-in="1"] .mview{height:260px}
.mock[data-in="1"] .mvisor{opacity:1}
.mtitle{position:absolute;left:18px;bottom:16px;font:600 22px/1.1 var(--disp);color:var(--text);transition:opacity .3s ease;max-width:none;text-align:left}
.mtitle small{display:block;font:400 11.5px/1.4 var(--mono);color:var(--dim);letter-spacing:.06em}
.mock[data-in="1"] .mtitle{opacity:0}
#i-enter .ibtn,#i-enter .idone{margin-top:0}
#i-enter .idone{margin-top:12px}
/* 4 · the dial */
#i-allow{padding-bottom:16px}
#i-allow .istage{flex:1}
.dialwrap{position:relative;width:204px;height:204px;touch-action:none}
.dialwrap svg{width:100%;height:100%}
.dialwrap .trk{fill:none;stroke:rgba(26,18,22,.12);stroke-width:10;stroke-linecap:round}
.dialwrap .val{fill:none;stroke:#1A1216;stroke-width:10;stroke-linecap:round}
.dialwrap .tgt{stroke:#B7503A;stroke-width:2.4;stroke-linecap:round}
.dialwrap .needle{stroke:#B7503A;stroke-width:3;stroke-linecap:round}
.dialwrap .hub{fill:#1A1216}
.dialnum{position:absolute;left:0;right:0;top:56%;text-align:center;font:700 34px/1 var(--sans);color:#1A1216;font-variant-numeric:tabular-nums;pointer-events:none}
.dialnum small{display:block;font:500 11px/1.4 var(--mono);letter-spacing:.2em;color:#65535B}
.dialhit{position:absolute;inset:0;border-radius:50%;cursor:grab}
.dialhit:focus-visible{outline:2px solid #1A1216;outline-offset:4px}
.dialhint{font:500 12px/1.4 var(--mono);color:#65535B;max-width:30ch;margin:0 auto}
.dialhint[data-ok="1"]{color:#8C3A24}
/* 5 · the panel in a scene */
.payscene{position:relative;align-self:stretch;height:360px;overflow:hidden}
.payscene canvas{position:absolute;inset:0;width:100%;height:100%}
.payslot{position:absolute;left:50%;top:50%;width:376px;transform:translate(-50%,-50%) scale(var(--js,.86))}
#i-pay .idone{margin-top:12px}
/* 6 · three shells */
.shellpick{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:18px 16px 4px}
.shellpick button{min-height:44px;border-radius:10px;padding:0 16px;font:500 12.5px/1 var(--mono);letter-spacing:.06em;color:var(--dim);
  background:rgba(0,0,0,.3);border:1px solid color-mix(in srgb,var(--text) 18%,transparent)}
.shellpick button:hover{color:var(--text)}
.shellpick button[aria-pressed="true"]{color:var(--acc-ink);background:var(--acc);border-color:var(--acc)}
.shellstage{position:relative;width:100%;height:300px;margin-top:10px}
.sh-scr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden;background:#0B0610;
  transition:width .4s cubic-bezier(.22,1,.3,1),height .4s cubic-bezier(.22,1,.3,1),border-radius .4s ease}
.sh-scr canvas{position:absolute;inset:0;width:100%;height:100%}
.sh-panel{position:absolute;left:50%;top:50%;width:376px;transform:translate(-50%,-50%) scale(var(--ss,.4))}
.shellstage[data-shell="vr"] .sh-scr{width:88%;height:78%;clip-path:url(#visorclip)}
.shellstage[data-shell="ar"] .sh-scr{width:44%;height:94%;border-radius:22px;border:2px solid var(--lc)}
.shellstage[data-shell="lp"] .sh-scr{width:78%;height:70%;border-radius:6px;border:2px solid var(--lc);top:44%}
.shellstage[data-shell="lp"]::after{content:"";position:absolute;left:6%;right:6%;top:80%;height:12px;border-radius:0 0 12px 12px;
  border:2px solid var(--lc);background:color-mix(in srgb,var(--acc) 16%,var(--ink2))}
.sh-art{position:absolute;left:6%;right:6%;top:11%;height:78%;pointer-events:none;opacity:0;transition:opacity .3s ease}
.shellstage[data-shell="vr"] .sh-art{opacity:1}
.sh-art svg{width:100%;height:100%}
.shelllbl{font:500 12px/1.4 var(--mono);color:var(--dim);margin:12px auto 0;max-width:none;text-align:center}
/* tail */
.jtail{padding:14vh var(--gut) 12vh}
.origin-table{border:1px solid color-mix(in srgb,var(--ice) 34%,transparent);border-radius:16px;overflow:hidden;max-width:760px;margin-bottom:34px}
.origin-table h3{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ice);padding:14px 18px;
  border-bottom:1px solid color-mix(in srgb,var(--ice) 26%,transparent)}
.origin-table .ot{display:grid;grid-template-columns:1fr 1fr}
.origin-table .ot > div{padding:16px 18px}
.origin-table .ot > div + div{border-left:1px solid color-mix(in srgb,var(--ice) 22%,transparent)}
.origin-table h4{font:500 11.5px/1 var(--mono);letter-spacing:.14em;margin-bottom:10px}
.origin-table .cross h4{color:#7CE0C8}.origin-table .never h4{color:#F5A08C}
.origin-table ul{list-style:none;display:grid;gap:7px}
.origin-table li{font:400 14px/1.4 var(--mono);color:var(--body)}
.seqwrap{margin:0 0 44px;max-width:780px;overflow-x:auto;overscroll-behavior-x:contain}
@media (max-width:819px){.seqwrap svg{min-width:640px}}
.seqwrap svg{width:100%;height:auto}
.seqwrap .sq{fill:none;stroke:rgba(127,211,232,.55);stroke-width:1.3}
.seqwrap .ar{fill:none;stroke:var(--ice);stroke-width:1.4}
.seqwrap .orig{stroke:#F5A08C;stroke-width:1.2;stroke-dasharray:4 5;fill:none}
.seqwrap text{font:400 11.5px var(--mono);fill:#A9C8D6}
.seqwrap text.hd{fill:var(--text);font-size:12.5px}
.seqwrap text.origt{fill:#F5A08C;font-size:10.5px}
.backline{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px 28px;font:500 14px/1.4 var(--mono);max-width:none}
.motto{margin-top:26px;font:400 12.5px/1.4 var(--mono);color:var(--acc);max-width:none}
@media (max-width:1023px){
  .jgrid{grid-template-columns:1fr;row-gap:36px}
  .jgrid.flip .jtxt{order:0}
  .twostates{grid-template-columns:1fr}
  .jf{min-height:auto}
}
@media (max-width:819px){
  .jhead,.jf,.jtail{padding-left:40px;padding-right:20px}
  .jf{padding-top:9vh;padding-bottom:9vh}
  .lead{font-size:17.5px}
  .pinpad{grid-template-columns:repeat(3,58px)}
  .words{grid-template-columns:repeat(2,1fr)}
  .payscene{height:300px}
  .origin-table .ot{grid-template-columns:1fr}
  .origin-table .ot > div + div{border-left:0;border-top:1px solid color-mix(in srgb,var(--ice) 22%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .arrive.go .bolt{animation:none;opacity:0}
  .arrive.go .nut{animation:none;opacity:1;transform:translateY(38px)}
  .mini .prow,.mini .ptot{animation:none}
  .mview,.sh-scr,.mvisor{transition:none}
}

/* ===========================================================================
   QUESTIONS — the wall: chips filter, typing dims, a tile turns over
   =========================================================================== */
.qhead{padding:12vh var(--gut) 4vh}
.qhead h1{font-size:clamp(44px,5.4vw,80px)}
.qtools{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;margin-top:32px}
.qsearch{display:flex;align-items:center;gap:12px;flex:1 1 320px;max-width:460px;border-radius:12px;padding:0 14px;
  border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);background:color-mix(in srgb,var(--ink) 80%,transparent)}
.qsearch:focus-within{border-color:var(--acc)}
.qsearch svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--acc);stroke-width:1.8}
.qsearch input{flex:1;min-width:0;min-height:48px;background:none;border:0;color:var(--text);font:400 15px/1 var(--mono);outline:none;caret-color:var(--acc)}
.qsearch input::placeholder{color:var(--dim)}
.qsearch input::-webkit-search-cancel-button{display:none}
.qsearch button{background:none;border:0;min-height:44px;padding:0 4px;color:var(--dim);font:500 11.5px/1 var(--mono);letter-spacing:.12em}
.qsearch button:hover{color:var(--text)}
.qchips{display:flex;flex-wrap:wrap;gap:8px}
.qchips button{min-height:44px;border-radius:99px;padding:0 16px;font:500 12.5px/1 var(--mono);letter-spacing:.04em;color:var(--body);
  background:color-mix(in srgb,var(--ink) 70%,transparent);border:1px solid color-mix(in srgb,var(--text) 20%,transparent)}
.qchips button:hover{color:var(--text);border-color:color-mix(in srgb,var(--acc) 60%,transparent)}
.qchips button[aria-pressed="true"]{color:var(--acc-ink);background:var(--acc);border-color:var(--acc)}
.qcount{margin-top:14px;font:400 12.5px/1.4 var(--mono);color:var(--dim);min-height:1.4em;max-width:none}
.qwall{padding:4vh var(--gut) 12vh}
.wallgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-auto-flow:dense;gap:16px;align-items:start}
.tile{position:relative;perspective:1400px;height:150px;transition:height .45s cubic-bezier(.22,1,.3,1),opacity .25s ease,filter .25s ease}
.tile.wide{grid-column:span 2}
.tile.dim{opacity:.26;filter:saturate(.3)}
.tface,.tback{position:absolute;left:0;right:0;top:0;border-radius:16px;background:var(--tile);text-align:left;
  border:1px solid color-mix(in srgb,var(--text) 14%,transparent);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .5s cubic-bezier(.3,1,.35,1),visibility 0s linear .25s}
.tface{width:100%;min-height:150px;display:flex;flex-direction:column;gap:12px;padding:20px 20px 16px;color:var(--text)}
.tface:hover{border-color:color-mix(in srgb,var(--acc) 60%,transparent)}
.tq{font:600 18px/1.3 var(--disp);letter-spacing:-.01em}
.tcat{margin-top:auto;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tturn{position:absolute;right:18px;bottom:16px;font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--acc)}
.tback{padding:20px 20px 16px;transform:rotateX(-180deg);visibility:hidden;outline:none}
.tile[data-open="1"] .tface{transform:rotateX(180deg);visibility:hidden}
.tile[data-open="1"] .tback{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.3,1,.35,1),visibility 0s}
.tile[data-open="0"] .tface{visibility:visible;transition:transform .5s cubic-bezier(.3,1,.35,1),visibility 0s}
.tback .tqs{font:500 11.5px/1.4 var(--mono);letter-spacing:.06em;color:var(--acc);margin-bottom:10px;max-width:none}
.tback p{font-size:15px;line-height:1.58;max-width:none}
.tback p + p,.tback ul + p,.tback pre + p,.tback .exact + p{margin-top:10px}
.tback ul{list-style:none;display:grid;gap:6px;margin-top:10px}
.tback li{font-size:14px;line-height:1.45;color:var(--body);padding-left:16px;position:relative}
.tback li::before{content:"";position:absolute;left:0;top:.62em;width:8px;border-top:1.5px solid var(--acc)}
.tback li b{color:var(--text);font-weight:600}
.tback .rl li{padding-left:0}.tback .rl li::before{content:none}
.tback .code{margin-top:10px;font-size:12px}
.tback .next{margin-top:14px;padding:16px 18px}
.tback .next li::before{border-top:2px dotted var(--ext)}
.exact{margin-top:10px}
.exbtn{min-height:44px;border-radius:9px;padding:0 12px;font:500 11.5px/1 var(--mono);letter-spacing:.08em;color:var(--acc);
  background:none;border:1px solid color-mix(in srgb,var(--acc) 50%,transparent)}
.tback .exact p{margin-top:10px;padding-left:12px;border-left:1px dashed var(--mintc)}
.tclose{margin-top:14px;min-height:44px;border-radius:9px;padding:0 12px;font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--dim);
  background:none;border:1px solid color-mix(in srgb,var(--text) 20%,transparent)}
.tclose:hover{color:var(--text)}
.tback .custnote{margin-top:10px;font:400 11.5px/1.4 var(--mono);color:var(--dim)}
.tback .codecap{font-size:11px;line-height:1.4}
.tile[data-cust="self"] .tface,.tile[data-cust="self"] .tback{border:1.5px solid var(--self)}
.tile[data-cust="mint"] .tface,.tile[data-cust="mint"] .tback{border:1.5px dashed var(--mintc)}
.tile[data-cust="ext"] .tface,.tile[data-cust="ext"] .tback{border:1.5px dotted var(--ext)}
.qempty{grid-column:1 / -1;font-size:16px}
.qtail{padding:4vh var(--gut) 14vh}
.qlinks{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:18px;font:500 15px/1.4 var(--mono);max-width:none;color:var(--dim)}
@media (max-width:700px){.tile.wide{grid-column:span 1}.wallgrid{grid-template-columns:1fr}}
@media (max-width:819px){.qhead,.qwall,.qtail{padding-left:20px;padding-right:20px}}
@media (prefers-reduced-motion:reduce){.tile,.tface,.tback{transition:none}}
/* ===========================================================================
   lab18 additions
   =========================================================================== */
/* the scroll ruler: mono ticks and short section names down the left edge */
.ruler{position:fixed;left:0;top:var(--bar);bottom:0;width:var(--rulw,72px);z-index:3;pointer-events:none;
  padding:24px 0 24px 10px;display:block}
.ruler .rline{position:absolute;left:14px;top:24px;bottom:24px;width:1px;background:color-mix(in srgb,var(--acc) 22%,transparent)}
.ruler .rhead{position:absolute;left:11px;top:24px;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 8px 1px color-mix(in srgb,var(--acc) 60%,transparent);will-change:transform}
.ruler button{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;height:20px;margin-top:-10px;padding:0 4px 0 10px;
  pointer-events:auto;background:none;border:0;color:var(--dim);font:500 9.5px/1 var(--mono);letter-spacing:.14em;
  transition:color .25s ease;cursor:pointer;white-space:nowrap}
.ruler button i{display:block;width:8px;height:1px;background:currentColor;flex:none;transition:width .25s ease}
.ruler button[data-on="1"]{color:var(--acc)}
.ruler button[data-on="1"] i{width:12px}
.ruler button:hover{color:var(--text)}
.ruler button:focus-visible{outline-offset:0;border-radius:3px}
.ruler button::before{content:"";position:absolute;left:0;right:0;top:-13px;bottom:-13px}
@media (max-width:1439px){
  :root{--rulw:14px}
  .ruler{padding-left:4px}
  .ruler .rline{left:8px}.ruler .rhead{left:5px}
  .ruler button span{display:none}
  .ruler button{padding-left:4px}
  .ruler button::before{right:-30px}
}
/* hero: the inside view says "approve to continue" */
.heroline{position:absolute;left:73%;top:30%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;max-width:none}
.heroline .gbtn{min-height:0;padding:8px 14px;font-size:12px;box-shadow:none;display:inline-block;white-space:nowrap}
.heroline .gbadge{font-size:10px}
.heropanel .pbtns button{pointer-events:none}
/* ---------- the pocket + the world's eyes: one sticky scene ---------- */
.pk{padding-top:10vh;padding-bottom:10vh}
.pkgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:80px;align-items:stretch}
.pkblock{min-height:88svh;display:flex;flex-direction:column;justify-content:center;padding:6vh 0}
.pkblock p + p,.pkblock ul + pre,.pkblock p + pre{margin-top:14px}
.pkblock .code{margin-top:16px}
.pkblock .codecap + p{margin-top:12px}
.proofs{list-style:none;display:grid;gap:9px;margin-top:16px;max-width:56ch}
.proofs li{font-size:15.5px;line-height:1.5;color:var(--body);padding-left:20px;position:relative}
.proofs li::before{content:"";position:absolute;left:0;top:.62em;width:9px;border-top:2px solid var(--self)}
.pk .caption{font-size:17px;color:var(--text);max-width:42ch}
.pkfig{position:relative;align-self:stretch}
.pksticky{position:sticky;top:calc(var(--bar) + 8vh)}
.scan{--sr:120px}
.scanin,.scanring,.scangrab{opacity:0;transition:opacity .35s ease}
.scan[data-on="1"] .scanin,.scan[data-on="1"] .scanring,.scan[data-on="1"] .scangrab{opacity:1}
.scan[data-on="0"] .scangrab{pointer-events:none}
.pkfig .cap{margin-top:12px}

/* ---------- orbit card ---------- */
.ologo{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--text)}
.ologo img,.ologo svg{width:20px;height:20px;flex:none}
.ologo svg path{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linejoin:round}
.ologo .wm{font:600 13px/1 var(--sans);letter-spacing:.02em}
#orbitname{font:400 12px/1.4 var(--mono);color:var(--dim)}
#orbittext{margin-top:10px;font-size:15.5px;max-width:none;color:var(--text)}
/* ===========================================================================
   lab19 additions: the proof clip, try it live, and the PITCH deck
   =========================================================================== */
.clipctl{margin-top:10px;max-width:none}
.clipctl button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:99px;font:500 12px/1 var(--mono);letter-spacing:.1em;
  color:var(--acc);background:none;border:1px solid color-mix(in srgb,var(--acc) 55%,transparent)}
.clipctl button:hover{background:color-mix(in srgb,var(--acc) 10%,transparent)}
.clipctl svg{width:12px;height:12px;fill:currentColor}
.clipwrap{position:absolute;inset:0;z-index:6;background:#000}
.clipwrap video{width:100%;height:100%;object-fit:cover;display:block}
.clipwrap button{position:absolute;bottom:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(242,235,230,.4);
  background:rgba(0,0,0,.6);color:#F2EBE6;font:600 13px/1 var(--mono)}
.clipwrap .clipplay{left:12px}.clipwrap .clipclose{right:12px}
.worldsnote{margin-top:10px;font:400 12px/1.5 var(--mono);color:var(--dim);max-width:none}
.gocard.off .worlds a{color:var(--acc)}
.gocard.off.open{border-style:solid}
.gocard.off.open .list{opacity:1;color:var(--body)}
.judgehint{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:45;font:400 11.5px/1.4 var(--mono);color:var(--dim);
  padding:6px 12px;border-radius:99px;border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:color-mix(in srgb,var(--ink) 80%,transparent);max-width:none}

/* ---------- the pitch deck ---------- */
body.pitch{padding-top:0;background:#000;touch-action:pan-y}
body.pitch main{z-index:1}
html:has(body.pitch){scroll-snap-type:y mandatory;background:#000}
.deck{position:relative}
.snap{height:100vh;scroll-snap-align:start}
.pstage{position:sticky;top:0;height:100vh;margin-bottom:-100vh;overflow:hidden;z-index:1}
.slide{position:absolute;inset:0;background:var(--ink);display:grid;align-content:center;justify-items:start;padding:10vh 7vw;visibility:hidden;will-change:clip-path}
.slide.on{visibility:visible}
.slide:nth-child(even){background:#180C15}
.bladefx{position:absolute;inset:0;z-index:30;pointer-events:none;background:linear-gradient(115deg,#B8862A,#FFD75E 55%,#B8862A);filter:drop-shadow(0 0 18px rgba(232,184,74,.55))}
.tc{position:fixed;top:22px;right:clamp(16px,3vw,40px);z-index:40;font:600 clamp(14px,1.3vw,18px)/1 var(--mono);letter-spacing:.06em;font-variant-numeric:tabular-nums;
  color:var(--text);display:flex;align-items:center;gap:10px;max-width:none}
.tc i{width:8px;height:8px;border-radius:50%;background:#E0412F;box-shadow:0 0 10px #E0412F}
.tc.done i{background:var(--ice);box-shadow:0 0 10px var(--ice)}
.pbrand{position:fixed;top:22px;left:clamp(16px,3vw,40px);z-index:40;display:flex;align-items:center;gap:10px;font:600 14px/1 var(--sans);letter-spacing:.34em;color:var(--text);max-width:none}
.pbrand svg{width:16px;height:21px;color:var(--gold)}
.pbrand use{fill:currentColor}
.prog{position:fixed;left:0;top:0;bottom:0;width:4px;z-index:40;background:rgba(242,235,230,.08)}
.prog i{position:absolute;inset:0;background:linear-gradient(180deg,#B8862A,#FFD75E 55%,#B8862A);transform-origin:50% 0;transform:scaleY(0)}
.timer{position:fixed;right:clamp(16px,3vw,40px);bottom:18px;z-index:40;display:flex;align-items:baseline;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--dim);max-width:none}
.timer b{font:600 22px/1 var(--mono);color:var(--text);font-variant-numeric:tabular-nums}
.big{font:700 clamp(48px,8.4vw,150px)/.95 var(--sans);letter-spacing:-.035em;color:var(--text);max-width:none}
.big .w{display:inline-block;white-space:nowrap}
.big .gl{display:inline-block}
.big.ice{color:var(--ice)}
.line{font:400 clamp(17px,1.5vw,22px)/1.45 var(--sans);color:var(--body);max-width:44ch;margin-top:24px}
.purl{font:500 clamp(14px,1.3vw,19px)/1 var(--mono);letter-spacing:.02em;color:var(--text);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  border-radius:99px;padding:12px 18px;display:inline-flex;gap:10px;align-items:center;margin-bottom:28px;max-width:none}
.purl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px 1px var(--gold)}
.note{display:none;margin-top:26px;padding:12px 14px;border-left:2px solid var(--ice);font:400 14px/1.5 var(--mono);color:#CFE6F2;max-width:60ch;background:rgba(0,0,0,.35)}
body[data-notes="1"] .note{display:block}
.slide .proof{margin-top:28px;font-size:17px}
/* 1 · six, then three */
.mini6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;width:min(920px,86vw);margin-bottom:34px}
.mf{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s ease;transform-origin:50% 100%}
.mf svg{width:100%;height:auto}
.mf figcaption{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.s-three .mf.dim{opacity:.35}
.s-three .mf:not(.dim) figcaption{color:var(--gold)}
.s-three .mf:not(.dim) .a{filter:drop-shadow(0 0 6px rgba(232,184,74,.6))}
/* 2–4 · the visor */
.pvisor{position:relative;width:min(1000px,86vw);aspect-ratio:10/5.6;justify-self:center;margin-bottom:22px}
.pvisor .pscr{position:absolute;inset:0;clip-path:url(#visorclip);overflow:hidden;background:#1C0E1A}
.pvisor .pscr canvas{position:absolute;inset:0;width:100%;height:100%}
.pvisor .prim{position:absolute;inset:0;pointer-events:none}
.pvisor .prim svg{width:100%;height:100%}
.pvisor .prim .a{stroke-width:2.2}
.pgui{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3}
.pgui .gbadge{font-size:13px;padding:8px 14px}
.pgui .gbtn{min-height:0;padding:12px 22px;font-size:clamp(15px,1.6vw,22px);display:inline-block;white-space:nowrap}
.pgui .gbtn small{font-size:11px}
.ppanel{position:absolute;left:50%;top:50%;width:376px;transform:translate(-50%,-50%) scale(var(--pps,1.4));z-index:3}
.ppanel .panel{width:376px}
.s-game .line,.s-ask .line,.s-panel .line,.s-allow .line{justify-self:center;text-align:center;margin-top:8px}
/* 5 · the word, cut */
.cut{position:relative;display:inline-block}
.cut .top,.cut .bot{display:block}
.cut .bot{position:absolute;left:0;top:0;clip-path:polygon(0 58%,100% 44%,100% 100%,0 100%);color:var(--gold)}
.cut .top{clip-path:polygon(0 0,100% 0,100% 44%,0 58%)}
.cut .cline{position:absolute;left:-4%;right:-4%;top:51%;height:3px;background:linear-gradient(90deg,#B8862A,#FFD75E 55%,#B8862A);transform:rotate(-4deg);box-shadow:0 0 16px rgba(232,184,74,.7)}
.verdictring{position:absolute;right:9vw;top:50%;width:min(300px,30vw);transform:translateY(-50%);z-index:20;pointer-events:none}
.verdictring .trk{fill:none;stroke:rgba(127,211,232,.16);stroke-width:4}
.verdictring .arc{fill:none;stroke:var(--ice);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:.4;transform:rotate(-90deg);transform-origin:50% 50%;filter:drop-shadow(0 0 12px rgba(127,211,232,.55))}
.verdictring p{text-align:center;margin-top:14px;font:500 12px/1 var(--mono);letter-spacing:.3em;color:var(--ice);max-width:none}
/* 6 · verified */
.pleft{display:inline-flex;align-items:baseline;gap:14px;margin-top:22px;font:500 12px/1 var(--mono);letter-spacing:.14em;color:#9EC3D2;
  border:1px solid rgba(143,211,232,.3);border-radius:10px;padding:12px 16px;background:rgba(20,34,48,.8);max-width:none}
.pleft b{font:600 22px/1 var(--mono);color:#EAF8FD;letter-spacing:0}
/* 7 · the mark */
.pmk{width:min(90px,16vw);height:auto;margin-top:34px;color:var(--gold)}
.pmk use{fill:currentColor;fill-opacity:1;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:0}
/* codas */
.porbit{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:4vw;align-items:center;width:min(1100px,86vw);margin-bottom:26px}
.porbit canvas{width:100%;height:min(46vh,420px);display:block}
.prails{list-style:none;display:grid;gap:10px}
.prails li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent);font:400 14px/1.4 var(--mono);color:var(--text)}
.prails li i{width:26px;height:0;border-top-width:2px;flex:none}
.prails li.self i{border-top-style:solid;border-color:var(--self)}
.prails li.mint i{border-top-style:dashed;border-color:var(--mintc)}
.prails li.ext i{border-top-style:dotted;border-color:var(--ext)}
.prails li em{margin-left:auto;font:500 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--dim);border:1px solid color-mix(in srgb,var(--text) 22%,transparent);border-radius:99px;padding:4px 8px;font-style:normal;white-space:nowrap}
.prails li.live em{color:var(--gold);border-color:var(--gold)}
.ppocket{width:min(460px,86vw);margin-bottom:26px;justify-self:center}
.s-rails{justify-items:center}
.s-rails .line{text-align:center}
.pdoor{position:relative;width:min(300px,46vw);aspect-ratio:742/982;justify-self:center;margin-bottom:22px}
.pdoor .light{position:absolute;left:50%;top:52%;width:180%;height:120%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,215,94,.55),rgba(232,184,74,.18) 45%,transparent 72%);animation:doorbreathe 4s ease-in-out infinite}
@keyframes doorbreathe{50%{opacity:.7;transform:translate(-50%,-50%) scale(1.06)}}
.pdoor svg{position:relative;width:100%;height:100%;color:var(--gold)}
.pdoor use{fill:#120A10;stroke:currentColor;stroke-width:1.8;vector-effect:non-scaling-stroke}
.s-close,.s-proof,.s-worlds{justify-items:center;text-align:center}
.s-close .line{text-align:center}
.pdoorbtn{margin-top:22px;max-width:none}
.doorbtn{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:12px;background:var(--gold);color:#1A1206;font:600 16px/1 var(--sans);text-decoration:none}
.doorbtn[aria-disabled="true"]{background:none;color:var(--dim);border:1px dashed color-mix(in srgb,var(--text) 30%,transparent);cursor:default}
.pmail{margin-top:22px;font:500 16px/1 var(--mono);max-width:none}
.s-close .three2{margin-top:22px;font:500 clamp(15px,1.5vw,20px)/1.4 var(--sans);color:var(--body);max-width:none}
.s-close .three2 span{color:var(--gold);margin:0 8px}
/* help */
.help{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7)}
.help .sheet{width:min(360px,90vw);padding:22px 24px;border-radius:16px;background:var(--ink2);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.help .mo{font-size:11px;letter-spacing:.2em;color:var(--gold);max-width:none}
.help ul{list-style:none;display:grid;gap:8px;margin-top:14px}
.help li{font:400 14px/1.4 var(--sans);color:var(--body)}
.help li b{display:inline-block;min-width:150px;font:500 12px/1.4 var(--mono);color:var(--text)}
.help .small{margin-top:14px;color:var(--dim);letter-spacing:.04em}
@media (max-width:819px){
  .slide{padding:12vh 20px 8vh}
  .big{font-size:clamp(46px,15vw,88px)}
  .mini6{grid-template-columns:repeat(3,1fr);gap:10px}
  .pvisor{width:92vw}
  .ppanel{--pps:.78}
  .pgui .gbtn{font-size:14px;padding:10px 14px}
  .verdictring{right:auto;left:50%;top:auto;bottom:9vh;transform:translateX(-50%);width:130px}
  .verdictring p{font-size:10px;margin-top:8px}
  .porbit{grid-template-columns:1fr;gap:12px}
  .porbit canvas{height:30vh}
  .prails li{font-size:12.5px;padding:7px 0}
  .pbrand b{display:none}
  .timer{bottom:12px}
  .judgehint{width:calc(100% - 32px);text-align:center}
}
@media (prefers-reduced-motion:reduce){.pdoor .light{animation:none}.mf{transition:none}}

/* text links: 44 px rows without moving the text */
.backline a,.qlinks a,.invite a,.pmail a,.qempty a,.jmore a{display:inline-block;padding-block:14px;margin-block:-14px}
.contact .mail a{display:inline-block;padding-block:10px;margin-block:-10px}

/* ===========================================================================
   lab20 · HOME, rebuilt. Law 0: both modes share one geometry. Every mode-only
   element sits in a .dual cell with its twin; the twin that is off is invisible,
   never removed, so nothing moves when the mode switches.
   =========================================================================== */
.dual{display:grid}
.dual > [data-only]{grid-area:1/1;min-width:0;margin:0}
.dual.in{display:inline-grid;vertical-align:baseline}
[data-only][data-off="1"]{visibility:hidden;pointer-events:none}
.menu.open li:nth-child(4){transition-delay:.26s}
/* the line: one SVG path, gold in USER and ice in DEV */
.skyline{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.skyline path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.skyline .lglow{stroke:var(--acc);stroke-width:14;opacity:.08}
.skyline .lsoft{stroke:var(--acc);stroke-width:5;opacity:.2}
.skyline .lcore{stroke:#F5CD6E;stroke-width:1.8;opacity:.95}
html[data-mode="dev"] .skyline .lcore{stroke:#B9EAF6;stroke-width:1.5}
html[data-mode="dev"] .skyline .lsoft{opacity:.12}
.floor{display:block}
.floor .horizon{position:absolute;left:0;right:0;top:36%;height:1px;background:rgba(143,216,238,.55);opacity:0;box-shadow:0 0 12px rgba(127,211,232,.6)}
html[data-mode="dev"] .floor .horizon{opacity:1}
html[data-mode="dev"] .floor .fog{display:none}

/* ---------- S1 · hero: less crowded, one baseline row for the chip and the PROOF ---------- */
.hero{grid-template-rows:1fr auto;align-items:end;row-gap:26px}
.hero .htxt{align-self:end}
.hero .hfig{align-self:end}
.hero .lines{margin-top:34px;gap:12px}
.hero .lines p{font-size:18px;max-width:38ch}
.hero .brand{margin-bottom:34px}
.hfoot{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:8px 56px;align-items:baseline}
.hfoot .urlchip{margin-top:0;justify-self:start}
.hfoot .proof{grid-column:auto;margin-top:0}
.hero .hset{position:absolute;inset:0;width:100%;height:100%;transform-origin:44% 44%;will-change:transform}
html:not(.rm) .hero .hset{animation:yaw 9s ease-in-out infinite alternate}
@keyframes yaw{from{transform:perspective(700px) rotateY(-6deg)}to{transform:perspective(700px) rotateY(6deg)}}
.hero .inside .tgs{will-change:transform}
html:not(.rm) .hero .inside .tgs{animation:drift 12s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0)}30%{transform:translate(-14px,6px)}60%{transform:translate(10px,-8px)}}
.heroline,.heropanel{transition:opacity .35s ease}
.heroline[data-on="0"],.heropanel[data-on="0"]{opacity:0}
.heropanel .pbtns button.press{transform:scale(.96);background:rgba(127,211,232,.4)}
.heropanel .pbtns button{transition:transform .15s ease,background .15s ease}
.hero .dv text.bpt.wo{letter-spacing:.14em}

/* ---------- S2 · the XR stage: one row of six, a detail panel, the fold ---------- */
.xr{position:relative}
.xr-pin{position:sticky;top:var(--bar);height:calc(100svh - var(--bar));max-width:1440px;margin:0 auto;padding:2.4vh var(--gut) 1.6vh;overflow:hidden}
.xrin{position:relative;will-change:transform}
.dtop{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 40px;align-items:end;min-height:112px;margin-bottom:18px;z-index:3}
.dhead{position:relative;grid-column:1;min-height:76px}
.dhead h2{margin:0;font-size:clamp(28px,3vw,44px);position:absolute;left:0;bottom:0;white-space:nowrap}
.xrchip{position:absolute;left:0;bottom:calc(100% - 20px);font:500 11px/1 var(--mono);letter-spacing:.2em;color:var(--acc);max-width:none;
  border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);border-radius:5px;padding:5px 8px;transition:opacity .2s ease}
.dhead .xrchip{bottom:auto;top:0}
.dsub{position:relative;grid-column:1;min-height:26px}
.dsub .dual,.dsub .dsubline{position:absolute;left:0;top:0}
.dsub p{font-size:16.5px;max-width:64ch;margin:0}
.dsubline{font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--rose)}
.hB{opacity:0;pointer-events:none;transition:opacity .2s ease}
.xr-pin[data-demo="1"] .hB{opacity:1;pointer-events:auto}
.xr-pin[data-demo="1"] .hA{opacity:0;pointer-events:none}
.steprail{grid-column:2;grid-row:1 / span 2;list-style:none;display:flex;gap:6px;align-self:end}
.steprail button{display:flex;align-items:center;gap:8px;min-height:44px;font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--dim);
  padding:0 12px;border-radius:99px;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);
  background:color-mix(in srgb,var(--ink) 70%,transparent);transition:color .25s,border-color .25s,background .25s;white-space:nowrap}
.steprail button b{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;border:1px solid currentColor;flex:none}
.steprail button:hover{color:var(--text)}
.steprail button[aria-current="step"]{color:var(--acc-ink);background:var(--acc);border-color:var(--acc)}
.steprail button[data-done="1"]{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 50%,transparent)}
.stage{position:relative;padding-top:var(--rowH,240px)}
.six{position:absolute;left:0;top:0;width:100%;height:0}
.six .fr{z-index:0}.six .fr[data-demo]{z-index:3}
.fr{--fw:420px;--fh:384px;margin:0;position:absolute;left:0;top:0;width:var(--fw);transform-origin:0 0;will-change:transform}
.fr .cell{position:relative;container-type:inline-size;width:var(--fw);height:var(--fh);border-radius:16px;overflow:hidden;
  background:color-mix(in srgb,var(--ink2) 88%,transparent);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);transition:border-color .2s ease}
.fr[data-sel="1"] .cell{border-color:color-mix(in srgb,var(--acc) 70%,transparent)}
.cellin{position:absolute;inset:0}
.flbl{position:absolute;left:0;top:var(--fh);transform-origin:0 0;will-change:transform,opacity;display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 7px;
  font:400 11px/1.3 var(--mono);letter-spacing:.08em;color:var(--dim);padding-top:9px;transition:opacity .25s ease}
.flbl b,.flbl .no,.flbl .tag{white-space:nowrap}
.flbl .no{color:var(--acc);font-weight:500}
.flbl b{color:var(--text);font-weight:600;font-family:var(--sans);font-size:13.5px;letter-spacing:.02em;text-transform:uppercase}
.flbl .tag{font-weight:500;letter-spacing:.1em;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);border-radius:5px;padding:2px 5px;font-size:10px}
.fsel{position:absolute;inset:0;width:var(--fw);height:var(--fh);border:0;background:none;border-radius:16px;cursor:pointer;z-index:3}
.fsel:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.fr[data-away="1"] .fsel,.xr-pin[data-demo="1"] .fsel{pointer-events:none;visibility:hidden}
/* the detail panel: one card for all six */
.detail{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;height:var(--detH,268px);margin-top:18px;
  border-radius:16px;padding:22px 24px;background:var(--tile);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);transition:opacity .2s ease}
.dtext{display:flex;flex-direction:column;gap:12px;min-width:0;transition:opacity .2s ease}
.dtext .dname{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font:400 11px/1.3 var(--mono);letter-spacing:.08em;color:var(--dim);max-width:none}
.dtext .dname b{color:var(--text);font:600 22px/1.1 var(--sans);letter-spacing:-.01em}
.dtext .dname .tag{font-weight:500;letter-spacing:.1em;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);border-radius:5px;padding:3px 6px;font-size:10.5px}
.dtext .dname .imm{color:var(--rose);font-size:11.5px}
.dtext .ddesc{font-size:17px;line-height:1.55;color:var(--text);max-width:44ch}
.dtext .dbl{margin-top:auto;font:400 12px/1.5 var(--mono);color:var(--dim);max-width:none;letter-spacing:.02em}
.dart{position:relative;overflow:visible}
.dart .fr{opacity:0;transition:opacity .2s ease;pointer-events:none}
.dart .fr[data-on="1"]{opacity:1}
.dart .flbl{display:none}
/* the two paragraphs and the drawing: a link opening into a doorway */
.xrtext{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:28px;align-items:center;margin-top:20px;transition:opacity .2s ease}
.xrtext .dual > div{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.xrtext p{font-size:15.5px;line-height:1.55;color:var(--body);max-width:none}
.doorlink{width:150px;height:96px}
.doorlink .dl{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-dasharray:3 5}
html:not(.rm) .doorlink .dl{animation:doorglow 3s ease-in-out infinite}
@keyframes doorglow{50%{opacity:.35}}
.doorlink .lk{font:500 9px var(--mono);fill:var(--acc);letter-spacing:.08em}
.demobg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(50% 48% at 50% 58%,rgba(138,42,98,.42),rgba(110,30,79,.14) 55%,transparent 78%)}
html[data-mode="dev"] .demobg{background:#0B1320}
html[data-mode="dev"] .demobg::after{content:"";position:absolute;left:0;right:0;top:57%;height:1px;background:rgba(143,216,238,.28)}
.demofoot{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;margin-top:10px;min-height:20px}
#demonote{font:400 12px/1.3 var(--mono);color:var(--mintc);max-width:none}
.combonote{font:400 11.5px/1.4 var(--mono);color:var(--dim);max-width:none;margin-left:auto}
.devlive{position:relative;z-index:3}
.demoline{padding:8vh var(--gut) 10vh;max-width:1440px;margin:0 auto}
.demoline p{font-size:20px;max-width:56ch;color:var(--text)}
.states{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.states li{font:500 12px/1 var(--mono);color:var(--dim);padding:8px 11px;border-radius:7px;border:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.states li[data-on="1"]{color:var(--acc-ink);background:var(--acc);border-color:var(--acc)}
.demo-m{display:none}
/* the round-2 message inside a frame */
.rmsg{position:absolute;left:50%;top:8%;transform:translateX(-50%);z-index:6;white-space:nowrap;opacity:0;transition:opacity .3s ease;pointer-events:none}
.rmsg[data-show="1"]{opacity:1}
.fr-lp .rmsg{top:26%}
/* (d) glasses, (e) goggles, (f) tablet */
.fr-gl .room,.fr-tb .room{position:absolute;inset:0}
.fr-gl .room canvas,.fr-tb .room canvas{position:absolute;inset:0;width:100%;height:100%}
.fr-gl .scr{left:8%;right:8%;top:24%;height:44%;clip-path:url(#glclip)}
.fr-gl .glart{position:absolute;left:4%;right:4%;top:18%;height:56%;pointer-events:none}
.fr-gl .glart svg{width:100%;height:100%}
.fr-gg .scr{left:12%;right:12%;top:16%;height:64%;border-radius:18px;background:#07040A;display:flex;gap:2.4cqw;padding:2.4cqw}
.fr-gg .scr .eye{position:relative;flex:1;border-radius:12px;overflow:hidden;background:#000}
.fr-gg .scr .eye canvas{position:absolute;inset:0;width:100%;height:100%}
.fr-gg .ggart{position:absolute;left:8%;right:8%;top:10%;height:76%;pointer-events:none}
.fr-gg .ggart svg{width:100%;height:100%}
.fr-tb .tab{position:absolute;left:14%;right:14%;top:12%;bottom:12%;border-radius:clamp(12px,4cqw,20px);border:2px solid var(--lc);background:#050305;
  transform:rotate(-7deg);padding:2.4cqw;box-shadow:0 30px 50px -20px rgba(0,0,0,.9)}
.fr-tb .tab .scr{inset:2.4cqw;border-radius:clamp(6px,2cqw,12px)}
.fr-tb .gyro{position:absolute;right:6%;bottom:8%;z-index:5;display:flex;align-items:center;gap:4px;font:400 9px/1 var(--mono);color:var(--acc);
  letter-spacing:.08em;padding:3px 6px;border-radius:99px;background:rgba(0,0,0,.5)}
.fr-tb .gyro svg{width:12px;height:12px}
.fr-tb .gyro path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.fr-tb .tilt{position:absolute;left:3%;top:30%;width:8%;height:40%;pointer-events:none}
.fr-tb .tilt svg{width:100%;height:100%}
/* hit areas: the visible button may be small, the box you press is not */
.pbtns button,.gbtn{position:relative}
.pbtns button::before{content:"";position:absolute;left:-3px;right:-3px;top:calc(var(--hit,0px) * -1);bottom:calc(var(--hit,0px) * -1)}
.payslot .pbtns button{--hit:calc((46px / var(--js,.86) - 46px) / 2)}
.gbtn::before{content:"";position:absolute;left:0;right:0;top:calc(var(--ghit,0px) * -1);bottom:calc(var(--ghit,0px) * -1)}
.gbtn{min-height:46px}
.pbtns button{min-height:46px}

/* ---------- S3 · BEFORE / NOW ---------- */
.bn{position:relative;height:320vh}
.bn-pin{position:sticky;top:var(--bar);height:calc(100svh - var(--bar));overflow:hidden;display:flex;align-items:center}
.bngrid{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:80px;align-items:center}
.bntxt{display:grid}
.beat{grid-area:1/1;transition:none;will-change:opacity,transform}
.beat h2{max-width:14ch}
.beat .dual{margin-top:6px}
.bntag{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.24em;color:var(--rose);margin-bottom:18px;max-width:none}
.bntag::before{content:"";width:18px;height:1px;background:currentColor}
.bnfig{position:relative;width:100%;max-width:560px;justify-self:end}
.bnfig svg{width:100%;height:auto}
.bnfig .bntag2{position:absolute;left:14px;top:12px;font:500 11px/1 var(--mono);letter-spacing:.24em;color:var(--acc);
  border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);border-radius:5px;padding:5px 8px;background:color-mix(in srgb,var(--ink) 70%,transparent)}
.bnfig .frame{fill:color-mix(in srgb,var(--ink2) 80%,transparent);stroke:color-mix(in srgb,var(--text) 12%,transparent);stroke-width:1}
.bnfig .btc{fill:#F7931A}
.bnfig .btcs{fill:none;stroke:#F7931A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bnfig .btct{font:700 12px var(--sans);fill:#1A1206}
.bnfig .chk{fill:none;stroke:#7FD3E8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(127,211,232,.7))}
.bnfig .panel2{fill:rgba(20,34,48,.92);stroke:rgba(143,211,232,.45);stroke-width:1}
.bnfig .pl{stroke:rgba(158,195,210,.7);stroke-width:1.6;stroke-linecap:round}
.bnfig .plb{stroke:rgba(127,211,232,.9);stroke-width:1.6;stroke-linecap:round}
.bnfig .flow{fill:none;stroke:#F7931A;stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round;opacity:0}
.bnfig .skin{fill:color-mix(in srgb,var(--rose) 22%,var(--ink2));stroke:var(--lc);stroke-width:1.5}
.bnfig .frz{fill:none;stroke:color-mix(in srgb,var(--text) 45%,transparent);stroke-width:1.4;stroke-linecap:round}
.bnfig .mk use{fill:var(--acc)}
.bnfig .mk{transition:opacity .2s ease}
.bnfig .drop{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
html:not(.rm) .bnfig[data-now="1"] .drop{animation:dropin 6s ease-in-out infinite}
html:not(.rm) .bnfig[data-now="1"] .drop.d2{animation-delay:1.4s}
html:not(.rm) .bnfig[data-now="1"] .drop.d3{animation-delay:2.8s}
@keyframes dropin{0%{opacity:0;transform:translateY(-46px) scale(.7)}10%{opacity:1;transform:translateY(-46px) scale(1)}24%{opacity:1;transform:translateY(0) scale(1)}70%{opacity:1;transform:translateY(0) scale(1)}84%,100%{opacity:0;transform:translateY(0) scale(1)}}
html.rm .bnfig[data-now="1"] .drop{opacity:1}
html:not(.rm) .bnfig[data-now="1"] .flow{opacity:1;animation:flowon 1.6s linear infinite}
html.rm .bnfig[data-now="1"] .flow{opacity:1}
@keyframes flowon{to{stroke-dashoffset:-18}}

/* ---------- the threshold and THE ENTRY ---------- */
.th{height:calc(190vh + var(--drift,0px))}
.entry{position:relative;height:150vh}
.entry-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.entryline{text-align:center;padding:0 var(--gut);max-width:none}
.entryline p{font:500 clamp(22px,2.6vw,36px)/1.25 var(--sans);letter-spacing:-.02em;color:var(--text);max-width:24ch;margin:0 auto;text-wrap:balance}
html[data-mode="dev"] .entryline p{font-family:var(--mono);font-weight:500;letter-spacing:0;font-size:clamp(17px,1.8vw,24px);max-width:30ch}
.entryline{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .5s ease}
.entry[data-on="1"] .entryline{opacity:1;transform:none}

/* ---------- S8 · two sides: the bar itself, larger ---------- */
.sides{padding:14vh var(--gut) 12vh;text-align:center}
.sides .wrap{max-width:1100px}
.bigbar{position:relative;display:grid;grid-template-columns:1fr 92px 1fr;height:118px;margin-top:30px;border-radius:14px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);background:color-mix(in srgb,var(--ink) 90%,transparent)}
.bhalf{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 var(--gut);transition:opacity .35s ease}
.bhalf.user{align-items:flex-start;text-align:left;background:#E8B84A;color:#1A1206}
.bhalf.dev{align-items:flex-end;text-align:right;background:#7FD3E8;color:#04121C}
.bhalf b{font:600 33px/1 var(--sans);letter-spacing:.14em}
.bhalf.dev b{font-family:var(--mono);font-weight:500;letter-spacing:.1em}
.bhalf small{font:400 15px/1 var(--mono);letter-spacing:.08em;opacity:.9}
html[data-mode="user"] .bhalf.dev,html[data-mode="dev"] .bhalf.user{opacity:.42}
.bigbar .mkbtn{position:relative;left:auto;top:auto;margin:0;width:100%;height:100%;border-radius:0;border:0;border-left:1px solid color-mix(in srgb,var(--acc) 30%,transparent);border-right:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
.bigbar .mkbtn svg{width:40px;height:40px}
.sidesline{margin:22px auto 0;font:400 14px/1.5 var(--mono);color:var(--body);max-width:none}
.halves{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.half{padding:26px 22px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--text) 12%,transparent);transition:opacity .35s ease}
.half.user{background:linear-gradient(180deg,rgba(232,184,74,.14),rgba(232,184,74,.04));color:#F2EBE6}
.half.dev{background:linear-gradient(180deg,rgba(127,211,232,.12),rgba(127,211,232,.03));color:#E4EEF3}
.half p{max-width:34ch;margin:0 auto;font-size:17px;color:inherit}
.half .hlbl{font:600 13px/1 var(--mono);letter-spacing:.2em}
.half.user .hlbl{color:#E8B84A}.half.dev .hlbl{color:#7FD3E8}
.sidebtn{min-height:48px;border-radius:12px;padding:0 22px;border:1px solid transparent;font:600 15px/1 var(--sans);cursor:pointer;transition:transform .15s ease}
.half.user .sidebtn{background:#E8B84A;color:#1A1206}
.half.dev .sidebtn{background:#7FD3E8;color:#04121C}
.sidebtn:active{transform:scale(.97)}
.sidebtn[aria-pressed="true"]{background:none!important;border-color:currentColor;color:inherit}
/* money moves both ways */
.bothways{margin-top:40px;border-radius:16px;border:1px solid color-mix(in srgb,var(--ext) 44%,transparent);background:color-mix(in srgb,var(--ext) 6%,var(--ink));padding:22px 24px 24px;text-align:left}
.bwhead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:18px}
.bwhead h3{font:600 20px/1.1 var(--sans);letter-spacing:-.01em;color:var(--text)}
.bwtag{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ext);border:1px solid color-mix(in srgb,var(--ext) 50%,transparent);border-radius:99px;padding:5px 9px}
.bwgrid{display:grid;grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);gap:24px;align-items:center}
.bwcol p{font-size:15.5px;line-height:1.55;color:var(--body);max-width:none}
.bwcol .bwnote{margin-top:10px;font:400 11.5px/1.4 var(--mono);letter-spacing:.04em;color:var(--dim)}
.bwcol.user .bwnote{color:#E8B84A}.bwcol.dev .bwnote{color:#7FD3E8}
.bwart svg{width:100%;height:auto}
.bwart .bx{fill:none;stroke:var(--lc);stroke-width:1.5}
.bwart .lbl{font:500 9.5px var(--mono);fill:var(--dim);letter-spacing:.1em}
.bwart .arr{fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bwart .arr.next{stroke:var(--ext);stroke-dasharray:4 5}
.bwart .arrt{font:500 9px var(--mono);letter-spacing:.08em;fill:var(--acc)}
.bwart .arrt.next{fill:var(--ext)}
.sidesline.close{margin-top:28px;color:var(--text);font-size:15px}

/* ---------- S9 · go further ---------- */
.gocards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px}
.gocard{display:flex;flex-direction:column;gap:8px;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:16px;
  padding:18px 22px 22px;background:var(--tile);text-decoration:none;color:var(--text);min-height:250px}
a.gocard:hover{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 9%,var(--tile))}
.gocard p{font-size:15px;max-width:none}
.gocard .arw{margin-top:auto;font:500 11.5px/1 var(--mono);letter-spacing:.14em;color:var(--acc)}
.gart{height:110px;margin-bottom:6px;display:flex;align-items:center;justify-content:center}
.gart svg{width:100%;height:100%}
.gart .jl{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.gart .stops circle{fill:var(--ink2);stroke:var(--acc);stroke-width:1.6;transition:fill .3s ease}
.gart .stops circle[data-on="1"]{fill:var(--acc)}
.gart .dl{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-dasharray:3 5;animation:doorglow 3s ease-in-out infinite}
.gwall{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;perspective:600px}
.gwall i{display:block;height:44px;border-radius:6px;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);
  background:color-mix(in srgb,var(--acc) 8%,transparent);animation:gflip 6s ease-in-out infinite;transform-style:preserve-3d}
.gwall i:nth-child(2){animation-delay:.7s}.gwall i:nth-child(3){animation-delay:1.4s}.gwall i:nth-child(4){animation-delay:2.1s}
.gwall i:nth-child(5){animation-delay:2.8s}.gwall i:nth-child(6){animation-delay:3.5s}.gwall i:nth-child(7){animation-delay:4.2s}.gwall i:nth-child(8){animation-delay:4.9s}
@keyframes gflip{0%,70%,100%{transform:rotateX(0)}80%,90%{transform:rotateX(180deg);background:color-mix(in srgb,var(--acc) 30%,transparent)}}

/* ---------- S10 · the end block, then contact ---------- */
.end{padding:12vh var(--gut) 6vh;gap:0}
.end .mk{margin-bottom:16px}
.end .wm{margin-bottom:22px}
.end .big1{font:600 clamp(34px,4.6vw,64px)/1.05 var(--sans);letter-spacing:-.04em;color:var(--text);max-width:none;text-wrap:balance}
.end .three{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;margin-top:26px}
.end .three li{font:500 clamp(17px,1.6vw,22px)/1.3 var(--sans);color:var(--body);letter-spacing:-.01em}
.end .three li::before{content:"·";margin-right:34px;color:var(--acc)}
.end .three li:first-child::before{content:none;margin:0}
.end .keep{margin-top:26px;font:400 15px/1.4 var(--mono);color:var(--dim)}
.contact{position:relative;padding:6vh var(--gut) 4vh;display:flex;flex-direction:column;align-items:center;text-align:center}
.contact .mk{width:34px;height:44px;color:var(--acc);margin-bottom:14px}
.contact .mk use{fill:currentColor}
.contact .mail{font:500 clamp(22px,3vw,40px)/1.1 var(--mono);letter-spacing:-.01em;max-width:none}
.contact .mail a{color:var(--text);text-decoration-color:color-mix(in srgb,var(--acc) 60%,transparent)}
.contact .why{margin-top:12px;font-size:16px;color:var(--body);max-width:none}
.copybtn{margin-top:18px;min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 18px;border-radius:99px;font:500 12px/1 var(--mono);letter-spacing:.1em;
  color:var(--acc);background:none;border:1px solid color-mix(in srgb,var(--acc) 55%,transparent)}
.copybtn:hover{background:color-mix(in srgb,var(--acc) 10%,transparent)}
.copybtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.copybtn[data-done="1"]{color:var(--acc-ink);background:var(--acc);border-color:var(--acc)}
.credits{padding:5vh var(--gut) 3vh}
.cr .prism{width:19px;height:19px}
.foot{padding:2vh var(--gut) 12vh;text-align:center}
.foot .motto{max-width:none;font-family:var(--mono);font-size:12.5px;color:var(--acc)}

/* ---------- WORLDS page ---------- */
.whead{padding:12vh var(--gut) 6vh;max-width:1240px;margin:0 auto}
.whead h1{font-size:clamp(44px,5.4vw,80px)}
.whead .lead{margin-top:22px}
.wcards{padding:0 var(--gut) 6vh;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.wcard{border-radius:18px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);background:var(--tile);overflow:hidden;display:flex;flex-direction:column}
.wcard .wart{position:relative;aspect-ratio:5/3;background:color-mix(in srgb,var(--ink2) 88%,transparent);border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
.wcard .wart svg{position:absolute;inset:0;width:100%;height:100%}
.wcard .wbody{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.wcard h2{font-size:clamp(26px,2.6vw,36px);margin:0}
.wcard .wkind{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--acc);max-width:none}
.wcard p{font-size:16px;max-width:none}
.wtags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.wtags li{font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--dim);border:1px solid color-mix(in srgb,var(--text) 22%,transparent);border-radius:99px;padding:6px 10px}
.wgo{margin-top:auto;padding-top:14px}
.wbtn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:12px;background:var(--acc);color:var(--acc-ink);font:600 15px/1 var(--sans);text-decoration:none}
.wbtn[aria-disabled="true"]{background:none;color:var(--dim);border:1px dashed color-mix(in srgb,var(--text) 30%,transparent);cursor:default}
.wtail{padding:2vh var(--gut) 14vh;max-width:1240px;margin:0 auto}
.wtail .list{font:400 14px/1.6 var(--mono);color:var(--dim);max-width:none;opacity:.7;padding:16px 18px;border:1px dashed color-mix(in srgb,var(--text) 22%,transparent);border-radius:12px}
.wtail .list[data-open="1"]{opacity:1;color:var(--body);border-style:solid}
.wtail .wnote{margin-top:16px;font:400 13px/1.5 var(--mono);color:var(--dim);max-width:none}
.wart .hall{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wart .hallf{fill:color-mix(in srgb,var(--acc) 10%,transparent)}
.wart .lite{fill:none;stroke:var(--acc);stroke-width:1.2;opacity:.5;stroke-dasharray:3 6}
html:not(.rm) .wart .lite{animation:doorglow 4s ease-in-out infinite}
.wart .ball{fill:#F7931A}
html:not(.rm) .wart .ball{animation:ballarc 2.4s cubic-bezier(.3,0,.6,1) infinite;transform-box:fill-box;transform-origin:50% 50%;offset-path:path('M0 0 C 60 -150 200 -150 260 0');offset-rotate:0deg}
@keyframes ballarc{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
.wart .glove{fill:none;stroke:var(--lc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wart .fig{fill:none;stroke:var(--lc);stroke-width:1.5;stroke-linecap:round}

@media (max-width:1279px){
  .flbl b{font-size:12px}
}
@media (max-width:1100px){
  .steprail li span{display:none}
  .detail{grid-template-columns:minmax(0,1fr) 240px}
  .gocards{grid-template-columns:1fr 1fr}
  .bwgrid{grid-template-columns:1fr;gap:16px}
  .bwart{max-width:260px;margin:0 auto}
}
@media (max-width:1023px){
  .hero{grid-template-columns:1fr;gap:34px}
  .hfoot{grid-template-columns:1fr;gap:16px}
  .steprail li span{display:inline}
  .combonote{margin-left:0}
  .xr{height:auto!important}
  .xr-pin{position:static;height:auto;overflow:visible;padding:10vh var(--gut) 4vh}
  .xrin{transform:none!important}
  .dtop{grid-template-columns:1fr;min-height:0;display:block}
  .dhead{min-height:0;padding-top:34px}.dhead h2{position:static;white-space:normal}.dsub{min-height:0}.dsub .dual{position:static;margin-top:8px}
  .dhead .hB,.dsub .hB{display:none}
  .steprail{display:none}
  .stage{padding-top:0!important}
  .six{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:26px 14px;margin-top:30px}
  .fr{position:relative;width:auto;--fw:100%;--fh:auto;transform:none!important;opacity:1!important}
  .fr .cell{width:100%;height:auto;aspect-ratio:1/.9;container-type:inline-size}
  .flbl{position:static;padding-top:9px;transform:none!important;white-space:normal;flex-wrap:wrap}
  .fsel{width:100%;height:100%}
  .fr .scrui{display:none}
  .detail{grid-template-columns:1fr;height:auto;margin-top:26px;gap:14px}
  .dart{height:0;overflow:hidden}
  .xrtext{grid-template-columns:1fr;margin-top:26px;opacity:1!important}
  .xrtext .dual > div{grid-template-columns:1fr;gap:12px}
  .doorlink{margin:0 auto}
  .demobg{display:none}
  .demo-m{display:block;margin-top:56px}
  .demo-m .mhead h2{font-size:clamp(28px,3vw,44px)}
  .demo-m .mhead p{margin-top:8px;font-size:16.5px}
  .demo-m .dsubline{margin-top:8px}
  .demo-m .steprail{display:flex;flex-wrap:wrap;margin-top:14px}
  .demo-m .mframes{display:grid;gap:26px;margin-top:20px}
  .demo-m .fr{position:relative;--fw:100%;--fh:auto}
  .demo-m .fr .scrui{display:block}
  .demo-m .hB,.demofoot.hB,.devlive.hB{opacity:1;pointer-events:auto}
  .bn{height:300vh}
  .bngrid{grid-template-columns:1fr;row-gap:22px;align-content:center}
  .bnfig{order:-1;max-width:min(520px,100%);justify-self:center}
  .beat h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:12px}
  .pkgrid{grid-template-columns:1fr;gap:30px}
  .pkblock{min-height:0;padding:4vh 0}
  .pksticky{position:static}
  .halves{grid-template-columns:1fr}
  .gocards{grid-template-columns:1fr}
  .wcards{grid-template-columns:1fr}
}
@media (max-width:819px){
  .ruler button{pointer-events:none}
  .thcap{text-wrap:balance;padding:0 24px}
  .six{grid-template-columns:1fr 1fr;gap:20px 10px}
  .flbl{gap:3px 6px;font-size:10px}
  .flbl b{font-size:11.5px}
  .xr-pin{padding:8vh 20px 4vh 40px}
  .demoline{padding:6vh 20px 8vh 40px}
  .bngrid{padding:0 20px 0 40px}
  .bnfig .bntag2{left:8px;top:8px}
  .bigbar{grid-template-columns:1fr 64px 1fr;height:88px;margin-top:22px}
  .bhalf{padding:0 14px;align-items:center!important;text-align:center!important}
  .bhalf b{font-size:22px}.bhalf small{display:none}
  .bigbar .mkbtn svg{width:30px;height:30px}
  .half{padding:22px 16px 24px}
  .bothways{padding:18px 16px 20px}
  .sides{padding:10vh 20px 10vh 40px}
  .end .three{flex-direction:column;gap:8px}
  .end .three li::before{content:none;margin:0}
  .whead,.wcards,.wtail{padding-left:40px;padding-right:20px}
  .entryline p{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .gwall i,.gart .dl,.doorlink .dl{animation:none}
  .hB,.xrtext,.detail,.dtext,.dart .fr,.flbl,.scanin,.scanring,.scangrab,.heroline,.heropanel,.entryline,.bnfig .mk{transition:none}
}

/* ---------- pitch: the allowance page and the what's-next coda ---------- */
.ppage{width:min(420px,86vw);justify-self:center;margin-bottom:22px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#FBF7F4,#EFE8E3);color:#1A1216;font-family:var(--mono);box-shadow:0 34px 70px -28px rgba(0,0,0,.8)}
.ppage .pbar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#E3DAD4;font-size:11.5px;color:#54464D;border-bottom:1px solid rgba(26,18,22,.1)}
.ppage .pbar i{width:8px;height:8px;border-radius:50%;background:#C4B3AB}
.ppage .pbody{padding:18px 20px 20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.ppage .phead{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.14em;color:#65535B;max-width:none}
.ppage .phead b{font-size:14px;letter-spacing:.02em;color:#1A1216}
.ppage .pdial{position:relative;width:180px;height:180px}
.ppage .pdial svg{width:100%;height:100%}
.ppage .trk{fill:none;stroke:rgba(26,18,22,.12);stroke-width:10;stroke-linecap:round}
.ppage .val{fill:none;stroke:#1A1216;stroke-width:10;stroke-linecap:round}
.ppage .needle{stroke:#B7503A;stroke-width:3;stroke-linecap:round}
.ppage .hub{fill:#1A1216}
.ppage .pnum{position:absolute;left:0;right:0;top:56%;text-align:center;font:700 32px/1 var(--sans);color:#1A1216;max-width:none}
.ppage .pnum small{display:block;font:500 9.5px/1.4 var(--mono);letter-spacing:.2em;color:#65535B}
.ppage .pset{min-height:40px;display:inline-flex;align-items:center;padding:0 22px;border-radius:10px;background:#1A1216;color:#FBF7F4;font:600 12px/1 var(--mono);letter-spacing:.16em;max-width:none}
.pnext{width:min(640px,86vw);margin-bottom:24px}
.pnext h2{font:500 12px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ext);margin-bottom:16px}
.pnext li{font-size:clamp(15px,1.4vw,19px)}
@media (max-width:819px){.ppage{width:min(320px,86vw)}.ppage .pdial{width:140px;height:140px}.ppage .pnum{font-size:26px}}

/* ---------- journey · 7 · take it out ---------- */
.dual.h{margin-bottom:18px}
.outpick{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
#i-out .istage{align-self:stretch;min-height:150px;justify-content:center}
.pasted{font:400 12px/1.5 var(--mono);color:#54464D;padding:10px 12px;border:1px dashed rgba(26,18,22,.35);border-radius:10px;word-break:break-all;text-align:left;max-width:none;width:100%}
.pasted b{display:block;font-size:10px;letter-spacing:.16em;color:#65535B;margin-bottom:4px;font-weight:500}
.stamp{font:600 11px/1 var(--mono);letter-spacing:.18em;color:#8C3A24;border:1.5px solid #B7503A;border-radius:6px;padding:7px 10px;opacity:0;transform:rotate(-4deg) scale(1.2);transition:opacity .3s ease,transform .3s ease;max-width:none}
.stamp[data-on="1"]{opacity:1;transform:rotate(-4deg) scale(1)}
.token{font:400 12px/1.5 var(--mono);color:#1A1216;padding:10px 12px;border:1px solid rgba(26,18,22,.2);border-radius:10px;word-break:break-all;background:#fff;text-align:left;max-width:none;width:100%;min-height:64px}
.token b{display:block;font-size:10px;letter-spacing:.16em;color:#65535B;margin-bottom:4px;font-weight:500}
.jmore{margin-top:16px;font:400 13px/1.5 var(--mono);color:var(--dim);max-width:none}
.qchips [data-only][data-off="1"]{display:none}
@media (prefers-reduced-motion:reduce){.stamp{transition:none}}

.wart .mkuse{fill:var(--acc)}
.ppage .pnum{top:60%;font-size:28px}

/* ---------- the PWA point: install lines, the home-screen beat ---------- */
.safeline{font:400 12px/1.5 var(--mono);color:var(--dim);max-width:none;margin-top:10px}
.pkblock .safeline{margin-top:10px}
.tback .safeline{margin-top:10px}
.wallet .safeline{color:#65535B;letter-spacing:0}
.irow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:none}
.homescene{width:min(360px,100%)}
.homescene svg{width:100%;height:auto}
.wallet .homescene .s{stroke:#54464D}.wallet .homescene .t{stroke:rgba(26,18,22,.35)}.wallet .homescene .a{stroke:#1A1216;stroke-width:1.6}
.homescene .lbl{font:500 8px var(--mono);fill:#65535B;letter-spacing:.14em}
.hsicon{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.hsicon rect{fill:#1A1216}
.hsicon use{fill:#FBF7F4}
html:not(.rm) .homed .hsicon{animation:iconland .7s cubic-bezier(.2,.8,.2,1) forwards}
html:not(.rm) .homed .hsicon.i2{animation-delay:.6s}
html:not(.rm) .homed .hsicon.i3{animation-delay:1.2s}
@keyframes iconland{0%{opacity:0;transform:translateY(-22px) scale(1.8)}60%{opacity:1;transform:translateY(0) scale(1.15)}100%{opacity:1;transform:none}}
html.rm .homed .hsicon{opacity:1}

/* ---------- the judges page: a calm single column, one A4 page in print ---------- */
body.judges{padding-top:0}
.jd{max-width:68ch;margin:0 auto;padding:10vh 20px 14vh;position:relative;z-index:2}
.jd .kicker{font:500 11px/1 var(--mono);letter-spacing:.24em;color:var(--acc);max-width:none;margin-bottom:26px}
.jd h1{font-size:clamp(30px,5vw,48px);margin-bottom:40px}
.jd section{margin-top:34px}
.jd h2{font:500 11.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.jd p{font-size:17px;line-height:1.6;max-width:none}
.jd p + p{margin-top:10px}
.jd .claim{margin-top:16px;font:500 19px/1.4 var(--sans);color:var(--text)}
.jtag{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);border-radius:99px;padding:3px 8px;white-space:nowrap;vertical-align:middle}
.jnext{list-style:none;display:grid;gap:10px;margin-bottom:14px}
.jnext li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:17px;line-height:1.5;color:var(--body)}
.jd a{display:inline-block;padding-block:12px;margin-block:-12px}
@media print{
  @page{size:A4;margin:16mm}
  html,body.judges{background:#fff;color:#000}
  .grounds{display:none}
  .jd{max-width:none;padding:0;color:#000}
  .jd *{color:#000!important;border-color:#000!important}
  .jd .kicker{margin-bottom:14px}
  .jd h1{font-size:22pt;margin-bottom:18pt}
  .jd section{margin-top:14pt}
  .jd p,.jnext li{font-size:10.5pt;line-height:1.4}
  .jd .claim{font-size:12pt}
  .jd a{text-decoration:none;padding:0;margin:0}
  .jd a[href]::after{content:" (" attr(href) ")";font-family:var(--mono);font-size:9pt}
}

/* ===========================================================================
   lab21 · balance, background, the amended law 0, and every rebuilt section
   =========================================================================== */
:root{--wrapw:1280px;--g-ember:linear-gradient(180deg,#1C0B18 0%,#24101F 50%,#1E0C1A 100%)}
html[data-mode="dev"]{--g-ember:linear-gradient(180deg,#0A1019 0%,#0E1622 50%,#0B121C 100%)}
.wrap{max-width:var(--wrapw)}
p{max-width:60ch}
.hero,.xr-pin,.demoline,.bngrid{max-width:var(--wrapw)}
/* law 0, amended: the twin that is off keeps the band; the one that shows is centred in it */
.dual{align-items:center}
.dual > [data-only]{align-self:center}
.dual.in{align-items:baseline}
.dual.in > [data-only]{align-self:auto}
/* vertical rhythm ×1.6 */
.scene{padding:22vh var(--gut)}
.pk{padding-top:16vh;padding-bottom:16vh}
.demoline{padding:13vh var(--gut) 16vh}
.sides{padding:22vh 0 19vh}
.end{padding:19vh var(--gut) 10vh}
.contact{padding:10vh var(--gut) 6vh}
.credits{padding:8vh var(--gut) 5vh}
.foot{padding:3vh var(--gut) 19vh}
.xrdef{padding:22vh var(--gut) 16vh}
/* the background layers live on the sky canvas; the line's bloom is drawn there too */

/* ---------- hero: centred band, 3 px seam ---------- */
.hero{grid-template-rows:1fr auto;align-items:center;row-gap:34px;min-height:calc(100svh - var(--bar))}
.hero .htxt,.hero .hfig{align-self:center}
.hero .urlchip{margin-top:30px}
.hfoot{grid-template-columns:1fr;justify-items:start}
.bladeseam{clip-path:polygon(-3px 100%,calc(24% - 3px) 0,24% 0,0 100%);
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--acc) 90%,transparent)) drop-shadow(0 0 14px color-mix(in srgb,var(--acc) 50%,transparent))}
html:not(.rm) .hero .hset{animation:yawL 8s ease-in-out infinite}
@keyframes yawL{0%,100%{transform:perspective(700px) rotateY(0deg)}50%{transform:perspective(700px) rotateY(-6deg)}}
html:not(.rm) .hero .outside > svg:first-child{animation:roomlax 8s ease-in-out infinite}
@keyframes roomlax{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
.hscene .hbg{fill:#23101F}.hscene .hglow{fill:rgba(138,42,98,.34)}.hscene .hhz{stroke:rgba(233,164,202,.6);stroke-width:1.4;fill:none}
.hscene .hgrid path{fill:none;stroke:rgba(178,58,128,.45);stroke-width:1}
.hscene .htg{fill:none;stroke:rgba(240,176,212,.9);stroke-width:2}
.hscene .hshot{stroke:rgba(247,147,26,.5);stroke-width:1.6;fill:none}.hscene .hsat{fill:#F7931A}
.hscene .bams circle{fill:none;stroke:#F7931A;stroke-width:2}
.hscene .bams circle.pink{stroke:#F4A8D0}
html[data-mode="dev"] .hscene .hbg{fill:#080C18}html[data-mode="dev"] .hscene .hglow{fill:rgba(30,64,104,.4)}
html[data-mode="dev"] .hscene .hhz{stroke:rgba(143,216,238,.6)}html[data-mode="dev"] .hscene .hgrid path{stroke:rgba(62,110,142,.6)}
html[data-mode="dev"] .hscene .htg{stroke:rgba(160,225,245,.95)}
html[data-mode="dev"] .hscene .bams circle{stroke:#7FD3E8}html[data-mode="dev"] .hscene .bams circle.pink{stroke:#BDEBF8}
.hpcap{position:absolute;left:73%;top:88%;transform:translateX(-50%);font:400 10.5px/1 var(--mono);letter-spacing:.14em;color:#9FC8D8;white-space:nowrap;max-width:none;opacity:0;transition:opacity .3s ease}
.hpcap[data-on="1"]{opacity:1}
.paychip{position:absolute;left:0;top:0;z-index:5;font:500 12px/1 var(--mono);color:#04121C;background:var(--ice);border-radius:6px;padding:6px 9px;
  box-shadow:0 0 14px rgba(127,211,232,.6);opacity:0;pointer-events:none;will-change:transform}
.paychip[data-on="1"]{opacity:1}

/* ---------- menu: the header mark turns and grows; the sheet hangs from it ---------- */
.mkbtn{transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .32s ease,box-shadow .32s ease,background .2s ease,color .2s ease;transform-origin:50% 50%}
.mkbtn[aria-expanded="true"]{transform:rotate(180deg) scale(1.35);border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 0 26px -4px var(--acc)}
.menu{top:calc(var(--bar) + 12px)}
.menu .sheet{border-top:1px solid color-mix(in srgb,var(--acc) 36%,transparent);border-radius:16px;padding:22px 14px 12px}
.menu .sheet::before{content:"";position:absolute;left:50%;top:-13px;width:1px;height:13px;background:var(--acc)}
.menu.open .sheet{clip-path:inset(0 0 0 0 round 16px)}
.menu .sheet{clip-path:inset(0 0 100% 0 round 16px)}
@media (prefers-reduced-motion:reduce){.mkbtn{transition:none}}

/* ---------- the definition, breathing on its own ---------- */
.xrdef .wrap{position:relative}
.xrdef .xrchip{position:static;display:inline-block;margin-bottom:16px}
.xrdef h2{font-size:clamp(30px,3.4vw,50px);margin-bottom:26px}
.xrdef .xrtext{margin-top:0;grid-template-columns:minmax(0,1fr) 170px;gap:40px}
.xrdef .xrtext .dual > div{gap:0 40px}
.xrdef .xrtext p{font-size:16.5px}

/* ---------- the six: heading, panel, row ---------- */
.dhead h2{font-size:clamp(24px,2.5vw,36px);white-space:normal;max-width:30ch;line-height:1.08}
.dhead{min-height:88px}
.dtop{min-height:120px}
.stage{padding-top:0}
.six{position:relative;height:var(--rowH,240px);margin-top:20px}
.detail{grid-template-columns:44px minmax(0,1fr) 300px 44px;gap:16px;align-items:center;padding:18px 16px}
.dnav{width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);background:none;color:var(--acc);display:flex;align-items:center;justify-content:center;align-self:center}
.dnav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dnav:hover{border-color:var(--acc)}
.ddots{display:flex;gap:6px;margin-top:auto;padding-top:10px}
.ddots button{width:44px;height:24px;border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center}
.ddots button i{width:22px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--text) 18%,transparent);transition:background .2s ease,width .2s ease}
.ddots button[aria-current="true"] i{background:var(--acc)}
.dtext .dbl{margin-top:8px}
.dart{height:100%;min-height:200px}
.dart .ins{position:absolute;inset:0;opacity:0;transition:opacity .2s ease}
.dart .ins[data-on="1"]{opacity:1}
.dart .ins svg{width:100%;height:100%}
.dart .ins .w{fill:none;stroke:color-mix(in srgb,var(--rose) 70%,transparent);stroke-width:1.2;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.dart .ins .wt{fill:none;stroke:color-mix(in srgb,var(--rose) 80%,transparent);stroke-width:1.4;vector-effect:non-scaling-stroke}
/* the frames tuck: down and under nothing now; they fade and shrink in place */

/* ---------- the strip: five states, or four words ---------- */
.demoline.strip{padding-left:0;padding-right:0;max-width:none}
.demoline.strip .wrap{padding:0 var(--gut)}
.demoline.strip .dual > div{padding:24px 28px;border-radius:14px;border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);background:color-mix(in srgb,var(--ink) 74%,transparent);text-align:center}
.flow{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 6px}
.flow li{font:500 12.5px/1 var(--mono);letter-spacing:.06em;color:var(--text);padding:9px 12px;border-radius:8px;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);background:color-mix(in srgb,var(--acc) 8%,transparent)}
.flow li + li::before{content:"→";display:inline-block;margin-right:12px;color:var(--acc);font-weight:400}
.flow li:last-child{color:var(--acc-ink);background:var(--acc);border-color:var(--acc)}
.stripcap{margin:14px auto 0;font:400 13px/1.5 var(--mono);color:var(--body);max-width:none}

/* ---------- BEFORE / NOW: two loops, one crossfade ---------- */
.bn{height:400vh}
.bnfig .frz{opacity:.55}
.bnfig .bload{transform-box:fill-box;transform-origin:50% 50%}
html:not(.rm) .bnfig .bload{animation:spin 1.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bnfig .loadtrk{fill:none;stroke:color-mix(in srgb,var(--text) 22%,transparent);stroke-width:2.5}
.bnfig .loadarc{fill:none;stroke:var(--acc);stroke-width:2.5;stroke-linecap:round}
.bnfig .bhs,.bnfig .bph,.bnfig .bpay{transform-box:fill-box;transform-origin:50% 50%}
html:not(.rm) .bnfig .bhs{animation:hsoff 6s ease-in-out infinite}
html:not(.rm) .bnfig .bph{animation:phup 6s ease-in-out infinite}
html:not(.rm) .bnfig .bpay{animation:payscr 6s ease-in-out infinite}
@keyframes hsoff{0%,8%{transform:translate(0,0) rotate(0)}22%,70%{transform:translate(-44px,-72px) rotate(-16deg)}84%,100%{transform:translate(0,0) rotate(0)}}
@keyframes phup{0%,18%{transform:translate(0,0)}30%,62%{transform:translate(-30px,-96px)}76%,100%{transform:translate(0,0)}}
@keyframes payscr{0%,32%{opacity:0}40%,58%{opacity:1}66%,100%{opacity:0}}
html.rm .bnfig .bhs{transform:translate(-44px,-72px) rotate(-16deg)}html.rm .bnfig .bph{transform:translate(-30px,-96px)}html.rm .bnfig .bpay{opacity:1}
.bnfig .nbg{fill:#1C0E1A}html[data-mode="dev"] .bnfig .nbg{fill:#070C16}
.bnfig .nrim{fill:none;stroke:var(--acc);stroke-width:1.8;vector-effect:non-scaling-stroke}
.bnfig .nglow{fill:rgba(110,30,79,.55)}html[data-mode="dev"] .bnfig .nglow{fill:rgba(24,52,86,.6)}
.bnfig .ngrid{fill:none;stroke:rgba(198,78,148,.42);stroke-width:1}html[data-mode="dev"] .bnfig .ngrid{stroke:rgba(127,211,232,.3)}
.bnfig .ntg{fill:none;stroke:rgba(244,168,208,1);stroke-width:1.6}html[data-mode="dev"] .bnfig .ntg{stroke:rgba(160,225,245,.95)}
.bnfig .nbadge rect{fill:rgba(40,18,4,.85);stroke:rgba(247,147,26,.6);stroke-width:1}
.bnfig .nbadge text{font:500 7px var(--mono);letter-spacing:.14em;fill:#FFD9A0}
.bnfig .namt{font:500 16px var(--mono);fill:#EAF8FD}.bnfig .nsm{font-size:6px;letter-spacing:.1em;fill:#9EC3D2}
.bnfig .nyes{fill:rgba(127,211,232,.3);stroke:rgba(143,211,232,.8);stroke-width:1}.bnfig .nno{fill:rgba(14,26,38,.6);stroke:rgba(143,211,232,.4);stroke-width:1}
.bnfig .nst{font:500 6.5px var(--mono);letter-spacing:.2em;fill:#7FD3E8}
.bnfig .npanel,.bnfig .nbadge,.bnfig .nchk,.bnfig .nst,.bnfig .nyes{transform-box:fill-box;transform-origin:50% 50%}
html:not(.rm) .bnfig[data-now="1"] .npanel{animation:npan 7s ease-in-out infinite}
html:not(.rm) .bnfig[data-now="1"] .nbadge{animation:nbad 7s ease-in-out infinite}
html:not(.rm) .bnfig[data-now="1"] .nyes{animation:nyes 7s ease-in-out infinite}
html:not(.rm) .bnfig[data-now="1"] .nchk{animation:nchk 7s ease-in-out infinite}
html:not(.rm) .bnfig[data-now="1"] .nst{animation:nst 7s ease-in-out infinite}
html:not(.rm) .bnfig[data-now="1"] .ntg{animation:drift 7s ease-in-out infinite}
@keyframes nbad{0%,18%{opacity:0}24%,40%{opacity:1}46%,100%{opacity:0}}
@keyframes npan{0%,32%{opacity:0;transform:translateY(40px)}40%,84%{opacity:1;transform:translateY(0)}92%,100%{opacity:0;transform:translateY(-20px)}}
@keyframes nyes{0%,50%{fill:rgba(127,211,232,.3)}54%,60%{fill:rgba(127,211,232,.7)}64%,100%{fill:rgba(127,211,232,.3)}}
@keyframes nchk{0%,66%{stroke-dashoffset:1}76%,100%{stroke-dashoffset:0}}
@keyframes nst{0%,52%{opacity:0}56%,100%{opacity:1}}
html.rm .bnfig .npanel,html.rm .bnfig .nst{opacity:1}html.rm .bnfig .nchk{stroke-dashoffset:0}html.rm .bnfig .nbadge{opacity:0}
.bnfig .npanel{opacity:0}.bnfig .nst{opacity:0}.bnfig .nbadge{opacity:0}
.bnfig .bncap{font:400 11px var(--mono);letter-spacing:.14em;fill:var(--dim)}

/* ---------- the entry: the pocket gathers ---------- */
.entryin{display:flex;flex-direction:column;align-items:center;gap:26px}
.entrypk{width:min(240px,60vw);height:auto;opacity:0;transition:opacity .4s ease .3s}
.entry[data-on="1"] .entrypk{opacity:1}
.entrypk .epk,.entrypk .epk2{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.entry[data-on="1"] .entrypk .epk,.entry[data-on="1"] .entrypk .epk2{transition:stroke-dashoffset 1.4s ease .3s;stroke-dashoffset:0}
.entrypk .gl{fill:none;stroke:var(--acc);stroke-width:1.5}
.entrypk .gl text{font:700 12px var(--sans);fill:var(--acc);stroke:none}
.entrypk .gl circle:only-of-type{fill:var(--acc)}
.entrypk .eg{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.entrypk .e1{transform:translate(-120px,-40px)}.entrypk .e2{transform:translate(120px,-30px)}.entrypk .e3{transform:translate(0,60px)}
.entry[data-on="1"] .entrypk .eg{transition:transform 1.6s cubic-bezier(.2,.8,.2,1),opacity .6s ease;opacity:1}
.entry[data-on="1"] .entrypk .e1{transform:translate(88px,70px);transition-delay:.5s}
.entry[data-on="1"] .entrypk .e2{transform:translate(120px,70px);transition-delay:.9s}
.entry[data-on="1"] .entrypk .e3{transform:translate(152px,70px);transition-delay:1.3s}
html.rm .entrypk .eg,html.rm .entrypk .epk,html.rm .entrypk .epk2{transition:none}

/* ---------- the pocket: plum and gold, the six boxes ---------- */
.pf6{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;max-width:56ch}
.pf{position:relative}
.pf button{width:100%;min-height:48px;text-align:left;padding:12px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--self) 45%,transparent);
  background:color-mix(in srgb,var(--self) 7%,transparent);color:var(--text);font:500 11px/1.3 var(--mono);letter-spacing:.14em;display:flex;align-items:center;gap:8px}
.pf button::before{content:"";width:9px;border-top:2px solid var(--self);flex:none}
.pf button:hover,.pf button[aria-expanded="true"]{border-color:var(--self);background:color-mix(in srgb,var(--self) 14%,transparent)}
.pf p{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;margin:0;padding:12px 14px;border-radius:10px;font-size:14px;line-height:1.5;color:var(--text);
  background:color-mix(in srgb,var(--ink) 96%,transparent);border:1px solid color-mix(in srgb,var(--self) 45%,transparent);box-shadow:0 20px 40px -20px rgba(0,0,0,.8);opacity:0;pointer-events:none;transition:opacity .2s ease;max-width:none}
.pf:hover p,.pf button[aria-expanded="true"] + p,.pf button:focus-visible + p{opacity:1;pointer-events:auto}
.pkblock .code{margin-top:22px}

/* ---------- the road: centred orbit, then the both-ways beat ---------- */
.road{height:400vh}
.orbitcard{transition:opacity .35s ease}
.orbitcard[data-off="1"]{opacity:0;pointer-events:none}
.road .rtxt{transition:opacity .35s ease}
.road .rtxt[data-off="1"]{opacity:0}
.bothways2{position:absolute;left:var(--gut);right:var(--gut);top:57%;display:grid;justify-items:center;text-align:center;gap:10px;opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .5s ease;pointer-events:none}
.bothways2[data-on="1"]{opacity:1;transform:none;pointer-events:auto}
.bwarrow{width:220px;height:40px;margin-bottom:6px}
.bwarrow .arr{fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bwarrow .arr.next{stroke:var(--ext);stroke-dasharray:4 5}
.bwarrow .arrt{font:500 9px var(--mono);letter-spacing:.1em;fill:var(--acc)}.bwarrow .arrt.next{fill:var(--ext)}
.bwh{font:600 clamp(24px,2.8vw,40px)/1.1 var(--sans);letter-spacing:-.03em;color:var(--text);max-width:none}
.bothways2 .dual p{font-size:17px;color:var(--body);max-width:44ch;text-align:center;margin:0 auto}
.bothways2 .motto{margin-top:18px}

/* ---------- two sides: one bar, one coin ---------- */
.coinbar{position:relative;display:grid;grid-template-columns:1fr 76px 1fr;margin-top:34px;
  background:color-mix(in srgb,var(--ink) 90%,transparent);border-top:1px solid color-mix(in srgb,var(--acc) 24%,transparent);border-bottom:1px solid color-mix(in srgb,var(--acc) 24%,transparent)}
.chalf{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px var(--gut) 24px;text-align:left;overflow:hidden;transition:opacity .35s ease}
.chalf.user{align-items:flex-start;background:#E8B84A;color:#1A1206}
.chalf.dev{align-items:flex-end;text-align:right;background:#7FD3E8;color:#04121C}
.chalf b{font:600 22px/1 var(--sans);letter-spacing:.14em}
.chalf.dev b{font-family:var(--mono);font-weight:500;letter-spacing:.1em}
.chalf small{font:400 10.5px/1 var(--mono);letter-spacing:.08em;opacity:.9}
.chalf p{margin-top:10px;font-size:15.5px;line-height:1.45;color:inherit;max-width:38ch;opacity:.92}
/* the sliver of the other colour at the seam, breathing on hover or when the coin turns */
.chalf::after{content:"";position:absolute;top:0;bottom:0;width:0;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.chalf.user::after{right:0;background:linear-gradient(90deg,transparent,#7FD3E8)}
.chalf.dev::after{left:0;background:linear-gradient(90deg,#E8B84A,transparent)}
.coinbar:hover .chalf::after,.coinbar.turn .chalf::after{width:34px}
.coinbar .mkbtn{position:relative;left:auto;top:auto;margin:0;width:100%;height:100%;border-radius:0;border:0;border-left:1px solid color-mix(in srgb,var(--acc) 30%,transparent);border-right:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
.coinbar .mkbtn svg{width:30px;height:30px}
html:not(.rm) .coinbar:hover .mkbtn svg,html:not(.rm) .coinbar.turn .mkbtn svg{animation:seambreathe 1.8s ease-in-out infinite}
@keyframes seambreathe{50%{transform:scale(1.18)}}
.coinbar .mkbtn[aria-expanded="true"]{transform:none;box-shadow:none}
html[data-mode="user"] .chalf.dev,html[data-mode="dev"] .chalf.user{opacity:.5}
.sidebtns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px;max-width:none}
.sidebtn.user{background:#E8B84A;color:#1A1206}.sidebtn.dev{background:#7FD3E8;color:#04121C}
.sidebtn[aria-pressed="true"]{background:none!important;border-color:var(--acc);color:var(--text)}

/* ---------- go further: one drawing style, three loops ---------- */
.gsteps{display:flex;align-items:flex-end;gap:6px;width:100%;height:100%;padding:8px 0}
.gsteps i{display:block;flex:1;height:44px;border-radius:6px;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);background:color-mix(in srgb,var(--acc) 8%,transparent);
  transform:translateY(calc(var(--i) * -6px));animation:stepon 4.8s ease-in-out infinite;animation-delay:calc(var(--i) * .5s)}
@keyframes stepon{0%,10%,100%{background:color-mix(in srgb,var(--acc) 8%,transparent)}14%,44%{background:color-mix(in srgb,var(--acc) 34%,transparent)}}
.gdoor{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:100%;height:100%;align-items:end}
.gdoor i{display:block;border-radius:6px;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);background:color-mix(in srgb,var(--acc) 8%,transparent);height:44px}
.gdoor .l2,.gdoor .r2{height:64px}.gdoor .l3,.gdoor .r3{height:84px}.gdoor .top{height:100px;border-radius:22px 22px 6px 6px}
.gdoor .light{position:absolute;left:50%;bottom:0;width:38%;height:70%;transform:translateX(-50%);border-radius:40px 40px 0 0;
  background:radial-gradient(60% 80% at 50% 100%,color-mix(in srgb,var(--acc) 40%,transparent),transparent 75%);animation:doorglow 3s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.gsteps i,.gdoor .light{animation:none}}

/* ---------- the end block ---------- */
.end .three{margin-top:26px;font:500 clamp(17px,1.6vw,22px)/1.4 var(--sans);color:var(--body);letter-spacing:-.01em;max-width:none;text-align:center}
.end .three span{color:var(--acc);margin:0 10px}
.foot .motto{color:var(--dim)}

/* ---------- quiet right-third drawings on text-only heads ---------- */
.headgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px;align-items:center}
.quiet{width:100%;max-width:300px;justify-self:end;opacity:.85}
.quiet svg{width:100%;height:auto}

@media (max-width:1100px){.detail{grid-template-columns:44px minmax(0,1fr) 240px 44px}}
@media (max-width:1023px){
  .hero{align-items:start}
  .xrdef .xrtext{grid-template-columns:1fr}
  .detail{grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:auto auto}
  .dart{grid-column:1 / -1;height:200px;min-height:0;position:relative}
  .dart .ins{position:absolute}
  .six{height:auto;margin-top:26px}
  .demoline.strip .wrap{padding:0 20px 0 40px}
  .flow li{font-size:11.5px;padding:8px 9px}
  .bn{height:340vh}
  .pf6{grid-template-columns:1fr;gap:8px}
  .pf p{position:static;opacity:1;pointer-events:auto;box-shadow:none;border-top:0;border-radius:0 0 10px 10px;margin-top:-4px}
  .pf button{border-radius:10px 10px 0 0}
  .coinbar{grid-template-columns:1fr;grid-template-rows:auto 64px auto}
  .chalf,.chalf.dev{align-items:flex-start;text-align:left;padding:18px 20px 20px 40px}
  .coinbar .mkbtn{border:0;border-top:1px solid color-mix(in srgb,var(--acc) 30%,transparent);border-bottom:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
  .chalf::after{display:none}
  .bothways2{top:auto;bottom:6vh}
  .headgrid{grid-template-columns:1fr}
  .quiet{justify-self:start;max-width:220px}
}
@media (max-width:819px){
  .dhead h2{max-width:none}
  .hpcap{top:92%}
  .bwh{font-size:24px}
}

/* ---------- the judges page, rebuilt: a masonry of cards ---------- */
.jd2{max-width:1100px;padding:8vh 20px 12vh}
.jhead2{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:40px}
.jhead2 .mk{width:44px;height:58px;color:var(--acc)}.jhead2 .mk use{fill:currentColor}
.jhead2 .wm{font:600 18px/1 var(--sans);letter-spacing:.5em;padding-left:.5em;margin:14px 0 10px;color:var(--text);max-width:none}
.jhead2 .kicker{margin:0}
.jd2 .jgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:16px}
.jc{border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);border-radius:16px;background:var(--tile);padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px}
.jc.lg{grid-column:span 2}
.jc.md{grid-row:span 2}
.jart{width:120px;height:80px;margin-bottom:4px}
.jart svg{width:100%;height:100%}
.jart .btc{fill:#F7931A}.jart .bt{font:700 24px var(--sans);fill:var(--acc)}.jart .mku{fill:var(--acc)}
.jart .panel2{fill:rgba(20,34,48,.92);stroke:rgba(143,211,232,.45);stroke-width:1}.jart .pl{stroke:rgba(158,195,210,.7);stroke-width:1.6;stroke-linecap:round;fill:none}.jart .plb{stroke:rgba(127,211,232,.9);stroke-width:1.6}
.jc h2{font:500 11.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin:0}
.jc p{font-size:15.5px;line-height:1.55;color:var(--body);max-width:none}
.jc .claim{font:500 20px/1.35 var(--sans);color:var(--text);margin-top:4px}
.jc .jnext{margin-bottom:6px}.jc .jnext li{font-size:15px}
.jbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.jbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;background:var(--acc);color:var(--acc-ink);font:500 12.5px/1 var(--mono);letter-spacing:.04em;text-decoration:none}
.jbtn:hover{filter:brightness(1.06)}
.jcontact{display:inline-flex;align-items:center;min-height:44px;font:500 13px/1 var(--mono);color:var(--text);padding:0 4px}
.jd2 a{padding-block:0;margin-block:0}
@media (max-width:1023px){.jd2 .jgrid{grid-template-columns:1fr 1fr}.jc.lg{grid-column:span 2}.jc.md{grid-row:auto}}
@media (max-width:640px){.jd2 .jgrid{grid-template-columns:1fr}.jc.lg{grid-column:auto}.jd2{padding-left:20px;padding-right:20px}}
@media print{
  .jd2{max-width:none;padding:0}
  .jhead2{margin-bottom:10pt}.jhead2 .mk{width:26px;height:34px}.jhead2 .wm{font-size:12pt;margin:6pt 0 4pt}
  .jd2 .jgrid{grid-template-columns:1fr 1fr;gap:8pt}
  .jc,.jc.lg,.jc.md{grid-column:auto;grid-row:auto;border:1px solid #000;border-radius:6pt;padding:8pt 10pt;gap:4pt;break-inside:avoid;background:#fff}
  .jart{width:56px;height:38px;margin:0}
  .jart *{stroke:#000!important;fill:none!important}.jart .btc,.jart .bt,.jart .mku{fill:#000!important}
  .jc h2{font-size:8pt;margin:0}.jc p,.jc .jnext li{font-size:8.6pt;line-height:1.3}.jc .claim{font-size:10pt}
  .jbtn{background:none;color:#000;border:1px solid #000;min-height:0;padding:2pt 6pt;font-size:8pt}
  .jbtn::after{content:" · " attr(href);font-size:7.5pt}
  .jtag{font-size:7pt;padding:1pt 4pt}
}

/* the six heading flows in the band; the demo heading stays pinned to the same baseline */
.dhead{min-height:0;display:grid}
.dhead .hA{position:static;grid-area:1/1}
.dhead .hB{position:static;grid-area:1/1;align-self:end;white-space:normal}
.dtop{min-height:0;margin-bottom:14px}

/* one content box: the hero and every wrap start at the same x; at 1440 the gutter clears the ruler's labels */
@media (min-width:1440px){:root{--gut:112px}}
.hero{max-width:none;padding-left:var(--gut);padding-right:var(--gut)}
.hero > *{max-width:none}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:56px;width:100%;box-sizing:border-box}
.hero .htxt,.hero .hfig{width:100%}
@media (min-width:1440px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}}
.xr-pin,.demoline,.bngrid{max-width:none;padding-left:var(--gut);padding-right:var(--gut)}
.xr-pin{padding-top:2.4vh;padding-bottom:1.6vh}
.bn{height:440vh}
@media (max-width:819px){
  .hero,.xr-pin,.demoline.strip .wrap,.bngrid,.xrdef,.scene{padding-left:40px;padding-right:20px}
  .scene{padding-top:16vh;padding-bottom:16vh}
  .sides{padding-left:0;padding-right:0}
  .sides .wrap{padding:0 20px 0 40px}
}
.entrypk .e3 path{fill:var(--acc)}
.hero .lines{margin-top:0}
.hero .htxt > .dual + .dual{margin-top:34px}
@media (max-width:1023px){
  .hero{grid-template-columns:1fr;column-gap:0;row-gap:34px}
  .detail{grid-template-columns:44px minmax(0,1fr) 44px}
  .dnav{grid-row:1}.dtext{grid-row:1}.dart{grid-row:2}
}
@media (max-width:819px){.xrdef .xrtext .dual > div{gap:12px}}
.ddots button{width:44px;height:44px}
.ddots{gap:0;margin-left:-11px}
.ddots button{flex:none}

/* ===========================================================================
   lab22
   =========================================================================== */
/* 12. nothing pitch black: every silhouette is outlined with a light fill */
.dv .skin{fill:color-mix(in srgb,var(--rose) 20%,transparent);stroke:var(--lc);stroke-width:1.5;stroke-linejoin:round}
/* 2. the menu: no second mark; the header mark's reflection on dark glass */
.menu .sheet{padding-top:52px}
.menu .sheet::before{display:none}
.mrefl{position:absolute;left:50%;top:0;width:46px;height:60px;margin-left:-23px;transform:scaleY(-1);transform-origin:50% 0;color:var(--acc);opacity:.35;pointer-events:none;
  -webkit-mask-image:linear-gradient(0deg,#000 20%,transparent 100%);mask-image:linear-gradient(0deg,#000 20%,transparent 100%)}
.mrefl use{fill:currentColor}
.menu{top:calc(var(--bar) + 20px)}
.menu .sheet{position:relative;padding-top:56px}
/* 7-8. hero: text top-aligned, the picture fits, pill + proof one row */
.hero{align-items:start;grid-template-rows:auto auto;row-gap:20px;padding-top:4vh}
.hero .htxt,.hero .hfig{align-self:start}
.hero .brand{margin-bottom:24px}
.hero .hfig{max-width:min(100%,calc((100svh - var(--bar) - 220px) * 1.25));justify-self:end}
.hfoot{grid-column:1 / -1;display:flex;justify-content:center;align-items:baseline;gap:10px 28px;flex-wrap:wrap}
.hfoot .urlchip,.hfoot .proof{margin:0}
.hero .hset{animation:none}
html:not(.rm) .hero .hset g{animation:headturn 6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes headturn{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
.hctl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
html:not(.rm) .hhand{animation:handfloat 3s ease-in-out infinite}
@keyframes handfloat{50%{transform:translate(112px,298px) scale(1.35)}}
.hshotL{stroke:rgba(247,147,26,.45);stroke-width:1.4;stroke-linecap:round;transition:opacity .3s ease}
.hshotL[data-on="0"]{opacity:0}
.hpulseL,.hring{fill:none;stroke:#F7931A;stroke-width:1.6}
.hpulseL{fill:#F7931A;stroke:none}
.hshot{stroke:rgba(247,147,26,.55);stroke-width:1.6;stroke-linecap:round;transition:opacity .3s ease}
.hshot[data-on="0"]{opacity:.2}
.hpulse{fill:#FFD9A0}
.hsatg{color:#1A1206}
html[data-mode="dev"] .hshot{stroke:rgba(127,211,232,.6)}html[data-mode="dev"] .hshotL{stroke:rgba(127,211,232,.5)}html[data-mode="dev"] .hpulseL,html[data-mode="dev"] .hring{stroke:#7FD3E8}html[data-mode="dev"] .hpulseL{fill:#7FD3E8}
/* 11. the wide door */
.xrdef .xrtext{grid-template-columns:minmax(0,1fr) minmax(320px,44%);gap:40px;align-items:center}
.xrdef .xrtext .dual > div{grid-template-columns:1fr;gap:14px}
.doorlink{width:100%;height:auto;aspect-ratio:600/260;max-height:260px}
.doorlink .tgs circle{fill:none}
/* 14. the round-2 captions: a strip at the foot of each frame */
.rmsg{top:auto;bottom:0;left:0;right:0;transform:none;border:0;border-radius:0 0 14px 14px;background:rgba(0,0,0,.6);color:#FFD9A0;font:500 15px/1.3 var(--mono);letter-spacing:.04em;padding:9px 12px;white-space:normal;text-align:center;justify-content:center}
.fr-lp .rmsg{top:auto}
.gui[data-kind="back"]{top:78%;bottom:auto;transform:translate(-50%,-50%)}
.fr[data-beat="verified"] .fpanel,.fr[data-beat="resumed"] .fpanel{top:36%}
/* 16. BEFORE: the world around the figure, then into the screen */
.bnfig .bworld{transform-box:fill-box;transform-origin:50% 50%}
.bnfig .bscreen{opacity:0}
.bnfig .btg{opacity:1}
.bnfig .bload{transform-box:fill-box;transform-origin:50% 50%}
.bnfig .loaddot{fill:var(--acc)}
.bnfig .barmL,.bnfig .barmR,.bnfig .bhs,.bnfig .bph,.bnfig .bpay,.bnfig .bworld,.bnfig .bscreen{transform-box:fill-box;transform-origin:50% 50%}
.bnfig .bph{transform:translate(0,120px)}
html:not(.rm) .bnfig .bhs{animation:hsoff2 6s ease-in-out infinite}
html:not(.rm) .bnfig .barmL{animation:armL 6s ease-in-out infinite}
html:not(.rm) .bnfig .bph{animation:phup2 6s ease-in-out infinite}
html:not(.rm) .bnfig .bpay{animation:payscr 6s ease-in-out infinite}
html:not(.rm) .bnfig #bnB .bworld{animation:wshrink 6s ease-in-out infinite}
html:not(.rm) .bnfig .bscreen{animation:scrshow 6s ease-in-out infinite}
@keyframes hsoff2{0%,8%{transform:translate(0,0) rotate(0)}20%,74%{transform:translate(-30px,-64px) rotate(-18deg)}86%,100%{transform:translate(0,0) rotate(0)}}
@keyframes armL{0%,8%{transform:translate(0,0)}20%,74%{transform:translate(8px,-58px) rotate(-8deg)}86%,100%{transform:translate(0,0)}}
@keyframes phup2{0%,26%{transform:translate(0,120px)}38%,60%{transform:translate(6px,-8px)}72%,100%{transform:translate(0,120px)}}
@keyframes wshrink{0%,14%{transform:scale(1);opacity:1}30%,74%{transform:translate(160px,-120px) scale(.32);opacity:.55}90%,100%{transform:scale(1);opacity:1}}
@keyframes scrshow{0%,20%{opacity:0}30%,74%{opacity:1}86%,100%{opacity:0}}
html.rm .bnfig .bhs{transform:translate(-30px,-64px) rotate(-18deg)}html.rm .bnfig .barmL{transform:translate(8px,-58px)}html.rm .bnfig .bph{transform:translate(6px,-8px)}html.rm .bnfig .bpay{opacity:1}
html.rm .bnfig #bnB .bworld{transform:translate(160px,-120px) scale(.32);opacity:.55}html.rm .bnfig .bscreen{opacity:1}
/* the crossfade to NOW keeps the world expanded */
.bnfig[data-x="1"] #bnB .bworld,.bnfig[data-x="1"] .bhs,.bnfig[data-x="1"] .barmL,.bnfig[data-x="1"] .bph,.bnfig[data-x="1"] .bpay,.bnfig[data-x="1"] .bscreen{animation:none;transform:none;opacity:1}
.bnfig[data-x="1"] .bscreen{opacity:0}.bnfig[data-x="1"] .bph{transform:translate(0,120px)}.bnfig[data-x="1"] .bpay{opacity:0}
.bnfig .ntg2{fill:none;stroke:rgba(244,168,208,.9);stroke-width:1.6}html[data-mode="dev"] .bnfig .ntg2{stroke:rgba(160,225,245,.9)}
.bnfig .npocket use{fill:var(--acc)}
.bnfig .drop use{color:var(--acc)}
.bnfig .drop{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
html:not(.rm) .bnfig[data-now="1"] .drop{animation:dropin 6s ease-in-out infinite}
/* 19-20. the entry: the Atrium */
.floor .horizon{display:none}
html[data-mode="dev"] .floor .fog{display:block}
.entryin{gap:12px}
.atrium{width:min(600px,92vw);height:auto;opacity:0;transition:opacity .5s ease .2s}
.entry[data-on="1"] .atrium{opacity:1}
.atrium .arches .s{stroke:var(--acc)}
.atrium .lit{fill:color-mix(in srgb,var(--acc) 28%,transparent);stroke:var(--acc);stroke-width:1.4}
html:not(.rm) .atrium .lit{animation:doorglow 3s ease-in-out infinite}
.atrium .rails path{stroke:color-mix(in srgb,var(--acc) 45%,transparent);stroke-width:1.2;stroke-dasharray:4 6}
.atrium .eg{color:var(--acc);offset-rotate:0deg;opacity:0}
.atrium .e1{offset-path:path('M180 96 C200 150 240 200 300 236')}
.atrium .e2{offset-path:path('M300 96 C300 150 300 200 300 236')}
.atrium .e3{offset-path:path('M420 96 C400 150 360 200 300 236')}
html:not(.rm) .entry[data-on="1"] .atrium .eg{animation:railride 4.5s linear infinite}
html:not(.rm) .entry[data-on="1"] .atrium .e2{animation-delay:1.5s}
html:not(.rm) .entry[data-on="1"] .atrium .e3{animation-delay:3s}
@keyframes railride{0%{offset-distance:0%;opacity:0}8%{opacity:1}82%{opacity:1;offset-distance:96%}100%{offset-distance:100%;opacity:0}}
html.rm .atrium .eg{opacity:1;offset-distance:80%}
.atrium .obox{fill:none;stroke:color-mix(in srgb,var(--text) 40%,transparent);stroke-width:1;stroke-dasharray:3 4}
.atrium .olbl{font:400 8.5px var(--mono);letter-spacing:.12em;fill:var(--dim)}
.atrium .epocket use{fill:var(--acc)}
.atrium .sats rect{fill:var(--acc)}
.atrium .sats text{font:600 9px var(--mono);fill:var(--acc-ink)}
.atrium .echk{stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:1;stroke-dashoffset:1}
/* 22-23. the split */
.road{height:520vh}
.bothways2{top:auto;bottom:4vh;gap:0}
.lanes{position:relative;width:min(860px,100%);height:84px;margin:6px auto 4px}
.lanelbl{position:absolute;left:50%;transform:translateX(-50%);font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--acc)}
.lanelbl.top{top:8px}.lanelbl.bot{bottom:8px;color:var(--ext)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(980px,100%);margin-top:6px;text-align:left}
.sbox{padding:16px 18px;border-radius:14px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);background:color-mix(in srgb,var(--ink) 70%,transparent);transition:opacity .35s ease,border-color .35s ease}
.sbox .loud{font:600 clamp(17px,1.5vw,21px)/1.2 var(--sans);letter-spacing:-.02em;color:var(--text);max-width:none;margin-bottom:8px}
.sbox p{font-size:14.5px;line-height:1.5;color:var(--body);max-width:none}
.stag{display:inline-block;margin-top:10px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ext);border:1px solid color-mix(in srgb,var(--ext) 50%,transparent);border-radius:99px;padding:5px 9px}
html[data-mode="user"] .sbox.world,html[data-mode="dev"] .sbox.player{opacity:.5}
html[data-mode="user"] .sbox.player{border-color:color-mix(in srgb,#E8B84A 60%,transparent)}
html[data-mode="dev"] .sbox.world{border-color:color-mix(in srgb,#7FD3E8 60%,transparent)}
.bothways2 .motto{margin-top:12px;font-size:11.5px}
.bwh{font-size:clamp(20px,2.2vw,30px)}
/* 24. two sides: the gradient runs into the bar, the bar carries the copy and the switches */
.sides{position:relative;padding:14vh 0 0;background:linear-gradient(180deg,transparent 0,transparent 20%,color-mix(in srgb,#E8B84A 22%,transparent) 100%) left top / 50% 100% no-repeat,linear-gradient(180deg,transparent 0,transparent 20%,color-mix(in srgb,#7FD3E8 20%,transparent) 100%) right top / 50% 100% no-repeat}
.sides .wrap{padding-bottom:6vh}
.sides .sidesline{margin-top:14px;font-size:15px;color:var(--body)}
.coinbar{grid-template-columns:1fr 64px 1fr;margin-top:0;border:0}
.chalf{padding:30px var(--gut) 34px;gap:8px}
.chalf p{margin-top:8px}
.chalf .sidebtn{margin-top:12px;border:1px solid rgba(0,0,0,.25);background:rgba(0,0,0,.14);color:inherit;font-size:14px;min-height:46px}
.chalf .sidebtn[aria-pressed="true"]{background:rgba(0,0,0,.28)!important;border-color:rgba(0,0,0,.4);color:inherit}
html[data-mode="user"] .chalf.dev,html[data-mode="dev"] .chalf.user{opacity:.7}
.chalf::after{display:none}
.stripe{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:0;border-left:1px solid color-mix(in srgb,var(--acc) 30%,transparent);border-right:1px solid color-mix(in srgb,var(--acc) 30%,transparent);
  background:color-mix(in srgb,var(--ink) 92%,transparent);color:var(--acc);cursor:pointer;min-height:44px}
.stripe .vt{writing-mode:vertical-rl;transform:rotate(180deg);font:500 11px/1 var(--mono);letter-spacing:.3em}
.stripe svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.stripe[aria-expanded="true"] svg{transform:rotate(180deg)}
.stripe:hover{background:color-mix(in srgb,var(--acc) 12%,var(--ink))}
.sides::after{content:"";display:block;height:60vh;background:linear-gradient(180deg,color-mix(in srgb,#E8B84A 10%,transparent),transparent 70%) left top / 50% 100% no-repeat,linear-gradient(180deg,color-mix(in srgb,#7FD3E8 9%,transparent),transparent 70%) right top / 50% 100% no-repeat}
.go{padding-top:4vh}
/* 5. one end block */
.end{padding:19vh var(--gut) 8vh}
.end .mk{width:72px;height:94px;margin-bottom:18px}
.end .mail{margin-top:8vh;font:500 clamp(22px,3vw,40px)/1.1 var(--mono);letter-spacing:-.01em;max-width:none}
.end .mail a{color:var(--text);text-decoration-color:color-mix(in srgb,var(--acc) 60%,transparent);display:inline-block;padding-block:10px;margin-block:-10px}
.end .why{margin-top:12px;font-size:16px;color:var(--body);max-width:none}
/* 29. the judges masonry: every card top on a row line */
.jd2 .jgrid{align-items:start;grid-auto-rows:auto}
.jc.md{grid-row:auto}
@media (max-width:1100px){.xrdef .xrtext{grid-template-columns:1fr}.doorlink{max-width:560px}}
@media (max-width:1023px){
  .hero{padding-top:3vh}
  .hero .hfig{max-width:none;justify-self:stretch}
  .split{grid-template-columns:1fr 1fr;gap:8px}
  .sbox{padding:10px 10px}.sbox .loud{font-size:13px}.sbox p{font-size:11.5px;line-height:1.4}.stag{font-size:9px;padding:4px 6px;margin-top:6px}
  .lanes{height:64px}
  .bothways2{bottom:2vh}
  .bwh{font-size:20px;margin-bottom:0}
  .coinbar{grid-template-columns:1fr;grid-template-rows:auto 56px auto}
  .stripe{flex-direction:row;border:0;border-top:1px solid color-mix(in srgb,var(--acc) 30%,transparent);border-bottom:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
  .stripe .vt{writing-mode:horizontal-tb;transform:none}
  .chalf,.chalf.dev{align-items:flex-start;text-align:left;padding:22px 20px 24px 40px}
  .sides{background-size:100% 100%,0 0}
}
@media (max-width:819px){
  .hfoot{flex-direction:column;align-items:center;gap:12px}
  .rmsg{font-size:13px;padding:8px 10px}
  .atrium{width:100%}
  .split{grid-template-columns:1fr}
  .sbox{padding:8px 10px}.sbox p{display:none}.sbox .loud{margin-bottom:0}
  .bothways2 .motto{display:none}
  .entryin{gap:6px}
}
@media (prefers-reduced-motion:reduce){.atrium .lit,.atrium .eg,.hhand,.hero .hset g{animation:none}}

/* 25. questions: round icon buttons */
.tturn{right:14px;bottom:12px;width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);display:flex;align-items:center;justify-content:center;font:500 20px/1 var(--mono);color:var(--acc);letter-spacing:0}
.tface:hover .tturn{background:color-mix(in srgb,var(--acc) 12%,transparent)}
.tclose{position:absolute;right:14px;top:12px;margin:0;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;font:500 20px/1 var(--mono);letter-spacing:0;color:var(--acc);border-color:color-mix(in srgb,var(--acc) 55%,transparent);display:flex;align-items:center;justify-content:center}
.tback{padding-right:64px}
/* 26-28. worlds */
.wstrip{max-width:1240px;margin:0 auto;padding:0 var(--gut) 24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.wstrip .list{flex:1 1 320px;margin:0;font:400 15px/1.5 var(--mono);color:var(--dim);max-width:none;padding:0;border:0;opacity:1}
.wstrip .list[data-open="1"]{color:var(--text)}
.wbtn.small{min-height:44px;padding:0 18px;font-size:13px}
.wbtn.small[aria-disabled="true"]{color:var(--dim);border-style:solid;border-color:color-mix(in srgb,var(--text) 22%,transparent)}
.wcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.wcard .wkind{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.wtag{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--dim);border:1px solid color-mix(in srgb,var(--text) 26%,transparent);border-radius:99px;padding:4px 8px}
.wtag.live{color:var(--acc);border-color:var(--acc)}
.wgrow{grid-column:1 / -1;margin-top:8px;font:400 14px/1.5 var(--mono);color:var(--body);max-width:none;text-align:center}
.wart .hall path{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wart .rails path{stroke-dasharray:4 6}
.wart .gl{color:var(--acc)}
.wart .portal ellipse{fill:none;stroke:var(--lc);stroke-width:1.4}
.wart .portal ellipse:first-child{stroke:var(--acc);stroke-dasharray:3 5}
html:not(.rm) .wart .portal{animation:doorglow 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
.wart .balls .ball{animation:none}
html:not(.rm) .wart .balls{animation:ballsdrift 3s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes ballsdrift{50%{transform:translate(-14px,6px)}}
.wart .coins{color:#F7931A}
.wart .bam circle{fill:none;stroke:#F7931A;stroke-width:1.6;opacity:0}
html:not(.rm) .wart .bam circle{animation:wbam 2.2s ease-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes wbam{0%{opacity:.9;transform:scale(.2)}60%{opacity:0;transform:scale(1.2)}100%{opacity:0}}
.chip .mkuse{fill:var(--acc)}
@media (max-width:1100px){.wcards{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.wcards{grid-template-columns:1fr}}
@media (max-width:819px){.wstrip{padding-left:40px;padding-right:20px}}

/* lab22 · second pass */
.hero{min-height:0;align-content:start;padding-bottom:5vh}
.xrdef .xrtext{grid-template-columns:minmax(0,1fr) minmax(320px,50%)}
.doorlink{max-height:none}
.fr .cell .rmsg{position:absolute;left:0;right:0;bottom:0;top:auto;z-index:6;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:0 0 15px 15px;padding:10px 12px}
.gui[data-kind="back"]{top:64%}
.fr[data-beat="verified"] .fpanel,.fr[data-beat="resumed"] .fpanel{top:30%}
.bothways2{top:calc(50% + 64px);bottom:auto}
.sides::after{height:40vh;background:linear-gradient(180deg,color-mix(in srgb,#E8B84A 7%,transparent),transparent 60%) left top / 50% 100% no-repeat,linear-gradient(180deg,color-mix(in srgb,#7FD3E8 6%,transparent),transparent 60%) right top / 50% 100% no-repeat}
.coinbar{z-index:4}
.menu{top:calc(var(--bar) + 6px)}
.mrefl{top:4px}
.menu .sheet{padding-top:72px}
@media (max-width:1023px){.bothways2{top:auto;bottom:2vh}}

/* lab22 · third pass */
.fr[data-beat="verified"] .fpanel,.fr[data-beat="resumed"] .fpanel{top:26%;transform:translate(-50%,-50%) scale(calc(var(--ps,.5) * .8))}
.gui[data-kind="back"]{top:74%}
.sides::after{height:30vh}
@media (max-width:819px){.sbox p:not(.loud){display:none}}

/* the judges page: eight drawings, one button */
.jart{width:180px;height:108px;margin-bottom:6px}
.jart svg{width:100%;height:100%;overflow:visible}
.jart .glow{fill:color-mix(in srgb,var(--acc) 22%,transparent);filter:blur(6px)}
.jart .pk{fill:color-mix(in srgb,var(--acc) 18%,transparent);stroke:var(--acc);stroke-width:26;vector-effect:none}
.jart .gl{color:var(--acc)}
.jart .tgs circle{fill:none}
.jart .tag{font:600 8px var(--mono);fill:var(--acc);letter-spacing:.14em}
.jart .chk{fill:none;stroke:var(--ice);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.jart .gold{fill:#E8B84A}.jart .ice{fill:#7FD3E8}.jart .dark{fill:var(--ink)}
.jart .bu{font:600 10px var(--sans);letter-spacing:.14em;fill:#1A1206}.jart .bd{font:500 10px var(--mono);letter-spacing:.1em;fill:#04121C}.jart .small{font:400 5.5px var(--mono);letter-spacing:.06em}
.jart .clip{fill:color-mix(in srgb,var(--ink2) 80%,transparent);stroke:var(--acc);stroke-width:1.6}
.jart .play{fill:var(--acc)}
.jart .lit{fill:color-mix(in srgb,var(--acc) 28%,transparent);stroke:var(--acc);stroke-width:1.4}
.jart .next{fill:none;stroke:var(--ext);stroke-width:1.6;stroke-dasharray:4 4;stroke-linecap:round;stroke-linejoin:round}
.jart .lbl{font:500 7.5px var(--mono);letter-spacing:.1em;fill:var(--acc)}.jart .lbl.nx{fill:var(--ext)}
.jart .brace{font:500 44px var(--mono);fill:var(--acc)}
.jart .box{fill:color-mix(in srgb,var(--acc) 8%,transparent);stroke:var(--lc);stroke-width:1.3}
.jart .spill{fill:color-mix(in srgb,var(--acc) 22%,transparent)}
.jbtns{display:flex;flex-wrap:nowrap;gap:12px;justify-content:flex-start;margin-top:8px}
.jbtn{display:inline-flex;align-items:center;justify-content:center;height:44px;min-height:44px;padding:0 20px;border-radius:99px;background:var(--acc);color:var(--acc-ink);font:500 13px/1 var(--mono);letter-spacing:.02em;text-decoration:none;white-space:nowrap;box-sizing:border-box}
.jcontact{height:44px;min-height:44px;font:500 13px/1 var(--mono)}
@media (max-width:390px){.jbtns{flex-wrap:wrap}}
@media print{
  .jart{width:108px;height:65px;filter:none}
  .jart .glow,.jart .spill{display:none}
  .jart *{stroke:#000!important;fill:none!important;filter:none!important}
  .jart .play,.jart .gl,.jart .bu,.jart .bd,.jart .tag,.jart .lbl,.jart .brace{fill:#000!important;stroke:none!important}
  .jart .pk{stroke-width:26!important}
}

.mrefl{transform-origin:50% 50%;top:5px}
.fr .cell .rmsg{font-size:15px;white-space:normal;line-height:1.25}

/* ---------- journey: the route map and the two states ---------- */
.route{margin-top:34px}
.routesvg{width:100%;height:auto;overflow:visible}
.routesvg .rt{fill:none;stroke:color-mix(in srgb,var(--acc) 30%,transparent);stroke-width:1.6;stroke-linecap:round}
.routesvg .rt.on{stroke:var(--acc);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s ease}
.routesvg .stop{cursor:pointer}
.routesvg .sd{fill:var(--ink2);stroke:var(--acc);stroke-width:1.6;transition:fill .25s ease}
.routesvg .stop[data-on="1"] .sd{fill:var(--acc)}
.routesvg .sl{font:500 9.5px var(--mono);letter-spacing:.12em;fill:var(--dim);transition:fill .25s ease}
.routesvg .stop[data-on="1"] .sl{fill:var(--acc)}
.routesvg .sg{opacity:.75;transition:opacity .25s ease}
.routesvg .sg path,.routesvg .sg circle,.routesvg .sg rect{stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.routesvg .sg use{fill:currentColor}
.routesvg .stop[data-on="1"] .sg{opacity:1}
.routesvg .rhead{fill:var(--acc);filter:drop-shadow(0 0 6px var(--acc))}
.st2 .addr{font:500 8.5px var(--mono);fill:var(--text)}
.st2 .pin circle{fill:none;stroke:var(--acc);stroke-width:1.4}
.st2 .evr rect{fill:var(--acc)}.st2 .evr text{font:600 8px var(--mono);letter-spacing:.14em;fill:var(--acc-ink)}
.st2 .win,.st2 .evr,.st2 .unfold{transform-box:fill-box;transform-origin:50% 50%}
.st2 .unfold{opacity:0}
html:not(.rm) .stA .evr{animation:evrpress 6s ease-in-out infinite}
html:not(.rm) .stA .win{animation:winshrink 6s ease-in-out infinite}
html:not(.rm) .stA .unfold{animation:worldunfold 6s ease-in-out infinite}
@keyframes evrpress{0%,28%{transform:scale(1)}32%{transform:scale(.92)}36%,100%{transform:scale(1)}}
@keyframes winshrink{0%,34%{transform:scale(1);opacity:1}50%,84%{transform:scale(.3) translate(0,-60px);opacity:.35}96%,100%{transform:scale(1);opacity:1}}
@keyframes worldunfold{0%,36%{opacity:0;transform:scale(.4)}54%,82%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.4)}}
.st2 .lit{fill:color-mix(in srgb,var(--acc) 28%,transparent);stroke:var(--acc);stroke-width:1.3}
.stB svg{overflow:visible}
.stB .vf{stroke-width:2.2}
.stB{overflow:visible}
@media (max-width:819px){
  .route{margin-top:24px}
  .routesvg{display:none}
  .route .rlist{list-style:none;display:grid;gap:8px;margin:0;padding:0}
  .route .rlist button{display:flex;align-items:center;gap:12px;min-height:44px;width:100%;text-align:left;background:none;border:0;color:var(--dim);font:500 11px/1 var(--mono);letter-spacing:.12em;padding:0}
  .route .rlist button i{width:10px;height:10px;border-radius:50%;border:1.6px solid var(--acc);flex:none;box-sizing:border-box}
  .route .rlist button[data-on="1"]{color:var(--acc)}.route .rlist button[data-on="1"] i{background:var(--acc)}
}
@media (min-width:820px){.route .rlist{display:none}}

@media (max-width:819px){.sbox .loud{display:block}}
.sides::after{background:linear-gradient(180deg,transparent,var(--ink) 92%),linear-gradient(90deg,color-mix(in srgb,#E8B84A 9%,transparent),color-mix(in srgb,#7FD3E8 9%,transparent))}
@media print{.jbtn{height:auto}.jbtn::after,.jd a[href]::after{content:none!important}}

/* ---------- journey steps: DEV figures share each USER instrument's band ---------- */
.instdual > .inst{width:100%}
.inst > .demolbl,.inst > span.demolbl{position:absolute;right:12px;bottom:10px;margin:0;padding:0;font-size:11px;opacity:.55}
.inst{padding-bottom:34px}
.devfig .ibody{align-items:center;justify-content:center;flex:1;gap:14px}
.mtitle2{font:600 22px/1.1 var(--disp);color:var(--text);max-width:none;text-align:center}
.mtitle2 small{display:block;font:400 11.5px/1.4 var(--mono);color:var(--dim);letter-spacing:.06em;margin-top:4px}
.sdkline{font-size:12px;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);border-radius:8px;padding:8px 12px;max-width:none;transform:translateY(-40px);opacity:0}
.btnrow{display:flex;gap:10px;max-width:none}
.fakebtn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:12px;border:1px solid color-mix(in srgb,var(--text) 26%,transparent);color:var(--text);font:600 14px/1 var(--disp)}
.fakebtn.gold{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.connectin{opacity:0;transform:scale(.9)}
html:not(.rm) .sdkline{animation:sdkland 6s ease-in-out infinite}
html:not(.rm) .connectin{animation:connectin 6s ease-in-out infinite}
@keyframes sdkland{0%,10%{opacity:0;transform:translateY(-40px)}22%,80%{opacity:1;transform:translateY(0)}92%,100%{opacity:0;transform:translateY(-40px)}}
@keyframes connectin{0%,26%{opacity:0;transform:scale(.9)}36%,80%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(.9)}}
html.rm .sdkline,html.rm .connectin{opacity:1;transform:none}
.pframe{position:relative;width:100%;height:150px;border-radius:12px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);background:color-mix(in srgb,var(--ink2) 80%,transparent);overflow:hidden}
.pframe::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--acc);transform:translateX(-6px)}
.pframe .pfl{position:absolute;left:14px;top:12px;font-size:10.5px;letter-spacing:.08em;color:var(--acc);opacity:0}
.pframe .pft{position:absolute;left:14px;top:34px;font-size:11px;color:var(--self);opacity:0}
html:not(.rm) .pframe::before{animation:pfslide 6s ease-in-out infinite}
html:not(.rm) .pframe .pfl{animation:pfshow 6s ease-in-out infinite}
html:not(.rm) .pframe .pft{animation:pftick 6s ease-in-out infinite}
@keyframes pfslide{0%,10%{transform:translateX(-6px)}20%,76%{transform:translateX(0)}86%,100%{transform:translateX(-6px)}}
@keyframes pfshow{0%,18%{opacity:0}26%,76%{opacity:1}86%,100%{opacity:0}}
@keyframes pftick{0%,40%{opacity:0}48%,76%{opacity:1}86%,100%{opacity:0}}
html.rm .pframe::before{transform:none}html.rm .pframe .pfl,html.rm .pframe .pft{opacity:1}
.dialorigin{margin-top:8px;font-size:11px;letter-spacing:.06em;color:#65535B;max-width:none}
.grantline{transition:color .3s ease,text-shadow .3s ease;border-radius:4px}
.grantline.lit{color:var(--gold);text-shadow:0 0 12px rgba(232,184,74,.55)}
.grantline.lit .fn{color:var(--gold)}
.inglyph{position:absolute;right:10px;bottom:10px;width:44px;height:44px;z-index:3;pointer-events:none}
.inglyph .ig{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .3s ease}
.shellstage[data-shell="vr"] .ig-vr,.shellstage[data-shell="ar"] .ig-ar,.shellstage[data-shell="lp"] .ig-lp{opacity:1}
.paychip2{margin:10px auto 0;font-size:11.5px;letter-spacing:.1em;color:var(--acc-ink);background:var(--acc);border-radius:99px;padding:6px 12px;max-width:none;width:max-content}
.paidpath{width:100%;max-width:360px;height:auto}
.paidpath .pl{font:500 9.5px var(--mono);letter-spacing:.1em;fill:var(--dim)}
.paidpath .lit{fill:color-mix(in srgb,var(--acc) 28%,transparent);stroke:var(--acc);stroke-width:1.3}
.paidpath .gl{color:var(--acc)}
.paidpath .mkuse{fill:var(--acc)}
.paidpath .paidroute{fill:none;stroke:color-mix(in srgb,var(--acc) 45%,transparent);stroke-width:1.2;stroke-dasharray:4 6}
.paidpath .coin{color:#F7931A;offset-path:path('M74 90 C110 70 140 70 172 96 C200 60 240 60 290 92');offset-rotate:0deg;offset-distance:0%}
html:not(.rm) .paidpath .coin{animation:paidride 3.2s ease-in-out infinite}
@keyframes paidride{0%{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
html.rm .paidpath .coin{offset-distance:100%}
/* the crosses diagram: figure and lists side by side, the origin line as a soft band */
.crossbox{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start;margin-bottom:44px}
.crossbox .seqwrap{margin:0;max-width:none}
.crossbox .origin-table{margin-bottom:0}
.seqwrap .origband{fill:color-mix(in srgb,var(--acc) 12%,transparent)}
.seqwrap .stops4 circle{fill:var(--ink2);stroke:var(--acc);stroke-width:1.6}
.seqwrap .sm{font:400 10.5px var(--mono);fill:var(--dim)}
.seqwrap text.hd{font-size:13px}
.seqwrap text{font-size:12px}
.seqwrap .sq rect{fill:color-mix(in srgb,var(--ink2) 60%,transparent)}
.seqwrap .bk{fill:#0A0F1A}
@media (max-width:1023px){.crossbox{grid-template-columns:1fr}}
#i-allow .dialorigin{margin-bottom:22px}

/* ---------- pitch, lab22: one type system, index-pure reveals ---------- */
.slide{justify-items:start;text-align:left}
.pmark{display:flex;align-items:center;gap:12px;margin-bottom:26px;max-width:none}
.pmark svg{width:34px;height:45px;color:var(--gold)}.pmark use{fill:currentColor}
.pmark b{font:600 14px/1 var(--sans);letter-spacing:.44em;color:var(--text)}
.s-close .pmark{flex-direction:column;gap:14px}.s-close .pmark svg{width:56px;height:74px}
.sub2{margin-top:22px;font:500 12px/1 var(--mono);letter-spacing:.18em;color:var(--gold);max-width:none}
.small{font:600 clamp(20px,2vw,28px)/1.2 var(--sans);letter-spacing:-.02em;color:var(--text);max-width:none;margin-bottom:22px}
.line.wide{max-width:62ch}
.s-six .mini6{margin:26px 0 24px}
.s-three .mini6{margin-bottom:0}
.gl{display:inline-block}
.slide.anim .gl{animation:glyphin .42s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(80ms + var(--k,0) * 40ms)}
@keyframes glyphin{from{clip-path:polygon(0% 0%,0% 0%,-35% 100%,-35% 100%);transform:translateX(-6%)}to{clip-path:polygon(0% 0%,135% 0%,100% 100%,-35% 100%);transform:none}}
.slide.anim .pmk use{animation:mkdraw2 1.4s .3s cubic-bezier(.3,.7,.2,1) both}
@keyframes mkdraw2{0%{stroke-dashoffset:100;fill-opacity:0}70%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0;fill-opacity:1}}
.slide.anim .verdictring .arc{animation:ringdraw 1.2s .3s ease-out both}
@keyframes ringdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:.4}}
.pleft .chk2{width:22px;height:22px;fill:none;stroke:var(--ice);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;align-self:center}
.pclip{width:min(720px,86vw);aspect-ratio:16/9;margin-bottom:26px;border-radius:14px;overflow:hidden;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);background:#000}
.pclip video{width:100%;height:100%;object-fit:cover;display:block}
.s-proof .proof{font-size:clamp(18px,2vw,26px);justify-content:center;flex-wrap:wrap}
.pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;max-width:none}
.pills .doorbtn{min-height:48px;font-size:15px}
.s-worlds{justify-items:start;text-align:left}
.s-theask .sub2{margin-top:26px}
@media (prefers-reduced-motion:reduce){.slide.anim .gl,.slide.anim .pmk use,.slide.anim .verdictring .arc{animation:none}}
@media (max-width:819px){.big{font-size:clamp(38px,11vw,72px)}.verdictring{right:auto;left:50%;top:auto;bottom:9vh;transform:translateX(-50%);width:130px}.pills{gap:8px}.pills .doorbtn{min-height:44px;font-size:14px;padding:0 16px}}

/* ===========================================================================
   lab23 · Law 0 split by width, landscape phones, and every section touched
   =========================================================================== */
/* ---------- LAW 0 below 1024: each mode lays out at its own height ---------- */
@media (max-width:1023px){
  [data-only][data-off="1"]{display:none}
  .dual{display:block}
  .dual.in{display:inline}
}
/* ---------- 2 · the menu reflection: the mirror of the flipped mark reads upright, faded, masked ---------- */
.mrefl{transform:none;top:6px;opacity:.35}
.menu .sheet{padding-top:72px}
/* ---------- 3 · hero: the arm swings at the shoulder, nothing else moves ---------- */
.hhand{animation:none}
.harmrot{transform-box:view-box;transform-origin:0 0}
html:not(.rm) .harmrot{animation:armswing 4.2s ease-in-out infinite}
@keyframes armswing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.dv .armo{fill:none;stroke:var(--lc);stroke-width:18;stroke-linecap:round;vector-effect:none}
.dv .armi{fill:none;stroke:color-mix(in srgb,var(--rose) 20%,var(--ink2));stroke-width:15;stroke-linecap:round;vector-effect:none}
html[data-mode="dev"] .dv .armo{stroke-width:17.5}
.hshotL{stroke-width:1.6}
/* ---------- 4 · hero text: 12 px lower, each mode's copy is one unit, the pill and the proof under it ---------- */
.hero .htxt{padding-top:12px}
.hcopy > [data-only]{align-self:start}
.hero .lines{margin-top:28px;gap:12px}
.hero .htxt > .dual + .dual{margin-top:0}
.hfoot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:56px;align-items:center;justify-items:start;gap:16px 56px}
.hfoot .urlchip{font-size:16px;min-height:52px;padding:0 20px;margin:0;justify-self:start}
.hfoot .proof{justify-self:center;text-align:center;justify-content:center;margin:0}
@media (max-width:1023px){.hfoot{grid-template-columns:1fr;justify-items:start;gap:14px}.hfoot .proof{justify-self:start;text-align:left;justify-content:flex-start}}
/* ---------- 7 · phone portrait: one size step smaller, the picture at most 48 vh ---------- */
@media (max-width:819px){
  :root{--h1:clamp(32px,9vw,40px)}
  .hero .hfig{max-width:min(100%,calc(48vh * 1.25));justify-self:start}
}
/* ---------- 8 · the door: a vertical composition below 1024 ---------- */
.doorlink.v{display:none}
@media (max-width:1023px){
  .xrdef .xrtext{grid-template-columns:1fr}
  .doorlink.h{display:none}
  .doorlink.v{display:block;width:100%;max-width:340px;margin:0 auto;aspect-ratio:300/440;height:auto;max-height:none}
}
/* ---------- 9 · the six-frame panel below 1024: text, then arrows and dots, then the drawing ---------- */
@media (max-width:1023px){
  .detail{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:auto;grid-template-areas:"name name name" "desc desc desc" "bl bl bl" "prev dots next" "art art art";gap:10px 12px;height:auto;padding:16px}
  .dtext{display:contents}
  .dtext .dname{grid-area:name}.dtext .ddesc{grid-area:desc}.dtext .dbl{grid-area:bl;margin:0}
  .ddots{grid-area:dots;justify-self:center;margin:0;padding:0;align-self:center}
  .dnav.prev{grid-area:prev}.dnav.next{grid-area:next}
  .dart{grid-area:art;height:200px;position:relative}
}
/* ---------- 10 · the info row under the demo heading; the combo note under the three frames ---------- */
.demoinfo{grid-column:1;grid-row:3;position:relative;z-index:3;min-height:24px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:6px}
.demoinfo .dual{display:grid}
.demoinfo .dinfo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.demoinfo .devlive{margin-top:0}
.demoinfo .sdk{font:400 12px/1.4 var(--mono);color:#D7E9F2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(100%,60ch)}
.demoinfo .sdk .cm{color:var(--dim)}.demoinfo .sdk .fn{color:var(--acc)}
.dtop{grid-template-rows:auto auto auto}
.steprail{grid-row:1 / span 3}
.combonote{position:absolute;left:0;right:0;top:var(--demoBot,100%);margin:0;text-align:center;font:400 11.5px/1.4 var(--mono);color:var(--dim);max-width:none;pointer-events:none;z-index:3}
.demofoot,.devlive.hB{display:none}
.xr-pin[data-demo="1"] .demoinfo,.xr-pin[data-demo="1"] .combonote{opacity:1;pointer-events:auto}
@media (max-width:1023px){
  .demoinfo{position:static;opacity:1;pointer-events:auto;margin:12px 0 0}
  .minfo .demoinfo{display:flex}
  .combonote{position:static;text-align:left;margin-top:14px;opacity:1}
  .demo-m .mhead .steprail{margin-top:14px}
}
/* ---------- 11 · the done chip: icon and text black on gold ---------- */
.flow li:last-child{color:#1A1206;background:#E8B84A;border-color:#E8B84A}
.flow li:last-child::before{color:#1A1206}
/* ---------- 12 · the three demo frames below 1024: headset and a narrow phone side by side, the laptop under ---------- */
@media (max-width:1023px){
  .demo-m .mframes{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px 12px;align-items:stretch}
  .demo-m .mframes .fr{display:flex;flex-direction:column;min-width:0}
  .demo-m .mframes .fr .cell{width:100%}
  .demo-m .mframes .fr-ar .cell{aspect-ratio:auto;flex:1;min-height:0}
  .demo-m .mframes .fr-lp{grid-column:1 / -1}
  .demo-m .mframes .fr-ar .gyro{display:none}
  .demo-m .mframes .fr-ar .gbtn{font-size:11px;padding:6px 8px}
  .demo-m .mframes .fr-ar .gbadge{font-size:9px;padding:4px 6px}
}
/* ---------- 13 · DEV frames: the verified chip above the button ---------- */
.vchip{display:none;font:500 11px/1 var(--mono);letter-spacing:.02em;color:var(--ice);border:1px solid rgba(127,211,232,.5);border-radius:6px;padding:6px 9px;background:rgba(5,7,15,.72);white-space:nowrap}
html[data-mode="dev"] .gui[data-kind="back"] .vchip{display:inline-block}
/* ---------- 14 · the strip: one section gap after it ---------- */
.demoline{padding:9vh var(--gut) 7vh}
/* ---------- 15-16 · BEFORE / NOW, rebuilt: arms turn at the shoulder; the world is shared ---------- */
.bnfig .bworld,.bnfig .bscreen{transform-box:fill-box;transform-origin:50% 50%}
.bnfig .barmL,.bnfig .barmR,.bnfig .bph{transform-box:view-box;transform-origin:0 0}
.bnfig .bhs{animation:none;transform:none}
.bnfig .bph{transform:none}
html:not(.rm) .bnfig .bhs{animation:none}
html:not(.rm) .bnfig .barmL{animation:armLift 6s ease-in-out infinite}
html:not(.rm) .bnfig .barmR{animation:armPhone 6s ease-in-out infinite}
html:not(.rm) .bnfig .bph{animation:phoneHold 6s ease-in-out infinite}
html:not(.rm) .bnfig .bpay{animation:payscr 6s ease-in-out infinite}
html:not(.rm) .bnfig[data-now="0"] .bworld{animation:wshrink2 6s ease-in-out infinite}
html:not(.rm) .bnfig .bscreen{animation:scrshow 6s ease-in-out infinite}
@keyframes armLift{0%,8%{transform:rotate(0)}20%,72%{transform:rotate(-70deg)}84%,100%{transform:rotate(0)}}
@keyframes armPhone{0%,24%{transform:rotate(0)}36%,60%{transform:rotate(-125deg)}72%,100%{transform:rotate(0)}}
@keyframes phoneHold{0%,24%{transform:rotate(0)}36%,60%{transform:rotate(125deg)}72%,100%{transform:rotate(0)}}
@keyframes wshrink2{0%,14%{transform:scale(1);opacity:1}30%,74%{transform:translate(146px,-124px) scale(.3);opacity:.5}90%,100%{transform:scale(1);opacity:1}}
html.rm .bnfig .bhs{transform:none}html.rm .bnfig .barmL{transform:rotate(-70deg)}html.rm .bnfig .barmR{transform:rotate(-125deg)}html.rm .bnfig .bph{transform:rotate(125deg)}html.rm .bnfig .bpay{opacity:1}
html.rm .bnfig[data-now="0"] .bworld{transform:translate(146px,-124px) scale(.3);opacity:.5}html.rm .bnfig[data-now="0"] .bscreen{opacity:1}
html.rm .bnfig[data-now="1"] .bworld{transform:none;opacity:1}html.rm .bnfig[data-now="1"] .bscreen{opacity:0}
html:not(.rm) .bnfig[data-x="1"] .bworld,html:not(.rm) .bnfig[data-x="1"] .barmL,html:not(.rm) .bnfig[data-x="1"] .barmR,html:not(.rm) .bnfig[data-x="1"] .bph,html:not(.rm) .bnfig[data-x="1"] .bpay,html:not(.rm) .bnfig[data-x="1"] .bscreen{animation:none;transform:none;opacity:1}
html:not(.rm) .bnfig[data-x="1"] .bscreen{opacity:0}html:not(.rm) .bnfig[data-x="1"] .bpay{opacity:0}
.bnfig .bload{transform-box:fill-box;transform-origin:50% 50%}
.bnfig .loadtrk{stroke-width:3}.bnfig .loadarc{stroke-width:3}
/* NOW: shots, the panel in the world, the pocket and the dotted line */
.bnfig .nshot{stroke:rgba(247,147,26,.55);stroke-width:1.6;stroke-linecap:round}
html[data-mode="dev"] .bnfig .nshot{stroke:rgba(127,211,232,.6)}
.bnfig .npulse{fill:#FFD9A0}
.bnfig .nbams circle{fill:none;stroke:#F7931A;stroke-width:2}
html[data-mode="dev"] .bnfig .nbams circle{stroke:#7FD3E8}
.bnfig .npocket use{fill:var(--acc)}
.bnfig .nbadge rect{fill:rgba(40,18,4,.85);stroke:rgba(247,147,26,.6);stroke-width:1}
.bnfig .nbadge text{font:500 8px var(--mono);letter-spacing:.14em;fill:#FFD9A0}
.bnfig .namt{font:500 18px var(--mono);fill:#EAF8FD}.bnfig .nsm{font-size:7px;letter-spacing:.1em;fill:#9EC3D2}
.bnfig .nst{font:500 7.5px var(--mono);letter-spacing:.2em;fill:#7FD3E8}
.bnfig .npanel,.bnfig .nbadge{transform-box:fill-box;transform-origin:50% 50%}
.bnfig .drop{opacity:0;offset-path:path('M178 322 C232 300 286 226 340 160');offset-rotate:0deg;offset-distance:0%}
html:not(.rm) .bnfig[data-now="1"] .drop{animation:dropride 7s ease-in-out infinite}
html:not(.rm) .bnfig[data-now="1"] .drop.d2{animation-delay:.35s}
html:not(.rm) .bnfig[data-now="1"] .drop.d3{animation-delay:.7s}
@keyframes dropride{0%,50%{opacity:0;offset-distance:0%}54%{opacity:1}72%{opacity:1;offset-distance:100%}76%,100%{opacity:0;offset-distance:100%}}
html.rm .bnfig[data-now="1"] .drop{opacity:1;offset-distance:60%}
html.rm .bnfig[data-now="1"] .drop.d2{offset-distance:45%}html.rm .bnfig[data-now="1"] .drop.d3{offset-distance:30%}
.bnfig .flow{opacity:0}
.bnfig[data-now="1"] .flow{opacity:1}
/* ---------- 20 · the mottos on the threshold: readable on a phone ---------- */
@media (max-width:1023px){
  .thcap{font-size:15px;letter-spacing:.1em;line-height:1.4;padding:0 20px 0 40px}
  .thcap .dual.in{display:block}
  .thcap [data-only]{display:block;text-wrap:balance}
}
/* ---------- 21 · the entry: glyphs at 22 px and a readable boundary label at 390 ---------- */
.atrium .olbl{font-size:10px}
@media (max-width:1023px){
  .atrium .eg{scale:1.6}
  .atrium .olbl{font-size:20px;letter-spacing:.04em}
}
/* ---------- 22 · the USER lens shows words ---------- */
.sees.words{width:200px}
.sees .wlbl{font:500 9.5px/1 var(--mono);letter-spacing:.2em;color:var(--dim);margin-bottom:12px;max-width:none}
.sees .wl{font:500 13px/1.5 var(--mono);letter-spacing:.06em;color:#F2EBE6;margin-top:8px;max-width:none}
.sees .wl.vf{color:var(--ice)}
/* ---------- 24 · the rails motto under the rail card ---------- */
.orbitcard .motto{margin-top:10px;font-size:11.5px;color:var(--acc)}
/* ---------- 25-26 · the road: a stack below 1024, the card under the orbit up to 1200 ---------- */
@media (max-width:1200px) and (min-width:1024px){
  .road .rtxt{max-width:520px}
  .orbitcard{left:var(--gut);right:var(--gut);width:auto;bottom:3vh}
  #orbitpick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
}
@media (max-width:1023px){
  .road{height:auto;padding:12vh 0 8vh}
  .road-pin{position:relative;top:auto;height:auto;overflow:visible;display:flex;flex-direction:column;gap:18px}
  .road-pin > canvas{position:relative;height:52vh;min-height:280px;max-height:460px;order:2}
  .road .rtxt{position:static;max-width:none;order:1;padding:0 20px 0 40px}
  .road .rtxt[data-off="1"]{opacity:1}
  .orbitlbl{top:auto;bottom:auto}
  .orbitcard{position:static;width:auto;margin:0 20px 0 40px;order:3;opacity:1!important;pointer-events:auto!important}
  #orbitpick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-4px;padding:2px 4px}
  #orbitpick::-webkit-scrollbar{display:none}
  .bothways2{position:static;order:4;opacity:1;transform:none;pointer-events:auto;padding:0 20px 0 40px;margin-top:14px}
  .bothways2 .motto{display:none}
}
@media (max-height:499px) and (max-width:1023px){.road-pin > canvas{height:60vh;min-height:0}}
/* ---------- 27 · the two boxes start the split ---------- */
.sbox.player{background:color-mix(in srgb,#E8B84A 12%,var(--ink))}
.sbox.world{background:color-mix(in srgb,#7FD3E8 12%,var(--ink))}
html[data-mode="user"] .sbox.world,html[data-mode="dev"] .sbox.player{opacity:.7}
/* ---------- 28-29 · the sides bar: a wider stripe, the chevron up, one gradient into the bar and out of it ---------- */
.coinbar{grid-template-columns:1fr 88px 1fr}
.stripe svg{transform:rotate(0)}
.stripe[aria-expanded="true"] svg{transform:rotate(180deg)}
.sides{background:linear-gradient(180deg,transparent 0,transparent 20%,color-mix(in srgb,#E8B84A 22%,transparent) 100%) left top / 50% calc(100% - 30vh) no-repeat,linear-gradient(180deg,transparent 0,transparent 20%,color-mix(in srgb,#7FD3E8 20%,transparent) 100%) right top / 50% calc(100% - 30vh) no-repeat}
.sides::after{height:30vh;background:linear-gradient(180deg,color-mix(in srgb,#E8B84A 22%,transparent),transparent 92%) left top / 50% 100% no-repeat,linear-gradient(180deg,color-mix(in srgb,#7FD3E8 20%,transparent),transparent 92%) right top / 50% 100% no-repeat}
.coinbar{border:0}
@media (max-width:1023px){
  .sides{background:linear-gradient(180deg,transparent 0,transparent 20%,color-mix(in srgb,#E8B84A 14%,transparent) 100%) left top / 100% calc(100% - 30vh) no-repeat}
  .sides::after{background:linear-gradient(180deg,color-mix(in srgb,#E8B84A 14%,transparent),transparent 92%)}
  .coinbar{grid-template-columns:1fr;grid-template-rows:auto 56px auto}
  .stripe{flex-direction:row;gap:12px}
  .stripe .vt{writing-mode:horizontal-tb;transform:none}
  .stripe svg{transform:rotate(0)}
}
/* ---------- 30 · go further: three drawings in the line style ---------- */
.gart{height:110px}
.gart svg{width:100%;height:100%}
.groute .rt{fill:none;stroke:color-mix(in srgb,var(--acc) 45%,transparent);stroke-width:1.6;stroke-linecap:round}
.groute .stops circle{fill:var(--ink2);stroke:var(--acc);stroke-width:1.6}
html:not(.rm) .groute .stops circle{animation:stoplit 4.8s ease-in-out infinite;animation-delay:calc(var(--i) * .5s)}
@keyframes stoplit{0%,10%,100%{fill:var(--ink2)}14%,44%{fill:var(--acc)}}
.gtile .tile1,.gtile .plus{transform-box:fill-box;transform-origin:50% 50%}
html:not(.rm) .gtile .tile1{animation:tileflip 5s ease-in-out infinite}
html:not(.rm) .gtile .plus{animation:plusturn 5s ease-in-out infinite}
@keyframes tileflip{0%,54%{transform:scaleY(1)}66%{transform:scaleY(.08)}78%,100%{transform:scaleY(1)}}
@keyframes plusturn{0%,54%{transform:rotate(0)}66%{transform:rotate(45deg) scale(.6)}78%,100%{transform:rotate(90deg)}}
.garch .lit{fill:color-mix(in srgb,var(--acc) 28%,transparent);stroke:var(--acc);stroke-width:1.4}
html:not(.rm) .garch .lit{animation:doorglow 3s ease-in-out infinite}
/* ---------- 31 · footer mottos: one grey mono ---------- */
.foot .motto,.motto.foot2{color:var(--dim)}
/* ---------- 34 · the crosses diagrams: a right-edge fade and a hint until the first scroll ---------- */
.crossfig{position:relative}
.seqwrap{position:relative}
.scrollhint{display:none}
@media (max-width:819px){
  .crossfig > figure{position:relative}
  .crossfig{position:relative}
  .crossfig::after{content:"";position:absolute;right:0;top:0;bottom:0;width:56px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--ink));transition:opacity .3s ease}
  .crossfig:has(figure[data-scrolled="1"]:not([data-off="1"]))::after{opacity:0}
  .scrollhint{display:inline-block;position:sticky;left:calc(100% - 96px);top:0;float:right;margin:4px 0 0;font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--acc);padding:6px 10px;border-radius:99px;border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);background:color-mix(in srgb,var(--ink) 80%,transparent);transition:opacity .3s ease;z-index:2}
  figure[data-scrolled="1"] .scrollhint{opacity:0}
}
/* ---------- 35 · worlds: three columns from 1200, the third card wide below ---------- */
@media (max-width:1199px) and (min-width:701px){
  .wcards{grid-template-columns:1fr 1fr}
  .wcard:nth-child(3){grid-column:1 / -1;flex-direction:row}
  .wcard:nth-child(3) .wart{width:46%;flex:none;aspect-ratio:auto;border-bottom:0;border-right:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
  .wcard:nth-child(3) .wbody{flex:1}
}
/* ---------- 38 · judges: the flap ---------- */
.jart .flap{fill:color-mix(in srgb,var(--acc) 10%,transparent);stroke:var(--acc);stroke-width:1.4;stroke-linejoin:round}
@media print{.jart .flap{fill:none!important}}
/* ---------- 39 · judges: the masonry packs upward ---------- */
.jd2 .jgrid{grid-auto-rows:1px;row-gap:0;align-items:stretch}
.jc{align-self:start;height:max-content}
@media print{.jd2 .jgrid{grid-auto-rows:auto}.jc{grid-row:auto!important}}
/* ---------- the mark ride mottos and small bits ---------- */
.dv .mitt{stroke-width:1.5}
/* ===========================================================================
   LANDSCAPE PHONE · height under 500, width under 1024: a real layout
   =========================================================================== */
@media (max-height:499px) and (max-width:1023px){
  :root{--bar:48px;--gut:20px}
  .modes{grid-template-columns:1fr 64px 1fr}
  .modes [role="tab"]{padding:0 16px;gap:2px;align-items:flex-start!important}
  .modes [data-mode="dev"]{align-items:flex-end!important}
  .modes [role="tab"] b{font-size:16px}
  .modes [role="tab"] small{display:block;font-size:9px}
  .mkbtn{width:40px;height:40px;margin:-20px 0 0 -20px}.mkbtn svg{width:20px;height:20px}
  .menu{top:calc(var(--bar) + 4px)}
  .ruler{padding-top:12px;padding-bottom:12px}
  /* hero: text left, picture right at most 55 vh */
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;row-gap:12px;padding:3vh 20px 4vh 40px;align-items:start;min-height:0}
  .hero .brand{margin-bottom:10px}
  .hero .brand svg{width:16px;height:21px}.hero .brand b{font-size:11px}
  .hero .htxt{padding-top:0}
  .hero h1{font-size:clamp(22px,5.6vh,30px)}
  .hero .lines{margin-top:10px;gap:5px}.hero .lines p{font-size:12.5px;line-height:1.4}
  .hero .hfig{max-width:min(100%,calc(55vh * 1.25));justify-self:end}
  .bladecap{margin-top:6px;font-size:9px}
  .hfoot{grid-template-columns:1fr 1fr;gap:8px 24px;align-items:center}
  .hfoot .proof{justify-self:start;text-align:left;font-size:13px;flex-direction:row}
  .hfoot .urlchip{font-size:13px;min-height:40px;padding:0 14px}
  /* the definition */
  .xrdef{padding:8vh 20px 8vh 40px}
  .xrdef .xrtext{grid-template-columns:minmax(0,1fr) 200px;gap:20px;align-items:center}
  .doorlink.v{max-width:200px;max-height:80vh}
  /* the six-frame panel: text left, arrows and the drawing right at most 40 vh */
  .xr-pin{padding:6vh 20px 4vh 40px}
  .detail{grid-template-columns:minmax(0,1fr) 44px minmax(120px,30vw) 44px;grid-template-areas:"name prev art next" "desc prev art next" "bl prev art next" "dots prev art next";gap:6px 10px}
  .dart{height:min(40vh,180px);align-self:center}
  .dnav{align-self:center}
  .ddots{justify-self:start}
  .six{grid-template-columns:repeat(3,1fr);gap:14px 10px}
  /* the demo: 2 + 1 */
  .demo-m{margin-top:32px}
  .demo-m .mframes{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .demoline{padding:6vh 20px 6vh 40px}
  /* BEFORE / NOW: the card at most 70 vh, the text beside it */
  .bn{height:340vh}
  .bngrid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:22px;padding:0 20px 0 40px;align-content:center}
  .bnfig{order:0;max-width:calc(70vh * 1.3);justify-self:end}
  .beat h2{font-size:20px;margin-bottom:6px;max-width:none}
  .beat .dual p{font-size:12.5px;line-height:1.4}
  .bntag{margin-bottom:6px;font-size:10px}
  .bnfig .bntag2{left:6px;top:6px;font-size:9px;padding:3px 6px}
  /* the threshold and the entry */
  .thstage{height:min(64vh,112vw)}
  .thcap{top:calc(50% + 34vh);font-size:13px}
  .entry-pin{gap:6px}
  .entryline p{font-size:16px}
  .atrium{width:min(100%,calc(66vh * 2))}
  .entryin{gap:4px}
  /* pocket and eyes */
  .pk{padding-top:8vh;padding-bottom:8vh}
  .pkgrid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:24px}
  .pkblock{min-height:0;padding:3vh 0}
  /* rails: the orbit band at most 60 vh */
  .road{padding:6vh 0}
  .road-pin > canvas{height:60vh;min-height:0}
  /* sides, go further, end */
  .sides{padding-top:8vh}
  .scene{padding-top:8vh;padding-bottom:8vh}
  .gocards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .gocard{min-height:0;padding:12px 14px 14px}
  .gart{height:70px}
  .end{padding:8vh 20px 4vh 40px}
  .end .mk{width:44px;height:58px;margin-bottom:8px}
  .end .big1{font-size:clamp(24px,6vh,34px)}
  .end .mail{margin-top:3vh}
  /* journey: two columns, the instrument beside the text */
  .jhead{padding:6vh 20px 4vh 40px}
  .jhead h1{font-size:clamp(28px,7vh,40px)}
  .lead{font-size:14px;margin-top:10px}
  .twostates{grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
  .st2{padding:12px}.st2 figcaption{font-size:12px;margin-top:8px}
  .jf{padding:5vh 20px 5vh 40px;min-height:0}
  .jgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:24px;row-gap:0;align-items:start}
  .jgrid.flip .jtxt{order:2}
  .jtxt h2{font-size:22px}
  .jtxt p{font-size:13px;line-height:1.45}
  .jstep{margin-bottom:8px}.jstep b{width:26px;height:26px;font-size:12px}
  .inst{min-height:0;padding-bottom:28px}
  .ibody{padding:14px 14px 6px;gap:10px}
  .mview{height:150px}.mock[data-in="1"] .mview{height:180px}
  .payscene{height:220px}
  .shellstage{height:200px}
  .dialwrap{width:150px;height:150px}.dialnum{font-size:24px}
  .jtail{padding:6vh 20px 6vh 40px}
  .crossbox{grid-template-columns:1fr 1fr;gap:16px}
  /* worlds, questions */
  .whead,.wcards,.wtail{padding-left:40px;padding-right:20px}
  .whead{padding-top:6vh;padding-bottom:3vh}
  .wcards{grid-template-columns:1fr 1fr 1fr;gap:12px}
  .wcard:nth-child(3){grid-column:auto;flex-direction:column}
  .wcard:nth-child(3) .wart{width:auto;aspect-ratio:5/3;border-right:0;border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
  .wcard .wart{aspect-ratio:5/2}
  .qhead{padding:6vh 20px 2vh}
  .qhead h1{font-size:clamp(28px,7vh,40px)}
}

/* ===========================================================================
   PITCH, lab23: thirteen slides, text left and a website graphic right,
   one display size, one body size, one mono size
   =========================================================================== */
.slide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:4vw;align-items:center;justify-items:stretch;padding:8vh 6vw;text-align:left}
.stx{min-width:0}
.sg{min-width:0;display:flex;align-items:center;justify-content:center}
.sg > *{width:100%;max-width:640px}
.big{font:700 clamp(34px,4.6vw,72px)/1 var(--sans);letter-spacing:-.035em;color:var(--text);max-width:none}
.line{font:400 clamp(16px,1.35vw,20px)/1.45 var(--sans);color:var(--body);max-width:46ch;margin-top:22px}
.sub2,.note,.tag2,.purl,.pmail,.pleft{font-size:13px}
.sub2{margin-top:20px;letter-spacing:.14em}
.tag2{font:500 13px/1.4 var(--mono);letter-spacing:.06em;color:var(--body);margin:-10px 0 22px;max-width:none}
.purl{margin:22px 0 0;padding:10px 16px;font-size:13px}
.pmark{margin-bottom:22px}
.note{margin-top:22px;font-size:13px}
.ctr{position:fixed;top:22px;right:clamp(16px,3vw,40px);z-index:40;font:500 13px/1 var(--mono);letter-spacing:.12em;color:var(--dim);font-variant-numeric:tabular-nums;max-width:none}
.proof{margin:0;font-size:clamp(16px,1.35vw,20px);flex-wrap:wrap}
.pleft{margin-top:18px}
.pmail{margin-top:18px}
.three2{margin-top:18px;font:500 clamp(14px,1.2vw,17px)/1.5 var(--sans);color:var(--body);max-width:none}
.three2 span{color:var(--gold);margin:0 8px}
.s14 .pmark{flex-direction:row;gap:12px}.s14 .pmark svg{width:34px;height:45px}
/* graphics */
.pvisor{width:100%;aspect-ratio:10/5.6;margin:0}
.pvisor .pscr{clip-path:url(#visorclip)}
.pvisor .pscr svg.hscene{position:absolute;inset:0;width:100%;height:100%}
.pgui{transition:opacity .3s ease;opacity:0}
.pgui[data-show="1"]{opacity:1}
.ppanel{transition:opacity .3s ease;opacity:0;--pps:1}
.ppanel[data-show="1"]{opacity:1}
.ppanel.big5{--pps:1.1}
.ppanel .pbtns button{pointer-events:none;transition:transform .15s ease,background .15s ease}
.ppanel .pbtns button.press{transform:scale(.96);background:rgba(127,211,232,.4)}
.mini6{width:100%;margin:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px}
.mf{opacity:.55;transform:none}
html:not(.rm) .s2 .mf{animation:mflit 6s ease-in-out infinite;animation-delay:calc(var(--k) * 1s)}
@keyframes mflit{0%,6%{opacity:.55;transform:translateY(0)}10%,20%{opacity:1;transform:translateY(-6px)}26%,100%{opacity:.55;transform:translateY(0)}}
html.rm .mf{opacity:1}
.ppage{width:min(380px,100%);margin:0}
.ppage .pset{transition:transform .15s ease,background .15s ease}
.ppage .pset.press{transform:scale(.94);background:#3a2a2e}
.pshots{left:14%;top:12%;font-size:11px}
.rmsg2{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);opacity:0;transition:opacity .3s ease;white-space:nowrap;font-size:11px}
.rmsg2[data-show="1"]{opacity:1}
.pclip{width:100%;margin:0}
.pclipart .glow{fill:color-mix(in srgb,var(--acc) 22%,transparent);filter:blur(6px)}
.pclipart .clip{fill:color-mix(in srgb,var(--ink2) 80%,transparent);stroke:var(--gold);stroke-width:1.6}
.pclipart .play{fill:var(--gold);transform-box:fill-box;transform-origin:50% 50%}
html:not(.rm) .pclipart .play{animation:playbreathe 2.4s ease-in-out infinite}
@keyframes playbreathe{50%{transform:scale(1.12);opacity:.8}}
.pbn{max-width:560px}
.pbn .bntag2{position:absolute;left:14px;top:12px}
.porbit{display:block;width:100%;aspect-ratio:1.4;max-height:60vh;margin:0}
.porbit canvas{width:100%;height:100%;display:block}
.prails{margin-top:22px;max-width:46ch}
.prails li{font-size:13px;padding:8px 0}
.pnext{width:100%;max-width:none;margin:0}
.pnext h2{font:500 12px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ext);margin-bottom:14px}
.pnext li{font-size:clamp(15px,1.2vw,18px)}
.pflow .pl{font:500 10px var(--mono);letter-spacing:.1em;fill:var(--dim)}
.pflow .pl.on{fill:var(--gold)}.pflow .pl.nx{fill:var(--ext)}
.pflow .mkuse{fill:var(--gold)}
.pflow .lit{fill:color-mix(in srgb,var(--gold) 28%,transparent);stroke:var(--gold);stroke-width:1.4}
html:not(.rm) .pflow .lit{animation:doorglow 3s ease-in-out infinite}
.pflow .lane{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round}
.pflow .lane.nx{stroke:var(--ext);stroke-dasharray:5 6}
.pflow .lanea{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pflow .coin{color:#F7931A;offset-rotate:0deg;opacity:0}
.pflow .c1{offset-path:path('M100 92 H236')}
.pflow .c2{offset-path:path('M236 124 H100');color:var(--ext)}
html:not(.rm) .pflow .coin{animation:laneride 2.4s linear infinite}
html:not(.rm) .pflow .c2{animation-delay:1.2s}
@keyframes laneride{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
html.rm .pflow .coin{opacity:1;offset-distance:50%}
.parch .lit{fill:color-mix(in srgb,var(--gold) 28%,transparent);stroke:var(--gold);stroke-width:1.4;opacity:0}
html:not(.rm) .parch .lit{animation:archturn 6s ease-in-out infinite}
html:not(.rm) .parch .l2{animation-delay:2s}html:not(.rm) .parch .l3{animation-delay:4s}
@keyframes archturn{0%,4%{opacity:0}10%,30%{opacity:1}38%,100%{opacity:0}}
html.rm .parch .l2{opacity:1}
.pmoney .brace{font:500 44px var(--mono);fill:var(--gold)}
.pmoney .box{fill:color-mix(in srgb,var(--gold) 8%,transparent);stroke:var(--lc);stroke-width:1.3}
.pmoney .lbl{font:500 8px var(--mono);letter-spacing:.1em;fill:var(--gold)}
.pmoney .a path{stroke:var(--gold)}
.pmoney .mb{transform-box:fill-box;transform-origin:50% 50%}
html:not(.rm) .pmoney .mb{animation:boxlit 4.5s ease-in-out infinite}
html:not(.rm) .pmoney .b2{animation-delay:1.5s}html:not(.rm) .pmoney .b3{animation-delay:3s}
@keyframes boxlit{0%,6%{transform:scale(1)}12%,28%{transform:scale(1.08)}36%,100%{transform:scale(1)}}
.s14 .pmk{width:min(220px,40%);margin:0;color:var(--gold)}
.s14 .pmk use{fill:currentColor;fill-opacity:1;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:0}
html:not(.rm) .s14 .pmk use{animation:mkloop 6s cubic-bezier(.3,.7,.2,1) infinite}
@keyframes mkloop{0%{stroke-dashoffset:100;fill-opacity:0}40%{stroke-dashoffset:0;fill-opacity:0}55%,88%{stroke-dashoffset:0;fill-opacity:1}100%{stroke-dashoffset:0;fill-opacity:0}}
.slide.anim .pmk use{animation:none}
.pills{margin-top:22px}
/* the hero shooter inside the visor keeps its home colours */
.pvisor .hscene .hbg{fill:#23101F}.pvisor .hscene .hglow{fill:rgba(138,42,98,.34)}.pvisor .hscene .hhz{stroke:rgba(233,164,202,.6);stroke-width:1.4;fill:none}
.pvisor .hscene .hgrid path{fill:none;stroke:rgba(178,58,128,.45);stroke-width:1}
.pvisor .hscene .htg{fill:none;stroke:rgba(240,176,212,.9);stroke-width:2}
.pvisor .hscene .hshot{stroke:rgba(247,147,26,.5);stroke-width:1.6;fill:none}.pvisor .hscene .hsat{fill:#F7931A}
.pvisor .hscene .bams circle{fill:none;stroke:#F7931A;stroke-width:2}.pvisor .hscene .bams circle.pink{stroke:#F4A8D0}
.pvisor .hscene .hpulse{fill:#FFD9A0}
/* the BEFORE / NOW drawing on the pitch keeps the home colours, gold */
.pbn .frame{fill:color-mix(in srgb,var(--ink2) 80%,transparent);stroke:color-mix(in srgb,var(--text) 12%,transparent);stroke-width:1}
/* phones and landscape */
@media (max-width:819px){
  .slide{grid-template-columns:1fr;align-content:center;row-gap:14px;padding:9vh 20px 6vh}
  .sg{order:-1}
  .sg > *{max-width:min(100%,calc(40vh * 1.8))}
  .pvisor{width:min(100%,calc(40vh * 1.8))}
  .mini6{gap:10px}
  .ppage{width:min(280px,100%)}.ppage .pdial{width:130px;height:130px}.ppage .pnum{font-size:24px}
  .porbit{max-height:36vh}
  .pbn{max-width:min(100%,calc(40vh * 1.3))}
  .big{font-size:clamp(30px,9vw,44px)}
  .line{margin-top:12px;font-size:15px}
  .note{margin-top:12px}
  .prails{margin-top:10px}.prails li{font-size:12px;padding:6px 0}
  .pnext{padding:14px 16px}.pnext li{font-size:14px}.pnext h2{margin-bottom:8px}
  .pills{margin-top:12px;gap:8px}.pills .doorbtn{min-height:44px;font-size:14px;padding:0 16px}
  .pmark{margin-bottom:12px}.tag2{margin:-4px 0 12px}.purl{margin-top:12px}
  .ctr{top:16px;right:16px}
  .ppanel{--pps:.72}.ppanel.big5{--pps:.8}
  .pgui .gbtn{font-size:13px;padding:8px 12px}
  .three2 span{margin:0 6px}
  .pbrand b{display:none}
  .timer{bottom:12px}
  .judgehint{width:calc(100% - 32px);text-align:center}
}
@media (max-height:499px) and (max-width:1023px){
  .slide{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;row-gap:0;padding:6vh 20px 6vh 40px}
  .sg{order:0}
  .sg > *{max-width:min(100%,calc(80vh * 1.8))}
  .pvisor{width:min(100%,calc(78vh * 1.8))}
  .porbit{max-height:78vh}
  .pbn{max-width:min(100%,calc(78vh * 1.3))}
  .ppage{width:min(240px,100%)}.ppage .pdial{width:110px;height:110px}.ppage .pnum{font-size:20px}.ppage .pbody{padding:10px 14px 12px;gap:8px}
  .big{font-size:clamp(20px,6vh,30px)}
  .line{margin-top:8px;font-size:12.5px;line-height:1.4}
  .note{margin-top:8px;font-size:11px}
  .sub2,.tag2{font-size:11px}
  .prails{margin-top:6px}.prails li{font-size:11px;padding:4px 0}
  .pnext{padding:10px 12px}.pnext li{font-size:12px}.pnext h2{margin-bottom:6px;font-size:10px}.pnext ul{gap:4px}
  .pills{margin-top:8px;gap:6px}.pills .doorbtn{min-height:40px;font-size:12px;padding:0 12px}
  .pmark{margin-bottom:8px}.pmark svg{width:22px;height:29px}.pmark b{font-size:11px}
  .tag2{margin:-2px 0 8px}.purl{margin-top:8px;padding:6px 12px;font-size:11px}
  .pleft{margin-top:10px;padding:8px 12px}.pleft b{font-size:16px}
  .three2{margin-top:10px;font-size:12px}.pmail{margin-top:8px}
  .ctr{top:12px;right:16px}.pbrand{top:12px;left:16px}
  .ppanel{--pps:.62}.ppanel.big5{--pps:.7}
  .pgui .gbtn{font-size:11px;padding:6px 10px}.pgui .gbadge{font-size:10px}
  .mini6{gap:8px}.mf figcaption{font-size:9px}
  .s14 .pmk{width:min(140px,40%)}
  .judgehint{display:none}
}
@media (prefers-reduced-motion:reduce){.pgui,.ppanel,.rmsg2,.ppage .pset{transition:none}}
/* 14 · the BEFORE / NOW scene sits in the upper part of its pin, so the strip is one section gap above it */
@media (min-width:1024px){.bn-pin{align-items:start}.bngrid{padding-top:9vh}}
@media (max-height:499px) and (max-width:1023px){.xrdef .xrtext{grid-template-columns:minmax(0,1fr) 150px;align-items:start}.doorlink.v{max-width:150px}}
/* the crosses figure is the scroller: the grid cell may not grow past the page */
@media (max-width:1023px){.crossbox{grid-template-columns:minmax(0,1fr)}.crossfig,.crossbox .seqwrap{min-width:0;max-width:100%}}

/* ===========================================================================
   lab24 · two rails and receiving are real: the tray, and the design fixes
   =========================================================================== */
/* ---------- the receive tray: the panel's own glass, smaller, never branded ---------- */
.panel.tray{width:300px;padding:18px 18px 16px}
.tray .amt{font-size:40px;margin:12px 0 4px}
.tray .pbtns{margin-top:14px}
.tray .tb{flex:1;display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:9px;font:500 12px/1 var(--mono);letter-spacing:.16em;
  border:1px solid rgba(143,211,232,.4);background:rgba(14,26,38,.6);color:#CDEBF6;transition:background .15s ease,transform .15s ease}
.tray .tb.yes{background:linear-gradient(180deg,rgba(127,211,232,.3),rgba(127,211,232,.12));border-color:rgba(143,211,232,.8);color:#EAF8FD}
.tray[data-st="accept"] .tb.yes{background:rgba(127,211,232,.62);color:#04121C;transform:scale(.96)}
.tray .pst{display:none;margin-top:14px}
.tray[data-st="received"] .pbtns{display:none}
.tray[data-st="received"] .pst{display:flex}
.panel .chip{letter-spacing:.04em}
/* ---------- C1 · hero: the pill 24 px under the text, left; PROOF and the claim one row, right, under the picture ---------- */
.hero .htxt > .urlchip{margin-top:24px;font-size:16px;min-height:52px;padding:0 20px}
.hfoot{display:flex;justify-content:flex-end;align-items:center}
.hfoot .proof{flex-direction:row;align-items:baseline;flex-wrap:nowrap;justify-content:flex-end;text-align:right;white-space:nowrap}
.hfoot .proof span:last-child{white-space:nowrap}
@media (max-width:1023px){
  .hfoot{justify-content:flex-start}
  .hfoot .proof{justify-content:flex-start;text-align:left;white-space:normal;flex-wrap:wrap}
  .hfoot .proof span:last-child{white-space:normal}
}
@media (max-width:819px){.hfoot .proof{flex-direction:column;gap:8px}.hero .htxt > .urlchip{font-size:15px;min-height:48px}}
@media (max-height:499px) and (max-width:1023px){
  .hero .htxt > .urlchip{margin-top:12px;font-size:13px;min-height:40px;padding:0 14px}
  .hfoot{grid-column:2;justify-content:flex-end}
  .hfoot .proof{font-size:12.5px;flex-direction:row;justify-content:flex-end;text-align:right}
}
/* ---------- C2 · hero on a phone: the whole picture in the card; the handle sits on the floor, below the headset ---------- */
@media (max-width:819px){
  .hero .hfig{max-width:100%;justify-self:stretch}
  .bladegrab{top:86%}
}
/* ---------- C5 · the NOW scene is driven by the frame loop on the home page ---------- */
.bnfig[data-js] .npanel,.bnfig[data-js] .nbadge,.bnfig[data-js] .nyes,.bnfig[data-js] .nchk,.bnfig[data-js] .nst,.bnfig[data-js] .drop,.bnfig[data-js] .flow{animation:none!important}
.bnfig[data-js] .drop{offset-path:none;opacity:0}
.bnfig[data-js] .flow{opacity:0}
.bnfig .ntray,.bnfig .nprize{opacity:0}
.bnfig .trbox{fill:rgba(20,34,48,.94);stroke:rgba(143,211,232,.45);stroke-width:1}
.bnfig .trk{font:500 6.5px var(--mono);letter-spacing:.14em;fill:#9EC3D2}
.bnfig .trv{font:500 7px var(--mono);letter-spacing:.02em;fill:#E3F6FC}
.bnfig .trl{stroke:rgba(143,211,232,.18);stroke-width:1}
.bnfig .tram{font:500 18px var(--mono);fill:#EAF8FD}
.bnfig .tryes{fill:rgba(127,211,232,.3);stroke:rgba(143,211,232,.8);stroke-width:1}
.bnfig .trno{fill:rgba(14,26,38,.6);stroke:rgba(143,211,232,.4);stroke-width:1}
.bnfig .trb{font:500 7px var(--mono);letter-spacing:.14em;fill:#EAF8FD}
.bnfig .trst{font:500 7.5px var(--mono);letter-spacing:.18em;fill:#7FD3E8}
.bnfig .trdone{opacity:0}
.bnfig .trchk{stroke-width:2.4}
.bnfig .nprize use{color:#F7931A}
.bnfig .drop use{color:var(--acc)}
/* ---------- C6 · the arch appears when the ride lands; the gold of the ride hands over in place ---------- */
.arch{opacity:0}
.arch #archg{fill:#F1C766;fill-opacity:1;stroke:none;stroke-dasharray:none}
html[data-mode="dev"] .arch{visibility:hidden}
.gate svg{transform-style:preserve-3d}
/* ---------- C7 · rails on a phone: a taller band, the mark centred, the label inside; the motto under the card ---------- */
.orbitmotto{position:absolute;right:var(--gut);bottom:calc(6vh - 30px);z-index:2;margin:0;font-size:11.5px;color:var(--acc);transition:opacity .35s ease;max-width:none}
.orbitmotto[data-off="1"]{opacity:0}
@media (max-width:1200px) and (min-width:1024px){.orbitmotto{left:var(--gut);right:auto;bottom:calc(3vh - 26px)}}
@media (max-width:1023px){
  .road-pin > canvas{height:64vh;min-height:320px;max-height:600px}
  .orbitmotto{position:static;order:3;margin:-8px 20px 0 40px;opacity:1!important}
  .bothways2{order:4}
}
@media (max-height:499px) and (max-width:1023px){.road-pin > canvas{height:62vh;min-height:0;max-height:none}}
/* ---------- C8 · the entry: glyphs at least 22 px, the boundary label 12 px, at any width ---------- */
.atrium .eg{scale:var(--egs,1)}
.atrium .olbl{font-size:var(--olf,12px)}
@media (max-width:1023px){.atrium .eg{scale:var(--egs,1.6)}.atrium .olbl{font-size:var(--olf,20px)}}
/* ---------- C4 · the device panel never fades over the demo ---------- */
.detail{transition:none}
.xr-pin[data-demo="1"] .detail{visibility:hidden}
/* ---------- C13 · the six-frame panel on a phone: the drawing at 60 % height ---------- */
@media (max-width:1023px){.dart{height:120px}}
@media (max-height:499px) and (max-width:1023px){.dart{height:min(24vh,108px)}}
/* ---------- the next list: a tag carries its own chip ---------- */
.next .ntag{display:inline-block;margin-left:8px;font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--ext);border:1px solid color-mix(in srgb,var(--ext) 55%,transparent);border-radius:99px;padding:3px 7px;vertical-align:1px;white-space:nowrap}
/* ---------- questions: the two custody chips, as lines ---------- */
.tback .chipline{display:inline-block;margin-top:8px;font:500 11.5px/1.35 var(--mono);letter-spacing:.03em;border-radius:6px;padding:5px 8px;max-width:none}
.tback .chipline.nuts{color:#F5A08C;border:1px dashed #F5A08C}
.tback .chipline.coins{color:#7CE0C8;border:1px solid #3CC4B4}
.tback .chipline + .chipline{margin-left:0}
.tback .chips2{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px}
.tback .chips2 .chipline{margin:0}
/* ---------- worlds: the PAY chip ---------- */
.wtag.pay{color:var(--self);border-color:color-mix(in srgb,var(--self) 60%,transparent)}
.wtag.nopay{color:var(--ext);border-color:color-mix(in srgb,var(--ext) 50%,transparent)}
.hero .hcopy > [data-only]{align-self:end}
/* ---------- journey 4 · the dial: a number you can type, three shortcuts, SET, then the refusals ---------- */
.dialnum{pointer-events:none}
.dialnumbtn,.dialin{pointer-events:auto}
.dialnumbtn{font:700 34px/1 var(--sans);color:#1A1216;background:none;border:0;border-bottom:1.5px dashed rgba(26,18,22,.35);padding:0 4px 2px;min-height:44px;min-width:64px;font-variant-numeric:tabular-nums;cursor:text}
.dialnumbtn:hover{border-bottom-color:#1A1216}
.dialin{width:118px;font:700 30px/1 var(--sans);color:#1A1216;text-align:center;background:#fff;border:1.5px solid #1A1216;border-radius:8px;padding:6px 4px;font-variant-numeric:tabular-nums}
.dialin:focus-visible{outline:2px solid #B7503A;outline-offset:2px}
.dialchips{display:flex;gap:8px;justify-content:center}
.dialchips button{min-height:44px;min-width:64px;padding:0 14px;border-radius:99px;font:500 12.5px/1 var(--mono);letter-spacing:.04em;color:#1A1216;background:#fff;border:1px solid rgba(26,18,22,.25)}
.dialchips button:hover{border-color:#1A1216}
.dialchips button[aria-pressed="true"]{background:#1A1216;color:#FBF7F4;border-color:#1A1216}
.dialset{min-width:120px;letter-spacing:.16em;font-family:var(--mono)!important;font-size:13px}
.dialrefuse{font-size:11.5px;line-height:1.45;color:#8C3A24;max-width:34ch;margin:0 auto;min-height:3em;text-align:center}
#i-allow .ibody{gap:12px}
@media (max-height:499px) and (max-width:1023px){.dialnumbtn{font-size:24px;min-height:40px}.dialin{font-size:22px;width:96px}.dialchips button{min-height:40px;min-width:54px}}
/* ---------- journey 6 · the tray on the headset frame ---------- */
.sh-tray{position:absolute;left:50%;top:50%;width:300px;transform:translate(-50%,-50%) scale(var(--ts,.5));opacity:0;transition:opacity .3s ease;pointer-events:none}
.sh-tray[data-show="1"]{opacity:1}
.sh-panel{transition:opacity .3s ease}
.sh-panel[data-hide="1"]{opacity:0}
@media (prefers-reduced-motion:reduce){.sh-tray,.sh-panel{transition:none}}
/* ---------- pitch 9 · the tray in the visor ---------- */
.ptray{position:absolute;left:50%;top:50%;width:300px;transform:translate(-50%,-50%) scale(var(--pts,1.25));z-index:3;opacity:0;transition:opacity .3s ease}
.ptray[data-show="1"]{opacity:1}
@media (max-width:819px){.ptray{--pts:.72}}
@media (max-height:499px) and (max-width:1023px){.ptray{--pts:.62}}
@media (prefers-reduced-motion:reduce){.ptray{transition:none}}
/* ---------- C14 · pitch: the wordmark once on slide 1; a big heading wraps, never clips ---------- */
body[data-slide="0"] .pbrand{opacity:0}
.pbrand{transition:opacity .3s ease}
/* ---------- the pocket: the text column may shrink (the code block scrolls, the page never does); values on one line ---------- */
.pkgrid > *{min-width:0}
.prow .val{white-space:nowrap}
.prow .nm{min-width:0}
/* the USER lens: its words stack (the journey's recovery-word grid shares the class name) */
.sees.words{display:block;border:0;grid-template-columns:none;text-align:center}
/* ---------- the both-ways loop below 1024: one small drawing, tinted by the mode ---------- */
.bwm{display:none}
@media (max-width:1023px){
  .bwm{display:block;width:100%;max-width:440px;height:auto;max-height:min(40vh,200px);margin:10px auto 12px}
  .bwm .tb{fill:color-mix(in srgb,var(--acc) 7%,var(--ink));stroke:var(--acc);stroke-width:1.3}
  .bwm .tp{fill:color-mix(in srgb,var(--acc) 7%,var(--ink));stroke:var(--acc);stroke-width:1.3}
  .bwm .tl{stroke:color-mix(in srgb,var(--acc) 30%,transparent);stroke-width:1}
  .bwm .tk{font:500 8.5px var(--mono);letter-spacing:.14em;fill:var(--dim)}
  .bwm .tv{font:500 9px var(--mono);fill:var(--acc)}
  .bwm .tam{font:500 22px var(--mono);fill:var(--text)}
  .bwm .tyes{fill:color-mix(in srgb,var(--acc) 16%,transparent);stroke:var(--acc);stroke-width:1.2}
  .bwm[data-st="accept"] .tyes{fill:var(--acc)}
  .bwm .tno{fill:none;stroke:color-mix(in srgb,var(--acc) 45%,transparent);stroke-width:1.2}
  .bwm .tbt{font:500 9px var(--mono);letter-spacing:.14em;fill:var(--acc)}
  .bwm[data-st="accept"] .tbt:not(.no){fill:var(--acc-ink)}
  .bwm .tbt.no{fill:var(--dim)}
  .bwm .tdone{opacity:0}
  .bwm .tchk{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .bwm .tst{font:500 11px var(--mono);letter-spacing:.18em;fill:var(--acc)}
  .bwm .bwpk use{fill:var(--acc)}
  .bwm .bwprize{opacity:0;color:#F7931A}
}
@media (max-height:499px) and (max-width:1023px){.bwm{max-height:40vh;margin:6px auto 8px}}

/* ===========================================================================
   lab25 · Lightning first, the layout laws, fixes, reveal prep
   =========================================================================== */
/* ---------- B1 · desktop text bands: top-aligned; heading and first paragraph at one y in both modes ---------- */
@media (min-width:1024px){
  .dual{align-items:start}
  .dual > [data-only]{align-self:start}
  .hero .hcopy > [data-only]{align-self:start}
  .split{align-items:start}
}
/* ---------- B2 · small mono notes sit 12 px under their paragraph ---------- */
.pkblock .safeline{margin-top:12px}
.pkblock .codecap{margin-top:12px}
.pkblock .dual .cap{margin-top:12px}
/* ---------- B3 · captions centred to their object ---------- */
.pkfig > .pksticky > .cap{text-align:center}
.orbitwrap{position:absolute;right:var(--gut);bottom:6vh;width:min(420px,calc(100% - 2 * var(--gut)));z-index:2}
.orbitwrap .orbitcard{position:static;right:auto;bottom:auto;left:auto;width:auto}
.orbitwrap .orbitmotto{position:static;margin:12px 0 0;text-align:center;right:auto;left:auto;bottom:auto}
@media (max-width:1200px) and (min-width:1024px){.orbitwrap{left:var(--gut);right:var(--gut);width:auto;bottom:3vh}.orbitwrap .orbitmotto{left:auto;bottom:auto}}
@media (max-width:1023px){
  .orbitwrap{position:static;order:3;width:auto;margin:0 20px 0 40px}
  .orbitwrap .orbitcard{margin:0}
  .orbitwrap .orbitmotto{margin:12px 0 0}
}
/* ---------- B4 · the hero row: the pill left, PROOF and the claim right, one line, one top ---------- */
.hfoot{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;gap:12px 28px}
.hfoot .urlchip{font-size:16px;min-height:52px;padding:0 20px;margin:0;align-self:stretch}
.hfoot .proof{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;min-height:52px;margin:0;white-space:nowrap;flex-wrap:nowrap;text-align:right}
.hfoot .proof span:last-child{white-space:nowrap}
@media (max-width:1023px){
  .hfoot{flex-direction:column;align-items:flex-start}
  .hfoot .proof{justify-content:flex-start;text-align:left;white-space:normal;flex-wrap:wrap;min-height:0}
  .hfoot .proof span:last-child{white-space:normal}
}
@media (max-width:819px){.hfoot .proof{flex-direction:column;align-items:flex-start;gap:8px}.hfoot .urlchip{font-size:15px;min-height:48px}}
@media (max-height:499px) and (max-width:1023px){
  .hfoot{flex-direction:row;align-items:stretch;justify-content:space-between;grid-column:1 / -1}
  .hfoot .urlchip{font-size:13px;min-height:40px;padding:0 14px}
  .hfoot .proof{flex-direction:row;align-items:center;justify-content:flex-end;min-height:40px;font-size:12.5px;white-space:nowrap;flex-wrap:nowrap}
  .hfoot .proof span:last-child{white-space:nowrap}
}
/* ---------- B5 · the six: heading and sub-line centred; heading near 12 vh, the panel inside the first 40 vh ---------- */
@media (min-width:1024px){
  .dtop{padding-top:2.6vh}
  .dhead,.dsub{grid-column:1 / -1}
  .dhead{grid-row:1}.dsub{grid-row:2}.demoinfo{grid-row:3}
  .dhead .hA{justify-self:center;text-align:center;max-width:32ch}
  .dsub .dual.hA{left:0;right:0;text-align:center}
  .dsub .dual.hA p{margin:0 auto}
}
/* ---------- B6 · the sides bar: the stripe 12 px wider than lab22's, not 24 ---------- */
@media (min-width:1024px){.coinbar{grid-template-columns:1fr 76px 1fr}}
/* ---------- B7 · journey 6: the phone keeps phone proportions at every size ---------- */
.shellstage[data-shell="ar"] .sh-scr{width:auto;height:94%;aspect-ratio:9/19}
/* ---------- the panel chip: coins by default ---------- */
.panel .chip.coins{color:#7CE0C8;border:1px solid #3CC4B4}
/* ---------- A4 · the refusals under the dial ---------- */
.dialrefuse{font-size:12px;min-height:0;padding:8px 10px;border:1px dashed rgba(183,80,58,.55);border-radius:8px;background:rgba(183,80,58,.06)}
/* ---------- C5 · judges: one pill component, 44 px, one row per card ---------- */
.jd2 .jbtns{display:flex;flex-wrap:nowrap;gap:8px}
.jd2 .jbtn{display:inline-flex;align-items:center;justify-content:center;height:44px;min-height:44px;padding:0 14px;margin:0;border-radius:99px;
  font:500 12px/1 var(--mono);letter-spacing:0;white-space:nowrap;box-sizing:border-box;flex:0 0 auto}
@media (max-width:390px){.jd2 .jbtns{flex-wrap:wrap}}
/* ---------- D5 · the 404: the mark, one line, the four doors ---------- */
body.nf{padding-top:0;min-height:100svh}
.nfmain{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10vh 20px}
.nfmk{width:64px;height:84px;color:var(--gold);margin-bottom:28px}
.nfmk use{fill:currentColor}
.nf h1{font-size:clamp(40px,6vw,72px)}
.nfline{margin:18px auto 0;max-width:40ch;font-size:18px}
.nflinks{justify-content:center;margin-top:34px}
/* the caption clears the scanner's own label, which hangs under the ring */
.pkfig > .pksticky > .cap{margin-top:58px}

/* the pocket's own features, kept next to the rails but out of their list */
.pocketlbl,.tback .pocketlbl{font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:16px 0 2px;max-width:none}
.pocketrows .railrow:first-child,.pocketrows li:first-child{border-top:0}
.pocketnote{max-width:64ch;margin-bottom:18px}
/* pitch slide 10: the pocket group under the rails; on phones the orbit gives up the room it needs */
.s10 .ppocket .pocketlbl{margin-top:18px}
.s10 .ppocket .prails{margin-top:4px}
@media (max-width:819px){
  .s10 .porbit{max-height:22vh}
  .s10 .ppocket .pocketlbl{margin-top:12px}
  .s10 .ppocket .prails li{padding:4px 0}
}
@media (max-width:819px) and (max-height:700px){
  .s10 .porbit{max-height:15vh}
}
@media (max-height:499px) and (max-width:1023px){
  .s10{grid-template-rows:repeat(4,auto);align-content:center}
  .s10 .stx{display:contents}
  .s10 .stx > *{grid-column:1}
  .s10 .big{grid-row:1}.s10 .line{grid-row:2}.s10 .prails:not(.pocketrows){grid-row:3}.s10 .note{grid-row:4}
  .s10 .sg{grid-column:2;grid-row:1 / 3;align-self:end}
  .s10 .porbit{max-height:28vh}
  .s10 .stx > .ppocket{grid-column:2;grid-row:3 / 5;align-self:start;min-width:0;width:100%}
  .s10 .ppocket li > span{min-width:0}
  .s10 .ppocket .pocketlbl{margin-top:6px}
  .s10 .ppocket .prails li{padding:3px 0}
}

/* ---------- the bar on short screens (any viewport 500 px tall or less): one thin line that steps aside while you read ---------- */
/* the active side's colour reaches the screen edge beside a notch: the bar pads for the safe area, the tab paints into it */
.modes [role="tab"][aria-selected="true"]::before{content:"";position:absolute;top:0;bottom:0;background:var(--acc);pointer-events:none}
.modes [data-mode="user"][aria-selected="true"]::before{right:100%;width:env(safe-area-inset-left)}
.modes [data-mode="dev"][aria-selected="true"]::before{left:100%;width:env(safe-area-inset-right)}
.topbar{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
@media (max-height:500px){
  :root{--bar:40px}
  .modes{grid-template-columns:1fr 56px 1fr}
  .modes [role="tab"]{min-height:40px;gap:0;justify-content:center;align-items:flex-start!important}
  .modes [data-mode="dev"]{align-items:flex-end!important}
  .modes [role="tab"] small{display:none}
  .modes [role="tab"] b{font-size:15px}
  .mkbtn{width:32px;height:32px;margin:-16px 0 0 -16px}.mkbtn svg{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){.topbar{transition:none}}

/* ---------- every USER / DEV pair side by side at every width: USER left, DEV right, never stacked ---------- */
@media (max-width:1023px){
  .coinbar{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);grid-template-rows:auto}
  .stripe{flex-direction:column;gap:10px;border:0;border-left:1px solid color-mix(in srgb,var(--acc) 30%,transparent);border-right:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
  .stripe .vt{writing-mode:vertical-rl;transform:rotate(180deg)}
  .chalf.user{align-items:flex-start;text-align:left;padding:20px 16px 22px 32px}
  .chalf.dev{align-items:flex-end;text-align:right;padding:20px 16px 22px 16px}
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
}
@media (max-width:819px){
  .chalf b{font-size:18px}
  .chalf small{font-size:9.5px;letter-spacing:.04em}
  .chalf p{font-size:13px;line-height:1.45;margin-top:6px}
  .chalf .sidebtn{font-size:12.5px;min-height:44px;padding:0 10px;margin-top:10px}
  .chalf.user{padding:16px 10px 18px 28px}
  .chalf.dev{padding:16px 12px 18px 10px}
  .coinbar{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr)}
  .stripe .vt{font-size:10px;letter-spacing:.24em}
  .split{gap:8px}
  .sbox{padding:10px 10px}
  .sbox .loud{font-size:14px;margin-bottom:6px}
}

/* ---------- no copy hidden on small screens: the both-ways paragraphs show at every width ---------- */
@media (max-width:1023px){
  .sbox p,.sbox p:not(.loud){display:block}
  .sbox p{font-size:13px;line-height:1.45}
  .sbox .loud{margin-bottom:6px}
}

/* ---------- one rhythm, no empty screens: a closed question's hidden answer no longer stretches the page below the wall ---------- */
.qwall{overflow-y:clip}
/* ---------- the entry's coins: placed by script on their own lines (centre on the line, landing dead-centre) ---------- */
.atrium .eg{offset-path:none!important;animation:none!important;scale:none!important;transform-box:view-box;transform-origin:0 0}
/* the line under the mark is fixed to the screen, so it can stay while the threshold scrolls away and the entry arrives */
.thcap{position:fixed;z-index:3;pointer-events:none}

/* ---------- the device tiles: one tile, two readings. In the six it is the phone held up in AR; in the three-device demo it
   speaks for phones and tablets, AR and gyro ---------- */
.fr .v-demo{display:none}
.fr .flbl .v-six,.xr-pin[data-demo="1"] .fr .flbl .v-demo{display:contents}
.xr-pin[data-demo="1"] .fr .flbl .v-six,.xr-pin[data-demo="1"] .fr .gyro.v-six{display:none}
.xr-pin[data-demo="1"] .fr .gyro.v-demo{display:flex}
.fr-ar .gyro rect,.fr-ar .gyro circle{fill:none;stroke:currentColor;stroke-width:1.2}
.demo-m .mframes .fr-ar .gyro{display:flex}
/* every tag on the same line as its title: the title may wrap, the tag follows its last word */
.flbl{display:block;line-height:1.5}
.flbl > *,.flbl .v-six > *,.flbl .v-demo > *{margin-right:6px}
.flbl b{white-space:normal}
.flbl .tag{display:inline-block;vertical-align:1px}
/* the line under the six */
.sixnote{font:400 12px/1.4 var(--mono);color:var(--dim);max-width:none;margin:0}
.flbl .nw{white-space:nowrap}
.flbl .nw > *{margin-right:6px}
.flbl .nw > :last-child{margin-right:0}
.flbl .nw,.flbl .nw *{white-space:nowrap}
@media (max-width:819px){.demo-m .flbl b{font-size:10.5px;letter-spacing:0}.demo-m .flbl .tag{font-size:9px;padding:1px 4px;letter-spacing:.06em}.demo-m .flbl .no{font-size:9.5px}.demo-m .flbl .nw > *{margin-right:4px}}
.flbl > *,.flbl .v-six > *,.flbl .v-demo > *,.flbl .nw > *{margin-right:2px}

/* ---------- the hero's drawing: its HTML labels scale with the drawing (--bs), like the drawing's own lines ---------- */
.heroline{transform:translate(-50%,-50%) scale(var(--bs,1))}
.paychip{font-size:calc(12px * var(--bs,1));padding:calc(6px * var(--bs,1)) calc(9px * var(--bs,1))}
.hpcap{font-size:calc(10.5px * var(--bs,1))}
/* short screens: text left and larger, the drawing right at the height the screen allows; the drag hint on its own line */
@media (max-height:500px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:28px;row-gap:10px;padding:14px 20px 16px 40px;align-items:start;min-height:0}
  .hero .htxt{grid-column:1;grid-row:1;align-self:end}
  .hero .hfig{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end;width:100%;max-width:min(100%,calc((100svh - var(--bar) - 104px) * 1.25))}
  .hero .hfoot{grid-column:1;grid-row:2;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:8px;justify-content:flex-start}
  .hero .hfoot .proof{justify-content:flex-start;text-align:left;white-space:normal;flex-wrap:wrap;font-size:12.5px}
  .hero .hfoot .proof span:last-child{white-space:normal}
  .hero h1{font-size:clamp(24px,8vh,34px);line-height:1.08}
  .hero .lines{margin-top:10px;gap:6px}
  .hero .lines p{font-size:clamp(13px,3.8vh,15.5px);line-height:1.45}
  .hero .brand{margin-bottom:8px}
  .bladecap{flex-wrap:wrap;row-gap:2px;margin-top:6px;font-size:9.5px}
  .bladecap b{order:-1;flex:1 0 100%;text-align:center}
  .clipctl{margin-top:6px}.clipctl button{min-height:40px}
}
/* narrow screens: the caption row wraps with the drag hint on its own line, and the hero column never widens past the screen */
@media (max-width:1023px) and (min-height:501px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .bladecap{flex-wrap:wrap;row-gap:2px}
  .bladecap b{order:-1;flex:1 0 100%;text-align:center}
  .hero .hfoot .proof,.hero .hfoot .proof span:last-child{white-space:normal}
}
@media (max-height:500px){
  .hero .hfoot .urlchip{align-self:flex-start;width:auto;min-height:36px}
  .hero .hfoot{gap:6px}
  .hero .hfoot .proof{font-size:12px;gap:8px}
  .hero .lines{margin-top:8px;gap:4px}
}

/* ---------- Extended Reality Web: DEV's text sits right under the headline, as USER's does; portrait gets a wide, short door ---------- */
.xrtext .dual > [data-only]{align-self:start}
.doorlink.w{display:none}
@media (max-width:1023px) and (min-height:501px){
  .xrdef .doorlink.v,.xrdef .doorlink.h{display:none}
  .xrdef .doorlink.w{display:block;width:100%;max-width:620px;height:auto;aspect-ratio:3/1;max-height:none;margin:6px 0 0}
  .doorlink.w .lk{font-size:15px}
  .xrdef .xrtext{gap:14px}
}
/* Law 0 below 1024: a mode's hidden twin takes no room, even where a section styles its twins' display */
@media (max-width:1023px){.dual > [data-only][data-off="1"],[data-only][data-off="1"]{display:none!important}}
@media (max-width:1023px) and (min-height:501px){.xrdef{padding-top:9vh;padding-bottom:7vh}}

/* ---------- the payment phases on short screens: the three devices in one row under the phase buttons, sized to the screen height ---------- */
@media (max-height:500px) and (max-width:1023px){
  .demo-m{margin-top:24px}
  .demo-m .mhead .steprail{margin-top:10px;flex-wrap:nowrap;gap:6px}
  .demo-m .mhead .steprail button{min-height:36px;padding:0 10px;font-size:11.5px}
  .demo-m .mframes{grid-template-columns:minmax(0,1.3fr) minmax(0,.62fr) minmax(0,1.3fr);gap:8px 10px;margin-top:8px;align-items:start}
  .demo-m .mframes .fr-lp{grid-column:auto}
  .demo-m .mframes .fr .cell{height:calc(100svh - var(--bar) - 108px);aspect-ratio:auto;width:100%;flex:none}
  .demo-m .mframes .fr-ar .cell{flex:none}
  .demo-m .flbl{font-size:9.5px;padding-top:5px}
  .demo-m .flbl b{font-size:10px}
}
@media (max-height:500px) and (max-width:1023px){.demo-m .mframes .fr-ar .vchip{font-size:7.5px;padding:3px 5px;white-space:normal;max-width:92%;text-align:center}}
/* 1024–1100: the phase buttons get their own row, with their words */
@media (min-width:1024px) and (max-width:1100px){
  .dtop{grid-template-columns:minmax(0,1fr)}
  .dtop .steprail{grid-column:1;grid-row:4;justify-self:start;margin-top:10px}
  .steprail li span{display:inline}
}

/* ---------- Two rails today: portrait keeps text and orbit close; short screens put the text left, a large orbit right ---------- */
@media (max-width:1023px) and (min-height:501px){
  .road{padding:6vh 0 6vh}
  .road-pin{gap:6px}
  .road-pin > canvas{height:min(calc((100vw - 60px) * 1.02),560px);min-height:0;max-height:none}
}
@media (max-height:500px) and (max-width:1023px){
  .road{padding:3vh 0 4vh}
  .road-pin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto auto auto;column-gap:16px;row-gap:14px;align-items:center}
  .road .rtxt{grid-column:1;grid-row:1;align-self:center;padding:6vh 0 0 40px}
  .road-pin > canvas{grid-column:2;grid-row:1;width:100%;height:calc(100svh - var(--bar) - 20px);min-height:0;max-height:none}
  .road-pin .orbitwrap{grid-column:1 / -1;grid-row:2;margin:0 20px 0 40px;justify-self:center;width:min(560px,calc(100% - 60px))}
  .road-pin .bothways2{grid-column:1 / -1;grid-row:3}
}
@media (max-height:500px) and (max-width:1023px){.road-pin > .orbitlbl{top:0;left:0}}

/* ---------- through a world's eyes, short screens: pinned right while the text scrolls left, like desktop ---------- */
@media (max-height:500px) and (max-width:1023px){
  .pksticky{position:sticky;top:calc(var(--bar) + 6px);transform-origin:50% 0}
  .pkfig{align-self:stretch}
}
@media (max-height:500px) and (max-width:1023px){.pkgrid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px}}
@media (max-height:500px) and (max-width:1023px){#pk2{min-height:calc(100svh - var(--bar) - 24px)}}

/* ---------- Money moves both ways, below 1024: the desktop scene (person, door, both lanes, the +5 offer above the person) ---------- */
.bwcv{display:none}
@media (max-width:1023px){
  .bwm{display:none!important}
  .bwcv{display:block;width:100%;max-width:520px;margin:6px auto 10px}
}
@media (max-height:500px) and (max-width:1023px){.bwcv{max-width:min(520px,calc((100svh - var(--bar)) * .45 * 440 / 236));margin:2px auto 6px}.road-pin .bothways2 .split{margin-top:4px}}

/* ---------- built with open protocols, short screens: the desktop row, on one screen ---------- */
@media (max-height:500px){
  .credits{text-align:center}
  .cr{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;max-width:980px;gap:10px 26px}
  .credits h2{max-width:none;margin:0 auto 18px}
}
/* the door's glow takes its colour from CSS: WebKit does not read var() inside an SVG attribute (it drew a black box) */
#dglow stop{stop-color:var(--acc)}
@media (max-width:819px) and (max-height:700px){.s10 .porbit{max-height:9vh}.s10 .prails li{padding:3px 0}.s10 .ppocket .pocketlbl{margin-top:8px}}
@media (max-width:819px) and (max-height:700px){.s10 .big{font-size:30px}.s10 .line{margin-top:8px}}

/* ---------- coins and nuts, in words and the site's own glyphs ---------- */
.rw{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;max-width:46ch}
.rw li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-size:15px;line-height:1.45;color:var(--body)}
.ric{width:20px;height:20px;margin-top:1px;color:var(--acc);fill:currentColor}
.ric use{fill:currentColor}
.rwnote{margin-top:10px!important;font-size:14.5px;color:var(--text)}
.finep{margin-top:8px!important;font:400 11.5px/1.5 var(--mono)!important;color:var(--dim)}
@media (max-width:1023px){.rw li{font-size:14px}}
@media (max-height:500px) and (max-width:1023px){.rw li{font-size:13px;line-height:1.4}.rw{gap:6px}}
/* desktop: the rails text sits on its own glass, so the orbits pass behind words that stay readable */
@media (min-width:1024px){.road .rtxt{background:color-mix(in srgb,var(--ink) 78%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:18px 22px 20px;margin-left:-22px;border-radius:16px;border:1px solid color-mix(in srgb,var(--acc) 16%,transparent)}}
@media (min-width:1024px){.road .rtxt{z-index:4}}

/* pocket rows: the kind of money and its value on one line, what it is on its own line underneath */
.prow{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;column-gap:10px;row-gap:3px;align-items:center}
.prow .nm{display:contents}
.prow .nm small{grid-column:2 / -1;grid-row:2;margin-top:0;line-height:1.4}
.prow .val{margin-left:0}

/* ---------- access: the pocket and the SDK open in rounds ---------- */
.jhead .access{margin-top:14px;font:500 15px/1.5 var(--sans);color:var(--text);max-width:none}
.jhead .access a{color:var(--acc)}
.hfoot .rounds{margin:0;font:400 12.5px/1.4 var(--mono);color:var(--dim);max-width:none}
.hfoot .hpk{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hfoot .hpk .rounds{padding-left:6px}

/* ---------- four worlds: two by two on wide screens, one column on phones ---------- */
@media (min-width:701px){.wcards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1100px}}
.wart .wtimer{font:600 20px var(--mono);fill:var(--acc);letter-spacing:.06em}
.wstrip .list a{color:var(--acc)}

/* ---------- /sdk/ and /log/: the site's reading pages ---------- */
.sdkhead,.loghead{padding:14vh var(--gut) 4vh}
.sdkhead .wrap,.sdkbody .wrap,.sdktail .wrap,.loghead .wrap{max-width:1080px;margin:0 auto}
.sdkhead .xrchip{position:static;display:inline-block;margin-bottom:16px}
.sdkhead h1,.loghead h1{font:600 clamp(40px,6vw,76px)/1.02 var(--sans);letter-spacing:-.03em;color:var(--text);margin:0 0 20px}
.sdkhead .lead,.loghead .lead{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--text);max-width:44ch}
.sdkhead p + p{margin-top:12px}
.sdkhead p{font-size:16.5px;line-height:1.55;color:var(--body);max-width:56ch}
.sdkhead a,.sdktail a,.loghead a{color:var(--acc)}
.sdkbody{padding:2vh var(--gut) 6vh}
.sdkgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 40px;align-items:start}
.sdkcode .code{margin:0 0 12px}
.sdkstat .rl{list-style:none;margin:6px 0 0;padding:0}
.sdkstat .next{margin-top:18px}
.sdktail{padding:2vh var(--gut) 10vh}
.sdktail .access{font:500 15px/1.5 var(--sans);color:var(--text);max-width:60ch;margin-bottom:22px}
.sitefoot{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font:500 12.5px/1 var(--mono);letter-spacing:.1em;max-width:none}
.sitefoot a{color:var(--acc);text-decoration:none;padding-block:12px;margin-block:-12px}
.sitefoot a:hover{text-decoration:underline}
.logl{list-style:none;margin:28px 0 30px;padding:0;display:grid;gap:0;max-width:760px}
.logl li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:6px 24px;padding:16px 0;border-top:1px solid color-mix(in srgb,var(--acc) 18%,transparent)}
.logl time{font:500 12.5px/1.6 var(--mono);letter-spacing:.06em;color:var(--acc)}
.logl p{margin:0;font-size:16px;line-height:1.55;color:var(--text);max-width:none}
@media (max-width:1023px){.sdkgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.logl li{grid-template-columns:minmax(0,1fr)}.sdkhead,.loghead{padding-top:9vh}}
@media (max-height:500px){.sdkhead,.loghead{padding-top:6vh}}
a.sdkl{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--acc) 60%,transparent);text-underline-offset:3px}
a.sdkl:hover{color:var(--acc)}
/* the DEV-only SDK entry takes no room in USER: menu and footer links are not twins that must hold their place */
.menu li[data-only][data-off="1"],.sitefoot [data-only][data-off="1"]{display:none}

/* ---------- the thin bar, exact: two equal halves meeting under the mark; each side's colour runs from the very screen edge
   (the notch strip included) to the mark's centre; the safe area is padding inside the tab, not an empty strip outside ---------- */
:root{--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
@media (max-height:500px){
  .topbar{padding:0;border-bottom:0;box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--acc) 24%,transparent)}
  .modes{grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:var(--bar)}
  .modes [role="tab"]{height:var(--bar);min-height:0}
  .modes [data-mode="user"]{grid-column:1;padding:0 26px 0 calc(16px + var(--sal))}
  .modes [data-mode="dev"]{grid-column:2;padding:0 calc(16px + var(--sar)) 0 26px}
  .modes [role="tab"][aria-selected="true"]::before{display:none}
  .mkbtn{left:50%;margin-left:-16px}
}
.panel .chip{font-size:11px}
/* the kind-of-money chip stays readable on the smallest device mockup: it grows as the panel is scaled down */
.panel .chip{font-size:max(11px,calc(7.5px / var(--ps,1)));white-space:normal;max-width:100%}

/* ---------- Two rails today: two small cards under the headline, one line under them ---------- */
.rcards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:14px}
.rcard{border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);border-radius:12px;padding:12px 14px;background:color-mix(in srgb,var(--ink) 70%,transparent)}
.rcard .ric{display:block;width:20px;height:20px;margin-bottom:6px}
.rcard b{display:block;font:600 15px/1.2 var(--sans);color:var(--text);margin-bottom:4px}
.rcard p{margin:0!important;font-size:13.5px!important;line-height:1.45;color:var(--body);max-width:none}
.road .rtxt .rwnote{margin-top:12px!important}
@media (max-height:500px) and (max-width:1023px){.rcard{padding:9px 11px}.rcard p{font-size:13px!important}}

/* ---------- wallet.satrium.org: a real button with its private-pilot tag; every mention in the copy is a link ---------- */
.hfoot .pkrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hfoot .urlchip.pkbtn{width:auto;justify-self:start;align-self:auto;text-decoration:none;color:var(--acc-ink);background:var(--acc);border:1px solid var(--acc);font-weight:500;padding:0 20px;min-height:48px;box-shadow:0 10px 30px -12px var(--acc)}
.hfoot .urlchip.pkbtn i{background:var(--acc-ink);box-shadow:none}
.hfoot .urlchip.pkbtn:hover{filter:brightness(1.08)}
.hfoot .urlchip.pkbtn:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.pilottag{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);border-radius:99px;padding:5px 9px;white-space:nowrap}
a.wl,a.url{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--acc) 60%,transparent);text-underline-offset:3px}
a.wl:hover,a.url:hover{color:var(--acc)}
@media (max-width:819px) and (min-height:501px){.hfoot .pkrow{width:100%}.hfoot .urlchip.pkbtn{flex:1 1 100%;justify-content:center}}

/* ---------- home bottom: air between the address block, the open-protocols list and the closing line ---------- */
.end{padding-bottom:10vh}
.credits{padding-top:9vh;padding-bottom:9vh;border-top:1px solid color-mix(in srgb,var(--acc) 12%,transparent)}
.foot{padding-top:6vh;padding-bottom:8vh}
@media (max-height:500px){.end{padding-bottom:8vh}.credits{padding-top:7vh;padding-bottom:7vh}}
.foot .sitefoot{justify-content:center}

/* ---------- Money moves both ways: air above its heading; in landscape the scene takes most of the screen height ---------- */
@media (max-width:1023px){.road-pin .bothways2{margin-top:64px}}
@media (max-height:500px) and (max-width:1023px){
  .road-pin .bothways2{margin-top:48px}
  .bwcv{max-width:min(100%,calc((100svh - var(--bar)) * .74 * 440 / 236))}
}

/* ---------- nothing wider than the screen: columns may shrink, long code scrolls inside its own box, the panel mockup fits ---------- */
.jgrid > *,.jtxt,.inst,.instdual,.dual > [data-only]{min-width:0}
.code{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:1023px){
  .jgrid{grid-template-columns:minmax(0,1fr)}
  .inst .panel,.instdual .panel{width:100%;max-width:376px}
}
.orbitlbl:empty{display:none}

/* ---------- phones: no label under 12 px (tags, numbers, captions, kickers); drawings and device mockups scale as drawings ---------- */
@media (max-width:819px),(max-height:500px) and (max-width:1023px){
  .bladecap,.bladecap b,.bladecap span,.pilottag,.hfoot .proof .lbl,.xrchip,.xrchip .mo,.dname .tag,.dname .imm,.demolbl,
  .steprail button,.steprail button span,.combonote,.flow li,.bntag,.bntag2,.nolist .nl,.nostamp b,.cap,#orbitpick button,.custcap,
  .orbitmotto,.motto,.stag,.chalf small,.stripe .vt,.gocard .arw,.credits h2,.cr em,.cr code,.states li,.codecap,
  .ruler button span,.mtitle small,.mtitle2 small,.scrollhint,.cross h4,.never h4,.pocketlbl,.railrow .st,.next h3,.next h2,
  .paychip2,.tqs,.chipline,.finep,.exbtn,.custnote,.wkind,.wtag,.wtags li,.sitefoot,
  .flbl,.flbl b,.flbl .no,.flbl .tag,.demo-m .flbl b,.demo-m .flbl .tag,.demo-m .flbl .no,.prails li em{font-size:12px!important}
  .tback .finep,.tback .custnote{font-size:12px!important}
}
@media (max-width:819px),(max-height:500px) and (max-width:1023px){.pf button span,.pf6 button span,.route button span,.route button{font-size:12px!important}}

/* ---------- a stacked row: the label takes the full width, its tag sits under it ---------- */
.railrow.stk,.prails li.stk{flex-wrap:wrap;row-gap:6px}
.railrow.stk .nm,.prails li.stk > span{flex:1 1 calc(100% - 40px)}
.pocketrows .railrow.stk .nm{flex-basis:100%}
.railrow.stk .st{margin-left:38px}
.pocketrows .railrow.stk .st,.prails.pocketrows li.stk em{margin-left:0}
.prails li.stk em{margin-left:38px}

/* ---------- rails: no frame around the text block (only the two cards are framed); each card's icon sits beside its title ---------- */
@media (max-width:1200px) and (min-width:1024px){.road .rtxt{max-width:430px}}
@media (min-width:1024px){.road .rtxt{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-radius:0;padding:0;margin-left:0}}
.rcard{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:center;align-content:start}
.rcard .ric{grid-column:1;grid-row:1;margin:0;width:20px;height:20px}
.rcard b{grid-column:2;grid-row:1;margin:0}
.rcard p{grid-column:1 / -1;grid-row:2;margin-top:6px!important}

/* ---------- hero buttons: two groups, each a button over its tag and line. Wide: A left, B right, buttons on one row, notes on the next. Phones: A then B ---------- */
.hero .hfoot{display:grid;grid-column:1 / -1;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:auto auto;column-gap:56px;row-gap:14px;align-items:start;justify-items:start;margin:0}
.hero .hfoot .hgrp{display:contents}
.hero .hfoot .hga > *{grid-column:1}
.hero .hfoot .hgb > *{grid-column:2}
.hero .hfoot .urlchip.pkbtn,.hero .hfoot .clipctl{grid-row:1;align-self:start;margin:0}
.hero .hfoot .hnote{grid-row:2;align-self:start;justify-self:start}
.hero .hfoot .urlchip.pkbtn,.hero .hfoot .clipctl{justify-self:start}
.hero .hfoot .urlchip.pkbtn{min-height:48px;padding:0 20px;font-size:15px;width:auto;flex:none}
.hero .hfoot .clipctl{max-width:none}
.hero .hfoot .clipctl button{min-height:48px;padding:0 20px;font-size:13px}
.hero .hfoot .hnote{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:baseline;justify-content:flex-start;gap:10px;margin:0;padding:0;max-width:none;text-align:left;white-space:normal;
  font:400 15px/1.4 var(--sans);color:var(--body)}
.hero .hfoot .hnote > span:last-child{flex:0 1 auto;min-width:0;white-space:normal}
.hero .hfoot .hnote .lbl{flex:none;font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--acc);white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);border-radius:4px;padding:5px 7px;transform:translateY(-2px)}
.hero .hfoot .proof > span:last-child{font-family:var(--disp);font-weight:500;color:var(--text);font-size:17px}
.hero .hfoot .rounds .sdkl{color:inherit}
/* tablet portrait: the same two columns, sized to the screen */
@media (max-width:1023px) and (min-height:501px){
  .hero .hfoot{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px}
  .hero .hfoot .hnote{font-size:14px}.hero .hfoot .proof > span:last-child{font-size:15px}
}
/* short screens: text and drawing on the first row, both groups across the second */
@media (max-height:500px){
  .hero .hfig{grid-row:1;max-width:min(100%,calc((100svh - var(--bar) - 158px) * 1.25))}
  .hero .htxt{align-self:center}
  .hero .hfoot{grid-row:2;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;row-gap:8px}
  .hero .hfoot .urlchip.pkbtn,.hero .hfoot .clipctl button{min-height:40px;padding:0 14px;font-size:13px}
  .hero .hfoot .clipctl button{font-size:12px}
  .hero .hfoot .hnote{font-size:12.5px;gap:8px}.hero .hfoot .proof > span:last-child{font-size:13px}
}
/* phone portrait: group A (button, then its line), then group B right under it */
@media (max-width:699px) and (min-height:501px){
  .hero .hfoot{display:flex;flex-direction:column;align-items:stretch;gap:24px}
  .hero .hfoot .hgrp{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .hero .hfoot .urlchip.pkbtn{justify-content:center;width:100%}
  .hero .hfoot .clipctl,.hero .hfoot .hnote{align-self:stretch}
  .hero .hfoot .clipctl button{width:100%;justify-content:center}
  .hero .hfoot .hnote{font-size:14px}.hero .hfoot .proof > span:last-child{font-size:15px}
  .hero .hfoot .hnote .lbl{font-size:12px;letter-spacing:.16em}
}
@media (max-width:819px),(max-height:500px) and (max-width:1023px){.hero .hfoot .hnote .lbl{font-size:12px;letter-spacing:.16em}}

/* ---------- the allowance dial: SET stays readable once set; the confirmation line keeps its room; the refusals are two labelled examples, off the dial ---------- */
.dialset.isset{opacity:1;background:#fff!important;color:#1A1216!important;box-shadow:inset 0 0 0 1.5px #1A1216}
.dialset:disabled{opacity:.35}
#dialdone{min-height:2.8em;margin:0 auto;text-align:center}
#dialdone:empty{visibility:hidden}
.dialeg{margin:4px auto 0;max-width:34ch;padding:10px 12px;border:1px dashed rgba(26,18,22,.28);border-radius:8px;text-align:left;display:grid;gap:8px}
.dialeg p{margin:0;font:400 12px/1.45 var(--sans);color:#65535B;max-width:none}
.dialeg b{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.02em;color:#1A1216}
.dialeg span{color:#8C3A24}

/* ---------- device switcher: a room behind the phone, the world's grid around the headset; the AR panel stands just above the table ---------- */
.sh-bg{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}
.shellstage{border-radius:12px;overflow:hidden}
.shellstage[data-shell="ar"] .sh-panel{top:46%}

/* ---------- sideways scrollers: no hint pill, no edge fade; a thin slider underneath instead ---------- */
.scrollhint{display:none!important}
.crossfig::after{content:none!important}
.hs{position:relative;height:24px;margin:6px 0 0;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.hs[hidden]{display:none}
.hs-t{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:color-mix(in srgb,var(--acc) 18%,transparent)}
.hs-h{position:absolute;left:0;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:var(--acc);opacity:.85;cursor:grab;transition:opacity .15s ease}
.hs:hover .hs-h,.hs.drag .hs-h{opacity:1}
.hs.drag .hs-h{cursor:grabbing}
.seqwrap.hs-on{margin-bottom:0}
.seqwrap + .hs{margin:8px 0 36px}
.crossbox .seqwrap + .hs{margin:8px 0 0}
#orbitpick + .hs{margin:2px 0 0;height:20px}
.hs-on{scrollbar-width:none}.hs-on::-webkit-scrollbar{display:none}

/* ---------- inner pages' footer: a status line, then the mark and line, the pages, the address ---------- */
.pfoot{border-top:1px solid color-mix(in srgb,var(--acc) 16%,transparent);margin-top:48px;padding:22px 0 calc(28px + env(safe-area-inset-bottom))}
.pfoot .wrap{display:grid;gap:18px;max-width:none;margin:0;padding:0 var(--fr,var(--gut)) 0 var(--fl,var(--gut))}
.pfoot p{max-width:none;margin:0}
.ft-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;font:500 12px/1.4 var(--mono);color:var(--dim);letter-spacing:.02em}
.ft-i{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ft-i + .ft-i::before{content:"·";margin:0 12px;color:color-mix(in srgb,var(--dim) 70%,transparent)}
.ft-i svg{width:15px;height:15px;color:var(--acc);flex:none}
.ft-st{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:1px solid color-mix(in srgb,var(--dim) 45%,transparent);border-radius:99px;padding:4px 8px}
.ft-st.live{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 60%,transparent)}
a.ft-upd{color:var(--dim);text-decoration:none;min-height:32px}
a.ft-upd:hover{color:var(--acc)}
.ft-main{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px 28px}
.ft-brand{display:flex;align-items:center;gap:10px;font:400 13px/1.4 var(--mono);color:var(--acc)}
.ft-brand svg{width:18px;height:24px;fill:var(--acc);flex:none}
.ft-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0}
.ft-nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 10px;font:500 13px/1 var(--sans);color:var(--body);text-decoration:none;border-radius:8px}
.ft-nav a:hover{color:var(--text)}
.ft-nav a[aria-current="page"]{color:var(--acc)}
.ft-nav a[aria-current="page"]::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc);margin-left:6px}
.ft-mail{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:99px;border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);
  font:500 12.5px/1 var(--mono);color:var(--acc);text-decoration:none;white-space:nowrap}
.ft-mail:hover{background:color-mix(in srgb,var(--acc) 10%,transparent)}
.ft-mail svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;flex:none}
.ft-ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:inherit;background:var(--acc);color:var(--acc-ink);font:500 12.5px/1 var(--mono);letter-spacing:.1em;opacity:0;transition:opacity .2s ease;pointer-events:none}
.ft-mail[data-copied="1"] .ft-ok{opacity:1}
@media (prefers-reduced-motion:reduce){.ft-ok{transition:none}}
/* tablets and phones: three short rows (status; mark and line; pages and the address) */
@media (max-width:1023px){
  .ft-main{grid-template-columns:1fr auto;grid-template-areas:"brand brand" "nav mail"}
  .ft-brand{grid-area:brand}.ft-nav{grid-area:nav;justify-content:flex-start;margin-left:-10px}.ft-mail{grid-area:mail}
}
@media (max-width:699px){
  .ft-main{display:flex;flex-wrap:wrap;align-items:center;gap:10px 8px}
  .ft-brand{flex:1 1 100%}
  .ft-nav{display:contents}
  .ft-nav a{min-height:40px;padding:0 12px 0 0}
  .ft-nav a[aria-current="page"]::after{margin-left:5px}
  .ft-mail{margin-left:2px}
  .ft-status{font-size:12px}.ft-st{font-size:12px;letter-spacing:.1em}
  .ft-status{gap:8px 14px}
  .ft-i + .ft-i::before{content:none}
}

/* ---------- /sdk/: a one-screen reference card. Hidden twins leave no space on this page ---------- */
.ruler button[hidden]{display:none}
body[data-page="sdk"] [data-only][data-off="1"]{display:none}
body[data-page="sdk"] .sdkhead{padding-bottom:2vh}
.sk-lines{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;max-width:56ch}
.sk-lines li{position:relative;padding-left:22px;font-size:17px;line-height:1.5;color:var(--body)}
.sk-lines li::before{content:"";position:absolute;left:2px;top:.6em;width:10px;height:2px;background:var(--acc)}
.sk-sec{padding:4vh var(--gut)}
.sk-sec .wrap{max-width:1080px;margin:0 auto}
.sk-h{font:600 clamp(24px,2.4vw,32px)/1.15 var(--sans);letter-spacing:-.015em;color:var(--text);margin:0 0 16px}
.sk-code{margin:0 0 10px;font-size:13px;line-height:1.75}
.sk-walk{margin-top:14px;font:500 14px/1.5 var(--mono);color:var(--body);max-width:none}
.sk-walk a{color:var(--acc)}
.sk-contract{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid color-mix(in srgb,var(--acc) 18%,transparent)}
.sk-contract li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid color-mix(in srgb,var(--acc) 18%,transparent);font-size:16px;line-height:1.5;color:var(--text);max-width:none}
.sk-contract li::before{content:"✓";position:absolute;left:4px;top:12px;font:600 14px/1.5 var(--mono);color:var(--acc)}
.sk-tabs{display:grid;gap:22px}
.sk-tab{width:100%;border-collapse:collapse;font-size:14px;line-height:1.45}
.sk-tab caption{text-align:left;font:500 12.5px/1.4 var(--mono);color:var(--dim);letter-spacing:.02em;padding:0 0 8px;caption-side:top}
.sk-tab th{text-align:left;font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:8px 12px 8px 0;border-bottom:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
.sk-tab td{padding:9px 12px 9px 0;border-bottom:1px solid color-mix(in srgb,var(--acc) 14%,transparent);color:var(--body);vertical-align:top}
.sk-tab td:first-child{white-space:nowrap;width:1%}
.sk-tab td:first-child code{font:500 12.5px/1.45 var(--mono);color:var(--acc)}
.sk-tab caption code,.sk-note code{font-family:var(--mono);color:var(--text)}
.sk-note{margin-top:12px;font:400 12.5px/1.5 var(--mono);color:var(--dim);max-width:none}
.sk-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sk-card{border:1px solid color-mix(in srgb,var(--acc) 24%,transparent);border-radius:14px;padding:16px 16px 18px;background:color-mix(in srgb,var(--ink) 70%,transparent)}
.sk-card h3{font:600 17px/1.2 var(--sans);color:var(--text);margin:8px 0 6px}
.sk-card p{margin:0;font-size:14.5px;line-height:1.5;color:var(--body);max-width:none}
.sk-card .sk-pb{display:inline-block;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:1px solid color-mix(in srgb,var(--dim) 45%,transparent);border-radius:4px;padding:4px 6px}
.sk-in{border:1.5px solid var(--acc);border-radius:16px;padding:22px 24px;background:color-mix(in srgb,var(--acc) 8%,var(--ink));max-width:720px}
.sk-in p{font-size:16px;line-height:1.55;color:var(--text);margin:0 0 16px;max-width:none}
.sk-btn{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:99px;background:var(--acc);color:var(--acc-ink);font:500 14px/1 var(--mono);letter-spacing:.02em;text-decoration:none}
.sk-btn:hover{filter:brightness(1.08)}
.sk-ghost{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:99px;background:none;border:1px solid color-mix(in srgb,var(--acc) 60%,transparent);color:var(--acc);font:500 13px/1 var(--mono);cursor:pointer}
.sk-ghost:hover{background:color-mix(in srgb,var(--acc) 10%,transparent)}
.sk-btn:focus-visible,.sk-ghost:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.sk-go{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.sk-road{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:none}
.sk-road li{position:relative;padding:0 16px 0 0;display:grid;gap:10px;align-content:start}
.sk-road li b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--acc) 55%,transparent);font:600 13px/1 var(--mono);color:var(--acc);background:var(--ink);position:relative;z-index:1}
.sk-road li::before{content:"";position:absolute;left:30px;right:0;top:15px;height:1.5px;background:color-mix(in srgb,var(--acc) 30%,transparent)}
.sk-road li:last-child::before{display:none}
.sk-road li.done b{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.sk-road li span{font-size:15px;line-height:1.45;color:var(--text)}
.sk-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:26px;font:500 12.5px/1.4 var(--mono);color:var(--dim);max-width:none}
.sk-status b{font-weight:500;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 60%,transparent);border-radius:99px;padding:3px 7px;margin-left:4px;font-size:11px;letter-spacing:.14em}
.sk-status a{color:var(--acc);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
@media (max-width:1023px){.sk-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){
  .sk-sec{padding:3vh 20px}
  .sk-cards{grid-template-columns:minmax(0,1fr)}
  .sk-road{grid-template-columns:minmax(0,1fr);gap:14px}
  .sk-road li{grid-template-columns:30px minmax(0,1fr);align-items:center;gap:12px;padding:0}
  .sk-road li::before{left:14px;right:auto;top:30px;bottom:-14px;width:1.5px;height:auto}
  .sk-tab,.sk-tab tbody,.sk-tab tr,.sk-tab td{display:block;width:auto}
  .sk-tab thead{display:none}
  .sk-tab tr{padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--acc) 14%,transparent)}
  .sk-tab td{border:0;padding:2px 0}
  .sk-tab td:first-child{width:auto}
  .sk-tab td:nth-child(3){color:var(--text)}
  .sk-tab td:nth-child(3)::before{content:"→ ";color:var(--acc)}
  .sk-lines li,.sk-contract li{font-size:15.5px}
}
@media (min-width:1100px){.sk-tabs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}.sk-tab{font-size:13.5px}.sk-tab td:nth-child(2){min-width:9em}}
@media (max-width:699px){.sk-tab caption{display:block;width:auto;max-width:none}}
/* the plain "when it says no" table: two columns, no codes */
.sk-plain{max-width:760px}
.sk-plain td:first-child{white-space:normal;width:44%;color:var(--text)}
@media (max-width:699px){.sk-plain td:first-child{width:auto}.sk-plain td:nth-child(2){color:var(--body)}.sk-plain td:nth-child(2)::before{content:"→ ";color:var(--acc)}}

/* ---------- hero order: "watch it work" opens the proof inside the picture, so its group sits right under the picture.
   One column (phones and tablets in portrait): picture, then the video group, then the wallet group.
   Two columns: the video group under the picture, in its column and on its left edge; the wallet group under the text ---------- */
@media (max-width:699px) and (min-height:501px){.hero .hfoot .hgb{order:-1}}
@media (min-width:700px) and (max-width:1023px) and (min-height:501px){
  .hero .hfoot{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
  .hero .hfoot .hgrp{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  .hero .hfoot .hgb{order:-1}
}
@media (min-width:1024px),(max-height:500px){.hero .hfig{justify-self:start}}

/* ---------- a larger hero picture: same 5:4 proportions, scaled up. Desktop gives the picture's column more width;
   short screens let it use the height under the bar. The proof video letterboxes inside it, never cropped ---------- */
@media (min-width:1024px) and (min-height:501px){
  .hero,.hero .hfoot{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:48px}
  .hero .hfig{max-width:min(100%,calc((100svh - var(--bar) - 150px) * 1.25))}
}
@media (max-height:500px){
  .hero .hfig{max-width:min(100%,calc((100svh - var(--bar) - 62px) * 1.25))}
}
.clipwrap video{object-fit:contain}

/* ---------- the bar, one design everywhere: the mark on its own dark block in the centre; the active side's colour runs
   from the screen edge (safe area included) up to that block; the other side stays dark ---------- */
@media (max-height:500px){
  .modes{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr)}
  .modes [data-mode="user"]{grid-column:1;padding:0 14px 0 calc(16px + var(--sal))}
  .modes [data-mode="dev"]{grid-column:3;padding:0 calc(16px + var(--sar)) 0 14px}
}
/* the bar leaves at a glide and comes back at once */

/* ---------- the menu: the same in both modes. Four pages, then one row of two buttons: the pocket (USER's yellow, left)
   and the SDK (DEV's blue, right), like the top bar. They share the row half and half and never wrap ---------- */
.menu li.mbtns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:8px}
.menu.open li:nth-child(5){transition-delay:.32s}
.menu a.mbtn{justify-content:center;gap:7px;min-height:46px;padding:0 10px;border-radius:12px;font:600 15px/1 var(--mono);letter-spacing:.04em;white-space:nowrap;min-width:0}
.menu a.mbtn::after{display:none}
.menu a.mpocket{background:#E8B84A;color:#1A1206}
.menu a.msdk{background:#7FD3E8;color:#06121A}
.menu a.mbtn:hover{filter:brightness(1.08);background-image:none}
.menu a.mpocket:hover{background:#E8B84A}.menu a.msdk:hover{background:#7FD3E8}
.menu a.mbtn[aria-current="page"]{color:#06121A;box-shadow:inset 0 0 0 2px var(--text)}
.menu a.mbtn small{font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:3px 4px;border-radius:3px;border:1px solid currentColor;opacity:.85}
.menu a.mbtn:focus-visible{outline:2px solid var(--text);outline-offset:2px}
@media (max-height:500px){.menu .sheet{padding-top:48px;padding-bottom:10px}.menu ul{gap:0}.menu a{min-height:40px;font-size:16px}.menu li.mbtns{margin-top:6px}.menu a.mbtn{min-height:40px}}

/* ---------- USER · the velvet portal: the receding rims live in the same stage as DEV's outlines, drawn warm ---------- */
html:not([data-mode="dev"]) .gate{display:block}
html:not([data-mode="dev"]) .arch{z-index:1}

/* ---------- 404: the mark large and centred above "Nothing here."; the links as in the footers ---------- */
.nfmk{width:clamp(120px,24vw,176px);height:auto;aspect-ratio:742/982;margin:0 auto 30px;filter:drop-shadow(0 0 28px color-mix(in srgb,var(--acc) 35%,transparent))}
.nflinks.ft-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;margin-top:30px}
#orbitpick button{flex:none;white-space:nowrap}
/* ---------- lab31 · the rail card fits its rail and hangs from the foot of the wrap (the tallest card's room); the motto under it ---------- */
.orbitwrap{display:flex;flex-direction:column}
.orbitwrap .orbitcard{flex:none;margin-top:auto!important;margin-bottom:12px!important}
.orbitwrap .orbitmotto{margin-top:0!important}
.orbitwrap .orbitcard #orbitpick{margin-top:0;padding-top:14px}
.custchip{align-self:flex-start;margin-top:10px;min-height:30px;padding:0 11px;border-radius:99px;font:500 11px/1 var(--mono);letter-spacing:.08em;
  color:var(--acc);background:transparent;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);cursor:pointer}
.custchip:hover,.custchip[aria-expanded="true"]{background:color-mix(in srgb,var(--acc) 14%,transparent)}
.custchip:focus-visible,.custpop:focus-visible,.custpopx:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* the custody popover: left of the card, the card's own styling */
@media (max-width:1023px){.orbitwrap{position:relative;left:auto;right:auto}}
.custpop{position:absolute;z-index:6;width:max-content;max-width:36ch;padding:16px 40px 16px 18px;border-radius:16px;
  background:color-mix(in srgb,var(--ink) 92%,transparent);border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
.custpop[hidden]{display:none}
.custpoph{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:0 0 8px}
.custpopt{font:400 12.5px/1.55 var(--mono);color:var(--body,var(--text));max-width:none;margin:0}
.custpopx{position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--dim);font:400 20px/1 var(--sans);cursor:pointer}
.custpopx:hover{color:var(--text)}
/* touch: a bottom sheet, the page held still behind it */
.custpop.sheet{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;z-index:61;border-radius:18px 18px 0 0;border-bottom:0;
  padding:20px 64px calc(22px + env(safe-area-inset-bottom)) 22px;overscroll-behavior:contain}
.custpop.sheet .custpopt{font-size:14px;max-width:46ch}
.custpop.sheet .custpopx{top:8px;right:8px;width:44px;height:44px}
.custback{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5);touch-action:none}
.custback[hidden]{display:none}
html.sheetlock,html.sheetlock body{overflow:hidden;overscroll-behavior:none}
/* stable value's line: teal solid (your keys sign) over a thinner coral dashed line (a claim on the issuer), 2 px apart */
.prow.stable .cust{height:5px;border-top:2px solid #16796E;border-bottom:1px dashed #B7503A}
.railrow.stable .cust,.prails li.stable i{height:5px;border-top:2px solid var(--self);border-bottom:1px dashed var(--mintc)}
#orbitpick button.stable::before{content:"";display:inline-block;vertical-align:middle;width:14px;height:5px;margin-right:7px;
  border-top:2px solid var(--self);border-bottom:1px dashed var(--mintc)}
/* the rails text keeps its hidden twin's room on phones too, so the orbit below it sits at the same place in both modes */
@media (max-width:1023px){.road .rtxt .dual{display:grid!important;align-items:start}.road .rtxt .dual > [data-only]{align-self:start}.road .rtxt .dual > [data-only][data-off="1"]{display:block!important;visibility:hidden}}
.orbitdev{margin-top:8px;font-size:14px;color:var(--body,var(--text));max-width:none}
.orbitdev{display:grid}.orbitdev > span{grid-area:1/1}
/* ---------- lab32 · portrait phones: every pinned stage is the small viewport (the browser's bars open), never 100vh ---------- */
@media (max-width:1023px) and (min-height:501px){
  .th-pin,.entry-pin{height:100svh}
  .pstage{height:100svh;margin-bottom:-100svh}
  .bnfig{max-width:calc(min(520px,100%) * var(--bnfs,1))}
}
#orbitname:empty{display:none}
/* lab33 · SIX below 1024: the sub-line keeps both twins' room, so the six figures start at the same place in USER and DEV */
@media (max-width:1023px){.xr .dsub .dual{display:grid!important;align-items:start}.xr .dsub .dual > [data-only]{align-self:start}.xr .dsub .dual > [data-only][data-off="1"]{display:block!important;visibility:hidden}}