/* Self-hosted variable fonts (SIL Open Font License 1.1, see /licenses) */
@font-face{font-family:"Anybody";src:url("../fonts/anybody-latin-standard-normal.woff2") format("woff2");font-weight:100 900;font-stretch:50% 150%;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-standard-normal.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("../fonts/martian-mono-latin-standard-normal.woff2") format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-style:normal;font-display:swap}

/* Base reset */
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: a fixed WebGL stage under scroll-driven text overlays that alternate sides of the screen; a price-axis rail on the right edge tracks progress through the story. Single dark look by choice. */
:root{
  color-scheme:dark;
  --ink:#06070A;      /* stage black, faint blue bias */
  --deep:#0D1017;     /* raised surfaces */
  --line:#1F2531;     /* hairlines */
  --mist:#8C95A7;     /* secondary text */
  --paper:#EDF0F5;    /* primary text */
  --bid:#45D8E6;      /* bids, up moves */
  --ask:#FF9D47;      /* asks, down moves */
  --steel:#4B67B2;    /* logo blue */
  --ice:#E4FBFF;      /* logo edge light */
  --f-display:"Anybody","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --f-data:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-mega:clamp(2.5rem,8.2vw,8.75rem);
  --t-xl:clamp(2rem,4.2vw,4.5rem);
  --t-lg:clamp(1.15rem,1.9vw,1.6rem);
  --t-md:1.0625rem;
  --t-sm:.875rem;
  --t-xs:.6875rem;
  --t-2xs:.625rem;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--paper);font-family:var(--f-body);font-size:var(--t-md);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
::selection{background:var(--bid);color:var(--ink)}
a{color:inherit}
:focus-visible{outline:2px solid var(--bid);outline-offset:4px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- stage ---------- */
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(125% 95% at 50% 45%,transparent 52%,color-mix(in srgb,var(--ink) 82%,transparent) 100%)}
.no-gl body{background:radial-gradient(55% 45% at 28% 38%,color-mix(in srgb,var(--bid) 16%,transparent),transparent 70%),radial-gradient(50% 45% at 76% 62%,color-mix(in srgb,var(--ask) 14%,transparent),transparent 70%),var(--ink);background-attachment:fixed}
.no-gl #stage{display:none}

