@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap");
.ws40-hud{font-family:'DM Mono',ui-monospace,monospace;background:#070a11;border-radius:20px;padding:20px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.05);color:#e6edf5}
.ws40-hud::before{content:'';position:absolute;top:-120px;left:-80px;width:380px;height:380px;background:radial-gradient(circle,rgba(45,212,191,.16),transparent 70%);pointer-events:none}
.ws40-hud::after{content:'';position:absolute;bottom:-140px;right:-60px;width:420px;height:420px;background:radial-gradient(circle,rgba(99,102,241,.14),transparent 70%);pointer-events:none} .ws40-hud__header{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:1px;color:#8595a8;padding:2px 4px 16px;position:relative;z-index:1;gap:10px;flex-wrap:wrap}
.ws40-hud__title{color:#c6d2e0;font-weight:500}
.ws40-hud__meta{display:flex;align-items:center;gap:14px}
.ws40-hud__time{color:#7e8da0}
.ws40-hud__status{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:1px}
.ws40-hud__status--online{color:#34d399}
.ws40-hud__status--offline{color:#fb7185}
.ws40-hud__status--updating{color:#fbbf24}
.ws40-hud__dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:ws40hudpulse 2s infinite}
@keyframes ws40hudpulse{50%{opacity:.35}} .ws40-hud__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;gap:12px;position:relative;z-index:1} .ws40-hud__card{position:relative;background:rgba(255,255,255,.022);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px 17px;overflow:hidden}
.ws40-hud__card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--ac,#3b82f6),transparent 80%)}
.ws40-hud__card::after{content:'';position:absolute;top:-40px;left:-40px;width:130px;height:130px;background:radial-gradient(circle,var(--gl,transparent),transparent 70%);pointer-events:none}
.ws40-hud__card--feat{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.ws40-hud__card--wide{grid-column:span 2}
.ws40-hud__card--ins{border-left:3px solid var(--ac,#3b82f6)}
.ws40-hud__card--ins::before{display:none}
.ws40-hud__lbl{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:1.6px;color:#7e8da0;margin-bottom:12px;text-transform:uppercase}
.ws40-hud__dotc{width:9px;height:9px;border-radius:3px;background:var(--ac,#3b82f6);box-shadow:0 0 9px var(--ac,#3b82f6);flex:0 0 auto}
.ws40-hud__opt{margin-left:auto;font-size:8.5px;letter-spacing:1px;color:#5b6b80;border:1px solid #2a3647;border-radius:6px;padding:1px 6px}
.ws40-hud__big{font-weight:500;color:#eef3f9;line-height:1;font-size:clamp(1.7rem,4.4vw,2.5rem);letter-spacing:-.5px}
.ws40-hud__card--feat .ws40-hud__big{font-size:clamp(2.9rem,8vw,4rem)}
.ws40-hud__big--s{font-size:clamp(1.4rem,3.6vw,1.9rem)}
.ws40-hud__unit{font-size:.4em;color:#7e8da0;font-weight:400;margin-left:4px;letter-spacing:0}
.ws40-hud__card--feat .ws40-hud__unit{font-size:.28em}
.ws40-hud__txt{font-weight:500;color:#eef3f9;font-size:1.4rem;letter-spacing:-.3px}
.ws40-hud__sub{font-size:11px;color:#8090a3;margin-top:11px;line-height:1.6}
.ws40-hud__sub .ws40-hud__hi,.ws40-hud__hi{color:#aebdcf}
.ws40-hud__sub small{color:#6b7a8d;margin-left:6px}
.ws40-hud__flow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ws40-hud__sep{color:#5f6f84;font-size:1.4rem}
.ws40-hud__tri{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ws40-hud__k{font-size:10px;letter-spacing:1px;color:#748497;text-transform:uppercase}
.ws40-hud__v{font-weight:500;color:#e6edf5;font-size:1.2rem;margin-top:4px} .ws40-hud__v--lg{font-size:clamp(1.4rem,3.6vw,1.9rem);line-height:1.1}
.ws40-hud__v--lg small{font-size:.42em}
.ws40-hud__v small{font-size:.55em;color:#7e8da0;margin-left:2px}
.ws40-hud__quad{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:2px}
.ws40-hud__spark{display:block;width:100%;height:60px;margin-top:14px;opacity:.95}
.ws40-hud__spark--sm{height:38px;margin-top:10px} .ws40-hud__card--feat .ws40-hud__sub{margin-bottom:4px}
.ws40-hud__card--feat .ws40-hud__spark{flex:1 1 auto;height:auto;min-height:72px;margin-top:16px}
.ws40-hud__scale{letter-spacing:.04em}
.ws40-hud__band{color:#6b7a8d}
.ws40-hud__band.is-active{color:var(--ac,#fbbf24);font-weight:500}
.ws40-hud__cond{color:#6b7a8d;letter-spacing:.03em}
.ws40-hud__cond.is-active{color:var(--ac,#aebdcf);font-weight:500}
.ws40-hud__card--empty{opacity:.55}
.ws40-hud__nodata{margin-top:14px;font-size:13px;color:#6b7a8d;letter-spacing:.04em}
.ws40-hud__moonphase{font-size:11px;color:#8090a3;margin-top:2px;letter-spacing:.03em}
.ws40-hud__updated{font-size:11px;color:#6b7a8d;letter-spacing:.03em;white-space:nowrap}
.ws40-hud__trend--up{color:#fb7185}
.ws40-hud__trend--down{color:#60a5fa}
.ws40-hud__trend--flat{color:#aebdcf}
.ws40-hud__card--ins{min-height:120px}
.ws40-hud__scan{position:absolute;left:0;right:0;top:0;height:2px;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(245,165,36,.55),transparent);box-shadow:0 0 8px rgba(245,165,36,.35);opacity:0;animation:ws40hudscan 5s linear infinite}
@keyframes ws40hudscan{0%{top:0;opacity:0}6%{opacity:.85}94%{opacity:.85}100%{top:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.ws40-hud__scan{display:none}}
@media(max-width:560px){
.ws40-hud__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ws40-hud__card--feat{grid-column:span 2;grid-row:auto}
.ws40-hud__card--wide{grid-column:span 2}
} .ws40-hud__live-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 4px;
font-size: 9px;
font-weight: 700;
letter-spacing: .08em;
vertical-align: middle;
color: #9aa4b2;
border: 1px solid currentColor;
opacity: .65;
}
.ws40-hud__live-badge.is-active {
color: #3fb950;
opacity: 1;
} .ws40-hud__card--cam{display:flex;flex-direction:column}
.ws40-hud__card--cam .ws40-hud__cam{flex:1 1 auto;position:relative;min-height:180px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
.ws40-hud__card--cam .ws40-hud__cam .ws40-webcam-wrap{border:0!important;background:transparent!important;padding:0!important;margin:0!important;box-shadow:none!important;border-radius:12px!important;width:100%!important;height:100%!important}
.ws40-hud__card--cam .ws40-hud__cam .ws40-webcam-wrap>:not(img):not(.ws40-rolling-cam){display:none!important}
.ws40-hud__card--cam .ws40-hud__cam .ws40-webcam-img,
.ws40-hud__card--cam .ws40-hud__cam img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;display:block!important;border-radius:12px!important} .ws40-hud__card--cam .ws40-hud__cam .ws40-rolling-cam{border:0!important;background:transparent!important;padding:0!important;margin:0!important;box-shadow:none!important;border-radius:12px!important;width:100%!important;height:100%!important;display:flex!important;flex-direction:column!important}
.ws40-hud__card--cam .ws40-hud__cam .ws40-rolling-cam .ws40-rolling-cam-img{flex:1 1 auto!important;min-height:0!important;height:auto!important;width:100%!important;object-fit:cover!important;border-radius:12px 12px 0 0!important}
.ws40-hud__card--cam .ws40-hud__cam .ws40-rolling-cam .ws40-rolling-cam-bar{flex:0 0 auto;background:rgba(0,0,0,.35);color:rgba(255,255,255,.85);border-radius:0 0 12px 12px} .ws40-hud__fcband{grid-column:1/-1;position:relative;background:rgba(255,255,255,.022);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px 17px;overflow:hidden}
.ws40-hud__fcband::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--ac,#9cc6ee),transparent 80%)}
.ws40-hud__fcband::after{content:'';position:absolute;top:-40px;left:-40px;width:130px;height:130px;background:radial-gradient(circle,var(--gl,transparent),transparent 70%);pointer-events:none} .ws40-hud__fcband .ws40-forecast{background:transparent;border:0;margin:0;padding:0;color:#cdd9ea;font-family:inherit}
.ws40-hud__fcband .ws40-forecast *{font-family:inherit}
.ws40-hud__fcband .ws40-forecast__title{display:none}
.ws40-hud__fcband .ws40-forecast__grid{gap:10px;background:transparent;justify-content:center} .ws40-hud__fcband .ws40-forecast__grid{flex-wrap:wrap!important;overflow-x:visible!important;justify-content:safe center;scroll-snap-type:none}
.ws40-hud__fcband .ws40-forecast__card{background:rgba(8,16,28,.45);border:1px solid rgba(156,198,238,.10);border-radius:12px;box-shadow:none;color:#cdd9ea;flex:1 1 120px!important;min-width:120px!important;max-width:160px!important}
.ws40-hud__fcband .ws40-forecast__card:hover{border-color:rgba(156,198,238,.22);transform:none}
.ws40-hud__fcband .ws40-forecast__day{color:#8aa0bb;letter-spacing:1px}
.ws40-hud__fcband .ws40-forecast__date{color:#6b7a8d}
.ws40-hud__fcband .ws40-forecast__desc{color:#7d8ca3}
.ws40-hud__fcband .ws40-forecast__max{color:#eaf2fc}
.ws40-hud__fcband .ws40-forecast__min,.ws40-hud__fcband .ws40-forecast__sep{color:#7d8ca3}
.ws40-hud__fcband .ws40-forecast__extra{color:#8aa0bb}
.ws40-hud__fcband .ws40-forecast__moon-name{color:#8aa0bb}
.ws40-hud__fcband .ws40-forecast__skeleton{background:rgba(156,198,238,.06)}
.ws40-hud__fcband .ws40-forecast__error{color:#e6a0a0} .ws40-hud__aqi { margin-top: 14px; }
.ws40-hud__aqi-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 11px; border-radius: 999px; color: var(--aqc, #8ea0bd); border: 1px solid var(--aqc, #2b3a52); }
.ws40-hud__aqi-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--aqc, #8ea0bd); }
.ws40-hud__aqi-bar { display: flex; gap: 4px; margin-top: 9px; }
.ws40-hud__aqi-seg { flex: 1; height: 6px; border-radius: 3px; background: var(--sc, #2b3a52); opacity: .25; transition: opacity .2s; }
.ws40-hud__aqi-seg.is-on { opacity: 1; }[class*="ws40"] button,
[class*="ws40"] dl,
[class*="ws40"] dt,
[class*="ws40"] dd,
[class*="ws40"] h1,
[class*="ws40"] h2,
[class*="ws40"] h3,
[class*="ws40"] h4,
[class*="ws40"] h5,
[class*="ws40"] h6,
[class*="ws40"] p,
[class*="ws40"] small,
[class*="ws40"] table,
[class*="ws40"] tr,
[class*="ws40"] td,
[class*="ws40"] th,
[class*="ws40"] ul,
[class*="ws40"] ol,
[class*="ws40"] li {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
text-overflow: clip !important;
font-family: inherit;
font-style: inherit;
text-transform: none;
letter-spacing: normal;
text-decoration: none;
text-shadow: none;
float: none;
list-style: none;
} [class*="ws40"] button,
[class*="ws40"] dl,
[class*="ws40"] dt,
[class*="ws40"] h1,
[class*="ws40"] h2,
[class*="ws40"] h3,
[class*="ws40"] h4,
[class*="ws40"] h5,
[class*="ws40"] h6,
[class*="ws40"] p,
[class*="ws40"] small,
[class*="ws40"] li {
white-space: normal !important;
} [class*="ws40"] button::before,  [class*="ws40"] button::after,
[class*="ws40"] dl::before,      [class*="ws40"] dl::after,
[class*="ws40"] dt::before,      [class*="ws40"] dt::after,
[class*="ws40"] dd::before,      [class*="ws40"] dd::after,
[class*="ws40"] h1::before,      [class*="ws40"] h1::after,
[class*="ws40"] h2::before,      [class*="ws40"] h2::after,
[class*="ws40"] h3::before,      [class*="ws40"] h3::after,
[class*="ws40"] h4::before,      [class*="ws40"] h4::after,
[class*="ws40"] h5::before,      [class*="ws40"] h5::after,
[class*="ws40"] h6::before,      [class*="ws40"] h6::after,
[class*="ws40"] p::before,       [class*="ws40"] p::after,
[class*="ws40"] small::before,   [class*="ws40"] small::after,
[class*="ws40"] li::before,      [class*="ws40"] li::after {
content: none !important;
} .ws40con-rain__svg .ws40con-rain__wave--a { fill: #1f6fd6 !important; }
.ws40con-rain__svg .ws40con-rain__wave--b { fill: #7fb6ee !important; }
.ws40con-rain__svg .ws40con-rain__ring    { fill: none !important; stroke: #8fc0ee !important; }
.ws40con-rain__svg .ws40con-rain__pct     { fill: #0f1c2e !important; }
.ws40con-rain__gauge.is-filled .ws40con-rain__svg .ws40con-rain__pct { fill: #fff !important; }
@supports (fill: color-mix(in srgb, red, blue)) {
.ws40con-rain__svg .ws40con-rain__wave--a { fill: var(--ws40con-blue, #1f6fd6) !important; }
.ws40con-rain__svg .ws40con-rain__wave--b { fill: color-mix(in srgb, var(--ws40con-blue, #1f6fd6) 60%, #fff) !important; }
.ws40con-rain__svg .ws40con-rain__ring    { stroke: color-mix(in srgb, var(--ws40con-blue, #1f6fd6) 40%, #fff) !important; }
.ws40con-rain__svg .ws40con-rain__pct     { fill: var(--ws40con-ink, #0f1c2e) !important; }
} [class*="ws40"] .ws40con-live__badge                              { background: rgba(255,255,255,.55) !important; color: var(--ws40con-blue, #1f6fd6) !important; border: 0 !important; opacity: 1 !important; }
[class*="ws40"] .ws40con-live__badge.is-active                    { background: rgba(255,255,255,.94) !important; color: var(--ws40con-blue, #1f6fd6) !important; }
[class*="ws40"] .ws40con-live__badge .ws40con-live__dot           { background: #9aa4b2 !important; }
[class*="ws40"] .ws40con-live__badge.is-active .ws40con-live__dot { background: #2ea043 !important; }
[class*="ws40"] .ws40con-av-status                                { background: rgba(255,255,255,.94) !important; }
[class*="ws40"] .ws40con-av-status.is-live                        { color: var(--ws40con-blue, #1f6fd6) !important; }
[class*="ws40"] .ws40con-av-status.is-live .ws40con-av-status__dot     { background: #2ea043 !important; }
[class*="ws40"] .ws40con-av-status.is-delayed                    { color: #9a6a08 !important; }
[class*="ws40"] .ws40con-av-status.is-delayed .ws40con-av-status__dot  { background: #e0aa2a !important; } [class*="ws40"] .ws40con-av__bft{ fill:#9aa0a6 !important; }
[class*="ws40"] .ws40con-av__bft[data-bft-force="0"]  { fill:#7FB3E0 !important; }
[class*="ws40"] .ws40con-av__bft[data-bft-force="1"]  { fill:#5BA84F !important; }
[class*="ws40"] .ws40con-av__bft[data-bft-force="2"]  { fill:#5FB84F !important; }
[class*="ws40"] .ws40con-av__bft[data-bft-force="3"]  { fill:#8DB52A !important; }
[class*="ws40"] .ws40con-av__bft[data-bft-force="4"]  { fill:#B6BB22 !important; }
[class*="ws40"] .ws40con-av__bft[data-bft-force="5"]  { fill:#D9BE1F !important; }
[class*="ws40"] .ws40con-av__bft[data-bft-force="6"]  { fill:#F5B731 !important; }
[class*="ws40"] .ws40con-av__bft[data-bft-force="7"]  { fill:#F59331 !important; }
[class*="ws40"] .ws40con-av__bft[data-bft-force="8"]  { fill:#F06B2A !important; }
[class*="ws40"] .ws40con-av__bft[data-bft-force="9"]  { fill:#E8492A !important; }
[class*="ws40"] .ws40con-av__bft[data-bft-force="10"] { fill:#D6322A !important; }
[class*="ws40"] .ws40con-av__bft[data-bft-force="11"] { fill:#B81E2A !important; }
[class*="ws40"] .ws40con-av__bft[data-bft-force="12"] { fill:#8B1424 !important; }
[class*="ws40"] .ws40con-av__bft-sep{ fill:#6f757c !important; }
[class*="ws40"] .ws40con-av__bft-gust{ fill:#e0433d !important; }.ws40-forecast {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 100%;
margin: 0 auto;
}
.ws40-forecast__title {
font-size: 1.1em;
font-weight: 600;
color: #1d2327;
margin: 0 0 14px;
}
.ws40-forecast__grid {
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: visible;
gap: 12px;
padding-bottom: 12px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
justify-content: flex-start;
scrollbar-width: thin;
scrollbar-color: var(--ws40con-blue, #1D9E75) #e0e0e0;
} .ws40-forecast--align-center .ws40-forecast__grid { justify-content: safe center; }
.ws40-forecast--align-right  .ws40-forecast__grid { justify-content: safe flex-end; }
.ws40-forecast__grid::-webkit-scrollbar {
height: 6px;
}
.ws40-forecast__grid::-webkit-scrollbar-track {
background: #e0e0e0;
border-radius: 3px;
}
.ws40-forecast__grid::-webkit-scrollbar-thumb {
background: var(--ws40con-blue, #1D9E75);
border-radius: 3px;
}
.ws40-forecast__grid::-webkit-scrollbar-button {
display: none;
}
.ws40-forecast__card {
flex: 0 0 168px;
min-width: 168px;
max-width: 168px;
scroll-snap-align: start;
}   .ws40-forecast__card {
background: #ffffff;
border: 1px solid #dcdcde;
border-top: 3px solid #1D9E75;
border-radius: 8px;
padding: 14px 12px 12px;
text-align: center;
transition: box-shadow 0.15s ease;
}
.ws40-forecast__card:hover {
box-shadow: 0 2px 8px rgba(0,0,0,.08);
} .ws40-forecast__day {
font-size: 13px;
font-weight: 700;
color: #1d2327;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ws40-forecast__date {
font-size: 11px;
color: #8c8f94;
margin-bottom: 8px;
} .ws40-forecast__icon {
margin-bottom: 4px;
line-height: 1;
}
.ws40-forecast__icon-img {
width: 56px;
height: 56px;
display: inline-block;
}
.ws40-forecast__icon-svg {
width: 64px;
height: 64px;
}
.ws40-forecast__icon-emoji {
font-size: 40px;
display: inline-block;
line-height: 1.1;
} .ws40-forecast__desc {
font-size: 11px;
color: #646970;
margin-bottom: 10px;
min-height: 16px;
line-height: 1.3;
} .ws40-forecast__temps {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
margin-bottom: 8px;
white-space: nowrap;
overflow: visible;
}
.ws40-forecast__max {
font-size: 15px;
font-weight: 700;
color: #c0392b;
}
.ws40-forecast__sep {
font-size: 11px;
color: #c3c4c7;
}
.ws40-forecast__min {
font-size: 15px;
font-weight: 700;
color: #2271b1;
} .ws40-forecast__extras {
display: flex;
flex-direction: column;
gap: 3px;
margin-bottom: 8px;
}
.ws40-forecast__extra {
font-size: 11px;
color: #50575e;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.ws40-forecast__extra-icon {
font-size: 12px;
} .ws40-forecast__moon {
border-top: 1px solid #f0f0f1;
padding-top: 8px;
margin-top: 4px;
}
.ws40-forecast__moon-emoji {
font-size: 18px;
display: block;
line-height: 1.2;
}
.ws40-forecast__moon-name {
font-size: 10px;
color: #8c8f94;
display: block;
margin-top: 2px;
}   .ws40-forecast__loading .ws40-forecast__skeleton {
background: #f6f7f7;
border: 1px solid #dcdcde;
border-top: 3px solid #dcdcde;
border-radius: 8px;
min-height: 200px;
animation: ws40fc-pulse 1.4s ease-in-out infinite;
}
@keyframes ws40fc-pulse {
0%, 100% { opacity: 1; }
50%       { opacity: 0.5; }
} .ws40-forecast__error {
color: #b32d2e;
font-size: 13px;
background: #fef2f2;
border: 1px solid #f7bdbd;
border-radius: 6px;
padding: 10px 14px;
margin: 0;
}   @media (max-width: 480px) {
.ws40-forecast__icon-img {
width: 44px;
height: 44px;
}
.ws40-forecast__icon-emoji {
font-size: 32px;
}
.ws40-forecast__max,
.ws40-forecast__min {
font-size: 14px;
}
}