[hidden]{display:none!important}.site-menu{position:relative;font-size:12px}.site-menu summary{list-style:none;color:#4f6484;font-size:12px;padding:8px 0}.site-menu>div{position:absolute;z-index:30;top:38px;right:0;min-width:210px;background:white;border:1px solid #dce5f2;box-shadow:0 15px 40px #15305b20;border-radius:10px;padding:10px}.site-menu a{display:block;padding:11px!important;white-space:nowrap}.site-menu a:hover{background:#eef4ff}.tool-tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:25px}.tool-tabs button,.tool-tabs a{padding:12px 20px;border:1px solid #cbd9ed;border-radius:25px;background:white;color:#225bdc;font-size:13px;text-decoration:none}.tool-tabs .selected{background:#225bdc;color:white}.two-column{display:grid;grid-template-columns:1fr 1fr;gap:24px}.two-column h2,.resource-grid h3{margin:14px 0 22px}.task-card{background:#f2f6ff;border-radius:12px;padding:24px;margin:20px 0}.note-slots{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0}.note-slot{border:1px solid #cad8ed;border-radius:8px;background:#f8faff;padding:16px;min-width:55px;text-align:center;font-size:17px}.note-slot.correct{background:#225bdc;color:white;border-color:#225bdc}.note-slot.current{box-shadow:0 0 0 2px #d5ae60}.keyboard-scroll{overflow-x:auto;padding:15px 0}.playable-piano{position:relative;display:flex;height:215px;min-width:680px;isolation:isolate}.piano-key{border-radius:0 0 7px 7px;display:flex;align-items:end;justify-content:center;padding:0 2px 16px;touch-action:manipulation}.key-white{background:white;border:1px solid #9db0cd;color:#183b75;flex:1;height:100%;font-size:12px}.key-black{position:absolute;z-index:2;top:0;width:4%;height:62%;background:#153568;color:white;border:1px solid #0d284d;font-size:10px}.piano-key:active,.piano-key.hit{background:#d3b16b!important;color:#102d62!important}.piano-key.bad{background:#d16551!important;color:white!important}.inline-form{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin-top:25px}.inline-form>div{flex:1;min-width:220px}.feedback{color:#225bdc;line-height:1.7;min-height:24px}.small-copy{font-size:12px!important;color:#6e7e96;line-height:1.75}.notation-scroll,.table-scroll{overflow-x:auto;margin:20px 0}.notation-scroll svg{width:100%;min-width:600px;display:block}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:25px 0}.choice-grid button{background:#f0f5ff;color:#193f7a;border:1px solid #c6d7f1;padding:15px;border-radius:8px;text-align:left}.choice-grid button.selected{background:#225bdc;color:white}.resource-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.resource-grid article{background:#f2f6ff;border-radius:10px;padding:24px}.pitch-readout{font:36px Georgia;color:#225bdc;margin:25px 0}.topic-picker{border:1px solid #dbe4f1;border-radius:10px;padding:18px;margin-bottom:25px;display:flex;flex-wrap:wrap;gap:15px}.topic-picker label{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:0;text-transform:none}.topic-picker input{width:auto}.runner-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;margin-bottom:25px}.controls input[type=number]{max-width:100px}textarea{width:100%;font:14px system-ui;border:1px solid #c9d5e7;border-radius:8px;padding:14px;color:#173b79;background:white;margin-bottom:15px}input,select{margin-bottom:14px}.inline-form input,.controls input,.controls select{margin-bottom:0}.pricing-card h2{font:50px Georgia}.pricing-card small{font:16px system-ui;color:#71829a}.pricing-card li{color:#62748e;line-height:1.8;margin:12px 0}.pricing-card.paid{border-top:4px solid #c9a04e}.result-score{font:60px Georgia;color:#225bdc}.teacher-table td{max-width:300px;white-space:normal}.groove-grid{display:grid;grid-template-columns:80px repeat(16,1fr);gap:4px;min-width:680px}.groove-grid span{padding:10px 2px;font-size:10px;text-align:center;background:#eef4ff}.groove-grid span.on{background:#225bdc;color:white}.instrument-info{border-left:3px solid #c9a04e;padding:15px 20px}.home-more{margin-top:35px}.error-text{color:#a43d28}.site-menu summary:focus-visible{outline:2px solid #c9a04e}@media(max-width:950px){nav{gap:16px}.site-menu summary,nav a{font-size:11px}}@media(max-width:700px){.two-column,.resource-grid{grid-template-columns:1fr}.choice-grid{grid-template-columns:1fr 1fr}nav{overflow:visible;flex-wrap:wrap;gap:8px 18px}.site-menu>div{right:auto;left:0}.playable-piano{height:185px}.page-heading h1{font-size:42px}.topic-picker{gap:15px}.inline-form>div{min-width:100%}.box{padding:20px}}
.student-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin:10px 0 18px;padding:14px;border:1px solid #d7e1f2;border-radius:14px;background:#f8faff}.student-check{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;background:white;font-size:14px}.student-check input{accent-color:#225bdc;width:17px;height:17px}.student-picker[hidden]{display:none}
.teacher-feedback{display:grid;gap:8px;min-width:220px}.teacher-feedback textarea{width:100%;min-height:82px;resize:vertical;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px;font:inherit;line-height:1.45}.student-check{display:flex;gap:10px;align-items:flex-start;margin:12px 0}.student-check input{width:auto;flex:0 0 auto;margin-top:3px}

/* Light motion for the spelling workshop; honors reduced-motion preferences. */
.examples-layout{animation:pt-rise .55s cubic-bezier(.2,.7,.2,1) both}
.examples-layout .example-aside{animation:pt-rise .6s .06s cubic-bezier(.2,.7,.2,1) both}
.examples-layout #cp-examples{animation:pt-rise .65s .12s cubic-bezier(.2,.7,.2,1) both}
#cp-examples .primary,#cp-examples .ghost{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
#cp-examples .primary:hover,#cp-examples .ghost:hover{transform:translateY(-2px);box-shadow:0 8px 18px #173b791b}
#exFeedback{min-height:1.6em;line-height:1.55;border-radius:10px;transition:background-color .2s ease,color .2s ease;padding:3px 10px}
#exFeedback.correct{color:#173b79;background:#f5edda;animation:pt-cheer .55s ease both}
#exFeedback.correct::after{content:'  ✦  ♫  ✦';color:#b58b36;display:inline-block;animation:pt-spark .8s ease-in-out both}
#exFeedback.incorrect{color:#8c3b37;animation:pt-nudge .32s ease both}
#exSolution:not([hidden]){animation:pt-reveal .32s ease-out both;padding:12px 0}
#exSolution .spelling{font-weight:700;letter-spacing:.04em;color:#173b79}
@keyframes pt-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pt-cheer{0%{transform:scale(.98)}45%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes pt-spark{0%{opacity:0;transform:translateY(5px) scale(.65)}65%{opacity:1;transform:translateY(-2px) scale(1.1)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pt-nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}70%{transform:translateX(4px)}}
@keyframes pt-reveal{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.examples-layout,.examples-layout .example-aside,.examples-layout #cp-examples,#exFeedback.correct,#exFeedback.incorrect,#exSolution:not([hidden]){animation:none!important}#cp-examples .primary,#cp-examples .ghost{transition:none!important}}