:root{
  color-scheme:dark;
  --bg:#060e20; --bg2:#0b1830; --bg3:#112043; --panel:rgba(255,255,255,.045); --ink:#f2f5fb; --mute:#97a5c2; --rule:rgba(255,255,255,.11);
  --hot:#ff4d62; --ember:#ff8a3d; --gold:#ffc247; --cool:#2fd4c0; --blue:#5b8cff; --slate:#7487ad;
  --display:'Bricolage Grotesque','Segoe UI Variable Display','Segoe UI',system-ui,sans-serif;
  --body:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:60px;background:var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.num,h1,h2,h3,button,table,.ui{font-family:var(--display);font-variant-numeric:tabular-nums lining-nums}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;position:relative}
a{color:var(--ink);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
p{margin:0 0 1em}

/* top bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:30;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.bar.solid{background:rgba(6,14,32,.82);backdrop-filter:blur(12px);border-color:var(--rule)}
.bar .wrap{display:flex;align-items:center;gap:20px;height:56px;overflow:hidden}
.brand{font:800 18px var(--display);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.brand i{font-style:normal;color:var(--hot)}
.bar nav{display:flex;gap:20px;margin-left:auto}
.bar nav a{font:500 14px var(--body);color:var(--mute);text-decoration:none;white-space:nowrap}
.bar nav a:hover{color:var(--ink)}
.mini{font:700 14px var(--display);color:var(--hot);opacity:0;transition:opacity .3s;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mini.on{opacity:1}
@media (max-width:820px){.bar nav{display:none}.mini{margin-left:auto;font-size:12.5px}}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:radial-gradient(120% 80% at 80% 0%,#15295a 0%,var(--bg) 60%)}
.hero-bg{position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none}
.hero-bg svg{display:block}
.hero-bg .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.8s .3s cubic-bezier(.5,.1,.2,1) forwards}
.hero-bg .fill{opacity:0;animation:fadein 1.6s 1.6s forwards}
.hero-bg .pin{opacity:0;animation:fadein .8s 2.6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-bg .draw{animation:none;stroke-dashoffset:0}.hero-bg .fill,.hero-bg .pin{animation:none;opacity:1}}
.hero-fg{padding-top:110px;padding-bottom:230px;width:100%}
.kicker{font:600 clamp(18px,2.2vw,24px) var(--display);color:var(--mute);margin:0 0 8px;letter-spacing:-.01em}
.clock{font:800 clamp(52px,11.5vw,168px)/.92 var(--display);letter-spacing:-.05em;margin:0;white-space:nowrap;text-shadow:0 0 60px rgba(255,77,98,.35)}
.sub-clock{font:500 clamp(17px,2vw,22px) var(--body);color:var(--mute);margin:14px 0 26px}
.seg{display:inline-flex;border:1.5px solid var(--rule);border-radius:999px;padding:4px;gap:2px;background:rgba(255,255,255,.04);backdrop-filter:blur(6px)}
.seg button{font:600 14px var(--display);border:0;background:none;color:var(--ink);padding:9px 18px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.live{display:flex;gap:clamp(18px,4vw,56px);flex-wrap:wrap;margin-top:34px}
.live div b{display:block;font:800 clamp(22px,3vw,34px)/1 var(--display);letter-spacing:-.02em}
.live div b.hot{color:var(--hot)}
.live div span{font:500 14px var(--body);color:var(--mute)}
.cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:600 13px var(--display);color:var(--mute);text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.cue:after{content:'';width:1.5px;height:28px;background:linear-gradient(var(--mute),transparent)}

/* sections */
section{position:relative;padding:110px 0 90px}
section.alt{background:linear-gradient(180deg,var(--bg2),var(--bg))}
h2{font:800 clamp(34px,5.4vw,72px)/.98 var(--display);letter-spacing:-.04em;margin:0 0 14px;max-width:18ch;text-wrap:balance}
.lede{font-size:clamp(18px,1.8vw,21px);color:var(--mute);max-width:46ch;margin:0 0 40px}
.stage{background:var(--panel);border:1px solid var(--rule);border-radius:22px;padding:22px;position:relative}
.stage.flush{padding:0;overflow:hidden}
.chart{position:relative;width:100%}
.chart svg{display:block;max-width:100%;overflow:visible}
.chart text{font:600 12.5px var(--body);fill:var(--mute)}
.chart text.strong{fill:var(--ink);font-weight:700}
.chart text.big{font:800 16px var(--display);fill:var(--ink)}
.chart .hit{cursor:pointer;outline:none}
.chart .hit:focus-visible .ring{stroke:var(--gold);stroke-width:2.5}
.chart .ring{fill:none;stroke:transparent}
.tip{position:fixed;pointer-events:none;background:#fff;color:#0a1328;padding:8px 11px;border-radius:8px;font:700 13px/1.3 var(--display);display:none;z-index:50;max-width:260px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.key{display:flex;gap:18px;flex-wrap:wrap;margin:16px 0 0;font:500 14px var(--body);color:var(--mute)}
.key i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.big{font:800 clamp(40px,6vw,84px)/.95 var(--display);letter-spacing:-.04em}
.big.hot{color:var(--hot)}.big.cool{color:var(--cool)}.big.gold{color:var(--gold)}
.cap{font:500 15.5px/1.4 var(--body);color:var(--mute);max-width:30ch;margin:8px 0 0}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:40px;align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:26px}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px;margin-top:34px}

