:root{--page:#e4e4e1;--panel:#eeeeeb;--hairline:#bcbcb7;--ink:#121212;--muted:#666662;--key-white:#f9f9f7;--key-white-hover:#f1f1ee;--key-black:#1d1d1d;--key-black-hover:#2b2b2a;--key-grey:#d3d3cf;--on-white:#121212;--on-black:#f2f2ef;--orange:#f0520f;--orange-hover:#f8622a;--orange-text:#b53c08;--led-off:#a3a39e;--display:#141414;--display-ink:#ff6a2a;--display-dim:#3d2619;--display-label:#948479;--screw:#a9a69f;--slot:#d2d0c9;--plate-face:#e4e3de;--plate-black:#1f1f1d;--plate-edge:#c7c5be;--key-shadow:0 1px 0 #00000038, 0 3px 6px #0000001f, inset 0 1px 0 #ffffffb3;--pressed-shadow:inset 0 1px 2px #00000038;--recess-shadow:inset 0 1px 2px #0000001a;--display-shadow:inset 0 1px 3px #0009;--panel-shadow:0 4px 12px #0000001a;--instant:90ms;--quick:.16s;--settle:.28s;--scene:.7s;--lift:8px;--ease-out-quint:cubic-bezier(.22, 1, .36, 1);--font-sans:"Space Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--font-display:"DSEG7 Classic", var(--font-mono);--column:1200px;--gutter:clamp(20px, 4vw, 48px);color-scheme:light}@media (prefers-color-scheme:dark){:root{--page:#111;--panel:#1b1b1b;--hairline:#353533;--ink:#ecebe7;--muted:#8c8b86;--key-white:#313130;--key-white-hover:#3a3a39;--key-black:#2a2a2a;--key-black-hover:#333332;--key-grey:#262626;--on-white:#ecebe7;--on-black:#ecebe7;--orange:#ff5a1a;--orange-hover:#ff6d33;--orange-text:#ff5a1a;--led-off:#3a3a38;--display:#070707;--display-dim:#3a2418;--screw:#5e5c57;--slot:#3b3a37;--plate-face:#262624;--plate-black:#e4e3de;--plate-edge:#0d0d0c;--key-shadow:0 1px 0 #000000b3, 0 3px 6px #00000073, inset 0 1px 0 #ffffff29;--recess-shadow:inset 0 1px 2px #00000080;--panel-shadow:0 4px 12px #00000080;color-scheme:dark}}@media (prefers-reduced-motion:reduce){:root{--instant:0s;--quick:0s;--settle:0s;--scene:0s}}@font-face{font-family:Space Grotesk;src:url(/fonts/SpaceGrotesk-Light.otf)format("opentype");font-weight:300;font-display:swap}@font-face{font-family:Space Grotesk;src:url(/fonts/SpaceGrotesk-Regular.otf)format("opentype");font-weight:400;font-display:swap}@font-face{font-family:Space Grotesk;src:url(/fonts/SpaceGrotesk-Medium.otf)format("opentype");font-weight:500;font-display:swap}@font-face{font-family:Space Grotesk;src:url(/fonts/SpaceGrotesk-Bold.otf)format("opentype");font-weight:700;font-display:swap}@font-face{font-family:JetBrains Mono;src:url(/fonts/JetBrainsMono-Regular.ttf)format("truetype");font-weight:400;font-display:swap}@font-face{font-family:JetBrains Mono;src:url(/fonts/JetBrainsMono-Medium.ttf)format("truetype");font-weight:500;font-display:swap}@font-face{font-family:DSEG7 Classic;src:url(/fonts/DSEG7Classic-Regular.ttf)format("truetype");font-weight:400;font-display:block}*,:before,:after{box-sizing:border-box}html{background:var(--page);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;scroll-snap-type:y proximity;font-size:16px;line-height:1.6}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{min-height:100dvh;transition:background-color var(--settle) var(--ease-out-quint);margin:0}img,canvas{max-width:100%;display:block}a{color:inherit}h1,h2,h3,p{margin:0}:focus-visible{outline:2px solid color-mix(in srgb, var(--orange) 70%, transparent);outline-offset:2px}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.on-dark{display:none!important}@media (prefers-color-scheme:dark){.on-light{display:none!important}.on-dark{display:revert!important}}.column{width:min(100% - 2 * var(--gutter), var(--column));margin-inline:auto}.mono{font-family:var(--font-mono)}.muted{color:var(--muted)}.accent{color:var(--orange-text)}.title{letter-spacing:-.01em;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere;font-size:clamp(32px,4.2vw,52px);font-weight:300;line-height:1.12}.lede{max-width:34em;color:var(--muted);text-wrap:pretty;font-size:17px}.key{--face:var(--key-white);--face-hover:var(--key-white-hover);--label:var(--on-white);background:var(--face);height:34px;box-shadow:var(--key-shadow);color:var(--label);font:500 14px/1 var(--font-sans);white-space:nowrap;cursor:pointer;user-select:none;transition:background-color var(--instant) linear, top var(--instant) linear, box-shadow var(--instant) linear;border:0;border-radius:4px;justify-content:center;align-items:center;gap:8px;padding:0 16px;text-decoration:none;display:inline-flex;position:relative;top:0}.key:hover{background:var(--face-hover)}.key:active,.key[aria-pressed=true]{box-shadow:var(--pressed-shadow);top:1px}.key--black{--face:var(--key-black);--face-hover:var(--key-black-hover);--label:var(--on-black)}.key--orange{--face:var(--orange);--face-hover:var(--orange-hover);--label:#fff}.key--ghost{--face:transparent;--face-hover:var(--key-grey);box-shadow:none}.key--ghost:active{box-shadow:none}.key--icon{width:34px;padding:0}.key--small{height:28px;padding:0 12px;font-size:13px}.key[aria-disabled=true],.key:disabled{--face:var(--key-grey);--face-hover:var(--key-grey);--label:var(--muted);box-shadow:none;cursor:default;top:0}.key svg{flex:none;width:15px;height:15px}.led{background:var(--led-off);width:6px;height:6px;transition:background-color var(--instant) linear, box-shadow var(--instant) linear;border-radius:50%;flex:none;display:inline-block}.led[data-lit=true]{background:var(--orange);box-shadow:0 0 6px 1px color-mix(in srgb, var(--orange) 55%, transparent)}.led[data-tone=green][data-lit=true]{background:#3fbf5f;box-shadow:0 0 6px 1px #3fbf5f80}.silk{color:var(--muted);font:500 10px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.index{color:var(--orange-text);font:500 13px/1 var(--font-mono)}.tag{background:var(--key-grey);height:20px;color:var(--ink);font:400 11px/1 var(--font-mono);border-radius:2px;align-items:center;padding:0 7px;display:inline-flex}.tag--ink{background:var(--ink);color:var(--page)}.tag--orange{background:var(--orange);color:#fff}.display{background:var(--display);box-shadow:var(--display-shadow);color:var(--display-ink);border-radius:6px}.display__legend{color:var(--display-label);font:500 10px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.digits{font-family:var(--font-display);letter-spacing:.04em;font-size:28px;line-height:1;display:inline-block;position:relative}.digits:before{content:attr(data-ghost);color:var(--display-dim);position:absolute;inset:0}.digits>span{position:relative}.meter{gap:3px;display:flex}.meter>i{background:var(--display-dim);border-radius:1px;width:4px;height:14px}.meter>i[data-lit=true]{background:var(--display-ink)}.window{background:var(--display);box-shadow:var(--display-shadow);border-radius:3px;overflow:hidden}.pixelated{image-rendering:pixelated}.faceplate{border:1px solid var(--hairline);background:var(--panel);box-shadow:var(--panel-shadow);border-radius:6px;position:relative}.screws{pointer-events:none;position:absolute;inset:0}.faceplate:before,.faceplate:after,.faceplate>.screws:before,.faceplate>.screws:after{content:"";border:1.5px solid var(--screw);border-radius:50%;width:7px;height:7px;position:absolute}.faceplate:before{top:9px;left:9px}.faceplate:after{top:9px;right:9px}.faceplate>.screws:before{bottom:9px;left:9px}.faceplate>.screws:after{bottom:9px;right:9px}.table{border-collapse:collapse;border-top:1px solid var(--ink);width:100%}.table th,.table td{border-bottom:1px solid var(--hairline);text-align:left;vertical-align:baseline;padding:11px 0;font-size:14px}.table th{color:var(--muted);font-weight:400}.table td{font-family:var(--font-mono);text-align:right}.segments{gap:8px;display:inline-flex}.segment{justify-items:center;gap:7px;display:grid}.segment .key{height:28px;padding:0 12px;font-size:13px}.segment .key[aria-pressed=true]{font-weight:700}.fader{color:var(--ink);font:400 14px var(--font-sans);cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;padding:4px 0;display:inline-flex}.fader__slot{background:var(--key-black);border-radius:2px;width:40px;height:4px;position:relative}.fader__cap{background:var(--key-white);width:16px;height:16px;box-shadow:var(--key-shadow);transition:transform var(--quick) var(--ease-out-quint);border-radius:50%;position:absolute;top:50%;left:0;transform:translateY(-50%)}.fader[aria-checked=true] .fader__cap{transform:translate(24px,-50%)}@media (prefers-reduced-motion:no-preference){.rise{animation:rise var(--scene) var(--ease-out-quint) both;animation-delay:calc(var(--i,0) * 70ms)}}@keyframes rise{0%{opacity:0;transform:translateY(var(--lift))}}