.piano-content{max-width:1120px}.piano-content>.score-page-heading>svg{color:var(--tepo-primary)}.piano-panel,.piano-reference{padding:28px;border:1px solid var(--tepo-border);border-radius:22px;background:var(--tepo-surface);box-shadow:var(--tepo-shadow)}.piano-toolbar{justify-content:space-between;gap:24px;flex-wrap:wrap}.piano-octave,.piano-toolbar{display:flex;align-items:center}.piano-octave{gap:12px;font-size:14px}.piano-octave>span{color:var(--tepo-muted)}.piano-octave button,.piano-reference-player button{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--tepo-border);border-radius:10px;background:var(--tepo-surface-soft);color:var(--tepo-text)}.piano-octave button:disabled{opacity:.4}.piano-volume{display:flex;align-items:center;gap:10px;color:var(--tepo-muted);font-size:13px}.piano-volume input{width:100px;min-width:0}.piano-volume>span{min-width:35px}.piano-readout{display:flex;align-items:center;justify-content:center;gap:12px;min-height:90px;color:var(--tepo-primary);font-size:20px}.piano-readout small{color:var(--tepo-muted);font-size:13px}.piano-keys{position:relative;display:flex;height:240px;padding:0 0 6px;border-radius:12px;background:#252b2a;isolation:isolate}.piano-key{touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;gap:10px;padding:0 0 18px;cursor:pointer;transition:background .08s}.piano-key.white{width:12.5%;height:100%;background:#fafbf9;color:#35433d;border:1px solid #b9c3bd;border-bottom:7px solid #dce2dc;border-radius:0 0 9px 9px}.piano-key.black{position:absolute;top:0;transform:translateX(-50%);width:8%;height:62%;background:linear-gradient(#38433d,#202823);color:#f4f5f2;border:1px solid #131b16;border-bottom:7px solid #111813;border-radius:0 0 7px 7px;z-index:1;font-size:12px}.piano-key.white.pressed{background:#daccfa;border-bottom-color:#b29cdd}.piano-key.black.pressed{background:#7959d6;border-bottom-color:#5f3cb7}.piano-key kbd{font:inherit;opacity:.55;font-size:12px}.piano-key:focus-visible{outline:3px solid var(--tepo-focus);outline-offset:-4px;z-index:2}.piano-hints{text-align:center;padding-top:22px;color:var(--tepo-muted);font-size:13px;line-height:1.7}.piano-hints p{margin:3px 0}.piano-hints small{display:block;margin-top:12px;font-size:12px}.piano-reference{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:20px}.piano-reference h2{font-size:18px;margin:0 0 8px}.piano-reference p{color:var(--tepo-muted);font-size:13px;line-height:1.7;margin:0}.piano-upload{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid var(--tepo-border);border-radius:12px;background:var(--tepo-primary-soft);color:var(--tepo-primary);font-size:14px;cursor:pointer}.piano-upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.piano-upload:focus-within{outline:3px solid var(--tepo-focus);outline-offset:3px}.piano-reference-player{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;grid-gap:12px;gap:12px;flex-basis:100%;border-top:1px solid var(--tepo-border);padding-top:16px}.piano-reference-player strong{font-size:14px;overflow-wrap:anywhere}.piano-reference-player audio{width:100%;grid-column:1/-1}.piano-footnote{font-size:12px;color:var(--tepo-muted);text-align:center;margin-top:24px}@media(max-width:600px){.piano-panel,.piano-reference{padding:18px}.piano-toolbar{gap:14px}.piano-volume{width:100%;justify-content:space-between}.piano-volume input{flex:1 1;max-width:180px}.piano-keys{height:190px}.piano-key{font-size:12px;gap:7px;padding-bottom:12px}.piano-key.black{font-size:10px}.piano-key kbd{display:none}.piano-readout{font-size:17px;min-height:80px}.piano-hints p:nth-child(2){display:none}}