/*!
 * Metronome v2 — the cover's flat world and the brand (with kid-kit.css).
 */
html, body.is-v2 { background: #8fd6f4; }
.v2-world { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.v2-world .kk-scene { position: absolute; inset: 0; }
body.is-v2 #game { position: relative; z-index: 1; }
body.is-v2 .mt-screen { max-width: 620px; padding-top: 64px; }
body.is-v2 .mt-eyebrow { display: none; }
body.is-v2 .mt-title.kk-title { font-weight: 400; letter-spacing: 0; }
body.is-v2 .mt-title .kk-word { font-size: clamp(48px, 11vw, 84px); }

/* the stage: Beet big on the open sky, no box */
body.is-v2 .mt-stage { background: none; border: 0; padding: 4px 0 0; }
body.is-v2 .mt-beet { width: clamp(150px, 34vw, 220px); }
body.is-v2 .mt-beet-shadow { background: rgba(27, 35, 62, 0.14); }

/* the beats wear the bells' colours: beat 1 is Do */
body.is-v2 .mt-dot { width: 18px; height: 18px; background: rgba(255, 255, 255, 0.7); box-shadow: 0 2px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .mt-dot:nth-child(8n+1) { --on: #E72829; } body.is-v2 .mt-dot:nth-child(8n+2) { --on: #F39422; }
body.is-v2 .mt-dot:nth-child(8n+3) { --on: #F1E606; } body.is-v2 .mt-dot:nth-child(8n+4) { --on: #6AB845; }
body.is-v2 .mt-dot:nth-child(8n+5) { --on: #009999; } body.is-v2 .mt-dot:nth-child(8n+6) { --on: #7B569E; }
body.is-v2 .mt-dot:nth-child(8n+7) { --on: #EA6BA3; } body.is-v2 .mt-dot:nth-child(8n+8) { --on: #E72829; }
body.is-v2 .mt-dot.is-on, body.is-v2 .mt-dot.is-hit, body.is-v2 .mt-dot.is-now { background: var(--on); transform: scale(1.35); }
body.is-v2 .mt-count { font-family: "Grobold", "Nunito", system-ui, sans-serif; color: #fff; text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.3); }

/* the tempo: big friendly numbers, round chunky steppers */
body.is-v2 .mt-readout b { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #fff; text-shadow: 0 0.06em 0 rgba(27, 35, 62, 0.3); }
body.is-v2 .mt-readout small, body.is-v2 .mt-mark { color: #1b233e; }
body.is-v2 .mt-step { width: 58px; height: 58px; border: 0; background: #fff; color: #1b233e; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.15); }

/* Start and TAP: the kit's chunky picture-button style */
body.is-v2 .mt-play, body.is-v2 .mt-tap { min-height: 88px; border-radius: 28px; }
body.is-v2 .mt-play { background: #009999; box-shadow: 0 7px 0 #007474; font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 26px; }
body.is-v2 .mt-play.is-running { background: #E72829; box-shadow: 0 7px 0 #b51f20; }
body.is-v2 .mt-tap { background: #7B569E; border: 0; box-shadow: 0 7px 0 #5c3f79; color: #fff; }
body.is-v2 .mt-tap b { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #fff; font-size: 26px; letter-spacing: 0; }
body.is-v2 .mt-tap small { color: rgba(255, 255, 255, 0.85); }
body.is-v2 .mt-meter, body.is-v2 .mt-mute { border: 0; background: #fff; border-radius: 999px; box-shadow: 0 3px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .mt-meter.is-on { background: #1b233e; color: #fff; }
body.is-v2 .mt-note { color: #1b233e; opacity: 0.75; }