/* Plain Music by Evermark v1.15: cancellable First Notes playback with visible instrument controls. */
.first-notes-panel{background:linear-gradient(140deg,#243959,#152744);border-color:#7182ab}
.first-notes-panel h2{font-size:clamp(25px,3.2vw,34px)}
.first-notes-panel>p{max-width:710px;font-size:13px;line-height:1.7}
.first-notes-top{display:flex;justify-content:space-between;align-items:start;gap:18px;flex-wrap:wrap}
.first-notes-top h2{margin:7px 0 15px}
.first-notes-disclosure{font-size:10px;font-weight:750;border:1px solid #8290ba;color:#eadcff;border-radius:999px;padding:7px 11px}
.first-notes-mode{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:21px 0 12px}
.first-notes-mode button,.first-notes-actions button,.first-notes-midi-controls button{
 font:inherit;cursor:pointer;border:1px solid #94a5c7;border-radius:11px;
 color:#f4f6ff;background:#293f62;font-size:12px;font-weight:770;padding:11px 15px;min-height:43px
}
.first-notes-mode button[aria-pressed=true]{background:#d1c1ff;border-color:#d1c1ff;color:#161f38}
.first-notes-mode button:hover,.first-notes-actions button:hover,.first-notes-midi-controls button:hover{border-color:#f2e8ff}
.first-notes-panel button:focus-visible,.first-notes-panel a:focus-visible,.readiness-details>summary:focus-visible{outline:3px solid #f0d5a2;outline-offset:3px}
.first-notes-panel button:disabled{opacity:.55;cursor:wait}
.first-notes-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:15px;margin:17px 0}
.first-notes-instrument,.first-notes-lesson{border:1px solid #647a9b;background:#10223d;border-radius:16px;padding:20px}
.first-notes-instrument h3,.first-notes-lesson h3{font-size:17px;margin:0 0 9px}
.first-notes-instrument p,.first-notes-lesson p{font-size:12px;line-height:1.6;color:#d1dff0}
.first-notes-keys{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;margin:20px 0 5px}
.first-white-key{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end;
 min-width:0;min-height:151px;padding:0 1px 14px;font-size:clamp(9px,1.25vw,12px);
 font-weight:850;color:#19334d;background:linear-gradient(#fff,#dce4f1);
 border:1px solid #96aacc;border-radius:0 0 10px 10px;cursor:pointer
}
.first-white-key.first-target{background:linear-gradient(#fff4fa,#d6b7ff);outline:3px solid #bca0f5;outline-offset:-3px}
.first-white-key.first-highlighted{background:linear-gradient(#eac9ff,#b79bfc)}
.first-black-row{position:absolute;inset:0 0 auto;height:55%;pointer-events:none;z-index:2}
.first-black-key{position:absolute;top:0;height:100%;width:6%;border:1px solid #77879e;
 border-radius:0 0 6px 6px;background:linear-gradient(#0c192f,#313c55);box-shadow:0 3px 6px #0005
}
.first-notes-target{font-size:16px!important;font-weight:850;color:#f0ddff!important}
.first-notes-actions,.first-notes-midi-controls{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0}
.first-notes-midi-controls button{font-size:11px;min-height:40px}
.first-notes-feedback{font-weight:660;min-height:39px;color:#c0f1d5!important}
.first-notes-privacy{font-size:11px!important;color:#c7d5ed!important;line-height:1.6}
.first-notes-continue{display:flex;flex-wrap:wrap;gap:14px;margin-top:15px}
.first-notes-continue a{font-weight:750;font-size:12px;text-decoration:underline;color:#eadbff}
.readiness-details{border:1px solid #46597c;background:#0f1d32;border-radius:16px;margin:19px 0;overflow:hidden}
.readiness-details>summary{cursor:pointer;padding:18px 21px;font-size:13px;color:#dae4f5;font-weight:760;line-height:1.55}
.readiness-details>summary:hover{background:#203755}
.readiness-details[open]>summary{border-bottom:1px solid #46597c}
.readiness-details-content{padding:0 14px 14px}
.readiness-details-content>.readiness-panel{margin:14px 0}
@media(max-width:830px){.first-notes-layout{grid-template-columns:1fr}.first-white-key{min-height:130px}}
@media(max-width:480px){.first-notes-instrument,.first-notes-lesson{padding:17px 13px}.first-white-key{min-height:118px;font-size:9px}.first-notes-mode button{flex:1}.readiness-details-content{padding:0 9px 9px}.readiness-details>summary{padding:16px}.first-notes-panel{padding:18px}}
@media(prefers-reduced-motion:reduce){.first-notes-panel button{transition:none!important}}

.first-notes-instrument{align-self:start}
.first-notes-playback-control{display:flex;justify-content:flex-end;margin:10px 0 0}
.first-notes-playback-control button{
 font:inherit;cursor:pointer;border:1px solid #94a5c7;border-radius:11px;color:#f4f6ff;
 background:#293f62;font-size:12px;font-weight:770;padding:11px 15px;min-height:43px
}
.first-notes-playback-control button:hover{border-color:#f2e8ff}
.first-notes-playback-control button:focus-visible{outline:3px solid #f0d5a2;outline-offset:3px}
.first-notes-playback-control button[aria-disabled="true"]{opacity:.55;cursor:default}
.first-notes-instrument.first-notes-listening{position:sticky;top:10px;z-index:5;box-shadow:0 12px 30px #07122680}
.first-notes-instrument.first-notes-listening .first-white-key[aria-disabled="true"]{pointer-events:none}
.first-notes-actions button[aria-disabled="true"]{opacity:.55;cursor:default}