/* HiMan World, dark on purpose. The site went light ("Daylight", assets/site.css) and this page still loads that
   stylesheet for the shared nav, footer and buttons, so everything here uses the world's own --w-* tokens, and the site's
   tokens are remapped dark for this page only (below), so no shared rule can turn a world surface light by accident.
   Palette: the After Hours dark set (research/website-premium-brief.md section 3). Type: the site's own fonts,
   Bricolage Grotesque for words, Instrument Serif for display, Martian Mono for numerals (a digits-only subset, so
   letters inside numbers fall back to Bricolage). */
:root{color-scheme:dark;
--w-abyss:#050A16;--w-bg:#061218;--w-panel:#0B1E26;--w-panel-2:#102A33;--w-hair:#1C4A57;--w-rule:#52848F;
--w-text:#ECF5F4;--w-muted:#A3B8BA;--w-faint:#80999E;--w-quote:#4CC9F0;--w-orbit:#FFC94D;--w-bid:#3DF5C4;--w-ask:#FF5C8A;--w-warn:#FFA62B;--w-legend:#B497FF;
--w-teal:#3FE0D0;--w-lime:#B6FF3B;--w-pink:#FF2BD6;--w-focus:#ECF5F4;
--w-hud-bg:rgba(11,30,38,.94);--w-nav-bg:linear-gradient(180deg,rgba(5,10,22,.94),rgba(5,10,22,.9));
--w-font:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--w-serif:"Instrument Serif",ui-serif,Georgia,"Times New Roman",serif;
--w-num:"Martian Mono","Bricolage Grotesque",ui-monospace,"Cascadia Mono",Consolas,monospace;
--w-r-tick:4px;--w-r-ctl:8px;--w-r-card:12px;--w-r-pill:999px;
--w-edge:inset 0 1px 0 rgba(236,245,244,.06);--w-float:var(--w-edge),0 24px 48px -16px rgba(0,0,0,.65);
--w-d-tick:120ms;--w-d-1:160ms;--w-d-2:240ms;--w-d-3:420ms;--w-scene:900ms;
--w-e-out:cubic-bezier(.16,1,.3,1);--w-e-snap:cubic-bezier(.2,0,0,1);--w-e-inout:cubic-bezier(.65,0,.35,1);
--band:var(--m5); /* the mood colour: world.js sets it inline on <html> */
/* layout: the site nav (56/64 px, desktop only), then the HUD row, then panels; the tape at the bottom */
--w-gutter:16px;--w-nav-h:0px;--w-top-h:44px;--w-tape-h:52px;
--w-safe-t:max(var(--w-gutter),env(safe-area-inset-top));--w-safe-b:max(var(--w-gutter),env(safe-area-inset-bottom));
--w-safe-l:max(var(--w-gutter),env(safe-area-inset-left));--w-safe-r:max(var(--w-gutter),env(safe-area-inset-right));
--w-top:var(--w-safe-t);
--w-col-top:calc(var(--w-top) + var(--w-top-h) + 12px);--w-dock-space:calc(var(--w-safe-b) + var(--w-tape-h) + 12px);
/* the site's tokens, remapped dark for this page (site.css rules: the nav, the no-3D page's footer, .btn, .chip) */
--bg:var(--w-bg);--panel:var(--w-panel);--panel-2:var(--w-panel-2);--abyss:var(--w-abyss);--hair:var(--w-hair);--rule:var(--w-rule);
--text:var(--w-text);--muted:var(--w-muted);--faint:var(--w-faint);--quote:var(--w-quote);--focus:var(--w-focus);
--orbit:var(--w-orbit);--orbit-ink:var(--w-orbit);--orbit-edge:var(--w-orbit);--legend:var(--w-legend);
--bid:var(--w-bid);--bid-fill:var(--w-bid);--ask:var(--w-ask);--ask-fill:var(--w-ask);--warn:var(--w-warn);--warn-fill:var(--w-warn);
--sky-1:var(--w-panel-2);--sky-2:var(--w-panel);--dawn:#3A2A1C;
--m1t:var(--m1);--m2t:var(--m2);--m3t:var(--m3);--m4t:var(--m4);--m5t:var(--m5);--m6t:var(--m6);--m7t:var(--m7);--m8t:var(--m8);--m9t:var(--m9);--m10t:var(--m10);
--edge:var(--w-edge);--float:var(--w-float);--stage-shadow:var(--w-float);--live-ring:var(--w-float)}
@media (min-width:720px){:root{--w-nav-h:56px;--w-top:calc(env(safe-area-inset-top,0px) + var(--w-nav-h) + 10px)}}
@media (min-width:1024px){:root{--w-nav-h:64px}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--w-bg);color:var(--w-text);font-family:var(--w-font);font-size:16px;line-height:1.5;overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
body{-webkit-tap-highlight-color:transparent;padding:0}
:focus-visible{outline:2px solid var(--w-focus);outline-offset:2px}
[hidden]{display:none!important}
p{margin:0;max-width:none}
h1,h2,h3,h4{font-family:var(--w-font);font-weight:600;color:var(--w-text);letter-spacing:-.01em}
a{color:var(--w-quote)}
a:hover{color:var(--w-text)}
::selection{background:rgba(76,201,240,.32);color:var(--w-text)}
.lead{color:var(--w-muted)}
.faint{color:var(--w-faint)}
.u{font-family:var(--w-font)} /* a word inside a number: Martian here is digits only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.small{font-size:.875rem;font-weight:400}
.muted{color:var(--w-muted)}
.num{font-family:var(--w-num);font-variant-numeric:tabular-nums}
kbd{font-family:var(--w-font);font-size:.6875rem;font-weight:600;padding:1px 5px;border:1px solid var(--w-rule);border-bottom-width:2px;border-radius:var(--w-r-tick);background:var(--w-panel-2);color:var(--w-text);white-space:nowrap}
.skip{position:fixed;left:var(--w-gutter);top:-80px;z-index:140;background:var(--w-text);color:var(--w-abyss);padding:10px 16px;border-radius:var(--w-r-ctl);font-weight:600;text-decoration:none}
.skip:focus{top:var(--w-gutter)}

#world{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none;cursor:grab;outline:none}
#world:focus-visible{outline:2px solid var(--w-focus);outline-offset:-4px}
#world.dragging{cursor:grabbing}
#world.pointing{cursor:pointer}

/* ── buttons: through the site's own --fill/--fg/--bd, so its hover rules keep working, in dark ── */
.btn{--fill:transparent;--fg:var(--w-text);--bd:transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--w-r-ctl);
  border:1px solid var(--bd);background:var(--fill);color:var(--fg);font:600 .9375rem/1.2 var(--w-font);text-decoration:none;cursor:pointer;
  transition:transform var(--w-d-tick) var(--w-e-snap),background-color var(--w-d-1),border-color var(--w-d-1),color var(--w-d-1)}
