/* HeatSafe v1.2 styles. Portfolio glass system (Plus Jakarta Sans, liquid glass, pills) on HeatSafe's colours. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bg:#f6f1ea; --ink:#1d1814; --mute:#6f655b; --line:#e8dfd3; --chip:#f0e8dc; --hair:rgba(0,0,0,.07);
  --glass:rgba(255,255,255,.66); --glass-b:rgba(255,255,255,.86); --glass-hi:rgba(255,255,255,.92);
  --bar:rgba(246,241,234,.74); --shadow:0 4px 24px rgba(60,40,20,.07);
  --l0:#2e9e5b; --l1:#d9a000; --l2:#e8710a; --l3:#d93025; --l4:#8e1b5a;
  --accent:#e8710a; --water:#1f7ae0;
  --c-home:#e8710a; --c-forecast:#b87800; --c-water:#1f7ae0; --c-alerts:#c2307a; --c-me:#2e9e5b;
  --g-home:rgba(232,113,10,.38); --g-forecast:rgba(217,160,0,.38); --g-water:rgba(31,122,224,.38); --g-alerts:rgba(194,48,122,.34); --g-me:rgba(46,158,91,.36);
  --tabbg:rgba(255,251,245,.86); --tabb:rgba(255,255,255,.86);
  --bubble:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.4));
  --lc:var(--l1); --lc-soft:rgba(217,160,0,.14);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#14110f; --ink:#f4ede4; --mute:#a89d90; --line:#322b25; --chip:#2a241f; --hair:rgba(255,255,255,.08);
    --glass:rgba(38,32,28,.62); --glass-b:rgba(255,255,255,.11); --glass-hi:rgba(255,255,255,.07);
    --bar:rgba(20,17,15,.72); --shadow:0 4px 24px rgba(0,0,0,.35);
    --l0:#3fbf74; --l1:#f0b400; --l2:#ff8a2a; --l3:#ff5a4d; --l4:#d9468f; --water:#5aa5ff; --accent:#ff8a2a;
    --c-home:#ff8a2a; --c-forecast:#f0b400; --c-water:#5aa5ff; --c-alerts:#e0558f; --c-me:#3fbf74;
    --tabbg:rgba(34,28,24,.86); --tabb:rgba(255,255,255,.16);
    --bubble:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
  }
}
html[data-lvl="0"]{--lc:var(--l0);--lc-soft:rgba(46,158,91,.17)}
html[data-lvl="1"]{--lc:var(--l1);--lc-soft:rgba(217,160,0,.17)}
html[data-lvl="2"]{--lc:var(--l2);--lc-soft:rgba(232,113,10,.2)}
html[data-lvl="3"]{--lc:var(--l3);--lc-soft:rgba(217,48,37,.22)}
html[data-lvl="4"]{--lc:var(--l4);--lc-soft:rgba(142,27,90,.24)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--font);overscroll-behavior-y:contain;
  -webkit-font-smoothing:antialiased;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 36% at 90% -6%,var(--lc-soft),transparent 72%),
             radial-gradient(60% 30% at -8% 104%,rgba(31,122,224,.12),transparent 72%)}
h1,h2,h3,p{margin:0}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
b,strong{font-weight:700}
.app{max-width:480px;margin:0 auto;padding:0 20px calc(128px + env(safe-area-inset-bottom))}

/* top bar */
.topbar{position:sticky;top:0;z-index:40;margin:0 -20px;padding:calc(10px + env(safe-area-inset-top)) 20px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--bar);backdrop-filter:blur(18px) saturate(1.7);-webkit-backdrop-filter:blur(18px) saturate(1.7);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.topbar.scrolled{border-bottom-color:var(--hair);box-shadow:0 6px 20px rgba(60,40,20,.05)}
.locbtn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:none;border:0;padding:0;text-align:left;min-width:0}
.locname{display:flex;align-items:center;gap:6px;font-size:18px;letter-spacing:-.02em}
.locname b{font-weight:800;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.locname svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.locname svg.chev{stroke:var(--mute);width:13px;height:13px}
.live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--mute)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--l0);position:relative;flex:none}
.live.ok i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--l0);animation:ping 2s ease-out infinite}
.live.busy i{background:var(--water);animation:blink 1s ease-in-out infinite}
.live.stale i{background:var(--l1)} .live.off i{background:#9a8f84}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes blink{50%{opacity:.3}}
.iconbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--glass);border:1.5px solid var(--glass-b);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow),0 1px 0 var(--glass-hi) inset;flex:none;position:relative;overflow:hidden}
.iconbtn svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.iconbtn.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* screens */
#screen{outline:none}
#screen.enter-r{animation:inr .4s cubic-bezier(.2,.8,.2,1)}
#screen.enter-l{animation:inl .4s cubic-bezier(.2,.8,.2,1)}
@keyframes inr{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes inl{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
#screen.settle{transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.phead{padding:16px 2px 16px}
.phead h1{font-size:30px;font-weight:800;letter-spacing:-.045em;line-height:1.1;margin-top:3px}
.phead p{color:var(--mute);font-size:14px;margin-top:4px}
.eyebrow{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.back{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 10px;border-radius:50px;background:var(--glass);border:1.5px solid var(--glass-b);
  font-weight:700;font-size:13px;margin:12px 0 0;box-shadow:var(--shadow),0 1px 0 var(--glass-hi) inset;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* glass cards */
.card{position:relative;background:var(--glass);border:1.5px solid var(--glass-b);border-radius:24px;padding:18px;margin-bottom:14px;
  backdrop-filter:blur(16px) saturate(1.8);-webkit-backdrop-filter:blur(16px) saturate(1.8);
  box-shadow:var(--shadow),0 1px 0 var(--glass-hi) inset;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(190px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 70%);mix-blend-mode:overlay}
.card.lit::after{opacity:1}
@media (prefers-color-scheme:dark){.card::after{background:radial-gradient(190px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 70%);mix-blend-mode:normal}}
.go{cursor:pointer}
.go:active{transform:scale(.982)}
.card h2,.sect{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--mute);margin-bottom:12px}
.btn,.tab,.day,.row,.go,.iconbtn,.res{position:relative;overflow:hidden}

/* weather hero */
.hero{overflow:hidden;isolation:isolate;padding:20px 18px 16px}
.hero canvas.fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;border-radius:inherit}
.herorow{display:flex;justify-content:space-between;align-items:flex-start;margin-top:6px}
.big{font-size:80px;font-weight:800;letter-spacing:-.065em;line-height:.92}
.big sup{font-size:24px;font-weight:700;letter-spacing:0;vertical-align:top;position:relative;top:7px;margin-left:3px}
.wx{font-size:46px;line-height:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12));animation:floaty 5s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-4px)}}
.sub{color:var(--mute);font-size:13px;margin-top:6px}
.pillrow{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.pill{position:relative;overflow:hidden;display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:50px;font-size:12px;font-weight:700;color:#fff;background:var(--lc)}
.pill.l1{color:#2a1f00}
.pill::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-130%);animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.advice{font-size:13px;font-weight:600}
.verdict{margin:14px 0 14px;font-size:15px;line-height:1.5}
.strip{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--hair);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.34)}
@media (prefers-color-scheme:dark){.strip{background:rgba(255,255,255,.04)}}
.strip.three{grid-template-columns:repeat(3,1fr)}
.strip .s{padding:11px 4px;text-align:center;border-right:1.5px solid var(--hair)}
.strip .s:last-child{border-right:0}
.strip b{display:block;font-size:17px;font-weight:800;letter-spacing:-.03em}
.strip span{display:block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin-top:2px}

