.nature-stage { display: block; width: 100%; height: 290px; }
.fidget-window.twinkle-window { border-color: #7e8baa; background: #35435f; }
.twinkle-window .fidget-title { color: rgb(196 205 232 / 45%); }
.star-stage { position: relative; }
.sky-star { position: absolute; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #eee2b8; font-size: var(--star-size, 24px); line-height: 1; cursor: pointer; transform: translate(-50%, -50%); transition: opacity 240ms ease-out; -webkit-tap-highlight-color: transparent; }
.sky-star::before { content: ""; width: 1em; height: 1em; background: currentColor; mask: url("../assets/icons/ui-sparkle.svg") center / contain no-repeat; animation: sky-twinkle 3s ease-in-out infinite alternate; animation-delay: var(--star-delay, 0s); }
.sky-star.is-fading { animation: none; opacity: 0; pointer-events: none; }
.sky-star:hover { color: #fff7db; }
.sky-star:focus-visible { outline: 2px solid #fff0be; outline-offset: 1px; }
.sky-star.star-reset { top: 43%; left: 50%; width: 90px; height: 90px; font-size: 80px; animation: sky-reveal 450ms ease-out both; }
.sky-star.star-reset.is-fading { animation: none; opacity: 0; }
.star-reset::before { mask-image: url("../assets/icons/ui-star.svg"); }
.fidget-window.ripple-window { border-color: #a8cbd5; background: #cfe7ed; }
.ripple-window .fidget-title { color: rgb(48 78 100 / 45%); }
.ripple-stage { touch-action: manipulation; image-rendering: auto; }
.ripple-stage:focus-visible { outline: 3px solid #527f95; outline-offset: -5px; }
.ripple-window .pop-mute, .gear-window .pop-mute { color: #304e64; }
.pop-mute { top: 6px; bottom: auto; }
.twinkle-window .pop-mute { color: #c4cde8; }
.pop-mute svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pop-mute .sound-off, .pop-mute[aria-pressed="true"] .sound-on { display: none; }
.pop-mute[aria-pressed="true"] .sound-off { display: initial; }
.fidget-window.gear-window { border-color: #acc8a9; background: #dcebd8; }
.gear-window .fidget-title { color: rgb(48 87 58 / 45%); }
.garden-gear { cursor: grab; touch-action: none; }
.garden-gear:active { cursor: grabbing; }
.garden-gear:focus { outline: none; }
.garden-gear:focus-visible .gear-body { stroke: #33492b; stroke-width: 3; }
.gear-body { stroke: none; stroke-linejoin: round; }
.gear-spoke { fill: none; stroke: #dcebd8; stroke-width: 4; stroke-linecap: round; pointer-events: none; }
.gear-hub { fill: #dcebd8; pointer-events: none; }
@keyframes sky-twinkle { from { opacity: .55; } to { opacity: 1; } }
@keyframes sky-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 520px) {
  .nature-stage { height: min(72vw, 340px); min-height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-star, .sky-star::before, .sky-star.star-reset { animation: none; transition: none; }
}