.btn:hover{color:var(--fg)}
.btn:active{transform:scale(.98)}
.btn-primary,.btn-light{--fill:var(--w-text);--fg:var(--w-abyss);--bd:var(--w-text)}
.btn-primary:hover,.btn-light:hover{--fill:#fff;--bd:#fff}
.btn-secondary{--fill:transparent;--fg:var(--w-text);--bd:var(--w-rule)}
.btn-secondary:hover{--fill:var(--w-panel-2);--bd:var(--w-text)}
.btn-ghost{--fill:transparent;--fg:var(--w-quote);--bd:transparent;padding:0 12px}
.btn-ghost:hover{--fill:rgba(76,201,240,.1);--fg:var(--w-text);text-decoration:none}
.btn-mint{--fill:var(--w-orbit);--fg:var(--w-abyss);--bd:var(--w-orbit)}
.btn-mint:hover{--fill:#FFD574;--bd:#FFD574}
.btn-sm{min-height:36px;padding:0 14px;font-size:.875rem;position:relative}
.btn-sm::after{content:"";position:absolute;inset:-4px 0}
.btn[aria-pressed="true"]{--fill:rgba(76,201,240,.16);--fg:var(--w-text);--bd:var(--w-quote)}

/* ── the site nav over the city: the shared header in a translucent dark variant (desktop and tablet) ── */
.w-nav{position:fixed;left:0;right:0;top:0;z-index:25;background:var(--w-nav-bg);border-bottom:1px solid rgba(82,132,143,.3);padding-top:env(safe-area-inset-top,0px)}
.w-nav .wrap{max-width:none;padding:0 var(--w-safe-r) 0 var(--w-safe-l)}
.w-nav .nav-inner{height:var(--w-nav-h);gap:12px}
.w-nav .wordmark,.fallback .wordmark{color:var(--w-text)}
.wm-i svg{max-width:none} /* site.css's svg{max-width:100%} squashes the ring to the width of the "i" */
.w-nav .nav-links a,.fallback .nav-links a{color:var(--w-muted)}
.w-nav .nav-links a:hover,.w-nav .nav-links a[aria-current="page"],.fallback .nav-links a:hover,.fallback .nav-links a[aria-current="page"]{color:var(--w-text)}
.w-nav .nav-links a[aria-current="page"]::after,.fallback .nav-links a[aria-current="page"]::after{border-color:var(--w-orbit)}
.w-nav .nav-links a:hover{background:rgba(236,245,244,.06)}
@media (max-width:719px){.w-nav{display:none}} /* phones: the HUD's back chip goes home; the site's own phone nav is a tab bar the stick needs */

/* ── HUD ── */
.hud{position:fixed;inset:0;pointer-events:none;z-index:20;font-size:.875rem}
.hud>*{pointer-events:auto}
.hud-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:var(--w-top) var(--w-safe-r) 0 var(--w-safe-l);pointer-events:none}
.hud-top>*{pointer-events:auto}
.hud-left,.hud-right{display:flex;align-items:center;gap:8px}
.hud-back,.hud-btn,.hud-title,.wtape,.map-wrap,.tag,.tour-chip,.w-toast,.hint,.hm-card,.legend,.coach,.legend-chip,.bell-chip{background:var(--w-hud-bg);border:1px solid var(--w-rule);border-radius:var(--w-r-ctl);box-shadow:var(--w-edge)}
.hud-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 14px 0 8px;color:var(--w-text);text-decoration:none;font-weight:600;font-size:.9375rem}
.hud-back svg{width:20px;height:20px}
@media (min-width:720px){.hud-back{display:none}} /* the nav's wordmark goes home there */
.hud-back:hover,.hud-btn:hover,.legend-chip:hover{background:var(--w-panel-2)}
.hud-title{padding:4px 14px;min-height:44px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.hud-title h1{font-weight:600;font-size:.9375rem;line-height:1.2}
.hud-district{font-size:.8125rem;font-weight:500;color:var(--dist,var(--w-orbit));line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--w-d-3)}
.hud-district .d-b{color:var(--w-muted)}
.hud-btn{width:44px;height:44px;display:grid;place-items:center;color:var(--w-text);cursor:pointer;font:600 1.0625rem/1 var(--w-font);transition:background-color var(--w-d-1),border-color var(--w-d-1)}
.hud-btn svg{width:20px;height:20px}
.hud-btn.hud-text{width:auto;padding:0 12px;font-size:.875rem;display:inline-flex;align-items:center;gap:7px}
.legend-btn kbd{margin-left:1px}
.legend-btn[aria-expanded="true"],#sound-btn[aria-pressed="true"]{border-color:var(--w-quote);background:rgba(76,201,240,.16)}
#sound-btn .on{display:none}#sound-btn[aria-pressed="true"] .on{display:inline}#sound-btn[aria-pressed="true"] .off{display:none}

