.szpt-app{--accent:#f18700;--soft:#fff1df;--ink:#171717;--muted:#667085;--line:#e4e7ec;--good:#238636;--bad:#c93c3c;font-family:inherit;color:var(--ink)}.szpt-app *{box-sizing:border-box}.szpt-loading, .szpt-empty{padding:28px;border:1px solid var(--line);border-radius:16px;background:#fff}.szpt-library-head h2{margin:0 0 5px;font-size:2rem}.szpt-library-head p{margin:0 0 18px;color:var(--muted)}.szpt-piece-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.szpt-piece-card{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;display:flex;flex-direction:column}.szpt-piece-image{aspect-ratio:16/9;background:linear-gradient(135deg,#fff8ed,#fff);display:grid;place-items:center;font-size:3rem;color:var(--accent)}.szpt-piece-image img{width:100%;height:100%;object-fit:cover}.szpt-piece-body{padding:18px;display:flex;flex:1;flex-direction:column}.szpt-piece-body h3{margin:0 0 4px}.szpt-piece-body p{margin:0;color:var(--muted)}.szpt-meta{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}.szpt-chip{font-size:.8rem;border-radius:999px;background:#f2f4f7;padding:5px 9px}.szpt-button{border:1px solid var(--line);border-radius:11px;padding:10px 14px;background:#fff;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}.szpt-primary{background:var(--accent);border-color:var(--accent);color:#fff;margin-top:auto}.szpt-shell{border:1px solid var(--line);border-radius:22px;background:#fffdf9;padding:20px}.szpt-topbar, .szpt-toolbar, .szpt-heading, .szpt-status{display:flex;align-items:center}.szpt-topbar{justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding-bottom:16px}.szpt-title h2{margin:0}.szpt-title p{margin:2px 0 0;color:var(--muted)}.szpt-toolbar{justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 0}.szpt-controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.szpt-controls select{min-height:43px;border:1px solid var(--line);border-radius:10px;padding:8px 34px 8px 11px;background:#fff}.szpt-tempo{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.szpt-tempo button{border:0;background:#fff;padding:8px 13px;cursor:pointer}.szpt-tempo span{padding:8px 12px;border-left:1px solid var(--line);border-right:1px solid var(--line)}.szpt-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}.szpt-card{border:1px solid var(--line);border-radius:16px;background:#fff}.szpt-practice{padding:18px}.szpt-heading{justify-content:space-between;margin-bottom:13px}.szpt-heading h3{margin:0}.szpt-heading p{margin:2px 0 0;color:var(--muted)}.szpt-score-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff}.szpt-score{display:block;width:100%;min-width:900px;height:auto}.szpt-keyboard-card{margin-top:16px;padding:12px}.szpt-keyboard{display:flex;position:relative;height:170px;border:1px solid #98a2b3;border-radius:9px;overflow:hidden;background:#fff}.szpt-white{flex:1;position:relative;border-right:1px solid #667085;background:linear-gradient(#fff,#f7f7f7);cursor:pointer}.szpt-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)}.szpt-white.active{background:linear-gradient(#ffd092,#ff9f2f)}.szpt-black.active{background:linear-gradient(#ffad45,#ef7700)}.szpt-white.wrong, .szpt-black.wrong{background:#d85b5b}.szpt-key-footer{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}.szpt-key-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.szpt-inline-feedback{display:flex;gap:7px;align-items:baseline;flex:1 1 260px;justify-content:center;font-size:.9rem}.szpt-inline-feedback[hidden]{display:none}.szpt-inline-feedback span{color:var(--muted)}.szpt-inline-feedback.good strong{color:var(--good)}.szpt-inline-feedback.bad strong{color:var(--bad)}.szpt-button[data-a="keyboard"][aria-pressed="true"]{background:var(--soft);border-color:var(--accent);color:#b85d00}.szpt-shell.szpt-keyboard-hidden .szpt-keyboard{display:none}.szpt-shell.szpt-keyboard-hidden .szpt-keyboard-card{padding:8px 12px}.szpt-shell.szpt-keyboard-hidden .szpt-key-footer{margin-top:0}.szpt-status{gap:8px}.szpt-dot{width:12px;height:12px;border-radius:50%;background:#aab0b8}.szpt-dot.connected{background:var(--good)}@media(max-width:1000px){.szpt-piece-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.szpt-layout{grid-template-columns:1fr}}@media(max-width:700px){.szpt-piece-grid{grid-template-columns:1fr}.szpt-shell{padding:13px}.szpt-topbar{align-items:flex-start;flex-direction:column}.szpt-keyboard{height:135px}}

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

@media(max-width:1000px){
  .szpt-shell:fullscreen{overflow:auto}
  .szpt-shell:fullscreen .szpt-layout{display:block}
  .szpt-shell:fullscreen main{display:block}
  .szpt-shell:fullscreen .szpt-keyboard-card{margin-top:12px}
  
  .szpt-shell:fullscreen .szpt-score{height:auto}
}
@media(max-width:700px){
  .szpt-topbar-actions{width:100%}
  .szpt-topbar-actions .szpt-button{flex:1}
  .szpt-shell:fullscreen{padding:10px}
  
  .szpt-shell:fullscreen .szpt-keyboard{height:130px}
}

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

/* Version 3.2: uploaded recording player */
.szpt-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;
}
.szpt-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;
}
.szpt-recording-toggle:hover{
	background:#fff4e5;
}
.szpt-recording-track{
	position:relative;
	flex:1 1 auto;
	height:8px;
	min-width:120px;
	overflow:hidden;
	border-radius:999px;
	background:#e4e7eb;
	cursor:pointer;
}
.szpt-recording-track span{
	display:block;
	width:0;
	height:100%;
	border-radius:inherit;
	background:#e87522;
}
.szpt-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){
	.szpt-recording-player{
		flex-wrap:wrap;
	}
	.szpt-recording-track{
		order:3;
		flex-basis:100%;
	}
	.szpt-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 */
.szpt-score-wrap{
	max-height:78vh;
}
.szpt-score{
	background:#fff;
}
@media (max-width:900px){
	.szpt-score{
		min-width:900px;
	}
}

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

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


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


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


/* Version 4.3.3: current MIDI practice measure */
.szpt-svg-measure.is-practice-current:not(.is-current) .szpt-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 */
.szpt-score {
	touch-action: none;
	user-select: none;
}
.szpt-svg-measure {
	cursor: crosshair;
}
.szpt-svg-measure.is-drag-preview .szpt-measure-hit {
	fill: rgba(232,117,34,.16);
	stroke: #e87522;
	stroke-width: 2.5;
	stroke-dasharray: 6 4;
	vector-effect: non-scaling-stroke;
}
.szpt-svg-measure.is-current .szpt-measure-hit {
	fill: rgba(232,117,34,.10);
	stroke: #e87522;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}
.szpt-svg-measure.is-current + .szpt-svg-measure.is-current .szpt-measure-hit {
	stroke-left-width: 0;
}
.szpt-selection-bar strong {
	font-variant-numeric: tabular-nums;
}




/* Version 5.0.3: visible measure-to-measure handover */
.szpt-score-wrap {
	scroll-behavior: smooth;
}
.szpt-svg-measure.is-practice-current .szpt-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) {
	.szpt-score-wrap {
		scroll-behavior: auto;
	}
}


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




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


/* Version 5.2: audible four-beat count-in */
.szpt-start-exercise {
	font-weight: 700;
}
.szpt-start-exercise:disabled {
	cursor: wait;
	opacity: .72;
}
.szpt-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: szpt-count-pop .22s ease-out both;
}
.szpt-count-in[hidden] {
	display: none;
}
@keyframes szpt-count-pop {
	from { opacity: 0; transform: scale(.82); }
	to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.szpt-count-in { animation: none; }
}


