:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eff9fb;background:#10242b;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #88ccff;outline-offset:3px}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px clamp(16px,3vw,42px);background:rgba(7,18,26,.87);border-bottom:1px solid #ffffff18}.brand{display:flex;gap:9px;align-items:center;letter-spacing:.17em;font-size:12px;white-space:nowrap}.brand b{color:#70c4f8}.brand-mark{font-size:22px;color:#f4b94c}.tabs{display:flex;border:1px solid #ffffff24;background:#071019cc;border-radius:45px;padding:5px;gap:3px}.tabs button{border:0;background:transparent;color:#edf7fb;padding:10px 19px;border-radius:30px}.tabs button.active{background:#142d41;color:#68baff;font-weight:700}.top-spacer{width:134px}.panel{display:none;flex:1}.panel.active{display:block}main{flex:1;display:flex;flex-direction:column}.sky-panel{position:relative;overflow:hidden;min-height:820px;background:linear-gradient(180deg,#4f91d7 0%,#78a9da 50%,#eed4aa 100%)}.sky-background{position:absolute;inset:0;pointer-events:none;transition:background 1s}.sky-background.night{background:linear-gradient(180deg,#091323 0%,#19364d 75%,#294254 100%)}.sky-background.dawn{background:linear-gradient(180deg,#355c9c 0%,#99a4bc 75%,#f4a57d 100%)}.sky-background.day{background:linear-gradient(180deg,#4b97e1 0%,#79afe4 65%,#cfdecc 100%)}.sky-background.dusk{background:linear-gradient(180deg,#2b3c76 0%,#aa719c 65%,#eaa176 100%)}.sky-glow{position:absolute;left:50%;top:170px;transform:translateX(-50%);width:480px;height:220px;background:radial-gradient(ellipse,#fff6d35c,transparent 70%);filter:blur(35px)}.sky-content{position:relative;text-align:center;margin:auto;width:min(100%,1280px);padding:26px 20px 24px}.eyebrow{font-weight:750;letter-spacing:.16em;font-size:13px;text-transform:uppercase}.sky-content h1{margin:10px 0 4px;text-shadow:0 2px 7px #0004;font-size:clamp(26px,3vw,38px)}.subtle{opacity:.74}.sun-arc{position:relative;margin:10px -20px 0;height:175px}.sun-arc svg{width:100%;height:100%}.arc-times{position:absolute;top:119px;left:31%;right:23%;display:flex;justify-content:space-between;text-shadow:0 2px 4px #0004;font-size:13px;font-weight:700}.wheel-wrap{position:relative;width:min(570px,90vw);aspect-ratio:1;margin:8px auto 0}.wheel-glow{position:absolute;inset:3%;border-radius:50%;box-shadow:0 9px 60px #00222a88}.wheel-wrap svg{position:relative;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 10px #001f2555)}.wheel-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:47%;height:47%;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;text-shadow:0 1px 2px #57370055}.wheel-condition{font-size:clamp(37px,6vw,67px);line-height:1.1}.wheel-temp{font-size:clamp(30px,4vw,44px);font-weight:780}.wheel-desc{font-weight:650;font-size:clamp(12px,1.6vw,16px)}.wheel-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 15px;margin-top:14px;font-size:11px;font-weight:750}.sky-footer{max-width:820px;margin:15px auto 0;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}.summary{font-weight:600;text-align:left;font-size:14px}.actions{display:flex;gap:8px}.pill{background:#0b2333d9;color:#fff;border:1px solid #fff5;border-radius:25px;padding:10px 14px}.pill:hover{background:#234765}.pill.small{font-size:13px}.standard-panel{background:linear-gradient(155deg,#10242b,#254a5d 90%);padding:32px clamp(18px,4vw,65px) 55px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:26px}.section-heading h1{font-size:clamp(30px,4vw,48px);margin:5px 0}.muted{color:#a7c0ca}.month-controls{display:flex;gap:7px}.month-controls button{background:#0c1d27;color:#fff;border:1px solid #ffffff2b;border-radius:25px;min-width:45px;padding:9px 16px;font-size:19px}.month-controls #currentMonth{font-size:13px}.calendar-legend{display:flex;gap:22px;align-items:center;margin-bottom:18px;font-size:14px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid #ffffff36;border-left:1px solid #ffffff1d}.weekday{text-align:center;color:#c4dce3;padding:12px 3px;font-weight:700;border-right:1px solid #ffffff1d;border-bottom:1px solid #ffffff36}.cal-day{min-height:118px;border-right:1px solid #ffffff1d;border-bottom:1px solid #ffffff36;padding:9px 7px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:4px;font-size:13px}.cal-day.empty{opacity:.14}.cal-day.today{background:#2874cc85;box-shadow:inset 0 0 0 2px #77c7ff;border-radius:12px}.cal-date{font-size:19px;font-weight:750;margin-bottom:2px}.cal-rise{color:#f7c767}.cal-set{color:#d6e2e7}.places-panel{background:radial-gradient(circle at 38% 40%,#1b334d,#020711 68%);padding:30px clamp(15px,4vw,60px) 50px}.places-heading{margin-bottom:5px}.search-area{position:relative;max-width:640px;margin:0 auto;z-index:5}.search-area input{width:100%;border:1px solid #ffffff3a;border-radius:40px;padding:17px 24px;color:#fff;background:#12212dcc;outline:none}.search-results{position:absolute;left:0;right:0;top:calc(100% + 5px);background:#0b202b;border:1px solid #ffffff2f;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px #0008}.search-results button{width:100%;padding:13px 17px;color:#fff;background:none;border:0;text-align:left;border-bottom:1px solid #fff2}.search-results button:hover{background:#24516b}.places-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(255px,360px);align-items:center;gap:30px;max-width:1300px;margin:auto}.globe-wrap{text-align:center;min-width:0}.globe{height:min(62vw,650px);min-height:330px;max-height:650px;position:relative;cursor:grab}.globe:active{cursor:grabbing}.globe canvas{display:block;width:100%;height:100%}.globe-fallback{font-size:min(45vw,380px);line-height:1.5}.globe-hint{font-size:12px;color:#aac4d1}.saved-card,.settings-card{border-radius:24px;background:#214659ba;border:1px solid #b0d1e633;padding:22px}.saved-card h2,.settings-card h2{font-size:21px;color:#79d1ec;margin:0 0 14px}.saved-list{display:grid;gap:9px}.place-item{border-radius:14px;background:#0c2333b8;border:1px solid #fff2;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px}.place-item.selected{border-color:#7ad0ff}.place-item button{background:none;color:#fff;border:0}.place-item .select-place{text-align:left;flex:1}.place-item small{display:block;color:#bbd1d9;margin-top:3px}.place-item .remove-place{font-size:20px;color:#bcd1db}.tiny{font-size:12px}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:1180px}.settings-grid h3{font-size:13px;letter-spacing:.1em;color:#b0c6cd;margin:12px 4px}.settings-card{margin-bottom:25px}.settings-card p{line-height:1.6}.setting{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;border-top:1px solid #ffffff20}.setting small{display:block;color:#a6bec8;line-height:1.5;margin-top:3px}.setting input[type=checkbox]{appearance:none;width:57px;min-width:57px;height:31px;border-radius:40px;background:#718996;position:relative;transition:background .2s;cursor:pointer}.setting input[type=checkbox]:checked{background:#397ce4}.setting input[type=checkbox]:after{content:"";position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;background:#fff;transition:transform .2s}.setting input[type=checkbox]:checked:after{transform:translateX(26px)}.setting select{border:1px solid #ffffff32;color:#fff;background:#143040;padding:10px;border-radius:16px}.app-footer{display:flex;justify-content:space-between;gap:15px;background:#091720;color:#8caab5;padding:13px 25px;font-size:11px;letter-spacing:.06em}.toast{position:fixed;bottom:55px;left:50%;transform:translateX(-50%);background:#09212f;color:white;border:1px solid #7ac2ee;border-radius:20px;padding:10px 19px;z-index:80;box-shadow:0 8px 20px #0006;display:none;max-width:85vw}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:850px){.brand{display:none}.top-spacer{display:none}.topbar{justify-content:center}.places-layout{grid-template-columns:1fr}.globe{height:460px}.settings-grid{grid-template-columns:1fr}.calendar-grid .cal-day{min-height:94px;font-size:11px}.cal-date{font-size:15px}}@media(max-width:520px){.topbar{padding:11px 5px}.tabs button{padding:10px 12px;font-size:14px}.sky-panel{min-height:760px}.sky-content{padding:24px 7px}.sun-arc{height:145px}.arc-times{top:110px;left:25%;right:14%;font-size:11px}.wheel-wrap{width:min(98vw,500px)}.wheel-stats{margin-top:4px;font-size:9px}.wheel-center{width:43%;height:43%}.sky-footer{padding:0 15px;justify-content:center}.summary{text-align:center}.standard-panel{padding:20px 9px}.calendar-grid .cal-day{min-height:79px;padding:4px 2px;gap:2px;font-size:9px}.weekday{font-size:11px}.cal-date{font-size:14px}.calendar-legend{font-size:11px;gap:10px}.section-heading h1{font-size:27px}.month-controls button{padding:6px 9px;min-width:31px}.globe{height:360px;min-height:300px}.app-footer{font-size:9px}}

