:root {
  color-scheme: dark;
  /* Neutral instrument palette. The old scheme was warm amber on navy with a
     cream paper - a combination that reads as decoration on a page about
     market mechanics. Ground is a true near-black with a faint cool cast,
     text is a plain off-white, and there is no brand accent competing with
     the artwork. The only colour that carries meaning is up/down. */
  --ink:   #08090b;
  --ink-2: #101216;
  --ink-3: #171a1f;
  --paper: #f2f3f4;
  --muted: rgba(242, 243, 244, .60);
  --faint: rgba(242, 243, 244, .38);
  --line:  rgba(242, 243, 244, .13);
  --hair:  rgba(242, 243, 244, .07);
  /* kept as variable names so nothing downstream breaks; both now neutral */
  --amber: #f2f3f4;
  --amber-dim: rgba(242, 243, 244, .45);
  --up:   #3fb27f;
  --down: #d8564b;
  --ease: cubic-bezier(.2, .75, .2, 1);

  --display: "Khand", "Oswald", "Helvetica Neue", sans-serif;
  --ui:      "Hind", "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-width: 320px; background: var(--ink); color: var(--paper);
  font-family: var(--ui); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 1px solid var(--amber); outline-offset: 4px; }
code { font-family: var(--data); font-size: .92em; color: var(--paper); background: rgba(242,243,244,.07); padding: 1px 6px; border-radius: 3px; }

.experience { --night-mix: 1; }  /* default until the chain read lands; JS sets it via CSSOM (an inline style= attribute is blocked by our CSP) */
.experience { position: relative; min-height: 100svh; padding-bottom: 28px; }

/* entrance choreography */
.masthead, .ticker-tape, .status-line, .city-frame, .chain-proof, .plaque, .footer-bar {
  opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.experience.ready .masthead { opacity: 1; transform: none; transition-delay: .02s; }
.experience.ready .ticker-tape { opacity: 1; transform: none; transition-delay: .1s; }
.experience.ready .status-line { opacity: 1; transform: none; transition-delay: .18s; }
.experience.ready .city-frame { opacity: 1; transform: none; transition-delay: .26s; }
.experience.ready .chain-proof { opacity: 1; transform: none; transition-delay: .38s; }
.experience.ready .plaque { opacity: 1; transform: none; transition-delay: .46s; }
.experience.ready .footer-bar { opacity: 1; transform: none; transition-delay: .54s; }

/* ---------- masthead ---------- */
.masthead {
  position: relative; z-index: 20;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  padding: 22px clamp(16px, 3vw, 48px) 6px;
}
.wordmark { justify-self: start; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.wordmark-main { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; line-height: .9; color: var(--paper); }
.wordmark-sub { font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.main-nav { justify-self: center; display: flex; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 4px; background: rgba(245,241,232,.03); }
.main-nav button { padding: 10px 15px; border: 0; border-radius: 4px; color: rgba(245,241,232,.6); background: transparent; font-size: 10px; cursor: pointer; transition: color .2s, background .2s; }
.main-nav button:hover { color: var(--paper); }
.main-nav button.active { color: #08090b; background: var(--amber); }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.wallet-button, .trade-open { height: 38px; border-radius: 4px; cursor: pointer; }
.wallet-button { display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--line); color: var(--paper); background: transparent; font-size: 10px; }
.wallet-status, .market-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--down); box-shadow: 0 0 10px currentColor; }
.experience[data-market="open"] .wallet-status, .experience[data-market="open"] .market-dot, .wallet-button.connected .wallet-status { background: var(--up); }
.trade-open { display: flex; align-items: center; gap: 18px; padding: 0 16px; border: 0; color: #08090b; background: var(--amber); font-size: 10px; font-weight: 600; }

/* ---------- ticker tape : real scrolling motion ---------- */
.ticker-tape { position: relative; z-index: 20; overflow: hidden; border-block: 1px solid var(--line); background: rgba(242,243,244,.02); margin: 10px 0 14px; }
.ticker-track {
  display: inline-flex; gap: 0; padding: 9px 0; white-space: nowrap;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber);
  animation: tickerScroll 32s linear infinite;
}
.ticker-track span { display: inline-flex; }
.ticker-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--amber-dim); align-self: center; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.status-line {
  position: relative; z-index: 20; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 9px; padding: 0 20px 18px; color: rgba(245,241,232,.62);
  font: 400 9px "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; text-align: center;
}
.status-sep { color: var(--line); }
.return-live-chip { display: none; margin-left: 8px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 4px; color: var(--paper); background: rgba(245,241,232,.04); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.experience:not([data-view="live"]) .return-live-chip { display: inline-flex; }

/* the live board — real HTML text laid over the building's ticker wall.
   Percentages are of .frame-inner, which is pinned to the video's own 16:9,
   so each board stays welded to its building at every screen size.
   The day and night towers frame differently, so there are two boards; each
   one cross-fades on exactly the same --night-mix as the video under it, so
   a board is never visible over the wrong building. */
.board-tape {
  position: absolute; z-index: 6; overflow: hidden; display: flex; align-items: center;
  border-radius: 1px; pointer-events: none; transition: opacity 1.5s ease;
  /* the board is its own size container, so the text is sized against the
     board's real height rather than some far-away ancestor's width. */
  container-type: size;
}
.board-day {
  /* measured off the blank-board day render (1280x720): the flat screen face
     is x 420..824, y 279..315. No background fill any more — the board in the
     artwork is genuinely empty, so the text sits straight on it. */
  left: 32.81%; top: 38.75%; width: 31.56%; height: 5.00%;
  background: none; box-shadow: none;
  opacity: calc(1 - var(--night-mix));
}
.board-night {
  /* measured off the blank-board night render (1280x720): flat face is
     x 422..863, y 244..276. Also unfilled — the artwork board is empty. */
  left: 32.97%; top: 33.89%; width: 34.45%; height: 4.44%;
  background: none; box-shadow: none;
  opacity: var(--night-mix);
}
.experience[data-view="open"] .board-night { opacity: 0; }
.experience[data-view="closed"] .board-night { opacity: 1; }
.experience[data-view="open"] .board-day { opacity: 1; }
.experience[data-view="closed"] .board-day { opacity: 0; }
/* the night wall is a green LED board in the artwork — match it */
.board-night .board-track { color: #9ed44a; text-shadow: 0 0 7px rgba(158,212,74,.5); }
.board-night .board-track em { color: rgba(158,212,74,.55); }
.board-night .board-track i { background: rgba(158,212,74,.4); }
.board-track {
  display: flex; gap: 0; white-space: nowrap; padding-left: 0;
  /* 54% of the board's own height — fills the panel at every screen size */
  font-family: var(--display); font-weight: 600;
  font-size: clamp(9px, 72cqh, 44px); letter-spacing: .07em; line-height: 1;
  color: var(--amber); font-variant-numeric: tabular-nums;
  animation: boardScroll 42s linear infinite; will-change: transform;
}
.board-track span { display: inline-flex; align-items: center; gap: .5em; }
.board-track em { font-style: normal; color: rgba(245,241,232,.72); }
.board-track i { width: .28em; height: .28em; border-radius: 50%; background: var(--amber-dim); }
@keyframes boardScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .board-track { animation: none; padding-left: .6em; } }

/* ---------- the framed city stage ---------- */
.city-frame { position: relative; z-index: 5; padding: 0 clamp(16px, 3vw, 48px); max-width: 1536px; margin-inline: auto; }
.frame-inner {
  position: relative; aspect-ratio: 16 / 9; height: auto; container-type: inline-size;
  border-radius: 26px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(245,241,232,.14); background: #0b1017;
  box-shadow: 0 50px 130px rgba(0,0,0,.55), inset 0 0 0 1px rgba(242,243,244,.05);
}
.scene-plane, .atmosphere, .scene-vignette, .grain { position: absolute; inset: 0; }
.scene-plane { transition: opacity 1.8s var(--ease); will-change: opacity; background: #0b1017; }
/* the two looping copies of one scene; only .is-live is shown */
.scene-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.015);
  transition: transform .3s linear; will-change: transform;
  opacity: 0;
}
.scene-layer.is-live { opacity: 1; }
.scene-night { opacity: var(--night-mix); }
.experience[data-view="open"] .scene-night { opacity: 0; }
.experience[data-view="closed"] .scene-night { opacity: 1; }
.atmosphere { pointer-events: none; transition: opacity 1.5s ease; }
.atmosphere-day { background: linear-gradient(90deg, rgba(5,7,10,.5), transparent 26%, transparent 74%, rgba(5,7,10,.36)); opacity: calc(1 - var(--night-mix)); }
.atmosphere-night { background: radial-gradient(circle at 50% 42%, transparent 22%, rgba(3,6,10,.16) 68%, rgba(3,6,10,.44)); opacity: var(--night-mix); }
.experience[data-view="open"] .atmosphere-night { opacity: 0; }
.experience[data-view="closed"] .atmosphere-night { opacity: 1; }
.scene-vignette {
  background: linear-gradient(180deg, rgba(4,6,9,.4), transparent 26%, transparent 66%, rgba(2,4,6,.62)),
              linear-gradient(90deg, rgba(4,6,9,.34), transparent 22%, transparent 78%, rgba(4,6,9,.3));
  pointer-events: none;
}
.grain { opacity: .04; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }


