*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:"Courier New",monospace;background:#f7f4e8}body{touch-action:none}button{font:inherit}#world{position:relative;width:100vw;height:100vh;overflow:hidden;cursor:crosshair;user-select:none;background:linear-gradient(to bottom,#f8f2df 0%,#eef2e7 45%,#c8ecfa 100%)}.dir{position:absolute;z-index:30;font-size:11px;opacity:.5;pointer-events:none}.nw{top:4%;left:3%}.n{top:4%;left:50%}.ne{top:4%;right:3%}.w{top:50%;left:3%}.e{top:50%;right:3%}.sw{bottom:4%;left:3%}.s{bottom:4%;left:50%}.se{bottom:4%;right:3%}#instructions{position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,0);margin:0;font-size:12px;pointer-events:none;transition:opacity .25s;white-space:nowrap}#instructions.is-hidden{opacity:0}
#place-search{position:absolute;z-index:50;left:50%;bottom:6.4%;transform:translateX(-50%);display:flex;align-items:center;width:min(230px,46vw);height:25px;border-bottom:1px solid rgba(17,17,17,.58);background:rgba(247,243,237,.48);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);cursor:text;user-select:auto}
#place-search input{min-width:0;flex:1;height:100%;padding:1px 5px;border:0;outline:0;background:transparent;color:#111;font:10px/1 "Courier New",monospace}
#place-search input::placeholder{color:rgba(17,17,17,.52)}
#place-search button{width:25px;height:25px;padding:0;border:0;background:transparent;color:#111;font:13px/1 "Courier New",monospace;cursor:pointer}
#place-search-status{position:absolute;left:0;top:100%;width:100%;margin:3px 0 0;font-size:8px;text-align:center;opacity:.62;pointer-events:none}
#place-search.is-busy{opacity:.62}
#clear-button{position:absolute;z-index:40;right:20px;bottom:16px;border:0;background:transparent;font-size:10px;text-transform:uppercase;cursor:pointer;opacity:0;pointer-events:none}#world.has-windows #clear-button{opacity:.65;pointer-events:auto}

