/* Calm Weather (tools/weather.html). Prefix wx-. See assets/js/weather.js */
.wx-hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
.wx-hero-art{width:100%;max-width:380px;height:auto;margin-left:auto;border-radius:28px;filter:drop-shadow(0 16px 20px rgba(43,33,64,.16))}
.wx-hero{padding-bottom:30px}
@media (max-width:820px){.wx-hero-in{grid-template-columns:1fr;gap:10px}.wx-hero-art{max-width:240px;margin:0 auto}}

.wx-sec{padding:34px 0 70px}
.wx-nojs{max-width:640px;margin:0 auto;background:#fff;border-radius:var(--r-l);padding:30px 34px;box-shadow:var(--sh-1)}
html:not(.no-js) .wx-nojs{display:none}
.wx-app{max-width:940px;margin:0 auto}
.wx-app[hidden]{display:none}

.wx-scene{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);background:#9CC4DB;aspect-ratio:960/520;isolation:isolate}
.wx-scene svg{display:block;position:absolute;inset:0;width:100%;height:100%}
.wx-frame{position:absolute;inset:0;border:14px solid #6B4A9A;border-radius:var(--r-xl);box-shadow:inset 0 0 0 3px rgba(255,255,255,.35),inset 0 10px 30px rgba(0,0,0,.18);pointer-events:none}
.wx-frame::before,.wx-frame::after{content:"";position:absolute;background:#6B4A9A;opacity:.6}
.wx-frame::before{left:50%;top:0;bottom:0;width:8px;transform:translateX(-50%)}
.wx-frame::after{top:50%;left:0;right:0;height:8px;transform:translateY(-50%)}

.wx-start{position:absolute;inset:14px;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:0;border-radius:calc(var(--r-xl) - 14px);cursor:pointer;
  background:rgba(43,33,64,.42);color:#fff;font:inherit;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:background .3s}
.wx-start:hover{background:rgba(43,33,64,.3)}
.wx-start[hidden]{display:none}
.wx-start b{font:600 1.5rem/1.2 var(--f-head)}
.wx-start small{font:700 .92rem/1.3 var(--f-body);opacity:.92}
.wx-play{width:78px;height:78px;border-radius:50%;background:var(--coral);display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.3);animation:wxPulse 2.4s ease-in-out infinite}
.wx-play::before{content:"";margin-left:6px;border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent}
@keyframes wxPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* the living scene, driven by --rain --wind --water --fire --birds --storm (set from weather.js) */
.wx-sun{opacity:calc(1 - var(--storm,0)*1.1)}
.wx-cloud{filter:brightness(calc(1 - var(--storm,0)*.5));animation:wxDrift 40s ease-in-out infinite alternate}
.wx-cloud.c2{animation-duration:55s;animation-direction:alternate-reverse}
@keyframes wxDrift{from{transform:translateX(-40px)}to{transform:translateX(60px)}}
.tr{transform-box:fill-box;transform-origin:50% 100%;animation:wxSway 4.6s ease-in-out infinite}
.tr.t2{animation-duration:5.4s;animation-delay:-1s}.tr.t3{animation-duration:4.1s;animation-delay:-2s}
@keyframes wxSway{0%,100%{transform:rotate(calc(var(--wind,0)*-2.6deg))}50%{transform:rotate(calc(var(--wind,0)*2.6deg))}}
.wx-rain{opacity:calc(var(--rain,0)*1.05)}
.wx-rain .dr{animation:wxFall .9s linear infinite;opacity:.7}
@keyframes wxFall{from{transform:translateY(-40px)}to{transform:translateY(540px)}}
.wx-ripples{opacity:var(--water,0)}
.wx-ripples .rp{transform-box:fill-box;transform-origin:center;animation:wxRip 4s ease-out infinite}
.wx-ripples .r2{animation-delay:-1.3s}.wx-ripples .r3{animation-delay:-2.6s}
@keyframes wxRip{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.wx-birds{opacity:calc(var(--birds,0)*1.8)}
.wx-birds .bd{animation:wxBird 16s linear infinite}
.wx-birds .b2{animation-duration:22s;animation-delay:-6s}.wx-birds .b3{animation-duration:19s;animation-delay:-11s}
@keyframes wxBird{from{transform:translate(0,0)}to{transform:translate(1060px,-40px)}}
.wx-fire{opacity:var(--fire,0)}
.wx-fire .fglow{opacity:.22;animation:wxFlick 1.3s ease-in-out infinite}
@keyframes wxFlick{0%,100%{opacity:.16}50%{opacity:.3}}
.wx-ring{transform-box:fill-box;transform-origin:center;animation:wxRing 3.4s ease-out forwards}
@keyframes wxRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(14);opacity:0}}

.wx-panel{margin-top:22px;background:#fff;border-radius:var(--r-xl);padding:28px 34px 30px;box-shadow:var(--sh-2);position:relative}
.wx-panel[hidden]{display:none}
.wx-panel::before{content:"";position:absolute;inset:9px;border:2.5px dashed var(--line);border-radius:calc(var(--r-xl) - 9px);pointer-events:none}
.wx-panel>*{position:relative}
.wx-top{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;margin-bottom:8px}
.wx-vol,.wx-sleep{display:flex;align-items:center;gap:10px;font:800 .9rem/1.2 var(--f-body);color:var(--ink-2)}
.wx-vol input{width:140px}
.wx-sleep select{font:700 .95rem/1.2 var(--f-body);padding:10px 12px;min-height:44px;border-radius:var(--r-s);border:2px solid var(--line);background:#fff;color:var(--ink)}
.wx-h{font-size:1.35rem;margin:22px 0 10px}
.wx-sub{margin:0 0 14px;color:var(--ink-2)}
.wx-mix{display:grid;gap:6px}
.wx-row{display:grid;grid-template-columns:minmax(170px,230px) 1fr 36px;gap:14px;align-items:center;padding:6px 0}
.wx-row label{display:flex;align-items:center;gap:10px;font:800 1rem/1.2 var(--f-body);color:var(--ink)}
.wx-row label svg{color:var(--sky-d);flex:none}
.wx-row output{font:800 .95rem/1 var(--f-body);color:var(--ink-2);text-align:right}
.wx-app input[type=range]{width:100%;height:32px;accent-color:var(--coral-d);cursor:pointer}
@media (max-width:640px){.wx-row{grid-template-columns:1fr 36px;gap:4px 10px}.wx-row label{grid-column:1/-1}}
.wx-presets{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 10px}
.wx-presets>span{font:800 .9rem/1 var(--f-body);color:var(--ink-2)}
.wx-pre{font:700 .96rem/1.2 var(--f-body);padding:10px 16px;min-height:44px;border-radius:99px;border:2px solid var(--line);background:var(--cream);color:var(--ink);cursor:pointer;transition:.2s}
.wx-pre:hover{border-color:var(--sky);transform:translateY(-2px)}
.wx-bowl{margin-top:4px}

.wx-walk{margin-top:10px;padding-top:6px;border-top:2px dashed var(--line)}
.wx-zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media (max-width:640px){.wx-zones{grid-template-columns:1fr}}
.wx-zone{display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px 16px;border-radius:var(--r-m);border:2px solid var(--line);background:#fff;cursor:pointer;font:inherit;color:var(--ink);transition:.2s;border-left-width:8px}
.wx-zone b{font:600 1.05rem/1.25 var(--f-head)}.wx-zone span{font:700 .85rem/1.3 var(--f-body);color:var(--ink-2)}
.wx-zone.red{border-left-color:#D4503A}.wx-zone.yellow{border-left-color:#E0A81C}.wx-zone.green{border-left-color:#3F8F58}
.wx-zone:hover{transform:translateY(-2px)}
.wx-zone[aria-pressed="true"]{background:var(--cream);box-shadow:0 0 0 3px var(--coral)}
.wx-len{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.wx-len>span{font:800 .9rem/1 var(--f-body);color:var(--ink-2)}
.wx-len label{position:relative;cursor:pointer}
.wx-len input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.wx-len i{display:inline-block;font:700 .95rem/1.2 var(--f-body);font-style:normal;padding:10px 16px;min-height:44px;border-radius:99px;border:2px solid var(--line);background:var(--cream)}
.wx-len input:checked+i{background:var(--sky-d);border-color:var(--sky-d);color:#fff}
.wx-len input:focus-visible+i{outline:3px solid var(--coral);outline-offset:3px}
.wx-path{position:relative;height:36px;margin-top:20px}
.wx-path[hidden]{display:none}
.wx-path::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:4px dotted var(--line)}
.wx-path i{position:absolute;left:0;top:calc(50% - 2px);height:4px;width:0;background:var(--sun);border-radius:4px}
.wx-lantern{position:absolute;top:2px;left:0;width:26px;height:32px;margin-left:-13px;border-radius:8px 8px 10px 10px;background:var(--sun);border:3px solid var(--ink);box-shadow:0 0 18px 4px rgba(242,182,50,.7);transition:left .25s linear;z-index:1}
.wx-lantern::before{content:"";position:absolute;left:50%;top:-9px;width:10px;height:8px;margin-left:-5px;border:3px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0}
.wx-say{text-align:center;margin:20px auto 6px;max-width:680px;font:italic 600 1.25rem/1.45 var(--f-serif);color:var(--ink);min-height:1.5em}
.wx-fine{text-align:center;font-size:.92rem;color:var(--ink-3);margin:6px auto 0;max-width:660px}

.wx-why{padding:70px 0}
.wx-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:820px){.wx-facts{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.wx-cloud,.tr,.wx-rain .dr,.wx-ripples .rp,.wx-birds .bd,.wx-fire .fglow,.wx-play,.wx-lantern{animation:none!important;transition:none!important}.wx-rain .dr{transform:translateY(120px)}.wx-ring{animation-duration:.01s!important}}
@media print{.wx-panel,.wx-start{display:none}}