.lesson-layout.concert-mode{display:block;padding:12px 0 5px}.lesson-layout.concert-mode .lesson-copy{margin-bottom:10px}.lesson-layout.concert-mode .lesson-copy h1{font-size:25px;line-height:1.2;margin-bottom:6px}.lesson-layout.concert-mode .lesson-copy p{font-size:13px;margin:3px 0}.lesson-layout.concert-mode .exercise-card{padding:12px 16px}.lesson-layout.concert-mode .exercise-card h2{font-size:17px;margin-bottom:4px}
.concert-panel{max-width:100%;min-width:0}.concert-banner{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:9px;letter-spacing:.6px;color:var(--accent);font-weight:700;margin:3px 0 9px}.concert-stages{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}.concert-stages button,.concert-pages button{border:1px solid var(--line);border-radius:25px;padding:7px 10px;background:var(--soft);color:var(--ink);font-size:11px;cursor:pointer}.concert-stages button.selected,.concert-pages button[aria-pressed="true"]{background:var(--accent);color:white}.concert-guide{font-size:11px;color:var(--muted);margin:5px 0 9px}
.concert-music-row{display:grid;grid-template-columns:minmax(0,1fr) 195px;gap:11px;align-items:center;border-top:1px solid var(--line);padding:7px 0}.concert-line{min-width:0}.concert-line h3{color:var(--ink);font-size:13px;line-height:1.3;margin:0 0 2px}.concert-score-scroller{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);border-radius:8px;background:white;scrollbar-color:#ac9ecd #efedff}.concert-score-canvas{position:relative;min-width:925px;width:100%;padding-top:23px}.concert-score-canvas img{display:block;width:100%;height:auto}.concert-label-lane{position:absolute;top:1px;left:0;width:100%;height:22px}.concert-note-syllable,.concert-chord-syllable{position:absolute;top:0;transform:translateX(-50%);border-radius:6px;padding:2px 2px;min-width:17px;text-align:center;font-size:11px;font-weight:700;white-space:nowrap;color:#38216d;line-height:16px;transition:background .1s}.concert-note-syllable.next,.concert-chord-syllable.next{background:#fff0a5;box-shadow:0 0 0 1px #cf9c27}.concert-note-syllable.played,.concert-chord-syllable.played{background:#bce9d9;color:#155647}.concert-note-syllable.next.played,.concert-chord-syllable.next.played{background:#bce9d9}.concert-chord-lane .concert-chord-syllable{background:#f2ecff;color:#4b268c}
.concert-chord-side{background:var(--soft);border-radius:8px;padding:3px 6px}.concert-chord-tabs{display:flex;justify-content:center;gap:5px;margin-bottom:3px}.concert-chord-tabs button{font-size:11px;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:3px 12px;border-radius:14px;cursor:pointer}.concert-chord-tabs button[aria-pressed="true"]{color:#fff;background:var(--accent)}.concert-mini{padding:5px;background:var(--soft);border-radius:7px}.concert-mini p{color:var(--ink);font-size:10px;font-weight:700;margin:0 0 5px;line-height:1.2}.concert-mini-keys{height:61px;position:relative;background:#e4e4eb;border-radius:4px;overflow:hidden}.concert-white{position:absolute;top:0;height:100%;background:white;border:1px solid #888;z-index:1;display:flex;align-items:end;justify-content:center}.concert-white.marked{background:#d5b7fb}.concert-white i{font-size:8px;font-style:normal;color:#4a267d;padding-bottom:5px}.concert-black{position:absolute;height:56%;top:0;z-index:2;background:#29292a;border-radius:0 0 4px 4px}.concert-black.marked{background:#7047b5}
.concert-pages{display:flex;gap:8px;justify-content:center;margin:6px 0}.concert-statusbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:11px;background:var(--soft);border-radius:7px;padding:7px;margin:6px 0}.concert-statusbar strong{color:var(--ink)}.concert-statusbar #concertCount{margin-left:auto;color:var(--accent);font-weight:800}.concert-actions{display:flex;flex-wrap:wrap;gap:8px}.concert-actions button{font-size:11px;padding:9px 12px}.concert-hint{font-size:11px;min-height:1.4em;margin:5px 0 0;color:var(--muted)}.concert-hint.concert-good{color:#1a6a4f}
@media(max-width:800px){.concert-music-row{grid-template-columns:minmax(0,1fr) 135px;gap:6px}.concert-mini-keys{height:55px}.concert-mini p{font-size:9px}.concert-score-canvas{min-width:850px}.concert-stages button{font-size:10px;padding:6px 7px}.lesson-layout.concert-mode .exercise-card{padding:11px}.concert-actions button{font-size:10px;padding:7px 10px}}
@media(max-width:460px){.concert-music-row{grid-template-columns:minmax(0,1fr) 102px;gap:5px}.concert-mini-keys{height:47px}.concert-mini p{font-size:8px}.concert-chord-tabs button{padding:2px 7px}.concert-score-canvas{min-width:845px}.concert-actions button{font-size:10px;padding:7px}.concert-stages button{flex:1 1 42%}}