.corner-tag.sky-tag {
  position: absolute; right: 18px; top: 18px; z-index: 6; display: flex; align-items: center; gap: 6px;
  padding: 7px 11px; border: 1px solid rgba(245,241,232,.16); border-radius: 4px;
  background: rgba(5,7,10,.32); backdrop-filter: blur(14px); color: rgba(245,241,232,.7);
  font: 400 8px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase;
}
.sky-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(245,241,232,.4); transition: background .4s, box-shadow .4s; }
.sky-tag.active .sky-dot { background: var(--amber); box-shadow: 0 0 8px rgba(242,243,244,.7); }
.plane-sprite {
  position: absolute; left: -8%; top: 14%; z-index: 4; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.plane-sprite.flying { animation: flyOver 14s linear 1; }
@keyframes flyOver {
  0% { opacity: 0; transform: translateX(0) translateY(0); }
  6% { opacity: .85; }
  94% { opacity: .85; }
  100% { opacity: 0; transform: translateX(126vw) translateY(-14px); }
}

.gauge-card {
  position: absolute; bottom: 18px; z-index: 6; width: min(178px, 40vw);
  padding: 12px 14px; border: 1px solid rgba(245,241,232,.16); border-radius: 16px;
  background: rgba(5,7,10,.4); backdrop-filter: blur(18px) saturate(120%);
}
.gauge-traffic { left: 18px; }
.gauge-subway { right: 18px; }
.gauge-label { display: block; margin-bottom: 9px; color: rgba(245,241,232,.72); font: 500 8px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.gauge-ticks { display: flex; gap: 3px; height: 16px; align-items: flex-end; }
.gauge-ticks i { flex: 1; height: 30%; border-radius: 2px; background: rgba(245,241,232,.14); transition: height .6s var(--ease), background .6s; }
.gauge-ticks i:nth-child(1) { height: 25%; } .gauge-ticks i:nth-child(2) { height: 38%; } .gauge-ticks i:nth-child(3) { height: 50%; }
.gauge-ticks i:nth-child(4) { height: 62%; } .gauge-ticks i:nth-child(5) { height: 74%; } .gauge-ticks i:nth-child(6) { height: 86%; }
.gauge-ticks i:nth-child(7) { height: 94%; } .gauge-ticks i:nth-child(8) { height: 100%; }
.gauge-ticks i.active { background: var(--amber); }
.gauge-dots { display: flex; gap: 5px; }
.gauge-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(245,241,232,.14); transition: background .5s, box-shadow .5s, transform .5s; }
.gauge-dots i.active { background: var(--amber); box-shadow: 0 0 8px rgba(242,243,244,.55); }
.gauge-subway.lone .gauge-dots i.active { background: var(--paper); box-shadow: 0 0 10px rgba(245,241,232,.7); transform: scale(1.25); animation: lonePulse 2.4s ease-in-out infinite; }
.gauge-sub { display: block; margin-top: 9px; color: var(--muted); font-size: 9px; line-height: 1.4; }
@keyframes lonePulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

.person-hotspots { position: absolute; inset: 0; z-index: 5; }
.person-hotspot { position: absolute; z-index: 5; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: opacity .6s ease; }
.person-hotspot::before, .person-hotspot::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(242,243,244,.85); border-radius: 50%; }
.person-hotspot::after { inset: 0; opacity: .28; animation: hotspotPulse 2s ease-in-out infinite; }
.person-hotspot span { position: absolute; left: 50%; top: 26px; width: max-content; padding: 4px 7px; border-radius: 4px; color: #08090b; background: var(--amber); opacity: 0; transform: translateX(-50%) translateY(4px); transition: .2s ease; font-size: 8px; }
.person-hotspot:hover span, .person-hotspot:focus-visible span { opacity: 1; transform: translateX(-50%); }
.hotspot-omar  { left: 53.0%; top: 35.5%; }  /* day · boardroom */
.hotspot-ivy   { left: 47.0%; top: 49.0%; }  /* day · trading pit */
.hotspot-leo   { left: 44.2%; top: 56.5%; }  /* day · desk floor */
.hotspot-mo    { left: 46.5%; top: 53.5%; }  /* night · the one desk still lit */
.hotspot-sasha { left: 50.0%; top: 87.0%; }  /* night · lobby */
.person-hotspots.state-open .night-person, .person-hotspots.state-closed .open-person { opacity: 0; pointer-events: none; }

/* ---------- chain proof section ---------- */
.chain-proof {
  position: relative; z-index: 5; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin: 22px clamp(16px, 3vw, 48px) 0; padding: 18px; border: 1px solid rgba(242,243,244,.18); border-radius: 18px;
  background: rgba(242,243,244,.04);
}
.chain-proof-badge { display: flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid rgba(242,243,244,.3); border-radius: 4px; background: rgba(5,7,10,.4); white-space: nowrap; }
.chain-proof-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--down); box-shadow: 0 0 10px currentColor; transition: background .4s; }
.chain-proof-dot.open { background: var(--up); }
.chain-proof-status { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--amber); }
.chain-proof-copy { flex: 1; min-width: 240px; }
.chain-proof-copy p { margin: 6px 0 8px; color: rgba(245,241,232,.78); font-size: 13px; line-height: 1.6; font-family: "IBM Plex Mono", monospace; }
.chain-proof-link { color: var(--amber); font-size: 10px; text-decoration: none; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid rgba(242,243,244,.35); }

