:root{--hud-bg: rgba(11, 15, 20, .65);--hud-fg: #e7eef7;--hud-muted: #93a4b7;--accent: #7dd3fc;--menu-bg: rgba(9, 14, 20, .92);--menu-border: rgba(125, 211, 252, .2);--menu-shadow: 0 20px 60px rgba(5, 8, 12, .45)}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;background:radial-gradient(circle at 20% 20%,#122032,#0b0f14 45%,#081019);overflow:hidden;font-family:Space Grotesk,Trebuchet MS,Arial,sans-serif}canvas{display:block;width:100vw;height:100vh}#menu-toggle{position:fixed;top:18px;right:18px;width:44px;height:44px;border-radius:10px;border:1px solid rgba(125,211,252,.25);background:#0b0f1499;color:var(--hud-fg);display:grid;place-items:center;gap:4px;cursor:pointer;z-index:4;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#menu-toggle span{width:18px;height:2px;background:var(--hud-fg);border-radius:999px;display:block;transition:transform .3s ease,opacity .3s ease}body.menu-open #menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}body.menu-open #menu-toggle span:nth-child(2){opacity:0}body.menu-open #menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}#menu-backdrop{position:fixed;inset:0;background:#070a0e8c;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:2}body.menu-open #menu-backdrop{opacity:1;pointer-events:auto}#menu{position:fixed;top:0;right:0;height:100vh;width:min(320px,80vw);padding:28px 22px;background:var(--menu-bg);border-left:1px solid var(--menu-border);box-shadow:var(--menu-shadow);transform:translate(100%);transition:transform .3s ease;z-index:3;display:flex;flex-direction:column;gap:14px}body.menu-open #menu{transform:translate(0)}.menu-title{text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--accent)}.sketch-button{text-align:left;padding:12px 14px;border-radius:12px;border:1px solid rgba(125,211,252,.15);background:#0d141de6;color:var(--hud-fg);font-size:14px;cursor:pointer;transition:border .2s ease,transform .2s ease}.sketch-button:hover{border-color:#7dd3fc73;transform:translate(-2px)}.sketch-button.active{border-color:var(--accent);box-shadow:0 0 0 1px #7dd3fc4d}.menu-footer{margin-top:auto;font-size:12px;color:var(--hud-muted)}#hud{position:fixed;top:18px;left:18px;padding:10px 12px;border:1px solid rgba(125,211,252,.25);border-radius:10px;background:var(--hud-bg);color:var(--hud-fg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1}#hud .title{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}#hud .meta{display:flex;gap:12px;font-size:12px;color:var(--hud-fg);margin-bottom:4px;flex-wrap:wrap}#hud .record-row{display:flex;align-items:center;gap:8px;margin:6px 0}#record-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(125,211,252,.35);background:#0c121acc;color:var(--hud-fg);font-size:12px;cursor:pointer}#record-toggle .record-dot{width:8px;height:8px;border-radius:50%;background:#93a4b7cc}#record-toggle.recording{border-color:#ff6b6bcc;color:#ffe8e8}#record-toggle.recording .record-dot{background:#ff6b6b;box-shadow:0 0 0 6px #ff6b6b33;animation:record-pulse 1.2s ease-in-out infinite}#record-timer{font-size:12px;color:var(--hud-muted);font-variant-numeric:tabular-nums}#hud .record-quality{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--hud-muted)}#record-quality{background:#0c121ad9;color:var(--hud-fg);border:1px solid rgba(125,211,252,.25);border-radius:8px;padding:4px 8px;font-size:11px}#sketch-controls{margin:8px 0 4px}#sketch-controls canvas{display:block}#hud .meta span:last-child{color:var(--hud-muted)}#hud .hint{font-size:12px;color:var(--hud-muted)}@keyframes record-pulse{0%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:.6}to{transform:scale(1);opacity:.9}}#pause-toggle-mobile{position:fixed;right:18px;bottom:18px;width:52px;height:52px;border-radius:16px;border:1px solid rgba(125,211,252,.3);background:#0b0f14b8;color:var(--hud-fg);font-size:18px;display:none;place-items:center;cursor:pointer;z-index:4;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#pause-toggle-mobile[aria-pressed=true]{color:var(--accent);border-color:#7dd3fc99}@media(max-width:768px){#pause-toggle-mobile{display:grid}}#gui-overlay{position:fixed;inset:0;z-index:2;pointer-events:none}#gui-overlay canvas{width:100%;height:100%;display:block;pointer-events:auto;touch-action:none}#watermark{position:fixed;right:18px;bottom:18px;padding:6px 10px;border-radius:999px;background:#0b0f148c;color:#ffffffd9;font-size:12px;letter-spacing:.08em;text-transform:lowercase;font-weight:600;z-index:1;pointer-events:none;border:1px solid rgba(125,211,252,.15);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}