body{background:linear-gradient(#9fdcff 0%,#dff4ff 55%,#cdeccf 100%)}
body:before{background:linear-gradient(#6cc0f5,#2a7de1);border-top:6px solid #1f63b8;height:18vh;opacity:.5}
.title,h2{color:#1f5fa8}h1{color:#1f63b8;text-shadow:0 4px 0 #bfe6ff,0 8px 18px rgba(20,80,160,.25)}
.sub{color:#2f4f6b}
.dots i{border-color:#2a7de1}.dots i.on{background:#2a7de1}
.word{color:#2a7de1}
.scene{position:relative;width:min(92vw,760px);aspect-ratio:16/8;border-radius:30px;overflow:hidden;background:linear-gradient(#bfe8ff,#eaf7ff);border:6px solid #fff;box-shadow:var(--sh)}
.scene .lake{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(#5fc2ff,#2a7de1);border-top:5px solid #9be0ff}
.scene .sunbtn{position:absolute;top:6%;right:5%;width:26%;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer}
.scene .sunbtn svg{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(200,120,0,.35))}
.scene .sunbtn.glow svg{animation:glow .5s}
@keyframes glow{50%{transform:scale(1.15);filter:drop-shadow(0 0 30px #ffd23f)}}
.scene .drip{position:absolute;left:30%;bottom:22%;width:20%;transition:bottom 1.4s cubic-bezier(.3,.8,.3,1),transform 1.4s}
.scene .drip img{width:100%;border-radius:50%}
.scene .vap{position:absolute;bottom:30%;width:6%;height:30%;opacity:0;transition:opacity .6s}
.scene .vap.on{opacity:.9;animation:rise 2.4s ease-in infinite}
.scene .vap svg{width:100%;height:100%}
@keyframes rise{from{transform:translateY(20%)}to{transform:translateY(-40%);opacity:0}}
.meter{display:flex;gap:10px}.meter i{width:46px;height:18px;border-radius:9px;background:#fff;box-shadow:var(--sh)}.meter i.on{background:#ff9f43}
.sky{position:relative;width:min(92vw,820px);aspect-ratio:16/8;border-radius:30px;background:linear-gradient(#5b8fd6,#a9d6ff);border:6px solid #fff;box-shadow:var(--sh);overflow:hidden;touch-action:none}
.sky .cloud{position:absolute;left:50%;top:50%;width:34%;transform:translate(-50%,-50%);transition:width .5s}
.sky .cloud svg{width:100%;height:auto}
.sky .drop{position:absolute;width:12%;max-width:90px;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;animation:drift 3s ease-in-out infinite alternate;transition:left .6s,top .6s,opacity .6s,transform .6s}
.sky .drop svg{width:100%;height:100%}
.sky .drop.in{opacity:0;transform:scale(.3);animation:none}
@keyframes drift{to{transform:translate(8px,-10px)}}
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;max-width:900px}
.pick{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;font-size:clamp(18px,2.3vw,23px);min-height:150px}
.pick svg{width:min(96px,70%);height:auto}
.step svg{width:54px;height:54px;flex:0 0 auto}
.bin.rain{background:linear-gradient(#5fc2ff,#2a7de1)}.bin.snow{background:linear-gradient(#b8c6ff,#6a7fe0)}
@media (orientation:portrait){.picks{grid-template-columns:repeat(2,1fr)}.scene,.sky{aspect-ratio:4/3}}