.sequence ellipse{pointer-events:all}.sequence-playing{fill:#d4a01729;stroke:#d4a01780;stroke-width:1px}.sequence-solfege{fill:#a3820f;pointer-events:none;stroke:#fff;stroke-width:3px;paint-order:stroke;font-family:ui-monospace,Consolas,monospace;font-size:11px;font-weight:700}.sequence-slot-number{fill:#999;stroke:#fff;stroke-width:3px;paint-order:stroke;font-family:ui-monospace,Consolas,monospace;font-size:10px;font-weight:700}.sequence-slot-number.missing{fill:#ef4444}.sequence-slot-number.passed{fill:#16a34a}.sequence-sharp{fill:#555;font-size:13px;font-weight:700}.sequence-sung-notehead{stroke-width:1px}.sequence-sung.ungraded .sequence-sung-notehead{fill:#aa3bff;stroke:#7e22ce;opacity:.45}.sequence-sung.correct .sequence-sung-notehead,.sequence-sung.octave .sequence-sung-notehead{fill:#22c55e;stroke:#16a34a}.sequence-sung.close .sequence-sung-notehead{fill:#f59e0b;stroke:#d97706}.sequence-sung.off .sequence-sung-notehead{fill:#ef4444;stroke:#dc2626}.sequence-sung-glyph{fill:#fff;pointer-events:none;font-size:11px;font-weight:700}.sequence-aim-arrow{fill:#d97706;pointer-events:none}.sequence-octave-tag{fill:#16a34a;font-family:ui-monospace,Consolas,monospace;font-size:9px;font-weight:700}.sequence-missing ellipse{fill:none;stroke:#ef4444;stroke-width:1.5px;stroke-dasharray:3 2}.sequence-missing text{fill:#ef4444;font-size:10px;font-weight:700}.sequence-extra-notehead{fill:none;stroke:#999;stroke-width:1.5px}.sequence-extra{opacity:.7}.sequence-extra-plus{fill:#999;pointer-events:none;font-size:10px;font-weight:700}.sequence-slide-line{fill:none;stroke-width:1.8px;stroke-linecap:round;stroke:#9ca3af;pointer-events:none}.sequence-sung.correct .sequence-slide-line,.sequence-sung.octave .sequence-slide-line{stroke:#16a34a}.sequence-sung.close .sequence-slide-line{stroke:#d97706}.sequence-sung.off .sequence-slide-line{stroke:#dc2626}.sequence-slide-hit{fill:none;stroke:#0000;stroke-width:8px;pointer-events:stroke}.sequence-message{pointer-events:none}.sequence-message text{fill:#6b6375;font-family:ui-monospace,Consolas,monospace;font-size:13px;font-weight:700}.sequence-message-backing{fill:#fff;fill-opacity:.9}.sequence-message.success text{fill:#2e9d4f}.sequence-message.warning text{fill:#c2410c}.grand-staff-wrapper{background:#fff;border-radius:8px;width:100%;padding:8px;position:relative;box-shadow:0 4px 12px #00000026}.grand-staff-svg{width:100%;max-width:900px;height:auto;margin:0 auto;display:block}.grand-staff-wrapper .staff-type-toggle{--svg-width:min(100% - 16px, 900px);--svg-left:calc(8px + (100% - 16px - var(--svg-width)) / 2);top:50%;left:calc(var(--svg-left) + var(--svg-width) * .16 - 64px);flex-direction:column;transform:translateY(-50%)}.staff-line,.system-line,.ledger-line{stroke:#000;stroke-width:1.5px}.system-line{stroke-width:2.5px}.ledger-line{stroke-width:1.5px}.clef{fill:#000;-webkit-user-select:none;user-select:none;font-family:serif}.treble-clef{font-size:92px}.bass-clef{font-size:60px}.c-clef{font-size:126px}.detected-marker{opacity:1;transition:transform .12s ease-out,opacity .2s}.detected-marker.hidden{opacity:0}.notehead{fill:#aa3bff;stroke:#7a1fc4;stroke-width:1px}.note-label{fill:#aa3bff;font-family:ui-monospace,Consolas,monospace;font-size:15px;font-weight:600}.intro-hint-target .intro-hint-arrowhead,.intro-hint-target .intro-hint-label{fill:#d4a017}.intro-hint-detected .intro-hint-arrowhead,.intro-hint-detected .intro-hint-label{fill:#aa3bff}.staff-accidental{font-family:serif;font-size:24px}.detected-accidental{fill:#aa3bff}.target-accidental{fill:#a3820f}.target-accidental.dimmed{opacity:.2}.pitch-nudge polyline{fill:none;stroke:#aa3bff;stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round}.pitch-nudge.up .pitch-nudge-chevrons{animation:.9s ease-in-out infinite pitch-nudge-up}.pitch-nudge.down .pitch-nudge-chevrons{animation:.9s ease-in-out infinite pitch-nudge-down}@keyframes pitch-nudge-up{0%,to{opacity:.7;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}@keyframes pitch-nudge-down{0%,to{opacity:.7;transform:translateY(0)}50%{opacity:1;transform:translateY(3px)}}@media (prefers-reduced-motion:reduce){.pitch-nudge .pitch-nudge-chevrons{animation:none}}.grand-staff-wrapper.compact,.chromatic-staff-wrapper.compact{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:6px;display:flex}.grand-staff-wrapper.compact>svg,.chromatic-staff-wrapper.compact>svg{flex:0 0 100%;order:2}.grand-staff-wrapper.compact>.staff-type-toggle,.chromatic-staff-wrapper.compact>.staff-type-toggle{flex-direction:row;order:0;gap:4px;display:flex;position:static;transform:none}.chromatic-staff-wrapper.compact>.staff-type-toggle>:nth-child(3){margin-left:6px}.grand-staff-wrapper.compact>.range-presets,.chromatic-staff-wrapper.compact>.range-presets{flex-direction:row;order:1;margin-left:auto;position:static}.range-presets.row .range-preset-flyout{top:calc(100% + 4px);right:-4px}@media (pointer:coarse){:is(.grand-staff-wrapper,.chromatic-staff-wrapper) .staff-type-icon,.range-presets .range-preset{width:36px;height:36px;font-size:18px}.range-presets .range-preset svg{width:22px;height:22px}.grand-staff-wrapper:not(.compact) .staff-type-toggle,.chromatic-staff-wrapper:not(.compact) .staff-type-toggle{left:calc(var(--svg-left) + var(--svg-width) * .16 - 80px)}.chromatic-staff-wrapper:not(.compact) .staff-type-toggle{grid-template-rows:36px 36px;grid-auto-columns:36px}:is(.grand-staff-wrapper,.chromatic-staff-wrapper).compact .staff-type-icon,:is(.grand-staff-wrapper,.chromatic-staff-wrapper).compact .range-presets>*>.range-preset,:is(.grand-staff-wrapper,.chromatic-staff-wrapper).compact .range-presets>.range-preset{width:34px;height:34px}:is(.grand-staff-wrapper,.chromatic-staff-wrapper).compact .range-presets,:is(.grand-staff-wrapper,.chromatic-staff-wrapper).compact>.staff-type-toggle{gap:3px}}.chromatic-staff-wrapper{background:#fff;border-radius:8px;width:100%;padding:8px;position:relative;box-shadow:0 4px 12px #00000026}.chromatic-staff-svg{width:100%;max-width:900px;height:auto;margin:0 auto;display:block}.staff-type-toggle{z-index:1;gap:4px;display:flex;position:absolute;top:8px;left:8px}.staff-type-icon{cursor:pointer;background:#0000000d;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;padding:0;font-size:15px;line-height:1;transition:background .1s,border-color .1s;display:flex}.staff-type-icon:hover{background:#0000001a}.staff-type-icon.active{cursor:default;background:#aa3bff1f;border-color:#aa3bff}.chromatic-system-line{stroke:#000;stroke-width:2.5px}.chromatic-black-row{fill:#eef0f3}.chromatic-row-seam{stroke:#e4e6ea;stroke-width:.6px}.chromatic-octave-seam{stroke:#4a4a4a;stroke-width:1.5px}.chromatic-octave-label{fill:#666;font-family:ui-monospace,Consolas,monospace;font-size:11px;font-weight:600}.piano-key{stroke:#888;stroke-width:.5px}.piano-key-white{fill:#f5f5f0}.piano-key-black{fill:#2a2a2a}.piano-key.clickable{cursor:pointer}.piano-key.clickable:hover{fill:#d8c9ff}.piano-key.clickable:active{fill:#aa3bff}.piano-key.choosable{cursor:pointer}.piano-key.choosable:hover{fill:#f3dc8e}.piano-key.choosable:active{fill:#d4a017}.piano-key.out-of-range{opacity:.35;cursor:pointer}.target-preview{opacity:.45;pointer-events:none}.choose-hint{fill:#d4a017;pointer-events:none;animation:.25s .5s both choose-hint-in}.choose-hint.immediate{animation-delay:0s}@keyframes choose-hint-in{0%{opacity:0}to{opacity:1}}.chromatic-staff-wrapper .staff-type-toggle{--svg-width:min(100% - 16px, 900px);--svg-left:calc(8px + (100% - 16px - var(--svg-width)) / 2);top:50%;left:calc(var(--svg-left) + var(--svg-width) * .16 - 64px);grid-template-rows:28px 28px;grid-auto-columns:28px;grid-auto-flow:column;gap:4px 8px;display:grid;transform:translateY(-50%)}.chromatic-marker{opacity:1;transition:transform .12s ease-out,opacity .2s}.chromatic-marker.hidden{opacity:0}.chromatic-notehead{fill:#aa3bff;stroke:#7a1fc4;stroke-width:1px}.chromatic-note-label{fill:#aa3bff;font-family:ui-monospace,Consolas,monospace;font-size:15px;font-weight:600}.target-marker{transition:transform .2s ease-out}.target-notehead{fill:none;stroke:#d4a017;stroke-width:2.5px;stroke-dasharray:3 2}.target-label{fill:#a3820f}.transpose-t{fill:#888}.transpose-subscript{fill:#888;font-size:10px}.target-progress-ring{fill:none;stroke:#22c55e;stroke-width:3px;stroke-linecap:round;transition:stroke-dashoffset .1s linear}.range-line,.range-tick{stroke:#000;stroke-width:2px;stroke-linecap:round}.range-label{fill:#000;font-family:ui-monospace,Consolas,monospace;font-size:13px;font-weight:600}.zoom-edge-arrow{fill:#aa3bff}.zoom-edge-label{font-size:13px}.intro-hint-target .intro-hint-line,.intro-hint-target .intro-hint-arrowhead{stroke:#d4a017}.intro-hint-target .intro-hint-arrowhead,.intro-hint-target .intro-hint-label{fill:#d4a017}.intro-hint-detected .intro-hint-line,.intro-hint-detected .intro-hint-arrowhead{stroke:#aa3bff}.intro-hint-detected .intro-hint-arrowhead,.intro-hint-detected .intro-hint-label{fill:#aa3bff}.intro-hint-line{stroke-width:2px;stroke-linecap:round}.intro-hint-label{font-family:ui-monospace,Consolas,monospace;font-size:13px;font-weight:700}.interval-end{transition:transform .2s ease-out}.target-notehead.pending{opacity:.45}.interval-connector{stroke:#d4a017;stroke-width:2px;fill:none}.interval-arrowhead-shape{fill:#d4a017}.interval-done-notehead{fill:#22c55e;stroke:#16a34a;stroke-width:1px}.interval-done-check{fill:#fff;font-size:12px;font-weight:700}.interval-end-label{fill:#a3820f;transition:opacity .2s,fill .2s}.interval-end-label.pending{opacity:.55}.interval-end-label.done{fill:#16a34a}