/* TRADING BOT — an AI trader's live channel.
   Broadcast graphics, not a dashboard: a signal-orange studio field, stadium numerals in ultra-condensed
   Mona Sans, a 24-hour dial as the programme clock, every position as a lane from stop to target, and the
   bot's own notes running as live subtitles. One family (Mona Sans, variable width + weight); Chinese
   falls back to the system face. */

@font-face { font-family: "Mona Sans"; src: url(/fonts/mona-sans-latin.woff2) format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  --ink: #0d0d0f;
  --deep: #141417;
  --raise: #1b1b1f;
  --line: #26252a;
  --paper: #f4f1ea;
  --dim: #a29e96;
  --signal: #ff5b14;
  --up: #3ee0a1;
  --down: #ff4d6a;
  --m: max(clamp(16px, 3.4vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --sans: "Mona Sans", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* Platform layer (mobile-native): no grey tap flash, no font inflation; the page is a scrolling document,
   so pull-to-refresh stays (it is a sensible way to refresh a live board). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); overflow-x: clip; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* controls fire on tap without the double-tap wait, and a long press never selects their label */
button, a, [role="tab"] { touch-action: manipulation; }
button, [role="tab"], .nav a, .live { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: inherit; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.hero :focus-visible { outline-color: var(--ink); }
::selection { background: var(--signal); color: var(--ink); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 60; padding: 10px 14px; background: var(--paper); color: var(--ink); font-weight: 700; }
.skip:focus { top: 12px; }
.nojs { margin: 40px var(--m); padding: 16px; background: var(--deep); }
.empty { color: var(--dim); padding: 24px 0; }

/* ── Odometer digits ── */
.od { display: inline-block; height: 1em; line-height: 1em; overflow: hidden; vertical-align: top; }
.od-strip { display: block; transition: transform 1.25s var(--ease); will-change: transform; }
.od-strip > span { display: block; height: 1em; }
.od-c { display: inline-block; height: 1em; line-height: 1em; vertical-align: top; }

/* ── Hero: the studio field ── */
.hero { background: var(--signal); color: var(--ink); padding: 0 var(--m); position: relative; }
.bar { display: flex; align-items: center; gap: 32px; height: calc(76px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-name { font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.brand-sub { font-size: 14px; font-weight: 600; opacity: .72; }
.nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 650; }
.nav a { text-decoration: none; padding: 10px 0; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .25s var(--ease); }

.onair { display: flex; align-items: center; gap: 16px; }

.lang { display: inline-flex; align-items: stretch; height: 32px; border: 2px solid var(--ink); background: transparent; flex-shrink: 0; }
.lang button { padding: 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--ink); opacity: .55; }
.lang button.on { background: var(--ink); color: var(--paper); opacity: 1; }
.stream .lang { display: none; }

.live { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 12px; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 13px; letter-spacing: .08em; }
.live i { width: 9px; height: 9px; border-radius: 50%; background: #ff2b2b; animation: rec 1.6s steps(1) infinite; }
.live.off i { background: var(--dim); animation: none; }
.live.off b { color: var(--dim); }
@keyframes rec { 50% { opacity: .15; } }
.clock { font-weight: 700; font-size: 15px; min-width: 9.5ch; }

.stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 470px); gap: clamp(24px, 5vw, 96px); align-items: center; padding: clamp(28px, 4vw, 64px) 0 clamp(40px, 4.5vw, 72px); }
.day { font-size: 16px; font-weight: 600; margin-bottom: clamp(12px, 2vw, 28px); }
.day b { font-weight: 900; }
.headline { display: flex; flex-direction: column; }
.headline .lead { font-size: clamp(28px, 3.4vw, 52px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.headline .figure { font-weight: 900; font-stretch: 75%; font-size: clamp(132px, 21vw, 340px); line-height: .86; letter-spacing: -0.045em; margin: .04em 0 0 -.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.detail { font-size: clamp(17px, 1.5vw, 22px); font-weight: 600; margin-top: clamp(14px, 1.6vw, 24px); }
.facts { display: flex; flex-wrap: wrap; gap: 14px 48px; margin-top: clamp(24px, 3vw, 44px); padding-top: 20px; border-top: 3px solid var(--ink); }
.facts dt { font-size: 13px; font-weight: 700; opacity: .7; }
.facts dd { font-size: clamp(18px, 1.6vw, 24px); font-weight: 800; letter-spacing: -0.01em; }

/* the dial */
.dial { width: 100%; max-width: 470px; justify-self: end; }
.dial-svg { display: block; width: 100%; height: auto; overflow: visible; }
.d-rim { fill: none; stroke: var(--ink); stroke-width: 3; }
.d-tick { stroke: var(--ink); stroke-width: 1.5; opacity: .55; }
.d-tick-major { stroke: var(--ink); stroke-width: 3; }
.d-hour { font: 800 17px var(--sans); font-stretch: 85%; fill: var(--ink); text-anchor: middle; }
.d-track { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .35; }
.d-session { fill: none; stroke: var(--ink); stroke-width: 18; stroke-linecap: butt; opacity: .9; }
.d-run.us { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.d-run.cx { fill: var(--ink); }
.d-run.next { animation: blip 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes blip { 50% { transform: scale(1.35); } }
.d-wedge { fill: var(--ink); opacity: .13; }
.d-hand { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.d-core { fill: var(--ink); }
.d-count { font: 900 68px var(--sans); font-stretch: 75%; fill: var(--paper); text-anchor: middle; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.d-count.long { font-size: 52px; }
.d-next { font: 750 17px var(--sans); fill: var(--signal); text-anchor: middle; }
.d-cap { font: 600 14px var(--sans); fill: var(--paper); opacity: .6; text-anchor: middle; }
.dial-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 14px; font-size: 12.5px; font-weight: 650; }
.dial-key span { display: inline-flex; align-items: center; gap: 6px; }
.dial-key i { display: inline-block; }
.k-us { width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.k-cx { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.k-ses { width: 18px; height: 8px; background: var(--ink); }

/* ── Scoreboard band ── */
.score { display: grid; grid-template-columns: minmax(0, 1fr) 3px minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); padding: clamp(32px, 4vw, 56px) var(--m) clamp(36px, 4.5vw, 64px); background: var(--ink); border-bottom: 1px solid var(--line); min-height: 240px; }
.score-sep { background: var(--signal); }
.team-name { display: flex; align-items: baseline; gap: 12px; font-size: 15px; }
.team-name b { font-weight: 800; letter-spacing: -0.01em; }
.team-name span { color: var(--dim); font-size: 14px; }
.team-total { font-weight: 900; font-stretch: 75%; font-size: clamp(84px, 10.5vw, 168px); line-height: .9; letter-spacing: -0.035em; margin: 10px 0 22px -.03em; min-height: .9em; }
.team-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 8px clamp(20px, 3vw, 48px); }
.team-stats dt { font-size: 13px; color: var(--dim); }
.team-stats dd { font-size: 19px; font-weight: 700; white-space: nowrap; }
.team-stats small { display: block; font-size: 13px; font-weight: 500; color: var(--dim); }
.team-err { margin-top: 18px; color: var(--down); max-width: 34ch; }

.notice { margin: 0; padding: 14px var(--m); background: #2a1608; color: #ffb48a; font-weight: 600; }

/* ── Blocks ── */
.block { padding: clamp(80px, 9vw, 150px) var(--m) 0; }
.block-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.block-head h2 { font-size: clamp(36px, 4.6vw, 72px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.block-sub { color: var(--dim); font-size: 17px; max-width: 42ch; justify-self: end; }
.minor { margin: 72px 0 8px; font-size: 22px; font-weight: 800; }

/* ── Lanes ── */
.lane { border-top: 1px solid var(--line); }
.lane:last-child { border-bottom: 1px solid var(--line); }
.lane-row { width: 100%; display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(170px, 210px); gap: clamp(20px, 3vw, 48px); align-items: center; padding: 26px 0 28px; text-align: left; transition: background-color .25s; }

.lane-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tk { font-weight: 900; font-stretch: 75%; font-size: clamp(64px, 7.4vw, 112px); line-height: .82; letter-spacing: -0.03em; transition: color .25s; }
.lane.open .tk { color: var(--signal); }
.lane.danger .tk { color: var(--down); }
.nm { color: var(--dim); font-size: 13.5px; }
.tag { align-self: flex-start; padding: 2px 8px; font-size: 12.5px; font-weight: 750; }
.tag.warn { background: var(--signal); color: var(--ink); }
.lane-pnl { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.lane-pnl b { font-weight: 850; font-stretch: 85%; font-size: clamp(30px, 2.8vw, 42px); line-height: 1; letter-spacing: -0.02em; }
.lane-pnl > span { color: var(--dim); font-size: 15px; margin-top: 6px; }
.lane-pnl .dist { font-size: 13px; margin-top: 10px; }
.lane-pnl .dist.hot { color: var(--down); font-weight: 750; }

.lane-track { position: relative; height: 112px; }
.track { position: absolute; inset: 0; }
.t-base { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #34333a; }
.t-risk { position: absolute; top: 50%; height: 30px; margin-top: -15px; background: repeating-linear-gradient(135deg, rgba(255, 77, 106, .5) 0 2px, transparent 2px 8px); }
.t-pnl { position: absolute; top: 50%; height: 30px; margin-top: -15px; transform-origin: left center; transition: transform 1.1s var(--ease) calc(var(--i, 0) * 90ms + 150ms); }
.t-pnl.down { transform-origin: right center; }
.t-pnl.up { background: var(--up); }
.t-pnl.down { background: var(--down); }
.lane:not(.seen) .t-pnl { transform: scaleX(0); }
.t-mark { position: absolute; top: 50%; }
.t-mark.cost { width: 2px; height: 46px; margin: -23px 0 0 -1px; background: var(--paper); opacity: .55; }
.t-mark.stop { width: 5px; height: 54px; margin: -27px 0 0 -2.5px; background: var(--down); }
.t-mark.stop.planned { background: transparent; border: 2px dashed var(--down); width: 9px; margin-left: -4.5px; }
.lane.danger .t-mark.stop { animation: alarm 1.2s ease-in-out infinite; }
@keyframes alarm { 50% { opacity: .25; } }
.t-mark.tgt { width: 2px; height: 46px; margin: -23px 0 0 -1px; background: var(--paper); }
.t-mark.tgt::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 9px; background: var(--paper); }
.t-mark.buy { width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 3px solid var(--signal); border-radius: 50%; }
.t-label { position: absolute; top: calc(50% + 32px); transform: translateX(-50%); font-size: 12.5px; font-weight: 650; white-space: nowrap; color: var(--dim); font-variant-numeric: tabular-nums; }
.t-label.start { transform: translateX(-6px); }
.t-label.end { transform: translateX(calc(-100% + 6px)); }
.t-label.stop { color: var(--down); }
.t-label.tgt { color: var(--paper); }
.t-label.buy { color: var(--signal); }
.t-now { position: absolute; top: 50%; width: 4px; height: 70px; margin: -35px 0 0 -2px; background: var(--paper); }
.t-now::after { content: ""; position: absolute; left: -5px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); }
.t-price { position: absolute; bottom: calc(50% + 45px); transform: translateX(-50%); font-size: 19px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.t-price.start { transform: translateX(-10px); }
.t-price.end { transform: translateX(calc(-100% + 10px)); }

.lane-more { background: var(--deep); margin-bottom: 28px; }
.lane-more:not([hidden]) { animation: open .45s var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(-8px); } }
.more-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; padding: 28px; }
.seg { display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 4px; background: var(--ink); }
.seg button { height: 32px; padding: 0 14px; font-size: 14px; font-weight: 650; color: var(--dim); }
.seg button[aria-selected="true"] { background: var(--paper); color: var(--ink); }
.kchart { height: 380px; }
.ind { margin-top: 10px; color: var(--dim); font-size: 13px; }
.more-text h3 { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.thesis { font-size: 17px; line-height: 1.75; }
.levels { width: 100%; margin-top: 22px; border-collapse: collapse; font-size: 15px; }
.levels th { text-align: left; font-weight: 500; color: var(--dim); padding: 8px 0; }
.levels td { text-align: right; padding: 8px 0 8px 16px; white-space: nowrap; }
.levels tr + tr > * { border-top: 1px solid var(--line); }
.levels tr.now th, .levels tr.now td { color: var(--signal); font-weight: 800; }
.more-note { margin-top: 16px; font-size: 14px; color: var(--dim); }
.more-news { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.more-news a { text-decoration: none; font-weight: 600; }

.more-news span { color: var(--dim); }

/* ── Week ── */
.wk-row { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: 30px 0; border-top: 1px solid var(--line); }
.wk-row:last-child { border-bottom: 1px solid var(--line); }
.wk-name { font-weight: 800; font-size: 15px; }
.wk-figure { font-weight: 900; font-stretch: 75%; font-size: clamp(56px, 5.6vw, 84px); line-height: .95; letter-spacing: -0.03em; margin: 8px 0 6px; }
.wk-cap { color: var(--dim); font-size: 13px; }
.wk { display: block; overflow: visible; }
.wk-grid { stroke: #1f1f24; stroke-width: 1; }
.wk-zero { stroke: #4b4952; stroke-width: 1.5; }
.wk-tick { fill: var(--dim); font: 600 12px var(--sans); font-variant-numeric: tabular-nums; }
.wk-day { fill: var(--dim); font: 600 12px var(--sans); text-anchor: middle; }
.wk-line { fill: none; stroke: var(--paper); stroke-width: 2.5; stroke-linejoin: round; }
.wk-end { fill: var(--signal); }
.wk-flow { stroke: var(--signal); stroke-width: 1.5; stroke-dasharray: 4 4; }
.wk-flow-t { fill: var(--signal); font: 700 12px var(--sans); }
.wk-fill.buy { fill: var(--up); }
.wk-fill.sell { fill: var(--down); }
.wk-fill-t { fill: var(--paper); font: 750 11px var(--sans); text-anchor: middle; }

/* ── Tickets ── */
.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ticket { position: relative; padding: 18px 22px 20px; background: var(--paper); color: var(--ink); transition: transform .3s var(--ease);
  -webkit-mask: radial-gradient(circle at 0 54px, transparent 10px, #000 10.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 54px, transparent 10px, #000 10.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 54px, transparent 10px, #000 10.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 54px, transparent 10px, #000 10.5px) right / 51% 100% no-repeat; }

.tk-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; padding-bottom: 14px; border-bottom: 2px dashed rgba(13, 13, 15, .28); margin-bottom: 14px; }
.tk-top b { padding: 2px 8px; color: var(--paper); background: var(--ink); }
.r-stop .tk-top b { background: #c8102e; }
.r-take .tk-top b { background: #0b7a4f; }
.r-entry .tk-top b { background: var(--signal); color: var(--ink); }
.tk-sym { font-weight: 900; font-stretch: 75%; font-size: 52px; line-height: .9; letter-spacing: -0.03em; }
.tk-px { font-weight: 850; font-stretch: 85%; font-size: 30px; letter-spacing: -0.02em; margin-top: 6px; }
.tk-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 13.5px; font-weight: 650; }
.tk-type { margin-top: 6px; font-size: 12.5px; color: #55524c; }

.fills { columns: 2; column-gap: clamp(32px, 5vw, 88px); }
.fills li { break-inside: avoid; display: grid; grid-template-columns: 96px 40px 64px minmax(0, 1fr) 84px; grid-template-areas: "time side tk q v" "time side desk q v"; column-gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.fills li { grid-template-areas: "time side tk q v"; }
.f-time { grid-area: time; } .f-side { grid-area: side; } .f-tk { grid-area: tk; } .f-q { grid-area: q; } .f-v { grid-area: v; }
.f-desk { display: none; }
.f-time, .f-desk { color: var(--dim); }
.f-side { font-weight: 750; font-size: 13px; }
.f-side.buy { color: var(--up); }
.f-side.sell { color: var(--down); }
.f-tk { font-weight: 850; font-stretch: 85%; font-size: 18px; }
.f-q { color: var(--dim); }
.f-v { text-align: right; font-weight: 650; }

/* ── Notebook ── */
.nb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 88px); }
.nb h3 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 850; letter-spacing: -0.02em; line-height: 1.1; }
.nb h3 span { display: block; font-size: 15px; font-weight: 600; color: var(--dim); letter-spacing: 0; margin-top: 6px; }
.nb-sched { margin-top: 18px; color: var(--dim); font-size: 15px; }
.nb-runs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.nb-runs li { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; background: var(--raise); font-size: 13px; color: var(--dim); }
.nb-runs li b { font-size: 18px; font-weight: 850; color: var(--paper); }
.nb-runs li.next { background: var(--signal); color: var(--ink); }
.nb-runs li.next b { color: var(--ink); }
.nb-last { margin-top: 10px; font-size: 13px; color: var(--dim); }
.nb-notes { counter-reset: n; margin-top: 30px; display: flex; flex-direction: column; gap: 20px; }
.nb-notes li { position: relative; padding-left: 44px; font-size: 17px; line-height: 1.75; }
.nb-notes li::before { counter-increment: n; content: counter(n); position: absolute; left: 0; top: -2px; font-weight: 900; font-stretch: 75%; font-size: 30px; line-height: 1.1; color: var(--signal); }
.nb h4 { margin-top: 40px; font-size: 15px; font-weight: 750; color: var(--dim); }
.nb-theses dt { margin-top: 16px; }
.nb-theses dt a { font-weight: 900; font-stretch: 75%; font-size: 32px; text-decoration: none; letter-spacing: -0.02em; }

.nb-theses dd { color: #d8d4cc; font-size: 15.5px; line-height: 1.7; }

/* ── Footer ── */
.foot { margin-top: clamp(100px, 11vw, 180px); padding: 0 var(--m) 32px; overflow: hidden; }
.wordmark { font-weight: 900; font-stretch: 75%; font-size: 18.6vw; line-height: .8; letter-spacing: -0.045em; color: var(--signal); white-space: nowrap; margin-left: -.03em; }
.foot-row { display: flex; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; margin-top: 28px; color: var(--dim); font-size: 13px; }
.foot-row p { max-width: 64ch; }

/* ── Captions ── */
.captions { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: stretch; height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: #000; border-top: 3px solid var(--signal); }
.captions[hidden] { display: none; }
.cap-tag { display: flex; align-items: center; padding: 0 18px; background: var(--signal); color: var(--ink); font-weight: 850; font-size: 14px; white-space: nowrap; }
.cap-text { display: flex; flex-direction: column; justify-content: flex-end; height: 52px; margin: auto 0; padding: 0 20px; overflow: hidden; font-size: 16px; line-height: 26px; font-weight: 550; cursor: pointer; }
.cap-text.typing::after { content: ""; display: inline-block; width: .55em; height: 1.05em; margin-left: 3px; vertical-align: -3px; background: var(--signal); animation: rec 1s steps(1) infinite; }
.cap-count { display: flex; align-items: center; padding: 0 14px; color: var(--dim); font-size: 13px; }
.cap-btn { width: 56px; color: var(--paper); font-size: 13px; border-left: 1px solid var(--line); }


/* ── Hover only where a precise pointer can hover; touch gets press feedback instead ── */
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { box-shadow: inset 0 -2px 0 var(--ink); }
  .lane-row:hover { background: #111114; }
  .lane-row:hover .tk { color: var(--signal); }
  .more-news a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .ticket:hover { transform: translateY(-4px) rotate(-.4deg); }
  .nb-theses dt a:hover { color: var(--signal); }
  .cap-btn:hover { background: var(--raise); }
  .stream .lane-row:hover { background: none; }
}
.lane-row { transition: background-color .25s, transform .12s var(--ease); }
.lane-row:active { background: #141418; }
.lane-row:active .tk { color: var(--signal); }
.seg button, .cap-btn { transition: transform .12s var(--ease), background-color .15s; }
.seg button:active, .cap-btn:active { transform: scale(.94); }
.ticket:active { transform: scale(.985); }
.kchart { touch-action: pan-y; }

/* ── Tablet ── */
@media (max-width: 1100px) {
  .nav { display: none; }
  .lang { margin-left: auto; }
  .onair { margin-left: 0; }
  .stage { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); }
  .lane-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id pnl" "track track"; row-gap: 8px; }
  .lane-id { grid-area: id; } .lane-pnl { grid-area: pnl; } .lane-track { grid-area: track; }
  .more-grid { grid-template-columns: minmax(0, 1fr); }
  .team-stats { grid-template-columns: repeat(2, auto); }
  .tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fills { columns: 1; }
}

/* ── Phone ── */
@media (max-width: 720px) {
  body { font-size: 15px; padding-bottom: 76px; }
  .bar { height: 64px; gap: 12px; }
  .brand-sub { display: none; }
  .clock { display: none; }
  .stage { grid-template-columns: minmax(0, 1fr); padding: 16px 0 40px; }
  .headline .figure { font-size: 38vw; }
  .dial { justify-self: center; max-width: 340px; margin-top: 8px; }
  .facts { gap: 14px 28px; }
  .score { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .score-sep { height: 3px; }
  .team-total { font-size: 22vw; }
  .team-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .block-head { grid-template-columns: minmax(0, 1fr); }
  .block-sub { justify-self: start; font-size: 15px; }
  .lane-row { padding: 22px 0; }
  .tk { font-size: 64px; }
  .lane-track { height: 132px; }
  .t-price { font-size: 16px; }
  .lane-id .tag { margin-top: 2px; }
  .more-grid { padding: 18px 16px; gap: 24px; }
  .kchart { height: 300px; }
  .wk-row { grid-template-columns: minmax(0, 1fr); }
  .tickets { gap: 10px; }
  .ticket { padding: 14px 14px 16px; -webkit-mask: radial-gradient(circle at 0 44px, transparent 8px, #000 8.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 44px, transparent 8px, #000 8.5px) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 44px, transparent 8px, #000 8.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 44px, transparent 8px, #000 8.5px) right / 51% 100% no-repeat; }
  .tk-top { padding-bottom: 10px; margin-bottom: 10px; font-size: 12px; }
  .tk-sym { font-size: 40px; }
  .tk-px { font-size: 22px; }
  .tk-meta { flex-direction: column; gap: 2px; font-size: 12.5px; margin-top: 10px; }
  .tk-type { font-size: 11.5px; }
  .fills li { grid-template-columns: 86px 34px minmax(0, 1fr) auto; grid-template-areas: "time side tk v" "time side q q"; row-gap: 2px; column-gap: 10px; font-size: 14px; }
  .f-q { font-size: 13px; }
  .nb-cols { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .nb-notes li { font-size: 16px; padding-left: 36px; }
  .captions { height: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .cap-tag { padding: 0 10px; font-size: 12px; }
  .cap-text { font-size: 14px; line-height: 22px; height: 44px; padding: 0 12px; }
  .cap-count { display: none; }
  .cap-btn { width: 48px; }
}

/* ── Stream overlay: studio field on the left, the lanes on the right, subtitles along the bottom ── */
.stream body { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); grid-template-rows: auto 1fr; padding-bottom: 0; }
.stream .hero { grid-column: 1; grid-row: 1; }
.stream .score { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr) 3px minmax(0, 1fr); gap: 28px; border-bottom: 0; min-height: 0; padding: 28px var(--m) 92px; }
.stream .team-total { font-size: 82px; margin: 8px 0 14px; }
.stream .team-stats { grid-template-columns: repeat(2, auto); gap: 6px 22px; }
.stream .team-stats dd { font-size: 17px; }
.stream main { grid-column: 2; grid-row: 1 / 3; border-left: 3px solid var(--signal); }
.stream .notice { position: fixed; top: 0; left: 0; right: 0; z-index: 40; }
.stream .nav, .stream .week, .stream .orders, .stream .notebook, .stream .foot, .stream .skip, .stream .block-sub, .stream .dial-key, .stream .brand-sub { display: none; }
.stream .stage { grid-template-columns: minmax(0, 1fr) 250px; gap: 24px; padding: 14px 0 30px; }
.stream .headline .figure { font-size: 168px; }
.stream .headline .lead { font-size: 32px; }
.stream .detail { font-size: 17px; }
.stream .facts { margin-top: 20px; gap: 10px 32px; }
.stream .facts dd { font-size: 19px; }
.stream .block { padding: 36px 40px 0; }
.stream .block-head { margin-bottom: 18px; }
.stream .block-head h2 { font-size: 40px; }
.stream .lane-row { grid-template-columns: 200px minmax(0, 1fr) 170px; padding: 18px 0 20px; }
.stream .tk { font-size: 84px; }
.stream .lane-track { height: 104px; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .lane:not(.seen) .t-pnl { transform: none; }
}

/* ── Featured slot: a labelled house ad for the maker's other site, never styled like trading data ── */
.promo { padding: 20px var(--m) 0; }
.promo-card { display: flex; align-items: center; gap: 18px; min-height: 64px; padding: 12px 16px 12px 12px; text-decoration: none; background: var(--deep); border: 1px solid var(--line); border-left: 3px solid var(--signal); transition: background-color .2s, border-color .2s; }
.promo-tag { flex-shrink: 0; padding: 3px 8px; border: 1.5px solid var(--dim); color: var(--dim); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.promo-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; flex: 1; }
.promo-name { font-weight: 850; font-size: 15px; letter-spacing: -0.01em; color: var(--paper); }
.promo-copy { font-size: 15px; font-weight: 550; color: #d8d4cc; }
.promo-cta { flex-shrink: 0; margin-left: auto; font-size: 14px; font-weight: 800; color: var(--signal); white-space: nowrap; }
.promo-card:active { background: var(--raise); }
@media (hover: hover) and (pointer: fine) { .promo-card:hover { background: var(--raise); border-color: #3a383f; border-left-color: var(--signal); } .promo-card:hover .promo-cta { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 720px) {
  .promo { padding-top: 16px; }
  .promo-card { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; }
  .promo-body { flex-basis: 100%; order: 2; }
  .promo-tag { order: 1; }
  .promo-cta { order: 3; margin-left: 0; }
}
.stream .promo { display: none; }