:root{--bezel: #15170d;--face-top: #444a35;--face-bot: #363b29;--panel: #3e4430;--panel-line: #2b3020;--lcd-bg: #15180e;--lcd-edge: #0c0e07;--cream: #e3dfc9;--cream-dim: #b3ad97;--cream-faint: #6f6b58;--cream-rim: #b5b09a;--pointer: #534d3a;--lcd: #ffa62c;--lcd-hi: #ffc153;--lcd-ghost: rgba(255, 150, 50, .05);--lcd-glow: rgba(255, 166, 44, .5);--lamp: #ffa62c;--lamp-off: #4a3a1e;--lamp-glow: rgba(255, 166, 44, .55);--green: #76bb3c;--green-glow: rgba(118, 187, 60, .55);--orange: #c8612a;--orange-dim: #a04d1f;--label: #c9c5b0;--label-dim: #b0ac98;--r-face: 36px;--r-screen: 22px;--r-tile: 14px;--font: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--mono: ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--bezel)}body{font-family:var(--font);color:var(--cream);background:radial-gradient(130% 90% at 50% 0%,#1a1b15 0%,var(--bezel) 70%) fixed;-webkit-user-select:none;user-select:none;overscroll-behavior:none}#root{min-height:100dvh;display:flex;justify-content:center}.face{position:relative;width:100%;max-width:440px;height:100%;padding:calc(env(safe-area-inset-top) + 28px) 24px calc(env(safe-area-inset-bottom) + 18px);display:flex;flex-direction:column;gap:8px;background:linear-gradient(178deg,var(--face-top) 0%,var(--face-bot) 100%);box-shadow:inset 0 1px #ffffff12,inset 0 -2px #0006}.face__product{position:absolute;top:calc(env(safe-area-inset-top) + 6px);right:26px;z-index:6;font-size:11px;font-weight:700;letter-spacing:.24em;text-indent:.24em;color:var(--orange)}.face__sub{position:absolute;top:calc(env(safe-area-inset-top) + 8px);left:24px;z-index:6;font-size:8.5px;font-weight:700;letter-spacing:.13em;text-indent:.13em;color:var(--label-dim, #8a7a52)}@media(min-width:460px){.face{margin:18px 0;height:auto;min-height:auto;border-radius:var(--r-face);border:1px solid rgba(0,0,0,.5);box-shadow:inset 0 1px #ffffff14,0 30px 70px -22px #000c}}.panel-rule{flex:0 0 auto;height:1px;border:0;background:var(--panel-line)}.screen{position:relative;background:var(--lcd-bg);border-radius:var(--r-screen);padding:12px 22px 10px;box-shadow:inset 0 0 0 1px var(--lcd-edge);display:flex;flex-direction:column;gap:6px;overflow:hidden}.sound{display:flex;flex-direction:column;align-items:center;gap:8px}.sound__label{font-size:13px;font-weight:600;letter-spacing:.34em;text-indent:.34em;color:var(--label)}.sound__seg{display:flex;align-items:stretch;border:1px solid rgba(199,180,140,.32);border-radius:999px;overflow:hidden}.sound__opt{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:86px;padding:8px 18px 7px;border:none;background:transparent;color:var(--cream-dim);font-size:13px;font-weight:700;letter-spacing:.1em;cursor:pointer}.sound__opt+.sound__opt{border-left:1px solid rgba(199,180,140,.18)}.sound__lamp{width:7px;height:7px;border-radius:50%;background:var(--lamp-off);box-shadow:inset 0 0 0 1px #00000059;transition:background .15s,box-shadow .15s}.sound__lamp--on{background:var(--lamp);box-shadow:0 0 6px var(--lamp-glow)}.screen__readouts{display:flex;justify-content:center;align-items:flex-start;gap:30px}.readout-col{display:flex;flex-direction:column;align-items:center;gap:8px;border:none;background:none;padding:0}.readout-col--btn{cursor:pointer;border-radius:8px;transition:background .12s}.readout-col--btn:active{background:#ffa62c14}.readout-col__label{font-size:12px;font-weight:600;letter-spacing:.32em;text-indent:.32em;color:var(--orange)}.num{font-family:"Saira",var(--font);font-weight:500;font-variant-numeric:tabular-nums;line-height:.9;letter-spacing:-.01em;color:var(--lcd);text-shadow:0 0 6px var(--lcd-glow)}.num--readout{font-size:clamp(52px,8.5dvh,70px)}.num--time{font-size:clamp(40px,6.5dvh,54px)}.num--note{font-size:clamp(120px,42vw,215px)}.num--oct{font-size:clamp(30px,11vw,52px)}.num--ghost{color:var(--lcd-ghost);text-shadow:none;opacity:.6}.lcd-num__row{display:flex;align-items:center;gap:3px}.lcd-digit{height:clamp(52px,7.4dvh,66px);width:clamp(33px,4.6dvh,41px);display:block}.lcd-digit--slash{width:24px}.lcd-space{width:14px}.seg{fill:var(--lcd-ghost)}.seg--on{fill:var(--lcd);filter:drop-shadow(0 0 4px var(--lcd-glow))}.lamps{display:flex;justify-content:center;gap:5px;width:fit-content;margin:0 auto;padding:6px 8px;border:1px solid var(--lcd-edge);border-radius:8px}.lamp{width:18px;height:9px;border-radius:2px;background:#ffa62c26;transition:background .05s linear,box-shadow .05s linear}.lamp--down{width:18px;height:9px}.lamp--on{background:var(--lcd);box-shadow:0 0 6px var(--lcd-glow)}.dial-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.dial-cap{font-size:14px;font-weight:600;letter-spacing:.34em;text-indent:.34em;color:var(--label)}.dial-body{position:relative;width:100%;flex:1 1 0;min-height:0;display:flex;justify-content:center;align-items:center}.dial-end{position:absolute;top:14%;font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--label)}.dial-end--slow{left:4%}.dial-end--fast{right:4%}.dial{width:min(86vw,360px);height:100%;max-height:min(86vw,360px);position:relative;touch-action:none;cursor:grab}.dial:active{cursor:grabbing}@media(min-width:460px){.dial-body{flex:0 0 auto}.dial{width:300px;height:300px;max-height:none}}.dial__svg{width:100%;height:100%;display:block;overflow:visible}.tick{stroke:var(--cream-faint);stroke-width:1.4;stroke-linecap:round}.tick--major{stroke:var(--cream-dim);stroke-width:2}.dial__knob{fill:var(--cream);filter:drop-shadow(0 3px 5px rgba(0,0,0,.34))}.dial__ring{fill:none}.dial__ring--outer{stroke:var(--cream-rim);stroke-width:1.5}.dial__ring--inner{stroke:#00000029;stroke-width:1}.dial__notch{stroke:var(--pointer);stroke-width:3;stroke-linecap:round}.dial__hint{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:clamp(24px,6.5vw,30px);font-weight:600;letter-spacing:.22em;text-indent:.22em;color:#5b584b;pointer-events:none}.presets{display:flex;flex-direction:column;gap:10px}.presets__head{display:flex;align-items:center;gap:14px}.presets__rule{flex:1;height:1px;background:#b898634d}.presets__title{font-size:13px;font-weight:600;letter-spacing:.34em;text-indent:.34em;color:var(--label)}.presets__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.preset{--preset-color: #7c8950;position:relative;height:clamp(52px,7.2dvh,76px);padding-top:16px;border:none;border-radius:var(--r-tile);background:var(--preset-color);color:#f3eedd;font-size:16px;font-weight:700;letter-spacing:.06em;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #00000038;transition:transform .06s,box-shadow .06s,filter .1s}.preset:active{transform:translateY(1px);filter:brightness(.95);box-shadow:0 1px 2px #00000038}.preset--active{filter:brightness(1.07)}.preset__led{position:absolute;top:12px;left:50%;transform:translate(-50%);width:9px;height:9px;border-radius:50%;background:var(--lamp-off);box-shadow:inset 0 0 0 1px #00000040}.preset__led--on{background:var(--lamp);box-shadow:0 0 6px var(--lamp-glow)}.preset__name{margin:0}.transport{position:relative;height:clamp(56px,8.5dvh,84px);border:none;border-radius:var(--r-tile);background:var(--cream);color:#3c3a30;font-size:22px;font-weight:700;letter-spacing:.14em;text-indent:.14em;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #00000047;transition:background .15s,transform .06s,box-shadow .06s,filter .1s}.transport:active{transform:translateY(1px);filter:brightness(.96);box-shadow:0 1px 2px #0000004d}.transport--on{background:#ece7d2}.transport__led{position:absolute;left:24px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:#463e2a8c;box-shadow:inset 0 1px 2px #00000080;transition:background .15s,box-shadow .15s}.transport__led--on{background:var(--green);box-shadow:0 0 8px var(--green-glow)}.brand{text-align:center;font-size:8.5px;font-weight:600;letter-spacing:.26em;text-indent:.26em;color:var(--cream-faint)}.pager{position:relative;width:100%;height:100dvh;overflow:hidden}.pager__track{display:flex;width:400%;height:100%;transition:transform .32s cubic-bezier(.22,.61,.36,1)}.pager__track--dragging{transition:none}.pager__page{width:25%;height:100%;overflow:hidden;touch-action:pan-y;display:flex;justify-content:center;align-items:flex-start}.pager__dots{position:absolute;top:calc(env(safe-area-inset-top) + 2px);left:50%;transform:translate(-50%);display:flex;gap:2px;z-index:7}.pager__dot{width:22px;height:22px;border:none;padding:0;background:transparent;cursor:pointer;position:relative}.pager__dot:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:#e7e0cc47;transition:background .2s}.pager__dot--on:before{background:var(--cream-dim)}.tuner{position:relative;gap:12px}.tuner__screen{position:relative;flex:1 1 auto;min-height:0;margin:4px;background:var(--lcd-bg);border-radius:var(--r-screen);box-shadow:inset 0 0 0 1px #000000b3,inset 0 3px 10px #000c,0 0 0 1px #ffffff0d,0 1px #ffffff0f;display:flex;flex-direction:column;align-items:stretch;padding:clamp(14px,3dvh,26px) 22px 16px;overflow:hidden}.tuner__zone-label{font-size:11px;font-weight:600;letter-spacing:.26em;text-indent:.26em;color:var(--label);text-align:center}.tuner__signal{display:flex;flex-direction:column;align-items:center;gap:6px}.tuner__signal-lamp{width:10px;height:10px;border-radius:50%;background:var(--lamp-off);box-shadow:inset 0 0 0 1px #ff963c29;transition:background .1s,box-shadow .1s}.tuner__signal-lamp--on{background:var(--lamp);box-shadow:0 0 8px var(--lamp-glow)}.tuner__meter{display:flex;flex-direction:column;gap:6px;padding-top:clamp(8px,2dvh,18px)}.tuner__axis{display:flex;flex-direction:column;gap:4px}.tuner__axis-row{display:flex;align-items:center;justify-content:space-between}.tuner__axis-end{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--cream-dim)}.tuner__axis-cents{flex:1;text-align:center;font-size:12px;font-weight:600;letter-spacing:.3em;text-indent:.3em;color:var(--label)}.tuner__axis-sub{font-size:17px;font-weight:600;color:var(--cream-dim);margin-top:-2px}.tuner__rule{height:1px;margin:clamp(10px,2.5dvh,22px) -4px;background:#ffffff0f}.tuner__readout{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.tuner__bottom{display:flex;justify-content:flex-end}.tune-arc{width:100%;max-width:340px;height:auto;display:block;overflow:visible;z-index:1}.tune-led{fill:#ff963c17;transition:fill .06s linear}.tune-led--green{fill:#78dc8221}.tune-led--red{fill:#dc5f4624}.tune-led--amber.tune-led--soft{fill:var(--lcd);opacity:.55}.tune-led--green.tune-led--soft{fill:var(--green);opacity:.5}.tune-led--red.tune-led--soft{fill:#d8654f;opacity:.5}.tune-led--amber.tune-led--on{fill:var(--lcd);filter:drop-shadow(0 0 4px var(--lcd-glow))}.tune-led--green.tune-led--on{fill:#9fe9a9;filter:drop-shadow(0 0 6px var(--green-glow))}.tune-led--red.tune-led--on{fill:#ef6a4f;filter:drop-shadow(0 0 6px rgba(232,96,64,.5))}.tune-arc__zero{fill:var(--cream-dim);font-family:var(--mono);font-size:21px;font-weight:700;text-anchor:middle}.tuner__note{display:flex;align-items:flex-start;justify-content:center;gap:4px;transition:opacity .15s;z-index:1}.tuner__note .lcd-digit{height:clamp(120px,40vw,210px);width:clamp(72px,24vw,128px)}.tuner__note--dim{opacity:.4}.tuner__note-blank{display:block;height:clamp(120px,40vw,210px);width:clamp(72px,24vw,128px)}.tuner__sharp{align-self:flex-start;margin-top:.1em;font-size:clamp(26px,9vw,46px);font-weight:700;color:#ff963c1f;transition:color .12s,text-shadow .12s}.tuner__sharp--on{color:var(--lcd);text-shadow:0 0 6px var(--lcd-glow)}.tuner__oct{align-self:flex-end;margin-bottom:.5em}.tuner__oct .lcd-digit{height:clamp(30px,11vw,52px);width:clamp(18px,7vw,32px)}.tuner__ref{border:1px solid rgba(200,97,42,.5);background:#c8612a12;color:var(--orange);border-radius:8px;padding:7px 12px;font-size:14px;font-weight:600;letter-spacing:.03em;cursor:pointer}.tuner__ref:active{background:#c8612a29}.tuner__enable{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:260px;padding:18px 22px;border:1px solid rgba(231,224,204,.18);border-radius:14px;background:#ffffff08;cursor:pointer}.tuner__enable-title{font-size:16px;font-weight:700;letter-spacing:.04em;color:var(--cream)}.tuner__enable-sub{font-size:12px;letter-spacing:.04em;color:var(--orange)}.tuner__enable:active{background:#ffffff0f}.face--build{justify-content:flex-start;gap:11px;padding-left:14px;padding-right:14px}.seq-grid{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;background:#13150c;border-radius:14px;padding:20px 12px 12px;box-shadow:inset 0 2px 6px #0009,inset 0 0 0 1px var(--lcd-edge);overflow:hidden}.seq-measure{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding-left:26px;margin-bottom:7px;position:relative;z-index:1}.seq-measure__b{text-align:center;font-size:13px;font-weight:800;text-shadow:0 0 6px currentColor}.seq-measure__b--on{filter:brightness(1.7);text-shadow:0 0 10px currentColor}.seq-rows{display:flex;flex-direction:column;position:relative;z-index:1}.seq-row{display:flex;align-items:center;margin-top:4px}.seq-row__id{width:26px;flex:0 0 26px;font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--label)}.seq-row__cells{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.seq-group{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.seq-step{height:clamp(40px,5.4dvh,50px);border:none;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}.seq-lens{width:15px;height:clamp(24px,4dvh,34px);border-radius:6px;background:#1f2415;box-shadow:inset 0 1px 2px #0009,inset 0 0 0 1px #ffffff08;transition:background .06s,box-shadow .06s}.seq-step--on .seq-lens{background:var(--lcd);box-shadow:0 0 8px var(--lcd-glow),0 0 3px var(--lcd),inset 0 0 0 1px var(--lcd-hi)}.seq-step:active .seq-lens{transform:scale(.93)}.seq-step--play .seq-lens{outline:1.5px solid rgba(118,187,60,.6);outline-offset:2px}.seq-step--on.seq-step--play .seq-lens{background:var(--lcd-hi)}.seq-zones{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding-left:26px;margin-top:8px;position:relative;z-index:1}.seq-zone{height:3px;border-radius:2px;opacity:.85}.seq-controls{display:flex;align-items:stretch;gap:11px;padding:0 2px;margin-top:auto}.seq-swing{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px}.seq-swing__cap{font-size:10px;font-weight:600;letter-spacing:.22em;text-indent:.22em;color:var(--label)}.seq-dial{width:72px;height:72px;cursor:grab;touch-action:none;display:block}.seq-dial:active{cursor:grabbing}.seq-dial__face{fill:var(--cream);filter:drop-shadow(0 2px 3px rgba(0,0,0,.32))}.seq-dial__ring{fill:none;stroke:var(--cream-rim);stroke-width:1.5}.seq-dial__notch{stroke:var(--pointer);stroke-width:3;stroke-linecap:round}.seq-transport{flex:1;border:none;border-radius:var(--r-tile);cursor:pointer;background:var(--cream);color:#3c3a30;font-size:17px;font-weight:700;letter-spacing:.12em;text-indent:.12em;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 2px 4px #00000047}.seq-transport:active{transform:translateY(1px);filter:brightness(.97)}.seq-transport__led{width:11px;height:11px;border-radius:50%;background:#463e2a8c;box-shadow:inset 0 1px 2px #00000080}.seq-transport--on .seq-transport__led{background:var(--green);box-shadow:0 0 8px var(--green-glow)}.seq-reset{flex:0 0 60px;border:none;border-radius:var(--r-tile);cursor:pointer;background:#33372a;color:var(--label);font-size:10px;font-weight:700;letter-spacing:.18em;text-indent:.18em;box-shadow:0 2px 4px #0000004d}.seq-reset:active{transform:translateY(1px);filter:brightness(.94)}.face--voice{justify-content:space-between;gap:9px;padding-left:16px;padding-right:16px}.voice-sub{text-align:center;font-size:11px;font-weight:700;letter-spacing:.26em;text-indent:.26em;color:var(--label)}.voice-panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:#353a2b;border-radius:var(--r-tile);padding:10px 12px;box-shadow:inset 0 2px 5px #0006,inset 0 0 0 1px #0000004d}.voice-row{flex:1;display:flex;align-items:center;gap:8px}.voice-row+.voice-row{border-top:1px solid rgba(0,0,0,.22)}.voice-row__id{width:66px;flex:0 0 66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:6px 2px;border:none;border-radius:9px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s ease}.voice-row__name{font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--label);white-space:nowrap}.voice-row__sub{font-size:7.5px;font-weight:600;letter-spacing:.06em;color:var(--label-dim, #8a7a52)}.voice-panel--solo .voice-row:not(.voice-row--solo){opacity:.32}.voice-row--solo .voice-row__id{background:#ffa62c1f;box-shadow:inset 0 0 0 1px #ffa62c80}.voice-row--solo .voice-row__name{color:var(--lcd, #ffa62c)}.voice-row--unused .voice-row__name{color:#6a6754}.voice-row--unused .voice-row__sub{color:#5a5746}.voice-row--unused .voice-row__knobs{opacity:.5;pointer-events:none}.voice-row__id:disabled{cursor:default}.voice-row__knobs{flex:1;display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;align-items:center}.voice-knob--empty{pointer-events:none}.voice-kit{display:flex;justify-content:space-evenly;align-items:center;gap:16px;padding:4px 0 2px}.voice-reset{flex:0 0 auto;width:clamp(60px,17vw,74px);height:clamp(50px,9dvh,62px);margin-bottom:16px}.voice-knob{display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px;cursor:grab;touch-action:none}.voice-knob:active{cursor:grabbing}.voice-knob__dial{width:clamp(38px,5.8dvh,48px);height:clamp(38px,5.8dvh,48px);display:block;pointer-events:none}.voice-knob__label{font-size:9px;font-weight:700;letter-spacing:.12em;text-indent:.12em;color:var(--label-dim, #8a7a52)}.voice-kit .voice-knob__dial{width:clamp(54px,10dvh,72px);height:clamp(54px,10dvh,72px)}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.app{--sb-paper: #F4EEE2;--sb-paper-deep: #EAE1D0;--sb-panel: #FBF8F1;--sb-key: #F7F2E8;--sb-key-shadow: #D8CDB7;--sb-ink: #2B2620;--sb-ink-2: #6C6356;--sb-ink-3: #9C9381;--sb-line: #DCD2C0;--sb-signal: #EB6A39;--sb-signal-deep: #CF5527;--sb-signal-tint: #F9E2D4;--sb-lamp-green: #34A567;--sb-lamp-green-off:#A6BFAE;--sb-amber: #C7872E;--sb-glow-amber: 0 0 0 1px rgba(199,135,46,.22), 0 0 9px rgba(199,135,46,.45);--sb-font-text: "Helvetica Neue", Helvetica, Arial, sans-serif;--sb-font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;--sb-font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;--sb-radius: 16px;--sb-radius-sm: 10px;--sb-radius-pill: 999px;--sb-ease: cubic-bezier(.2, 0, 0, 1);--sb-ease-press: cubic-bezier(.3, 0, .4, 1);--sb-dur-press: 90ms;--sb-dur-ui: .18s;--sb-well-inset: inset 0 2px 3px rgba(43,38,32,.16), inset 0 -1px 0 rgba(255,255,255,.6);--sb-glow-green: 0 0 0 1px rgba(52,165,103,.25), 0 0 10px rgba(52,165,103,.5)}@media(prefers-reduced-motion:reduce){.app{--sb-dur-press: 0ms;--sb-dur-ui: 0ms}}body{background:radial-gradient(120% 80% at 50% 0%,#ece6da,#e2dccf 60%,#dbd4c5) fixed}.app{position:relative;width:100%;max-width:430px;height:100dvh;margin-inline:auto;display:flex;flex-direction:column;overflow:hidden;background:var(--sb-paper);color:var(--sb-ink);font-family:var(--sb-font-text);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;padding-top:env(safe-area-inset-top)}.app .silk{font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-ink-2)}.app .brandbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:6px 22px 2px}.app .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;letter-spacing:.01em;color:var(--sb-ink)}.app .brand__logo{width:auto;height:26px;display:block}.app .brand__sub{font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-ink-3)}.app .views{flex:1 1 auto;min-height:0;display:flex}.app .view{display:none;width:100%;min-height:0;flex-direction:column}.app .view.active{display:flex}.app .view.play{padding:6px 22px 4px;gap:8px}.app .view.build{padding:8px 18px 4px;gap:11px}.app .view.voice{padding:8px 18px 4px;gap:10px}.app .view.tune{padding:8px 22px 4px;gap:10px}.app .view.legacy{padding:0;align-items:stretch;justify-content:stretch}.app .runbtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;cursor:pointer;width:100%;height:56px;flex:0 0 auto;border-radius:14px;background:var(--sb-signal);color:#fff;font-weight:700;font-size:16px;letter-spacing:.03em;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 3px 0 var(--sb-signal-deep),0 7px 14px -8px #cf552780;transition:transform var(--sb-dur-press) var(--sb-ease-press),box-shadow var(--sb-dur-press) var(--sb-ease-press)}.app .runbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--sb-signal-deep)}.app .runico{width:0;height:0;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent #fff}.app .runico.stop{width:13px;height:13px;border:0;background:#fff;border-radius:2px}.app .view.play .runbtn{height:58px;font-size:17px}.app .view.play .runico{border-width:9px 0 9px 15px}.app .view.play .runico.stop{width:14px;height:14px}.app .tabbar{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--sb-line);background:var(--sb-panel);padding-bottom:max(10px,env(safe-area-inset-bottom))}.app .tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:9px 0 5px;color:var(--sb-ink-3);transition:color var(--sb-dur-ui) var(--sb-ease)}.app .tab svg{width:26px;height:26px}.app .tab .tl{font-weight:600;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}.app .tab.active{color:var(--sb-signal)}.app .phead{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px;flex:0 0 auto}.app .phead--right{justify-content:flex-end}.app .bset{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;min-width:0;font-family:var(--sb-font-mono);font-size:11px;letter-spacing:.02em;color:var(--sb-ink-3)}.app .bset .bspreset{color:var(--sb-ink);font-weight:700}.app .bset .bssep{opacity:.45}.app .barsel{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}.app .barbtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;min-width:32px;height:30px;padding:0 9px;border-radius:9px;background:var(--sb-key);border:1px solid var(--sb-key-shadow);font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--sb-ink-3);box-shadow:0 1px #2b26201a;transition:transform var(--sb-dur-press) var(--sb-ease-press),background var(--sb-dur-ui) var(--sb-ease),color var(--sb-dur-ui) var(--sb-ease),border-color var(--sb-dur-ui) var(--sb-ease)}.app .barbtn:active{transform:translateY(1px)}.app .barbtn.add{border-style:dashed;opacity:.6}.app .barbtn.on{background:var(--sb-signal-tint);border-color:var(--sb-signal);color:var(--sb-ink);opacity:1}.app .barbtn.playing{border-color:var(--sb-signal)}.app .barbtn.on.playing{box-shadow:0 0 8px #eb6a3966}.app .dwindow{flex:0 0 auto;position:relative;background:var(--sb-paper-deep);border:1px solid var(--sb-key-shadow);border-radius:18px;box-shadow:var(--sb-well-inset);padding:11px 22px}.app .dwrow{display:flex;align-items:flex-start}.app .dwcol{flex:1;display:flex;flex-direction:column;gap:5px;align-items:center}.app .dwsep{width:1px;align-self:stretch;background:var(--sb-line);margin:0 8px}.app .dwcap{font-weight:600;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sb-ink-3)}.app .dwval{font-family:var(--sb-font-mono);font-variant-numeric:tabular-nums;font-size:40px;line-height:.95;color:var(--sb-ink)}.app .metercol{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer;font:inherit;padding:0}.app .metercol.inert,.app .kitchip.inert{cursor:default}.app .kitchip.inert:active{transform:none}.app .dwbeats{margin-top:8px}.app .beats{display:flex;align-items:center;justify-content:center;gap:15px;height:18px}.app .bd{width:11px;height:11px;border-radius:50%;background:#d2c5ae;box-shadow:inset 0 1px 1px #2b262033;transition:transform var(--sb-dur-ui) var(--sb-ease),background var(--sb-dur-ui) var(--sb-ease),box-shadow var(--sb-dur-ui) var(--sb-ease)}.app .bd.down{width:15px;height:15px}.app .bd.lit{background:var(--sb-signal);box-shadow:0 0 11px #eb6a39b3}.app .thwrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.app .thknob{position:relative;flex:1 1 0;aspect-ratio:1;align-self:center;max-width:min(74vw,258px);max-height:min(74vw,258px);min-height:0;container-type:size;touch-action:none;cursor:grab}.app .thknob:active{cursor:grabbing}.app .thticks{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.app .thpointerwrap{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;transition:transform var(--sb-dur-ui) var(--sb-ease);z-index:3}.app .thpointer{position:absolute;left:50%;top:12.3cqh;width:3.5px;height:12px;border-radius:3px;background:var(--sb-ink);transform:translate(-50%)}.app .thcap{position:absolute;left:50%;top:50%;width:62cqw;height:62cqw;transform:translate(-50%,-50%);border-radius:50%;background:var(--sb-panel);border:1px solid var(--sb-key-shadow);box-shadow:0 6px 16px -8px #2b262038,0 1px 2px #2b26201f,inset 0 2px #ffffffbf;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;z-index:2;transition:transform var(--sb-dur-press) var(--sb-ease-press),box-shadow var(--sb-dur-press) var(--sb-ease-press)}.app .thcap:active{transform:translate(-50%,calc(-50% + 1px));box-shadow:0 3px 9px -6px #2b262033,inset 0 2px #ffffffb3}.app .thcap.flash{box-shadow:0 0 0 7px var(--sb-signal-tint),0 6px 16px -8px #2b262038,inset 0 2px #ffffffbf}.app .thtap{font-weight:700;font-size:11cqw;letter-spacing:.24em;color:var(--sb-ink)}.app .thside{position:absolute;top:50%;transform:translateY(-50%);font-weight:600;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--sb-ink-3);white-space:nowrap}.app .thside.slow{right:calc(100% + 7px);text-align:right}.app .thside.quick{left:calc(100% + 7px)}.app .blocklabel{display:flex;align-items:center;justify-content:center;flex:0 0 auto}.app .kitseg.pill{display:inline-flex;align-self:center;flex:0 0 auto;border:1px solid var(--sb-key-shadow);border-radius:999px;overflow:hidden;background:var(--sb-key);box-shadow:inset 0 1px 2px #2b26200f}.app .kitseg.pill .segbtn{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;cursor:pointer;background:transparent;display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 24px 12px;color:var(--sb-ink-3);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:11px;transition:color var(--sb-dur-ui) var(--sb-ease),background var(--sb-dur-ui) var(--sb-ease)}.app .kitseg.pill .segbtn .sdot{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.4px var(--sb-ink-3)}.app .kitseg.pill .segbtn.on{color:var(--sb-ink);background:#eb6a3914}.app .kitseg.pill .segbtn.on .sdot{background:var(--sb-signal);box-shadow:0 0 8px #eb6a39a6}.app .presets.pads{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;flex:0 0 auto}.app .presets.pads .preset{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;overflow:hidden;height:54px;padding:0 0 10px;border-radius:13px;background:var(--sb-key);border:1px solid var(--sb-key-shadow);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;box-shadow:0 2px #2b26201f;transition:transform var(--sb-dur-press) var(--sb-ease-press),box-shadow var(--sb-dur-press) var(--sb-ease-press),background var(--sb-dur-ui) var(--sb-ease),border-color var(--sb-dur-ui) var(--sb-ease)}.app .presets.pads .preset .pl{color:var(--sb-ink-2);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:color var(--sb-dur-ui) var(--sb-ease)}.app .presets.pads .preset .pdot{position:absolute;top:11px;left:50%;transform:translate(-50%);width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.4px var(--sb-ink-3)}.app .presets.pads .preset .pmod{position:absolute;top:8px;right:9px;width:5px;height:5px;border-radius:50%;background:var(--sb-ink-3)}.app .presets.pads .preset.on .pmod{background:var(--sb-signal);box-shadow:0 0 6px #eb6a398c}.app .presets.pads .preset.on{background:var(--sb-signal-tint);border-color:var(--sb-signal);box-shadow:0 2px #2b26201a}.app .presets.pads .preset.on .pl{color:var(--sb-ink)}.app .presets.pads .preset.on .pdot{background:var(--sb-signal);box-shadow:0 0 7px #eb6a3980}.app .presets.pads .preset:active{transform:translateY(1px);box-shadow:0 1px #2b26201f}.app .kitchip{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;display:flex;align-items:center;gap:8px;background:var(--sb-key);border:1px solid var(--sb-key-shadow);border-radius:11px;padding:7px 11px;box-shadow:0 1px #2b26201a;transition:transform var(--sb-dur-press) var(--sb-ease-press)}.app .kitchip:active{transform:translateY(1px)}.app .kitchip .kc{font-weight:600;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--sb-ink-3)}.app .kitchip .kv{font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--sb-ink)}.app .kitchip .karr{font-size:10px;color:var(--sb-ink-3)}.app .grid{--labw: 50px;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:9px;padding-top:2px}.app .rows{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:9px}.app .bpager{display:flex;justify-content:center;align-items:center;gap:6px;flex:0 0 auto}.app .bpager .pgdot{width:30px;height:26px;border:0;padding:0;background:transparent;cursor:pointer;position:relative}.app .bpager .pgdot:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--sb-ink-3);transition:background var(--sb-dur-ui) var(--sb-ease),box-shadow var(--sb-dur-ui) var(--sb-ease)}.app .bpager .pgdot.lit:before{box-shadow:inset 0 0 0 1.5px var(--sb-signal)}.app .bpager .pgdot.on:before{background:var(--sb-ink-3)}.app .bpager .pgdot.on.lit:before{background:var(--sb-signal);box-shadow:0 0 7px #eb6a3980}.app .vsel .bpager.vpager{grid-column:1 / -1}.app .ruler{display:flex;align-items:flex-end;gap:9px;flex:0 0 auto;padding-left:var(--labw)}.app .rgrp{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;flex:1;padding:0 3px}.app .rn{text-align:center;font-family:var(--sb-font-mono);font-size:9px;color:var(--sb-ink-3)}.app .rn.b1{color:var(--sb-ink);font-weight:500}.app .vrow{display:flex;align-items:stretch;gap:10px;flex:1 1 0;min-height:0}.app .vlabel{width:var(--labw);flex:0 0 var(--labw);display:flex;align-items:center;gap:6px}.app .vdot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--vc);box-shadow:0 0 0 1px #2b26201f}.app .vname{font-weight:700;font-size:9px;letter-spacing:.03em;text-transform:uppercase;color:var(--sb-ink-2);white-space:nowrap}.app .lane{flex:1 1 auto;display:flex;gap:9px;height:100%}.app .lgrp{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;height:100%;background:#2b26200b;border-radius:9px;padding:3px}.app .cell{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:1px solid var(--sb-key-shadow);border-radius:999px;background:var(--sb-key);box-shadow:inset 0 1px 1px #2b26200f;padding:0;position:relative;width:100%;max-width:19px;justify-self:center;align-self:stretch;transition:background var(--sb-dur-press) var(--sb-ease-press),box-shadow var(--sb-dur-press) var(--sb-ease-press),transform var(--sb-dur-press) var(--sb-ease-press)}.app .cell:active{transform:scale(.94)}.app .cell.on{background:var(--vc);border-color:#2b262047;box-shadow:0 1px #2b26202e}.app .cell.playcol{box-shadow:0 0 0 2px #2b262047}.app .cell.on.playcol{box-shadow:0 0 0 2px var(--sb-ink),0 1px #2b26202e}.app .cell.accent:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:5px;height:5px;border-radius:50%;background:#ffffffeb;box-shadow:0 0 3px #2b262040}.app .tools{flex:0 0 auto;display:flex;align-items:center;gap:10px}.app .tools .sp{flex:1 1 auto}.app .swingctl{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:9px;transition:opacity var(--sb-dur-ui) var(--sb-ease)}.app .swingctl.off{opacity:.4}.app .swingctl .swl{font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sb-ink-3);flex:0 0 auto}.app .swingctl .swv{font-weight:700;font-size:11px;color:var(--sb-ink-2);flex:0 0 auto;min-width:30px;text-align:right}.app .swrange{flex:1 1 auto;min-width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:5px;border-radius:999px;cursor:pointer}.app .swrange:disabled{cursor:default}.app .swrange::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;background:var(--sb-panel);border:1px solid var(--sb-key-shadow);box-shadow:0 1px 2px #2b262038}.app .swrange::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--sb-panel);border:1px solid var(--sb-key-shadow);box-shadow:0 1px 2px #2b262038}.app .clearb{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:var(--sb-key);border:1px solid var(--sb-key-shadow);border-radius:10px;padding:8px 14px;font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--sb-ink-2);box-shadow:0 1px #2b26201a;transition:transform var(--sb-dur-press) var(--sb-ease-press)}.app .clearb:active{transform:translateY(1px)}.app .clearb.armed{border-color:var(--sb-signal);color:var(--sb-ink)}.app .vsel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:0 0 auto}.app .vchip{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;height:44px;border-radius:11px;background:var(--sb-key);border:1px solid var(--sb-key-shadow);box-shadow:0 1px #2b26201a;display:flex;align-items:center;justify-content:center;gap:7px;transition:transform var(--sb-dur-press) var(--sb-ease-press),background var(--sb-dur-ui) var(--sb-ease),border-color var(--sb-dur-ui) var(--sb-ease)}.app .vchip:active{transform:translateY(1px)}.app .vchip .vd{width:8px;height:8px;border-radius:50%;background:var(--vc);box-shadow:0 0 0 1px #2b26201f}.app .vchip .vn{font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--sb-ink-2);white-space:nowrap}.app .vchip.on{background:var(--vc);border-color:#2b262047;box-shadow:0 1px #2b26202e}.app .vchip.on .vd{background:#fff;box-shadow:0 0 0 1px #fff9}.app .vchip.on .vn{color:#fff}.app .envwell{flex:0 8 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;position:relative;background:var(--sb-paper-deep);border:1px solid var(--sb-key-shadow);border-radius:16px;box-shadow:var(--sb-well-inset);padding:12px 16px 10px}.app .envhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.app .envhead .ec{font-weight:600;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--sb-ink-3)}.app .envhead .ev{font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--vc, var(--sb-ink-2))}.app .envsvg{width:100%;flex:1 1 auto;min-height:30px;display:block}.app .shape{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:18px}.app .shape .blabel{text-align:center;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-ink-2)}.app .knobs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex:0 0 auto}.app .knob{display:flex;flex-direction:column;align-items:center;gap:8px}.app .kdial{position:relative;width:72px;height:72px;touch-action:none;cursor:grab}.app .kdial:active{cursor:grabbing}.app .kdial svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.app .kcap{position:absolute;left:50%;top:50%;width:42px;height:42px;transform:translate(-50%,-50%);border-radius:50%;background:var(--sb-key);border:1px solid var(--sb-key-shadow);box-shadow:inset 0 1px #ffffffa6,0 1px 2px #2b262024}.app .kptrwrap{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;transition:transform var(--sb-dur-ui) var(--sb-ease)}.app .kptr{position:absolute;left:50%;top:15px;width:3px;height:10px;border-radius:2px;background:var(--sb-ink);transform:translate(-50%)}.app .kmeta{display:flex;flex-direction:column;align-items:center;gap:2px}.app .kval{font-family:var(--sb-font-mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--sb-ink);line-height:1}.app .klabel{font-weight:700;font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--sb-ink-3)}.app .actions{display:flex;flex-direction:column;gap:9px;flex:0 0 auto}.app .vresets{display:flex;gap:8px}.app .vresets .clearb{flex:1}.app .secbtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;width:100%;height:48px;border-radius:13px;background:var(--sb-key);border:1px solid var(--sb-key-shadow);box-shadow:0 2px #2b26201f;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--sb-ink);white-space:nowrap;transition:transform var(--sb-dur-press) var(--sb-ease-press),box-shadow var(--sb-dur-press) var(--sb-ease-press)}.app .secbtn:active{transform:translateY(1px);box-shadow:0 1px #2b26201f}.app .secbtn .sd{width:9px;height:9px;border-radius:50%;background:var(--vc, var(--sb-ink-3));box-shadow:0 0 0 1px #2b26201f}.app .refchip{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;display:flex;align-items:baseline;gap:6px;background:var(--sb-key);border:1px solid var(--sb-key-shadow);border-radius:11px;padding:7px 12px;box-shadow:0 1px #2b26201a;transition:transform var(--sb-dur-press) var(--sb-ease-press)}.app .refchip:active{transform:translateY(1px)}.app .refchip .rl{font-weight:600;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--sb-ink-3)}.app .refchip .rv{font-family:var(--sb-font-mono);font-size:13px;color:var(--sb-ink)}.app .refchip .ru{font-weight:700;font-size:8.5px;letter-spacing:.06em;color:var(--sb-ink-3)}.app .notehero{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:6px}.app .noteline{display:flex;align-items:flex-start;justify-content:center;gap:4px;line-height:1}.app .noteltr{font-family:var(--sb-font-display);font-weight:800;font-size:96px;letter-spacing:-.02em;color:var(--sb-ink)}.app .noteacc{font-family:var(--sb-font-display);font-weight:700;font-size:40px;color:var(--sb-ink-2);margin-top:8px}.app .noteoct{font-family:var(--sb-font-mono);font-size:18px;color:var(--sb-ink-3);align-self:flex-end;margin-bottom:14px}.app .modelbl{font-family:var(--sb-font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sb-ink-3)}.app .gauge{flex:0 0 auto}.app .gauge svg{width:100%;height:150px;display:block}.app .statusrow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-height:40px;margin-top:2px}.app .status{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:default;display:flex;align-items:center;gap:9px;background:var(--sb-key);border:1px solid var(--sb-key-shadow);border-radius:999px;padding:9px 18px;box-shadow:0 1px #2b26201a}.app .status .sd{width:8px;height:8px;border-radius:50%;background:var(--sb-lamp-green-off);box-shadow:inset 0 1px 1px #2b262040;transition:background var(--sb-dur-ui) var(--sb-ease),box-shadow var(--sb-dur-ui) var(--sb-ease)}.app .status .st{font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sb-ink-3);transition:color var(--sb-dur-ui) var(--sb-ease)}.app .status--idle{background:transparent;border-color:transparent;box-shadow:none}.app .status--idle .st{color:var(--sb-ink-3)}.app .status--denied{cursor:pointer}.app .status--denied .sd{background:var(--sb-signal);box-shadow:0 0 0 1px #eb6a3940}.app .status--denied .st{color:var(--sb-signal-deep)}.app .tunebody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:10px}.app .toneblk{flex:0 0 auto;display:flex;flex-direction:column;gap:10px}.app .blabel{font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-ink-2);text-align:center}.app .tonehd{display:flex;flex-direction:column;align-items:center;gap:3px}.app .tonehint{font-size:10px;letter-spacing:.03em;color:var(--sb-ink-3)}.app .notestrip{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}.app .nb{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;height:38px;border-radius:8px;padding:0;background:var(--sb-key);border:1px solid var(--sb-key-shadow);box-shadow:0 1px #2b26201a;font-family:var(--sb-font-mono);font-size:10px;color:var(--sb-ink-2);display:flex;align-items:center;justify-content:center;transition:background var(--sb-dur-ui) var(--sb-ease),color var(--sb-dur-ui) var(--sb-ease),transform var(--sb-dur-press) var(--sb-ease-press)}.app .nb.sharp{color:var(--sb-ink-3);background:var(--sb-paper-deep)}.app .nb:active{transform:translateY(1px)}.app .nb.on{background:var(--sb-signal);color:#fff;border-color:var(--sb-signal-deep);box-shadow:0 0 0 2px var(--sb-paper),0 0 0 4px #eb6a394d}@media(min-width:480px){html,body{height:auto;min-height:100%}#root{align-items:flex-start;padding:24px 12px}.app{height:clamp(820px,calc(100dvh - 48px),900px);max-height:none;border-radius:26px;box-shadow:0 24px 60px -24px #2b262059,0 2px 8px #2b26201f}}