/* ---------- globe labels ---------- */
.glabels{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.glabel{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;font-family:var(--f-data);font-size:var(--t-2xs);letter-spacing:.12em;color:var(--paper);white-space:nowrap;opacity:0;will-change:transform,opacity}
.glabel::before{content:"";width:18px;height:1px;background:var(--mist)}
.glabel.is-left{flex-direction:row-reverse}
.glabel b{font-weight:500}
.glabel span{color:var(--mist)}
.glabel.is-open span{color:var(--bid)}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:calc(env(safe-area-inset-top,0px) + 18px);padding-bottom:18px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none}
.hdr::before{content:"";position:absolute;z-index:-1;inset:0 0 -40px;background:linear-gradient(var(--ink),color-mix(in srgb,var(--ink) 55%,transparent) 60%,transparent);pointer-events:none}
.hdr>*{pointer-events:auto}
.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--paper)}
.logo{display:block;height:auto;color:var(--paper);overflow:visible}
.brand .logo{width:82px;--hatch:0;--line:.75;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--steel) 50%,transparent))}
.brand__sub{font-family:var(--f-data);font-size:var(--t-2xs);line-height:1.35;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);padding-left:14px;border-left:1px solid var(--line)}
.nav{display:flex;gap:30px;font-family:var(--f-data);font-size:var(--t-2xs);letter-spacing:.18em;text-transform:uppercase}
.nav a{position:relative;text-decoration:none;color:var(--mist);padding-block:6px;transition:color .3s}
.nav a:hover,.nav a[aria-current="true"]{color:var(--paper)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--bid),var(--ask));transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.nav a[aria-current="true"]::after{transform:scaleX(1)}
.sound{position:relative;display:inline-flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--line);color:var(--paper);font:500 var(--t-2xs)/1 var(--f-data);letter-spacing:.16em;text-transform:uppercase;padding:11px 14px;cursor:pointer;transition:border-color .3s}
.sound:hover,.sound[aria-pressed="true"]{border-color:var(--mist)}
.sound.nudge::after{content:"";position:absolute;inset:-1px;border:1px solid var(--bid);pointer-events:none;animation:nudge 1.5s cubic-bezier(.2,.7,.2,1) 2}
@keyframes nudge{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.16,1.7)}}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.eq i{display:block;width:2px;height:100%;background:currentColor;transform-origin:bottom;transform:scaleY(.22)}
.sound[aria-pressed="true"]:not(.is-live) .eq i{animation:eq 1.1s ease-in-out infinite}
.sound[aria-pressed="true"]:not(.is-live) .eq i:nth-child(2){animation-delay:-.45s}
.sound[aria-pressed="true"]:not(.is-live) .eq i:nth-child(3){animation-delay:-.2s}
.sound[aria-pressed="true"]:not(.is-live) .eq i:nth-child(4){animation-delay:-.75s}
@keyframes eq{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}
@media (min-width:721px){.hdr{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
@media (max-width:920px){.nav{display:none}}

/* ---------- price rail ---------- */
.rail{position:fixed;top:24vh;bottom:24vh;right:0;z-index:15;width:96px;pointer-events:none;font-family:var(--f-data);font-size:9px;letter-spacing:.04em;color:var(--mist);font-variant-numeric:tabular-nums}
.rail__ticks{position:absolute;top:0;bottom:0;right:calc(env(safe-area-inset-right,0px) + 22px);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
.tick{display:flex;align-items:center;gap:8px;height:0;opacity:.55}
.tick::after{content:"";width:5px;height:1px;background:var(--mist)}
.tick--major::after{width:11px}
.rail__tag{position:absolute;top:0;right:calc(env(safe-area-inset-right,0px) + 22px);display:flex;align-items:center;transform:translateY(-50%);color:var(--ink);font-weight:500;will-change:transform}
.rail__tag::before{content:"";width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:7px solid var(--bid)}
.rail__tag span{display:block;background:var(--bid);padding:3px 6px 3px 4px;line-height:10px}
.rail__tag.is-down::before{border-right-color:var(--ask)}
.rail__tag.is-down span{background:var(--ask)}
@media (max-width:720px){.rail{display:none}}

/* ---------- story sections ---------- */
main{position:relative;z-index:3}
.sec{position:relative;height:calc(var(--h,200) * 1vh)}
.pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:104px 56px;pointer-events:none}
.js-story .pin{position:fixed;top:0;right:0;bottom:0;left:0;height:auto;visibility:hidden;opacity:0}
.panel{position:relative;width:100%;max-width:46rem;min-width:0;pointer-events:auto}
.panel::before{content:"";position:absolute;z-index:-1;inset:-22% -18%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ink) 70%,transparent),transparent);pointer-events:none}
.pin--end .panel{justify-self:end}
#markets .panel{max-width:41rem}
@media (min-width:721px){.pin{padding-left:max(clamp(40px,6vw,104px),env(safe-area-inset-left,0px));padding-right:max(clamp(110px,9vw,168px),env(safe-area-inset-right,0px));padding-block:120px 72px}}
#depth .pin{align-items:start}
@media (min-width:721px){#price .pin{align-items:end}}
@media (max-width:720px){.pin{align-items:end}.panel::before{inset:-14% -10%}}

.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 22px;font-family:var(--f-data);font-size:var(--t-2xs);letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.eyebrow b{font-weight:500;color:var(--paper)}
.eyebrow b::after{content:"";display:inline-block;vertical-align:middle;width:22px;height:1px;margin-left:12px;background:var(--line)}
.pip{display:inline-block;width:7px;height:7px;border-radius:50%;background:linear-gradient(90deg,var(--bid) 50%,var(--ask) 50%)}

.mega,.xl{margin:0;font-family:var(--f-display);font-weight:300;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.mega{font-size:var(--t-mega);line-height:.88;--sq:1}
.xl{font-size:var(--t-xl);line-height:.92}
.w{display:block;--wd:100;--wg:300;font-variation-settings:"wdth" calc(var(--wd) * var(--sq,1)),"wght" var(--wg)}
.nxdot{display:inline-block;width:.16em;height:.16em;margin-left:.06em;border-radius:50%;background:linear-gradient(90deg,var(--bid) 50%,var(--ask) 50%);vertical-align:baseline}

.lede{max-width:31rem;margin:30px 0 0;font-size:clamp(1rem,1.15vw,1.1875rem);color:color-mix(in srgb,var(--paper) 80%,var(--mist))}
.body{max-width:31rem;margin:26px 0 0;color:color-mix(in srgb,var(--paper) 76%,var(--mist))}
.note{margin:14px 0 0;font-family:var(--f-data);font-size:var(--t-2xs);letter-spacing:.06em;color:var(--mist)}

.btn{display:inline-flex;align-items:center;gap:14px;padding:16px 22px 16px 18px;border:1px solid var(--paper);background:var(--paper);color:var(--ink);font:500 var(--t-2xs)/1 var(--f-data);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .35s,color .35s}
.btn::before{content:"";width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.btn:hover{background:transparent;color:var(--paper)}
.btn--ghost{background:transparent;color:var(--paper)}
.btn--ghost:hover{background:var(--paper);color:var(--ink)}

/* hero */
.pin--hero{align-items:end}
.hero{max-width:min(100%,62rem)}
.hero__row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:38px}
.cue{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-data);font-size:var(--t-2xs);letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.cue i{position:relative;display:block;width:46px;height:1px;overflow:hidden;background:var(--line)}
.cue i::after{content:"";position:absolute;inset:0;background:var(--paper);transform:translateX(-100%);animation:cue 2.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cue{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(101%)}}
.flowlabel{position:absolute;top:31%;display:flex;align-items:center;gap:10px;font-family:var(--f-data);font-size:var(--t-2xs);letter-spacing:.22em;text-transform:uppercase;pointer-events:none}
.flowlabel::after,.flowlabel::before{content:"";height:1px;width:34px}
.flowlabel--bid{left:max(40px,env(safe-area-inset-left,0px));color:var(--bid)}
.flowlabel--bid::before{display:none}
.flowlabel--bid::after{background:linear-gradient(90deg,var(--bid),transparent)}
.flowlabel--ask{right:max(130px,calc(env(safe-area-inset-right,0px) + 130px));color:var(--ask)}
.flowlabel--ask::after{display:none}
.flowlabel--ask::before{background:linear-gradient(270deg,var(--ask),transparent)}
@media (max-width:720px){.flowlabel{display:none}}

/* sessions board */
.board{margin-top:30px;border-top:1px solid var(--line);font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.brow{display:grid;grid-template-columns:6.4em minmax(0,1fr) 4.6em minmax(8.5em,11.5em);gap:12px;align-items:center;padding-block:10px;border-bottom:1px solid var(--line)}
.bhead{padding-block:9px;font-size:var(--t-2xs);letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.bcode{font-weight:500;color:var(--paper)}
.bcity{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mist)}
.btime{color:var(--paper)}
.bstat{display:flex;flex-direction:column;gap:2px;min-width:0}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line)}
.is-open .pill{color:var(--bid)}
.is-open .pill::before{background:var(--bid);box-shadow:0 0 0 3px color-mix(in srgb,var(--bid) 22%,transparent)}
.is-break .pill{color:var(--ask)}
.is-break .pill::before{background:var(--ask)}
.bnext{font-size:var(--t-2xs);color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flap{display:inline-block}
.flapping{animation:flap .11s steps(2) infinite}
@media (max-width:720px){#markets .body{display:none}.brow{grid-template-columns:6.6em 4em minmax(0,1fr);gap:10px;padding-block:9px}.bcity,.bnext{display:none}.glabels{display:none}}
@keyframes flap{50%{transform:translateY(-1px) scaleY(.88)}}

/* depth key */
.dkey{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:30px;font-family:var(--f-data);font-size:var(--t-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.dkey span{display:inline-flex;align-items:center;gap:9px}
.dkey span::before{content:"";width:16px;height:8px;background:var(--c,transparent)}
.dkey .dkey__gap::before{width:10px;height:10px;background:transparent;border-left:1px solid var(--mist);border-right:1px solid var(--mist)}

/* OHLC readout */
.ohlc{display:grid;gap:10px;margin-top:30px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--f-data);font-size:var(--t-xs);font-variant-numeric:tabular-nums}
.ohlc__sym{display:flex;gap:16px;font-size:var(--t-2xs);letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.ohlc__sym span:first-child{color:var(--paper);font-weight:500}
.ohlc__vals{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--paper)}
.ohlc__vals b{margin-right:7px;font-weight:400;color:var(--mist)}
.ohlc__vals i{font-style:normal}
.ohlc__note{font-size:var(--t-2xs);letter-spacing:.08em;color:var(--mist)}
.up{color:var(--bid)}
.down{color:var(--ask)}

/* all in one */
.pin--aio{align-content:end;row-gap:34px}
.aio__head{max-width:40rem}
.pillars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 30px;pointer-events:auto}
.pillars li{min-width:0;padding-top:16px;border-top:1px solid var(--line)}
.pillars .idx{display:block;margin-bottom:10px;font-family:var(--f-data);font-size:var(--t-2xs);letter-spacing:.18em;color:var(--mist)}
.pk{display:block;font-family:var(--f-display);font-size:var(--t-lg);line-height:1.05;text-transform:uppercase;font-variation-settings:"wdth" 122,"wght" 450}
.pillars p{max-width:22em;margin:10px 0 0;font-size:var(--t-sm);line-height:1.55;color:var(--mist)}
@media (max-width:980px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}}
@media (max-width:720px){.pin--aio{row-gap:22px}.pillars{gap:14px 16px}.pillars p{font-size:.78rem}.pk{font-size:1rem}}

/* finale */
.pin--center{display:block;text-align:center;--mark:min(80vw,470px)}
.finale__mark{position:absolute;left:50%;top:var(--nx-y,50%);width:var(--mark);transform:translate(-50%,-50%);pointer-events:none}
.finale__mark .logo{width:100%;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--steel) 55%,transparent))}
.finale{position:absolute;left:50%;top:calc(var(--nx-y,50%) + var(--mark) * .197 + 30px);transform:translateX(-50%);display:grid;justify-items:center;gap:18px;width:calc(100% - 32px);max-width:40rem}
.finale__name{margin:0;font-family:var(--f-data);font-size:var(--t-xs);letter-spacing:.42em;text-transform:uppercase;color:var(--mist);padding-left:.42em}
.tagline{margin:18px 0 8px;font-family:var(--f-display);font-size:var(--t-lg);text-transform:uppercase;letter-spacing:.04em;font-variation-settings:"wdth" 140,"wght" 300}

