*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}button,.key,.pad,.fret,.loopchip{touch-action:manipulation}:root{--bg: #120b0e;--gold: #ffb03a;--gold-dim: #b98336;--cream: #f4e6cf;--line: #3a2430;--panel: #1c1218}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--cream);font-family:ui-monospace,SF Mono,Menlo,monospace;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-text-size-adjust:none}body{display:flex;flex-direction:column;height:100dvh}.hidden{display:none!important}#stage{position:relative;flex:1 1 auto;min-height:0}#hall{position:absolute;inset:0;width:100%;height:100%;display:block}#hud{position:relative;display:flex;align-items:center;gap:10px;padding:calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left));background:linear-gradient(#1d1016,#150d11);border-bottom:1px solid var(--line);z-index:5}#logo{font-family:Didot,Bodoni MT,Playfair Display,Georgia,serif;font-size:19px;letter-spacing:.42em;color:var(--gold);text-shadow:0 0 18px #ffb03a55;margin-right:auto}#copybtn{background:none;border:1px solid var(--gold-dim);color:var(--gold);border-radius:6px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}#status{display:flex;align-items:center;gap:6px;font-size:11px;color:#c9a17a}#statdot{width:8px;height:8px;border-radius:50%;background:#5a3b46}#statdot.on{background:#7cff9a;box-shadow:0 0 8px #7cff9a}#controls{z-index:5;background:var(--panel);border-top:1px solid var(--line);padding:5px calc(8px + env(safe-area-inset-right)) 5px calc(8px + env(safe-area-inset-left));display:flex;flex-direction:column;gap:5px}.crow{display:flex;align-items:center;gap:8px;min-height:34px}.tbtn{background:#241620;border:1px solid var(--line);color:var(--cream);border-radius:7px;min-width:34px;height:32px;font:inherit;font-size:14px;cursor:pointer}.tbtn.on{border-color:var(--gold);color:var(--gold);box-shadow:0 0 10px #ffb03a33 inset}.tbtn:disabled{opacity:.35}#transport{display:flex;align-items:center;gap:6px}#transport.conducting #bpmval{color:var(--gold)}#bpmval{font-size:17px;min-width:40px;text-align:center}.bpmlbl{font-size:10px;color:#a07d5e}#beatdots{display:flex;gap:5px;margin-left:4px}#beatdots i{width:8px;height:8px;border-radius:50%;background:#38222e;transition:background 60ms}#beatdots i.lit{background:var(--cream)}#beatdots i.accent{background:var(--gold);box-shadow:0 0 8px var(--gold)}#recwrap{display:flex;align-items:center;gap:6px;position:relative}#recbtn{color:#ff5c5c;font-size:16px}#recbtn.armed{animation:blink .5s infinite alternate;border-color:#ff5c5c}#recbtn.recording{background:#ff5c5c;color:#fff;border-color:#ff5c5c}@keyframes blink{0%{opacity:1}to{opacity:.4}}#recbarwrap{width:56px;height:5px;background:#38222e;border-radius:3px;overflow:hidden}#recbar{height:100%;width:0;background:#ff5c5c}#insttabs{display:flex;gap:5px}.itab{background:#241620;border:1px solid var(--line);border-radius:7px;width:38px;height:32px;font-size:16px;cursor:pointer}.itab.on{border-color:var(--gold);box-shadow:0 0 10px #ffb03a44;background:#35202b}#looprack{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}#looprack::-webkit-scrollbar{display:none}.loopchip{display:flex;align-items:center;gap:4px;flex:0 0 auto;border:1px solid var(--c);border-radius:7px;padding:3px 7px;font-size:11px;color:var(--cream);background:#241620;box-shadow:0 0 8px color-mix(in srgb,var(--c) 30%,transparent);cursor:pointer;animation:chipin .2s ease-out}@keyframes chipin{0%{transform:scale(.6);opacity:0}}.loopchip.muted{opacity:.35;box-shadow:none}.loopchip .lglyph{font-size:13px}.loopchip .llen{color:var(--c);font-size:10px}.loopchip .lx{color:#ff8484;margin-left:2px}#instpanel{z-index:5;height:min(30vh,230px);background:var(--panel);border-top:1px solid var(--line);padding:4px calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));display:flex;flex-direction:column;gap:4px;touch-action:none}.octbar{display:flex;align-items:center;gap:8px;justify-content:center;height:26px;flex:0 0 auto}.octbtn{background:#241620;border:1px solid var(--line);color:var(--cream);border-radius:6px;width:44px;height:24px;font:inherit;cursor:pointer}.octlbl{font-size:10px;color:#a07d5e;letter-spacing:.2em}.keys{display:flex;flex:1;min-height:0;gap:2px;padding-top:2px}.key.white{flex:1;position:relative;background:linear-gradient(#fdf6e8,#e8dcc4);border-radius:0 0 5px 5px;border:1px solid #b4a488}.key.white.down{background:linear-gradient(#ffd98a,#f0b95a)}.key.white:after{content:attr(data-label);position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:9px;color:#9a7f4f}.key.black{position:absolute;top:0;right:-31%;width:62%;height:60%;background:linear-gradient(#3a3136,#14100f);border-radius:0 0 4px 4px;z-index:2;border:1px solid #000}.key.black.down{background:linear-gradient(#8a6a3a,#4c3418)}.padgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:5px;flex:1;min-height:0}.pad{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#322032,#1e1420);border:1px solid #4a3050;border-radius:9px;font-size:11px;color:#cbb4d6;letter-spacing:.08em;cursor:pointer}.pad.hit{animation:padhit .18s ease-out}@keyframes padhit{0%{background:#ffb03a;color:#1a0d12;box-shadow:0 0 22px #ffb03a}to{background:radial-gradient(circle at 50% 35%,#322032,#1e1420)}}.therfield{position:relative;flex:1;min-height:0;border-radius:10px;background:radial-gradient(120% 90% at 50% 110%,#3a1a2e 0%,transparent 60%),linear-gradient(90deg,#17101c,#241428 50%,#17101c);border:1px solid #4a3050;overflow:hidden;cursor:crosshair}.therline{position:absolute;top:0;bottom:0;width:1px;background:#ffffff18;pointer-events:none}.therline:after{content:attr(data-label);position:absolute;bottom:3px;left:3px;font-size:9px;color:#8f6f9e}.therdot{position:absolute;width:26px;height:26px;margin:-13px;border-radius:50%;background:radial-gradient(circle,#ffe3ae,#ffb03a88 60%,transparent 70%);box-shadow:0 0 24px #ffb03a;opacity:0;pointer-events:none;transition:opacity .15s}.thersnap{position:absolute;top:6px;right:6px;background:#241620cc;border:1px solid var(--line);color:#8f6f9e;font:inherit;font-size:10px;border-radius:6px;padding:3px 7px;letter-spacing:.15em;cursor:pointer;z-index:3}.thersnap.on{color:var(--gold);border-color:var(--gold-dim)}.frets{display:flex;flex:1;min-height:0;gap:3px}.fret{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:linear-gradient(#2c1c14,#191009);border:1px solid #54382a;border-radius:7px;color:#d8b892;font-size:12px;cursor:pointer}.fret small{font-size:9px;color:#8a6a4d}.fret.down{background:linear-gradient(#7a4c22,#4c2f14);color:#ffe2b0}.audpanel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.audhint{font-size:12px;color:#a07d5e}.bigclap{font:inherit;font-size:20px;background:#35202b;color:var(--cream);border:1px solid var(--gold-dim);border-radius:12px;padding:14px 30px;cursor:pointer}.bigclap:active{background:var(--gold);color:#1a0d12}.overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:radial-gradient(90% 90% at 50% 20%,#251219,#120b0e 70%);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.panel{display:flex;flex-direction:column;gap:14px;align-items:center;max-width:340px;width:90%}.title{font-family:Didot,Bodoni MT,Playfair Display,Georgia,serif;font-size:52px;letter-spacing:.35em;margin-right:-.35em;color:var(--gold);text-shadow:0 0 40px #ffb03a66}.sub{font-size:12px;color:#c9a17a;text-align:center}#nick{width:100%;background:#241620;border:1px solid var(--line);border-radius:8px;color:var(--cream);font:inherit;font-size:16px;padding:10px 12px;text-align:center;outline:none}#nick:focus{border-color:var(--gold-dim)}#instpick{display:flex;gap:8px;width:100%}.ipick{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:#241620;border:1px solid var(--line);border-radius:9px;color:#c9a17a;font:inherit;font-size:10px;padding:8px 2px;cursor:pointer}.ipick b{font-size:20px}.ipick.on{border-color:var(--gold);color:var(--gold);box-shadow:0 0 12px #ffb03a33}.big{width:100%;background:var(--gold);color:#1a0d12;border:none;border-radius:9px;font:inherit;font-size:16px;font-weight:700;letter-spacing:.08em;padding:12px;cursor:pointer}.hint{font-size:11px;color:#8a6a4d;text-align:center;line-height:1.7}#bigmsg{font-family:Didot,Bodoni MT,Georgia,serif;font-size:40px;letter-spacing:.2em;color:var(--gold)}#submsg{font-size:13px;color:#c9a17a}@media(max-width:520px){#logo{font-size:16px;letter-spacing:.3em}#hud{gap:8px}#controls{padding-left:calc(5px + env(safe-area-inset-left));padding-right:calc(5px + env(safe-area-inset-right))}.crow{gap:5px;min-height:30px}.tbtn{min-width:30px;height:30px;font-size:12px;border-radius:6px}#recbtn{font-size:13px}#bpmval{font-size:14px;min-width:30px}.bpmlbl{display:none}#transport{gap:4px}#beatdots{gap:4px;margin-left:2px}#beatdots i{width:6px;height:6px}#recwrap{gap:4px}#recbarwrap{width:32px}#insttabs{gap:4px}.itab{width:32px;height:30px;font-size:14px;border-radius:6px}.loopchip{padding:2px 6px;font-size:10px}.octbtn{width:38px;height:22px}.octbar{height:22px;gap:6px}#instpanel{height:min(34vh,220px)}}#toast{position:fixed;left:50%;top:calc(52px + env(safe-area-inset-top));transform:translate(-50%);background:#241620ee;border:1px solid var(--gold-dim);color:var(--cream);border-radius:8px;padding:8px 16px;font-size:12px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:20;white-space:nowrap}