.kd-shell{position:relative;--kd-gap: 1rem;--kd-pad-y: 1.4rem;--kd-pad-x: 1.5rem;--kd-crawl-min: 340px;--kd-crawl-size: 1.35rem;--kd-piano-h: 156px;--kd-black-h: calc(var(--kd-piano-h) * .46);--kd-readout-gap: 1.4rem;--kd-letter-size: clamp(3.2rem, 7vw, 6.4rem);--kd-quality-size: clamp(1.4rem, 2.6vw, 2.6rem)}.kd-bar{margin-bottom:var(--kd-gap)}.kd-bar-title{display:none;align-items:center;gap:.6rem;color:var(--ink);font:600 1.15rem var(--font-body)}.kd-bar-title svg{color:var(--accent)}.kd-banner{display:none;background:#c83c321f;border:1px solid rgba(200,60,50,.4);color:#f0b4ae;border-radius:var(--radius);padding:.85rem 1rem;margin-bottom:var(--kd-gap);font:400 .8rem/1.5 var(--font-mono);white-space:pre-wrap}.kd-banner.show{display:block}.kd-top{display:grid;grid-template-columns:minmax(420px,1.9fr) minmax(280px,1fr);gap:var(--kd-gap);margin-bottom:var(--kd-gap)}@media(max-width:1100px){.kd-top{grid-template-columns:1fr}}.kd-panel{background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius);padding:var(--kd-pad-y) var(--kd-pad-x);margin-bottom:var(--kd-gap);min-width:0;overflow:hidden}.kd-top .kd-panel{margin-bottom:0;display:flex;flex-direction:column;min-height:0}.kd-panel-title{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin:0 0 .9rem;color:var(--ink-soft);font:500 .95rem var(--font-body)}.kd-panel-note{color:var(--ink-faint);font:400 .8rem var(--font-mono)}.kd-key-panel{display:grid!important;grid-template-columns:1.15fr 1fr;gap:0}.kd-col{display:flex;flex-direction:column;min-width:0}.kd-col-key{container-type:inline-size;justify-content:center}.kd-col-alt{padding-left:var(--kd-pad-x);border-left:1px solid var(--line)}.kd-col-key{padding-right:var(--kd-pad-x)}@media(max-width:380px){.kd-key-panel{grid-template-columns:1fr}.kd-col-alt{padding-left:0;padding-top:1.1rem;border-left:0;border-top:1px solid var(--line)}.kd-col-key{padding-right:0}}.kd-key{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;font-family:var(--font-display);line-height:.95;color:var(--accent);min-width:0}.kd-key .kd-letter{font-size:var(--kd-letter-size);font-weight:600}@supports (font-size: 1cqw){.kd-key:not(.kd-idle) .kd-letter{font-size:clamp(2.6rem,52cqw,15rem)}.kd-key .kd-quality{font-size:clamp(1.1rem,15cqw,4rem)}}.kd-key .kd-quality{font-family:var(--font-body);font-size:var(--kd-quality-size);font-weight:500}.kd-key.kd-idle .kd-letter{font-size:clamp(1.6rem,3vw,2.4rem);font-family:var(--font-body)}.kd-key.kd-settled{color:#6fbf73}.kd-key.kd-unsure{color:var(--accent)}.kd-key.kd-weak{color:var(--ink-faint)}.kd-detail{color:var(--ink-soft);font:400 .82rem/1.5 var(--font-mono);margin:.9rem 0 0}.kd-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none;color:var(--ink-soft);font:400 .78rem var(--font-mono);margin-top:.8rem}.kd-toggle input{accent-color:var(--accent);cursor:pointer}.kd-also{display:flex;flex-direction:column;gap:.85rem}.kd-alt{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.35rem .7rem;min-width:0}.kd-alt-name{grid-column:1 / -1;grid-row:1;font:500 1.05rem var(--font-body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kd-alt-track{grid-column:1;grid-row:2;height:8px;min-width:0;background:var(--bg-surface);border-radius:4px;overflow:hidden}.kd-alt-track i{display:block;height:100%;width:0;background:var(--accent);border-radius:4px;transition:width .12s linear}.kd-alt-pct{grid-column:2;grid-row:2;min-width:2.9rem;text-align:right;font:400 .85rem var(--font-mono);color:var(--ink-soft);font-style:normal}.kd-crawl-panel{position:relative}.kd-crawl-hint{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font:400 .85rem var(--font-mono);pointer-events:none}.kd-crawl-hint[hidden]{display:none}.kd-crawl{flex:1;min-height:var(--kd-crawl-min);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem}.kd-crawl div{white-space:pre;font:500 var(--kd-crawl-size) var(--font-mono);color:var(--ink)}.kd-crawl div:nth-last-child(n+8){display:none}.kd-cell{display:inline-block;width:6.4rem}.kd-cell.kd-now{color:#fff}.kd-cell.kd-ghost{color:var(--accent);opacity:.62}.kd-cell.kd-ghost.kd-far{color:var(--ink-faint);opacity:.5}.kd-piano{position:relative;height:var(--kd-piano-h);user-select:none;border-radius:5px;overflow:hidden}.kd-piano .kd-white,.kd-piano .kd-black{position:absolute;top:0;border-radius:0 0 4px 4px;overflow:hidden}.kd-piano .kd-white{height:var(--kd-piano-h);background:#e6e2dc;border:1px solid #b4aea7}.kd-piano .kd-black{height:var(--kd-black-h);background:#17171a;border:1px solid #000;z-index:2}.kd-piano .kd-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(to top,var(--accent),#f5b464);transition:height .07s linear}.kd-piano .kd-lit{box-shadow:inset 0 0 0 1px #e8912abf}.kd-piano b{position:absolute;bottom:5px;left:6px;z-index:3;font:500 .62rem var(--font-mono);color:#6b6560}.kd-readout{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center;margin-top:var(--kd-readout-gap);color:var(--ink-soft);font:400 .8rem var(--font-mono)}.kd-readout b{color:var(--ink);font-weight:500}.kd-meter{display:inline-block;width:90px;height:5px;background:var(--bg-surface);border-radius:3px;overflow:hidden;vertical-align:middle;margin-left:.5rem}.kd-meter i{display:block;height:100%;width:0;background:var(--accent);transition:width .1s linear}.kd-controls{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.kd-controls .btn{font:500 .95rem var(--font-body);line-height:normal;cursor:pointer}.kd-controls .btn:disabled{opacity:.5;cursor:default;transform:none}.kd-mic-btn.kd-live:before{content:"";display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:currentColor;margin-right:.55rem;vertical-align:middle;animation:kd-pulse 1.8s ease-in-out infinite}@keyframes kd-pulse{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){.kd-mic-btn.kd-live:before{animation:none}}.kd-rate{color:var(--ink-faint)}.kd-input{font:400 .85rem var(--font-mono);background:var(--bg-surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:.6rem .7rem .6rem 2.1rem;width:11rem}.kd-saved{color:#6fbf73;font:400 .78rem var(--font-mono)}.kd-note{color:var(--ink-soft);font-size:.85rem;line-height:1.65;margin:.9rem 0 0;max-width:var(--measure)}.kd-shell.is-fullscreen{--kd-gap: .7rem;--kd-pad-y: 1rem;--kd-pad-x: 1.25rem;--kd-crawl-min: 0;--kd-readout-gap: .9rem;height:100dvh;display:flex;flex-direction:column;padding:.7rem clamp(.8rem,1.6vw,1.4rem);box-sizing:border-box;overflow:hidden}.kd-shell.is-fullscreen .page-head,.kd-shell.is-fullscreen .kd-note{display:none}.kd-shell.is-fullscreen .kd-bar{padding-left:3rem}.kd-shell.is-fullscreen .kd-bar-title{display:inline-flex}.kd-shell.is-fullscreen .kd-top{flex:1;min-height:0}.kd-shell.is-fullscreen .kd-top .kd-panel,.kd-shell.is-fullscreen .kd-crawl{height:100%}.kd-shell.is-fullscreen .kd-piano-panel,.kd-shell.is-fullscreen .kd-controls-panel{flex-shrink:0}.kd-shell.is-fullscreen .kd-controls-panel{margin-bottom:0}@media(max-height:760px)and (min-width:761px){.kd-shell.is-fullscreen{--kd-piano-h: 112px;--kd-letter-size: clamp(2.6rem, 5vw, 4.4rem);--kd-quality-size: clamp(1.1rem, 2vw, 1.7rem);--kd-crawl-size: 1.15rem;--kd-pad-y: .75rem}}@media(max-height:480px){.kd-shell.is-fullscreen .kd-piano{display:none}.kd-shell.is-fullscreen .kd-readout{margin-top:0}}@media(max-height:600px)and (min-width:761px){.kd-shell.is-fullscreen{--kd-piano-h: 84px;--kd-crawl-size: 1rem;--kd-pad-y: .55rem;--kd-gap: .5rem}.kd-shell.is-fullscreen .kd-bar{display:none}}@media(max-width:760px){.kd-shell.is-fullscreen{height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:.5rem .7rem .7rem}.kd-shell.is-fullscreen .kd-top{flex:1 0 auto;grid-template-rows:auto 1fr}.kd-shell.is-fullscreen .kd-top .kd-panel,.kd-shell.is-fullscreen .kd-crawl{height:auto}.kd-shell.is-fullscreen .kd-bar{padding-left:2.9rem}.kd-shell{--kd-pad-y: .8rem;--kd-pad-x: 1rem;--kd-gap: .6rem}.kd-top{gap:var(--kd-gap)}.kd-key-panel{grid-template-columns:1.25fr 1fr}.kd-col-key{padding-right:.9rem}.kd-col-alt{padding-left:.9rem}.kd-shell{--kd-letter-size: clamp(3rem, 15vw, 4.6rem);--kd-quality-size: clamp(1.1rem, 5.5vw, 1.8rem)}.kd-detail{font-size:.76rem;margin-top:.7rem}.kd-toggle{font-size:.72rem}.kd-also{gap:.7rem}.kd-alt{gap:.25rem .5rem}.kd-alt-name{grid-column:1;font-size:.95rem}.kd-alt-pct{grid-column:2;grid-row:1;min-width:0;font-size:.8rem}.kd-alt-track{grid-column:1 / -1;grid-row:2}.kd-crawl{min-height:0;gap:.4rem}.kd-crawl div:nth-last-child(n+5){display:none}.kd-crawl div{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}.kd-shell{--kd-crawl-size: 1.2rem}.kd-cell{width:auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.kd-shell{--kd-piano-h: 88px}.kd-piano b{font-size:.55rem;bottom:3px;left:3px}.kd-readout{gap:.45rem .9rem;margin-top:.9rem;font-size:.7rem}.kd-meter{width:54px}.kd-controls{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.kd-controls .btn{text-align:center;justify-content:center;padding:.75rem .8rem}.kd-mic-btn,.kd-saved{grid-column:1 / -1}.kd-note{display:none}}.kd-dialog{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-elevated);color:var(--ink);padding:1.5rem;width:min(26rem,calc(100vw - 2rem));box-shadow:0 24px 60px #0000008c}.kd-dialog::backdrop{background:#0009}.kd-dialog h2{margin:0 0 .5rem;font:600 1.25rem var(--font-body);color:var(--ink)}.kd-dialog-note{margin:0 0 1rem;color:var(--ink-soft);font:400 .85rem/1.5 var(--font-mono)}.kd-dialog-label{display:block;margin-bottom:.4rem;color:var(--ink-soft);font:500 .78rem var(--font-mono);text-transform:uppercase;letter-spacing:.06em}.kd-dialog-input{width:100%;box-sizing:border-box;padding:.7rem .8rem}.kd-dialog-input:focus{outline:2px solid var(--accent);outline-offset:1px}.kd-dialog-hint{margin:.6rem 0 0;color:var(--ink-faint);font:400 .78rem/1.6 var(--font-body)}.kd-dialog-hint code{font:400 .78rem var(--font-mono);color:var(--ink-soft);background:var(--bg-surface);padding:.1rem .3rem;border-radius:3px}.kd-dialog-error{margin:.7rem 0 0;color:#f0b4ae;font:400 .8rem/1.5 var(--font-mono)}.kd-dialog-error[hidden]{display:none}.kd-dialog-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.4rem}.kd-dialog-actions .btn{font:500 .9rem var(--font-body);cursor:pointer}@media(max-width:480px){.kd-dialog-actions{flex-direction:column-reverse}.kd-dialog-actions .btn{width:100%;text-align:center}}@media(max-width:760px)and (max-height:780px){.kd-shell.is-fullscreen{--kd-piano-h: 72px;--kd-pad-y: .6rem;--kd-gap: .5rem;--kd-letter-size: clamp(2.4rem, 15vw, 4rem)}.kd-shell.is-fullscreen .kd-controls .btn{padding:.62rem .7rem}.kd-shell.is-fullscreen .kd-readout{margin-top:.65rem}.kd-shell.is-fullscreen .kd-detail{margin-top:.6rem}}@media(max-width:500px)and (min-height:820px){.kd-shell.is-fullscreen{--kd-piano-h: 92px;--kd-crawl-size: 1.35rem}@supports (font-size: 1cqw){.kd-shell.is-fullscreen .kd-key:not(.kd-idle) .kd-letter{font-size:60cqw}.kd-shell.is-fullscreen .kd-key .kd-quality{font-size:17cqw}}}@media(max-width:500px)and (min-width:420px)and (min-height:920px){.kd-shell.is-fullscreen{--kd-piano-h: 100px;--kd-crawl-size: 1.75rem}@supports (font-size: 1cqw){.kd-shell.is-fullscreen .kd-key:not(.kd-idle) .kd-letter{font-size:82cqw}.kd-shell.is-fullscreen .kd-key .kd-quality{font-size:19cqw}}}