.plib-app{--accent:#f18700;--soft:#fff1df;--ink:#171717;--muted:#667085;--line:#e4e7ec;--good:#238636;--bad:#c93c3c;font-family:inherit;color:var(--ink)}.plib-app *{box-sizing:border-box}.plib-loading, .plib-empty{padding:28px;border:1px solid var(--line);border-radius:16px;background:#fff}.plib-library-head h2{margin:0 0 5px;font-size:2rem}.plib-library-head p{margin:0 0 18px;color:var(--muted)}.plib-piece-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.plib-piece-card{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;display:flex;flex-direction:column}.plib-piece-image{aspect-ratio:16/9;background:linear-gradient(135deg,#fff8ed,#fff);display:grid;place-items:center;font-size:3rem;color:var(--accent)}.plib-piece-image img{width:100%;height:100%;object-fit:cover}.plib-piece-body{padding:18px;display:flex;flex:1;flex-direction:column}.plib-piece-body h3{margin:0 0 4px}.plib-piece-body p{margin:0;color:var(--muted)}.plib-meta{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}.plib-chip{font-size:.8rem;border-radius:999px;background:#f2f4f7;padding:5px 9px}.plib-button{border:1px solid var(--line);border-radius:11px;padding:10px 14px;background:#fff;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}.plib-primary{background:var(--accent);border-color:var(--accent);color:#fff;margin-top:auto}.plib-shell{border:0;border-radius:0;background:transparent;padding:20px}.plib-topbar, .plib-toolbar, .plib-heading, .plib-status{display:flex;align-items:center}.plib-topbar{justify-content:space-between;gap:14px;border-bottom:0;padding-bottom:16px}.plib-title{position:relative}.plib-title-row{position:relative;display:inline-flex;align-items:flex-start}.plib-title h1{margin:0;line-height:1.15}.plib-title-trigger{display:inline-flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:2rem;font-weight:700;line-height:1.15;padding:0;cursor:pointer;text-align:left}.plib-title-trigger:hover .plib-title-chevron{transform:translateY(1px)}.plib-title-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:5px}.plib-title-chevron{font-size:.72em;line-height:1;transition:transform .15s ease}.plib-title-trigger[aria-expanded="true"] .plib-title-chevron{transform:none}.plib-piece-menu{position:absolute;z-index:50;left:0;top:calc(100% + 10px);min-width:290px;max-width:min(420px,calc(100vw - 40px));padding:7px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(16,24,40,.14)}.plib-piece-menu[hidden]{display:none}.plib-piece-menu-item{width:100%;display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:center;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-weight:600;text-align:left;padding:10px 11px;cursor:pointer}.plib-piece-menu-item:hover,.plib-piece-menu-item:focus-visible{background:#fff7ed;outline:none}.plib-piece-menu-item[aria-checked="true"]{color:#b85d00;background:var(--soft)}.plib-piece-check{width:20px;text-align:center;color:var(--accent);font-weight:800}.plib-title p{margin:2px 0 0;color:var(--muted)}.plib-toolbar{justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 0}.plib-controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.plib-controls select{min-height:43px;border:1px solid var(--line);border-radius:10px;padding:8px 34px 8px 11px;background:#fff}.plib-tempo{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.plib-tempo button{border:0;background:#fff;padding:8px 13px;cursor:pointer}.plib-tempo span{padding:8px 12px;border-left:1px solid var(--line);border-right:1px solid var(--line)}.plib-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}.plib-card{border:0;border-radius:0;background:transparent}.plib-practice{padding:18px}.plib-heading{justify-content:space-between;margin-bottom:13px}.plib-heading h3{margin:0}.plib-heading p{margin:2px 0 0;color:var(--muted)}.plib-score-wrap{overflow:auto;border:0;border-radius:0;background:transparent}.plib-score{display:block;width:100%;min-width:900px;height:auto}.plib-keyboard-card{margin-top:16px;padding:12px}.plib-keyboard{display:flex;position:relative;height:170px;border:1px solid #98a2b3;border-radius:9px;overflow:hidden;background:#fff}.plib-white{flex:1;position:relative;border-right:1px solid #667085;background:linear-gradient(#fff,#f7f7f7);cursor:pointer}.plib-black{position:absolute;right:-29%;top:0;width:58%;height:58%;z-index:2;border-radius:0 0 4px 4px;background:linear-gradient(#222,#050505)}.plib-white.active{background:linear-gradient(#ffd092,#ff9f2f)}.plib-black.active{background:linear-gradient(#ffad45,#ef7700)}.plib-white.wrong, .plib-black.wrong{background:#d85b5b}.plib-key-footer{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}.plib-key-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.plib-inline-feedback{display:flex;gap:7px;align-items:baseline;flex:1 1 260px;justify-content:center;font-size:.9rem}.plib-inline-feedback[hidden]{display:none}.plib-inline-feedback span{color:var(--muted)}.plib-inline-feedback.good strong{color:var(--good)}.plib-inline-feedback.bad strong{color:var(--bad)}.plib-button[data-a="keyboard"][aria-pressed="true"]{background:var(--soft);border-color:var(--accent);color:#b85d00}.plib-shell.plib-keyboard-hidden .plib-keyboard{display:none}.plib-shell.plib-keyboard-hidden .plib-keyboard-card{padding:8px 12px}.plib-shell.plib-keyboard-hidden .plib-key-footer{margin-top:0}.plib-status{gap:8px}.plib-dot{width:12px;height:12px;border-radius:50%;background:#aab0b8}.plib-dot.connected{background:var(--good)}@media(max-width:1000px){.plib-piece-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plib-layout{grid-template-columns:1fr}}@media(max-width:700px){.plib-piece-grid{grid-template-columns:1fr}.plib-shell{padding:13px}.plib-topbar{align-items:flex-start;flex-direction:column}.plib-keyboard{height:135px}}

.plib-topbar-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

.plib-button[data-a="fullscreen"][aria-pressed="true"]{background:var(--soft);border-color:var(--accent);color:#b85d00}
.plib-shell:fullscreen{width:100vw;height:100vh;max-width:none;margin:0;padding:12px 16px;border:0;border-radius:0;overflow:hidden;background:#fffdf9;display:flex;flex-direction:column}
.plib-shell:fullscreen .plib-topbar{flex:0 0 auto;padding-bottom:10px}
.plib-shell:fullscreen .plib-toolbar{flex:0 0 auto;padding:10px 0}
.plib-shell:fullscreen .plib-layout{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;align-items:stretch}
.plib-shell:fullscreen main{min-width:0;min-height:0;display:grid;grid-template-rows:auto auto;align-content:start;gap:8px}
.plib-shell:fullscreen .plib-practice{min-height:0;padding:8px 10px;display:flex;flex-direction:column;overflow:hidden}
.plib-shell:fullscreen .plib-heading{flex:0 0 auto;margin-bottom:7px}
.plib-shell:fullscreen .plib-heading p{font-size:.88rem}
.plib-shell:fullscreen .plib-score-wrap{flex:0 0 auto;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.plib-shell:fullscreen .plib-score{width:100%;height:auto;min-width:0;max-height:clamp(245px,34vh,350px);object-fit:contain}
.plib-shell:fullscreen .plib-keyboard-card{margin-top:0;padding:8px}
.plib-shell:fullscreen .plib-keyboard{height:clamp(145px,23vh,220px);min-height:0}
.plib-shell:fullscreen .plib-key-footer{margin-top:7px}

@media(max-width:1000px){
  .plib-shell:fullscreen{overflow:auto}
  .plib-shell:fullscreen .plib-layout{display:block}
  .plib-shell:fullscreen main{display:block}
  .plib-shell:fullscreen .plib-keyboard-card{margin-top:12px}
  
  .plib-shell:fullscreen .plib-score{height:auto}
}
@media(max-width:700px){
  .plib-topbar-actions{width:100%}
  .plib-topbar-actions .plib-button{flex:1}
  
  .plib-topbar-actions [data-a="fullscreen"]{order:1}
  .plib-topbar-actions [data-a="library"]{order:2}
  .plib-shell:fullscreen{padding:10px}
  
  .plib-shell:fullscreen .plib-keyboard{height:130px}
}

.plib-shell:fullscreen.plib-keyboard-hidden main{grid-template-rows:auto auto}
.plib-shell:fullscreen.plib-keyboard-hidden .plib-keyboard-card{padding:7px 10px}
.plib-shell:fullscreen.plib-keyboard-hidden .plib-key-footer{margin-top:0}

/* Version 3.2: uploaded recording player */
.plib-recording-player{
	display:flex;
	align-items:center;
	gap:14px;
	padding:12px 16px;
	border:1px solid #ded8cf;
	border-radius:12px;
	background:#fffaf5;
	margin:0 0 12px;
}
.plib-recording-toggle{
	flex:0 0 auto;
	border:1px solid #e87522;
	border-radius:9px;
	background:#fff;
	color:#171717;
	font:inherit;
	font-weight:700;
	padding:9px 13px;
	cursor:pointer;
}
.plib-recording-toggle:hover{
	background:#fff4e5;
}
.plib-recording-track{
	position:relative;
	flex:1 1 auto;
	height:8px;
	min-width:120px;
	overflow:hidden;
	border-radius:999px;
	background:#e4e7eb;
	cursor:pointer;
}
.plib-recording-track span{
	display:block;
	width:0;
	height:100%;
	border-radius:inherit;
	background:#e87522;
}
.plib-recording-time{
	flex:0 0 auto;
	min-width:88px;
	color:#5f5b57;
	font-size:.9rem;
	font-variant-numeric:tabular-nums;
	text-align:right;
}
@media (max-width:700px){
	.plib-recording-player{
		flex-wrap:wrap;
	}
	.plib-recording-track{
		order:3;
		flex-basis:100%;
	}
	.plib-recording-time{
		margin-left:auto;
	}
}

/* Version 3.3: Follow Along mode */






.sz-follow-times-field{
	margin-top:18px;
	padding:16px;
	border:1px solid #ded8cf;
	border-radius:10px;
	background:#fffaf5;
}
@media (max-width:700px){
	
}

/* Version 3.6: full-score renderer */
.plib-score-wrap{
	max-height:78vh;
}
.plib-score{
	background:#fff;
}
@media (max-width:900px){
	.plib-score{
		min-width:900px;
	}
}

/* Version 4.0: score-first practice workspace */

.plib-score-wrap{
	max-height:none;
	overflow:auto;
	background:transparent;
}
.plib-score{
	display:block;
	width:100%;
	min-width:980px;
	height:auto;
	background:#fff;
}
.plib-svg-measure{
	cursor:pointer;
	outline:none;
}
.plib-svg-measure .plib-measure-hit{
	pointer-events:all;
}
.plib-svg-measure:hover .plib-measure-hit, .plib-svg-measure:focus .plib-measure-hit{
	fill:rgba(232,117,34,.07);
}
.plib-svg-measure:focus .plib-playhead{
	stroke-width:4;
}
.plib-playhead{
	transition:x1 .18s ease,x2 .18s ease;
}
@media (max-width:900px){
	.plib-score{
		min-width:980px;
	}
}


/* Version 4.2: Whole Piece and toggleable measure selection */
.plib-selection-bar{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
	margin:0 0 14px;
	padding:10px 12px;
	border:0;
	border-radius:0;
	background:transparent;
}
.plib-selection-bar > span{
	color:var(--muted);
}
.plib-selection-bar > strong{
	margin-right:auto;
}
.plib-whole-piece{
	padding:8px 12px;
}
.plib-whole-piece.is-active{
	border-color:var(--accent);
	background:var(--soft);
	color:#b85d00;
}
.plib-svg-measure.is-current .plib-measure-hit{
	fill:rgba(232,117,34,.09);
	stroke:#e87522;
	stroke-width:2;
	vector-effect:non-scaling-stroke;
}
@media (max-width:600px){
	.plib-selection-bar > strong{
		width:auto;
		margin-right:0;
	}
	.plib-whole-piece{
		margin-left:auto;
	}
}


/* Version 4.3: standalone reference recording */
.plib-reference-recording{display:grid;grid-template-columns:minmax(210px,auto) auto minmax(160px,1fr) auto;align-items:center;gap:12px}
.plib-reference-recording[hidden]{display:none}
.plib-reference-copy{display:flex;flex-direction:column;gap:2px}
.plib-reference-copy span{font-size:.88rem;color:var(--muted)}
@media(max-width:760px){.plib-reference-recording{grid-template-columns:1fr auto}.plib-reference-copy{grid-column:1/-1}.plib-recording-track{grid-column:1/-1}.plib-recording-time{justify-self:end}}


/* Version 4.3.3: current MIDI practice measure */
.plib-svg-measure.is-practice-current:not(.is-current) .plib-measure-hit{
  fill:rgba(47,143,70,.045);
  stroke:#2f8f46;
  stroke-width:1.5;
  stroke-dasharray:5 4;
  vector-effect:non-scaling-stroke;
}


/* Version 5: draggable practice targets */
.plib-score {
	touch-action: none;
	user-select: none;
}
.plib-svg-measure {
	cursor: crosshair;
}
.plib-svg-measure.is-drag-preview .plib-measure-hit {
	fill: rgba(232,117,34,.16);
	stroke: #e87522;
	stroke-width: 2.5;
	stroke-dasharray: 6 4;
	vector-effect: non-scaling-stroke;
}
.plib-svg-measure.is-current .plib-measure-hit {
	fill: rgba(232,117,34,.10);
	stroke: #e87522;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}
.plib-svg-measure.is-current + .plib-svg-measure.is-current .plib-measure-hit {
	stroke-left-width: 0;
}
.plib-selection-bar strong {
	font-variant-numeric: tabular-nums;
}




/* Version 5.0.3: visible measure-to-measure handover */
.plib-score-wrap {
	scroll-behavior: smooth;
}
.plib-svg-measure.is-practice-current .plib-measure-hit {
	fill: rgba(232,117,34,.055);
	stroke: rgba(232,117,34,.72);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: reduce) {
	.plib-score-wrap {
		scroll-behavior: auto;
	}
}


/* Version 5.0.4: note-first MIDI feedback */
.plib-svg-measure.is-current .plib-measure-hit {
	fill: rgba(232,117,34,.025);
	stroke: rgba(232,117,34,.48);
	stroke-width: 1.5;
}
.plib-svg-measure.is-practice-current .plib-measure-hit {
	fill: transparent;
	stroke: rgba(232,117,34,.38);
	stroke-width: 1.5;
}




/* Version 5.1: Teacher Mode */
.plib-notehead-played {
	transition: fill .12s ease, stroke .12s ease, transform .12s ease;
}
.plib-notehead-wrong {
	transform-box: fill-box;
	transform-origin: center;
	animation: plib-wrong-note .32s ease-in-out both;
}
@keyframes plib-wrong-note {
	0%, 100% { transform: translateX(0); }
	30% { transform: translateX(-2px); }
	65% { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
	.plib-notehead-wrong { animation: none; }
}


/* Version 5.2: audible four-beat count-in */
.plib-start-exercise {
	font-weight: 700;
}
.plib-start-exercise:disabled {
	cursor: wait;
	opacity: .72;
}
.plib-count-in {
	position: sticky;
	top: 12px;
	z-index: 20;
	width: 76px;
	height: 76px;
	margin: 0 auto 12px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #171717;
	color: #fff;
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 10px 30px rgba(0,0,0,.18);
	animation: plib-count-pop .22s ease-out both;
}
.plib-count-in[hidden] {
	display: none;
}
@keyframes plib-count-pop {
	from { opacity: 0; transform: scale(.82); }
	to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.plib-count-in { animation: none; }
}


/* Version 6: Listen & Play */
.plib-listen-play {
	font-weight: 750;
}
.plib-listen-play:disabled {
	cursor: wait;
	opacity: .72;
}
.plib-count-in {
	position: sticky;
	top: 12px;
	z-index: 20;
	width: auto;
	height: auto;
	min-width: 190px;
	padding: 12px 16px;
	margin: 0 auto 12px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: #171717;
	color: #fff;
	font-size: 1rem;
	font-weight: 750;
	line-height: 1;
	box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.plib-count-label {
	white-space: nowrap;
}
.plib-beat-dots {
	display: flex;
	gap: 7px;
}
.plib-beat-dots i {
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: rgba(255,255,255,.34);
	transform: scale(.86);
	transition: transform .1s ease, background .1s ease;
}
.plib-beat-dots i.is-current {
	background: #fff;
	transform: scale(1.28);
}
@media (prefers-reduced-motion: reduce) {
	.plib-beat-dots i { transition: none; }
}


/* Version 6.1: active Stop control */
.plib-listen-play[aria-pressed="true"] {
	font-weight: 800;
}


/* Version 6.4: moving playback cursor */
.plib-playback-cursor {
	stroke: #e87522;
	stroke-width: 3;
	stroke-linecap: round;
	pointer-events: none;
	opacity: .92;
}
@media (prefers-reduced-motion: reduce) {
	.plib-playback-cursor {
		opacity: .75;
	}
}


/* Version 6.5: JavaScript-driven playback cursor */
.plib-playback-cursor {
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform;
}


/* Version 7: direct MusicXML playback feedback */
[data-r="score"] svg.plib-note-pulse {
	animation: plib-note-pulse .12s ease-out;
}
@keyframes plib-note-pulse {
	from { opacity: .86; }
	to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	[data-r="score"] svg.plib-note-pulse { animation: none; }
}


/* Version 8: OpenSheetMusicDisplay score */
.plib-osmd-score {
	width: 100%;
	min-height: 260px;
	padding: 12px 8px 18px;
	background: #fff;
	overflow: visible;
}
.plib-osmd-score > svg {
	display: block;
	width: 100% !important;
	height: auto !important;
}
.plib-score-fallback[hidden],
.plib-osmd-score[hidden] {
	display: none !important;
}
.plib-measure-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 0 14px;
}
.plib-measure-button {
	border: 1px solid #ded8cf;
	border-radius: 999px;
	background: #fff;
	color: #171717;
	padding: 7px 12px;
	font: inherit;
	font-size: .875rem;
	line-height: 1.2;
	cursor: pointer;
}
.plib-measure-button:hover,
.plib-measure-button:focus-visible {
	border-color: #e87522;
}
.plib-measure-button.is-selected {
	border-color: #e87522;
	background: #fff4e8;
}
.plib-measure-button.is-active {
	outline: 2px solid #171717;
	outline-offset: 2px;
}
.plib-measure-button.is-complete::after {
	content: "";
}
.plib-osmd-score #cursorImg-0,
.plib-osmd-score [id^="cursorImg"] {
	opacity: .92;
}
@media (max-width: 600px) {
	.plib-osmd-score {
		padding-inline: 0;
	}
	.plib-measure-button {
		padding: 7px 10px;
	}
}


/* Version 8.1: focused practice score */
.plib-score-wrap {
	overflow: hidden;
}
.plib-osmd-score {
	overflow: hidden;
	min-height: 300px;
}
.plib-score-fallback[hidden] {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
}
.plib-score-wrap:has(.plib-osmd-score:not([hidden])) .plib-score-fallback {
	display: none !important;
}
.plib-measure-picker {
	position: sticky;
	top: 0;
	z-index: 12;
	background: #fff;
	padding-top: 4px;
}


/* Version 8.2: full score with selected-measure highlighting */
.plib-score-wrap {
	overflow-x: auto;
	overflow-y: visible;
}
.plib-osmd-score {
	overflow: visible;
	min-height: 0;
}
.plib-osmd-score svg {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	overflow: visible;
}
.plib-osmd-selected {
	filter: drop-shadow(0 0 1px rgba(232,117,34,.48));
}
.plib-osmd-active {
	filter: drop-shadow(0 0 2px rgba(232,117,34,.95));
}


/* Version 8.3: responsive score systems */
.plib-osmd-score.is-two-measure-layout {
	max-width: 980px;
	margin-inline: auto;
}
.plib-osmd-score.is-two-measure-layout > svg {
	margin-inline: auto;
}
.plib-osmd-score.is-four-measure-layout {
	max-width: 1420px;
	margin-inline: auto;
}
.plib-osmd-score.is-four-measure-layout > svg {
	display: block;
	margin-inline: auto;
}
:fullscreen .plib-score-wrap,
.plib-root:fullscreen .plib-score-wrap {
	display: flex;
	justify-content: center;
}
:fullscreen .plib-osmd-score,
.plib-root:fullscreen .plib-osmd-score {
	width: min(100%, 1420px);
	margin-inline: auto;
}
@media (max-width: 900px) {
	.plib-osmd-score.is-two-measure-layout {
		max-width: 100%;
	}
}


/* Version 8.4: four measures per system in fullscreen */
.plib-osmd-score.is-four-measure-layout {
	width: min(100%, 1500px);
	max-width: 1500px;
	margin-inline: auto;
}
.plib-osmd-score.is-four-measure-layout > svg {
	display: block;
	width: 100% !important;
	height: auto !important;
	margin-inline: auto;
}
.plib-root:fullscreen .plib-score-wrap {
	padding-inline: clamp(12px, 3vw, 48px);
}


/* Version 8.5.1: two measures normally, full-width fullscreen */
.plib-osmd-score.is-two-measure-layout {
	max-width: 980px;
	margin-inline: auto;
}
.plib-osmd-score.is-two-measure-layout > svg {
	display: block;
	width: 100% !important;
	height: auto !important;
	margin-inline: auto;
}

.plib-shell:fullscreen .plib-layout,
.plib-root:fullscreen .plib-layout {
	display: block !important;
	width: 100%;
	max-width: 1600px;
	min-height: 0;
	margin-inline: auto;
}

.plib-shell:fullscreen .plib-layout > *,
.plib-root:fullscreen .plib-layout > * {
	width: 100%;
	min-width: 0;
}

.plib-shell:fullscreen .plib-score-wrap,
.plib-root:fullscreen .plib-score-wrap {
	display: block;
	width: 100%;
	margin-inline: auto;
}

.plib-shell:fullscreen .plib-osmd-score,
.plib-root:fullscreen .plib-osmd-score {
	width: min(100%, 1500px);
	max-width: 1500px;
	margin-inline: auto;
}

.plib-shell:fullscreen .plib-layout .plib-side,
.plib-root:fullscreen .plib-layout .plib-side {
	width: 100%;
	max-width: none;
	margin-top: 12px;
}

@media (max-width: 900px) {
	.plib-osmd-score.is-two-measure-layout {
		max-width: 100%;
	}
}


/* Version 9 Phase 1: controlled score systems */
.plib-osmd-score {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	max-width: none;
	margin-inline: auto;
}
.plib-osmd-system {
	width: 100%;
	margin-inline: auto;
}
.plib-osmd-system-canvas {
	width: 100%;
}
.plib-osmd-system-canvas > svg {
	display: block;
	width: 100% !important;
	height: auto !important;
	margin-inline: auto;
}
.plib-osmd-score.is-two-measure-layout {
	width: min(100%, 980px);
	max-width: 980px;
}
.plib-osmd-score.is-four-measure-layout {
	width: min(100%, 1500px);
	max-width: 1500px;
}
.plib-shell:fullscreen .plib-layout,
.plib-root:fullscreen .plib-layout {
	display: block !important;
	grid-template-columns: none !important;
	width: 100%;
	max-width: 1600px;
	min-height: 0;
	margin-inline: auto;
}
.plib-shell:fullscreen .plib-layout > *,
.plib-root:fullscreen .plib-layout > * {
	width: 100%;
	min-width: 0;
}
.plib-root:fullscreen .plib-score-wrap,
.plib-shell:fullscreen .plib-score-wrap {
	display: block;
	width: 100%;
}
@media (max-width: 700px) {
	.plib-osmd-score.is-two-measure-layout,
	.plib-osmd-score.is-four-measure-layout {
		width: 100%;
		max-width: 100%;
	}
}


/* Version 9.0.3: four measures per system in all modes */
.plib-osmd-score.is-two-measure-layout {
	width: min(100%, 1500px) !important;
	max-width: 1500px !important;
}
.plib-osmd-score.is-four-measure-layout {
	width: min(100%, 1500px);
	max-width: 1500px;
	margin-inline: auto;
}
.plib-osmd-score.is-four-measure-layout .plib-osmd-system {
	width: 100%;
	max-width: 1500px;
	margin-inline: auto;
}
.plib-osmd-score.is-four-measure-layout .plib-osmd-system-canvas > svg {
	display: block;
	width: 100% !important;
	height: auto !important;
	margin-inline: auto;
}


/* Version 9.1 Phase 2: playback synchronization */
.plib-playback-sync {
	display: grid;
	grid-template-columns: auto minmax(120px, 1fr) auto;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	padding: 9px 12px;
	border: 1px solid #ded8cf;
	border-radius: 12px;
	background: #fffaf5;
	font-size: .875rem;
}
.plib-playback-sync[hidden] {
	display: none !important;
}
.plib-sync-track {
	display: block;
	height: 7px;
	overflow: hidden;
	border-radius: 999px;
	background: #e9e4dc;
}
.plib-sync-track i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: #e87522;
	transition: width .08s linear;
}
.plib-osmd-active {
	filter: drop-shadow(0 0 2px rgba(232,117,34,.95));
}
.plib-cursor-pulse {
	animation: plib-cursor-pulse .16s ease-out;
}
@keyframes plib-cursor-pulse {
	from { opacity: .45; transform: scaleX(1.45); }
	to { opacity: 1; transform: scaleX(1); }
}
@media (max-width: 600px) {
	.plib-playback-sync {
		grid-template-columns: 1fr auto;
	}
	.plib-sync-track {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}
@media (prefers-reduced-motion: reduce) {
	.plib-sync-track i { transition: none; }
	.plib-cursor-pulse { animation: none; }
}


/* Version 9.1.1: corrected measure background and custom cursor */
.plib-osmd-system { position: relative; }
.plib-system-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.plib-osmd-system-canvas {
	position: relative;
	z-index: 1;
}
.plib-measure-bg-overlay {
	position: absolute;
	border-radius: 8px;
	background: rgba(110,110,110,.10);
	box-shadow: inset 0 0 0 1px rgba(110,110,110,.10);
}
.plib-custom-playback-cursor {
	position: absolute;
	width: 2px;
	border-radius: 2px;
	background: #e87522;
	transform: translateX(-1px);
	box-shadow: 0 0 0 1px rgba(255,255,255,.55);
}
.plib-osmd-selected,
.plib-osmd-active { filter: none !important; }
.plib-cursor-pulse { animation: none !important; }


/* Version 9.1.2: exact OSMD measure geometry */
.plib-osmd-system {
	position: relative;
}
.plib-system-overlay-bg,
.plib-system-overlay-fg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.plib-system-overlay-bg {
	z-index: 0;
}
.plib-osmd-system-canvas {
	position: relative;
	z-index: 1;
}
.plib-system-overlay-fg {
	z-index: 2;
}
.plib-measure-bg-overlay {
	background: rgba(120,120,120,.105);
	border-radius: 7px;
	box-shadow: inset 0 0 0 1px rgba(120,120,120,.08);
}
.plib-custom-playback-cursor {
	width: 2px;
	background: #e87522;
	box-shadow: 0 0 0 1px rgba(255,255,255,.45);
}


/* Version 9.2: SVG-native measure highlight and playback cursor */
.plib-svg-guide-layer {
	pointer-events: none;
}
.plib-svg-measure-highlight {
	fill: rgba(120,120,120,.07);
	stroke: none;
	shape-rendering: crispEdges;
}
.plib-svg-playback-cursor {
	stroke: #e87522;
	stroke-width: 2;
	stroke-linecap: butt;
	vector-effect: non-scaling-stroke;
}
.plib-system-overlay-bg,
.plib-system-overlay-fg,
.plib-measure-bg-overlay,
.plib-custom-playback-cursor {
	display: none !important;
}


/* Version 9.2.1: corrected OSMD engraving-unit alignment */
.plib-svg-measure-highlight {
	fill: rgba(120,120,120,.07);
	stroke: none;
	rx: 0;
	ry: 0;
}


/* Version 9.2.2: smoother playback cursor */
.plib-svg-playback-cursor {
	shape-rendering: geometricPrecision;
	will-change: transform;
}


/* Version 9.3: canvas playback layer */
.plib-osmd-system {
	position: relative;
}
.plib-playback-canvas {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	pointer-events: none;
}
.plib-osmd-system-canvas {
	position: relative;
	z-index: 1;
}
.plib-svg-guide-layer,
.plib-svg-measure-highlight,
.plib-svg-playback-cursor {
	display: none !important;
}


/* Version 9.3.1: playback status strip removed */
.plib-playback-sync {
	display: none !important;
}


/* Version 9.4: current notehead playback color */
.plib-playback-canvas {
	image-rendering: auto;
}


/* Version 9.5: live Play Along feedback */
.plib-inline-feedback.good {
	border-color: rgba(47,125,74,.28);
}
.plib-inline-feedback.bad {
	border-color: rgba(200,59,59,.28);
}


/* Version 10: compact piece resources */
.plib-resource-button {
	white-space: nowrap;
	text-decoration: none;
}

.plib-reference-compact {
	margin: 0 20px 16px;
	padding: 12px 14px;
	min-height: 0;
	grid-template-columns: minmax(180px, auto) auto minmax(160px, 1fr) auto;
	gap: 12px;
}

.plib-reference-compact .plib-reference-copy span {
	display: none;
}

.plib-reference-compact[hidden],
.plib-pdf-button[hidden],
.plib-resource-button[hidden] {
	display: none !important;
}

.plib-pdf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 760px) {
	.plib-reference-compact {
		margin: 0 12px 14px;
		grid-template-columns: 1fr auto;
	}

	.plib-reference-compact .plib-recording-track,
	.plib-reference-compact .plib-recording-time {
		grid-column: 1 / -1;
	}
}


/* Version 10.1: Play Along loop */
.plib-loop-button {
	white-space: nowrap;
}

.plib-loop-button.is-active {
	background: var(--accent-soft, #fff1df);
	border-color: var(--accent, #e87522);
	color: var(--ink, #171717);
	box-shadow: inset 0 0 0 1px var(--accent, #e87522);
}


/* Version 10.2: direct measure selection on the score */
.plib-measure-picker {
	display: none !important;
}

.plib-selection-canvas,
.plib-playback-canvas {
	position: absolute;
	inset: 0 auto auto 0;
}

.plib-selection-canvas {
	z-index: 2;
	pointer-events: none;
}

.plib-playback-canvas {
	z-index: 3;
	pointer-events: none;
}

.plib-osmd-system {
	cursor: pointer;
}

.plib-osmd-system:focus-visible {
	outline: 2px solid var(--accent, #e87522);
	outline-offset: 4px;
}


/* Version 10.3: note-range dragging */
.plib-osmd-system {
	touch-action: pan-y;
	user-select: none;
}

.plib-osmd-system:hover {
	cursor: crosshair;
}


/* Version 10.4: clearer phrase selection */
.plib-selection-canvas {
	overflow: visible;
}


/* Version 11.0 — sample-based WebAudioFont piano.
   The trainer interface remains unchanged. */


/* Version 11.0.1 — WebAudioFont playback timing calibration.
   No visual changes. */

/* Version 11.2 — compact Reference Recording practice controls */
.plib-reference-practice{display:grid;gap:12px;padding:15px 17px;border:1px solid var(--line,#ded8cf);border-radius:15px;background:var(--card,#fff)}.plib-reference-practice[hidden]{display:none!important}.plib-reference-practice .plib-reference-copy{display:flex;flex-direction:column;gap:2px}.plib-reference-practice .plib-reference-copy span{font-size:.84rem;color:var(--muted,#777)}.plib-reference-controls{display:grid;grid-template-columns:auto minmax(130px,1fr) auto auto auto auto auto;align-items:center;gap:9px}.plib-reference-current{min-width:62px;text-align:center;color:var(--accent,#e87522);font-size:1.05rem}.plib-reference-controls .plib-button,.plib-reference-controls .plib-recording-toggle{min-height:38px;white-space:nowrap}.plib-reference-loop.is-active{border-color:var(--accent,#e87522);background:var(--accent-soft,#fff4e5);color:var(--accent,#e87522)}.plib-reference-ladder{display:flex;align-items:center;gap:7px;overflow-x:auto;padding:1px 0 3px}.plib-speed-step{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1 0 auto;min-width:103px;min-height:34px;padding:5px 10px;border:1px solid #d9d5cf;border-radius:999px;background:#fff;color:#77716b;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer}.plib-speed-dot{width:11px;height:11px;border:2px solid currentColor;border-radius:50%;background:transparent}.plib-speed-step.is-complete{border-color:#8bd3a8;background:#f3fcf6;color:#257a4f}.plib-speed-step.is-complete .plib-speed-dot{background:#3fbd74;border-color:#3fbd74}.plib-speed-step.is-current{border-color:var(--accent,#e87522);background:var(--accent-soft,#fff4e5);color:var(--accent,#e87522)}.plib-speed-step.is-current .plib-speed-dot{background:var(--accent,#e87522);border-color:var(--accent,#e87522)}.plib-speed-arrow{color:#aaa39c;font-weight:700;flex:0 0 auto}@media(max-width:900px){.plib-reference-controls{grid-template-columns:auto minmax(120px,1fr) auto;display:flex;flex-wrap:wrap}.plib-reference-practice .plib-recording-track{flex:1 1 180px}.plib-reference-ladder{padding-bottom:7px}}@media(max-width:560px){.plib-reference-practice{padding:13px}.plib-reference-controls .plib-recording-track{order:6;flex-basis:100%}.plib-speed-step{min-width:98px}}


.plib-practice-button{
  border-color:#e87522;
  color:#b95612;
  background:#fffaf5;
}
.plib-practice-button:hover,
.plib-practice-button:focus-visible{
  background:#fff1df;
}
.plib-practice-button.is-active{
  color:#fff;
  background:#e87522;
  border-color:#e87522;
}


/* Practice mode uses canvas halos over the original black notation.
   The noteheads themselves remain unchanged. */
.plib-practice-button.is-active{
  box-shadow:0 0 0 3px rgba(232,117,34,.18);
}


.plib-practice-note-correct{
  transition:fill .12s ease,filter .12s ease;
}
.plib-practice-note-wrong{
  animation:plib-practice-note-wrong .42s ease both;
}
@keyframes plib-practice-note-wrong{
  0%,100%{opacity:1}
  45%{opacity:.45}
}
@media (prefers-reduced-motion:reduce){
  .plib-practice-note-wrong{animation:none}
}


.plib-osmd-system{position:relative}
.plib-practice-feedback-layer{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  overflow:visible;
}
.plib-practice-feedback-marker{
  position:absolute;
  width:18px;
  height:14px;
  transform:translate(-50%,-50%) rotate(-15deg);
  border-radius:50%;
  border:2px solid rgba(255,255,255,.98);
  box-sizing:border-box;
}
.plib-practice-feedback-marker.is-expected{
  background:#f18700;
  box-shadow:0 0 0 3px rgba(241,135,0,.20),0 0 10px rgba(241,135,0,.58);
}
.plib-practice-feedback-marker.is-correct{
  background:#2f8f46;
  box-shadow:0 0 0 2px rgba(47,143,70,.18),0 0 8px rgba(47,143,70,.42);
}
.plib-practice-feedback-marker.is-wrong{
  background:#c83b3b;
  box-shadow:0 0 0 3px rgba(200,59,59,.20),0 0 11px rgba(200,59,59,.62);
  animation:plib-practice-marker-wrong .52s ease both;
}
@keyframes plib-practice-marker-wrong{
  0%,100%{transform:translate(-50%,-50%) rotate(-15deg) scale(1)}
  45%{transform:translate(-50%,-50%) rotate(-15deg) scale(1.35)}
}
@media (prefers-reduced-motion:reduce){
  .plib-practice-feedback-marker.is-wrong{animation:none}
}


/* Version 2.7.2: two measures per system */
.plib-osmd-score.is-two-measure-layout {
  width: min(100%, 1500px) !important;
  max-width: 1500px !important;
  gap: 28px;
}
.plib-osmd-score.is-two-measure-layout .plib-osmd-system,
.plib-osmd-score.is-two-measure-layout .plib-osmd-system-canvas {
  width: 100%;
  max-width: none;
}
.plib-osmd-score.is-two-measure-layout .plib-osmd-system-canvas > svg {
  display: block;
  width: 100% !important;
  height: auto !important;
}

/* Piano Library 3.0: one OSMD score with native two-measure system breaks */
.plib-osmd-score.is-two-measure-layout {
  width: 100% !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  display: block !important;
  padding: 12px clamp(4px, 1.2vw, 18px) 18px !important;
}
.plib-osmd-score.is-two-measure-layout .plib-osmd-system,
.plib-osmd-score.is-two-measure-layout .plib-osmd-system-canvas {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.plib-osmd-score.is-two-measure-layout .plib-osmd-system-canvas > svg {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
}
.plib-osmd-score.is-two-measure-layout .plib-osmd-system {
  position: relative;
}
@media (max-width: 760px) {
  .plib-osmd-score.is-two-measure-layout {
    min-width: 760px;
  }
  .plib-score-wrap {
    overflow-x: auto;
  }
}


/* Piano Library 3.1: wider score, tighter systems, active-system focus */
.plib-osmd-score.is-two-measure-layout {
  width: 100% !important;
  max-width: 1500px !important;
  padding: 8px clamp(2px, .6vw, 10px) 12px !important;
}
.plib-osmd-score.is-two-measure-layout .plib-osmd-system {
  margin: 0 !important;
  border-radius: 12px;
  transition: background-color .2s ease;
}
.plib-osmd-score.is-two-measure-layout .plib-osmd-system-canvas > svg {
  width: 100% !important;
  max-width: none !important;
}
.plib-score-wrap {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  .plib-score-wrap { scroll-behavior: auto; }
  .plib-osmd-score.is-two-measure-layout .plib-osmd-system { transition: none; }
}
@media (max-width: 760px) {
  .plib-osmd-score.is-two-measure-layout {
    min-width: 760px;
  }
}


/* Piano Library 3.2.5 — persistent, notehead-sized Practice feedback.
   The overlay is repainted from practice history so OSMD re-renders cannot
   erase correctly played notes. No halo, border, or expected-note orange. */
.plib-practice-feedback-marker {
  display:block !important;
  width:15px;
  height:10.5px;
  border:0 !important;
  box-shadow:none !important;
  transform:translate(-50%,-50%) rotate(-18deg);
  border-radius:50%;
}
.plib-practice-feedback-marker.is-correct {
  background:#2f8f46;
  box-shadow:none !important;
}
.plib-practice-feedback-marker.is-expected { display:none !important; }
.plib-practice-feedback-marker.is-wrong {
  background:#c83b3b;
  box-shadow:none !important;
}
.plib-practice-note-correct,
.plib-practice-note-wrong { filter:none !important; }


/* Piano Library 3.2.6 — temporary wrong-note feedback.
   Correct history remains persistent green; only outstanding notes in the
   current event flash red after an incorrect MIDI key. */
.plib-practice-feedback-marker.is-wrong {
  background:#c83b3b !important;
  animation:plib-practice-wrong-flash .65s ease-out both;
}
@keyframes plib-practice-wrong-flash {
  0%,100% { opacity:1; transform:translate(-50%,-50%) rotate(-18deg) scale(1); }
  45% { opacity:.72; transform:translate(-50%,-50%) rotate(-18deg) scale(1.16); }
}
@media (prefers-reduced-motion:reduce) {
  .plib-practice-feedback-marker.is-wrong { animation:none; }
}

/* v3.3.0: MIDI control in header */
.plib-midi-button.is-connected{color:var(--good);border-color:#8bd3a8;background:#f3fcf6}
.plib-midi-sr-status{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:700px){.plib-topbar-actions [data-a="fullscreen"]{order:1}.plib-topbar-actions [data-a="midi"]{order:2}.plib-topbar-actions [data-a="library"]{order:3}}

/* v3.3.1 — hand selector in Score Practice controls */
.plib-selection-bar .plib-hand-mode{min-height:43px;border:1px solid var(--line);border-radius:11px;padding:8px 34px 8px 12px;background:#fff;color:var(--ink);font:inherit;cursor:pointer}

/* v3.4.4: virtual Collection archive pages */
.piano-library-collection-archive .piano-library-breadcrumb {
  margin: 0 0 1rem;
  font-size: .95rem;
}
.piano-library-collection-archive .piano-library-breadcrumb a {
  text-decoration: underline;
  text-underline-offset: .15em;
}
.piano-library-collection-archive .piano-library-collection-description {
  max-width: 760px;
  margin-bottom: 2rem;
}

/* v3.4.8 — virtual Collection pages match the real Library page width/layout. */
.piano-library-virtual-collection #heading {
  display: none !important;
}
.piano-library-site-breadcrumb {
  background: #f7f3ec;
  border: 0;
  margin: 0;
  padding: 13px 0;
  font-size: .95rem;
  line-height: 1.5;
}
.piano-library-site-breadcrumb .piano-library-collection-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.piano-library-site-breadcrumb a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .14em;
}
.piano-library-collection-inner {
  width: min(100% - 40px, var(--wp--style--global--wide-size, 1200px));
  margin-left: auto;
  margin-right: auto;
}
.piano-library-collection-content {
  padding-top: 34px;
  padding-bottom: 48px;
}
.piano-library-collection-archive .plib-app {
  width: 100%;
}
.piano-library-collection-archive .plib-library-head h2 {
  margin-top: 0;
}
.piano-library-collection-archive .plib-piece-grid {
  width: 100%;
}
.piano-library-collection-archive .plib-piece-card {
  min-width: 0;
}
@media (max-width: 700px) {
  .piano-library-collection-inner {
    width: min(100% - 28px, var(--wp--style--global--wide-size, 1200px));
  }
  .piano-library-collection-content {
    padding-top: 26px;
    padding-bottom: 36px;
  }
}

/* Piano Library 3.4.24 — place selection/practice and playback controls below the staff. */
.plib-selection-bar{margin:16px 0 0}
.plib-score-controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:10px}

/* v3.4.25 — pure white fullscreen canvas */
.plib-shell:fullscreen,
.plib-root:fullscreen,
.plib-root:fullscreen .plib-shell {
  background: #fff !important;
}

/* Piano Library 3.4.27 — five library cards per row on wide screens. */
@media (min-width: 1201px) {
  .plib-piece-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }
  .plib-piece-body {
    padding: 14px;
  }
  .plib-piece-body h3 {
    font-size: 1rem;
  }
  .plib-piece-body p {
    font-size: .95rem;
  }
  .plib-meta {
    gap: 5px;
    margin: 12px 0;
  }
  .plib-chip {
    font-size: .72rem;
    padding: 4px 7px;
  }
  .plib-primary {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Piano Library 3.4.28 — center the piece title/composer in the trainer header. */
@media (min-width: 701px) {
  .plib-topbar {
    position: relative;
    min-height: 70px;
  }
  .plib-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width: 48%;
  }
  .plib-title-row {
    justify-content: center;
  }
  .plib-title-trigger {
    justify-content: center;
    text-align: center;
  }
  .plib-topbar-actions {
    margin-left: auto;
  }
  .plib-piece-menu {
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
  }
}

/* Piano Library 3.4.29 — keep the centered piece menu above the score. */
@media (min-width: 701px) {
  .plib-topbar {
    z-index: 100;
  }
  .plib-title {
    z-index: 101;
  }
  .plib-piece-menu {
    z-index: 102;
  }
}

/* Piano Library 3.4.30 — removed redundant Library button from trainer header. */

/* Piano Library 3.5.0 — full-width sticky black practice dock. */
.plib-practice { padding-bottom: 92px; }
.plib-control-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  min-height: 76px;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #080808;
  border-top: 1px solid #202020;
  box-shadow: 0 -8px 24px rgba(0,0,0,.12);
}
.plib-control-dock .plib-button,
.plib-control-dock .plib-listen-play,
.plib-control-dock .plib-hand-mode,
.plib-control-dock .plib-tempo {
  background: #080808 !important;
  color: #fff !important;
  border-color: #444 !important;
  box-shadow: none !important;
}
.plib-control-dock .plib-button,
.plib-control-dock .plib-listen-play,
.plib-control-dock .plib-hand-mode { min-height: 46px; }
.plib-control-dock .plib-tempo { overflow: hidden; border: 1px solid #444; border-radius: 10px; }
.plib-control-dock .plib-tempo button,
.plib-control-dock .plib-tempo span { color:#fff !important; background:transparent !important; border-color:#444 !important; }
.plib-control-dock .is-active,
.plib-control-dock .plib-practice-button[aria-pressed="true"],
.plib-control-dock .plib-loop-button[aria-pressed="true"] {
  color: #f18700 !important;
  border-color: #f18700 !important;
  background: #080808 !important;
}
.plib-more-wrap { position: relative; }
.plib-more-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 190px;
  padding: 8px;
  background: #080808;
  border: 1px solid #333;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.plib-more-menu .plib-button { width: 100%; justify-content: flex-start; margin: 3px 0; }
.plib-key-actions { display:none; }
@media (max-width: 1050px) {
  .plib-control-dock { justify-content:flex-start; overflow-x:auto; }
  .plib-control-dock > * { flex:0 0 auto; }
}
@media (max-width: 700px) {
  .plib-practice { padding-bottom: 78px; }
  .plib-control-dock { min-height:66px; padding:9px 10px; gap:7px; }
  .plib-control-dock .plib-button,
  .plib-control-dock .plib-listen-play,
  .plib-control-dock .plib-hand-mode { min-height:42px; }
}

/* Piano Library 3.5.1 — expandable sticky control dock. */
.plib-control-dock {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  padding: 10px 22px;
  transition: padding .22s ease, box-shadow .22s ease;
}
.plib-dock-primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.plib-control-dock .plib-more-menu {
  position: static;
  width: 100%;
  min-width: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: max-height .24s ease, opacity .18s ease, transform .24s ease, padding .24s ease, margin .24s ease;
}
.plib-control-dock.is-expanded .plib-more-menu {
  max-height: 78px;
  padding: 10px 0 2px;
  margin-top: 8px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  border-top: 1px solid #242424;
}
.plib-control-dock .plib-more-menu .plib-button {
  width: auto;
  min-width: 150px;
  justify-content: center;
  margin: 0;
}
.plib-control-dock .plib-more-menu .plib-pdf-button[hidden] { display: none !important; }
@media (max-width: 1050px) {
  .plib-control-dock { overflow: visible; }
  .plib-dock-primary { justify-content: flex-start; overflow-x: auto; }
  .plib-dock-primary > * { flex: 0 0 auto; }
  .plib-control-dock .plib-more-menu { justify-content: flex-start; overflow-x: auto; }
}
@media (max-width: 700px) {
  .plib-control-dock { padding: 8px 10px; }
  .plib-control-dock.is-expanded .plib-more-menu { max-height: 72px; padding-top: 8px; }
  .plib-control-dock .plib-more-menu .plib-button { min-width: 140px; }
}

/* Piano Library 3.5.2 — Reference Recording lives inside the expanded More dock. */
.plib-control-dock .plib-more-menu {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.plib-control-dock.is-expanded .plib-more-menu {
  max-height: 260px;
}
.plib-control-dock .plib-reference-practice {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
}
.plib-control-dock .plib-reference-practice .plib-reference-copy span,
.plib-control-dock .plib-reference-practice .plib-recording-time { color: #aaa; }
.plib-control-dock .plib-reference-practice .plib-recording-toggle,
.plib-control-dock .plib-reference-practice .plib-button,
.plib-control-dock .plib-reference-practice .plib-speed-step {
  color: #fff;
  background: #111;
  border-color: #444;
}
.plib-control-dock .plib-reference-practice .plib-reference-current,
.plib-control-dock .plib-reference-practice .plib-speed-step.is-current { color: var(--accent,#e87522); }
.plib-control-dock .plib-reference-practice .plib-speed-step.is-current { border-color: var(--accent,#e87522); background:#17100a; }
.plib-control-dock .plib-more-secondary { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
@media(max-width:900px){.plib-control-dock.is-expanded .plib-more-menu{max-height:390px;overflow-y:auto}.plib-control-dock .plib-reference-controls{flex-wrap:wrap}}

/* Piano Library 3.5.4 — centered Attempts / Last / Best counters with dividers. */
.plib-practice-stats {
  display: flex;
  align-items: stretch;
  min-width: 255px;
  color: var(--muted);
}
.plib-practice-stat {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 0 14px;
  line-height: 1.1;
  text-align: center;
}
.plib-practice-stat + .plib-practice-stat {
  border-left: 1px solid var(--line);
}
.plib-practice-stat strong {
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.plib-practice-stat span {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
}
@media (max-width: 900px) and (min-width: 701px) {
  .plib-practice-stats { min-width: 220px; }
  .plib-practice-stat { padding: 0 10px; }
  .plib-practice-stat strong { font-size: 1.05rem; }
  .plib-practice-stat span { font-size: .72rem; }
}
@media (max-width: 700px) {
  .plib-practice-stats {
    order: 1;
    width: auto;
    min-width: 240px;
    align-self: flex-start;
  }
  .plib-practice-stat { padding: 0 12px; }
  .plib-title { order: 2; }
  .plib-topbar-actions { order: 3; }
}

/* Piano Library 3.5.5 — refined grouped bottom control dock. */
.plib-control-dock{padding:12px 28px;background:#0b0b0b;border-top:1px solid #242424}
.plib-dock-primary{max-width:1680px;margin:0 auto;justify-content:space-between;gap:0}
.plib-dock-group{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;min-height:70px;padding:0 34px}
.plib-dock-group:first-child{padding-left:0}.plib-dock-group:last-child{padding-right:0}
.plib-dock-group+.plib-dock-group:before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:1px;background:#3a3a3a}
.plib-dock-label{font-size:.72rem;line-height:1;text-transform:uppercase;letter-spacing:.04em;color:#d6d6d6;font-weight:700}
.plib-control-dock .plib-button,.plib-control-dock .plib-listen-play,.plib-control-dock .plib-hand-choice{min-height:42px;border:1px solid #3d3d3d;border-radius:9px;background:#111!important;color:#fff!important;font:inherit;font-weight:700;cursor:pointer}
.plib-control-dock .plib-practice-button{padding:8px 18px}
.plib-control-dock .plib-practice-button[aria-pressed="true"],.plib-control-dock .plib-hand-choice.is-active,.plib-control-dock .plib-loop-button[aria-pressed="true"],.plib-control-dock .plib-metronome-button[aria-pressed="true"],.plib-control-dock .plib-metronome-button.is-active{color:#62d843!important;border-color:#3b7d2b!important;background:#101610!important}
.plib-hand-buttons{display:flex;gap:7px}.plib-hand-choice{padding:8px 18px}.plib-hand-mode-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.plib-dock-tempo .plib-tempo{height:42px;border:0!important;border-radius:0;display:flex;align-items:center;gap:10px;overflow:visible}
.plib-dock-tempo .plib-tempo button{width:48px;height:42px;padding:0!important;border:1px solid #3d3d3d!important;border-radius:9px!important;background:#111!important;color:#fff!important;font-size:1.25rem}
.plib-dock-tempo .plib-tempo span{min-width:76px;padding:0!important;border:0!important;text-align:center;color:#fff!important;white-space:nowrap}
.plib-icon-button{width:54px;padding:0!important;font-size:1.6rem;color:#62d843!important}
.plib-dock-playback{align-items:center}.plib-dock-playback .plib-dock-label{align-self:flex-start}.plib-transport-button{border:0!important;background:transparent!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 18px;min-width:72px}.plib-transport-icon{font-size:1.55rem;line-height:1}.plib-transport-button span:last-child{font-size:.82rem}
.plib-dock-more{align-items:center}.plib-dock-more .plib-dock-label{align-self:flex-start}.plib-more-icon{border:0!important;background:transparent!important;font-size:1.65rem;padding:0 14px!important;min-width:54px}
@media(max-width:1200px){.plib-dock-primary{justify-content:flex-start;overflow-x:auto}.plib-dock-group{flex:0 0 auto;padding:0 24px}}
@media(max-width:700px){.plib-control-dock{padding:8px 10px}.plib-dock-group{padding:0 16px;min-height:62px;gap:6px}.plib-hand-choice{padding:7px 13px}.plib-control-dock .plib-practice-button{padding:7px 14px}}


/* Piano Library 3.5.8 — Play Along is a first-class mode beside Practice. */
.plib-mode-buttons{display:flex;align-items:center;gap:8px}
.plib-control-dock .plib-play-along-button{padding:8px 18px;white-space:nowrap}
.plib-control-dock .plib-play-along-button[aria-pressed="true"],
.plib-control-dock .plib-play-along-button.is-active{color:#62d843!important;border-color:#3b7d2b!important;background:#101610!important}
@media(max-width:700px){.plib-mode-buttons{gap:6px}.plib-control-dock .plib-play-along-button{padding:7px 14px}}

/* v3.5.9: compact measure-range selector in the bottom control dock. */
.plib-dock-measures{align-items:flex-start}
.plib-measure-range-control{display:flex;align-items:center;gap:7px;height:42px}
.plib-control-dock .plib-measure-range-control select{height:42px;min-width:58px;padding:0 28px 0 12px;border:1px solid #3d3d3d;border-radius:9px;background:#111;color:#fff;font:inherit;font-weight:700;cursor:pointer;color-scheme:dark}
.plib-control-dock .plib-measure-range-control select:focus{outline:2px solid #62d843;outline-offset:2px}
.plib-control-dock .plib-measure-range-control select:disabled{opacity:.55;cursor:default}
.plib-measure-range-separator{color:#aaa;font-weight:700}
@media(max-width:700px){.plib-control-dock .plib-measure-range-control select{min-width:54px;padding-left:10px;padding-right:24px}}

/* Piano Library 3.5.10 — slightly larger practice counters without increasing header spacing. */


/* Piano Library 3.5.12 — compact metronome control in the bottom dock. */
.plib-dock-metronome{align-items:center}
.plib-dock-metronome .plib-dock-label{align-self:flex-start}
.plib-control-dock .plib-metronome-button{font-size:1.45rem}


/* Piano Library 3.5.13 — compact metronome volume control. */
.plib-metronome-control{display:flex;align-items:center;gap:7px;height:42px}
.plib-control-dock .plib-metronome-volume-button{width:30px;height:34px;padding:0;border:1px solid #3d3d3d;border-radius:8px;background:#111;color:#fff;font:inherit;font-size:1rem;font-weight:700;line-height:1;cursor:pointer}
.plib-control-dock .plib-metronome-volume-button:hover{border-color:#666;background:#181818}
.plib-control-dock .plib-metronome-volume-button:focus{outline:2px solid #62d843;outline-offset:2px}
.plib-metronome-volume{min-width:38px;text-align:center;color:#fff;font-size:.88rem;font-weight:700;font-variant-numeric:tabular-nums}
@media(max-width:900px){.plib-metronome-control{gap:5px}.plib-control-dock .plib-metronome-volume-button{width:28px}.plib-metronome-volume{min-width:34px;font-size:.82rem}}