@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/fef07dbb0973bf53-s.12tyk43_3sh9u.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/8a480f0b521d4e75-s.0jzbimsg8vl84.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/53b9e256198e5412-s.0-wfv7uh4i7h9.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7178b3e590c64307-s.0nx0ww8fni_q3.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/caa3a2e1cccd8315-s.p.09~u27dqhyhd6.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Fallback;src:local(Arial);ascent-override:95.94%;descent-override:28.16%;line-gap-override:0.0%;size-adjust:104.76%}.geist_dbbf8c4b-module__5qCx7q__className{font-family:Geist,Geist Fallback;font-style:normal}.geist_dbbf8c4b-module__5qCx7q__variable{--font-geist:"Geist", "Geist Fallback"}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/5ce348bf30bf5439-s.0zgw-jeven.3w.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/4fa387ec64143e14-s.0wkzw~je483f-.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/6306c77e7c8268e4-s.0rhz0arwfsn~5.woff2)format("woff2");unicode-range:U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7d817b4c03b0c5f1-s.0l76wvqk9d84w.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/bbc41e54d2fcbd21-s.0k4k9394f2q-k.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/797e433ab948586e-s.p.08e28id.o-okb.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Mono Fallback;src:local(Arial);ascent-override:74.67%;descent-override:21.92%;line-gap-override:0.0%;size-adjust:134.59%}.geist_mono_3342dced-module__ksAy2q__className{font-family:Geist Mono,Geist Mono Fallback;font-style:normal}.geist_mono_3342dced-module__ksAy2q__variable{--font-mono:"Geist Mono", "Geist Mono Fallback"}
@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.relative{position:relative}.start{inset-inline-start:var(--spacing)}.table{display:table}.resize{resize:both}}:root{--ink:#170d21;--violet-950:#180b26;--violet-900:#241039;--violet-800:#35194f;--violet-700:#4b246b;--violet-500:#8852aa;--panel:#7f4ca1;--key:#eee9ee;--key-shadow:#b7adb9}*{box-sizing:border-box}html{background:var(--violet-950)}body{color:#f4edf7;min-width:320px;font-family:var(--font-geist), system-ui, sans-serif;background:radial-gradient(circle at 52% 14%,#824b9f38,#0000 32%),linear-gradient(155deg,#160a22 0%,#251037 48%,#13081d 100%);min-height:100vh;margin:0;overflow-x:hidden}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}.app-shell{flex-direction:column;gap:18px;min-height:100vh;padding:18px 24px 22px;display:flex}.topbar{grid-template-columns:1fr auto 1fr;align-items:center;width:100%;max-width:1800px;height:52px;margin:auto;display:grid}.window-dots{align-items:center;gap:12px;display:flex}.window-dots i{border-radius:50%;width:15px;height:15px;display:block;box-shadow:0 2px 8px #0008,inset 0 1px 1px #fff7}.window-dots i:first-child{background:#ff5f65}.window-dots i:nth-child(2){background:#ffc432}.window-dots i:nth-child(3){background:#43d17c}.wordmark{color:#fff;letter-spacing:.16em;align-items:center;gap:10px;text-decoration:none;display:flex}.wordmark b{font-size:12px;display:block}.wordmark small{font:8px var(--font-mono);opacity:.52;letter-spacing:.22em;margin-top:2px;display:block}.brand-logo{border-radius:9px;width:32px;height:32px;box-shadow:0 4px 14px #0008,inset 0 1px #fff4}.top-actions{justify-self:end;align-items:center;gap:10px;display:flex}.device-pill{font:10px var(--font-mono);color:#b4a7c1;white-space:nowrap;text-overflow:ellipsis;background:#0003;border:1px solid #ffffff17;border-radius:999px;max-width:210px;padding:8px 11px;overflow:hidden}.device-pill i,.live-dot i{background:#8e7d9c;border-radius:50%;width:6px;height:6px;margin-right:6px;display:inline-block}.device-pill.connected i,.live-dot.connected i{background:#60dda9;box-shadow:0 0 8px #60dda9}.device-pill.error i,.live-dot.error i{background:#ff7689}.connect-button{cursor:pointer;background:linear-gradient(#8e5ab0,#633980);border:1px solid #b978db;border-radius:10px;padding:8px 14px;font-size:11px;font-weight:700;box-shadow:inset 0 1px #ffffff45,0 6px 20px #0005}.instrument{background:radial-gradient(circle at 67% -12%, var(--mood-soft), transparent 37%), linear-gradient(145deg, #a66bc3 0%, #754496 28%, #512b70 68%, #3b2055 100%);width:min(1800px,100%);box-shadow:inset 0 2px 2px #ffffff6b, inset 0 -6px 12px #230f3888, 0 28px 80px #050207a3, 0 0 0 5px #261436, 0 0 36px var(--mood);border:1px solid #c58ad7;border-radius:30px;margin:auto;padding:14px}@supports (color:color-mix(in lab, red, red)){.instrument{box-shadow:inset 0 2px 2px #ffffff6b, inset 0 -6px 12px #230f3888, 0 28px 80px #050207a3, 0 0 0 5px #261436, 0 0 36px color-mix(in srgb, var(--mood) 30%, transparent)}}.instrument{transition:background .45s,box-shadow .45s;overflow:hidden}.top-deck{background:#714092;border:1px solid #3a1d50;grid-template-columns:270px 420px 1fr 96px;min-height:218px;display:grid}.speaker-zone{border-right:2px solid #3c1e52;grid-template-columns:1fr 88px;display:grid}.speaker{place-items:center;min-height:218px;display:grid;position:relative}.speaker:before{content:"";aspect-ratio:1;background:radial-gradient(circle,#0000 0 16%,#260f38 17% 24%,#0000 25%),radial-gradient(circle at 38% 38%,#57326c,#200d31 62%,#0c0613);border-radius:50%;width:142px;box-shadow:inset 0 0 24px #000,0 7px 18px #321348,0 0 0 5px #ffffff10}.speaker-logo{border-radius:19px;width:72px;height:72px;position:absolute;box-shadow:0 6px 18px #0009,inset 0 1px #fff5}.utility-stack{border-left:1px solid #3c1e52;grid-template-columns:1fr 1fr;gap:9px;padding:10px;display:grid}.utility-stack button,.utility-stack a,.side-stack button,.mode-pads button,.sound-pads button,.step-pads button,.more-button,.transport button{color:#2c2630;cursor:pointer;-webkit-user-select:none;user-select:none;background:linear-gradient(145deg,#f2eef2,#c7bec9);border:1px solid #a599a5;border-radius:11px;flex-direction:column;justify-content:center;align-items:center;gap:4px;text-decoration:none;display:flex;box-shadow:inset 0 1px #fff,inset 0 -3px 5px #91889370,0 3px 5px #2c153e99}.utility-stack button:active,.utility-stack a:active,.mode-pads button:active,.sound-pads button:active,.step-pads button:active,.transport button:active{transform:translateY(2px);box-shadow:inset 0 2px 5px #716b76}.utility-stack small,.side-stack small,.mode-pads small,.sound-pads small,.step-pads small,.more-button small,.transport small{font:7px var(--font-mono);letter-spacing:.1em;opacity:.55}.mini-knob{background:radial-gradient(circle at 35% 30%,#777,#29272a 70%);border-radius:50%;width:28px;height:28px;box-shadow:0 0 0 5px #ddd6dc,0 2px 4px #0008}.display{background:#07070a;border:4px solid #321a47;min-width:0;margin:0;padding:9px 13px;position:relative;overflow:hidden;box-shadow:inset 0 0 18px #000}.display-head{color:#d6d2d8;font:8px var(--font-mono);letter-spacing:.13em;justify-content:space-between;display:flex}.display-head i{background:#55d2e3;border-radius:50%;width:6px;height:6px;display:inline-block;box-shadow:0 0 6px #55d2e3}.display-head b{color:#fff;font-size:6px}.scope{place-items:center;height:137px;display:grid;position:relative}.rings{border:1px solid #22222a;border-radius:50%;place-items:center;width:108px;height:108px;display:grid;position:relative}.rings i{border:1px solid #1e1f25;border-radius:50%;width:76%;height:76%;position:absolute}.rings i:nth-child(2){width:50%;height:50%}.rings i:nth-child(3){width:22%;height:22%}.rings span{color:#e7e3e8;font:10px var(--font-mono)}.live-waveform{filter:saturate(1.25)contrast(1.08);width:100%;height:calc(100% - 8px);display:block;position:absolute;inset:4px 0}.display-foot{font:7px var(--font-mono);text-align:center;color:#ddd6df;grid-template-columns:repeat(4,1fr);line-height:1.35;display:grid}.display-foot b{color:inherit;font-size:8px}.mini-panel{z-index:5;color:#dcd8df;background:linear-gradient(145deg,#111017f5,#07070af7);border:1px solid #ffffff1c;border-radius:9px;padding:9px;position:absolute;inset:25px 10px;box-shadow:0 12px 34px #000d,inset 0 1px #ffffff12}.mini-panel-head{color:#8fe0ed;font:8px var(--font-mono);letter-spacing:.14em;justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.mini-panel-head button{color:#bdb5c2;cursor:pointer;background:#ffffff08;border:1px solid #ffffff18;border-radius:5px;width:20px;height:20px}.key-mode-options,.step-panel{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.key-mode-options button,.panel-actions button,.step-panel button{color:#a69dac;cursor:pointer;background:#ffffff08;border:1px solid #ffffff19;border-radius:7px;min-height:55px}.key-mode-options button b,.key-mode-options button small,.step-panel button b,.step-panel button small{display:block}.key-mode-options button b,.step-panel button b{color:#e6e0e8;font-size:10px}.key-mode-options button small,.step-panel button small{font:7px var(--font-mono);opacity:.55;margin-top:5px}.mini-panel .panel-active{border-color:var(--mood);color:#fff;background:var(--mood-soft);box-shadow:0 0 12px var(--mood-soft)}.loop-meta{font:8px var(--font-mono);color:#978e9c;justify-content:space-between;display:flex}.loop-meta .recording{color:#ff667c}.loop-meta .playing{color:#66dfa8}.loop-track{border-radius:5px;grid-template-columns:repeat(8,1fr);gap:3px;height:37px;margin:10px 0;display:grid;position:relative;overflow:hidden}.loop-track i{background:#ffffff0b;border:1px solid #ffffff12}.loop-track i.now{background:var(--mood-soft);border-color:var(--mood)}.loop-track span{background:var(--mood);height:3px;box-shadow:0 0 8px var(--mood);transition:width 40ms linear;position:absolute;inset:auto auto 0 0}.panel-actions{grid-template-columns:1.3fr 1fr 1fr;gap:5px;display:grid}.panel-actions button{min-height:27px;font:8px var(--font-mono)}.fx-panel{gap:8px;display:grid}.fx-panel label{font:8px var(--font-mono);grid-template-columns:38px 1fr 24px;align-items:center;gap:7px;display:grid}.fx-panel input{accent-color:var(--mood);width:100%}.fx-panel b{color:var(--mood);text-align:right}.step-panel{grid-template-columns:1fr 1fr}.step-panel>div{text-align:center;grid-column:1/3;grid-template-columns:34px 1fr 34px;align-items:center;display:grid}.step-panel>div button{min-height:28px}.step-panel strong{font:10px var(--font-mono);color:var(--mood)}.step-panel .step-run{grid-column:1/3;min-height:26px}.knob-row{grid-template-columns:repeat(4,1fr);display:grid}.knob-cell{cursor:ns-resize;border-right:1px solid #3d1f54;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-width:0;display:flex;position:relative}.knob{background:radial-gradient(circle at 37% 30%,#615e61,#2e2d2f 62%,#191819 64%);border-radius:50%;width:78px;height:78px;display:block;position:relative;box-shadow:0 0 0 11px #d9d3d8,inset 0 2px 3px #fff4,0 9px 13px #321b4288}.knob:before{content:"";border:2px solid #0000;border-top-color:var(--accent);transform:rotate(calc(var(--turn) + 90deg));filter:drop-shadow(0 0 3px var(--accent));border-radius:50%;position:absolute;inset:-14px}.knob-mark{transform-origin:50% 34px;width:3px;height:23px;transform:rotate(var(--turn));background:#ddd;border-radius:3px;position:absolute;top:5px;left:calc(50% - 1px)}.knob-cell input{opacity:0;cursor:ns-resize;position:absolute;inset:20% 8%}.knob-label{font:7px var(--font-mono);letter-spacing:.14em;color:#d8c8df;margin-top:4px}.knob-cell strong{font:8px var(--font-mono);color:var(--accent)}.side-stack{grid-template-rows:1fr 1fr;gap:10px;padding:10px;display:grid}.side-stack button{font:11px var(--font-mono)}.side-stack .side-active{color:#245745;box-shadow:inset 0 1px #fff,inset 0 -3px 5px #91889370,0 0 13px #53e4a287}.pad-row{background:#4e2a69;border:1px solid #2f173f;grid-template-columns:430px 400px 1fr 96px;min-height:86px;display:grid}.mode-pads,.sound-pads,.step-pads{border-right:2px solid #311841;gap:7px;padding:8px;display:grid}.mode-pads{grid-template-columns:repeat(5,1fr)}.sound-pads{grid-template-columns:repeat(4,1fr)}.step-pads{grid-template-columns:repeat(8,1fr)}.mode-pads button,.sound-pads button,.step-pads button{border-radius:10px;min-width:0}.mode-pads button span{font-size:20px}.sound-pads button b,.step-pads button b{font:22px var(--font-mono);font-weight:400}.mode-pads .active-pad{background:linear-gradient(145deg,#dff6fa,#accbd0);border-color:#66d6ee;box-shadow:inset 0 1px #fff,0 0 0 3px #66d6ee85,0 3px 5px #2c153e99}.sound-pads button b{font-size:13px}.sound-pads button{border-color:var(--pad-color);position:relative;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.sound-pads button{border-color:color-mix(in srgb, var(--pad-color) 42%, #9e929f)}}.sound-pads button{background:linear-gradient(145deg, #f7f2f6, var(--pad-color))}@supports (color:color-mix(in lab, red, red)){.sound-pads button{background:linear-gradient(145deg, #f7f2f6, color-mix(in srgb, var(--pad-color) 24%, #c7bec9))}}.sound-pads button:before{content:"";background:var(--pad-color);filter:blur(12px);opacity:.28;border-radius:50%;transition:opacity .25s,transform .25s;position:absolute;inset:55% 5% -24%}.sound-pads button>*{z-index:1;position:relative}.sound-pads .selected{color:#2f2030;border-color:var(--pad-color);background:linear-gradient(145deg, #fff, var(--pad-color))}@supports (color:color-mix(in lab, red, red)){.sound-pads .selected{background:linear-gradient(145deg, #fff, color-mix(in srgb, var(--pad-color) 50%, #d8cfd8))}}.sound-pads .selected{box-shadow:inset 0 1px #fff, 0 0 0 3px var(--pad-color), 0 0 24px var(--pad-color), 0 3px 5px #2c153e99}@supports (color:color-mix(in lab, red, red)){.sound-pads .selected{box-shadow:inset 0 1px #fff, 0 0 0 3px color-mix(in srgb, var(--pad-color) 72%, transparent), 0 0 24px color-mix(in srgb, var(--pad-color) 76%, transparent), 0 3px 5px #2c153e99}}.sound-pads .selected{transform:translateY(-1px)}.sound-pads .selected:before{opacity:.82;transform:scale(1.22)}.step-pads .armed{color:#70495b}.step-pads .step-on{color:#382532;border-color:var(--mood);background:linear-gradient(145deg, #fff, var(--mood))}@supports (color:color-mix(in lab, red, red)){.step-pads .step-on{background:linear-gradient(145deg, #fff, color-mix(in srgb, var(--mood) 48%, #c7bec9))}}.step-pads .step-on{box-shadow:0 0 14px var(--mood);transform:translateY(2px)}.more-button{margin:8px;font-size:17px}.mode-pads .loop-active span,.transport .recording{color:#df3658;animation:1s ease-in-out infinite recordPulse}@keyframes recordPulse{50%{opacity:.42;filter:drop-shadow(0 0 6px #ff4c6d)}}.lower-deck{background:#402157;border:1px solid #2c153a;grid-template-columns:340px minmax(0,1fr);min-height:252px;display:grid}.transport{border-right:2px solid #2d163d;grid-template-rows:repeat(3,1fr);gap:8px;padding:10px;display:grid}.transport>div{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.transport button{font-size:18px}.transport .playing{color:#7e3f56;box-shadow:inset 0 2px 5px #a48d95,0 0 14px #ff789775}.nav-row span{font:11px var(--font-mono)}.keyboard-wrap{scrollbar-width:thin;scrollbar-color:#785487 #2c1738;background:#b4adb4;overflow:auto hidden}.scale-bank{padding:10px;display:block}.scale-bank .scale-grid{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:8px;height:100%;display:grid}.scale-bank .scale-grid button{background:linear-gradient(145deg, #f4eff3, var(--scale-a));font-size:12px;position:relative;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.scale-bank .scale-grid button{background:linear-gradient(145deg, #f4eff3, color-mix(in srgb, var(--scale-a) 20%, #c9c0c9))}}.scale-bank .scale-grid button:before{content:"";background:linear-gradient(90deg, var(--scale-a), var(--scale-b));width:82%;height:7px;box-shadow:0 0 9px var(--scale-b);opacity:.66;border-radius:99px;position:absolute;bottom:7px;left:9%}.scale-bank .scale-grid button>*{z-index:1;position:relative}.scale-bank .scale-grid .scale-selected{color:#2c2430;border-color:var(--scale-b);box-shadow:inset 0 1px #fff, 0 0 0 3px var(--scale-b), 0 0 18px var(--scale-a)}@supports (color:color-mix(in lab, red, red)){.scale-bank .scale-grid .scale-selected{box-shadow:inset 0 1px #fff, 0 0 0 3px color-mix(in srgb, var(--scale-b) 50%, transparent), 0 0 18px var(--scale-a)}}.scale-bank .scale-grid .scale-selected{transform:translateY(-1px)}.scale-bank .scale-grid .scale-selected:before{opacity:1;filter:saturate(1.3);height:12px}.keyboard{touch-action:none;min-width:960px;height:100%;position:relative}.white-keys{height:100%;display:flex}.white-keys button{cursor:pointer;background:linear-gradient(90deg,#c7c3c7,#f7f4f5 26%,#e2dfe1 78%,#aaa5aa);border:1px solid #655f66;border-top:0;border-radius:0 0 9px 9px;flex:1;position:relative;box-shadow:inset 0 -14px 15px #837d838c,0 4px 5px #181018}.white-keys button span{font:8px var(--font-mono);color:#786f79;position:absolute;bottom:12px;left:0;right:0}.black-keys{pointer-events:none;position:absolute;inset:0}.black-keys button{pointer-events:auto;cursor:pointer;background:linear-gradient(90deg,#161416,#302d30 45%,#0a090a);border:1px solid #0a080a;border-radius:0 0 8px 8px;width:4.6%;height:52%;margin-left:-2.3%;position:absolute;box-shadow:inset 0 -8px 9px #000,inset 0 2px #ffffff18,0 6px 6px #0008}.white-keys button.guided:not(.pressed){background:linear-gradient(90deg, var(--guide), #fff 34%, var(--guide))}@supports (color:color-mix(in lab, red, red)){.white-keys button.guided:not(.pressed){background:linear-gradient(90deg, color-mix(in srgb, var(--guide) 38%, #c7c3c7), #fff 34%, color-mix(in srgb, var(--guide) 64%, #ddd))}}.white-keys button.guided:not(.pressed){box-shadow:inset 0 -8px 14px var(--guide), 0 0 12px var(--guide)}@supports (color:color-mix(in lab, red, red)){.white-keys button.guided:not(.pressed){box-shadow:inset 0 -8px 14px color-mix(in srgb, var(--guide) 58%, transparent), 0 0 12px var(--guide)}}.white-keys button.guided:not(.pressed):after{content:"";background:var(--guide);height:5px;box-shadow:0 0 10px 3px var(--guide);border-radius:99px;position:absolute;bottom:20px;left:18%;right:18%}.black-keys button.guided:not(.pressed){background:linear-gradient(90deg, #151317, var(--guide) 54%, #0b090c);box-shadow:inset 0 -8px 9px #000, 0 0 15px 2px var(--guide)}.white-keys button.pressed{background:linear-gradient(90deg, var(--mood), #fff 35%, var(--mood))}@supports (color:color-mix(in lab, red, red)){.white-keys button.pressed{background:linear-gradient(90deg, color-mix(in srgb, var(--mood) 58%, #aaa), #fff 35%, color-mix(in srgb, var(--mood) 72%, #eee))}}.white-keys button.pressed{box-shadow:inset 0 0 18px var(--mood), 0 2px 2px #181018;transform:translateY(2px)}.black-keys button.pressed{background:linear-gradient(90deg, #39283b, var(--mood) 52%, #2d202f);box-shadow:0 0 14px var(--mood), inset 0 -6px 7px #000;transform:translateY(2px)}.statusbar{color:#8e7e9c;width:min(1800px,100%);font:9px var(--font-mono);letter-spacing:.04em;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin:auto;display:grid}.statusbar>span:nth-child(2){text-align:center}.statusbar a{color:#bda5ca;justify-self:end;text-decoration:none}.statusbar a:hover{color:#fff}@media (max-width:1120px){.top-deck{grid-template-columns:220px 360px 1fr 82px}.speaker-zone{grid-template-columns:1fr 76px}.speaker:before{width:110px}.pad-row{grid-template-columns:390px 340px minmax(480px,1fr) 82px;overflow-x:auto}.lower-deck{grid-template-columns:280px minmax(0,1fr)}.knob{width:62px;height:62px}.knob-mark{transform-origin:50% 27px;height:18px}}@media (max-width:840px){.app-shell{gap:12px;padding:12px}.topbar{grid-template-columns:auto 1fr}.wordmark{justify-self:end}.top-actions{grid-column:1/3;justify-content:space-between;justify-self:stretch;margin-top:10px}.topbar{height:92px}.instrument{border-radius:20px;padding:9px}.top-deck{grid-template-columns:1fr 78px}.speaker-zone{display:none}.display{grid-column:1}.knob-row{grid-column:1/3;min-height:150px}.side-stack{grid-area:1/2}.pad-row{grid-template-columns:390px 340px 620px 82px}.lower-deck{grid-template-columns:230px minmax(700px,1fr);overflow-x:auto}.statusbar{grid-template-columns:1fr auto}.statusbar>span:nth-child(2){display:none}.knob{width:58px;height:58px}.knob-mark{transform-origin:50% 25px;height:17px}}@media (max-width:560px){.device-pill{max-width:155px}.connect-button{padding-inline:10px}.display,.top-deck{min-width:0}.display-foot{font-size:6px}.knob-row{min-width:490px}.top-deck{overflow-x:auto}.lower-deck{grid-template-columns:190px minmax(700px,1fr)}.statusbar{font-size:8px}.brand-logo{border-radius:8px;width:28px;height:28px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}