.banner{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-radius:20px;margin-bottom:14px;color:#fff;background:var(--lc)}
.banner.lv3{background:var(--l3)} .banner.lv4{background:var(--l4)} .banner.info{background:#5b6b7a}
.banner b{display:block;font-size:14px}
.banner small{display:block;font-size:12.5px;opacity:.95;margin-top:2px;line-height:1.4}
.banner .bi{font-size:20px;line-height:1.2}

/* windows */
.bar24{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:30px;margin:2px 0 5px}
.bar24 div{border-radius:4px;background:var(--lc);opacity:.95}
.bar24 div.sleep{opacity:.28}
.bar24 div.now{outline:2px solid var(--ink);outline-offset:1px;z-index:1}
.bar24lab{display:flex;justify-content:space-between;font-size:9.5px;font-weight:600;color:var(--mute);margin-bottom:14px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{border-radius:18px;padding:12px;background:rgba(255,255,255,.4);border:1.5px solid var(--hair);min-height:86px}
@media (prefers-color-scheme:dark){.tile{background:rgba(255,255,255,.04)}}
.tile .tl{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.tile .tl i{width:8px;height:8px;border-radius:50%;background:var(--lc)}
.tile .tv{font-size:16px;font-weight:800;letter-spacing:-.03em;margin-top:8px;line-height:1.2}
.tile .tc{font-size:12px;color:var(--mute);margin-top:3px}
.win{display:flex;flex-direction:column;gap:2px}
.win div{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--hair);font-size:14px}
.win div:first-child{border-top:0}
.win i{width:10px;height:10px;border-radius:50%;background:var(--lc);flex:none}
.win b{min-width:86px}
.win span{color:var(--mute);flex:1;text-align:right;font-size:13px}
.best{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.45);border:1.5px solid var(--hair);border-radius:16px;padding:11px 13px;margin-bottom:14px;font-size:14px}
@media (prefers-color-scheme:dark){.best{background:rgba(255,255,255,.05)}}
.best b{font-weight:800}

/* day chips and hourly */
.days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 14px;margin:0 -20px;padding-left:20px;padding-right:20px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-left:20px}
.days::-webkit-scrollbar,.hours::-webkit-scrollbar{display:none}
.day{flex:0 0 auto;min-width:74px;text-align:center;border-radius:18px;padding:9px 10px 0;background:var(--glass);border:1.5px solid var(--glass-b);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);scroll-snap-align:start;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.day:active{transform:scale(.95)}
.day[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.day small{display:block;font-size:11px;font-weight:600;color:var(--mute)}
.day b{display:block;font-size:17px;font-weight:800;letter-spacing:-.03em;margin:1px 0 8px}
.day i{display:block;height:5px;margin:0 -10px;background:var(--lc)}
.hours{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin:0 -4px;padding-left:4px;scrollbar-width:none}
.hr{flex:0 0 auto;width:62px;text-align:center;background:rgba(255,255,255,.42);border:1.5px solid var(--hair);border-radius:16px;padding:9px 4px 0}
@media (prefers-color-scheme:dark){.hr{background:rgba(255,255,255,.05)}}
.hr.nowh{border-color:var(--ink)}
.hr small{display:block;font-size:11px;font-weight:600;color:var(--mute)}
.hr .e{font-size:20px;line-height:1.5}
.hr b{display:block;font-size:16px;font-weight:800;letter-spacing:-.03em}
.hr .uv{font-size:10px;font-weight:600;color:var(--mute);margin-bottom:6px}
.hr i{display:block;height:5px;margin:0 -4px;background:var(--lc)}

/* buttons */
.btn{isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:50px;
  font-weight:700;font-size:13px;border:1.5px solid var(--glass-b);background:var(--glass);color:var(--ink);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 18px rgba(60,40,20,.08),0 1px 0 var(--glass-hi) inset;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,color .3s}
.btn::before{content:"";position:absolute;z-index:-1;left:-10%;bottom:-60%;width:120%;height:120%;border-radius:50% 50% 0 0/30% 30% 0 0;
  background:var(--fill,rgba(31,122,224,.9));transform:translateY(100%);transition:transform .6s cubic-bezier(.4,0,.2,1)}
.btn:active{transform:scale(.96)}
.btn:active::before{transform:translateY(6%)}
@media (hover:hover){.btn:hover::before{transform:translateY(6%)} .btn:hover{color:#fff}}
.btn.water{background:linear-gradient(135deg,#3b97f5,#1f7ae0);color:#fff;border-color:transparent;--fill:rgba(12,84,180,.95)}
.btn.accent{background:linear-gradient(135deg,#f08a2c,#e8710a);color:#fff;border-color:transparent;--fill:#bf5604}
.btn.danger{color:var(--l3);--fill:rgba(217,48,37,.92)}
.btn.sm{min-height:38px;padding:0 14px}
.btn:disabled{opacity:.45;pointer-events:none}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}

/* water glass */
.wrow{display:flex;gap:16px;align-items:center}
.glassring{position:relative;flex:none;width:76px;height:76px}
.glassring.big{width:132px;height:132px}
.glassring svg{width:100%;height:100%;display:block;overflow:visible}
.glassring .gn{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.05;pointer-events:none}
.glassring .gn b{font-size:15px;font-weight:800;letter-spacing:-.03em;text-shadow:0 1px 6px rgba(255,255,255,.5)}
.glassring.big .gn b{font-size:24px}
.glassring .gn span{display:block;font-size:9.5px;font-weight:700;color:var(--ink);opacity:.7;text-transform:uppercase;letter-spacing:.06em}
.glassring.bump{animation:bump .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes bump{40%{transform:scale(1.09)}}
.wtxt{flex:1;min-width:0}
.wtxt .wt{font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.wtxt .wt.water{color:var(--water)}
.sched{list-style:none;margin:0;padding:0}
.sched li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--hair)}
.sched li:first-child{border-top:0}
.sched .tm{width:70px;font-weight:700;font-size:14px}
.sched .ml{flex:1;font-weight:600}
.sched .ml small{display:block;color:var(--mute);font-size:12px;font-weight:500}
.sched .tag{width:10px;height:10px;border-radius:50%;background:var(--lc);flex:none}
.sched li.past{opacity:.5}
.sched li.next{background:rgba(31,122,224,.1);margin:0 -10px;padding:10px;border-radius:14px;border-top-color:transparent}
.note{border-radius:16px;padding:11px 13px;margin-bottom:12px;font-size:13.5px;line-height:1.45}
.note.info{background:var(--chip)}
.note.warn{background:rgba(217,160,0,.16);border:1.5px solid var(--l1)}
.note.bad{background:rgba(217,48,37,.14);border:1.5px solid var(--l3)}

/* forms and lists */
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--mute)}
.form .full{grid-column:1/-1}
.form input,.form select,.field{width:100%;margin-top:5px;padding:11px 12px;border-radius:14px;border:1.5px solid var(--hair);background:rgba(255,255,255,.5);color:var(--ink);font-size:15px;font-weight:600}
@media (prefers-color-scheme:dark){.form input,.form select,.field{background:rgba(255,255,255,.06)}}
.form input:focus,.form select:focus,.field:focus{outline:2px solid var(--water);outline-offset:1px}
.list{padding:6px 6px}
.row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:0;padding:12px 10px;border-radius:18px;font-weight:700;font-size:15px}
.row + .row{border-top:1px solid var(--hair);border-radius:0}
.row .ri{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.55);border:1.5px solid var(--hair)}
.row .ri svg{width:20px;height:20px;fill:none;stroke:var(--c);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.row small{display:block;font-weight:500;color:var(--mute);font-size:12.5px}
.row .ch{margin-left:auto;stroke:var(--mute);width:16px;height:16px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.switch{width:52px;height:32px;border-radius:50px;border:1.5px solid var(--hair);background:var(--chip);position:relative;padding:0;flex:none;transition:background .3s}
.switch i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.switch[aria-checked=true]{background:var(--water)}
.switch[aria-checked=true] i{transform:translateX(20px)}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:14px}
.setrow b{display:block;font-size:15px}
.setrow small{color:var(--mute);font-size:12.5px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--hair);font-size:14px}
.kv:first-of-type{border-top:0}
.kv span{color:var(--mute)}
details{border-top:1px solid var(--hair);padding:12px 0}
details:first-of-type{border-top:0}
summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:20px;color:var(--mute);font-weight:500}
details[open] summary::after{content:"\2212"}
details p,details ul{color:var(--mute);margin:8px 0 0;font-size:14px}
details ul{padding-left:18px}
.lvl{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--hair)}
.lvl:first-of-type{border-top:0}
.lvl .sw{width:34px;height:34px;border-radius:12px;background:var(--lc);flex:none}
.lvl b{display:block;font-size:14.5px}
.lvl span{font-size:12.5px;color:var(--mute)}
.fine{font-size:12px;color:var(--mute);text-align:center;margin:18px 0 0;line-height:1.5}
.lv0{--lc:var(--l0)} .lv1{--lc:var(--l1)} .lv2{--lc:var(--l2)} .lv3{--lc:var(--l3)} .lv4{--lc:var(--l4)}

/* tab bar: liquid glass */
.tabbar{position:fixed;z-index:60;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);
  width:min(calc(100% - 28px),440px);display:grid;grid-template-columns:repeat(5,1fr);padding:7px 6px;border-radius:32px;overflow:hidden;
  background:var(--tabbg);border:1.5px solid var(--tabb);backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);
  box-shadow:0 8px 32px rgba(0,0,0,.12),0 1px 0 rgba(255,255,255,.9) inset,0 -1px 0 rgba(0,0,0,.04) inset;touch-action:none;user-select:none;-webkit-user-select:none}
.tabbar::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);transform:translateX(-130%);animation:sheen 5s ease-in-out infinite;opacity:.7}
.tabbar[data-active=home]{--tc:var(--c-home);--tg:var(--g-home)}
.tabbar[data-active=forecast]{--tc:var(--c-forecast);--tg:var(--g-forecast)}
.tabbar[data-active=water]{--tc:var(--c-water);--tg:var(--g-water)}
.tabbar[data-active=alerts]{--tc:var(--c-alerts);--tg:var(--g-alerts)}
.tabbar[data-active=me]{--tc:var(--c-me);--tg:var(--g-me)}
.bubble{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/5);z-index:0;pointer-events:none;
  transform:translateX(calc(var(--i,0)*100% + var(--dx,0px)));transition:transform .55s cubic-bezier(.34,1.5,.64,1)}