/* v0.1.5: compact, centred tablet-first sky composition */
.sky-panel{min-height:calc(100svh - 112px);display:flex;align-items:stretch}
.sky-content{margin:0 auto;padding:20px 20px 22px;width:min(100%,1440px);display:flex;flex-direction:column;align-items:center}
.sky-content h1{margin:7px 0 2px;font-size:clamp(25px,2.6vw,35px)}
.sun-arc{width:calc(100vw - 20px);max-width:none;align-self:center;height:126px;margin:0 0 0}
.arc-times{top:88px;left:32%;right:22%;font-size:12px}
.wheel-wrap{width:min(450px,67vw,52svh);min-width:290px;margin:2px auto 0;flex-shrink:0}
.wheel-center{width:42%;height:42%}.wheel-condition{font-size:clamp(31px,4vw,48px)}
.wheel-temp{font-size:clamp(27px,3vw,37px)}.wheel-stats{margin-top:7px;gap:4px 9px;font-size:10px}
.sky-footer{width:min(100%,760px);margin:12px auto 0;justify-content:space-between}
.sky-glow{top:100px}
#locationButton:disabled{opacity:.65;cursor:progress}
@media(max-width:850px){.sky-content{padding-top:20px}.sun-arc{height:132px}.arc-times{top:91px}.wheel-wrap{width:min(490px,72vw,52svh)}.sky-panel{min-height:calc(100svh - 104px)}}
@media(max-width:520px){.sky-content{padding:14px 9px 20px}.eyebrow{font-size:10px;letter-spacing:.12em}.sky-content h1{font-size:27px}.sky-content .subtle{font-size:13px}.sun-arc{height:110px}.arc-times{top:76px;left:27%;right:16%;font-size:10px}.wheel-wrap{width:min(94vw,460px);min-width:0}.sky-panel{min-height:calc(100svh - 95px)}.sky-footer{gap:10px;flex-direction:column;margin-top:10px}.summary{font-size:12px}.wheel-stats{display:none}}
@media(min-width:900px) and (max-height:800px){.sky-content{padding-top:10px}.sun-arc{height:100px}.arc-times{top:67px}.wheel-wrap{width:min(410px,52svh)}}


