:root{--bg: #1b1d23;--fg: #e8e8ec;--muted: #9a9ca6;--accent: #6cc4ff;--panel: #23252d;--line: #3a3d48}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif}canvas{display:block;width:100vw;height:100vh;cursor:crosshair;touch-action:none}.bar{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:14px;color:var(--muted);pointer-events:none}.bar>*{pointer-events:auto}.nav{display:flex;gap:8px;margin-right:auto}.nav a{padding:4px 12px;border:1px solid #444;border-radius:999px;color:var(--muted);text-decoration:none}.nav a:hover{color:var(--fg)}.nav a[aria-current=page]{border-color:var(--accent);color:var(--accent)}.bar-actions{display:flex;align-items:center;gap:8px}.bar-actions .status{font-size:12px}.bar{transition:opacity .4s}.chrome-hidden .bar{opacity:0}.chrome-hidden .bar>*{pointer-events:none}.chrome-show{position:fixed;top:12px;left:16px;z-index:11;width:34px;height:30px;padding:0;border-radius:6px;font-size:16px;line-height:1;opacity:.55;visibility:hidden}.chrome-show:hover{opacity:1}.chrome-hidden .chrome-show{visibility:visible}.settings{position:fixed;top:56px;right:16px;bottom:40px;z-index:10;width:300px;overflow-y:auto;padding:4px 16px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--muted);font-size:13px;box-shadow:0 8px 24px #00000059}.settings[hidden]{display:none}.settings-close{position:sticky;top:8px;float:right;width:28px;height:28px;margin:8px -6px 0 0;padding:0;border:none;font-size:20px;line-height:1}.settings h2{margin:16px 0 8px;color:var(--fg);font-size:12px;font-weight:600;letter-spacing:.08em}.settings label{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;cursor:pointer}.settings label[hidden]{display:none}.settings label>select,.settings label>input,.settings label>.range{margin-left:auto}.settings .help-badge{flex:none;margin-left:-4px}.settings h2 .help-badge{margin-left:6px}.settings>section>button+.help-badge{margin-left:8px}.settings .range{display:flex;align-items:center;gap:8px}.settings .range output{min-width:2em;text-align:right;color:var(--fg)}.settings input[type=range]{width:110px}.settings .credit{margin:2px 0 0;font-size:11px}.settings .credit a{color:var(--muted)}.settings>section>button{margin-top:6px}select{background:#2c2f38;color:var(--fg);border:1px solid #444;border-radius:4px;padding:3px 6px;font:inherit;max-width:170px}button{background:transparent;color:var(--muted);border:1px solid #444;border-radius:4px;padding:4px 10px;font:inherit;cursor:pointer}button:hover{color:var(--fg)}button[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}button.recording{color:#ff6b6b;border-color:#ff6b6b}button:disabled,select:disabled,input:disabled{opacity:.4;cursor:default}.status-line{position:fixed;left:16px;bottom:12px;z-index:5;display:flex;gap:16px;font-size:12px;color:var(--muted);opacity:.7;pointer-events:none}@media(max-width:640px){.bar{flex-wrap:wrap;gap:8px;padding:10px 12px}.nav{flex:1 0 100%;margin-right:0;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav a{flex:none;white-space:nowrap}.bar-actions{flex:1 0 100%;justify-content:flex-end;flex-wrap:wrap}.chrome-show{top:10px;left:12px}.settings{top:auto;left:0;right:0;bottom:0;width:auto;max-height:70vh;padding-bottom:calc(16px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:14px 14px 0 0;font-size:15px}.settings label{min-height:40px}.settings input[type=range]{width:130px}.status-line{left:12px;right:12px;flex-wrap:wrap;gap:4px 12px}}.hint{position:fixed;left:0;right:0;top:50%;margin:0;padding:0 16px;text-align:center;color:var(--muted);pointer-events:none;transition:opacity 1s}.hint.hidden{opacity:0}.help-toggle{padding:4px 12px;border:1px solid #444;border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:14px;cursor:pointer}.help-toggle:hover{color:var(--fg)}.help-toggle[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.help-on [data-help-target]{outline:1px dashed rgba(108,196,255,.45);outline-offset:3px;border-radius:4px;cursor:help}.help-popover{position:fixed;z-index:100;max-width:300px;padding:10px 12px;border:1px solid #3a3d48;border-radius:8px;background:#2a2d36;color:var(--fg);font-size:13px;line-height:1.6;text-align:left;box-shadow:0 6px 20px #0006;pointer-events:none;visibility:hidden}.help-popover.open{visibility:visible}.help-popover p,.help-sheet p{margin:4px 0 0}.help-badge{display:none;width:20px;height:20px;padding:0;border:1px solid var(--accent);border-radius:50%;background:transparent;color:var(--accent);font-size:12px;line-height:18px;cursor:pointer;vertical-align:middle}.help-on .help-badge{display:inline-block}.help-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0006;display:none}.help-backdrop.open{display:block}.help-sheet{position:fixed;left:0;right:0;bottom:0;z-index:101;padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid #3a3d48;border-radius:14px 14px 0 0;background:#2a2d36;color:var(--fg);font-size:15px;line-height:1.7;text-align:left;transform:translateY(100%);transition:transform .2s ease-out;touch-action:none}.help-sheet.open{transform:translateY(0)}.help-sheet-close{display:block;width:100%;margin-top:14px;padding:10px;border:1px solid #444;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:14px}