.sky-window{--header:22px;--frame-pad:5px;--content-pad:18px;--radius:20px;--tab-w:88px;--tab-r:16px;--shoulder:22px;--line:#111;--paper:#f7f3ed;--button:15px;--title:24px;--stats:12px;--pane-w:76px;position:absolute;z-index:5;min-width:90px;min-height:90px;overflow:visible;pointer-events:auto;background:transparent;animation:windowIn .25s ease both;filter:drop-shadow(0 8px 14px rgba(0,0,0,.05))}.window-frame{position:absolute;z-index:0;left:0;top:calc(-1 * var(--header));width:100%;height:calc(100% + var(--header));overflow:visible;pointer-events:none}.window-frame path{fill:var(--paper);stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}.window-drag-handle{position:absolute;z-index:10;left:calc(var(--button) + 8px);right:8px;top:calc(-1 * var(--header));height:var(--header);cursor:grab;touch-action:none}.window-drag-handle:active{cursor:grabbing}.window-close{position:absolute;z-index:12;left:calc((var(--header) - var(--button))/2);top:calc(-1 * var(--header) + (var(--header) - var(--button))/2);width:var(--button);height:var(--button);padding:0;border:0;background:transparent;color:#111;font:300 calc(var(--button)*1.08)/1 Arial,sans-serif;cursor:pointer}
.panes-viewport{position:absolute;z-index:2;left:var(--frame-pad);right:var(--frame-pad);top:var(--frame-pad);bottom:var(--frame-pad);overflow:hidden;contain:layout paint style}.panes-track{position:relative;width:100%;height:100%;overflow:hidden;contain:layout paint style}.weather-pane{position:absolute;top:0;bottom:0;overflow:hidden;border-left:1px solid rgba(17,17,17,.7);cursor:pointer;transition:left .4s cubic-bezier(.2,.8,.2,1),width .42s cubic-bezier(.2,.8,.2,1),filter .2s ease;contain:layout paint style;transform:translateZ(0);backface-visibility:hidden}.weather-pane.is-active{border-left:0;cursor:default;box-shadow:0 0 0 1px rgba(17,17,17,.12)}.weather-pane:not(.is-active){box-shadow:-1px 0 0 rgba(247,243,237,.55)}.pane-gradient{position:absolute;left:0;top:0;width:var(--base-pane-w,100%);height:100%;overflow:hidden;isolation:isolate;contain:strict;transform:translateZ(0);backface-visibility:hidden}.gradient-field{position:absolute;left:-28%;top:-28%;width:156%;height:156%;background:linear-gradient(165deg,#d0b4b5,#cdc4ac 58%,#dcc28c);transform:translate3d(0,0,0);animation:gradientDriftA var(--motion-duration,8s) ease-in-out var(--motion-delay,0s) infinite alternate;backface-visibility:hidden}.gradient-field::before,.gradient-field::after{content:"";position:absolute;inset:-18%;pointer-events:none;transform:translate3d(0,0,0);backface-visibility:hidden}.gradient-field::before{background:radial-gradient(circle at 28% 32%,rgba(255,255,255,.52),transparent 29%),radial-gradient(circle at 72% 64%,rgba(255,218,184,.36),transparent 38%);mix-blend-mode:soft-light;animation:veilA calc(var(--motion-duration,8s)*.82) ease-in-out var(--motion-delay,0s) infinite alternate}.gradient-field::after{background:radial-gradient(ellipse at 42% 46%,rgba(155,207,231,.38),transparent 44%),radial-gradient(ellipse at 74% 26%,rgba(255,255,255,.24),transparent 29%);mix-blend-mode:screen;animation:veilB calc(var(--motion-duration,8s)*1.12) ease-in-out var(--motion-delay,0s) infinite alternate}.weather-pane.is-active .gradient-field,.weather-pane.is-active .gradient-field::before,.weather-pane.is-active .gradient-field::after{will-change:transform}.pane-close{position:absolute;z-index:7;right:9px;top:9px;width:var(--button);height:var(--button);padding:0;border:0;background:transparent;color:#111;font:300 calc(var(--button)*1.08)/1 Arial,sans-serif;cursor:pointer}.weather-pane.light-text .pane-close{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.25)}.pane-content{position:absolute;z-index:4;inset:0;padding:var(--content-pad);overflow:hidden;color:#111;pointer-events:none;opacity:0;transition:opacity .16s ease}.weather-pane.is-active .pane-content{opacity:1;transition-delay:.18s}.temperature-display{display:flex;align-items:flex-start;font-size:clamp(34px,calc(var(--title)*2.6),82px);line-height:.82;letter-spacing:-.08em;white-space:nowrap}.degree{font-size:.62em;line-height:.78;margin-left:.02em}.unit{font-size:.72em;line-height:1;margin-left:.2em}.humidity-line{margin:calc(var(--content-pad)*.72) 0 0;font-size:var(--stats)}.city-name{position:absolute;left:var(--content-pad);right:var(--content-pad);bottom:calc(var(--content-pad)*1.3);margin:0;font-size:var(--title);line-height:.96;font-weight:400;letter-spacing:-.04em}.status{position:absolute;right:var(--content-pad);bottom:calc(var(--content-pad)*.3);margin:0;font-size:calc(var(--stats)*.95);font-weight:500;letter-spacing:.01em;opacity:.72}.weather-pane.light-text .pane-content{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.18)}.active-action{position:absolute;z-index:8;right:calc(var(--content-pad)*.7);top:calc(var(--content-pad)*.55);width:var(--button);height:var(--button);padding:0;border:0;background:transparent;color:inherit;font:300 calc(var(--button)*1.2)/1 Arial,sans-serif;cursor:pointer}.weather-pane.light-text .active-action{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.25)}.weather-pane.is-active{z-index:8}.weather-pane.is-new{animation:panePop .62s cubic-bezier(.2,.9,.22,1.3) both}.weather-pane:not(.is-active):hover{filter:brightness(1.04)}
.pane-gradient.motion-1 .gradient-field{animation-name:gradientDriftB;animation-direction:alternate-reverse}.pane-gradient.motion-1 .gradient-field::before{animation-name:veilB}.pane-gradient.motion-1 .gradient-field::after{animation-name:veilA}.pane-gradient.motion-2 .gradient-field{animation-name:gradientDriftC}.pane-gradient.motion-2 .gradient-field::before{animation-direction:alternate-reverse}.pane-gradient.motion-3 .gradient-field{animation-name:gradientDriftD;animation-direction:alternate-reverse}.pane-gradient.motion-3 .gradient-field::after{animation-direction:alternate-reverse}
.sky-window.size-small{--header:14px;--frame-pad:3px;--content-pad:8px;--radius:9px;--tab-w:52px;--tab-r:8px;--shoulder:10px;--button:9px;--title:12px;--stats:7px;--pane-w:38px}.sky-window.size-medium{--header:18px;--frame-pad:4px;--content-pad:12px;--radius:14px;--tab-w:68px;--tab-r:11px;--shoulder:14px;--button:12px;--title:17px;--stats:9px;--pane-w:54px}.sky-window.size-big{--header:22px;--frame-pad:5px;--content-pad:18px;--radius:20px;--tab-w:88px;--tab-r:16px;--shoulder:22px;--button:15px;--title:25px;--stats:12px;--pane-w:74px}.size-small .status{display:none}.size-small .temperature-display{font-size:clamp(25px,calc(var(--title)*2.35),40px)}.sky-window.is-drawing{border:1px dashed rgba(0,0,0,.55);filter:none;animation:none;pointer-events:none}.is-drawing .window-frame,.is-drawing .window-close,.is-drawing .window-drag-handle,.is-drawing .panes-viewport{display:none}
@keyframes windowIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@keyframes gradientDriftA{0%{transform:translate3d(-11%,-9%,0) scale(1.02)}32%{transform:translate3d(10%,-4%,0) scale(1.04)}68%{transform:translate3d(1%,10%,0) scale(1.025)}100%{transform:translate3d(-9%,4%,0) scale(1.04)}}@keyframes gradientDriftB{0%{transform:translate3d(10%,-10%,0) scale(1.03)}35%{transform:translate3d(-9%,5%,0) scale(1.045)}72%{transform:translate3d(9%,10%,0) scale(1.02)}100%{transform:translate3d(-2%,-7%,0) scale(1.04)}}@keyframes gradientDriftC{0%{transform:translate3d(0,11%,0) scale(1.03)}30%{transform:translate3d(-11%,0,0) scale(1.04)}64%{transform:translate3d(7%,-10%,0) scale(1.025)}100%{transform:translate3d(10%,6%,0) scale(1.04)}}@keyframes gradientDriftD{0%{transform:translate3d(-10%,1%,0) scale(1.035)}38%{transform:translate3d(4%,10%,0) scale(1.02)}70%{transform:translate3d(11%,-8%,0) scale(1.04)}100%{transform:translate3d(-5%,-10%,0) scale(1.025)}}@keyframes veilA{from{transform:translate3d(-16%,-12%,0) rotate(-5deg)}to{transform:translate3d(20%,16%,0) rotate(7deg)}}@keyframes veilB{from{transform:translate3d(18%,14%,0) rotate(4deg)}to{transform:translate3d(-19%,-15%,0) rotate(-6deg)}}@keyframes panePop{0%{opacity:0;transform:translateX(-16px) scaleX(.45)}56%{opacity:1;transform:translateX(4px) scaleX(1.08)}78%{transform:translateX(-2px) scaleX(.98)}100%{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.gradient-field,.gradient-field::before,.gradient-field::after,.weather-pane.is-new{animation:none!important}}@media(max-width:700px){.dir{font-size:9px}#instructions{font-size:10px}}

/* Weather-specific motion. Collapsed panes are deliberately paused to reduce
   compositing load; the active pane keeps the existing gradient animation. */
.weather-pane:not(.is-active) .gradient-field,
.weather-pane:not(.is-active) .gradient-field::before,
.weather-pane:not(.is-active) .gradient-field::after,
#world.animations-paused .gradient-field,
#world.animations-paused .gradient-field::before,
#world.animations-paused .gradient-field::after{
  animation-play-state:paused!important;
}
.weather-effect{position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none;isolation:isolate}
.weather-pane:not(.is-active) .weather-effect{animation-play-state:paused!important;opacity:0}

/* 2D rain made from individually varied strokes, with three apparent depths. */
.rain-drops{position:absolute;inset:-8% 0 -18%;transform:rotate(var(--rain-angle,-10deg));transform-origin:50% 45%;overflow:hidden}
.rain-drops i{position:absolute;left:var(--x);top:-12%;width:1px;height:var(--len);opacity:var(--alpha);background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.82) 32%,rgba(230,245,255,.38));border-radius:99px;filter:drop-shadow(0 0 1px rgba(255,255,255,.16));animation:rainDrop var(--dur) linear var(--delay) infinite;will-change:transform,opacity}
.rain-drops i:nth-child(3n+1){width:.7px;filter:blur(.15px)}
.rain-drops i:nth-child(3n+2){width:1.35px;opacity:calc(var(--alpha)*.75)}
.rain-drops i:nth-child(7n){height:calc(var(--len)*1.35)}
@keyframes rainDrop{0%{transform:translate3d(0,-12vh,0);opacity:0}12%{opacity:var(--alpha)}85%{opacity:var(--alpha)}100%{transform:translate3d(var(--drift),125vh,0);opacity:0}}

/* Lightning uses a soft full-panel exposure flash plus a brief graphic bolt. */
.weather-effect.lightning::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 66% 18%,rgba(255,255,255,.98),rgba(255,255,255,.68) 18%,rgba(236,244,255,.22) 43%,transparent 72%);opacity:0;mix-blend-mode:screen;animation:stormExposure 9.7s steps(1,end) infinite}
.lightning-bolt{position:absolute;z-index:2;right:8%;top:6%;width:clamp(26px,8%,74px);height:42%;opacity:0;filter:drop-shadow(0 0 5px rgba(255,255,255,.9)) drop-shadow(0 0 16px rgba(205,224,255,.65));animation:boltStrike 9.7s steps(1,end) infinite}
.lightning-bolt svg{width:100%;height:100%;overflow:visible}.lightning-bolt polyline{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.weather-pane.is-active.is-thunder{animation:thunderTremble 9.7s linear infinite}
@keyframes stormExposure{0%,62%,64.2%,65.1%,100%{opacity:0}62.35%{opacity:.88}62.62%{opacity:.16}63.05%{opacity:.66}63.42%{opacity:.08}64.55%{opacity:.28}}
@keyframes boltStrike{0%,62.15%,62.3%,63.15%,100%{opacity:0}62.36%{opacity:1}62.68%{opacity:.18}63.02%{opacity:.78}}
@keyframes thunderTremble{0%,68%,100%{transform:translate3d(0,0,0) rotate(0)}68.2%{transform:translate3d(-1px,.4px,0) rotate(-.06deg)}68.45%{transform:translate3d(1.3px,-.5px,0) rotate(.07deg)}68.7%{transform:translate3d(-.8px,.3px,0) rotate(-.04deg)}68.95%{transform:translate3d(.5px,0,0) rotate(.02deg)}69.25%{transform:translate3d(0,0,0) rotate(0)}69.55%{transform:translate3d(-.4px,.2px,0)}69.8%{transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){.rain-drops i,.weather-effect::before,.lightning-bolt,.weather-pane.is-active.is-thunder{animation:none!important}}


@media(max-width:700px){#place-search{bottom:7.2%;width:min(210px,62vw)}#place-search input{font-size:9px}}

/* Refined compact frame corners */
.sky-window{--radius:13px;--tab-r:11px;--shoulder:16px}
.sky-window.size-small{--radius:6px;--tab-r:5px;--shoulder:7px}
.sky-window.size-medium{--radius:9px;--tab-r:7px;--shoulder:10px}
.sky-window.size-big{--radius:13px;--tab-r:11px;--shoulder:16px}

/* Minimal search field near the NW marker */
#place-search{
  left:3%;
  top:4%;
  bottom:auto;
  transform:none;
  width:min(205px,30vw);
  height:22px;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(17,17,17,.52);
}
#place-search input{
  padding:0 4px;
  background:transparent!important;
  color:#111;
  caret-color:#111;
  -webkit-appearance:none;
  appearance:none;
  border-radius:0;
  box-shadow:none!important;
}
#place-search input:focus,
#place-search input:active,
#place-search input:-webkit-autofill,
#place-search input:-webkit-autofill:hover,
#place-search input:-webkit-autofill:focus{
  background:transparent!important;
  box-shadow:0 0 0 1000px transparent inset!important;
  -webkit-text-fill-color:#111!important;
  outline:none;
}
#place-search input::-webkit-search-cancel-button,
#place-search input::-webkit-search-decoration,
#place-search input::-webkit-search-results-button,
#place-search input::-webkit-search-results-decoration{
  -webkit-appearance:none;
  appearance:none;
  display:none;
}
#place-search input::selection{background:rgba(17,17,17,.22);color:inherit}
#place-search button{height:22px;width:22px;background:transparent}
#place-search-status{left:0;text-align:left}

