@font-face{font-family:LocalSans;src:local('Helvetica Neue')}*{box-sizing:border-box} :root{--paper:#090a0f;--ink:#f3f4fc;--muted:#a6a2b8;--line:#302a40;--accent:#a292ff;--lcd:#c7b9e5}body{margin:0;background:var(--paper);color:var(--ink);font-family:LocalSans,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a,input,[role=slider]{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,[role=slider]:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:disabled{opacity:.45;cursor:wait}a{color:inherit;text-decoration:none}.topbar{height:82px;margin:0 4%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.wordmark{font-size:23px;font-weight:750;letter-spacing:-1.5px}.wordmark span{font-size:13px;letter-spacing:-.3px;border-left:1px solid #aaa;margin-left:12px;padding-left:12px}.edition,.local-badge{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px}.edition i{font-style:normal;color:var(--muted);margin-left:18px}.local-badge{display:flex;align-items:center;gap:9px}.local-badge span,.message-dot{width:6px;height:6px;border-radius:50%;background:#a285e7;display:inline-block}main{max-width:1270px;margin:0 auto;display:grid;grid-template-columns:minmax(220px,1fr) 350px minmax(240px,1fr);column-gap:clamp(28px,5vw,76px);padding:35px 40px 30px;align-items:center}.intro{padding-bottom:20px}.eyebrow,.section-label,.small-note,.device-caption,.chain,.memory,.mic-row>span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.eyebrow{font-size:9px;letter-spacing:1.2px;color:var(--muted);line-height:1.8;margin:0 0 16px}h1{font-size:clamp(26px,2.6vw,37px);font-weight:500;letter-spacing:-1.5px;line-height:1.13;margin:0 0 18px}.lede{font-size:13px;line-height:1.7;color:#a7a1b9;margin:0 0 24px}.primary{background:var(--ink);border:1px solid var(--ink);color:#fffaff;border-radius:3px;padding:12px 17px;font-size:12px;width:100%;display:flex;align-items:center;justify-content:space-between}.primary:hover{background:#54416d}.primary.ready{background:transparent;color:var(--ink);border-color:#615174}.primary span{color:var(--accent);font-size:19px;line-height:12px}.small-note{font-size:9px;color:var(--muted);line-height:1.6;margin:9px 0 0}.quickstart{margin-top:32px}.section-label{font-size:9px;letter-spacing:1px;display:flex;justify-content:space-between;gap:8px;align-items:center;color:#aaa0bd;line-height:1.5}.section-label>span:last-child{font-size:8px;letter-spacing:.4px}ol{padding:0;list-style:none;margin:17px 0 20px}li{display:flex;gap:14px;margin-bottom:18px}li>span{font:9px ui-monospace,monospace;color:#746780;margin-top:3px}li strong{font-size:12px;font-weight:550}li p{font-size:11px;line-height:1.55;color:var(--muted);margin:5px 0 0}kbd{font:10px ui-monospace,monospace;background:#241e33;border:1px solid #443656;border-radius:3px;padding:0 3px}.text-button{background:none;border:none;padding:0;font-size:11px;text-align:left;line-height:1.5;color:#b4a5cb;display:flex;align-items:center;justify-content:space-between;gap:10px}.text-button:hover{color:var(--accent)}.instrument-area{width:350px;position:relative;display:flex;flex-direction:column;align-items:center;align-self:start}.hanger{height:71px;width:248px;position:relative;background:linear-gradient(140deg,#342541,#1c1626);border-radius:48px 48px 39px 39px;box-shadow:inset 0 1px 2px #77608f,0 4px 7px #24271c15;display:flex;align-items:flex-end;justify-content:center;color:#ba9df4;font-size:13px;padding-bottom:5px;margin-bottom:9px}.hanger:after{content:'';height:12px;width:96px;background:#261b35;position:absolute;bottom:-10px;left:76px}.hanger>div{position:absolute;left:30px;right:30px;top:25px;height:22px;background:var(--paper);border-radius:25px;box-shadow:inset 0 1px 3px #0002}.hanger>div:before{content:'';position:absolute;background:var(--paper);left:82px;top:-11px;width:24px;height:24px;border-radius:50%}.device{width:350px;padding:17px 17px 13px;background:linear-gradient(110deg,#30213e 0%,#1c1628 35%,#241a33 80%,#322341);border-radius:11px;position:relative;box-shadow:inset 1px 1px 1px #a7a1b9,inset -2px -2px 1px #110c1c,0 14px 28px -8px #22281a60,0 2px 2px #10140c40;isolation:isolate;border:1px solid #54416d}.pcb-traces{position:absolute;inset:0;z-index:-1;opacity:.25;border-radius:inherit;overflow:hidden;background:repeating-linear-gradient(0deg,transparent,transparent 29px,#7e806016 30px,#7e806014 31px,transparent 32px),repeating-linear-gradient(90deg,transparent,transparent 53px,#9296750d 54px,#9296750d 55px)}.device-heading{display:flex;justify-content:space-between;align-items:center;height:44px;color:#b69aee;padding:0 3px 10px;font-size:24px;font-weight:400;letter-spacing:-1.5px}.device-heading b{font:700 27px Arial,sans-serif;letter-spacing:-1.5px;transform:rotate(-6deg);color:#cebaff}.mic-symbol{font-size:29px;letter-spacing:0;line-height:22px;display:flex;flex-direction:column;align-items:center}.mic-symbol small{font:6px ui-monospace,monospace;letter-spacing:2px}.lcd-pins{height:7px;margin:0 18px 3px;background:repeating-linear-gradient(90deg,#10110f 0,#10110f 3px,#b8b8a9 4px,#c8c9b8 6px,#40423a 7px,#181a16 8px);border-radius:2px}.lcd-frame{border:5px solid #10120f;border-radius:2px;box-shadow:0 0 0 1px #595c51,0 1px 0 2px #11120f;position:relative;background:var(--lcd);height:138px}.lcd-frame:before,.lcd-frame:after{content:'';position:absolute;width:4px;height:19px;top:85px;background:#b5a0dc;border:2px solid #6a5588;border-radius:4px}.lcd-frame:before{left:-13px}.lcd-frame:after{right:-13px}.side-lock{position:absolute;font:6px ui-monospace,monospace;letter-spacing:1px;writing-mode:vertical-rl;transform:rotate(180deg);color:#aa97c5;left:-17px;top:5px;border:1px solid #73598e;padding:3px 1px}#lcd{width:100%;height:100%;display:block;image-rendering:pixelated}.bottom-pins{margin:4px 18px 12px}.control-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px 5px}.control-cell{display:flex;flex-direction:column;align-items:center;position:relative;min-width:0}.hardware-button{border:0;outline-offset:0;width:51px;height:46px;background:transparent;padding:5px;position:relative;touch-action:none;user-select:none;-webkit-user-select:none}.hardware-button:before{content:'';position:absolute;inset:3px 0;background:linear-gradient(90deg,transparent,#d9d1e8 8%,#d9d1e8 91%,transparent);clip-path:polygon(0 25%,10% 10%,92% 10%,100% 25%,100% 75%,90% 90%,10% 90%,0 75%);filter:drop-shadow(0 1px 1px #000)}.switch{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:4px;background:linear-gradient(135deg,#d8cfe8 10%,#b1a0c5 70%,#827092);border:1px solid #877399;box-shadow:inset 1px 1px 0 #fff4ff,inset -2px -2px 0 #a18daf,0 3px 2px #060805}.switch:before,.switch:after{content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:#b4a5cb;box-shadow:inset 0 1px 1px #111;top:3px}.switch:before{left:3px}.switch:after{right:3px}.switch i{display:block;border-radius:50%;background:linear-gradient(135deg,#44374f,#24192e);width:19px;height:19px;box-shadow:inset 0 1px 2px #090d06,inset 0 -1px 1px #766087;transition:transform 45ms}.hardware-button.pressed .switch,.hardware-button:active .switch{transform:translateY(2px);box-shadow:inset 1px 1px 1px #8d76a4,0 1px 1px #030602}.accent:before{background:#8263ff}.accent .switch{background:linear-gradient(135deg,#ba9eff,#7350be)}.striped .switch{background:repeating-linear-gradient(125deg,#c3b7d2,#c3b7d2 2px,#544162 2px,#544162 3px);border:2px solid #b5a2ce}.control-label{font:12px LocalSans,Arial,sans-serif;color:#cfc3e0;height:21px;padding-top:3px;text-shadow:0 1px #000}.control-label em{font-style:normal;color:#ad91eb;font-size:10px}.control-cell:has(.accent)>.control-label{color:#c4a7fa}.pad-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:4px 5px;position:relative;margin-top:3px}.pad-cell .control-label{font-size:13px;color:#d4c4e6;padding-top:2px;height:21px}.pad-led{width:6px;height:5px;border-radius:2px;position:absolute;top:-1px;left:calc(50% - 3px);background:#49325f;border:1px solid #2e1c40;z-index:1}.pad-cell.lit .pad-led{background:#a07bea;box-shadow:0 0 3px #a779ff77}.pad-cell.current .pad-led,.pad-cell.hit .pad-led{background:#ead5ff;box-shadow:0 0 7px #bc86ff,0 0 12px #ab6bff78}.pad-cell.current .switch{box-shadow:inset 1px 1px 0 #f9edff,inset -2px -2px 0 #a18bb7,0 0 0 1px #c59cff,0 3px 3px #060805}.pad-cell.row-start:before{position:absolute;left:-14px;top:11px;color:#bb99ef;font:7px ui-monospace,monospace;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.4px;height:110px;z-index:3;border-right:1px solid #765799;padding-right:2px}.pad-cell.melodic-start:before{content:'MELODIC'}.pad-cell.drum-start:before{content:'DRUM'}.knob-cell{position:relative;display:flex;align-items:center;justify-content:center;align-self:start}.knob{width:54px;height:51px;padding:4px;background:linear-gradient(120deg,#8d79a0,#d0c3e0,#77638d);border:2px solid #10130e;border-radius:4px;box-shadow:0 2px 2px #060704;touch-action:none;cursor:ns-resize}.knob:before,.knob:after{content:'';position:absolute;top:4px;bottom:4px;width:3px;border-top:3px solid #3e2d53;border-bottom:3px solid #3e2d53}.knob:before{left:6px}.knob:after{right:6px}.knob-cap{height:100%;width:100%;border-radius:50%;background:radial-gradient(circle at 38% 30%,#e3d9f3,#c8b8df 45%,#9280a7 75%,#c6b5db 80%,#49325e 85%,#bca7d3 90%);box-shadow:0 2px 2px #12190b;transform:rotate(var(--rotation,0deg));position:relative}.knob-cap:before{content:'';position:absolute;inset:6px;border:1px solid #8c75a6;border-radius:50%;box-shadow:inset 0 0 2px #f6eaff}.knob-cap i{position:absolute;top:4px;height:14px;width:3px;background:#705886;left:calc(50% - 1.5px);box-shadow:1px 0 #f2e5ff;transform:rotate(-5deg)}.knob-letter{position:absolute;top:-9px;left:0;background:#291c39;border:1px solid #bfa5df;border-radius:50%;width:11px;height:11px;text-align:center;font:7px/10px Arial,sans-serif;color:#e5cffc}.screw{position:absolute;bottom:7px;width:5px;height:5px;border:1px solid #a48abf;border-radius:50%;background:#271632}.screw-a{left:5px}.screw-b{right:5px}.device-foot{color:#a18bb4;font:6px ui-monospace,monospace;text-transform:uppercase;letter-spacing:1px;display:flex;justify-content:space-between;padding:9px 7px 0}.device-caption{display:flex;justify-content:space-between;width:100%;padding:17px 5px 0;color:#90829f;font-size:8px;letter-spacing:.2px}.device-caption span:first-child{color:#aa87db}.workbench{align-self:center;max-width:285px;width:100%}.workbench h2{font-size:20px;font-weight:450;letter-spacing:-.7px;margin:14px 0 12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.waveform-wrap{background:#17131f;border:1px solid #352a44;padding:8px 10px 6px;border-radius:3px}.waveform-wrap canvas{width:100%;height:62px;display:block}.waveform-wrap>span{display:block;font:8px ui-monospace,monospace;color:#a493b9;margin-top:5px}.file-drop{text-align:center;padding:18px 0 8px}.secondary{background:transparent;border:1px solid #534265;color:#d0bde7;border-radius:3px;padding:10px 16px;font-size:11px}.secondary:hover{border-color:#a287c0;background:#21192f}.secondary>span{color:#b497db;font-size:15px;margin-right:8px}.file-drop .secondary{width:100%}.file-drop p{font-size:10px;line-height:1.65;color:#a296b1;margin:8px 0 0}.file-drop p span{font-size:8px}.file-drop.dragging{background:#21172e;outline:1px dashed #a685ce;border-radius:4px}.mic-row{display:flex;justify-content:space-between;align-items:center;padding-top:5px}.mic-row>span{font-size:8px;color:#aa95bf}.mic-row.active .text-button{color:#bf93fa}.memory{margin:20px 0;font-size:8px;letter-spacing:.7px}.memory>div:first-child{display:flex;justify-content:space-between;margin-bottom:7px}.memory strong{font-weight:400;color:#b39bce;letter-spacing:0}.memory-track{height:3px;background:#352741}.memory-track i{display:block;width:0;height:100%;background:#8263ff;transition:width .2s}.parameter-card{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}.parameters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}.parameters>div{display:flex;flex-direction:column;gap:5px}.parameters span{font:8px ui-monospace,monospace;letter-spacing:.4px;color:#a190b4}.parameters strong{font-size:17px;font-weight:400;color:#dec7fa}.session-bar{display:flex;gap:5px;margin-top:19px}.secondary.small{font-size:9px;padding:8px 10px;flex:1}.workbench>#starter-beat{font-size:10px;width:100%;margin-top:18px}.chain{margin-top:21px;padding-top:15px;border-top:1px solid var(--line)}.chain>span{font-size:8px;letter-spacing:.8px;color:#aa93bd}.chain>div{font-size:10px;letter-spacing:1px;line-height:1.7;margin-top:6px;color:#cbb2e8;max-height:54px;overflow:auto;overflow-wrap:anywhere}.message-bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:1190px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:14px 0;font:10px ui-monospace,monospace;color:#b5a1cc;line-height:1.5}.message-bar #voice-count{margin-left:auto;white-space:nowrap;font-size:8px;letter-spacing:1px}.message-bar .message-dot{flex-shrink:0;background:#8263ff}footer{max-width:1190px;margin:0 auto;padding:21px 0 24px;display:flex;justify-content:space-between;gap:15px;font:8px ui-monospace,monospace;color:#91819f;line-height:1.5}footer>span:first-child{letter-spacing:.8px}footer a:hover{color:#c7a2ff}dialog{border:1px solid #5d4577;border-radius:5px;background:#eeede7;color:#e6d5f8;max-width:580px;width:calc(100% - 30px);padding:32px;box-shadow:0 20px 90px #18200c40}dialog::backdrop{background:#0d071cbb;backdrop-filter:blur(4px)}dialog h2{font-size:28px;font-weight:400;letter-spacing:-1px;margin:0 0 20px}dialog p{font-size:11px;line-height:1.7;color:#beabd0}.close-button{position:absolute;right:15px;top:10px;font-size:24px;border:0;background:none;color:#c4adde}.keyboard{display:grid;grid-template-columns:repeat(4,35px);gap:5px}.keyboard>div{background:#2b1e3c;border:1px solid #62497f;border-radius:3px;text-align:center;padding:6px;font:11px ui-monospace,monospace}table{border-collapse:collapse;width:100%;font-size:10px;line-height:1.7;margin:18px 0}td{border-bottom:1px solid #49345e;padding:6px 7px 6px 0;vertical-align:top}td:first-child{width:41%;color:#b99ed0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:1400px){main{padding-top:50px;padding-bottom:40px}.intro{padding-right:15px}}@media(max-width:1100px){main{grid-template-columns:minmax(185px,1fr) 320px minmax(210px,1fr);gap:25px;padding:28px}.instrument-area{width:320px}.device{width:320px;padding:13px 13px 10px}.hardware-button{width:47px;height:43px}.control-label{font-size:11px}.knob{width:49px;height:48px}.lcd-frame{height:126px}.hanger{width:225px;height:64px}.hanger>div{left:25px;right:25px;top:21px}.hanger>div:before{left:76px}.hanger:after{left:66px}.message-bar,footer{margin-left:28px;margin-right:28px}.quickstart{margin-top:24px}li{margin-bottom:13px}}@media(max-width:900px){.edition{display:none}main{grid-template-columns:320px 260px;justify-content:center;gap:40px;padding-top:30px}.intro{grid-column:1/-1;display:none}.workbench{align-self:center}.message-bar{font-size:9px}.topbar{height:65px}footer>span:nth-child(2){display:none}}@media(max-width:650px){.topbar{margin:0 20px;height:62px}.wordmark{font-size:21px}.local-badge{font-size:8px;letter-spacing:.5px}main{display:flex;flex-direction:column;gap:32px;padding:25px 20px 30px}.instrument-area{flex-shrink:0}.workbench{max-width:340px}.workbench h2{font-size:22px}.workbench .section-label{font-size:10px}.primary{padding:12px}.workbench:before{content:'Tap a pad to unlock audio. Keyboard guide below.';display:block;font:9px ui-monospace,monospace;color:#b29ac8;margin-bottom:22px}.waveform-wrap canvas{height:75px}.small-note{font-size:10px}.secondary{font-size:12px}.secondary.small{font-size:10px}.text-button{font-size:12px}.file-drop p{font-size:11px}.file-drop p span{font-size:9px}.message-bar{margin:0 20px;position:sticky;bottom:0;background:var(--paper);z-index:10;padding:12px 0}.message-bar #voice-count{display:none}footer{margin:0 20px;font-size:7px}.device-caption{font-size:8px}.memory{font-size:9px}.parameters span{font-size:9px}.session-bar{gap:8px}.mic-row>span{font-size:9px}.workbench>#starter-beat{font-size:11px}.chain>span{font-size:9px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

[hidden]{display:none!important}

/* MD. Groove Lab: matte charcoal, electric purple, a touch of royal blue. */
html{color-scheme:dark}body{background:radial-gradient(ellipse at 52% 28%,#21132f44,transparent 58%),var(--paper)}
.wordmark{color:#f5efff;letter-spacing:-1.2px}.wordmark span{color:#ad91db;border-color:#514061;font-size:10px;letter-spacing:1.2px}.edition{color:#a79abb}.local-badge{color:#b2a3c4}
.primary{background:linear-gradient(125deg,#4967f5,#7948c9);border-color:#8e77eb}.primary:hover{background:linear-gradient(125deg,#607bf9,#925ee1)}.primary.ready{color:#d7bfff;border-color:#60477b;background:#21172e}
.hanger{background:linear-gradient(145deg,#392447,#20152d);box-shadow:inset 0 1px 2px #8e65a6,0 5px 10px #0005}.hanger span{font-size:11px;letter-spacing:1.6px}
.device{background:linear-gradient(115deg,#382447 0%,#21162e 35%,#291a38 80%,#3c2850);border-color:#715182;box-shadow:inset 1px 1px 1px #a27ab7,inset -2px -2px 1px #110a1a,0 18px 42px -8px #000c,0 0 50px #6b34a31a}
.device-heading .md-monogram{display:flex;flex-direction:column;gap:2px;font-size:27px;font-weight:750;letter-spacing:-1.5px}.md-monogram small{font:5px ui-monospace,monospace;letter-spacing:1.2px;color:#ba9fd5}.device-heading b{transform:none;letter-spacing:-1px;font-size:29px;color:#e1c9ff}
.pcb-traces{background:repeating-linear-gradient(0deg,transparent,transparent 29px,#ae79eb16 30px,#ae79eb14 31px,transparent 32px),repeating-linear-gradient(90deg,transparent,transparent 53px,#bd93ed12 54px,#bd93ed12 55px)}
.lcd-frame{border-color:#1b1025;box-shadow:0 0 0 1px #8b6aa1,0 1px 0 2px #120a1b}.lcd-pins{background:repeating-linear-gradient(90deg,#170e20 0,#170e20 3px,#b8a5ca 4px,#d9c7e6 6px,#5a456e 7px,#211329 8px)}
.control-label{text-shadow:0 1px #160b23}.switch i{box-shadow:inset 0 1px 2px #170b24,inset 0 -1px 1px #88709c}.accent .switch{background:linear-gradient(135deg,#c1a1f7,#8353cb);border-color:#ad85e2;box-shadow:inset 1px 1px #e8caff,inset -2px -2px #7144b3,0 3px 2px #11061d}
.message-bar{background:#090a0f}dialog{background:#181020;color:#e3d4f3}.waveform-wrap{background:#17131f}footer{color:#9d8cad}
@media(max-width:650px){.wordmark span{font-size:8px;letter-spacing:.7px;margin-left:8px;padding-left:8px}.local-badge{font-size:7px}}

/* Permanent punch-in FX legend beside the numbered pads. */
.pad-cell .pad-caption{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding-top:2px;line-height:17px}
.pad-number{min-width:14px;text-align:right;font-variant-numeric:tabular-nums}
.fx-symbol{width:24px;height:14px;flex:none;color:#b89bdc;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:color 100ms,filter 100ms}
.fx-symbol text{fill:currentColor;stroke:none;font:9px ui-monospace,Menlo,monospace;letter-spacing:-.5px}
.fx-symbol text.fx-tiny{font-size:6px;paint-order:stroke;stroke:#291a38;stroke-width:2px}
.fx-held .fx-symbol{color:#dcc1ff}
.pad-cell.fx-active .fx-symbol{color:#fff0ff;filter:drop-shadow(0 0 3px #b77cff)}
.pad-cell.fx-active .pad-number{color:#eddaff}

/* Readable on-device editing, with the same LCD proportions on every finish. */
.lcd-frame{height:184px}
@media(max-width:1100px){.lcd-frame{height:168px}}

/* Eight complete hardware finishes; the screen retains consistent contrast. */
.instrument-area{--case-h:274;--case-s:35%;--case-l:15%;--case-ink:#e4cfff;--case-muted:#baa0d3;--case-accent:#bb91f2;--case-trace:#ffffff15}
.instrument-area .device,.instrument-area .hanger{background:linear-gradient(120deg,hsl(var(--case-h) var(--case-s) calc(var(--case-l) + 8%)),hsl(var(--case-h) var(--case-s) var(--case-l)) 38%,hsl(var(--case-h) var(--case-s) calc(var(--case-l) + 3%)) 78%,hsl(var(--case-h) var(--case-s) calc(var(--case-l) + 10%)));border-color:hsl(var(--case-h) 24% calc(var(--case-l) + 22%));box-shadow:inset 1px 1px 1px hsl(var(--case-h) 25% calc(var(--case-l) + 35%)),inset -2px -2px 1px #0006,0 18px 42px -8px #000c}
.instrument-area .hanger:after{background:hsl(var(--case-h) var(--case-s) var(--case-l))}
.instrument-area .hanger{box-shadow:inset 0 1px 2px #fff5,0 5px 10px #0005;color:var(--case-ink)}
.instrument-area .pcb-traces{opacity:.65;background:repeating-linear-gradient(0deg,transparent 0 29px,var(--case-trace) 30px 31px,transparent 32px),repeating-linear-gradient(90deg,transparent 0 53px,var(--case-trace) 54px 55px)}
.instrument-area .device-heading,.instrument-area .device-heading b,.instrument-area .md-monogram small,.instrument-area .control-label,.instrument-area .pad-cell .control-label,.instrument-area .control-cell:has(.accent)>.control-label{color:var(--case-ink);text-shadow:none}
.instrument-area .device-foot,.instrument-area .control-label em,.instrument-area .fx-symbol{color:var(--case-muted)}
.instrument-area .pad-cell.row-start:before{color:var(--case-ink);border-color:var(--case-muted)}
.instrument-area .fx-held .fx-symbol,.instrument-area .pad-cell.fx-active .pad-number{color:var(--case-ink)}
.instrument-area .pad-cell.fx-active .fx-symbol{color:var(--case-accent);filter:drop-shadow(0 0 2px #0008)}
.instrument-area .switch{background:linear-gradient(135deg,#e9e8ec,#bdbac5 70%,#8b8495);border-color:#8d8795;box-shadow:inset 1px 1px #fff9,inset -2px -2px #79747f,0 3px 2px #0009}
.instrument-area .switch i{background:linear-gradient(135deg,#41404b,#1e1c27);box-shadow:inset 0 1px 2px #000b,inset 0 -1px 1px #fff3}
.instrument-area .accent .switch{background:linear-gradient(135deg,var(--case-accent),hsl(var(--case-h) 45% 40%));border-color:var(--case-accent)}
.instrument-area .accent:before{background:var(--case-accent)}
.instrument-area .striped .switch{background:repeating-linear-gradient(125deg,#d3cedb 0 2px,#514a5e 2px 3px);border-color:#bcb4c8}
.instrument-area .pad-led{background:hsl(var(--case-h) 20% 29%);border-color:#0006}
.instrument-area .pad-cell.lit .pad-led{background:var(--case-accent);box-shadow:0 0 3px var(--case-accent)}
.instrument-area .pad-cell.current .pad-led,.instrument-area .pad-cell.hit .pad-led{background:#fff8ed;box-shadow:0 0 7px var(--case-accent)}
.instrument-area .knob{background:linear-gradient(120deg,#777581,#e3e0e9,#7d778b)}
.instrument-area .knob-cap{background:radial-gradient(circle at 38% 30%,#f1edf4,#d6d0df 45%,#9c94aa 75%,#ddd6e6 80%,#4d465a 85%,#bcb5c8 90%)}
.instrument-area .knob-letter{background:hsl(var(--case-h) var(--case-s) var(--case-l));color:var(--case-ink);border-color:var(--case-muted)}
.finish-picker{width:100%;margin:17px 0 0;padding:0 5px;border:0;min-width:0}
.finish-picker legend{width:100%;padding:0;display:flex;justify-content:space-between;gap:8px;color:#a79bb8;font:8px ui-monospace,Menlo,monospace;letter-spacing:.8px}
.finish-picker legend span{color:#e2d6ef;letter-spacing:0}
.finish-swatches{display:flex;justify-content:space-between;gap:6px;margin-top:11px}
.finish-swatch{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid #ffffff45;background:var(--swatch);box-shadow:inset 0 1px 1px #fff7,0 2px 4px #0008;padding:0;font-size:16px}
.finish-swatch[aria-pressed=true]:after{content:'';position:absolute;inset:-4px;border:1px solid #e1ccff;border-radius:inherit}
.finish-swatch:hover{border-color:#f5eaff}
.instrument-area[data-finish=banana] .device{background:radial-gradient(circle at 6% 28%,#ff64bd 0 4px,transparent 5px),radial-gradient(circle at 91% 65%,#38dec8 0 6px,transparent 7px),repeating-linear-gradient(145deg,#f9e544 0 20px,#ffef74 20px 40px);border-color:#ff8ab4}
.instrument-area[data-finish=banana] .accent .switch{background:linear-gradient(135deg,#ffb0d7,#f557ac)}
.instrument-area[data-finish=banana] .knob-cap{background:radial-gradient(circle at 38% 30%,#b7fff3,#4be4d7 55%,#188f9b 82%,#a5f5eb 87%)}
.instrument-area[data-finish=banana] .device-foot:after{content:'100% BANANALOG';position:absolute;bottom:25px;right:13px;transform:rotate(-8deg);font:bold 7px ui-monospace,monospace;background:#ff9ace;color:#4c244a;padding:3px 4px;border:1px dashed #8b396c;pointer-events:none}