:root { --bg:#0b1020; --fg:#e6e9f2; --muted:#8e96ad; --accent:#7cc4ff; --panel:#141a2e; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: radial-gradient(1200px 600px at 50% -10%, #1b2440 0%, var(--bg) 60%); color: var(--fg); min-height:100vh; display:flex; flex-direction:column; }
header, footer { text-align:center; padding: 20px 16px; }
h1 { margin:0 0 6px; font-weight:700; letter-spacing:.5px; }
.sub { margin:0; color: var(--muted); }
main { flex:1; display:flex; flex-direction:column; align-items:center; gap: 28px; padding: 0 16px 32px; }
.wrap { background: var(--panel); border-radius: 14px; padding: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.35); max-width: 100%; }
canvas { display:block; width: 640px; max-width: 100%; height:auto; background:#070a16; border-radius: 10px; touch-action:none; }
.hud { display:flex; gap: 20px; align-items:center; justify-content:space-between; margin-top: 12px; }
.hud b { color: var(--accent); }
button { background: var(--accent); color:#06101f; border:0; border-radius: 8px; padding: 8px 18px; font-weight:700; cursor:pointer; }
button:hover { filter: brightness(1.1); }
.help { color: var(--muted); font-size: 13px; margin: 10px 0 0; text-align:center; }
.about { max-width: 640px; color: var(--muted); line-height: 1.55; }
.about h2 { color: var(--fg); font-size: 18px; margin-bottom: 6px; }
footer { color: var(--muted); font-size: 13px; }