/* footer */
.foot{position:relative;z-index:4;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 40px;padding-block:28px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:var(--ink);border-top:1px solid var(--line);font-family:var(--f-data);font-size:var(--t-2xs);letter-spacing:.06em;line-height:1.7;color:var(--mist)}
.foot p{margin:0;max-width:62ch}
@media (min-width:721px){.foot{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}

/* loader */
.loader{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:var(--ink);animation:failsafe .6s 9s forwards}
@keyframes failsafe{to{opacity:0;visibility:hidden}}
.loader__in{display:grid;gap:30px;width:min(560px,100%)}
.loader__brand{display:grid;justify-items:center;gap:22px}
.loader__mark{display:block;width:92px;height:auto;overflow:visible;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--steel) 45%,transparent))}
.loader__sweep{fill:none;stroke:var(--ice);stroke-width:1.2;stroke-linejoin:miter;stroke-dasharray:7 43;animation:sweep 2.4s linear infinite}
@keyframes sweep{to{stroke-dashoffset:-100}}
.loader__label{font-family:var(--f-data);font-size:var(--t-2xs);letter-spacing:.32em;text-transform:uppercase;color:var(--mist);padding-left:.32em}

/* charge hint + cursor over the particle logo */
.chargehint{position:fixed;left:0;top:0;z-index:2;display:flex;align-items:center;gap:10px;font-family:var(--f-data);font-size:var(--t-2xs);letter-spacing:.22em;text-transform:uppercase;color:var(--mist);white-space:nowrap;opacity:0;transition:opacity .6s;pointer-events:none;will-change:transform}
.chargehint.is-on{opacity:1}
.chargehint svg{display:block;width:9px;height:14px;fill:var(--bid);animation:zap 2.2s steps(1) infinite}
@keyframes zap{0%,100%{opacity:1}44%{opacity:.25}48%{opacity:1}52%{opacity:.35}56%{opacity:1}}
html.is-charging,html.is-charging body{cursor:crosshair}
.loader__chart{position:relative;height:80px}
.loader__chart svg{display:block;width:100%;height:100%;overflow:visible}
.loader__chart path{fill:none;stroke:var(--paper);stroke-width:1.5;vector-effect:non-scaling-stroke}
.loader__chart .loader__base{stroke:var(--line)}
.loader__dot{position:absolute;left:0;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:linear-gradient(90deg,var(--bid) 50%,var(--ask) 50%);box-shadow:0 0 0 4px color-mix(in srgb,var(--bid) 18%,transparent)}
.loader__meta{display:flex;justify-content:space-between;gap:16px;font-family:var(--f-data);font-size:var(--t-2xs);letter-spacing:.2em;text-transform:uppercase;color:var(--mist);font-variant-numeric:tabular-nums}
.loader__meta b{font-weight:500;color:var(--paper)}

@media (prefers-reduced-motion:reduce){
  .grain,.cue i::after,.sound[aria-pressed="true"] .eq i,.loader__sweep,.chargehint svg,.sound.nudge::after{animation:none}
}