:root { --bg:#f3f2ef; --ink:#26262a; --soft:#8a8882; --hair:#e2e0db; --accent:#ff6b3d; --tip:#26262a; --tipink:#f6f5f2; }
:root[data-theme="dark"] { --bg:#141416; --ink:#ecebe7; --soft:#7d7c78; --hair:#262629; --accent:#ff7a4d; --tip:#ecebe7; --tipink:#141416; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#141416; --ink:#ecebe7; --soft:#7d7c78; --hair:#262629; --accent:#ff7a4d; --tip:#ecebe7; --tipink:#141416; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.55 "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing:antialiased; }
main { max-width: 880px; margin: 0 auto; padding: 40px 16px 56px; }
header { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.mark { font-weight:600; letter-spacing:-0.01em; color:inherit; text-decoration:none; }
.mark i { display:inline-block; width:9px; height:9px; background:var(--accent); margin-right:8px; transform: translateY(-1px); }
.no { color:var(--soft); font-variant-numeric: tabular-nums; }
h1 { font-size: clamp(28px, 5vw, 40px); font-weight:500; letter-spacing:-0.03em; line-height:1.1; margin: 28px 0 0; }
.stage { position:relative; aspect-ratio: 16/10; margin-top: 8px; }
.stage canvas { position:absolute; inset:0; width:100%; height:100%; display:block; outline:none; cursor:pointer; touch-action: manipulation; }
.stage canvas:focus-visible { box-shadow: 0 0 0 1px var(--hair); border-radius: 12px; }
.tip { position:absolute; pointer-events:none; background:var(--tip); color:var(--tipink); font-size:12px; padding:5px 9px; border-radius:999px; white-space:nowrap; opacity:0; transform: translate(-50%, calc(-100% - 12px)); transition: opacity .15s; }
.tip.on { opacity:1; }
.stats { display:grid; grid-template-columns: repeat(4, 1fr); border-top:1px solid var(--hair); }
.stat { padding: 14px 0 0; }
.stat b { display:block; font-size: 24px; font-weight:500; letter-spacing:-0.02em; font-variant-numeric: tabular-nums; }
.stat span { color:var(--soft); font-size:12px; }
.stat.key b { color:var(--accent); }
p.lede { color:var(--soft); max-width: 60ch; margin: 28px 0 0; }
footer { display:flex; flex-wrap:wrap; gap: 6px 18px; color:var(--soft); font-size:12px; margin-top: 18px; }
footer em { font-style:normal; color:var(--ink); }
button.theme { all:unset; cursor:pointer; color:var(--soft); font-size:12px; }
button.theme:hover, button.theme:focus-visible { color:var(--ink); }
@media (max-width: 560px) { .stage { aspect-ratio: 1/1; } .stats { grid-template-columns: repeat(2, 1fr); } }
.embed body { background: transparent; }
.embed main { max-width: none; padding: 0; }
.embed header, .embed h1, .embed .stats, .embed .lede, .embed footer { display: none; }
.embed .stage { aspect-ratio: auto; height: 100vh; margin: 0; }
.controls { display:flex; flex-wrap:wrap; gap:8px; margin: 4px 0 18px; }
.controls button { font: 13px/1 inherit; font-family: inherit; color: var(--ink); background: transparent; border: 1px solid var(--hair); border-radius: 999px; padding: 11px 16px; cursor: pointer; min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: border-color .15s, background .15s; }
.controls button:hover, .controls button:focus-visible { border-color: var(--soft); outline: none; }
.controls button:active { background: var(--hair); }
.controls button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.controls button.primary:active { filter: brightness(.92); }
.embed .controls { display: none; }