/* Layered paper garden with a stream, flowering paths and a soft cloud. */
.rain-home{--garden-ink:#375e52;--garden-blue:#4b8496;display:grid;grid-template-columns:1.2fr 1fr;gap:20px 40px;padding:28px 0 64px;color:var(--garden-ink);align-items:start}.rain-name{grid-column:1;grid-row:1;text-align:center;min-width:0}.rain-kicker{color:#779789;font-size:10px;letter-spacing:.07em}.rain-name h1{font-size:clamp(36px,5vw,63px);line-height:1.08;letter-spacing:-.04em;margin:10px 0}.rain-name>p{font-size:14px;color:#779285}.rain-next{grid-column:2;grid-row:1/span 2;position:relative;min-width:0;padding:30px 27px;background:#f1f4e1;border:1px solid #d3dfbf;border-radius:50px 10px 44px 10px;box-shadow:5px 7px 0 #dfe9ca66}.rain-next:before{content:"";position:absolute;right:20px;top:18px;width:21px;height:10px;background:#b0c99a;border-radius:100% 0 100% 0;transform:rotate(-30deg)}.rain-task-heading{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#779681;margin-bottom:18px;padding-inline-end:26px}.rain-task-heading b{font:500 12px ui-monospace,monospace}.rain-next h2{font-size:29px;line-height:1.2;overflow-wrap:anywhere;margin-bottom:12px}.rain-next>p{font-size:14px;line-height:1.55;color:#6a8977}.rain-start{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:56px;margin-top:20px;border-radius:28px;background:var(--garden-blue);box-shadow:0 4px 0 #356979}.rain-start>span:last-child{font-size:24px}.rain-garden-stats{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:14px;margin-top:20px;border-top:1px dashed #bfd0ad;font-size:10px;color:#799476}.rain-garden-stats b{font-size:12px;color:#4f755e}.rain-garden-note{grid-column:1;grid-row:3;text-align:center;font-size:12px;line-height:1.6;padding:0 15px;color:#7b9a82}.rain-actions{grid-column:2;grid-row:3;display:flex;gap:8px;flex-wrap:wrap;align-self:center}.rain-actions .quiet{flex:1;min-height:44px;padding:12px 8px;font-size:11px;color:#60836e;background:#eaf1dc;border-color:#c4d8b5}.rain-path{grid-column:1/-1;grid-row:4;max-width:850px;width:100%;margin:14px auto 0;padding-inline:18px;position:relative}.rain-path:before{content:"";position:absolute;left:36px;top:90px;bottom:20px;width:3px;border-left:3px dotted #bdd5ab;z-index:-1}.rain-path-heading{padding-bottom:22px}.rain-path-heading h2{font-size:28px}.rain-path-heading p{font-size:12px;margin-top:6px;color:#7b9a83}.rain-bed{margin-bottom:12px;border-bottom:1px solid #d6e1c6}.rain-bed>summary{display:flex;align-items:center;gap:14px;min-height:72px;padding:11px 0;list-style:none;cursor:pointer}.rain-bed>summary::-webkit-details-marker{display:none}.rain-seed-number{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;background:#d8e8c5;border:2px solid #aec799;border-radius:50% 50% 40% 40%;color:#719163;font:16px ui-monospace,monospace;transform:rotate(-8deg)}.rain-bed-bloomed .rain-seed-number{background:#d3dcb1;border-color:#8eae7b;color:#527641;box-shadow:-5px -3px 0 #e2d6a655,5px -3px 0 #e2d6a655}.rain-bed summary>span:nth-child(2){flex:1}.rain-bed summary b{font-size:15px;display:block}.rain-bed summary small{display:block;font-size:10px;margin-top:4px;color:#8fa181}.rain-bed summary>i{font-style:normal;font-size:22px;color:#96b17e}.rain-seed-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;padding:7px 0 18px}.rain-home .rain-seed{min-height:92px;height:auto;min-width:0;display:flex;flex-direction:column;gap:5px;padding:11px 7px;background:#edf3de;border:1px solid #ccdbb8;border-radius:22px 5px 22px 5px;color:#6e8861}.rain-seed b{font:600 15px ui-monospace,monospace}.rain-seed>span{font-size:10px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.rain-seed small{font-size:10px;color:#9bac7d;margin-top:auto}.rain-home .rain-seed.current{outline:2px solid #70a6a0;outline-offset:-1px;background:#d2e9d9;border-color:#70a6a0}.rain-home .rain-seed.completed{background:#e0ebc9;border-color:#adc690}.rain-seed:disabled{opacity:.5}.rain-secondary{grid-column:1/-1;width:100%;max-width:850px;margin:4px auto 0;border-top:1px solid #d1dfbd}.rain-secondary>summary{font-size:12px;color:#799074;min-height:44px;padding:12px 0;cursor:pointer}.rain-secondary>div{padding:12px 0}.rain-bed>summary:focus-visible,.rain-secondary>summary:focus-visible{outline:3px solid #63998a;outline-offset:2px}
.rain-diorama{grid-column:1;grid-row:2;position:relative;isolation:isolate;height:335px;margin:0;overflow:hidden;direction:ltr;border-radius:120px 90px 25px 25px;border-bottom:8px solid #d5dfb7;background:#e1ede0;box-shadow:0 10px 0 #d1dfc033}.rain-sky{position:absolute;inset:0;background:linear-gradient(#d3e7e5,#eaf1dd)}.rain-cloud{position:absolute;width:89px;height:35px;left:17%;top:51px;background:#f6f9ed;border-radius:30px;box-shadow:0 6px 0 #bacfc526;animation:rain-cloud-drift 7s ease-in-out infinite alternate}.rain-cloud:before,.rain-cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.rain-cloud:before{width:48px;height:45px;left:15px;top:-25px}.rain-cloud:after{width:36px;height:34px;right:4px;top:-15px}.rain-cloud i{position:absolute;left:32px;top:13px;width:4px;height:5px;border-radius:50%;background:#76969a;box-shadow:18px 0 #76969a;z-index:1}.rain-cloud b{position:absolute;left:39px;top:21px;width:13px;height:6px;border-bottom:2px solid #87a4a0;border-radius:50%;z-index:1}.rain-drizzle{position:absolute;left:21%;top:102px;width:70px;height:82px;display:flex;justify-content:space-around}.rain-drizzle i{width:5px;height:12px;border-radius:70% 10% 60% 60%;background:#97c3c3;transform:rotate(20deg);animation:rain-drop 2.4s linear infinite}.rain-drizzle i:nth-child(2){animation-delay:-.8s}.rain-drizzle i:nth-child(3){animation-delay:-1.6s}.rain-hill{position:absolute;width:120%;height:185px;left:-10%;bottom:-25px;border-radius:55% 60% 0 0;background:#b3cc9d;box-shadow:0 -7px 0 #d3e1bc}.rain-hill-back{bottom:47px;left:11%;background:#c3d7ae;transform:rotate(-17deg)}.rain-hill-front{transform:rotate(8deg)}.rain-stream{position:absolute;left:22%;bottom:-15px;width:83px;height:165px;border:15px solid #a3cbc0;border-top:0;border-left-width:0;border-bottom-width:0;border-radius:0 65% 0 0;transform:rotate(30deg);box-shadow:5px 0 #d8e7c355}.rain-sprout{position:absolute;left:37%;bottom:100px;height:44px;width:4px;background:#7c9e68;transform:rotate(-8deg)}.rain-sprout i,.rain-sprout b{position:absolute;width:27px;height:14px;background:#8fb57e;border-radius:100% 0 100% 0}.rain-sprout i{left:-24px;top:11px;transform:rotate(35deg)}.rain-sprout b{left:1px;top:0;transform:rotate(-20deg)}.rain-flowers{position:absolute;left:12%;bottom:37px;display:flex;gap:20px;align-items:flex-end}.rain-flowers i{position:relative;width:4px;height:44px;background:#719564;border-radius:4px}.rain-flowers i:nth-child(2){height:60px}.rain-flowers i:before{content:"";position:absolute;left:-7px;top:-9px;width:18px;height:18px;background:#e7cf84;border:5px solid #d99883;border-radius:50%;box-shadow:0 -7px 0 -2px #d99883,7px 0 0 -2px #d99883,-7px 0 0 -2px #d99883,0 7px 0 -2px #d99883}.rain-flowers i:nth-child(2):before{border-color:#d8ba83;box-shadow:0 -7px 0 -2px #d8ba83,7px 0 0 -2px #d8ba83,-7px 0 0 -2px #d8ba83,0 7px 0 -2px #d8ba83}.rain-vine{position:absolute;right:12%;bottom:86px;width:71px;height:137px;border-left:5px solid #8bab74;border-top:5px solid #8bab74;border-radius:55px 0 0 0;transform:rotate(12deg)}.rain-vine i,.rain-vine b,.rain-vine em{position:absolute;width:29px;height:16px;border-radius:100% 0 100% 0;background:#a4bf87;left:-30px;top:78px;transform:rotate(35deg)}.rain-vine b{left:0;top:46px;transform:rotate(-25deg)}.rain-vine em{left:-18px;top:18px;transform:rotate(40deg)}.rain-mushrooms{position:absolute;right:12%;bottom:36px;display:flex;gap:22px;align-items:flex-end}.rain-mushrooms i,.rain-mushrooms b{position:relative;width:10px;height:34px;background:#ead9b2;border-radius:8px}.rain-mushrooms b{height:24px}.rain-mushrooms i:before,.rain-mushrooms b:before{content:"";position:absolute;left:-16px;top:-7px;width:42px;height:24px;background:radial-gradient(circle,#eed5b0 2px,transparent 3px) 0 0/12px 12px,#c58b76;border-radius:35px 35px 8px 8px}.rain-mill{position:absolute;right:25%;bottom:109px;width:60px;height:63px;background:#d7c99d;border-radius:5px 12px 0 0;border:3px solid #b8ad85}.rain-mill:before{content:"";position:absolute;left:-9px;top:-18px;width:72px;height:27px;background:#a9b794;clip-path:polygon(50% 0,100% 100%,0 100%)}.rain-mill i{position:absolute;left:-24px;bottom:-7px;width:51px;height:51px;border:5px solid #9c9470;border-radius:50%;background:conic-gradient(transparent 0 85deg,#a39e78 85deg 95deg,transparent 95deg 175deg,#a39e78 175deg 185deg,transparent 185deg 265deg,#a39e78 265deg 275deg,transparent 275deg 355deg,#a39e78 355deg);animation:rain-wheel 9s linear infinite}.rain-mill b{position:absolute;right:8px;top:12px;width:13px;height:18px;background:#afc2ae;border:2px solid #9eaa8b;border-radius:8px 8px 0 0}.rain-bridge{position:absolute;left:37%;bottom:30px;width:71px;height:26px;border-top:6px solid #b1a880;border-bottom:8px solid #b1a880;background:repeating-linear-gradient(90deg,#b1a880 0 5px,transparent 5px 20px);border-radius:50% 50% 0 0;transform:rotate(16deg)}.rain-pond{position:absolute;right:4%;bottom:-6px;width:137px;height:48px;background:#a6cec0;border:6px solid #ccdcaf;border-radius:50%;transform:rotate(-10deg)}.rain-pond i,.rain-pond b{position:absolute;left:24px;top:6px;width:61px;height:16px;border:2px solid #d3e9d299;border-radius:50%;animation:rain-ripple 3s ease-out infinite}.rain-pond b{left:83px;top:15px;width:21px;height:10px;background:#a3b98b;border:0;animation:none}.rain-bunting{position:absolute;left:14%;right:11%;top:113px;height:31px;border-top:2px solid #9fb794;display:flex;justify-content:space-around;transform:rotate(-8deg)}.rain-bunting i{width:17px;height:21px;background:#d9ba88;clip-path:polygon(0 0,100% 0,50% 100%)}.rain-bunting i:nth-child(2n){background:#a8c0bd}.rain-butterfly{position:absolute;right:13%;top:83px;width:5px;height:18px;background:#9a9770;transform:rotate(25deg)}.rain-butterfly i,.rain-butterfly b{position:absolute;left:-15px;top:0;width:16px;height:20px;border-radius:70% 40% 20% 50%;background:#cfb1a0;transform-origin:right;animation:rain-flutter 2s ease-in-out infinite alternate}.rain-butterfly b{left:4px;transform:scaleX(-1);transform-origin:left;animation:none}.rain-grown-6 .rain-hill-front{background-color:#bcd49d}
[dir=rtl] .rain-name h1,[dir=rtl] .rain-kicker{letter-spacing:0}[dir=rtl] .rain-path:before{left:auto;right:36px}[dir=rtl] .rain-next:before{right:auto;left:20px}[dir=rtl] .rain-seed>span{line-height:1.5}
@keyframes rain-cloud-drift{to{transform:translateX(10px)}}@keyframes rain-drop{0%{opacity:0;transform:translateY(0) rotate(20deg)}20%{opacity:.7}100%{opacity:0;transform:translateY(70px) rotate(20deg)}}@keyframes rain-wheel{to{transform:rotate(360deg)}}@keyframes rain-ripple{to{transform:scale(1.3);opacity:0}}@keyframes rain-flutter{to{transform:scaleX(.45)}}
@media(max-width:850px){.rain-home{grid-template-columns:minmax(0,1fr);max-width:550px;margin:auto;padding-top:14px;gap:16px}.rain-name,.rain-next,.rain-diorama,.rain-garden-note,.rain-actions,.rain-path,.rain-secondary{grid-column:1}.rain-name{grid-row:1}.rain-next{grid-row:2;padding:20px}.rain-diorama{grid-row:3;height:300px}.rain-garden-note{grid-row:4}.rain-actions{grid-row:5}.rain-path{grid-row:6;padding-inline:9px;margin-top:12px}.rain-name h1{font-size:39px;margin:8px 0}.rain-name>p{font-size:12px}.rain-kicker{font-size:9px}.rain-task-heading{margin-bottom:12px}.rain-next h2{font-size:25px;margin-bottom:9px}.rain-next>p{font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.rain-start{margin-top:15px;min-height:54px}.rain-garden-stats{margin-top:16px;padding-top:12px}.rain-seed-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:390px){.rain-home{padding-top:9px;gap:13px}.rain-name h1{font-size:34px}.rain-next{padding:16px}.rain-next h2{font-size:22px}.rain-next>p{font-size:12px}.rain-task-heading{font-size:10px}.rain-actions .quiet{font-size:10px}.rain-seed-grid{gap:6px}.rain-seed>span{font-size:9px}.rain-diorama{height:280px}.rain-vine{right:7%}.rain-mill{right:20%}.rain-flowers{left:8%;gap:15px}}
@media(prefers-reduced-motion:reduce){.rain-home *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}