/* ── the HYPE tape: one band of hairline cells, mood first, the state and Pause last ── */
.dock{position:absolute;left:var(--w-safe-l);right:var(--w-safe-r);bottom:var(--w-safe-b);pointer-events:none;z-index:2}
.dock>*{pointer-events:auto}
.wtape{display:flex;align-items:stretch;height:var(--w-tape-h);overflow:hidden}
.tape-cells{display:flex;align-items:stretch;margin:0;min-width:0}
.tape-main{order:1;flex:none}
.tape-sub{order:2;flex:1 1 auto;overflow:hidden}
.wtc{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:0 14px;border-left:1px solid var(--w-hair);white-space:nowrap;flex:none}
.wtc dt{font-size:.75rem;font-weight:500;color:var(--w-faint);line-height:1.3}
.wtc dd{margin:0;font-family:var(--w-num);font-weight:500;font-size:.875rem;line-height:1.3;color:var(--w-text);font-variant-numeric:tabular-nums}
.tc-px dt{color:var(--w-text);font-weight:600;letter-spacing:.02em}
.tc-px dd{font-size:1.0625rem;line-height:1.2}
.tc-chg dd[data-dir="up"]{color:var(--w-bid)}
.tc-chg dd[data-dir="down"]{color:var(--w-ask)}
.tc-chg .g{margin-right:1px}
.tc-blk dd{color:var(--w-quote)}
.tc-blk dd[data-off]{color:var(--w-warn);font-family:var(--w-font);font-weight:500}
.tc-blk.off .lg,.tc-blk .sm{display:none}
.fl-up,.fl-dn{border-radius:2px;animation:fl-up 600ms var(--w-e-out)}
.fl-dn{animation-name:fl-dn}
@keyframes fl-up{from{background:rgba(61,245,196,.22)}to{background:rgba(61,245,196,0)}}
@keyframes fl-dn{from{background:rgba(255,92,138,.22)}to{background:rgba(255,92,138,0)}}
/* the mood cell is world.js's button, restyled as the tape's first cell */
.wtape .w-mood{order:0;display:flex;align-items:center;gap:10px;flex:0 1 300px;min-width:150px;padding:0 14px 0 12px;border:0;border-radius:0;color:var(--w-text);text-align:left;cursor:pointer;font:inherit;
  background:linear-gradient(90deg,color-mix(in srgb,var(--band) 20%,transparent),transparent 90%);box-shadow:inset 3px 0 0 var(--band)}
