:root{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,PingFang SC,Microsoft YaHei,sans-serif;color:#24282d;background:#f4f7fa;font-synthesis:none;--blue:#007aff;--muted:#86909a;--glass:rgba(255,255,255,.9);--shadow:0 4px 24px #35475a0d,0 1px 3px #243e5010}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit;color:inherit}button{border:0;background:none;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #007aff;outline-offset:3px}button:disabled{opacity:.4;cursor:wait}[hidden]{display:none!important}svg.lucide{width:19px;height:19px;stroke-width:1.65;flex-shrink:0}.app-header{height:62px;padding:0 25px;display:flex;align-items:center;justify-content:space-between;background:#fffffff2;border-bottom:1px solid #e5e9ed;gap:16px;position:relative;z-index:10}.brand{display:flex;align-items:center;gap:11px}.brand>svg{color:var(--blue);width:22px;height:22px}.brand strong{font-size:19px;letter-spacing:.5px;font-weight:600}.brand span{font-size:12px;color:#929aa2;border-left:1px solid #e2e6eb;padding-left:16px;margin-left:7px}.header-actions{display:flex;align-items:center;gap:20px}.source-switch{display:flex;background:#f0f2f5;border-radius:8px;padding:3px;gap:2px}.source-switch button{font-size:11px;color:#8b939c;border-radius:6px;padding:6px 13px;white-space:nowrap}.source-switch button.active{background:#fff;color:#30363e;box-shadow:0 1px 4px #273b5110}.icon-button{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:#78838f}.icon-button:hover{background:#f0f4f8;color:var(--blue)}.map-stage{height:calc(100dvh - 62px);min-height:620px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#fff,#f7f9fb 52%,#eef2f6)}.globe{position:absolute;inset:0;touch-action:none}.globe canvas{display:block;position:absolute;inset:0;cursor:grab}.globe canvas:active{cursor:grabbing}.globe-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.map-tools{position:absolute;right:23px;top:25px;z-index:5;display:flex;flex-direction:column;gap:3px;padding:6px;background:var(--glass);box-shadow:var(--shadow);border-radius:11px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.map-tools>span{height:1px;width:22px;background:#e9edf1;align-self:center;margin:3px}.map-tools .active{color:#007aff;background:#f1f6fe}.city-label{position:absolute;top:0;left:0;z-index:2;pointer-events:auto;display:flex;align-items:center;gap:4px;background:var(--aqi-color,#e0e5e9);color:var(--aqi-ink,#63707b);box-shadow:0 1px 3px #1b395318;border:1px solid #ffffffc9;border-radius:4px;font-size:9px;padding:2px 5px;line-height:12px;white-space:nowrap}.city-label strong{min-width:3ch;text-align:center;font-size:9px;font-weight:650;font-variant-numeric:tabular-nums;border-left:1px solid currentColor;padding-left:4px;line-height:11px}.aqi-scale{display:grid;gap:7px;margin-top:15px}.aqi-scale>div{display:flex;align-items:center;gap:9px;font-size:11px;color:#697581}.aqi-scale i{width:9px;height:9px;border-radius:50%}.aqi-scale strong{font-size:10px;font-weight:500;margin-left:auto;font-variant-numeric:tabular-nums}.timeline{position:absolute;bottom:24px;left:50%;transform:translate(-50%);width:min(590px,calc(100% - 48px));display:flex;align-items:center;gap:18px;padding:18px 22px 16px;background:var(--glass);box-shadow:var(--shadow);border:1px solid #ffffffc9;border-radius:14px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:5}.play-button{width:34px;height:34px;display:grid;place-items:center;background:#007aff;color:#fff;border-radius:50%;flex-shrink:0}.play-button:hover{background:#0068dc}.play-button svg{width:14px;height:14px;fill:currentColor;stroke-width:1px}.timeline-body{flex:1;min-width:0}.timeline-heading{display:flex;align-items:center;gap:10px;font-size:10px;color:#9aa3ab;margin-bottom:9px}.timeline-heading strong{font-weight:500;font-size:11px;color:#5d6a76;margin-left:auto;font-variant-numeric:tabular-nums}#timeline-tag{font-size:8px;color:#a7afb6}.timeline input{display:block;appearance:none;-webkit-appearance:none;background:transparent;width:100%;height:14px;margin:0;cursor:ew-resize}.timeline input::-webkit-slider-runnable-track{height:3px;background:var(--availability,#e1e6ec);border-radius:4px}.timeline input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;background:#007aff;border:2px solid white;border-radius:50%;box-shadow:0 1px 4px #2e629c30}.timeline input::-moz-range-track{height:3px;background:var(--availability,#e1e6ec);border-radius:4px}.timeline input::-moz-range-thumb{width:9px;height:9px;background:#007aff;border:2px solid white;border-radius:50%}.timeline-ticks{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:4px;font-size:9px;color:#a0aab4}.timeline-ticks button{font-size:9px;color:#7199ca;padding:2px 8px}.globe-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;font-size:12px;color:#8596a6}.globe-loading>span{width:32px;height:32px;border:1px solid #d7e4ef;border-top-color:#007aff;border-radius:50%;animation:spin 1.3s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.globe-error{font-size:12px;color:#778b9d;padding:24px;line-height:1.8;text-align:center;max-width:300px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{width:min(560px,calc(100% - 32px));max-height:85vh;border:1px solid #e3e9ef;border-radius:18px;background:#fffffff5;padding:27px 30px;color:#354353;box-shadow:0 20px 80px #1e385e20}dialog::backdrop{background:#30485e30;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.dialog-heading h2{font-size:21px;font-weight:600;margin:0}.source-explanation h3{font-size:12px;margin:24px 0 8px}.source-explanation p{font-size:11px;line-height:1.9;color:#85909b;margin:0}.source-links{display:flex;flex-wrap:wrap;gap:20px;font-size:11px;color:#007aff;margin-top:25px}@media(max-width:580px){.app-header{height:56px;padding:0 16px}.brand{gap:8px}.brand strong{font-size:17px}.brand span{display:none}.header-actions{gap:10px}.source-switch button{padding:6px 10px;font-size:10px}.map-stage{height:calc(100dvh - 56px);min-height:650px}.map-tools{right:15px;top:16px;padding:4px;gap:2px}.map-tools .icon-button{width:30px;height:30px}.map-tools svg{height:17px;width:17px}.timeline{width:calc(100% - 30px);bottom:24px;gap:13px;padding:16px 15px;border-radius:12px}.timeline-heading{gap:6px;font-size:9px}.timeline-heading strong{font-size:10px}#timeline-tag{font-size:7px}.timeline-ticks,.timeline-ticks button{font-size:8px}.city-label{font-size:8px;padding:2px 4px;gap:3px}.city-label strong{font-size:8px;padding-left:3px}dialog{padding:22px}.dialog-heading h2{font-size:19px}}@media(pointer:coarse){.source-switch button{min-height:36px}.icon-button{min-width:38px;min-height:38px}.timeline input{height:24px}.timeline-ticks button{padding-top:6px;padding-bottom:6px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.source-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-bottom:12px;border-bottom:1px solid #edf0f3;font-size:11px;line-height:1.6;color:#85909b}.source-meta .icon-button{flex-shrink:0}.timeline-range{position:relative}.now-mark{position:absolute;left:50%;top:50%;height:9px;width:1px;transform:translate(-50%,-50%);background:#6896cd;pointer-events:none;z-index:1}.timeline-ticks>span:last-child{text-align:right}.timeline-note{font-size:9px;color:#98a3ae;line-height:1.5;margin-top:8px;text-align:center}.playback-controls{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0}.speed-status{font-size:9px;line-height:12px;color:#8795a3;font-variant-numeric:tabular-nums}.speed-options{display:flex;gap:4px}.speed-options button{min-width:28px;height:24px;padding:0 5px;border-radius:6px;background:#f0f3f7;color:#7a8795;font-size:10px;font-weight:550;line-height:1}.speed-options button:hover{background:#e6eef9;color:#007aff}.speed-options button[aria-pressed=true]{background:#e5f0ff;color:#007aff;box-shadow:inset 0 0 0 1px #007aff24}@media(pointer:coarse){.speed-options button{min-width:32px;height:32px}}@media(max-width:380px){.timeline-heading{flex-wrap:wrap;gap:4px}.timeline-heading>span:first-child{flex-basis:100%}.timeline-heading strong{margin-left:0}#timeline-tag{margin-left:auto}.timeline-ticks{gap:3px}.timeline-ticks button{padding-inline:3px}.timeline-note{font-size:8px}}.timeline-heading{gap:8px}.timeline-collapse{display:grid;place-items:center;flex-shrink:0;width:24px;height:24px;padding:0;border-radius:6px;color:#8d99a5}.timeline-collapse svg{width:15px;height:15px}.timeline-collapse:hover{background:#edf3fa;color:#007aff}.compact-timeline{position:fixed;z-index:8;bottom:0;left:0;width:100%;height:20px;padding:0;cursor:pointer;background:transparent}.compact-track{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#dce4ed;overflow:hidden;transition:height .15s ease}.compact-progress{display:block;width:100%;height:100%;background:#007aff;transform:scaleX(0);transform-origin:left center}.compact-timeline:hover .compact-track,.compact-timeline:focus-visible .compact-track{height:5px}.compact-timeline:focus-visible{outline-offset:-3px}@media(pointer:coarse){.compact-timeline{height:32px}.timeline-collapse{width:32px;height:32px}}@media(max-width:580px){.timeline-heading{flex-wrap:wrap;gap:4px}.timeline-heading>span:first-child{flex-basis:100%}.timeline-heading strong{margin-left:0}#timeline-tag{margin-left:auto}.brand strong{letter-spacing:0}}@media(prefers-reduced-motion:reduce){.compact-track{transition:none}}