/* v0.1.6: exclusive screen navigation and responsive portrait/landscape layouts.
   This rule MUST follow .sky-panel's display:flex declarations. */
main{display:flex;flex-direction:column;flex:1;min-height:0}
main > .panel{display:none !important;flex:1 0 auto}
main > .panel.active{display:block !important}
main > .sky-panel.active{display:flex !important}
.sky-panel{min-height:calc(100svh - 110px)}
.sky-content{width:100%;max-width:1440px;box-sizing:border-box}
.wheel-wrap{width:min(78vw,58svh,590px);min-width:0;max-width:100%;flex-shrink:0}
.sun-arc{flex:0 0 auto}
.sky-footer{flex:0 0 auto;width:min(100%,980px)}
.settings-panel,.places-panel,.standard-panel{min-height:calc(100svh - 110px)}
@media (orientation: landscape) and (max-height:850px){
 .sky-content{padding:8px 18px 12px}
 .sky-content h1{margin:3px 0 0;font-size:clamp(22px,2.8vw,32px)}
 .sky-content .subtle{font-size:13px}
 .sun-arc{height:clamp(65px,13svh,108px);margin:0}
 .arc-times{top:65%;font-size:11px}
 .wheel-wrap{width:min(58svh,45vw,480px);margin:0 auto}
 .sky-footer{margin:5px auto 0}
 .sky-panel{min-height:calc(100svh - 105px)}
}
@media (orientation: portrait) and (min-width:600px){
 .sky-content{padding:clamp(12px,2svh,28px) 18px 22px}
 .sun-arc{height:clamp(110px,16svh,210px)}
 .arc-times{top:66%}
 .wheel-wrap{width:min(74vw,49svh,660px);margin:clamp(8px,2svh,24px) auto 0}
 .sky-footer{width:min(90vw,820px);margin:clamp(12px,3svh,30px) auto 0}
}
@media (max-width:599px){
 .wheel-wrap{width:min(94vw,49svh,490px)}
 .sky-content{padding:12px 8px 18px}
 .sky-footer{width:100%}
 .sun-arc{height:clamp(100px,14svh,155px)}
 .arc-times{top:67%;left:24%;right:16%}
 .calendar-legend{flex-wrap:wrap}
}
@media(max-height:520px) and (orientation:landscape){
 .sky-content h1{font-size:22px}.sky-content .subtle{display:none}
 .sun-arc{height:62px}.wheel-wrap{width:min(43svh,36vw)}
 .wheel-stats{display:none}.sky-footer{margin:2px auto 0}
}