@media(max-width:700px){
  #place-search{left:8%;top:7%;bottom:auto;width:min(180px,48vw)}
}

/* Keep the animated scene bounded. Once the total number of open weather
   tabs exceeds the limit, the oldest whole window fades away and is removed. */
.sky-window{
  transition:opacity .68s ease,filter .68s ease;
}
.sky-window.is-aging-out{
  opacity:0!important;
  filter:blur(2px) drop-shadow(0 8px 14px rgba(0,0,0,0))!important;
  pointer-events:none!important;
  transition-delay:var(--fade-delay,0ms);
}
.sky-window.is-aging-out .gradient-field,
.sky-window.is-aging-out .gradient-field::before,
.sky-window.is-aging-out .gradient-field::after,
.sky-window.is-aging-out .rain-drops i,
.sky-window.is-aging-out .weather-effect::before,
.sky-window.is-aging-out .lightning-bolt{
  animation-play-state:paused!important;
}

/* Mobile pointing mode */
#mobile-orientation-ui{display:none}
@media(max-width:700px) and (pointer:coarse){
 html,body{background:#f7f3ed}
 #world{cursor:default;background:#f7f3ed;touch-action:manipulation}
 #instructions,#place-search,#clear-button{display:none!important}
 #mobile-orientation-ui{display:block;position:fixed;z-index:100;inset:0;pointer-events:none;color:#111}
 #mobile-instruction{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:min(76vw,320px);margin:0;text-align:center;font-size:10px;line-height:1.25;text-transform:lowercase}
 #orientation-permission{position:absolute;left:50%;top:30px;transform:translateX(-50%);padding:4px 7px;border:1px solid #111;background:#f7f3ed;font-size:9px;pointer-events:auto;cursor:pointer}
 #orientation-permission.is-hidden{display:none}
 #mobile-refresh{position:absolute;left:30px;top:73px;width:34px;height:34px;padding:0;border:0;background:transparent;font:36px/1 Arial,sans-serif;font-weight:200;pointer-events:auto;cursor:pointer;z-index:120}
 #mobile-refresh:disabled{opacity:.35}
 #mobile-direction{position:absolute;left:50%;top:49.5%;transform:translate(-50%,-50%);font-size:28px;line-height:1;letter-spacing:.02em;z-index:120;transition:opacity .2s ease,transform .2s ease}
 #mobile-direction::before{content:"";display:block;width:1px;height:55px;margin:0 auto 10px;background:rgba(17,17,17,.36)}
 #mobile-direction::after{content:"";display:block;width:7px;height:7px;margin:-64px auto 57px;border-top:1px solid rgba(17,17,17,.55);border-right:1px solid rgba(17,17,17,.55);transform:rotate(-45deg)}
 #mobile-distance{position:absolute;left:35px;bottom:29px;margin:0;font-size:11px;z-index:120}
 #mobile-message{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:80%;margin:0;text-align:center;font-size:9px;opacity:.6}
 .mobile-sky-window{--header:44px!important;--frame-pad:10px!important;--content-pad:24px!important;--radius:15px!important;--tab-w:122px!important;--tab-r:30px!important;--shoulder:31px!important;--button:18px!important;--title:31px!important;--stats:14px!important;filter:none!important;transition:opacity .3s ease!important}
 .mobile-sky-window.mobile-changing{opacity:.38}
 .mobile-sky-window .window-close,.mobile-sky-window .window-drag-handle,.mobile-sky-window .active-action,.mobile-sky-window .status{display:none!important}
 .mobile-sky-window .panes-viewport{border-radius:0}
 .mobile-sky-window .weather-pane{border:0!important}
 .mobile-sky-window .pane-content{padding:24px 22px}
 .mobile-sky-window .temperature-display{font-size:64px;line-height:.85}
 .mobile-sky-window .humidity-line{margin-top:22px;font-size:14px}
 .mobile-sky-window .city-name{left:22px;right:22px;bottom:52px;font-size:35px;line-height:.92}
 .mobile-sky-window .window-frame path{stroke-width:1.15}
}

/* Mobile compass prompt and controls refinement */
@media(max-width:700px) and (pointer:coarse){
 #mobile-orientation-ui{color:#111;transition:color .2s ease}
 #mobile-orientation-ui.light-text{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.18)}
 #mobile-compass-prompt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(82vw,360px);text-align:center;pointer-events:none;z-index:125}
 #mobile-compass-prompt.is-hidden{display:none}
 #orientation-permission{position:static;transform:none;display:inline-flex;align-items:center;justify-content:center;min-width:min(72vw,300px);padding:11px 22px;border:1px solid currentColor;border-radius:14px;background:transparent;color:inherit;font-size:15px;line-height:1;text-transform:uppercase;letter-spacing:.02em;pointer-events:auto}
 #orientation-permission.is-hidden{display:none}
 #mobile-instruction{position:static;transform:none;width:auto;margin:24px 0 0;text-align:center;color:inherit;font-size:12px;line-height:1.18;text-transform:lowercase}
 #mobile-refresh{left:29px;top:25px;width:42px;height:42px;padding:0;border:0;background:transparent;color:#111;pointer-events:auto;z-index:130}
 #mobile-refresh svg{display:block;width:100%;height:100%;overflow:visible}
 #mobile-refresh path{fill:none;stroke:#111;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
 #mobile-refresh:disabled{opacity:.35}
 #mobile-direction{top:50%;font-size:52px;color:inherit;text-shadow:inherit}
 #mobile-direction.is-hidden{display:none}
 #mobile-direction::before,#mobile-direction::after{display:none!important;content:none!important}
 #mobile-distance{left:50%;bottom:auto;top:calc(50% + 52px);transform:translateX(-50%);width:80%;text-align:center;color:inherit;font-size:11px;text-shadow:inherit}
 #mobile-message{bottom:22px;color:inherit;text-shadow:inherit}
}

/* More expressive motion for calm skies: still soft, but less static. */
.weather-pane.is-calm.is-active .gradient-field{
  animation-duration:calc(var(--motion-duration,8s)*.78);
}
.weather-pane.is-calm .gradient-field::before{
  opacity:.9;
  animation-duration:calc(var(--motion-duration,8s)*.62);
}
.weather-pane.is-calm .gradient-field::after{
  opacity:.88;
  animation-duration:calc(var(--motion-duration,8s)*.72);
}
@keyframes gradientDriftA{0%{transform:translate3d(-15%,-12%,0) scale(1.03)}24%{transform:translate3d(12%,-7%,0) scale(1.07)}52%{transform:translate3d(7%,13%,0) scale(1.035)}78%{transform:translate3d(-13%,8%,0) scale(1.065)}100%{transform:translate3d(-4%,-10%,0) scale(1.04)}}
@keyframes gradientDriftB{0%{transform:translate3d(14%,-13%,0) scale(1.04)}27%{transform:translate3d(-12%,2%,0) scale(1.07)}58%{transform:translate3d(12%,13%,0) scale(1.03)}82%{transform:translate3d(-8%,-10%,0) scale(1.065)}100%{transform:translate3d(5%,-4%,0) scale(1.04)}}
@keyframes gradientDriftC{0%{transform:translate3d(-4%,14%,0) scale(1.04)}25%{transform:translate3d(-14%,-2%,0) scale(1.07)}55%{transform:translate3d(9%,-13%,0) scale(1.035)}80%{transform:translate3d(13%,8%,0) scale(1.065)}100%{transform:translate3d(-8%,5%,0) scale(1.04)}}
@keyframes gradientDriftD{0%{transform:translate3d(-13%,4%,0) scale(1.05)}24%{transform:translate3d(5%,13%,0) scale(1.03)}54%{transform:translate3d(14%,-10%,0) scale(1.07)}79%{transform:translate3d(-7%,-13%,0) scale(1.035)}100%{transform:translate3d(-2%,9%,0) scale(1.055)}}

@media(max-width:700px) and (pointer:coarse){
  .mobile-sky-window{--pane-w:0px!important}
  .mobile-sky-window .weather-pane:not(.is-active){display:none!important}
  .mobile-sky-window .weather-pane.is-active{left:0!important;width:100%!important;cursor:pointer}
  .mobile-sky-window .mobile-tab-rail{display:none!important}
  .mobile-sky-window .mobile-tab{
    flex:1 1 0;min-width:0;height:100%;padding:0;border:1px solid #111;border-bottom:0;
    background:var(--paper);cursor:pointer;position:relative;
    border-radius:0 0 20px 20px;
  }
  .mobile-sky-window .mobile-tab:first-child{border-left-width:1px;border-top-left-radius:12px}
  .mobile-sky-window .mobile-tab:last-child{border-top-right-radius:12px}
  .mobile-sky-window .mobile-tab.is-active{background:var(--paper)}
  .mobile-sky-window .mobile-tab::after{
    content:"";position:absolute;left:50%;bottom:7px;width:4px;height:4px;border-radius:50%;
    transform:translateX(-50%);background:#111;opacity:.18;
  }
  .mobile-sky-window .mobile-tab.is-active::after{opacity:.75}
  #mobile-distance.is-loading{
    opacity:.72;
  }
  .mobile-sky-window .weather-pane.is-new{animation:none!important}
}