/* Version 6: Listen & Play */
.szpt-listen-play {
	font-weight: 750;
}
.szpt-listen-play:disabled {
	cursor: wait;
	opacity: .72;
}
.szpt-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);
}
.szpt-count-label {
	white-space: nowrap;
}
.szpt-beat-dots {
	display: flex;
	gap: 7px;
}
.szpt-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;
}
.szpt-beat-dots i.is-current {
	background: #fff;
	transform: scale(1.28);
}
@media (prefers-reduced-motion: reduce) {
	.szpt-beat-dots i { transition: none; }
}


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


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


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


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


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


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


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


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


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


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

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

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

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

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

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

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


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


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


/* Version 9.1 Phase 2: playback synchronization */
.szpt-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;
}
.szpt-playback-sync[hidden] {
	display: none !important;
}
.szpt-sync-track {
	display: block;
	height: 7px;
	overflow: hidden;
	border-radius: 999px;
	background: #e9e4dc;
}
.szpt-sync-track i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: #e87522;
	transition: width .08s linear;
}
.szpt-osmd-active {
	filter: drop-shadow(0 0 2px rgba(232,117,34,.95));
}
.szpt-cursor-pulse {
	animation: szpt-cursor-pulse .16s ease-out;
}
@keyframes szpt-cursor-pulse {
	from { opacity: .45; transform: scaleX(1.45); }
	to { opacity: 1; transform: scaleX(1); }
}
@media (max-width: 600px) {
	.szpt-playback-sync {
		grid-template-columns: 1fr auto;
	}
	.szpt-sync-track {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}
@media (prefers-reduced-motion: reduce) {
	.szpt-sync-track i { transition: none; }
	.szpt-cursor-pulse { animation: none; }
}


/* Version 9.1.1: corrected measure background and custom cursor */
.szpt-osmd-system { position: relative; }
.szpt-system-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.szpt-osmd-system-canvas {
	position: relative;
	z-index: 1;
}
.szpt-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);
}
.szpt-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);
}
.szpt-osmd-selected,
.szpt-osmd-active { filter: none !important; }
.szpt-cursor-pulse { animation: none !important; }


