@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/weather-assets/font-0.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/weather-assets/font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/weather-assets/font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/weather-assets/font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/weather-assets/font-4.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/weather-assets/font-5.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/weather-assets/font-6.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/weather-assets/font-7.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/weather-assets/font-8.ttf) format('truetype');
}


:root{color-scheme:dark;--ink:#f0efe9;--muted:#a3afb9;--accent:#b6d7d6;--glass:rgba(21,34,47,.77)}
*{box-sizing:border-box}body{margin:0;background:#111f2b;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,.window:focus-visible{outline:2px solid #f4cf87;outline-offset:5px}button{color:inherit}main{position:relative;min-height:900px;height:100svh;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 68% 44%,#36596766,transparent 50%),linear-gradient(145deg,#15232e,#152c3c 56%,#14232d);transition:background 1.4s}.ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden}.cloud{position:absolute;background:#bfd4dd;filter:blur(45px);opacity:.05;width:70vw;height:24vh;border-radius:50%;top:12%;left:-25%;animation:cloud 65s linear infinite}.cloud:nth-child(2){top:39%;left:15%;opacity:.035;animation-duration:90s}.fog{position:absolute;bottom:-120px;left:-30%;width:160%;height:44%;background:radial-gradient(ellipse,#bdd4d822,transparent 68%);filter:blur(32px);animation:cloud 50s ease-in-out infinite alternate}.horizon{position:absolute;bottom:0;left:0;right:0;height:32%;background:linear-gradient(0deg,#0c1a25c0,transparent)}.lightning{position:absolute;inset:0;background:#dcecff;opacity:0;mix-blend-mode:screen}canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}header{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:7;padding:28px 5.5%}.brand{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:-.4px;font-size:21px}.brand svg{width:32px;height:32px}.edition{font-size:11px;color:var(--muted);letter-spacing:2px;text-transform:uppercase}.hero{position:relative;z-index:2;width:51%;padding:105px 0 0 8%;pointer-events:none}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--accent);text-transform:uppercase;display:flex;align-items:center;gap:10px}.eyebrow:before{content:'';width:6px;height:6px;background:#b6d7d6;border-radius:50%;box-shadow:0 0 14px #b6d7d655}h1{font-family:Manrope,Arial,sans-serif;font-weight:500;font-size:clamp(60px,7.8vw,118px);line-height:1.03;letter-spacing:-6px;margin:28px 0 28px}h1 em{font-family:Georgia,serif;color:#b8d6d5;font-weight:400;letter-spacing:-4px}.intro{font-size:17px;color:#b4bec6;line-height:1.7;max-width:330px}.hint{margin-top:39px;display:flex;align-items:center;gap:9px;font-size:12px;color:#8195a3}.hint svg{width:18px;height:18px}.scene{position:absolute;inset:0;z-index:3;pointer-events:none}.window{position:absolute;pointer-events:auto;box-shadow:0 28px 70px #0005,0 1px 0 #ffffff1a inset;border:1px solid #ffffff24;border-radius:13px;background:#dfe4df;color:#253c45;touch-action:none;user-select:none;overflow:visible}.window.dragging{cursor:grabbing;box-shadow:0 34px 80px #0008}.titlebar{height:37px;display:flex;align-items:center;padding:0 14px;gap:6px;background:#f7f7f144;border-bottom:1px solid #2a424512;border-radius:12px 12px 0 0;cursor:grab}.dot{width:8px;height:8px;border-radius:50%;background:#81959a55}.window-title{position:absolute;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.2px;color:#64777d;white-space:nowrap}.note{width:298px;left:58%;top:23%;background:#e6e7de;transform:rotate(0deg)}.note .body{padding:24px 27px 28px}.note .date{color:#7a8b88;font-size:10px;letter-spacing:1.5px;text-transform:uppercase}.note h2{font-family:Georgia,serif;font-weight:400;font-size:33px;line-height:1.14;margin:13px 0 18px;letter-spacing:-.7px}.note p{font-size:12px;line-height:1.8;margin:0;color:#697c79}.note .line{width:45px;height:1px;background:#94aaa2;margin:21px 0 17px}.forecast{width:230px;left:73%;top:53%;background:#ccdeda}.forecast .body{padding:20px 23px}.forecast .label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#628080}.temperature{font-family:Manrope,Arial,sans-serif;font-size:53px;font-weight:400;letter-spacing:-3px;line-height:1.2;margin:8px 0 6px}.temperature span{font-size:18px;vertical-align:top;letter-spacing:0}.forecast .desc{font-size:12px;color:#577474}.forecast .bottom{display:flex;justify-content:space-between;border-top:1px solid #809b9638;margin-top:17px;padding-top:12px;font-size:10px;color:#5f807e}.postcard{width:185px;left:55%;top:62%;background:#829caa;color:#eff4ee}.postcard .body{padding:18px 18px 20px}.postcard svg{display:block;width:100%;height:62px;margin:0 0 12px}.postcard p{font-family:Georgia,serif;font-size:17px;line-height:1.4;margin:0}.postcard .titlebar{background:#ffffff14}.postcard .window-title{color:#d2e1e4}.controls{position:absolute;bottom:63px;left:8%;z-index:7;display:flex;align-items:center;gap:22px;padding:17px 19px;border:1px solid #b6d7d624;border-radius:15px;background:#152633e0;backdrop-filter:blur(18px);box-shadow:0 16px 50px #0002}.presets{display:flex;gap:5px}.preset{display:flex;align-items:center;gap:7px;background:transparent;border:0;border-radius:8px;padding:10px 12px;font-size:12px;color:#8fa4b1;transition:.2s}.preset svg{width:17px;height:17px}.preset[aria-pressed=true]{background:#b6d7d61b;color:#d1e8e4}.preset:hover{background:#b6d7d610;color:#e0efed}.divider{width:1px;align-self:stretch;background:#b6d7d61e}.slider{min-width:125px;display:grid;grid-template-columns:1fr auto;gap:7px 10px}.slider label{font-size:10px;color:#9cb0b9}.slider output{font-size:10px;color:#b6d7d6;font-variant-numeric:tabular-nums}input[type=range]{grid-column:1/-1;width:100%;height:3px;margin:4px 0 0;accent-color:#b6d7d6;cursor:pointer}.pause{display:flex;align-items:center;justify-content:center;border:1px solid #b6d7d626;background:transparent;width:36px;height:36px;border-radius:50%;font-size:14px;color:#afc6cc}.footer{position:absolute;bottom:25px;left:8%;right:5.5%;display:flex;align-items:center;justify-content:space-between;z-index:7;font-size:10px;color:#708b9c;letter-spacing:.3px}.status{display:flex;gap:7px;align-items:center}.status:before{content:'';width:4px;height:4px;border-radius:50%;background:#97bab5}.help{border:0;background:transparent;color:#94a9b4;padding:5px 0;font-size:10px}.physics-info{position:absolute;z-index:8;bottom:62px;right:5.5%;width:320px;background:#203440f2;border:1px solid #b6d7d633;box-shadow:0 20px 80px #0006;border-radius:12px;padding:20px;color:#bfcfd4;font-size:12px;line-height:1.75}.physics-info[hidden]{display:none}.physics-info strong{display:block;color:#edf0e9;font-size:14px;margin-bottom:8px}.physics-info p{margin:0 0 9px}.physics-info p:last-child{margin:0}.mobile-hint{display:none}@keyframes cloud{to{transform:translateX(50%)}}@media(min-width:1700px){main{max-width:2100px;margin:auto}.hero{padding-top:14vh}.note{top:26%}.forecast{top:55%}}@media(max-width:1100px){main{min-height:820px}.hero{padding-top:70px}.controls{gap:13px}.preset{padding:9px}.slider{min-width:100px}h1{letter-spacing:-4px}.note{left:57%;width:260px}.forecast{left:72%;width:210px}.postcard{left:54%;top:61%;width:165px}.controls{left:5.5%;right:5.5%;justify-content:center}.footer{left:5.5%}.physics-info{bottom:150px}}@media(max-width:760px){main{height:1040px;min-height:1040px}header{padding:23px 6%}.edition{font-size:9px;letter-spacing:1px}.hero{padding:55px 6% 0;width:100%}h1{font-size:68px;letter-spacing:-4px;line-height:1.02;margin:20px 0 20px}h1 br{display:none}h1 em{display:block}.intro{font-size:14px;max-width:270px}.hint{margin-top:20px;font-size:11px}.note{top:400px;left:8%;width:235px}.note .body{padding:20px 23px}.note h2{font-size:28px}.forecast{top:562px;left:49%;width:175px}.forecast .body{padding:16px}.temperature{font-size:43px}.postcard{top:695px;left:13%;width:160px}.postcard .body{padding:14px}.postcard svg{height:42px}.postcard p{font-size:15px}.controls{bottom:65px;left:6%;right:6%;flex-wrap:wrap;gap:14px 17px;padding:14px}.presets{justify-content:space-between;width:100%}.preset{padding:9px 10px;font-size:11px}.controls .divider{display:none}.slider{flex:1;min-width:90px}.pause{width:32px;height:32px}.footer{bottom:20px;left:6%;right:6%;font-size:9px}.physics-info{right:6%;bottom:204px;max-width:88%}.status{max-width:220px}.cloud{width:140vw}}@media(prefers-reduced-motion:reduce){.cloud,.fog{animation:none}*{transition:none!important}}


main[data-mode="snow"]{background:radial-gradient(ellipse at 65% 35%,#7ba3ac33,transparent 65%),linear-gradient(145deg,#273944,#1c394a 56%,#1b2e3c)}main[data-mode="storm"]{background:radial-gradient(ellipse at 68% 44%,#30526044,transparent 50%),linear-gradient(145deg,#101922,#182735 56%,#101c26)}main[data-mode="storm"] .cloud{opacity:.12}main[data-mode="snow"] .fog{opacity:1}.controls{max-width:1040px;gap:16px;flex-wrap:wrap}.presets{gap:2px}.preset{padding:9px 10px}.slider{min-width:115px}.window{box-shadow:0 12px 27px #0003,0 1px 0 #ffffff65 inset;filter:brightness(var(--card-light,1));transition:filter .3s}.window.dragging{box-shadow:0 12px 27px #0003}.gpu-ready #weather,.gpu-ready .ambient{display:none}.gpu-ready #atmosphere-gpu{z-index:0}.gpu-ready #precipitation-gpu{z-index:10}.hero{text-shadow:0 2px 20px #15273335}.physics-info{bottom:150px}.renderer-note{display:none;color:#e5c798;font-size:11px;position:absolute;right:5.5%;bottom:52px;z-index:8}.renderer-note[data-visible=true]{display:block}main[data-mode="sun"]{background:#7896ad}.edition{color:#d3e0e8}.footer{color:#bed0dc}.hero .intro{color:#d4dce1}.hint{color:#b4c7d2}.eyebrow{color:#d3ece8}h1 em{color:#d6e7dc}.hero{z-index:2}@media(max-width:1100px){.controls{gap:12px 15px;max-width:950px}.presets{width:100%;justify-content:center}.slider{flex:1;min-width:100px}.controls .divider{display:none}.physics-info{bottom:215px}}@media(max-width:760px){main{height:1220px;min-height:1220px}.note{top:430px}.forecast{top:610px}.postcard{top:740px}.controls{gap:16px 13px;padding:14px}.presets{flex-wrap:wrap;justify-content:center;gap:3px}.preset{font-size:10px;padding:8px}.preset svg{width:15px;height:15px}.slider{min-width:75px}.physics-info{bottom:245px}}

.window,.window.dragging{box-shadow:var(--shadow-x,0px) var(--shadow-y,10px) 22px #0004,0 1px 0 #ffffff65 inset}.hero:before{content:'';position:absolute;inset:10px -20px -50px -25px;z-index:-1;background:radial-gradient(ellipse at 28% 48%,#07142370,transparent 75%);pointer-events:none}.hero .intro{color:#f0f2f3}.hint{color:#d6e0e6}.footer,.help{color:#dfe8ed}header{background:linear-gradient(180deg,#091a2c35,transparent)}@media(max-width:760px){.slider{min-width:105px}.hero:before{inset:15px -25px -30px -25px;background:radial-gradient(ellipse at 32% 48%,#07142388,transparent 78%)}}

.window{touch-action:auto;user-select:text}.titlebar{touch-action:none;user-select:none}
.glass-lenses{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.pane-frost,.pane-mist{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;will-change:opacity}
.pane-frost{z-index:2;filter:contrast(1.08);mix-blend-mode:screen;mask-image:radial-gradient(ellipse at 50% 43%,transparent 25%,#0002 48%,#000b 76%,#000 100%)}
.gpu-ready .window.weather-wet:after{display:block}
.window{filter:brightness(calc(var(--card-light,1)*(1 - var(--surface-damp,0)*.13))) saturate(calc(1 - var(--surface-cold,0)*.20))}
.pane-mist{background:radial-gradient(ellipse at 50% 40%,transparent 30%,#dce8ed24 69%,#dce8ed65 100%),var(--mist-grain);mask-image:radial-gradient(ellipse at 50% 40%,transparent 30%,#0008 68%,#000 100%)}
.glass-lens{position:absolute;left:var(--x);top:var(--y);width:calc(var(--r)*var(--width,1.6));height:calc(var(--r)*var(--height,2));border:0;border-radius:var(--outline,53% 47% 61% 39%/43% 52% 48% 57%);transform:translate(-50%,-50%) rotate(var(--tilt,-12deg));background:transparent;box-shadow:none;backdrop-filter:blur(.35px) contrast(1.025)}
.window.weather-wet:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,#d9f6ff22,transparent 28%,#ffffff0a 67%,#d8f7ff28);box-shadow:inset 0 1px 1px #f4fcff99;opacity:var(--weather-sheen,0)}
.glass-lens:after{content:'';position:absolute;left:var(--shine-x,31%);top:var(--shine-y,24%);width:var(--shine-width,16%);height:7%;border-radius:50%;background:#fff4;filter:blur(.6px);transform:rotate(-24deg)}
.weather-toggle{position:absolute;top:88px;right:5.5%;z-index:9;border:1px solid #d4e8e544;border-radius:999px;padding:9px 14px;background:#1526339c;color:#e1eef0;font-size:11px;letter-spacing:.2px;backdrop-filter:blur(14px)}
.weather-toggle:hover,.weather-toggle:focus-visible{background:#304957}
main{min-height:720px}.controls{top:132px;bottom:auto;left:auto;right:5.5%;width:min(1040px,89%);max-height:calc(100svh - 160px);overflow:auto}.physics-info{top:132px;bottom:auto}
#weatherControls[hidden]{display:none}
@media(max-width:760px){.weather-toggle{top:76px;right:6%}.controls{top:117px;left:6%;right:6%;width:auto;max-height:calc(100svh - 140px)}.physics-info{top:117px}}


.weather-material{filter:brightness(calc(1 - var(--surface-damp,0)*.08 + var(--surface-cold,0)*.05)) saturate(calc(1 - var(--surface-cold,0)*.14));transition:filter .55s ease}
.window.weather-material{filter:brightness(calc(var(--card-light,1) - var(--surface-damp,0)*.08 + var(--surface-cold,0)*.05)) saturate(calc(1 - var(--surface-cold,0)*.14))}
.weather-material:not(.weather-text-material):not(input):not(textarea):not(select){isolation:isolate}
.weather-material:not(.weather-text-material):not(input):not(textarea):not(select):after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:calc(max(var(--weather-sheen,0),var(--surface-cold,0))*.45);background:linear-gradient(115deg,transparent 6%,#ffffff20 12%,transparent 18%,transparent 76%,#d6f5ff24 82%,transparent 88%);box-shadow:inset 0 -2px 2px #142b4040,inset 1px 0 1px #c7f1ff85,inset -1px 0 1px #142a4155,inset 0 1px 1px #ffffff9c}
.pane-glaze{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(117deg,#09213740 8%,transparent 21%,#dff6ff12 33%,#ffffffb0 34%,#a4dffa36 35%,transparent 38%,transparent 64%,#efffff70 66%,transparent 69%);background-position:var(--glaze-x,50%) 50%;background-size:140% 100%;backdrop-filter:blur(.7px) contrast(1.12) brightness(1.04)}
.weather-text-material{filter:brightness(calc(1 - var(--surface-damp,0)*.16 + var(--surface-cold,0)*.05));text-shadow:0 1.5px 1px rgba(7,27,38,calc(var(--weather-sheen,0)*.58)),0 -1px 0 rgba(224,247,255,calc(var(--weather-sheen,0)*.32 + var(--surface-cold,0)*.24))}
.pane-frost{filter:contrast(1.28) brightness(1.1);mask-image:radial-gradient(ellipse at 50% 43%,transparent var(--frost-clear,88%),#0007 var(--frost-mid,97%),#000 100%)}
.pane-glaze{mask-image:var(--frost-texture),radial-gradient(ellipse at 50% 43%,transparent var(--frost-clear,88%),#0007 var(--frost-mid,97%),#000 100%);mask-composite:intersect;backdrop-filter:none}
@media(prefers-reduced-motion:reduce){.weather-material{transition:none}}

/* The login remains a native form inside the weather collider. */
.note{width:360px;left:64%;top:22%}.note .body{padding:27px 30px 30px}.note h2{font-size:35px;margin:8px 0 23px}
.login-form{display:grid;gap:9px}.login-form label{font-size:12px;color:#4b6568;margin-top:8px}.login-form input:not([type=hidden]){width:100%;min-width:0;height:46px;padding:10px 13px;border:1px solid #718b8540;border-radius:8px;background:#fbfcf6b8;color:#233b42;box-shadow:inset 0 1px 3px #162e3510;touch-action:manipulation;user-select:text}
.login-form input:focus-visible{outline:2px solid #547e82;outline-offset:2px;background:#fffffa}.login-form button{margin-top:15px;display:flex;align-items:center;justify-content:space-between;padding:14px 17px;border:1px solid #244e55;border-radius:8px;background:#284b52;color:#f2f5eb;min-height:49px;box-shadow:0 5px 12px #1b354922;transition:background .2s}
.login-form button:hover{background:#1c3d45}.login-form button:focus-visible{outline-color:#527d82}.login-error{padding:10px 12px;margin:0 0 15px!important;border-radius:7px;background:#96452d12;border:1px solid #96452d33;color:#713c30!important;font-size:12px!important;line-height:1.5!important}
.forecast{left:37%;top:73%;width:190px}.forecast .body{padding:18px}.postcard{left:17%;top:73%;width:175px}.hero{width:57%}main{min-height:880px}.note .date{font-size:9px;letter-spacing:1.8px}
@media(max-width:1100px){.note{left:60%;width:340px;top:23%}.hero{width:59%;padding-left:6%}h1{font-size:78px}.forecast{left:35%;width:180px;top:73%}.postcard{left:14%;top:73%;width:165px}}
@media(max-width:760px){main{height:100svh;min-height:940px}.hero{width:100%;padding:40px 6% 0}h1{font-size:64px}.intro{font-size:14px}.hint{margin-top:18px;max-width:280px}.note{width:calc(100% - 12%);max-width:380px;left:6%;top:414px}.note .body{padding:25px}.note h2{font-size:32px}.forecast,.postcard{display:none}.footer{bottom:23px}.edition{max-width:120px;text-align:right;line-height:1.5}.weather-toggle{top:80px}}
@media(max-width:360px){h1{font-size:58px}.brand{font-size:18px}.note .body{padding:21px}.note{top:407px}}

@media(min-width:761px){.hero{padding-top:80px}}