/* =========================
   YEAR OF DELIGHT INTEGRATION
========================= */
:root{
  --yod-yellow:#ffd60d;
  --black:#000;
  --nav-h-desktop:2.875rem;
  --nav-h-mobile:4rem;
}

/* Weather Windows uses Degular Mono throughout. */
html,body,button,input,textarea,select,
#world,.sky-window,.pane-content,.temperature-display,.city-name,.humidity-line,.status,
#mobile-orientation-ui,#place-search,#place-search input,#place-search button{
  font-family:"degular-mono",monospace!important;
}

body{background:#f7f3ed}
#world{
  position:fixed;
  left:0;
  right:0;
  top:var(--nav-h-desktop);
  width:100vw;
  height:calc(100vh - var(--nav-h-desktop));
}

.yod-nav{
  position:fixed;inset:0 0 auto 0;width:100%;height:var(--nav-h-desktop);
  background:var(--yod-yellow);color:var(--black);display:flex;align-items:center;
  justify-content:space-between;padding:.5rem 2rem .5rem 1rem;box-sizing:border-box;z-index:1000;
  user-select:none;
}
.nav-left,.nav-right{display:flex;align-items:center}.nav-left{min-width:0;flex:0 1 auto;gap:.55rem}
.brand-trigger,.about-close{touch-action:manipulation}
.brand-trigger{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.55rem;padding:0;margin:0;border:0;background:transparent;color:var(--black);cursor:pointer;white-space:nowrap;text-align:left}
.brand-main{position:relative;display:inline-block;font-family:"Terminal Grotesque",sans-serif!important;font-size:1.2rem;line-height:1}
.brand-sub{padding-top:.05rem;display:inline-block;align-self:center;font-family:"degular-mono",monospace!important;font-size:.55rem;line-height:1.05;text-align:left;white-space:nowrap}.brand-sub-break{display:inline}
.brand-underline{position:absolute;left:0;bottom:-.3125rem;width:100%;height:.125rem;background:var(--black);pointer-events:none}
.nav-center{position:absolute;left:50%;transform:translateX(-50%);font-family:"Terminal Grotesque",sans-serif!important;font-size:1.2rem;line-height:1;white-space:nowrap;pointer-events:none}
.nav-right{display:flex;align-items:center}.experiment-menu{position:relative;align-self:stretch;display:flex;align-items:center}
.experiment-trigger{height:100%;padding:0;border:0;background:transparent;color:var(--black);font-family:"degular-mono",monospace!important;font-size:.875rem;line-height:1;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.4rem}
.experiment-arrow{font-size:.72rem;line-height:1;transform:translateY(-.04rem);transition:transform 180ms ease}.experiment-menu.is-open .experiment-arrow{transform:translateY(-.04rem) rotate(180deg)}
.experiment-dropdown{position:fixed;top:var(--nav-h-desktop);right:.75rem;width:10.5rem;background:var(--yod-yellow);padding:.75rem .8rem .85rem;box-sizing:border-box;display:none;z-index:1060}.experiment-menu.is-open .experiment-dropdown{display:block}
.experiment-option{display:block;text-align:left;font-family:"degular-mono",monospace!important;font-size:.82rem;line-height:1;font-weight:700;color:rgba(0,0,0,.5);text-decoration:none;padding-bottom:.6rem;margin-bottom:.6rem;border-bottom:.1rem solid var(--black)}.experiment-option:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}.experiment-option.active-option{color:#000}.experiment-option:hover{opacity:.75}

.about-overlay{position:fixed;inset:0;z-index:1100;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 260ms ease,visibility 260ms ease}.about-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto}.about-backdrop{position:absolute;inset:0;background-image:url("assets/images/about-bg.jpg");background-size:cover;background-position:center;background-repeat:no-repeat;filter:brightness(.5);transform:scale(1.03);opacity:0;transition:transform 420ms ease,opacity 260ms ease}.about-overlay.is-open .about-backdrop{transform:scale(1);opacity:1}.about-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:4rem 1.5rem 2rem}.about-close{position:absolute;top:4rem;left:50%;width:2.5rem;height:2.5rem;padding:0;border:0;background:transparent;cursor:pointer;z-index:2;transform:translateX(-50%)}.about-close span{position:absolute;top:50%;left:50%;width:2.1rem;height:.14rem;background:var(--yod-yellow);border-radius:999px;transform-origin:center}.about-close span:first-child{transform:translate(-50%,-50%) rotate(45deg)}.about-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
.about-content{position:relative;z-index:2;width:min(100%,30rem);max-height:calc(100vh - 8rem);overflow-y:auto;text-align:center;color:var(--yod-yellow);padding:0 1rem;box-sizing:border-box}.about-title{margin:0 0 1.5rem;font-family:"Terminal Grotesque",sans-serif!important;font-size:clamp(2.2rem,4vw,2.75rem);line-height:.95;font-weight:300}.about-body{font-family:"dejanire-text",serif!important;font-size:clamp(1rem,2vw,1.125rem);line-height:1.28}.about-body p{margin:0 0 1.625rem}.about-body em{font-style:italic}.about-body a,.about-body a:visited,.about-body a:active{color:var(--yod-yellow);font:inherit;text-decoration:underline;text-underline-offset:.08em}

