:root {
  --panel-bg: #101722;
  --panel-card: #182230;
  --accent: #77d9c4;
  --status-text: #ffffff;
}

button, input, select { font: inherit; }
button { cursor: pointer; }

#displayName {
  margin: 0 0 clamp(1rem, 2.5vh, 1.7rem) .2rem;
  max-width: 70vw;
  font-size: clamp(1.5rem, 4.5vw, 3.2rem);
  font-weight: 780;
  letter-spacing: -.025em;
  text-shadow: 0 3px 20px rgba(0, 0, 0, .75);
}

#weatherCard {
  position: absolute;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 8;
  display: grid;
  grid-template-columns: auto auto;
  gap: .12rem .7rem;
  align-items: center;
  min-width: min(21rem, calc(100vw - 2rem));
  padding: 1rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 1rem;
  background: rgba(5, 10, 17, .78);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .38);
  color: white;
  backdrop-filter: blur(14px);
}
#weatherCard[hidden] { display: none; }
#weatherIcon { grid-row: 1 / 3; width: 3.2rem; height: 3.2rem; }
#weatherTemp { font-size: 1.8rem; font-weight: 850; line-height: 1; }
#weatherDescription { color: rgba(255, 255, 255, .82); font-weight: 650; }
#weatherPlace { grid-column: 1 / -1; margin-top: .3rem; color: rgba(255, 255, 255, .62); font-size: .8rem; }