/* Keep the original card immediately above the interactive 88-key piano. */
#lesson.concert-active .lesson-buddy,#lesson.concert-active>.feedback{display:none!important}
.lesson-layout.concert-mode .exercise-card{min-height:0!important;height:auto!important}
#lesson.concert-active .lesson-layout{margin-bottom:0!important}

/* Grande Concerto only: keep natural piano-key proportions and bring it next to the card. */
#lesson.concert-active .piano-scroll.compact-piano{margin:3px 0 8px!important;max-width:100%;overflow-x:auto;overflow-y:hidden;touch-action:pan-x}
#lesson.concert-active .piano-scroll.compact-piano #piano{height:188px!important;min-width:2496px!important;width:2496px!important}
#lesson.concert-active .piano-scroll.compact-piano .white-key{height:180px!important}
#lesson.concert-active .piano-scroll.compact-piano .black-key{height:113px!important}
#lesson.concert-active #compactHelp,#lesson.concert-active .exercise-bottom{display:none!important}
#lesson.concert-active .lesson-layout.concert-mode{padding-bottom:0!important}
#lesson.concert-active .lesson-layout.concert-mode .exercise-card{padding-bottom:6px!important}
#lesson.concert-active .concert-hint:empty{display:none}
/* Both notated staves remain unscaled within horizontally scrollable views. */
.concert-score-pair{position:relative;padding-left:22px}
.concert-staff-brace{position:absolute;left:0;top:32px;width:17px;height:calc(100% - 66px);pointer-events:none;z-index:2}
.concert-music-row{padding:4px 0}
.concert-score-canvas{min-width:1010px}
.concert-guide{margin:4px 0 5px}
.concert-actions button{min-height:42px}
@media(max-width:800px){.concert-score-canvas{min-width:1010px}.concert-score-pair{padding-left:18px}.concert-staff-brace{width:14px}}

/* Real-time note-on / note-off, Grande Concerto only. The underlying PDF notation is unaltered. */
.concert-score-image{position:relative;width:100%}
.concert-score-image img{width:100%;height:auto;display:block}
.concert-notehead-layer{pointer-events:none;position:absolute;inset:0}
.concert-notehead-halo{position:absolute;transform:translate(-50%,-50%);width:19px;height:16px;border-radius:50%;background:transparent;opacity:0;pointer-events:none;transition:opacity .06s}
.concert-notehead-halo.pressed{opacity:1;background:#b7f6c1a8;outline:2px solid #19aa70;box-shadow:0 0 7px 3px #1bcf9a88}
.concert-note-syllable.pressed,.concert-chord-syllable.pressed{background:#71e8b0!important;color:#104f34!important;box-shadow:0 0 0 2px #119c62,0 0 7px #1bcf9a77!important}
/* A completed musical event is recorded subtly; it is not illuminated as an active note. */
.concert-note-syllable.played:not(.pressed),.concert-chord-syllable.played:not(.pressed){background:transparent!important;color:#38216d!important;box-shadow:none!important;text-decoration:underline;text-decoration-color:#81bca4}
.concert-note-syllable.next:not(.pressed),.concert-chord-syllable.next:not(.pressed){background:transparent!important;box-shadow:none!important}
#lesson.concert-active .piano-scroll .key.played-note{transition:background-color .025s linear}

/* Grande Concerto: two practice modes are offered within each hand phase.
   On desktop, keep controls in one row so that the piano does not move away. */
.concert-controls{display:flex;justify-content:space-between;align-items:center;gap:7px;flex-wrap:wrap}
.concert-modes{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:3px 0}
.concert-modes button{border:1px solid var(--line);border-radius:25px;padding:7px 11px;background:var(--soft);color:var(--ink);font-size:11px;cursor:pointer}
.concert-modes button.selected{background:var(--accent);color:white}
.concert-controls button:disabled{opacity:.42;cursor:not-allowed}
.concert-next{border-color:var(--accent)!important;color:var(--accent)!important;font-weight:700}
@media(max-width:800px){.concert-controls{align-items:flex-start}.concert-modes button{padding:6px 9px;font-size:10px}}