.keyboard-stage{perspective:900px;perspective-origin:50% 38%;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);transform-style:preserve-3d;flex-wrap:nowrap;display:flex}.keyboard-half{transform:rotateZ(var(--half-splay));transform-style:preserve-3d;position:relative}.keyboard-deck{width:calc(var(--kbw) * var(--key-pitch));height:calc(var(--kbh) * var(--key-pitch));transform:rotateX(20deg) rotateY(var(--deck-tent));transform-style:preserve-3d;position:relative}.keyboard-case{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.keyboard-case--top{transform:translateZ(calc(var(--key-unit) * -.35))}.keyboard-case--mid{transform:translateZ(calc(var(--key-unit) * -.48))}.keyboard-case--bottom{transform:translateZ(calc(var(--key-unit) * -.62));filter:drop-shadow(0 18px 24px color-mix(in oklab, var(--shade) 40%, transparent))}.keyboard-case-shell{fill:color-mix(in oklab, var(--surface-2) 84%, var(--amber));stroke:color-mix(in oklab, var(--amber) 34%, 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) 70%, var(--amber))}.keyboard-case--bottom .keyboard-case-side{fill:color-mix(in oklab, var(--amber) 45%, var(--shade) 55%)}.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)) translateZ(calc(var(--kz) * var(--key-unit) * -1)) rotateX(var(--ktilt));transform-style:preserve-3d;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform 90ms;position:absolute}.keyboard-key-face{border:1px solid;border-color:color-mix(in oklab, var(--surface) 80%, var(--hl)) color-mix(in oklab, var(--border) 80%, var(--amber)) color-mix(in oklab, var(--border) 40%, var(--amber)) color-mix(in oklab, var(--border) 88%, var(--hl));background-color:var(--surface);box-shadow:inset 0 1px 0 var(--hl), inset 0 -3px 5px -2px var(--shade-soft), 0 3px 6px -3px var(--shade);transform-style:preserve-3d;text-align:center;border-radius:.4rem;flex-direction:column;justify-content:center;align-items:center;gap:.1rem;padding:.15rem;transition:border-color 90ms,box-shadow 90ms,background-color 90ms;display:flex;position:absolute;inset:0}.keyboard-key-face:before{content:"";top:100%;left:calc(var(--key-unit) * .05);right:calc(var(--key-unit) * .05);height:calc(var(--key-unit) * .14);border-radius:0 0 calc(var(--key-unit) * .07) calc(var(--key-unit) * .07);background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, var(--amber)), color-mix(in oklab, var(--surface) 78%, var(--amber)));transform:translateZ(calc(var(--key-unit) * -.18));pointer-events:none;position:absolute}.keyboard-key-face:after{content:"";bottom:100%;left:calc(var(--key-unit) * .05);right:calc(var(--key-unit) * .05);height:calc(var(--key-unit) * .14);border-radius:calc(var(--key-unit) * .07) calc(var(--key-unit) * .07) 0 0;background:linear-gradient(0deg, color-mix(in oklab, var(--surface) 92%, var(--amber)), color-mix(in oklab, var(--surface) 78%, var(--amber)));transform:translateZ(calc(var(--key-unit) * -.18));pointer-events:none;position:absolute}.keyboard-key:before{content:"";left:0;top:calc(var(--key-unit) * .05);width:calc(var(--key-unit) * .18);height:calc(var(--kh) * var(--key-unit));transform-origin:0;background:linear-gradient(90deg, color-mix(in oklab, var(--surface) 96%, var(--amber)), color-mix(in oklab, var(--surface) 82%, var(--amber)));pointer-events:none;position:absolute;transform:rotateY(90deg)}.keyboard-key:after{content:"";right:0;top:calc(var(--key-unit) * .05);width:calc(var(--key-unit) * .18);height:calc(var(--kh) * var(--key-unit));transform-origin:100%;background:linear-gradient(90deg, color-mix(in oklab, var(--surface) 82%, var(--amber)), color-mix(in oklab, var(--surface) 96%, var(--amber)));pointer-events:none;position:absolute;transform:rotateY(-90deg)}.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;transform:translateZ(calc(var(--key-unit) * -.05));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.is-pressed{transform:rotate(var(--krot)) translateY(5px) translateZ(calc(var(--kz) * var(--key-unit) * -1)) rotateX(var(--ktilt))}.keyboard-key:focus-visible .keyboard-key-face,.keyboard-key.is-pressed .keyboard-key-face{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 -3px 5px -2px var(--shade-soft), inset 0 0 12px color-mix(in oklab, var(--key-accent) 28%, transparent), 0 3px 6px -3px var(--shade)}.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-stage{perspective:1100px}.keyboard-half--left,.keyboard-half--right{--deck-tent:-12deg}.keyboard-half--right{--deck-tent:12deg}.keyboard-deck{transform:rotateX(18deg) rotateY(var(--deck-tent))}}@media (width<=700px){.keyboard-info{min-height:11.5rem}.keyboard-info-card{top:auto;bottom:0}.keyboard-stage{perspective:1000px}.keyboard-half--left,.keyboard-half--right{--deck-tent:-9deg;rotate:-4deg}.keyboard-half--right{--deck-tent:9deg;rotate:4deg}.keyboard-deck{transform:rotateX(11deg) rotateY(var(--deck-tent))}}.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))}}