@import"https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Fredoka:wght@400;600&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a1a04;--text: #c8f070}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:Fredoka,sans-serif}.playground-root{width:100%;height:100dvh;position:relative;background:var(--bg);overflow:hidden;transition:filter .6s ease;touch-action:none;user-select:none;-webkit-user-select:none}.playground-root.inverted{filter:invert(1) hue-rotate(180deg)}.playground-svg{width:100%;height:100%;display:block}.playground-title{font-family:Bubblegum Sans,cursive;font-size:26px;fill:#c8f070;letter-spacing:1px;paint-order:stroke;stroke:#00000080;stroke-width:2px;text-shadow:0 0 20px rgba(100,220,40,.5)}.key-group{cursor:pointer;transition:transform .08s ease}.key-group:hover .key-hit-plant{filter:brightness(1.15) drop-shadow(0 0 6px rgba(200,255,100,.6))}.key-group:hover .key-hit-piano{filter:brightness(1.12)}.key-pressed .key-hit-plant{filter:brightness(1.3) drop-shadow(0 0 12px rgba(200,255,80,.9)) saturate(1.4)}.key-pressed .key-hit-piano{filter:brightness(.82)}.key-pressed-plant{animation:plantPulse .15s ease-out}@keyframes plantPulse{0%{transform:scaleY(1)}50%{transform:scaleY(1.03)}to{transform:scaleY(1)}}.sun-group:hover .sun-body{filter:brightness(1.15)}.sun-ray{animation:rayPulse 3s ease-in-out infinite;transform-origin:1240px 75px}.sun-ray:nth-child(2n){animation-delay:.3s}@keyframes rayPulse{0%,to{opacity:.4}50%{opacity:.8}}.cloud-drift{animation:cloudMove 40s ease-in-out infinite alternate}.cloud-drift-slow{animation:cloudMove 55s ease-in-out infinite alternate}@keyframes cloudMove{0%{transform:translate(0)}to{transform:translate(40px)}}.truck-hood:hover{filter:brightness(1.1)}.truck-driver:hover{filter:brightness(1.2)}.butterfly-float{animation:bfloat 6s ease-in-out infinite}@keyframes bfloat{0%,to{transform:translate(1150px,220px)}25%{transform:translate(1140px,205px)}50%{transform:translate(1160px,215px)}75%{transform:translate(1145px,230px)}}.butterfly-wing-l{animation:wingFlap .3s ease-in-out infinite alternate;transform-origin:0 0}.butterfly-wing-r{animation:wingFlap .3s ease-in-out infinite alternate-reverse;transform-origin:0 0}@keyframes wingFlap{0%{transform:scaleX(1)}to{transform:scaleX(.4)}}.sequence-indicator{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:6px;padding:8px 14px;background:#00000080;border-radius:20px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10;border:1px solid rgba(100,200,50,.25)}.seq-dot{width:12px;height:12px;border-radius:50%;background:#c8f070;animation:dotPop .15s ease-out}@keyframes dotPop{0%{transform:scale(0)}to{transform:scale(1)}}.notice-toast{position:fixed;top:20px;left:50%;transform:translate(-50%);background:#001400e0;color:#c8f070;padding:12px 24px;border-radius:12px;font-size:14px;font-family:Fredoka,sans-serif;z-index:100;animation:toastIn .3s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(100,200,50,.3)}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.portal-splash{position:fixed;inset:0;background:#000a00b3;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200;animation:fadeIn .3s ease}.portal-splash p{color:#c8f070;font-family:Bubblegum Sans,cursive;font-size:22px;margin-top:20px}.portal-ring{width:80px;height:80px;border:4px solid transparent;border-top-color:#c8f070;border-right-color:#48bb78;border-radius:50%;animation:portalSpin .6s linear infinite}@keyframes portalSpin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.under21-btn{transition:fill .2s ease}.under21-active{animation:pulseRed 1.5s infinite}@keyframes pulseRed{0%,to{opacity:1}50%{opacity:.7}}.glow-ring{animation:glowPulse 2s ease-in-out infinite}@keyframes glowPulse{0%,to{opacity:.3}50%{opacity:.7}}.start-overlay{position:fixed;inset:0;background:#051403eb;display:flex;align-items:center;justify-content:center;z-index:300;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.start-content{text-align:center;animation:gentleBounce 2s ease-in-out infinite}.start-flower{font-size:96px;margin-bottom:16px;animation:gentleBounce 2s ease-in-out infinite,plantGlow 2s ease-in-out infinite;display:inline-block;filter:drop-shadow(0 0 18px rgba(100,220,40,.7));transition:transform .1s ease}.start-flower:hover{transform:scale(1.12)}.start-flower:active{transform:scale(.94)}@keyframes plantGlow{0%,to{filter:drop-shadow(0 0 12px rgba(100,220,40,.5))}50%{filter:drop-shadow(0 0 28px rgba(140,255,60,.9))}}.start-content h2{font-family:Bubblegum Sans,cursive;font-size:32px;color:#c8f070;margin-bottom:8px;text-shadow:0 0 20px rgba(100,220,40,.5)}.start-content p{font-family:Fredoka,sans-serif;font-size:14px;color:#a0e650b3;opacity:.8}@keyframes gentleBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@media(max-width:768px){.playground-title{font-size:18px}.start-content h2{font-size:24px}}@media(max-width:480px){.playground-title{font-size:14px}.start-content h2{font-size:20px}.start-flower{font-size:48px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}