:root{color-scheme:dark;--bg:#142524;--panel:#203330;--ink:#e7eee1;--muted:#a9bcb1;--line:#42584e}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,"PingFang TC",sans-serif;font-size:16px}button,a,input{font:inherit}button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:6px;padding:9px 12px;cursor:pointer;min-height:42px;font-size:14px}button:hover{background:#324b40}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible{outline:2px solid #fff1b8;outline-offset:3px}[hidden]{display:none!important}header{height:76px;display:flex;align-items:center;gap:24px;padding:0 25px;border-bottom:1px solid var(--line)}.brand{font:30px Georgia,serif;letter-spacing:-1px}.subtitle{font-size:14px;color:var(--muted)}#total{margin-left:auto;font-size:13px;color:var(--muted)}main{display:grid;grid-template-columns:minmax(0,1fr) 285px;min-height:650px;height:calc(100dvh - 76px)}.map-wrap{position:relative;min-width:0}#map{height:100%;width:100%;background:#d3dfd0}.map-tools{position:absolute;top:14px;left:60px;z-index:500;display:flex;gap:8px;flex-wrap:wrap}.map-tools button{box-shadow:0 2px 8px #0002}#map-status{position:absolute;left:16px;bottom:30px;max-width:calc(100% - 32px);z-index:500;background:var(--panel);padding:10px 14px;border-radius:5px;font-size:14px;box-shadow:0 2px 8px #0002;pointer-events:none}#map-error{position:absolute;left:16px;top:80px;z-index:501;background:#633c28;color:white;padding:12px;max-width:90%;border-radius:5px}aside{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:22px 20px;gap:13px;overflow:auto}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--muted)}.dial{width:230px;height:230px;flex-shrink:0;position:relative;touch-action:none;cursor:grab}.dial svg{width:100%;height:100%}.dial line{stroke:#657b70}.dial text{font-size:12px;fill:var(--muted);text-anchor:middle;dominant-baseline:middle}.dial-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}#time{font-size:38px;font-variant-numeric:tabular-nums;letter-spacing:-1px}#mode{font-size:12px;color:var(--muted);margin-top:5px}#window{font-size:14px;font-variant-numeric:tabular-nums;color:var(--muted)}#time-range{width:100%;accent-color:#cde0c6;min-height:30px}.hint{text-align:center;font-size:13px;line-height:1.8;color:var(--muted);margin:0}.distribution,.seasons{width:100%;margin-top:6px}#hours{height:44px;display:flex;gap:2px;align-items:end;margin-top:8px}#hours button{flex:1;min-width:0;padding:0;border:0;border-radius:2px;min-height:5px;background:#92b59c}#hours button:hover{background:#e3df9d}.hour-labels,.season-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}#spectrum{height:8px;border-radius:4px;margin-top:10px}#dates{width:100%;display:grid;gap:8px;font-size:13px;color:var(--muted)}.date{display:flex;align-items:center;gap:8px}.date i{width:8px;height:8px;border-radius:50%}.local-note{font-size:12px;color:var(--muted);line-height:1.7;margin-top:auto;text-align:center}.photo-icon{background:transparent;border:0}.photo-pin{width:58px;height:48px;min-height:0;padding:0;border:3px solid var(--season);border-radius:5px;background:#172623;box-shadow:0 2px 7px #0006;position:relative;display:block}.photo-pin img{width:100%;height:100%;object-fit:cover;border-radius:1px}.photo-pin span{position:absolute;right:-9px;top:-10px;min-width:23px;height:23px;border-radius:12px;background:#203330;color:#fff;font-size:12px;line-height:23px;text-align:center;border:1px solid #adc2b3}.photo-pin:hover{z-index:1000;box-shadow:0 0 0 3px #fff9,0 5px 15px #0006;transform:scale(1.08)}
dialog{width:min(1050px,95vw);max-height:94dvh;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);padding:18px;overflow:auto}dialog::backdrop{background:#071211db;backdrop-filter:blur(5px)}.viewer-head{display:flex;justify-content:space-between;align-items:center;gap:15px}.viewer-head h2{font-size:18px;font-weight:500;margin:0 0 6px}.viewer-head p{font-size:13px;color:var(--muted);margin:0}.photo-area{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;gap:10px;align-items:center;margin:15px 0}.photo-area button{padding:0;font-size:30px}#full-photo{width:100%;height:55dvh;object-fit:contain;background:#0c1717}.viewer-foot{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}.viewer-foot a{color:var(--ink)}#filmstrip{display:flex;gap:8px;overflow:auto;padding:12px 2px 3px}#filmstrip button{padding:0;width:66px;height:48px;flex:0 0 auto;min-height:0;border:2px solid transparent}#filmstrip button[aria-pressed=true]{border-color:#e5e8be}#filmstrip img{width:100%;height:100%;object-fit:cover}#photo-error{padding:10px;background:#633c28}
@media(max-width:720px){header{padding:14px 16px;height:auto;min-height:68px;gap:10px;flex-wrap:wrap}.subtitle{display:none}main{display:flex;flex-direction:column;height:auto;min-height:0}.map-wrap{height:58dvh;min-height:370px}aside{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 15px;padding:17px;overflow:visible}.dial{width:150px;height:150px;grid-column:1;grid-row:1/6}aside>*:not(.dial){grid-column:2}#time{font-size:27px}#mode{font-size:11px}.distribution,.seasons,#dates,.local-note{grid-column:1/-1!important}.hint{font-size:12px}#total{font-size:12px}.map-tools{left:55px;right:10px;gap:5px}.map-tools button{font-size:12px;padding:8px}#map-status{font-size:12px}.photo-area{grid-template-columns:30px minmax(0,1fr) 30px;gap:5px}dialog{padding:12px}#full-photo{height:48dvh}.viewer-head p{font-size:12px}}
#dates .date{width:100%;text-align:left;font-size:13px;color:var(--muted);padding:8px 10px}
#dates .date:hover{color:var(--ink);border-color:#92b59c}
#dates .date[aria-pressed=true]{color:var(--ink);border-color:#cde0c6;background:#354c40;box-shadow:inset 3px 0 #cde0c6}
#dates .date i{flex-shrink:0}
.photo-icon .photo-pin{position:absolute;width:240px;height:180px}
.photo-follow{position:absolute;z-index:1001;white-space:nowrap;min-height:32px;padding:5px 9px;font-size:12px;background:#142524e8;border-color:#a9bcb1;box-shadow:0 2px 6px #0005}
.photo-follow[aria-pressed=true]{background:#cde0c6;color:#142524;border-color:#cde0c6}
.photo-pin span.photo-caption{left:0;right:0;top:auto;bottom:0;width:auto;height:auto;min-width:0;border:0;border-radius:0;background:#142524db;font-size:11px;line-height:24px;white-space:nowrap}
.photo-tether{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.photo-tether line{stroke-width:1;stroke-opacity:.55;pointer-events:none}
.maplibregl-marker.photo-icon{width:0;height:0}
.maplibregl-ctrl-group{background:#203330}
.maplibregl-ctrl-group button{min-height:0;border-radius:0}
.maplibregl-ctrl-icon{filter:invert(1)}
.maplibregl-ctrl-attrib{background:#192222ed;color:#a8b8b0;font-size:11px}
.maplibregl-ctrl-attrib a{color:#c5d7cf}
/* Panel theme follows the selected time; the vector basemap stays dark. */
/* JS animates background and chooses readable text from the same rendered frame. */
aside,#map-status{--ink:var(--panel-ink,#e7eee1);--muted:var(--panel-ink,#a9bcb1);color:var(--ink)}
button{color:var(--panel-ink,#e7eee1)}
button:hover{background:var(--hover,#324b40);color:var(--hover-ink,#e7eee1)}
.dial line{stroke:var(--tick,#657b70)}
#arc{stroke:var(--accent,#cde0c6)}
#knob{fill:var(--accent,#cde0c6)}
#time-range{accent-color:var(--accent,#cde0c6)}
#hours button{background:var(--hist,#92b59c)}
#hours button:hover{background:var(--accent,#cde0c6)}
button:focus-visible,a:focus-visible{outline-color:var(--accent,#cde0c6)}
#filmstrip button[aria-pressed=true]{border-color:var(--accent,#cde0c6)}
.photo-follow{color:#e7eee1}
.photo-follow:hover{background:#324b40}
.photo-follow[aria-pressed=true]{color:#142524}
.photo-follow[aria-pressed=true]:hover{background:#b9cdb1}
.photo-follow-status{position:absolute;z-index:1001;transform:translateY(-100%);white-space:nowrap;background:#142524e8;color:#cde0c6;border:0;border-radius:3px;padding:2px 5px;font-size:10px;line-height:14px;pointer-events:none}
#map{background:#121516}






@media(max-width:720px){
 html,body{height:100%;overflow:hidden;overscroll-behavior:none}
 body{height:100dvh;display:flex;flex-direction:column}
 header{height:50px;min-height:50px;flex:0 0 50px;flex-wrap:nowrap;padding:8px 12px;gap:8px}
 .brand{font-size:25px}#total{font-size:10px;white-space:nowrap}
 main{flex:1;min-height:0;height:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,2fr) minmax(0,1fr);overflow:hidden}
 .map-wrap{height:auto;min-height:0;overflow:hidden}
 aside{min-height:0;overflow:hidden;border-left:0;border-top:1px solid var(--line);padding:8px 12px max(8px,env(safe-area-inset-bottom));gap:4px 12px;grid-template-columns:100px minmax(0,1fr);grid-template-rows:24px 24px 40px minmax(48px,1fr) 28px 38px;align-items:center}
 aside>.eyebrow{grid-column:2;grid-row:1;font-size:11px}
 .dial{grid-column:1;grid-row:1/4;width:96px;height:96px;justify-self:center}
 #time{font-size:24px}#mode{display:none}
 #window{grid-column:2;grid-row:2;font-size:11px;white-space:nowrap}
 #now{grid-column:2;grid-row:3;min-height:36px;width:100%;padding:5px 10px}
 .distribution{grid-column:1/-1!important;grid-row:4;margin:0;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;min-height:0}
 .distribution>.eyebrow{font-size:10px;letter-spacing:1px}
 #hours{flex:0 1 44px;min-height:0;height:44px;margin-top:3px;overflow:hidden}
 .hour-labels{margin-top:2px;font-size:10px}
 #time-range{grid-column:1/-1!important;grid-row:5;min-width:0;width:100%;margin:0;min-height:28px}
 .seasons{grid-column:1/-1!important;grid-row:6;margin:0}
 .seasons>.eyebrow{display:none}#spectrum{margin-top:0;height:6px}.season-labels{font-size:10px;margin-top:3px}
 aside>.hint,aside>.local-note{display:none}
 .photo-icon .photo-pin{width:180px;height:135px}
 .photo-follow{min-height:28px;padding:3px 6px;font-size:10px}
 .photo-pin span.photo-caption{font-size:9px;line-height:18px}
 .map-tools{top:8px;left:46px;right:8px}.map-tools button{min-height:34px;font-size:11px;padding:5px 7px}
 #map-status{left:8px;bottom:28px;padding:5px 8px;font-size:10px;max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .maplibregl-ctrl-attrib{font-size:8px}
}
@media(max-width:720px) and (max-height:600px){
 header{height:40px;min-height:40px;flex-basis:40px}
 aside{grid-template-columns:minmax(0,1fr) 110px;grid-template-rows:30px minmax(30px,1fr) 26px;padding:5px 10px;gap:3px 8px}
 aside>.dial,aside>.eyebrow,aside>.seasons{display:none}
 #window{grid-column:1;grid-row:1;font-size:10px}
 #now{grid-column:2;grid-row:1;min-height:28px;font-size:11px}
 .distribution{grid-row:2}#time-range{grid-row:3}
}
#dial-histogram,#dial-now{display:none}
.panel-head{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.panel-head .map-tools{position:static;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;gap:6px}
.panel-head .map-tools button{box-shadow:none;touch-action:manipulation}
.brand-group{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0}
.brand-group .brand{line-height:1.1}
.design-credit{font-size:12px;line-height:16px;color:var(--muted);text-decoration:none;white-space:nowrap}
.design-credit:hover{text-decoration:underline;color:var(--ink)}
@media(max-width:720px){header{padding:2px 12px}.brand-group .brand{font-size:22px;line-height:23px}.design-credit{line-height:14px}}
.mobile-preview-dock{position:absolute;inset:0;pointer-events:none;z-index:450}
.mobile-preview-dock>.photo-card{position:absolute;left:0;top:0;width:0;height:0}
.mobile-preview-dock .photo-pin{position:absolute}
.mobile-preview-dock .photo-pin{border-radius:0}
.mobile-preview-dock .photo-follow-status{transform:none}
.map-wrap>.map-center-reticle{display:none;position:absolute;left:50%;top:50%;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;transform:translate(-50%,-50%);z-index:600;pointer-events:auto;opacity:.55;filter:drop-shadow(0 1px 1px #000);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.map-wrap>.map-center-reticle:hover,.map-wrap>.map-center-reticle:active{background:transparent;box-shadow:none}
.map-center-reticle:focus:not(:focus-visible){outline:none}
.map-center-reticle[aria-expanded=true]{opacity:.9}
.map-center-reticle::before,.map-center-reticle::after{content:"";position:absolute;background:#e7eee1;border-radius:1px}
.map-center-reticle::before{width:20px;height:1px;left:12px;top:21.5px}
.map-center-reticle::after{width:1px;height:20px;left:21.5px;top:12px}
@media(max-width:720px),(pointer:coarse){.map-wrap>.map-center-reticle{display:block}}
.dial-stage{display:contents}
aside>.distribution,aside>#time-range{display:none}
.photo-card,.photo-card .photo-pin{pointer-events:none}
.photo-expand svg{display:block;margin:auto;pointer-events:none}
.photo-card .photo-expand{min-width:42px}
@media(max-width:720px){.photo-card .photo-expand{min-width:34px}}
.photo-expand{position:absolute;z-index:1001;transform:translateX(-100%);min-height:32px;padding:5px 8px;font-size:12px;background:#142524e8;color:#e7eee1;white-space:nowrap;touch-action:manipulation}
@media(max-width:720px){.photo-expand{min-height:28px;padding:3px 6px;font-size:10px}}
#spectrum{position:relative;height:36px;border-radius:0}
.season-mountain{position:absolute;inset:0;pointer-events:none}
.season-cursor{position:absolute;top:0;bottom:0;width:2px;transform:translateX(-50%);background:var(--accent,#446e55);box-shadow:0 0 0 1px var(--panel);pointer-events:none}
.season-cursor::before{content:"";position:absolute;top:-2px;left:-2px;width:6px;height:6px;border-radius:50%;background:var(--accent,#446e55);box-shadow:0 0 0 1px var(--panel)}
.dial::before{content:"";position:absolute;inset:12.5%;border-radius:50%;background:linear-gradient(to bottom,#ffffff09 0%,#ffffff09 50%,#00000009 50%,#00000009 100%);pointer-events:none}
.dial svg{position:relative}
/* Prevent double-tap page zoom on photo navigation without disabling pinch zoom. */
.follow-step{display:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}
@media(max-width:720px){
 aside{display:flex;flex-direction:column;container-type:size;padding:4px 8px max(4px,env(safe-area-inset-bottom));gap:0;position:relative}
 aside>.eyebrow,aside>.distribution,aside>#time-range,aside>#now,aside>#window,aside>.seasons{display:none}
 aside>#mode{display:block;flex:0 0 22px;height:22px;line-height:22px;font-size:11px;margin:0;max-width:none;text-align:center}
 aside .dial{display:block;width:min(100cqw,calc(100cqh - 66px));height:min(100cqw,calc(100cqh - 66px));aspect-ratio:1;flex:0 0 auto;margin:auto;grid-area:auto}
 aside>.seasons{display:block;flex:0 0 44px;height:44px;width:100%;padding:3px 8px 0;margin:0}
 .seasons #spectrum{height:21px;margin:0;border-radius:0}
 .seasons .season-labels{font-size:10px;line-height:14px;margin-top:3px}
 .follow-step{display:block;position:absolute;top:calc(50% - 11px);transform:translateY(-50%);width:44px;height:44px;min-height:44px;padding:0;font-size:30px;line-height:1;border-radius:50%;z-index:2}
 .follow-prev{left:12px}.follow-next{right:12px}
 #dial-histogram{display:block;pointer-events:none}
 #dial-histogram line{stroke:var(--hist,#92b59c);stroke-width:7;stroke-linecap:round}
 #dial-histogram .empty-hour{stroke:var(--tick,#657b70);stroke-opacity:.3;stroke-width:3}
 .dial-center{gap:2px}
 #time{font-size:clamp(16px,14cqw,28px);line-height:1.1;letter-spacing:0;white-space:nowrap}
 #dial-now{display:block;pointer-events:auto;min-height:28px;padding:3px 7px;font-size:11px;background:transparent;border:0;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:720px){
 aside>.panel-head{height:32px;flex:0 0 32px;flex-direction:row;justify-content:space-between;gap:6px}
 .panel-head #mode{display:block;margin:0;font-size:11px;line-height:16px;min-width:0}
 .panel-head .map-tools{flex-shrink:0;gap:4px}
 .panel-head .map-tools button{font-size:11px;min-height:30px;padding:3px 6px;white-space:nowrap}
 aside .dial{width:min(100cqw,calc(100cqh - 76px));height:min(100cqw,calc(100cqh - 76px));container-type:inline-size;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .follow-step{top:calc(50% - 6px)}
}
.map-wrap>.map-center-reticle{display:block;pointer-events:none;opacity:.4}
@media(max-width:720px){
 .map-tools{left:46px;right:188px;flex-direction:column;align-items:stretch}
 .map-tools button{font-size:10px;padding:4px;min-width:0}
}
@media(min-width:721px){
 main{grid-template-columns:minmax(0,1fr) 350px}
 aside{padding-left:16px;padding-right:16px}
 .dial-stage{display:flex;position:relative;align-items:center;justify-content:center;width:100%;height:230px;flex-shrink:0}
 .dial-stage .dial{width:230px;height:230px}
 .follow-step{display:block;position:absolute;top:50%;transform:translateY(-50%);width:40px;height:44px;min-height:44px;padding:0;font-size:28px;line-height:1;border-radius:50%;z-index:2}
 .follow-prev{left:0}.follow-next{right:0}
 #dial-histogram{display:block;pointer-events:none}
 #dial-histogram line{stroke:var(--hist,#92b59c);stroke-width:7;stroke-linecap:round}
 #dial-histogram .empty-hour{stroke:var(--tick,#657b70);stroke-opacity:.3;stroke-width:3}
 #now{display:none}
 #dial-now{display:block;pointer-events:auto;min-height:32px;padding:3px 7px;font-size:12px;background:transparent;border:0;white-space:nowrap}
}