/* Version 9.1.2: exact OSMD measure geometry */
.szpt-osmd-system {
	position: relative;
}
.szpt-system-overlay-bg,
.szpt-system-overlay-fg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.szpt-system-overlay-bg {
	z-index: 0;
}
.szpt-osmd-system-canvas {
	position: relative;
	z-index: 1;
}
.szpt-system-overlay-fg {
	z-index: 2;
}
.szpt-measure-bg-overlay {
	background: rgba(120,120,120,.105);
	border-radius: 7px;
	box-shadow: inset 0 0 0 1px rgba(120,120,120,.08);
}
.szpt-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 */
.szpt-svg-guide-layer {
	pointer-events: none;
}
.szpt-svg-measure-highlight {
	fill: rgba(120,120,120,.07);
	stroke: none;
	shape-rendering: crispEdges;
}
.szpt-svg-playback-cursor {
	stroke: #e87522;
	stroke-width: 2;
	stroke-linecap: butt;
	vector-effect: non-scaling-stroke;
}
.szpt-system-overlay-bg,
.szpt-system-overlay-fg,
.szpt-measure-bg-overlay,
.szpt-custom-playback-cursor {
	display: none !important;
}


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


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


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


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


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


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


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

.szpt-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;
}

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

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

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

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

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


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

.szpt-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 */
.szpt-measure-picker {
	display: none !important;
}

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

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

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

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

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


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

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


/* Version 10.4: clearer phrase selection */
.szpt-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 */
.szpt-reference-practice{display:grid;gap:12px;padding:15px 17px;border:1px solid var(--line,#ded8cf);border-radius:15px;background:var(--card,#fff)}.szpt-reference-practice[hidden]{display:none!important}.szpt-reference-practice .szpt-reference-copy{display:flex;flex-direction:column;gap:2px}.szpt-reference-practice .szpt-reference-copy span{font-size:.84rem;color:var(--muted,#777)}.szpt-reference-controls{display:grid;grid-template-columns:auto minmax(130px,1fr) auto auto auto auto auto;align-items:center;gap:9px}.szpt-reference-current{min-width:62px;text-align:center;color:var(--accent,#e87522);font-size:1.05rem}.szpt-reference-controls .szpt-button,.szpt-reference-controls .szpt-recording-toggle{min-height:38px;white-space:nowrap}.szpt-reference-loop.is-active{border-color:var(--accent,#e87522);background:var(--accent-soft,#fff4e5);color:var(--accent,#e87522)}.szpt-reference-ladder{display:flex;align-items:center;gap:7px;overflow-x:auto;padding:1px 0 3px}.szpt-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}.szpt-speed-dot{width:11px;height:11px;border:2px solid currentColor;border-radius:50%;background:transparent}.szpt-speed-step.is-complete{border-color:#8bd3a8;background:#f3fcf6;color:#257a4f}.szpt-speed-step.is-complete .szpt-speed-dot{background:#3fbd74;border-color:#3fbd74}.szpt-speed-step.is-current{border-color:var(--accent,#e87522);background:var(--accent-soft,#fff4e5);color:var(--accent,#e87522)}.szpt-speed-step.is-current .szpt-speed-dot{background:var(--accent,#e87522);border-color:var(--accent,#e87522)}.szpt-speed-arrow{color:#aaa39c;font-weight:700;flex:0 0 auto}@media(max-width:900px){.szpt-reference-controls{grid-template-columns:auto minmax(120px,1fr) auto;display:flex;flex-wrap:wrap}.szpt-reference-practice .szpt-recording-track{flex:1 1 180px}.szpt-reference-ladder{padding-bottom:7px}}@media(max-width:560px){.szpt-reference-practice{padding:13px}.szpt-reference-controls .szpt-recording-track{order:6;flex-basis:100%}.szpt-speed-step{min-width:98px}}