.wtape .w-mood:hover{background-color:var(--w-panel-2)}
.wtape .w-mood:focus-visible{outline-offset:-3px}
.mood-face{width:28px;height:28px;flex:none;display:grid;place-items:center}
.mood-face svg{width:28px;height:28px}
.mood-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.mood-text b{font-weight:600;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mood-text b .band{color:var(--band)}
.mood-text span{font-size:.75rem;color:var(--w-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mood-live{display:none}
.tape-state{order:3;display:flex;align-items:center;gap:8px;padding:0 14px;border-left:1px solid var(--w-hair);font-size:.8125rem;font-weight:500;color:var(--w-muted);white-space:nowrap;flex:none}
.tape-state i{width:8px;height:8px;border-radius:50%;background:var(--w-faint);flex:none}
.tape-state[data-s="live"]{color:var(--w-text)}
.tape-state[data-s="live"] i{background:var(--w-bid);box-shadow:0 0 0 3px rgba(61,245,196,.18)}
.tape-state[data-s="delayed"] i,.tape-state[data-s="paused"] i{background:var(--w-warn)}
.tape-state[data-s="delayed"],.tape-state[data-s="paused"]{color:var(--w-warn)}
.tape-state[data-s="sim"] i{background:var(--w-quote)}
.tape-state[data-s="sim"]{color:var(--w-quote)}
.tape-state[data-s="connecting"] i{background:var(--w-quote);animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.tape-pause{order:4;width:48px;flex:none;display:grid;place-items:center;border:0;border-left:1px solid var(--w-hair);background:transparent;color:var(--w-text);cursor:pointer;transition:background-color var(--w-d-1)}
.tape-pause:hover{background:var(--w-panel-2)}
.tape-pause:focus-visible{outline-offset:-3px}
.tape-pause svg{width:18px;height:18px}
.tape-pause .i-play,.tape-pause[aria-pressed="true"] .i-pause{display:none}
.tape-pause[aria-pressed="true"] .i-play{display:block}
.tape-pause[aria-pressed="true"]{color:var(--w-warn)}
.side-row{display:none}
@media (max-width:1359px){.tc-oi{display:none}}
@media (max-width:1239px){.tc-vol{display:none}}
@media (max-width:1099px){.tc-fund{display:none}}
@media (max-width:899px){.wtape .w-mood{flex:none;min-width:0;padding:0 10px}.wtape .mood-text,.tc-blk .lg{display:none}}

.mood-pop{position:absolute;left:0;bottom:calc(100% + 8px);width:min(380px,100%);max-height:min(60vh,calc(100dvh - var(--w-col-top) - var(--w-dock-space)));overflow:auto;
  background:var(--w-panel);border:1px solid var(--w-rule);border-radius:var(--w-r-ctl);box-shadow:var(--w-float);padding:14px 16px;font-size:.875rem}
.mood-pop h2{font-size:1rem;font-weight:600;margin-bottom:6px;line-height:1.3}
.mood-pop dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:8px 0}
.mood-pop dt{color:var(--w-muted)}
.mood-pop dd{font-size:.8125rem;font-variant-numeric:tabular-nums}
.mood-pop .vibes{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 12px;margin:8px 0 10px}
.mood-pop .vibes span{display:flex;align-items:center;gap:6px}
.mood-pop .vibes i{width:10px;height:10px;border-radius:50%;flex:none}
.mood-pop p{color:var(--w-muted)}

.hint{position:absolute;left:50%;bottom:calc(var(--w-dock-space) + 4px);transform:translateX(-50%);padding:9px 16px;font-size:.8125rem;color:var(--w-muted);white-space:nowrap;transition:opacity var(--w-d-3) var(--w-e-out);pointer-events:none;max-width:calc(100vw - 2*var(--w-gutter))}
.hint.gone{opacity:0}
.hint kbd{font-size:.625rem}

.map-wrap{position:absolute;right:var(--w-safe-r);bottom:calc(var(--w-dock-space) - 4px);padding:5px}
#minimap{display:block;width:160px;height:160px;border-radius:5px}
.map-btn{position:absolute;right:9px;top:9px;min-height:30px;padding:0 10px;border-radius:6px;border:1px solid var(--w-rule);background:var(--w-panel);color:var(--w-text);font:600 .75rem/1 var(--w-font);cursor:pointer}
.map-btn::after{content:"";position:absolute;inset:-7px}
.map-btn:hover{background:var(--w-panel-2)}

.tag{position:absolute;left:0;top:0;padding:5px 11px;font-size:.8125rem;font-weight:600;white-space:nowrap;pointer-events:none;will-change:transform;border-color:var(--tag,var(--w-rule))}
.tag .id{font-family:var(--w-num);font-size:.6875rem;font-weight:400;color:var(--w-muted);margin-left:6px}
.tag .k{margin-left:8px;color:var(--w-muted);font-size:.75rem;font-weight:500}

.tour-chip{position:absolute;left:50%;top:var(--w-col-top);transform:translateX(-50%);padding:5px 5px 5px 14px;font-size:.8125rem;font-weight:500;display:flex;align-items:center;gap:10px;white-space:nowrap}
.tour-chip button{min-height:34px;padding:0 12px;border-radius:6px;border:1px solid var(--w-rule);background:var(--w-panel-2);color:var(--w-text);font:inherit;font-weight:600;cursor:pointer}
.w-toast{position:absolute;left:50%;top:var(--w-col-top);transform:translateX(-50%);padding:10px 16px;font-size:.875rem;font-weight:500;width:max-content;max-width:min(520px,calc(100vw - 2*var(--w-gutter)));text-align:center;z-index:5}

/* ── our card, the legend and the coach ── */
.hm-x{position:absolute;right:8px;top:8px;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--w-rule);border-radius:var(--w-r-ctl);background:transparent;color:var(--w-text);cursor:pointer}
.hm-x::after{content:"";position:absolute;inset:-4px}
.hm-x:hover{background:var(--w-panel-2)}
.hm-x svg{width:16px;height:16px}
.hm-card{position:absolute;left:var(--w-safe-l);top:var(--w-col-top);width:min(360px,calc(100vw - 2*var(--w-gutter)));max-height:calc(100dvh - var(--w-col-top) - var(--w-dock-space));overflow:auto;padding:12px 16px 14px;z-index:3;background:var(--w-panel);box-shadow:var(--w-float);
  animation:rise var(--w-d-2) var(--w-e-out)}
.hm-card-kind{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:500;color:var(--w-faint)}
.hm-card-kind::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--w-quote)}
.hm-card[data-kind="landmark"] .hm-card-kind::before{background:var(--w-orbit)}
.hm-card[data-side="bid"] .hm-card-kind::before{background:var(--w-bid)}
.hm-card[data-side="ask"] .hm-card-kind::before{background:var(--w-ask)}
.hm-card[data-kind="market"]{border-color:var(--w-rule)}
.hm-card[data-side="bid"]{box-shadow:inset 3px 0 0 var(--w-bid),var(--w-float)}
.hm-card[data-side="ask"]{box-shadow:inset 3px 0 0 var(--w-ask),var(--w-float)}
.hm-card-title{font-size:1.0625rem;font-weight:600;line-height:1.25;margin:3px 44px 6px 0}
.hm-card-lines{list-style:none;display:grid;gap:4px;font-size:.875rem;color:var(--w-muted);font-variant-numeric:tabular-nums}
.hm-card-lines li:first-child{color:var(--w-text)}
.hm-card .chips{margin-top:10px}
.hm-card-more{margin:8px 0 -6px -8px}
.legend{position:absolute;left:var(--w-safe-l);top:var(--w-col-top);width:min(390px,calc(100vw - 2*var(--w-gutter)));max-height:calc(100dvh - var(--w-col-top) - var(--w-dock-space));display:flex;flex-direction:column;overflow:hidden;z-index:4;
  background:var(--w-panel);box-shadow:var(--w-float);animation:rise var(--w-d-2) var(--w-e-out)}