.weather-screen {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(.8rem, 2vh, 1.5rem);
  overflow: hidden;
  padding: clamp(1.2rem, 3vw, 2.6rem);
  color: #fff;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, .2), transparent 32%),
    linear-gradient(145deg, #3f92bd, #185277 62%, #0c2d48);
  isolation: isolate;
}
.weather-screen[hidden] { display: none; }
.weather-screen.weather-night { background: radial-gradient(circle at 15% 12%, #45568f, transparent 32%), linear-gradient(145deg, #182448, #071426 68%, #030a15); }
.weather-screen.weather-cloudy,
.weather-screen.weather-fog { background: radial-gradient(circle at 15% 8%, #b8cad4, transparent 32%), linear-gradient(145deg, #5d7687, #2d485d 68%, #152a3a); }
.weather-screen.weather-rain { background: radial-gradient(circle at 15% 8%, #718da3, transparent 32%), linear-gradient(145deg, #294b65, #102d45 68%, #071928); }
.weather-screen.weather-snow { background: radial-gradient(circle at 15% 8%, #e8f6ff, transparent 30%), linear-gradient(145deg, #91b8cd, #527d99 68%, #294e69); }
.weather-screen.weather-storm { background: radial-gradient(circle at 76% 12%, rgba(191, 174, 255, .38), transparent 25%), linear-gradient(145deg, #353856, #181d35 68%, #080c1b); }
.weather-screen-header,
.weather-layout,
.weather-forecast-row { position: relative; z-index: 2; }
.weather-screen-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.weather-screen-kicker { color: rgba(255, 255, 255, .7); font-size: clamp(.7rem, 1.4vw, .9rem); font-weight: 850; letter-spacing: .2em; text-transform: uppercase; }
.weather-screen-header h1 { margin: .15rem 0 0; font-size: clamp(1.8rem, 4.2vw, 3.4rem); line-height: 1; letter-spacing: -.035em; }
.weather-updated { margin-top: .45rem; color: rgba(255, 255, 255, .64); font-size: clamp(.75rem, 1.5vw, .95rem); }
.weather-close {
  min-height: 2.8rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  padding: .65rem 1.05rem;
  background: rgba(3, 12, 23, .32);
  color: #fff;
  font-weight: 800;
  backdrop-filter: blur(12px);
}
.weather-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr); align-items: center; gap: clamp(1.2rem, 4vw, 4rem); min-height: 0; }
.weather-current { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); }
.weather-current-graphic { width: clamp(8rem, 19vw, 15rem); flex: 0 0 auto; filter: drop-shadow(0 1rem 2rem rgba(0, 0, 0, .18)); }
.weather-current-temp { font-size: clamp(6rem, 16vw, 12rem); font-weight: 900; line-height: .7; letter-spacing: -.09em; text-shadow: 0 .4rem 2rem rgba(0, 0, 0, .22); }
.weather-current-description { margin-top: clamp(1rem, 2vh, 1.5rem); font-size: clamp(1.5rem, 3.8vw, 2.8rem); font-weight: 800; letter-spacing: -.025em; }
.weather-current-feels { margin-top: .3rem; color: rgba(255, 255, 255, .72); font-size: clamp(.9rem, 2vw, 1.25rem); font-weight: 650; }
.weather-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 0; }
.weather-details > div { min-width: 0; padding: clamp(.7rem, 1.6vw, 1rem); border: 1px solid rgba(255, 255, 255, .18); border-radius: .9rem; background: rgba(5, 16, 28, .28); backdrop-filter: blur(12px); }
.weather-details dt { color: rgba(255, 255, 255, .62); font-size: clamp(.65rem, 1.3vw, .82rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.weather-details dd { overflow: hidden; margin: .28rem 0 0; font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.weather-forecast-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, .8fr); gap: 1rem; }
.weather-forecast-panel { min-width: 0; padding: clamp(.75rem, 1.6vw, 1rem); border: 1px solid rgba(255, 255, 255, .18); border-radius: 1rem; background: rgba(4, 14, 26, .3); backdrop-filter: blur(14px); }
.weather-forecast-panel h2 { margin: 0 0 .65rem; color: rgba(255, 255, 255, .7); font-size: clamp(.68rem, 1.4vw, .86rem); letter-spacing: .13em; text-transform: uppercase; }
.weather-hourly { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; }
.weather-hour-card { display: grid; justify-items: center; gap: .12rem; min-width: 0; }
.weather-forecast-time { color: rgba(255, 255, 255, .74); font-size: clamp(.62rem, 1.2vw, .78rem); font-weight: 750; }
.weather-forecast-icon { width: clamp(2.1rem, 4vw, 3.2rem); height: clamp(2.1rem, 4vw, 3.2rem); }
.weather-forecast-temp { font-size: clamp(1rem, 2.2vw, 1.4rem); font-weight: 850; }
.weather-forecast-rain,
.weather-day-rain { color: #bcecff; font-size: clamp(.6rem, 1.15vw, .76rem); font-weight: 750; }
.weather-daily { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.weather-day-card { display: grid; grid-template-columns: 1fr; justify-items: center; gap: .1rem; min-width: 0; }
.weather-day-name { color: rgba(255, 255, 255, .76); font-size: clamp(.64rem, 1.3vw, .8rem); font-weight: 800; }
.weather-day-icon { width: clamp(2rem, 3.5vw, 2.8rem); height: clamp(2rem, 3.5vw, 2.8rem); }
.weather-day-temps { display: flex; gap: .25rem; font-size: clamp(.8rem, 1.5vw, 1rem); }
.weather-day-temps span { color: rgba(255, 255, 255, .58); }
.weather-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.weather-svg-sun { fill: #ffd65a; }
.weather-svg-sun path { fill: none; stroke: #ffe58e; stroke-linecap: round; stroke-width: 3; }
.weather-svg-moon { fill: #eef5ff; }
.weather-svg-cloud { fill: #eef6fa; stroke: rgba(38, 72, 94, .28); stroke-width: 1.5; }
.weather-svg-rain,
.weather-svg-snow,
.weather-svg-fog { fill: none; stroke: #aee9ff; stroke-linecap: round; stroke-width: 3; }
.weather-svg-snow { stroke: #f4fbff; stroke-width: 2; }
.weather-svg-fog { stroke: rgba(245, 251, 255, .85); stroke-width: 4; }
.weather-svg-lightning { fill: #ffe45f; }
.weather-sky-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; opacity: .72; pointer-events: none; }
.weather-orb { position: absolute; top: -8vmin; right: 5vw; width: 34vmin; height: 34vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 230, 128, .95), rgba(255, 196, 65, .45) 38%, transparent 69%); filter: blur(.2px); }
.weather-night .weather-orb { background: radial-gradient(circle at 36% 36%, #f4f7ff, #b8c5e8 35%, rgba(130, 153, 205, .14) 62%, transparent 70%); }
.weather-cloud { position: absolute; width: 32vw; height: 11vw; border-radius: 999px; background: rgba(236, 247, 252, .25); filter: blur(1px); animation: weatherFloat 18s ease-in-out infinite alternate; }
.weather-cloud::before,
.weather-cloud::after { content: ''; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }
.weather-cloud::before { left: 12%; width: 38%; height: 165%; }
.weather-cloud::after { right: 14%; width: 30%; height: 130%; }
.weather-cloud-one { top: 20%; right: -6%; }
.weather-cloud-two { bottom: 23%; left: -10%; width: 25vw; opacity: .55; animation-delay: -7s; }
.weather-clear .weather-cloud-one,
.weather-clear .weather-cloud-two { opacity: .12; }
.weather-particles { position: absolute; inset: -20% 0 0; opacity: 0; }
.weather-rain .weather-particles,
.weather-storm .weather-particles { opacity: .38; background-image: repeating-linear-gradient(105deg, transparent 0 23px, rgba(170, 229, 255, .65) 24px 26px, transparent 27px 46px); animation: weatherRain .65s linear infinite; }
.weather-snow .weather-particles { opacity: .65; background-image: radial-gradient(circle, #fff 0 2px, transparent 2.5px), radial-gradient(circle, #fff 0 1.5px, transparent 2px); background-position: 0 0, 28px 35px; background-size: 65px 65px, 85px 85px; animation: weatherSnow 8s linear infinite; }
.weather-fog .weather-particles { inset: 22% -10%; opacity: .5; background: repeating-linear-gradient(0deg, transparent 0 7vh, rgba(240, 249, 252, .2) 8vh 10vh, transparent 11vh 14vh); filter: blur(8px); animation: weatherFog 12s ease-in-out infinite alternate; }
.weather-storm .weather-orb { animation: weatherFlash 6s steps(1) infinite; }
body.weather-screen-open #controls { opacity: 0 !important; pointer-events: none !important; }

@keyframes weatherFloat { to { transform: translate3d(-3vw, 1vh, 0); } }
@keyframes weatherRain { to { transform: translate3d(-28px, 46px, 0); } }
@keyframes weatherSnow { to { transform: translate3d(25px, 65px, 0); } }
@keyframes weatherFog { to { transform: translateX(5vw); } }
@keyframes weatherFlash { 49%, 53% { opacity: 1; } 50%, 52% { opacity: .2; } }

/* Steampunk weather instruments */
.weather-screen {
  --brass-light: #f0ca72;
  --brass: #b87925;
  --brass-dark: #55300f;
  --copper: #9e4f24;
  --enamel: #073a43;
  --enamel-deep: #031f27;
  --ivory: #fff4d0;
  border: .55rem solid #4a260d;
  padding: clamp(1rem, 2.6vw, 2.2rem);
  background:
    radial-gradient(circle at 78% 12%, rgba(240, 188, 86, .12), transparent 24%),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #0d5360, #07343e 55%, #031d26);
  box-shadow: inset 0 0 0 2px var(--brass-light), inset 0 0 0 6px var(--brass), inset 0 0 4rem #010d12;
  font-family: Georgia, "Times New Roman", serif;
}
.weather-screen::before {
  content: '';
  position: absolute;
  inset: .45rem;
  z-index: 1;
  border: 2px solid rgba(242, 197, 102, .72);
  border-radius: .6rem;
  box-shadow: inset 0 0 0 2px #4b270e, 0 0 0 1px #1d1008;
  pointer-events: none;
}
.weather-screen.weather-night { background: radial-gradient(circle at 78% 12%, rgba(170, 182, 236, .12), transparent 24%), repeating-linear-gradient(112deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 7px), linear-gradient(145deg, #182a43, #071d2a 60%, #020b12); }
.weather-screen.weather-cloudy,
.weather-screen.weather-fog { background: radial-gradient(circle at 78% 12%, rgba(206, 219, 215, .12), transparent 24%), repeating-linear-gradient(112deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 7px), linear-gradient(145deg, #3d5558, #17373e 60%, #09232a); }
.weather-screen.weather-rain { background: radial-gradient(circle at 78% 12%, rgba(135, 198, 214, .12), transparent 24%), repeating-linear-gradient(112deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 7px), linear-gradient(145deg, #173f4c, #092b36 60%, #031821); }
.weather-screen.weather-snow { background: radial-gradient(circle at 78% 12%, rgba(238, 248, 244, .18), transparent 24%), repeating-linear-gradient(112deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 7px), linear-gradient(145deg, #55777a, #284d54 60%, #12333b); }
.weather-screen.weather-storm { background: radial-gradient(circle at 78% 12%, rgba(183, 153, 231, .18), transparent 24%), repeating-linear-gradient(112deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 7px), linear-gradient(145deg, #303246, #151c2c 60%, #070b14); }
.weather-screen-kicker {
  display: inline-block;
  border: 2px solid var(--brass-dark);
  border-radius: 999px;
  padding: .25rem .8rem;
  color: #241304;
  background: linear-gradient(#f2d58a, #a96922);
  box-shadow: inset 0 0 0 1px #ffe6a7, 0 2px 0 #2d1708;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .16em;
  text-shadow: 0 1px rgba(255, 255, 255, .35);
}
.weather-screen-header h1 {
  display: inline-block;
  max-width: calc(100vw - 13rem);
  margin-top: .35rem;
  border: 3px double var(--brass-dark);
  border-radius: .55rem;
  padding: .25rem .75rem .35rem;
  color: #201306;
  background: linear-gradient(100deg, #d09b43, #f0d48e 45%, #a86625);
  box-shadow: inset 0 0 0 1px rgba(255, 241, 191, .65), 0 .25rem .8rem rgba(0, 0, 0, .3);
  font-size: clamp(1.45rem, 3.3vw, 2.8rem);
  letter-spacing: -.02em;
  text-shadow: 0 1px rgba(255, 255, 255, .45);
}
.weather-updated { margin-left: .75rem; color: rgba(255, 244, 208, .68); font-family: ui-sans-serif, system-ui, sans-serif; }
.weather-close {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 3.25rem;
  border: 3px double var(--brass-dark);
  padding: .25rem .28rem .25rem .85rem;
  color: #2b1705;
  background: linear-gradient(#f1d58e, #a96b25);
  box-shadow: inset 0 0 0 1px #ffe8ac, 0 .25rem .8rem rgba(0, 0, 0, .35);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  text-shadow: 0 1px rgba(255, 255, 255, .35);
}
.weather-countdown { width: 2.55rem; height: 2.55rem; transform: rotate(-90deg); }
.weather-countdown circle { fill: rgba(28, 14, 4, .18); stroke-width: 3; }
.weather-countdown-track { stroke: rgba(70, 36, 10, .35); }
.weather-countdown-progress { stroke: #4c280e; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation: weatherCountdown 30s linear forwards; }
.weather-countdown path { fill: none; stroke: #321906; stroke-linecap: round; stroke-width: 3; transform: rotate(90deg); transform-origin: center; }
.weather-current { position: relative; border: 4px double var(--brass); border-radius: .8rem; padding: clamp(.8rem, 1.8vw, 1.35rem); background: radial-gradient(circle at 25% 35%, rgba(12, 86, 91, .9), transparent 38%), linear-gradient(145deg, rgba(3, 52, 59, .96), rgba(2, 27, 34, .94)); box-shadow: inset 0 0 0 2px var(--brass-dark), inset 0 0 2rem rgba(0, 0, 0, .55), 0 .5rem 1.2rem rgba(0, 0, 0, .3); }
.weather-current-temp { color: var(--ivory); font-family: Georgia, "Times New Roman", serif; text-shadow: 0 2px #50300f, 0 .45rem 1.5rem #000; }
.weather-current-description { color: var(--ivory); text-shadow: 0 2px #261507; }
.weather-current-feels { color: rgba(255, 244, 208, .76); font-family: ui-sans-serif, system-ui, sans-serif; }
.weather-current-graphic { filter: drop-shadow(0 .35rem 0 #4b280d) drop-shadow(0 1rem 1.5rem rgba(0, 0, 0, .3)); }
.weather-svg-sun { fill: #d8992e; stroke: #6f3a0e; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: weatherSunTurn 20s linear infinite; }
.weather-svg-sun path { stroke: #e9b84f; }
.weather-svg-moon { fill: #ddd2af; stroke: #62431d; stroke-width: 2; }
.weather-svg-cloud { fill: #c7c2ad; stroke: #6d5940; stroke-width: 2; filter: drop-shadow(0 3px 0 #4a371f); animation: weatherCloudBreathe 5s ease-in-out infinite; }
.weather-svg-rain { stroke: #60c5db; stroke-dasharray: 4 3; animation: weatherRainGauge .8s linear infinite; }
.weather-svg-snow { stroke: #f3ead1; animation: weatherSnowGauge 2s ease-in-out infinite alternate; }
.weather-svg-fog { stroke: #c8c2aa; stroke-dasharray: 14 5; animation: weatherFogGauge 4s linear infinite; }
.weather-svg-lightning { fill: #ffd05c; filter: drop-shadow(0 0 5px #ffca3f); animation: weatherLightningGauge 4s steps(1) infinite; }
.weather-details > div,
.weather-forecast-panel {
  border: 4px double var(--brass);
  border-radius: .65rem;
  background: linear-gradient(110deg, rgba(4, 52, 58, .96), rgba(2, 30, 37, .94));
  box-shadow: inset 0 0 0 2px var(--brass-dark), inset 0 0 1.25rem rgba(0, 0, 0, .4), 0 .35rem .8rem rgba(0, 0, 0, .28);
}
.weather-details > div { position: relative; min-height: 4.6rem; padding-left: 4.5rem; }
.weather-details dt,
.weather-forecast-panel h2 {
  color: var(--brass-light);
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 1px #241204;
}
.weather-details dd { color: var(--ivory); font-family: ui-sans-serif, system-ui, sans-serif; }
.weather-forecast-panel { position: relative; }
.weather-forecast-panel::before,
.weather-forecast-panel::after,
.weather-current::before,
.weather-current::after { content: ''; position: absolute; width: .48rem; height: .48rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe09a, #9d5c1c 52%, #361b08 57%); box-shadow: 0 1px 2px #000; }
.weather-forecast-panel::before,
.weather-current::before { top: .35rem; left: .35rem; }
.weather-forecast-panel::after,
.weather-current::after { right: .35rem; bottom: .35rem; }
.weather-hour-card + .weather-hour-card,
.weather-day-card + .weather-day-card { border-left: 1px solid rgba(221, 164, 72, .35); }
.weather-forecast-time,
.weather-day-name { color: #e8ca86; }
.weather-forecast-temp,
.weather-day-temps { color: var(--ivory); }
.weather-forecast-rain,
.weather-day-rain { color: #71d2e5; }

.weather-details > div::before,
.weather-details > div::after { content: ''; position: absolute; pointer-events: none; }
.weather-detail-today::before { left: 1.45rem; top: .55rem; width: .68rem; height: 2.8rem; border: 3px solid #a76b2a; border-radius: 999px; background: linear-gradient(to top, #d64f28 var(--temperature-level), rgba(235, 222, 181, .16) var(--temperature-level)); box-shadow: inset 0 0 0 2px #261508, 0 0 0 1px #f0c56d; animation: weatherThermometer 1.4s ease-out; }
.weather-detail-today::after { left: 1.18rem; bottom: .5rem; width: 1.35rem; height: 1.35rem; border: 3px solid #a76b2a; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #ff9860, #b92e18 55%, #4b150d 60%); box-shadow: 0 0 0 1px #f0c56d; }
.weather-detail-precip::before { left: 1.25rem; top: .55rem; width: 1.35rem; height: 3.15rem; border: 3px solid #a76b2a; border-radius: .25rem .25rem .7rem .7rem; background: linear-gradient(to top, #42b8d6 var(--precip-level), rgba(218, 242, 236, .12) var(--precip-level)); box-shadow: inset 0 0 0 2px #1a2926, 0 0 0 1px #f0c56d; animation: weatherTubeFill 1.4s ease-out; }
.weather-detail-precip::after { left: 1.08rem; top: .3rem; width: 1.7rem; height: .35rem; border: 2px solid #a76b2a; border-radius: 999px; background: #dfbd73; }
.weather-detail-humidity::before { left: .78rem; top: .55rem; width: 3rem; height: 3rem; border: 3px double #d09a45; border-radius: 50%; background: conic-gradient(from 220deg, #316f73, #74c7cf 65%, #efe0aa 66% 72%, #142e33 73%); box-shadow: inset 0 0 0 5px #092a31, 0 0 0 1px #3a200c; }
.weather-detail-humidity::after { left: 2.16rem; top: 1.95rem; width: 1.15rem; height: .12rem; border-radius: 999px; background: var(--ivory); box-shadow: 0 0 4px #000; transform: rotate(var(--humidity-angle)); transform-origin: .1rem 50%; animation: weatherNeedleSweep 1.2s ease-out; }
.weather-detail-wind::before { left: .85rem; top: .62rem; width: 2.9rem; height: 2.9rem; border: 3px double #d09a45; border-radius: 50%; background: conic-gradient(from 8deg, transparent 0 10%, #b9752c 11% 23%, transparent 24% 35%, #b9752c 36% 48%, transparent 49% 60%, #b9752c 61% 73%, transparent 74% 85%, #b9752c 86% 98%, transparent 99%); box-shadow: inset 0 0 0 5px #092a31, 0 0 0 1px #3a200c; animation: weatherWindFan var(--wind-spin) linear infinite; }
.weather-detail-wind::after { left: 2.1rem; top: 1.87rem; width: .55rem; height: .55rem; border: 2px solid #4d290d; border-radius: 50%; background: #e0aa50; }
.weather-detail-sunrise::before,
.weather-detail-sunset::before { left: .9rem; top: .88rem; width: 2.8rem; height: 1.4rem; border-radius: 2.8rem 2.8rem 0 0; background: repeating-conic-gradient(from 250deg at 50% 100%, #eebc4e 0 8deg, transparent 9deg 20deg); animation: weatherSunLift 2.4s ease-out; }
.weather-detail-sunrise::after,
.weather-detail-sunset::after { left: .7rem; top: 2.35rem; width: 3.2rem; height: .18rem; border-radius: 999px; background: linear-gradient(90deg, transparent, #e4b85f 20% 80%, transparent); box-shadow: 0 .45rem 0 rgba(228, 184, 95, .45); }
.weather-detail-sunset::before { filter: sepia(.35) saturate(1.4); transform: translateY(.45rem); animation-direction: reverse; }

.weather-pipe { position: absolute; height: .7rem; border: 2px solid #3c1d08; border-radius: 999px; background: linear-gradient(#f0c86e, #9b541d 48%, #4c260d 52%, #bd7228); box-shadow: 0 .2rem .35rem rgba(0, 0, 0, .45); }
.weather-pipe::before,
.weather-pipe::after { content: ''; position: absolute; top: -.28rem; width: .45rem; height: 1.1rem; border: 2px solid #452309; background: linear-gradient(90deg, #754015, #e0a64c, #61320f); }
.weather-pipe::before { left: 12%; }
.weather-pipe::after { right: 18%; }
.weather-pipe-top { top: .8rem; left: 18%; right: 11%; }
.weather-pipe-bottom { bottom: .75rem; left: 8%; right: 22%; }
.weather-gear { position: absolute; border: .55rem dotted #b87528; border-radius: 50%; background: repeating-conic-gradient(#c98531 0 10deg, #5d3010 11deg 20deg); box-shadow: inset 0 0 0 .65rem #1f3a39, inset 0 0 0 .8rem #d4a350, 0 .3rem .6rem rgba(0, 0, 0, .4); opacity: .34; animation: weatherGearTurn 26s linear infinite; }
.weather-gear::after { content: ''; position: absolute; inset: 34%; border: 3px solid #d1a04d; border-radius: 50%; background: #173c3e; }
.weather-gear-one { right: 2%; bottom: 9%; width: 12rem; height: 12rem; }
.weather-gear-two { left: -3%; top: 25%; width: 8rem; height: 8rem; animation-direction: reverse; animation-duration: 18s; }
.weather-steam { position: absolute; right: 2.5%; top: 9%; width: 7rem; height: 5rem; }
.weather-steam span { position: absolute; bottom: 0; width: 2rem; height: 2rem; border: 2px solid rgba(238, 225, 184, .3); border-radius: 50%; opacity: 0; animation: weatherSteam 4.8s ease-out infinite; }
.weather-steam span:nth-child(2) { left: 1.7rem; animation-delay: 1.3s; }
.weather-steam span:nth-child(3) { left: 3.1rem; animation-delay: 2.6s; }
.weather-cloud { border: 2px solid rgba(164, 135, 80, .22); background: linear-gradient(rgba(218, 210, 179, .2), rgba(92, 107, 101, .18)); box-shadow: inset 0 -5px 0 rgba(62, 42, 21, .12); }
.weather-orb { filter: sepia(.3) drop-shadow(0 0 1rem rgba(238, 171, 54, .25)); }

@keyframes weatherCountdown { to { stroke-dashoffset: 100; } }
@keyframes weatherSunTurn { to { transform: rotate(360deg); } }
@keyframes weatherCloudBreathe { 50% { transform: translateY(-1.5px); } }
@keyframes weatherRainGauge { to { stroke-dashoffset: -14; } }
@keyframes weatherSnowGauge { to { opacity: .55; } }
@keyframes weatherFogGauge { to { stroke-dashoffset: -38; } }
@keyframes weatherLightningGauge { 47%, 51% { opacity: 1; } 48%, 50% { opacity: .2; } }
@keyframes weatherThermometer { from { background-size: 100% 8%; } }
@keyframes weatherTubeFill { from { clip-path: inset(100% 0 0); } }
@keyframes weatherNeedleSweep { from { transform: rotate(-120deg); } }
@keyframes weatherWindFan { to { transform: rotate(360deg); } }
@keyframes weatherSunLift { from { transform: translateY(.8rem); opacity: .25; } }
@keyframes weatherGearTurn { to { transform: rotate(360deg); } }
@keyframes weatherSteam { 0% { transform: translate(0, 0) scale(.35); opacity: 0; } 18% { opacity: .35; } 100% { transform: translate(-1rem, -4rem) scale(1.7); opacity: 0; } }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .weather-screen { overflow-y: auto; grid-template-rows: auto auto auto; }
  .weather-layout,
  .weather-forecast-row { grid-template-columns: 1fr; }
  .weather-current { justify-content: center; }
  .weather-current-graphic { width: clamp(6rem, 25vw, 10rem); }
  .weather-current-temp { font-size: clamp(5rem, 23vw, 8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .weather-cloud,
  .weather-particles,
  .weather-storm .weather-orb,
  .weather-svg-sun,
  .weather-svg-cloud,
  .weather-svg-rain,
  .weather-svg-snow,
  .weather-svg-fog,
  .weather-svg-lightning,
  .weather-details > div::before,
  .weather-details > div::after,
  .weather-gear,
  .weather-steam span,
  .weather-countdown-progress { animation: none; }
}

#controls { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 2rem); }
#controls button[aria-pressed="true"] { background: var(--accent); color: #07100e; }

body.picture-only .topline,
body.picture-only .clock-block,
body.picture-only .art-credit,
body.picture-only #weatherCard { display: none !important; }
body.picture-only.weather-periodic #weatherCard:not([hidden]) { display: grid !important; }
body.picture-only .scrim { opacity: 0; }
body.picture-only #artwork.loaded { opacity: 1; }
body.picture-only #controls { opacity: 0; pointer-events: none; }
body.picture-only.controls-awake #controls,
body.settings-open #controls { opacity: 1; pointer-events: auto; }

#settingsBackdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(4px);
}
#settingsBackdrop[hidden] { display: none; }
#settingsPanel {
  position: absolute;
  inset: 0 0 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(42rem, 100vw);
  height: 100%;
  background: var(--panel-bg);
  color: #f7f9fb;
  box-shadow: -18px 0 55px rgba(0, 0, 0, .42);
}
.settings-header, .settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(10, 15, 23, .92);
}
.settings-header { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.settings-footer { border-top: 1px solid rgba(255, 255, 255, .12); }
.settings-header h1 { margin: .08rem 0 0; font-size: 1.45rem; }
.settings-kicker { color: var(--accent); font-size: .7rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.settings-body { overflow-y: auto; padding: 1rem 1.2rem 4rem; overscroll-behavior: contain; }
.settings-section { margin: 0 0 1rem; padding: 1rem; border: 1px solid rgba(255, 255, 255, .11); border-radius: 1rem; background: var(--panel-card); }
.settings-section h2 { margin: 0 0 .9rem; font-size: 1.05rem; }
.field-grid { display: grid; gap: .85rem; }
.field-grid.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; gap: .4rem; min-width: 0; color: rgba(255, 255, 255, .78); font-size: .82rem; font-weight: 700; }
.field input[type="text"], .field select {
  width: 100%;
  min-height: 2.8rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: .7rem;
  padding: .62rem .72rem;
  outline: none;
  background: #0c131d;
  color: white;
}
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(119, 217, 196, .14); }
.color-field input { width: 100%; height: 2.8rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: .7rem; padding: .22rem; background: #0c131d; }
.display-style-grid { margin-top: .85rem; }
.identity-preview {
  display: grid;
  justify-items: center;
  gap: .15rem;
  min-height: 6.4rem;
  margin-top: .85rem;
  padding: .85rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: .8rem;
  background: linear-gradient(145deg, #29394d, #0a111a);
  text-align: center;
}
.identity-preview span { max-width: 100%; font-size: 1.05rem; font-weight: 780; overflow-wrap: anywhere; }
.identity-preview strong { font-size: 2.35rem; line-height: 1; letter-spacing: -.055em; }
.toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.toggle { display: flex; align-items: center; gap: .55rem; min-height: 2.8rem; padding: .65rem .75rem; border-radius: .7rem; background: #0c131d; color: rgba(255, 255, 255, .88); font-size: .86rem; font-weight: 680; }
.toggle.prominent { margin-bottom: .85rem; background: rgba(119, 217, 196, .1); }
.toggle input { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); }
.field-note { margin: .7rem 0 0; color: rgba(255, 255, 255, .55); font-size: .76rem; line-height: 1.45; }
.status-preview { display: grid; justify-items: center; gap: .1rem; margin-top: .9rem; padding: .8rem; border-radius: .8rem; background: #c17400; color: white; }
.status-preview span { font-size: .65rem; font-weight: 850; letter-spacing: .16em; }
.status-preview strong { font-size: 1.7rem; line-height: 1; }
.theme-fieldset { margin: .9rem 0 0; border: 0; padding: 0; }
.theme-fieldset legend { margin-bottom: .55rem; color: rgba(255, 255, 255, .78); font-size: .82rem; font-weight: 700; }
.theme-selector { display: flex; flex-wrap: wrap; gap: .45rem; }
.theme-chip { display: flex; align-items: center; gap: .35rem; padding: .45rem .6rem; border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px; background: #0c131d; font-size: .75rem; }
.theme-chip input { accent-color: var(--accent); }
.button-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .9rem; }
.file-button, .secondary-button, .danger-button, .primary-button, .icon-button {
  min-height: 2.7rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: .72rem;
  padding: .62rem .8rem;
  background: #202c3b;
  color: white;
  font-size: .82rem;
  font-weight: 760;
}
.file-button { display: inline-flex; align-items: center; cursor: pointer; }
.secondary-button:is(a) { display: inline-flex; align-items: center; text-decoration: none; }
.field-note a { color: var(--accent); }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.primary-button { margin-left: auto; border-color: transparent; background: var(--accent); color: #07100e; }
.danger-button { color: #ff9aa4; }
.icon-button { background: transparent; }

#toast {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 80;
  transform: translateX(-50%);
  max-width: min(32rem, calc(100vw - 2rem));
  padding: .75rem 1rem;
  border-radius: 999px;
  background: rgba(7, 12, 18, .92);
  color: white;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .45);
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
}
#toast[hidden] { display: none; }

@media (max-width: 620px) {
  .field-grid.two-column, .toggle-grid { grid-template-columns: 1fr; }
  #controls { top: .55rem; right: .55rem; }
  #controls button { padding-inline: .65rem; }
  .settings-body { padding-inline: .8rem; }
  .settings-section { padding: .85rem; }
}