/* Call Market: an exchange-floor instrument. Swiss industrial print on cool steel: carbon ink, heavy expanded
   grotesk (Archivo at 125% width, 900) for structure, Martian Mono for every figure, electric cobalt for YES and the
   median, hot signal orange for NO, the target and anything that shuts. No radius, no shadows-as-glow, no gradients.
   Rhythm: steel chassis (the tote) -> cobalt blueprint (the schematic) -> steel millimetre floor (the windows) ->
   signal-orange panel (the form guide) -> carbon strip-chart (the photo finish) -> carbon footer. */
@font-face { font-family: "Archivo"; src: url(/fonts/Archivo-var.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url(/fonts/MartianMono-var.woff2) format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }

:root {
  --steel: #d5d9de; --steel2: #c3c9d0; --plate: #e8ebee; --white: #f7f8f9;
  --ink: #0d0f12; --ink2: #3a4048; --ink3: #666e78; --line: rgba(13, 15, 18, .16); --line2: rgba(13, 15, 18, .42);
  --cobalt: #1532ff; --cobalt-d: #0d22c4; --cobalt-l: #5b74ff; --cobalt-p: #dde2ff;
  --signal: #ff5a1f; --signal-d: #c93c0a; --signal-p: #ffe2d6;
  --screen: #0a0c0f; --on-ink: #eef1f4; --on-ink2: rgba(238, 241, 244, .62); --iline: rgba(238, 241, 244, .16);
  /* legacy names used by the kit and the inner pages */
  --card: var(--white); --ivory: var(--plate); --ivory2: var(--steel); --green: var(--ink); --green3: var(--cobalt); --brass: var(--signal); --brass-d: var(--signal-d); --brass-l: var(--signal); --ox: var(--signal-d); --ox2: var(--signal); --on-green: var(--on-ink); --on-green2: var(--on-ink2); --gline: var(--iline);
  --disp: "Archivo", "Arial Black", Helvetica, sans-serif; --sans: "Archivo", Helvetica, Arial, sans-serif; --mono: "Martian Mono", ui-monospace, "SFMono-Regular", monospace;
  --display: var(--disp); --xc: var(--disp);
  --ease: cubic-bezier(.2, .7, .2, 1); --fast: 140ms; --mid: 280ms;
  --strip-h: 54px; --gut: clamp(16px, 3vw, 40px); --wrap: 1440px; --pad: max(var(--gut), calc((100vw - var(--wrap)) / 2));
  --grid: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 24px 24px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--strip-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--steel); color: var(--ink); font: 400 16px/1.55 var(--sans); font-variant-numeric: tabular-nums lining-nums; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button, a, [role="slider"], [role="option"], summary, label.check, .chip, .pk, .cp { cursor: pointer; }
button:disabled { cursor: not-allowed; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: 8px; z-index: 99; background: var(--ink); color: var(--on-ink); padding: 8px 12px; transform: translateY(-300%); }
.skip:focus { transform: none; }
.noscript { padding: 24px; }
::selection { background: var(--cobalt); color: #fff; }

/* labels: the mono micro-type every panel is stencilled with */
.k, .eyebrow { font: 500 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--ink2); }
.eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--signal); flex: none; }