/* ---------- plaque ---------- */
.plaque {
  position: relative; z-index: 5; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin: 22px clamp(16px, 3vw, 48px) 0; padding-top: 16px; border-top: 1px solid var(--line);
}
.caption-index { display: block; margin-bottom: 10px; color: var(--amber); font: 500 8px "IBM Plex Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.plaque-info p { margin: 0; max-width: 42ch; color: var(--paper); font-size: 16px; line-height: 1.5; font-family: var(--ui); font-weight: 400; }
.countdown-panel { text-align: right; min-width: 180px; }
.countdown-panel > span:first-child, .countdown-hours { color: var(--muted); font: 400 7px "IBM Plex Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.countdown-panel strong { display: block; margin: 6px 0; font-family: var(--data); font-size: clamp(28px, 3.2vw, 44px); font-weight: 500; letter-spacing: -.02em; line-height: 1; color: var(--paper); font-variant-numeric: tabular-nums; }

.footer-bar { position: relative; z-index: 5; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 34px clamp(16px, 3vw, 48px) 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font: 400 8px "IBM Plex Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.footer-bar a { color: var(--amber); text-decoration: none; }

.person-card, .trade-drawer { position: fixed; z-index: 40; border: 1px solid var(--line); color: var(--paper); background: rgba(7,10,14,.82); box-shadow: 0 30px 90px rgba(0,0,0,.5); backdrop-filter: blur(26px) saturate(115%); }
.person-card { left: 50%; top: 50%; width: min(390px, calc(100vw - 34px)); padding: 28px; border-radius: 22px; opacity: 0; pointer-events: none; transform: translate(-50%, -45%) scale(.97); transition: opacity .25s, transform .35s var(--ease); }
.person-card.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.panel-close { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--paper); background: rgba(245,241,232,.04); cursor: pointer; }
.person-card .panel-close { position: absolute; right: 18px; top: 18px; }
.person-number, .person-location, .person-role { color: var(--muted); font: 400 8px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.person-card h2 { margin: 26px 0 6px; font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
.person-role { color: var(--amber); }
.person-story { margin: 22px 0; color: rgba(245,241,232,.66); font-size: 12px; line-height: 1.75; }

.drawer-scrim { position: fixed; inset: 0; z-index: 29; background: rgba(0,0,0,.32); opacity: 0; pointer-events: none; transition: opacity .3s; }
.drawer-scrim.visible { opacity: 1; pointer-events: auto; }
.trade-drawer { top: 12px; right: 12px; bottom: 12px; width: min(420px, calc(100vw - 24px)); padding: 28px; border-radius: 26px; transform: translateX(calc(100% + 30px)); transition: transform .45s var(--ease); }
.trade-drawer.visible { transform: translateX(0); }
.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; }
.drawer-header > div > span, .drawer-status, .trade-fact, .trade-drawer > p { font: 400 8px "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .07em; }
.drawer-header > div > span { color: var(--muted); }
.drawer-header h2 { margin: 10px 0 0; font-family: var(--display); font-size: 36px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
.drawer-status { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin: 28px 0; padding: 12px 0; border-block: 1px solid var(--line); }
.drawer-status > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: var(--down); }
.experience[data-market="open"] .drawer-status > span:first-child { background: var(--up); }
.drawer-status > span:last-child { color: var(--muted); }
.price-row { display: flex; align-items: baseline; gap: 12px; margin: 24px 0; }
.price-row strong { font-family: var(--data); font-size: 42px; font-weight: 500; letter-spacing: -.02em; }
.price-row span { color: var(--muted); font-size: 9px; }
.trade-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 4px; }
.trade-tabs button { padding: 11px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; cursor: pointer; }
.trade-tabs button[aria-selected="true"] { color: #08090b; background: var(--amber); }
.amount-field { display: block; margin-top: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 17px; }
.amount-field > span:first-child { color: var(--muted); font-size: 9px; }
.amount-input-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.amount-input-row input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--paper); background: transparent; font-size: 34px; font-weight: 300; font-family: "IBM Plex Mono", monospace; }
.amount-input-row > span { font: 500 9px "IBM Plex Mono", monospace; }
.trade-fact { display: flex; justify-content: space-between; gap: 20px; margin-top: 14px; color: var(--muted); }
.trade-fact strong { color: var(--paper); font-weight: 400; }
.trade-submit { display: flex; justify-content: space-between; width: 100%; margin-top: 26px; padding: 15px 17px; border: 0; border-radius: 4px; color: #08090b; background: var(--amber); cursor: pointer; font-weight: 600; }
.trade-submit:disabled { color: rgba(245,241,232,.4); background: rgba(245,241,232,.09); cursor: not-allowed; }
.trade-drawer > p { color: rgba(245,241,232,.34); line-height: 1.6; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 80; max-width: calc(100vw - 32px); padding: 11px 16px; border: 1px solid var(--line); border-radius: 4px; background: rgba(5,7,10,.92); backdrop-filter: blur(18px); font-size: 9px; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .25s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes hotspotPulse { 0%,100% { transform: scale(.8); opacity: .2; } 50% { transform: scale(1.25); opacity: .65; } }

@media (max-width: 1050px) {
  .main-nav button:first-child, .main-nav button:nth-child(2) { display: none; }
  .frame-inner { height: auto; }
  .gauge-card { width: min(150px, 38vw); }
  .wordmark-sub { display: none; }
}
@media (max-width: 720px) {
  .masthead { grid-template-columns: 1fr auto; padding: 16px; }
  .wallet-button { display: none; }
  .main-nav { position: fixed; left: 50%; bottom: 14px; z-index: 60; transform: translateX(-50%); background: rgba(8,12,17,.86); }
  .main-nav button { display: none !important; }
  .main-nav button[data-view-button="live"], .main-nav button#openStory { display: block !important; }
  .status-line { padding: 0 14px 12px; font-size: 8px; }
  .city-frame { padding: 0 12px; }
  .frame-inner { height: auto; min-height: 0; border-radius: 20px; }
    .gauge-card { position: static; width: auto; margin: 0; border-radius: 14px; }
  .frame-inner > .gauge-card { position: absolute; bottom: 10px; width: min(132px, 42vw); padding: 9px 10px; }
  .gauge-traffic { left: 10px; } .gauge-subway { right: 10px; }
  .chain-proof { margin: 18px 12px 0; flex-direction: column; align-items: flex-start; }
  .plaque { flex-direction: column; align-items: flex-start; margin: 18px 12px 0; }
  .countdown-panel { text-align: left; }
  .footer-bar { margin: 26px 12px 0; }
  .trade-drawer { top: 8px; right: 8px; bottom: 8px; width: calc(100vw - 16px); padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .plane-sprite.flying { animation: none; opacity: 0; }
  .ticker-track { animation: none; }
}


/* ==========================================================================
   LANDING: the building is the page
   The stage fills the viewport and the video covers it. Because "cover" crops,
   percentage overlays can no longer be measured against the stage - they are
   measured against .video-space, which JS sizes to the video's real rendered
   rect. Every board and hotspot inside it therefore stays welded to the
   building at any window shape.
   ========================================================================== */
.experience { position: relative; }

.masthead {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  background: linear-gradient(180deg, rgba(3,5,8,.72), rgba(3,5,8,0));
  pointer-events: none;
}
.masthead > * { pointer-events: auto; }

.sr-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.stage {
  position: relative; z-index: 5;
  width: 100%; height: 100dvh; min-height: 480px;
  overflow: hidden; isolation: isolate; background: #05070a;
  border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0;
}
.stage > .scene-plane { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .scene-layer { transform: none; }

.video-space {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: none; z-index: 6;
}
.video-space > * { pointer-events: auto; }

/* the live strip along the bottom of the hero */
.stage .ticker-tape {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  margin: 0; border: 0; border-top: 1px solid rgba(242,243,244,.16);
  background: linear-gradient(180deg, rgba(3,5,8,0), rgba(3,5,8,.86) 45%);
  backdrop-filter: blur(2px);
}
.stage .ticker-track { padding-block: 11px; }

/* the hero headline sits over the image, bottom-left, clear of the strip */
.stage /* the sky chip would sit under Connect/Trade at the top right, so it moves
   down to the opposite corner from the headline */
.stage .corner-tag.sky-tag {
  top: auto; right: clamp(16px, 3vw, 44px); bottom: 70px; z-index: 21;
}

@media (max-width: 720px) {
  .stage { height: 100dvh; min-height: 420px; }
  .stage   .stage .corner-tag.sky-tag { bottom: 56px; }
}

.board-track b { font-weight: 600; }
.board-track b.up { color: #54b98a; }
.board-track b.dn { color: #e2564d; }


/* ---- marquee mechanics --------------------------------------------------
   Both strips used to animate a single copy of their content by -50% (or
   -100%), so once the copy had passed, the rest of the loop was blank and the
   animation appeared to snap back and restart. JS now builds each track as two
   identical units, each padded out to at least the container's width, and the
   distance travelled is exactly one unit - trailing gap included - so the seam
   never lands inside the visible area. */
.ticker-unit { display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; }
.board-unit  { display: inline-flex; align-items: center; gap: 2.4cqw; padding-right: 2.4cqw; }


/* ==========================================================================
   BELOW THE FOLD
   One column, generous rhythm, hairline rules. No cards, no glow, no accent
   colour - the only colour with meaning here is the open/shut dot.
   ========================================================================== */
.eyebrow {
  display: block; font-family: var(--data); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}

.gate, .facts, .plaque {
  max-width: 1180px; margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 64px);
}
.gate {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px); align-items: start;
  padding-block: clamp(72px, 10vw, 120px) clamp(36px, 5vw, 56px);
}
.gate-head h2 {
  margin: 16px 0 22px; max-width: 26ch;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 4.2vw, 58px); line-height: .96;
  letter-spacing: .005em; text-transform: uppercase; text-wrap: balance;
  color: var(--paper);
}
.gate-head p { margin: 0; max-width: 56ch; color: var(--muted); font-size: 16px; line-height: 1.62; }

.gate-live { display: grid; gap: 0; border-top: 1px solid var(--line); }
.gate-read, .gate-count { position: relative; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.gate-read strong, .gate-count strong {
  display: block; margin-top: 10px; font-weight: 500; color: var(--paper);
}
.gate-read strong { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.gate-count strong { font-family: var(--data); font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.02em; line-height: 1; }
.gate-sub { display: block; margin-top: 10px; color: var(--faint); font-family: var(--data); font-size: 11px; letter-spacing: .06em; }
.gate-dot {
  position: absolute; top: 24px; right: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--down); box-shadow: 0 0 12px currentColor; transition: background .4s;
}
.gate-dot.is-open { background: var(--up); }
.gate-link {
  display: inline-block; margin-top: 22px; color: var(--paper); text-decoration: none;
  font-family: var(--data); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: border-color .2s;
}
.gate-link:hover { border-color: var(--paper); }

.facts { padding-block: 0 clamp(56px, 8vw, 88px); }
.facts dl {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin: 0; background: var(--hair);
  border-block: 1px solid var(--line);
}
.facts dl > div { background: var(--ink); padding: 26px 24px 28px; }
.facts dt {
  font-family: var(--data); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.facts dd { margin: 12px 0 0; font-family: var(--display); font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; letter-spacing: .01em; text-transform: uppercase; line-height: 1; color: var(--paper); }
.facts dd.fact-note { margin-top: 10px; font-family: var(--ui); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.45; color: var(--muted); }

.plaque { padding-block: 0 clamp(56px, 8vw, 88px); border: 0; background: none; display: block; }
.plaque-info p { margin-top: 14px; }

.footer-bar { max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 64px); }

@media (max-width: 980px) { .facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .gate { grid-template-columns: 1fr; gap: 40px; padding-block: 64px 32px; }
}
@media (max-width: 560px) { .facts dl { grid-template-columns: 1fr; } }

/* the hero headline: a plain rule, not a pill */
.stage .wordmark-sub { font-family: var(--data); font-size: 9.5px; letter-spacing: .11em; color: var(--muted); }


/* Preview toggle — cycles Live → Market open → After hours. Lets the open
   state be checked at 4am without shipping the old four-tab nav back. */
.state-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 4px; background: rgba(8,9,11,.55);
  backdrop-filter: blur(8px); color: var(--paper); cursor: pointer;
  font-family: var(--data); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .18s, background .18s;
}
.state-toggle:hover { border-color: var(--paper); background: rgba(8,9,11,.75); }
.state-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); transition: background .3s; }
.state-toggle[data-state="open"]   .state-dot { background: var(--up); box-shadow: 0 0 10px currentColor; }
.state-toggle[data-state="closed"] .state-dot { background: var(--down); box-shadow: 0 0 10px currentColor; }
.state-toggle[data-state="live"]   .state-dot { background: var(--paper); }
@media (max-width: 720px) { .state-toggle span:last-child { display: none; } .state-toggle { padding: 0 12px; } }


/* ==========================================================================
   HUD — the two panels over the building.
   Left is the number that matters. Right is the entire pitch. Nothing else
   sits on the hero, because everything else can wait until they scroll.
   ========================================================================== */
.hud {
  position: absolute; z-index: 14; left: 0; right: 0; bottom: clamp(56px, 7vh, 92px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding: 0 clamp(18px, 4vw, 64px); pointer-events: none;
}
.hud > * { pointer-events: auto; }

/* the glass both panels are cut from */
.hud-clock, .hud-card {
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(255,255,255,.13), rgba(255,255,255,.05) 46%, rgba(255,255,255,.03));
  backdrop-filter: blur(26px) saturate(165%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 24px 60px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(255,255,255,.06);
  color: var(--paper);
}

.hud-clock { padding: 20px 24px 18px; min-width: min(330px, 44vw); }
.hud-label {
  display: block; font-family: var(--data); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62);
}
.hud-time {
  display: block; margin: 6px 0 2px; font-family: var(--data); font-weight: 500;
  font-size: clamp(34px, 4.4vw, 58px); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.hud-sub { display: block; font-size: 12px; color: rgba(255,255,255,.62); }
.hud-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 16px 0 0;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px; overflow: hidden;
}
.hud-stats > div { padding: 9px 12px; background: rgba(10,14,20,.30); }
.hud-stats dt {
  font-family: var(--data); font-size: 9px; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.hud-stats dd {
  margin: 3px 0 0; font-family: var(--data); font-size: 15px; font-weight: 500;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #fff;
}

.hud-card { padding: 22px 24px 20px; width: min(370px, 46vw); }
.hud-title {
  margin: 8px 0 10px; font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 2.5vw, 38px); line-height: .96; letter-spacing: .005em;
  text-transform: uppercase; color: #fff;
}
.hud-copy { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.80); }
.hud-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 18px; border: 0; border-radius: 12px; cursor: pointer;
  background: #fff; color: #0a0d12;
  font-family: var(--ui); font-size: 15px; font-weight: 600; letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,.32);
}
.hud-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.4); }
.hud-cta[data-locked="true"] { background: rgba(255,255,255,.14); color: rgba(255,255,255,.72); box-shadow: none; }
.hud-foot {
  display: block; margin-top: 10px; text-align: center;
  font-family: var(--data); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.48);
}