@media(max-width:700px){
  #world{top:var(--nav-h-mobile);height:calc(100vh - var(--nav-h-mobile))}
  .yod-nav{height:var(--nav-h-mobile);padding:0 .9rem}.nav-left{flex:1 1 auto;min-width:0;gap:.5rem}.brand-trigger{grid-template-columns:auto auto;column-gap:.42rem}.brand-main{font-size:1.72rem;line-height:.88}.brand-sub{font-size:.5rem;line-height:1.04;white-space:normal}.brand-sub-break{display:block}.brand-underline{bottom:-.38rem;height:.13rem}.nav-center{display:none}.nav-right{flex:0 0 auto;text-align:right}.experiment-trigger{font-size:.72rem;line-height:1.05;text-align:right;white-space:nowrap}.experiment-dropdown{top:var(--nav-h-mobile);width:9rem;right:0;padding:.7rem .75rem .8rem}.experiment-option{font-size:.76rem;padding-bottom:.55rem;margin-bottom:.55rem}
  .about-panel{padding:4.5rem 1rem 2rem}.about-close{top:1.75rem;width:2.25rem;height:2.25rem}.about-close span{width:1.9rem}.about-content{width:100%;max-width:22rem;max-height:calc(100vh - 7rem);padding:0 .75rem}.about-title{font-size:clamp(2.4rem,9vw,3rem);margin-bottom:1.2rem}.about-body{font-size:.95rem;line-height:1.2}.about-body p{margin-bottom:1.35rem}
}

@media(max-width:700px) and (pointer:coarse){
  #mobile-orientation-ui{top:var(--nav-h-mobile);bottom:0;height:auto;inset-inline:0}
}
.window-close,.pane-close,.active-action{font-family:"degular-mono",monospace!important}

