@font-face{font-family:Manrope;font-weight:200 800;src:url('assets/fonts/manrope-latin-variable.woff2') format('woff2');font-display:swap}
@font-face{font-family:Outfit;font-weight:100 900;src:url('assets/fonts/outfit-latin-variable.woff2') format('woff2');font-display:swap}
:root{color-scheme:light;--bg:#f7f8f6;--red:#a20d25;--gold:#fc0}*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:transparent;color:#26383e;font-family:Manrope,Arial,'PingFang SC','Microsoft YaHei',sans-serif}body{min-height:100svh;display:grid;place-items:center;padding:60px 24px 24px}
.hero-map{position:relative;isolation:isolate;width:min(100%,960px);aspect-ratio:1.45;display:flex;flex-direction:column}
.hero-map::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,#000,transparent)}
.hero-map svg{width:100%;flex:1;min-height:0;overflow:hidden;display:block}
.province{fill:#dce4e4;stroke:#95a8ad;stroke-width:.85;vector-effect:non-scaling-stroke}.province[data-name='']{fill:#afbdc0;stroke:#afbdc0;stroke-width:.3}
.base-dot{fill:#a56973;opacity:.45}.active-dot{fill:#b31f37;stroke:#fff;stroke-width:1.6}.ring{fill:#a20d2512;stroke:#a20d2585;stroke-width:1}
.city-label{font-family:Outfit,Manrope,Arial,'PingFang SC',sans-serif;fill:#263e47;font-weight:500;font-size:25px;paint-order:stroke;stroke:#f7f8f6;stroke-width:4px;stroke-linejoin:round}.leader{fill:none;stroke:#71898f;stroke-width:1}
.hero-controls{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:16px 12px 0;flex-wrap:wrap}
.sectors{display:flex;gap:6px;flex-wrap:wrap}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;background:transparent;color:#455c63;border:1px solid #abb9bc;padding:9px 15px;border-radius:999px;font-size:12px}button[aria-pressed=true]{background:var(--red);border-color:var(--red);color:white}button:hover{color:var(--red);border-color:var(--red);background:#a20d2508}button[aria-pressed=true]:hover{color:white;background:var(--red)}
a{color:#455c63;text-decoration:none;font-size:12px;display:inline-flex;align-items:center;gap:14px;border-bottom:1px solid #aab9bc;padding:8px 0}a:hover{color:var(--red)}button:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.preview-language{position:fixed;left:28px;top:18px;display:flex;gap:12px;align-items:center;color:#777}.preview-language button{border:0;border-bottom:2px solid transparent;padding:7px 0;border-radius:0;font-size:12px}.preview-language button[aria-pressed=true]{background:none;border-bottom-color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
html[data-embed=true] body{padding:0;min-height:0}html[data-embed=true] .preview-language{display:none}html[data-embed=true] .hero-map{width:100%;height:100svh;min-height:0;aspect-ratio:auto}html[data-embed=true] .hero-map svg{min-height:0}
@media(max-width:650px){body{padding:55px 12px 20px}.hero-map{aspect-ratio:auto;min-height:380px}.hero-map svg{min-height:270px}.hero-controls{justify-content:center;gap:9px;padding:10px 0 0}.sectors{justify-content:center}button{font-size:11px;padding:9px 12px}.city-label{font-size:27px}a{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Comfortable control hit areas without making the map visually heavier. */
.sectors button { min-height:40px; font-size:12px; }
.hero-controls a { min-height:40px; }
.preview-language button[aria-pressed=true] { color:var(--red); border-bottom-color:var(--red); }

/* The embedded map has no panel or separate grid: the host Hero shows through. */
html[data-embed=false] body { background:var(--bg); }
html[data-embed=true],html[data-embed=true] body { background:transparent; }
.hero-map::before { display:none; }

/* Discoverable industry bubbles, positioned in the map's outer whitespace. */
.hero-controls { padding:0; min-height:44px; justify-content:flex-end; }
.sector-hint { position:absolute; top:0; left:0; right:0; margin:0; text-align:center; color:#596e73; font-size:12px; letter-spacing:.02em; pointer-events:none; }
.sectors { position:absolute; inset:0 0 48px; pointer-events:none; }
.sectors button { position:absolute; pointer-events:auto; display:inline-flex; align-items:center; gap:9px; min-height:46px; padding:11px 17px; font-size:13px; font-weight:600; color:#8d2033; background:#fff; border:1px solid #d9b8bf; box-shadow:0 6px 20px #344b4317; animation:bubble-arrive 2.4s ease-in-out 2; }
.sectors button[data-sector=smart_home] { left:3%; top:18%; }
.sectors button[data-sector=robotics] { right:3%; top:9%; }
.sectors button[data-sector=ev] { left:5%; bottom:19%; }
.sectors button[aria-pressed=true] { background:var(--red); color:#fff; border-color:var(--red); box-shadow:0 7px 23px #a20d2526; }
.sectors button:hover { background:#f9eeef; color:var(--red); box-shadow:0 7px 24px #a20d2526; }
.sectors button[aria-pressed=true]:hover { background:#8e1025; color:#fff; }
.sectors:hover button,.sectors:focus-within button { animation-play-state:paused; }
.sectors .bubble-pointer { width:17px; height:17px; min-height:0; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
@keyframes bubble-arrive { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@media(max-width:450px) {
  .sector-hint { font-size:10px; }
  .sectors button { font-size:11px; gap:6px; padding:9px 11px; min-height:44px; }
  .sectors button[data-sector=smart_home] { left:1%; top:13%; }
  .sectors button[data-sector=robotics] { right:1%; top:9%; }
  .sectors button[data-sector=ev] { left:1%; bottom:14%; }
}
@media(prefers-reduced-motion:reduce) { .sectors button { animation:none; } }

/* Sector-linked province colours; labels and selected buttons remain explicit. */
.province { transition:fill .45s ease,stroke .45s ease; }
.province--featured { stroke:#617c83; stroke-width:1.1; }
@media(prefers-reduced-motion:reduce) { .province { transition:none; } }