/* Kickoff: black night under a floodlight, hot orange, Sora with Geist Mono. Sharp corners, wide type. */
:root { --bg: #07080d; --s1: #0e1017; --s2: #161923; --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .16); --text: #f2f3f7; --muted: rgba(236, 238, 245, .58); --sub: rgba(242, 243, 247, .78); --acc: #ff5a1f; --on-acc: #1a0700; --up: #3ce3ab; --down: #f23674;
  --head: "Sora", Arial, sans-serif; --font: "Sora", Arial, sans-serif; --mono: "Geist Mono", ui-monospace, monospace; --wrap: 1200px; --g: clamp(16px, 4vw, 40px); --r: 6px; --rb: 6px;
  --h1w: 600; --h1ls: -.05em; --h2w: 600; --h2ls: -.045em; --h3w: 600; --barbg: rgba(7, 8, 13, .9);
  --hero-pos: 35% 40%; --hero-shade: linear-gradient(0deg, var(--bg) 0%, rgba(7, 8, 13, .82) 32%, rgba(7, 8, 13, .2) 70%, rgba(7, 8, 13, .35) 100%) }
body { font-size: 15px }
.hero h1 { max-width: 11em }
.ends { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; border-top: 2px solid var(--acc) }
.ends > div { padding: 26px 26px 0 0 } .ends > div + div { padding-left: 26px; border-left: 1px solid var(--line) }
.ends span { color: var(--acc); font-size: 14px } .ends b { display: block; margin-top: 10px; font: 600 26px var(--head); letter-spacing: -.03em } .ends p { margin-top: 10px; color: var(--muted) }
.prog { width: 150px; height: 6px; background: var(--s2); position: relative; display: inline-block; vertical-align: middle } .prog i { position: absolute; inset: 0 auto 0 0; background: var(--acc) } .prog u { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text) }
.st { font: 600 11px var(--font); padding: 3px 8px; background: var(--s2); color: var(--muted) } .st.live { background: rgba(255, 90, 31, .14); color: var(--acc) }
@media (max-width: 860px) { .ends { grid-template-columns: 1fr } .ends > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 22px } }