:root{--metal-hi: #d9d6d3;--metal-1: #cdc9c4;--metal-2: #bfbbb5;--metal-3: #b3aea8;--metal-4: #a6a099;--metal-5: #969089;--metal-6: #88827a;--ink: #817b74;--ink-2: #938d86;--panel: #b3aea8;--panel-2: #bfbbb5;--wood-1: #8a5a2c;--wood-2: #63391a;--wood-3: #3a220c;--wood-grain: repeating-linear-gradient( 90deg, rgba(255, 220, 170, .09) 0 1px, rgba(0, 0, 0, .16) 1px 3px, rgba(255, 220, 170, .05) 3px 4px, rgba(0, 0, 0, .07) 4px 7px, rgba(255, 220, 170, .11) 7px 8px, rgba(0, 0, 0, .12) 8px 13px );--line: rgba(52, 34, 18, .34);--line-strong: rgba(44, 28, 14, .48);--edge-hi: rgba(255, 250, 242, .48);--edge-lo: rgba(46, 30, 16, .4);--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");--brush: var(--grain), repeating-linear-gradient( 90deg, rgba(255, 252, 245, .05) 0 1px, rgba(40, 26, 12, .04) 1px 2px, rgba(255, 252, 245, .022) 2px 3px, rgba(40, 26, 12, .018) 3px 4px ), linear-gradient(112deg, rgba(255, 248, 234, .13), rgba(255, 248, 234, 0) 46%), radial-gradient(120% 90% at 8% -10%, rgba(255, 246, 228, .16), rgba(255, 246, 228, 0) 62%);--bevel-up: inset 0 1px 0 var(--edge-hi), inset 1px 0 0 rgba(255, 252, 245, .16), inset -1px 0 0 rgba(46, 30, 16, .2), inset 0 -1px 0 var(--edge-lo);--bevel-down: inset 0 2px 5px rgba(38, 24, 12, .46), inset 0 -1px 0 rgba(255, 252, 245, .18);--screen: #2d2b28;--screen-2: #1f1d1b;--screen-3: #191714;--amber: #f2a33c;--amber-soft: #ffcd85;--amber-deep: #a86a17;--cyan: #4fd6e0;--green: #7bd88f;--red: #e2564a;--text: #1a1917;--text-dim: #595550;--head-w: 132px;--cell: 34px;--cell-gap: 4px;--radius: 6px;--wood-w: 16px;--wood-h: 10px;font-family:Helvetica Neue,Hiragino Kaku Gothic ProN,Yu Gothic,Noto Sans JP,sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--ink);color:var(--text);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}#app{height:100%}.dm-app{display:flex;flex-direction:column;height:100dvh;min-height:100%;padding:0 var(--wood-w) var(--wood-h);background:var(--wood-grain) left / var(--wood-w) 100% repeat-y,linear-gradient(90deg,var(--wood-3) 0 1px,var(--wood-1) 1px,var(--wood-2) 60%,var(--wood-3)) left / var(--wood-w) 100% no-repeat,var(--wood-grain) right / var(--wood-w) 100% repeat-y,linear-gradient(90deg,var(--wood-3),var(--wood-2) 40%,var(--wood-1) calc(100% - 1px),var(--wood-3) calc(100% - 1px)) right / var(--wood-w) 100% no-repeat,linear-gradient(180deg,var(--wood-3) 0 1px,var(--wood-1) 1px,var(--wood-2) 70%,var(--wood-3)) bottom / 100% var(--wood-h) no-repeat,var(--brush),linear-gradient(176deg,#a9a094,#968d80 40%,#877e71 72%,#7c7367);background-origin:border-box}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#00000038}::-webkit-scrollbar-thumb{background:var(--metal-2);border-radius:3px;border:2px solid transparent;background-clip:content-box;box-shadow:var(--bevel-up)}::-webkit-scrollbar-thumb:hover{background:var(--metal-1);background-clip:content-box}.topbar{display:flex;align-items:center;gap:.7rem;padding:.5rem .9rem;padding-top:max(.5rem,env(safe-area-inset-top));border-bottom:1px solid var(--line-strong);background:var(--brush),linear-gradient(180deg,var(--metal-2),var(--metal-4));box-shadow:inset 0 1px 0 var(--edge-hi);flex:none}.brand{display:flex;align-items:center;gap:.55rem;min-width:0}.brand-mark{width:30px;height:30px;border-radius:4px;flex:none;position:relative;background:radial-gradient(circle at 50% 38%,#56524d,#292622 70%);box-shadow:0 0 0 1px #00000080,inset 0 1px #ffffff2e,0 2px 5px #00000073;overflow:hidden}.brand-mark:before{content:"";position:absolute;inset:6px 5px auto;height:8px;border-radius:50%;background:linear-gradient(180deg,var(--amber-soft),var(--amber-deep))}.brand-mark:after{content:"";position:absolute;inset:13px 5px 5px;border-radius:0 0 3px 3px;background:repeating-linear-gradient(90deg,rgba(242,163,60,.5) 0 2px,transparent 2px 7px),linear-gradient(180deg,#5d5852,#2f2b26)}.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;overflow:hidden}.brand-text strong{font-size:.92rem;letter-spacing:.03em;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.3)}.brand-text small{font-size:.66rem;color:var(--text-dim);white-space:nowrap}.kit-select{appearance:none;max-width:min(42vw,220px);text-overflow:ellipsis;color:var(--amber);border:1px solid rgba(0,0,0,.6);border-radius:3px;box-shadow:var(--bevel-down),0 1px 0 var(--edge-hi);padding:.38rem 1.9rem .38rem .85rem;font-size:.82rem;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--amber) 50%),linear-gradient(135deg,var(--amber) 50%,transparent 50%),linear-gradient(180deg,var(--screen-2),var(--screen));background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%,0 0;background-size:5px 5px,5px 5px,100% 100%;background-repeat:no-repeat}.kit-select option{background:var(--screen);color:#ffd9a6}.status{flex:1;min-width:0;font-size:.74rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meter{width:84px;height:8px;border-radius:2px;background:var(--screen-2);border:1px solid rgba(0,0,0,.55);box-shadow:var(--bevel-down);overflow:hidden;flex:none}.meter-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,var(--green),var(--amber) 72%,var(--red));transition:transform .06s linear}.icon-btn{display:inline-flex;align-items:center;gap:.35rem;border-radius:3px;border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--metal-1),var(--metal-3));box-shadow:var(--bevel-up);color:var(--text);padding:.35rem .7rem;cursor:pointer;font-size:.74rem;font-weight:600;text-shadow:0 1px 0 rgba(255,255,255,.26);flex:none}.icon-btn:hover{background:linear-gradient(180deg,var(--metal-hi),var(--metal-2))}.icon-btn:active{background:linear-gradient(180deg,var(--metal-5),var(--metal-3));box-shadow:var(--bevel-down)}.icon-btn.danger{color:#7a1c17}.icon-btn.danger:hover{background:linear-gradient(180deg,#dcb4b0,#c49b97)}.stop-icon{width:10px;height:10px;background:currentColor;border-radius:2px}.transport{display:flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-bottom:1px solid var(--line-strong);background:var(--brush),linear-gradient(180deg,var(--metal-3),var(--metal-5));box-shadow:inset 0 1px 0 var(--edge-hi);flex:none;overflow-x:auto;scrollbar-width:thin}.play-btn,.rec-btn,.mode-btn,.tap-btn,.pattern-btn,.stepper-btn{border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--metal-1),var(--metal-3));box-shadow:var(--bevel-up);color:var(--text);cursor:pointer;font-family:inherit;font-weight:600;text-shadow:0 1px 0 rgba(255,255,255,.24)}.play-btn{width:46px;height:38px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;flex:none}.play-icon{width:0;height:0;border-left:14px solid #1c6b34;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px}.play-btn.playing{background:linear-gradient(180deg,var(--screen),var(--screen-2));box-shadow:var(--bevel-down),0 0 12px #7bd88f66}.play-btn.playing .play-icon{border:none;width:14px;height:14px;background:var(--green);box-shadow:0 0 9px #7bd88fd9;border-radius:2px;margin:0}.rec-btn{display:inline-flex;align-items:center;gap:.35rem;height:38px;padding:0 .7rem;border-radius:3px;font-size:.75rem;letter-spacing:.08em;flex:none}.rec-dot{width:10px;height:10px;border-radius:50%;background:#7a746d;box-shadow:inset 0 1px 2px #0009}.rec-btn.active{background:linear-gradient(180deg,var(--screen),var(--screen-2));color:#ff8079;text-shadow:0 0 8px rgba(226,86,74,.8);box-shadow:var(--bevel-down)}.rec-btn.active .rec-dot{background:var(--red);box-shadow:0 0 10px #e2564ad9;animation:pulse 1.1s infinite}@keyframes pulse{50%{opacity:.35}}.tempo{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .4rem;border:1px solid rgba(0,0,0,.6);border-radius:3px;background:linear-gradient(180deg,var(--screen-2),var(--screen));box-shadow:var(--bevel-down),0 1px 0 var(--edge-hi);flex:none}.tempo-label{font-size:.62rem;color:#ffcd8599;letter-spacing:.1em}.bpm-input,.stepper-input,.song-repeats{width:3.4rem;background:transparent;border:none;color:var(--amber);font-size:1rem;font-variant-numeric:tabular-nums;text-align:center;font-family:inherit}.bpm-input:focus,.stepper-input:focus,.song-repeats:focus{outline:1px solid var(--amber);border-radius:3px}.bpm-input::-webkit-outer-spin-button,.bpm-input::-webkit-inner-spin-button,.stepper-input::-webkit-outer-spin-button,.stepper-input::-webkit-inner-spin-button{appearance:none;margin:0}.stepper-btn{width:28px;height:28px;border-radius:3px;font-size:.85rem;line-height:1}.tap-btn{height:28px;padding:0 .55rem;border-radius:3px;font-size:.66rem;letter-spacing:.08em}.pattern-bank{display:inline-flex;gap:.25rem;flex:none}.pattern-btn{width:32px;height:38px;border-radius:3px;font-size:.85rem;position:relative;color:var(--text-dim)}.pattern-btn.filled{color:var(--text)}.pattern-btn.filled:after{content:"";position:absolute;left:50%;bottom:5px;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background:var(--amber-deep)}.pattern-btn.active{background:linear-gradient(180deg,var(--screen),var(--screen-2));color:var(--amber);text-shadow:0 0 8px rgba(242,163,60,.75);box-shadow:var(--bevel-down)}.pattern-btn.active:after{background:var(--amber);box-shadow:0 0 6px var(--amber)}.mode-btn{height:38px;padding:0 .7rem;border-radius:3px;font-size:.7rem;letter-spacing:.1em;flex:none;color:var(--text-dim)}.mode-btn.active{background:linear-gradient(180deg,var(--screen),var(--screen-2));color:var(--cyan);text-shadow:0 0 8px rgba(79,214,224,.7);box-shadow:var(--bevel-down)}.work{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.stage{flex:1 1 auto;min-height:0;display:flex;padding:.55rem .55rem 0}.grid-wrap{flex:1;min-width:0;display:flex;background:var(--brush),linear-gradient(180deg,var(--metal-3),var(--metal-5));border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--bevel-up);overflow:hidden}.grid-scroll{flex:1;min-width:0;overflow:auto;padding-bottom:.4rem;scrollbar-width:thin}.grid-ruler,.grid-track{display:flex;align-items:stretch;width:max-content;min-width:100%}.grid-ruler{position:sticky;top:0;z-index:3;background:var(--brush),linear-gradient(180deg,var(--metal-3),var(--metal-4))}.track-head{position:sticky;left:0;z-index:2;width:var(--head-w);flex:none;display:flex;align-items:center;gap:.3rem;padding:0 .35rem 0 .1rem;background:var(--brush),linear-gradient(90deg,var(--metal-4) 78%,var(--metal-5));border-right:1px solid var(--line)}.ruler-head{background:var(--brush),linear-gradient(180deg,var(--metal-3),var(--metal-4))}.ruler-title{font-size:.6rem;color:var(--text-dim);letter-spacing:.16em;padding-left:.35rem;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.24)}.track-name{flex:1;min-width:0;display:flex;align-items:baseline;gap:.35rem;background:transparent;border:none;color:var(--text);text-align:left;cursor:pointer;padding:.2rem .25rem;border-radius:3px;font-family:inherit}.track-name:hover{background:#ffffff38}.track-short{font-size:.72rem;color:#6b3f06;font-weight:700;letter-spacing:.06em;width:1.8rem;flex:none;text-shadow:0 1px 0 rgba(255,255,255,.24)}.track-full{font-size:.68rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 rgba(255,255,255,.2)}.track-tools{display:flex;align-items:center;gap:.15rem;flex:none}.track-led{width:6px;height:16px;border-radius:2px;background:#181612;box-shadow:inset 0 0 0 1px #ffffff0f;position:relative;overflow:hidden}.track-led:after{content:"";position:absolute;inset:auto 0 0;height:calc(var(--peak, 0) * 100%);background:linear-gradient(180deg,var(--red),var(--amber) 45%,var(--green));transition:height .08s linear}.mini-btn{width:20px;height:20px;border-radius:3px;border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--metal-1),var(--metal-3));box-shadow:var(--bevel-up);color:var(--text-dim);font-size:.6rem;font-weight:700;cursor:pointer;font-family:inherit;padding:0}.mini-btn:hover{background:linear-gradient(180deg,var(--metal-hi),var(--metal-2))}.mini-btn.mute.active{background:linear-gradient(180deg,#ff8079,var(--red));color:#2a0b09;border-color:var(--red)}.mini-btn.solo.active{background:linear-gradient(180deg,#8be9f0,var(--cyan));color:#06181a;border-color:var(--cyan)}.track-steps{display:flex;gap:var(--cell-gap);padding:2px .5rem 2px 0}.grid-track{padding:1px 0}.grid-track.selected .track-head{background:var(--brush),linear-gradient(90deg,#c9b389 78%,#b09a72);box-shadow:inset 0 0 0 1px #f2a33c8c}.grid-track.muted .track-steps{opacity:.4}.grid-track.poly .track-short:after{content:"⟲";margin-left:2px;color:#0d5f66}.ruler-cell{width:var(--cell);flex:none;text-align:center;font-size:.56rem;color:#15181b73;font-variant-numeric:tabular-nums;padding-bottom:2px;text-shadow:0 1px 0 rgba(255,255,255,.2)}.ruler-cell.beat{color:var(--text);font-weight:700}.ruler-cell.playing{color:#7a4a06;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.3)}.ruler-cell.hidden,.step-cell.hidden{display:none}.step-cell{width:var(--cell);height:var(--cell);flex:none;border-radius:5px;border:1px solid hsl(var(--pad-hue, 30) var(--pad-sat, 12%) 62% / .17);background:radial-gradient(120% 100% at 30% 0%,#fff4e21f,#fff4e200 60%),linear-gradient(180deg,hsl(var(--pad-hue, 30) calc(var(--pad-sat, 12%) * .4) var(--pad-l-top, 20%)),hsl(var(--pad-hue, 30) calc(var(--pad-sat, 12%) * .4) var(--pad-l-bot, 11%)));box-shadow:inset 0 1px #fff8ec29,0 1px 2px #22150a6b;cursor:pointer;padding:0;position:relative;touch-action:manipulation;transition:background .08s linear,box-shadow .08s linear}.step-cell.beat{background:radial-gradient(120% 100% at 30% 0%,#fff6e638,#fff6e600 62%),linear-gradient(180deg,hsl(var(--pad-hue, 30) calc(var(--pad-sat, 12%) * .4) calc(var(--pad-l-top, 20%) + 3%)),hsl(var(--pad-hue, 30) calc(var(--pad-sat, 12%) * .4) calc(var(--pad-l-bot, 11%) + 2.5%)));border-color:hsl(var(--pad-hue, 30) var(--pad-sat, 12%) 70% / .28)}.step-cell:hover{border-color:hsl(var(--pad-hue, 30) 80% 66% / .6)}.step-cell.on{--lit: calc(.52 + var(--v, .7) * .48);background:linear-gradient(180deg,hsl(var(--pad-hue, 30) calc(34% + var(--lit) * 28%) calc(59% + var(--lit) * 27%)),hsl(var(--pad-hue, 30) calc(30% + var(--lit) * 24%) calc(45% + var(--lit) * 25%)));border-color:hsl(var(--pad-hue, 30) 45% calc(40% + var(--lit) * 10%) / .6);box-shadow:inset 0 1px #ffffff8c,inset 0 -3px 6px hsl(var(--pad-hue, 30) 45% 40% / .24),0 0 9px hsl(var(--pad-hue, 30) 55% 68% / calc(var(--lit) * .4))}.step-cell.accent{box-shadow:inset 0 1px #ffffff9e,0 0 13px hsl(var(--pad-hue, 30) 60% 70% / .6);border-color:hsl(var(--pad-hue, 30) 52% 38%)}.step-cell.ghost{border-style:dashed}.step-cell.on.ghost{border-color:hsl(var(--pad-hue, 30) 45% 40% / .75)}.step-cell.out{opacity:.22}.step-cell.roll:after{content:"";position:absolute;left:4px;right:4px;bottom:3px;height:2px;border-radius:1px;background:repeating-linear-gradient(90deg,rgba(10,12,15,.85) 0 3px,transparent 3px 5px)}.step-cell.prob:before{content:"";position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;border:1px solid rgba(32,26,20,.65)}.step-cell.shifted{transform:translateY(-2px)}.step-cell.playing{outline:2px solid rgba(255,255,255,.92);outline-offset:-2px}.step-cell.playing.on{outline-color:#1c1610cc;box-shadow:inset 0 1px #fff9,0 0 15px hsl(var(--pad-hue, 30) 58% 66% / .85)}.panel{flex:none;border-top:1px solid var(--line-strong);background:var(--brush),linear-gradient(180deg,var(--metal-4),var(--metal-5));box-shadow:inset 0 1px 0 var(--edge-hi);max-height:47vh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}.panel-tabs{display:flex;gap:.25rem;padding:.4rem .6rem 0;overflow-x:auto;scrollbar-width:none;flex:none}.panel-tabs::-webkit-scrollbar{display:none}.tab-btn{border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--metal-2),var(--metal-4));box-shadow:var(--bevel-up);color:var(--text-dim);padding:.32rem .7rem;border-radius:3px;font-size:.76rem;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit}.tab-btn.active{color:var(--amber);background:linear-gradient(180deg,var(--screen),var(--screen-2));text-shadow:0 0 8px rgba(242,163,60,.65);box-shadow:var(--bevel-down)}.panel-body{overflow-y:auto;padding:.6rem .8rem 1rem}.panel-section{display:flex;flex-direction:column;gap:.6rem}.panel-section-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}.panel-section-head h3{margin:0;font-size:.86rem;letter-spacing:.04em;text-shadow:0 1px 0 rgba(255,255,255,.28)}.panel-hint,.panel-note{font-size:.7rem;color:var(--text-dim);line-height:1.6}.ctl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:.55rem .9rem}.ctl{display:flex;flex-direction:column;gap:.22rem;min-width:0}.ctl-head{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem}.ctl-label{font-size:.72rem;color:var(--text);text-shadow:0 1px 0 rgba(255,255,255,.24)}.ctl-value{font-size:.7rem;color:#6b3f06;font-weight:700;font-variant-numeric:tabular-nums}.ctl-hint{font-size:.63rem;color:var(--text-dim);line-height:1.4}.ctl-range{appearance:none;width:100%;height:20px;background:transparent;cursor:pointer}.ctl-range::-webkit-slider-runnable-track{height:5px;border-radius:2px;background:linear-gradient(90deg,var(--amber) var(--fill, 0%),#37342f var(--fill, 0%));box-shadow:inset 0 1px 3px #0009,0 1px #ffffff47}.ctl-range::-moz-range-track{height:5px;border-radius:2px;background:linear-gradient(90deg,var(--amber) var(--fill, 0%),#37342f var(--fill, 0%));box-shadow:inset 0 1px 3px #0009,0 1px #ffffff47}.ctl-range::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;margin-top:-5px;background:radial-gradient(circle at 40% 28%,#f7f6f3,#b7b2ac 55%,#7c766e);border:1px solid rgba(0,0,0,.45);box-shadow:0 1px 3px #0000008c}.ctl-range::-moz-range-thumb{width:15px;height:15px;border:1px solid rgba(0,0,0,.45);border-radius:50%;background:radial-gradient(circle at 40% 28%,#f7f6f3,#b7b2ac 55%,#7c766e)}.segmented{display:flex;flex-wrap:wrap;gap:.2rem}.seg-btn{flex:1 1 auto;min-width:2.4rem;border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--metal-2),var(--metal-4));box-shadow:var(--bevel-up);color:var(--text-dim);padding:.3rem .4rem;border-radius:3px;font-size:.72rem;font-weight:600;cursor:pointer;font-family:inherit}.seg-btn.active{color:var(--amber);background:linear-gradient(180deg,var(--screen),var(--screen-2));text-shadow:0 0 7px rgba(242,163,60,.65);box-shadow:var(--bevel-down)}.stepper{display:flex;align-items:center;gap:.3rem}.switch-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.6rem;cursor:pointer}.switch-texts{display:flex;flex-direction:column;gap:.1rem;min-width:0}.switch-input{position:absolute;opacity:0;pointer-events:none}.switch-track{width:42px;height:24px;border-radius:3px;background:linear-gradient(180deg,var(--screen-2),var(--screen));border:1px solid rgba(0,0,0,.55);box-shadow:var(--bevel-down);position:relative;flex:none;transition:background .15s}.switch-track:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:2px;background:linear-gradient(180deg,#d9d6d3,#969089);border:1px solid rgba(0,0,0,.4);box-shadow:0 1px 2px #00000080;transition:transform .15s,background .15s}.switch-input:checked+.switch-track{background:linear-gradient(180deg,#4a3517,#33240f)}.switch-input:checked+.switch-track:after{transform:translate(18px);background:linear-gradient(180deg,var(--amber-soft),var(--amber));box-shadow:0 0 9px #f2a33cb3}.btn-row{display:flex;flex-wrap:wrap;gap:.4rem}.btn{border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--metal-1),var(--metal-3));box-shadow:var(--bevel-up);color:var(--text);padding:.4rem .75rem;border-radius:3px;font-size:.76rem;font-weight:600;text-shadow:0 1px 0 rgba(255,255,255,.26);cursor:pointer;font-family:inherit}.btn:hover{background:linear-gradient(180deg,var(--metal-hi),var(--metal-2))}.btn:active{background:linear-gradient(180deg,var(--metal-5),var(--metal-3));box-shadow:var(--bevel-down)}.btn.primary{background:linear-gradient(180deg,#f7b551,#cf8018);color:#24160a;border-color:#00000080}.btn.primary:hover{background:linear-gradient(180deg,#ffc264,#dc8c1f)}.btn.danger{color:#7a1c17}.btn.danger:hover{background:linear-gradient(180deg,#dcb4b0,#c49b97)}.btn.mini{padding:.25rem .5rem;font-size:.7rem}.track-picker{display:flex;flex-wrap:wrap;gap:.25rem}.chip{border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--metal-2),var(--metal-4));box-shadow:var(--bevel-up);color:var(--text-dim);border-radius:3px;padding:.24rem .6rem;font-size:.7rem;font-weight:600;cursor:pointer;font-family:inherit}.chip.active{color:var(--amber);background:linear-gradient(180deg,var(--screen),var(--screen-2));text-shadow:0 0 7px rgba(242,163,60,.65);box-shadow:var(--bevel-down)}.pads{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem}.pad{position:relative;aspect-ratio:1 / .78;border-radius:4px;border:1px solid rgba(0,0,0,.5);background:linear-gradient(180deg,hsl(var(--pad-hue, 30) var(--pad-sat, 12%) 27%),hsl(var(--pad-hue, 30) var(--pad-sat, 12%) 15%));box-shadow:inset 0 1px #fff3,0 2px 4px #00000073;color:#e9e6e2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;cursor:pointer;font-family:inherit;touch-action:none;overflow:hidden}.pad-name{font-size:.66rem;text-align:center;line-height:1.2;padding:0 2px}.pad-key{font-size:.58rem;color:#9e9890}.pad.hit{animation:padHit .22s ease-out}@keyframes padHit{0%{background:linear-gradient(180deg,hsl(var(--pad-hue, 30) 58% 84%),hsl(var(--pad-hue, 30) 50% 66%));color:#24160a}to{background:linear-gradient(180deg,hsl(var(--pad-hue, 30) var(--pad-sat, 12%) 27%),hsl(var(--pad-hue, 30) var(--pad-sat, 12%) 15%))}}.mixer{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.55rem}.strip{border:1px solid var(--line-strong);border-radius:var(--radius);padding:.45rem .55rem;background:var(--brush),linear-gradient(180deg,var(--metal-2),var(--metal-4));box-shadow:var(--bevel-up);display:flex;flex-direction:column;gap:.3rem}.strip.active{background:var(--brush),linear-gradient(180deg,var(--metal-1),var(--metal-3));box-shadow:var(--bevel-up),inset 0 0 0 1px #f2a33c99,0 0 10px #f2a33c38}.strip-head{display:flex;align-items:center;gap:.3rem}.strip-name{flex:1;text-align:left;background:transparent;border:none;color:var(--text);font-size:.74rem;font-weight:600;cursor:pointer;font-family:inherit;padding:0}.strip-knobs{display:grid;grid-template-columns:1fr 1fr;gap:.25rem .6rem}.song-list{display:flex;flex-direction:column;gap:.35rem}.song-slot{display:flex;align-items:center;gap:.35rem;border:1px solid var(--line-strong);border-radius:var(--radius);padding:.3rem .45rem;background:var(--brush),linear-gradient(180deg,var(--metal-2),var(--metal-4));box-shadow:var(--bevel-up)}.song-index{font-size:.7rem;color:var(--text-dim);width:1.4rem;flex:none}.song-x{color:var(--text-dim);font-size:.7rem}.song-select{flex:1;min-width:0;appearance:none;background:linear-gradient(180deg,var(--screen-2),var(--screen));color:var(--amber);border:1px solid rgba(0,0,0,.6);border-radius:3px;box-shadow:var(--bevel-down);padding:.28rem .5rem;font-size:.74rem;font-family:inherit}.song-select option{background:var(--screen);color:#ffd9a6}.song-repeats{width:3rem;border:1px solid rgba(0,0,0,.6);border-radius:3px;padding:.24rem 0;background:linear-gradient(180deg,var(--screen-2),var(--screen));box-shadow:var(--bevel-down)}.demo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.5rem}.demo-card{border:1px solid var(--line-strong);border-radius:var(--radius);padding:.5rem .6rem;background:var(--brush),linear-gradient(180deg,var(--metal-2),var(--metal-4));box-shadow:var(--bevel-up);display:flex;flex-direction:column;gap:.35rem}.demo-head{display:flex;flex-direction:column;gap:.1rem}.demo-head strong{font-size:.8rem;text-shadow:0 1px 0 rgba(255,255,255,.24)}.demo-meta{font-size:.65rem;color:#6b3f06;font-weight:700}.demo-desc{margin:0;font-size:.68rem;color:var(--text-dim);line-height:1.5}.inspector{position:fixed;z-index:50;display:flex;flex-direction:column;gap:.45rem;padding:.6rem .7rem;border-radius:5px;border:1px solid var(--line-strong);background:var(--brush),linear-gradient(180deg,var(--metal-1),var(--metal-3));box-shadow:var(--bevel-up),0 16px 40px #00000080}.inspector-title{font-size:.72rem;color:#6b3f06;font-weight:700}.grid-track,.pads{--pad-hue: 30;--pad-sat: 12%}.grid-track[data-track=kick],.pad[data-track=kick]{--pad-hue: 4;--pad-sat: 48%}.grid-track[data-track=snare],.pad[data-track=snare]{--pad-hue: 15;--pad-sat: 52%}.grid-track[data-track=clap],.pad[data-track=clap]{--pad-hue: 27;--pad-sat: 55%}.grid-track[data-track=rim],.pad[data-track=rim]{--pad-hue: 37;--pad-sat: 52%}.grid-track[data-track=ch],.pad[data-track=ch]{--pad-hue: 174;--pad-sat: 36%}.grid-track[data-track=oh],.pad[data-track=oh]{--pad-hue: 192;--pad-sat: 40%}.grid-track[data-track=tom1],.pad[data-track=tom1]{--pad-hue: 46;--pad-sat: 42%}.grid-track[data-track=tom2],.pad[data-track=tom2]{--pad-hue: 54;--pad-sat: 40%}.grid-track[data-track=tom3],.pad[data-track=tom3]{--pad-hue: 63;--pad-sat: 38%}.grid-track[data-track=ride],.pad[data-track=ride]{--pad-hue: 212;--pad-sat: 42%}.grid-track[data-track=crash],.pad[data-track=crash]{--pad-hue: 230;--pad-sat: 46%}.grid-track[data-track=cowbell],.pad[data-track=cowbell]{--pad-hue: 287;--pad-sat: 36%}.grid-track[data-track=shaker],.pad[data-track=shaker]{--pad-hue: 150;--pad-sat: 32%}.grid-track[data-track=perc],.pad[data-track=perc]{--pad-hue: 315;--pad-sat: 34%}.track-steps .step-cell[data-index="0"],.track-steps .step-cell[data-index="1"],.track-steps .step-cell[data-index="2"],.track-steps .step-cell[data-index="3"],.track-steps .step-cell[data-index="16"],.track-steps .step-cell[data-index="17"],.track-steps .step-cell[data-index="18"],.track-steps .step-cell[data-index="19"],.track-steps .step-cell[data-index="32"],.track-steps .step-cell[data-index="33"],.track-steps .step-cell[data-index="34"],.track-steps .step-cell[data-index="35"],.track-steps .step-cell[data-index="48"],.track-steps .step-cell[data-index="49"],.track-steps .step-cell[data-index="50"],.track-steps .step-cell[data-index="51"]{--pad-l-top: 25%;--pad-l-bot: 14.5%}.track-steps .step-cell[data-index="4"],.track-steps .step-cell[data-index="5"],.track-steps .step-cell[data-index="6"],.track-steps .step-cell[data-index="7"],.track-steps .step-cell[data-index="20"],.track-steps .step-cell[data-index="21"],.track-steps .step-cell[data-index="22"],.track-steps .step-cell[data-index="23"],.track-steps .step-cell[data-index="36"],.track-steps .step-cell[data-index="37"],.track-steps .step-cell[data-index="38"],.track-steps .step-cell[data-index="39"],.track-steps .step-cell[data-index="52"],.track-steps .step-cell[data-index="53"],.track-steps .step-cell[data-index="54"],.track-steps .step-cell[data-index="55"]{--pad-l-top: 21.5%;--pad-l-bot: 12.5%}.track-steps .step-cell[data-index="8"],.track-steps .step-cell[data-index="9"],.track-steps .step-cell[data-index="10"],.track-steps .step-cell[data-index="11"],.track-steps .step-cell[data-index="24"],.track-steps .step-cell[data-index="25"],.track-steps .step-cell[data-index="26"],.track-steps .step-cell[data-index="27"],.track-steps .step-cell[data-index="40"],.track-steps .step-cell[data-index="41"],.track-steps .step-cell[data-index="42"],.track-steps .step-cell[data-index="43"],.track-steps .step-cell[data-index="56"],.track-steps .step-cell[data-index="57"],.track-steps .step-cell[data-index="58"],.track-steps .step-cell[data-index="59"]{--pad-l-top: 18%;--pad-l-bot: 10.5%}.track-steps .step-cell[data-index="12"],.track-steps .step-cell[data-index="13"],.track-steps .step-cell[data-index="14"],.track-steps .step-cell[data-index="15"],.track-steps .step-cell[data-index="28"],.track-steps .step-cell[data-index="29"],.track-steps .step-cell[data-index="30"],.track-steps .step-cell[data-index="31"],.track-steps .step-cell[data-index="44"],.track-steps .step-cell[data-index="45"],.track-steps .step-cell[data-index="46"],.track-steps .step-cell[data-index="47"],.track-steps .step-cell[data-index="60"],.track-steps .step-cell[data-index="61"],.track-steps .step-cell[data-index="62"],.track-steps .step-cell[data-index="63"]{--pad-l-top: 15%;--pad-l-bot: 8.5%}.grid-track[data-track=kick] .track-short{color:#881e16}.grid-track[data-track=snare] .track-short{color:#8b3113}.grid-track[data-track=clap] .track-short{color:#8d4911}.grid-track[data-track=rim] .track-short{color:#8b5d13}.grid-track[data-track=ch] .track-short{color:#207e75}.grid-track[data-track=oh] .track-short{color:#1c6d82}.grid-track[data-track=tom1] .track-short{color:#836b1b}.grid-track[data-track=tom2] .track-short{color:#82781c}.grid-track[data-track=tom3] .track-short{color:#7b801e}.grid-track[data-track=ride] .track-short{color:#1b4c83}.grid-track[data-track=crash] .track-short{color:#182a86}.grid-track[data-track=cowbell] .track-short{color:#6a207e}.grid-track[data-track=shaker] .track-short{color:#237b4f}.grid-track[data-track=perc] .track-short{color:#7d2166}@media (max-width: 720px){:root{--head-w: 104px;--cell: 30px;--cell-gap: 3px;--wood-w: 11px;--wood-h: 7px}.transport{flex-wrap:wrap;overflow-x:visible}.pattern-bank{flex:1 1 auto;justify-content:space-between}.brand-text small,.status{display:none}.panel{max-height:52vh}.pads{grid-template-columns:repeat(4,minmax(0,1fr))}.track-full{display:none}.track-short{width:auto;font-size:.76rem}}@media (max-width: 420px){:root{--cell: 27px}.kit-select{max-width:30vw;font-size:.76rem}.meter{width:60px}}@media (min-width: 1100px){:root{--head-w: 172px;--cell: 36px}.panel{max-height:42vh}}@media (max-height: 620px){:root{--cell: 26px;--cell-gap: 3px;--head-w: 104px}.topbar{padding:.3rem .6rem;padding-top:max(.3rem,env(safe-area-inset-top));gap:.45rem}.transport{padding:.3rem .6rem;gap:.35rem}.brand-text small,.track-full{display:none}.track-short{width:auto;font-size:.76rem}.play-btn,.rec-btn,.mode-btn,.tap-btn,.pattern-btn,.tempo{height:30px}.stage{padding:.35rem .4rem 0}.panel{max-height:40vh}.panel-tabs{padding:.25rem .5rem 0}.tab-btn{height:28px}.panel-body{padding:.4rem .7rem .7rem}}@media (max-height: 620px) and (min-width: 720px){.work{flex-direction:row}.stage{padding:.35rem 0 .35rem .4rem;min-width:0}.panel{flex:0 0 clamp(280px,42%,520px);max-height:none;min-height:0;min-width:0;border-top:0;border-left:1px solid var(--line-strong);box-shadow:inset 1px 0 0 var(--edge-hi)}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}.status.alert{position:fixed;top:0;left:0;right:0;z-index:60;display:block;padding:.5rem .75rem;background:#120e09f5;border-bottom:1px solid #f0a860;color:#f0a860;font-size:.8rem;font-weight:600;line-height:1.4;text-align:center;white-space:normal;overflow:visible;text-overflow:clip}