@media (max-width: 900px) {
  .hud { flex-direction: column; align-items: stretch; bottom: clamp(48px, 6vh, 70px); gap: 12px; }
  .hud-clock, .hud-card { width: auto; min-width: 0; }
  .hud-card { order: -1; }
  .hud-title { font-size: 24px; }
  .hud-time { font-size: 40px; }
}

/* ---- corrections after the first render pass ---- */

/* the share bar was running the width of the cell and reading as a rule.
   Give it a fixed track so 100% and 0.0001% are the same object at
   different lengths, which is the only reason to draw it at all. */


/* the hero strip carries the same two or four items as the board, so it needs
   room to breathe rather than the tight board spacing */
.ticker-tape {
  border-block: 0; border-top: 1px solid rgba(242,243,244,.14);
  background: linear-gradient(180deg, rgba(3,5,8,0), rgba(3,5,8,.9) 45%);
  margin: 0;
}
#tickerTrack {
  font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: .1em; color: rgba(242,243,244,.82);
}
#tickerTrack .board-unit { gap: 54px; padding-right: 54px; }
#tickerTrack em { font-style: normal; color: rgba(242,243,244,.45); margin-right: .45em; }
#tickerTrack i { width: 3px; height: 3px; border-radius: 50%; background: rgba(242,243,244,.3); }

/* Cheaper glass. backdrop-filter re-samples the moving video underneath on
   every frame, and saturate() is a second pass over the same pixels. Half the
   radius and no saturate reads the same at this size and costs far less. */
.hud-clock, .hud-card {
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}

/* ---- ticker stability ----------------------------------------------------
   The unit width was drifting 812->829px as the countdown ticked, because the
   display face has proportional figures: `1` is narrower than `8`, so the
   strip physically changed length every second while the animation kept
   travelling a distance measured once at build time. That mismatch is the
   jitter. Every live number now renders in the mono face, where every glyph
   has the same advance, so the unit width never changes at all. */
.board-track [data-v],
#tickerTrack [data-v] {
  font-family: var(--data); font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: .88em; letter-spacing: .02em;
}


/* ==========================================================================
   SLATE — everything below the building.
   Not paper white. The same cool grey the hero glass sits in, so scrolling
   feels like walking further into the same building rather than out of it.
   ========================================================================== */
:root {
  --slate:      #262b33;
  --slate-2:    #2e343d;
  --slate-3:    #363d48;
  --slate-line: #3d4553;
  --slate-ink:  #eef1f5;
  --slate-mid:  #a8b2c0;
  --slate-dim:  #7a8494;
}

body { background: var(--slate); }
.experience { background: transparent; }
.paper { position: relative; z-index: 4; background: var(--slate); color: var(--slate-ink); }
.paper section { max-width: 1120px; margin-inline: auto; padding: clamp(52px, 8vw, 104px) clamp(20px, 5vw, 48px); }
.paper section + section { border-top: 1px solid var(--slate-line); }

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.section-eyebrow { display: block; font-family: var(--data); font-size: 10px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--slate-dim); }
.section-head h2 { margin: 6px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); line-height: 1; text-transform: uppercase; color: var(--slate-ink); }
.section-note { margin: 14px 0 0; font-size: 13px; color: var(--slate-dim); }

/* the one big statement */
.pitch { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: end; }
.pitch h2 {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(46px, 8.5vw, 118px); line-height: .87; letter-spacing: .002em;
  text-transform: uppercase; color: var(--slate-ink);
}
.pitch h2 em { font-style: normal; color: var(--slate-dim); }
.pitch p { margin: 0 0 8px; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55; color: var(--slate-mid); max-width: 40ch; }
@media (max-width: 820px) { .pitch { grid-template-columns: 1fr; align-items: start; } }

/* three ideas, not three specs */
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1px; background: var(--slate-line); border: 1px solid var(--slate-line); border-radius: 14px; overflow: hidden; }
.how-grid article { background: var(--slate-2); padding: clamp(24px, 3vw, 36px); }
.how-n { display: block; font-family: var(--data); font-size: 11px; font-weight: 500; letter-spacing: .16em; color: var(--slate-dim); }
.how-grid h3 { margin: 14px 0 10px; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.02; text-transform: uppercase; color: var(--slate-ink); }
.how-grid p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--slate-mid); }

/* the tape — time and sales, the way a floor screen shows prints */
.tape-state { display: inline-flex; align-items: center; gap: 8px; font-family: var(--data); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--slate-dim); }
.tape-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--down); }
.tape-state.is-open i { background: var(--up); box-shadow: 0 0 0 4px rgba(63,178,127,.16); }
.tape { border: 1px solid var(--slate-line); border-radius: 12px; overflow: hidden; background: #21262d; }
.tape-cols, .tape-rows li {
  display: grid; grid-template-columns: 1.1fr 1fr .9fr .7fr; gap: 12px;
  padding: 10px 18px; font-family: var(--data); font-size: 13px; font-variant-numeric: tabular-nums;
}
.tape-cols { background: var(--slate-3); color: var(--slate-dim); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.tape-cols .r, .tape-rows .r { text-align: right; }
.tape-rows { margin: 0; padding: 0; list-style: none; max-height: 320px; overflow-y: auto; }
.tape-rows li { border-top: 1px solid rgba(255,255,255,.05); color: var(--slate-ink); }
.tape-rows li.buy .p { color: var(--up); }
.tape-rows li.sell .p { color: var(--down); }
.tape-empty {
  display: block !important; padding: 42px 18px !important; text-align: center;
  color: var(--slate-dim); font-family: var(--ui) !important; font-size: 14px !important; border-top: 0 !important;
}

/* the register */
.listing-meta { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--slate-dim); }
.listing-meta b { font-family: var(--data); font-weight: 500; color: var(--slate-ink); font-variant-numeric: tabular-nums; }
.listing-meta a { color: var(--slate-ink); text-decoration: none; border-bottom: 1px solid var(--slate-line); }
.listing-meta a:hover { border-bottom-color: var(--slate-ink); }
.listing-scroll { overflow-x: auto; border: 1px solid var(--slate-line); border-radius: 12px; background: #21262d; }
.listing-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.listing-table th { text-align: left; padding: 11px 18px; background: var(--slate-3); border-bottom: 1px solid var(--slate-line); font-family: var(--data); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-dim); }
.listing-table td { padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--slate-ink); }
.listing-table tr:last-child td { border-bottom: 0; }
.listing-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--data); }
.listing-table td.addr { font-family: var(--data); font-size: 13px; }
.listing-table .rank { color: var(--slate-dim); width: 44px; }
.listing-empty td { text-align: center; color: var(--slate-dim); padding: 34px; }
.tag { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.08); color: var(--slate-mid); font-family: var(--data); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.listing-table td.num .barwrap { display: block; width: 72px; height: 3px; margin: 6px 0 0 auto; border-radius: 2px; background: rgba(255,255,255,.09); overflow: hidden; }
.bar { display: block; height: 100%; margin: 0; border-radius: 2px; background: var(--slate-mid); min-width: 1px; }

/* the small print, folded away */
.fineprint summary {
  cursor: pointer; font-family: var(--data); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-dim); padding: 4px 0;
}
.fineprint summary:hover { color: var(--slate-ink); }
.fineprint dl { display: grid; gap: 1px; margin: 22px 0 0; background: var(--slate-line); border: 1px solid var(--slate-line); border-radius: 12px; overflow: hidden; }
.fineprint dl > div { background: var(--slate-2); padding: 14px 18px; display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 18px; align-items: baseline; }
.fineprint dt { font-family: var(--data); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-dim); }
.fineprint dd { margin: 0; font-size: 14px; color: var(--slate-mid); }
.fineprint code { background: rgba(255,255,255,.07); color: var(--slate-ink); padding: 1px 6px; border-radius: 3px; }
.specs-link { display: inline-block; margin-top: 20px; font-size: 14px; color: var(--slate-ink); text-decoration: none; border-bottom: 1px solid var(--slate-line); }
@media (max-width: 620px) { .fineprint dl > div { grid-template-columns: 1fr; gap: 5px; } }

.footer-bar {
  max-width: none; margin: 0; padding: 20px clamp(20px, 5vw, 48px);
  border-top: 1px solid var(--slate-line); background: #21262d; color: var(--slate-dim);
  font: 500 10px var(--data); letter-spacing: .13em;
}
.footer-bar a { color: var(--slate-ink); text-decoration: none; }

/* ---- the panels sit back ------------------------------------------------
   They were reading as the subject of the shot. Smaller, higher, and pushed
   out toward their own corners, so the building is what you look at and they
   are what you check. */
