.piano-scroll{overflow-x:auto;padding:12px 0 20px;scrollbar-width:thin}.piano-keys{position:relative;height:180px;touch-action:none;user-select:none;margin:auto}.piano-keys button{position:absolute;top:0;padding:0;border-radius:0 0 5px 5px;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:7px;touch-action:none}.piano-keys .pk-white{width:44px;height:178px;background:#fff;border:1px solid #94a7c4;color:#294064;z-index:1;padding-bottom:13px}.piano-keys .pk-black{width:28px;height:111px;background:#192942;border:1px solid #101d30;color:#fff;z-index:2;padding-bottom:10px}.piano-keys span{font-size:10px}.piano-keys small{font-size:11px;opacity:.7}.piano-keys .pk-active{background:#3573d9;color:white}.piano-keys button:focus-visible{outline:3px solid #3675e3;outline-offset:-3px}.pr-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.pr-group strong{font-size:12px;margin-right:8px}.rhythm-reader button[aria-pressed=true]{background:#245bd3;color:white;border-color:#245bd3}.pr-settings{display:flex;flex-direction:column;gap:18px;padding:24px 0;border-bottom:1px solid #cfdbed}.pr-status{text-align:center;min-height:28px;font-size:14px}.pr-score{position:relative;display:flex;overflow:auto;background:white;border:1px solid #cbd9ed;border-radius:8px;scrollbar-width:none;margin:24px 0}.pr-score::-webkit-scrollbar{display:none}.pr-score svg{display:block;flex:none}.pr-hit path,.pr-hit text{fill:#277544!important;stroke:#277544!important}.pr-wrong path,.pr-wrong text{fill:#b74343!important;stroke:#b74343!important}.pr-current{filter:drop-shadow(0 0 3px #3775ed)}.pr-readout{font-size:14px;color:#536d94;margin:16px 0}.pr-dialog{border:1px solid #b8cdf5;border-radius:10px;padding:24px;max-width:90vw;color:#173568;font-family:Poppins,sans-serif}.pr-dialog::backdrop{background:#172f5855}.pr-dialog button{font:inherit;padding:12px 18px;margin:6px;background:#f3f7ff;border:1px solid #b8cdf5;border-radius:6px;color:#173568}.pr-dialog h2{font-size:19px}.pr-dialog button[aria-pressed=true]{background:#245bd3;color:white}

/* Full-sized keys with a quiet keybed and readable labels. */
.piano-keys{height:238px;box-sizing:content-box;background:#17243a;padding:0 0 8px;border-radius:0 0 8px 8px}.piano-keys button{font-family:Candal,sans-serif!important;box-sizing:border-box;gap:10px}.piano-keys .pk-white{width:60px;height:230px;background:#fafbfc;border:1px solid #bbc3ce;border-bottom:5px solid #cbd1da;border-radius:0 0 6px 6px;padding-bottom:20px}.piano-keys .pk-black{width:36px;height:146px;background:#192942;border:1px solid #0c1828;border-bottom:6px solid #091425;border-radius:0 0 5px 5px;padding-bottom:15px}.piano-keys span{font:400 12px/1.3 Candal,sans-serif!important;letter-spacing:0!important}.piano-keys small{font:400 11px/1 Candal,sans-serif!important;opacity:.55}.piano-keys .pk-black span{font-size:10px!important}.piano-keys .pk-active{background:#3a75ce;border-bottom-color:#23549c;color:white}.piano-keys .pk-black.pk-active{background:#3266af}.pr-group button[aria-pressed=true]{background:#245bd3!important;color:white!important}

#currentNote{font-family:Candal,sans-serif!important;font-weight:400!important;letter-spacing:0!important}

.piano-keys button{box-shadow:none!important;text-shadow:none!important;background-image:none!important}.piano-keys .pk-white{border-bottom-width:3px}.piano-keys .pk-black{border-bottom-width:3px}

.piano-keys .piano-accidental,#currentNote .piano-accidental{font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif!important;font-size:1em!important;font-weight:400!important;line-height:inherit!important;display:inline;vertical-align:baseline}

.pr-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:24px 0;border-bottom:1px solid #cfdbed}.pr-toolbar .rr-tempo{margin-left:auto}.pr-dialog .pr-settings{border:0}.pr-keyboard-options{font-size:12px;color:#315989;margin-bottom:8px}.pr-keyboard-options summary{cursor:pointer;padding:10px 0}.pr-keyboard-options .pr-group{padding:10px 0}.pr-song-dialog{width:min(520px,90vw)}.pr-dialog .pr-song-choice{display:block;width:100%;text-align:left;margin:9px 0}.pr-settings [hidden]{display:none!important}.pr-dialog h2{font-family:Candal,sans-serif;font-weight:400}.pr-dialog .pr-group button{margin:3px}.pr-dialog p{font-size:12px;line-height:1.8;max-width:430px}@media(max-width:600px){.pr-toolbar .rr-tempo{margin-left:0;width:100%}}

.pr-measure{flex:none;position:relative;cursor:pointer;transition:background-color .12s ease}.pr-measure-active{background:#edf4ff}.pr-measure:focus-visible{outline:2px solid #245bd3;outline-offset:-2px}#prPlayhead{position:absolute;top:42px;bottom:22px;left:0;width:2px;background:#245bd3;z-index:3;pointer-events:none;will-change:transform}.pr-score{scroll-behavior:auto;overflow-anchor:none}

.piano-keys .pk-white.pk-guide,.piano-keys .pk-black.pk-guide{background:#285dcc!important;color:#fff;border-color:#17499f}.piano-keys .pk-guide small{opacity:1}

.pr-rhythm-dialog{width:min(680px,90vw);max-height:85vh;overflow:auto}.pr-rhythm-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:20px 0}.pr-rhythm-choices button{margin:0;font-size:12px;min-height:50px}

.pr-toolbar.rr-setup{align-items:end;gap:24px}.pr-setup-field{display:flex;flex-direction:column;gap:8px}.pr-setup-field>span{font-size:12px;font-weight:600}.pr-toolbar.rr-setup .rr-tempo{margin-left:0}.pr-selection-count{font-size:12px;color:#54709a}.pr-rhythm-dialog.rr-custom-dialog{width:min(940px,calc(100vw - 28px));max-height:85vh}.pr-playback{margin:22px 0 0}.pr-rhythm-dialog .rr-rest-option{font-size:13px}.pr-toolbar .rr-picker{min-height:44px}.pr-rhythm-dialog .rr-patterns button{margin:0}.pr-rhythm-dialog .rr-patterns svg{height:47px;width:84px}

/* Toggle labels remain readable on the pale selected surface. */
.rhythm-reader .rr-toggle[aria-pressed=true]{color:#173568}.rhythm-reader .rr-toggle[aria-pressed=true]>span{color:#173568}.rhythm-reader .rr-toggle[aria-pressed=true]>strong{color:#fff;background:#245bd3}.pr-rhythm-dialog .rr-patterns button[aria-pressed=true],.pr-rhythm-dialog .rr-rest-option[aria-pressed=true]{color:#173f8b}

.pr-keyboard-controls{margin:16px 0 4px}.rhythm-reader .pr-keyboard-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;border:1px solid #b8cdf5;background:#f5f8ff;color:#234e9b;border-radius:8px;padding:11px 17px;font:600 13px Poppins,sans-serif;text-decoration:none}.pr-keyboard-link:hover{background:#e6eeff}.pr-keyboard-link:focus-visible{outline:3px solid #2761d6;outline-offset:3px}