*{box-sizing:border-box;margin:0;padding:0}body{color:#f7f7f4;background:radial-gradient(circle at top,#14181d,#090b0d 62%,#050607 100%);width:100vw;height:100vh;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}#canvas{z-index:1;touch-action:none;width:100%;height:100%;position:fixed;top:0;left:0}#webcam{object-fit:cover;z-index:0;background:#020304;width:100vw;height:100vh;display:none;position:fixed;inset:0;transform:scaleX(-1)}body.webcam-mode #webcam{filter:blur(8px);display:block}#topbar{z-index:15;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#080a0c94;border:1px solid #ffffff14;border-radius:999px;gap:8px;padding:6px;display:flex;position:fixed;top:16px;left:50%;transform:translate(-50%)}body.webcam-mode #topbar{background:#080a0c6b}.mode-btn{color:#ffffff94;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;padding:8px 14px;font-size:13px;transition:background .18s,color .18s,border-color .18s}.mode-btn:hover{color:#ffffffd1}.mode-btn.active{color:#fff7f3;background:#ffffff14;border-color:#ffffff1f}#instrument-bar{z-index:15;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#080a0c94;border:1px solid #ffffff14;border-radius:999px;align-items:center;gap:8px;padding:6px;display:flex;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}.instrument-btn{color:#ffffff94;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;padding:8px 14px;font-size:13px;transition:background .18s,color .18s,border-color .18s}.instrument-btn:hover{color:#ffffffd1}.instrument-btn.active{color:#fff7f3;background:#ffffff14;border-color:#ffffff1f}#debug-panel{z-index:30;color:#ffffffdb;white-space:pre-wrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;background:#080a0cd1;border:1px solid #ffffff1f;border-radius:10px;width:min(360px,100vw - 24px);padding:12px 14px;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;position:fixed;bottom:60px;left:12px}#detune-control{border-left:1px solid #ffffff14;align-items:center;gap:4px;margin-left:2px;padding-left:8px;display:flex}.control-group{align-items:center;gap:4px;display:flex}.divider{background:#ffffff14;width:1px;height:20px;margin:0 4px}.ctrl-btn{color:#ffffff80;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:999px;justify-content:center;align-items:center;width:26px;height:26px;font-size:10px;transition:background .15s,color .15s;display:flex}.ctrl-btn:hover{color:#ffffffd9;background:#ffffff14}.ctrl-label{color:#ffffff73;text-align:center;font-variant-numeric:tabular-nums;min-width:72px;font-size:11px}.detune-btn{color:#ffffff80;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:999px;justify-content:center;align-items:center;width:30px;height:26px;font-size:11px;transition:background .15s,color .15s;display:flex}.detune-btn:hover{color:#ffffffd9;background:#ffffff14}#detune-value{color:#ffffff73;text-align:center;font-variant-numeric:tabular-nums;min-width:36px;font-size:11px}#start-overlay{z-index:9999;cursor:pointer;background:#050607eb;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#start-overlay.hidden{display:none}#start-content p{color:#f7f7f4;text-align:center;font-size:1.1rem;animation:2s ease-in-out infinite pulse-text}@keyframes pulse-text{0%,to{opacity:.5}50%{opacity:1}}.app-credit{z-index:15;color:#fff3;font-size:11px;text-decoration:none;transition:color .2s;position:fixed;bottom:22px;left:16px}.app-credit:hover{color:#ffffff80}.accidental-btn{width:30px;font-size:14px}