:root{--bg:#0f1319;--fg:#e9f0fb;--muted:#9db0c9}*{box-sizing:border-box}html,body{background:radial-gradient(circle at 10% 10%, #1c2430 0%, var(--bg) 45%);width:100%;height:100%;color:var(--fg);margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}#hud{z-index:10;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0d1219cc;border:1px solid #2a3444;border-radius:10px;max-width:min(520px,100vw - 32px);margin:16px;padding:12px 14px;position:fixed;inset:0 auto auto 0}#hud h1{margin:0 0 8px;font-size:16px;font-weight:700}#hud p{color:var(--muted);margin:0;font-size:13px;line-height:1.4}#controls{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}#controls button{color:#e9f0fb;cursor:pointer;background:#1a2638e6;border:1px solid #36507a;border-radius:8px;padding:7px 10px;font-size:12px}#controls button:disabled{opacity:.45;cursor:default}#step-label{color:#c8d7eb;margin-top:8px;font-size:12px}canvas{display:block}