/* One small instruction, one picture, one action. */
.time-signature-activity{min-width:0;max-width:760px;margin:auto;color:#f7f3ff}
.classroom-tutorial .time-signature-activity .signature-main-prompt{margin:0 0 20px;font:750 clamp(24px,3vw,30px)/1.35 system-ui;color:#fff2ce;max-width:32ch}
.time-signature-activity button{min-height:54px;font:700 23px/1.25 system-ui;padding:12px 18px;touch-action:manipulation;border-radius:12px}
.signature-visual{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;min-width:0;container-type:inline-size;padding:16px;margin:0 0 20px;background:#152c3b;border:2px solid #729aab;border-radius:14px;min-height:140px}
.signature-symbol{width:84px;height:102px;flex:none}
.signature-note-example{display:flex;align-items:center;justify-content:center;gap:18px;color:#f4edce;font:700 24px/1.3 system-ui}
.signature-note-example svg{width:66px;height:84px;flex:none}
.signature-pulse-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:1;gap:6px;min-width:0}
.signature-pulse-row[data-signature-meter="6/8"],.signature-pulse-row[data-signature-meter="2/2"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.signature-pulse-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;min-width:0}
.signature-pulse-row[data-signature-meter="6/8"] .signature-pulse-group{grid-template-columns:repeat(3,minmax(0,1fr))}
.signature-pulse{display:grid;place-items:center;min-width:0;min-height:64px;padding:8px 4px;border-radius:9px;border:2px solid #778097;background:#34334b;color:#efebff;font:750 22px/1.2 system-ui;white-space:nowrap}
.signature-pulse.is-big{background:#235d56;border-color:#a5f2cf;color:#efffeb}
.signature-pulse.is-pulse{background:#c0f6b6;border-color:#fff0a5;color:#17382f}
.signature-group-start{margin-left:12px}
.signature-look-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.time-signature-activity [data-signature-try],.time-signature-activity [data-tutorial-next],.time-signature-activity [data-signature-check]{background:#2a665b;border:2px solid #a2edcb;color:#f4fff6;font-size:24px}
.signature-count-live:empty,.signature-feedback:empty{display:none}
.signature-count-live{text-align:center;font:800 28px/1.25 system-ui;color:#fff1a2;margin:14px 0 0}
.signature-answers{display:grid;gap:12px}
.signature-answers button{text-align:center;background:#35465f;border:2px solid #829fb7;color:#fff}
.signature-help{margin-top:16px;text-align:right}
.signature-help button{background:transparent;border:1px solid #a899bc;color:#e4d8f4}
.signature-hint,.signature-feedback{font:650 23px/1.4 system-ui;padding:14px;margin:12px 0 0;border-radius:10px;background:#294851;color:#e8fff1}
.signature-feedback[data-correct=false]{background:#54444b;color:#fff0dc}
.signature-bar{display:flex;justify-content:center;align-items:center;gap:8px;min-height:145px;padding:14px;margin:0 0 18px;border:2px solid #8aa6aa;border-radius:14px;background:#162d3c}
.signature-bar-note{display:grid;place-items:center;flex:1;min-width:0;height:100px;border:2px dashed #93a9b8;border-radius:10px;background:#24394b}
.signature-bar-note svg{width:44px;height:66px;max-width:100%}
.signature-bar-note.is-empty svg{opacity:.35}
.signature-bar-note.is-filled{background:#30685b;border-style:solid;border-color:#bdffd5}
.signature-primary-note button{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;background:#2b675a;border:2px solid #b7f1ce;color:#effff3}
.signature-primary-note svg{width:40px;height:54px}
.signature-build-tools{display:flex;justify-content:space-between;gap:12px;margin-top:12px}
.signature-build-tools>*{flex:1}
.time-signature-activity [data-tutorial-next]{width:100%;margin-top:4px}
@media(max-width:500px){.signature-visual{padding:12px;gap:10px;flex-wrap:wrap}.signature-symbol{width:60px;height:76px}.signature-pulse-row{flex-basis:100%}.signature-pulse{font-size:22px;min-height:58px}.signature-note-example{gap:12px;font-size:23px}.signature-group-start{margin-left:7px}.signature-bar{gap:5px;padding:8px}.signature-bar-note{height:88px}.signature-bar-note svg{width:35px;height:58px}.signature-look-actions{gap:8px}.time-signature-activity button{padding:12px 10px;font-size:22px}}
@media(orientation:landscape) and (max-height:550px){.classroom-tutorial .lesson-content.time-signature-activity{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:12px 20px}.classroom-tutorial .time-signature-activity .signature-main-prompt{grid-column:1/-1;margin:0;font-size:24px;max-width:none}.signature-visual,.signature-bar{margin:0;min-height:126px;padding:10px}.signature-symbol{width:55px;height:72px}.signature-visual{flex-wrap:wrap;gap:4px}.signature-pulse-row{flex-basis:100%}.signature-pulse{min-height:44px}.signature-note-example svg{width:42px;height:58px}.signature-note-example{font-size:22px}.signature-answers{gap:8px}.signature-answers button{min-height:50px;padding:9px}.signature-look-actions{align-self:center;grid-template-columns:1fr}.signature-help{grid-column:2;margin:0;text-align:right}.signature-hint,.signature-feedback{grid-column:1/-1;margin:0}.signature-count-live{grid-column:1/-1;margin:0}.time-signature-activity [data-tutorial-next]{align-self:center;margin:0}.signature-primary-note{align-self:start}.signature-build-tools{grid-column:2;margin:0}.signature-bar-note{height:88px}}
@media(prefers-reduced-motion:reduce){.signature-pulse{transition:none}}
/* Keep each three-part beat together when six boxes would squeeze the count.
   Stacking whole groups preserves ONE-la-li / TWO-la-li in reading order. */
@container(max-width:400px){.signature-pulse-row[data-signature-meter="6/8"]{grid-template-columns:minmax(0,1fr);gap:10px}}
@container(max-width:280px){.signature-pulse-row[data-signature-meter="4/4"]{grid-template-columns:repeat(2,minmax(0,1fr))}.signature-pulse-row[data-signature-meter="2/2"]{grid-template-columns:minmax(0,1fr);gap:10px}}
@media(orientation:landscape) and (max-height:550px){.signature-visual[data-signature-meter="6/8"]{flex-wrap:nowrap;gap:10px}.signature-pulse-row[data-signature-meter="6/8"]{flex-basis:0}.signature-pulse{padding:6px 4px;line-height:1.4}}