--pc-* vars so dark mode flips for free (R-WEB-CLONE-DARK-MODE-SUPPORT). The .mm-* namespace is disjoint per ADR-033. */ .mm-younger .ff-btn{min-height:54px;font-size:1.08rem}.mm-big{min-height:54px;font-size:1.08rem;padding:.7rem 1.4rem}.mm-hero{text-align:center}.mm-hero-mascot{width:128px;height:128px;border-radius:50%;-o-object-fit:cover;object-fit:cover;background:var(--ff-warm);border:3px solid var(--ff-forge);box-shadow:0 4px #0000001f;margin:0 auto .4rem}.mm-hud{margin-top:.5rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;justify-content:center}.mm-section-h{text-align:center;margin:.4rem 0 .8rem}.mm-activity-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-bottom:1.2rem}@media (min-width: 640px){.mm-activity-grid{grid-template-columns:repeat(3,1fr)}}.mm-activity-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;padding:1.1rem .8rem;background:var(--ff-paper);text-decoration:none;color:inherit;border:3px solid var(--ff-forge);border-radius:20px;box-shadow:0 4px #0000001f;transition:transform .12s ease,box-shadow .12s ease;min-height:128px;justify-content:center}.mm-activity-card:hover,.mm-activity-card:focus-visible{transform:translateY(-3px);box-shadow:0 7px #00000024;outline:none}.mm-activity-emoji{font-size:2.6rem;line-height:1}.mm-activity-card strong{font-size:1.15rem;color:var(--ff-forge-text)}.mm-activity-blurb{font-size:.9rem;color:var(--ff-anvil);opacity:.75}.mm-activity-hero{text-align:center}.mm-stage{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.2rem 1rem}.mm-bars{display:flex;align-items:flex-end;justify-content:center;gap:.6rem;min-height:220px}.mm-bar{width:52px;min-width:52px;border:3px solid rgba(0,0,0,.18);border-radius:14px;background:var(--mm-bar-color, #ccc);cursor:pointer;padding:0;box-shadow:0 4px #00000024;transition:transform .15s ease,filter .15s ease}.mm-bar:disabled{cursor:default;opacity:.9}.mm-bar--lit{transform:scaleY(1.06) translateY(-2px);filter:brightness(1.12)}.mm-bar:focus-visible{outline:3px solid var(--ff-focus);outline-offset:3px}@media (min-width: 520px){.mm-bar{width:60px;min-width:60px}}.mm-counter,.mm-status{text-align:center}.mm-counter{font-size:1.05rem}.mm-beatgrid{display:flex;gap:.6rem;justify-content:center;margin-bottom:.4rem}.mm-beat{width:34px;height:34px;border-radius:50%;display:inline-block;transition:transform .18s ease,background .18s ease}.mm-beat--tap{background:color-mix(in srgb,var(--ff-forge) 60%,transparent)}.mm-beat--rest{background:color-mix(in srgb,var(--ff-anvil) 22%,transparent)}.mm-beat--lit{background:var(--ff-slate);transform:scale(1.35)}.mm-echo-area{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin-top:.6rem}.mm-tappad{width:180px;height:180px;border-radius:50%;border:4px solid var(--ff-forge);background:color-mix(in srgb,var(--ff-forge) 78%,white);color:#fff;font-size:64px;cursor:pointer;box-shadow:0 6px #00000029;transition:transform .1s ease}.mm-tappad--hit{transform:scale(.94)}.mm-tappad:focus-visible{outline:3px solid var(--ff-focus);outline-offset:4px}.mm-tapcount,.mm-find-prompt{text-align:center}.mm-instruments{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;width:100%}@media (min-width: 520px){.mm-instruments{grid-template-columns:repeat(3,1fr)}}@media (min-width: 760px){.mm-instruments{grid-template-columns:repeat(5,1fr)}}.mm-instrument{display:flex;flex-direction:column;align-items:center;gap:.25rem;cursor:pointer;min-height:104px;padding:.7rem .5rem;border:3px solid var(--ff-forge);border-radius:18px;background:var(--ff-paper);color:var(--ff-anvil);box-shadow:0 4px #0000001f;transition:transform .12s ease,background .12s ease}.mm-instrument--lit{background:color-mix(in srgb,var(--ff-forge) 20%,var(--ff-paper));transform:translateY(-2px)}.mm-instrument:focus-visible{outline:3px solid var(--ff-focus);outline-offset:3px}.mm-instrument-glyph{font-size:2.4rem;line-height:1}.mm-instrument-name{font-size:.95rem;font-weight:700;color:var(--ff-forge-text)}.mm-instrument-family{font-size:.78rem;color:var(--ff-anvil);opacity:.7}.mm-song-grid{display:flex;flex-direction:column;gap:.4rem}.mm-song-row{display:flex;gap:.4rem;justify-content:center}.mm-song-cell{width:40px;height:40px;border-radius:10px;cursor:pointer;padding:0;border:2px solid color-mix(in srgb,var(--ff-anvil) 26%,transparent);background:color-mix(in srgb,var(--ff-anvil) 8%,var(--ff-paper));transition:transform .1s ease,background .1s ease,box-shadow .1s ease}@media (min-width: 520px){.mm-song-cell{width:46px;height:46px}}.mm-song-cell--on{background:var(--mm-bar-color, var(--ff-forge));border-color:#0003;box-shadow:0 3px #00000024}.mm-song-cell--head{outline:3px solid var(--ff-slate);outline-offset:1px}.mm-song-cell:focus-visible{outline:3px solid var(--ff-focus);outline-offset:2px}.mm-song-row:last-child{margin-top:.5rem}.mm-song-cell--drumrow{border-radius:50%}.mm-results{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.8rem}.mm-results-mascot{font-size:3rem;line-height:1}.mm-results-line{max-width:40ch}.mm-results-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem}@media (prefers-reduced-motion: reduce){.mm-bar,.mm-beat,.mm-tappad,.mm-instrument,.mm-song-cell,.mm-activity-card{transition:none}.mm-bar--lit,.mm-beat--lit,.mm-tappad--hit{transform:none}}.mm-dyn-prompt{text-align:center;font-weight:800}.mm-dyn-pulse-wrap{display:flex;align-items:center;justify-content:center;min-height:120px}.mm-dyn-pulse{display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;font-size:2rem;background:var(--ff-warm);border:3px solid var(--ff-outline)}.mm-dyn-pulse--loud{animation:mm-dyn-loud .7s ease}.mm-dyn-pulse--soft{animation:mm-dyn-soft .7s ease}@keyframes mm-dyn-loud{0%{transform:scale(.9)}40%{transform:scale(1.7)}to{transform:scale(1.3)}}@keyframes mm-dyn-soft{0%{transform:scale(.9)}40%{transform:scale(1.05)}to{transform:scale(.8)}}.mm-dyn-play{display:flex;justify-content:center;margin:.4rem 0}.mm-dyn-answers{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:.4rem}.mm-dyn-answer{display:flex;flex-direction:column;align-items:center;gap:.2rem;min-width:104px;min-height:104px;padding:.6rem .8rem;background:var(--ff-paper);border:3px solid var(--ff-outline);border-radius:18px;box-shadow:0 4px #0000001f;cursor:pointer;color:var(--ff-anvil);transition:transform .1s ease}.mm-dyn-answer:hover:not(:disabled){transform:translateY(-2px)}.mm-dyn-answer-emoji{font-size:2.8rem;line-height:1}.mm-dyn-answer-label{font-size:1rem;font-weight:800;color:var(--ff-forge-text, var(--ff-anvil))}.mm-dyn-answer--right{border-color:var(--pc-correct);background:var(--pc-correct-bg, var(--ff-paper))}.mm-dyn-answer--nudge{animation:mm-dyn-nudge .32s ease}@keyframes mm-dyn-nudge{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@media (max-width: 460px){.mm-dyn-answer{min-width:92px;min-height:92px}.mm-dyn-answer-emoji{font-size:2.3rem}}@media (prefers-reduced-motion: reduce){.mm-dyn-pulse--loud,.mm-dyn-pulse--soft,.mm-dyn-answer--nudge{animation:none}.mm-dyn-answer{transition:none}.mm-dyn-pulse--loud{transform:scale(1.4)}.mm-dyn-pulse--soft{transform:scale(.8)}}