.legend-head{position:relative;padding:13px 52px 11px 16px;border-bottom:1px solid var(--w-hair);flex:none}
.legend-head h2{font-family:var(--w-serif);font-size:1.5rem;font-weight:400;line-height:1.15;letter-spacing:0}
.legend-head h2:focus{outline:none}
.legend-head .hm-x{top:50%;transform:translateY(-50%)}
.legend-body{overflow-y:auto;padding:12px 16px 16px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--w-rule) transparent}
.legend-lede{font-size:.875rem;color:var(--w-text);line-height:1.5;margin-bottom:6px}
.k-bid{color:var(--w-bid);font-weight:600}
.k-ask{color:var(--w-ask);font-weight:600}
.legend-list{list-style:none}
.legend-list li{padding:9px 0;border-top:1px solid var(--w-hair)}
.legend-list b{font-weight:600;font-size:.875rem}
.legend-list .where{font-size:.75rem;color:var(--w-faint);margin-left:8px}
.legend-list p{font-size:.8125rem;color:var(--w-muted);line-height:1.45;margin-top:1px}
.legend-foot{font-size:.75rem;color:var(--w-faint);margin-top:10px;line-height:1.45}
.legend-foot+.legend-foot{margin-top:2px}
.coach{position:absolute;left:50%;bottom:calc(var(--w-dock-space) + 56px);transform:translateX(-50%);width:min(400px,calc(100vw - 2*var(--w-gutter)));padding:14px 16px 12px;z-index:6;background:var(--w-panel);box-shadow:var(--w-float)}
.coach.in{animation:coach-in var(--w-d-2) var(--w-e-out)}
@keyframes coach-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.coach-step{font-size:.75rem;color:var(--w-faint);font-variant-numeric:tabular-nums}
.coach-title{font-family:var(--w-serif);font-size:1.5rem;font-weight:400;line-height:1.15;letter-spacing:0;margin:2px 0 4px}
.coach-body{font-size:.9375rem;color:var(--w-muted);line-height:1.45}
.coach-actions{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.coach-actions .btn-ghost{margin-left:-10px}
.legend-chip{min-height:40px;padding:0 12px;color:var(--w-text);font:600 .8125rem/1 var(--w-font);cursor:pointer;position:relative}
.legend-chip::after{content:"";position:absolute;inset:-2px 0}
.legend-chip[aria-expanded="true"]{border-color:var(--w-quote)}
.bell-chip{display:flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;font-size:.75rem;color:var(--w-faint)}
.bell-chip b{font-family:var(--w-num);font-weight:500;color:var(--w-text);font-variant-numeric:tabular-nums}

/* phone controls */
.touch{position:absolute;inset:auto 0 0 0;height:0}
.stick{position:fixed;left:max(24px,env(safe-area-inset-left));bottom:calc(max(24px,env(safe-area-inset-bottom)) + 64px);width:128px;height:128px;border-radius:50%;border:1.5px solid rgba(236,245,244,.3);background:rgba(11,30,38,.42);pointer-events:none;transition:opacity var(--w-d-1)}
.stick-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(76,201,240,.28);border:1.5px solid var(--w-quote)}
.touch-btns{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 188px);display:grid;grid-template-columns:repeat(2,52px);gap:10px}
.touch-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--w-rule);background:var(--w-hud-bg);color:var(--w-text);display:grid;place-items:center;font:600 .875rem/1 var(--w-font);touch-action:none;user-select:none;-webkit-user-select:none}
.touch-btn svg{width:22px;height:22px}
.touch-btn.wide{grid-column:span 2;width:auto;border-radius:var(--w-r-ctl);background:var(--w-text);color:var(--w-abyss);border-color:var(--w-text)}
.touch-btn.held{background:rgba(76,201,240,.24);border-color:var(--w-quote)}

/* ── the resident panel (world.js) ── */
.w-panel{position:fixed;z-index:60;right:var(--w-safe-r);top:var(--w-col-top);bottom:var(--w-dock-space);width:360px;
  background:var(--w-panel);border:1px solid var(--w-rule);border-radius:var(--w-r-card);box-shadow:var(--w-float);overflow:hidden;display:flex;flex-direction:column;animation:panel-in var(--w-d-2) var(--w-e-out)}