/* ------------------------------------------------------------------ the strip */
.strip { position: sticky; top: 0; z-index: 30; height: var(--strip-h); display: flex; align-items: center; gap: 20px; padding: 0 var(--gut); background: var(--ink); color: var(--on-ink); }
.strip > * { flex: none; }
.strip-brand { display: flex; align-items: center; gap: 10px; min-height: 40px; text-decoration: none; }
.strip-brand img { width: 28px; height: 28px; display: block; }
.strip-brand b { font: 900 17px/1 var(--disp); font-stretch: 125%; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.strip-clock, .strip-stat, .strip-ca { display: flex; align-items: baseline; gap: 8px; padding-left: 18px; border-left: 1px solid var(--iline); }
.strip .k { color: var(--on-ink2); }
.strip-clock b, .strip-stat b, .strip-ca b { font: 600 12.5px/1 var(--mono); color: var(--on-ink); }
.strip-stat b { color: #fff; }
.strip-nav { display: flex; gap: 22px; margin-left: auto; }
.strip-nav a { font: 700 13px/1 var(--disp); font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--on-ink); padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color var(--fast); }
.strip-nav a:hover, .strip-nav a[aria-current] { border-bottom-color: var(--signal); }
.strip-nav .logl i { font: 500 10px var(--mono); font-style: normal; color: var(--signal); letter-spacing: 0; text-transform: none; margin-left: 3px; }
.key { height: 28px; padding: 0 10px; border: 1.5px solid currentColor; background: transparent; font: 600 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: inherit; transition: background var(--fast), color var(--fast); }
.key:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.strip .key:hover { background: var(--on-ink); color: var(--ink); }
.strip-btn { height: 34px; padding: 0 13px; white-space: nowrap; border: 1.5px solid var(--iline); background: transparent; color: var(--on-ink); font: 700 12.5px/1 var(--disp); font-stretch: 112%; letter-spacing: .05em; text-transform: uppercase; transition: border-color var(--fast), background var(--fast); }
.strip-btn i { font: 500 10.5px var(--mono); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--signal); margin-left: 4px; }
.strip-btn:hover { border-color: var(--on-ink); }
.strip-btn.wallet { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.strip-btn.wallet:hover { background: var(--cobalt-d); border-color: var(--cobalt-d); }
.menu-btn { display: none; }
.menu { position: fixed; z-index: 29; top: var(--strip-h); left: 0; right: 0; display: grid; background: var(--ink); border-bottom: 4px solid var(--signal); padding: 4px var(--gut) 16px; }
.menu[hidden] { display: none; }
.menu a { font: 900 28px/1 var(--disp); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; color: var(--on-ink); text-decoration: none; padding: 14px 0; border-top: 1px solid var(--iline); }
.menu a:first-child { border-top: 0; }

/* ------------------------------------------------------------------ actions */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border: 2px solid var(--cobalt); background: var(--cobalt); color: #fff; text-decoration: none; font: 800 15px/1 var(--disp); font-stretch: 118%; letter-spacing: .02em; text-transform: uppercase; transition: background var(--fast), border-color var(--fast), transform var(--fast); }
.cta:hover { background: var(--cobalt-d); border-color: var(--cobalt-d); }
.cta:active { transform: translateY(1px); }
.cta.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.cta.ghost:hover { background: var(--ink); color: var(--white); }
.cta small { font: 500 11px var(--mono); letter-spacing: 0; text-transform: none; opacity: .7; }
.cta .play { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.linkish { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; cursor: pointer; }
/* the ticket: a hard coloured stub, a perforation, the face */
.ticket { display: inline-flex; align-items: stretch; min-height: 54px; padding: 0; border: 2px solid var(--ink); background: var(--white); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform var(--fast) var(--ease), background var(--fast); }
.ticket .stub { position: relative; display: grid; place-items: center; min-width: 62px; padding: 0 12px; background: var(--ink); color: #fff; font: 900 14px/1 var(--disp); font-stretch: 125%; letter-spacing: .02em; }
.ticket .stub::after { content: ""; position: absolute; right: -1px; top: 4px; bottom: 4px; border-right: 2px dotted var(--white); }
.ticket .face { display: flex; flex-direction: column; justify-content: center; padding: 8px 16px; font: 800 17px/1.05 var(--disp); font-stretch: 112%; text-transform: uppercase; text-align: left; }
.ticket .face small { display: block; margin-top: 5px; font: 500 10.5px/1.2 var(--mono); letter-spacing: 0; text-transform: none; color: var(--ink2); }
.ticket:hover { background: #fff; }
.ticket:active, .ticket.punched { transform: translateY(2px); }
.ticket.punched .stub { animation: punch .5s steps(2) 2; }
@keyframes punch { 50% { background: var(--ink); } }
.ticket.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.ticket.dark .stub { background: var(--signal); color: var(--ink); }
.ticket.dark .stub::after { border-color: var(--ink); }
.ticket.dark:hover { background: #1c2027; }
.ticket.big { min-height: 62px; width: 100%; }
.ticket.big .face { font-size: 21px; flex: 1; align-items: center; }
.ticket.yes { border-color: var(--cobalt); }
.ticket.yes .stub { background: var(--cobalt); }
.ticket.yes:not(:disabled):hover { background: var(--cobalt-p); }
.ticket.no { border-color: var(--signal); }
.ticket.no .stub { background: var(--signal); color: var(--ink); }
.ticket.no .stub::after { border-color: var(--white); }
.ticket.no:not(:disabled):hover { background: var(--signal-p); }
.ticket:disabled, .ticket[aria-disabled="true"] { opacity: .38; }
.ticket.busy .face { opacity: .5; }

/* ------------------------------------------------------------------ 1. the instrument */
.hero { position: relative; padding: clamp(18px, 2.4vw, 32px) var(--pad) clamp(28px, 4vw, 56px); background: var(--steel) ; background-image: linear-gradient(rgba(13, 15, 18, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 15, 18, .07) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; }
.rig { position: relative; border: 3px solid var(--ink); background: var(--plate); }
/* registration crosses at the four corners of the chassis */
.rig::before, .rig::after { content: ""; position: absolute; width: 22px; height: 22px; background: linear-gradient(var(--ink), var(--ink)) 50% 0 / 2px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) 0 50% / 100% 2px no-repeat; }
.rig::before { left: -14px; top: -14px; } .rig::after { right: -14px; bottom: -14px; }
.rig-rail { display: flex; border-bottom: 2px solid var(--ink); font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.rig-rail span { padding: 10px 16px; border-right: 1px solid var(--line2); white-space: nowrap; }
.rig-rail .rr { margin-left: auto; border-right: 0; border-left: 1px solid var(--line2); }
.rig-rail .rr b { color: var(--ink); font-weight: 700; }
.plate { padding: clamp(14px, 2vw, 26px) clamp(16px, 2vw, 28px) clamp(18px, 2vw, 26px); border-bottom: 2px solid var(--ink); }
.name { margin: 0; font: 900 clamp(50px, 9.4vw, 146px)/.8 var(--disp); font-stretch: 125%; letter-spacing: -.035em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.name span:last-child { color: var(--cobalt); }
.plate-side { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-top: clamp(16px, 2vw, 26px); flex-wrap: wrap; }
.line { margin: 0; max-width: 46ch; font: 500 clamp(17px, 1.5vw, 21px)/1.35 var(--sans); color: var(--ink); }
.hero-act { display: flex; gap: 10px; flex-wrap: wrap; }
.tote { background: var(--screen); color: var(--on-ink); padding: 0 12px 12px; border-bottom: 2px solid var(--ink); }
.tote-top { display: flex; align-items: center; gap: 14px; height: 42px; }
.plaque { display: inline-grid; place-items: center; height: 22px; padding: 0 9px; background: var(--signal); color: var(--ink); font: 900 11px/1 var(--disp); font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase; }
.board-page { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-ctl { display: flex; gap: 4px; margin-left: auto; }
.ctl { width: 38px; height: 34px; border: 1.5px solid var(--iline); background: transparent; color: var(--on-ink); font: 600 14px/1 var(--mono); transition: border-color var(--fast); }
.ctl:hover { border-color: var(--on-ink); }
.board-host { position: relative; width: 100%; aspect-ratio: 145 / 41; background: var(--screen); }
.board-host.tall { aspect-ratio: 73 / 47; }
.board-2d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.demo-tag { margin: 8px 0 0; font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--signal); }
/* channels: one per running call, a ruler from the start price to the target with the median's position */
.course { padding: 4px 0 0; border-bottom: 2px solid var(--ink); background: var(--white); }
.course-head, .runner { display: grid; grid-template-columns: 64px minmax(170px, 1.1fr) minmax(0, 3fr) 150px; align-items: center; }
.course-head { height: 30px; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); border-bottom: 1px solid var(--line2); }
.course-head > span { padding: 0 14px; }
.course-head .scale { display: flex; justify-content: space-between; }
.course-head .scale i { font-style: normal; } .course-head .scale i:last-child { color: var(--signal-d); }
.runners { display: grid; }
.runners:empty::after { content: "Reading the chain"; padding: 16px; font: 500 11px var(--mono); color: var(--ink3); }
.runner { min-height: 50px; border-bottom: 1px solid var(--line); }
.runner:last-child { border-bottom: 0; }
.runner .ch { align-self: stretch; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 15px/1 var(--mono); border-bottom: 1px solid #2a2f37; }
.runner .tag { padding: 0 14px; min-width: 0; }
.runner .tag b { display: block; font: 800 16px/1.1 var(--disp); font-stretch: 112%; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runner .tag i { display: block; margin-top: 3px; font: 500 10px var(--mono); font-style: normal; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runner .track { position: relative; height: 26px; margin: 0 14px; background: repeating-linear-gradient(90deg, var(--line2) 0 1px, transparent 1px 10%) 0 100% / 100% 8px no-repeat, repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 2%) 0 100% / 100% 4px no-repeat, var(--plate); border: 1.5px solid var(--ink); }
.runner .track::before { content: ""; position: absolute; top: -1.5px; bottom: -1.5px; left: 50%; border-left: 1.5px dashed var(--ink3); }
.runner .track::after { content: ""; position: absolute; top: -5px; bottom: -5px; right: -1.5px; width: 4px; background: var(--signal); }
.runner .fill { position: absolute; left: 0; top: 5px; bottom: 9px; width: calc(var(--v) * 100%); background: var(--cobalt); transition: width 1.6s cubic-bezier(.45, .05, .3, 1); }
.runner .mk { position: absolute; top: -8px; bottom: -8px; left: calc(var(--v) * 100%); width: 3px; margin-left: -1.5px; background: var(--ink); transition: left 1.6s cubic-bezier(.45, .05, .3, 1); }
.runner .mk::after { content: attr(data-t); position: absolute; left: 7px; top: 1px; padding: 2px 4px 1px; background: var(--ink); color: #fff; font: 600 9.5px/1 var(--mono); white-space: nowrap; }
.runner.post .mk::after { background: var(--signal); color: var(--ink); left: auto; right: 7px; }
.runner .split { position: relative; height: 12px; margin: 0 14px 0 0; background: var(--signal); }
.runner .split .y { position: absolute; inset: 0 auto 0 0; width: var(--y, 50%); background: var(--cobalt); transition: width var(--mid) var(--ease); }
.runner .split::after { content: attr(data-t); position: absolute; left: 0; top: 16px; font: 500 9.5px/1 var(--mono); color: var(--ink3); }
.runner.demo .ch { background: var(--steel2); color: var(--ink2); }
.runner.demo .fill { background: repeating-linear-gradient(135deg, var(--cobalt) 0 6px, var(--cobalt-l) 6px 12px); }
.hero-nums { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.hero-nums div { padding: 14px 18px 16px; border-left: 1px solid var(--line2); }
.hero-nums div:first-child { border-left: 0; }
.hero-nums dt { font: 500 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.hero-nums dd { margin: 8px 0 0; font: 900 clamp(28px, 3.2vw, 46px)/.9 var(--disp); font-stretch: 125%; letter-spacing: -.02em; }
.hero-nums div:last-child dd { color: var(--signal-d); }
.fl { display: inline-block; animation: flap 300ms steps(3) both; }
@keyframes flap { 0% { opacity: 0; } 50% { opacity: 1; color: var(--cobalt); } }

/* ------------------------------------------------------------------ sections */
.sec { position: relative; padding: clamp(64px, 8vw, 112px) var(--pad); }
.sec-head { margin-bottom: clamp(28px, 3.5vw, 44px); }
.sec-head h2 { margin: 0; font: 900 clamp(46px, 7.4vw, 116px)/.84 var(--disp); font-stretch: 125%; letter-spacing: -.035em; text-transform: uppercase; }
.sec-sub { margin: 16px 0 0; max-width: 60ch; font: 500 12px/1.6 var(--mono); color: var(--ink2); }

/* 2. the schematic on cobalt blueprint */
.how { background: var(--cobalt); color: #fff; background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; }
.how .eyebrow { color: rgba(255, 255, 255, .8); }
.how .sec-head h2 { color: #fff; }
.chart { margin: 0; border: 2px solid #fff; padding: clamp(14px, 2vw, 26px); }
.chart figcaption { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .35); font: 500 10.5px/1.5 var(--mono); letter-spacing: .04em; color: rgba(255, 255, 255, .8); }
.how-course svg { width: 100%; height: auto; display: block; overflow: visible; }
.how-course text { font-family: var(--mono); font-weight: 600; letter-spacing: .06em; fill: #fff; }
.c-tote { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .5); stroke-dasharray: 4 4; }
.c-lab { font-size: 12px; }
.c-axis { font-size: 12px; fill: rgba(255, 255, 255, .8) !important; }
.c-axis.red { fill: var(--signal) !important; }
.c-tgt { stroke: var(--signal); stroke-width: 4; }
.c-half { stroke: #fff; stroke-width: 1.2; stroke-dasharray: 6 6; opacity: .7; }
.c-start { stroke: #fff; stroke-width: 1.5; }
.c-tick { stroke: #fff; stroke-width: 1.2; }
.c-close { stroke: #fff; stroke-width: 2; }
.c-med { fill: none; stroke: #fff; stroke-width: 5; stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 0; }
.rd { fill: var(--cobalt); stroke: #fff; stroke-width: 2.5; }
.rd.up { fill: var(--signal); stroke: var(--signal); }
.c-holdbar { fill: var(--signal); }
.c-post { stroke: #fff; stroke-width: 3; stroke-dasharray: 3 5; }
.c-flag rect { fill: #fff; }
.c-flag text { font: 800 17px var(--mono) !important; fill: var(--cobalt) !important; text-anchor: middle; }
.c-flag .c-flab { font: 600 11px var(--mono) !important; fill: #fff !important; text-anchor: start; }
.how-course svg.m .c-lab, .how-course svg.m .c-axis { font-size: 17px; }
.how-course svg.m .c-flag text { font-size: 20px !important; }
.how-course:not(.run) .c-med { stroke-dashoffset: 1; }
.how-course:not(.run) .rd { opacity: 0; }
.how-course.run .c-med { transition: stroke-dashoffset 2.2s var(--ease); }
.how-course.run .rd { transition: opacity .2s steps(2) calc(1.6s + var(--d)); }
.posts { list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid #fff; background: var(--white); color: var(--ink); }
.posts li { position: relative; padding: 20px 22px 24px; border-left: 2px solid var(--ink); min-width: 0; }
.posts li:first-child { border-left: 0; }
.posts .pn { display: block; font: 900 72px/.8 var(--disp); font-stretch: 125%; color: var(--cobalt); letter-spacing: -.04em; }
.posts .p-4 .pn { color: var(--signal); }
.posts h3 { margin: 18px 0 8px; font: 900 22px/1 var(--disp); font-stretch: 118%; text-transform: uppercase; letter-spacing: -.01em; }
.posts p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink2); }
.how-more a, .how-more button { display: inline-block; padding: 8px 0; }
.how-more { display: flex; align-items: center; gap: 14px; margin: 26px 0 0; font: 600 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #fff; }

/* 3. the windows on the millimetre floor */
.windows { background: var(--plate); background-image: linear-gradient(rgba(21, 50, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 50, 255, .1) 1px, transparent 1px), linear-gradient(rgba(21, 50, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 50, 255, .045) 1px, transparent 1px); background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; border-top: 3px solid var(--ink); }
.hall-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; border-bottom: 3px solid var(--ink); }
.hall-tabs { display: flex; }
.hall-tabs button { position: relative; height: 50px; padding: 0 20px; border: 2px solid var(--ink); border-bottom: 0; margin-right: -2px; background: var(--white); color: var(--ink2); font: 900 17px/1 var(--disp); font-stretch: 118%; text-transform: uppercase; }
.hall-tabs button i { font: 600 11px var(--mono); font-style: normal; margin-left: 6px; }
.hall-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.hall-tabs button[aria-selected="true"] i { color: var(--signal); }
.hall-acts { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(340px, 380px); gap: 16px; overflow-x: auto; padding: 4px 2px 20px; scroll-snap-type: x mandatory; scrollbar-color: var(--ink) transparent; }
.rail:focus { outline: none; }
/* one window: a heavy module with an ink header, a scope, an order book and two tickets */
.win { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--white); color: var(--ink); border: 2px solid var(--ink); }
.win-band { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 12px; background: var(--ink); color: #fff; }
.win-band span { font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.win-band::after { content: ""; width: 12px; height: 12px; background: var(--sk, var(--cobalt)); }
.sk-a { --sk: var(--cobalt); } .sk-b { --sk: var(--signal); } .sk-c { --sk: #fff; } .sk-d { --sk: var(--cobalt-l); }
.win-top { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 12px 12px 10px; border-bottom: 2px solid var(--ink); }
.pic { width: 56px; height: 56px; object-fit: cover; background: var(--steel); border: 2px solid var(--ink); display: block; }
.pic.sm { width: 34px; height: 34px; border-width: 1.5px; }
.win-name { min-width: 0; }
.win-name b { display: block; font: 900 19px/1 var(--disp); font-stretch: 118%; text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-name span { display: block; margin-top: 6px; font: 500 10.5px var(--mono); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-race { text-align: right; }
.win-race b { display: block; font: 900 32px/.8 var(--disp); font-stretch: 125%; letter-spacing: -.03em; }
.win-race span { font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.win-open { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.trace-box { position: relative; padding: 10px 8px 4px; background: var(--screen); min-height: 150px; background-image: linear-gradient(rgba(238, 241, 244, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(238, 241, 244, .06) 1px, transparent 1px); background-size: 20px 20px; }
.win-open:hover .trace-box { outline: 3px solid var(--cobalt); outline-offset: -3px; }
.trace { display: block; width: 100%; height: 136px; }
.trace .tgt { stroke: var(--signal); stroke-width: 2; }
.trace .half { stroke: var(--on-ink2); stroke-width: 1; stroke-dasharray: 3 4; }
.trace .base { stroke: var(--iline); stroke-width: 1; }
.trace .med { fill: none; stroke: var(--cobalt-l); stroke-width: 2.6; stroke-linejoin: miter; }
.trace .obs { fill: var(--on-ink2); }
.trace .now { fill: var(--signal); stroke: var(--screen); stroke-width: 1.5; }
.trace text { font: 600 8.5px var(--mono); letter-spacing: .06em; fill: var(--on-ink2); }
.trace text.t { fill: var(--signal); }
.trace-empty { position: absolute; inset: 10px 8px 4px; display: grid; place-items: center; font: 500 10.5px/1.5 var(--mono); color: var(--on-ink2); text-align: center; }
.hitbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font: 500 10.5px var(--mono); color: var(--ink2); border-bottom: 1px solid var(--line); }
.hitbar .discs { display: flex; gap: 3px; }
.hitbar i { width: 12px; height: 12px; border: 1.5px solid var(--ink); background: transparent; }
.hitbar i.on { background: var(--signal); border-color: var(--signal); }
.hitbar b { color: var(--ink); font-weight: 700; }
.winrow { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.winrow > div { padding: 8px 12px; }
.winrow > div + div { border-left: 1px solid var(--line); }
.winrow .k { display: block; color: var(--ink3); }
.winrow .v { display: block; margin-top: 4px; font: 700 15px var(--mono); }
.winrow .v small { font-size: 10px; color: var(--ink3); font-weight: 500; }
.pools { padding: 10px 12px 0; }
.pool { display: grid; grid-template-columns: 34px 1fr 86px; gap: 10px; align-items: center; }
.pool + .pool { margin-top: 5px; }
.pool .side { font: 900 12px/1 var(--disp); font-stretch: 125%; }
.pool.yes .side { color: var(--cobalt); } .pool.no .side { color: var(--signal-d); }
.pool .bar { height: 14px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10%), var(--plate); border: 1.5px solid var(--ink); overflow: hidden; }
.pool .bar i { display: block; height: 100%; background: var(--cobalt); transition: width var(--mid) var(--ease); }
.pool.no .bar i { background: var(--signal); }
.pool .amt { text-align: right; font: 700 13px var(--mono); }
.pool .amt small { margin-left: 6px; font-size: 10px; color: var(--ink3); font-weight: 500; }
.odds { margin: 8px 0 0; font: 500 10.5px/1.5 var(--mono); color: var(--ink2); }
.odds b { color: var(--ink); font-weight: 700; }
.bet { margin-top: auto; padding: 12px; }
.chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.chip { height: 34px; min-width: 46px; padding: 0 8px; border: 1.5px solid var(--ink); background: var(--white); font: 600 11.5px var(--mono); transition: background var(--fast), color var(--fast); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.chip:hover:not(:disabled) { background: var(--plate); }
.chip[aria-pressed="true"]:hover { background: var(--ink); }
.chip:disabled { opacity: .35; }
.chip-in { width: 64px; height: 34px; padding: 0 8px; border: 1.5px solid var(--ink); background: var(--white); font: 600 11.5px var(--mono); }
.bet-tix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bet-tix .ticket .stub { min-width: 44px; padding: 0 6px; font-size: 12.5px; }
.bet-tix .ticket .face { padding: 7px 10px; font-size: 15px; }
.bet-tix .ticket .face small { font-size: 9.5px; }
.bet-note { margin: 10px 0 0; font: 500 10.5px/1.55 var(--mono); color: var(--ink2); }
.bet-note b { color: var(--ink); font-weight: 700; }
/* a shut window: a hazard-striped plate */
.torn { border: 2px solid var(--ink); background: var(--white); }
.torn::before { content: ""; display: block; height: 10px; background: repeating-linear-gradient(135deg, var(--ink) 0 8px, var(--signal) 8px 16px); }
.torn p { margin: 0; padding: 10px 12px 12px; font: 900 18px/1 var(--disp); font-stretch: 118%; text-transform: uppercase; }
.torn p small { display: block; margin-top: 7px; font: 500 10.5px/1.5 var(--mono); text-transform: none; color: var(--ink2); }
.rail.empty { display: block; overflow: visible; }
.win-next { justify-content: center; padding: 28px 24px; background: transparent; border: 2px dashed var(--ink); }
.win-next h3 { margin: 0 0 10px; font: 900 30px/.9 var(--disp); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; }
.win-next p { margin: 0 0 20px; color: var(--ink2); font-size: 15px; }
.win-empty { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; padding: 40px; border: 2px dashed var(--ink); background: var(--white); }
.win-empty h3 { margin: 0 0 10px; font: 900 44px/.9 var(--disp); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.03em; }
.win-empty p { margin: 0 0 22px; color: var(--ink2); max-width: 46ch; }
.we-tix { display: grid; gap: 10px; }
.we-tix .ticket { width: 100%; }
.results { display: grid; background: var(--white); border: 2px solid var(--ink); }
.res-empty { margin: 0; padding: 26px 22px; font: 500 12px var(--mono); color: var(--ink2); }
.res { display: grid; grid-template-columns: 52px 34px minmax(120px, 1fr) 118px 110px 1.4fr 130px auto; gap: 12px; align-items: center; padding: 10px 14px 10px 0; border-top: 1px solid var(--line); font: 500 11.5px var(--mono); }
.res:first-child { border-top: 0; }
.res .rn { align-self: stretch; display: grid; place-items: center; margin: -10px 0; background: var(--ink); color: #fff; font: 700 14px/1 var(--mono); }
.res .nm { font: 900 16px/1 var(--disp); font-stretch: 118%; text-transform: uppercase; }
.res .st { justify-self: start; padding: 5px 8px 4px; font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.st.hit { background: var(--cobalt); } .st.missed { background: var(--signal); color: var(--ink); } .st.cancelled, .st.refund { background: var(--steel2); color: var(--ink); }
.res .mu { color: var(--ink3); }
.res-act { display: flex; gap: 6px; justify-self: end; }
.win.skel { min-height: 480px; display: grid; place-items: center; background: transparent; border: 2px dashed var(--line2); }
.win.skel span { font: 500 11px var(--mono); color: var(--ink3); }

/* 4. the form guide on signal orange */
.form { background: var(--signal); color: var(--ink); background-image: repeating-linear-gradient(90deg, rgba(13, 15, 18, .08) 0 1px, transparent 1px 120px); border-top: 3px solid var(--ink); }
.form .eyebrow { color: var(--ink); }
.form .eyebrow::before { background: var(--ink); }
.form .sec-sub { color: var(--ink); }
.form-guide { background: var(--white); border: 3px solid var(--ink); }
.fg { width: 100%; border-collapse: collapse; }
.fg th { text-align: left; height: 38px; padding: 0 12px; font: 500 10px/1.1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--on-ink); }
.fg td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; font: 500 12.5px var(--mono); }
.fg tbody tr:last-child td { border-bottom: 0; }
.fg:not(.all) tbody tr:nth-child(n+9) { display: none; }
.fg .pos { width: 64px; font: 900 30px/1 var(--disp); font-stretch: 125%; letter-spacing: -.03em; border-right: 2px solid var(--ink); text-align: center; }
.fg tr:nth-child(1) .pos { background: var(--cobalt); color: #fff; }
.fg .who { display: flex; align-items: center; gap: 12px; }
.fg .who b { display: block; font: 700 13px var(--mono); }
.fg .who small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--ink3); }
.fg .score { font: 900 26px/1 var(--disp); font-stretch: 125%; color: var(--cobalt); }
.fg .score.neg { color: var(--signal-d); }
.fg .num { text-align: right; }
.form-discs { display: inline-flex; gap: 3px; align-items: flex-end; height: 22px; }
.form-discs i { width: 8px; height: 22px; background: var(--cobalt); }
.form-discs i.m { background: var(--signal); height: 11px; }
.form-discs i.o { background: transparent; border: 1.5px dashed var(--ink3); height: 16px; }
.silks { width: 36px; height: 36px; flex: none; display: block; }
.fg tr.you td { background: var(--cobalt-p); }
.fg-more { display: block; margin: 0; width: 100%; padding: 14px; border-top: 2px solid var(--ink); font: 700 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.fg-more:hover { background: var(--plate); }
.fg-empty { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: center; padding: 28px; }
.fg-empty .silks { width: 96px; height: 96px; }
.fg-empty p { margin: 0; color: var(--ink2); max-width: 60ch; }
.fg-empty b { display: block; margin-bottom: 8px; font: 900 30px/.95 var(--disp); font-stretch: 125%; text-transform: uppercase; color: var(--ink); }

/* 5. photo finish: the strip-chart recorder on carbon */
.finish { position: relative; padding: clamp(64px, 8vw, 110px) var(--pad); background: var(--ink); color: var(--on-ink); background-image: linear-gradient(var(--iline) 1px, transparent 1px), linear-gradient(90deg, var(--iline) 1px, transparent 1px); background-size: 120px 120px; }
.finish-print { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: clamp(24px, 4vw, 56px); align-items: end; }
.finish-strip { position: relative; height: clamp(240px, 26vw, 360px); background: var(--white); border: 3px solid var(--on-ink); overflow: hidden; }
.finish-strip canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stamp { display: inline-block; margin: 0 0 16px; padding: 7px 12px 6px; background: var(--signal); color: var(--ink); font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.finish-copy h2 { margin: 0; font: 900 clamp(46px, 6.4vw, 100px)/.84 var(--disp); font-stretch: 125%; letter-spacing: -.035em; text-transform: uppercase; color: #fff; }
.finish-nums { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0 0; border: 2px solid var(--iline); }
.finish-nums div { padding: 10px 12px; border-left: 1px solid var(--iline); } .finish-nums div:first-child { border-left: 0; }
.finish-nums dt { font: 500 9.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink2); }
.finish-nums dd { margin: 6px 0 0; font: 900 24px/1 var(--disp); font-stretch: 125%; color: #fff; }
.finish-nums div:nth-child(2) dd { color: var(--signal); } .finish-nums div:first-child dd { color: var(--cobalt-l); }
.finish-line { margin: 18px 0 0; font: 500 12px/1.6 var(--mono); color: var(--on-ink2); max-width: 44ch; }

/* ------------------------------------------------------------------ footer */
.foot-club { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: center; padding: 40px var(--pad) 36px; background: var(--ink); color: var(--on-ink); border-top: 4px solid var(--cobalt); }
.ff-brand { display: grid; grid-template-columns: 44px auto; column-gap: 14px; align-items: center; }
.ff-brand img { grid-row: 1 / span 2; }
.ff-brand b { font: 900 28px/1 var(--disp); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; }
.ff-brand span { font: 500 11px var(--mono); color: var(--on-ink2); margin-top: 4px; }
.foot-club nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-club nav a { font: 700 13px/1 var(--disp); font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; }
.foot-club nav a:hover { border-bottom-color: var(--signal); }
.ff-ca { grid-column: 1 / -1; margin: 0; padding-top: 16px; border-top: 1px solid var(--iline); font: 500 11px var(--mono); color: var(--on-ink2); overflow-wrap: anywhere; }
.ff-ca b { color: var(--on-ink); font-weight: 500; }

/* ------------------------------------------------------------------ dialogs */
dialog { color: var(--ink); }
dialog::backdrop { background: rgba(13, 15, 18, .72); }
.x { position: absolute; right: 12px; top: 12px; z-index: 2; width: 40px; height: 40px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font: 400 24px/1 var(--mono); transition: background var(--fast), color var(--fast); }
.x:hover { background: var(--ink); color: #fff; }
.slipdlg { width: min(1180px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: 0; border: 3px solid var(--ink); background: var(--white); color: var(--ink); }
.slipdlg[open], .race[open] { animation: rise var(--mid) var(--ease); }
.slip-head { padding: 24px 28px 0; background: var(--plate); border-bottom: 2px solid var(--ink); }
.slip-head .eyebrow { margin-bottom: 10px; }
.slip-head h2 { margin: 0 0 18px; font: 900 clamp(34px, 4.4vw, 58px)/.85 var(--disp); font-stretch: 125%; letter-spacing: -.035em; text-transform: uppercase; }
.slip-tabs { display: flex; }
.slip-tabs button { height: 42px; padding: 0 16px; margin-right: -2px; border: 2px solid var(--ink); border-bottom: 0; background: var(--white); font: 800 13px/1 var(--disp); font-stretch: 112%; text-transform: uppercase; color: var(--ink2); }
.slip-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.slip { display: grid; grid-template-columns: 1.1fr 1fr 1fr; }
.slip-col { padding: 22px 26px 28px; min-width: 0; }
.slip-col + .slip-col { border-left: 2px solid var(--ink); }
.slip-k { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 900 15px/1 var(--disp); font-stretch: 118%; text-transform: uppercase; }
.slip-k b { display: grid; place-items: center; width: 26px; height: 26px; background: var(--ink); color: #fff; font: 700 12px/1 var(--mono); }
.slip-k:not(:first-child) { margin-top: 24px; }
.coin-pick { display: grid; max-height: 330px; overflow: auto; border: 2px solid var(--ink); }
.cp { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 0; border-top: 1px solid var(--line); background: var(--white); text-align: left; transition: background var(--fast); }
.cp:first-child { border-top: 0; }
.cp:hover { background: var(--plate); }
.cp[aria-selected="true"] { background: var(--cobalt); color: #fff; }
.cp > span:nth-child(2) { min-width: 0; }
.cp b { display: block; font: 900 15px/1.1 var(--disp); font-stretch: 118%; text-transform: uppercase; }
.cp small { display: block; font: 500 10px var(--mono); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp .h { font: 600 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cp .h.wait { opacity: .6; }
.cp-empty { margin: 0; padding: 14px; font-size: 14px; color: var(--ink2); }
.field { display: grid; gap: 6px; margin-top: 14px; }
.field > span:first-child { font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.field input:not([type="checkbox"]) { width: 100%; height: 42px; padding: 0 12px; border: 2px solid var(--ink); background: var(--white); border-radius: 0; font: 500 13px var(--mono); }
.field input:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 0; }
.field.file input { padding: 9px 12px; height: auto; font-size: 12px; }
.field .row { display: flex; gap: 6px; }
.field .row .key { height: 42px; }
.key.ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.key.ink:hover { background: var(--cobalt); border-color: var(--cobalt); }
.check { display: flex; gap: 10px; align-items: center; margin-top: 16px; font-size: 15px; }
.check input { width: 18px; height: 18px; accent-color: var(--cobalt); }
.picks { display: flex; gap: 4px; flex-wrap: wrap; }
.pk { height: 36px; padding: 0 12px; border: 2px solid var(--ink); background: var(--white); font: 600 11.5px var(--mono); transition: background var(--fast); }
.pk:hover { background: var(--plate); }
.pk[aria-pressed="true"] { background: var(--ink); color: #fff; }
.pk:disabled { opacity: .4; }
.dial { width: 100%; max-width: 330px; margin: 0 auto; aspect-ratio: 340 / 260; touch-action: none; cursor: grab; color: var(--ink); }
.dial:active { cursor: grabbing; }
.dial svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dial .stop { cursor: pointer; }
.dial .stop circle { fill: var(--white); stroke: var(--ink); stroke-width: 2; transition: fill var(--fast); }
.dial .stop.on circle { fill: var(--signal); }
.dial .stop.past circle { fill: var(--cobalt); }
.dial .stop text { font: 700 13px var(--mono); fill: var(--ink); text-anchor: middle; }
.dial .needle { stroke: var(--ink); stroke-width: 4; }
.dial .hub { fill: var(--ink); }
.dial .read { font: 900 62px var(--disp); font-stretch: 125%; letter-spacing: -2px; fill: var(--ink); text-anchor: middle; }
.dial .readk { font: 600 11px var(--mono); letter-spacing: .1em; fill: var(--ink3); text-anchor: middle; }
.dial:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; }
.dial-note { margin: 12px 0 0; font: 500 10.5px/1.55 var(--mono); color: var(--ink2); text-align: center; }
.slip-sum { margin: 20px 0 0; border: 2px solid var(--ink); display: grid; }
.slip-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-top: 1px solid var(--line); }
.slip-sum > div:first-child { border-top: 0; }
.slip-sum dt { font: 500 10.5px var(--mono); color: var(--ink2); }
.slip-sum dd { margin: 0; font: 700 11px var(--mono); text-align: right; }
.slip-err { min-height: 18px; margin: 10px 0; font: 500 11px/1.5 var(--mono); color: var(--signal-d); }
.slip .ticket { margin-top: 4px; }

.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(480px, 100vw); height: 100svh; max-height: none; padding: 0; border: 0; border-left: 3px solid var(--ink); background: var(--white); }
.drawer[open] { animation: slide var(--mid) var(--ease); display: flex; flex-direction: column; }
.drawer-head { position: relative; padding: 22px 70px 18px 24px; background: var(--ink); color: #fff; }
.drawer-head .x { background: var(--ink); color: #fff; border-color: var(--iline); }
.drawer-head h2 { margin: 0; font: 900 34px/.9 var(--disp); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; }
.drawer-body { flex: 1; overflow: auto; padding: 20px 24px 30px; }
.mine-sum { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); margin-bottom: 16px; }
.mine-sum div { padding: 12px 14px; }
.mine-sum div + div { border-left: 2px solid var(--ink); }
.mine-sum .k { color: var(--ink2); }
.mine-sum b { display: block; margin-top: 8px; font: 900 30px/1 var(--disp); font-stretch: 125%; color: var(--cobalt); }
.mine-h { display: flex; align-items: center; gap: 8px; margin: 24px 0 10px; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.mine-h::before { content: ""; width: 8px; height: 8px; background: var(--signal); }
.tk { display: grid; grid-template-columns: 50px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.tk .side { display: grid; place-items: center; height: 40px; background: var(--signal); color: var(--ink); font: 900 12px/1 var(--disp); font-stretch: 125%; }
.tk .side.y { background: var(--cobalt); color: #fff; }
.tk .mid b { display: block; font: 900 16px/1.1 var(--disp); font-stretch: 118%; text-transform: uppercase; }
.tk .mid small { display: block; margin-top: 4px; font: 500 10px var(--mono); color: var(--ink3); }
.tk .pay { text-align: right; font: 700 13px var(--mono); }
.tk .pay small { display: block; font-size: 10px; color: var(--ink3); font-weight: 500; }
.tk .pay button { margin-top: 4px; height: 24px; padding: 0 8px; border: 1.5px solid var(--ink); background: transparent; font: 600 10px var(--mono); text-transform: uppercase; }
.mine-empty { padding: 18px; border: 2px dashed var(--line2); color: var(--ink2); font-size: 14.5px; }
.mine-empty b { display: block; margin-bottom: 6px; font: 900 20px/1 var(--disp); font-stretch: 125%; text-transform: uppercase; color: var(--ink); }
.paid { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font: 500 11.5px var(--mono); }
.paid small { color: var(--ink3); }
.race { width: min(1080px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: 0; border: 3px solid var(--ink); background: var(--white); }
.race-body { padding: 24px 28px 28px; }
.race-head { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding-right: 50px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 3px solid var(--ink); }
.race-head .pic { width: 64px; height: 64px; }
.race-head h2 { margin: 0; font: 900 clamp(30px, 4vw, 48px)/.9 var(--disp); font-stretch: 125%; letter-spacing: -.03em; text-transform: uppercase; }
.race-head p { margin: 8px 0 0; font: 500 11px var(--mono); color: var(--ink3); }
.race-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.race-grid .trace { height: 260px; }
.race-card { border: 2px solid var(--ink); background: var(--white); }
.race-card .trace-box { margin: 0; }
.race-card .hitbar { border-bottom: 0; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0; }
.facts dt, .facts dd { padding: 6px 10px; border-top: 1px solid var(--line); font: 500 11px var(--mono); }
.facts dt:first-of-type, .facts dt:first-of-type + dd { border-top: 0; }
.facts dt { color: var(--ink3); }
.facts dd { margin: 0; text-align: right; font-weight: 700; }
.tape { margin-top: 14px; }
.tape .mine-h { margin: 0 0 6px; }
.tape .row { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font: 500 11px var(--mono); }
.tape .row span:last-child { color: var(--signal-d); text-transform: uppercase; font-size: 10px; letter-spacing: .06em; }
.bettors { margin-top: 18px; max-height: 220px; overflow: auto; }
.bettors .row .y { color: var(--cobalt); font-weight: 700; } .bettors .row .n { color: var(--signal-d); font-weight: 700; }
.bettors .row { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font: 500 11.5px var(--mono); }
.race-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.race-acts .key { height: 40px; padding: 0 14px; font-size: 11px; border-width: 2px; }
.race-acts .hint { font: 500 10.5px/1.5 var(--mono); color: var(--ink3); }
.howto { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.howto .x { background: var(--ink); color: var(--on-ink); border-color: var(--iline); }
.howto .howto-head { padding: 22px 70px 18px 24px; }
.howto h2 { margin: 0; font: 900 32px/.9 var(--disp); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; color: #fff; }
.howto p { margin: 10px 0 0; font: 500 11.5px var(--mono); color: var(--on-ink2); }
.howto-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }

/* wallet picker (kit/wallet.js) */
.dlg.wpick { width: min(420px, calc(100vw - 24px)); padding: 26px 22px 22px; background: var(--white); border: 3px solid var(--ink); }
.dlg.wpick h2 { margin: 0 0 18px; font: 900 30px/.9 var(--disp); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; }
.dlg-x { position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-size: 20px; }
.wp-list { display: grid; gap: 6px; }
.wp-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); text-align: left; font: 600 12.5px var(--mono); transition: background var(--fast); }
.wp-item:hover { background: var(--plate); }
.wp-dot { width: 22px; height: 22px; background: conic-gradient(var(--cobalt) 0 25%, var(--white) 0 50%, var(--signal) 0 75%, var(--white) 0); border: 2px solid var(--ink); }
.wp-get { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; font: 500 11px var(--mono); }
.wp-cur, .wp-none { font: 500 12px var(--mono); color: var(--ink2); }
.wp-err { color: var(--signal-d); font: 500 11.5px var(--mono); }
.wp-off { margin-top: 16px; font: 600 11px var(--mono); text-transform: uppercase; border: 2px solid var(--ink); background: transparent; color: var(--ink); height: 40px; padding: 0 14px; }

/* toasts + transaction status */
.toasts { position: fixed; z-index: 60; left: 50%; bottom: 20px; transform: translateX(-50%); display: grid; gap: 8px; width: min(460px, calc(100vw - 24px)); }
.toast { background: var(--white); color: var(--ink); padding: 13px 16px 13px 18px; font: 500 12px/1.5 var(--mono); border: 2px solid var(--ink); border-left: 10px solid var(--ink); animation: rise var(--mid) var(--ease); }
.toast.ok { border-left-color: var(--cobalt); }
.toast.err { border-left-color: var(--signal); }
.txstatus { position: fixed; z-index: 61; right: 16px; top: calc(var(--strip-h) + 16px); margin: 0; background: var(--ink); color: var(--on-ink); border-left: 6px solid var(--signal); padding: 10px 14px; font: 500 11.5px var(--mono); opacity: 0; transform: translateY(-6px); transition: opacity var(--fast), transform var(--fast); pointer-events: none; max-width: 360px; }
.txstatus.on { opacity: 1; transform: none; }

@media (max-width: 1640px) {
  .home .strip-nav { display: none; }
  .home .menu-btn { display: inline-block; }
  .home .strip-ca { margin-left: auto; }
}
@media (max-width: 1380px) {
  .res { grid-template-columns: 52px 34px 1fr 100px 100px auto; }
  .res .opt2 { display: none; }
}
@media (max-width: 1100px) {
  .strip-nav { display: none; }
}
@media (max-width: 1100px) {
  .posts { grid-template-columns: 1fr 1fr; }
  .posts li:nth-child(3) { border-left: 0; }
  .posts li:nth-child(n+3) { border-top: 2px solid var(--ink); }
  .finish-print { grid-template-columns: 1fr; }
  .course-head, .runner { grid-template-columns: 52px minmax(140px, 1fr) minmax(0, 2.4fr) 110px; }
}
@media (max-width: 960px) {
  .strip-stat.opt, .strip-ca { display: none; }
  .strip-stat { margin-left: auto; }
  .rig-rail .opt { display: none; }
  .slip { grid-template-columns: 1fr 1fr; }
  .slip-coin { grid-column: 1 / -1; border-bottom: 2px solid var(--ink); }
  .slip-dial { border-left: 0 !important; }
  .win-empty { grid-template-columns: 1fr; padding: 28px 22px; }
  .race-grid { grid-template-columns: 1fr; }
  .fg thead { display: none; }
  .fg, .fg tbody, .fg tr, .fg td { display: block; }
  .fg tbody tr { display: grid; grid-template-columns: 52px 1fr auto; gap: 8px 12px; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
  .fg:not(.all) tbody tr:nth-child(n+9) { display: none; }
  .fg td { border: 0 !important; padding: 0; }
  .fg td.pos { grid-column: 1; grid-row: 1 / span 2; width: auto; align-self: stretch; display: grid; place-items: center; margin: -12px 0; border-right: 2px solid var(--ink) !important; }
  .fg td.c-who { grid-column: 2; grid-row: 1; }
  .fg td.c-score { grid-column: 3; grid-row: 1; }
  .fg td.c-form { grid-column: 2; grid-row: 2; }
  .fg td.c-rec { grid-column: 3; grid-row: 2; color: var(--ink3); text-align: right; }
  .fg td.c-hide { display: none; }
  .res { grid-template-columns: 44px 32px 1fr auto; row-gap: 6px; padding-right: 10px; }
  .res .rn { grid-row: 1 / span 2; margin: -10px 0; }
  .res .c-hide { display: none; }
  .res-act { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 760px) {
  .rig-rail span:nth-child(2) { display: none; }
  .plate-side { flex-direction: column; align-items: stretch; }
  .hero-act .cta { flex: 1; }
  .course-head { display: none; }
  .runner { grid-template-columns: 44px 1fr 96px; grid-template-rows: auto auto; row-gap: 8px; padding: 10px 0 12px; }
  .runner .ch { grid-row: 1 / span 2; margin: -10px 0 -12px; }
  .runner .tag { grid-column: 2; }
  .runner .split { grid-column: 3; grid-row: 1; margin-right: 12px; }
  .runner .track { grid-column: 2 / -1; grid-row: 2; margin-right: 12px; }
  .hero-nums div { padding: 12px 12px 14px; }
  .hero-nums dt { font-size: 9.5px; letter-spacing: .04em; }
}
@media (max-width: 640px) {
  :root { --strip-h: 52px; }
  body { font-size: 15.5px; }
  .strip { gap: 10px; }
  .strip-brand b { font-size: 15px; }
  .strip-btn[data-sound], .strip-stat, .strip-clock { display: none; }
  .menu-btn { margin-left: auto; }
  .strip-btn { padding: 0 10px; font-size: 12px; }
  .rig::before, .rig::after { display: none; }
  .rig-rail span { padding: 9px 12px; }
  .name { font-size: clamp(40px, 13.2vw, 96px); white-space: normal; line-height: .84; }
  .name span { display: block; }
  .line { font-size: 17px; }
  .tote { padding: 0 8px 8px; }
  .tote-top { height: 40px; gap: 8px; }
  .board-page { display: none; }
  .plaque { margin-right: auto; }
  .hero-act { flex-direction: column; }
  .sec-head h2 { font-size: clamp(40px, 13vw, 64px); }
  .posts { grid-template-columns: 1fr; }
  .posts li { border-left: 0 !important; border-top: 2px solid var(--ink); display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; padding: 18px 16px 20px; }
  .posts li:first-child { border-top: 0; }
  .posts .pn { grid-row: 1 / span 2; font-size: 60px; }
  .posts h3 { margin: 2px 0 6px; font-size: 19px; }
  .posts p { font-size: 14.5px; }
  .how-more { flex-wrap: wrap; font-size: 11px; }
  .chart { padding: 10px 8px 10px; }
  .rail { grid-auto-columns: calc(100vw - 2 * var(--gut) - 10px); }
  .hall-tabs button { font-size: 14px; padding: 0 12px; height: 44px; }
  .hall-acts { width: 100%; }
  .hall-acts .cta { flex: 1; padding: 0 12px; font-size: 13px; min-height: 48px; }
  .slip { grid-template-columns: 1fr; }
  .slip-head { padding: 20px 16px 0; }
  .slip-col { padding: 18px 16px 22px; }
  .slip-col + .slip-col { border-left: 0; border-top: 2px solid var(--ink); }
  .slip-tabs button { font-size: 11px; padding: 0 8px; flex: 1; }
  .cp .h { display: none; }
  .finish-strip { height: 220px; }
  .foot-club { grid-template-columns: 1fr; }
  .race-body { padding: 18px 14px 20px; }
  .race-head { grid-template-columns: 52px 1fr; }
  .race-head .pic { width: 52px; height: 52px; }
  .race-head .rn { display: none; }
  .mine-sum b { font-size: 24px; }
  .fg-empty { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .how-course:not(.run) .c-med { stroke-dashoffset: 0; }
  .how-course:not(.run) .rd { opacity: 1; }
}