.bubble i{display:block;height:100%;border-radius:25px;background:var(--bubble);border:1.5px solid var(--tabb);
  box-shadow:0 6px 18px var(--tg,transparent),0 1px 0 rgba(255,255,255,.95) inset,0 -6px 10px rgba(255,255,255,.12) inset;transform:scaleX(var(--sx,1));transition:transform .4s}
.bubble.slosh i{animation:slosh .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes slosh{0%{transform:scaleX(1) scaleY(1)}30%{transform:scaleX(1.3) scaleY(.88)}62%{transform:scaleX(.96) scaleY(1.06)}100%{transform:none}}
.tabbar.drag .bubble{transform:translateX(var(--bx,0px));transition:none}
.tabbar.drag .bubble i{transform:scaleX(1.1) scaleY(.96)}
.tab{z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;padding:7px 0 6px;border:0;background:none;
  color:var(--ink);opacity:.78;font-size:10.5px;font-weight:700;line-height:1;letter-spacing:.02em;border-radius:25px;touch-action:none}
.tab svg{width:25px;height:25px;fill:var(--c);fill-opacity:.18;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),fill-opacity .3s}
.tab[aria-current=page],.tab.hot{color:var(--c);opacity:1}
.tab[aria-current=page] svg,.tab.hot svg{fill-opacity:.34;transform:translateY(-2px) scale(1.1)}
.tab:active svg{transform:scale(.9)}

/* touch ripple */
.rip{position:absolute;z-index:0;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,rgba(255,255,255,.7) 0%,rgba(120,190,255,.28) 42%,transparent 70%);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.55) inset;animation:rip .75s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rip{0%{transform:translate(-50%,-50%) scale(0);opacity:.95}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* pull to refresh droplet */
#ptr{position:fixed;z-index:50;left:50%;top:calc(env(safe-area-inset-top) + 58px);width:38px;height:38px;margin-left:-19px;border-radius:50%;pointer-events:none;
  background:var(--glass);border:1.5px solid var(--glass-b);box-shadow:0 8px 20px rgba(31,122,224,.25),0 1px 0 var(--glass-hi) inset;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transform:translateY(-60px) scale(.4)}
#ptr i{position:absolute;inset:9px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:linear-gradient(180deg,#5aa5ff,#1f7ae0)}
#ptr.ready i{animation:blink .6s ease-in-out infinite}
#ptr.go-spin{opacity:1;transform:translateY(0) scale(1);transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s}
#ptr.go-spin i{animation:spin .9s linear infinite;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 25%,#1f7ae0 25% 100%);inset:8px;-webkit-mask:radial-gradient(circle,transparent 45%,#000 47%);mask:radial-gradient(circle,transparent 45%,#000 47%)}

