:root{--font: "Helvetica Neue", Helvetica, Arial, sans-serif;--bg: #ffffff;--tile-bg: #f0f0f0;--tile-radius: 12px;--tile-shadow: 0 1px 4px rgba(0, 0, 0, .06);--text: #1a1a1a;--text-muted: #6b7280;--border: #e5e7eb;--header-h: 54px;--gap: 10px;--pad: 14px;--warm: #c2410c;--cool: #1d4ed8;--moist: #1d4ed8;--dry: #c2410c}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:clip}.app-shell{width:100%;min-height:100%;position:relative}.screen{width:100%;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}@media(max-width:1023px){#screen-history{position:fixed;top:0;right:0;bottom:0;left:0;overflow-y:auto;overscroll-behavior-y:contain;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:1000;background:var(--bg);pointer-events:none}.app-shell[data-screen=history] #screen-history{transform:translate(0);pointer-events:auto}}@media(min-width:1024px){html,body{height:100%;overflow:hidden}.app-shell{display:flex;flex-direction:row;height:100%;overflow:hidden}.screen{flex:1;height:100%;min-height:unset;overflow-y:auto;overscroll-behavior-y:contain;position:static;transform:none!important;transition:none!important}#screen-home{max-width:460px;flex-shrink:0;border-right:1px solid var(--border)}#nav-home-btn,.screen-nav-dots{display:none}}.app-header{height:var(--header-h);background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;flex-shrink:0}.header-inner{height:100%;display:flex;align-items:center;gap:8px;padding:0 var(--pad)}.header-brand{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;flex-shrink:0}.header-title{font-size:.95rem;font-weight:600;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-spacer{flex-shrink:0;width:34px}.sensor-pill{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 14px;background:var(--tile-bg);border:none;border-radius:100px;font-family:var(--font);font-size:.875rem;font-weight:500;color:var(--text);cursor:pointer;min-width:0;max-width:210px;margin:0 auto;white-space:nowrap;overflow:hidden}.sensor-pill:hover{background:#e4e4e4}.sensor-pill span{overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.chevron{flex-shrink:0;opacity:.45}.icon-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:50%;cursor:pointer;color:var(--text);flex-shrink:0}.icon-btn:hover{background:var(--tile-bg)}.sensor-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;z-index:200;align-items:flex-end;justify-content:center}.sensor-overlay.open{display:flex}.sensor-sheet{background:var(--bg);border-radius:16px 16px 0 0;width:100%;max-width:480px;max-height:70dvh;display:flex;flex-direction:column;overflow:hidden}.sensor-sheet-header{display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad) 12px;border-bottom:1px solid var(--border);flex-shrink:0}.sensor-sheet-title{font-size:.95rem;font-weight:600}#station-select{flex:1;border:none;outline:none;font-family:var(--font);font-size:.95rem;overflow-y:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0}#station-select option{padding:11px var(--pad);cursor:pointer}#station-select option:checked{background:var(--tile-bg)}@media(min-width:1024px){.sensor-sheet{border-radius:12px;max-height:80vh}.sensor-overlay.open{align-items:center}}.home-main{flex:1;padding:var(--pad);display:flex;flex-direction:column;gap:var(--gap)}.location-row{display:flex;align-items:center;gap:5px;padding:2px 0;min-width:0}.pin-icon{flex-shrink:0;opacity:.7}.location-name{font-weight:600;font-size:.875rem;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.update-time{font-size:.76rem;color:var(--text-muted);flex-shrink:0;white-space:nowrap}.tile{background:var(--tile-bg);border-radius:var(--tile-radius);padding:14px 16px;box-shadow:var(--tile-shadow)}.tile-label{font-size:.75rem;font-weight:500;color:var(--text-muted);margin-bottom:6px}.tile-map{padding:0;overflow:hidden;isolation:isolate}#map{height:220px;width:100%;border-radius:var(--tile-radius)}@media(min-width:1024px){#map{height:250px}}.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}.tile-full{grid-column:1 / -1}.tile-metric{display:flex;flex-direction:column}.metric-display{display:flex;align-items:baseline;gap:3px;margin-top:6px}.metric-value{font-size:clamp(2.2rem,10vw,2.8rem);font-weight:300;letter-spacing:-.04em;line-height:1}.metric-unit{font-size:.95rem;color:var(--text-muted);padding-bottom:2px}.tile-ranking{display:flex;flex-direction:column;gap:8px}.rank-text{font-size:.9rem;font-weight:500}.rank-bar-wrap{margin-top:auto}.rank-bar-track{height:5px;background:#d4d4d4;border-radius:3px;overflow:hidden;position:relative}.rank-bar-thumb{height:100%;width:0%;background:var(--text);border-radius:3px;transition:width .5s ease}.rank-bar-legend{display:flex;justify-content:space-between;font-size:.68rem;color:var(--text-muted);margin-top:4px}.tile-reference{display:flex;flex-direction:column}.ref-row{display:flex;align-items:center;flex:1;margin-top:6px}.ref-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}.ref-divider{width:1px;height:34px;background:#d0d0d0;flex-shrink:0}.ref-diff{font-size:1.2rem;font-weight:500;letter-spacing:-.02em;line-height:1.1}.ref-diff.diff-warm{color:var(--warm)}.ref-diff.diff-cool{color:var(--cool)}.ref-diff.diff-moist{color:var(--moist)}.ref-diff.diff-dry{color:var(--dry)}.ref-sub{font-size:.68rem;color:var(--text-muted);text-align:center}.tile-sun{padding:14px 16px 10px}.sun-wrap{display:flex;flex-direction:column;align-items:center;gap:2px}.sun-arc{width:100%;max-width:240px;height:auto}.sun-times{width:100%;max-width:240px;display:flex;justify-content:space-between;font-size:.85rem;font-weight:500;padding:0 4px}.history-main{flex:1;padding:var(--pad);display:flex;flex-direction:column;gap:var(--gap)}.history-hint{font-size:.76rem;color:var(--text-muted);line-height:1.5}.tile-chart{overflow:hidden}.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.chart-label{font-size:.75rem;font-weight:500;color:var(--text-muted)}.chart-reset-btn{font-family:var(--font);font-size:.7rem;color:var(--text-muted);background:none;border:1px solid var(--border);border-radius:6px;padding:2px 8px;cursor:pointer;flex-shrink:0;transition:background .15s}.chart-reset-btn:hover{background:var(--tile-bg)}.chart-wrap{height:300px;position:relative}.chart-wrap canvas{width:100%!important;height:100%!important}@media(min-width:1024px){.chart-wrap{height:360px}}.screen-nav-dots{position:fixed;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:5;pointer-events:none}.nav-dot{width:6px;height:6px;border-radius:50%;background:#d0d0d0;transition:background .2s}.nav-dot.active{background:var(--text)}.map-marker{color:#fff;font-family:var(--font);font-size:11px;font-weight:700;padding:3px 6px;border-radius:9px;border:2px solid rgba(255,255,255,.9);box-shadow:0 1px 4px #00000038;white-space:nowrap;cursor:pointer;line-height:1.3}.map-marker--selected{border-color:var(--text);box-shadow:0 0 0 2px var(--text),0 1px 4px #0000004d}