*{box-sizing:border-box}body{margin:0;background:#080e1c;color:#edf5ff;font-family:system-ui,sans-serif;background-image:radial-gradient(ellipse at 50% 0,#17304a,transparent 65%);min-height:100vh}main{max-width:660px;margin:auto;padding:28px 18px}header{margin-bottom:20px}.eyebrow{font-size:11px;letter-spacing:3px;color:#80f7b9}h1{font-size:clamp(30px,6vw,44px);letter-spacing:-1.5px;margin:10px 0}p{color:#aebfd2;font-size:14px;line-height:1.6;margin:8px 0}.panel{border:1px solid #33465e;border-radius:20px;background:#0b1424;padding:16px;box-shadow:0 24px 70px #0005}.hud{display:flex;justify-content:space-between;font-size:12px;color:#80f7b9;min-height:26px;gap:8px}canvas{display:block;width:100%;height:auto;max-height:54vh;object-fit:contain;background:radial-gradient(ellipse at 50% 80%,#172a40,#080d18);border-radius:10px;touch-action:none;outline-offset:3px}.toolbar,.controls{display:flex;gap:8px;margin-top:12px}button{border:1px solid #38516a;border-radius:10px;background:#182b41;color:#ecf5ff;padding:12px 10px;font:600 13px system-ui;cursor:pointer;touch-action:none}button:hover{background:#25445f}button:focus-visible{outline:2px solid #80f7b9;outline-offset:2px}button:active,button[aria-pressed=true]{background:#2b6956}.toolbar button:first-child{background:#80f7b9;color:#082117;flex:1}.controls button{flex:1;min-height:50px}footer{text-align:center;margin-top:18px}small{color:#7f94ae;font-size:11px}@media(max-width:450px){main{padding:18px 10px}.panel{padding:10px}h1{margin:8px 0}header{margin-bottom:12px}button{font-size:12px;padding:10px 6px}canvas{max-height:49vh}}