/* Odds Street (D110): the shared ground for the Gallery (/) and Floor Seat (/app/).
   EPG Bold (D27), from design/tokens.json — tests/test_odds_web.py holds every value below to it.
   Blaze is the accent and only the accent (the mark, the seat button, one hero moment); price is
   green up / red down, always with ▲/▼ and +/−. No cyan, no blue. One dark world by choice. */
@font-face{font-family:Archivo;src:url("/fonts/Archivo%5Bwdth,wght%5D.ttf") format("truetype");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:Inter;src:url("/fonts/Inter-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url("/fonts/Inter-SemiBold.ttf") format("truetype");font-weight:500 600;font-display:swap}
@font-face{font-family:Inter;src:url("/fonts/Inter-Bold.ttf") format("truetype");font-weight:700 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/JetBrainsMono-Medium.ttf") format("truetype");font-weight:400 600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/JetBrainsMono-Bold.ttf") format("truetype");font-weight:700 900;font-display:swap}

:root{
  --void:#050507; --surface:#0E0F14; --raised:#181A22; --hair:#262732; --grid:#14151C;
  --text:#F5F6FA; --muted:#B3B7C4; --faint:#8B90A0;
  --blaze:#FF7D12; --ember:#B34700; --on-blaze:#050507;
  --bull:#3DFF8F; --bear:#FF144B; --warn:#FFD23F; --violet:#C79BFF; --ema:#A97BFF; --ice:#E6EEFF;
  --bull-12:rgba(61,255,143,.12); --bear-12:rgba(255,20,75,.13); --blaze-14:rgba(255,125,18,.14); --warn-12:rgba(255,210,63,.12); --violet-14:rgba(199,155,255,.14);
  --glass:rgba(14,15,20,.8);
  --f-disp:Archivo,Inter,system-ui,sans-serif; --f-ui:Inter,"Helvetica Neue",Arial,sans-serif; --f-mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-t:18px;
  color-scheme:dark;
}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
*{box-sizing:border-box}
html{background:var(--void);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px;background-attachment:fixed}
body{background:transparent;color:var(--text);margin:0;font:14px/1.45 var(--f-ui);overflow-x:hidden;min-height:100vh}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--blaze);outline-offset:2px;border-radius:6px}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.up{color:var(--bull)} .dn{color:var(--bear)} .mut{color:var(--muted)} .fnt{color:var(--faint)}
.eyebrow{font:600 11px/1.2 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the bar */
.top{position:sticky;top:0;z-index:30;background:rgba(5,5,7,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--hair);padding:10px 16px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none}
.wm{font:900 18px/1 var(--f-disp);font-stretch:125%;letter-spacing:.02em}
.wm i{font-style:normal;color:var(--blaze)}
.pillmode{font:700 10px/1 var(--f-mono);letter-spacing:.16em;color:var(--warn);border:1px solid rgba(255,210,63,.5);padding:4px 7px;border-radius:999px;white-space:nowrap}
.top .end{margin-left:auto;display:flex;gap:8px;align-items:center}
.seatbtn{display:inline-block;background:var(--blaze);color:var(--on-blaze);font-weight:800;padding:10px 18px;border-radius:999px;box-shadow:0 0 24px -6px rgba(255,125,18,.8);transition:transform .15s;white-space:nowrap;text-decoration:none}
.seatbtn:hover{transform:translateY(-1px)}
.seatbtn.sm{padding:7px 13px;font-size:12px}
.ghost{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--hair);border-radius:999px;font-size:12px;font-weight:600;color:var(--muted);background:var(--surface);text-decoration:none;white-space:nowrap}
.ghost:hover{color:var(--text)}
.ghost[aria-pressed="true"]{color:var(--text);border-color:var(--faint)}

.panel{background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-lg);min-width:0;position:relative;overflow:hidden}
.ph{display:flex;align-items:center;gap:10px;padding:14px 18px 0}
.ph h2{font:800 15px/1 var(--f-disp);font-stretch:112%;letter-spacing:.01em;white-space:nowrap}
.ph .src{margin-left:auto;font:500 11px/1.2 var(--f-mono);color:var(--faint);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb{padding:14px 18px 18px}

.bal{font:900 clamp(40px,8vw,92px)/.95 var(--f-disp);font-stretch:125%;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.chg{font:600 15px/1.3 var(--f-mono)}
.chartbox{position:relative;height:230px;margin:8px -4px 0}
canvas.c2{display:block;width:100%;height:100%}
.prog{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.prog .track{position:relative;height:10px;border-radius:99px;background:var(--raised)}
.prog .fill{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,var(--ember),var(--blaze));box-shadow:0 0 14px rgba(255,125,18,.6);transition:width .8s}
.prog .ticks{display:flex;justify-content:space-between;font:500 11px/1 var(--f-mono);color:var(--faint)}
.prog .ticks b{color:var(--text)}

/* the labels every number carries */
.labels{display:flex;flex-wrap:wrap;gap:6px 8px}
.lbl{font:600 10.5px/1 var(--f-mono);letter-spacing:.08em;padding:5px 8px;border-radius:999px;border:1px solid var(--hair);color:var(--muted);background:rgba(5,5,7,.6);white-space:nowrap}
.lbl.money{color:var(--warn);border-color:rgba(255,210,63,.45)}
.lbl.ai{color:var(--violet);border-color:rgba(199,155,255,.45)}
.foot{max-width:1180px;margin:32px auto 0;padding:0 16px 40px;color:var(--faint);font-size:12px;display:flex;flex-direction:column;gap:8px}
.foot p{max-width:90ch}

/* glyph line-art (the animals, 2D) */
.gl *{fill:none;stroke:var(--text);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.gl .hl{stroke:var(--blaze)} .gl .hlf{fill:var(--blaze);stroke:none} .gl .tf{fill:var(--text);stroke:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:420px){ .top{gap:8px 10px} .wm{font-size:15px} .top .seatbtn.sm{padding:7px 11px} }