.hud {
  bottom: auto; top: clamp(96px, 17vh, 190px);
  align-items: flex-start;
  padding: 0 clamp(12px, 2.2vw, 34px);
}
.hud-clock { padding: 15px 17px 14px; min-width: 0; width: min(266px, 40vw); border-radius: 16px; }
.hud-card  { padding: 16px 18px 15px; width: min(298px, 42vw); border-radius: 16px; }
.hud-label { font-size: 9px; letter-spacing: .15em; }
.hud-time  { font-size: clamp(26px, 2.7vw, 38px); margin: 4px 0 1px; }
.hud-sub   { font-size: 11px; }
.hud-stats { margin-top: 12px; border-radius: 9px; }
.hud-stats > div { padding: 7px 10px; }
.hud-stats dt { font-size: 8px; }
.hud-stats dd { font-size: 12.5px; margin-top: 2px; }
.hud-title { font-size: clamp(19px, 1.75vw, 25px); margin: 6px 0 8px; }
.hud-copy  { font-size: 12.5px; line-height: 1.45; margin-bottom: 12px; }
.hud-cta   { padding: 9px 14px; font-size: 13px; border-radius: 10px; }
.hud-foot  { font-size: 9px; margin-top: 8px; }

@media (max-width: 900px) {
  .hud { top: auto; bottom: clamp(44px, 6vh, 70px); align-items: stretch; }
  .hud-clock, .hud-card { width: auto; }
}

/* both loop layers stay promoted, so handing over between them is a
   compositor-only opacity swap and never a repaint of a full-screen video */
.scene-layer { transform: translateZ(0); backface-visibility: hidden; will-change: opacity, transform; }
.stage .scene-layer { transform: translateZ(0); }
.board-track, #tickerTrack { will-change: transform; backface-visibility: hidden; }

/* the wall is a market board: red after hours, green while it trades */
.board-day .board-track { color: #52d17f; text-shadow: 0 0 8px rgba(82,209,127,.4); }
.board-day .board-track em { color: rgba(82,209,127,.6); }
.board-day .board-track i { background: rgba(82,209,127,.45); }
.board-night .board-track { color: #ff5f52; text-shadow: 0 0 8px rgba(255,95,82,.42); }
.board-night .board-track em { color: rgba(255,95,82,.58); }
.board-night .board-track i { background: rgba(255,95,82,.42); }

/* ---- second design pass --------------------------------------------------- */

/* the panels ride the middle of the frame rather than the top edge */
.hud { top: 50%; bottom: auto; transform: translateY(-50%); align-items: center; }
@media (max-width: 900px) { .hud { top: auto; bottom: clamp(44px, 6vh, 70px); transform: none; align-items: stretch; } }

/* the lower half is a gradient out of the building, not one flat grey */
.paper {
  background:
    radial-gradient(1200px 520px at 12% -6%, rgba(120,140,175,.16), transparent 62%),
    radial-gradient(1000px 460px at 92% 8%, rgba(90,110,145,.13), transparent 60%),
    linear-gradient(180deg, #1b1f26 0%, #262b33 26%, #2b313a 62%, #20252c 100%);
}
body { background: #20252c; }
.paper section { padding-block: clamp(46px, 6vw, 78px); }
/* only one rule in the whole lower half: between the floor and the records */
.paper section + section { border-top: 0; }
.records { border-top: 1px solid var(--slate-line) !important; }

/* the statement runs across, and stops short of the right edge */
.pitch { display: block; }
.pitch-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; margin-bottom: clamp(34px, 4.5vw, 58px); }
.pitch h2 {
  margin: 0; max-width: 15ch;
  font-size: clamp(38px, 5.6vw, 76px); line-height: .93;
}
@media (max-width: 820px) { .pitch-top { grid-template-columns: 1fr; align-items: start; } .pitch h2 { max-width: none; } }

/* the floor: tape and depth, shoulder to shoulder */
.floor-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(18px, 2.4vw, 34px); align-items: start; }
@media (max-width: 940px) { .floor-grid { grid-template-columns: 1fr; } }
.floor-col .section-head { margin-bottom: 14px; }
.floor-col .section-head h2 { font-size: clamp(22px, 2.4vw, 30px); }
.floor-col.is-sample .tape, .floor-col.is-sample .book { position: relative; }

.tape-rows { max-height: 296px; }
.tape-rows li.buy .s, .tape-rows li.buy .p { color: var(--up); }
.tape-rows li.sell .s, .tape-rows li.sell .p { color: var(--down); }
.book-spread { font-family: var(--data); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-dim); }

.book { border: 1px solid var(--slate-line); border-radius: 12px; overflow: hidden; background: #21262d; }
.book-cols, .book-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  padding: 9px 16px; font-family: var(--data); font-size: 13px; font-variant-numeric: tabular-nums;
}
.book-cols { background: var(--slate-3); color: var(--slate-dim); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.book-cols .c, .book-row .c { text-align: center; }
.book-cols .r, .book-row .r { text-align: right; }
.book-row { position: relative; border-top: 1px solid rgba(255,255,255,.05); color: var(--slate-ink); }
/* the depth bar grows from the side its resting orders sit on */
.book-row::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--depth, 0%);
  opacity: .18; pointer-events: none;
}
.book-row.bid::before { left: 0; background: var(--up); }
.book-row.ask::before { right: 0; background: var(--down); }
.book-row > * { position: relative; }
.book-row.bid .px { color: var(--up); }
.book-row.ask .px { color: var(--down); }

/* records: the register and the build notes, one block */
.records-sub {
  margin: clamp(38px, 5vw, 62px) 0 18px;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(22px, 2.4vw, 30px); color: var(--slate-ink);
}
.specs { display: grid; gap: 1px; margin: 0; background: var(--slate-line); border: 1px solid var(--slate-line); border-radius: 12px; overflow: hidden; }
.specs > div { background: var(--slate-2); padding: 14px 18px; display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 18px; align-items: baseline; }
.specs dt { font-family: var(--data); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-dim); }
.specs dd { margin: 0; font-size: 14px; color: var(--slate-mid); }
.specs code { background: rgba(255,255,255,.07); color: var(--slate-ink); padding: 1px 6px; border-radius: 3px; }
@media (max-width: 620px) { .specs > div { grid-template-columns: 1fr; gap: 5px; } }


/* ==========================================================================
   LIGHT — the lower half again, in paper and grey rather than all-over slate.
   White page, grey furniture. Later in the file than the slate block, so
   these win without unpicking it.
   ========================================================================== */
