:root{
  --walnut:#2a160c; --walnut2:#4a2814; --amber:#f0a030; --cream:#f6e7c8; --ink:#1a0d06;
  --glow:0 0 12px rgba(240,160,48,.7);
}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(ellipse at top,#3b2010,#140904 70%);color:var(--cream);font-family:'IBM Plex Mono',monospace;min-height:100vh;overflow-x:hidden}
header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 18px;
  background:repeating-linear-gradient(92deg,rgba(255,255,255,.03) 0 2px,transparent 2px 9px),linear-gradient(90deg,var(--walnut),#7a4518 60%,#b8752a);
  border-bottom:3px solid #120804;box-shadow:0 4px 18px rgba(0,0,0,.5)}
h1{font-family:'Bungee',cursive;margin:0;font-size:clamp(18px,3vw,30px);letter-spacing:1px;text-shadow:2px 2px 0 #120804}
.tag{font-size:11px;font-weight:300;opacity:.8}
.hctl{display:flex;gap:10px;align-items:center}
select{background:#1d0f07;color:var(--cream);border:2px solid var(--amber);border-radius:10px;padding:6px 8px;font-family:inherit;font-size:12px}
.btn{font-family:'Bungee',cursive;font-size:12px;background:linear-gradient(#5a3318,#2e180b);color:var(--cream);border:2px solid #120804;border-radius:999px;padding:7px 14px;cursor:pointer;box-shadow:0 3px 0 #120804;transition:transform .08s}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #120804}
.btn.on{background:linear-gradient(#ffc25a,#d9801c);color:var(--ink);box-shadow:0 3px 0 #6a3a0a,var(--glow)}
.knobwrap{display:flex;flex-direction:column;align-items:center;font-size:9px}
.knob{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555,#111 70%);border:2px solid #000;position:relative;cursor:ns-resize;touch-action:none;box-shadow:0 2px 4px #000}
.knob .dial{position:absolute;left:50%;top:3px;width:3px;height:14px;margin-left:-1.5px;background:var(--amber);border-radius:2px;transform-origin:50% 16px}
.knob.sm{width:30px;height:30px}.knob.sm .dial{height:10px;transform-origin:50% 12px}
#rotate{display:none;text-align:center;background:var(--amber);color:var(--ink);font-family:'Bungee';padding:6px;font-size:12px}
@media (orientation:portrait) and (max-width:700px){#rotate{display:block}}
main{padding:12px;max-width:1400px;margin:0 auto}
#stage{width:100%;border-radius:18px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.6);animation:rise .6s ease-out}
canvas{display:block;width:100%;touch-action:none;cursor:pointer}
#controls{margin-top:12px;animation:rise .6s .1s ease-out backwards}
#chords{display:flex;flex-wrap:wrap;gap:6px}
.chord{font-family:'Bungee';min-width:52px;padding:8px 10px;border-radius:999px;border:2px solid #120804;background:linear-gradient(#f6e7c8,#d8bf90);color:var(--ink);cursor:pointer;box-shadow:0 3px 0 #6b4a20;font-size:13px;position:relative}
.chord:active{transform:translateY(2px);box-shadow:0 1px 0 #6b4a20}
.chord.on{background:linear-gradient(#ffc25a,#e08a20);box-shadow:0 3px 0 #6a3a0a,var(--glow)}
.chord.next{outline:3px dashed var(--amber)}
.chord .k{position:absolute;top:-6px;right:-4px;font-size:9px;background:#120804;color:var(--amber);border-radius:6px;padding:0 4px}
.chord .del{margin-left:4px;opacity:.5}
.row2{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.hint{font-size:10px;opacity:.6;font-weight:300}
#pedals{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;padding:14px;border-radius:14px;background:repeating-linear-gradient(0deg,#1a1a1a 0 6px,#222 6px 12px);border:3px solid #000;animation:rise .6s .2s ease-out backwards}
.pedal{width:118px;padding:10px 8px 12px;border-radius:12px;text-align:center;color:#fff;border:2px solid rgba(0,0,0,.6);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 4px 0 #000;position:relative}
.pedal .led{width:10px;height:10px;border-radius:50%;background:#400;margin:0 auto 6px;border:1px solid #000}
.pedal.on .led{background:#ff3b30;box-shadow:0 0 10px #ff3b30}
.pedal .nm{font-family:'Bungee';font-size:11px;margin-bottom:6px;text-shadow:1px 1px 0 #000}
.pedal .kn{display:flex;justify-content:center;gap:8px;font-size:8px;min-height:44px}
.pedal .stomp{margin-top:8px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#eee,#777 70%);border:3px solid #333;cursor:pointer}
.pedal .stomp:active{transform:translateY(2px)}
#drawer{position:fixed;top:0;right:0;height:100vh;width:min(340px,92vw);background:linear-gradient(#2a160c,#140904);border-left:3px solid var(--amber);padding:16px;overflow:auto;transform:translateX(105%);transition:transform .3s;z-index:20}
#drawer.open{transform:none}
#drawer h2{font-family:'Bungee';font-size:14px;color:var(--amber);margin:16px 0 6px}
#drawer input[type=range]{width:100%;accent-color:var(--amber)}
.x{position:absolute;right:12px;top:12px}
.mrow{display:flex;gap:8px;align-items:center}
.meter{height:40px;background:#000;border-radius:40px 40px 0 0;position:relative;overflow:hidden;margin:6px 0;border:2px solid #444}
#needle{position:absolute;left:50%;bottom:0;width:2px;height:36px;background:var(--amber);transform-origin:bottom;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
#tunerStrings{display:flex;gap:4px}
#tunerStrings button{flex:1;padding:6px 0}
.pick{width:16px;height:18px;background:var(--amber);border-radius:50% 50% 50% 50%/30% 30% 70% 70%;opacity:.2}
.pick.on{opacity:1;box-shadow:var(--glow)}
#progView{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
#progView span{padding:2px 6px;border:1px solid #6b4a20;border-radius:6px;font-size:11px}
#progView span.cur{background:var(--amber);color:var(--ink)}
#recBtn.on{background:#d22;color:#fff}
#loops div{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:11px;gap:4px}
#plug{position:fixed;inset:0;background:rgba(10,5,2,.88);display:flex;align-items:center;justify-content:center;z-index:50;cursor:pointer}
.plugin{text-align:center;animation:rise .5s}
.plugin h2{font-family:'Bungee';font-size:clamp(28px,6vw,56px);color:var(--amber);margin:10px 0}
.jack{width:20px;height:80px;margin:0 auto;background:linear-gradient(90deg,#999,#eee,#999);border-radius:4px 4px 10px 10px;animation:bob 1.2s infinite ease-in-out}
#toast{position:fixed;left:50%;bottom:60px;transform:translateX(-50%) translateY(30px);background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:12px;font-weight:600;font-size:13px;opacity:0;transition:.3s;z-index:40;max-width:90vw;text-align:center;box-shadow:0 6px 20px #000}
#toast.show{opacity:1;transform:translateX(-50%)}
#toast button{margin-left:8px}
footer{text-align:center;padding:20px;font-size:12px;opacity:.75}
footer a{color:var(--amber)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes bob{50%{transform:translateY(10px)}}