:root { color-scheme: dark; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-width: 280px; min-height: 100vh; min-height: 100svh; margin: 0; overflow: hidden;
  color: #fff7dd;
  background: radial-gradient(ellipse 64% 58% at 50% 48%, #41436b 0%, #232b4c 44%, #11182e 78%, #0b1022 100%);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.page { --character-scale: 1; --glow-scale: 1; --glow-opacity: .55; --beam-brightness: 1; --floor-opacity: .35; --floor-scale: 1; height: 100vh; height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr) auto; position: relative; isolation: isolate; overflow: hidden; }
.page::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; pointer-events: none;
  background-image: radial-gradient(#fff8df 1.2px, transparent 1.2px);
  background-size: 62px 62px; background-position: 16px 22px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
.glow {
  position: absolute; width: min(72vw, 720px); aspect-ratio: 1; left: 50%; top: 44%; z-index: -1;
  transform: translate(-50%, -50%) scale(var(--glow-scale)); opacity: var(--glow-opacity);
  border-radius: 50%; background: radial-gradient(circle, #f9c85854 0%, #f3996652 32%, transparent 69%); filter: blur(24px);
}
.beam {
  position: absolute; top: -30%; width: min(22vw, 270px); height: 95%; z-index: -1; pointer-events: none;
  opacity: .36; filter: blur(28px) brightness(var(--beam-brightness));
  background: linear-gradient(to bottom, #ffdf8e00, #ffe79f9c 65%, #ffe79f00);
  transform-origin: top center; animation: sweep 7s ease-in-out infinite alternate;
}
.beam.left { left: 19%; transform: rotate(24deg); }
.beam.right { right: 19%; transform: rotate(-24deg); animation-delay: -3s; }
main { display: grid; place-items: center; min-height: 0; padding: 0 16px; }
.stage { height: 100%; min-height: 0; width: min(100%, 1040px); padding-bottom: 32px; position: relative; display: grid; place-items: end center; }
.stage::after {
  content: ""; position: absolute; bottom: 27px; left: 50%; z-index: 0; width: min(50vw, 430px); height: 36px;
  transform: translateX(-50%); border-radius: 50%; background: #080b1e; filter: blur(14px); opacity: .62; animation: shadow 1.05s ease-in-out infinite;
}
.halo { position: absolute; left: 50%; top: 45%; width: min(66vw, 570px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid #ffffff18; border-radius: 50%; box-shadow: 0 0 0 80px #ffffff07, 0 0 0 160px #ffffff04; }
.dancefloor {
  position: absolute; bottom: 22px; left: 50%; z-index: 0; width: min(82vw, 820px); height: 150px;
  background: radial-gradient(ellipse 30% 70% at 15% 55%, #21eadfbb, transparent 80%), radial-gradient(ellipse 30% 70% at 83% 55%, #ff786ab8, transparent 80%), radial-gradient(ellipse 28% 65% at 50% 50%, #ffd66dbb, transparent 85%);
  border-radius: 50%; filter: blur(25px); opacity: var(--floor-opacity);
  transform: translateX(-50%) scale(var(--floor-scale)); pointer-events: none;
}
.character { border: 0; padding: 0; background: transparent; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-drag: none; scale: var(--character-scale); }
.character img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.character:focus-visible { outline: 3px solid #fff; outline-offset: 5px; border-radius: 24px; }
.character:hover { filter: drop-shadow(0 0 24px #ffdc8a96) !important; }
.banana {
  position: relative; z-index: 2; width: auto; height: min(56svh, 600px); max-height: calc(100% - 16px); max-width: min(72vw, 460px); aspect-ratio: 2 / 3;
  transform-origin: 50% 86%; animation: dance 1.05s ease-in-out infinite; filter: drop-shadow(0 16px 26px #080e2b80);
}
.car {
  position: absolute; z-index: 3; bottom: 54px; width: clamp(105px, 20vw, 220px); aspect-ratio: 640 / 426;
  transform-origin: 50% 80%; filter: drop-shadow(0 16px 16px #080e2b70);
}
.car.teal { left: 3%; animation: car-left 1.1s ease-in-out infinite; }
.car.coral { right: 3%; animation: car-right .95s ease-in-out infinite; animation-delay: -.35s; }
.sparkle { position: absolute; z-index: 1; color: #ffe487; font-size: clamp(22px, 3vw, 38px); line-height: 1; text-shadow: 0 0 20px #ffd96a; animation: twinkle 2.4s ease-in-out infinite; }
.sparkle.a { left: 20%; top: 24%; }
.sparkle.b { right: 18%; top: 42%; animation-delay: -.8s; }
.sparkle.c { left: 30%; bottom: 16%; font-size: 18px; animation-delay: -1.6s; }
.controls { display: grid; justify-items: center; gap: 4px; padding: 10px 18px max(18px, env(safe-area-inset-bottom)); position: relative; z-index: 6; background: linear-gradient(to top, #0b1022e3, #0b1022a8 70%, transparent); }
.transport { display: flex; justify-content: center; align-items: center; gap: clamp(12px, 3vw, 24px); width: min(100%, 620px); }
.play { border: 0; min-width: 204px; min-height: 46px; padding: 12px 22px; border-radius: 999px; background: #ffd05a; box-shadow: 0 6px 0 #b88131, 0 12px 24px #050b2077; color: #19213a; font: inherit; font-size: 15px; font-weight: 900; cursor: pointer; touch-action: manipulation; transition: transform .18s, box-shadow .18s, background .18s; }
.play:hover { transform: translateY(-2px); background: #ffe080; box-shadow: 0 8px 0 #b88131, 0 15px 27px #050b2077; }
.play:active { transform: translateY(4px); box-shadow: 0 2px 0 #b88131, 0 7px 16px #050b2077; }
.play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.status { min-height: 18px; margin: 0; color: #e9e1d5; font-size: 12px; letter-spacing: .03em; text-align: center; }
.bars { display: inline-flex; align-items: end; gap: 3px; height: 13px; margin-right: 6px; vertical-align: -1px; }
.bars i { display: block; width: 3px; height: 5px; border-radius: 3px; background: #ffd05a; animation: equalize .6s ease-in-out infinite alternate; }
.bars i:nth-child(2) { animation-delay: -.4s; }
.bars i:nth-child(3) { animation-delay: -.2s; }
body:not(.is-playing) .character, body:not(.is-playing) .sparkle, body:not(.is-playing) .beam, body:not(.is-playing) .stage::after, body:not(.is-playing) .bars i { animation-play-state: paused; }
.character.celebrate { animation: celebrate .75s ease-in-out 1 !important; animation-play-state: running !important; }
.confetti { position: absolute; z-index: 5; left: var(--x); top: var(--y); width: 8px; height: 13px; border-radius: 2px; background: var(--color); pointer-events: none; animation: burst .9s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes car-left { 0%, 100% { transform: translateY(8px) rotate(-5deg); } 45% { transform: translateY(-15px) rotate(5deg); } 70% { transform: translateY(0) rotate(-2deg); } }
@keyframes car-right { 0%, 100% { transform: translateY(0) rotate(5deg); } 45% { transform: translateY(-18px) rotate(-4deg); } 72% { transform: translateY(6px) rotate(2deg); } }
@keyframes dance { 0%, 100% { transform: translateY(4px) rotate(-5deg); } 25% { transform: translateY(-18px) rotate(4deg); } 50% { transform: translateY(0) rotate(-3deg); } 75% { transform: translateY(-14px) rotate(5deg); } }
@keyframes celebrate { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-30px) rotate(-13deg); } 65% { transform: translateY(-10px) rotate(13deg); } }
@keyframes burst { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); opacity: 0; } }
@keyframes shadow { 0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .62; } 25%, 75% { transform: translateX(-50%) scaleX(.85); opacity: .46; } }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.75) rotate(-15deg); } 50% { opacity: 1; transform: scale(1.2) rotate(15deg); } }
@keyframes sweep { to { transform: rotate(-12deg); } }
@keyframes equalize { to { height: 13px; } }
@media (max-width: 650px) {
  .banana { height: 51svh; max-width: 62vw; }
  .car { width: 25vw; bottom: 35px; }
  .car.teal { left: 1%; }
  .car.coral { right: 1%; }
}
@media (max-width: 360px) { .play { min-width: 190px; } }
@media (max-height: 560px) { .stage { padding-bottom: 14px; } .stage::after { bottom: 12px; } .banana { height: 48svh; } .car { bottom: 18px; width: min(18vw, 150px); } .controls { padding-bottom: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .character, .stage::after, .sparkle, .beam, .bars i, .confetti { animation: none !important; }
  .character { scale: 1 !important; }
  .glow { opacity: .55; transform: translate(-50%, -50%); }
  .dancefloor { opacity: .35; transform: translateX(-50%); }
  .play { transition: none; }
}