@keyframes panel-in{from{transform:translateX(16px);opacity:0}to{transform:none;opacity:1}}
.w-panel:focus{outline:none}
.panel-body{overflow-y:auto;padding:16px 16px 18px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--w-rule) transparent}
.panel-grip{display:none}
.panel-close{position:absolute;right:10px;top:10px;z-index:2;width:40px;height:40px;border-radius:var(--w-r-ctl);border:1px solid var(--w-rule);background:var(--w-panel);color:var(--w-text);display:grid;place-items:center;cursor:pointer}
.panel-close::after{content:"";position:absolute;inset:-2px}
.panel-close svg{width:18px;height:18px}
.panel-close:hover{background:var(--w-panel-2)}
.portrait{position:relative;border-radius:var(--w-r-ctl);overflow:hidden;aspect-ratio:1;margin:-2px 0 14px;background:var(--w-panel-2)}
.portrait canvas,.portrait iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.portrait .live-btn{position:absolute;left:10px;bottom:10px;min-height:36px;padding:0 14px;font-size:.875rem}
.portrait .pid{position:absolute;left:10px;top:10px;font-family:var(--w-num);font-size:.75rem;padding:3px 8px;border-radius:var(--w-r-tick);background:rgba(5,10,22,.72);color:var(--w-text)}
.p-title{font-family:var(--w-serif);font-weight:400;font-size:1.75rem;line-height:1.1;letter-spacing:0;padding-right:48px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 9px;border-radius:var(--w-r-tick);background:var(--w-panel-2);border:1px solid var(--w-hair);color:var(--w-text);font:500 .8125rem/1.3 var(--w-font);white-space:normal}
.chip .k{color:var(--w-muted);font-weight:500}
.chip .f{font-family:var(--w-num);font-size:.6875rem;color:var(--w-faint)}
.chip.tier-founder{border-color:var(--w-orbit);color:var(--w-orbit)}
.chip.tier-legend{border-color:var(--w-legend);color:var(--w-legend)}
.chip.tier-hyper{border-color:var(--w-quote);color:var(--w-quote)}
.chip.tier-beast{border-color:var(--w-lime);color:var(--w-lime)}
.chip.tier-citizen{color:var(--w-muted)}
.chip.chip-live{border-color:var(--w-teal)}
.chip.chip-live::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--w-teal);transform:rotate(-20deg) scaleY(.6);flex:none}
.chip.moodchip{border-color:var(--band);background:linear-gradient(color-mix(in srgb,var(--band) 16%,transparent),color-mix(in srgb,var(--band) 16%,transparent)),var(--w-panel-2);color:var(--band)}
.chip.moodchip svg{width:18px;height:18px}
.swatch{width:12px;height:12px;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.35)}
.p-sec{margin-top:16px}
.p-sec h3{font-weight:600;font-size:1rem;margin-bottom:6px}
.p-bio{font-size:.9375rem;color:var(--w-text);margin-top:12px}
.p-bio .move{display:block;color:var(--w-muted);font-size:.875rem;margin-top:4px}
.p-note{margin-top:14px;padding:10px 12px;border-radius:var(--w-r-ctl);background:var(--w-panel-2);border:1px solid var(--w-hair);font-size:.875rem;color:var(--w-muted)}
.p-rank{display:flex;align-items:baseline;gap:8px;font-size:.875rem;color:var(--w-muted)}
.p-rank b{font-family:var(--w-num);font-weight:500;font-size:1.375rem;color:var(--w-orbit);font-variant-numeric:tabular-nums}
.p-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.p-actions .btn{padding:0 12px;font-size:.875rem}
.p-actions .wide{grid-column:span 2}

/* ── dialogs ── */
.dlg{margin:auto;width:min(540px,calc(100vw - 2*var(--w-gutter)));max-height:min(86vh,740px);background:var(--w-panel);color:var(--w-text);border:1px solid var(--w-rule);border-radius:var(--w-r-card);box-shadow:var(--w-float);padding:18px 20px 20px;overflow:auto}
.dlg::backdrop{background:rgba(5,10,22,.66)}
.dlg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.dlg-head h2{font-family:var(--w-serif);font-weight:400;font-size:1.75rem;line-height:1.1;letter-spacing:0}
.dlg-x{width:40px;height:40px;border-radius:var(--w-r-ctl);border:1px solid var(--w-rule);background:transparent;color:var(--w-text);display:grid;place-items:center;cursor:pointer;flex:none;position:relative}
.dlg-x::after{content:"";position:absolute;inset:-2px}
.dlg-x:hover{background:var(--w-panel-2)}
.dlg-x svg{width:18px;height:18px}
.keys{width:100%;border-collapse:collapse;font-size:.875rem;margin-bottom:12px}
.keys th{text-align:left;font-weight:600;padding:8px 12px 8px 0;vertical-align:top;white-space:nowrap;width:40%}
.keys td{padding:8px 0;color:var(--w-muted)}
.keys tr+tr>*{border-top:1px solid var(--w-hair)}
.keys kbd{margin-right:3px}
.check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:.875rem;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--w-quote);flex:none}
.vol-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:44px;margin:8px 0 2px;padding-top:8px;border-top:1px solid var(--w-hair);font-size:.875rem;font-weight:500}
.vol-row input{width:100%;accent-color:var(--w-quote);min-height:28px}
.vol-out{font-family:var(--w-num);font-size:.75rem;color:var(--w-muted);min-width:4ch;text-align:right}
.dlg .small+.small,#vol-note{margin-top:8px}
#vol-note{margin-bottom:8px}
.pause-actions{display:grid;gap:10px}
.res-list{list-style:none;display:grid;gap:6px}
.res-list button{width:100%;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:var(--w-r-ctl);border:1px solid var(--w-hair);background:var(--w-panel-2);color:var(--w-text);text-align:left;font:inherit;cursor:pointer}
.res-list button:hover{border-color:var(--w-rule)}
.res-list .dot{width:10px;height:10px;border-radius:50%;flex:none}
.res-list .nm{font-weight:600;flex:1;min-width:0}
.res-list .nm small{display:block;font-weight:400;font-size:.8125rem;color:var(--w-muted)}
.res-list .dist{font-family:var(--w-num);font-size:.75rem;color:var(--w-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.res-list.static li{padding:8px 0;border-top:1px solid var(--w-hair)}

.bigmap{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(5,10,22,.66);padding:var(--w-gutter)}
.bigmap-card{background:var(--w-panel);border:1px solid var(--w-rule);border-radius:var(--w-r-card);box-shadow:var(--w-float);padding:16px 18px 18px;width:min(600px,100%);max-height:100%;overflow:auto}
#bigmap-canvas{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:var(--w-r-ctl);background:var(--w-bg);cursor:crosshair;margin-bottom:8px}
.map-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:.8125rem;font-weight:500}
.map-legend li{display:flex;align-items:center;gap:6px}
.map-legend i{width:10px;height:10px;border-radius:50%}

/* ── gate: "step through the ring" ── */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;pointer-events:auto}
.gate.open{pointer-events:none}
.gate-ring{position:absolute;left:50%;top:50%;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;
  box-shadow:0 0 0 220vmax var(--w-bg),inset 0 0 0 4px var(--w-quote),0 0 0 4px var(--w-pink),0 0 40px 6px rgba(255,43,214,.45),inset 0 0 40px 6px rgba(76,201,240,.35);
  transform:rotate(-14deg) scale(9,6.3);transition:transform var(--w-scene) var(--w-e-inout)}
