.rhythm-suite{gap:1.3rem;min-width:0;display:grid}.rhythm-suite .suite-stage{gap:1.1rem;min-width:0;display:grid}.rhythm-suite .suite-stage>h2{margin:.8rem 0 0}.rhythm-suite .suite-theory-pairs{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.7rem;display:grid}.rhythm-suite .suite-theory-pairs>div{border:1px solid var(--control-edge);background:var(--paper);border-radius:.6rem;grid-template-columns:2rem 1fr;align-items:center;gap:.35rem;padding:.7rem;display:grid}.rhythm-suite .suite-note-equation,.rhythm-suite .suite-meter-example{color:var(--accent);flex-wrap:wrap;align-items:center;gap:1rem;padding:.8rem;font-size:1.35rem;display:flex}.rhythm-suite .suite-note-equation .suite-duration-glyph{width:2rem;height:3rem}.rhythm-suite .suite-meter-example strong{text-align:center;line-height:1.15}.rhythm-suite .suite-meter-controls>label{gap:.3rem;display:grid}.rhythm-suite .suite-meter-controls input[type=number]{width:5rem;min-height:2.75rem;font:inherit;border:1px solid var(--control-edge);color:var(--text);background:var(--paper);border-radius:.5rem;padding:.5rem}.rhythm-suite .suite-grouping{border:1px solid var(--control-edge);background:var(--paper);border-radius:.5rem;padding:.7rem;font-size:1.1em;display:block}.rhythm-suite .suite-duration-palette span{flex-direction:column;gap:.3rem}.rhythm-suite .suite-duration-palette small{max-width:9rem;font-size:.75em}.rhythm-suite .suite-rhythm-notation{width:100%;min-height:4rem;color:var(--accent);background:var(--paper);border:1px solid var(--control-edge);border-radius:.5rem;display:block}.rhythm-suite .suite-tap-timeline{border:1px solid var(--control-edge);background:var(--paper);border-radius:.6rem;width:100%;display:block}.rhythm-suite .suite-tap-timeline text{fill:var(--text);font-size:14px}.rhythm-suite .suite-tap-timeline path{fill:none;stroke:var(--control-edge);stroke-width:2px}.rhythm-suite .suite-tap-timeline [data-tap-target]{fill:var(--accent)}.rhythm-suite .suite-tap-timeline [data-tap-answer]{fill:var(--rust)}.rhythm-suite .suite-tap-timeline .suite-tap-progress{stroke:var(--rust);stroke-width:2px;stroke-dasharray:4 4}.rhythm-suite .suite-verdict{border:2px solid var(--control-edge);min-width:3rem;min-height:3rem;color:var(--accent);border-radius:50%;place-items:center;font-size:1.8rem;display:grid}.rhythm-suite .suite-motif-staff{background:var(--paper);border:1px solid var(--control-edge);touch-action:pan-y;width:100%;height:230px;color:var(--accent);border-radius:.7rem;display:block;overflow:hidden}.rhythm-suite .suite-motif-staff text{fill:var(--text);font:14px system-ui,sans-serif}.rhythm-suite .suite-staff-lines,.rhythm-suite .suite-staff-clef{fill:none;stroke:currentColor;stroke-width:2px}.rhythm-suite .suite-staff-note{fill:currentColor}.rhythm-suite .suite-staff-active{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1px}.rhythm-suite .suite-staff-column{fill:none;stroke:var(--edge);stroke-dasharray:3 3}.rhythm-suite .suite-motif-staff [data-motif-midi]{cursor:pointer}.rhythm-suite .suite-motif-staff:focus-visible{outline:3px solid var(--rust);outline-offset:2px}.rhythm-suite .ui-panel{min-width:0;padding:clamp(1rem,3vw,1.8rem)}.rhythm-suite section{scroll-margin-top:1rem}.rhythm-suite h1{margin:0 0 .7rem}.rhythm-suite h2{margin-top:0}.rhythm-suite p{max-width:none}.rhythm-suite .suite-controls{flex-wrap:wrap;align-items:center;gap:.55rem;margin-block:.8rem;display:flex}.rhythm-suite button,.rhythm-suite select{min-height:2.75rem;font:inherit}.rhythm-suite button{border:1px solid var(--control-edge);background:var(--panel);color:var(--text);cursor:pointer;border-radius:.6rem;justify-content:center;align-items:center;gap:.45rem;padding:.6rem .9rem;display:inline-flex}.rhythm-suite button:disabled{opacity:.5;cursor:default}.rhythm-suite button:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}.rhythm-suite .suite-primary{background:var(--accent);border-color:var(--accent);color:var(--panel);font-weight:700}.rhythm-suite .suite-primary:hover:not(:disabled){color:var(--accent)}.rhythm-suite button svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:1.5rem;height:1.5rem;overflow:visible}.rhythm-suite .suite-secondary{color:var(--muted)}.rhythm-suite .suite-duration-glyph,.rhythm-suite button .suite-duration-glyph{flex:none;width:1.9rem;height:2rem}.rhythm-suite button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 -.2rem var(--accent);background:var(--accent-soft);color:var(--accent)}.rhythm-suite .suite-action{color:var(--accent);font-weight:650}.rhythm-suite .suite-help{color:var(--muted);font-size:.9em}.rhythm-suite .suite-status{min-height:1.6em;margin-block:.5rem 0}.rhythm-suite .suite-tempo{border:1px solid var(--edge);background:var(--paper);border-radius:.7rem;gap:.5rem;max-width:26rem;padding:.8rem;display:grid}.rhythm-suite input[type=range]{width:100%;min-height:2.75rem;accent-color:var(--accent)}.rhythm-suite .suite-timebar{border:2px solid var(--control-edge);background:var(--paper);border-radius:.6rem;align-items:stretch;gap:.2rem;min-height:5.2rem;margin-block:.8rem;padding:.3rem;display:flex}.rhythm-suite .suite-timecell{flex:var(--units,2) 1 0;text-align:center;border:1px solid var(--control-edge);background:var(--accent-soft);min-width:0;color:var(--accent);border-radius:.4rem;flex-direction:column;justify-content:center;align-items:center;gap:.2rem;padding:.3rem;display:flex}.rhythm-suite .suite-timecell small{overflow-wrap:anywhere;font-size:.72rem}.rhythm-suite .suite-timecell .suite-note-symbol{font-family:Georgia,Times New Roman,serif;font-size:1.6rem;line-height:1}.rhythm-suite .suite-timecell[data-rest=true]{background:var(--paper);color:var(--muted);border-style:dashed}.rhythm-suite .suite-space{flex:var(--units,2) 1 0;background:repeating-linear-gradient(135deg, transparent, transparent 7px, var(--edge) 7px, var(--edge) 8px);border-radius:.3rem;min-width:0}.rhythm-suite button.suite-choice-pattern{text-align:left;gap:.6rem;width:100%;margin-block:.5rem;display:flex}.rhythm-suite .suite-choice-pattern .suite-timebar{flex:1;margin:0}.rhythm-suite .suite-pad{background:var(--accent-soft);border-width:2px;border-radius:1.3rem;min-width:min(100%,12rem);min-height:7rem;font-size:1.5rem;font-weight:750}.rhythm-suite .suite-pad:active{transform:scale(.98)}.rhythm-suite .suite-pulses{flex-wrap:wrap;gap:.4rem;margin-block:1rem;display:flex}.rhythm-suite .suite-pulses span{border:1px solid var(--control-edge);border-radius:50%;place-items:center;width:2.3rem;height:2.3rem;display:grid}.rhythm-suite [data-playing=true]{outline:2px solid var(--rust);outline-offset:2px}.rhythm-suite .suite-slots{grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-block:1rem;display:grid}.rhythm-suite .suite-slots button,.rhythm-suite .suite-answer-slot{text-align:center;overflow-wrap:anywhere;border:1px solid var(--control-edge);border-radius:.6rem;flex-direction:column;justify-content:center;align-items:center;gap:.2rem;min-height:5rem;padding:.4rem;display:flex}.rhythm-suite .suite-slots small{font-size:.75em}.rhythm-suite .suite-mode-controls{border:0;flex-wrap:wrap;gap:.4rem;margin-block:.8rem;padding:0;display:flex}.rhythm-suite .suite-mode-controls legend{margin-bottom:.4rem}.rhythm-suite .suite-mode-controls label{position:relative}.rhythm-suite .suite-mode-controls input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.rhythm-suite .suite-mode-controls span{border:1px solid var(--control-edge);border-radius:.5rem;justify-content:center;align-items:center;min-width:2.75rem;min-height:2.75rem;padding:.5rem .8rem;display:flex}.rhythm-suite .suite-mode-controls input:checked+span{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);box-shadow:inset 0 -.18rem var(--accent)}.rhythm-suite .suite-mode-controls input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}.rhythm-suite .suite-motif-example{color:var(--accent);flex-wrap:wrap;align-items:center;gap:.7rem;padding-block:.5rem;font-size:1.5rem;display:flex}.rhythm-suite [hidden]{display:none!important}[data-rhythm-suite] .rhythm-notation-row{grid-template-columns:minmax(0,1fr) 8.5rem;align-items:center;gap:.75rem;min-width:0;display:grid}[data-rhythm-suite] .rhythm-notation-row>div{min-width:0}[data-rhythm-suite] .rhythm-notation-row>.suite-controls{grid-template-columns:minmax(0,1fr);align-content:center;gap:.35rem;margin:0;display:grid}[data-rhythm-suite] .rhythm-notation-row>.suite-controls button{min-width:0;padding:.4rem;font-size:.85rem}[data-rhythm-suite] .rhythm-builder-grid{grid-template-columns:13.5rem minmax(0,1fr);gap:1rem;min-width:0;display:grid}[data-rhythm-suite] .rhythm-builder-tools,[data-rhythm-suite] .rhythm-builder-work{min-width:0}[data-rhythm-suite] .rhythm-builder-tools .suite-duration-palette{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;display:grid}[data-rhythm-suite] .rhythm-builder-tools .suite-duration-palette button{flex-direction:column;min-width:0;padding:.4rem .15rem}[data-rhythm-suite] .rhythm-builder-tools .suite-duration-palette span{overflow-wrap:break-word;font-size:.7rem;line-height:1.25}@media (min-width:900px){[data-rhythm-suite] #bar,[data-rhythm-suite] #echo-rhythm,[data-rhythm-suite] #missing-duration,[data-rhythm-suite] #choose-rhythm{padding:1rem}[data-rhythm-suite] #bar p,[data-rhythm-suite] #echo-rhythm p,[data-rhythm-suite] #missing-duration p,[data-rhythm-suite] #choose-rhythm p{margin-block:.4rem}[data-rhythm-suite] #bar .suite-controls{margin-block:.5rem}}@media (max-width:640px){[data-rhythm-suite] .rhythm-builder-grid,[data-rhythm-suite] .rhythm-notation-row{grid-template-columns:minmax(0,1fr)}[data-rhythm-suite] .rhythm-notation-row>.suite-controls{flex-wrap:wrap;display:flex}}@media (max-width:520px){.rhythm-suite .suite-timecell small{font-size:.65rem}}