.keyboard{--white:#efebe1;--transparent-white:#fff6;--desert-storm:#d9d4c8;--black:#000;--onyx:#111;--dark-jungle-green:#222;--ironside-grey:#666;--davy-grey:#555;--primary-shadow-color:#00000080;--secondary-shadow-color:#000000b3;--primary-transition:all .1s ease;width:100%;container-type:inline-size}.keys{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;background-image:linear-gradient(#000000c0,#0000 1.2em),linear-gradient(#0d0d0e,#151618);border-radius:.4em;justify-content:center;height:min(30em,34vh);min-height:22em;padding:.9em 0 1.4em;font-size:min(15px,1.06383cqw);display:flex;position:relative;box-shadow:inset 0 .2em .4em #000,0 1px #ffffff12}.key{cursor:grab;background-image:linear-gradient(-30deg, var(--desert-storm), var(--white));width:9em;height:100%;box-shadow:inset 0 .2em 0 var(--white), inset 0 -.2em 0 var(--white), inset .2em 0 0 var(--white), inset -.2em 0 0 var(--white), 0 .5em .4em var(--secondary-shadow-color), inset 0 -.2em 0 var(--white), inset .2em 0 0 var(--white), inset -.2em -.2em 1.6em var(--primary-shadow-color), -.3em .5em .7em var(--primary-shadow-color);border:none;border-radius:.1em;margin:0 .1em;position:relative}.key.playing:not(.sharp){transition:var(--primary-transition);box-shadow:inset 0 .2em 0 var(--white), inset 0 -.2em 0 var(--white), inset .2em 0 0 var(--white), inset -.2em 0 0 var(--white), 0 .4em .4em var(--secondary-shadow-color), inset 0 -.2em 0 var(--white), inset .1em 0 0 var(--white), inset -.2em -.2em 1.6em var(--black), -.4em .5em .7em var(--primary-shadow-color);cursor:grabbing;height:98.9%}.key.sharp{z-index:10;background-image:linear-gradient(-20deg, var(--dark-jungle-green), var(--black), var(--dark-jungle-green));width:6em;height:45%;box-shadow:inset 0 -.1em .2em var(--transparent-white), 0 .2em .3em var(--primary-shadow-color);border-style:solid;border-color:var(--ironside-grey) var(--dark-jungle-green) var(--onyx) var(--davy-grey);border-width:.2em .4em 1.2em;margin-top:-.1em;position:absolute}.key.sharp[data-note=w]{margin-right:74.5em}.key.sharp[data-note=e]{margin-right:55.5em}.key.sharp[data-note=t]{margin-right:18.5em}.key.sharp[data-note=u]{margin-left:19em}.key.sharp[data-note=o]{margin-left:55.5em}.key.sharp[data-note=p]{margin-left:74.5em}.key.sharp.playing{transition:var(--primary-transition);cursor:grabbing;border-bottom-width:.4em}.key__label{text-align:center;color:#00000045;pointer-events:none;font:600 max(8px,1.6em)/1 system-ui,sans-serif;position:absolute;bottom:.8em;left:0;right:0}.key.sharp .key__label{color:#fff5;bottom:.3em}.module{--paint:#4a5541;width:calc(var(--w) * var(--hp));height:var(--panel-h);margin:var(--rail) 0;padding:calc(var(--hp) * 1.35) calc(var(--hp) * .3) calc(var(--hp) * .9);color:var(--silk);font-family:var(--silk-font);background-color:var(--paint);-webkit-user-select:none;user-select:none;background-image:linear-gradient(172deg,#ffffff17 0%,#ffffff06 22%,#0000 45%,#00000040 100%),linear-gradient(90deg,#00000026,#0000 18%,#ffffff0a 55%,#0000 80%,#00000030),repeating-linear-gradient(0deg,#ffffff07 0 1px,#0000 1px 2px,#0000000c 2px 3px,#0000 3px 5px),repeating-linear-gradient(0deg,#0000 0 7px,#ffffff05 7px 8px,#0000 8px 13px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.08' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");border-radius:1px;flex-direction:column;flex:none;align-items:stretch;display:flex;position:relative;box-shadow:inset 1px 0 #ffffff24,inset 0 1px #ffffff2e,inset -1px 0 #0000006b,inset 0 -1px #00000080,0 0 0 .5px #0009,2px 3px 6px #000000a6}.module--osc{--paint:#394233}.module--amp{--paint:#574627}.module--mod{--paint:#2e3945}.module--fx{--paint:#4a2422}.module--io{--paint:#2c2e31}.screw{--s:calc(var(--hp) * 1.05);width:var(--s);height:var(--s);z-index:1;background:radial-gradient(circle at 35% 30%,#f4f5f6 0%,#c3c6ca 25%,#8c9094 60%,#5d6064 100%);border-radius:50%;position:absolute;box-shadow:0 0 0 1px #00000080,1px 1.5px 2px #000000b0,inset 0 -1px 1px #00000060}.screw:before,.screw:after{content:"";width:62%;height:16%;transform:translate(-50%, -50%) rotate(var(--turn));background:linear-gradient(#2a2b2d,#55585c);border-radius:1px;position:absolute;top:50%;left:50%;box-shadow:0 .5px #ffffff80}.screw:after{transform:translate(-50%, -50%) rotate(calc(var(--turn) + 90deg))}.screw--tl,.screw--bl{left:calc(var(--hp) * 1.5 - var(--s) / 2)}.screw--tr,.screw--br{right:calc(var(--hp) * 1.5 - var(--s) / 2)}.screw--tl,.screw--tr{top:calc(var(--hp) * .6 - var(--s) / 2)}.screw--bl,.screw--br{bottom:calc(var(--hp) * .6 - var(--s) / 2)}.module__header{text-align:center;line-height:1}.module__title{font-size:calc(var(--hp) * 1.15);letter-spacing:.12em;text-transform:uppercase;margin:0;font-weight:700}.module__subtitle{margin:calc(var(--hp) * .2) 0 0;font-size:max(7px, calc(var(--hp) * .48));letter-spacing:.3em;text-transform:uppercase;opacity:.75}.module__subtitle:before,.module__subtitle:after{content:"";width:calc(var(--hp) * .9);vertical-align:middle;opacity:.6;background:currentColor;height:1px;margin:0 .5em;display:inline-block}.module__body{flex-direction:column;flex:1;justify-content:space-evenly;min-height:0;display:flex}.module__row{justify-content:space-around;align-items:flex-end;display:flex}.control__label{margin-top:calc(var(--hp) * .1);font-size:max(8px, calc(var(--hp) * .56));letter-spacing:.14em;text-transform:uppercase;text-align:center;white-space:nowrap;font-weight:600;display:block}.panel-rule{margin:0 calc(var(--hp) * .6);font-size:max(7px, calc(var(--hp) * .45));letter-spacing:.25em;text-transform:uppercase;opacity:.8;align-items:center;gap:.5em;display:flex}.panel-rule:before,.panel-rule:after{content:"";opacity:.6;background:currentColor;flex:1;height:1px}.module__jacks{justify-content:space-evenly;align-items:flex-end;gap:calc(var(--hp) * .3) 0;margin:calc(var(--hp) * .4) calc(var(--hp) * -.05) 0;padding:calc(var(--hp) * .35) 0 calc(var(--hp) * .2);border-top:1px solid #ece5d17a;flex-wrap:wrap;display:flex}.jack{align-items:center;gap:calc(var(--hp) * .18);min-width:calc(var(--hp) * 1.8);padding:calc(var(--hp) * .1) 0;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;border-radius:3px;flex-direction:column-reverse;display:flex}.jack:active{cursor:grabbing}.jack:focus{outline:none}.jack:focus-visible{outline:2px solid var(--focus);outline-offset:1px}.jack__label{font-size:max(7px, calc(var(--hp) * .46));letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;border:1px solid #0000;border-radius:1px;padding:.12em .3em;font-weight:600;line-height:1.1}.jack:not(.jack--out) .jack__label{border-color:#ece5d166}.jack--out .jack__label{background:var(--silk);color:var(--paint)}.jack__socket{--j:calc(var(--hp) * 1.3);width:var(--j);height:var(--j);background:radial-gradient(circle, #050505 0 26%, #2a2b2d 30%, transparent 33%), radial-gradient(circle at 35% 30%, #f1f2f3, #a6aaae 45%, #6b6e72 80%), repeating-conic-gradient(#d5d7da 0 6deg, #8d9094 6deg 12deg);border-radius:50%;transition:box-shadow 80ms linear;position:relative;box-shadow:0 0 0 1px #00000080,1px 2px 3px #000000a0}.jack__socket:after{content:"";border-radius:50%;position:absolute;inset:18%;box-shadow:inset 0 1px 1px #ffffff90,inset 0 -1px 1px #00000080}.jack:hover .jack__socket{box-shadow:0 0 0 1px #00000080,0 0 0 3px #ece5d140,1px 2px 3px #000000a0}.jack__socket[data-hover=valid]{box-shadow:0 0 0 2px #0a0a0a,0 0 0 4px #37c35a,0 0 10px 3px #37c35a99}.jack__socket[data-hover=invalid]{box-shadow:0 0 0 2px #0a0a0a,0 0 0 4px #e23d33,0 0 10px 3px #e23d3399}.jack__socket[data-armed=true]{box-shadow:0 0 0 2px #0a0a0a, 0 0 0 4px var(--focus), 0 0 10px 3px #e9b44c99}.keys-panel{align-items:center;gap:calc(var(--hp) * .35);flex-direction:column;display:flex}.keys-panel__label,.keys-panel__hint{font-size:max(7px, calc(var(--hp) * .5));letter-spacing:.14em;text-transform:uppercase;font-weight:600}.keys-panel__hint{opacity:.7}.seg-display{padding:calc(var(--hp) * .15) calc(var(--hp) * .25);color:#ff3b26;text-shadow:0 0 6px #ff2a1590;font:700 calc(var(--hp) * .95) / 1 var(--mono);letter-spacing:.06em;background:#140404;border-radius:2px;box-shadow:inset 0 1px 4px #000,0 0 0 1px #0b0b0c}.module__brand{margin-top:calc(var(--hp) * .3);text-align:center;font-size:max(7px, calc(var(--hp) * .44));letter-spacing:.32em;text-transform:uppercase;opacity:.7;font-weight:700}.module__brand span{margin:0 .15em}.lfo-led-wrap{justify-content:center;display:flex}.adsr-wrap{padding:0 calc(var(--hp) * .6);justify-content:center;display:flex}.adsr-graph{width:100%;max-width:calc(var(--hp) * 7.5);height:auto;overflow:visible}.adsr-graph__axis{stroke:var(--silk);stroke-width:.8px;opacity:.5}.adsr-graph__gate{stroke:var(--silk);stroke-width:.7px;stroke-dasharray:2 2;opacity:.45}.adsr-graph__curve{fill:none;stroke:var(--silk);stroke-width:1.6px;stroke-linejoin:round;stroke-linecap:round}.adsr-graph text{fill:var(--silk);font:600 7px var(--silk-font);letter-spacing:.05em;text-anchor:middle;opacity:.85}.clip-led-wrap{justify-content:center;display:flex}.clip-led{align-items:center;gap:calc(var(--hp) * .25);flex-direction:column;display:flex}.led--clip{--d:calc(var(--hp) * 1.15)}.led--clip .led__lens{background:radial-gradient(circle at 50% 60%,#5a1a08 0%,#3a0c04 55%,#1c0502 100%)}.clip-led__label{font-size:max(7px, calc(var(--hp) * .46));letter-spacing:.14em;text-transform:uppercase;font-weight:600}.knob,.switch{flex-direction:column;align-items:center;display:flex}.knob--lg{--k:calc(var(--hp) * 3.4)}.knob--md{--k:calc(var(--hp) * 2.7)}.knob--sm{--k:calc(var(--hp) * 2.3)}.switch{--k:calc(var(--hp) * 2)}.dial{width:calc(var(--k) * 1.45);height:calc(var(--k) * 1.45);cursor:ns-resize;touch-action:none;-webkit-tap-highlight-color:transparent;border-radius:50%;position:relative}.dial:focus{outline:none}.dial:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}.dial[aria-disabled=true]{cursor:not-allowed}.dial__scale{width:100%;height:100%;stroke:var(--silk);stroke-width:1.6px;stroke-linecap:round;position:absolute;inset:0;overflow:visible}.dial__scale .major{stroke-width:2.4px}.knob__shadow,.knob__skirt,.knob__face,.knob__pointer,.knob__light{border-radius:50%;position:absolute;inset:15.5%}.knob__shadow{filter:blur(calc(var(--k) * .07));opacity:.65;background:#000;transform:translate(8%,12%)}.knob__skirt{transform:rotate(var(--angle));background:radial-gradient(circle, transparent 60%, #00000080 100%), repeating-conic-gradient(#2c2d30 0 4deg, #0b0b0c 4deg 8deg);box-shadow:0 0 0 1px #000,inset 0 0 0 1px #ffffff14}.knob__face{box-shadow:0 0 0 1px #000000b0, 0 calc(var(--k) * .02) calc(var(--k) * .04) #000000a0, inset 0 1px 1px #ffffff26;background:radial-gradient(circle at 50% 40%,#2b2c2f,#151618 70%,#0d0d0e);inset:25%}.knob--lg .knob__face:after{content:"";background:radial-gradient(circle,#ffffff20,#0000 60%),conic-gradient(from 15deg,#8d9196,#e6e8ea 40deg,#8a8e93 95deg,#d4d7da 150deg,#7f8388 205deg,#e3e5e7 255deg,#8a8e93 315deg,#8d9196);border-radius:50%;position:absolute;inset:22%;box-shadow:inset 0 0 0 1px #00000070,inset 0 1px 1px #ffffffa0}.knob__pointer{transform:rotate(var(--angle))}.knob__pointer:before{content:"";width:max(2px, calc(var(--k) * .06));background:#f4efe2;border-radius:1px;height:30%;position:absolute;top:2%;left:50%;transform:translate(-50%);box-shadow:0 0 1px #000}.knob__light{pointer-events:none;background:radial-gradient(circle at 34% 26%,#ffffff30 0%,#ffffff0a 30%,#0000 55%);inset:16%}.dial__readout{z-index:5;white-space:nowrap;color:#f0b45a;min-width:3.2em;font:600 11px/1.2 var(--mono);text-align:center;pointer-events:none;opacity:0;background:#0c0d0e;border-radius:2px;padding:2px 5px;transition:opacity .12s,transform .12s;position:absolute;bottom:92%;left:50%;transform:translate(-50%,4px);box-shadow:0 0 0 1px #3c3e42,0 2px 6px #000000c0}.dial:hover:not([aria-disabled=true]) .dial__readout,.dial:focus-visible .dial__readout,.dial[data-dragging] .dial__readout{opacity:1;transform:translate(-50%)}.switch__dial-area{--pt:calc(var(--hp) * .9);padding:var(--pt) calc(var(--hp) * 1.3) calc(var(--hp) * .15);position:relative}.dial--switch{cursor:pointer}.switch__legend{--r:calc(var(--k) * .5 + var(--hp) * 1.05);left:calc(50% + var(--sx) * var(--r));top:calc(var(--pt) + var(--k) * .725 + var(--sy) * var(--r));font-size:max(7px, calc(var(--hp) * .5));letter-spacing:.04em;white-space:nowrap;opacity:.62;cursor:pointer;font-weight:600;line-height:1;position:absolute;transform:translate(-50%,-50%)}.switch__legend.is-selected{opacity:1}.wave-icon{width:calc(var(--hp) * .95);height:calc(var(--hp) * .6);fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;display:block;overflow:visible}.led{--d:calc(var(--hp) * 1.6);width:var(--d);height:var(--d);font-size:var(--d);background:radial-gradient(circle,#000 60%,#2a2b2d 66%,#111 74%);border-radius:50%;display:inline-block;position:relative;box-shadow:0 0 0 1px #00000090,1px 1.5px 2px #00000090}.led--sm{--d:calc(var(--hp) * .75)}.led__glow,.led__lens,.led__core,.led__specular{pointer-events:none;border-radius:50%;position:absolute;inset:14%}.led__glow{opacity:0}.led__lens{background:radial-gradient(circle at 50% 60%,#5c0d0a 0%,#3a0605 55%,#1c0202 100%);box-shadow:inset 0 -1px 2px #00000090,inset 0 1px 1px #ff8a7a30}.led__core{opacity:0;mix-blend-mode:screen}.led__specular{background:radial-gradient(40% 28% at 38% 28%,#ffffffd0 0%,#fff5 45%,#0000 100%),radial-gradient(circle,#0000 62%,#ffffff18 80%,#0000 100%)}.led.is-on .led__core{opacity:1;background:radial-gradient(circle at 50% 55%,#ffd2c0 0%,#ff3e28 38%,#ff3e28d9 70%,#ff3e2800 100%)}.led.is-on .led__glow{opacity:1;box-shadow:0 0 .9em .3em #ff2a1490,0 0 2em .1em #ff200a50}.patchbay{position:relative}.patchbay__cables{pointer-events:none;z-index:20;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.cable path{fill:none;stroke-linecap:round;stroke-linejoin:round}.cable__shadow{stroke:#000;stroke-width:var(--cw);opacity:.32}.cable__outline{stroke:var(--c-dark);stroke-width:var(--cw-outline)}.cable__body{stroke:var(--c);stroke-width:var(--cw)}.cable__shine{stroke:#fff;stroke-width:var(--cw-shine);opacity:.32}.cable--dragging .cable__shadow{opacity:.22}.plug__boot{fill:var(--c-cap);stroke:var(--c-dark);stroke-width:.06px}.plug__boot-rib{fill:var(--c-dark);opacity:.6}.plug__shadow{fill:#000;opacity:.4}.plug__head{fill:var(--c-cap);stroke:var(--c-dark);stroke-width:.07px;transition:fill 80ms linear}.plug__ring{fill:none;stroke:#00000059;stroke-width:.06px}.plug__hole{fill:#0d0d0e;stroke:#ffffff30;stroke-width:.04px}path.plug__shine{fill:none;stroke:#fff;stroke-width:.09px;stroke-linecap:round;opacity:.45}.plug[data-state=idle] .plug__head{fill:#8d9094}.plug[data-state=valid] .plug__head{fill:#37c35a}.plug[data-state=invalid] .plug__head{fill:#e23d33}.presets{flex-wrap:wrap;flex:auto;align-items:center;gap:8px 10px;min-width:0;display:flex;position:relative}.presets__display{flex:0 auto;align-items:center;gap:8px;min-width:0;display:inline-flex}.presets__display-label{font:600 .72rem/1 var(--silk-font);letter-spacing:.2em;text-transform:uppercase;color:var(--silk)}.presets__name{text-overflow:ellipsis;white-space:nowrap;color:#ffb43b;text-shadow:0 0 6px #ff9a1a80;min-width:11em;max-width:18em;font:600 .85rem/1.2 var(--mono);letter-spacing:.04em;background:linear-gradient(#1a1204,#120c02);border-radius:2px;padding:4px 9px;overflow:hidden;box-shadow:inset 0 1px 4px #000,0 0 0 1px #2e2f33}.presets__dirty{color:#ff7b3b;margin-left:.2em}.presets__select select{background:linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%) right 13px center / 5px 5px no-repeat, linear-gradient(-45deg, transparent 50%, var(--ink-soft) 50%) right 8px center / 5px 5px no-repeat, linear-gradient(#2a2b2f, #1d1e21);max-width:14em;color:var(--ink);appearance:none;cursor:pointer;border:1px solid #45474c;border-radius:3px;padding:4px 26px 4px 8px;font:.82rem/1.3 system-ui,sans-serif;box-shadow:inset 0 1px #ffffff14,0 1px 2px #000}.presets__buttons{flex-wrap:wrap;gap:5px;display:flex}.menu-btn{color:var(--silk);font:600 .72rem/1.3 var(--silk-font);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;touch-action:manipulation;background:linear-gradient(#34363b,#222327);border:1px solid #45474c;border-radius:3px;padding:4px 9px;box-shadow:inset 0 1px #ffffff1c,0 1px 2px #000}.menu-btn:hover:not(:disabled){background:linear-gradient(#3e4046,#2a2b30)}.menu-btn:active:not(:disabled){background:linear-gradient(#1d1e21,#2a2b2f);box-shadow:inset 0 1px 3px #000}.menu-btn:disabled{opacity:.4;cursor:not-allowed}.menu-btn--primary{color:#ffd38a;border-color:#8a6a2a}.menu-btn--warn{color:#f0a08a}.presets__message{color:#9fd59a;font:.75rem/1.2 var(--mono);flex-basis:100%;margin:0}.presets__message.is-error{color:#ff7b6b}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.dialog-backdrop{z-index:100;background:#000000a0;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.dialog{background:linear-gradient(#26282c,#1a1b1e);border:1px solid #3a3c41;border-radius:6px;width:min(340px,100%);padding:16px;box-shadow:0 20px 50px #000,inset 0 1px #ffffff1a}.dialog__title{font:600 1rem/1 var(--silk-font);letter-spacing:.2em;text-transform:uppercase;color:var(--silk);margin:0 0 12px}.dialog__field{font:600 .7rem/1 var(--silk-font);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);gap:6px;display:grid}.dialog__field input{color:#ffb43b;width:100%;font:600 .95rem/1.2 var(--mono);letter-spacing:.02em;text-transform:none;background:#0e0f10;border:1px solid #45474c;border-radius:3px;padding:7px 9px;box-shadow:inset 0 1px 3px #000}.dialog__note{color:#f0b45a;min-height:1.2em;margin:6px 0 10px;font-size:.75rem}.dialog__actions{justify-content:flex-end;gap:8px;display:flex}:root{--rack-hp:88;--cheek:14px;--page-pad:16px;--hp:clamp(14px, calc((100vw - 2 * var(--page-pad) - 2 * var(--cheek)) / var(--rack-hp)), 21px);--panel-h:calc(var(--hp) * 25.3);--rail:calc(var(--hp) * 1.15);--row-h:calc(var(--panel-h) + 2 * var(--rail));--page-bg:#151618;--ink:#e8e2d2;--ink-soft:#a7a397;--silk:#ece5d1;--silk-font:"DIN Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;--mono:ui-monospace, SFMono-Regular, Menlo, monospace;--focus:#e9b44c;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (width<=640px){:root{--page-pad:10px;--cheek:8px;--hp:clamp(12px, calc((100vw - 2 * var(--page-pad) - 2 * var(--cheek)) / 24), 18px)}}*,:before,:after{box-sizing:border-box}html{font-size:15px}body{min-height:100vh;color:var(--ink);background-color:var(--page-bg);background-image:radial-gradient(at 50% 0,#2a2c30 0%,#0000 70%),radial-gradient(at 50% 120%,#0a0a0b 0%,#0000 60%);background-attachment:fixed;margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}button{font:inherit}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.app{max-width:calc(var(--rack-hp) * var(--hp) + 2 * var(--cheek) + 2 * var(--page-pad));padding:var(--page-pad);flex-direction:column;gap:18px;margin:0 auto;display:flex}.menubar{background:linear-gradient(#ffffff0c,#0000 40%),repeating-linear-gradient(90deg,#ffffff05 0 1px,#0000 1px 3px),#1b1c1f;border-radius:6px;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px 14px;display:flex;box-shadow:0 10px 26px #00000090,inset 0 1px #ffffff1a,inset 0 -2px #00000080}.menubar__brand{font:600 clamp(1.2rem, 3.6vw, 1.7rem) / 1 var(--silk-font);text-transform:uppercase;letter-spacing:.22em;color:var(--silk);white-space:nowrap;margin:0}.menubar__brand span{letter-spacing:.3em;color:var(--ink-soft);vertical-align:middle;margin-left:.6em;font-size:.45em;display:inline-block}.audio-status{color:#f0b45a;font:.8rem/1.2 var(--mono);letter-spacing:.05em;background:#0d0e0f;border:1px solid #3a3c40;border-radius:3px;align-items:center;gap:8px;padding:5px 12px;display:inline-flex;box-shadow:inset 0 1px 3px #000}.audio-status--error{color:#ff7b6b}.audio-status button{color:inherit;cursor:pointer;background:0 0;border:1px solid;border-radius:3px;padding:1px 8px}.case{width:100%;padding:0 var(--cheek);background:linear-gradient(90deg, #3a3b3e, #1d1e20 30%, #141516 70%, #2b2c2f) left / var(--cheek) 100% no-repeat, linear-gradient(270deg, #3a3b3e, #1d1e20 30%, #141516 70%, #2b2c2f) right / var(--cheek) 100% no-repeat, #101112;border-radius:6px;position:relative;box-shadow:0 18px 40px #000000b0,inset 0 2px #ffffff10,inset 0 -2px #00000080}.case__rows{min-height:var(--row-h);background-color:#070708;background-image: linear-gradient(to bottom, #4b4d51 0, #c9cbce calc(var(--rail) * .08), #9fa2a6 calc(var(--rail) * .22), #8a8d91 calc(var(--rail) * .36), #1a1b1d calc(var(--rail) * .4), #2c2d30 calc(var(--rail) * .52), #1a1b1d calc(var(--rail) * .62), #6f7276 calc(var(--rail) * .66), #a3a6aa calc(var(--rail) * .8), #5d6064 var(--rail), transparent var(--rail), transparent calc(var(--row-h) - var(--rail)),  #5d6064 calc(var(--row-h) - var(--rail)), #a3a6aa calc(var(--row-h) - var(--rail) * .8), #6f7276 calc(var(--row-h) - var(--rail) * .66), #1a1b1d calc(var(--row-h) - var(--rail) * .62), #2c2d30 calc(var(--row-h) - var(--rail) * .52), #1a1b1d calc(var(--row-h) - var(--rail) * .4), #8a8d91 calc(var(--row-h) - var(--rail) * .36), #9fa2a6 calc(var(--row-h) - var(--rail) * .22), #c9cbce calc(var(--row-h) - var(--rail) * .08), #4b4d51 var(--row-h)),  linear-gradient(to bottom, #1c1d1f, #0b0b0c 40%, #050506);background-size:100% var(--row-h), 100% var(--row-h);background-repeat:repeat-y;flex-wrap:wrap;align-content:flex-start;display:flex}.controller{background:linear-gradient(#ffffff0d,#0000 30%),repeating-linear-gradient(90deg,#ffffff05 0 1px,#0000 1px 3px),#1d1e21;border-radius:8px;padding:10px 14px 16px;box-shadow:0 16px 36px #000000a0,inset 0 1px #ffffff1a,inset 0 -3px #00000080}.controller__panel{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-bottom:10px;display:flex}.controller__brand{font:600 1.05rem/1 var(--silk-font);letter-spacing:.25em;text-transform:uppercase;color:var(--silk)}.controller__brand span{color:var(--ink-soft);margin-left:.6em;font-size:.7em}.controller__help{color:var(--ink-soft);margin:0;font-size:.8rem}.controller__octave{align-items:center;gap:8px;display:inline-flex}.controller__octave-label{font:600 .75rem/1 var(--silk-font);letter-spacing:.2em;text-transform:uppercase;color:var(--silk)}.controller__digits{color:#ff3b26;text-shadow:0 0 6px #ff2a1590;min-width:2.4em;font:700 1.1rem/1 var(--mono);letter-spacing:.08em;text-align:center;background:#140404;border-radius:2px;padding:3px 6px;box-shadow:inset 0 1px 4px #000,0 0 0 1px #2e2f33}kbd{min-width:1.5em;color:var(--ink);font:.75rem/1.4 var(--mono);text-align:center;background:#2a2b2f;border:1px solid #4a4c50;border-bottom-width:2px;border-radius:3px;padding:0 4px;display:inline-block}