:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#1d2521;background:#f4f1ea;--ink:#1d2521;--muted:#777b73;--paper:#fffdf8;--ember:#ff7a3d;--line:#d9d7ce;
  --sky-top:#cfe6ef;--sky-bottom:#f6efe0;--sun:#ffc85c;--cloud:#ffffff;--hill-far:#b9d3a6;--hill-near:#9cc28a;--road:#7b7f78;--road-edge:#5f635d;--lane:#f4f1ea;
  --tire:#1d2521;--spoke:#6b6f68;--frame:#e4572e;--feather:#fbfaf6;--outline:#1d2521;--wing-tip:#3a3f3a;--beak:#f6b73c;--pouch:#f39a4a;--leg:#f0a23a}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 80% 10%,#dfeaea,transparent 34%),#f4f1ea;color:var(--ink)}
body.dark{--ink:#f0f1e9;--muted:#a7aca0;--paper:#252a25;--line:#42483f;
  --sky-top:#0f1a2b;--sky-bottom:#2a3346;--sun:#eef0dc;--cloud:#46506a;--hill-far:#26372c;--hill-near:#1f2d24;--road:#343834;--road-edge:#4c514b;--lane:#8d9187;
  --tire:#0b0d0b;--spoke:#a9b0a4;--outline:#0b0d0b;--wing-tip:#2a2e2a;background:#1b201c}
.shell{max-width:1000px;margin:auto;padding:48px 28px}
header{display:flex;justify-content:space-between;align-items:center;gap:16px}
header h1{font-size:72px;letter-spacing:-.08em;margin:10px 0 0}
header h1 span{color:var(--ember)}
header p{color:var(--muted);margin-bottom:0}
.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:700;color:var(--muted)}
button{border:0;border-radius:999px;background:var(--ink);color:var(--paper);padding:12px 20px;font-weight:700;cursor:pointer;font-family:inherit;font-size:14px}
.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.ghost[aria-pressed="true"]{border-color:var(--ember);color:var(--ember)}
#theme{font-size:20px;padding:12px 16px;background:var(--paper);color:var(--ink);flex:none}
.stage,.stat{background:var(--paper);border:1px solid var(--line);border-radius:24px}
.stage{margin:44px 0 24px;padding:14px;overflow:hidden}
svg{display:block;width:100%;height:auto;border-radius:14px}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 8px 6px}
.speed{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;flex:1;min-width:220px}
.speed input{flex:1;accent-color:var(--ember)}
.speed output{width:40px;text-align:right;color:var(--ember)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat{padding:22px 26px}
.stat strong{display:block;font-size:40px;letter-spacing:-.05em;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.stat span:last-child{color:var(--muted);font-size:13px}

.sky-top{stop-color:var(--sky-top)}.sky-bottom{stop-color:var(--sky-bottom)}
.sun{fill:var(--sun)}
.cloud{fill:var(--cloud);opacity:.9}
.hill-far{fill:var(--hill-far)}.hill-near{fill:var(--hill-near)}
.road{fill:var(--road)}
.road-edge{stroke:var(--road-edge);stroke-width:3}
.lane{stroke:var(--lane);stroke-width:4;stroke-dasharray:36 36}
.tire{fill:none;stroke:var(--tire);stroke-width:7}
.rim{fill:none;stroke:var(--spoke);stroke-width:2}
.spoke{stroke:var(--spoke);stroke-width:1.4}
.hub{fill:var(--spoke)}
.frame{fill:none;stroke:var(--frame);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.saddle{fill:var(--outline)}
.chain{fill:none;stroke:var(--spoke);stroke-width:2.5;stroke-dasharray:4 3}
.ring{fill:none;stroke:var(--spoke);stroke-width:3}
.crank{stroke:var(--outline);stroke-width:5;stroke-linecap:round}
.pedal{fill:var(--outline)}
.far{opacity:.6}
.leg path{fill:none;stroke:var(--leg);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.leg .foot{fill:var(--leg);stroke:none}
.body,.tail{fill:var(--feather);stroke:var(--outline);stroke-width:2.5;stroke-linejoin:round}
.wing{fill:#e9e6dc;stroke:var(--outline);stroke-width:2.5;stroke-linejoin:round}
.wing-tip{fill:var(--wing-tip)}
.neck,.neck-outline{fill:none;stroke-linecap:round}
.neck{stroke:var(--feather);stroke-width:18}
.neck-outline{stroke:var(--outline);stroke-width:23}
.crest{fill:#f1d9a0;stroke:var(--outline);stroke-width:1.5}
.beak{fill:var(--beak);stroke:var(--outline);stroke-width:2;stroke-linejoin:round}
.pouch{fill:var(--pouch);stroke:var(--outline);stroke-width:2;stroke-linejoin:round}
.eye{fill:var(--outline)}
.bell-text{font-size:22px;font-weight:800;fill:var(--ember);opacity:0;transition:opacity .2s}
.bell-text.on{opacity:1}
.skeleton{display:none;fill:none;stroke:#2f7bff;stroke-width:2;stroke-dasharray:5 4}
.skeleton.on{display:inline}
.skeleton path{stroke-dasharray:none;stroke-width:2.5}
.skeleton circle[id]{fill:#2f7bff;stroke:none}

@media(max-width:700px){
  .shell{padding:28px 16px}
  header{align-items:flex-start}
  header h1{font-size:48px}
  .stage{margin-top:28px;padding:8px}
  .stats{gap:10px}
  .stat{padding:14px 14px;border-radius:18px}
  .stat strong{font-size:26px}
  .stat .eyebrow{font-size:9px;letter-spacing:.12em}
}