/* 2026-08-07: stronger three-colour skies + safer type in very small windows */
.sky-window.size-tiny{
  --header:12px;
  --frame-pad:2px;
  --content-pad:5px;
  --radius:5px;
  --tab-w:42px;
  --tab-r:4px;
  --shoulder:6px;
  --button:8px;
  --title:7px;
  --stats:5px;
  --pane-w:30px;
}
.sky-window.size-tiny .temperature-display{
  font-size:clamp(18px,calc(var(--title)*3.15),25px);
  line-height:.84;
  letter-spacing:-.075em;
}
.sky-window.size-tiny .humidity-line{
  margin-top:7px;
  font-size:5px;
  line-height:1;
  white-space:nowrap;
}
.sky-window.size-tiny .city-name{
  left:5px;
  right:5px;
  bottom:6px;
  font-size:7px;
  line-height:.95;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.sky-window.size-tiny .status{display:none}
.sky-window.size-tiny .active-action{right:5px;top:4px}

/* Small windows reserve more vertical space between stats and location so even
   long names such as Ho Chi Minh City / United Kingdom cannot collide. */
.sky-window.size-small{
  --content-pad:7px;
  --title:10px;
  --stats:6px;
}
.sky-window.size-small .temperature-display{
  font-size:clamp(26px,calc(var(--title)*2.8),34px);
}
.sky-window.size-small .humidity-line{
  margin-top:9px;
  font-size:6px;
  line-height:1;
  white-space:nowrap;
}
.sky-window.size-small .city-name{
  left:7px;
  right:7px;
  bottom:8px;
  font-size:10px;
  line-height:.94;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}

/* Make the third colour read as a real moving band rather than a near-tone.
   The gradient is deliberately oversized so translating it reveals visibly
   different parts of all three colours without changing the pane bounds. */
.gradient-field{
  left:-35%;
  top:-35%;
  width:170%;
  height:170%;
  background-size:135% 135%;
}
.weather-pane.is-calm .gradient-field{
  animation-duration:calc(var(--motion-duration,8s)*.66);
}
.weather-pane.is-calm .gradient-field::before{
  opacity:.72;
}
.weather-pane.is-calm .gradient-field::after{
  opacity:.72;
}

/* 2026-08-19: smoother sky drift, richer palette variety, and aligned weather metadata */
.gradient-field{
  animation-timing-function:cubic-bezier(.45,0,.55,1);
}
.gradient-field::before,.gradient-field::after{
  animation-timing-function:cubic-bezier(.45,0,.55,1);
}
.weather-pane.is-calm.is-active .gradient-field{
  animation-duration:calc(var(--motion-duration,22s)*1.08);
}
.weather-pane.is-calm .gradient-field::before{
  opacity:.76;
  animation-duration:calc(var(--motion-duration,22s)*1.24);
}
.weather-pane.is-calm .gradient-field::after{
  opacity:.74;
  animation-duration:calc(var(--motion-duration,22s)*1.42);
}
@keyframes gradientDriftA{0%{transform:translate3d(-12%,-9%,0) scale(1.035)}50%{transform:translate3d(11%,8%,0) scale(1.06)}100%{transform:translate3d(-7%,6%,0) scale(1.04)}}
@keyframes gradientDriftB{0%{transform:translate3d(10%,-10%,0) scale(1.04)}50%{transform:translate3d(-11%,7%,0) scale(1.06)}100%{transform:translate3d(8%,5%,0) scale(1.035)}}
@keyframes gradientDriftC{0%{transform:translate3d(-4%,11%,0) scale(1.04)}50%{transform:translate3d(9%,-10%,0) scale(1.06)}100%{transform:translate3d(-10%,-2%,0) scale(1.035)}}
@keyframes gradientDriftD{0%{transform:translate3d(-10%,3%,0) scale(1.045)}50%{transform:translate3d(9%,10%,0) scale(1.035)}100%{transform:translate3d(5%,-9%,0) scale(1.06)}}

.condition-line{margin:calc(var(--content-pad)*.72) 0 0;font-size:var(--stats)}
.pane-bottom{position:absolute;left:var(--content-pad);right:var(--content-pad);bottom:var(--content-pad);display:flex;align-items:flex-end;justify-content:space-between;gap:10px;pointer-events:none}
.pane-bottom .city-name,.pane-bottom .status{position:static;bottom:auto;left:auto;right:auto}
.pane-bottom .city-name{flex:1 1 auto;min-width:0}
.pane-bottom .status{flex:0 0 auto;max-width:44%;text-align:right;line-height:1.08;white-space:nowrap}

.sky-window.size-tiny .condition-line{margin-top:7px;font-size:5px;line-height:1;white-space:nowrap}
.sky-window.size-small .condition-line{margin-top:9px;font-size:6px;line-height:1;white-space:nowrap}
.sky-window.size-tiny .pane-bottom,.sky-window.size-small .pane-bottom{left:var(--content-pad);right:var(--content-pad);bottom:var(--content-pad)}
.sky-window.size-tiny .pane-bottom .city-name,.sky-window.size-small .pane-bottom .city-name{bottom:auto}

@media(max-width:700px) and (pointer:coarse){
  .mobile-sky-window .condition-line{margin-top:22px;font-size:14px}
  .mobile-sky-window .pane-bottom{left:22px;right:22px;bottom:52px;align-items:flex-end}
  .mobile-sky-window .pane-bottom .city-name{font-size:35px;line-height:.92}
  .mobile-sky-window .pane-bottom .status{display:none!important}
}

/* 2026-08-19: slightly livelier, still-smooth sky motion + subtle sunshine */
.weather-pane.is-calm.is-active .gradient-field{
  animation-duration:calc(var(--motion-duration,18s)*.92);
}
.weather-pane.is-calm .gradient-field::before{
  animation-duration:calc(var(--motion-duration,18s)*1.08);
}
.weather-pane.is-calm .gradient-field::after{
  animation-duration:calc(var(--motion-duration,18s)*1.22);
}
.pane-gradient.motion-0 .gradient-field{animation-timing-function:cubic-bezier(.42,0,.58,1)}
.pane-gradient.motion-1 .gradient-field{animation-timing-function:cubic-bezier(.37,.02,.63,.98)}
.pane-gradient.motion-2 .gradient-field{animation-timing-function:cubic-bezier(.48,.03,.52,.97)}
.pane-gradient.motion-3 .gradient-field{animation-timing-function:cubic-bezier(.4,.01,.6,.99)}

.sun-rays{
  position:absolute;z-index:2;inset:-12%;pointer-events:none;overflow:hidden;
  opacity:.34;mix-blend-mode:screen;transform:translateZ(0);
  background:
    linear-gradient(112deg, transparent 0 31%, rgba(255,247,205,.30) 36%, rgba(255,248,211,.10) 44%, transparent 50%),
    linear-gradient(101deg, transparent 0 47%, rgba(255,245,194,.24) 52%, rgba(255,249,218,.08) 60%, transparent 66%);
  filter:blur(5px);
  animation:sunRayDrift 18s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.weather-pane.is-sunny:nth-child(2n) .sun-rays{animation-duration:21s;transform:scaleX(-1)}
.weather-pane.is-sunny:nth-child(3n) .sun-rays{animation-duration:16.5s;opacity:.28}
@keyframes sunRayDrift{
  0%{transform:translate3d(-7%,-3%,0) rotate(-2deg) scale(1.02);opacity:.22}
  45%{transform:translate3d(4%,2%,0) rotate(2deg) scale(1.06);opacity:.36}
  100%{transform:translate3d(9%,5%,0) rotate(4deg) scale(1.03);opacity:.26}
}
@media(prefers-reduced-motion:reduce){.sun-rays{animation:none!important}}


/* 2026-08-19: desktop corner resizing + livelier daylight drift.
   Night motion is intentionally left at the existing speed/amount. */
.window-resize-handle{
  position:absolute;z-index:16;width:18px;height:18px;touch-action:none;
}
.window-resize-handle.resize-nw{left:-6px;top:calc(-1 * var(--header) - 6px);cursor:nwse-resize}
.window-resize-handle.resize-ne{right:-6px;top:calc(-1 * var(--header) - 6px);cursor:nesw-resize}
.window-resize-handle.resize-sw{left:-6px;bottom:-6px;cursor:nesw-resize}
.window-resize-handle.resize-se{right:-6px;bottom:-6px;cursor:nwse-resize}
@media(max-width:700px) and (pointer:coarse){.window-resize-handle{display:none!important}}

/* Daylight gets a wider path and a little more pace. These rules come after
   the generic calm/night rules so night skies keep the amount you liked. */
.weather-pane.is-daylight.is-active .gradient-field,
.weather-pane.is-daylight.is-calm.is-active .gradient-field{
  animation-duration:calc(var(--motion-duration,18s)*.68);
}
.weather-pane.is-daylight .gradient-field::before{
  animation-duration:calc(var(--motion-duration,18s)*.82);
}
.weather-pane.is-daylight .gradient-field::after{
  animation-duration:calc(var(--motion-duration,18s)*.94);
}
.weather-pane.is-daylight .pane-gradient.motion-0 .gradient-field{animation-name:daylightDriftA}
.weather-pane.is-daylight .pane-gradient.motion-1 .gradient-field{animation-name:daylightDriftB}
.weather-pane.is-daylight .pane-gradient.motion-2 .gradient-field{animation-name:daylightDriftC}
.weather-pane.is-daylight .pane-gradient.motion-3 .gradient-field{animation-name:daylightDriftD}
@keyframes daylightDriftA{
  0%{transform:translate3d(-17%,-12%,0) scale(1.035)}
  31%{transform:translate3d(8%,-6%,0) scale(1.065)}
  66%{transform:translate3d(15%,12%,0) scale(1.04)}
  100%{transform:translate3d(-11%,8%,0) scale(1.06)}
}
@keyframes daylightDriftB{
  0%{transform:translate3d(15%,-14%,0) scale(1.045)}
  36%{transform:translate3d(-14%,1%,0) scale(1.065)}
  72%{transform:translate3d(11%,14%,0) scale(1.035)}
  100%{transform:translate3d(-7%,-8%,0) scale(1.055)}
}
@keyframes daylightDriftC{
  0%{transform:translate3d(-5%,16%,0) scale(1.04)}
  30%{transform:translate3d(-16%,-4%,0) scale(1.065)}
  64%{transform:translate3d(8%,-14%,0) scale(1.04)}
  100%{transform:translate3d(15%,7%,0) scale(1.06)}
}
@keyframes daylightDriftD{
  0%{transform:translate3d(-15%,4%,0) scale(1.05)}
  34%{transform:translate3d(4%,15%,0) scale(1.035)}
  69%{transform:translate3d(16%,-11%,0) scale(1.065)}
  100%{transform:translate3d(-9%,-12%,0) scale(1.04)}
}

/* 2026-08-19: more apparent slanted sunlight + a small global pace lift. */
.gradient-field{animation-duration:calc(var(--motion-duration,16s)*.88)}
.gradient-field::before{animation-duration:calc(var(--motion-duration,16s)*.98)}
.gradient-field::after{animation-duration:calc(var(--motion-duration,16s)*1.08)}
.weather-pane.is-calm.is-active .gradient-field{animation-duration:calc(var(--motion-duration,16s)*.82)}
.weather-pane.is-daylight.is-active .gradient-field,
.weather-pane.is-daylight.is-calm.is-active .gradient-field{animation-duration:calc(var(--motion-duration,16s)*.60)}
.weather-pane.is-daylight .gradient-field::before{animation-duration:calc(var(--motion-duration,16s)*.72)}
.weather-pane.is-daylight .gradient-field::after{animation-duration:calc(var(--motion-duration,16s)*.82)}

.sun-rays{
  inset:-22% -30%;
  opacity:.58;
  filter:blur(3px);
  background:
    linear-gradient(118deg,transparent 0 18%,rgba(255,252,222,.08) 22%,rgba(255,248,194,.55) 28%,rgba(255,252,220,.18) 34%,transparent 40%),
    linear-gradient(118deg,transparent 0 42%,rgba(255,250,208,.10) 46%,rgba(255,241,169,.48) 52%,rgba(255,252,222,.14) 58%,transparent 64%),
    linear-gradient(118deg,transparent 0 67%,rgba(255,250,212,.08) 70%,rgba(255,244,183,.36) 75%,transparent 81%);
  animation:sunRayDrift 13.5s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.weather-pane.is-sunny:nth-child(2n) .sun-rays{animation-duration:15.5s;transform:none}
.weather-pane.is-sunny:nth-child(3n) .sun-rays{animation-duration:12s;opacity:.50}
@keyframes sunRayDrift{
  0%{transform:translate3d(-9%,-5%,0) rotate(-3deg) scale(1.03);opacity:.42}
  48%{transform:translate3d(3%,2%,0) rotate(1deg) scale(1.08);opacity:.68}
  100%{transform:translate3d(10%,6%,0) rotate(4deg) scale(1.04);opacity:.50}
}

/* 2026-08-19: keep bottom metadata readable in compact windows.
   Medium windows retain the local time but drop humidity; tiny/small rules
   continue to prioritise the location name. */
.sky-window.size-medium .humidity-meta{display:none}


/* 2026-08-19: desktop type/metadata polish + mobile viewport/search fixes */
@media(min-width:701px){
  /* Pull the shared bottom baseline a little closer to the pane edge. */
  .pane-bottom{bottom:calc(var(--content-pad)*.58)}

  /* The C sits on the same visual bottom as the temperature numeral while
     the degree mark remains raised. */
  .temperature-display{align-items:flex-end}
  .temperature-display .degree{align-self:flex-start}
  .temperature-display .unit{align-self:flex-end;line-height:.72;margin-bottom:-.015em}

  /* Big windows keep time + humidity inline. Medium windows stack them so
     the metadata stays narrow and right aligned. */
  .sky-window.size-big .status{max-width:48%;white-space:nowrap}
  .sky-window.size-medium .status{
    display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;
    max-width:40%;white-space:normal;line-height:1.05;text-align:right;gap:2px;
  }
  .sky-window.size-medium .meta-separator{display:none}
  .sky-window.size-medium .humidity-meta{display:block!important;white-space:nowrap}

  /* On genuinely compact windows the location wins and metadata disappears. */
  .sky-window.size-small .status,.sky-window.size-tiny .status{display:none!important}
}

@media(max-width:700px){
  /* Dynamic viewport units account for the browser chrome; #world itself
     begins below the YOD nav, so the mobile window is sized only inside the
     remaining visible area. */
  #world{height:calc(100dvh - var(--nav-h-mobile));min-height:0}

  /* Search lives in the empty right side of the mobile frame header. */
  #place-search{
    display:flex!important;
    left:auto;right:22px;top:19px;bottom:auto;transform:none;
    width:min(43vw,170px);height:27px;
    background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:1px solid rgba(17,17,17,.65);z-index:140;
  }
  #place-search input{font-size:9px;padding:0 3px;color:#111}
  #place-search input::placeholder{color:rgba(17,17,17,.52)}
  #place-search button{width:22px;height:26px;font-size:12px;color:#111}
  #place-search-status{top:100%;margin-top:2px;font-size:7px;text-align:right;color:#111}

  /* Mobile keeps its established larger type; ensure the pane bottom has a
     little safe breathing room above the actual viewport edge. */
  .mobile-sky-window .pane-bottom{bottom:30px}
}

/* 2026-08-19: mobile searched-place compass reveal, corrected */
@media(max-width:700px){
  #place-search-status{display:none!important}

  .mobile-sky-window.mobile-search-seeking .weather-pane{
    background:#f7f3ed!important;
  }
  .mobile-sky-window.mobile-search-seeking .pane-gradient,
  .mobile-sky-window.mobile-search-seeking .gradient-field,
  .mobile-sky-window.mobile-search-seeking .sun-rays,
  .mobile-sky-window.mobile-search-seeking .weather-effect{
    opacity:0!important;
    visibility:hidden!important;
    animation:none!important;
  }
  .mobile-sky-window.mobile-search-seeking .pane-content{
    opacity:.30!important;
    color:#111!important;
    text-shadow:none!important;
    transition:opacity .36s ease;
  }
  .mobile-sky-window.mobile-search-seeking .weather-pane.light-text .pane-content{
    color:#111!important;
  }
  .mobile-sky-window:not(.mobile-search-seeking) .pane-content{
    opacity:1;
    transition:opacity .36s ease;
  }
}


/* Canvas gradient renderer: one pre-rendered texture per pane. The existing
   transform keyframes still move the sky, but there are no live CSS gradient
   paints or blended pseudo-element surfaces to recomposite every frame. */
.gradient-canvas{
  display:block;
  max-width:none;
  background:none!important;
  image-rendering:auto;
}
.gradient-canvas::before,
.gradient-canvas::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}

/* 2026-09-15 desktop usability refinements */
@media(min-width:701px){
  /* Keep close/add controls usable even when a weather window is tiny. */
  .sky-window{--button:max(var(--button),18px)}
  .window-close,.pane-close,.active-action{
    min-width:18px;
    min-height:18px;
    font-size:18px;
    line-height:18px;
  }

  /* Make the city search easier to notice on larger desktop displays. */
  #place-search{
    width:clamp(245px,18vw,310px);
    height:30px;
  }
  #place-search input{
    font-size:12px;
    padding:0 5px;
  }
  #place-search button{
    width:30px;
    height:30px;
    font-size:15px;
  }
  #place-search-status{font-size:9px}
}

