/*!
 * Kid Kit for the composers — the v2 look of the kid-composer template
 * (Make a Sweet Beet, Bell Composer: the same page structure). The flat world,
 * the song's name as the brand title, chunky Play / Stop / Undo, beat boxes
 * dashed in the bells' colours. Use with kid-kit.css and body.is-v2.
 */
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 .app { position: relative; z-index: 1; background: transparent; border: 0; box-shadow: none; overflow: visible; }

/* the rhythm's name is the title: the brand face, white with a navy drop */
body.is-v2 .song-name-input {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400;
  font-size: clamp(30px, 5vw, 48px); color: #fff; border-bottom: 0;
  text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.32);
}
body.is-v2 .progress, body.is-v2 .kid-compose-cue { color: #1b233e; }
body.is-v2 .kid-compose-cue { background: rgba(255, 255, 255, 0.85); border-radius: 999px; padding: 8px 18px; display: table; margin-left: auto; margin-right: auto; }

/* Play / Stop / Undo: the kit's chunky picture buttons */
body.is-v2 .transport-primary .transport-btn, body.is-v2 .transport-primary .tool-icon-btn {
  border-radius: 26px !important; clip-path: none !important;
  min-width: 132px; min-height: 76px;
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 24px;
}
body.is-v2 .play-circle { background: #009999 !important; box-shadow: 0 7px 0 #007474 !important; }
body.is-v2 .stop-octagon { background: #E72829 !important; box-shadow: 0 7px 0 #b51f20 !important; }
body.is-v2 .transport-primary .tool-icon-btn { background: #fff !important; color: #1b233e !important; box-shadow: 0 7px 0 rgba(27, 35, 62, 0.14) !important; border: 0 !important; }
body.is-v2 .kid-control-label { text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.22); }

/* the beat boxes: white boxes on the sky, dashed in the bells' colours */
body.is-v2 .slot { background: rgba(255, 255, 255, 0.86); border-color: color-mix(in srgb, var(--v2c, #009999) 55%, #fff); box-shadow: 0 6px 0 rgba(27, 35, 62, 0.08); }
body.is-v2 .slot:nth-child(8n+1) { --v2c: #E72829; } body.is-v2 .slot:nth-child(8n+2) { --v2c: #F39422; }
body.is-v2 .slot:nth-child(8n+3) { --v2c: #F1E606; } body.is-v2 .slot:nth-child(8n+4) { --v2c: #6AB845; }
body.is-v2 .slot:nth-child(8n+5) { --v2c: #009999; } body.is-v2 .slot:nth-child(8n+6) { --v2c: #7B569E; }
body.is-v2 .slot:nth-child(8n+7) { --v2c: #EA6BA3; } body.is-v2 .slot:nth-child(8n+8) { --v2c: #E72829; }
body.is-v2 .slot-num { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: var(--v2c, #1b233e); }
@media (max-width: 520px) {
  body.is-v2 .transport-primary .transport-btn, body.is-v2 .transport-primary .tool-icon-btn { min-width: 0; width: 31%; min-height: 64px; font-size: 19px; border-radius: 22px !important; }
  body.is-v2 .transport-primary { display: flex; gap: 8px; justify-content: center; }
}