.visual-lesson{margin:24px 0 34px}.visual-intro{margin:28px 0 18px}.reading .visual-intro h2{margin:0 0 9px;font:600 27px Outfit}.reading .visual-intro p{margin:0;color:#6a7463;font-size:14px;line-height:1.6}.note-visual-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}.note-visual-card{display:flex;align-items:center;flex-direction:column;gap:10px;border:2px solid transparent;border-radius:24px;background:#e5ebdb;padding:20px 12px;font:inherit;min-width:0;color:var(--green)}.note-visual-card:nth-child(2){background:#eee4d8}.note-visual-card:nth-child(3){background:#e7e1f1}.note-visual-card:nth-child(4){background:#f7edcb}.note-visual-card:hover{border-color:#9cab8c}.note-visual-card strong{font:600 17px Outfit;color:var(--ink)}.note-visual-card small{font-size:11px}.lesson-glyph{width:76px;height:86px;max-width:100%;display:block;color:var(--green);flex-shrink:0}.note-visual-card>.lesson-glyph{width:100px;height:110px}.note-beats{border-radius:20px;background:#ffffff95;padding:6px 12px;font-size:13px;font-weight:700}.lesson-pulses{display:grid;grid-template-columns:repeat(var(--beats),1fr);gap:8px;width:100%;padding:10px 0}.lesson-pulses span{border:2px solid #cad4bd;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;justify-self:center;color:#7d8c70;font-size:13px;transition:background .08s}.lesson-pulses .visual-now{background:#f4cc63;color:#36482c;border-color:#d5b75c}.note-anatomy{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:white;border-radius:20px;padding:20px}.anatomy-picture{position:relative;padding-right:90px;min-height:110px}.anatomy-picture .lesson-glyph{height:110px;width:105px}.stem-label,.head-label{position:absolute;left:65px;font-size:12px;color:#65725a;white-space:nowrap}.stem-label{top:25px}.head-label{top:80px}.visual-demo:not(.note-visual-card){border:1px solid #e0e6d7;border-radius:20px;padding:18px;margin:16px 0;background:white;min-width:0}.visual-demo-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.reading .visual-demo h3{font:600 18px Outfit;margin:0}.visual-demo .secondary{font-size:11px;padding:9px 14px;white-space:nowrap}.lesson-rail{display:grid;grid-template-columns:repeat(var(--ticks),minmax(0,1fr));gap:3px;width:100%;padding:7px 0;min-height:105px}.visual-segment{background:#e6ecdd;border-radius:12px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 -5px #cad6be}.visual-segment:nth-child(even){background:#e7e0f0;box-shadow:inset 0 -5px #d4c9e6}.visual-segment.is-rest{background:repeating-linear-gradient(135deg,#f8f7f0,#f8f7f0 7px,#eeeee5 7px,#eeeee5 9px);box-shadow:inset 0 0 0 1px #d3d9ca}.visual-segment small{font-size:10px;position:absolute;bottom:5px;color:#78836d}.visual-segment.visual-now{background:#f4cc63;box-shadow:inset 0 -5px #ddbc60}.visual-segment.is-rest.visual-now{box-shadow:inset 0 0 0 3px #d6ba64}.lesson-counts{display:grid;grid-template-columns:repeat(var(--parts),1fr);text-align:center;color:#5e7250;font-size:12px}.visual-demo-status{min-height:18px;font-size:11px;color:#7a866c;margin:12px 0 0;display:block}.visual-playing{outline:2px solid #b3c49f;outline-offset:2px}.visual-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.visual-pair .visual-demo-heading{display:block}.visual-pair .visual-demo-heading button{margin-top:10px}.two-cards{grid-template-columns:1fr 1fr;max-width:550px}.meter-example{display:flex;align-items:center;gap:14px}.meter-example .visual-demo{flex:1}.big-meter{display:inline-flex;flex-direction:column;font:700 38px/.95 Outfit;color:var(--green);align-items:center;padding:10px;flex-shrink:0}.big-meter span+span{margin-top:6px}.visual-builder{background:#f0ece0;border-radius:22px;padding:24px}.visual-builder [data-add]{display:inline-flex;align-items:center;gap:5px;padding:5px 15px}.visual-builder [data-add] .lesson-glyph{width:35px;height:48px}.visual-builder .row{gap:8px}.visual-builder select{font:inherit;padding:8px;border-radius:10px}.built-notes{display:grid;grid-template-columns:repeat(var(--beats),minmax(0,1fr));gap:5px;margin-top:20px}.built-notes>div{background:#e3ead7;border-radius:12px;display:grid;place-items:center}.empty-beat{border:2px dashed #d3d4c3;border-radius:12px;display:grid;place-items:center;min-height:90px;font-size:30px;color:#a5af97}.visual-equation,.visual-quiz-cue{display:flex;align-items:center;justify-content:center;gap:20px;padding:20px;background:#f0eee4;border-radius:20px;margin:20px 0;color:var(--green)}.visual-equation b{font-size:28px}.visual-equation .lesson-glyph{width:95px;height:100px}.reading .visual-caption{font-size:13px;line-height:1.7;color:#6b775f}.visual-triplet-bracket{border-top:2px solid #af9cc1;text-align:center;color:#8d73a2;margin:5px 15% 0;font:600 16px Outfit}.notes-concealed .lesson-glyph{visibility:hidden}.notes-concealed:after{content:'?';position:absolute;align-self:center;justify-self:center;font-size:32px;color:#9aaa8c}.notes-concealed{position:relative}.lesson-explanation{padding:18px 22px;background:#eeece3;border-radius:18px;margin:24px 0}.lesson-explanation summary{cursor:pointer;font-weight:600;font-size:13px}.visual-quiz-cue{justify-content:flex-start}.visual-quiz-cue .lesson-glyph{width:60px;height:70px}.visual-lesson .note-visual-card .visual-demo-status{font-size:10px}.visual-lesson button:disabled{opacity:.4;cursor:default}@media(max-width:750px){.note-visual-grid{grid-template-columns:1fr 1fr}.visual-pair{grid-template-columns:1fr}.note-anatomy{grid-template-columns:1fr}.visual-demo-heading{flex-wrap:wrap}.visual-equation{gap:8px;padding:12px}.visual-equation .lesson-glyph{width:60px;height:85px}.lesson-counts{font-size:11px}.visual-builder{padding:18px}.reading .visual-intro h2{font-size:24px}.visual-segment .lesson-glyph{height:80px}.visual-pair .visual-demo-heading{display:flex}.note-anatomy .anatomy-picture{justify-self:center;min-width:240px}.visual-demo:not(.note-visual-card){padding:14px 10px}.lesson-rail{gap:2px}}@media(prefers-reduced-motion:reduce){.lesson-pulses span{transition:none}}
.lesson-pulses .partial-pulse{background:conic-gradient(#cbd9ba 0 var(--filled),#fff var(--filled) 100%)}.lesson-pulses .partial-pulse.visual-now{background:conic-gradient(#f4cc63 0 var(--filled),#fff var(--filled) 100%)}
.note-visual-card .lesson-pulses{gap:4px}.note-visual-card .lesson-pulses span{width:min(28px,100%);height:auto;aspect-ratio:1;font-size:11px}@media(max-width:440px){.note-visual-card strong{font-size:15px}.note-visual-card{padding:18px 9px}}