:root{--bg:#06162c;--panel:#0b2848;--panel-light:#103557;--line:#276081;--text:#eff9ff;--muted:#9ebad0;--cyan:#60d9f3;--amber:#ffca75;--radius:16px;font-family:'Microsoft YaHei','PingFang SC',sans-serif;color:var(--text);color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#163e69 0,#0a2340 42%,var(--bg) 85%);min-height:100vh}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;border:1px solid var(--line);border-radius:10px;background:#103654;min-height:48px;padding:10px 18px;transition:background .18s,border-color .18s,box-shadow .18s}button:hover{background:#194b6b;border-color:var(--cyan)}button:focus-visible{outline:3px solid var(--amber);outline-offset:3px}button:disabled{opacity:.45;cursor:default}button.active,button[aria-pressed=true]:not(.quiet){color:#102b42;background:var(--amber);border-color:#ffe0a8;box-shadow:0 0 20px #ffbc5022;font-weight:700}h1,h2,h3,p{margin:0}h2{font-size:21px}h3{font-size:20px}p{line-height:1.65}.app{height:100dvh;min-height:650px;display:grid;grid-template-rows:86px minmax(0,1fr) 104px;padding:0 22px 14px;gap:14px;max-width:2560px;margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2d638477;gap:16px}.brand{display:flex;align-items:center;gap:16px}.brand-mark{font-size:12px;font-weight:700;line-height:1.6;border:1px solid #56cde899;border-radius:8px;padding:7px 10px;color:var(--cyan);letter-spacing:2px}.brand h1{font-size:clamp(25px,2.1vw,40px);letter-spacing:2px;font-weight:800}.brand p{font-size:12px;letter-spacing:3px;color:var(--muted);margin-top:4px}.utilities{display:flex;gap:10px;align-items:center}.offline{font-size:13px;color:var(--muted);margin-right:12px;white-space:nowrap}.offline i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#82d6b1;margin-right:5px}.utilities button{min-width:86px}.workspace{display:grid;grid-template-columns:210px minmax(0,1fr) 350px;gap:14px;min-height:0}.panel{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(150deg,#103657e6,#071e38f2);box-shadow:0 8px 32px #0002;min-width:0;min-height:0}.controls,.feedback{padding:18px 16px;overflow:auto;scrollbar-width:thin;scrollbar-color:#407390 transparent}.section-heading{display:flex;align-items:center;gap:10px;padding-bottom:17px;margin-bottom:16px;border-bottom:1px solid #32608066}.section-heading>span:first-child{font-size:13px;color:var(--cyan);letter-spacing:1px}.section-heading h2{font-size:19px}.signal{display:inline-block;width:9px;height:9px;background:var(--cyan);box-shadow:0 0 10px #60d9f355;border-radius:2px}.eyebrow{color:var(--cyan);font-size:11px;letter-spacing:2px;font-weight:700}.intro{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:18px}.stack{display:flex;flex-direction:column;gap:10px}.choice{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 12px;text-align:left;font-size:17px}.choice .swatch{width:18px;height:24px;flex-shrink:0;border-radius:4px;border:1px solid #ffffff80;background:var(--swatch)}.choice .check{margin-left:auto;font-size:15px}.subhead{color:var(--muted);font-size:12px;letter-spacing:1px;margin:20px 0 10px}.split{display:flex;gap:8px}.split button{flex:1;padding:10px}.primary{background:#175571;border-color:#529ab6;font-weight:700}.wide{width:100%}.note{padding:12px;border-left:2px solid #68c7e477;background:#153a5266;color:var(--muted);font-size:12px;line-height:1.75;margin-top:20px}.map-panel{display:flex;flex-direction:column;overflow:hidden;background:#0a2440}.map-header{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:17px 20px;border-bottom:1px solid #285879}.map-header h2{font-size:24px;letter-spacing:1px;margin-top:3px}.quiet{background:transparent;color:#b8d9e8;font-size:13px;min-height:44px}.map-viewport{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:14px;background:linear-gradient(#0c2a45bb,#071b30bb);overflow:hidden}.map-stage{position:relative;flex:none;box-shadow:0 0 0 1px #66cfe955,0 8px 32px #0005;background:white;line-height:0}.map-stage>img{display:block;width:100%;height:100%;object-fit:contain}.map-stage #highlight{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.68;mix-blend-mode:screen}.map-stage #highlight[hidden]{display:none}.map-stage.selected>#mapImage{filter:brightness(.84)}#mapOverlay{position:absolute;inset:0;pointer-events:none}.map-footer{padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:#afcadb;border-top:1px solid #285879;min-height:44px}.source-tag{color:#78bdd4;white-space:nowrap;font-size:11px}.season-frame{position:absolute;top:3%;height:85%;width:46.2%;border:3px solid #ecad47;outline:2px solid #2a5b73;pointer-events:none;box-shadow:0 0 18px #eeab4544}.season-frame.summer{left:52%}.season-frame.winter{left:1.9%}.season-frame.playing{animation:seasonFocus 2.3s ease-in-out infinite}.season-label{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:13px;line-height:1.4;padding:6px 12px;color:#122b40;background:var(--amber);border-radius:5px;white-space:nowrap}.map-city{position:absolute;transform:translate(-50%,-50%);border:0;border-radius:50%;min-height:44px;width:44px;height:44px;padding:0;background:transparent;pointer-events:auto;display:grid;place-items:center;color:#08263f}.map-city:before{content:'';width:13px;height:13px;border:2px solid #165470;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #55d1f744}.map-city:hover{background:#4fc0e72a}.map-city[aria-pressed=true]{background:transparent!important;box-shadow:none!important}.map-city[aria-pressed=true]:before{background:var(--amber);border-color:#9b5e00;box-shadow:0 0 0 5px #ffbc5077}.map-city .city-tooltip{display:none;position:absolute;bottom:40px;left:50%;transform:translateX(-50%);background:#072b49;color:white;padding:6px 10px;font-size:13px;border-radius:5px;white-space:nowrap;line-height:1.4;box-shadow:0 2px 7px #0005}.map-city:hover .city-tooltip,.map-city:focus-visible .city-tooltip{display:block}.map-city.selected .city-order{position:absolute;top:1px;right:0;background:#ffce79;border-radius:50%;width:18px;height:18px;display:grid;place-items:center;line-height:1;font-size:11px;font-weight:700}.wind-card{background:#0b2e4d;border:1px solid #367495;border-radius:12px;padding:16px;margin-bottom:14px}.wind-card h3{color:var(--amber);margin-bottom:12px}.facts{display:grid;grid-template-columns:48px 1fr;gap:10px 12px;font-size:15px;line-height:1.6}.facts dt{color:var(--muted)}.facts dd{margin:0}.info-title{border-bottom:3px solid var(--swatch);padding:8px 0 17px;margin-bottom:16px;font-size:27px;color:#fff}.fact-block{margin-bottom:17px;padding:13px 14px;border:1px solid #33658066;background:#123b5466;border-radius:9px}.fact-block h3{font-size:12px;color:var(--cyan);margin-bottom:7px;letter-spacing:1px}.fact-block p{font-size:17px}.task{border:1px solid #4e87a577;border-radius:12px;padding:15px;background:#071f38;margin-top:17px}.task h3{font-size:14px;color:var(--amber);margin-bottom:9px}.task p{font-size:15px;margin-bottom:12px}.answer{margin-top:13px;padding:12px;color:#c2efdb;background:#17524055;border-left:3px solid #7bd4b1;border-radius:4px;font-size:14px;line-height:1.65}.answer.wrong{color:#ffdda7;background:#65441e44;border-color:#ffca75}.quiz-answers{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quiz-answers button{font-size:13px;padding:8px 6px;min-height:44px}.mode-nav{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 30px;background:linear-gradient(180deg,#0e3651bb,#071b31);border:1px solid #2b6284;border-radius:18px;width:min(1120px,100%);justify-self:center;box-shadow:0 -5px 40px #42c8e60b}.mode-nav button{flex:1;display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;text-align:left;align-items:center;column-gap:12px;min-height:73px;border-radius:12px;background:linear-gradient(135deg,#164973,#0a2a46);padding:12px 18px}.mode-nav button>span{grid-row:1/3;color:#7bccdf;font-size:15px}.mode-nav strong{font-size:20px;white-space:nowrap}.mode-nav small{font-size:11px;letter-spacing:1px;color:var(--muted);margin-top:4px}.mode-nav button.active{background:linear-gradient(135deg,#ffdc95,#eab252);color:#132d43}.mode-nav button.active span,.mode-nav button.active small{color:#415a62}.selection-count{display:flex;justify-content:space-between;font-size:14px;align-items:center;color:var(--muted);margin-bottom:12px}.selection-count strong{font-size:22px;color:var(--amber)}.city-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}.city-list button{font-size:13px;padding:8px 4px;min-height:44px}.legend-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}.legend-list button{display:flex;align-items:center;gap:8px;min-height:39px;padding:7px 8px;font-size:12px;text-align:left}.legend-list i{width:11px;height:17px;background:var(--swatch);border-radius:2px;flex-shrink:0}.compare-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:12px;color:var(--muted)}.compare-toolbar button{min-height:40px;font-size:12px;padding:8px 10px}.charts{display:grid;grid-template-columns:1fr;gap:12px}.chart-card{border:1px solid #477693;border-radius:10px;overflow:hidden;background:#0b2b47;min-width:0}.chart-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:10px 10px 4px}.chart-heading h3{font-size:18px;color:var(--amber)}.remove-city{min-height:32px;width:32px;padding:0;font-size:18px;border:0;background:transparent;border-radius:6px}.chart-type{font-size:11px;color:#b7d2e1;padding:0 10px 8px}.chart-open{background:#fff;border-radius:0;border:0;padding:0;line-height:0;width:100%;min-height:0;display:block}.chart-open:hover{background:#fff}.chart-open img{display:block;width:100%;height:auto;object-fit:contain}.chart-caption{font-size:10px;color:var(--muted);padding:5px 9px}.charts.multi{grid-template-columns:1fr 1fr;gap:9px}.charts.multi .chart-heading{padding:6px 7px 2px}.charts.multi .chart-heading h3{font-size:16px}.charts.multi .chart-type{font-size:10px;padding:0 7px 6px;white-space:normal}.charts.multi .chart-caption{font-size:10px}.comparison-answer{margin-top:10px;display:grid;gap:8px}.comparison-answer p{font-size:13px}.empty-state{border:1px dashed #428ba9;border-radius:12px;padding:28px 18px;text-align:center;color:var(--muted);min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.empty-state strong{color:var(--text);font-size:22px}.empty-state .empty-count{font-size:45px;color:var(--cyan);font-weight:300}.feedback.climate-feedback .section-heading{margin-bottom:10px;padding-bottom:12px}.feedback.climate-feedback .task{margin-top:12px;padding:12px}.feedback.climate-feedback .task p{font-size:13px;margin-bottom:10px}.toast{position:fixed;left:50%;bottom:130px;transform:translateX(-50%) translateY(15px);background:#ffe0a3;color:#14324b;padding:13px 24px;font-size:16px;border-radius:10px;box-shadow:0 7px 30px #0006;opacity:0;pointer-events:none;transition:.2s;z-index:10}.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}dialog{border:1px solid #5dabcb;background:#09223b;color:white;border-radius:16px;padding:20px;width:min(1200px,94vw);height:92dvh;max-height:none;overflow:hidden}dialog::backdrop{background:#020c1cdd;backdrop-filter:blur(4px)}dialog[open]{display:flex;flex-direction:column;gap:12px}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-header h2{font-size:22px}#dialogImage{display:block;flex:1;min-height:0;width:100%;object-fit:contain}#dialogCaption{text-align:center;color:var(--muted);font-size:12px}.show-original #highlight,.show-original #mapOverlay{visibility:hidden}.show-original #mapImage{filter:none!important}.workspace.climate-layout{grid-template-columns:190px minmax(0,1fr) 420px}@keyframes seasonFocus{0%,100%{box-shadow:0 0 10px #eeb14d44;border-color:#dda34c}50%{box-shadow:0 0 25px #ffc85877;border-color:#ffdc8f}}@media(min-width:1800px){.workspace{grid-template-columns:245px minmax(0,1fr) 400px;gap:20px}.workspace.climate-layout{grid-template-columns:230px minmax(0,1fr) 460px}.app{padding:0 28px 18px;grid-template-rows:100px minmax(0,1fr) 110px;gap:18px}.controls,.feedback{padding:22px}.section-heading h2{font-size:23px}.intro{font-size:16px}.choice{min-height:65px;font-size:20px}.wind-card{padding:20px}.facts{font-size:18px}.mode-nav{width:1250px}.mode-nav strong{font-size:23px}.city-list button{font-size:15px;min-height:48px}.legend-list button{min-height:44px;font-size:14px}.task p{font-size:17px}}
@media(max-width:1279px){.app{padding:0 12px 12px;gap:10px;grid-template-rows:76px minmax(0,1fr) 88px}.workspace{grid-template-columns:170px minmax(0,1fr) 290px;gap:10px}.workspace.climate-layout{grid-template-columns:160px minmax(0,1fr) 330px}.controls,.feedback{padding:13px 11px}.section-heading h2{font-size:16px}.choice{font-size:14px;min-height:48px}.map-header{padding:12px}.map-header h2{font-size:21px}.mode-nav{gap:9px;padding:8px 12px}.mode-nav strong{font-size:17px}.mode-nav button{padding:10px 12px;column-gap:7px;min-height:64px}.brand p{letter-spacing:1px}.offline{display:none}.map-footer{font-size:11px;padding:10px}.facts{font-size:14px}}
@media(max-width:980px){.app{height:auto;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:110px}.topbar{min-height:80px}.brand h1{font-size:23px}.brand-mark,.brand p{display:none}.utilities button{min-width:60px;padding:8px}.workspace,.workspace.climate-layout{grid-template-columns:180px minmax(0,1fr);grid-template-rows:560px auto}.feedback{grid-column:1/-1;overflow:visible}.feedback .charts{grid-template-columns:1fr 1fr}.map-panel{min-height:500px}.mode-nav{position:fixed;bottom:10px;left:10px;right:10px;width:calc(100% - 20px);z-index:5}.mode-nav strong{font-size:15px}.mode-nav button{padding:8px;grid-template-columns:1fr;text-align:center}.mode-nav button>span,.mode-nav small{display:none}.mode-nav button{min-height:58px}.toast{bottom:100px}}
@media(max-width:620px){.app{padding:0 8px 100px}.topbar{gap:6px}.brand h1{font-size:18px;letter-spacing:0}.utilities{gap:5px}.utilities button{font-size:12px;min-width:44px;min-height:44px;padding:6px}.workspace,.workspace.climate-layout{display:flex;flex-direction:column}.controls{max-height:none}.controls .stack{display:grid;grid-template-columns:1fr 1fr}.controls .note{display:none}.map-panel{height:480px;min-height:480px}.map-footer .source-tag{display:none}.mode-nav strong{font-size:12px}.mode-nav{gap:5px;padding:7px}.feedback .charts{grid-template-columns:1fr}.feedback .charts.multi{grid-template-columns:1fr 1fr}.chart-caption{font-size:10px}.city-list{grid-template-columns:repeat(4,1fr)}.legend-list{display:grid;grid-template-columns:1fr 1fr}.intro{margin-bottom:10px}.section-heading{margin-bottom:10px;padding-bottom:10px}.map-header h2{font-size:20px}}
.charts:not(.multi) .chart-open img{max-height:clamp(110px,calc((100dvh - 730px)/2),180px)}.charts:not(.multi) .chart-heading{padding:5px 10px 0}.charts:not(.multi) .chart-type{padding-bottom:6px}.charts:not(.multi) .chart-caption{padding:4px 9px}.remove-city{min-height:44px;width:44px}.chart-heading{padding-top:3px!important;padding-bottom:0!important}.charts.multi .remove-city{min-height:44px;width:36px}.map-stage #highlight.wind-highlight{animation:windPulse 2s ease-in-out infinite}.map-stage #highlight:not(.wind-highlight){animation:highlightIn .25s ease-out}@keyframes windPulse{0%,100%{opacity:.05}50%{opacity:.85}}@keyframes highlightIn{from{opacity:0}to{opacity:.68}}
.legend-list button,.compare-toolbar button{min-height:44px}.charts.multi .remove-city{width:44px}.feedback.climate-feedback{display:flex;flex-direction:column;overflow:hidden}.climate-feedback>#feedback{display:flex;flex-direction:column;flex:1;min-height:0}.climate-feedback .section-heading,.climate-feedback .compare-toolbar,.climate-feedback .task,.climate-feedback>#feedback>.answer{flex:none}.climate-feedback .charts{flex:1;min-height:0;grid-template-rows:repeat(2,minmax(0,1fr))}.climate-feedback .charts:has(.chart-card:only-child){grid-template-rows:minmax(0,1fr)}.climate-feedback .chart-card{display:flex;flex-direction:column}.climate-feedback .chart-heading,.climate-feedback .chart-type,.climate-feedback .chart-caption{flex:none}.climate-feedback .chart-open{flex:1;min-height:0;overflow:hidden}.climate-feedback .chart-open img{height:100%;max-height:none!important}.climate-feedback .empty-state{flex:1;min-height:0}.climate-feedback .comparison-answer{max-height:155px;overflow:auto;scrollbar-width:thin}.climate-feedback .comparison-answer .answer{margin-top:0}.climate-feedback .task p{line-height:1.5}.climate-feedback .task{padding:10px}.climate-feedback .task h3{margin-bottom:6px}
@media(max-width:980px){.feedback.climate-feedback{display:block;overflow:visible}.climate-feedback>#feedback{display:block}.climate-feedback .charts{grid-template-rows:none}.climate-feedback .chart-open{flex:none}.climate-feedback .chart-open img{height:auto}.charts:not(.multi) .chart-open img{max-height:none}.climate-feedback .comparison-answer{max-height:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}