.wx-icon{--wx:#a7d5ee;display:inline-grid;place-items:center;position:relative;isolation:isolate;width:48px;height:48px;flex:none;color:var(--wx);vertical-align:middle}
.wx-icon svg{display:block;width:100%;height:100%;overflow:visible}
.wx-icon .solid{fill:color-mix(in srgb,var(--wx) 12%,transparent)}
.wx-icon .rain{animation:wx-rain 1.8s ease-in-out infinite}
.wx-icon .wind{animation:wx-wind 3.4s ease-in-out infinite}
.wx-icon .bolt{animation:wx-glow 4s ease-in-out infinite}
.wx-icon .sun{transform-box:fill-box;transform-origin:center;animation:wx-spin 28s linear infinite}
.wx-icon .needle{transform-origin:24px 28px;animation:wx-needle 5s ease-in-out infinite alternate}
.wx-icon .heat,.wx-icon .water,.wx-icon .dew{animation:wx-water 3.6s ease-in-out infinite alternate}
.wx-chrome{border-radius:14px;background:linear-gradient(140deg,#65727b 0%,#242d34 24%,#10171d 58%,#35444f 100%);box-shadow:inset 0 1px 1px #d5e4ef85,inset 0 -1px 1px #000,0 4px 8px #0005;color:#e2edf4;padding:7px}
.wx-chrome .solid{fill:#94bbd04a;stroke:#d6e9f4}
.wx-chrome::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,#e2f6ff25 45%,#fff5 48%,transparent 60%);background-size:300% 100%;animation:wx-sheen 6s ease-in-out infinite;pointer-events:none}
.wx-chrome svg{filter:drop-shadow(0 1px 1px #000)}
.wx-neon{color:#8fdded}
.wx-neon svg{stroke-width:1.65;filter:drop-shadow(0 0 4px #76cbdc6b)}
.wx-neon .solid{fill:#81d8ed09}
.wx-neon .wind{stroke-dasharray:12 3;animation:wx-flow 4s linear infinite}
.wx-dial{color:#d9e3e7;border-radius:50%;background:radial-gradient(circle at 35% 25%,#313d44,#0c1216 80%);box-shadow:0 2px 8px #0006}
.wx-dial .weather-shape{transform:translate(12px,12px) scale(.5);stroke-width:2.8}
.wx-dial .dial-track{stroke:#677780;stroke-width:.7}
.wx-dial .dial-ticks{stroke:#b6c4cb;stroke-width:2.8;stroke-dasharray:.7 4.4;opacity:.65}
.wx-dial .sweep{stroke:var(--wx);stroke-width:2;transform-origin:24px 24px;animation:wx-dial 8s ease-in-out infinite alternate}
.wx-orbit{border-radius:50%;padding:8px;background:radial-gradient(circle at 28% 22%,#e3f7ff45,transparent 27%),radial-gradient(circle at 50% 85%,color-mix(in srgb,var(--wx) 25%,transparent),#18232c 70%);box-shadow:inset 0 0 0 1px #c3e5f63b,inset 0 -4px 10px #0006,0 4px 10px #0005}
.wx-orbit::after{content:"";position:absolute;inset:-3px;border:1px solid #bedbe526;border-top-color:var(--wx);border-right-color:transparent;border-radius:50%;animation:wx-spin 9s linear infinite}
.wx-orbit::before{content:"";position:absolute;inset:3px;border-radius:50%;border-top:1px solid #ecfaff7a;pointer-events:none}
.wx-orbit svg{stroke-width:2}
.wx-pixel{background:radial-gradient(#829ba129 .6px,transparent .8px);background-size:5px 5px;border-radius:4px;overflow:hidden}
.wx-pixel svg{fill:var(--wx);stroke:none;shape-rendering:crispEdges;animation:wx-pixel 3.6s steps(2,end) infinite}
.wx-pixel::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 42%,#d9ffff38 49%,transparent 56%);background-size:100% 300%;animation:wx-scan 4s linear infinite}
.wx-unavailable{opacity:.4;filter:grayscale(1)}
.wx-unavailable *,.wx-unavailable::after,.wx-unavailable::before,.wx-motion-paused .wx-icon *,.wx-motion-paused .wx-icon::after,.wx-motion-paused .wx-icon::before{animation-play-state:paused!important}
@keyframes wx-rain{0%,100%{transform:translateY(-1px);opacity:.55}55%{transform:translateY(3px);opacity:1}}
@keyframes wx-wind{0%,100%{transform:translateX(-1.5px)}50%{transform:translateX(2px)}}
@keyframes wx-flow{to{stroke-dashoffset:-60}}
@keyframes wx-glow{0%,100%{opacity:.65}50%{opacity:1;fill:color-mix(in srgb,var(--wx) 40%,transparent)}}
@keyframes wx-spin{to{transform:rotate(360deg)}}
@keyframes wx-needle{from{transform:rotate(-12deg)}to{transform:rotate(10deg)}}
@keyframes wx-dial{from{transform:rotate(-110deg)}to{transform:rotate(100deg)}}
@keyframes wx-water{from{opacity:.55;transform:translateY(1px)}to{opacity:1;transform:translateY(-1px)}}
@keyframes wx-sheen{0%,25%{background-position:100% 0}75%,100%{background-position:0 0}}
@keyframes wx-pixel{0%,100%{opacity:.65;transform:translateY(0)}50%{opacity:1;transform:translateY(-1px)}}
@keyframes wx-scan{from{background-position:0 0}to{background-position:0 100%}}
@media(prefers-reduced-motion:reduce){.wx-icon *,.wx-icon::before,.wx-icon::after{animation:none!important}}

html:not([data-motion="full"]) .wx-icon *, html:not([data-motion="full"]) .wx-icon::before, html:not([data-motion="full"]) .wx-icon::after,
html[data-gauges-paused] .wx-icon *, html[data-gauges-paused] .wx-icon::before, html[data-gauges-paused] .wx-icon::after {animation:none!important}

/* Share the live icon artwork and motion settings with the style chooser. */
#gauge-style { display:flex; align-items:center; gap:12px; padding:7px 12px; border:1px solid color-mix(in srgb,var(--accent),var(--line) 65%); border-radius:12px; background:linear-gradient(120deg,color-mix(in srgb,var(--accent),var(--panel) 91%),var(--panel)); color:var(--text); box-shadow:inset 0 1px #ffffff0d,0 3px 12px #0002; font:inherit; text-align:left; cursor:pointer; }
#gauge-style .wx-icon { width:30px; height:30px; box-sizing:border-box; }
#gauge-style .wx-orbit,#gauge-style .wx-chrome { padding:5px; }
#gauge-style small { display:block; margin-bottom:2px; font-size:8px; font-weight:600; letter-spacing:1.4px; color:var(--muted); }
#gauge-style b { display:block; font-size:12px; font-weight:600; }
.gauge-style-chevron { margin-left:8px; color:var(--accent); }
#gauge-style:hover { border-color:var(--accent); }
#gauge-style:focus-visible,#gauge-style-dialog button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
#gauge-style-dialog { width:min(900px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); overflow:auto; box-sizing:border-box; padding:28px; border:1px solid color-mix(in srgb,var(--accent),var(--line) 65%); border-radius:22px; color:var(--text); background:radial-gradient(ellipse at 30% 0,color-mix(in srgb,var(--accent),transparent 91%),transparent 65%),var(--panel); box-shadow:0 30px 100px #0009,inset 0 1px #ffffff12; }
#gauge-style-dialog::backdrop { background:#080c14bb; }
.gauge-style-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.gauge-style-eyebrow { color:var(--accent); font-size:10px; font-weight:700; letter-spacing:2px; }
.gauge-style-heading h2 { margin:8px 0; font:inherit; font-size:27px; font-weight:650; letter-spacing:-.5px; }
.gauge-style-heading p { margin:0; font-size:13px; color:var(--muted); }
.gauge-style-heading form { margin:0; }
.gauge-style-heading button { width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--panel2); color:var(--text); font-size:24px; cursor:pointer; }
.gauge-style-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:26px 0 18px; }
.gauge-style-options > button { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:14px 10px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(150deg,var(--panel2),var(--panel)); color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.gauge-style-options > button:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent),var(--panel) 94%); }
.gauge-style-options > button[aria-pressed=true] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent),0 8px 24px #0003; background:linear-gradient(145deg,color-mix(in srgb,var(--accent),var(--panel2) 82%),var(--panel)); }
.gauge-style-status { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:18px; color:var(--muted); font-size:8px; letter-spacing:1.3px; font-weight:700; }
.gauge-style-check { visibility:hidden; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; color:var(--panel); background:var(--accent); font-size:12px; letter-spacing:0; }
[aria-pressed=true] > .gauge-style-status { color:var(--accent); }
[aria-pressed=true] .gauge-style-check { visibility:visible; }
.gauge-style-demo { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:104px; }
.gauge-style-demo .wx-icon { width:46px; height:46px; box-sizing:border-box; }
.gauge-style-options strong { font-size:13px; font-weight:650; }
.gauge-style-tag { margin-top:6px; font-size:10px; line-height:1.5; color:var(--muted); }
.gauge-style-footnote { margin:0; color:var(--muted); font-size:11px; line-height:1.6; }
@media(max-width:740px) {
  .gauge-style-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:520px) {
  #gauge-style-dialog { padding:20px; border-radius:16px; }
  .gauge-style-heading h2 { font-size:23px; }
  .gauge-style-options { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:20px; }
  .gauge-style-demo { min-height:80px; }
  #gauge-style { gap:8px; padding:5px 9px; }
}