:root {
  --dcp-ink: #20304a;
  --dcp-card: rgba(255, 255, 255, 0.86);
  --dcp-shadow: 0 20px 60px rgba(27, 51, 83, 0.18);
}

.dcp-page,
.dcp-page * {
  box-sizing: border-box;
}

.dcp-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: var(--dcp-ink);
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.95), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, #93dcff 0%, #c9f0ff 45%, #8ed56c 46%, #62b949 100%);
  font-family: Inter, ui-rounded, "Segoe UI", Arial, sans-serif;
  isolation: isolate;
}

.dcp-sky {
  position: absolute;
  inset: 0 0 auto;
  height: 52%;
  pointer-events: none;
}

.dcp-sun {
  position: absolute;
  top: 5%;
  right: 8%;
  width: clamp(80px, 11vw, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffd95a;
  box-shadow: 0 0 0 18px rgba(255, 227, 109, .22), 0 0 70px rgba(255, 209, 67, .72);
  animation: dcp-pulse 4s ease-in-out infinite;
}

.dcp-cloud {
  position: absolute;
  width: 150px;
  height: 46px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  filter: drop-shadow(0 9px 10px rgba(64,122,158,.1));
  animation: dcp-drift 18s linear infinite;
}

.dcp-cloud::before,
.dcp-cloud::after {
  content: "";
  position: absolute;
  bottom: 15px;
  border-radius: 50%;
  background: inherit;
}

.dcp-cloud::before {
  left: 23px;
  width: 58px;
  height: 58px;
}

.dcp-cloud::after {
  right: 21px;
  width: 74px;
  height: 74px;
}

.dcp-cloud-1 { top: 14%; left: -12%; }
.dcp-cloud-2 { top: 28%; left: 35%; animation-delay: -8s; transform: scale(.8); }
.dcp-cloud-3 { top: 8%; left: 70%; animation-delay: -13s; transform: scale(.65); }

.dcp-content {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(42px, 7vw, 86px) 0 44px;
}

.dcp-hero {
  width: min(760px, 100%);
  margin: 0 auto 32px;
  padding: clamp(24px, 4vw, 44px);
  text-align: center;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 34px;
  background: var(--dcp-card);
  box-shadow: var(--dcp-shadow);
  backdrop-filter: blur(12px);
}

.dcp-kicker {
  margin: 0 0 8px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #4c8d43;
}

.dcp-hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 5.6rem);
  line-height: .95;
  letter-spacing: -.055em;
}

.dcp-hero p:not(.dcp-kicker) {
  margin: 18px auto 24px;
  max-width: 620px;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.dcp-music-button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  color: white;
  background: linear-gradient(135deg, #f35f75, #8b5cf6);
  box-shadow: 0 12px 24px rgba(139,92,246,.25);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.dcp-music-button:hover,
.dcp-music-button:focus-visible {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 30px rgba(139,92,246,.32);
}

.dcp-park {
  position: relative;
  min-height: 690px;
  overflow: hidden;
  border: 10px solid rgba(255,255,255,.55);
  border-radius: 46px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15) 0 52%, rgba(255,255,255,0) 52%),
    radial-gradient(ellipse at center, #9be273 0 35%, #65bd4e 73%);
  box-shadow: var(--dcp-shadow);
}

.dcp-stage {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(105px, 1fr));
  gap: 8px 12px;
  align-items: end;
  width: min(990px, 92%);
  margin: 90px auto 0;
}

.dcp-cat {
  position: relative;
  min-width: 0;
  text-align: center;
  cursor: pointer;
  transform-origin: 50% 100%;
  animation: dcp-dance-a 1.05s ease-in-out infinite;
  outline: none;
}

.dcp-cat:nth-child(2n) { animation-name: dcp-dance-b; animation-delay: -.3s; }
.dcp-cat:nth-child(3n) { animation-duration: .88s; }
.dcp-cat:nth-child(4n) { animation-delay: -.6s; }
.dcp-cat:nth-child(5n) { animation-duration: 1.18s; }

.dcp-cat svg {
  display: block;
  width: 100%;
  max-height: 210px;
  overflow: visible;
  filter: drop-shadow(0 14px 8px rgba(34,92,38,.18));
}

.dcp-cat-name {
  display: inline-block;
  margin-top: -6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  font-size: .72rem;
  font-weight: 800;
  opacity: .8;
}

.dcp-cat:hover .dcp-cat-name,
.dcp-cat:focus-visible .dcp-cat-name {
  opacity: 1;
}

.dcp-arm-left { transform-origin: 48px 112px; animation: dcp-wave-left .52s ease-in-out infinite alternate; }
.dcp-arm-right { transform-origin: 112px 112px; animation: dcp-wave-right .52s ease-in-out infinite alternate; }
.dcp-tail { transform-origin: 126px 130px; animation: dcp-tail .65s ease-in-out infinite alternate; }
.dcp-leg-left { transform-origin: 63px 160px; animation: dcp-foot-left .52s ease-in-out infinite alternate; }
.dcp-leg-right { transform-origin: 97px 160px; animation: dcp-foot-right .52s ease-in-out infinite alternate; }

