.notes-keyboard-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;pointer-events:none;z-index:12}.notes-keyboard{width:min(920px,100%);transform-origin:center center}.notes-keyboard__container{position:relative;display:flex;height:clamp(210px,33vh,300px);background:#1a1a1a;border-radius:10px;padding:12px;box-shadow:0 12px 40px #00000073}.notes-keyboard__key{-webkit-user-select:none;user-select:none}.notes-keyboard__white{flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;background:#ececf2;border-right:4px solid #1a1a1a;border-radius:0 0 5px 5px;box-shadow:0 2px 4px #0000002e;transition:background-color .08s linear,box-shadow .08s linear}.notes-keyboard__white:last-child{border-right:none}.notes-keyboard__black{position:absolute;top:12px;width:calc((100% - 24px) / var(--white-count, 14) * .62);height:58%;background:#15151c;border:1px solid #000;border-radius:0 0 4px 4px;z-index:3;box-shadow:0 3px 6px #0000008c;transition:background-color .08s linear}.notes-keyboard__label{font-size:clamp(11px,1.4vw,14px);color:#15151c;font-weight:600;line-height:1}.notes-keyboard__black .notes-keyboard__label{position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-size:clamp(9px,1.1vw,11px);color:#f0f0f8;font-weight:700}.notes-keyboard__accidental{position:absolute;left:50%;top:42%;transform-origin:center center;font-size:clamp(5.2rem,18.2vw,9.75rem);font-weight:700;color:#fff;line-height:1;-webkit-user-select:none;user-select:none;pointer-events:none}.notes-keyboard__trio{--trio-note-size: clamp(3.25rem, 11vw, 6rem);--trio-gap: clamp(1.75rem, 7vw, 4rem);position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}.notes-keyboard__trio-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;column-gap:var(--trio-gap);align-items:end;justify-items:center}.notes-keyboard__trio-annotation{display:flex;flex-direction:column;align-items:center;padding-bottom:.35rem;pointer-events:none;width:100%}.notes-keyboard__trio-annotation--left{grid-column:1 / 3;grid-row:1}.notes-keyboard__trio-annotation--right{grid-column:2 / 4;grid-row:1}.notes-keyboard__trio-note--a{grid-column:1;grid-row:2}.notes-keyboard__trio-note--asharp{grid-column:2;grid-row:2}.notes-keyboard__trio-note--b{grid-column:3;grid-row:2}.notes-keyboard__trio-formula{margin-top:clamp(1rem,3.5vw,1.75rem);font-size:calc(var(--trio-note-size) * .72);font-weight:700;color:#fff;line-height:1;letter-spacing:.06em;transform-origin:center center;-webkit-user-select:none;user-select:none}.notes-keyboard__trio-h{font-size:calc(var(--trio-note-size) * .6);font-weight:700;color:#fff;line-height:1;transform-origin:center bottom;margin-bottom:.15rem;-webkit-user-select:none;user-select:none}.notes-keyboard__trio-arrow{width:100%;height:clamp(2rem,7vw,3.25rem);overflow:visible;transform-origin:center bottom}.notes-keyboard__trio-note{font-size:var(--trio-note-size);font-weight:700;color:#fff;line-height:1;transform-origin:center center;-webkit-user-select:none;user-select:none}.scales-solfege-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:12}.scales-solfege-row{display:flex;align-items:center;justify-content:center;gap:clamp(.65rem,2.8vw,1.6rem);flex-wrap:nowrap;max-width:min(96vw,920px);padding:0 12px;box-sizing:border-box;transform-origin:center center}.scales-solfege-row--intervals{gap:clamp(.85rem,3.2vw,2rem)}.scales-solfege-row--notes{gap:clamp(.55rem,2.2vw,1.35rem)}.scales-solfege-word{font-size:clamp(1.85rem,5.5vw,3.25rem);font-weight:700;color:#fff;line-height:1;transform-origin:center center;-webkit-user-select:none;user-select:none;white-space:nowrap}.scales-solfege-word--interval{font-size:clamp(2.1rem,6vw,3.6rem);letter-spacing:.02em}.scales-solfege-word--note{font-size:clamp(1.75rem,5vw,3rem);letter-spacing:.04em}.next-subsection-btn{position:absolute;right:32px;bottom:32px;width:104px;height:72px;padding:0;border:none;cursor:pointer;background:linear-gradient(135deg,#ffe14d,#ffc21f 55%,#ffb300);clip-path:polygon(0% 30%,55% 30%,55% 6%,100% 50%,55% 94%,55% 70%,0% 70%);filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));transform-origin:center center;animation:next-subsection-pop .42s cubic-bezier(.34,1.56,.64,1) both;transition:filter .15s ease,transform .12s ease;z-index:20}.next-subsection-btn:hover{filter:drop-shadow(0 8px 18px rgba(0,0,0,.55)) brightness(1.06);transform:scale(1.06)}.next-subsection-btn:active{transform:scale(.96)}.next-subsection-btn:focus-visible{outline:3px solid #fff3b0;outline-offset:4px}@keyframes next-subsection-pop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.playback-controls{padding:20px;background:#1a1a1a;border-top:1px solid #333}.playback-controls--minimal{padding:0;background:transparent;border:none}.playback-controls--minimal .playback-buttons{margin-bottom:0}.playback-buttons{display:flex;gap:10px;margin-bottom:15px}.btn-primary{background:#0cf;color:#000;border:none;font-weight:600}.btn-primary:hover:not(:disabled){background:#0ac}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.timeline-container{margin-bottom:15px}.timeline-slider{width:100%;height:6px;border-radius:3px;background:#333;outline:none;-webkit-appearance:none;cursor:pointer}.timeline-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#0cf;cursor:pointer;transition:all .2s ease}.timeline-slider::-webkit-slider-thumb:hover{background:#0ac;transform:scale(1.2)}.timeline-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#0cf;cursor:pointer;border:none;transition:all .2s ease}.timeline-slider::-moz-range-thumb:hover{background:#0ac;transform:scale(1.2)}.timeline-labels{display:flex;justify-content:space-between;margin-top:5px;font-size:12px;color:#888}.playback-settings{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.speed-control{display:flex;align-items:center;gap:10px;font-size:14px;color:#ccc}.speed-control input[type=range]{width:100px;height:4px;border-radius:2px;background:#333;outline:none;-webkit-appearance:none}.speed-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#0cf;cursor:pointer}.speed-control input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#0cf;cursor:pointer;border:none}.loop-control,.audio-control{display:flex;align-items:center;gap:8px;font-size:14px;color:#ccc;cursor:pointer}.loop-control input[type=checkbox],.audio-control input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#00ccff}.song-picker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:min(520px,100%)}.song-picker__label{font-size:13px;color:#bbb;white-space:nowrap}.song-picker__select{flex:1;min-width:200px;padding:8px 12px;border-radius:8px;border:1px solid #444;background:#2a2a2a;color:#fff;font-size:14px;cursor:pointer}.song-picker__select:disabled{opacity:.6;cursor:wait}.song-picker__status{font-size:12px;color:#8ab4ff}.song-picker__error{font-size:12px;color:#f88;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rhythm-staff-overlay{position:absolute;left:0;right:0;bottom:0;height:118px;padding:10px 16px 12px;box-sizing:border-box;background:linear-gradient(180deg,transparent 0%,rgba(10,11,14,.94) 28%);border-top:1px solid rgba(55,58,72,.95);pointer-events:none;z-index:14;display:flex;align-items:flex-end;justify-content:center}.rhythm-staff-overlay svg{width:100%;max-width:min(960px,100%);height:92px;overflow:visible}.sublesson-nav{margin-top:auto;display:flex;justify-content:flex-end;gap:14px;padding-top:14px;padding-right:4px}.sublesson-nav__arrow{width:26px;height:26px;padding:0;border:none;cursor:pointer;background:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));transition:opacity .15s ease,transform .1s ease,filter .15s ease}.sublesson-nav__arrow--prev{clip-path:polygon(100% 0,100% 100%,0 50%)}.sublesson-nav__arrow--next{clip-path:polygon(0 0,0 100%,100% 50%)}.sublesson-nav__arrow:hover:not(:disabled){transform:scale(1.12);filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)) brightness(1.05)}.sublesson-nav__arrow:active:not(:disabled){transform:scale(.94)}.sublesson-nav__arrow:disabled{opacity:.28;cursor:default}.sublesson-nav__arrow:focus-visible{outline:2px solid #9cc4ff;outline-offset:3px}.eighth-note-lesson-visual{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:12}.eighth-note-lesson-visual__note{position:relative;width:min(28vw,220px);transform-origin:center center;animation:eighth-note-enter .55s ease-out both}.eighth-note-lesson-visual--exit .eighth-note-lesson-visual__note{animation:eighth-note-cartoon-exit .65s ease-in forwards}.eighth-note-lesson-visual--exit .eighth-note-lesson-visual__spark{animation:none;opacity:0}.eighth-note-lesson-visual__svg{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.45))}.eighth-note-lesson-visual--sparkle .eighth-note-lesson-visual__svg{animation:eighth-note-glow 1.4s ease-in-out infinite}.eighth-note-lesson-visual__spark{position:absolute;width:10px;height:10px;background:radial-gradient(circle,#fffef0 0%,#ffe566 45%,transparent 70%);border-radius:50%;opacity:0;animation:sparkle-pop 1.1s ease-out infinite}.eighth-note-lesson-visual__spark--1{top:8%;left:18%;animation-delay:0s}.eighth-note-lesson-visual__spark--2{top:2%;right:12%;animation-delay:.15s}.eighth-note-lesson-visual__spark--3{top:38%;right:-6%;animation-delay:.3s}.eighth-note-lesson-visual__spark--4{bottom:28%;right:4%;animation-delay:.45s}.eighth-note-lesson-visual__spark--5{bottom:10%;left:8%;animation-delay:.2s}.eighth-note-lesson-visual__spark--6{top:32%;left:-4%;animation-delay:.35s}@keyframes eighth-note-enter{0%{opacity:0;transform:scale(.82) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes eighth-note-glow{0%,to{filter:drop-shadow(0 8px 24px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(255,230,120,.35))}50%{filter:drop-shadow(0 8px 24px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(255,240,160,.95))}}@keyframes sparkle-pop{0%{opacity:0;transform:scale(.2) rotate(0)}35%{opacity:1;transform:scale(1.2) rotate(45deg)}to{opacity:0;transform:scale(.4) rotate(90deg)}}@keyframes eighth-note-cartoon-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}.cartoon-atom-visual{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:12}.cartoon-atom-visual--fade-out{animation:atom-cluster-fade-out .45s ease-in forwards}.cartoon-atom-visual__cluster{position:relative;width:min(58vw,400px);height:min(58vw,400px);display:flex;align-items:center;justify-content:center}.cartoon-atom-visual__cluster--active{width:min(82vw,680px);height:min(82vw,680px)}.cartoon-atom-visual__atom{width:min(36vw,280px);transform-origin:center center}.cartoon-atom-visual__atom--enter{animation:atom-cartoon-enter .75s cubic-bezier(.34,1.56,.64,1) both}.cartoon-atom-visual__atom--center-cluster{position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%);transition:transform .55s ease-in-out}.cartoon-atom-visual__cluster--active .cartoon-atom-visual__atom--center-cluster{transform:translate(-50%,-50%) scale(.333)}.cartoon-atom-visual__nerd{position:absolute;width:min(9vw,72px);transform-origin:center center}.cartoon-atom-visual__nerd-pop{filter:drop-shadow(0 4px 10px rgba(20,60,120,.35));animation:atom-nerd-pop .4s cubic-bezier(.34,1.45,.64,1) both;animation-delay:inherit}.cartoon-atom-visual__svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 10px 26px rgba(30,80,140,.4))}.cartoon-atom-visual__orbit{fill:none;stroke:#6eb8ff;stroke-width:3.2;stroke-linecap:round;opacity:.92}@keyframes atom-cartoon-enter{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes atom-nerd-pop{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes atom-cluster-fade-out{0%{opacity:1}to{opacity:0}}.sheet-music-lesson-visual{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:12;padding:36px 48px;box-sizing:border-box}.sheet-music-lesson-visual__page{width:min(560px,calc(100% - 24px));flex-shrink:0;animation:sheet-music-fade-in 1s ease-out both;filter:drop-shadow(0 14px 32px rgba(0,0,0,.45)) drop-shadow(0 2px 6px rgba(0,0,0,.2))}.sheet-music-lesson-visual__image{display:block;width:100%;height:auto;max-height:min(68vh,420px);object-fit:contain;border-radius:4px}@keyframes sheet-music-fade-in{0%{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.welcome-lesson-visual{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:14;padding:32px;box-sizing:border-box}.welcome-lesson-visual__stage{position:relative;display:flex;align-items:center;justify-content:center;width:min(96vw,900px);height:min(78vh,520px)}.welcome-lesson-visual__word{margin:0;display:flex;align-items:baseline;justify-content:center;gap:.02em;font-family:Fredoka,Comic Sans MS,Chalkboard SE,sans-serif;font-weight:700;font-size:clamp(3.2rem,12vw,6.5rem);line-height:1;letter-spacing:.02em;-webkit-user-select:none;user-select:none;position:relative;z-index:1}.welcome-lesson-visual__letter{position:relative;display:inline-block;color:#ffe566;text-shadow:0 0 2px #fff8c8,0 1px 0 #fff4a8,0 2px 0 #ffd24a,0 3px 0 #f0a820,0 4px 0 #d88818,0 6px 0 rgba(120,55,10,.45),0 10px 22px rgba(0,0,0,.45),0 0 28px rgba(255,210,80,.85),0 0 48px rgba(255,180,40,.45);animation:welcome-letter-pop .55s cubic-bezier(.34,1.45,.64,1) both,welcome-letter-glow 1.8s ease-in-out infinite}.welcome-lesson-visual__letter:before{content:attr(data-letter);position:absolute;left:0;top:0;color:transparent;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.95) 48%,transparent 62%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:welcome-shine-sweep 2.2s linear infinite;pointer-events:none}.welcome-lesson-visual__note{position:absolute;z-index:2;line-height:1;text-shadow:0 2px 0 rgba(80,40,10,.35),0 0 12px rgba(255,220,120,.7),0 8px 16px rgba(0,0,0,.35);opacity:0;--note-rot: 0deg;transform:translate(-50%,-50%) rotate(var(--note-rot));animation-name:welcome-note-cycle;animation-timing-function:cubic-bezier(.34,1.35,.64,1);animation-iteration-count:infinite}.welcome-lesson-visual__note--settled{animation:welcome-note-settle .45s cubic-bezier(.34,1.55,.64,1) both,welcome-note-pulse 2.4s ease-in-out infinite}@keyframes welcome-letter-pop{0%{opacity:0;transform:translateY(28px) scale(.35) rotate(-8deg)}70%{opacity:1;transform:translateY(-6px) scale(1.12) rotate(2deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}@keyframes welcome-letter-glow{0%,to{filter:brightness(1)}50%{filter:brightness(1.18)}}@keyframes welcome-shine-sweep{0%{background-position:160% 0}to{background-position:-60% 0}}@keyframes welcome-note-cycle{0%,8%{opacity:0;transform:translate(-50%,-50%) rotate(var(--note-rot)) scale(.12)}16%{opacity:1;transform:translate(-50%,-50%) rotate(var(--note-rot)) scale(1.22)}24%{opacity:1;transform:translate(-50%,-50%) rotate(var(--note-rot)) scale(1)}38%{opacity:1;transform:translate(-50%,-50%) rotate(calc(var(--note-rot) + 6deg)) scale(1.04)}48%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--note-rot) + 18deg)) scale(.15)}55%,68%{opacity:0;transform:translate(-50%,-50%) rotate(var(--note-rot)) scale(.12)}76%{opacity:1;transform:translate(-50%,-50%) rotate(calc(var(--note-rot) - 8deg)) scale(1.18)}84%{opacity:1;transform:translate(-50%,-50%) rotate(var(--note-rot)) scale(1)}94%,to{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--note-rot) + 14deg)) scale(.12)}}@keyframes welcome-note-settle{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--note-rot)) scale(.2)}70%{opacity:1;transform:translate(-50%,-50%) rotate(var(--note-rot)) scale(1.12)}to{opacity:1;transform:translate(-50%,-50%) rotate(var(--note-rot)) scale(1)}}@keyframes welcome-note-pulse{0%,to{opacity:1;transform:translate(-50%,-50%) rotate(var(--note-rot)) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) rotate(var(--note-rot)) scale(1.08)}}.half-steps-lesson-visual{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:14;overflow:hidden}.half-steps-lesson-visual__hop-scene{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:center center}.half-steps-lesson-visual__hop-scene--exit{animation:half-steps-scene-exit var(--exit-ms, .7s) ease-in forwards}.half-steps-lesson-visual__note{position:absolute;display:block;transform:translate(-50%,-50%) rotate(var(--rot, 0deg)) scale(.4);opacity:0;filter:drop-shadow(0 4px 12px rgba(0,0,0,.45));animation:half-steps-note-rise .7s ease-out both;animation-delay:var(--delay, 0s)}.half-steps-lesson-visual__svg{display:block;width:100%;height:auto}.half-steps-lesson-visual__man{position:absolute;z-index:3;width:clamp(42px,6.5vw,64px);transform:translate(-50%,-92%);transition:left var(--hop-ms, 1.1s) cubic-bezier(.45,.05,.55,.95),top var(--hop-ms, 1.1s) cubic-bezier(.45,.05,.55,.95);filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));animation:half-steps-man-appear .45s ease-out both}.half-steps-lesson-visual__man-body{transform-origin:center bottom}.half-steps-lesson-visual__man--hopping .half-steps-lesson-visual__man-body{animation:half-steps-man-hop var(--hop-ms, 1.1s) ease-in-out both}.half-steps-lesson-visual__man-svg{display:block;width:100%;height:auto}.half-steps-lesson-visual__label{position:absolute;top:8%;left:50%;z-index:4;margin:0;transform:translate(-50%);color:#fff;font-family:Fredoka,Comic Sans MS,Chalkboard SE,sans-serif;font-weight:700;font-size:clamp(1.8rem,5.5vw,3.2rem);letter-spacing:.04em;text-shadow:0 2px 12px rgba(0,0,0,.55);animation:half-steps-label-pop .55s ease-out both;-webkit-user-select:none;user-select:none}.half-steps-lesson-visual__pair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);--pair-note-size: clamp(3.25rem, 11vw, 6rem);--pair-gap: clamp(2.5rem, 10vw, 5.5rem);--pair-arrow-slot-height: calc(var(--pair-note-size) * 1.05);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:700;animation:half-steps-pair-pop .55s ease-out both;transition:top var(--pair-lift-ms, .8s) ease-in-out}.half-steps-lesson-visual__pair--lower{top:58%}.half-steps-lesson-visual__pair--lifted{top:40%}.half-steps-lesson-visual__pair--exit{animation:half-steps-pair-cartoon-exit var(--pair-exit-ms, .75s) ease-in forwards}.half-steps-lesson-visual__pair-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;column-gap:var(--pair-gap);align-items:end;justify-items:center}.half-steps-lesson-visual__pair-annotation{grid-column:1 / 3;grid-row:1;display:flex;flex-direction:column;align-items:center;width:100%;padding-bottom:.35rem}.half-steps-lesson-visual__pair-h-slot{display:flex;align-items:flex-end;justify-content:center;min-height:calc(var(--pair-note-size) * .6 + .15rem);margin-bottom:.15rem}.half-steps-lesson-visual__pair-arrow-slot{display:flex;align-items:flex-end;justify-content:center;width:100%;min-height:var(--pair-arrow-slot-height)}.half-steps-lesson-visual__pair-note{font-family:inherit;font-size:var(--pair-note-size);font-weight:700;font-style:normal;color:#fff;line-height:1;letter-spacing:.02em;-webkit-user-select:none;user-select:none;text-shadow:0 2px 12px rgba(0,0,0,.45)}.half-steps-lesson-visual__pair-note--a{grid-column:1;grid-row:2}.half-steps-lesson-visual__pair-note--asharp{grid-column:2;grid-row:2}.half-steps-lesson-visual__pair-arrow{display:block;width:100%;max-width:calc(var(--pair-note-size) * 2.4);height:auto;overflow:visible}.half-steps-lesson-visual__pair-arrow-path{stroke-dasharray:1;stroke-dashoffset:1;animation:half-steps-arrow-bloom var(--arrow-ms, 1s) ease-out forwards}.half-steps-lesson-visual__pair-arrow-head{opacity:0;transform-origin:0 0;animation:half-steps-arrow-head-reveal .18s ease-out forwards;animation-delay:calc(var(--arrow-ms, 1s) * .92)}.half-steps-lesson-visual__pair-h{display:inline-block;font-family:inherit;font-size:calc(var(--pair-note-size) * .6);font-weight:700;color:#fff;line-height:1;letter-spacing:.08em;white-space:nowrap;-webkit-user-select:none;user-select:none;text-shadow:0 2px 12px rgba(0,0,0,.45);opacity:0}.half-steps-lesson-visual__pair-h--visible{animation:half-steps-h-fade .28s ease-out forwards}.half-steps-lesson-visual__finale{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:center center}.half-steps-lesson-visual__finale--exit{animation:half-steps-finale-cartoon-exit var(--finale-exit-ms, .8s) ease-in forwards}.half-steps-lesson-visual__formula{position:absolute;left:50%;top:82%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:clamp(.35rem,1.8vw,.85rem);font-family:Fredoka,Comic Sans MS,Chalkboard SE,sans-serif;font-weight:700;font-size:clamp(2.4rem,8vw,4.5rem);color:#ffe566;line-height:1;letter-spacing:.04em;text-shadow:0 0 2px #fff8c8,0 0 14px rgba(255,210,80,.95),0 0 28px rgba(255,180,40,.75),0 0 48px rgba(255,160,20,.45),0 2px 12px rgba(0,0,0,.4);-webkit-user-select:none;user-select:none;z-index:5}.half-steps-lesson-visual__formula-token{display:inline-block;min-width:.85em;text-align:center;transform-origin:center bottom;opacity:0}.half-steps-lesson-visual__formula-token--visible{animation:half-steps-formula-token-pop .85s ease-out forwards}@keyframes half-steps-note-rise{0%{opacity:0;transform:translate(-50%,calc(-50% + 16px)) rotate(var(--rot, 0deg)) scale(.85)}to{opacity:1;transform:translate(-50%,-50%) rotate(var(--rot, 0deg)) scale(1)}}@keyframes half-steps-man-appear{0%{opacity:0;transform:translate(-50%,-92%) scale(.6)}to{opacity:1;transform:translate(-50%,-92%) scale(1)}}@keyframes half-steps-man-hop{0%{transform:translateY(0) scale(1)}18%{transform:translateY(4px) scale(1.08,.88)}48%{transform:translateY(-46px) scale(.94,1.08)}82%{transform:translateY(3px) scale(1.06,.9)}to{transform:translateY(0) scale(1)}}@keyframes half-steps-label-pop{0%{opacity:0;transform:translate(-50%) translateY(-8px) scale(.96)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}@keyframes half-steps-scene-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes half-steps-pair-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes half-steps-pair-cartoon-exit{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(0)}}@keyframes half-steps-finale-cartoon-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes half-steps-arrow-bloom{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes half-steps-arrow-head-reveal{0%{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}@keyframes half-steps-h-fade{0%{opacity:0}to{opacity:1}}@keyframes half-steps-formula-token-pop{0%{opacity:0;transform:translateY(10px) scale(.92);filter:drop-shadow(0 0 0 rgba(255,210,80,0))}to{opacity:1;transform:translateY(0) scale(1);filter:drop-shadow(0 0 12px rgba(255,210,80,.65))}}.app{width:100vw;height:100vh;display:flex;flex-direction:column;overflow:hidden}.app-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 20px;background:#1a1a1a;border-bottom:1px solid #333;z-index:10}.app-header__primary{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;flex:1}.app-header__playback{display:flex;align-items:center;gap:10px}.app-header h1{font-size:24px;font-weight:600;color:#fff;margin:0}.btn{padding:8px 16px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.btn-secondary{background:#2a2a2a;color:#fff;border:1px solid #444}.btn-secondary:hover{background:#3a3a3a;border-color:#555}.btn-secondary:active{transform:scale(.98)}.app-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.app-content-main{flex:1;display:flex;overflow:hidden;position:relative}.content-toggle{margin-bottom:4px}.content-toggle.active{border-color:#6d7fff;background:#2f355f}.camera-coords-panel{position:absolute;left:10px;top:10px;width:170px;padding:10px 12px;border:1px solid #3a3a44;border-radius:8px;background:#141418db;color:#e9e9ef;z-index:16;pointer-events:none}.camera-coords-panel__title{font-size:12px;font-weight:600;color:#a9acc2;margin-bottom:6px}.camera-coords-panel__row{font-size:13px;line-height:1.35;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace}.lessons-edge-toggle{position:absolute;right:8px;top:8px;z-index:16;display:inline-flex;align-items:center;gap:4px;width:auto;min-height:0;padding:6px 10px;font-size:12px;letter-spacing:.04em;background:#1a1d28;border:1px solid #303038;color:#d8dbff;border-radius:6px;cursor:pointer}.lessons-edge-toggle:hover{background:#232633}.content-panel,.lessons-panel{position:absolute;right:0;top:0;bottom:0;width:288px;max-width:44vw;display:flex;flex-direction:column;background:#141417;border-left:1px solid #303038;box-shadow:-8px 0 22px #00000059;z-index:15;transform:translate(100%);transition:transform .25s ease;pointer-events:none}.content-panel--open,.lessons-panel--open{transform:translate(0);pointer-events:auto}.content-panel__header,.lessons-panel__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 10px;border-bottom:1px solid #303038;flex-shrink:0}.content-panel__title,.lessons-panel__title{margin:0;font-size:15px;font-weight:600;color:#e9e9ef;letter-spacing:.02em}.content-panel__close,.lessons-panel__close{display:inline-flex;align-items:center;min-height:0;padding:6px 10px;font-size:12px;letter-spacing:.04em;background:#1a1d28;border:1px solid #303038;color:#d8dbff;border-radius:6px;cursor:pointer}.content-panel__close:hover,.lessons-panel__close:hover{background:#232633}.content-panel__body,.lessons-panel__body{display:flex;flex-direction:column;gap:10px;padding:16px;overflow-y:auto;flex:1;min-height:0}.lessons-panel__footer{margin-top:auto;padding-top:16px;border-top:1px solid #303038}.lessons-panel__visualizer-link,.lessons-panel__nav-link{display:block;width:100%;box-sizing:border-box;text-align:center;text-decoration:none}.tutorial-lesson{width:100%;text-align:left;white-space:normal;line-height:1.2;min-height:54px;padding-top:10px;padding-bottom:10px}.tutorial-lesson.active{border-color:#6d7fff;background:#2f355f}.tutorial-lesson--parent{font-weight:700;border-color:#5c6078;background:#232633}.tutorial-lesson--sub{width:82%;margin-left:auto;margin-right:0;min-height:46px;font-size:13px;padding-top:8px;padding-bottom:8px}.tutorial-lesson--wire{background:transparent;border:1px dashed #6d7fff;color:#d8dbff}.tutorial-lesson--subscale{width:78%}.tutorial-lesson--subtime{width:72%;font-size:12px;line-height:1.25}.tutorial-lesson--subexotic{width:70%;font-size:12px}.tutorial-lesson--cta{margin-top:2px}.scene-container{flex:1;min-width:0;position:relative;transition:transform .25s ease}.visualization-page{min-height:100vh;display:flex;flex-direction:column;background:#0a0a0a;color:#e9e9ef}.visualization-page__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid #303038;background:#141417}.visualization-page__title{margin:0;font-size:1.15rem;font-weight:600;letter-spacing:.02em}.visualization-page__back{color:#d8dbff;text-decoration:none;font-size:.9rem;padding:6px 10px;border:1px solid #303038;border-radius:6px;background:#1a1d28}.visualization-page__back:hover{background:#232633}.visualization-page__main{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}.visualization-page__placeholder{margin:0;color:#9a9aab;font-size:1rem}.glossary-page{height:100vh;display:flex;flex-direction:column;background:#0a0a0a;color:#e9e9ef;overflow:hidden}.glossary-page__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid #303038;background:#141417;flex-shrink:0}.glossary-page__title{margin:0;font-size:1.15rem;font-weight:600;letter-spacing:.02em}.glossary-page__back{color:#d8dbff;text-decoration:none;font-size:.9rem;padding:6px 10px;border:1px solid #303038;border-radius:6px;background:#1a1d28}.glossary-page__back:hover{background:#232633}.glossary-page__main{flex:1;min-height:0;padding:20px;overflow:hidden;display:flex}.glossary-page__table-wrap{flex:1;min-height:0;width:100%;overflow:auto;border:1px solid #303038;border-radius:8px;background:#141417}.glossary-page__table{width:100%;border-collapse:collapse;table-layout:fixed}.glossary-page__table th,.glossary-page__table td{padding:14px 16px;text-align:center;vertical-align:middle;border-bottom:1px solid #303038;border-right:1px solid #303038;height:4.5rem;min-height:4.5rem;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.glossary-page__table th:last-child,.glossary-page__table td:last-child{border-right:none}.glossary-page__table thead th{position:sticky;top:0;z-index:1;background:#1a1d28;color:#d8dbff;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;height:3.25rem;min-height:3.25rem}.glossary-page__table tbody tr:last-child td{border-bottom:none}.glossary-page__table tbody tr:hover td{background:#1a1d28}.glossary-page__music-symbol{display:inline-block;font-size:1.65em;font-weight:600;line-height:1;vertical-align:-.08em}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0a0a0a;color:#fff;overflow:hidden}#root{width:100vw;height:100vh}