:root {
  --pw:      #ffffff;   /* page */
  --pw-2:    #f4f5f7;   /* panel fill */
  --pw-3:    #eceef2;   /* table head, chips */
  --pw-line: #dfe2e8;
  --pw-ink:  #14171c;
  --pw-mid:  #4a5058;
  --pw-dim:  #838b96;
}
body { background: var(--pw); }
.paper {
  background:
    radial-gradient(1100px 460px at 8% -8%, rgba(20,23,28,.05), transparent 60%),
    linear-gradient(180deg, #fbfbfc 0%, #ffffff 22%, #ffffff 78%, #f6f7f9 100%);
  color: var(--pw-ink);
}
.paper section + section { border-top: 0; }
.records { border-top: 1px solid var(--pw-line) !important; }

.section-eyebrow, .section-note, .book-spread, .tape-state { color: var(--pw-dim); }
.section-head h2, .records-sub, .pitch h2 { color: var(--pw-ink); }
.pitch h2 em { color: #b3bac4; }
.pitch p { color: var(--pw-mid); }

.how-grid { background: var(--pw-line); border-color: var(--pw-line); }
.how-grid article { background: var(--pw-2); }
.how-n { color: var(--pw-dim); }
.how-grid h3 { color: var(--pw-ink); }
.how-grid p { color: var(--pw-mid); }

/* the tape and the book: light panels, prices still green and red */
.tape, .book { background: var(--pw-2); border-color: var(--pw-line); }
.tape-cols, .book-cols { background: var(--pw-3); color: var(--pw-dim); border-bottom: 1px solid var(--pw-line); }
.tape-rows li, .book-row { border-top: 1px solid var(--pw-line); color: var(--pw-ink); }
.tape-rows li:first-child, .book-row:first-child { border-top: 0; }
.tape-rows li:nth-child(even), .book-row:nth-child(even) { background: rgba(20,23,28,.018); }

.book-row::before { opacity: .13; }

/* the register: bigger, and it holds twenty */
.listing-scroll { background: var(--pw-2); border-color: var(--pw-line); max-height: none; }
.listing-table { font-size: 14.5px; }
.listing-table th { background: var(--pw-3); border-bottom: 1px solid var(--pw-line); color: var(--pw-dim); padding: 13px 20px; }
.listing-table td { border-bottom: 1px solid var(--pw-line); color: var(--pw-ink); padding: 15px 20px; }
.listing-table tbody tr:nth-child(even) td { background: rgba(20,23,28,.018); }
.listing-table .rank { color: var(--pw-dim); }
.listing-empty td { color: var(--pw-dim); }
.listing-meta { color: var(--pw-dim); }
.listing-meta b { color: var(--pw-ink); }
.listing-meta a { color: var(--pw-ink); border-bottom-color: var(--pw-line); }
.tag { background: var(--pw-3); color: var(--pw-mid); }
.listing-table td.num .barwrap { background: rgba(20,23,28,.09); }
.bar { background: var(--pw-mid); }

/* the build notes: reference material, so set like reference material */
.records-sub { font-size: clamp(15px, 1.4vw, 18px); margin: clamp(30px, 3.4vw, 44px) 0 12px; color: var(--pw-mid); }
.specs {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  background: var(--pw-line); border-color: var(--pw-line); border-radius: 9px;
}
.specs > div { background: var(--pw-2); padding: 9px 12px; grid-template-columns: 1fr; gap: 2px; }
.specs dt { font-size: 8.5px; letter-spacing: .13em; color: var(--pw-dim); }
.specs dd { font-size: 12px; line-height: 1.4; color: var(--pw-mid); }
.specs code { background: var(--pw-3); color: var(--pw-ink); font-size: .92em; }
.specs-link { font-size: 12.5px; color: var(--pw-mid); border-bottom-color: var(--pw-line); }
.specs-link:hover { color: var(--pw-ink); }

.footer-bar { background: var(--pw-3); border-top: 1px solid var(--pw-line); color: var(--pw-dim); }
.footer-bar a { color: var(--pw-ink); }

/* both hero panels are the same object at the same size */
.hud-clock, .hud-card { width: min(298px, 42vw); min-width: 0; padding: 16px 18px 15px; }
@media (max-width: 900px) { .hud-clock, .hud-card { width: auto; } }

/* one sample marker per panel, in the heading where it cannot collide with
   the column labels it was previously printing on top of */
.sample-chip {
  display: none; align-items: center; padding: 2px 8px; border-radius: 5px;
  background: var(--pw-3); color: var(--pw-dim);
  font-family: var(--data); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
}
.is-sample .sample-chip { display: inline-flex; }
.records.is-sample .sample-chip { display: inline-flex; }
.head-right { display: inline-flex; align-items: center; gap: 10px; }

/* same object, same size: let the shorter panel take the taller one's height */
.hud { align-items: stretch; }
.hud-clock, .hud-card { display: flex; flex-direction: column; }
.hud-stats { margin-top: auto; }
.hud-card .hud-cta { margin-top: auto; }
@media (max-width: 900px) { .hud { align-items: stretch; } }

/* marquee units must never be squeezed by the flex row that holds them --
   a shrunk unit measures short and the loop then travels short */
.board-unit, .ticker-unit { flex: 0 0 auto; }


/* ==========================================================================
   The lower half keeps the same hours as the building.
   Market open: white page, black type. Market closed: black page, white type.
   Every colour below is a token, and only the tokens are redefined, so the
   whole section flips on one attribute without a second copy of the layout.
   ========================================================================== */
.paper {
  transition: background-color 1.2s var(--ease), color 1.2s var(--ease);
}
.paper section, .paper h2, .paper h3, .paper p, .paper dd, .paper td, .paper th,
.tape, .book, .listing-scroll, .how-grid, .how-grid article, .specs, .specs > div,
.tape-cols, .book-cols, .tape-rows li, .book-row, .listing-table th, .listing-table td,
.footer-bar {
  transition: background-color 1.2s var(--ease), color 1.2s var(--ease),
              border-color 1.2s var(--ease);
}

/* after hours */
.experience[data-market="closed"] {
  --pw:      #0b0d10;
  --pw-2:    #14171c;
  --pw-3:    #1b1f25;
  --pw-line: #262b33;
  --pw-ink:  #f2f4f7;
  --pw-mid:  #b3bcc8;
  --pw-dim:  #7e8794;
}
.experience[data-market="closed"] .paper {
  background:
    radial-gradient(1100px 460px at 8% -8%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, #101318 0%, #0b0d10 22%, #0b0d10 78%, #131720 100%);
}
.experience[data-market="closed"] .pitch h2 em { color: #4d5663; }
.experience[data-market="closed"] .listing-table tbody tr:nth-child(even) td,
.experience[data-market="closed"] .tape-rows li:nth-child(even),
.experience[data-market="closed"] .book-row:nth-child(even) { background: rgba(255,255,255,.022); }
.experience[data-market="closed"] .listing-table td.num .barwrap { background: rgba(255,255,255,.10); }
.experience[data-market="closed"] .bar { background: var(--pw-mid); }
.experience[data-market="closed"] .paper-points li::before { background: #f2f4f7; color: #0b0d10; }
.experience[data-market="closed"] .how-n { color: var(--pw-dim); }

/* the preview toggle drives it too, so you can see both without waiting for the bell */
.experience[data-view="closed"] { --pw: #0b0d10; --pw-2: #14171c; --pw-3: #1b1f25; --pw-line: #262b33; --pw-ink: #f2f4f7; --pw-mid: #b3bcc8; --pw-dim: #7e8794; }
.experience[data-view="closed"] .paper {
  background:
    radial-gradient(1100px 460px at 8% -8%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, #101318 0%, #0b0d10 22%, #0b0d10 78%, #131720 100%);
}
.experience[data-view="closed"] .pitch h2 em { color: #4d5663; }
.experience[data-view="open"] { --pw: #ffffff; --pw-2: #f4f5f7; --pw-3: #eceef2; --pw-line: #dfe2e8; --pw-ink: #14171c; --pw-mid: #4a5058; --pw-dim: #838b96; }
.experience[data-view="open"] .paper {
  background:
    radial-gradient(1100px 460px at 8% -8%, rgba(20,23,28,.05), transparent 60%),
    linear-gradient(180deg, #fbfbfc 0%, #ffffff 22%, #ffffff 78%, #f6f7f9 100%);
}
.experience[data-view="open"] .pitch h2 em { color: #b3bac4; }


/* ---- the statement, and the three points as a rail ---------------------- */
.pitch-top { display: block; max-width: 22ch; margin-bottom: clamp(40px, 5vw, 66px); }
.pitch h2 { max-width: none; margin: 0 0 18px; font-size: clamp(38px, 6vw, 84px); line-height: .93; }
.pitch p { max-width: 52ch; font-size: clamp(15px, 1.45vw, 19px); }
.pitch-top { max-width: 62ch; }

/* three long rows, stacked, threaded by a single line down the numbers */
.how-rail { list-style: none; margin: 0; padding: 0; position: relative; }
.how-rail::before {
  content: ""; position: absolute; left: 19px; top: 34px; bottom: 34px;
  width: 1px; background: var(--pw-line);
}
.how-rail li {
  position: relative; display: grid; grid-template-columns: 40px 1fr;
  gap: clamp(16px, 2.4vw, 34px); align-items: start;
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px)
           clamp(20px, 2.4vw, 30px) 0;
}
.how-rail li + li { border-top: 1px solid var(--pw-line); }
.how-rail .how-n {
  position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--pw-ink); color: var(--pw);
  font-family: var(--data); font-size: 11px; font-weight: 500; letter-spacing: .04em;
}
.how-rail h3 {
  margin: 6px 0 8px; font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 2.8vw, 38px); line-height: 1; text-transform: uppercase;
  color: var(--pw-ink);
}
.how-rail p { margin: 0; max-width: 68ch; font-size: clamp(14px, 1.25vw, 16.5px); line-height: 1.55; color: var(--pw-mid); }
@media (max-width: 620px) {
  .how-rail li { grid-template-columns: 30px 1fr; gap: 14px; }
  .how-rail::before { left: 14px; }
  .how-rail .how-n { width: 29px; height: 29px; font-size: 10px; }
}

/* ---- the floor takes the room it deserves ------------------------------- */
.floor { max-width: 1500px !important; }
.floor-grid { grid-template-columns: 1.25fr 1fr; gap: clamp(20px, 2.6vw, 40px); }
.floor-col .section-head h2 { font-size: clamp(26px, 3vw, 40px); }
.tape-rows { max-height: none; }
.tape-cols, .tape-rows li { padding: 13px 22px; font-size: 15px; }
.book-cols, .book-row { padding: 13px 22px; font-size: 15px; }
.tape, .book { border-radius: 14px; }
@media (max-width: 940px) { .floor-grid { grid-template-columns: 1fr; } }


/* ---- third pass ---------------------------------------------------------- */

/* The statement is one line across the page, and the supporting line sits
   directly under it as a second single line. It was wrapping because the
   block was capped at 62ch; the cap is gone and the type scales to the
   viewport so both stay on one line at any width. */
.pitch-top { max-width: none; margin-bottom: clamp(38px, 4.6vw, 62px); }
.pitch h2 {
  max-width: none; white-space: nowrap;
  font-size: clamp(21px, 5.15vw, 92px); line-height: 1.02; margin: 0 0 14px;
}
.pitch p {
  max-width: none; white-space: nowrap;
  font-size: clamp(11px, 1.72vw, 26px); margin: 0;
}
@media (max-width: 560px) {
  .pitch h2, .pitch p { white-space: normal; }
  .pitch h2 { font-size: clamp(30px, 9vw, 44px); }
  .pitch p { font-size: 15px; }
}

/* the numbered discs: always the page's ink behind the page's paper, both ways */
.how-rail .how-n {
  background: var(--pw-ink) !important;
  color: var(--pw) !important;
  font-weight: 600;
}

/* the tape and the book were running too long */
.tape-rows { max-height: 15.6em; overflow: hidden; }
.book-rows { max-height: 15.6em; overflow: hidden; }

/* No white strip under the footer. body had the light page colour baked in,
   so in the dark theme the area below the last section showed through as a
   band. Both the page and the footer now follow the same token. */
body { background: var(--pw); transition: background-color 1.2s var(--ease); }
.experience { background: var(--pw); }
.footer-bar { background: var(--pw-3); }
html { background: var(--pw); }

/* the same tokens again on the root, so <body> and the overscroll area get
   them too -- this is what removes the white strip under the footer */
:root[data-market="closed"], :root[data-view="closed"] {
  --pw: #0b0d10; --pw-2: #14171c; --pw-3: #1b1f25; --pw-line: #262b33;
  --pw-ink: #f2f4f7; --pw-mid: #b3bcc8; --pw-dim: #7e8794;
}
:root[data-view="open"] {
  --pw: #ffffff; --pw-2: #f4f5f7; --pw-3: #eceef2; --pw-line: #dfe2e8;
  --pw-ink: #14171c; --pw-mid: #4a5058; --pw-dim: #838b96;
}
html, body { background: var(--pw); }

/* Long enough to read, short enough not to run the page -- and it scrolls
   inside itself if you want the rest. */
.tape-rows, .book-rows {
  max-height: 20.5em; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--pw-line) transparent;
}
.tape-rows::-webkit-scrollbar, .book-rows::-webkit-scrollbar { width: 8px; }
.tape-rows::-webkit-scrollbar-track, .book-rows::-webkit-scrollbar-track { background: transparent; }
.tape-rows::-webkit-scrollbar-thumb, .book-rows::-webkit-scrollbar-thumb {
  background: var(--pw-line); border-radius: 4px;
}
.tape-rows::-webkit-scrollbar-thumb:hover, .book-rows::-webkit-scrollbar-thumb:hover { background: var(--pw-dim); }
/* the column header stays put while the rows move under it */
.tape-cols, .book-cols { position: sticky; top: 0; z-index: 2; }


/* ---- the guy ------------------------------------------------------------- */
.wordmark { display: flex; align-items: center; gap: 10px; }
.wordmark-mark { width: 34px; height: 34px; object-fit: contain; object-position: center top; flex: 0 0 auto; }

.mascot { position: absolute; pointer-events: none; user-select: none; height: auto; }
/* in the hero he stands at the right edge, behind the glass, cropped by the floor */
.mascot-hero {
  right: clamp(-30px, 1vw, 40px); bottom: 0; z-index: 12;
  width: clamp(150px, 15vw, 260px); opacity: .92;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
}
@media (max-width: 900px) { .mascot-hero { display: none; } }
/* downstairs he stands beside things, at the right margin */
.pitch, .records { position: relative; }
.mascot-rail, .mascot-records {
  right: clamp(-10px, 1vw, 24px); bottom: 0;
  width: clamp(110px, 11vw, 190px); opacity: .95;
}
.mascot-records { bottom: auto; top: 8px; }
@media (max-width: 1080px) { .mascot-rail, .mascot-records { display: none; } }

/* ---- the quote block ----------------------------------------------------- */
.quote-section {
  display: grid; grid-template-columns: 1.55fr 1fr;
  gap: clamp(18px, 2.4vw, 36px); align-items: start;
  max-width: 1500px !important;
}
@media (max-width: 940px) { .quote-section { grid-template-columns: 1fr; } }

.quote, .account {
  border: 1px solid var(--pw-line); border-radius: 14px;
  background: var(--pw-2); padding: clamp(18px, 2.2vw, 28px);
}
.quote-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.quote-sym {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px); text-transform: uppercase; color: var(--pw-ink); line-height: 1;
}
.quote-venue { display: block; margin-top: 5px; font-family: var(--data); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--pw-dim); }
.quote-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--data); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--pw-dim); }
.quote-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--down); }
.quote[data-state="open"] .quote-status i { background: var(--up); box-shadow: 0 0 0 4px rgba(63,178,127,.16); }

