:root{--ink:#293c34;--sub:#6b7b6d;--accent:#4f7054}*{box-sizing:border-box}body{margin:0;background:#e8eddb;color:var(--ink);font-family:'Noto Sans TC',sans-serif;overflow:hidden}#sky{position:fixed;inset:0;background:radial-gradient(ellipse at 65% 35%,var(--skyGlow),transparent 65%);pointer-events:none}#scene{position:fixed;inset:0;width:100%;height:100%;touch-action:none}#load{position:fixed;inset:0;display:grid;place-items:center;background:#e8eddb;z-index:10;letter-spacing:4px;transition:opacity .6s}header{position:absolute;top:0;width:100%;padding:30px 4.4%;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand svg{width:39px;height:36px;fill:none;stroke:currentColor;stroke-width:1.7}.brand>span{font-family:'Noto Serif TC',serif;font-size:19px;font-weight:600;letter-spacing:4px}.brand small{display:block;font-family:Arial,sans-serif;font-size:8px;letter-spacing:2.2px;margin-top:7px;font-weight:400}.header-right{display:flex;gap:30px;align-items:center}.location{font-size:11px;letter-spacing:3px}.pill{border:1px solid var(--border);border-radius:30px;background:var(--buttonSoft);padding:11px 19px;font:inherit;font-size:11px;letter-spacing:1px;color:inherit}.pill span{margin-left:16px}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:5px}.intro{position:absolute;left:6%;top:19%;pointer-events:none}.eyebrow{font:9px Arial,sans-serif;letter-spacing:2.6px;color:var(--sub)}.intro .eyebrow{display:flex;align-items:center;gap:8px}.eyebrow>span,.live-dot{display:inline-block;background:var(--dot);width:5px;height:5px;border-radius:50%}h1{font-family:'Noto Serif TC',serif;font-size:clamp(42px,4.5vw,73px);font-weight:500;line-height:1.45;letter-spacing:7px;margin:23px 0 19px}h1 span{color:var(--heading)}.intro p{font-size:11px;color:var(--sub);line-height:2.3;letter-spacing:1.3px}.place{display:flex;gap:14px;align-items:center;margin-top:28px}.place>span{font:italic 29px Georgia;color:var(--muted);border-right:1px solid var(--line);padding-right:15px}.place>div{font-size:10px;letter-spacing:1px}.place small{display:block;font:7px Arial;letter-spacing:2px;color:var(--sub);margin-top:7px}.scene-caption{position:absolute;top:15%;left:52%;display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:2px;color:var(--sub)}.scene-caption>span:last-child{font:8px Arial;letter-spacing:1px}.caption-line{width:33px;height:1px;background:var(--line)}.tools{position:absolute;right:3.4%;top:43%;display:flex;flex-direction:column;gap:6px;padding:9px;background:var(--tools);backdrop-filter:blur(15px);border:1px solid var(--inset);border-radius:30px}.tools button{width:30px;height:29px;border:0;background:none;font-size:21px;font-weight:300}.tools>span{height:1px;background:var(--divider);margin:4px}.drag-hint{position:absolute;bottom:29%;left:61%;color:var(--sub);font-size:14px;display:flex;gap:9px;align-items:center}.drag-hint span{font-size:9px;letter-spacing:1px}.drag-hint i{height:10px;width:1px;background:var(--line);margin:0 8px}.bottom-panel{position:absolute;bottom:8%;left:6%;right:6%;display:grid;grid-template-columns:350px 1fr;gap:20px}.glass{border:1px solid var(--panelBorder);border-radius:19px;background:linear-gradient(120deg,var(--panelA),var(--panelB));box-shadow:0 8px 40px var(--panelShadow),inset 0 1px 0 var(--inset);backdrop-filter:blur(24px)}.weather{padding:19px 23px 12px}.weather-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:1px}.weather-status{font-size:8px;color:var(--sub);letter-spacing:0}.weather-main{display:flex;align-items:center;gap:12px;margin:13px 0}.weather-icon{font-size:38px;color:var(--muted)}.weather-main strong{font:46px Georgia,serif;font-weight:400;white-space:nowrap}.weather-main sup{font:16px Arial;vertical-align:top;line-height:2}.weather-main>div b{display:block;font-size:10px;font-weight:500;white-space:nowrap}.weather-main small{display:block;font-size:8px;color:var(--sub);margin-top:6px}.weather-main button{border:0;border-radius:20px;background:var(--button);font-size:8px;padding:6px;white-space:nowrap;margin-left:auto}.weather-details{display:flex;justify-content:space-between;border-top:1px solid var(--divider);padding-top:12px;font-size:9px;color:var(--sub)}.weather-details b{font:10px Arial;color:var(--ink);margin-left:4px}.weather-source{display:block;text-decoration:none;font-size:7px;color:var(--sub);margin-top:10px;opacity:.8}.time-card{padding:20px 27px 14px}.time-head{display:flex;justify-content:space-between;align-items:center}.time-head .eyebrow{font-size:7px;letter-spacing:2px}h2{font-family:'Noto Serif TC',serif;font-size:18px;font-weight:500;letter-spacing:3px;margin:7px 0}.clock{display:flex;align-items:center;gap:12px}.clock strong{font:29px Georgia}.clock>span{font-size:9px;color:var(--sub);border-left:1px solid var(--line);padding-left:12px}.slider-wrap{margin-top:19px}input[type=range]{appearance:none;width:100%;height:4px;border-radius:5px;background:linear-gradient(90deg,var(--slider0),var(--slider1) 25%,var(--slider2) 50%,var(--slider3) 75%,var(--slider4));cursor:pointer;display:block}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border:3px solid var(--thumbBorder);border-radius:50%;background:var(--thumb);box-shadow:0 0 0 1px var(--border)}.time-marks{display:flex;justify-content:space-between;align-items:center;color:var(--sub);font:8px Arial;margin-top:11px}.time-marks button{border:0;background:none;padding:0;font-size:12px;color:var(--sub)}.time-marks button span{font:8px Arial;margin-left:5px}.time-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:8px;color:var(--sub);letter-spacing:1px}.time-footer button{border:1px solid var(--border);border-radius:20px;background:var(--buttonSoft);padding:7px 12px;font-size:9px;letter-spacing:1px}#playIcon{margin-right:5px}footer{position:absolute;bottom:2.8%;left:6%;right:6%;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:var(--sub)}footer>span:last-child{font:7px Arial;letter-spacing:2px}footer i{font-style:normal;font-size:13px;margin-left:18px}dialog{border:1px solid var(--panelBorder);border-radius:25px;padding:40px;background:var(--dialog);backdrop-filter:blur(25px);max-width:470px;color:var(--ink);box-shadow:0 20px 90px var(--panelShadow)}dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(6px)}dialog p{font-size:12px;line-height:2.1;color:var(--sub)}dialog small{font-size:9px}#closeAbout{position:absolute;right:20px;top:12px;background:none;border:none;font-size:25px}
@media(min-width:1600px){.bottom-panel{grid-template-columns:400px 1fr;max-width:1400px;margin:auto}.intro{top:22%}}@media(max-height:760px) and (min-width:761px){header{padding-top:20px}.intro{top:17%}h1{font-size:46px;margin:15px 0}.place{margin-top:17px}.bottom-panel{bottom:7%;}.weather{padding-top:14px}.time-card{padding-top:15px}.drag-hint{bottom:33%}.scene-caption{top:14%}}
@media(max-width:760px),(orientation:portrait){header{padding:23px 6%}.brand>span{font-size:16px}.brand svg{width:30px}.location{display:none}.pill{padding:9px 12px;font-size:9px}.header-right{gap:0}.intro{top:12%;left:7%}.intro .eyebrow{font-size:6px;letter-spacing:1.4px}h1{font-size:32px;line-height:1.3;letter-spacing:5px;margin:12px 0}.intro p{font-size:9px;line-height:2}.place{display:none}.scene-caption{top:13%;left:auto;right:7%}.scene-caption>span:last-child,.caption-line{display:none}.scene-caption{font-size:8px}.tools{right:4%;top:42%;padding:5px}.tools button{width:25px;height:26px}.drag-hint{left:35%;bottom:38%;font-size:11px}.drag-hint span{font-size:8px}.bottom-panel{left:5%;right:5%;bottom:6%;grid-template-columns:1fr;gap:10px}.weather{padding:12px 17px}.weather-head{font-size:10px}.weather-main{margin:6px 0;gap:12px}.weather-main strong{font-size:35px}.weather-main small{display:none}.weather-icon{font-size:27px}.weather-details{position:absolute;right:17px;top:42px;border:0;display:flex;gap:10px;font-size:8px}.weather-details span:last-child{display:none}.weather-main button{position:absolute;right:17px;bottom:12px}.weather-source{margin-top:3px;font-size:6px}.time-card{padding:13px 17px 11px}.time-head .eyebrow{font-size:6px}h2{font-size:14px;margin-top:5px}.clock strong{font-size:23px}.clock>span{font-size:8px}.slider-wrap{margin-top:12px}.time-footer{margin-top:9px;font-size:7px}.time-footer button{font-size:8px;padding:5px 10px}footer{bottom:2%;font-size:7px}footer>span:last-child{font-size:5px;letter-spacing:1px}.time-marks{margin-top:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}


.tools{width:48px;padding:6px;gap:4px;align-items:center;border-radius:26px;z-index:2}
.tools button{display:flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;padding:0;line-height:1;border-radius:50%;touch-action:manipulation}
.tools button svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.tools>span{align-self:stretch;margin:3px 5px;flex:0 0 1px}
.tools button:hover{background:var(--hover)}

@media(orientation:portrait) and (max-height:740px){.intro{top:13%}h1{font-size:28px;line-height:1.25;margin:10px 0}.intro p{font-size:8px;line-height:1.8;margin:8px 0}.intro .eyebrow{font-size:5px}.time-card{padding-top:10px;padding-bottom:9px}.time-head h2{font-size:13px}.bottom-panel{gap:8px}}

#cloudAmount{font:inherit;white-space:nowrap;margin-left:8px}

/* Time-of-day colors animate on the root, including gradient stops. */
@property --ink{syntax:"<color>";inherits:true;initial-value:#293c34}
@property --sub{syntax:"<color>";inherits:true;initial-value:#63745f}
@property --accent{syntax:"<color>";inherits:true;initial-value:#4f7054}
@property --heading{syntax:"<color>";inherits:true;initial-value:#506f48}
@property --muted{syntax:"<color>";inherits:true;initial-value:#7b8f74}
@property --line{syntax:"<color>";inherits:true;initial-value:#87977b66}
@property --panelA{syntax:"<color>";inherits:true;initial-value:#ffffff65}
@property --panelB{syntax:"<color>";inherits:true;initial-value:#f4faef25}
@property --panelBorder{syntax:"<color>";inherits:true;initial-value:#ffffffa0}
@property --panelShadow{syntax:"<color>";inherits:true;initial-value:#516e3e12}
@property --inset{syntax:"<color>";inherits:true;initial-value:#ffffff88}
@property --tools{syntax:"<color>";inherits:true;initial-value:#fbfff15c}
@property --button{syntax:"<color>";inherits:true;initial-value:#ffffff66}
@property --buttonSoft{syntax:"<color>";inherits:true;initial-value:#ffffff33}
@property --border{syntax:"<color>";inherits:true;initial-value:#78866c55}
@property --divider{syntax:"<color>";inherits:true;initial-value:#82937526}
@property --thumb{syntax:"<color>";inherits:true;initial-value:#657a51}
@property --thumbBorder{syntax:"<color>";inherits:true;initial-value:#ffffff}
@property --focus{syntax:"<color>";inherits:true;initial-value:#63815a}
@property --dot{syntax:"<color>";inherits:true;initial-value:#6e8a54}
@property --hover{syntax:"<color>";inherits:true;initial-value:#ffffff30}
@property --skyGlow{syntax:"<color>";inherits:true;initial-value:#faf6e6aa}
@property --dialog{syntax:"<color>";inherits:true;initial-value:#f0f3e9f5}
@property --backdrop{syntax:"<color>";inherits:true;initial-value:#15322c55}
@property --slider0{syntax:"<color>";inherits:true;initial-value:#8396b0}
@property --slider1{syntax:"<color>";inherits:true;initial-value:#e3ba8c}
@property --slider2{syntax:"<color>";inherits:true;initial-value:#e6d49c}
@property --slider3{syntax:"<color>";inherits:true;initial-value:#cc9b8c}
@property --slider4{syntax:"<color>";inherits:true;initial-value:#6b799b}
:root{transition:--ink 1.5s ease,--sub 1.5s ease,--accent 1.5s ease,--heading 1.5s ease,--muted 1.5s ease,--line 1.5s ease,--panelA 1.5s ease,--panelB 1.5s ease,--panelBorder 1.5s ease,--panelShadow 1.5s ease,--inset 1.5s ease,--tools 1.5s ease,--button 1.5s ease,--buttonSoft 1.5s ease,--border 1.5s ease,--divider 1.5s ease,--thumb 1.5s ease,--thumbBorder 1.5s ease,--focus 1.5s ease,--dot 1.5s ease,--hover 1.5s ease,--skyGlow 1.5s ease,--dialog 1.5s ease,--backdrop 1.5s ease,--slider0 1.5s ease,--slider1 1.5s ease,--slider2 1.5s ease,--slider3 1.5s ease,--slider4 1.5s ease}
body{transition:background-color 1.5s ease}
input[type=range]::-moz-range-thumb{width:9px;height:9px;border:3px solid var(--thumbBorder);border-radius:50%;background:var(--thumb);box-shadow:0 0 0 1px var(--border)}

/* Local scrims support cream text over the bright horizon and pale terrain.
   Registered colors retain the existing smooth interpolation on time jumps. */
@property --uiShade{syntax:"<color>";inherits:true;initial-value:#10202a00}
:root{transition-property:--ink,--sub,--accent,--heading,--muted,--line,--panelA,--panelB,--panelBorder,--panelShadow,--inset,--tools,--button,--buttonSoft,--border,--divider,--thumb,--thumbBorder,--focus,--dot,--hover,--skyGlow,--dialog,--backdrop,--slider0,--slider1,--slider2,--slider3,--slider4,--uiShade;transition-duration:1.5s;transition-timing-function:ease}
header{background:linear-gradient(180deg,var(--uiShade),transparent)}
.scene-caption,.drag-hint,footer{background:radial-gradient(ellipse,var(--uiShade),transparent 75%)}
.weather-source{opacity:1}

/* Keep the glyph edge readable even while the smooth palette crosses midtones.
   Halo colors follow computed (currently animated) foregrounds, without delay. */
body{--glyphHalo:var(--inkHalo,#fff)}
header,.intro,.scene-caption,.drag-hint,.bottom-panel,.tools,footer,dialog{--glyphHalo:var(--inkHalo,#fff);text-shadow:0 0 1px var(--glyphHalo),0 0 2px var(--glyphHalo);-webkit-text-stroke:.4px var(--glyphHalo);paint-order:stroke fill}
.eyebrow,.intro p,.place small,.scene-caption,.drag-hint,footer,.weather-status,.weather-main small,.weather-details,.weather-source,.clock>span,.time-marks,.time-marks button,.time-footer,dialog p{--glyphHalo:var(--subHalo,#fff);text-shadow:0 0 1px var(--glyphHalo),0 0 2px var(--glyphHalo)}
h1 span{--glyphHalo:var(--headingHalo,#fff);text-shadow:0 0 1px var(--glyphHalo),0 0 2px var(--glyphHalo)}
.place>span,.weather-icon{--glyphHalo:var(--mutedHalo,#fff);text-shadow:0 0 1px var(--glyphHalo),0 0 2px var(--glyphHalo)}
.weather-details b,.time-footer button{--glyphHalo:var(--inkHalo,#fff)}

:is(header,.intro,.scene-caption,.drag-hint,.bottom-panel,.tools,footer,dialog) *{-webkit-text-stroke:.4px var(--glyphHalo);paint-order:stroke fill}
.weather-details b,.time-footer button{text-shadow:0 0 1px var(--glyphHalo),0 0 2px var(--glyphHalo)}

/* Intro readability comes from its animated foreground and a light text shadow. */
.intro,.intro *{text-shadow:0 1px 12px rgba(0,0,0,.25);-webkit-text-stroke:0}

/* Avoid a broad blurred shadow pooling beneath the portrait introduction. */
@media(max-width:760px),(orientation:portrait){
 .intro,.intro *{text-shadow:0 1px 2px rgba(0,0,0,.18);background:none;box-shadow:none;backdrop-filter:none}
 .intro::before,.intro::after{content:none}
}