/* A viewport layer lets the blossoms keep falling while the page scrolls. */
.sakura-rain{position:fixed;inset:0;z-index:50;overflow:hidden;pointer-events:none;user-select:none}
.sakura-drop{position:absolute;top:-80px;left:var(--x);width:var(--size);height:var(--size);animation:sakura-fall var(--duration) linear infinite;animation-delay:var(--delay);will-change:transform}
.sakura-drop img{display:block;width:100%;height:100%;object-fit:contain;opacity:var(--opacity,.65);animation:sakura-sway var(--sway,5s) ease-in-out infinite alternate;animation-delay:var(--delay)}
@keyframes sakura-fall{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--drift,30px),calc(100vh + 160px),0)}}
@keyframes sakura-sway{from{transform:translateX(-15px) rotate(-30deg) rotateY(0deg)}to{transform:translateX(15px) rotate(65deg) rotateY(40deg)}}
.decor-paused .sakura-rain *{animation-play-state:paused!important}
.decor-hidden .sakura-rain{visibility:hidden}
@media(max-width:520px){.sakura-drop:nth-child(n+8){display:none}.sakura-drop{width:calc(var(--size)*.8);height:calc(var(--size)*.8)}}
@media(prefers-reduced-motion:reduce){.sakura-rain{display:none}}

.sakura-toggle{position:fixed;right:16px;bottom:16px;z-index:51;border:1px solid #e5c4cf;border-radius:24px;padding:8px 14px;background:#fffc;color:#68555e;font:12px/1.5 system-ui;cursor:pointer;backdrop-filter:blur(8px)}
.sakura-toggle:focus-visible{outline:2px solid #d12b65;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.sakura-toggle{display:none}}