/* sheet and toast */
.sheet{position:fixed;inset:0;z-index:80;background:rgba(20,14,8,.42);display:none;align-items:flex-end;justify-content:center;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sheet.open{display:flex;animation:fade .25s}
.sheet .in{width:100%;max-width:480px;max-height:82vh;overflow:auto;border-radius:28px 28px 0 0;padding:10px 20px calc(22px + env(safe-area-inset-bottom));
  background:var(--glass);background-color:var(--bg);border:1.5px solid var(--glass-b);box-shadow:0 -10px 40px rgba(0,0,0,.2);animation:rise .5s cubic-bezier(.2,1.1,.3,1)}
.sheet .grab{width:42px;height:5px;border-radius:5px;background:var(--hair);margin:4px auto 14px;background:rgba(120,110,100,.35)}
.sheet h3{font-size:20px;font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.res{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--hair);padding:13px 4px;font-weight:700}
.res span{display:block;color:var(--mute);font-size:12.5px;font-weight:500}
@keyframes rise{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.toast{position:fixed;z-index:70;left:50%;bottom:calc(98px + env(safe-area-inset-bottom));transform:translate(-50%,16px) scale(.96);opacity:0;pointer-events:none;
  padding:10px 18px;border-radius:50px;background:var(--glass);background-color:rgba(255,255,255,.55);border:1.5px solid var(--glass-b);font-size:13px;font-weight:700;white-space:nowrap;
  backdrop-filter:blur(18px) saturate(1.8);-webkit-backdrop-filter:blur(18px) saturate(1.8);box-shadow:0 10px 30px rgba(0,0,0,.14);transition:opacity .3s,transform .5s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-color-scheme:dark){.toast{background-color:rgba(44,37,32,.7)}}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.skel{height:170px;border-radius:24px;margin-bottom:14px;background:linear-gradient(90deg,var(--chip),var(--glass),var(--chip));background-size:200% 100%;animation:sk 1.3s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.empty{text-align:center;padding:28px 12px;color:var(--mute)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* v1.2 additions */
.hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.hd h2{margin:0}
.more{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:700;color:var(--mute)}
.more svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tabbar.swiping .bubble{transition:none}
.back{position:relative;overflow:hidden}
.pill.l1{color:#2a1f00}
.card .list-gap{height:8px}

/* v1.2.1 fire and radar */
.hero.fire{border-color:rgba(255,100,40,.6);animation:fireglow 2.2s ease-in-out infinite}
@keyframes fireglow{0%,100%{box-shadow:0 0 0 1px rgba(255,100,40,.22),0 8px 30px rgba(217,48,37,.28),0 1px 0 var(--glass-hi) inset}50%{box-shadow:0 0 0 1px rgba(255,100,40,.5),0 10px 46px rgba(255,90,30,.55),0 1px 0 var(--glass-hi) inset}}
html[data-lvl="3"] .hero .big,html[data-lvl="4"] .hero .big{background:linear-gradient(180deg,#ffb23a 0%,#ff6a1a 45%,#d93025 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(255,90,30,.5))}
html[data-lvl="4"] .hero .big{background:linear-gradient(180deg,#ff9a2e 0%,#e0301f 50%,#8e1b5a 100%);-webkit-background-clip:text;background-clip:text}
.hdetail{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.hdetail li{position:relative;padding-left:18px;font-size:13px;font-weight:600;line-height:1.35}
.hdetail li::before{content:"";position:absolute;left:2px;top:.45em;width:8px;height:8px;border-radius:50%;background:var(--lc);box-shadow:0 0 8px var(--lc)}
.radar canvas{display:block;width:100%;height:300px}
.rleg{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:11px;font-weight:700;color:var(--mute)}
.rleg span{display:inline-flex;align-items:center;gap:5px}
.rleg i{width:8px;height:8px;border-radius:50%;background:var(--lc)}

/* v1.2.2 water world, share card, forecast card weather */
#waterFx{display:none}
html[data-route="water"] .phead h1{color:var(--water)}
.hyd{margin:14px 0 4px}
.hyd .hl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:800;font-size:15px}
.hyd .hl small{font-weight:600;font-size:12px;color:var(--mute)}
.wetbar{height:10px;border-radius:10px;background:rgba(120,110,100,.22);margin-top:8px;overflow:hidden;position:relative}
.wetbar i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#c98a3f,#6bb2ff 55%,#1f7ae0);transition:width 1.2s cubic-bezier(.34,1.2,.5,1)}
.cardprev canvas{display:block;margin:0 auto 14px;width:min(100%,216px);aspect-ratio:9/16;height:auto;border-radius:20px;box-shadow:0 14px 40px rgba(217,48,37,.35)}
.btn.share{margin-left:auto}
.pillrow .btn.share{min-height:32px;padding:0 14px;font-size:12px}
/* weather feel on forecast cards */
.day,.hr{isolation:isolate}
.day::before,.hr::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:.9;background-repeat:no-repeat}
.wx-clear::before{background:radial-gradient(circle at 82% 10%,rgba(255,196,70,.5),transparent 55%);animation:glowp 3.4s ease-in-out infinite}
@keyframes glowp{50%{opacity:.5}}
.wx-partly::before{background:radial-gradient(circle at 85% 8%,rgba(255,196,70,.4),transparent 50%),radial-gradient(ellipse 60% 30% at 30% 22%,rgba(255,255,255,.7),transparent 70%);animation:drift 7s ease-in-out infinite alternate}
@keyframes drift{from{background-position:0 0,-8px 0}to{background-position:0 0,10px 0}}
.wx-cloud::before{background:radial-gradient(ellipse 70% 32% at 25% 20%,rgba(150,162,184,.5),transparent 70%),radial-gradient(ellipse 60% 30% at 75% 34%,rgba(170,180,200,.4),transparent 70%);animation:drift 8s ease-in-out infinite alternate}
.wx-rain::before,.wx-storm::before{background-image:repeating-linear-gradient(105deg,transparent 0 7px,rgba(40,100,190,.22) 7px 8px),linear-gradient(180deg,rgba(120,140,170,.3),transparent 70%);background-size:100% 100%;animation:rainfall .7s linear infinite}
@keyframes rainfall{from{background-position:0 0,0 0}to{background-position:-8px 24px,0 0}}
.wx-storm::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:rgba(255,255,255,.7);opacity:0;animation:zap 5s infinite}
@keyframes zap{0%,92%,100%{opacity:0}94%{opacity:.8}96%{opacity:.1}97%{opacity:.6}}
.wx-fog::before{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(235,240,245,.2) 60%,rgba(255,255,255,.5));animation:glowp 5s ease-in-out infinite}
@media (prefers-color-scheme:dark){.wx-partly::before,.wx-cloud::before,.wx-fog::before{opacity:.35}.wx-rain::before,.wx-storm::before{opacity:.6}}
.wx-night::before{background:radial-gradient(circle at 80% 12%,rgba(150,160,255,.35),transparent 55%)}

/* v1.2.3 buddies */
.avbtn{margin-left:auto;width:42px;height:42px;border-radius:50%;padding:0;flex:none;position:relative;border:2px solid var(--glass-b);background:var(--glass);box-shadow:var(--shadow);margin-right:8px;overflow:visible}
.avbtn .avsvg{width:100%;height:100%;border-radius:50%;display:block}
.avbtn .sweat{position:absolute;right:-3px;top:-3px;width:11px;height:15px;background:#5ab0ff;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;box-shadow:0 0 0 2px var(--bg);animation:drip 2.4s ease-in infinite}
.avcard{overflow:visible}
.avhero{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.buddy{position:relative;display:inline-block;flex:none}
.buddy .avsvg{display:block;width:100%;height:100%;border-radius:50%}
.buddy.big{width:92px;height:92px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.14));animation:bob 3.6s ease-in-out infinite}
.buddy.big.pop{animation:popin .6s cubic-bezier(.34,1.56,.64,1)}
.buddy.lv3.big,.buddy.lv4.big{animation:bob 3.6s ease-in-out infinite,shiver .5s linear infinite}
.buddy .sweat{position:absolute;right:2px;top:4px;width:17px;height:23px;background:linear-gradient(#8fd0ff,#3ba3f5);border-radius:50% 50% 50% 50%/62% 62% 38% 38%;box-shadow:0 0 0 2.5px var(--bg);animation:drip 2.2s ease-in infinite}
.buddy .sweat.s2{right:auto;left:0;top:14px;width:13px;height:18px;animation-delay:1.1s}
.avinfo{flex:1;min-width:0}
.avname{display:block;font-size:12px;font-weight:700;color:var(--mute)}
.avname input{display:block;width:100%;margin-top:4px;font:700 17px var(--font);padding:9px 12px;border-radius:14px;border:1.5px solid var(--line);background:var(--chip);color:var(--ink)}
.avmood{display:block;margin-top:8px;color:var(--mute);font-size:13px}
.avmood b{color:var(--ink)}
.avgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.avpick{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 2px 7px;border-radius:18px;border:2px solid transparent;background:var(--chip);font-size:11.5px;font-weight:700;color:var(--mute);transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s,background .2s}
.avpick .avsvg{width:100%;max-width:58px;height:auto;aspect-ratio:1;display:block}
.avpick:active{transform:scale(.92)}
.avpick[aria-checked="true"]{border-color:var(--accent);background:var(--glass-b);color:var(--ink);transform:translateY(-2px)}
.avpick[aria-checked="true"] .avsvg{animation:wiggle .8s ease-out}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes popin{0%{transform:scale(.5) rotate(-12deg)}60%{transform:scale(1.14) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes shiver{0%,100%{margin-left:0}25%{margin-left:-1.5px}75%{margin-left:1.5px}}
@keyframes wiggle{0%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.1)}55%{transform:rotate(8deg) scale(1.08)}100%{transform:rotate(0) scale(1)}}
@keyframes drip{0%{transform:translateY(-3px);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateY(12px);opacity:0}}
@media (prefers-reduced-motion:reduce){.buddy.big,.buddy .sweat,.avbtn .sweat,.avpick[aria-checked="true"] .avsvg{animation:none!important}}

/* v1.3 scene: sky, landmark, frosted glass panel */
.hero.scene{position:relative;isolation:isolate;overflow:hidden;padding:0;border-radius:32px;color:#fff;margin-bottom:14px;
  background:linear-gradient(180deg,var(--sk1) 0%,var(--sk2) 64%,var(--sk2) 100%);border:1.5px solid rgba(255,255,255,.3);box-shadow:0 10px 30px rgba(40,25,20,.18)}
.hero.scene canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border-radius:inherit}
.hero.scene .sfx-bg{z-index:0}.hero.scene canvas.sfx-fg{z-index:2}
.sc-sky{position:relative;z-index:1;padding:16px 18px 4px}
.hero.scene::before{content:'';position:absolute;left:0;right:0;top:0;height:205px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(18,14,28,.56) 0%,rgba(18,14,28,.46) 55%,rgba(18,14,28,0) 100%);border-radius:inherit}
.sc-sky{z-index:2}
.sc-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;text-shadow:0 1px 3px rgba(0,0,0,.35),0 1px 12px rgba(0,0,0,.3)}
.sc-city{font-size:16px;font-weight:800}.sc-date{font-size:12.5px;font-weight:600;opacity:.95}
.sc-main{display:flex;justify-content:space-between;align-items:flex-start;margin-top:4px;text-shadow:0 1px 3px rgba(0,0,0,.3),0 2px 14px rgba(0,0,0,.28)}
html .hero.scene .big{font-size:88px;font-weight:300;letter-spacing:-.055em;line-height:.95;background:none;-webkit-background-clip:initial;background-clip:initial;color:#fff;filter:none}
html .hero.scene .big sup{font-size:34px;font-weight:300;top:6px;margin-left:2px}
.sc-feels{font-size:14.5px;font-weight:700;margin-top:3px;text-shadow:0 1px 2px rgba(0,0,0,.5),0 1px 10px rgba(0,0,0,.35)}
.sc-cond{display:flex;align-items:center;gap:8px;max-width:52%;margin-left:auto;padding-top:16px;font-size:16px;font-weight:700;text-align:right;line-height:1.2}
.sc-cond .wxi{width:28px;height:28px;flex:none}
.sc-land{position:relative;margin:-6px auto -8px;width:98%}
.lm{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 14px rgba(0,0,0,.2))}
.scene.wet .lm{filter:brightness(.82) saturate(.78) drop-shadow(0 12px 14px rgba(0,0,0,.25))}
.scene.night .lm{filter:brightness(.55) saturate(1.15) drop-shadow(0 12px 14px rgba(0,0,0,.35))}
.lm .lit{opacity:0;transition:opacity .8s}.scene.night .lm .lit{opacity:1}
.lm .tree{transform-box:fill-box;transform-origin:50% 100%;animation:sway 4.6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(calc(var(--sway,1deg) * -1))}50%{transform:rotate(var(--sway,1deg))}}
.lm .flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick .5s ease-in-out infinite alternate}
.lm .spin{animation:spin 7s linear infinite}
.lm .blink{animation:blinkl 1.6s steps(2,jump-none) infinite}
@keyframes blinkl{50%{opacity:.2}}
.wnow{position:relative;z-index:3;margin:0 10px 10px;padding:14px 14px 8px;border-radius:26px;background:var(--gl);color:#fff;border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 30px rgba(0,0,0,.16)}
.wn-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.wnow h2{margin:0;flex:1;color:#fff;font-size:16px;font-weight:800;letter-spacing:0;text-transform:none;white-space:nowrap}
.wnow .pill{height:26px;padding:0 12px;font-size:11.5px}
.wn-share{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.14);color:#fff;font:700 12px var(--font)}
.wn-share .wxi{width:15px;height:15px}
.wxi{width:22px;height:22px;flex:none}
.wstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ws{min-width:0;padding:10px 11px 9px;border-radius:16px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.15)}
.ws small{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;opacity:.92;line-height:1.1;white-space:nowrap}.ws small .wxi{width:14px;height:14px}
.ws b{display:block;margin-top:5px;font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1}
.ws em{display:block;margin-top:2px;font-style:normal;font-size:10.5px;font-weight:600;opacity:.85;line-height:1.1}
.wnow .verdict{margin:14px 2px 8px;font-size:14px;line-height:1.45;text-wrap:pretty}.wnow .verdict .nw,.wnow .verdict b{white-space:nowrap}
.wnow .hdetail{margin:10px 2px 0}.wnow .hdetail li{font-size:12.5px;line-height:1.4}
.wn-body{min-height:236px}.wn-body.swap{animation:swapin .35s ease}
@keyframes swapin{from{opacity:0;transform:translateY(6px)}}
.wn-cap{font-size:12px;opacity:.85;margin:8px 2px 0}
.wtabs{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-top:8px;border-top:1px solid rgba(255,255,255,.2)}
.wtabs button{background:none;border:0;color:rgba(255,255,255,.72);font:700 13px var(--font);padding:11px 0 7px}
.wtabs button[aria-selected="true"]{color:#fff}
.wtabs .ind{position:absolute;top:-1.5px;left:0;width:33.333%;height:3px;border-radius:3px;background:#fff;transition:transform .35s cubic-bezier(.34,1.3,.5,1)}
.wtabs[data-t="hourly"] .ind{transform:translateX(100%)}.wtabs[data-t="daily"] .ind{transform:translateX(200%)}
.hscroll{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}.hscroll::-webkit-scrollbar{display:none}
.hc{flex:none;width:58px;display:grid;justify-items:center;gap:6px;padding:10px 4px 9px;border-radius:16px;background:rgba(255,255,255,.11)}
.hc.now{background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.4)}
.hc small{font-size:11.5px;font-weight:700}.hc b{font-size:15px;font-weight:800}.hc i{width:70%;height:4px;border-radius:4px;background:var(--lc)}
.dlist{display:grid;gap:1px}
.dr{display:grid;grid-template-columns:64px 24px 1fr 36px 30px;align-items:center;gap:8px;padding:7px 4px;background:none;border:0;border-radius:12px;color:#fff;text-align:left;font:700 13px var(--font)}
.dr:active{background:rgba(255,255,255,.14)}.dr .wxi{width:20px;height:20px}
.dr .db{height:6px;border-radius:6px;background:rgba(255,255,255,.2);overflow:hidden}.dr .db i{display:block;height:100%;border-radius:6px;background:var(--lc)}
.dr b{text-align:right}.dr small{opacity:.78;text-align:right;font-weight:600}
.hc.lv0,.dr.lv0{--lc:#4fd68a}.hc.lv1,.dr.lv1{--lc:#ffd34a}.hc.lv2,.dr.lv2{--lc:#ffa03a}.hc.lv3,.dr.lv3{--lc:#ff6a5a}.hc.lv4,.dr.lv4{--lc:#ff5fb0}

/* v1.3 heat gauge and flip card */
.flip{perspective:1500px;margin-bottom:14px}
.flip-in{position:relative;transform-style:preserve-3d;transition:height .55s cubic-bezier(.3,1.2,.5,1),transform .9s cubic-bezier(.3,1.25,.45,1)}
.flip.on .flip-in{transform:rotateY(180deg)}
.flip .face{position:absolute;top:0;left:0;right:0;margin:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-backdrop-filter:none;backdrop-filter:none;background:#fffaf3;--card-bg:#fffaf3}
.flip .fback{transform:rotateY(180deg)}
.flip:not(.on) .fback,.flip.on .ffront{pointer-events:none}
@media (prefers-color-scheme:dark){.flip .face{background:#241e1a;--card-bg:#241e1a}}
.gtip{font-size:12.5px;color:var(--mute);margin:-6px 0 4px}.gtip b{color:var(--ink)}
.gauge{max-width:300px;margin:0 auto;color:var(--ink)}.gauge svg{display:block;width:100%;overflow:visible}
.gb{opacity:.4;transition:opacity .4s}.gb.on{opacity:1;stroke-width:25;filter:drop-shadow(0 2px 5px rgba(0,0,0,.25))}
.gneedle{transform-origin:120px 124px;transform:rotate(var(--deg));animation:needle 1.6s cubic-bezier(.2,1.4,.35,1) backwards}
@keyframes needle{from{transform:rotate(-90deg)}}
.gt{font-size:10.5px;font-weight:700;fill:var(--mute)}
.gnum{text-align:center;margin-top:4px}.gnum b{display:block;font-size:46px;font-weight:800;letter-spacing:-.05em;line-height:1}
.gw{display:inline-block;margin-top:6px;padding:3px 14px;border-radius:20px;font-size:14px;font-weight:800;color:#fff}
.gw.lv0{background:var(--l0)}.gw.lv1{background:var(--l1);color:#2a1f00}.gw.lv2{background:var(--l2)}.gw.lv3{background:var(--l3)}.gw.lv4{background:var(--l4)}
.gline{text-align:center;font-size:14px;line-height:1.55;margin:12px 4px 2px}
.qchar{width:60px;height:72px;margin:-8px -2px -10px 0;padding:0;background:none;border:0;flex:none;overflow:visible;-webkit-tap-highlight-color:transparent}
.qchar svg{display:block;width:100%;height:100%;overflow:visible;animation:qbob 2.6s ease-in-out infinite}
.qchar .qb{transform-box:fill-box;transform-origin:30% 100%;animation:qwig 2.6s ease-in-out infinite}
.qchar .qe{transform-box:fill-box;transform-origin:center;animation:qblink 4.2s infinite}
.qchar .qf{transform-box:fill-box;transform-origin:50% 100%;animation:flick .45s ease-in-out infinite alternate}
.qchar .qs{animation:drip 2s ease-in infinite}
@keyframes qbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes qwig{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg) scale(1.06)}}
@keyframes qblink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes flick{from{transform:scale(1,1)}to{transform:scale(.88,1.14)}}
.qback{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--chip);display:grid;place-items:center;flex:none}
.qback svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bk-p{font-size:14px;line-height:1.55;margin:0 0 12px}
.bk-scale{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.bk-scale li{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:14px;background:var(--chip)}
.bk-scale li.cur{outline:2px solid var(--ink);background:var(--glass-b)}
.bk-scale i{width:12px;height:12px;border-radius:50%;flex:none}.bk-scale b{display:block;font-size:13.5px}.bk-scale span{font-size:12.5px;color:var(--mute)}
.bk-now{font-size:14px;line-height:1.5;margin:0 0 12px}

/* v1.3 weather widget cards */
.wcard{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;color:#fff;margin-bottom:14px;box-shadow:0 10px 26px rgba(30,20,40,.2)}
.wc-main{position:relative;padding:16px 18px 12px;min-height:172px}
.wc-row{display:flex;justify-content:space-between;align-items:flex-start}
.wc-cond{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:700}.wc-cond .wxi{width:20px;height:20px}
.wc-time{text-align:right;font-size:17px;font-weight:800;line-height:1.1}.wc-time small{display:block;margin-top:2px;font-size:11px;font-weight:700;letter-spacing:.04em;opacity:.82}
.wc-temp{margin-top:6px;font-size:64px;font-weight:300;letter-spacing:-.05em;line-height:1}.wc-temp sup{position:relative;top:6px;font-size:26px;font-weight:300;vertical-align:top}
.wc-hl{margin-top:4px;font-size:12.5px;font-weight:700}.wc-hl small{margin-right:6px;font-weight:600;opacity:.82}
.wc-city{position:absolute;right:18px;bottom:12px;font-size:14px;font-weight:700}
.wc-strip{display:grid;grid-template-columns:repeat(4,1fr);padding:6px;background:rgba(0,0,0,.22)}
.wcs{display:grid;justify-items:center;gap:2px;padding:7px 2px;border:0;border-radius:12px;background:none;color:#fff;font:700 11.5px var(--font)}
.wcs.on{background:rgba(255,255,255,.2)}.wcs .wxi{width:20px;height:20px}.wcs em{font-style:normal;font-size:12px}
.wc-sunhot{background:radial-gradient(circle at 90% 4%,rgba(255,214,102,.95) 0 17%,rgba(255,214,102,.32) 18% 36%,transparent 37%),linear-gradient(135deg,#d9503a,#f0a54a)}
.wc-sun{background:radial-gradient(circle at 88% 0%,#f6d66a 0 18%,rgba(246,214,106,.25) 19% 36%,transparent 37%),linear-gradient(135deg,#25409a,#2f58bd)}
.wc-night{background:radial-gradient(circle at 88% 6%,#f3efdc 0 8%,rgba(243,239,220,.2) 9% 18%,transparent 19%),linear-gradient(135deg,#141846,#2b2f78)}
.wc-rain{background:repeating-linear-gradient(105deg,rgba(255,255,255,.1) 0 1px,transparent 1px 15px),linear-gradient(135deg,#463c96,#5a49a8);animation:rdrift 1.6s linear infinite;background-size:15px 30px,auto}
.wc-heavy{background:repeating-linear-gradient(105deg,rgba(255,255,255,.14) 0 1px,transparent 1px 9px),linear-gradient(135deg,#2a2862,#463d90);animation:rdrift 1s linear infinite;background-size:9px 30px,auto}
@keyframes rdrift{to{background-position:-6px 30px,0 0}}
.wc-cloud{background:radial-gradient(120% 70% at 18% 0%,rgba(255,255,255,.26),transparent 60%),radial-gradient(90% 60% at 100% 30%,rgba(255,255,255,.16),transparent 60%),linear-gradient(135deg,#3a7ddf,#5190ea)}
.wc-mostly{background:radial-gradient(110% 60% at 80% 0%,rgba(255,255,255,.2),transparent 60%),linear-gradient(135deg,#2c58b4,#3d72d2)}
.wc-snow{background:radial-gradient(circle at 22% 30%,#fff 0 2px,transparent 3px),radial-gradient(circle at 70% 18%,#fff 0 3px,transparent 4px),radial-gradient(circle at 86% 55%,#fff 0 2px,transparent 3px),radial-gradient(circle at 46% 62%,#fff 0 2.4px,transparent 3.4px),linear-gradient(135deg,#2f9ae6,#58b6f2)}
.wc-hail{background:radial-gradient(circle at 20% 28%,#fff 0 2px,transparent 3px),radial-gradient(circle at 64% 16%,#fff 0 3px,transparent 4px),radial-gradient(circle at 90% 48%,#fff 0 2px,transparent 3px),radial-gradient(circle at 40% 66%,#fff 0 2.4px,transparent 3.4px),linear-gradient(135deg,#131f4d,#21336b)}
.wc-haze{background:radial-gradient(120% 50% at 20% 112%,rgba(255,255,255,.28),transparent 60%),radial-gradient(90% 40% at 90% 100%,rgba(255,255,255,.2),transparent 60%),linear-gradient(135deg,#df914a,#efb46e)}
.wc-storm{background:linear-gradient(135deg,#231e52,#3d3580)}
.wc-storm::after{content:"";position:absolute;right:26px;top:-6px;width:60px;height:110px;background:linear-gradient(#ffe27a,#ffb42e);clip-path:polygon(60% 0,20% 55%,48% 55%,30% 100%,86% 40%,56% 40%);opacity:.22;z-index:-1}
.wc-fog{background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 14px,transparent 14px 34px),linear-gradient(135deg,#6a7b92,#9aabbf)}
@media (prefers-reduced-motion:reduce){.lm .tree,.lm .flame,.lm .spin,.lm .blink,.qchar svg,.qchar .qb,.qchar .qe,.qchar .qf,.qchar .qs,.gneedle,.wc-rain,.wc-heavy{animation:none!important}}

/* v1.3 buddy stage: the character reacts to the weather. The base styles are the finished pose, so reduced motion shows that pose. */
.bstage-c{padding:0;overflow:hidden;border-radius:24px}
.bstage{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent}
.bstage svg{display:block;width:100%;height:auto;overflow:hidden}
.bstage svg.ch{overflow:visible}
.bcap{margin:0;padding:12px 16px 14px;font-size:14px;font-weight:700;line-height:1.4;color:var(--ink)}
.bstage *{transform-box:view-box;transform-origin:0 0}
.b-bob,.b-calm,.b-calm2,.b-bob2,.b-flap,.b-spl,.b-sun,.b-mug{transform-box:fill-box}
.b-bob{transform-origin:50% 100%;animation:bbob 1.1s ease-in-out infinite}
.b-calm{transform-origin:50% 100%;animation:bbob 3.4s ease-in-out infinite}
.b-calm2{transform-origin:50% 100%;animation:bbob 3.8s ease-in-out infinite}
@keyframes bbob{50%{transform:translateY(-2.5px)}}

/* limbs: every pose is a rotation about the shoulder, hip, elbow or knee */
.ch .a-l{transform:rotate(8deg)}.ch .a-l-lo{transform:rotate(-10deg)}
.ch .a-r{transform:rotate(-8deg)}.ch .a-r-lo{transform:rotate(10deg)}
.ch .l-l{transform:rotate(3deg)}.ch .l-r{transform:rotate(-3deg)}
.ch .l-l-lo,.ch .l-r-lo{transform:rotate(0)}

/* calm: blink and a small wave now and then */
.b-blink{opacity:0;animation:bblink 4.6s linear infinite}
@keyframes bblink{0%,92%,100%{opacity:0}94%,97%{opacity:1}}
.ch.calm .a-r{animation:bwv1 7s ease-in-out infinite}
.ch.calm .a-r-lo{animation:bwv2 7s ease-in-out infinite}
@keyframes bwv1{0%,58%,100%{transform:rotate(-8deg)}68%,92%{transform:rotate(-150deg)}}
@keyframes bwv2{0%,58%,100%{transform:rotate(10deg)}70%{transform:rotate(-34deg)}75%{transform:rotate(20deg)}80%{transform:rotate(-34deg)}85%{transform:rotate(20deg)}90%{transform:rotate(-20deg)}}

/* hot: abaniko in the right hand, left hand on the hip, sweat, flushed cheeks */
.ch.hot .a-r{transform:rotate(-95deg)}
.ch.hot .a-r-lo{transform:rotate(-100deg);animation:bfan .5s ease-in-out infinite alternate}
.hotter .ch.hot .a-r-lo{animation-duration:.3s}
@keyframes bfan{from{transform:rotate(-128deg)}to{transform:rotate(-72deg)}}
.ch.hot .a-l{transform:rotate(40deg)}.ch.hot .a-l-lo{transform:rotate(-75deg)}
.ch.hot .l-l{transform:rotate(7deg)}.ch.hot .l-r{transform:rotate(-7deg)}
.b-air path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;animation:bair .9s ease-in-out infinite}
.b-air path:nth-child(2){animation-delay:.15s}.b-air path:nth-child(3){animation-delay:.3s}
.hotter .b-air path{animation-duration:.6s}
@keyframes bair{0%,100%{opacity:0;transform:translateX(6px)}50%{opacity:.85;transform:translateX(-5px)}}
.b-sw{animation:bsw 1.8s ease-in infinite}.b-sw.s2{animation-delay:.6s}.b-sw.s3{animation-delay:1.2s}
@keyframes bsw{0%{opacity:0;transform:translateY(-4px)}20%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
.b-sun{transform-origin:50% 50%;animation:bspin 30s linear infinite}
@keyframes bspin{to{transform:rotate(360deg)}}
.b-heat{animation:bheat 3s ease-in-out infinite}.b-heat.h2{animation-delay:-1.4s}
@keyframes bheat{50%{transform:translateY(-6px);opacity:.4}}
.bfl{animation:bfall 5.4s linear infinite}
@keyframes bfall{from{transform:translateY(-14px)}to{transform:translateY(130px)}}

/* cold (10s, then holds): shiver, run off, come back wrapped up and smiling */
.b-cold{animation:bcold 10s linear both}
@keyframes bcold{0%,24%{transform:translateX(0);opacity:1}38%{transform:translateX(300px);opacity:1}38.1%,61.9%{transform:translateX(300px);opacity:0}62%{transform:translateX(300px);opacity:1}82%,100%{transform:translateX(0);opacity:1}}
.b-shiv1{animation:bshiv .08s linear 30}
.b-shiv2{animation:bshiv .13s linear 8.2s 14 both}
@keyframes bshiv{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.4px)}75%{transform:translateX(1.4px)}}
.ch.cold .a-r{transform:rotate(40deg)}.ch.cold .a-r-lo{transform:rotate(50deg)}
.ch.cold .a-l{transform:rotate(-40deg)}.ch.cold .a-l-lo{transform:rotate(-50deg)}
.ch.cold .l-l{transform:rotate(-3deg)}.ch.cold .l-r{transform:rotate(3deg)}
.ch.cold .l-l-lo{transform:rotate(8deg)}.ch.cold .l-r-lo{transform:rotate(-8deg)}
.ch.cold .l-l-lo{animation:bknee .1s ease-in-out 0s 24 alternate,bknee .13s ease-in-out 8.2s 14 alternate}
.ch.cold .l-r-lo{animation:bknee .1s ease-in-out 0s 24 alternate-reverse,bknee .13s ease-in-out 8.2s 14 alternate-reverse}
@keyframes bknee{from{transform:rotate(-2deg)}to{transform:rotate(14deg)}}
.ch.cold .l-l{animation:bu1 .17s ease-in-out 2.4s 8 alternate,bu1 .17s ease-in-out 6.2s 12 alternate}
.ch.cold .l-r{animation:bu1 .17s ease-in-out 2.4s 8 alternate-reverse,bu1 .17s ease-in-out 6.2s 12 alternate-reverse}
.ch.cold .l-l-lo{animation:bknee .1s ease-in-out 0s 24 alternate,bk1 .17s ease-in-out 2.4s 8 alternate,bk1 .17s ease-in-out 6.2s 12 alternate,bknee .13s ease-in-out 8.2s 14 alternate}
.ch.cold .l-r-lo{animation:bknee .1s ease-in-out 0s 24 alternate-reverse,bk1 .17s ease-in-out 2.4s 8 alternate-reverse,bk1 .17s ease-in-out 6.2s 12 alternate-reverse,bknee .13s ease-in-out 8.2s 14 alternate-reverse}
.ch.cold .a-l{animation:ba1 .17s ease-in-out 2.4s 8 alternate,ba1 .17s ease-in-out 6.2s 12 alternate}
.ch.cold .a-r{animation:ba1 .17s ease-in-out 2.4s 8 alternate-reverse,ba1 .17s ease-in-out 6.2s 12 alternate-reverse}
.ch.cold .a-l-lo,.ch.cold .a-r-lo{animation:ba2 .17s ease-in-out 2.4s 8 alternate,ba2 .17s ease-in-out 6.2s 12 alternate}
@keyframes bu1{from{transform:rotate(36deg)}to{transform:rotate(-36deg)}}
@keyframes bk1{from{transform:rotate(58deg)}to{transform:rotate(4deg)}}
@keyframes ba1{from{transform:rotate(-42deg)}to{transform:rotate(42deg)}}
@keyframes ba2{from{transform:rotate(-86deg)}to{transform:rotate(-58deg)}}
.b-ovc{animation:bovc 10s linear both}
@keyframes bovc{0%,61.9%{opacity:1}62%,100%{opacity:0}}
.b-ovh{animation:bovh 10s linear both}
@keyframes bovh{0%,61.9%{opacity:0}62%,100%{opacity:1}}
.b-blanket{animation:bblk 10s linear both}
@keyframes bblk{0%,61.9%{opacity:0}62%,100%{opacity:1}}
.b-flap{transform-origin:50% 0%;animation:bflap .45s ease-in-out infinite alternate}
@keyframes bflap{from{transform:skewX(-2deg) translateY(0)}to{transform:skewX(2deg) translateY(.8px)}}
.b-chat{animation:bchat 10s linear both}
@keyframes bchat{0%,3%{opacity:0}5%,22%{opacity:1}24%,100%{opacity:0}}
.b-breath circle{fill:#fff;opacity:0;animation:bbr 1.8s ease-out infinite}
.b-breath circle:nth-child(2){animation-delay:.12s}.b-breath circle:nth-child(3){animation-delay:.24s}
@keyframes bbr{0%{opacity:0;transform:translate(-4px,3px)}25%{opacity:.8}100%{opacity:0;transform:translate(8px,-6px)}}
.b-shadow{animation:bshd 10s linear both}
@keyframes bshd{0%,24%{opacity:.16}38%,61.9%{opacity:0}62%{opacity:0}82%,100%{opacity:.16}}
.b-dust circle{fill:#fff;fill-opacity:.7;opacity:0;animation:bdust .3s ease-out infinite;transform-box:fill-box;transform-origin:50% 50%}
.b-dust{animation:none}
.hot .b-dust{display:none}
@keyframes bdust{0%{opacity:.85;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(-8px,-6px) scale(1.7)}}
.b-dust[style] circle{animation-delay:inherit;animation-iteration-count:inherit}

/* rain (6s, then holds on the window view): umbrella, hurry indoors, sip a hot cup */
.b-out{animation:bout 6.2s linear both}
@keyframes bout{0%,74%{opacity:1}88%,100%{opacity:0}}
.b-in{animation:bin 6.2s linear both}
@keyframes bin{0%,70%{opacity:0}88%,100%{opacity:1}}
.b-rnav{animation:brnav 5s cubic-bezier(.4,0,.6,1) both}
@keyframes brnav{0%,14%{transform:translateX(0);opacity:1}72%{transform:translateX(170px);opacity:1}82%{transform:translateX(172px);opacity:0}100%{transform:translateX(172px);opacity:0}}
.b-bob2{transform-origin:50% 100%;animation:brun .17s ease-in-out .7s 16 alternate}
@keyframes brun{from{transform:translateY(0)}to{transform:translateY(-5px)}}
.ch.umb .a-r{transform:rotate(-150deg)}.ch.umb .a-r-lo{transform:rotate(0)}
.ch.umb .a-l{transform:rotate(14deg)}.ch.umb .a-l-lo{transform:rotate(-20deg)}
.ch.umb .a-l{animation:ba1 .17s ease-in-out .7s 16 alternate}
.ch.umb .a-l-lo{animation:ba2 .17s ease-in-out .7s 16 alternate}
.ch.umb .l-l{animation:bu1 .17s ease-in-out .7s 16 alternate}
.ch.umb .l-r{animation:bu1 .17s ease-in-out .7s 16 alternate-reverse}
.ch.umb .l-l-lo{animation:bk1 .17s ease-in-out .7s 16 alternate}
.ch.umb .l-r-lo{animation:bk1 .17s ease-in-out .7s 16 alternate-reverse}
.b-umb{animation:bumb .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes bumb{from{transform:scale(0)}}
.b-dr{stroke:#e9f2ff;stroke-opacity:.75;stroke-width:1.5;stroke-linecap:round;animation:bdrop .6s linear infinite}
@keyframes bdrop{from{transform:translateY(0)}to{transform:translateY(160px)}}
.b-spl{transform-origin:50% 50%;animation:bspl 1.1s ease-out infinite}
@keyframes bspl{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.b-gd{animation:bgd 5s ease-in infinite}.b-gd.g2{animation-delay:-1.7s}.b-gd.g3{animation-delay:-3.2s}
@keyframes bgd{0%{transform:translateY(0);opacity:.7}100%{transform:translateY(70px);opacity:0}}
.ch.sip .a-r{transform:rotate(-20deg)}.ch.sip .a-r-lo{transform:rotate(190deg);animation:bsip 4s ease-in-out infinite}
@keyframes bsip{0%,50%,100%{transform:rotate(190deg)}62%,80%{transform:rotate(150deg)}}
.ch.sip .a-l{transform:rotate(10deg)}.ch.sip .a-l-lo{transform:rotate(-20deg)}
.b-ovs{animation:bovs 4s ease-in-out infinite}
@keyframes bovs{0%,52%,88%,100%{opacity:0}62%,80%{opacity:1}}
.b-steam path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:0;animation:bst 2.4s ease-out infinite}
.b-steam path:nth-child(2){animation-delay:.5s}.b-steam path:nth-child(3){animation-delay:1s}
@keyframes bst{0%{opacity:0;transform:translateY(8px)}30%{opacity:.7}100%{opacity:0;transform:translateY(-10px)}}
.b-cl{animation:bcl 14s ease-in-out infinite alternate}
@keyframes bcl{to{transform:translateX(150px)}}
.b-tw{animation:btw 2.4s ease-in-out infinite}.b-tw.t2{animation-delay:-.8s}.b-tw.t3{animation-delay:-1.6s}
@keyframes btw{50%{opacity:.25}}
.bstage.rain .b-out{opacity:0}.bstage.rain .b-in{opacity:1}
@media (prefers-reduced-motion:reduce){.bstage *{animation:none!important}.bstage.rain .b-out{opacity:0}.b-chat,.b-air,.b-dust,.b-breath{display:none}.b-ovc{opacity:0}}
.lm .flagw{transform-box:fill-box;transform-origin:0 50%;animation:flagw 1.8s ease-in-out infinite alternate}
@keyframes flagw{from{transform:skewY(-4deg) scaleX(1)}to{transform:skewY(4deg) scaleX(.92)}}
.lm .jet{animation:jet 1.4s ease-in-out infinite alternate}
@keyframes jet{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lm .flagw,.lm .jet{animation:none!important}}
.lm .car{animation-duration:15s;animation-timing-function:linear;animation-iteration-count:infinite}
.lm .cu1{animation-name:caru}.lm .cu2{animation-name:caru;animation-delay:-7s;animation-duration:19s}
.lm .cv1{animation-name:carv}.lm .cv2{animation-name:carv;animation-delay:-9s;animation-duration:17s}
@keyframes caru{0%{transform:translate(0,0);opacity:0}6%{opacity:1}94%{opacity:1}100%{transform:translate(86px,43px);opacity:0}}
@keyframes carv{0%{transform:translate(0,0);opacity:0}6%{opacity:1}94%{opacity:1}100%{transform:translate(-86px,43px);opacity:0}}
@media (prefers-reduced-motion:reduce){.lm .car{animation:none!important}}

/* v1.3.1 water bottle */
.wcx .hd{margin-bottom:8px}
.bottle{flex:none;width:124px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.bottle:active{transform:scale(.97)}
.bottle svg{width:100%;height:auto;display:block;overflow:visible}
.bottle.bump{animation:bump .6s cubic-bezier(.34,1.56,.64,1)}
.wbig{line-height:1.1;margin-bottom:6px}
.wbig b{font-size:30px;font-weight:800;letter-spacing:-.04em}
.wbig span{font-size:14px;font-weight:700;color:var(--mute)}
.wbtns{margin-top:12px;gap:8px;flex-wrap:wrap}
.wbtns .btn{flex:1 1 auto;min-width:0}
.wbtns{flex-wrap:nowrap}
.wbtns .btn{flex:1 1 0;padding-left:6px;padding-right:6px;font-size:13px;white-space:nowrap}

/* ===== v1.3.2 liquid glass: every surface is translucent, blurred, with a bright edge and a soft highlight ===== */
:root{
  --amb1:rgba(255,166,92,.42);--amb2:rgba(92,170,255,.36);--amb3:rgba(120,214,170,.30);--amb4:rgba(190,150,255,.22);
  --lg-fill:linear-gradient(150deg,rgba(255,255,255,.66),rgba(255,255,255,.30) 52%,rgba(255,255,255,.46));
  --lg-edge:rgba(255,255,255,.7);
  --lg-shadow:0 12px 36px rgba(60,44,28,.12),0 2px 6px rgba(60,44,28,.05),inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1.5px 0 rgba(255,255,255,.35),inset 1.5px 0 0 rgba(255,255,255,.4),inset -1.5px 0 0 rgba(255,255,255,.18);
  --lg-blur:blur(26px) saturate(190%) brightness(1.04);
}
@media (prefers-color-scheme:dark){:root{
  --amb1:rgba(255,138,42,.30);--amb2:rgba(60,130,255,.30);--amb3:rgba(63,191,116,.20);--amb4:rgba(150,100,255,.22);
  --lg-fill:linear-gradient(150deg,rgba(70,62,58,.62),rgba(30,26,24,.42) 55%,rgba(52,46,42,.54));
  --lg-edge:rgba(255,255,255,.22);
  --lg-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 1.5px 0 rgba(255,255,255,.28),inset 0 -1.5px 0 rgba(255,255,255,.06),inset 1.5px 0 0 rgba(255,255,255,.1),inset -1.5px 0 0 rgba(255,255,255,.05);
  --lg-blur:blur(26px) saturate(170%) brightness(1.02);
}}
html[data-route="water"]{--amb1:rgba(80,170,255,.46);--amb2:rgba(60,130,235,.36);--amb3:rgba(110,220,220,.34);--amb4:rgba(150,170,255,.24)}
html[data-route="forecast"]{--amb1:rgba(255,200,92,.42);--amb2:rgba(255,150,92,.30)}
html[data-route="alerts"]{--amb1:rgba(240,120,170,.36);--amb2:rgba(255,166,92,.28)}
html[data-route="me"]{--amb1:rgba(110,214,150,.36);--amb2:rgba(92,170,255,.26)}

/* a living colour field behind the glass, so the blur has something to bend */
body::before{inset:-12%;z-index:-1;
  background:radial-gradient(42% 30% at 82% 6%,var(--amb1),transparent 70%),radial-gradient(46% 32% at 8% 38%,var(--amb2),transparent 72%),
             radial-gradient(44% 30% at 92% 72%,var(--amb3),transparent 72%),radial-gradient(40% 28% at 14% 96%,var(--amb4),transparent 72%);
  animation:ambient 26s ease-in-out infinite alternate;will-change:transform}
@keyframes ambient{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,2.5%,0) scale(1.1)}}

.card{background:var(--lg-fill);border:1px solid var(--lg-edge);backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);box-shadow:var(--lg-shadow)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(90% 46% at 14% -8%,rgba(255,255,255,.5),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.14),transparent 26%)}
@media (prefers-color-scheme:dark){.card::before{background:radial-gradient(90% 46% at 14% -8%,rgba(255,255,255,.16),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.05),transparent 26%)}}
.card>*{position:relative;z-index:1}

.day,.back,.tile{background:var(--lg-fill);border:1px solid var(--lg-edge);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--lg-shadow)}
.tile{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(255,255,255,.2),0 4px 14px rgba(60,44,28,.06)}
@media (prefers-color-scheme:dark){.tile{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.18),0 4px 14px rgba(0,0,0,.25)}}
.day[aria-pressed=true]{border-color:var(--ink);box-shadow:var(--lg-shadow),0 0 0 1px var(--ink) inset}
.form input,.form select,.field{background:rgba(255,255,255,.36);border:1px solid var(--lg-edge);box-shadow:inset 0 2px 5px rgba(40,30,20,.08),inset 0 -1px 0 rgba(255,255,255,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media (prefers-color-scheme:dark){.form input,.form select,.field{background:rgba(255,255,255,.07);box-shadow:inset 0 2px 5px rgba(0,0,0,.35)}}

.btn{background:var(--lg-fill);border:1px solid var(--lg-edge);backdrop-filter:blur(18px) saturate(190%);-webkit-backdrop-filter:blur(18px) saturate(190%);
  box-shadow:0 6px 18px rgba(60,44,28,.10),inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1.5px 0 rgba(255,255,255,.3)}
.btn.water{background:linear-gradient(160deg,rgba(96,172,255,.92),rgba(31,122,224,.86));border-color:rgba(255,255,255,.55);box-shadow:0 8px 22px rgba(31,122,224,.32),inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(10,70,160,.25)}
.btn.accent{background:linear-gradient(160deg,rgba(255,160,76,.94),rgba(232,113,10,.9));border-color:rgba(255,255,255,.5);box-shadow:0 8px 22px rgba(232,113,10,.30),inset 0 1.5px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(150,60,0,.22)}
@media (prefers-color-scheme:dark){.btn{box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 1.5px 0 rgba(255,255,255,.22),inset 0 -1.5px 0 rgba(255,255,255,.05)}}

.tabbar{background:var(--lg-fill);border:1px solid var(--lg-edge);backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%);box-shadow:var(--lg-shadow)}
@media (prefers-color-scheme:light){.tabbar{background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.4))}}
.wnow{box-shadow:0 14px 40px rgba(0,0,0,.18),inset 0 1.5px 0 rgba(255,255,255,.4),inset 0 -1.5px 0 rgba(255,255,255,.08);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%)}
.banner{box-shadow:0 8px 22px rgba(0,0,0,.14),inset 0 1.5px 0 rgba(255,255,255,.4),inset 0 -1.5px 0 rgba(0,0,0,.08);border:1px solid rgba(255,255,255,.35)}
.note.info{background:rgba(255,255,255,.34);border:1px solid var(--lg-edge)}

/* the hydration bar is a glass tube with liquid in it */
.wetbar{position:relative;height:18px;border-radius:18px;margin-top:10px;overflow:hidden;background:linear-gradient(180deg,rgba(40,70,120,.14),rgba(255,255,255,.28));
  border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 3px 6px rgba(20,40,80,.22),inset 0 -1px 0 rgba(255,255,255,.7),0 1px 0 rgba(255,255,255,.55),0 6px 16px rgba(31,122,224,.12);
  backdrop-filter:blur(10px) saturate(180%);-webkit-backdrop-filter:blur(10px) saturate(180%)}
.wetbar i{position:relative;display:block;height:100%;min-width:18px;border-radius:18px;overflow:hidden;
  background:linear-gradient(90deg,#a4d6ff,#58aaf8 55%,#2b86ee);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.75),inset 0 -3px 5px rgba(8,60,150,.35),0 0 14px rgba(43,134,238,.45);
  transition:width 1.2s cubic-bezier(.34,1.2,.5,1)}
.wetbar i::before{content:"";position:absolute;left:7px;right:9px;top:2.5px;height:5px;border-radius:5px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.1))}
.wetbar i::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:wetshine 3.8s ease-in-out infinite}
@keyframes wetshine{0%,30%{left:-45%}80%,100%{left:120%}}
@media (prefers-color-scheme:dark){.wetbar{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(255,255,255,.08));border-color:rgba(255,255,255,.22);box-shadow:inset 0 3px 6px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.3)}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}.wetbar i::after{animation:none;display:none}}

.bub{animation:bubup 6s linear infinite;transform-box:fill-box}
@keyframes bubup{0%{transform:translate(0,0);opacity:0}8%{opacity:.9}50%{transform:translate(2px,-62px)}92%{opacity:.8}100%{transform:translate(-1px,-128px);opacity:0}}
@media (prefers-reduced-motion:reduce){.bub{animation:none;opacity:0}}

/* flip card: liquid glass children must not break backface hiding (Safari shows the mirrored front through the back) */
.flip .face::before,.flip .face::after{display:none}
.flip .face>*{position:static;z-index:auto}
.flip .face,.flip .face *{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.flip .face{-webkit-transform-style:flat;transform-style:flat}
.flip .fback{-webkit-transform:rotateY(180deg) translateZ(1px);transform:rotateY(180deg) translateZ(1px)}
.flip .ffront{-webkit-transform:translateZ(1px);transform:translateZ(1px)}
.flip:not(.on) .fback,.flip.on .ffront{visibility:hidden;transition:visibility 0s .45s}
.flip.on .fback,.flip:not(.on) .ffront{visibility:visible;transition:visibility 0s 0s}