/* grow-in animation for bars (triggered when scrolled into view) */
.reveal .b{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.reveal.in .b{transform:none}
.reveal .pop{transform:scale(0);transform-box:fill-box;transform-origin:50% 50%;transition:transform .9s cubic-bezier(.2,1.1,.3,1)}
.reveal.in .pop{transform:none}
.reveal .ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.5,.1,.2,1)}
.reveal.in .ln{stroke-dashoffset:0}
.reveal .area{opacity:0;transition:opacity 1.2s .9s}
.reveal.in .area{opacity:1}
@media (prefers-reduced-motion:reduce){.reveal .b,.reveal .pop,.reveal .ln,.reveal .area{transition:none;transform:none;stroke-dashoffset:0;opacity:1}}

/* controls */
.controls{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-bottom:18px}
.rate{display:flex;align-items:center;gap:14px;font:600 15px var(--display)}
.rate output{font:800 30px var(--display);color:var(--hot);min-width:3.3ch;letter-spacing:-.02em}
input[type=range]{width:min(320px,60vw);accent-color:var(--hot);height:28px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:600 13.5px var(--display);border:1.5px solid var(--rule);background:none;color:var(--ink);padding:7px 14px;border-radius:999px;cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px;margin-top:20px;padding-top:18px;border-top:1px solid var(--rule)}
.detail b{display:block;font:800 clamp(24px,3vw,34px)/1.05 var(--display);letter-spacing:-.02em}
.detail span{font:500 14px var(--body);color:var(--mute)}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tile{background:var(--panel);border:1px solid var(--rule);border-radius:20px;padding:24px 24px 22px;position:relative;overflow:hidden}
.tile svg.ico{position:absolute;right:16px;top:16px;width:44px;height:44px;opacity:.9}
.tile .big{font-size:clamp(38px,4.6vw,58px)}
.tile p{margin:10px 0 0;font:500 15px/1.4 var(--body);color:var(--mute);max-width:24ch}
.mort{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;font:600 16px var(--display);margin-top:30px}
.mort input{font:700 16px var(--display);width:130px;padding:9px 12px;border:1.5px solid var(--rule);border-radius:10px;background:var(--bg2);color:var(--ink)}
.mort input.sm{width:76px}
.mort output{font:800 22px var(--display);color:var(--gold)}

/* table + details */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:10px 12px;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th{font-weight:600;color:var(--mute);font-size:13.5px}
tr.cool td.rate{color:var(--cool);font-weight:700}
tr.hot td.rate{color:var(--hot);font-weight:700}
details{border-top:1px solid var(--rule);padding:14px 0}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{font:700 18px var(--display);cursor:pointer}
details p,details li{font-size:16.5px;color:var(--mute)}
.fine{font:400 13.5px/1.5 var(--body);color:var(--mute);max-width:80ch}
footer{padding:0 0 70px}
.rate{flex-wrap:wrap;max-width:100%}
.rate input[type=range]{flex:1 1 180px;min-width:0;width:auto;max-width:320px}
@media (max-width:560px){.controls{gap:12px}.seg button{padding:9px 13px}.hero-fg{padding-bottom:210px}}
@media (max-width:700px){.hero-bg{height:34%}.hero-fg{padding-top:96px;padding-bottom:280px}.live{flex-direction:column;gap:14px;margin-top:26px}.live div b{font-size:24px}.hero{min-height:max(100svh,760px)}}