:root{
  --bg:#0b0d12; --bg2:#0f1220; --card:#121525; --ink:#eef2ff; --muted:#a7b0c6;
  --accent:#7df9e6; --accent2:#60a5fa; --glow:rgba(96,165,250,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 800px at 80% -10%, #13223a 0%, transparent 60%),
                     radial-gradient(1200px 800px at -10% 110%, #10231e 0%, transparent 60%),
                     linear-gradient(180deg,var(--bg),var(--bg2));
     color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;}

.shell{min-height:100%; display:grid; place-items:center; padding:24px}
.card{width:min(980px,100%); background:color-mix(in oklab, var(--card) 80%, black 20%);
      border:1px solid #1e233a; border-radius:24px; padding:28px; position:relative;
      box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02) inset;}
.card::after{content:""; position:absolute; inset:-2px; border-radius:26px; pointer-events:none;
             background:linear-gradient(120deg, transparent 0 20%, color-mix(in oklab, var(--accent) 40%, transparent) 33%, color-mix(in oklab, var(--accent2) 40%, transparent) 66%, transparent 80%);
             filter:blur(14px); opacity:.35;}

header{display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; justify-content:space-between}
h1{font-size:clamp(28px,5vw,44px); line-height:1.05; margin:0}
.sub{color:var(--muted); font-size:clamp(14px,2.5vw,16px)}

.status{display:flex; gap:12px; align-items:center; margin:14px 0 6px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
      background:#0f172a; border:1px solid #222a4a; color:var(--ink);}
.dot{width:8px; height:8px; border-radius:50%; background:conic-gradient(from 0deg, var(--accent), var(--accent2)); box-shadow:0 0 12px var(--glow)}

.grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:16px}
@media (max-width:700px){ .grid{grid-template-columns:repeat(2, minmax(0,1fr));} }

.tile{background:linear-gradient(180deg, #0c1020, #0a0d18); border:1px solid #1b2242; border-radius:18px; padding:16px; text-align:center; position:relative; overflow:hidden}
.tile::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 50% -10%, rgba(125,249,230,.1), transparent 40%), radial-gradient(120% 120% at 50% 120%, rgba(96,165,250,.08), transparent 40%)}
.label{color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-weight:600; font-size:12px}
.value{font-variant-numeric:tabular-nums; font-size:clamp(40px,10vw,72px); font-weight:800; line-height:1; margin-top:6px;
       text-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 0.01px #fff}

.year{font-weight:700; color:var(--ink)}

.cta{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.btn{appearance:none; border:1px solid #1b2242; background:#0d1326; color:var(--ink); padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:700}
.btn:hover{border-color:#2a3160}

.today{font-size:clamp(18px,4.5vw,26px); font-weight:900; letter-spacing:.02em; display:flex; align-items:center; gap:10px}
.today .burst{display:inline-block; width:10px; height:10px; border-radius:50%; background:conic-gradient(from 0deg, var(--accent), var(--accent2)); box-shadow:0 0 18px var(--glow)}

footer{margin-top:18px; color:var(--muted); font-size:13px}
a{color:var(--accent)}