.kb-stage{--warm: #b08d3f;--warm-bright: #e2c78d;--warm-deep: #7a5f25;--kb-case: var(--in-body, #0b1f31);--kb-case-deep: var(--in-body-deep, #061321);--kb-natural-top: #fff;--kb-natural-bottom: #ebe9e3;--kb-natural-ink: #404040;--kb-accidental-top: #131c26;--kb-accidental-bottom: #000;--kb-accidental-ink: rgba(255, 255, 255, .78);--kb-key-height: 210px;position:relative;max-width:80rem;margin:0 auto;padding:16px 20px 0;border-radius:20px;background:linear-gradient(180deg,var(--kb-case) 0%,var(--kb-case-deep) 100%);color:#e6ecf1db;box-shadow:0 18px 40px #00000059;-webkit-user-select:none;-moz-user-select:none;user-select:none}.kb-stage .kb-panel{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:10px 14px;margin-bottom:10px;border-radius:12px;background:#00000038;box-shadow:inset 0 1px #ffffff0a}.kb-stage .kb-nameplate{display:flex;flex-direction:column;line-height:1.1;margin-right:auto}.kb-stage .kb-nameplate-kicker{font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#e2c78d99}.kb-stage .kb-nameplate-name{font-family:var(--st-display, Georgia, serif);font-style:italic;font-size:22px;color:var(--warm-bright)}.kb-stage .kb-voices{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.kb-stage .kb-voices-label{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#e6ecf18c}.kb-stage .kb-voice{min-height:44px;min-width:56px;padding:8px 14px;border-radius:10px;border:1px solid rgba(230,236,241,.14);background:#ffffff0d;color:#e6ecf1d1;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.kb-stage .kb-voice:hover{border-color:#e2c78d73}.kb-stage .kb-voice[aria-checked=true]{background:#e2c78d2e;border-color:var(--warm-bright);color:#fff;box-shadow:inset 0 -3px 0 var(--warm)}.kb-stage .kb-voice:focus-visible,.kb-stage .pc-btn:focus-visible{outline:2px solid var(--warm-bright);outline-offset:2px}.kb-stage .kb-controls{padding:8px 0 10px}.kb-stage .kb-volume{cursor:default}.kb-stage .kb-volume input{width:90px;accent-color:var(--warm-bright)}.kb-stage .kb-octave{display:inline-flex;align-items:center;gap:6px}.kb-stage .kb-octave-range{font-size:11px;font-weight:700;letter-spacing:.06em;min-width:9ch;text-align:center}.kb-stage .pc-btn:disabled{opacity:.4;cursor:default}.kb-stage .pc-btn-sm{min-width:32px;justify-content:center}.kb-stage .kb-deck{position:relative;margin:0 -20px;background:#000;border-radius:0 0 20px 20px;overflow:hidden}.kb-stage .kb-deck:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:4;background:linear-gradient(180deg,var(--warm) 0%,var(--warm-deep) 100%)}.kb-stage .kb-scroller{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin}.kb-stage .kb-keys{position:relative;height:var(--kb-key-height);min-width:calc(var(--kb-whites) * 24px);touch-action:pan-x}.kb-stage .kb-key{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0;padding:0 0 10px;border:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.kb-stage .kb-natural{height:100%;background:linear-gradient(180deg,var(--kb-natural-top) 0%,var(--kb-natural-bottom) 100%);border-right:1px solid rgba(0,0,0,.55);border-bottom:6px solid #1a1a1a;border-radius:0 0 5px 5px;color:var(--kb-natural-ink);box-shadow:inset 0 -1px 4px #0000002e;z-index:1}.kb-stage .kb-accidental{height:60%;background:linear-gradient(180deg,var(--kb-accidental-top) 0%,var(--kb-accidental-bottom) 100%);border:1px solid #000;border-top:0;border-radius:0 0 4px 4px;color:var(--kb-accidental-ink);box-shadow:0 5px 6px #0000008c;padding-bottom:6px;z-index:2}.kb-stage .kb-natural.pressed{background:linear-gradient(180deg,#f2ecdc,#e6d5a5);border-bottom-width:3px}.kb-stage .kb-accidental.pressed{background:linear-gradient(180deg,#3a3017,#120e05);height:calc(60% - 3px)}.kb-stage .kb-note,.kb-stage .kb-cap{pointer-events:none;font-weight:700;line-height:1.2}.kb-stage .kb-cap{display:none;font-size:12px}.kb-stage .kb-accidental .kb-cap{font-size:10px}.kb-stage .kb-note{font-size:10px;opacity:.7}.kb-stage.show-caps .kb-cap{display:block}.kb-stage.lm-letters .kb-note:after{content:attr(data-l-letters)}.kb-stage.lm-solfege .kb-note:after{content:attr(data-l-solfege)}.kb-stage.lm-number .kb-note:after{content:attr(data-l-number)}.kb-stage .kb-status{position:absolute;top:12px;left:50%;transform:translate(-50%);z-index:6;max-width:calc(100% - 24px);margin:0;padding:6px 12px;border-radius:999px;background:#050f18e6;color:var(--warm-bright);font-size:12px;font-weight:700;text-align:center;transition:opacity .3s}.kb-stage .kb-status[data-state=hidden]{opacity:0;pointer-events:none}.kb-stage .kb-status[data-state=error],.kb-stage .kb-status[data-state=unsupported]{color:#fecaca}.kb-stage .kb-retry{background:none;border:0;color:var(--warm-bright);font:inherit;text-decoration:underline;cursor:pointer}.kb-stage[data-loading] .kb-keys{opacity:.72}.kb-stage .kb-chip{position:absolute;right:12px;bottom:12px;z-index:6;margin:0;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:700;background:#050f18bf;color:#e6ecf1b3;pointer-events:none}.kb-stage[data-armed] .kb-chip{color:var(--warm-bright)}.kb-stage .kb-rail{display:none}.kb-stage .register-rail{position:relative;height:22px;margin:8px 12px;border-radius:4px;touch-action:none;cursor:pointer;background:repeating-linear-gradient(90deg,#f4f1ea 0 calc(100% / var(--kb-whites) - 1px),#1a1a1a calc(100% / var(--kb-whites) - 1px) calc(100% / var(--kb-whites)))}.kb-stage .register-rail-window{position:absolute;top:-2px;bottom:-2px;border:2px solid var(--warm-bright);border-radius:5px;background:#e2c78d2e;pointer-events:none}.kb-stage.is-focus{position:fixed;inset:0;z-index:1000;max-width:none;height:100svh;border-radius:0;overflow:auto}.kb-stage:fullscreen{max-width:none;border-radius:0;overflow:auto}@media(max-width:700px),(pointer:coarse){.kb-stage{display:flex;flex-direction:column;padding:0 12px 12px;border-radius:16px;--kb-key-height: 180px}.kb-stage .kb-deck{order:-1;margin:0 -12px 10px;border-radius:16px 16px 0 0}.kb-stage .kb-deck:before{display:none}.kb-stage .kb-deck:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:4;background:linear-gradient(0deg,var(--warm) 0%,var(--warm-deep) 100%)}.kb-stage .kb-keys{min-width:calc(var(--kb-whites) * 44px)}.kb-stage .kb-rail{display:block;height:22px;margin:8px 12px}.kb-stage .kb-panel{padding:8px 10px}.kb-stage .kb-nameplate-name{font-size:18px}.kb-stage .kb-controls{gap:6px}}@media(max-width:700px){.kb-stage .kb-chip{display:none}}@media(prefers-reduced-motion:reduce){.kb-stage .kb-status{transition:none}}.kb-stage .kb-rack{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;padding:12px 0 16px}.kb-stage.rack-closed .kb-rack{display:none}.kb-stage .kb-rack-card{margin:0;padding:10px 12px;border:1px solid rgba(230,236,241,.1);border-radius:12px;background:#00000038;min-width:0}.kb-stage .kb-rack-title{padding:0 4px;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--warm-bright)}.kb-stage .kb-rack-curve{display:block;width:100%;height:40px;margin:2px 0 6px}.kb-stage .kb-rack-curve path{fill:none;stroke:var(--warm-bright);stroke-width:1.5;vector-effect:non-scaling-stroke}.kb-stage .kb-rack-row{display:grid;grid-template-columns:7.5em 1fr 4.8em;align-items:center;gap:8px;min-height:32px;font-size:12px}.kb-stage .kb-rack-row input[type=range]{width:100%;accent-color:var(--warm-bright);min-height:24px}.kb-stage .kb-rack-row select{grid-column:span 2;min-height:30px;border-radius:6px;border:1px solid rgba(230,236,241,.2);background:#0b1f31;color:#fff;font:inherit}.kb-stage .kb-rack-row output{font-variant-numeric:tabular-nums;text-align:end;color:#e6ecf1c7}.kb-stage .kb-rack-row :disabled{opacity:.45}@media(max-width:700px){.kb-stage .kb-rack{display:none;grid-template-columns:1fr}.kb-stage.rack-open .kb-rack{display:grid}}.ih-family-heading[data-astro-cid-fccqnsfa]{margin:0 0 .5rem;font-size:1.25rem;font-weight:700;color:var(--st-ink)}.ih-family-intro[data-astro-cid-fccqnsfa]{margin:0 0 1.25rem;max-width:44rem;color:var(--st-ink-soft, var(--st-ink));line-height:1.6}
