/* --hl-* (headline gradient) and --acc-* (hero stat numbers) are per-theme:
   the bright dark-theme values drop to ~1.3:1 on the light background. */
:root{
  --bg0:#0a0713;--bg1:#12091f;--ink:#f4eefb;--ink-2:#b3a6cc;--ink-3:#8072a0;
  --map-ink:#f4eefb;--map-halo:#0a0713;
  --glass:rgba(255,255,255,.06);--glass-line:rgba(255,255,255,.13);--shadow:0 18px 40px rgba(0,0,0,.45);
  --hl-hot:#ff7a5c;--hl-warm:#ffd166;--hl-cool:#8ab4ff;--acc-hot:#ff6b3d;--acc-cold:#3fa8e8;--link:#d4593f;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans SC",Roboto,sans-serif;
  --num:"SF Pro Display",-apple-system,"Segoe UI",sans-serif;
}
:root{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
@media (prefers-color-scheme:light){:root:not([data-theme]){color-scheme:light}}
:root[data-theme="light"]{--bg0:#f2f1f8;--bg1:#e6e7f3;--ink:#1a1330;--ink-2:#4e4568;--ink-3:#7a7192;--glass:rgba(255,255,255,.66);--glass-line:rgba(28,18,58,.10);--shadow:0 14px 34px rgba(40,28,80,.12);--hl-hot:#d93a20;--hl-warm:#b45309;--hl-cool:#4f46e5;--acc-hot:#c2410c;--acc-cold:#2563eb;--link:#b8432a;}
@media (prefers-color-scheme:light){:root:not([data-theme]){--bg0:#f2f1f8;--bg1:#e6e7f3;--ink:#1a1330;--ink-2:#4e4568;--ink-3:#7a7192;--glass:rgba(255,255,255,.66);--glass-line:rgba(28,18,58,.10);--shadow:0 14px 34px rgba(40,28,80,.12);--hl-hot:#d93a20;--hl-warm:#b45309;--hl-cool:#4f46e5;--acc-hot:#c2410c;--acc-cold:#2563eb;--link:#b8432a;}}
:root[data-theme="dark"]{--bg0:#0a0713;--bg1:#12091f;--ink:#f4eefb;--ink-2:#b3a6cc;--ink-3:#8072a0;--glass:rgba(255,255,255,.06);--glass-line:rgba(255,255,255,.13);--shadow:0 18px 40px rgba(0,0,0,.45);--hl-hot:#ff7a5c;--hl-warm:#ffd166;--hl-cool:#8ab4ff;--acc-hot:#ff6b3d;--acc-cold:#3fa8e8;--link:#d4593f;}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg0);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--acc-hot);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
.aurora{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(60% 55% at 82% 6%,rgba(255,86,64,.30),transparent 60%),
  radial-gradient(55% 50% at 10% 18%,rgba(120,72,255,.26),transparent 62%),
  radial-gradient(70% 60% at 50% 106%,rgba(0,180,220,.20),transparent 60%),
  linear-gradient(180deg,var(--bg0),var(--bg1))}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}

.top{position:sticky;top:0;z-index:40;backdrop-filter:blur(16px);background:color-mix(in srgb,var(--bg0) 76%,transparent);border-bottom:1px solid var(--glass-line)}
.top .wrap{display:flex;align-items:center;gap:10px;height:58px;max-width:1180px}
.logo{font-weight:800;letter-spacing:-.02em;font-size:17px;display:flex;align-items:center;gap:8px}
.logo .orb{width:19px;height:19px;border-radius:50%;background:conic-gradient(from 200deg,#00b4dc,#7848ff,#ff5640,#ffb020,#00b4dc);box-shadow:0 0 18px rgba(255,86,64,.4)}
.tools{margin-left:auto;display:flex;gap:8px}
.tbtn{height:36px;min-width:36px;padding:0 12px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);cursor:pointer;font-size:12.5px;font-weight:700;font-family:var(--font);display:inline-flex;align-items:center}
/* Country switcher. The <summary> is styled as a .tbtn so it matches the EN and
   theme buttons beside it; list-style:none plus the ::-webkit-details-marker
   reset drops the disclosure triangle every browser adds by default. */
.cmenu{position:relative}
.cmenu>summary{gap:5px;list-style:none;user-select:none}
.cmenu>summary::-webkit-details-marker{display:none}
.cmenu>summary::marker{content:''}
.cmenu>summary:hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.cflag{font-size:14px;line-height:1}
.ccar{width:13px;height:13px;color:var(--ink-3);transition:transform .15s ease}
.cmenu[open] .ccar{transform:rotate(180deg)}
/* Same surface as the search results popover so the two read as one system. */
.cpop{position:absolute;top:42px;right:0;min-width:150px;background:var(--bg1);border:1px solid var(--glass-line);border-radius:12px;box-shadow:var(--shadow);padding:5px;z-index:70}
.cpop a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.cpop a:hover{background:color-mix(in srgb,var(--ink) 9%,transparent)}
/* The current country stays listed rather than being hidden, so the menu always
   shows the full set and where you are within it. */
.cpop a[aria-current]{color:var(--ink-3);font-weight:700}
.cpop a[aria-current]::after{content:'✓';margin-left:auto;font-size:11px}
/* Lives in CSS, not HOME_CSS: the homepage is the tightest case because of its
   search box, but province and city pages carry the same three buttons and need
   the switcher to shrink there too. Flag + caret only; the country name is still
   in the open menu and in the summary's title. */
@media(max-width:520px){
  .cmenu>summary .cnm{display:none}
  .cmenu>summary{padding:0 7px;gap:2px}
  .cpop{top:40px}
}

.crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);padding:16px 0 12px;flex-wrap:wrap}
.crumb a:hover{color:var(--ink)}
.crumb .sep{opacity:.5}
.crumb .cur{color:var(--ink)}

/* Province/city page header. Deliberately flat and ~56px tall: the gradient
   hero this replaced pushed the map below the fold. Temperature carries its own
   colour via heat() since there is no gradient behind it any more. */
.phead{display:flex;flex-direction:column;gap:3px}
.pht{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.phead h1{font-size:clamp(20px,3.4vw,26px);font-weight:800;letter-spacing:-.02em;margin:0}
.phead .ptemp{font-family:var(--num);font-size:clamp(19px,3.2vw,24px);font-weight:800;letter-spacing:-.02em}
.pmeta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.pmeta .pw{display:inline-flex;align-items:center;gap:5px}
.pmeta .pw .wx{width:18px;height:18px}
.pmeta .psep{color:var(--ink-3);font-style:normal}
.pmeta .phot{color:var(--ink-2);font-weight:700}
.pmeta .phot:hover{color:var(--ink)}
@media(max-width:520px){.pmeta{gap:6px;font-size:12px}}

.sect{margin:26px 0 0}
.sect h2{font-size:15px;font-weight:800;letter-spacing:.02em;margin:0 0 12px}
.sect h2 span{color:var(--ink-3);font-weight:600;font-size:13px;margin-left:8px}
.stat .v.sm{font-size:17px}
.stat .s{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.histrow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;margin-top:12px;align-items:center}
@media(max-width:640px){.histrow{grid-template-columns:1fr}}
.histtext p{margin:0;font-size:14px;line-height:1.7;color:var(--ink-2)}
.histspark{background:var(--glass);border:1px solid var(--glass-line);border-radius:15px;padding:10px 14px 8px;color:var(--acc-hot)}
.histspark .l{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-bottom:6px}
.spark{display:block;width:100%;height:60px}
.sparkax{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);font-family:var(--num)}
.histline{margin:0;font-size:14px;line-height:1.7;color:var(--ink-2)}
.factgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
.factgrid h3{font-size:13px;margin:0 0 6px;color:var(--ink-3);letter-spacing:.03em}
.facts{list-style:none;margin:0;padding:0}
.facts li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--glass-line);font-size:13.5px;color:var(--ink-2)}
.facts li b{color:var(--ink);font-family:var(--num);white-space:nowrap}
.revnav{display:flex;justify-content:space-between;gap:12px;margin-top:22px;font-size:13.5px}
.revnav a{color:var(--link)}
.article .stats{margin:14px 0 18px}
.holibar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 0;padding:10px 16px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);font-size:13.5px;transition:transform .15s,border-color .15s}
a.holibar:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.holibar b{font-weight:800}
.holibar .hl-ico{font-size:16px}
.holibar .hl-dates,.holibar .hl-when{color:var(--ink-2);font-variant-numeric:tabular-nums}
.holibar .hl-cta{margin-left:auto;color:var(--acc-hot);font-weight:700}
.holibar.still .hl-cta{color:var(--ink-3);font-weight:600}
@media(max-width:520px){.holibar{gap:8px;font-size:12.5px}.holibar .hl-cta{margin-left:0;flex-basis:100%}}
.faq details{border-bottom:1px solid var(--glass-line);padding:10px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:14.5px;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--ink-3);font-weight:400}
.faq details[open] summary::after{content:'−'}
.faq p{margin:8px 0 2px;font-size:14px;line-height:1.7;color:var(--ink-2)}
.lcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.lcard{background:var(--glass);border:1px solid var(--glass-line);border-radius:15px;padding:13px 15px}
.lcard .l{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.lcard .v{font-size:19px;font-weight:800;margin-top:4px}
.lcard p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.lcard p.n{color:var(--ink-3);font-size:12px}
.ltip{margin:12px 0 0;font-size:14px;line-height:1.7;color:var(--ink-2)}
.ltip b{color:var(--ink);margin-right:8px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stat{background:var(--glass);border:1px solid var(--glass-line);border-radius:15px;padding:13px 15px}
.stat .l{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.stat .v{font-family:var(--num);font-size:23px;font-weight:800;margin-top:4px}

.fc{display:grid;grid-template-columns:repeat(7,1fr);gap:9px}
@media(max-width:760px){.fc{grid-template-columns:repeat(4,1fr)}}
@media(max-width:460px){.fc{grid-template-columns:repeat(3,1fr)}}
.fcd{position:relative;overflow:hidden;border-radius:16px;padding:12px 10px 11px;color:#fff;text-align:center;border:1px solid rgba(255,255,255,.16);--sun:52px;min-height:132px;display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.fcd[href]:hover{transform:translateY(-2px);filter:saturate(1.08)}
.fcd[href]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.fcd.is-current{border-color:rgba(255,255,255,.94);box-shadow:0 0 0 2px rgba(255,255,255,.22),0 8px 18px rgba(0,0,0,.18)}
.fcd>*{position:relative;z-index:1}
.fcd .scene,.fcd .veil{position:absolute;inset:0;z-index:0}
.fcd .fw{font-size:11.5px;font-weight:800;opacity:.9}
.fcd .fdt{font-size:10.5px;opacity:.75;font-variant-numeric:tabular-nums}
.fcd .fi{margin:3px 0 1px}.fcd .fi .wx{width:26px;height:26px}
.fcd .fh{font-family:var(--num);font-size:21px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.fcd .fl{font-size:11.5px;opacity:.85;font-variant-numeric:tabular-nums}
.fcd .fpop{font-size:9.5px;opacity:.82;margin-top:auto}

.clist{border:1px solid var(--glass-line);border-radius:18px;overflow:hidden;background:var(--glass)}
.crow{display:grid;grid-template-columns:52px 1fr 96px 74px 78px;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--glass-line);transition:background .12s;color:var(--ink)}
.crow:last-child{border-bottom:none}
.crow:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.crow .cr{font-family:var(--num);font-size:13px;font-weight:800;color:var(--ink-3)}
.crow .cn{font-weight:700;font-size:14.5px;letter-spacing:-.01em}
.crow .cw{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.crow .cbar{height:6px;border-radius:4px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}
.crow .cbar i{display:block;height:100%;border-radius:4px}
.crow .ct{font-family:var(--num);font-size:19px;font-weight:800;text-align:right}
@media(max-width:640px){.crow{grid-template-columns:38px 1fr 68px}.crow .cw,.crow .cbar{display:none}}

.prose{color:var(--ink-2);font-size:14.5px;line-height:1.75;max-width:70ch}
.prose p{margin:0 0 10px}
.editorial{margin-top:34px;padding-top:6px;border-top:1px solid var(--glass-line)}
.editorial .sect h2{font-size:17px}
.brief{max-width:74ch}
.brief p{color:var(--ink-2);font-size:15px;line-height:1.8;margin:0 0 12px}
.brief-note,.edit-note{color:var(--ink-3);font-size:12px;margin:2px 0 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ecard{display:block;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);padding:14px 16px;color:var(--ink);text-decoration:none;transition:transform .15s}
.ecard:hover{transform:translateY(-2px)}
.ecard b{display:block;font-size:15px;font-weight:800;margin-bottom:4px}
.ecard .em{font-family:var(--num);font-weight:800;color:var(--ink);font-size:18px}
.ecard small{display:block;color:var(--ink-2);font-size:12.5px;line-height:1.55}
.ecard .go{display:block;margin-top:8px;color:var(--acc-hot);font-size:12.5px;font-weight:700}
.climate p{color:var(--ink-2);font-size:14.5px;line-height:1.8;max-width:74ch;margin:0 0 10px}
@media(max-width:520px){.cards{grid-template-columns:1fr 1fr}.ecard{padding:12px}}
.guide-card{border:1px solid var(--glass-line);border-radius:20px;background:var(--glass);padding:clamp(18px,3vw,28px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.guide-note{color:var(--ink-3);font-size:12.5px;margin:-6px 0 12px}
.guide-copy{max-width:76ch}
.guide-fragment{display:flow-root}
.guide-fragment:first-child h3:first-child{margin-top:0}
.guide-places{list-style:none;margin:12px 0 24px;padding:0;max-width:680px}
.place-card{border-bottom:1px solid var(--glass-line);padding:12px 0}
.place-card:last-child{border-bottom:0}
.place-head u{text-decoration:none;font-size:14.5px;font-weight:800;color:var(--ink)}
.place-card p{margin:4px 0 0!important;font-size:13.5px!important;line-height:1.55!important;color:var(--ink-2)}
.guide-copy>:last-child,.guide-copy>:last-child>li:last-child{margin-bottom:0}
.guide-copy h3{font-size:17px;line-height:1.35;margin:26px 0 10px;color:var(--ink)}
.guide-copy h3:first-child{margin-top:0}
.guide-copy p,.guide-copy li{color:var(--ink-2);font-size:15px;line-height:1.78}
.guide-copy p{margin:0 0 14px}
.guide-copy ul,.guide-copy ol{padding-left:22px;margin:0 0 16px}
.guide-copy li{margin:6px 0}
.guide-copy li>ul,.guide-copy li>ol{margin:8px 0 4px;padding-left:18px}
.guide-copy li>ul{list-style:none}
.guide-copy li>ul>li{position:relative}
.guide-copy li>ul>li::before{content:"";position:absolute;left:-13px;top:.72em;width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--ink) 28%,transparent)}
.guide-copy>ul>li{margin:14px 0}
.guide-copy>ul>li::marker{color:color-mix(in srgb,var(--ink) 45%,transparent)}
.guide-copy strong{color:var(--ink);font-weight:750}
.guide-copy code{background:color-mix(in srgb,var(--ink) 8%,transparent);padding:1px 5px;border-radius:5px}
.guide-copy hr{border:0;border-top:1px solid var(--glass-line);margin:24px 0}
/* static content pages (about / privacy / methodology …) */
.article{max-width:760px;margin:8px auto 0}
.article h1{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.02em;margin:6px 0 18px;color:var(--ink);text-wrap:balance}
.article h2{font-size:20px;font-weight:800;margin:30px 0 10px;color:var(--ink)}
.article h3{font-size:16px;font-weight:800;margin:20px 0 8px;color:var(--ink)}
.article p,.article li{color:var(--ink-2);font-size:15.5px;line-height:1.78}
.article p{margin:0 0 14px}
.article ul,.article ol{padding-left:22px;margin:0 0 14px}
.article li{margin:5px 0}
.article a{color:var(--link);font-weight:600}
.article strong{color:var(--ink);font-weight:700}
.article hr{border:none;border-top:1px solid var(--glass-line);margin:26px 0}
.article table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px;display:block;overflow-x:auto}
.article th,.article td{border:1px solid var(--glass-line);padding:8px 11px;text-align:left;color:var(--ink-2)}
.article th{color:var(--ink);font-weight:700}
.article code{background:var(--glass);padding:1px 5px;border-radius:5px;font-size:.9em}
.article blockquote{border-left:3px solid var(--glass-line);margin:0 0 14px;padding:2px 0 2px 14px;color:var(--ink-3)}
footer{color:var(--ink-3);font-size:12.5px;padding:26px 0 50px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.sourcefoot{margin-bottom:-5px}
.source-note{margin:18px 0 0;padding:10px 13px;border:1px solid var(--glass-line);background:var(--glass);border-radius:12px;color:var(--ink-3);font-size:11.5px;line-height:1.6}
.source-note a{color:var(--link);font-weight:700}
.footlinks{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}.footread{margin-bottom:8px}.footlabel{opacity:.55;font-size:.85em;letter-spacing:.04em;text-transform:uppercase;margin-right:2px}
.footlinks a{color:var(--ink-2);font-weight:600}
.footlinks a:hover{color:var(--ink)}
.footlinks .fsep{opacity:.4}
/* Motion for the coloured weather glyphs (scene.js ICON_COLOR), on the maps
   (via <symbol>/<use>: selectors match the originals and the instances take
   the same computed style) and inline in rows, cards and headers. Small amplitudes on purpose: the map is read,
   not watched. The global reduced-motion rule stops all of it. */
@keyframes wxspin{to{transform:rotate(360deg)}}
@keyframes wxfloat{0%,100%{transform:translateX(0)}50%{transform:translateX(.6px)}}
@keyframes wxdrop{0%{transform:translateY(-.4px);opacity:0}20%{opacity:1}100%{transform:translateY(3px);opacity:0}}
@keyframes wxflake{0%{transform:translateY(-.6px);opacity:0}25%{opacity:1}100%{transform:translateY(3.2px);opacity:0}}
@keyframes wxflash{0%,86%,100%{opacity:1}89%{opacity:.1}92%{opacity:1}95%{opacity:.35}}
@keyframes wxfog{0%,100%{transform:translateX(0)}50%{transform:translateX(1.1px)}}
.wxc-sun{animation:wxspin 32s linear infinite;transform-box:fill-box;transform-origin:center}
.wxc-cloud{animation:wxfloat 5.5s ease-in-out infinite}
.wxc-drop{animation:wxdrop 1.3s ease-in infinite}
.wxc-flake{animation:wxflake 2.6s linear infinite}
.wxc-bolt{animation:wxflash 3.2s infinite}
.wxc-fog{animation:wxfog 4.5s ease-in-out infinite}
.wx{width:20px;height:20px;flex:0 0 auto;color:currentColor;vertical-align:middle}
.wx.wxc{overflow:visible}

/* ---------- weather scenes ---------- */
.scene{--disc:calc(var(--sun) * .74)}
.veil{pointer-events:none}
.scene{pointer-events:none}
.scene .glow{position:absolute;inset:0;background:radial-gradient(circle at 86% 14%,rgba(255,248,216,.46),rgba(255,214,130,.17) 34%,transparent 68%)}
.scene .disc{position:absolute;width:var(--disc);height:var(--disc);top:calc(var(--disc) * -.1);right:calc(var(--disc) * .08);border-radius:50%;background:radial-gradient(circle at 38% 34%,#fffdf2,#ffdd78 56%,#ffb23c);box-shadow:0 0 calc(var(--disc) * .34) rgba(255,208,112,.7),0 0 calc(var(--disc) * .82) rgba(255,190,80,.36)}
.scene .rays{position:absolute;width:calc(var(--disc) * 3.2);height:calc(var(--disc) * 3.2);top:calc(var(--disc) * -1.2);right:calc(var(--disc) * -1.02);background:repeating-conic-gradient(from 0deg,rgba(255,247,218,.30) 0deg 5deg,transparent 5deg 17deg);-webkit-mask-image:radial-gradient(circle,#000 15%,rgba(0,0,0,.45) 34%,transparent 62%);mask-image:radial-gradient(circle,#000 15%,rgba(0,0,0,.45) 34%,transparent 62%)}
.scene .clouds{position:absolute;left:-16%;right:-16%;top:-14%;height:64%;filter:blur(4px);background:radial-gradient(closest-side,rgba(255,255,255,.34),transparent) 6% 62%/38% 60% no-repeat,radial-gradient(closest-side,rgba(255,255,255,.4),transparent) 31% 32%/40% 76% no-repeat,radial-gradient(closest-side,rgba(255,255,255,.32),transparent) 58% 56%/44% 62% no-repeat,radial-gradient(closest-side,rgba(255,255,255,.28),transparent) 85% 36%/38% 68% no-repeat}
.scene.part .clouds{opacity:.5}.scene.overcast .clouds{opacity:.9}.scene.rain .clouds{opacity:.72}.scene.heavyrain .clouds{opacity:.92}.scene.storm .clouds{opacity:1}.scene.snow .clouds{opacity:.7}
.scene .rain{position:absolute;inset:-22% -12% -12%;transform:rotate(12deg);overflow:hidden}
.scene .rain.heavy{transform:rotate(14deg)}.scene .rain.storm{transform:rotate(15deg)}
.scene .rain i{position:absolute;display:block;width:1.3px;border-radius:2px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.9))}
.scene .rain.heavy i,.scene .rain.storm i{width:1.6px}
@keyframes rainfall{from{transform:translateY(-24px)}to{transform:translateY(150px)}}
.scene .snow{position:absolute;inset:-10% 0 0 0;overflow:hidden}
.scene .snow i{position:absolute;display:block;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 0 3px rgba(255,255,255,.5)}
@keyframes snowfall{0%{transform:translateY(-20px) translateX(0)}50%{transform:translateY(70px) translateX(8px)}100%{transform:translateY(150px) translateX(-4px)}}
.scene .flash{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 62% 12%,rgba(255,255,255,.85),transparent 52%)}
.scene .bolt{position:absolute;top:9%;right:16%;width:calc(var(--sun) * .46);height:calc(var(--sun) * .64);opacity:.55;color:#fff5c8;filter:drop-shadow(0 0 5px rgba(255,236,150,.7))}
.scene .bolt svg{width:100%;height:100%;display:block}
.scene .fog{position:absolute;inset:-12%;filter:blur(4px);background:linear-gradient(180deg,transparent 0 16%,rgba(255,255,255,.32) 25% 34%,transparent 43%),linear-gradient(180deg,transparent 0 48%,rgba(255,255,255,.26) 56% 64%,transparent 71%),linear-gradient(180deg,transparent 0 76%,rgba(255,255,255,.2) 83% 91%,transparent 97%)}
.scene .fog.dust{background:linear-gradient(180deg,transparent 0 20%,rgba(224,196,140,.34) 30% 42%,transparent 52%),linear-gradient(180deg,transparent 0 60%,rgba(214,182,120,.28) 70% 82%,transparent 92%)}
.scene .sand{position:absolute;inset:0;background:radial-gradient(120% 90% at 60% 30%,rgba(206,170,104,.34),transparent 60%)}
@keyframes wx-spin{to{transform:rotate(360deg)}}
@keyframes wx-breathe{50%{transform:scale(1.07)}}
@keyframes wx-drift{50%{transform:translateX(5%)}}
@keyframes wx-flash{0%,86%,100%{opacity:0}88%{opacity:.8}90%{opacity:.08}93%{opacity:.6}96%{opacity:0}}
@keyframes wx-bolt{0%,84%,100%{opacity:.5}86%{opacity:1}88%{opacity:.35}91%{opacity:1}94%{opacity:.5}}
/* detail/forecast scenes animate on their own (they are the focus) */
.animscene .rays{animation:wx-spin 26s linear infinite}
.animscene .disc{animation:wx-breathe 3.6s ease-in-out infinite}
.animscene .clouds,.animscene .fog{animation:wx-drift 10s ease-in-out infinite}
.animscene .rain i{animation:rainfall var(--dur,.8s) linear infinite;animation-delay:var(--delay,0s)}
.animscene .snow i{animation:snowfall var(--dur,4s) linear infinite;animation-delay:var(--delay,0s)}
.animscene .flash{animation:wx-flash 3.6s ease-out infinite}
.animscene .bolt{animation:wx-bolt 3.6s ease-out infinite}

.wrap.home{max-width:1240px}
.viewbar{margin:16px 0 0}
.viewseg{display:inline-flex;background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;padding:3px}
.viewseg a{padding:6px 16px;border-radius:999px;font-size:13px;font-weight:700;color:var(--ink-2)}
.viewseg a[aria-current="true"]{background:var(--ink);color:var(--bg0)}
.days{display:flex;gap:7px;overflow-x:auto;padding:14px 0 4px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:0 0 auto;min-width:70px;text-align:center;padding:8px 12px;border-radius:13px;background:var(--glass);border:1px solid var(--glass-line);color:var(--ink-2);font:inherit;cursor:pointer;transition:transform .12s}
.day:hover{transform:translateY(-1px)}
.day .dw{font-size:11px;font-weight:700;opacity:.85}
.day .dd{font-family:var(--num);font-size:15px;font-weight:800;color:var(--ink);margin-top:1px}
/* deep enough for white 11-15px text (was #ff7a5c->#ff478f, only 2.6:1) */
.day[aria-current="true"]{background:linear-gradient(100deg,#cf4430,#c9155a);border-color:transparent;color:#fff}
.day[aria-current="true"] .dd{color:#fff}

.hero{padding:18px 0 4px;display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.hero h1{font-size:clamp(22px,3.4vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:0}
.hero h1 .g{background:linear-gradient(100deg,var(--hl-hot),var(--hl-warm) 42%,var(--hl-cool));-webkit-background-clip:text;background-clip:text;color:transparent}
.hstats{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.hstat{display:flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--ink-2);background:var(--glass);border:1px solid var(--glass-line);border-radius:11px;padding:6px 11px}
.hstat b{font-family:var(--num);font-size:16px;font-weight:800;color:var(--ink)}
.hstat.hot b{color:var(--acc-hot)}.hstat.cold b{color:var(--acc-cold)}
.subline{color:var(--ink-3);font-size:12.5px;margin:8px 0 0}
/* national city ranking list */
.crank{border:1px solid var(--glass-line);border-radius:18px;overflow:hidden;background:var(--glass);margin-top:14px}
.crank .r{display:grid;grid-template-columns:54px 1fr 120px 78px 84px;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--glass-line);color:var(--ink)}
.crank .r:last-child{border-bottom:none}
.crank .r:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.crank .rk{font-family:var(--num);font-weight:800;font-size:14px;color:var(--ink-3)}
.crank .rk .m{font-size:17px}
.crank .cn{font-weight:700;font-size:14.5px}
.crank .cp{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.crank .cw{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.crank .cbar{height:6px;border-radius:4px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}
.crank .cbar i{display:block;height:100%;border-radius:4px}
.crank .ct{font-family:var(--num);font-weight:800;font-size:19px;text-align:right}
.crank .adrow{padding:14px;text-align:center;color:var(--ink-3);font-size:12px;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.morebtn{display:block;width:100%;padding:14px;border:none;background:var(--glass);color:var(--ink-2);font:700 13px var(--font);cursor:pointer;border-top:1px solid var(--glass-line)}
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;margin:18px 0 0}
.pager a,.pager .pg-dis{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 13px;border:1px solid var(--glass-line);background:var(--glass);color:var(--ink-2);border-radius:10px;font:700 13.5px var(--font)}
.pager a:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 25%,var(--glass-line))}
.pager a[aria-current="true"]{background:var(--ink);color:var(--bg0);border-color:transparent}
.pager .pg-dis{opacity:.35}
.pager .el{color:var(--ink-3);padding:0 2px}
.pcount{color:var(--ink-3);font-size:12px;margin:14px 0 0}
@media(max-width:640px){.crank .r{grid-template-columns:40px 1fr 70px}.crank .cw,.crank .cbar{display:none}}
.searchc{position:relative;margin-left:auto}
.searchc input{background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);border-radius:999px;height:36px;padding:0 14px 0 34px;width:200px;font-size:13.5px;font-family:var(--font)}
.searchc input::placeholder{color:var(--ink-3)}
.searchc>svg{position:absolute;left:12px;top:10px;color:var(--ink-3);pointer-events:none}
.searchc ~ .tools{margin-left:12px}
@media(max-width:560px){.searchc input{width:130px}}
@media(max-width:520px){
  .top .wrap{padding:0 12px;gap:7px}
  .logo{font-size:0;gap:0}
  .searchc input{width:110px}
  .searchc ~ .tools{margin-left:3px}
  .tools{gap:5px}
  .tbtn{height:34px;min-width:32px;padding:0 9px;font-size:11.5px}
}
@media(max-width:350px){.searchc input{width:94px}.tbtn{padding:0 7px}}
.results{position:absolute;top:44px;right:0;width:min(340px,80vw);max-height:60vh;overflow-y:auto;background:var(--bg1);border:1px solid var(--glass-line);border-radius:14px;box-shadow:var(--shadow);padding:6px;z-index:60}
.results[hidden]{display:none}
.rres{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;width:100%;padding:9px 10px;color:var(--ink);text-align:left;border-radius:10px;text-decoration:none}
.rres:hover,.rres.active{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.rres .tag{font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);color:var(--ink-2)}
.rres .rn{font-weight:700;font-size:14px}
.rres .rn small{color:var(--ink-3);font-weight:600;font-size:11.5px;margin-left:6px}
.rres .rt{font-family:var(--num);font-weight:800;font-size:13.5px}
.rres mark{background:color-mix(in srgb,#ff7a5c 30%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.rempty{padding:14px;color:var(--ink-3);font-size:13px;text-align:center}
.legend{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:11.5px;margin:16px 0 0;flex-wrap:wrap}
.legend .ramp{display:flex;border-radius:4px;overflow:hidden;width:150px;height:8px}
.legend .ramp i{flex:1}

/* The fills are the heat ramp and stay identical in both themes — the colour is
   the data. Map labels keep the light text used by the dark theme in both modes,
   with a dark halo so they remain readable over every temperature colour. */
.split{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:12px}
@media(max-width:820px){.split{grid-template-columns:minmax(0,1fr)}}
.mapwrap{position:relative}
.map{display:block;width:100%;height:auto}
/* Borders are drawn in the page background, so they read as cuts between the
   fills rather than as ink of their own. */
.map .pv{stroke:color-mix(in srgb,var(--bg0) 55%,transparent);stroke-width:calc(1.1px * var(--f,1));transition:filter .14s ease;cursor:pointer}
.map .pv.void{cursor:default}
.mapwrap.dim .pv{filter:saturate(.5) opacity(.5)}
.mapwrap.dim .pv.on{filter:none;stroke:var(--ink);stroke-width:calc(2.2px * var(--f,1))}
.map a:focus-visible{outline:none}
.map a:focus-visible .pv{stroke:var(--ink);stroke-width:calc(2.4px * var(--f,1))}
.map .pin{fill:var(--ink);stroke:var(--bg0);stroke-width:1.8;pointer-events:none}
/* --k rescales the type for the Japan region pages, which crop the national
   frame with a viewBox instead of reprojecting: a font sized for 1000 units
   would swamp a 150-unit crop. It cancels out to a constant on-screen size. */
/* Three independent factors, kept separate so each can be cancelled on its own:
   --k the viewBox crop, --c the height cap (released on mobile), --z the narrow
   viewport. Every label size and stroke below carries all three. */
/* --capon gates --c rather than a media query overriding --c directly: --c is an
   inline style on the element and inline always beats a stylesheet rule. Both
   live on .map, where --c is — custom properties inherit downward only, so
   reading --c from .mapwrap would always hit the fallback. */
.map{--capon:var(--c,1);--f:calc(var(--k,1) * var(--capon) * var(--z,1) * var(--n,1))}
/* --n is the national map's desktop boost: its labels are a glyph and a number
   with no name, on the biggest shapes on the site, and at 17px they read small
   next to the rail. 1.4 lands the type at ~24px and the glyph at ~48px. Phones
   already scale through --z, so the boost is released there. */
.natmap .map{--n:1.4}
.map .lb,.sea .lb{fill:var(--map-ink);text-anchor:middle;paint-order:stroke;
  stroke:color-mix(in srgb,var(--map-halo) 62%,transparent);stroke-width:calc(2.8px * var(--f));
  stroke-linejoin:round;pointer-events:none;font-family:var(--font)}
.map .lb.nm{font-size:calc(13px * var(--f));font-weight:650;letter-spacing:-.01em}
.map .lb.tp{font-size:calc(17px * var(--f));font-weight:800;font-variant-numeric:tabular-nums}
.map .lb.rg{font-size:calc(15px * var(--f));font-weight:600;letter-spacing:.04em;opacity:.92}
/* The weather glyph on a map label. It carries its own scale in a transform
   (width/height as CSS is ignored on <use>), so --f reaches it through that
   rather than through this rule; what is left here is colour and the same
   halo the type gets, so a glyph over a dark fill stays readable. */
.map .lbi,.sea .lbi{color:var(--map-ink);opacity:1;pointer-events:none;
  stroke:color-mix(in srgb,var(--map-halo) 62%,transparent);stroke-width:2.6;paint-order:stroke}
.seabox{position:absolute;right:6px;bottom:6px;width:9.6%;
  border:1px solid var(--glass-line);border-radius:7px;background:color-mix(in srgb,var(--bg0) 62%,transparent);
  padding:5px 5px 3px;display:flex;flex-direction:column;gap:3px}
/* Kyushu reaches into the bottom-left, so the Okinawa box goes top-left over
   the Sea of Japan — a labelled inset, the way print maps place it. */
.seabox.oki{width:13%;left:6px;top:6px;right:auto;bottom:auto}
.seabox .sea{display:block;width:100%;height:auto}
.seabox .sealab{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:center;line-height:1}
.sea .jd{fill:none;stroke:color-mix(in srgb,var(--ink) 55%,transparent);stroke-width:5;stroke-dasharray:14 10;stroke-linecap:round}
.sea path:not(.jd):not(.pv){fill:#ff9d2f;stroke:#ff9d2f;stroke-width:5;stroke-linejoin:round}
.seabox.oki .sea .pv{stroke-width:2}
.seabox.oki .lb.tp{font-size:34px}
.units{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-top:12px}
.units .ulab{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.uchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);
  background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;padding:4px 10px}
.uchip i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.uchip b{color:var(--ink);font-variant-numeric:tabular-nums}
.uchip:hover,.uchip.on{border-color:color-mix(in srgb,var(--ink) 40%,var(--glass-line));color:var(--ink)}
/* The district map is its own section rather than half a split, so it is capped
   by height instead of width — a tall province would otherwise run past a
   screen. --ar (w:h, set inline) caps the width to match, so the box shrinks to
   the drawing: without it Shanxi draws 315px wide inside a 920px box and carries
   300px of dead gutter on either side. The type is handled separately — see --k
   in mapview.js, since a capped map draws smaller and SVG text draws with it. */
.provmap .map{margin:0 auto;max-height:var(--cap);max-width:calc(var(--cap) * var(--ar,1))}
.provmap .map{--cap:min(74vh,880px)}
/* A district map sits beside its city rail, but it cannot use .split's 1.62fr /
   1fr: the map is capped by height, so its drawn width swings with the shape
   (Shanxi 1000x2116 draws ~370px, Hainan ~760px) and a proportional column
   would leave the narrow ones stranded in gutter. The rail takes a fixed width
   and the map column absorbs the rest, then centres what it does not fill. */
/* Gated above the stack breakpoint rather than overridden below it: .split's
   one-column rule is declared earlier in this file and carries the same
   specificity, so an ungated .psplit would win at 375px and squeeze the map into
   a 135px column — which rendered its labels at 4.7px. */
@media(min-width:821px){.psplit{grid-template-columns:minmax(0,1fr) 264px}}
@media(min-width:821px) and (max-width:1080px){.psplit{grid-template-columns:minmax(0,1fr) 224px}}
/* No --wh: the rail matches the map's height cap directly rather than deriving
   it from a column width the map does not fill. --rows still shortens it when a
   province has few cities, so a 4-city rail is not a 780px box. */
.psplit .rank{aspect-ratio:auto;max-height:min(var(--cap,min(74vh,880px)),calc(var(--rows,999) * (var(--rowh) + var(--rowgap)) + var(--hd) + 2 * (var(--pad) + var(--bd))))}
.tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-118%);
  background:var(--bg1);border:1px solid var(--glass-line);border-radius:10px;
  padding:8px 11px;font-size:11.5px;color:var(--ink);white-space:nowrap;z-index:5;
  box-shadow:var(--shadow);transition:opacity .12s ease}
.tip.show{opacity:1}
.tip .tn{font-weight:750;font-size:13px}
.tip .tt{font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.tip .tm{color:var(--ink-3);font-size:10.5px}
/* The rail's height is derived from the map's so the two end flush: rail width
   is map width / 1.62, and map height is map width / (w:h), which makes the
   rail's own aspect ratio (w:h) / 1.62. --wh is set inline per map.
   The cap then releases that height for a rail with too few rows to fill it:
   China's 34 rows overflow it and scroll, Japan's 10 stop where they end rather
   than floating in 450px of empty box. Every term below is a declared value on
   this component, so the cap cannot drift from the rows it measures.
   width:100% is load-bearing: a ratio box with an auto width turns the
   max-height back into a max-width, which shrinks the Japan rail to 176px and
   clips the region names to one letter. A definite width sizes the height from
   the ratio instead, so only the height is capped. */
.rank{--rowh:23px;--rowgap:1px;--hd:24px;--pad:8px;--bd:1px;
  border-radius:14px;background:var(--glass);border:var(--bd) solid var(--glass-line);padding:var(--pad);
  display:flex;flex-direction:column;min-height:0;align-self:start;width:100%;
  aspect-ratio:calc(var(--wh,1.19) / 1.62);
  max-height:calc(var(--rows,999) * (var(--rowh) + var(--rowgap)) + var(--hd) + 2 * (var(--pad) + var(--bd)))}
.rankhd{display:flex;align-items:baseline;justify-content:space-between;height:var(--hd);padding:4px 6px 8px}
.rankhd span{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.rankscroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--rowgap);
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 22%,transparent) transparent}
@media(max-width:820px){.rank{aspect-ratio:auto}.rankscroll{max-height:320px}
  /* Stacked, the rail no longer has a map beside it to match, and the cap is
     released on mobile anyway — so height comes from the rows alone. */
  .psplit .rank{max-height:none}}
/* A phone draws the same viewBox into ~335px instead of ~920px, so every label
   shrinks by the same factor whatever --k says — the national maps have no --k
   at all and still rendered at 5.7px. --z multiplies into every font-size and
   stroke below, restoring the on-screen size that the desktop widths assume.
   The map keeps its full height here: vertical scrolling is free on a phone,
   and capping it is what shrank the type in the first place. */
@media(max-width:820px){.map{--z:2.1}.natmap .map{--n:1}
  /* Phone displacement: labels moved by the build's narrow pass (mapview.js). */
  .map .lb,.map .lbi{--mx:var(--nmx,0px);--my:var(--nmy,0px)}.map .lb{transform:translate(var(--mx),var(--my))}
  /* Releasing the cap means --c is correcting for a cap that no longer binds;
     leaving it in multiplied against --z and drew Kanto's labels at 56px. */
  .provmap .map{--capon:1;--cap:none;max-width:100%}
  /* Labels that only fit at desktop type size. The build places two sets — the
     narrow one is a subset of the wide one — and marks the difference .wo, so a
     phone drops the labels 2.9x type would make collide instead of the whole
     map's worth. Hainan keeps 11 names at 1280px and 2 at 375px. */
  .map .lb.wo,.map .lbi.wo{display:none}}
@media(max-width:400px){.map{--z:2.1}}
/* The 14px column is the weather glyph. It sits between the name and the bar so
   the eye reads name -> condition -> temperature, and it is a fixed width so the
   bars stay aligned down the rail no matter which icon each row draws. */
.rrow{display:grid;grid-template-columns:20px 1fr 14px 52px 42px;align-items:center;gap:8px;
  min-height:var(--rowh);padding:5px 6px;border-radius:7px;font-size:11.5px;color:var(--ink-2)}
.rrow:hover,.rrow.on{background:color-mix(in srgb,var(--ink) 11%,transparent);color:var(--ink)}
.rrow .rk{font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right}
.rrow .rn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .rbar{height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}
.rrow .rbar i{display:block;height:100%;border-radius:3px}
.rrow .rt{text-align:right;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.rrow .rw{display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.rrow .rw .wx{width:20px;height:20px;display:block}
.rrow:hover .rw,.rrow.on .rw{color:var(--ink-2)}

.cmp .lead{color:var(--ink-2)}
.cmp-pick{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:10px;align-items:end;margin:18px 0 10px}
.cmp-pick label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-3);font-weight:700}
.cmp-pick input{height:40px;border-radius:12px;border:1px solid var(--glass-line);background:var(--glass);color:var(--ink);padding:0 12px;font-size:15px;font-family:var(--font)}
.cmp-pick .tbtn{height:40px}
@media(max-width:640px){.cmp-pick{grid-template-columns:1fr 1fr}.cmp-pick .tbtn{height:36px}}
.cmp-msg{color:var(--acc-hot);font-size:13px;margin:0 0 8px}
.cmp-cards{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch}
@media(max-width:640px){.cmp-cards{grid-template-columns:1fr}}
.cmp-card{display:block;border:1px solid var(--glass-line);border-radius:18px;background:var(--glass);padding:16px 18px;color:var(--ink)}
.cmp-card .tag{font-size:10.5px;color:var(--ink-3);letter-spacing:.08em;font-weight:800}
.cmp-card b{display:block;font-size:22px;font-weight:800;margin-top:2px}
.cmp-card small{display:block;color:var(--ink-2);font-size:13px;margin-top:3px}
.cmp-card .big{font-family:var(--num);font-size:30px;font-weight:800;margin:8px 0 2px}
.cmp-vs{display:flex;align-items:center;justify-content:center;padding:0 6px;text-align:center;color:var(--ink-2);font-size:13.5px;font-weight:700;max-width:180px}
.cmp-chart svg{width:100%;height:auto;display:block;background:var(--glass);border:1px solid var(--glass-line);border-radius:16px}
.cmp-chart .la{stroke:var(--acc-hot);fill:none;stroke-width:2.5;stroke-linejoin:round}
.cmp-chart .lb2{stroke:var(--acc-cold);fill:none;stroke-width:2.5;stroke-linejoin:round}
.cmp-chart .da{fill:var(--acc-hot)}.cmp-chart .db{fill:var(--acc-cold)}
.cmp-chart .lb{font-size:11px;fill:var(--ink-2);text-anchor:middle;font-family:var(--num);font-weight:700}
.cmp-chart .ax{font-size:11px;fill:var(--ink-3);text-anchor:middle}
.cmp-legend{display:flex;gap:16px;font-size:13px;margin-top:8px}
.cmp-legend .la{color:var(--acc-hot)}.cmp-legend .lb2{color:var(--acc-cold)}
.cmp-table table{width:100%;border-collapse:collapse;font-size:13.5px}
.cmp-table th,.cmp-table td{padding:8px 6px;border-bottom:1px solid var(--glass-line);text-align:right;font-variant-numeric:tabular-nums}
.cmp-table th:first-child,.cmp-table td:first-child{text-align:left;color:var(--ink-2)}
.cmp-table th{color:var(--ink-3);font-size:12px;font-weight:700}
.cmp-table .pos{color:var(--acc-hot)}.cmp-table .neg{color:var(--acc-cold)}
.nf{padding:56px 0 10px;max-width:640px}
.nf .code{font-family:var(--num);font-size:15px;font-weight:800;letter-spacing:.14em;color:#ff7a45}
.nf h1{font-size:clamp(34px,6vw,52px);font-weight:800;letter-spacing:-.03em;margin:10px 0 0;color:var(--ink)}
.nf p{color:var(--ink-2);font-size:15.5px;line-height:1.75;margin:16px 0 0}
.nfacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.nfacts a{border-radius:999px;padding:11px 20px;font-size:13.5px;font-weight:800;
  border:1px solid var(--glass-line);background:var(--glass);color:var(--ink);transition:transform .15s}
.nfacts a.pri{background:var(--ink);color:var(--bg0);border-color:transparent}
.nfacts a:hover{transform:translateY(-1px)}