.rhythm-lesson{grid-template-rows:34px 64px minmax(0,1fr) 54px 110px;gap:0;max-width:1160px;height:100dvh;min-height:0;padding:64px 30px 10px;display:grid;overflow:hidden}.rhythm-lesson h1{margin:4px 0 0;font-size:23px}.rhythm-lesson .lesson-scene button{color:inherit;background:0 0;border:0;border-radius:7px;min-height:44px;padding:7px 12px}.rhythm-lesson .lesson-scene button:hover:not(:disabled){background:#f6f3ed}.rhythm-lesson .lesson-scene button:focus-visible{outline-offset:2px;outline:2px solid #b9362e}.rhythm-lesson .theory-timeline{margin:0}.rhythm-lesson .theory-timeline button{border-radius:0;min-width:85px;padding:30px 7px 8px}.rhythm-stage{grid-template-rows:64px minmax(0,1fr) 96px 24px 86px;min-height:0;display:grid;position:relative}.rhythm-explanation{text-wrap:pretty;align-self:start;max-width:730px;font-size:17px;line-height:1.5;animation:.2s rhythm-appear;color:#333!important;margin:8px auto 0!important}.rhythm-visual{justify-content:center;align-items:center;min-height:0;display:flex}.rhythm-score,.rhythm-tree{color:#191919;-webkit-user-select:none;user-select:none;width:100%;height:100%;min-height:0;display:block;overflow:visible}.rhythm-score text{font-family:var(--font);fill:#555;font-size:18px}.rhythm-note{color:#191919}.rhythm-note.is-playing{color:#b9362e}.rhythm-note [role=button],.rhythm-tree [role=button]{cursor:pointer}.rhythm-note.is-draggable [role=button]{cursor:grab;touch-action:none}.rhythm-note.is-draggable [role=button]:active{cursor:grabbing}:is(.rhythm-score [role=button]:focus-visible,.rhythm-tree [role=button]:focus-visible){outline:none}:is(.rhythm-score [role=button]:focus-visible rect,.rhythm-tree [role=button]:focus-visible rect){stroke:#b9362e;stroke-width:1px}.rhythm-draw{touch-action:none;cursor:crosshair}.duration-tree-row{animation:.55s ease-out rhythm-appear}.duration-tree-branch{stroke-dasharray:1100;stroke-dashoffset:0;animation:.65s ease-out rhythm-branch}.duration-tree-note{animation:.7s ease-out rhythm-appear}.rhythm-workbench{grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);align-items:center;gap:12px;min-height:0;display:grid}.rhythm-tool-slot{justify-content:flex-end;align-items:center;min-width:0;display:flex}.rhythm-action-slot{justify-content:center;align-items:center;height:96px;display:flex}.rhythm-listen-slot{grid-template-columns:90px 120px;justify-content:start;align-items:center;gap:8px;display:grid}.rhythm-listen-slot>button:first-child{background:#f3f0e9;width:90px}.rhythm-tree-controls{gap:8px;display:flex}.rhythm-tool-slot>button,.rhythm-tree-controls button{border:1px solid #e5e1d9}.rhythm-tool-slot>span{color:#777;font-size:14px}.rhythm-next-pattern{width:120px}.rhythm-pulse{gap:9px;display:flex}.rhythm-pulse i{background:#fff;border:1px solid #b9ad97;border-radius:50%;width:10px;height:10px}.rhythm-pulse .is-on{background:#b9362e;border-color:#b9362e}.rhythm-pulse-caption{text-align:center;align-self:center;color:#777!important;font-size:13px!important}.rhythm-values{gap:2px;display:flex}.rhythm-values button{border-radius:5px;width:64px;min-width:0;padding:2px}.rhythm-values button[aria-pressed=true]{background:#f2eadc}.rhythm-values svg{width:38px;height:55px;margin:auto;display:block}.rhythm-values span{max-width:64px;font-size:10px;line-height:1.2;display:block}.rhythm-lesson #lesson-companion{justify-content:center;align-items:center;min-height:0;padding:2px 0;display:flex}.rhythm-lesson .is-docked .cookie-pet-bubble{max-width:650px;padding:9px 15px;font-size:16px;line-height:1.5}.rhythm-success .cookie-pet-bubble{background:#eff6ed;border-color:#b6c9ae}.rhythm-audio-error{background:#fff;position:absolute;bottom:0;left:0;color:#a12f28!important;font-size:12px!important}.rhythm-navigation{border-bottom:1px solid #e7e3dc;grid-template-columns:1fr 45px 1fr;align-items:center;display:grid}.rhythm-navigation>span{color:#888;text-align:center;font-size:13px}.rhythm-navigation>button:first-child{justify-self:start}.rhythm-navigation>button:last-child,.rhythm-navigation>a{text-align:right;color:#555;background:0 0;justify-self:end;padding:8px 12px;font-size:15px}.rhythm-transcript{scrollbar-width:thin;overscroll-behavior:contain;height:110px;margin:0;padding:40px 18px;list-style:none;position:relative;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000,#000 20% 80%,#0000);mask-image:linear-gradient(#0000,#000 20% 80%,#0000)}.rhythm-transcript li{margin:0}.rhythm-transcript button{text-align:left;color:#888;grid-template-columns:24px 130px 1fr;align-items:baseline;gap:12px;width:100%;min-height:38px;padding:7px 12px;font-size:14px;transition:color .25s,font-size .25s;display:grid}.rhythm-transcript button[aria-current]{color:#242424;font-size:17px}.rhythm-transcript small{color:inherit;font-size:13px}.rhythm-hold{flex-direction:column;align-items:center;width:96px;height:92px;display:flex}.rhythm-cat{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:88px;height:76px;touch-action:none!important;padding:0!important}.rhythm-cat svg{width:86px;height:73px}.cat-paw{transition:transform .12s}.rhythm-cat.is-held .cat-paw{transform:translateY(-5px)}.rhythm-hold-track{background:#eee8de;border-radius:3px;width:90px;height:6px;overflow:hidden}.rhythm-hold-track span{background:#b9362e;height:100%;display:block}.rhythm-success .rhythm-hold-track span{background:#587b4d}@keyframes rhythm-appear{0%{opacity:0}to{opacity:1}}@keyframes rhythm-branch{0%{stroke-dashoffset:1100px}to{stroke-dashoffset:0}}@media (max-height:800px){.rhythm-lesson{grid-template-rows:30px 58px minmax(0,1fr) 48px 88px;padding-top:60px;padding-bottom:6px}.rhythm-stage{grid-template-rows:58px minmax(0,1fr) 82px 20px 74px}.rhythm-explanation{font-size:16px}.rhythm-transcript{height:88px;padding:28px 12px}.rhythm-action-slot{height:82px}.rhythm-hold{height:80px}.rhythm-cat{height:64px}.rhythm-cat svg{height:60px}.rhythm-values svg{height:47px}.rhythm-lesson .is-docked .cookie-pet-bubble{font-size:15px}}@media (max-width:800px){.rhythm-lesson{padding-left:20px;padding-right:20px}.rhythm-workbench{grid-template-columns:minmax(0,1fr) 96px 140px;gap:5px}.rhythm-listen-slot{grid-template-rows:44px 38px;grid-template-columns:1fr;justify-items:center;gap:0}.rhythm-values button{width:53px}.rhythm-values span{font-size:9px}.rhythm-tree-controls{gap:0}.rhythm-tree-controls button{font-size:13px}.rhythm-explanation{font-size:16px}}@media (max-width:550px){.rhythm-lesson{grid-template-rows:30px 58px minmax(0,1fr) 52px 80px;padding-left:12px;padding-right:12px}.rhythm-stage{grid-template-rows:74px minmax(0,1fr) 116px 32px 98px}.rhythm-transcript{height:80px}.rhythm-transcript small{display:none}.rhythm-transcript button{grid-template-columns:20px 1fr}.rhythm-workbench{grid-template-columns:1fr 90px 95px;gap:0}.rhythm-values{flex-wrap:wrap;justify-content:center}.rhythm-values button{width:42px}.rhythm-values svg{height:36px}.rhythm-values span{font-size:8px}.rhythm-tree-controls{flex-direction:column}.rhythm-navigation button,.rhythm-navigation a{font-size:12px!important}.rhythm-navigation{grid-template-columns:1fr 35px 1.3fr}.rhythm-pulse-caption{font-size:11px!important}}@media (prefers-reduced-motion:reduce){.rhythm-lesson *{transition:none!important;animation:none!important}}.lesson-shell.rhythm-lesson{max-width:1040px;height:auto;min-height:100dvh;padding:78px 32px 24px;display:flex;overflow:visible}.lesson-shell.rhythm-lesson .rhythm-visual{width:100%}@media (max-height:760px){.lesson-shell.rhythm-lesson{padding-top:70px}}@media (max-width:700px){.lesson-shell.rhythm-lesson{padding:70px 16px 16px}}.rhythm-lesson .rhythm-pulse{justify-content:center;align-items:center;gap:10px;height:12px;display:flex}.rhythm-lesson .rhythm-pulse-caption{text-align:center;color:#71747e!important;margin:0!important;font-size:13px!important}.rhythm-controls{justify-content:center;align-items:center;gap:12px;min-height:64px;display:flex}.rhythm-lesson .rhythm-controls>button{color:#292a33;background:#f3f0e9;border-radius:12px;min-height:44px;padding:8px 18px;font-size:15px}.rhythm-lesson .rhythm-controls>button:hover:not(:disabled){background:#ebe6db}.rhythm-lesson .rhythm-hold{flex-direction:row;align-items:center;gap:18px;width:auto;height:auto;padding:0}.rhythm-hold-meter{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.rhythm-lesson .rhythm-hold-track{border-radius:4px;width:170px;height:8px}.rhythm-hold-count{color:#45464f;white-space:nowrap;font-size:14px}.rhythm-lesson .rhythm-controls>.rhythm-pad{color:#40553d;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#e7eee3;border-radius:32px;width:132px;height:64px;padding:0;font-size:18px;font-weight:650;transition:transform 60ms}.rhythm-lesson .rhythm-controls>.rhythm-pad:hover:not(:disabled){background:#dce8d7}.rhythm-lesson .rhythm-pad:active{transform:scale(.95)}.note-builder{touch-action:none;cursor:crosshair}.note-builder-note{animation:.3s rhythm-appear}.note-builder-guide{fill:none;stroke:#bd837e;stroke-width:1.2px;stroke-dasharray:1.5 3.5;stroke-linecap:round}.note-builder-stroke{fill:none;stroke:#191919;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round}.note-builder-fill{cursor:pointer}.note-builder-target{fill:#b9362e;fill-opacity:.08;stroke:#b9362e;stroke-width:.8px;stroke-dasharray:2 3;animation:1.6s ease-in-out infinite note-builder-pulse}@keyframes note-builder-pulse{50%{fill-opacity:.2}}@media (prefers-reduced-motion:reduce){.note-builder-target{animation:none}}.lesson-shell.rhythm-lesson .lesson-scene .rhythm-score,.lesson-shell.rhythm-lesson .lesson-scene .rhythm-tree{height:calc(var(--scene-h) - 40px)}.rhythm-lesson .rhythm-controls{height:84px;min-height:0}.lesson-shell.rhythm-lesson .theory-timeline{margin:0 auto}.lesson-shell.rhythm-lesson .theory-timeline button{min-width:0;padding:30px 2px 6px}.note-builder{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.note-builder [role=button]:focus{outline:none}.note-builder-label{font:16px var(--font);fill:#71747e;text-anchor:middle}.note-builder-label.is-new{fill:#46633d;font-weight:600}.note-builder-arrow path{fill:none;stroke:#c9b48f;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.rhythm-lesson .rhythm-hold{justify-content:center}.rhythm-lesson .rhythm-controls>.rhythm-clap{touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#fff6e7;border:1px solid #e8cfaa;border-radius:50%;width:76px;height:76px;padding:0;font-size:36px;line-height:1;transition:transform 60ms,background .12s}.rhythm-lesson .rhythm-controls>.rhythm-clap:hover:not(:disabled){background:#fdeed6}.rhythm-lesson .rhythm-controls>.rhythm-clap:active{transform:scale(.92)}.rhythm-hold-line{--beat:min(58px,calc((100vw - 64px) / 7));width:calc(var(--beat) * (var(--beats) + 3));place-self:center;height:34px;margin:0 auto;position:relative}.rhythm-hold-line__track{left:calc(var(--beat) * 1.5);width:calc(var(--beat) * var(--beats));background:#ebe6db;border-radius:4px;height:8px;display:flex;position:absolute;top:6px}.rhythm-hold-line__beat{color:#8d8a84;border-left:2px solid #fff;flex:1;padding:14px 0 0 4px;font-size:13px;line-height:1}.rhythm-hold-line__beat:first-child{border-left:0}.rhythm-hold-line__fill{left:calc(var(--beat) * 1.5);width:calc(var(--beat) * var(--held,0));background:#b9362e;border-radius:4px;height:8px;position:absolute;top:6px}.rhythm-hold-line__fill.is-right{background:#678956}.rhythm-hold-line__fill.is-off{background:#d08a5c}.rhythm-hold-line__end{left:calc(var(--beat) * (var(--beats) + 1.5));background:#292a33;border-radius:2px;width:3px;height:20px;margin-left:-1px;position:absolute;top:0}.lesson-shell.rhythm-lesson .theory-timeline button{min-height:69px}.lesson-shell.rhythm-lesson .lesson-scene{min-height:calc(var(--scene-h) + 140px)}