.gate.loading .gate-ring{transform:rotate(-14deg) scale(1,.7)}
.gate.open .gate-ring{transform:rotate(-14deg) scale(26,18.2)}
.gate.done{display:none}
.loader{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;width:min(320px,calc(100vw - 2*var(--w-gutter)));transform:translateY(calc(50% - 48px));transition:opacity var(--w-d-2)}
.gate.open .loader{opacity:0}
.loader-bean{width:96px;height:96px;margin-bottom:52px}
.loader-orbit{transform-origin:60px 74px;animation:orbit 2.2s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.loader-title{font-family:var(--w-serif);font-weight:400;font-size:1.875rem;line-height:1.1}
.bar{width:100%;height:6px;border-radius:3px;background:var(--w-panel-2);border:1px solid var(--w-hair);overflow:hidden}
.bar-fill{height:100%;background:var(--w-quote);transform-origin:left;transform:scaleX(0);transition:transform var(--w-d-2) var(--w-e-out)}
.loader-step{color:var(--w-text);min-height:1.5em}
.loader-tip{min-height:1.5em}
.loader-low{margin-top:4px;color:var(--w-muted)}
.skip-intro{position:absolute;right:var(--w-safe-r);bottom:var(--w-safe-b);pointer-events:auto}
.skip-intro kbd{margin-left:4px}

.fallback{position:fixed;inset:0;z-index:110;overflow:auto;background:var(--w-bg);color:var(--w-text)}
.fallback .site-header{position:sticky;top:0;background:rgba(6,18,24,.94);border-bottom:1px solid var(--w-hair)}
.fallback-wrap{padding-top:clamp(24px,5vw,48px);padding-bottom:48px}
.fallback-card{max-width:720px;margin:0 auto;display:grid;gap:14px;background:var(--w-panel);border:1px solid var(--w-hair);border-radius:var(--w-r-card);box-shadow:var(--w-edge)}
.fallback h1{font-family:var(--w-serif);font-size:clamp(2.25rem,1.6rem + 3vw,3.25rem);font-weight:400;line-height:1.05;letter-spacing:0}
.fallback-card h2{font-family:var(--w-serif);font-size:1.75rem;font-weight:400;letter-spacing:0;margin-top:12px}
.fallback .lead{font-size:1.25rem}
.fallback-actions{display:flex;flex-wrap:wrap;gap:10px}
.fallback .res-list.static a{color:var(--w-quote)}
.fallback .site-footer{margin-top:0;background:var(--w-abyss);border-top:1px solid var(--w-hair)}
.fallback .site-footer h2{color:var(--w-text)}
.fallback .site-footer li a,.fallback .foot-brand p,.fallback .foot-status,.fallback .foot-legal{color:var(--w-muted)}
.fallback .site-footer li a:hover{color:var(--w-text)}
.help-site{display:flex;flex-wrap:wrap;gap:0 4px;margin:4px 0 0;padding-top:8px;border-top:1px solid var(--w-hair)}
.help-site a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--w-quote);font-size:.875rem;font-weight:500;text-decoration:none;border-radius:var(--w-r-ctl)}
.help-site a:first-child{margin-left:-8px}
.help-site a:hover{color:var(--w-text);background:var(--w-panel-2)}
.disclaimer{margin-top:10px;padding-top:10px;border-top:1px solid var(--w-hair)}

.debug{position:fixed;left:50%;top:6px;transform:translateX(-50%);z-index:130;font:11px/1.4 var(--w-num);background:rgba(5,10,22,.85);color:var(--w-bid);padding:4px 10px;border-radius:var(--w-r-tick);pointer-events:none;white-space:pre}

/* ── touch tablets: the rise, lower and "Say hi" buttons stack above the minimap instead of over it ── */
@media (pointer:coarse) and (min-width:720px){.touch-btns{bottom:calc(var(--w-dock-space) + 180px)}}

/* ── short landscape screens (phones on their side): the map moves up beside the buttons ── */
@media (min-width:720px) and (max-height:540px){
  .map-wrap{bottom:auto;top:var(--w-col-top);padding:4px}
  #minimap{width:96px;height:96px}
  .map-btn{top:auto;bottom:8px;left:8px;right:8px}
  .touch-btns{bottom:calc(var(--w-dock-space) + 12px)}
  .stick{bottom:calc(var(--w-dock-space) + 16px)}
}