.quote-price { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 18px 0 0; }
.quote-price strong {
  font-family: var(--data); font-weight: 500; font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1; letter-spacing: -.02em; color: var(--pw-ink);
}
.quote-change { font-family: var(--data); font-size: clamp(14px, 1.4vw, 19px); font-variant-numeric: tabular-nums; color: var(--pw-dim); }
.quote-change.up { color: var(--up); }
.quote-change.dn { color: var(--down); }

/* the frozen print: what a stock page shows after the bell */
.quote-frozen {
  margin: 14px 0 0; padding: 10px 14px; border-radius: 8px;
  background: var(--pw-3); border: 1px solid var(--pw-line);
  font-family: var(--data); font-size: 12.5px; color: var(--pw-mid);
}
.quote-frozen b { color: var(--pw-ink); font-weight: 500; }

.quote-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1px;
  margin: 20px 0 0; background: var(--pw-line); border: 1px solid var(--pw-line);
  border-radius: 10px; overflow: hidden;
}
.quote-stats > div { background: var(--pw-2); padding: 10px 13px; }
.quote-stats dt { font-family: var(--data); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--pw-dim); }
.quote-stats dd { margin: 4px 0 0; font-family: var(--data); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--pw-ink); }

/* ---- the account statement ---------------------------------------------- */
.account-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.account-connect {
  border: 1px solid var(--pw-line); border-radius: 8px; cursor: pointer;
  background: var(--pw-ink); color: var(--pw); padding: 8px 14px;
  font-family: var(--ui); font-size: 13px; font-weight: 600;
}
.account-connect:hover { opacity: .88; }
.account-empty { margin: 0; padding: 26px 0; text-align: center; color: var(--pw-dim); font-size: 14px; }
.account-rows { display: grid; gap: 1px; background: var(--pw-line); border: 1px solid var(--pw-line); border-radius: 10px; overflow: hidden; margin: 0; }
.account-rows > div { background: var(--pw-2); padding: 11px 14px; display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.account-rows dt { font-family: var(--data); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--pw-dim); }
.account-rows dd { margin: 0; font-family: var(--data); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--pw-ink); }
.account-addr { font-family: var(--data); font-size: 12px; color: var(--pw-dim); margin: 0 0 12px; }

.quote.is-sample .sample-chip { display: inline-flex; }
/* he stands on the strip, not behind it */
.mascot-hero { bottom: 34px; }


/* ==========================================================================
   Fourth pass: where he stands, how big, and a page that is not flat black.
   ========================================================================== */

/* the masthead mark: smaller, and tucked into the corner */
.masthead { padding-top: 14px !important; }
.wordmark { gap: 8px; align-items: center; }
.wordmark-mark { width: 26px; height: 26px; }

/* he is off the hero entirely */
.mascot-hero { display: none !important; }

/* beside the rail he stands to the LEFT of the numbers, and the numbers step
   right to leave him the room, so he reads as the one saying them */
.pitch { position: relative; }
.mascot-rail {
  left: 0; right: auto; bottom: 0;
  width: clamp(120px, 12vw, 200px); opacity: .96;
}
@media (min-width: 1081px) {
  .how-rail { padding-left: clamp(150px, 14vw, 240px); }
  .how-rail::before { left: calc(clamp(150px, 14vw, 240px) + 19px); }
}
@media (max-width: 1080px) { .mascot-rail { display: none; } }

/* the register sits left, he stands full height at its right */
.records { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 56px); align-items: end; }
.records-main { min-width: 0; }
.mascot-records {
  position: static; align-self: end; justify-self: end;
  width: clamp(150px, 15vw, 290px); opacity: .97;
}
@media (max-width: 1080px) { .records { grid-template-columns: 1fr; } .mascot-records { display: none; } }

/* the supporting line is smaller, and centred under the statement */
.pitch-top { text-align: left; }
.pitch h2 { text-align: left; }
/* only the line under the statement centres -- scoped, because an unscoped
   .pitch p also caught the three rail paragraphs and centred those too */
.pitch-top p {
  text-align: center; margin-left: auto; margin-right: auto;
  font-size: clamp(11px, 1.15vw, 17px); color: var(--pw-mid);
  max-width: none; width: fit-content;
}
.how-rail p { text-align: left; margin-left: 0; margin-right: 0; width: auto; }

/* both hero panels are one object at one size, height included */
.hud { align-items: stretch; }
.hud-clock, .hud-card {
  width: min(300px, 42vw) !important; min-width: 0 !important;
  display: flex; flex-direction: column;
}

/* not flat black. The page carries the same light the building does.
   body follows the token, never a hardcoded colour -- hardcoding it is what
   put a mismatched strip under the footer the first time. */
html, body { background: var(--pw); }
.experience[data-market="closed"] .paper, .experience[data-view="closed"] .paper {
  background:
    radial-gradient(900px 420px at 6% 0%, rgba(120,145,190,.14), transparent 58%),
    radial-gradient(800px 400px at 96% 26%, rgba(80,105,150,.10), transparent 56%),
    radial-gradient(1200px 600px at 50% 104%, rgba(140,160,200,.09), transparent 62%),
    linear-gradient(180deg, #12161c 0%, #0d1014 30%, #0b0d10 62%, #10141a 100%);
}
.experience[data-market="open"] .paper, .experience[data-view="open"] .paper {
  background:
    radial-gradient(900px 420px at 6% 0%, rgba(20,23,28,.055), transparent 58%),
    radial-gradient(1000px 500px at 92% 30%, rgba(20,23,28,.035), transparent 56%),
    linear-gradient(180deg, #fbfbfd 0%, #ffffff 26%, #ffffff 74%, #f4f5f8 100%);
}
.account.is-sample .sample-chip { display: inline-flex; }
.account .head-right { gap: 8px; }

/* the mark sits beside the wordmark, not above it: .wordmark is a column by
   default, so the text needs its own column and the row goes around both */
.wordmark { flex-direction: row !important; align-items: center; gap: 9px; }
.wordmark-text { display: flex; flex-direction: column; gap: 2px; }
.wordmark-mark { width: 30px; height: 30px; flex: 0 0 auto; }
/* and the whole lockup tucks into the corner */
.masthead { padding-left: clamp(12px, 1.6vw, 22px) !important; padding-top: 12px !important; }


/* ---- fifth pass ---------------------------------------------------------- */

/* He was landing at the bottom of the whole section, level with the build
   notes, because he shared a grid with all of it. Now the register and he are
   their own row and the notes drop underneath, so they stand side by side. */
.records { display: block; }
.records-top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 56px); align-items: stretch;
}
.records-book { min-width: 0; display: flex; flex-direction: column; }
/* the register is a block roughly as tall as he is, and scrolls inside */
.records-book .listing-scroll {
  flex: 1 1 auto; max-height: clamp(300px, 34vw, 470px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--pw-line) transparent;
}
.records-book .listing-table thead th { position: sticky; top: 0; z-index: 2; }
.mascot-records {
  position: static; align-self: end;
  width: auto; height: clamp(340px, 38vw, 530px);
  max-width: 40vw; object-fit: contain; object-position: bottom;
}
@media (max-width: 1080px) { .records-top { grid-template-columns: 1fr; } .mascot-records { display: none; } }

