:root{color-scheme:dark;--accent:#98d1ff;--ink:#f5f7fa;--muted:#c0cbd4;--gold:#edca80;--panel:37,47,60;--scene:url('assets/scenery/mountains.webp')}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:108px}body{margin:0;background:#101c25;color:var(--ink);font:400 16px 'Segoe UI',Arial,sans-serif}button,input,select{font:inherit}button,a,select,summary{touch-action:manipulation}button{color:inherit;cursor:pointer;border:0}a{color:inherit;text-decoration:none}img{object-fit:contain}.card-head img,.tabs img,.activity img,.factor>img,.daily-item img,.stage-float-actions img,.decision-body>img,.outlook img{filter:drop-shadow(0 4px 10px rgba(0,0,0,.32));transition:transform .24s cubic-bezier(.16,1,.3,1),filter .24s ease}.tabs button:hover img,.activity:hover img{transform:scale(1.08);filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--accent) 38%,rgba(0,0,0,.45)))}.tabs button[aria-selected=true] img{filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--accent) 65%,transparent))}p{line-height:1.6}h1,h2,h3,p{margin-top:0}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.skip{position:fixed;left:20px;top:-100px;z-index:100;background:#111;padding:15px}.skip:focus{top:20px}.topbar{position:absolute;top:0;width:100%;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:28px 4.5%;gap:20px;border-bottom:1px solid #ffffff14}.brand{font-size:27px;letter-spacing:-1.2px;white-space:nowrap}.brand>span:first-child{color:var(--gold)}.domain{font-size:12px;letter-spacing:1px;color:#c5cbd2;margin-left:25px;padding-left:25px;border-left:1px solid #ffffff30}.top-actions{display:flex;align-items:center;gap:14px}.demo{font-size:12px;color:#c0cbd4}.small-button,.weather-control{border:1px solid #ffffff35;border-radius:25px;background:#17242f55;padding:10px 15px;font-size:12px}.mode-switch{display:inline-flex;align-items:center;gap:8px;border:1px solid #ffffff55;border-radius:999px;background:#101c27dd;color:#d8e4eb;padding:7px 10px 7px 8px;font:600 10px/1 inherit;letter-spacing:.12em;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff22,0 4px 16px #0004}.mode-switch-track{position:relative;width:34px;height:18px;border-radius:999px;background:#53616b;box-shadow:inset 0 1px 3px #0008;transition:background .2s ease}.mode-switch-thumb{position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#eaf4f8;box-shadow:0 1px 5px #0008;transition:transform .2s ease,background .2s ease}.mode-switch[aria-checked=true]{border-color:#8fd7ff99;color:#e6f8ff;background:#123b50ee}.mode-switch[aria-checked=true] .mode-switch-track{background:#2098ca;box-shadow:inset 0 1px 3px #073047,0 0 12px #55d5ff66}.mode-switch[aria-checked=true] .mode-switch-thumb{transform:translateX(16px);background:#fff}.mode-switch:focus-visible{outline:2px solid #bdeaff;outline-offset:3px}.weather-control{display:flex;gap:8px;align-items:center}.weather-control select{border:0;background:transparent;color:white;font-size:12px;max-width:125px}.weather-control option{background:#1e2a35}
.opening{height:100svh;min-height:720px;position:relative;isolation:isolate;overflow:hidden}.weather-wallpaper{position:absolute;inset:-3%;z-index:-2;background:url('assets/clear.webp') center 35%/cover;filter:brightness(.78) saturate(1.05);animation:weather-drift 35s ease-in-out infinite alternate}.opening:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#07111bd9,transparent 85%),linear-gradient(0deg,#12212d,transparent 35%);pointer-events:none}#weather-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.opening-copy{position:absolute;left:8%;top:24%;max-width:680px}.eyebrow{font-size:11px;letter-spacing:2.1px;font-weight:600;color:var(--muted)}.location{display:flex;align-items:center;gap:8px;font-size:16px}.location img{width:22px;height:22px}.location span{font-size:11px;margin-left:15px;color:var(--muted)}.opening-temp{font-size:clamp(110px,12vw,180px);font-weight:200;line-height:1.05;letter-spacing:-9px;margin-top:28px}h1{font-size:clamp(32px,3.3vw,52px);font-weight:300;line-height:1.15;margin:12px 0 20px;letter-spacing:-1.5px}.opening-copy>p:last-child{color:#c7d2da;font-size:14px}
.glass,.card{position:relative;border:1px solid rgba(255,255,255,.18);border-radius:26px;background:radial-gradient(ellipse 120% 80% at 85% -10%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%),linear-gradient(135deg,rgba(var(--panel),.42) 0%,rgba(var(--panel),.68) 100%);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:inset 0 1px 1px 0 rgba(255,255,255,.46),inset 0 -1px 1px 0 rgba(255,255,255,.08),0 20px 50px rgba(0,8,18,.44),0 4px 12px rgba(0,0,0,.22);transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s cubic-bezier(.16,1,.3,1),border-color .32s ease,background .32s ease}.card:hover{transform:translateY(-3px) scale(1.008);border-color:rgba(255,255,255,.32);box-shadow:inset 0 1px 1px 0 rgba(255,255,255,.58),inset 0 -1px 1px 0 rgba(255,255,255,.12),0 26px 60px rgba(0,8,18,.52),0 8px 24px color-mix(in srgb,var(--accent) 22%,transparent)}.opening-aside{position:absolute;right:6%;top:37%;padding:25px;width:230px;background:linear-gradient(135deg,rgba(var(--panel),.45),rgba(var(--panel),.7));backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,.2);border-radius:24px;box-shadow:inset 0 1px 1px 0 rgba(255,255,255,.45),0 20px 45px rgba(0,8,18,.45)}.opening-aside>img{height:64px;width:64px;display:block;margin-bottom:18px}.opening-aside strong{display:block;font-size:25px;font-weight:300;line-height:1.35;margin:12px 0}.opening-aside p{font-size:11px;color:#d1dbe2}.tiny-forecast{display:flex;justify-content:space-between;border-top:1px solid #ffffff25;padding-top:15px;font-size:11px;color:#c7d2dc}.tiny-forecast b{display:block;margin-top:8px;font-size:19px;font-weight:400;color:white}.scroll-cue{position:absolute;bottom:62px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:12px;font-size:12px;color:#d0d8df}.scroll-line{display:block;width:1px;height:35px;background:#f1f4f6a8;animation:scroll-pulse 2s ease-in-out infinite}.opening-foot{position:absolute;bottom:30px;left:4.5%;right:4.5%;display:flex;justify-content:space-between;color:#b9c8d3;font-size:11px;letter-spacing:1.2px}
main{position:relative;isolation:isolate;--accent:#98d1ff}.landscape-wallpaper{position:absolute;inset:0;z-index:-3;background-image:linear-gradient(0deg,#09151ecc,#09151e14 70%),var(--scene);background-size:cover;background-position:center;background-attachment:fixed;transition:filter .4s}.location-stage{position:relative;overflow:visible}.stage-kicker{font-size:11px;letter-spacing:3px;color:#e2e8ef;position:relative;z-index:1}.location-stage h2{font-size:clamp(72px,15.5vw,240px);letter-spacing:9px;font-weight:600;color:#f2f7fb6e;line-height:1.05;margin:12px 0 0;text-shadow:0 3px 50px #fff1}.orb-wrap{width:330px;height:330px;position:absolute;top:49%;left:50%;transform:translate(-50%,-50%)}.orb{position:absolute;inset:12px;border-radius:50%;border:1px solid #f0faff88;box-shadow:inset 8px 5px 18px #e0f3ff38,inset -10px -12px 18px #fff2,0 30px 65px #0005;background:linear-gradient(135deg,#ebfaff25,#15232e35 40%,#d2f0ff15);backdrop-filter:blur(5px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}.orb p{font-size:12px;max-width:230px;margin:7px 0;color:#e2eaf0}.orb strong{font-size:94px;font-weight:200;letter-spacing:-5px;line-height:1.1}.orb span{font-size:17px;font-weight:300}.orb img{width:43px;height:43px;margin-top:4px}.orb-ring{position:absolute;inset:0;border:2px solid #b6e5fa88;border-radius:50%;box-shadow:inset 0 0 7px #e2f6ffbb,0 0 4px #f2fbff,0 0 18px #b5dfff22}.orb-ring:after{content:'';position:absolute;inset:5px;border:1px solid #e6f5ff60;border-radius:50%}.glint{position:absolute;left:80%;top:8%;width:8px;height:8px;border-radius:50%;background:#fff1ce;box-shadow:0 0 10px 5px #eec577a0,0 0 30px 8px #f1bc5360;animation:glint-breathe 4s ease-in-out infinite}.scene-caption{position:absolute;bottom:48px;left:6%;right:6%;display:flex;justify-content:space-between;align-items:end}.scene-caption p{margin:8px 0 0;font-weight:300}.scene-note{font-size:11px!important;text-align:right;color:#e5ebef}
.tabs{position:sticky;top:12px;z-index:15;margin:0 auto;width:88%;max-width:1280px;padding:8px;display:grid;grid-template-columns:repeat(4,1fr);border-radius:26px;background:radial-gradient(ellipse 100% 60% at 50% -20%,rgba(255,255,255,.12),transparent 70%),linear-gradient(135deg,rgba(16,29,40,.72) 0%,rgba(10,20,29,.88) 100%);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(32px) saturate(190%);-webkit-backdrop-filter:blur(32px) saturate(190%);box-shadow:inset 0 1px 1px 0 rgba(255,255,255,.5),inset 0 -1px 1px 0 rgba(255,255,255,.08),0 24px 68px rgba(0,6,14,.6)}.tabs button{position:relative;display:flex;align-items:center;gap:13px;border-radius:18px;padding:14px 18px;text-align:left;background:transparent;border:1px solid transparent;transition:transform .24s cubic-bezier(.16,1,.3,1),background .24s ease,border-color .24s ease,box-shadow .24s ease}.tabs button:hover{background:rgba(255,255,255,.08);transform:translateY(-1px) scale(1.01)}.tabs button[aria-selected=true]{border-color:color-mix(in srgb,var(--accent) 55%,rgba(255,255,255,.35));background:radial-gradient(ellipse 90% 70% at 50% 0%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 75%),linear-gradient(135deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.2),0 8px 24px color-mix(in srgb,var(--accent) 25%,transparent)}.tabs img{width:36px;height:36px}.tabs span{font-size:16px}.tabs small{display:block;font-size:11px;font-weight:400;color:#c8d3dc;margin-top:4px}.tabs b{font-size:10px;font-weight:400;color:#99adbc;margin-left:auto}#panel{max-width:1280px;width:88%;margin:0 auto;padding:65px 0 0}.section-intro{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}.section-intro h2{font-size:33px;font-weight:300;letter-spacing:-1px;margin:6px 0 0}.panel-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.back-to-sky{display:inline-flex;align-items:center;gap:6px;border:1px solid #e5f1ff4a;border-radius:20px;background:linear-gradient(135deg,rgba(var(--panel),.45),rgba(var(--panel),.75));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--accent);padding:8px 16px;font-size:12px;font-weight:500;letter-spacing:.3px;box-shadow:inset 0 1px 0 #ffffff30,0 8px 20px #020a1260;transition:all .2s ease}.back-to-sky:hover{background:linear-gradient(135deg,rgba(var(--panel),.65),rgba(var(--panel),.9));border-color:color-mix(in srgb,var(--accent),white 40%);transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff45,0 12px 26px #020a1290;color:#fff}.sample-chip{font-size:11px;color:#d7e3ec;border:1px solid #d3e0ee32;border-radius:20px;padding:8px 13px;white-space:nowrap}.widgets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.card{padding:26px 28px;overflow:hidden;min-height:240px}.card.wide{grid-column:1/-1}.card-head{display:flex;align-items:center;gap:9px;margin-bottom:24px}.card-head img{width:30px;height:30px}.card-head h3{font-size:16px;font-weight:500;margin:0}.card-head .tag{margin-left:auto}.tag{font-size:11px;color:var(--accent);border:1px solid #cce4fa30;border-radius:18px;padding:5px 10px;white-space:nowrap}.card p{color:#d4dfe6;font-size:14px}.card h4{font-size:22px;font-weight:400;margin:6px 0 12px}.big{font-size:48px;font-weight:250;letter-spacing:-1.5px;line-height:1.15;color:var(--accent)}.big small{font-size:16px;letter-spacing:0;color:#d3dde4}.subtle{font-size:12px!important;color:#bdcbd6!important}.decision-body{display:flex;align-items:center;gap:22px}.decision-body>img{width:75px;height:75px}.decision-body>div{flex:1}.metric-row{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #ffffff1a;padding-top:17px;margin-top:18px}.metric-row span{font-size:12px;color:#c5d0d9}.metric-row b{display:block;color:var(--accent);font-size:21px;font-weight:400;margin-top:5px}.text-button{padding:8px 0;background:none;font-size:12px;color:var(--accent);border-bottom:1px solid #a9d4ed55;margin-top:8px}
.chart{width:100%;height:115px;display:block;margin:13px 0 0}.chart-labels{display:flex;justify-content:space-between;font-size:11px;color:#c3d0da}.forecast-row{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.forecast-cell{text-align:center;padding:12px 4px;border-radius:12px;border:1px solid transparent;background:transparent;color:white}.forecast-cell.active{background:#fff1;border-color:#d6e8f03a}.forecast-cell:hover{background:#ffffff0c}.forecast-cell span{display:block;font-size:12px;color:#d1dce4}.forecast-cell img{width:38px;height:38px;margin:10px 0}.forecast-cell b{display:block;font-size:19px;font-weight:400}.factor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.factor{border:1px solid #f0f7ff20;border-radius:16px;padding:17px;background:#101d271c}.factor>img{height:40px;width:40px;margin-bottom:9px}.factor h4{font-size:14px;margin:0 0 8px}.factor strong{color:var(--accent);font-size:22px;font-weight:400}.factor p{font-size:12px;margin:9px 0 0}.activities{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.activity{position:relative;padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(12,25,37,.4));backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px rgba(0,0,0,.25);text-align:left;transition:transform .26s cubic-bezier(.16,1,.3,1),background .26s ease,border-color .26s ease,box-shadow .26s ease}.activity:hover{transform:translateY(-2px) scale(1.02);background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(20,36,52,.55));border-color:color-mix(in srgb,var(--accent) 55%,white 35%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 28px rgba(0,8,20,.45)}.activity img{width:50px;height:50px;display:block;margin:0 0 14px}.activity strong{font-size:15px;font-weight:500;display:block}.activity span{font-size:12px;color:#ccd8e1;display:block;margin:8px 0}.activity .score{font-size:22px;color:var(--accent)}.activity small{font-size:11px;color:#d3dde5}.timeline{display:flex;gap:4px;margin:25px 0 12px}.timeline i{height:15px;border-radius:4px;flex:1;background:var(--accent);opacity:.35}.timeline i.best{opacity:.95}.outlook{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.outlook>div{background:#14212a33;border:1px solid #ffffff1a;border-radius:14px;padding:18px}.outlook img{height:40px;width:40px;margin:10px 0}.outlook b,.outlook span{display:block}.outlook b{font-size:16px;font-weight:400}.outlook span{font-size:12px;color:#c9d6df;line-height:1.7}.outlook strong{font-size:25px;font-weight:300;color:var(--accent)}
details{border-top:1px solid #ffffff26;margin-top:16px}summary{cursor:pointer;font-size:14px;padding:17px 0;color:#e2edf4}details p{margin-bottom:12px}.data-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}.data-item{display:flex;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid #ffffff17;font-size:13px}.data-item span{color:#d8e1e8}.data-item b{font-weight:400;color:var(--accent);text-align:right}.profile-controls{display:flex;gap:16px;flex-wrap:wrap}.profile-controls label{font-size:12px;color:#d5e0e8;display:grid;gap:8px;flex:1}.profile-controls select{width:100%;padding:11px;border:1px solid #ffffff35;border-radius:9px;background:#20332d;color:white;font-size:14px}.profile-controls option{background:#20332d}.segmented{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}.segmented button{padding:8px 14px;font-size:12px;border:1px solid #ffffff2a;border-radius:20px;background:transparent}.segmented button[aria-pressed=true]{background:var(--accent);color:#11232e}.radar-visual{height:240px;position:relative;border-radius:15px;overflow:hidden;background:url('assets/scenery/mountains.webp') center/cover}.radar-visual canvas{width:100%;height:100%;position:absolute}.radar-visual>span{position:absolute;bottom:14px;left:16px;background:#132330cc;padding:7px 11px;border-radius:18px;font-size:11px}.range-label{display:flex;gap:20px;align-items:center;font-size:12px;margin-top:20px}.range-label input{flex:1;accent-color:var(--accent);min-width:0}.unavailable{font-size:13px;background:#0f1d274d;padding:14px;border-radius:12px;line-height:1.7;color:#c7d5df}.metric-chart{display:grid;grid-template-columns:1fr 1fr;gap:15px;align-items:center}.metric-chart canvas{height:160px}.section-break{grid-column:1/-1;display:flex;align-items:center;gap:20px;margin-top:20px}.section-break h3{font-size:23px;font-weight:300}.section-break:after{content:'';height:1px;background:#ffffff26;flex:1}.engineering-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}.engineering-list details{margin:0}.engineering-list summary{font-size:13px}.engineering-list p{font-size:12px}.daily-list{display:grid;gap:8px}.daily-item{display:grid;grid-template-columns:65px 35px 38px 1fr 38px;align-items:center;gap:14px;font-size:13px;padding:7px 0}.daily-item img{width:30px;height:30px}.temp-track{height:5px;border-radius:4px;background:#ffffff16}.temp-track i{height:100%;display:block;border-radius:4px;background:linear-gradient(90deg,#99cfe7,#eed091)}
footer{max-width:1280px;width:88%;margin:70px auto 0;padding:40px 0;display:flex;gap:25px;align-items:center;flex-wrap:wrap;border-top:1px solid #ffffff22}footer p{font-size:13px;margin:0}footer>span{font-size:11px;color:#b6c8d4;margin-left:auto}footer>a:last-child{font-size:12px}dialog{background:#162631ed;color:#eef4f8;border:1px solid #b8d8ed66;border-radius:24px;padding:30px;max-width:560px;width:90%;box-shadow:0 30px 100px #0008;backdrop-filter:blur(25px)}dialog::backdrop{background:#07111dc2;backdrop-filter:blur(7px)}dialog>button{float:right}dialog h2{font-size:28px;font-weight:300;margin-top:25px}dialog p{font-size:15px}dialog img{width:64px;height:64px}.paused *,.paused *:before,.paused *:after{animation-play-state:paused!important}@keyframes weather-drift{from{transform:scale(1) translateX(0)}to{transform:scale(1.05) translateX(1%)}}@keyframes glint-breathe{50%{opacity:.55;box-shadow:0 0 6px 2px #eec57780}}@keyframes scroll-pulse{50%{opacity:.3;transform:translateY(8px)}}
@media(min-width:1600px){.opening-copy{left:12%;top:26%}.opening-aside{right:12%}.location-stage{min-height:850px}.orb-wrap{width:390px;height:390px}.orb strong{font-size:112px}}
@media(max-width:1000px){.demo,.domain{display:none}.opening-copy{left:6%}.opening-aside{right:4%;width:200px}.tabs{width:94%}.tabs button{padding:12px 10px;gap:8px}.tabs small{font-size:10px}.tabs b{display:none}#panel,footer{width:92%}.factor-grid,.activities{grid-template-columns:repeat(2,1fr)}.section-intro{align-items:start;flex-direction:column}.orb-wrap{width:310px;height:310px}.card{padding:23px}.data-list{grid-template-columns:1fr}}
@media(max-width:650px){.topbar{padding:18px 5%;flex-wrap:wrap;gap:12px}.brand{font-size:24px}.top-actions{gap:8px}.small-button{font-size:10px;padding:8px 10px}.weather-control{padding:8px;font-size:0}.weather-control select{font-size:11px;max-width:105px}.opening{min-height:720px}.opening-copy{left:7%;top:24%;right:7%}.opening-temp{font-size:130px}.opening-copy .eyebrow{font-size:10px}.location{font-size:14px}.location span{display:none}h1{font-size:35px}.opening-aside{display:none}.opening-foot{font-size:9px}.location-stage{position:relative;overflow:visible}.location-stage h2{font-size:17vw;letter-spacing:2px;margin-top:35px}.stage-kicker{font-size:8px;letter-spacing:2px}.orb-wrap{top:50%;width:285px;height:285px}.orb strong{font-size:82px}.scene-caption{bottom:50px}.scene-caption p{font-size:12px}.scene-note{display:none}.tabs{top:8px;width:96%;gap:3px;padding:5px;border-radius:16px}.tabs button{display:flex;flex-direction:column;padding:9px 3px;gap:4px;text-align:center}.tabs img{width:27px;height:27px}.tabs span{font-size:12px}.tabs small{display:none}#panel{padding-top:38px}.section-intro h2{font-size:27px}.panel-actions{width:100%;justify-content:space-between}.widgets{grid-template-columns:1fr;gap:16px}.card{padding:22px 20px;border-radius:20px;min-height:210px}.card.wide{grid-column:auto}.forecast-row{grid-template-columns:repeat(4,1fr)}.forecast-cell:nth-child(n+5){display:none}.factor-grid{gap:8px}.factor{padding:13px}.factor strong{font-size:20px}.activities{gap:9px}.activity{padding:14px}.metric-row{gap:10px}.metric-row b{font-size:18px}.outlook{gap:7px}.outlook>div{padding:13px 9px}.outlook span{font-size:11px}.engineering-list{grid-template-columns:1fr}.big{font-size:40px}.metric-chart{grid-template-columns:1fr 1fr}.metric-chart canvas{height:130px}.landscape-wallpaper{background-attachment:scroll;background-size:auto 100%;background-position:50% top}footer{gap:14px;margin-top:40px}footer>span{margin:0;width:100%}.section-break h3{font-size:21px}}
#scene-weather{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
main[data-weather=night] .landscape-wallpaper{filter:brightness(.38) saturate(.7)}main[data-weather=storm] .landscape-wallpaper{filter:brightness(.55) saturate(.65)}main[data-weather=rain] .landscape-wallpaper{filter:brightness(.8) saturate(.8)}main[data-weather=snow] .landscape-wallpaper{filter:brightness(.9) saturate(.4)}
@media(max-width:650px){.landscape-wallpaper{background-attachment:fixed;background-size:cover;background-position:center}.top-actions{flex-wrap:wrap}.topbar{gap:10px}.section-break h3{white-space:normal}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Cloud flight passage between opening and landing: camera dives through active weather */

/* Mode handoff: the orb leads the interaction with a subtle organic liquid glass warp while surrounding scenery softly relaxes. */
main.tab-transition .landscape-wallpaper,
main.tab-transition .ambient-sky,
main.tab-transition .descent-viewport > :not(.orb-wrap):not(.atmosphere-fx):not(canvas) {
  filter: blur(5px) saturate(0.85);
  opacity: 0.72;
  transition: filter 0.32s ease, opacity 0.32s ease;
}
main.tab-transition .orb-wrap {
  z-index: 30;
  animation: orb-tab-handoff 750ms cubic-bezier(0.25, 1, 0.5, 1) both;
  filter: drop-shadow(0 25px 35px rgba(0, 8, 18, 0.55)) brightness(1.12);
  transform-style: flat;
  perspective: none;
}
main.tab-transition .card,
main.tab-transition .tabs,
main.tab-transition .opening-aside {
  animation: glass-tab-warp 750ms cubic-bezier(0.25, 1, 0.5, 1) both;
}
.orb {
  isolation: isolate;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.08) 22%, transparent 55%),
    radial-gradient(ellipse at 50% 88%, color-mix(in srgb, var(--orb-accent, #98d1ff) 42%, transparent) 0%, transparent 68%),
    linear-gradient(145deg, rgba(230, 245, 255, 0.2) 0%, rgba(18, 32, 44, 0.45) 45%, rgba(10, 22, 32, 0.75) 100%);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.7),
    inset 0 0 28px rgba(255, 255, 255, 0.35),
    inset -14px -18px 30px rgba(0, 8, 16, 0.65),
    inset 12px 10px 24px rgba(255, 255, 255, 0.4),
    0 35px 80px rgba(0, 6, 16, 0.68),
    0 0 45px color-mix(in srgb, var(--orb-accent, #98d1ff) 24%, transparent);
}
.orb:before {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.45) 8%, rgba(255, 255, 255, 0.15) 16%, transparent 32%),
    radial-gradient(ellipse at 72% 82%, color-mix(in srgb, var(--orb-accent, #98d1ff) 50%, transparent) 0%, transparent 58%);
  mix-blend-mode: screen;
  opacity: 0.78;
  pointer-events: none;
  animation: orb-weather-sheen 8s ease-in-out infinite alternate;
}
.orb:after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, transparent 48%, rgba(4, 14, 22, 0.38) 76%, rgba(2, 8, 14, 0.72) 100%),
    radial-gradient(ellipse at 50% 92%, color-mix(in srgb, var(--orb-accent, #98d1ff) 28%, transparent), transparent 55%);
  box-shadow: inset -16px -20px 28px rgba(6, 18, 28, 0.45);
  pointer-events: none;
}
.orb-reflection {
  position: absolute !important;
  inset: -3%;
  border-radius: 50%;
  background-image: var(--scene);
  background-size: 155% auto;
  background-position: center 64%;
  transform: scale(1.16) scaleY(-0.42) translateY(26%);
  filter: blur(2px) saturate(1.45) brightness(0.9);
  mask-image: radial-gradient(ellipse 65% 55% at 50% 64%, black 25%, rgba(0, 0, 0, 0.5) 60%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 64%, black 25%, rgba(0, 0, 0, 0.5) 60%, transparent 95%);
  opacity: 0.58;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: background-image 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s ease;
  z-index: 0 !important;
}
main.tab-transition .orb-reflection {
  transform: scale(1.22) scaleY(-0.46) translateY(22%);
  filter: blur(2.5px) saturate(1.75) brightness(1.08);
  transition: transform 0.4s ease, filter 0.4s ease;
}
.orb > * { position: relative; z-index: 2; }
.orb-ring {
  border-color: color-mix(in srgb, var(--orb-accent, #98d1ff), white 52%);
  box-shadow:
    inset 0 0 8px color-mix(in srgb, var(--orb-accent, #98d1ff), white 38%),
    0 0 6px color-mix(in srgb, var(--orb-accent, #98d1ff), white 48%),
    0 0 26px color-mix(in srgb, var(--orb-accent, #98d1ff), transparent 25%);
}
.orb-ring:after {
  border-color: color-mix(in srgb, var(--orb-accent, #98d1ff), white 55%);
}
@keyframes orb-tab-handoff {
  0% {
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 25px 35px rgba(0, 8, 18, 0.5)) brightness(1);
  }
  45% {
    transform: translate(-50%, -51%) scale(1.04);
    filter: drop-shadow(0 32px 50px rgba(0, 8, 18, 0.7)) brightness(1.14);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 25px 35px rgba(0, 8, 18, 0.5)) brightness(1);
  }
}
@keyframes orb-weather-sheen {
  0% { transform: translate3d(-6%, -4%, 0) rotate(-8deg); opacity: 0.58; }
  50% { transform: translate3d(5%, 3%, 0) rotate(8deg); opacity: 0.88; }
  100% { transform: translate3d(-6%, -4%, 0) rotate(-8deg); opacity: 0.58; }
}
@keyframes glass-tab-warp {
  0% {
    transform: scale(1) translateY(0);
  }
  35% {
    transform: scale(1.012) translateY(-2px);
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.65), 0 28px 70px rgba(0, 8, 18, 0.58), 0 8px 26px color-mix(in srgb, var(--accent) 30%, transparent);
    border-color: color-mix(in srgb, var(--accent) 45%, rgba(255, 255, 255, 0.45));
  }
  70% {
    transform: scale(0.996) translateY(0.5px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
@media(max-width:650px){
  main.tab-transition .landscape-wallpaper,
  main.tab-transition .ambient-sky,
  main.tab-transition .descent-viewport > :not(.orb-wrap):not(.atmosphere-fx):not(canvas) {
    filter: blur(4px) saturate(0.85);
    opacity: 0.76;
  }
  .orb-ring {
    box-shadow: inset 0 0 7px color-mix(in srgb, var(--orb-accent, #98d1ff), white 35%), 0 0 4px color-mix(in srgb, var(--orb-accent, #98d1ff), white 45%), 0 0 18px color-mix(in srgb, var(--orb-accent, #98d1ff), transparent 28%);
  }
}

/* Ambient Sky and Atmosphere FX for scene environment */
.ambient-sky{position:fixed;left:-14vw;top:-10vh;width:128vw;height:120vh;z-index:-2;background-image:linear-gradient(90deg,transparent,#dbe8f01a 48%,transparent 70%),url('assets/storm.webp');background-size:130% 100%,cover;background-position:center;opacity:0;filter:blur(8px) saturate(.6);mix-blend-mode:screen;animation:ambient-cloud-drift 82s ease-in-out infinite alternate;will-change:transform;pointer-events:none;transition:opacity 1.2s ease}
.atmosphere-fx{position:absolute;inset:0;z-index:9;overflow:hidden;pointer-events:none}.atmosphere-fx>i{position:absolute;display:block;opacity:0;transition:opacity 1.2s ease}
.sun-halo{width:46vw;height:46vw;max-width:650px;max-height:650px;right:-4%;top:-14%;border-radius:50%;background:radial-gradient(circle,#fff8d736 0 2%,#cbe8ff2a 7%,#9fd8ff15 22%,transparent 63%);filter:blur(3px);animation:halo-breathe 9s ease-in-out infinite}
.sun-rays{width:75vw;height:95%;right:-5%;top:-8%;transform:rotate(-12deg);transform-origin:80% 0;background:repeating-conic-gradient(from 212deg at 82% 0%,transparent 0 7deg,#dff3ff16 8deg 11deg,transparent 12deg 21deg);filter:blur(8px);mask:linear-gradient(180deg,#000,transparent 78%);animation:rays-shift 18s ease-in-out infinite alternate}
.storm-flash{inset:0;background:radial-gradient(circle at 72% 18%,#eaf7ff8a,transparent 22%);mix-blend-mode:screen;animation:storm-exposure 11s steps(1,end) infinite}
.wet-reflection{left:0;right:0;bottom:-8%;height:43%;background:var(--scene) center bottom/cover;transform:scaleY(-1);filter:blur(7px) saturate(.65);mask:linear-gradient(180deg,transparent 2%,#000 58%,transparent 96%);mix-blend-mode:screen;animation:reflection-shimmer 8s ease-in-out infinite alternate}
.surface-mist{left:-12%;right:-12%;bottom:0;height:35%;background:radial-gradient(ellipse at 35% 82%,#d9e7ef39,transparent 42%),radial-gradient(ellipse at 72% 60%,#c9dbe62b,transparent 38%);filter:blur(16px);animation:mist-drift 24s ease-in-out infinite alternate}
main[data-weather=rain] .wet-reflection,main[data-weather=storm] .wet-reflection{opacity:.26}main[data-weather=rain] .surface-mist,main[data-weather=storm] .surface-mist,main[data-weather=snow] .surface-mist{opacity:.36}main[data-weather=storm] .storm-flash{opacity:1}main[data-weather=clear] .sun-halo,main[data-weather=clear] .sun-rays{opacity:.72}main[data-weather=cloudy] .sun-rays{opacity:.18}main[data-weather=night] .sun-halo{opacity:.42;filter:hue-rotate(25deg) saturate(.35) blur(4px)}
main.ambient-active[data-weather=rain] .ambient-sky,main.ambient-active[data-weather=cloudy] .ambient-sky{opacity:.1}main.ambient-active[data-weather=clear] .ambient-sky{opacity:.035}main.ambient-active[data-weather=night] .ambient-sky{opacity:.055;filter:blur(10px) brightness(.45)}main.ambient-active[data-weather=storm] .ambient-sky{opacity:.16;animation-duration:47s}main.ambient-active[data-weather=snow] .ambient-sky{opacity:.08;filter:blur(13px) saturate(.15)}

@keyframes orb-float{50%{transform:translate(-50%,calc(-50% - 7px))}}
@keyframes ring-breathe{50%{transform:scale(1.018);opacity:.72;box-shadow:inset 0 0 13px #e2f6ffdd,0 0 8px #f2fbff,0 0 34px color-mix(in srgb,var(--accent),transparent 65%)}}
@keyframes activity-breathe{50%{opacity:1;transform:rotate(4deg)}}
@keyframes indicator-breathe{50%{transform:scale(1.5);opacity:.55;box-shadow:0 0 0 12px color-mix(in srgb,var(--accent),transparent 90%),0 0 30px var(--accent)}}
@keyframes ambient-cloud-drift{from{transform:translate3d(-1.5%,0,0) scale(1.02)}to{transform:translate3d(7%,1%,0) scale(1.06)}}
@keyframes halo-breathe{50%{transform:scale(1.06);opacity:.5}}
@keyframes rays-shift{to{transform:rotate(-8deg) translateX(-2%)}}
@keyframes mist-drift{to{transform:translate3d(6%,-2%,0) scale(1.08)}}
@keyframes reflection-shimmer{to{transform:scaleY(-1) translate3d(1.5%,-1%,0);filter:blur(9px) saturate(.72)}}
@keyframes storm-exposure{0%,78%,81%,100%{filter:brightness(1)}79%{filter:brightness(1.7)}80%{filter:brightness(1.15)}}
@keyframes wake-shimmer{to{transform:rotate(-3deg) translateX(12px) scaleX(.86);opacity:.52}}
@keyframes descent-flash{0%,72%,75%,100%{opacity:0}73%{opacity:.68}74%{opacity:.12}}
main[data-weather=storm] .descent-flash{animation:descent-flash 8.5s steps(1,end) infinite}

/* Layered weather compositing: one place, with condition and daylight above it. */
.weather-layer-pack{position:absolute;inset:0;overflow:hidden;pointer-events:none;isolation:isolate;transition:opacity .8s ease,filter .28s ease}.weather-layer-pack>i{position:absolute;display:block;pointer-events:none}.hero-weather-layers{z-index:0}.site-weather-layers{z-index:-2;opacity:.72}.layer-cloud{inset:-18%;background-image:radial-gradient(ellipse at 24% 36%,#eef8ff42 0 7%,transparent 31%),radial-gradient(ellipse at 73% 48%,#b9d0df3f 0 9%,transparent 35%),url('assets/storm.webp');background-size:115% 90%,108% 100%,cover;background-position:center;mix-blend-mode:screen;filter:blur(10px) brightness(.66) saturate(.65);opacity:0;animation:layer-cloud-drift 70s ease-in-out infinite alternate;will-change:transform}.layer-rays{inset:-20%;background:repeating-conic-gradient(from 214deg at 80% -4%,transparent 0 7deg,#e9f5ff20 8deg 11deg,transparent 12deg 22deg);filter:blur(12px);opacity:0;animation:layer-rays-drift 24s ease-in-out infinite alternate}.layer-rain{inset:-12%;background:repeating-linear-gradient(108deg,transparent 0 22px,#d9efff13 23px,#d9efff13 24px,transparent 25px 52px);mix-blend-mode:screen;opacity:0;transform:translate3d(-4%,-3%,0);animation:layer-rain-fall 1.8s linear infinite}.layer-lightning{inset:0;background:radial-gradient(circle at 70% 17%,#f6fbff65,transparent 18%),linear-gradient(112deg,transparent 37%,#eaf7ff1a 48%,transparent 59%);mix-blend-mode:screen;opacity:0}.layer-stars{inset:0;background-image:radial-gradient(circle at 12% 22%,#fff 0 1px,transparent 2px),radial-gradient(circle at 68% 19%,#d8edff 0 1px,transparent 2px),radial-gradient(circle at 84% 42%,#fff 0 1px,transparent 2px),radial-gradient(circle at 39% 12%,#fff 0 1px,transparent 2px),radial-gradient(circle at 56% 63%,#d8edff 0 1px,transparent 2px);background-size:170px 140px,230px 180px,280px 220px,190px 170px,310px 240px;opacity:0;animation:stars-breathe 8s ease-in-out infinite alternate}
.hero-weather-layers .layer-cloud{opacity:.2}.hero-weather-layers .layer-rain{opacity:.12}.hero-weather-layers .layer-rays{opacity:.08}
main[data-weather=rain] .site-weather-layers .layer-cloud,main[data-weather=storm] .site-weather-layers .layer-cloud,main[data-weather=cloudy] .site-weather-layers .layer-cloud{opacity:.22}main[data-weather=rain] .site-weather-layers .layer-rain,main[data-weather=storm] .site-weather-layers .layer-rain{opacity:.2}main[data-weather=storm] .site-weather-layers .layer-lightning{opacity:.42;animation:layer-lightning-flash 9s steps(1,end) infinite}main[data-weather=clear] .site-weather-layers .layer-rays{opacity:.22}main[data-weather=cloudy] .site-weather-layers .layer-rays{opacity:.08}main[data-weather=snow] .site-weather-layers .layer-cloud{opacity:.16}body[data-time=night] .weather-layer-pack .layer-stars{opacity:.55}body[data-time=night] .weather-layer-pack .layer-rays{opacity:.03}body[data-time=night] .weather-layer-pack .layer-cloud{filter:blur(12px) brightness(.35) saturate(.45)}body[data-time=night] .opening:after{background:linear-gradient(90deg,#030914e8,transparent 85%),linear-gradient(0deg,#050b14,transparent 42%)}body[data-time=night] .weather-wallpaper,body[data-time=night] .landscape-wallpaper{filter:brightness(.34) saturate(.62)}main.content-active .site-weather-layers{opacity:.28}main.content-active .ambient-sky{opacity:.035!important}main.content-active #scene-weather{opacity:.22}main.tab-transition .site-weather-layers{filter:blur(9px) saturate(.55);opacity:.24}

/* ==========================================================================
   SCROLL-CONTROLLED SKY FLIGHT & CITY LANDING (Igloo Cinematic Reference)
   Sequence:
   full-screen current-weather scene (#opening)
   -> scroll-controlled sky flight (blue/white depth, fast cloud parallax)
   -> city horizon arrives (forward city zoom)
   -> city name and staged orb reveal
   -> widgets/tabs
   ========================================================================== */

/* Sky Flight Container: pinned viewport gives full scroll-driven camera control */
.weather-descent {
  height: 220svh;
  min-height: 1400px;
  position: relative;
  --descent-progress: 0;
  isolation: isolate;
}
.descent-viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  perspective: 750px;
  perspective-origin: 50% 45%;
  transform-origin: 50% 48%;
  will-change: transform;
  /* Cinematic blue/white atmospheric sky depth */
  background:
    radial-gradient(ellipse 90% 65% at 50% 12%, rgba(255, 255, 255, 0.45) 0%, rgba(200, 230, 255, 0.22) 35%, transparent 72%),
    linear-gradient(180deg, #1b62b0 0%, #3586d6 20%, #7db9ed 44%, #dcedfb 68%, #ffffff 82%, #e5f2fc 92%, #081622 100%);
}
.descent-viewport:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 15%, rgba(255, 255, 255, calc(0.38 * (1 - var(--descent-progress)))), transparent 65%);
}
.descent-viewport:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 9;
  background: linear-gradient(180deg, rgba(13, 24, 34, 0.55) 0%, transparent 25%, transparent 72%, rgba(8, 20, 28, 0.95) 100%);
  pointer-events: none;
}

/* Atmospheric Sky Depth: condition variants */
main[data-weather=clear] .descent-viewport {
  background:
    radial-gradient(circle at 78% 12%, rgba(255, 245, 210, 0.5) 0%, rgba(220, 242, 255, 0.25) 28%, transparent 60%),
    linear-gradient(180deg, #1860a4 0%, #297abf 24%, #4d95d6 50%, #85b8e4 74%, #bfe0f8 90%, #689ec9 100%);
}
main[data-weather=cloudy] .descent-viewport {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.35) 0%, rgba(210, 228, 242, 0.18) 40%, transparent 75%),
    linear-gradient(180deg, #325878 0%, #4f7899 24%, #82a8c5 50%, #d2e4f0 72%, #f0f7fb 84%, #182b3a 100%);
}
main[data-weather=rain] .descent-viewport {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.3) 0%, rgba(185, 218, 242, 0.15) 38%, transparent 70%),
    linear-gradient(180deg, #254a6e 0%, #3e6d94 22%, #6e9fc2 48%, #c5e0f4 70%, #edf6fc 82%, #0d1e2d 100%);
}
main[data-weather=storm] .descent-viewport {
  background:
    radial-gradient(circle at 68% 22%, rgba(240, 250, 255, 0.38) 0%, transparent 45%),
    linear-gradient(180deg, #182e44 0%, #294865 25%, #466e8f 52%, #8baec8 72%, #d0e4f2 84%, #08121a 100%);
}
main[data-weather=snow] .descent-viewport {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.5) 0%, rgba(225, 240, 252, 0.25) 45%, transparent 75%),
    linear-gradient(180deg, #426b8e 0%, #638eae 26%, #9fc0da 52%, #e5f1f9 74%, #ffffff 86%, #203547 100%);
}
body[data-time=night] .descent-viewport {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(65, 115, 180, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, #020712 0%, #07152a 28%, #0e223d 55%, #182e4c 75%, #050b14 100%);
}
body[data-time=night] .descent-viewport:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle at 16% 24%, #eaf6ff 0 1px, transparent 2px), radial-gradient(circle at 64% 18%, #d4e9ff 0 1px, transparent 2px), radial-gradient(circle at 82% 38%, #fff 0 1px, transparent 2px);
  background-size: 170px 150px, 230px 190px, 290px 220px;
  opacity: .32;
  animation: stars-breathe 10s ease-in-out infinite alternate;
  pointer-events: none;
}
body[data-time=night] .descent-horizon {
  filter: brightness(.38) saturate(.62) blur(calc((1 - var(--descent-progress)) * 5px));
}
body[data-time=night] .descent-cloud {
  filter: blur(12px) brightness(.3) saturate(.42);
}

/* Faster Cloud Parallax: high velocity, counter-directional 3D sweeps */
.descent-cloud {
  position: absolute;
  inset: -22%;
  background-image: radial-gradient(ellipse at 22% 34%, #e6edf2b8 0 5%, #64717d91 18%, transparent 42%), radial-gradient(ellipse at 76% 54%, #cfd8df9c 0 8%, #53616e8c 25%, transparent 49%), url('assets/storm.webp');
  background-size: 110% 90%, 105% 100%, cover;
  background-position: center;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  pointer-events: none;
}
.descent-cloud-back {
  z-index: 1;
  filter: blur(14px) brightness(.92);
  opacity: calc(.85 - var(--descent-progress) * .45);
  transform: perspective(750px) translateZ(calc(var(--descent-progress) * 520px)) scale(calc(1 + var(--descent-progress) * 1.2)) translate3d(calc(var(--descent-progress) * -12%), calc(var(--descent-progress) * -22%), 0);
  will-change: transform, opacity;
}
.descent-cloud-mid {
  z-index: 3;
  filter: blur(8px) brightness(.98);
  opacity: calc(.95 - var(--descent-progress) * .85);
  transform: perspective(750px) translateZ(calc(var(--descent-progress) * 1180px)) scale(calc(1.05 + var(--descent-progress) * 3.0)) translate3d(calc(var(--descent-progress) * 26%), calc(var(--descent-progress) * -40%), 0);
  will-change: transform, opacity;
}
.descent-cloud-front {
  z-index: 6;
  filter: blur(calc(16px + var(--descent-progress) * 22px)) brightness(1.08);
  opacity: calc(.98 - var(--descent-progress) * .98);
  transform: perspective(750px) translateZ(calc(var(--descent-progress) * 1850px)) scale(calc(1.15 + var(--descent-progress) * 6.4)) translate3d(calc(var(--descent-progress) * -36%), calc(var(--descent-progress) * -62%), 0);
  will-change: transform, opacity;
}

/* Weather-specific descent cloud variations: first-person flight through active weather */
main[data-weather=clear] .descent-cloud {
  background-image: radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.85) 0 8%, rgba(215, 238, 255, 0.35) 24%, transparent 55%),
                    radial-gradient(ellipse at 80% 65%, rgba(255, 255, 255, 0.8) 0 10%, rgba(195, 228, 255, 0.3) 28%, transparent 58%),
                    url('assets/clear.webp');
  mix-blend-mode: screen;
}
main[data-weather=clear] .descent-cloud-back {
  filter: blur(10px) brightness(1.02) saturate(1.05);
  mask-image: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0.25) 0%, black 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0.25) 0%, black 70%);
}
main[data-weather=clear] .descent-cloud-mid {
  filter: blur(6px) brightness(1.05) saturate(1.08);
  mask-image: radial-gradient(ellipse at 50% 50%, transparent 22%, black 65%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 22%, black 65%);
}
main[data-weather=clear] .descent-cloud-front {
  filter: blur(calc(12px + var(--descent-progress) * 14px)) brightness(1.08) saturate(1.1);
  mask-image: radial-gradient(circle at 50% 50%, transparent 35%, black 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 35%, black 75%);
}
main[data-weather=clear] .descent-mist-back {
  background: radial-gradient(ellipse at 25% 45%, rgba(255, 255, 255, 0.25) 0%, rgba(210, 238, 255, 0.12) 35%, transparent 60%),
              radial-gradient(ellipse at 75% 55%, rgba(255, 255, 255, 0.22) 0%, rgba(195, 230, 255, 0.1) 32%, transparent 55%);
}
main[data-weather=clear] .descent-mist-front {
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 250, 230, 0.18) 0%, transparent 45%),
              linear-gradient(180deg, transparent 50%, rgba(200, 230, 252, 0.15) 85%, rgba(175, 215, 245, 0.22) 100%);
}
main[data-weather=snow] .descent-cloud {
  background-image: radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.9) 0 12%, rgba(210, 230, 245, 0.5) 28%, transparent 60%),
                    url('assets/snow.webp');
  mix-blend-mode: screen;
}
main[data-weather=night] .descent-cloud {
  background-image: radial-gradient(ellipse at 25% 30%, rgba(120, 160, 200, 0.4) 0 10%, transparent 50%),
                    url('assets/backgrounds/home_night.webp');
}

/* Forward City Zoom: emerging from atmospheric haze into sharp coastal panorama */
.descent-horizon {
  position: absolute;
  inset: -32% -30% -25%;
  z-index: 2;
  background-image: linear-gradient(180deg, rgba(8, 20, 28, .35) 0%, rgba(8, 20, 28, .05) 38%, rgba(7, 19, 28, .85) 100%), var(--scene);
  background-size: cover;
  background-position: center 68%;
  opacity: calc(clamp(0, (var(--descent-progress) - .16) / .64, 1));
  transform: translate3d(calc(var(--descent-progress) * -2.5%), calc((1 - var(--descent-progress)) * 28%), 0) scale(calc(.78 + var(--descent-progress) * .26));
  filter: blur(calc((1 - var(--descent-progress)) * 10px)) saturate(calc(.75 + var(--descent-progress) * .25)) brightness(calc(.68 + var(--descent-progress) * .32));
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 12%, black 32%, black 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 12%, black 32%, black 100%);
  will-change: transform, opacity, filter;
  pointer-events: none;
}

/* Atmospheric mist fields */
.descent-mist {
  position: absolute;
  inset: -20% -18%;
  pointer-events: none;
  will-change: transform, opacity;
}
.descent-mist-back {
  z-index: 5;
  background: radial-gradient(ellipse at 30% 50%, rgba(230, 245, 255, .45) 0%, transparent 60%), radial-gradient(ellipse at 75% 45%, rgba(215, 238, 255, .35) 0%, transparent 55%);
  filter: blur(24px);
  opacity: calc(.7 - var(--descent-progress) * .65);
  transform: translate3d(calc(var(--descent-progress) * 14%), calc((1 - var(--descent-progress)) * 10%), 0) scale(calc(1.08 - var(--descent-progress) * .12));
}
.descent-mist-front {
  z-index: 7;
  background: linear-gradient(180deg, transparent 20%, rgba(220, 242, 255, .4) 55%, rgba(185, 222, 250, .6) 100%);
  filter: blur(16px);
  opacity: calc(.85 - var(--descent-progress) * .82);
  transform: translate3d(calc(var(--descent-progress) * -10%), calc((1 - var(--descent-progress)) * 18%), 0) scale(calc(1.18 - var(--descent-progress) * .15));
}
.descent-flash {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: radial-gradient(circle at 68% 26%, #e7f5ffb8, transparent 14%), linear-gradient(110deg, transparent 35%, #d9eeff2b 48%, transparent 62%);
  opacity: 0;
  pointer-events: none;
}

/* Weather canvas in flight */
#descent-weather {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  opacity: calc(1 - var(--descent-progress) * .35);
}

/* Atmospheric weather layer keyframes */
@keyframes layer-cloud-drift { from { transform: translate3d(-2%, 1%, 0) scale(1.02); } to { transform: translate3d(8%, -3%, 0) scale(1.09); } }
@keyframes layer-rays-drift { to { transform: translate3d(-3%, 2%, 0) rotate(5deg); } }
@keyframes layer-rain-fall { to { transform: translate3d(4%, 8%, 0); } }
@keyframes layer-lightning-flash { 0%, 78%, 81%, 100% { filter: brightness(1); } 79% { filter: brightness(2.1); } 80% { filter: brightness(1.15); } }
@keyframes stars-breathe { to { opacity: .76; transform: translate3d(0, 1%, 0); } }


/* ==========================================================================
   CITY LANDING & STAGED ORB REVEAL
   1. City horizon arrives (camera settles)
   2. City name and kicker reveal
   3. Outer radiant ring and glint reveal
   4. Crystal glass orb sphere materializes
   5. Inner values, labels, and weather icon lift into sharp focus
   6. Navigation tabs dock at bottom
   ========================================================================== */

.location-stage {
  position: relative;
  will-change: transform;
}

/* Stage 1: Kicker & City Name */
.stage-kicker {
  position: absolute;
  top: clamp(65px, 8.5%, 105px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 3px;
  color: #e2e8ef;
  z-index: 10;
  pointer-events: none;
  opacity: calc(clamp(0, var(--landing-progress, 0) / .4, 1));
  transform: translateY(calc((1 - clamp(0, var(--landing-progress, 0) / .4, 1)) * -12px));
  will-change: opacity, transform;
}

/* 2.5D Horizon Layering: Title stands behind the foreground cityscape/landscape horizon */
.stage-float-actions {
  position: absolute;
  top: clamp(145px, 20%, 215px);
  left: 4.5%;
  right: 4.5%;
  z-index: 3;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 16px;
  pointer-events: none;
  opacity: calc(clamp(0, var(--landing-progress, 0) / .45, 1));
  transform: translateY(calc((1 - clamp(0, var(--landing-progress, 0) / .45, 1)) * -14px));
  will-change: opacity, transform;
}
.stage-float-actions h2 {
  min-width: 0;
  margin: 0;
  text-align: center;
  font-size: clamp(48px, 9.5vw, 148px);
  letter-spacing: clamp(4px, 0.9vw, 12px);
  white-space: nowrap;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1;
  text-shadow:
    0 4px 40px rgba(0, 0, 0, 0.65),
    0 0 70px rgba(255, 255, 255, 0.4),
    0 0 120px color-mix(in srgb, var(--accent, #98d1ff) 50%, transparent);
  pointer-events: none;
  filter: blur(calc((1 - clamp(0, var(--landing-progress, 0) / .45, 1)) * 8px));
  will-change: filter;
}
.stage-float-actions button {
  width: 48px;
  height: 48px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.22), transparent 70%),
    linear-gradient(135deg, rgba(238, 248, 255, 0.2), rgba(22, 39, 51, 0.65));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.5), 0 12px 30px rgba(2, 10, 18, 0.55);
  pointer-events: auto;
  position: relative;
  z-index: 15;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), background 0.24s ease, box-shadow 0.24s ease;
  opacity: calc(clamp(0, (var(--landing-progress, 0) - .2) / .5, 1));
}
.stage-float-actions button:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: rgba(255, 255, 255, 0.45);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.35), transparent 70%),
    linear-gradient(135deg, rgba(238, 248, 255, 0.32), rgba(32, 59, 75, 0.75));
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.7), 0 16px 36px rgba(0, 0, 0, 0.5);
}
.stage-float-actions img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(1.35) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* Foreground Skyline: matching perspective & zoom, occluding bottom half of letters */
.descent-skyline {
  position: absolute;
  inset: -32% -30% -25%;
  z-index: 5;
  background-image: linear-gradient(180deg, transparent 35%, rgba(8, 20, 28, 0.28) 68%, rgba(7, 19, 28, 0.88) 100%), var(--scene);
  background-size: cover;
  background-position: center 68%;
  opacity: calc(clamp(0, (var(--descent-progress) - .16) / .64, 1));
  transform: translate3d(calc(var(--descent-progress) * -2.5%), calc((1 - var(--descent-progress)) * 28%), 0) scale(calc(.78 + var(--descent-progress) * .26));
  filter: blur(calc((1 - var(--descent-progress)) * 10px)) saturate(calc(.75 + var(--descent-progress) * .25)) brightness(calc(.68 + var(--descent-progress) * .32));
  mask-image: var(--skyline-mask, linear-gradient(180deg, transparent 0%, transparent 45%, rgba(0, 0, 0, 0.82) 53%, black 60%, black 100%));
  -webkit-mask-image: var(--skyline-mask, linear-gradient(180deg, transparent 0%, transparent 45%, rgba(0, 0, 0, 0.82) 53%, black 60%, black 100%));
  pointer-events: none;
  will-change: transform, opacity, filter;
}

#landscape[data-tab="home"] .descent-skyline {
  --skyline-mask: linear-gradient(180deg, transparent 0%, transparent 43%, rgba(0, 0, 0, 0.82) 51%, black 58%, black 100%);
}
#landscape[data-tab="farm"] .descent-skyline {
  --skyline-mask: linear-gradient(180deg, transparent 0%, transparent 44%, rgba(0, 0, 0, 0.82) 51%, black 57%, black 100%);
}
#landscape[data-tab="work"] .descent-skyline {
  --skyline-mask: linear-gradient(180deg, transparent 0%, transparent 43%, rgba(0, 0, 0, 0.85) 50%, black 56%, black 100%);
}
#landscape[data-tab="adventure"] .stage-float-actions {
  top: clamp(120px, 16.5%, 175px);
}
#landscape[data-tab="adventure"] .stage-float-actions h2 {
  color: #ffffff;
  text-shadow:
    0 2px 30px rgba(0, 0, 0, 0.9),
    0 0 50px rgba(255, 255, 255, 0.7),
    0 0 100px color-mix(in srgb, var(--accent, #d3bcff) 80%, transparent);
}
#landscape[data-tab="adventure"] .descent-skyline {
  --skyline-mask: linear-gradient(180deg, transparent 0%, transparent 33%, rgba(0, 0, 0, 0.85) 42%, black 50%, black 100%);
}

/* Stage 2 & 3: Staged Orb Container */
.orb-wrap {
  width: 330px;
  height: 330px;
  position: absolute;
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%) scale(calc(.84 + var(--landing-progress, 0) * .16));
  opacity: calc(clamp(0, (var(--landing-progress, 0) - .12) / .36, 1));
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 12;
}

/* Stage 2: Outer radiant activity ring & glint */
.orb-ring {
  position: absolute;
  inset: 0;
  border: 2px solid color-mix(in srgb, var(--orb-accent, #98d1ff), white 42%);
  border-radius: 50%;
  box-shadow: inset 0 0 7px color-mix(in srgb, var(--orb-accent, #98d1ff), white 30%),
              0 0 5px color-mix(in srgb, var(--orb-accent, #98d1ff), white 40%),
              0 0 22px color-mix(in srgb, var(--orb-accent, #98d1ff), transparent 30%);
  opacity: var(--orb-ring-reveal, 0);
  transform: scale(calc(.85 + var(--orb-ring-reveal, 0) * .15));
  will-change: transform, opacity;
  animation: ring-breathe 4.6s ease-in-out infinite;
}
.orb-ring:after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--orb-accent, #98d1ff), white 45%);
  border-radius: 50%;
}
.glint {
  position: absolute;
  left: 80%;
  top: 8%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff1ce;
  box-shadow: 0 0 10px 5px #eec577a0, 0 0 30px 8px #f1bc5360;
  opacity: var(--orb-ring-reveal, 0);
  will-change: opacity;
  animation: glint-breathe 4s ease-in-out infinite;
}

/* Stage 3: Crystal glass orb sphere body & sheen */
.orb {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.7),
    inset 0 0 28px rgba(255, 255, 255, 0.35),
    inset -14px -18px 30px rgba(0, 8, 16, 0.65),
    inset 12px 10px 24px rgba(255, 255, 255, 0.4),
    0 35px 80px rgba(0, 6, 16, 0.68),
    0 0 45px color-mix(in srgb, var(--orb-accent, #98d1ff) 24%, transparent);
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.08) 22%, transparent 55%),
    radial-gradient(ellipse at 50% 88%, color-mix(in srgb, var(--orb-accent, #98d1ff) 42%, transparent) 0%, transparent 68%),
    linear-gradient(145deg, rgba(230, 245, 255, 0.2) 0%, rgba(18, 32, 44, 0.45) 45%, rgba(10, 22, 32, 0.75) 100%);
  backdrop-filter: blur(calc(var(--orb-body-reveal, 0) * 14px)) saturate(180%);
  -webkit-backdrop-filter: blur(calc(var(--orb-body-reveal, 0) * 14px)) saturate(180%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  opacity: var(--orb-body-reveal, 0);
  transform: scale(calc(.88 + var(--orb-body-reveal, 0) * .12));
  will-change: transform, opacity, backdrop-filter;
  isolation: isolate;
}

/* Stage 4: Inner weather values & typography */
.orb > p,
.orb > strong,
.orb > span,
.orb > img,
.orb > .activity-indicator {
  opacity: var(--orb-content-reveal, 0);
  transform: translateY(calc((1 - var(--orb-content-reveal, 0)) * 12px));
  will-change: transform, opacity;
  position: relative;
  z-index: 1;
}

.orb p {
  font-size: 12px;
  max-width: 230px;
  margin: 7px 0;
  color: #e2eaf0;
}
.orb strong {
  font-size: 94px;
  font-weight: 200;
  letter-spacing: -5px;
  line-height: 1.1;
}
.orb span {
  font-size: 17px;
  font-weight: 300;
}
.orb img {
  width: 43px;
  height: 43px;
  margin-top: 4px;
}

/* Scene caption */
.scene-caption {
  position: absolute;
  bottom: clamp(105px, 13%, 135px);
  left: 6%;
  right: 6%;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  opacity: calc(clamp(0, (var(--landing-progress, 0) - .55) / .45, 1));
  transform: translateY(calc((1 - clamp(0, (var(--landing-progress, 0) - .55) / .45, 1)) * 14px));
  will-change: transform, opacity;
}
.scene-caption p {
  margin: 8px 0 0;
  font-weight: 300;
}

/* Stage 5: Navigation Tabs Reveal */
.tabs {
  position: sticky;
  top: 16px;
  margin: -94px auto 0;
  grid-template-columns: repeat(4, 1fr);
  width: min(88%, 1280px);
  border-radius: 26px;
  background: radial-gradient(ellipse 100% 60% at 50% -20%, rgba(255, 255, 255, 0.14), transparent 70%),
              linear-gradient(135deg, rgba(16, 29, 40, 0.76) 0%, rgba(10, 20, 29, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.52), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.08), 0 24px 68px rgba(0, 6, 14, 0.65);
  opacity: var(--nav-reveal, 0);
  transform: translateY(calc((1 - var(--nav-reveal, 0)) * 26px));
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 25;
}
.tabs.nav-ready {
  pointer-events: auto;
}

/* ==========================================================================
   APPLE LIQUID GLASS WARPING, CLEAR-TINTED CONTROLS & ICON POLISH
   ========================================================================== */

/* Sub-widgets: Key factors & agricultural indicators */
.factor {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  padding: 18px;
  background: radial-gradient(ellipse 120% 80% at 85% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
              linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(14, 26, 37, 0.52) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4), 0 8px 24px rgba(0, 6, 14, 0.25);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}
.factor:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.55), 0 14px 32px rgba(0, 6, 14, 0.38), 0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Hourly Forecast Capsule Cells */
.forecast-cell {
  text-align: center;
  padding: 12px 6px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: white;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), background 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
.forecast-cell:hover {
  transform: translateY(-2px) scale(1.04);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px rgba(0, 0, 0, 0.25);
}
.forecast-cell.active {
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 75%),
              linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
  border-color: color-mix(in srgb, var(--accent) 60%, rgba(255, 255, 255, 0.45));
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 8px 24px color-mix(in srgb, var(--accent) 28%, transparent);
  transform: scale(1.02);
}

/* Apple Segmented Controls (Radar & Forecast Period) */
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 24px;
  background: rgba(14, 25, 36, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  margin-bottom: 20px;
}
.segmented button {
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 20px;
  background: transparent;
  color: #d1dde6;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.segmented button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.segmented button[aria-pressed=true] {
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.3), transparent 70%), var(--accent);
  color: #0b1720;
  font-weight: 600;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: scale(1.02);
}

/* Multi-time Outlook Cards */
.outlook > div {
  background: radial-gradient(ellipse 120% 80% at 85% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
              linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(14, 26, 37, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  padding: 18px;
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.38), 0 8px 24px rgba(0, 6, 14, 0.25);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.outlook > div:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.55), 0 14px 32px rgba(0, 6, 14, 0.38), 0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Clear to Tinted Controls & Settings */
.weather-control, .small-button {
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(20, 36, 48, 0.55));
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 6px 18px rgba(0, 6, 14, 0.3);
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.weather-control:hover, .small-button:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(26, 48, 65, 0.68));
  transform: translateY(-1px) scale(1.02);
}
.weather-control select {
  cursor: pointer;
}
.profile-controls select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(32, 51, 45, 0.8), rgba(20, 36, 32, 0.9));
  color: white;
  font-size: 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.profile-controls select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Premium Apple Frosted Modal Dialog */
dialog {
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
              linear-gradient(145deg, rgba(20, 34, 46, 0.88), rgba(12, 22, 31, 0.96));
  color: #eef4f8;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 28px;
  padding: 32px;
  max-width: 560px;
  width: 90%;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 35px 90px rgba(0, 4, 10, 0.85);
  backdrop-filter: blur(36px) saturate(190%);
  -webkit-backdrop-filter: blur(36px) saturate(190%);
}
dialog::backdrop {
  background: rgba(5, 12, 18, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Icon Polish: Frosted Glass Badges & Refined Optics */
.card-head img {
  width: 36px;
  height: 36px;
  padding: 6px;
  border-radius: 12px;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.22), transparent 75%),
              linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(16, 28, 38, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 14px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent));
}
.factor > img {
  width: 44px;
  height: 44px;
  padding: 8px;
  border-radius: 14px;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.2), transparent 75%),
              linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(16, 28, 38, 0.4));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 14px rgba(0, 0, 0, 0.2);
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}
.activity img {
  width: 52px;
  height: 52px;
  padding: 9px;
  border-radius: 16px;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.24), transparent 75%),
              linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(16, 28, 38, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 18px rgba(0, 0, 0, 0.28);
  display: block;
  margin: 0 0 14px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.32));
}
.outlook img {
  width: 42px;
  height: 42px;
  padding: 7px;
  border-radius: 13px;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.18), transparent 75%),
              linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(16, 28, 38, 0.35));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
  margin: 10px 0;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.28));
}

/* Horizontal overflow guard without breaking position: sticky */
html, body {
  overflow-x: clip;
}

/* Responsive Breakpoints */
@media(min-width: 1600px) {
  .orb-wrap { width: 390px; height: 390px; }
  .orb strong { font-size: 112px; }
}
@media(max-width: 1000px) {
  .tabs { width: 94%; }
  .orb-wrap { width: 310px; height: 310px; }
}
@media(max-width: 650px) {
  .weather-descent {
    height: 200svh;
    min-height: 1300px;
  }
  .descent-viewport {
    height: 100svh;
    min-height: 540px;
    perspective: 650px;
  }
  .descent-horizon, .descent-skyline {
    inset: -30% -35% -20%;
    background-position: center 68%;
    transform: translate3d(calc(var(--descent-progress) * -2%), calc((1 - var(--descent-progress)) * 26%), 0) scale(calc(.82 + var(--descent-progress) * .24));
  }
  .descent-cloud-front {
    transform: perspective(650px) translateZ(calc(var(--descent-progress) * 1500px)) scale(calc(1.15 + var(--descent-progress) * 5.2)) translate3d(calc(var(--descent-progress) * -30%), calc(var(--descent-progress) * -52%), 0);
  }
  .tabs {
    top: 12px;
    margin: -80px auto 0;
    width: 96%;
    grid-template-columns: repeat(4, 1fr);
  }
  .stage-kicker {
    top: 58px;
    font-size: 8px;
    letter-spacing: 2px;
  }
  .stage-float-actions {
    top: 76px;
    left: 4.5%;
    right: 4.5%;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 8px;
  }
  .stage-float-actions h2 {
    font-size: clamp(26px, 8.2vw, 42px);
    letter-spacing: clamp(1px, 0.8vw, 3px);
    white-space: nowrap;
    margin: 0;
  }
  .stage-float-actions button {
    width: 38px;
    height: 38px;
    padding: 7px;
    border-radius: 12px;
  }
  .orb-wrap {
    top: 48%;
    width: 270px;
    height: 270px;
  }
  .orb strong {
    font-size: 76px;
  }
  .orb p {
    font-size: 11px;
    max-width: 190px;
  }
  .scene-caption {
    bottom: 92px;
    left: 5%;
    right: 5%;
  }
  .scene-caption p {
    font-size: 11px;
  }
}

/* Reduced Motion: direct accessible visibility */
@media(prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .stage-kicker, .stage-float-actions, .stage-float-actions h2, .stage-float-actions button,
  .descent-skyline, .orb-wrap, .orb-ring, .glint, .orb, .orb > *, .scene-caption, .tabs {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
  }
}