/*!
 * Bells & Beats v2 — the cover's flat world and the brand over the same grid composer.
 */
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 .shell { position: relative; z-index: 1; background: transparent; }
body.is-v2 .hero-bar { background: transparent; }
body.is-v2 .composition-name {
  flex-basis: 420px; border-bottom: 0;
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400;
  font-size: clamp(28px, 4vw, 44px); color: #fff; text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.32);
}
/* the transport: chunky round buttons */
body.is-v2 .transport-icon-btn { width: 56px; min-width: 56px; height: 56px; border-radius: 50%; border: 0; background: #fff; color: #1b233e; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.15); }
body.is-v2 .transport-icon-btn svg { width: 24px; height: 24px; }
body.is-v2 .play-icon-btn { background: #009999; box-shadow: 0 5px 0 #007474; }
body.is-v2 .stop-icon-btn { background: #E72829; box-shadow: 0 5px 0 #b51f20; }
/* the grid: a white board on the sky */
body.is-v2 .workspace { background: rgba(255, 255, 255, 0.9); border-radius: 28px; box-shadow: 0 8px 0 rgba(27, 35, 62, 0.08); padding: 10px; }
body.is-v2 .grid-cell { border-radius: 14px; }
body.is-v2 .row-label { border-radius: 16px; }
/* "more this way": shown only while the grid overflows to the right (phone portrait) */
body.is-v2 .timeline-shell { position: relative; }
body.is-v2 .timeline-shell::after { content: ""; position: absolute; top: 0; right: 0; bottom: 12px; width: 56px; pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96)); opacity: 0; transition: opacity 0.2s; border-radius: 0 18px 18px 0; }
body.is-v2 .timeline-shell.bb-more::after { opacity: 1; }
body.is-v2 .bb-more-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); z-index: 3; display: none;
  width: 48px; height: 48px; border-radius: 50%; border: 0; background: #1b233e; color: #fff; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.25); cursor: pointer; }
body.is-v2 .bb-more-btn svg { width: 24px; height: 24px; display: block; margin: auto; }
body.is-v2 .timeline-shell.bb-more .bb-more-btn { display: block; }
@media (prefers-reduced-motion: reduce) { body.is-v2 .timeline-shell::after { transition: none; } }