:root{--paper:#f8f9f6;--ink:#202d36;--muted:#68777e;--line:#e3e8e3;--green:#497a65}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:Arial,PingFang TC,Microsoft JhengHei,sans-serif}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button,select{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible{outline-offset:4px;outline:3px solid #64947b}button:disabled{cursor:wait;opacity:.4}.site-shell{max-width:1160px;margin:auto;padding:0 48px}.site-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:110px;display:flex}.brand{letter-spacing:3px;align-items:center;gap:12px;font-size:23px;font-weight:700;display:flex}.brand-symbol{color:var(--green);font-size:43px;font-weight:400}.brand-english{letter-spacing:2px;margin-top:3px;font-size:9px;font-weight:400;display:block}.header-link{color:var(--muted);font-size:12px}.header-link span{margin-left:16px}.intro{padding:60px 0 40px}.eyebrow{letter-spacing:2px;color:var(--green);align-items:center;gap:9px;font-size:10px;display:flex}.status-dot{background:#81b593;border-radius:50%;width:6px;height:6px;display:inline-block}h1{letter-spacing:2px;margin:19px 0 15px;font-size:clamp(27px,3.5vw,39px);font-weight:600}.intro-copy{color:var(--muted);letter-spacing:.6px;font-size:14px;line-height:1.8}.mobile-break{display:none}.toolbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;display:flex}.city-tabs{background:#edf0eb;border-radius:11px;gap:4px;padding:5px;display:flex}.city-tabs button{color:var(--muted);background:0 0;border:0;border-radius:7px;padding:10px 16px;font-size:13px}.city-tabs button span{margin-left:7px;font-size:10px}.city-tabs button.active{color:var(--ink);background:#fff;box-shadow:0 2px 4px #202d3608}.data-controls{align-items:center;gap:10px;display:flex}.mode-select{color:var(--muted);align-items:center;gap:10px;font-size:11px;display:flex}.mode-select select{border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:7px;padding:10px}.refresh{border:1px solid var(--line);width:37px;height:37px;color:var(--muted);background:#fff;border-radius:7px;font-size:22px}.dashboard{grid-template-columns:1.16fr 1fr;gap:22px;display:grid}.current-card{color:#fff;background:#243c4b;border-radius:17px;padding:25px 29px 21px;position:relative;overflow:hidden}.current-card:before{content:"";pointer-events:none;border:1px solid #ffffff08;border-radius:50%;width:360px;height:360px;position:absolute;top:-110px;right:-150px;box-shadow:0 0 0 45px #ffffff03,0 0 0 90px #ffffff02}.current-top{color:#ccd8dd;letter-spacing:1px;justify-content:space-between;align-items:center;font-size:11px;display:flex;position:relative}.source-badge{letter-spacing:1px;border:1px solid #ffffff20;border-radius:20px;align-items:center;gap:6px;padding:6px 8px;font-size:8px;display:inline-flex}.current-main{justify-content:space-between;align-items:center;padding:18px 0;display:flex}.location{color:#aabfc8;letter-spacing:1px;margin:10px 0;font-size:10px}.current-main h2{letter-spacing:3px;margin:0;font-size:25px;font-weight:500}.temperature{letter-spacing:-4px;margin:15px 0 6px;font-size:82px;font-weight:300;line-height:1}.temperature span{vertical-align:top;font-size:65px}.hero-weather{color:#ebce81;text-align:center;width:130px;margin-top:20px}.hero-weather svg{filter:drop-shadow(0 8px 14px #14263240);width:130px}.hero-weather p{color:#d5dfe3;letter-spacing:2px;margin:4px 0;font-size:12px}.current-bottom{color:#c0cfd6;border-top:1px solid #ffffff17;justify-content:space-between;gap:10px;padding-top:18px;font-size:10px;display:flex}.details-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.metric-card{border:1px solid var(--line);background:#fff;border-radius:15px;padding:22px 23px}.metric-icon{float:right;color:#88a397;font-size:25px;line-height:1}.metric-card h3{color:var(--muted);margin:5px 0 22px;font-size:12px;font-weight:400}.metric-card p{letter-spacing:-1px;margin:0 0 10px;font-size:38px}.metric-card p span{color:var(--muted);letter-spacing:0;margin-left:7px;font-size:12px}.metric-card small{color:#7c898e;font-size:10px}.air-card{background:#edf3e9;border:1px solid #e0e9da;border-radius:14px;grid-column:1/-1;justify-content:space-between;align-items:center;padding:20px 23px;display:flex}.air-card h3{margin:0 0 9px;font-size:12px;font-weight:500}.air-card h3 span{letter-spacing:1px;color:#6b816c;margin-left:8px;font-size:8px}.air-card p{color:#60765f;margin:0;font-size:11px}.air-card strong{color:#52744c;font-size:34px;font-weight:400}.forecast-card{border:1px solid var(--line);background:#fff;border-radius:16px;grid-column:1/-1;padding:25px 28px 20px}.section-heading{justify-content:space-between;align-items:center;display:flex}.section-heading h2{margin:0;font-size:14px;font-weight:500}.section-heading>span{color:#87938f;font-size:10px}.forecast-days{grid-template-columns:repeat(5,1fr);margin-top:24px;display:grid}.forecast-day{text-align:center;border-right:1px solid #edf0eb;padding:0 10px}.forecast-day:last-child{border:0}.forecast-day>p:first-child{margin:0 0 5px;font-size:12px}.forecast-day>small{color:#8a9599;font-size:10px}.forecast-day svg{color:#e9c776;width:68px;height:68px;margin:11px auto;display:block}.day-temperature{margin:0 0 11px;font-size:17px}.day-temperature span{color:#8e9a9f;margin-left:8px;font-size:14px}.rain{color:#64859a;font-size:10px}.demo-caption{color:#7b8788;border-top:1px solid #edf0eb;margin:20px 0 0;padding-top:13px;font-size:10px;line-height:1.7}.architecture{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;margin-top:27px;padding:24px 0 26px;display:flex}.architecture-label{color:#76887e;letter-spacing:2px;font-size:8px}.architecture p{color:#53655d;margin:8px 0 0;font-size:12px}.flow{color:#63736d;align-items:center;gap:15px;font-size:11px;display:flex}.flow b{color:#9aaba1;font-weight:400}.flow code{color:#456e51;background:#edf3eb;border:1px solid #dce5dc;border-radius:6px;padding:9px 12px;font-size:11px}.architecture .architecture-note{color:#7b8788;flex-basis:100%;margin:0;font-size:11px;line-height:1.6}footer{color:#7e8b86;flex-wrap:wrap;justify-content:space-between;gap:14px;padding:24px 0 32px;font-size:10px;line-height:1.6;display:flex}footer div span{color:#b7c1ba;margin:0 6px}footer a:hover{color:var(--green);text-decoration:underline}.loading-panel,.error-panel{border:1px solid var(--line);text-align:center;color:var(--muted);background:#fff;border-radius:15px;padding:55px 24px;font-size:14px}.error-panel{color:#915744}.error-panel button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:7px;margin:12px 5px 0;padding:10px 16px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (min-width:1500px){.intro{padding-top:75px}}@media (max-width:760px){.site-shell{padding:0 22px}.site-header{height:85px}.header-link{font-size:10px}.header-link span{margin-left:3px}.intro{padding:35px 0 25px}h1{font-size:28px;line-height:1.6}.mobile-break{display:inline}.intro-copy{font-size:12px}.eyebrow{letter-spacing:1.5px;font-size:8px}.toolbar{flex-wrap:wrap}.city-tabs{flex:1;justify-content:space-between}.city-tabs button{flex:1;padding:10px 9px}.city-tabs button span{font-size:9px}.data-controls{margin-left:auto}.dashboard{grid-template-columns:1fr;gap:16px}.current-card{padding:22px}.metric-card{padding:20px}.metric-card h3{margin-bottom:16px}.forecast-card{padding:23px 12px 16px}.section-heading{padding:0 6px}.section-heading>span{font-size:9px}.forecast-day{padding:0 3px}.forecast-day svg{width:48px;height:58px}.day-temperature{font-size:14px}.day-temperature span{margin-left:2px;font-size:12px}.rain{font-size:9px}.demo-caption{padding:12px 5px 0}.architecture{justify-content:flex-start}.flow{gap:10px;font-size:10px}footer{justify-content:flex-start}footer>span{flex-basis:100%}}