/*!
 * Tuner 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 .tuner-app { position: relative; z-index: 1; }
body.is-v2 .tuner-header h1.kk-title { font-weight: 400; letter-spacing: 0; margin: 4px 0 8px; }
body.is-v2 .tuner-header .kk-word { font-size: clamp(56px, 12vw, 96px); }

/* the start card: no box, one BIG round listen button */
body.is-v2 .start-gate { background: none; border: 0; box-shadow: none; }
body.is-v2 .start-btn {
  flex-direction: column; gap: 6px;
  width: clamp(170px, 26vw, 240px); aspect-ratio: 1; border-radius: 50%;
  background: #009999; box-shadow: 0 9px 0 #007474, 0 16px 24px rgba(27, 35, 62, 0.18);
  animation: kk-float 3s ease-in-out infinite;
}
body.is-v2 .start-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; }
body.is-v2 .start-btn-icon { width: 76px; height: 76px; }
body.is-v2 .start-btn-icon svg { width: 100%; height: 100%; }
body.is-v2 .start-btn-label { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 22px; text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.28); }
body.is-v2 .kid-tool-cue { color: #1b233e; background: rgba(255, 255, 255, 0.85); border-radius: 999px; padding: 8px 18px; }

/* the dial: a chunky white disc on the sky, the note in the brand face */
body.is-v2 .dial { width: min(86vw, 420px); filter: drop-shadow(0 10px 0 rgba(27, 35, 62, 0.12)); }
body.is-v2 .note-name { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; letter-spacing: 0; text-shadow: 0 0.06em 0 rgba(27, 35, 62, 0.18); }
body.is-v2 .tuner-status { background: rgba(255, 255, 255, 0.9); border-radius: 999px; padding: 8px 20px; }
body.is-v2 .preset-tab, body.is-v2 .target-string { border-radius: 999px; }

/* A beside the dial, cropped by the bottom-left corner */
.v2-hero {
  position: fixed; z-index: 1; left: -2%; bottom: -5%;
  width: clamp(220px, 26vw, 380px); aspect-ratio: 1;
  pointer-events: none; transform-origin: 50% 94%;
  animation: kk-sway-l 4s ease-in-out infinite;
}
.v2-hero > * { width: 100%; height: 100%; display: block; }
@media (max-width: 900px) { .v2-hero { display: none; } }