:root{--bg: #0f1226;--panel: #1b1f3a;--ink: #eef1ff;--accent: #ffcb47;--accent2: #6be4ff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:radial-gradient(circle at 50% 0%,#232a52 0%,var(--bg) 70%);color:var(--ink);overflow:hidden}#app{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;padding:10px}.wrap{position:relative;width:400px;max-width:96vw}canvas{display:block;width:400px;max-width:96vw;height:600px;max-height:82vh;background:linear-gradient(180deg,#11163a,#0a0d22);border:2px solid #2c3566;border-radius:12px;box-shadow:0 18px 40px #00000073;touch-action:none}.hud{display:flex;justify-content:space-between;width:400px;max-width:96vw;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.5px}.hud .label{color:var(--accent2)}.hud .val{color:var(--accent)}.hint{font-size:12px;color:#9aa3d6;text-align:center;width:400px;max-width:96vw}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#060816c7;border-radius:12px;text-align:center}.overlay h1{margin:0;font-size:30px}.overlay p{margin:0;color:#c7cdf2}button{font:inherit;font-weight:700;color:#1a1330;background:var(--accent);border:none;border-radius:10px;padding:10px 22px;cursor:pointer}button:hover{filter:brightness(1.08)}.hidden{display:none}