/* The drag gesture should appear directly as a window, without a dashed draft box. */
.sky-window.is-drawing{border:0!important;outline:0!important}

/* Drawing preview: begin at the exact pointer point and grow freely.
   Override the normal weather-window minimum dimensions while drawing. */
.sky-window.is-drawing{
  min-width:0!important;
  min-height:0!important;
  border:1px solid rgba(0,0,0,.72)!important;
  border-radius:0!important;
  box-sizing:border-box;
  outline:0!important;
  background:transparent!important;
}

/* 2026-09-15 tiny-window header alignment
   Give the close control enough paper/header space so the glyph never drops
   into the gradient. The 18px hit target stays intact. */
@media(min-width:701px){
  .sky-window.size-small{
    --header:20px;
  }
  .sky-window.size-small .window-close{
    top:calc(-1 * var(--header) + 1px);
  }
}

/* 2026-09-15 tiny desktop close-button containment fix.
   The desktop 18px minimum button was larger than the old 12px tiny header,
   so its hit box/glyph could spill into the gradient. Give both compact sizes
   a real 21px paper header and pin the close control fully inside it. */
@media(min-width:701px){
  .sky-window.size-tiny,
  .sky-window.size-small{
    --header:21px;
  }
  .sky-window.size-tiny .window-close,
  .sky-window.size-small .window-close{
    top:-20px;
    width:18px;
    height:18px;
    min-width:18px;
    min-height:18px;
    line-height:18px;
  }
}

