:root{color-scheme:dark;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f2f3e9;background:#142b2c;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;overflow-x:hidden;background:#142b2c}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #f5d492;outline-offset:5px}#world{position:fixed;inset:0;width:100%;height:100%;z-index:0}.veil{pointer-events:none;position:fixed;inset:0;background:linear-gradient(90deg,rgba(8,23,26,.26),transparent 50%),linear-gradient(0deg,rgba(5,18,24,.25),transparent 30%);z-index:1}header,main,footer{position:relative;z-index:2}header{display:flex;align-items:center;justify-content:space-between;padding:32px 42px;gap:20px}.wordmark{font-size:.8rem;font-weight:600;letter-spacing:.14em;display:flex;align-items:center;gap:12px}.mark{font-size:28px;color:#dbddbd;line-height:1}.quiet{border:1px solid #ffffff30;border-radius:30px;background:#10252855;padding:11px 17px;font-size:.875rem}.quiet:hover{background:#ffffff14}main{min-height:calc(100svh - 168px);display:flex;flex-direction:column;justify-content:space-between;padding:18px 6vw 28px;pointer-events:none}.intro{pointer-events:auto;max-width:420px}.eyebrow{font-size:.75rem;letter-spacing:.21em;color:#d2d9c9;margin:10px 0 24px}h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(2.8rem,5.4vw,5.2rem);letter-spacing:-.048em;line-height:1.05;margin:0 0 22px;text-shadow:0 2px 30px #10252825}#mood{font-size:1rem;line-height:1.65;color:#d5ded7;transition:opacity .2s}.scene-label{position:absolute;right:42px;top:45%;writing-mode:vertical-rl;font-size:.75rem;letter-spacing:.2em;color:#c5d3cf;display:flex;align-items:center;gap:18px}.rule{height:50px;width:1px;background:#d8e9df55}.console{width:420px;max-width:100%;align-self:center;background:#102627d9;border:1px solid #e1f0df26;border-radius:24px;padding:21px 24px 17px;box-shadow:0 14px 70px #06161628;backdrop-filter:blur(22px);pointer-events:auto;margin-top:220px}.console-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:.875rem;margin-bottom:20px}.simulation{font-size:.75rem;color:#b0c2b9}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.preset{display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px 5px;border:1px solid transparent;border-radius:13px;background:#ffffff05;font-size:.875rem;transition:background .25s,border-color .25s,transform .25s}.preset:hover{background:#ffffff15;transform:translateY(-2px)}.preset.active{background:#dee6c7;color:#1e3934;border-color:#eef0d6}.weather-icon{font-family:Georgia,serif;font-size:27px;height:31px;line-height:31px}.sound-row{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:20px;padding-top:17px;border-top:1px solid #dce6d61c}.sound-button{display:flex;align-items:center;gap:10px;font-size:.875rem;background:none;border:0;padding:7px 0;text-align:left}#soundIcon{font-size:23px;color:#dce6b8}.sound-row label{display:flex;align-items:center;gap:8px;font-size:.75rem;color:#bccdc2}input[type=range]{width:66px;accent-color:#dce6b8;cursor:pointer}.sound-note{font-size:.75rem;color:#9db4aa;margin:8px 0 0}footer{display:flex;justify-content:space-between;align-items:center;padding:8px 42px 24px;font-size:.75rem;color:#bdcdc3;gap:20px}footer a{font-size:.875rem}footer a:hover{text-decoration:underline}body[data-weather=sunset] .console{background:#322b2cdb}body[data-weather=night] .console{background:#101f31e6}body[data-weather=snow] .console{background:#233841df}.about{padding:35px 24px 70px;max-width:720px;margin:auto;min-height:auto;pointer-events:auto}.about h1{font-size:3rem;margin-top:35px}.about h2{font-family:Georgia,serif;font-weight:400;font-size:1.75rem;margin-top:36px}.about p,.about li{font-size:1.05rem;line-height:1.8;color:#cedbd2}.about a{text-decoration:underline;text-underline-offset:4px}.about code{font-size:.9rem}.about pre{padding:18px;background:#ffffff08;overflow:auto;border-radius:12px}@media(min-width:1500px){main{padding-top:50px}.console{margin-top:270px}}@media(max-width:700px){header{padding:22px 20px}.wordmark{font-size:.65rem;letter-spacing:.09em;gap:8px}.mark{font-size:24px}.quiet{font-size:.75rem;padding:9px 12px}main{min-height:calc(100svh - 142px);padding:12px 20px 22px}.eyebrow{font-size:.7rem;margin-bottom:16px}h1{font-size:3.1rem;max-width:300px;margin-bottom:16px}#mood{font-size:.875rem}.scene-label{display:none}.console{padding:18px 20px 15px;margin-top:235px;border-radius:22px;width:380px}.console-heading{margin-bottom:15px}.preset{padding:9px 5px}.sound-row{margin-top:15px;padding-top:11px}footer{padding:0 22px 19px;font-size:.7rem}footer a{font-size:.8rem}}@media(max-width:360px){.simulation{display:none}.sound-row{gap:8px}.sound-row label{gap:4px}.wordmark{max-width:160px;font-size:.6rem}h1{font-size:2.8rem}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
@media(min-width:701px){main{min-height:calc(100svh - 158px);justify-content:flex-end;padding-bottom:22px}.intro{position:absolute;left:6vw;top:18px}.console{margin-top:0}.scene-label{top:30%;right:36px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.location{position:relative;width:330px;max-width:100%;margin-top:22px}#cityForm{display:flex;border:1px solid #ffffff35;border-radius:12px;background:#102627d9;overflow:hidden}#city{width:100%;min-width:0;background:transparent;border:0;padding:12px;color:#eef1e3;font:inherit;font-size:.875rem}#city::placeholder{color:#bbcec3}#cityForm button{border:0;border-left:1px solid #ffffff25;background:#ffffff0a;padding:0 12px;font-size:.875rem}#cityStatus,.attribution,#weatherTime{font-size:.75rem;color:#c4d5cb;line-height:1.5;margin:8px 0}.attribution a{text-decoration:underline;text-underline-offset:3px}.text-button{background:none;border:0;padding:0;color:#e0e8ca;font:inherit;font-size:.875rem;text-align:left}.text-button:hover{text-decoration:underline}#weatherInfo{padding:12px 0 0}#cityName{font-size:1rem}#conditions{font-size:.875rem;line-height:1.5;margin:5px 0}#cityResults{position:absolute;top:36px;left:0;right:0;z-index:9;background:#163335;border:1px solid #ffffff35;box-shadow:0 10px 25px #0005;border-radius:12px;padding:6px;list-style:none;max-height:255px;overflow:auto}#cityResults button{display:block;width:100%;padding:11px 9px;font-size:.875rem;background:none;border:0;text-align:left;border-radius:7px}#cityResults button:hover,#cityResults button:focus{background:#ffffff14}.intro{z-index:3}header{z-index:4}button:disabled{opacity:.5;cursor:wait}
@media(min-width:701px){.intro{max-width:340px}h1{font-size:clamp(2.8rem,4.5vw,4.3rem)}.console{align-self:flex-end;margin-right:5vw;width:400px}.location{margin-top:18px}main{min-height:max(610px,calc(100svh - 158px))}}
@media(max-width:700px){#world{position:absolute;height:1100px}.location{width:100%;max-width:380px;margin-top:14px}.intro{max-width:100%}h1{font-size:2.8rem}#mood{margin:10px 0}.console{margin-top:270px}main{min-height:950px}.attribution{font-size:.75rem}#weatherInfo{padding-top:6px}#cityStatus{margin-bottom:0}footer{position:relative}.scene-label{display:none}}

#moonInfo{font-size:.875rem;line-height:1.5;margin:5px 0;color:#dce4c8}

#soundIcon{width:24px;height:24px;flex-shrink:0}
.sound-button[data-muted="true"] .sound-waves,.sound-button[data-muted="false"] .sound-slash{display:none}
.sound-button[data-muted="true"] #soundIcon{color:#b8c7c0}

#owlCall{position:fixed;z-index:2;width:44px;height:44px;transform:translate(-50%,-50%);background:transparent;border:0;border-radius:50%;padding:0;touch-action:manipulation}
#owlCall:hover,#owlCall:focus-visible{background:#f5d49212}
@media(max-width:700px){#owlCall{position:absolute}}

/* Focus belongs to the whole search field; child outlines would be clipped. */
#cityForm:focus-within{outline:2px solid #f5d492;outline-offset:3px}
#city:focus-visible{outline:none}
#cityForm button:focus-visible{outline-offset:-4px;border-radius:0 10px 10px 0}

footer{flex-wrap:wrap}footer nav{display:flex;align-items:center;gap:18px}