*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#111;background:#111}
.wrap{max-width:1000px;margin:0 auto;padding:16px;color:#eee}
h1{margin:0 0 8px 0;font-size:28px;letter-spacing:.5px}
header{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.hud{display:flex;gap:16px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
canvas{width:100%;height:auto;background:#000;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.4);display:block}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.controls button{background:#222;border:1px solid #333;color:#eee;border-radius:8px;padding:8px 12px;cursor:pointer}
.controls button:hover{background:#2a2a2a}
.help{margin-top:8px;background:#0f0f0f;border:1px solid #222;border-radius:8px;padding:8px 12px}
.help summary{cursor:pointer}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
footer{margin-top:12px;color:#aaa}
@media (max-width:720px){.grid{grid-template-columns:1fr}}