:root{--navy: #2c3a5c;--navy-soft: #7b8aa5;--accent: #4a90e2;--card-bg: rgba(255, 255, 255, .84);--card-border: rgba(255, 255, 255, .8);--card-shadow: 0 10px 36px rgba(63, 102, 168, .16), 0 2px 8px rgba(63, 102, 168, .08);--radius: 18px;--font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif}*{margin:0;padding:0;box-sizing:border-box}.hidden{display:none!important}html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font);color:var(--navy);background:linear-gradient(180deg,#a8d8ff,#e8f4ff 55%,#fff3de)}#app,#app canvas{position:fixed;top:0;right:0;bottom:0;left:0;display:block}#ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}#ui>*{pointer-events:auto}.card{background:var(--card-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--card-shadow)}#hud{position:absolute;top:18px;left:18px;padding:14px 20px;display:flex;align-items:center;gap:14px;animation:dropIn .7s cubic-bezier(.2,.9,.3,1.2) both}#hud .logo{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#ffd76e,#ffab4a);display:grid;place-items:center;box-shadow:inset 0 -3px #b4641440,0 4px 10px #ffab4a59;font-size:24px}#hud h1{font-size:19px;font-weight:800;letter-spacing:.5px}#hud .sub{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:12.5px;color:var(--navy-soft)}#hud .sub .live{display:inline-flex;align-items:center;gap:4px;color:#16a34a;font-weight:600}#hud .sub .live:before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite}#hud .sub .demo-badge{color:#d97706;font-weight:600}#hud .sub .hint{color:#4a90e2;font-weight:500}#hud .clock{font-variant-numeric:tabular-nums}#topbar{position:absolute;top:18px;right:18px;display:flex;gap:10px;animation:dropIn .7s .1s cubic-bezier(.2,.9,.3,1.2) both}.seg{display:flex;padding:4px;gap:2px;border-radius:14px}.seg button{border:none;background:transparent;cursor:pointer;padding:7px 16px;border-radius:10px;font:600 13.5px var(--font);color:var(--navy-soft);transition:all .25s}.seg button.active{background:var(--navy);color:#fff;box-shadow:0 3px 8px #2c3a5c59}.icon-btn{width:42px;height:42px;border-radius:14px;border:1px solid var(--card-border);cursor:pointer;background:var(--card-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:grid;place-items:center;box-shadow:var(--card-shadow);color:var(--navy-soft);transition:all .25s}.icon-btn:hover{color:var(--navy);transform:translateY(-1px)}.icon-btn.active{background:var(--navy);color:#fff}.icon-btn svg{width:19px;height:19px}.icon-btn.spin svg{animation:rotate .9s linear}#timeline{position:absolute;left:50%;bottom:20px;transform:translate(-50%);display:flex;align-items:center;gap:14px;padding:12px 18px;min-width:min(620px,calc(100vw - 36px));animation:riseIn .7s .15s cubic-bezier(.2,.9,.3,1.2) both}#timeline .tl-time{min-width:96px;text-align:center}#timeline .tl-time .big{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}#timeline .tl-time .tag{font-size:11px;color:var(--navy-soft);margin-top:1px}#timeline .tl-slider{flex:1;position:relative;padding:4px 2px 18px}#timeline input[type=range]{width:100%;-moz-appearance:none;appearance:none;-webkit-appearance:none;height:8px;border-radius:4px;background:linear-gradient(90deg,#4a90e2 var(--fill, 0%),#e2e9f4 var(--fill, 0%));outline:none;cursor:pointer}#timeline input[type=range]::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 2px 8px #4a90e273;transition:transform .15s}#timeline input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}#timeline .ticks{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font-size:10.5px;color:var(--navy-soft);font-variant-numeric:tabular-nums}.play-btn{width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,#ffd76e,#ffab4a);color:#fff;display:grid;place-items:center;box-shadow:0 5px 14px #ffab4a80,inset 0 -3px #b4641440;transition:transform .2s}.play-btn:hover{transform:scale(1.06)}.play-btn svg{width:20px;height:20px}.now-btn{border:none;cursor:pointer;border-radius:10px;padding:8px 12px;font:700 12.5px var(--font);background:#eef4fb;color:var(--accent);transition:all .2s;white-space:nowrap}.now-btn:hover{background:#dfeaf8}.now-btn.hidden{display:none}#legend{position:absolute;left:18px;bottom:20px;padding:12px 16px;animation:riseIn .7s .25s cubic-bezier(.2,.9,.3,1.2) both}#legend h3{font-size:12px;color:var(--navy-soft);font-weight:600;margin-bottom:8px;letter-spacing:1px}#legend .chips{display:flex;flex-direction:column;gap:5px}#legend .chip{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500}#legend .chip i{width:13px;height:13px;border-radius:4.5px;border:2px solid rgba(255,255,255,.9);box-shadow:0 1px 3px #2c3a5c40}#legend .temp-bar{width:168px;height:10px;border-radius:5px;background:linear-gradient(90deg,#5e8fe0,#54c0e8,#7bd97f,#ffd75e,#ffa94f,#f76f6f);margin:4px 0 6px}#legend .temp-ends{display:flex;justify-content:space-between;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}#card{position:absolute;top:84px;right:18px;width:340px;max-height:calc(100vh - 220px);padding:20px 22px 18px;overflow-y:auto;transform:translate(120%);transition:transform .45s cubic-bezier(.2,.9,.3,1.1)}#card.open{transform:translate(0)}#card .card-head{display:flex;align-items:flex-start;justify-content:space-between}#card h2{font-size:22px;font-weight:800}#card .adcode{font-size:11.5px;color:var(--navy-soft);margin-top:2px}#card .close{border:none;background:#eef4fb;color:var(--navy-soft);width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:15px;line-height:1;transition:all .2s}#card .close:hover{background:#dfeaf8;color:var(--navy)}#card .now{display:flex;align-items:center;gap:14px;margin:14px 0 4px}#card .now .temp{font-size:52px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(135deg,#4a90e2,#6fb4de);-webkit-background-clip:text;background-clip:text;color:transparent}#card .now .meta{flex:1}#card .now .wname{font-size:16px;font-weight:700}#card .now .tl-tag{font-size:12px;color:var(--navy-soft);margin-top:2px}#card .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}#card .stat{background:#f2f6fc;border-radius:12px;padding:9px 12px}#card .stat .k{font-size:11px;color:var(--navy-soft)}#card .stat .v{font-size:15.5px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}#card .chart-title{font-size:12px;color:var(--navy-soft);font-weight:600;margin:4px 0 6px;letter-spacing:1px}#card svg.chart{display:block;width:100%;height:auto;cursor:pointer}#card svg.chart text{font-family:var(--font)}#toast{position:absolute;left:50%;top:78px;transform:translate(-50%) translateY(-16px);padding:10px 18px;border-radius:13px;background:var(--navy);color:#fff;font-size:13px;font-weight:500;opacity:0;transition:all .35s;pointer-events:none;box-shadow:0 8px 24px #2c3a5c59}#toast.show{opacity:1;transform:translate(-50%) translateY(0)}#loading{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-items:center;background:linear-gradient(180deg,#a8d8ff,#e8f4ff 55%,#fff3de);transition:opacity .7s,visibility .7s}#loading.hide{opacity:0;visibility:hidden}#loading .inner{text-align:center}#loading .art{position:relative;width:130px;height:130px;margin:0 auto 22px}#loading .sun{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#ffe08a,#ffb43e);box-shadow:0 0 44px #ffbe50cc;animation:sunPulse 3s ease-in-out infinite}#loading .cloud{position:absolute;left:50%;top:58%;width:100px;height:36px;border-radius:20px;background:#fff;box-shadow:0 8px 20px #5a82be40;animation:cloudDrift 3.4s ease-in-out infinite}#loading .cloud:before,#loading .cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}#loading .cloud:before{width:42px;height:42px;left:14px;top:-20px}#loading .cloud:after{width:32px;height:32px;right:16px;top:-14px}#loading h2{font-size:21px;font-weight:800;color:var(--navy);letter-spacing:2px}#loading p{margin-top:8px;font-size:13px;color:var(--navy-soft)}#loading .dots:after{content:"";animation:dots 1.4s steps(4) infinite}#label-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:5}#leader-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:4}.pill{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;padding:5px 12px 5px 9px;border-radius:999px;background:linear-gradient(180deg,#fff,#f4f7fb);border:2px solid rgba(58,74,107,.2);box-shadow:0 3px 10px #3a4a6b38;font-size:14px;font-weight:700;color:#3d4c6e;white-space:nowrap;opacity:0;pointer-events:auto;cursor:pointer;will-change:transform,opacity;transform-origin:center bottom;transition:background .3s,border-color .3s,box-shadow .3s}.pill:hover{background:linear-gradient(180deg,#fff,#eaf3fd);box-shadow:0 6px 16px #3a4a6b4d}.pill .emoji{font-size:15px;line-height:1}.pill .temp{font-size:15px;font-weight:800;margin-left:2px}.pill .wname{color:#7b8aa5;font-weight:600;font-size:12.5px;margin-left:1px}.pill.dim{opacity:.88}.pill.sel{background:linear-gradient(180deg,#fff,#eef6ff);border-color:var(--pill-accent, #4a90e2);box-shadow:0 6px 18px #4a90e259}@keyframes dropIn{0%{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}@keyframes riseIn{0%{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%)}}@keyframes legendIn{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}#topbar,#card,#toast{animation:none!important}#legend{animation-name:legendIn}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes sunPulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes cloudDrift{0%,to{transform:translate(-46%)}50%{transform:translate(-54%)}}@keyframes dots{25%{content:"."}50%{content:".."}75%{content:"..."}}@media (max-width: 860px){#hud{padding:10px 14px;gap:10px}#hud h1{font-size:15px}#hud .logo{width:38px;height:38px;font-size:19px;border-radius:11px}#legend{display:none}#timeline{min-width:calc(100vw - 28px);bottom:14px;gap:10px;padding:10px 14px}#timeline .tl-time .big{font-size:15px}#card{top:auto;bottom:86px;right:14px;left:14px;width:auto;max-height:46vh}#topbar{top:76px;right:14px;flex-direction:column;align-items:flex-end}}