.sound-stage{isolation:isolate;background:radial-gradient(100% 80% at 50% 0%, color-mix(in oklab, var(--a,var(--tint-moss)) 90%, var(--surface)), transparent 75%), var(--tint);border:1px solid var(--line);border-radius:1.75rem;min-height:16rem;position:relative;overflow:hidden}@media (min-width:640px){.sound-stage{min-height:21rem}}.sound-stage[data-sound=rain]{--a:var(--tint-sky);--sc-ink:var(--ink-sky)}.sound-stage[data-sound=ocean]{--a:var(--tint-leaf);--sc-ink:var(--ink-leaf)}.sound-stage[data-sound=hush]{--a:var(--tint-moss);--sc-ink:var(--ink-moss)}.sc-layer{pointer-events:none;position:absolute}.sc-blob{background:radial-gradient(circle, color-mix(in oklab, var(--ink-pink) 14%, transparent), transparent 65%);border-radius:999px;width:26rem;height:26rem;animation:38s ease-in-out infinite alternate sc-drift}.sc-blob.b2{background:radial-gradient(circle, color-mix(in oklab, var(--ink-butter) 14%, transparent), transparent 65%);animation-duration:52s}.sc-ring{border:1.5px solid color-mix(in oklab, var(--sc-ink,var(--ink-moss)) 40%, transparent);opacity:0;border-radius:999px;width:9rem;height:9rem;margin:-4.5rem 0 0 -4.5rem;animation:12s ease-out infinite paused sc-ring;top:50%;left:50%}.sc-ring.r2{animation-delay:4s}.sc-ring.r3{animation-delay:8s}.playing .sc-ring{animation-play-state:running}.sc-wave{background:color-mix(in oklab, var(--ink-leaf) 16%, transparent);border-radius:50% 50% 0 0/100% 100% 0 0;width:140%;height:9rem;animation:14s ease-in-out infinite alternate sc-sway;bottom:-4.5rem;left:-20%}.sc-wave.w2{background:color-mix(in oklab, var(--ink-sky) 16%, transparent);animation-duration:19s;animation-direction:alternate-reverse;bottom:-5.5rem}.sc-rain{opacity:.35;background:repeating-linear-gradient(100deg, transparent 0 22px, color-mix(in oklab, var(--ink-sky) 35%, transparent) 22px 23px, transparent 23px 51px);animation:2.6s linear infinite sc-fall;inset:-40% 0 0}.sc-glow{background:radial-gradient(circle, color-mix(in oklab, var(--ink-moss) 24%, transparent), transparent 68%);border-radius:999px;width:18rem;height:18rem;margin:-9rem 0 0 -9rem;animation:11s ease-in-out infinite sc-breathe;top:50%;left:50%}.sc-layer.anim-off,.sc-rain.anim-off{animation-play-state:paused}@keyframes sc-drift{0%{transform:translate(-12%,-8%)scale(1)}to{transform:translate(14%,10%)scale(1.18)}}@keyframes sc-ring{0%{opacity:0;transform:scale(.7)}12%{opacity:.55}to{opacity:0;transform:scale(3.4)}}@keyframes sc-sway{0%{transform:translate(-4%)}to{transform:translate(4%,-14px)}}@keyframes sc-fall{0%{transform:translate(0,0)}to{transform:translateY(20%)}}@keyframes sc-breathe{0%,to{opacity:.6;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}.sc-play{transition:transform .5s var(--ease-calm), box-shadow .5s var(--ease-calm)}.sc-play:active{transform:scale(.96)}@media (prefers-reduced-motion:reduce){.sc-blob,.sc-ring,.sc-wave,.sc-rain,.sc-glow{animation:none!important}.sc-ring{opacity:.25;transform:scale(1.4)}.sc-ring.r2{opacity:.18;transform:scale(2.1)}.sc-ring.r3{opacity:.12;transform:scale(2.8)}.sc-rain{opacity:.15}.sc-play{transition:none}}