/* Moonlit storm sky; static artwork survives script/canvas failure. */
body{isolation:isolate}
#rain-background{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:
radial-gradient(ellipse at 78% 13%,#9bc6d525 0%,#406b8620 12%,transparent 38%),
radial-gradient(ellipse at 15% 68%,#17334366,transparent 55%),
radial-gradient(ellipse at 80% 100%,#17333e88,transparent 48%),
linear-gradient(175deg,#030710 0%,#091421 48%,#020609 100%)}
#rain-background::before{content:"";position:absolute;inset:0;pointer-events:none;background:
radial-gradient(ellipse at 73% 18%,#020710aa,transparent 34%),
radial-gradient(ellipse at 32% 30%,#010408cc,transparent 45%),
radial-gradient(ellipse at 65% 75%,#23384633,transparent 50%)}
#rain-background::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;background:
repeating-linear-gradient(98deg,transparent 0 79px,#a3c8d526 80px,transparent 81px 163px)}
#rain-background[data-state="animated"]::after{opacity:0}
#rain-background canvas{position:relative;display:block;width:100%;height:100%;pointer-events:none}
#rain-background canvas[hidden]{display:none}
@media(prefers-reduced-motion:reduce){#rain-background canvas{display:none}}
body>.layout,body>.layout>main{background:transparent}

#storm-sound{font-size:12px;padding:5px 8px;white-space:nowrap;flex-shrink:0}
@media(max-width:600px){#storm-sound{font-size:11px;padding:4px 6px}}