@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Fredoka:wght@500;600;700&display=swap";@font-face{font-family:StaffClefs;src:local(Segoe UI Symbol),url(/assets/fonts/staff-clefs.woff)format("woff");font-style:normal;font-weight:400;font-display:block;unicode-range:U+1D11E}:root{color:#493f5c;font-synthesis:none;background:#fff8ee;font-family:DM Sans,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 7% 13%,#f7c1cb5c 0 80px,#0000 81px),radial-gradient(circle at 92% 89%,#ade0d361 0 110px,#0000 111px),linear-gradient(145deg,#fff9ef 0%,#fff5f2 52%,#f5f7ee 100%);min-width:320px;min-height:100vh;margin:0}button,select{font:inherit}button{cursor:pointer;border:0}button:focus-visible,select:focus-visible,.notation-area:focus-visible{outline-offset:3px;outline:4px solid #66558f38}.app-shell{isolation:isolate;width:min(1080px,100% - 28px);margin:0 auto;padding:24px 0 14px;position:relative}header{z-index:1;text-align:center;margin-bottom:16px;position:relative}.eyebrow{letter-spacing:.19em;color:#d26b7e;margin-bottom:3px;font-size:11px;font-weight:700}h1{color:#51446d;margin:0;font:700 clamp(34px,5vw,54px)/1.05 Fredoka,sans-serif}h1 span{color:#e66f85}header p{color:#776e84;margin:7px 0 0;font-size:15px}.sparkle{z-index:0;pointer-events:none;color:#e6b84e;opacity:.55;font:600 31px Fredoka;position:absolute;transform:rotate(-13deg)}.sparkle-one{top:50px;left:4%}.sparkle-two{color:#78bcae;font-size:24px;top:42px;right:3%;transform:rotate(12deg)}.game-card{z-index:2;background:#fffdfb;border:1px solid #765c821c;border-radius:26px;position:relative;overflow:hidden;box-shadow:0 18px 55px #694c6921,inset 0 3px #ffffffbf}.settings-row{background:#faf6fb;border-bottom:1px solid #eee6f0;align-items:end;gap:16px;padding:14px 22px;display:flex}.settings-row label{flex:1;min-width:150px}.settings-row label>span{text-transform:uppercase;letter-spacing:.08em;color:#82758d;margin:0 0 5px 3px;font-size:11px;font-weight:700;display:block}select{color:#51475f;background:#fff;border:1px solid #ddd1e2;border-radius:10px;width:100%;padding:9px 34px 9px 11px}.round-pill{white-space:nowrap;color:#468b7d;background:#edf7f3;border-radius:999px;align-self:center;margin-top:16px;padding:8px 13px;font-size:12px}.listen-row{align-items:center;gap:11px;padding:13px 24px 7px;display:flex}.step-badge{color:#c65d72;background:#f8dfe4;border-radius:50%;place-items:center;width:28px;height:28px;font:700 14px Fredoka;display:grid}.listen-row b{color:#564a68;font:600 16px Fredoka;display:block}.listen-row small{color:#8b8192;margin-top:1px;font-size:12px;display:block}.listen-row .play{margin-left:auto}button{border-radius:12px;padding:11px 17px;font-weight:700;transition:transform .15s,box-shadow .15s,filter .15s}button:hover{filter:brightness(1.02);transform:translateY(-2px)}button:active{transform:translateY(0)}.primary{color:#fff;background:#65558f;box-shadow:0 5px 12px #65558f3b}.primary span{margin-right:4px;font-size:11px}.notation-area{background:linear-gradient(#fffdf9,#fffaf5);border:1px solid #f0e9e2;border-radius:20px;margin:5px 23px 0}.staff-wrap{max-width:860px;height:min(34vh,280px);min-height:210px;margin:0 auto}.staff{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block;overflow:visible}.staff-line,.ledger{stroke:#645b69;stroke-width:2.2px;stroke-linecap:round}.ledger{stroke-width:2.6px}.clef{fill:#564c60;font-family:Times New Roman,serif;font-size:128px}.note-label{fill:#7b7182;font:600 14px DM Sans}.your-note{fill:#d46378}.accidental{font:500 45px Times New Roman}.drag-note{cursor:grab}.drag-note:active{cursor:grabbing}.drag-hint{fill:#d78b99;font:600 14px Fredoka}.feedback{color:#6d6176;text-align:center;background:#f7f2f9;border-radius:12px;justify-content:center;align-items:center;gap:9px;min-height:43px;margin:8px 23px 9px;padding:9px 14px;font-size:14px;font-weight:600;display:flex}.feedback>span{color:#a48ab0;font-size:18px}.feedback[data-kind=correct]{color:#30785f;background:#eaf8f0}.feedback[data-kind=correct]>span{color:#e2ad32}.feedback[data-kind=try]{color:#9a692a;background:#fff5e2}.feedback[data-kind=answer]{color:#526b9b;background:#edf2fb}.actions{grid-template-columns:1.15fr .9fr 1.15fr .75fr;gap:10px;padding:0 23px 20px;display:grid}.actions .soft{color:#665773;background:#f1ecf4}.actions .check{color:#fff;background:#e66f85;box-shadow:0 5px 12px #e66f8540}.actions .next{color:#367c6b;background:#dff2eb}.actions .next span{margin-left:4px;font-size:18px}footer{z-index:1;text-align:center;color:#988e9b;padding-top:9px;font-size:11px;position:relative}footer span{color:#dc7185}@media (width<=700px){.app-shell{width:min(100% - 16px,620px);padding-top:12px}.sparkle{display:none}header{margin-bottom:10px}header p{font-size:13px}.game-card{border-radius:20px}.settings-row{flex-wrap:wrap;gap:8px;padding:10px 12px}.settings-row label{min-width:calc(50% - 5px)}.round-pill{display:none}.listen-row{padding:11px 13px 4px}.listen-row small{display:none}.listen-row b{font-size:14px}button{padding:10px}.notation-area{margin:5px 10px 0}.staff-wrap{height:min(30vh,240px);min-height:185px}.feedback{min-height:48px;margin:7px 10px;font-size:13px}.actions{grid-template-columns:1fr 1fr;gap:7px;padding:0 10px 11px}footer{display:none}}@media (height<=700px) and (width>=701px){.app-shell{padding-top:10px}header{margin-bottom:8px}h1{font-size:38px}.staff-wrap{height:230px}.settings-row{padding-top:9px;padding-bottom:9px}footer{display:none}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.feedback[data-kind=error]{color:#a44f5c;background:#fff0f0}.notation-area{position:relative}.flat-toggle{color:#b65c70;background:#fff5f7;border:1px solid #e6cad2;border-radius:999px;padding:7px 11px;font-size:12px;position:absolute;bottom:10px;right:5%;box-shadow:0 3px 8px #91566c1f}.flat-toggle b{margin-right:3px;font:700 21px/0 Times New Roman}.flat-toggle.is-on{color:#fff;background:#e66f85;border-color:#e66f85}.flat-toggle:disabled{opacity:.38;cursor:not-allowed;box-shadow:none;transform:none}.anchor-note{cursor:pointer;outline:none;transition:opacity .15s,filter .15s}.anchor-note:hover,.anchor-note:focus{filter:drop-shadow(0 0 7px #65558f6b)}.anchor-note[aria-disabled=true]{cursor:wait;opacity:.6}.anchor-label{fill:#71648e;font-size:11px}button:disabled{cursor:wait;opacity:.55;transform:none!important}@media (width<=700px){.flat-toggle{padding:6px 8px;font-size:11px;bottom:6px;right:3%}.anchor-label{font-size:10px}}.clef{font-synthesis:none;font-size:176px;font-weight:400;font-family:StaffClefs,Segoe UI Symbol,Times New Roman,Georgia,serif!important}.live-interval-label{fill:#8f6380;paint-order:stroke;stroke:#fffaf5;stroke-width:5px;stroke-linejoin:round;font:600 24px Fredoka}.student-note-target{cursor:pointer;outline:none}.student-note-target:hover,.student-note-target:focus{filter:drop-shadow(0 0 7px #e66f8566)}.anchor-ledger{stroke:#65558f}.student-ledger{stroke:#e66f85}.answer-ledger{stroke:#22a06b}.settings-panel{background:#faf6fb;border-bottom:1px solid #eee6f0;padding:9px 16px 10px}.preset-bar{align-items:end;gap:10px;margin-bottom:7px;display:flex}.rcm-select{align-items:center;gap:8px;display:flex;position:relative}.rcm-select>span{text-transform:uppercase;letter-spacing:.09em;color:#82758d;white-space:nowrap;font-size:10px;font-weight:700}.rcm-select select{width:142px;padding:6px 28px 6px 9px;font-size:12px}.rcm-trigger{color:#51475f;text-align:left;background:#fff;border:1px solid #ddd1e2;border-radius:10px;justify-content:space-between;align-items:center;gap:8px;width:142px;padding:6px 9px;font-size:12px;display:flex;box-shadow:0 2px 5px #694c690f}.rcm-trigger:hover,.rcm-trigger:focus-visible{filter:none;background:#fff8fb;border-color:#d9c8df;transform:none}.rcm-trigger span:first-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rcm-trigger span:last-child{color:#9c7199;font-size:14px;line-height:1}.rcm-menu{z-index:20;scrollbar-width:thin;background:#fffdfb;border:1px solid #e3d6e8;border-radius:14px;width:142px;max-height:260px;padding:5px;position:absolute;top:calc(100% + 5px);left:calc(100% - 142px);overflow:auto;box-shadow:0 14px 28px #5c426329}.rcm-option{color:#665773;width:100%;box-shadow:none;text-align:left;background:0 0;border-radius:10px;padding:7px 9px;font-size:12px;display:block}.rcm-option:hover,.rcm-option:focus-visible{color:#65558f;filter:none;background:#f7eef6;transform:none}.rcm-option.is-selected{color:#fff;background:#e66f85}.preset-bar .round-pill{margin:0 0 1px auto;padding:6px 11px}.clear-intervals{color:#7b6d82;box-shadow:none;background:#fff;border:1px solid #e5d9e8;border-radius:999px;margin-bottom:1px;padding:6px 10px;font-size:11px}.clear-intervals:hover,.clear-intervals:focus-visible{color:#bd5d72;background:#fff3f6;transform:none}.anchor-stepper{color:#665773;background:#fff;border:1px solid #ded4e7;border-radius:999px;align-items:center;gap:5px;margin-left:auto;padding:4px 7px;font-size:11px;display:flex}.anchor-stepper span{color:#82758d;font-weight:700}.anchor-stepper b{text-align:center;color:#65558f;min-width:24px;font:700 13px Fredoka}.anchor-stepper button{color:#65558f;box-shadow:none;background:#f1ecf4;border-radius:999px;padding:2px 7px}.anchor-stepper button:hover,.anchor-stepper button:focus-visible{background:#e7def0;transform:none}.interval-grid{scrollbar-width:thin;grid-template-columns:repeat(9,minmax(70px,1fr));gap:5px;padding:1px 1px 3px;display:none;overflow-x:auto}.interval-grid.is-open{display:grid}.interval-column{text-align:center;background:#fff;border:1px solid #e9dfea;border-radius:10px;flex-direction:column;gap:3px;min-width:0;padding:4px;display:flex}.interval-column.special{background:#fff9e9;border-color:#eddfb3}.interval-column>strong{color:#75687e;white-space:nowrap;font:600 10px Fredoka}.interval-column.group-selected{background:#fff7fa;border-color:#e5aac0}.interval-column.special.group-selected{background:#fff8df;border-color:#dbbf62}.interval-column.perfect-card{background:#f0faf6;border-color:#c7e7de}.interval-column.perfect-card.group-selected{background:#e9f8f3;border-color:#78bcae}.interval-header{color:#75687e;width:100%;box-shadow:none;white-space:nowrap;cursor:pointer;background:0 0;border-radius:7px;padding:2px 2px 3px;font:600 10px Fredoka}.interval-header:hover,.interval-header:focus-visible{color:#65558f;filter:none;background:#f3edf6;transform:none}.interval-header[aria-pressed=true]{color:#bb5a70;background:#f9dfe7}.interval-column.perfect-card .interval-header{color:#4a8477}.interval-column.perfect-card .interval-header:hover,.interval-column.perfect-card .interval-header:focus-visible{color:#347a6b;background:#dff3ed}.interval-column.perfect-card .interval-header[aria-pressed=true]{color:#287061;background:#d7f1e9}.interval-column.special .interval-header[aria-pressed=true]{color:#90691b;background:#f4e3aa}.interval-option{cursor:pointer;position:relative}.interval-option input{opacity:0;pointer-events:none;position:absolute}.interval-option span{color:#766a7c;background:#f3eef5;border-radius:6px;padding:4px 2px;font-size:9px;font-weight:700;line-height:1.05;transition:all .15s;display:block}.interval-option input:checked+span{color:#fff;background:#e66f85;box-shadow:0 2px 5px #e66f8538}.interval-option.is-perfect input:checked+span{color:#fff;background:#78bcae;box-shadow:0 2px 5px #78bcae3d}.interval-column.special .interval-option input:checked+span{background:#d9a73b}.interval-option input:focus-visible+span{outline-offset:1px;outline:3px solid #66558f3b}@media (width<=700px){.settings-panel{padding:8px 10px}.preset-bar{margin-bottom:6px}.preset-bar .round-pill{display:block}.interval-grid{grid-template-columns:repeat(9,72px);gap:4px}.rcm-select select{width:126px}.live-interval-label{font-size:24px}}html,body{overflow-x:hidden}.app-shell,.game-card,.notation-area,.settings-panel{-webkit-user-select:none;user-select:none}.rcm-select select{-webkit-user-select:auto;user-select:auto}.choose-intervals{color:#665773;box-shadow:none;background:#f1ecf4;border:1px solid #e4d9e9;border-radius:999px;flex:none;margin:0;padding:6px 10px;font-size:11px;display:block}.choose-intervals[aria-expanded=true]{color:#fff;background:#65558f;border-color:#65558f}.choose-intervals:hover,.choose-intervals:focus-visible{filter:none;background:#e9e2ef;transform:none}.helper-mobile{display:none!important}footer span{color:inherit;display:block}footer .footer-tip,footer .footer-credit{color:#988e9b}@media (width<=700px){.app-shell{width:min(100% - 10px,620px);padding-top:5px;padding-bottom:4px}header{margin-bottom:5px}.eyebrow{margin-bottom:0;font-size:9px}h1{font-size:clamp(27px,8vw,34px)}header p{margin-top:2px;font-size:11px}.game-card{border-radius:17px}.settings-panel{padding:5px 7px 6px;position:relative}.preset-bar{flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:4px;display:flex}.rcm-select{flex:158px;gap:5px;min-width:150px}.rcm-select>span{font-size:9px}.rcm-select select{width:100%;min-width:0;padding:5px 22px 5px 7px;font-size:11px}.rcm-trigger{flex:72px;width:auto;min-width:72px;padding:5px 7px;font-size:10.5px}.rcm-menu{border-radius:12px;width:min(170px,100vw - 28px);max-height:220px;left:auto;right:0}.preset-bar .round-pill{flex:none;margin:0;padding:5px 7px;font-size:10px;display:block}.clear-intervals{flex:none;margin:0;padding:5px 7px;font-size:10px}.choose-intervals{color:#665773;box-shadow:none;background:#f1ecf4;border:1px solid #e4d9e9;border-radius:999px;flex:none;margin:0;padding:5px 7px;font-size:10px;display:block}.choose-intervals[aria-expanded=true]{color:#fff;background:#65558f;border-color:#65558f}.anchor-stepper{flex:100%;order:5;justify-content:center;margin:0;padding:3px 6px;font-size:10px}.anchor-stepper b{font-size:12px}.anchor-stepper button{padding:2px 10px}.interval-grid{scrollbar-width:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin-top:4px;padding:0;display:none;overflow:visible}.interval-grid.is-open{display:grid}.interval-column{border-radius:8px;gap:1px;padding:3px 2px}.interval-header{border-radius:5px;padding:2px 1px;font-size:9.5px;line-height:1}.interval-column.special .interval-header{letter-spacing:-.02em;font-size:8.5px}.interval-option span{border-radius:5px;padding:3px 1px;font-size:8.5px;line-height:1}.listen-row{grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:5px;padding:7px 9px 2px;display:grid}.step-badge{width:25px;height:25px;font-size:12px}.listen-row b{font-size:13px;line-height:1.05}.listen-row small{max-width:190px;margin-top:1px;font-size:9.5px;line-height:1.1}.helper-desktop{display:none!important}.helper-mobile{white-space:nowrap;font-size:9px;display:block!important}.listen-row .play{white-space:nowrap;margin-left:0;padding:8px 9px;font-size:11px}.notation-area{border-radius:16px;margin:2px 7px 0}.staff-wrap{height:min(25vh,205px);min-height:170px}.feedback{min-height:36px;margin:4px 7px 5px;padding:6px 8px;font-size:12px}.actions{gap:5px;padding:0 7px 7px}.actions button{border-radius:10px;padding:8px 6px;font-size:11px}.flat-toggle{bottom:4px}footer{padding-top:4px;font-size:9.5px;line-height:1.15;display:block}footer .footer-tip{display:none}}.notation-area{padding-bottom:54px}.staff-wrap{height:min(38vh,320px);min-height:250px}.flat-toggle{bottom:12px}@media (width<=700px){.preset-bar{align-items:center;gap:4px;width:100%}.rcm-select{flex:1 1 0;gap:4px;min-width:150px;max-width:none}.rcm-select>span{flex:none}.rcm-select select{flex:72px;width:auto;min-width:72px;padding:5px 20px 5px 6px;font-size:10.5px}.rcm-trigger{flex:72px;width:auto;min-width:72px;padding:5px 7px;font-size:10.5px}.choose-intervals,.clear-intervals{flex:none;padding:5px 7px}.notation-area{padding-bottom:36px}.staff-wrap{height:min(29vh,226px);min-height:194px}.flat-toggle{bottom:7px}}@media (width>=701px){.app-shell{padding-top:14px;padding-bottom:8px}header{margin-bottom:9px}header p{margin-top:4px}.settings-panel{padding-top:7px;padding-bottom:8px}.listen-row{padding-top:9px;padding-bottom:4px}.notation-area{margin-top:3px;padding-bottom:42px}.staff-wrap{height:min(32vh,270px);min-height:226px}.feedback{min-height:38px;margin-top:6px;margin-bottom:7px;padding-top:7px;padding-bottom:7px}.actions{padding-bottom:12px}footer{padding-top:6px;line-height:1.2;display:block}}@media (height<=760px) and (width>=701px){.app-shell{padding-top:8px;padding-bottom:5px}header{margin-bottom:6px}h1{font-size:clamp(32px,4.4vw,46px)}.eyebrow{margin-bottom:1px;font-size:10px}header p{margin-top:3px;font-size:13px}.settings-panel{padding-top:6px;padding-bottom:6px}.preset-bar{margin-bottom:5px}.interval-grid{gap:4px}.interval-column{padding:3px}.listen-row{padding-top:7px;padding-bottom:3px}.notation-area{padding-bottom:36px}.staff-wrap{height:min(30vh,242px);min-height:210px}.feedback{min-height:34px;margin-top:5px;margin-bottom:6px;font-size:13px}.actions{padding-bottom:9px}footer{padding-top:4px;font-size:10px;display:block}}