/* beside the rail he matches the height of the three points he is saying */
.mascot-rail {
  width: auto; height: clamp(300px, 34vw, 470px);
  max-width: 32vw; object-fit: contain; object-position: bottom left;
}
@media (min-width: 1081px) {
  .how-rail { padding-left: clamp(200px, 20vw, 330px); }
  .how-rail::before { left: calc(clamp(200px, 20vw, 330px) + 19px); }
}

/* he stands beside the rail, not over it: smaller, further left, and the
   numbers thread straight down the cap-line of the headings */
.mascot-rail {
  left: clamp(-26px, -1.4vw, 0px); right: auto; bottom: 0;
  width: auto; height: clamp(190px, 20vw, 300px);
  max-width: 22vw; object-fit: contain; object-position: bottom left;
}
@media (min-width: 1081px) {
  .how-rail { padding-left: clamp(132px, 12.5vw, 208px); }
  .how-rail::before { left: calc(clamp(132px, 12.5vw, 208px) + 19px); }
  .how-rail .how-n { margin-top: 7px; }
}

/* he stands level with the rail: his crown at the 01 circle, his feet at the
   bottom of row 03 — same top and bottom edge as the numbers he is saying */
.pitch-body { position: relative; }
@media (min-width: 1081px) {
  .pitch-body { padding-left: clamp(252px, 19vw, 292px); }
  .how-rail { padding-left: 0; }
  .how-rail::before { left: 19px; }
  .mascot-rail {
    position: absolute; left: 0; right: auto;
    top: clamp(20px, 2.4vw, 30px);
    height: calc(100% - 2 * clamp(20px, 2.4vw, 30px));
    width: auto; max-width: none;
    object-fit: contain; object-position: bottom left;
  }
}

/* ==== ENTER THE BULLPEN =====================================================
   The hero already shows three lit floors behind the glass. Pressing the button
   drives the camera into that glass -- the scene planes scale about the window
   band while everything overlaid on them drops away -- and the interior takes
   over before the zoom ends, so the two shots read as one move rather than a
   page change. Day: the floor is running. Night: the floor is dark.          */

.bullpen-enter {
  position: absolute; z-index: 24;
  left: 50%; bottom: clamp(64px, 7vh, 96px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 16px 11px 13px; border-radius: 999px;
  border: 1px solid rgba(242,243,244,.20);
  background: rgba(8,11,16,.58); backdrop-filter: blur(14px);
  color: var(--paper); cursor: pointer; text-align: left;
  transition: background .25s ease, border-color .25s ease, transform .25s var(--ease), opacity .4s ease;
}
.bullpen-enter:hover { background: rgba(12,16,22,.78); border-color: rgba(242,243,244,.38); transform: translateX(-50%) translateY(-2px); }
.bullpen-enter:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.bullpen-enter-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: #52d17f; box-shadow: 0 0 0 4px rgba(82,209,127,.16);
}
.experience[data-view="closed"] .bullpen-enter-dot,
.experience[data-market="closed"][data-view="live"] .bullpen-enter-dot {
  background: #ff5f52; box-shadow: 0 0 0 4px rgba(255,95,82,.16);
}
.bullpen-enter-text { display: grid; gap: 1px; }
.bullpen-enter-k { font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 15px; letter-spacing: .01em; line-height: 1; }
.bullpen-enter-s { font-family: var(--data); font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); }
.bullpen-enter-arrow { font-size: 13px; color: var(--muted); }
@media (max-width: 620px) { .bullpen-enter { bottom: 54px; padding: 9px 13px 9px 11px; } .bullpen-enter-k { font-size: 13px; } }

/* the push into the glass. Origin sits on the lit floor band of the tower. */
.stage > .scene-plane { transform-origin: 48% 45%; will-change: opacity, transform; }
.experience[data-zoom="in"] .stage > .scene-plane { transform: scale(4.1); transition: transform 1150ms cubic-bezier(.62,.02,.86,.30); }
.experience[data-zoom="out"] .stage > .scene-plane { transform: scale(1); transition: transform 620ms cubic-bezier(.22,.9,.3,1); }
.experience[data-zoom="in"] .hud,
.experience[data-zoom="in"] .video-space,
.experience[data-zoom="in"] .stage .ticker-tape,
.experience[data-zoom="in"] .bullpen-enter,
.experience[data-zoom="in"] .scene-vignette { opacity: 0; transition: opacity 420ms ease; pointer-events: none; }

/* the floor itself */
.bullpen {
  position: fixed; inset: 0; z-index: 90; background: #04070b;
  opacity: 0; transition: opacity 520ms ease;
  overflow: hidden;
}
.bullpen[hidden] { display: none; }
html[data-bullpen="open"] .bullpen { opacity: 1; }
html[data-bullpen="open"] { overflow: hidden; }
.bullpen-plane { position: absolute; inset: 0; }
.bullpen-night { opacity: var(--night-mix, 1); transition: opacity 1.2s var(--ease); }
.experience[data-view="open"] .bullpen-night { opacity: 0; }
.experience[data-view="closed"] .bullpen-night { opacity: 1; }
.bullpen-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  animation: bullpen-push 34s ease-in-out infinite alternate;
}
@keyframes bullpen-push { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .bullpen-layer { animation: none; } }
.bullpen-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(3,5,8,.62), transparent 30%, transparent 46%, rgba(2,4,6,.86)),
              linear-gradient(90deg, rgba(3,5,8,.5), transparent 24%, transparent 76%, rgba(3,5,8,.5));
}
.bullpen-grain { position: absolute; inset: 0; }

.bullpen-hud {
  position: absolute; left: clamp(20px, 4vw, 56px); bottom: clamp(28px, 6vh, 66px);
  max-width: min(46ch, 74vw); color: var(--paper);
  transform: translateY(16px); opacity: 0;
  transition: transform 700ms var(--ease) 260ms, opacity 700ms ease 260ms;
}
html[data-bullpen="open"] .bullpen-hud { transform: none; opacity: 1; }
.bullpen-tag { font-family: var(--data); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
.bullpen-title { color: #fff; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 62px); line-height: .95; margin: 8px 0 10px; }
.bullpen-copy { margin: 0 0 18px; font-size: clamp(14px, 1.35vw, 17px); line-height: 1.5; color: var(--muted); max-width: 42ch; }
.bullpen-stats { display: flex; gap: clamp(20px, 3vw, 44px); margin: 0; }
.bullpen-stats div { display: grid; gap: 4px; }
.bullpen-stats dt { font-family: var(--data); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); }
.bullpen-stats dd { margin: 0; color: var(--paper); line-height: 1.2; font-family: var(--data); font-size: clamp(16px, 1.8vw, 22px); }

.bullpen-exit {
  position: absolute; top: clamp(18px, 3vh, 30px); left: clamp(20px, 4vw, 56px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(242,243,244,.22); background: rgba(8,11,16,.55);
  backdrop-filter: blur(12px); color: var(--paper);
  font-family: var(--data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transition: opacity 500ms ease 380ms, background .2s ease, border-color .2s ease;
}
html[data-bullpen="open"] .bullpen-exit { opacity: 1; }
.bullpen-exit:hover { background: rgba(14,18,25,.8); border-color: rgba(242,243,244,.4); }
.experience[data-zoom="in"] .masthead,
.experience[data-zoom="in"] .sr-live { opacity: 0; transition: opacity 380ms ease; pointer-events: none; }

/* ---- the way in sits ON the building ------------------------------------
   The button used to float at the bottom of the hero, which read as page
   furniture. It now lives inside #videoSpace -- the box sized to the video's
   own rect -- pinned to the third lit floor, so it stays on that floor at
   every window shape and the zoom drives straight into it. Day and night are
   framed differently, so the pin has a coordinate for each. */
.bullpen-enter {
  position: absolute; z-index: 8;
  left: 47.6%; top: 56.6%; transform: translate(-50%, -50%);
  bottom: auto;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 12px 7px 10px; border-radius: 999px;
  border: 1px solid rgba(242,243,244,.24);
  background: rgba(6,9,13,.66); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: background .22s ease, border-color .22s ease, transform .22s var(--ease), opacity .4s ease;
}
.experience[data-view="closed"] .bullpen-enter,
.experience[data-market="closed"][data-view="live"] .bullpen-enter { top: 53.1%; }
.bullpen-enter:hover { background: rgba(10,14,20,.86); border-color: rgba(242,243,244,.46); transform: translate(-50%, -50%) scale(1.04); }
.bullpen-enter-dot { width: 7px; height: 7px; animation: bullpen-ping 2.4s ease-out infinite; }
@keyframes bullpen-ping {
  0%   { box-shadow: 0 0 0 0 rgba(82,209,127,.45); }
  70%  { box-shadow: 0 0 0 9px rgba(82,209,127,0); }
  100% { box-shadow: 0 0 0 0 rgba(82,209,127,0); }
}
.bullpen-enter-k { font-size: 12.5px; }
.bullpen-enter-s { font-size: 8.5px; letter-spacing: .13em; }
@media (max-width: 620px) {
  .bullpen-enter { padding: 6px 10px 6px 8px; gap: 7px; }
  .bullpen-enter-k { font-size: 11px; }
  .bullpen-enter-s { display: none; }
}

/* the interior is real footage now, so the fake ken-burns push comes off */
.bullpen-layer { animation: none; }
.bullpen-plane { background: #04070b; }