.top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 12px;margin-bottom:28px}
.top-actions{grid-column:2;grid-row:1}.nav{grid-column:1/-1;grid-row:2;flex-wrap:nowrap;margin:0;min-width:0}.nav button{white-space:nowrap;flex:none}
[data-page=piano] main{max-width:1120px}
.piano-panel{padding:18px;overflow:hidden;background:var(--surface)}
.piano-viewport{width:100%;height:clamp(210px,42vh,360px);overflow:hidden;border-radius:12px;border:1px solid #a9b3c1;background:#141d2b;scroll-behavior:auto}
.piano-keys{--white-count:35;position:relative;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;color-scheme:only light}
.piano-key{position:absolute;top:0;margin:0;padding:0;border:0;touch-action:none;-webkit-tap-highlight-color:transparent}
.white-key{left:calc(var(--key-position)*100%/var(--white-count));width:calc(100%/var(--white-count));height:100%;z-index:1;border-right:1px solid #aeb6c1;border-bottom:6px solid #ccd2d9;border-radius:0 0 7px 7px;background-color:#fafbfc;background-image:linear-gradient(90deg,#e9edf1 0%,#fff 14%,#fafbfc 82%,#e0e5ea 100%);box-shadow:inset 0 -1px 0 #ffffff;color:#36465a;color-scheme:only light}
.white-key.pressed{background:linear-gradient(#b8d8ff,#e5f1ff);border-bottom-width:2px;box-shadow:inset 0 3px 12px #2069c633}
.black-key{left:calc(var(--key-position)*100%/var(--white-count));width:calc(62%/var(--white-count));height:63%;z-index:2;transform:translateX(-50%);border:1px solid #101620;border-bottom:7px solid #090f17;border-radius:0 0 6px 6px;background:linear-gradient(90deg,#17212e,#344254 35%,#182330 90%);box-shadow:2px 5px 7px #07132355;color:#d1dce9}
.black-key.pressed{background:linear-gradient(90deg,#244d7d,#477bb9,#203e63);border-bottom-width:3px;box-shadow:1px 2px 3px #07132366}
.piano-note{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);padding:5px 4px;min-width:27px;border-radius:6px;font-size:12px;font-weight:650;letter-spacing:.01em;white-space:nowrap;background:#e4f0e6;color:#375b41;pointer-events:none}
.piano-note.octave-1{background:#deedf4;color:#315969}.piano-note.octave-2{background:#e4e8f8;color:#495980}
.black-key .piano-note{display:none}
.piano-key:focus-visible{outline:3px solid #2075ef;outline-offset:-4px}
.piano-footer{display:flex;align-items:center;gap:14px;margin-top:10px;color:var(--muted);font-size:12px}
.piano-guide{margin:0;line-height:1.5}.piano-portrait-tip{display:none}
.piano-range-scroll{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:10px}
#pianoScroll{--thumb-width:64px;appearance:none;-webkit-appearance:none;flex:1;min-width:0;height:24px;margin:0;background:transparent;cursor:ew-resize;touch-action:none}
#pianoScroll::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:var(--border)}
#pianoScroll::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--thumb-width);height:16px;margin-top:-4px;border-radius:99px;background:var(--accent);border:2px solid var(--surface);box-shadow:0 1px 4px #07132322}
#pianoScroll::-moz-range-track{height:8px;border-radius:99px;background:var(--border)}
#pianoScroll::-moz-range-thumb{width:var(--thumb-width);height:12px;border-radius:99px;background:var(--accent);border:2px solid var(--surface)}
#pianoRange{font-size:13px;color:var(--text);min-width:84px;text-align:center;font-variant-numeric:tabular-nums}
.piano-rotate{display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid var(--border);border-radius:9px;background:var(--soft);color:var(--muted);padding:4px}
.piano-rotate svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.piano-rotate:hover,.piano-rotate[aria-pressed=true]{color:var(--accent);background:var(--tint)}
#pianoStatus{margin:8px 0 0;min-height:18px;font-size:12px;color:var(--muted)}
#pianoStatus:empty{display:none}
[data-theme=dark] .piano-panel{border-color:var(--border)}
@media(max-width:600px){.nav{gap:4px}.nav button{flex:1;padding:10px 8px;font-size:14px}}
@media(orientation:portrait) and (max-width:600px){.piano-panel{padding:12px}.piano-guide{display:none}.piano-footer{gap:8px}.piano-range-scroll{gap:5px}.piano-note{font-size:12px;padding:5px 3px}}
@media(min-width:700px){.top{grid-template-columns:auto minmax(0,1fr) auto;gap:16px}.nav{grid-column:2;grid-row:1;justify-content:center}.top-actions{grid-column:3}.nav button{padding:10px 12px}}
@media(max-height:500px) and (orientation:landscape){main{padding:12px 16px}.top{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;margin-bottom:12px}.top .sub{display:none}.brand{font-size:20px}.nav{grid-column:2;grid-row:1;gap:3px;justify-content:center}.nav button{flex:none;padding:8px 10px;font-size:13px}.top-actions{grid-column:3;gap:6px}.top-actions .pill{font-size:11px;padding:7px 9px}.theme-switch [data-theme-icon]{width:28px;height:28px}.piano-panel{padding:12px}.piano-viewport{height:clamp(130px,calc(100dvh - 130px),430px)}.piano-footer{margin-top:6px}.piano-note{bottom:10px}.black-key .piano-note{bottom:8px}}
@media(max-height:500px) and (orientation:landscape) and (max-width:650px){main{padding:10px}.top{gap:5px}.brand{font-size:18px}.nav button{padding:7px 6px;font-size:12px}.top-actions .pill{font-size:10px;padding:6px}.theme-switch [data-theme-icon]{width:23px;height:23px}.top-actions{gap:4px}.piano-guide{display:none}}
.piano-view-open,.piano-view-open body{overflow:hidden}
.piano-expanded{position:fixed;inset:0 auto auto 0;z-index:1400;width:var(--view-width);height:var(--view-height);max-width:none;margin:0;border:0;border-radius:0;padding:12px;background:var(--page);display:flex;flex-direction:column;box-shadow:none;overscroll-behavior:none}
.piano-expanded.piano-rotated{left:100%;transform:rotate(90deg);transform-origin:0 0}
.piano-expanded .piano-viewport{flex:1;min-height:0;height:auto}
.piano-expanded .piano-footer{flex:none;margin-top:6px;gap:10px}
.piano-expanded .piano-guide{display:none}