:root{--bg:#f3f6f4;--surface:#fff;--ink:#243d36;--muted:#6b7e76;--line:#e1e9e4;--green:#236d56;--green-soft:#e9f3ec;--shadow:0 8px 28px #173d2705;--GuidePositive:#267252;--GuideAttention:#8b6216;--GuideDanger:#a34836;--GuideRainStrong:#327e97;--GuideNeutral:#64766b;color-scheme:light;font-family:'Manrope','IBM Plex Sans Thai',sans-serif;font-size:15px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px}button:disabled{opacity:.35;cursor:default}button:hover:not(:disabled){filter:brightness(.95)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #48a38f;outline-offset:3px}a{color:var(--green)}.icon{width:23px;height:23px;flex-shrink:0}.sidebar{position:fixed;inset:0 auto 0 0;width:242px;padding:36px 23px;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:10}.wordmark{display:flex;gap:9px;align-items:center;text-decoration:none;color:var(--ink);font-weight:800;font-size:24px;line-height:1.3;letter-spacing:-1px}.wordmark img{object-fit:contain}.wordmark small{display:block;font-size:9px;letter-spacing:2px;font-weight:700;margin-top:7px}.sidebar nav{display:flex;flex-direction:column;gap:9px;margin-top:53px}.nav-item{width:100%;justify-content:flex-start;padding:15px 16px;border-radius:12px;font-weight:600;font-size:14px;color:var(--muted);text-align:left}.nav-item.active{background:var(--green-soft);color:var(--green)}.nav-item.active i{width:6px;height:6px;border-radius:50%;background:var(--green);margin-left:auto}.sidebar-bottom{margin-top:auto}.sidebar-bottom>small{display:block;font-size:10px;letter-spacing:1.2px;color:var(--muted);padding:20px 16px 0}.mini-brand{margin:0 16px 28px;border-top:1px solid var(--line);padding-top:23px;display:flex;gap:12px;align-items:center}.mini-brand span{font-size:34px;color:#9fb6a8}.mini-brand p{font-size:11px;letter-spacing:2px;line-height:1.9;color:var(--muted)}.workspace{margin-left:242px}header{height:88px;padding:0 44px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--surface)}.breadcrumb{display:flex;gap:14px;font-size:12px;color:var(--muted)}.breadcrumb strong{font-weight:600;color:var(--ink)}.breadcrumb span{color:#b9c8bf}.header-actions{display:flex;align-items:center;gap:9px}.header-actions button{min-width:42px;border-radius:9px}.language{font-size:12px;font-weight:800}.unit-toggle{background:var(--green-soft);color:var(--green);font-weight:700}.icon-btn{width:44px;height:44px;border-radius:12px;flex-shrink:0}.icon-btn:hover{background:var(--green-soft)}.mobile-menu{display:none}main{padding:24px 44px 32px;max-width:1530px;margin:auto}h1,h2,h3,p{margin:0}h1{font-size:31px;font-weight:800;letter-spacing:-1px;line-height:1.4}h2{font-size:21px;letter-spacing:-.4px;font-weight:800;line-height:1.5}h3{font-size:18px;line-height:1.6}p{line-height:1.85}main:focus{outline:none}.demo-banner{padding:11px 15px;border:1px solid #e5e6d4;border-radius:9px;background:#f7f7ed;color:#6f7150;display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.6}.demo-banner button{min-height:24px;margin-left:auto}.demo-banner .icon{width:17px;height:17px}.demo-dot{height:6px;width:6px;background:#a6a567;border-radius:50%;flex-shrink:0}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 0 26px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--muted);text-transform:uppercase;margin-bottom:7px}.page-heading p:not(.eyebrow){color:var(--muted);font-size:14px;margin-top:6px}.page-actions{display:flex;align-items:center;gap:5px}.location-button{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:13px;font-weight:700;max-width:260px}.location-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.location-button .icon{width:17px;color:var(--green)}.chevron{margin-left:12px}.hero{border-radius:22px;min-height:365px;position:relative;overflow:hidden;background:#e6f0e9;border:1px solid #dae7dc;margin-bottom:28px;color:#274838}.map-art{position:absolute;inset:0;width:100%;height:100%;opacity:.78}.hero-content{position:relative;padding:28px 32px;width:55%;z-index:2}.pill{display:inline-flex;align-items:center;gap:7px;font-size:11px;padding:6px 10px;background:#ffffffa6;border:1px solid #ffffffa6;border-radius:20px;margin-bottom:16px}.pill span{width:5px;height:5px;background:#5f9a71;border-radius:50%}.hero h2{font-size:24px}.hero-time{font-size:12px;color:#6d8776;margin-top:4px}.temperature{display:flex;align-items:center;gap:0;font-size:78px;font-weight:500;letter-spacing:-5px;line-height:1.35}.temperature>span{align-self:center;font-size:23px;font-weight:400;letter-spacing:0;margin-left:2px;color:#648170}.temperature .icon{width:58px;height:58px;margin-left:30px;color:#699998}.condition{font-size:15px}.hero-metrics{display:flex;gap:30px;margin-top:20px}.hero-metrics>span{display:grid;grid-template-columns:22px 1fr;column-gap:8px}.hero-metrics .icon{width:17px;color:#6d9182;align-self:center}.hero-metrics strong{font-size:14px}.hero-metrics small{font-size:10px;font-weight:500}.hero-metrics em{font-size:10px;font-style:normal;grid-column:2;color:#6d8776}.mascot-wrap{position:absolute;right:35px;bottom:22px;width:32%;max-width:280px;z-index:1}.mascot-wrap img{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 16px #264b3726);max-height:270px;object-fit:contain}.speech{position:relative;background:#ffffffdc;border-radius:14px 14px 3px 14px;padding:11px 14px;max-width:230px;margin:0 0 -4px -10px;font-size:12px;line-height:1.6;box-shadow:0 4px 20px #284a3409}.map-caption{position:absolute;bottom:11px;left:32px;right:20px;color:#648170;font-size:9px;text-align:left}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:24px 0 17px}.section-heading h2{font-size:21px}.section-heading .eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:4px}.section-heading .muted{font-size:13px}.text-btn{font-size:12px;color:var(--green);font-weight:600}.text-btn .icon{width:16px}.guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.guide-card{display:block;text-align:left;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px;padding:20px 19px;transition:transform .2s}.guide-card:hover{transform:translateY(-3px)}.guide-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.guide-top>.icon{width:15px;color:#91a599}.guide-icon{width:43px;height:43px;display:flex;align-items:center;justify-content:center;border-radius:13px;background:#edf2f6;color:#427c95}.guide-card:nth-child(2) .guide-icon{color:#8b743b;background:#f6f0e3}.guide-card:nth-child(3) .guide-icon{color:#63856f;background:#edf3ed}.guide-card:nth-child(4) .guide-icon{color:#977664;background:#f5ece6}.guide-card h3{font-size:17px;margin-bottom:9px}.status{display:inline-block;color:var(--GuideNeutral);font-size:11px;font-weight:600;border-radius:6px;padding:4px 7px;background:var(--green-soft);line-height:1.7}.positive .status{color:var(--GuidePositive);background:#edf5ef}.attention .status,.status.attention{color:var(--GuideAttention);background:#faf3e3}.danger .status{color:var(--GuideDanger);background:#faeee8}.guide-card p{font-size:12px;color:var(--muted);margin-top:11px;min-height:45px}.card-link{display:block;color:var(--green);font-size:11px;margin-top:17px;font-weight:700}.forecast-grid{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:20px;margin-top:25px}.panel{background:var(--surface);padding:24px;border:1px solid var(--line);border-radius:17px;margin:22px 0;box-shadow:var(--shadow)}.panel>.section-heading{margin:0 0 20px}.forecast-grid .panel{margin:0}.hour-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:#c8d8cf transparent}.hour{flex:0 0 70px;text-align:center;display:flex;align-items:center;flex-direction:column;padding:13px 3px 10px;border-radius:12px;gap:13px}.hour>span{font-size:11px;color:var(--muted)}.hour strong{font-size:14px}.hour>.icon{color:#6e9c9a;width:25px;height:25px}.hour small{font-size:10px;color:var(--GuideRainStrong)}.current-hour{background:var(--green-soft)}.rain-bar{height:47px;width:27px;border-bottom:1px solid var(--line);display:flex;align-items:flex-end;justify-content:center}.rain-bar i{width:16px;border-radius:4px 4px 0 0;background:#9bc4cc;max-height:45px}.chart-label{font-size:10px;color:var(--muted);margin-top:7px}.friend-panel{padding:27px 24px;background:#e8eee2;border-radius:17px;color:#3e5235;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.friend-panel h2{font-size:21px;margin:5px 0 12px}.friend-panel>p{font-size:15px}.friend-panel>div{display:flex;gap:9px;margin-top:25px;font-size:10px;line-height:1.7;color:#778570}.friend-panel .icon{width:17px}.day-row{display:grid;width:100%;grid-template-columns:1.3fr 35px 1fr 1.8fr 24px;gap:15px;min-height:58px;border-bottom:1px solid var(--line);text-align:left;justify-content:initial;font-size:13px}.day-row:last-child{border-bottom:0}.day-row>.icon{color:#66958c;width:21px}.day-row>.icon:last-child{width:13px;color:var(--muted)}.day-rain{color:var(--GuideRainStrong);font-size:12px}.temp-range{display:flex;align-items:center;gap:15px;color:var(--muted);font-size:12px}.temp-range i{width:70px;height:5px;border-radius:4px;background:linear-gradient(90deg,#b4d5cc,#e5ce8b)}.temp-range b{color:var(--ink)}.fine{font-size:11px;color:var(--muted);margin-top:16px}.freshness{font-size:11px;color:var(--muted);margin-top:22px}.muted{color:var(--muted)}.small{font-size:11px}.notice{padding:16px 20px;border-radius:12px;background:var(--green-soft);margin-bottom:20px;line-height:1.7}.notice.warning{background:#fff3db;color:#856123}.empty-state{padding:25px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:15px}.primary{padding:12px 20px;background:var(--green);color:white;border-radius:10px;font-size:14px}.outline{padding:10px 18px;border:1px solid var(--line);border-radius:10px;font-size:14px}.panel>h2{margin-bottom:14px}.panel>p{margin-bottom:17px}.places-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.places-grid .panel{margin:0}.gps-panel{display:flex;align-items:center;justify-content:space-between;gap:25px}.gps-panel>div{max-width:65%}.gps-panel p{font-size:13px}.place-row{display:flex;align-items:center;border-bottom:1px solid var(--line);padding:10px 0;gap:5px}.place-select{justify-content:flex-start;flex:1;text-align:left;padding:6px 0;gap:12px;min-width:0}.place-select>span{display:flex;flex-direction:column;gap:5px;min-width:0}.place-select strong{font-size:14px;overflow-wrap:anywhere}.place-select small{font-size:10px;color:var(--muted)}.place-select .icon{width:18px;color:var(--muted)}.favorite{color:#a5b4a9}.favorite.selected{color:#b7984b}.favorite.selected svg{fill:#efdf9d}.city-results{max-height:450px;overflow-y:auto}.field-label,label{display:block;font-size:13px;font-weight:600;margin-bottom:9px}input:not([type=checkbox]),select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:12px 13px;color:var(--ink);width:100%;min-height:45px;margin:8px 0 12px;max-width:100%}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}.settings-panel>label{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:7px 0}.settings-panel select{width:210px}.settings-panel>label:not(:last-child){border-bottom:1px solid var(--line)}details summary{cursor:pointer;min-height:44px}footer{padding:20px 44px 30px;display:flex;justify-content:space-between;gap:15px;font-size:10px;color:var(--muted)}footer b{color:#aabfb3;margin:0 8px}dialog{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:22px;max-width:min(590px,calc(100vw - 24px));width:590px;max-height:85dvh;padding:0;box-shadow:0 30px 100px #16332a33}dialog::backdrop{background:#16332a66;backdrop-filter:blur(5px)}#dialog-content{padding:24px 30px 32px}.dialog-top{display:flex;justify-content:flex-end}.dialog-top .text-btn{font-size:14px}.detail-icon{display:flex;width:60px;height:60px;background:var(--green-soft);color:var(--green);border-radius:18px;align-items:center;justify-content:center;margin-bottom:16px}.detail-icon .icon{width:32px;height:32px}dialog h2{font-size:27px;margin-bottom:15px}dialog h3{margin:24px 0 10px}dialog p,dialog li{font-size:14px;line-height:1.9}dialog .status{font-size:13px}dialog .fine,dialog .freshness{font-size:11px}.reasons{padding-left:20px}.reasons li{padding:3px}.metrics-list{background:var(--bg);padding:15px;border-radius:12px;font-size:12px}.metrics-list>div{display:flex;justify-content:space-between;gap:20px;padding:8px 0}.metrics-list dd{font-weight:700;white-space:nowrap}.mascot-note{display:flex;align-items:center;gap:14px;background:var(--green-soft);padding:14px;border-radius:14px;margin-top:22px}.mascot-note img{object-fit:contain}.custom-cards>div{display:flex;gap:7px;align-items:center;border-bottom:1px solid var(--line);padding:14px 0}.custom-cards label{margin:0;display:flex;align-items:center;gap:14px;flex:1;font-size:15px}.custom-cards input{width:19px;height:19px;accent-color:var(--green)}.custom-cards button{min-width:44px;background:var(--bg);border-radius:9px}.external-link{display:inline-flex;padding:9px 0;font-weight:600}.skip{position:fixed;top:-100px;left:20px;background:var(--surface);padding:15px;z-index:100}.skip:focus{top:10px}#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);max-width:90vw;background:#23493c;color:#fff;padding:14px 23px;border-radius:13px;box-shadow:0 8px 30px #0002;z-index:100;font-size:14px;opacity:0;pointer-events:none;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}
[data-theme=dark]{--bg:#14221e;--surface:#1c2d26;--ink:#e0ece3;--muted:#a2b6a8;--line:#314439;--green:#91cfae;--green-soft:#2c4335;--GuidePositive:#a5d2aa;--GuideAttention:#dfc388;--GuideDanger:#e7ac9b;--GuideRainStrong:#97c7d8;color-scheme:dark}[data-theme=dark] .hero{filter:brightness(.8)}[data-theme=dark] .demo-banner{background:#30382a;border-color:#434c33;color:#d3d5b2}[data-theme=dark] .guide-icon{background:#33473f!important;color:#c0d4c9!important}[data-theme=dark] .status{background:#344737;color:#dbd6b3}[data-theme=dark] .friend-panel{background:#34412a;color:#dfebd4}[data-theme=dark] .friend-panel>div{color:#abb89f}[data-theme=dark] .primary{background:#317155}[data-theme=dark] .notice.warning{background:#443c28;color:#e6d4a5}
@media(min-width:1600px){main{padding-left:65px;padding-right:65px}.hero{min-height:410px}.hero-content{padding:35px 40px}.mascot-wrap{max-width:320px;right:65px}.mascot-wrap img{max-height:300px}.temperature{font-size:90px}}
@media(max-width:1150px){.sidebar{width:205px;padding:30px 15px}.wordmark{font-size:21px}.workspace{margin-left:205px}main{padding:22px 26px}header{padding:0 26px}.guide-grid{gap:10px}.guide-card{padding:17px 13px}.guide-card h3{font-size:15px}.forecast-grid{grid-template-columns:minmax(0,1fr)}.friend-panel{display:none}.hero-content{width:60%}.mascot-wrap{right:18px;width:33%}.page-actions .icon-btn{display:none}footer{padding:20px 26px}}
@media(max-width:800px){.sidebar{transform:translateX(-100%);transition:transform .2s;width:240px;box-shadow:20px 0 100px #0002}.sidebar.open{transform:translateX(0);top:70px}.workspace{margin-left:0}.mobile-menu{display:flex}.breadcrumb{margin-right:auto;margin-left:10px}.breadcrumb>span,.breadcrumb>strong{display:none}header{height:70px;padding:0 18px;position:sticky;top:0;z-index:20}main{padding:17px 20px}.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.guide-card{padding:20px}.guide-card h3{font-size:18px}.guide-card p{min-height:40px}.page-heading{padding:24px 0 22px;align-items:flex-start}.page-heading h1{font-size:27px}.page-heading .eyebrow{font-size:10px}.page-actions{padding-top:19px}.location-button{max-width:170px}.hero{min-height:350px}.hero-content{padding:25px}.mascot-wrap{max-width:220px;width:35%;bottom:35px;right:20px}.temperature{font-size:70px}.map-caption{left:25px;font-size:8px}.life-heading{align-items:center}.places-grid{grid-template-columns:1fr}.gps-panel{display:block}.gps-panel>div{max-width:none}.gps-panel .primary{margin-top:15px}.day-row{gap:10px}.temp-range i{width:40px}footer{padding:20px;font-size:9px;flex-direction:column}.panel{padding:20px}}
@media(max-width:480px){main{padding:14px}.demo-banner{font-size:10px;padding:9px 10px;gap:7px}.page-heading{flex-wrap:wrap;gap:10px;padding:21px 0}.page-heading h1{font-size:27px}.page-heading p:not(.eyebrow){font-size:13px}.page-actions{padding:0}.location-button{max-width:260px;font-size:12px;min-height:40px;padding:5px 12px}.hero{min-height:350px;border-radius:18px}.hero-content{width:65%;padding:21px 20px 38px}.hero h2{font-size:19px}.hero-time{font-size:10px}.temperature{font-size:66px}.temperature .icon{display:none}.temperature>span{font-size:19px}.condition{font-size:12px}.hero-metrics{gap:18px}.hero-metrics strong{font-size:12px}.hero-metrics .icon{width:15px}.hero-metrics{grid-template-columns:15px 1fr}.hero-metrics em{font-size:9px}.mascot-wrap{width:41%;right:5px;bottom:39px}.speech{font-size:10px;line-height:1.65;padding:9px 11px;margin-left:0;margin-bottom:7px}.map-caption{left:20px;bottom:10px;font-size:8px;max-width:90%}.section-heading{gap:9px}.section-heading h2{font-size:21px}.section-heading .muted{font-size:11px}.section-heading .eyebrow{font-size:8px}.text-btn{font-size:11px;white-space:nowrap}.guide-grid{gap:11px}.guide-card{padding:16px 14px}.guide-top{margin-bottom:14px}.guide-card h3{font-size:16px}.guide-card p{font-size:11px;min-height:42px}.status{font-size:10px}.guide-icon{width:38px;height:38px}.guide-top .icon{width:20px}.guide-top>.icon{width:13px}.card-link{font-size:10px}.panel{padding:18px 14px}.panel .section-heading h2{font-size:18px}.day-row{grid-template-columns:1fr 22px .8fr 1.5fr 12px;gap:6px;font-size:11px}.day-rain{font-size:10px}.temp-range{font-size:10px;gap:7px}.temp-range i{width:19px}.form-grid{grid-template-columns:1fr}.settings-panel select{width:145px}.settings-panel label{font-size:13px}#dialog-content{padding:18px 20px 25px}.metrics-list{font-size:11px}.metrics-list dd{margin-left:7px}.freshness{font-size:10px}.header-actions{gap:2px}.breadcrumb{font-size:11px}.page-actions>.icon-btn{display:flex}.custom-cards label{font-size:13px}.custom-cards button{min-width:39px}.speech{max-width:150px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* v0.1.2: keep hourly overflow inside its scroller, including single-column layouts. */
html,body{min-width:0;max-width:100%;overflow-wrap:break-word}
.workspace,main,.forecast-grid,.forecast-grid>*,.panel,.places-grid>*,.guide-grid>*{min-width:0}
.forecast-grid,.panel,.hour-strip{max-width:100%}
.hour-strip{width:100%;min-width:0;overscroll-behavior-x:contain}
.section-heading>div,.page-heading>div{min-width:0}
body.dialog-open{overflow:hidden}
dialog{position:fixed;inset:0;margin:auto;width:min(590px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
#dialog-content{min-width:0;overflow-wrap:anywhere}
.dialog-top{position:sticky;top:0;z-index:3;background:var(--surface);padding:4px 0}
.metrics-list{margin-inline:0}
.metrics-list>div{flex-wrap:wrap;gap:6px 14px}
.metrics-list dd{margin:0;white-space:normal}
@media(max-width:480px){
 .section-heading{flex-wrap:wrap}
 .life-heading>div{flex:1 1 190px}
 .day-row{grid-template-columns:minmax(0,1fr) 22px minmax(0,.8fr) minmax(0,1.5fr) 12px}
 .day-row>*{min-width:0}
 .temp-range{gap:5px;white-space:nowrap}
 .temp-range i{flex:1;min-width:0;max-width:19px}
 .settings-panel>label{flex-wrap:wrap;gap:4px}
 .settings-panel select{flex:1 1 145px}
 .custom-cards>div{flex-wrap:wrap}
 dialog{width:calc(100% - 20px);max-width:calc(100% - 20px);max-height:calc(100dvh - 24px);border-radius:18px}
 #dialog-content{padding:12px 16px 24px}
 dialog h2{font-size:23px}
 .mascot-note img{width:64px;height:auto;flex-shrink:0}
}

/* Keep daily values readable on narrow phones without widening the document. */
@media(max-width:480px){
 .day-row{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 14px;grid-template-rows:auto auto;column-gap:7px;row-gap:4px;padding:10px 0}
 .day-row>span:first-child{grid-column:1/3;grid-row:1;overflow-wrap:anywhere}
 .day-row>svg:nth-child(2){grid-column:3;grid-row:1}
 .day-row>.day-rain{grid-column:1/3;grid-row:2}
 .day-row>.temp-range{grid-column:3/5;grid-row:2;justify-content:flex-end;white-space:nowrap}
 .day-row>svg:last-child{grid-column:4;grid-row:1}
 .hero-content,.guide-card,.section-heading,.gps-panel{min-width:0;overflow-wrap:anywhere}
 .page-heading{min-width:0}
 .page-heading>div:first-child{flex:1 1 180px}
 .page-actions{min-width:0;max-width:100%}
 .location-button{min-width:0;max-width:min(260px,calc(100vw - 70px))}
}