@layer theme,base,theory-ui,chord-practice-ui,guitar-ui;@layer page{:root[data-page=rhythm-lab] .metronome-card,:root[data-page=rhythm-lab] .duration-card,:root[data-page=rhythm-lab] .timesig-card,:root[data-page=rhythm-lab] .subdivision-card,:root[data-page=rhythm-lab] .tempo-card,:root[data-page=rhythm-lab] .clap-card,:root[data-page=rhythm-lab] .practice-card,:root[data-page=rhythm-lab] .recap-card{border-radius:var(--radius-lg);margin-bottom:24px;padding:24px;line-height:1.7}:root[data-page=rhythm-lab] .metronome-card p,:root[data-page=rhythm-lab] .duration-card p,:root[data-page=rhythm-lab] .timesig-card p,:root[data-page=rhythm-lab] .subdivision-card p,:root[data-page=rhythm-lab] .tempo-card p{margin:10px 0 0}:root[data-page=rhythm-lab] .beat-dots{justify-content:center;gap:14px;margin:18px 0;display:flex}:root[data-page=rhythm-lab] .beat-dot{background:#ffffff14;border:2px solid #ffffff29;border-radius:50%;width:22px;height:22px;transition:background 90ms,transform 90ms,border-color 90ms}:root[data-page=rhythm-lab] .beat-dot.is-downbeat{width:28px;height:28px}:root[data-page=rhythm-lab] .beat-dot.is-active{background:var(--accent);border-color:var(--accent-strong);transform:scale(1.15)}:root[data-page=rhythm-lab] .beat-dots.phase-count .beat-dot.is-active{background:#6facff;border-color:#4a8ef0}:root[data-page=rhythm-lab] .beat-dots.phase-go .beat-dot.is-active{background:var(--accent);border-color:var(--accent-strong)}:root[data-page=rhythm-lab] .metronome-panel{border-radius:var(--radius-md);text-align:center;background:#ffffff08;border:1px solid #ffffff14;margin-top:18px;padding:20px}:root[data-page=rhythm-lab] .metronome-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;display:flex}:root[data-page=rhythm-lab] .metronome-toggle{cursor:pointer;font:inherit;border:none}:root[data-page=rhythm-lab] .metronome-toggle.is-on{background:linear-gradient(180deg, var(--danger-strong) 0%, var(--danger) 100%);box-shadow:0 14px 30px #e945603d}:root[data-page=rhythm-lab] .bpm-control{flex-direction:column;gap:6px;min-width:220px;display:flex}:root[data-page=rhythm-lab] .bpm-control label{color:var(--muted);font-size:.9rem}:root[data-page=rhythm-lab] .bpm-control input[type=range]{width:100%;accent-color:var(--accent)}:root[data-page=rhythm-lab] .metronome-tip{color:var(--muted);margin-top:16px;font-size:.92rem}:root[data-page=rhythm-lab] .vex-stage,:root[data-page=rhythm-lab] .vex-stage-mini{background:linear-gradient(180deg, #fffdf9 0%, var(--staff) 100%);border-radius:16px;justify-content:center;display:flex;overflow-x:auto}:root[data-page=rhythm-lab] .vex-stage{margin-top:14px;padding:8px 4px}:root[data-page=rhythm-lab] .vex-stage-mini{width:90px;height:80px}:root[data-page=rhythm-lab] .duration-list{flex-direction:column;gap:16px;margin-top:18px;display:flex}:root[data-page=rhythm-lab] .duration-row{border-radius:var(--radius-md);background:#ffffff08;border:1px solid #ffffff14;padding:18px 20px}:root[data-page=rhythm-lab] .duration-row-head{justify-content:space-between;align-items:baseline;gap:10px;display:flex}:root[data-page=rhythm-lab] .duration-name{font-size:1.05rem;font-weight:800}:root[data-page=rhythm-lab] .duration-beats{color:var(--muted);font-size:.9rem;font-weight:600}:root[data-page=rhythm-lab] .duration-bar-track{margin-top:12px}:root[data-page=rhythm-lab] .duration-bar-wrap{gap:3px;height:18px;display:flex}:root[data-page=rhythm-lab] .duration-bar-segment{background:linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);border-radius:6px;flex:1 1 0}:root[data-page=rhythm-lab] .duration-visuals{flex-wrap:wrap;gap:16px;margin-top:14px;display:flex}:root[data-page=rhythm-lab] .duration-visual{flex-direction:column;align-items:center;gap:6px;display:flex}:root[data-page=rhythm-lab] .duration-visual-label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.72rem}:root[data-page=rhythm-lab] .duration-footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;display:flex}:root[data-page=rhythm-lab] .duration-syllable{font-size:1.02rem;font-weight:700}:root[data-page=rhythm-lab] .timesig-example{margin-top:20px}:root[data-page=rhythm-lab] .timesig-example:first-of-type{margin-top:18px}:root[data-page=rhythm-lab] .timesig-label{margin-bottom:4px;font-weight:600}:root[data-page=rhythm-lab] .subdivision-counts{text-align:center;color:var(--muted);letter-spacing:.04em;margin-top:12px;font-weight:700}:root[data-page=rhythm-lab] .tempo-chips{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:16px;display:grid}:root[data-page=rhythm-lab] .tempo-chip{background:var(--surface-soft);color:var(--text);border-radius:var(--radius-md);cursor:pointer;text-align:left;border:1px solid #ffffff1a;flex-direction:column;gap:4px;padding:12px 14px;transition:background .14s,border-color .14s,transform .12s;display:flex}:root[data-page=rhythm-lab] .tempo-chip:hover,:root[data-page=rhythm-lab] .tempo-chip:focus-visible{background:#ffffff14;outline:none;transform:translateY(-1px)}:root[data-page=rhythm-lab] .tempo-chip.is-active{background:#4ecca329;border-color:#4ecca380}:root[data-page=rhythm-lab] .tempo-chip-term{font-weight:800}:root[data-page=rhythm-lab] .tempo-chip-range{color:var(--muted);font-size:.78rem}:root[data-page=rhythm-lab] .clap-pattern-label{color:var(--muted);font-size:.85rem;font-weight:600}:root[data-page=rhythm-lab] .clap-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;margin-top:16px;display:flex}:root[data-page=rhythm-lab] .clap-controls .beat-dots{margin:0}:root[data-page=rhythm-lab] .clap-tap-btn{color:#0b1220;border-radius:var(--radius-sm);cursor:pointer;background:linear-gradient(#6facff 0%,#4a8ef0 100%);border:none;padding:16px 28px;font-size:1rem;font-weight:800;transition:transform .1s,box-shadow .1s,opacity .14s;box-shadow:0 14px 30px #4a8ef03d}:root[data-page=rhythm-lab] .clap-tap-btn:disabled{opacity:.5;cursor:not-allowed}:root[data-page=rhythm-lab] .clap-tap-btn.is-tapped{transform:scale(.92)}:root[data-page=rhythm-lab] .clap-results{justify-content:center;gap:10px;margin-top:14px;display:flex}:root[data-page=rhythm-lab] .clap-result-icon{border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-weight:800;display:flex}:root[data-page=rhythm-lab] .clap-result-icon.is-hit{color:#9df1d5;background:#4ecca32e}:root[data-page=rhythm-lab] .clap-result-icon.is-miss{color:#ffb7c2;background:#e945602e}:root[data-page=rhythm-lab] .practice-score strong{color:var(--accent)}:root[data-page=rhythm-lab] .practice-return-banner{border-radius:var(--radius-md);color:var(--text);background:#6facff1a;border:1px solid #6facff4d;margin:0 0 18px;padding:12px 16px}:root[data-page=rhythm-lab] .quiz-question{margin:12px 0 14px;font-size:1.05rem;font-weight:700}:root[data-page=rhythm-lab] .quiz-answer-buttons{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}:root[data-page=rhythm-lab] .quiz-choice-btn{text-align:center;height:auto;min-height:0;padding:14px 16px;font-size:.92rem;font-weight:600}:root[data-page=rhythm-lab] .recap-tempo-wrap{margin-top:20px}@media (width<=760px){:root[data-page=rhythm-lab] .duration-footer{text-align:center;flex-direction:column;align-items:stretch}:root[data-page=rhythm-lab] .metronome-controls{flex-direction:column}:root[data-page=rhythm-lab] .bpm-control{width:100%}}}