/* v0.1.7: gesture dial, compact landscape calendar and globe markers */
#wheel{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#wheel:active{cursor:grabbing}
.wheel-center{pointer-events:auto;cursor:pointer;border-radius:50%;touch-action:manipulation}
.wheel-center:focus-visible{outline:3px solid white;outline-offset:5px}
.dial-time{font-size:clamp(8px,1vw,11px);font-weight:650;margin-top:5px;color:#fff9dc;max-width:90%;text-align:center}
@media (orientation:landscape) and (min-width:700px){
 #calendar.standard-panel{padding:12px clamp(15px,3vw,50px) 25px;min-height:calc(100svh - 100px)}
 #calendar .section-heading{margin-bottom:7px;align-items:center}
 #calendar .section-heading h1{font-size:clamp(25px,3.4vh,38px);margin:2px 0}
 #calendar .calendar-legend{margin-bottom:7px;font-size:12px}
 #calendar .weekday{padding:5px 2px;font-size:clamp(10px,1.7vh,14px)}
 #calendar .cal-day{min-height:0;height:clamp(51px,11.3svh,90px);padding:3px 2px;gap:1px;font-size:clamp(10px,1.7vh,13px)}
 #calendar .cal-date{font-size:clamp(13px,2.1vh,18px);margin:0}
 #calendar .month-controls button{padding:5px 11px}
}
@media (orientation:portrait){.dial-time{font-size:10px}}


/* v0.1.8: compact settings + cleaner globe labels */
.globe{overflow:hidden}
.globe-labels{position:absolute;inset:0;pointer-events:none}
.globe-label{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:1px solid #86d7ff66;background:#071a25ea;color:#fff;border-radius:999px;padding:6px 11px;font-size:13px;font-weight:650;white-space:nowrap;box-shadow:0 8px 22px #0008}
.globe-label.selected{background:#10324aee;border-color:#7ad0ff;color:#dff5ff}
@media (orientation:landscape) and (min-width:900px){
 #settings.standard-panel{padding:14px clamp(16px,3vw,46px) 22px;min-height:calc(100svh - 100px)}
 #settings .section-heading{margin-bottom:10px}
 #settings .section-heading h1{font-size:clamp(26px,4vh,44px);margin:2px 0}
 #settings .settings-grid{gap:14px;max-width:1320px}
 #settings .settings-card{padding:16px 18px;border-radius:20px;margin-bottom:14px}
 #settings .settings-card h2{font-size:18px;margin-bottom:10px}
 #settings .settings-grid h3{margin:6px 2px 8px;font-size:12px}
 #settings .setting{padding:9px 0;gap:14px}
 #settings .setting div{line-height:1.25}
 #settings .setting small{font-size:12px;line-height:1.3;margin-top:2px}
 #settings .setting input[type=checkbox]{width:52px;min-width:52px;height:28px}
 #settings .setting input[type=checkbox]:after{width:22px;height:22px}
 #settings .setting input[type=checkbox]:checked:after{transform:translateX(24px)}
 #settings .settings-card p{font-size:14px;line-height:1.5;margin:0}
}
@media (orientation:landscape) and (min-width:900px){
 #places.places-panel{padding-top:18px;padding-bottom:24px}
 #places .places-heading{margin-bottom:4px}
 #places .section-heading h1{font-size:clamp(30px,4.6vh,54px)}
 #places .places-layout{align-items:stretch;gap:20px}
 #places .saved-card{padding:18px 18px 16px}
}

/* v0.1.9: original-inspired wheel: clean centre, four separated inner readouts. */
#wheel{overflow:hidden}
.wheel-center{width:35%;height:35%;gap:2px;isolation:isolate}
.wheel-condition{font-size:clamp(35px,5vw,58px);line-height:1}
.wheel-temp{font-size:clamp(17px,2.1vw,26px);line-height:1.1;font-weight:730}
.wheel-desc{font-size:clamp(10px,1vw,12px);line-height:1.2}
.wheel-stats{display:none!important}
.dial-time{font-size:clamp(8px,.82vw,10px);line-height:1.15;margin-top:5px;max-width:95%}
@media(max-width:599px){.wheel-center{width:34%;height:34%}.wheel-condition{font-size:clamp(30px,8vw,43px)}.wheel-temp{font-size:17px}.wheel-desc{font-size:10px}.dial-time{font-size:8px}}

/* v0.2.0: bounded inner-disc metrics and globe layout */
.wheel-center{width:23%;height:23%;gap:0}
.wheel-condition{font-size:clamp(30px,4vw,51px)}
.wheel-temp{font-size:clamp(14px,1.6vw,20px)}
.wheel-desc{font-size:clamp(9px,.9vw,11px)}
.dial-time{font-size:clamp(7px,.7vw,9px);margin-top:2px}
@media(max-width:599px){.wheel-center{width:24%;height:24%}.wheel-condition{font-size:29px}.wheel-temp{font-size:14px}.wheel-desc{font-size:9px}.dial-time{font-size:7px}}

/* v0.2.1: Sky display modes menu - anchored away from the dial in both orientations. */
.display-picker{position:absolute;right:clamp(12px,2.3vw,38px);top:220px;z-index:8;text-align:left}
.display-trigger{display:flex;align-items:center;gap:8px;border:1px solid #cce3ed60;border-radius:28px;background:#081928d9;color:#fff;padding:10px 13px;font-size:13px;box-shadow:0 5px 18px #0002}
.display-mode-menu{position:absolute;right:0;top:calc(100% + 8px);width:190px;border:1px solid #8eb8cd5c;border-radius:18px;background:#091e2ff2;padding:8px;box-shadow:0 14px 28px #0007}
.display-mode-menu[hidden]{display:none}
.display-mode-menu .menu-heading{padding:8px 9px 5px;color:#91a6b9;font-size:11px}
.display-mode-menu button{display:block;text-align:left;width:100%;padding:9px 12px;color:white;background:transparent;border:0;border-radius:10px;font-size:14px}
.display-mode-menu button:hover,.display-mode-menu button.selected{background:#275471}
@media(max-width:680px){.display-picker{top:200px;right:8px}.display-trigger{padding:8px 10px;font-size:12px}}
@media (orientation:landscape) and (max-height:750px){.display-picker{top:150px}}

/* v0.2.2: predictable centre weather icons on Safari */
.wheel-condition{display:flex;align-items:center;justify-content:center;width:68px;height:62px;max-width:85%;line-height:1;flex-shrink:0}
.wheel-condition svg{display:block;overflow:visible;filter:drop-shadow(0 3px 3px #74531355)}
@media (orientation:landscape) and (max-height:800px){.wheel-condition{width:48px;height:42px}}
@media (max-width:599px){.wheel-condition{width:46px;height:43px}}