:root { color-scheme: light dark; --bg:#fbf8f1; --text:#1c1a14; --muted:#5f594a; --accent:#0f6b3f; --border:#ddd4bf; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b1410; --text:#eaf3ee; --muted:#9db5a9; --accent:#4fd38a; --border:#26403a; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--text);
  font: 1.05rem/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; padding:2rem 1rem; }
main { max-width:32rem; text-align:center; }
.mark { width:4rem; height:4rem; }
.ball { fill:var(--bg); stroke:var(--text); stroke-width:3; }
.ink { fill:var(--text); }
.chart { fill:none; stroke:var(--accent); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
h1 { font-size:2.4rem; margin:.6rem 0 1.4rem; letter-spacing:-.02em; }
section { padding:1rem 0; border-top:1px solid var(--border); }
.lead { font-size:1.2rem; font-weight:600; margin:0 0 .3rem; }
p { margin:.3rem 0; color:var(--muted); } .lead { color:var(--text); }
a { color:var(--accent); }