/* ── phones: the tape goes to the top in two rows, under the title; map and chips below it ── */
@media (max-width:719px){
  :root{--w-gutter:12px;--w-tape-h:74px;--w-row3-top:calc(var(--w-top) + var(--w-top-h) + 8px + var(--w-tape-h) + 8px);--w-dock-space:calc(var(--w-safe-b) + 12px)}
  .hud-title h1{font-size:.875rem}
  .hud-district{font-size:.75rem}
  .hud-back span{display:none}
  .hud-back{padding:0 10px 0 8px}
  .hud-right{gap:6px}
  #quality-btn{padding:0 10px;font-size:.8125rem}
  .legend-btn{display:none!important}
  .dock{top:calc(var(--w-top) + var(--w-top-h) + 8px);bottom:auto}
  .wtape{flex-wrap:wrap;height:var(--w-tape-h);align-content:flex-start}
  .wtape .w-mood{order:0;flex:none;width:48px;height:44px;padding:0;justify-content:center;min-width:0}
  .wtape .mood-text{display:none}
  .tape-main{order:1;flex:1 1 auto;height:44px;min-width:0}
  .tape-main .wtc{flex-direction:row;align-items:baseline;align-self:center;gap:6px;border-left:0;padding:0 0 0 10px}
  .tape-main .wtc+.wtc{padding-left:8px}
  .tc-px dt{font-size:.8125rem}
  .tc-px dd{font-size:1rem}
  .tc-chg dt{display:none}
  .tape-state{order:2;height:44px;padding:0 10px;font-size:.75rem;gap:6px}
  .tape-pause{order:3;height:44px;width:46px}
  .tape-sub{order:4;flex:1 0 100%;height:28px;border-top:1px solid var(--w-hair);align-items:center}
  .tape-sub .wtc{flex-direction:row;align-items:baseline;gap:6px;border-left:0;padding:0 10px}
  .tape-sub .wtc+.wtc{border-left:1px solid var(--w-hair)}
  .tape-sub .wtc dt,.tape-sub .wtc dd{font-size:.75rem}
  .tc-oi,.tc-vol,.tc-bell,.tc-blk .lg{display:none}
  .tc-fund{display:flex}
  .mood-pop{top:calc(100% + 8px);bottom:auto;width:100%;max-height:calc(100dvh - var(--w-row3-top) - 24px);z-index:7}
  .side-row{display:flex;gap:6px;position:absolute;left:var(--w-safe-l);top:var(--w-row3-top);max-width:calc(100vw - 2*var(--w-gutter) - 108px)}
  .legend-chip{padding:0 10px;font-size:.75rem;white-space:nowrap}
  .bell-chip{padding:0 9px;white-space:nowrap}
  .map-wrap{bottom:auto;top:var(--w-row3-top);padding:4px}
  #minimap{width:92px;height:92px}
  .map-btn{top:auto;bottom:8px;left:8px;right:8px;min-height:28px} /* the big map on a phone; its ::after makes the target 42 x 92 */
  .hint{bottom:calc(var(--w-safe-b) + 4px);font-size:.75rem;white-space:normal;text-align:center;width:max-content}
  /* toasts and the tour chip sit under the map row, clear of the stick, the hold buttons and "Say hi" below */
  .tour-chip{top:var(--w-row3-top);bottom:auto;left:var(--w-safe-l);right:calc(var(--w-safe-r) + 108px);transform:none;justify-content:space-between;white-space:normal;line-height:1.3;z-index:6} /* over the chip row, beside the map */
  .w-toast{top:calc(var(--w-row3-top) + 110px);bottom:auto}
  body:has(#coach:not([hidden])) .w-toast{top:calc(var(--w-row3-top) + 182px)} /* under the first-visit coach card */
  .hm-card{top:var(--w-row3-top);left:var(--w-safe-l);right:var(--w-safe-r);width:auto;max-height:42dvh;z-index:8}
  .coach{top:var(--w-row3-top);bottom:auto;left:var(--w-safe-l);right:var(--w-safe-r);width:auto;transform:none;z-index:8}
  .coach.in{animation-name:rise}
  .legend{left:0;right:0;bottom:0;top:auto;width:auto;max-height:72dvh;border-radius:var(--w-r-card) var(--w-r-card) 0 0;border-bottom:0;z-index:62;animation-name:sheet-in;padding-bottom:env(safe-area-inset-bottom)}
  .w-panel{left:0;right:0;bottom:0;top:auto;width:auto;height:62vh;height:62dvh;border-radius:var(--w-r-card) var(--w-r-card) 0 0;border-bottom:0;animation-name:sheet-in}
  .panel-grip{display:block;width:40px;height:4px;border-radius:2px;background:var(--w-rule);margin:8px auto 0;flex:none}
  .panel-grip::after{content:"";display:block;height:28px;margin-top:-12px}
  .portrait{width:min(240px,62%);margin:0 0 12px}
  .dlg{width:100vw;max-width:100vw;max-height:88vh;margin:auto 0 0;border-radius:var(--w-r-card) var(--w-r-card) 0 0;border-bottom:0}
}
@keyframes sheet-in{from{transform:translateY(30%);opacity:0}to{transform:none;opacity:1}}
@media (max-width:420px){.hud-title h1{display:none}.hud-title{padding:4px 12px}.hud-left{min-width:0;flex:1}#residents-btn{display:none}}
@media (max-width:420px){ /* the block reads "Block #19,645,541"; "Elysium testnet" stays for screen readers and in the title */
  .tc-blk #tp-blk-k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tc-blk .sm{display:inline}
}
@media (max-width:359px){.tc-fund{display:none}.tape-state{padding:0 8px}}
.help-actions{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .gate,.loader,.hint{transition:opacity 150ms!important}
  .gate.open{opacity:0;transition:opacity 150ms!important}
  .gate-ring{transition:none!important}
  .gate.open .gate-ring{transform:rotate(-14deg) scale(1,.7)}
  .fl-up,.fl-dn,.tape-state i{animation:none!important}
}
@media (forced-colors:active){
  .hud-back,.hud-btn,.wtape,.hm-card,.legend,.coach,.w-panel,.dlg,.legend-chip,.bell-chip,.w-nav{border:1px solid CanvasText}
  .tape-state i{forced-color-adjust:none}
}