@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:#f2f3f3;background:#090d13}*{box-sizing:border-box}body{margin:0;min-height:100dvh;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #b8d8f0;outline-offset:6px}#sky,.vignette{position:fixed;inset:0;width:100%;height:100%}.vignette{pointer-events:none;background:linear-gradient(90deg,rgba(4,8,14,.58),transparent 65%),linear-gradient(0deg,rgba(4,8,14,.85),transparent 25%,transparent 80%,rgba(4,8,14,.3))}header,footer{position:fixed;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;z-index:2}header{top:35px}.brand{font-family:Manrope,sans-serif;font-size:25px;letter-spacing:-1.2px;color:inherit;text-decoration:none}.brand span{display:block;font:10px 'DM Sans',sans-serif;letter-spacing:3.1px;color:#b2bcc7;margin-top:9px}#sound{font-size:11px;letter-spacing:2px;display:flex;align-items:center;gap:22px;padding:15px 0}.wave{font-size:20px;letter-spacing:2px;color:#b1c9da}main{position:relative;min-height:100dvh;display:flex;align-items:center;padding:0 9%}.intro{margin-top:-8px;transition:opacity 1s,transform 1s}.eyebrow{font-size:11px;letter-spacing:3.4px;color:#c2cbd3;margin:0 0 28px}h1{font:500 clamp(62px,7.7vw,118px)/1.03 Manrope,sans-serif;letter-spacing:-6px;margin:0}h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-5px}.description{font-size:15px;color:#c7cdd4;margin:30px 0 26px}#enter{padding:16px 23px;border:1px solid #ffffff40;border-radius:3px;background:#ffffff08;font-size:14px;backdrop-filter:blur(12px);display:flex;gap:38px;align-items:center;transition:background .3s}#enter:hover{background:#ffffff18}#enter span{font-size:22px;color:#becfdd}.coordinate{position:absolute;right:5.5%;top:44%;display:flex;flex-direction:column;align-items:center;gap:22px;color:#b9c4ce}.coordinate span:first-child{font-size:24px}.coordinate i{height:70px;width:1px;background:#ffffff35}.coordinate span:last-child{writing-mode:vertical-rl;font-size:10px;letter-spacing:3px}footer{bottom:34px}.scenes{display:flex;gap:33px}.scenes button{padding:14px 0;position:relative;font-size:11px;color:#85909e;text-align:left;letter-spacing:1px}.scenes span{font-size:13px;letter-spacing:0;margin-left:9px}.scenes .active{color:#f2f4f7}.scenes .active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:#d6e3ed}#settings{font-size:12px;color:#c7d1db;padding:14px 0}#settings span{margin-left:18px;font-size:20px}#panel{position:fixed;right:5%;bottom:102px;width:290px;padding:24px;background:#0c121ce8;border:1px solid #ffffff20;border-radius:8px;backdrop-filter:blur(22px);z-index:5}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;font-size:16px}.panel-head button{font-size:25px}label{display:block;font-size:13px;color:#c7d1db;margin:20px 0}output{float:right;color:#8496a8;font-size:12px}input{display:block;width:100%;margin:15px 0;accent-color:#bbd2e4;height:3px}#pause{font-size:13px;border:1px solid #ffffff30;border-radius:3px;padding:10px;width:100%}#status{position:fixed;bottom:100px;left:5%;font-size:13px;max-width:300px;color:#d9e4ef}.immersed .intro{opacity:0;transform:translateY(-15px);pointer-events:none}.immersed .coordinate{opacity:.5}.fallback{background:radial-gradient(ellipse at 70% 45%,#73879c 0%,#273546 38%,#090d13 75%)}@media(max-width:600px){header{top:26px;left:7%;right:7%}.brand{font-size:22px}.brand span{font-size:8px;letter-spacing:2.6px}#sound{gap:12px;font-size:9px;letter-spacing:1.4px}main{padding:0 8%}h1{font-size:70px;letter-spacing:-4px}h1 em{letter-spacing:-3px}.eyebrow{font-size:9px;letter-spacing:2.8px}.description{font-size:14px}.coordinate{display:none}footer{left:7%;right:7%;bottom:26px;align-items:flex-end}.scenes{gap:18px}.scenes button{font-size:9px}.scenes span{display:block;margin:8px 0 0;font-size:12px}#settings{font-size:0}#settings span{font-size:25px}#panel{right:7%;bottom:105px;max-width:86vw}}@media(prefers-reduced-motion:reduce){.intro{transition:none}}
/* The cloud itself is the experience. */
:root{background:#000}body{background:#000}#sky{image-rendering:pixelated}.vignette{display:none}header{top:26px}.brand{font:12px monospace;letter-spacing:2px}.brand span{display:none}.intro{position:absolute;left:5%;bottom:115px;margin:0}.intro h1,.intro .eyebrow{display:none}.description{font:12px monospace;color:#999;letter-spacing:1px;margin:0 0 15px}#enter{font:12px monospace;padding:10px 14px;gap:20px;background:#000a}.coordinate{display:none}.scenes{display:none}footer{justify-content:flex-end}#sound,#settings{font-family:monospace}#lightning{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}#panel{background:#090909ee}.immersed .intro{display:none}@media(max-width:600px){.intro{bottom:100px;left:7%}.description{font-size:11px}#settings{font-size:12px}}
#sky{image-rendering:auto}
#weather-sky{position:fixed;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity 1.5s}#sky{transition:opacity 1.5s}footer{justify-content:space-between}.scenes{display:flex;gap:24px}.scenes span{margin-left:0;font:12px monospace}.scenes button{padding:12px 0}body[data-weather='1'],body[data-weather='2']{color:#1a3647}body[data-weather='1'] .description,body[data-weather='2'] .description{color:#173b4b}body[data-weather='1'] .scenes button,body[data-weather='2'] .scenes button{color:#294956}body[data-weather='1'] .scenes .active,body[data-weather='2'] .scenes .active{color:#102f3f}body[data-weather='1'] .scenes .active:after,body[data-weather='2'] .scenes .active:after{background:#173b4b}body[data-weather='1'] #settings,body[data-weather='2'] #settings{color:#173b4b}body[data-weather='1'] #enter,body[data-weather='2'] #enter{background:#ffffff30;border-color:#173b4b50;color:#173b4b}body[data-weather='1'] #panel,body[data-weather='2'] #panel{color:#eee}body[data-weather='1'] .wave,body[data-weather='2'] .wave{color:#315463}body[data-weather='1'] #status,body[data-weather='2'] #status{color:#173b4b}@media(max-width:600px){footer{flex-wrap:wrap;gap:18px}.scenes{width:100%;justify-content:space-between;gap:12px}.scenes span{margin:0;font-size:11px}#settings{margin-left:auto;padding:0}.intro{bottom:150px}#panel{bottom:135px}}