.dcp-cat.is-solo {
  z-index: 8;
  animation: dcp-solo .58s ease-in-out infinite !important;
}

.dcp-cat.is-solo::after {
  content: "★";
  position: absolute;
  top: 0;
  right: 8%;
  font-size: 2rem;
  color: #ffd43b;
  animation: dcp-pop .65s ease-in-out infinite alternate;
}

.dcp-tree {
  position: absolute;
  z-index: 1;
  bottom: 100px;
  width: 170px;
  height: 330px;
}

.dcp-tree-left { left: -20px; }
.dcp-tree-right { right: -20px; transform: scaleX(-1); }

.dcp-trunk {
  position: absolute;
  left: 70px;
  bottom: 0;
  width: 34px;
  height: 170px;
  border-radius: 18px;
  background: #8d5b38;
}

.dcp-leaves,
.dcp-leaves::before,
.dcp-leaves::after {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #3c9e4c;
  content: "";
}

.dcp-leaves {
  left: 15px;
  top: 20px;
  width: 145px;
  height: 145px;
}

.dcp-leaves::before {
  left: -35px;
  top: 65px;
  width: 120px;
  height: 120px;
}

.dcp-leaves::after {
  right: -25px;
  top: 55px;
  width: 125px;
  height: 125px;
}

.dcp-flowers {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 90px;
  display: flex;
  gap: clamp(24px, 7vw, 90px);
  width: 90%;
  transform: translateX(-50%);
  justify-content: center;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

.dcp-path {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -90px;
  width: 76%;
  height: 220px;
  border-radius: 50% 50% 0 0;
  transform: translateX(-50%);
  background: #e8c98f;
  opacity: .9;
}

.dcp-note {
  width: fit-content;
  max-width: 100%;
  margin: 20px auto 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 30px rgba(21,65,42,.12);
  text-align: center;
  font-weight: 700;
}

.dcp-page[data-beat="disco"] .dcp-park { filter: saturate(1.15); }
.dcp-page[data-beat="swing"] .dcp-cat { animation-duration: 1.35s; }
.dcp-page[data-beat="turbo"] .dcp-cat { animation-duration: .55s; }

@keyframes dcp-dance-a {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-18px) rotate(4deg); }
}
@keyframes dcp-dance-b {
  0%,100% { transform: translateY(-6px) rotate(4deg) scaleY(.98); }
  50% { transform: translateY(-22px) rotate(-4deg) scaleY(1.02); }
}
@keyframes dcp-wave-left { from { transform: rotate(16deg); } to { transform: rotate(-28deg); } }
@keyframes dcp-wave-right { from { transform: rotate(-16deg); } to { transform: rotate(28deg); } }
@keyframes dcp-tail { from { transform: rotate(-8deg); } to { transform: rotate(14deg); } }
@keyframes dcp-foot-left { from { transform: rotate(7deg); } to { transform: rotate(-12deg); } }
@keyframes dcp-foot-right { from { transform: rotate(-7deg); } to { transform: rotate(12deg); } }
@keyframes dcp-solo {
  0%,100% { transform: translateY(0) rotate(-8deg) scale(1.02); }
  25% { transform: translateY(-24px) rotate(8deg) scale(1.08); }
  50% { transform: translateY(-6px) rotate(-6deg) scale(.98); }
  75% { transform: translateY(-28px) rotate(10deg) scale(1.1); }
}
@keyframes dcp-pop { from { transform: scale(.8) rotate(-12deg); } to { transform: scale(1.25) rotate(12deg); } }
@keyframes dcp-pulse { 50% { transform: scale(1.06); } }
@keyframes dcp-drift { from { translate: -210px 0; } to { translate: calc(100vw + 260px) 0; } }

@media (max-width: 900px) {
  .dcp-park { min-height: 880px; }
  .dcp-stage {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    width: 94%;
    margin-top: 70px;
  }
  .dcp-cat:nth-child(10) { grid-column: 2; }
  .dcp-tree { opacity: .68; transform: scale(.82); }
  .dcp-tree-right { transform: scaleX(-1) scale(.82); }
}

@media (max-width: 580px) {
  .dcp-content { width: min(100% - 18px, 1180px); }
  .dcp-hero { border-radius: 25px; }
  .dcp-park { min-height: 1120px; border-width: 6px; border-radius: 30px; }
  .dcp-stage {
    grid-template-columns: repeat(2, minmax(95px, 1fr));
    gap: 0 8px;
    margin-top: 52px;
  }
  .dcp-cat:nth-child(10) { grid-column: auto; }
  .dcp-tree { display: none; }
  .dcp-flowers { bottom: 60px; gap: 20px; flex-wrap: wrap; }
  .dcp-cat-name { font-size: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dcp-page *,
  .dcp-page *::before,
  .dcp-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}