.stage { border: 0; box-shadow: none; }
.stage, .piano-lessons .btn.ghost { background: transparent; }
.piano-lessons { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: 2px; border: 0; border-radius: .75rem; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.piano-lessons [data-lesson-title] { text-align: center; font-weight: 700; overflow-wrap: anywhere; }
.stage .btn { flex: none; min-width: 0; min-height: 0; padding: 2px; border: 0; box-shadow: none; }
.stage .btn:disabled { opacity: .4; cursor: default; }
.stage .btn:focus-visible { outline: 3px solid #1665c0; outline-offset: 2px; }
.piano-player { overflow: hidden; border: 2px solid #22303f; border-radius: .75rem; margin-bottom: 1rem; background: #182333; color: #fff; }
.piano-player:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: 1rem; }
.piano-player:fullscreen .piano-staff { background: #fff; border-bottom: 2px solid #c3d1e3; }
.piano-staff svg { display: block; width: 100%; height: auto; }
.piano-staff line { stroke: #22303f; stroke-width: 1.5; }
.piano-staff line.playhead { stroke: #e5484d; stroke-width: 2; }
.piano-staff ellipse { fill: #22303f; stroke: #22303f; stroke-width: 2; }
.piano-staff ellipse.half { fill: #fff; }
.piano-staff ellipse.on { fill: #7a6cff; stroke: #403398; }
.piano-staff text { fill: #22303f; font: bold 11px sans-serif; text-anchor: middle; }
.piano-roll { height: min(50vh, 500px); }
.piano-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; padding: .75rem; }
[data-time] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stage select { font: inherit; max-width: 100%; padding: .35rem; border: 0; border-radius: .5rem; color: #fff; text-shadow: 1px 1px 0 #000; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.piano-roll { height: clamp(180px, 32vh, 300px); overflow: hidden; background: repeating-linear-gradient(90deg, #edf4fc 0 calc(12.5% - 1px), #c3d1e3 calc(12.5% - 1px) 12.5%); border-bottom: 4px solid var(--c3); }
.piano-roll svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.piano-roll rect { fill: #7a6cff; stroke: #403398; stroke-width: 2; }
.piano-roll text { fill: #fff; font: bold 22px sans-serif; text-anchor: middle; }
.piano-keys { position: relative; display: flex; height: 150px; }
.piano-key { display: flex; justify-content: center; align-items: end; width: 12.5%; padding: 0 0 2px; font: inherit; font-size: clamp(12px, 3vw, 18px); color: #22303f; background: #fff; border: 1px solid #667; border-radius: 0 0 8px 8px; touch-action: manipulation; cursor: pointer; }
.piano-key.black { position: absolute; top: 0; width: 7.5%; height: 60%; z-index: 1; background: #22303f; color: #fff; font-size: clamp(9px, 2vw, 13px); }
.piano-key.active, .piano-key:active { background: #ffe39a; color: #22303f; }
.piano-key.target { outline: 4px solid #7a6cff; outline-offset: -5px; }
.piano-key:focus-visible { outline: 4px solid #1665c0; outline-offset: -5px; }
.piano-seek { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem .75rem 0; }
.piano-seek input { flex: 1; min-width: 120px; accent-color: var(--c3); }
[data-loop][aria-pressed="true"] { color: #fff; background: #7a6cff; border-color: #403398; }
[data-status] { min-height: 2em; font-weight: 700; }
[data-instructions] { margin: .5rem 0; padding: .6rem .8rem; border: 0; border-radius: .75rem; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }