.keyboard-stage{position:relative}.keyboard-stage--pointer{cursor:pointer}.keyboard-splits{--splits-bleed:clamp(1.25rem, 2vw, 2rem);--split-gap:clamp(1.25rem, 8vw, 9.5rem);--key-unit:max(14px, min(64px, calc((100cqw + 2 * var(--splits-bleed) - var(--split-gap)) / var(--sum-deck-scaling,17.71))));--key-gap:calc(var(--key-unit) * (5 / 38));--key-pitch:calc(var(--key-unit) + var(--key-gap));justify-content:center;align-items:flex-start;gap:var(--split-gap);margin-inline:calc(var(--splits-bleed) * -1);flex-wrap:nowrap;display:flex}.keyboard-half{--deck-tilt:20deg;transform:perspective(1100px) rotateZ(var(--half-splay)) rotateX(var(--deck-tilt)) rotateY(var(--deck-tent));transform-origin:50% 45%;position:relative}.keyboard-deck{width:calc(var(--kbw) * var(--key-pitch));height:calc(var(--kbh) * var(--key-pitch));position:relative}.keyboard-case{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.keyboard-case--mid{transform:translateY(calc(var(--key-unit) * .14))}.keyboard-case--bottom{transform:translateY(calc(var(--key-unit) * .28));filter:drop-shadow(0 calc(var(--key-unit) * .45) calc(var(--key-unit) * .5) color-mix(in oklab, var(--shade) 55%, transparent))}.keyboard-case-shell{fill:color-mix(in oklab, var(--surface-2) 70%, var(--amber-hi));stroke:color-mix(in oklab, var(--amber-lo) 45%, var(--border-strong));stroke-width:calc(var(--case-pad) * .3);stroke-linejoin:round}.keyboard-case--mid .keyboard-case-side{fill:color-mix(in oklab, var(--surface-2) 50%, var(--amber-lo))}.keyboard-case--bottom .keyboard-case-side{fill:color-mix(in oklab, var(--amber-lo) 60%, black)}.keyboard-case-grain{opacity:.03}.keyboard-key{left:calc(var(--kx) * var(--key-pitch));top:calc(var(--ky) * var(--key-pitch));width:calc(var(--kw) * var(--key-unit));height:calc(var(--kh) * var(--key-unit));transform:rotate(var(--krot));cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform 90ms;position:absolute}.keyboard-key-face{--skirt:calc(var(--key-unit) * .13);border:1px solid color-mix(in oklab, var(--border) 80%, var(--amber));border-radius:calc(var(--key-unit) * .16);background:radial-gradient(120% 90% at 50% 30%, oklab(100% 0 5.96046e-8/.12), transparent 60%), linear-gradient(180deg, color-mix(in oklab, var(--surface) 100%, white 6%), var(--surface));box-shadow:inset 0 1px 0 var(--hl), inset 0 -2px 3px -1px var(--shade-soft), 0 var(--skirt) 0 color-mix(in oklab, var(--surface-2) 70%, var(--amber)), 0 var(--skirt) 0 1px color-mix(in oklab, var(--border-strong) 70%, var(--amber)), 0 calc(var(--skirt) + var(--key-unit) * .12) calc(var(--key-unit) * .22) color-mix(in oklab, var(--shade) 70%, transparent);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.1rem;padding:.15rem;transition:transform 90ms,border-color 90ms,box-shadow 90ms,background-color 90ms;display:flex;position:absolute;inset:0}.keyboard-key-halo{inset:calc(var(--key-unit) * -.18);border-radius:calc(var(--key-unit) * .55);background:radial-gradient(50% 40% at 50% 50%, color-mix(in oklab, var(--key-accent) 45%, transparent) 0%, color-mix(in oklab, var(--key-accent) 14%, transparent) 55%, transparent 78%);filter:blur(calc(var(--key-unit) * .14));opacity:0;pointer-events:none;transition:opacity .15s;position:absolute}.keyboard-key:focus-visible .keyboard-key-halo,.keyboard-key.is-pressed .keyboard-key-halo{opacity:1}.keyboard-key:focus-visible .keyboard-key-face,.keyboard-key.is-pressed .keyboard-key-face{transform:translateY(calc(var(--skirt) * .75));border-color:color-mix(in oklab, var(--key-accent) 55%, var(--border));background-color:color-mix(in oklab, var(--surface) 82%, var(--key-accent) 18%);box-shadow:inset 0 1px 0 var(--hl), inset 0 2px 4px var(--shade-soft), inset 0 0 12px color-mix(in oklab, var(--key-accent) 28%, transparent), 0 calc(var(--skirt) * .25) 0 color-mix(in oklab, var(--surface-2) 70%, var(--amber)), 0 calc(var(--skirt) * .25) 0 1px color-mix(in oklab, var(--border-strong) 70%, var(--amber)), 0 calc(var(--key-unit) * .08) calc(var(--key-unit) * .12) color-mix(in oklab, var(--shade) 60%, transparent)}.keyboard-key:focus-visible{outline:2px solid var(--key-accent);outline-offset:2px}.keyboard-key-glyph{flex-direction:column;justify-content:center;align-items:center;gap:.15rem;width:100%;display:flex;overflow:hidden}.keyboard-key-glyph>svg,.keyboard-key-glyph>span:not(.keyboard-key-label){width:clamp(.5rem, calc(var(--key-unit) * .58), 1.25rem);height:clamp(.5rem, calc(var(--key-unit) * .58), 1.25rem);flex:none}.keyboard-key-glyph .keyboard-key-label{font-family:var(--font-mono), serif;font-size:clamp(.34rem, calc(var(--key-unit) * .2), 1rem);letter-spacing:-.01em;color:var(--muted-foreground);text-overflow:ellipsis;white-space:nowrap;max-width:100%;line-height:1.1;overflow:hidden}.keyboard-key--space .keyboard-key-face{border-color:color-mix(in oklab, var(--pine) 55%, var(--border));background-color:color-mix(in oklab, var(--surface) 92%, var(--pine))}.keyboard-half--left{--half-splay:-4.5deg;--deck-tent:-17deg;rotate:-8deg}.keyboard-half--right{--half-splay:4.5deg;--deck-tent:17deg;rotate:8deg}.keyboard-assembly{position:relative}.keyboard-info{z-index:2;pointer-events:none;opacity:0;min-height:3.5rem;margin:0 0 clamp(.35rem,.9vw,.7rem);transition:opacity .16s,transform .16s;position:relative;transform:translateY(8px)scale(.98)}.keyboard-info-card{background:var(--surface);border:1px solid var(--border);width:300px;max-width:100%;box-shadow:0 14px 30px -14px var(--shade);border-radius:1.125rem;padding:1.1rem 1.25rem .95rem;display:block;position:absolute;top:0;left:50%;transform:translate(-50%)}.keyboard-info-top{align-items:flex-start;gap:.9rem;display:flex}.keyboard-info-glyph{background:linear-gradient(160deg, color-mix(in oklab, var(--info-bg,var(--info-accent,var(--surface))) 100%, #fff 16%) 0%, color-mix(in oklab, var(--info-bg,var(--info-accent,var(--surface))) 84%, #000 12%) 100%);border-radius:.875rem;flex:none;place-items:center;width:3.75rem;height:3.75rem;line-height:0;display:grid;box-shadow:inset 0 1px oklab(100% 0 5.96046e-8/.35),inset 0 -2px 4px oklab(0% none none/.18),0 3px 8px -3px oklab(0% none none/.3)}.keyboard-info-in{text-align:left;min-width:0;display:block}.keyboard-info--active{opacity:1;transform:translateY(0)}.keyboard-info-title{font-family:var(--font-mono);letter-spacing:-.01em;color:var(--foreground);text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:clamp(1rem,2.4vw,1.15rem);font-weight:700;line-height:1.3;display:block;overflow:hidden}.keyboard-info-desc{max-width:100%;color:color-mix(in oklab, var(--foreground) 86%, transparent);margin-top:.3rem;font-size:clamp(.75rem,2vw,.88rem);line-height:1.45}.keyboard-info-foot{border-top:1px solid var(--border);font-family:var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted-foreground);margin-top:.9rem;padding-top:.6rem;font-size:.65rem;font-weight:600;display:block}.keyboard-info-wire{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.keyboard-info-wire path{fill:none;stroke:color-mix(in oklab, var(--info-accent,var(--amber)) 58%, transparent);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.keyboard-info-wire-dot{fill:color-mix(in oklab, var(--info-accent,var(--amber)) 72%, transparent);stroke:var(--surface);stroke-width:2px}.keyboard-info-spacer{height:3.8rem}@media (prefers-reduced-motion:reduce){.keyboard-info,.keyboard-info-desc,.keyboard-key-halo{transition:none}}@media (width<=1100px) and (width>=701px){.keyboard-half--left,.keyboard-half--right{--deck-tent:-12deg}.keyboard-half--right{--deck-tent:12deg}.keyboard-half{--deck-tilt:18deg}}@media (width<=700px){.keyboard-info{min-height:11.5rem}.keyboard-info-card{top:auto;bottom:0}.keyboard-half--left,.keyboard-half--right{--deck-tent:-9deg;rotate:-4deg}.keyboard-half--right{--deck-tent:9deg;rotate:4deg}.keyboard-half{--deck-tilt:11deg}}.keyboard-stage{container-type:inline-size}@supports round(down, 1px, 0.5px){.keyboard-splits{--key-unit:max(14px, round(down, min(64px, calc((100cqw + 2 * var(--splits-bleed) - var(--split-gap)) / var(--sum-deck-scaling,17.71))), .5px))}}