/* 2026-09-15 compact desktop header refinement */
@media(min-width:701px){
  .sky-window.size-tiny,
  .sky-window.size-small{
    --header:18px;
  }
  .sky-window.size-tiny .window-close,
  .sky-window.size-small .window-close{
    top:-18px;
    left:0;
    width:18px;
    height:18px;
    min-width:18px;
    min-height:18px;
    font-size:16px;
    line-height:18px;
  }
}

/* Search suggestions */
#place-search-suggestions{
  position:absolute;left:0;right:0;top:calc(100% + 1px);display:none;
  max-height:210px;overflow:auto;background:rgba(247,243,237,.96);
  border:1px solid rgba(17,17,17,.28);border-top:0;z-index:200;
  -webkit-overflow-scrolling:touch;
}
#place-search-suggestions.is-open{display:block}
.place-suggestion{
  display:block;width:100%;min-height:30px;padding:7px 6px;border:0;
  border-bottom:1px solid rgba(17,17,17,.12);background:transparent;color:#111;
  text-align:left;font:10px/1.2 "Courier New",monospace;cursor:pointer;
}
.place-suggestion:last-child{border-bottom:0}
.place-suggestion:hover,.place-suggestion.is-active{background:rgba(17,17,17,.07)}
@media(max-width:700px){
  #place-search-suggestions{right:0;left:auto;width:min(72vw,260px);max-height:180px}
  .place-suggestion{min-height:34px;padding:8px 7px;font-size:9px}
}

/* 2026-09-19: cleaner autocomplete menu */
#place-search-suggestions{
  box-sizing:border-box;
  top:calc(100% + 7px);
  max-height:240px;
  overflow-y:auto;
  overflow-x:hidden;
  background:transparent;
  border:0;
  padding:0;
  scrollbar-width:none;
}
#place-search-suggestions::-webkit-scrollbar{display:none}
.place-suggestion{
  box-sizing:border-box;
  width:100%;
  min-height:0;
  padding:5px 4px;
  border:0;
  background:transparent;
  color:#111;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  text-align:left;
  font:10px/1.25 "Courier New",monospace;
}
.place-suggestion + .place-suggestion{margin-top:2px}
.place-suggestion:hover,.place-suggestion.is-active{
  background:rgba(17,17,17,.055);
}
@media(max-width:700px){
  #place-search-suggestions{
    top:calc(100% + 6px);
    right:0;
    left:auto;
    width:min(76vw,280px);
    max-height:220px;
  }
  .place-suggestion{
    padding:6px 3px;
    font-size:9px;
    line-height:1.3;
  }
  .place-suggestion + .place-suggestion{margin-top:3px}
}

/* 2026-09-19 autocomplete width/text fix
   The suggestions live inside the flex search form, so explicitly anchor the
   dropdown to the form instead of letting any flex/button sizing affect it. */
#place-search{overflow:visible!important}
#place-search-suggestions{
  position:absolute!important;
  left:0!important;
  right:0!important;
  width:auto!important;
  min-width:100%!important;
  max-width:none!important;
  flex:none!important;
  align-self:auto!important;
  top:calc(100% + 7px)!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
}
#place-search-suggestions .place-suggestion{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 5px 0!important;
  padding:2px 4px!important;
  flex:none!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
  text-align:left!important;
  line-height:1.18!important;
  background:transparent!important;
}
@media(max-width:700px){
  #place-search-suggestions{
    left:0!important;
    right:0!important;
    width:auto!important;
    min-width:100%!important;
    max-height:220px!important;
  }
  #place-search-suggestions .place-suggestion{
    font-size:10px!important;
    padding:3px 3px!important;
    margin-bottom:6px!important;
  }
}

/* 2026-10-13: suggestions match search input type and get a subtle hover state. */
#place-search-suggestions .place-suggestion{
  font-size:12px!important;
  font-family:"Courier New",monospace!important;
  font-weight:400!important;
  line-height:1.35!important;
  border-radius:3px;
  transition:background-color .12s ease;
}
#place-search-suggestions .place-suggestion:hover,
#place-search-suggestions .place-suggestion.is-active,
#place-search-suggestions .place-suggestion:focus-visible{
  background:rgba(90,90,90,.12)!important;
}
@media(max-width:700px){
  #place-search-suggestions .place-suggestion{font-size:9px!important;}
}

/* Keep the search input fully editable, including touch text selection. */
#place-search input{user-select:text!important;-webkit-user-select:text!important;touch-action:auto!important;}

.experiment-option[href="weather-windows.html"]{text-transform:uppercase}

.temperature-display{align-items:baseline}
.temperature-display .degree{align-self:flex-start}
.temperature-display .unit{align-self:baseline;line-height:1;margin-bottom:0}