/* =============================================================================
   SparkNest 星巢 — demo site design system (shared by all three pages)
   Dark tactical theme. No webfont on purpose: Google Fonts is unreachable from
   the mainland, which is who the CN node serves. System stacks only.
   Every image is an <img src> or a JS string literal, never a CSS url(): the
   publish allowlist follows HTML and JS references, not stylesheets.
   ============================================================================= */
:root{
  --bg:#05080f; --bg2:#080d19; --bg3:#0c1324;
  --panel:rgba(12,19,35,.78); --panel-solid:#0c1426; --panel-hi:rgba(20,30,54,.9);
  --line:rgba(122,162,255,.13); --line2:rgba(122,162,255,.24); --line3:rgba(122,162,255,.4);
  --ink:#e9eefb; --ink2:#aab6cf; --ink3:#6d7b98; --ink4:#46526b;
  --spark:#ffd21f; --spark2:#ffb800; --nest:#5b3bff; --nest2:#8e7cff; --cyan:#2ce3ff; --teal:#1fd1b4;
  --ok:#22d37a; --warn:#ffc23d; --off:#5d6b86; --err:#ff4d5e;
  --ok-bg:rgba(34,211,122,.12); --warn-bg:rgba(255,194,61,.13); --off-bg:rgba(93,107,134,.16); --err-bg:rgba(255,77,94,.14);
  --r:14px; --r-sm:9px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular","Cascadia Mono",Consolas,"Liberation Mono",Menlo,monospace;
  --shadow:0 24px 60px -24px rgba(0,0,0,.75);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed}
img,video,canvas,svg{display:block;max-width:100%}
input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(91,59,255,.45)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink3)} .dim{color:var(--ink2)}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- backdrop: blueprint grid + glow -------------------------------------- */
.bp-grid{background-image:
  linear-gradient(rgba(44,227,255,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(44,227,255,.045) 1px,transparent 1px),
  linear-gradient(rgba(44,227,255,.022) 1px,transparent 1px),
  linear-gradient(90deg,rgba(44,227,255,.022) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.glow-a{position:absolute;pointer-events:none;border-radius:50%;filter:blur(90px);opacity:.5}

/* ---- top bar (shared) ------------------------------------------------------ */
.top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:18px;height:60px;padding:0 20px;
  background:rgba(5,8,15,.82);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{height:30px;width:auto}
.brand .sub{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);
  border-left:1px solid var(--line2);padding-left:10px}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{position:relative;padding:8px 13px;border-radius:9px;color:var(--ink2);font-weight:600;font-size:13.5px;transition:color .2s,background .2s}
.nav a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.nav a.on{color:var(--ink)}
.nav a.on::after{content:"";position:absolute;left:13px;right:13px;bottom:-11px;height:2px;border-radius:2px;background:var(--spark);box-shadow:0 0 12px var(--spark)}
.top .grow{flex:1}
.top-tools{display:flex;align-items:center;gap:10px}
.pill-live{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:99px;border:1px solid var(--line2);
  font:600 11px/1 var(--mono);letter-spacing:.06em;color:var(--ink2);white-space:nowrap}
.pill-live i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(34,211,122,.6);animation:ping 1.8s infinite}
.pill-live.bad i{background:var(--err);animation:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(34,211,122,.55)}80%,100%{box-shadow:0 0 0 7px rgba(34,211,122,0)}}
.lang{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.lang button{padding:6px 10px;font:700 11.5px/1 var(--mono);color:var(--ink3)}
.lang button.on{background:rgba(255,255,255,.08);color:var(--ink)}
.menu-btn{display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--line2);place-items:center}

/* ---- buttons ---------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;
  font-weight:700;font-size:14px;white-space:nowrap;transition:transform .15s var(--ease),background .2s,border-color .2s,box-shadow .2s,color .2s;user-select:none}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;flex:none}
.btn-spark{background:var(--spark);color:#12100a;box-shadow:0 10px 30px -12px rgba(255,210,31,.8)}
.btn-spark:hover{background:#ffe066}
.btn-nest{background:var(--nest);color:#fff;box-shadow:0 10px 30px -12px rgba(91,59,255,.9)}
.btn-nest:hover{background:#6c50ff}
.btn-ghost{border:1px solid var(--line2);color:var(--ink);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--line3);background:rgba(255,255,255,.06)}
.btn-danger{background:linear-gradient(135deg,#ff4d5e,#d61f33);color:#fff;box-shadow:0 10px 26px -12px rgba(255,77,94,.9)}
.btn-danger:hover{filter:brightness(1.08)}
.btn-sm{height:32px;padding:0 11px;font-size:12.5px;border-radius:8px}
.btn-lg{height:50px;padding:0 24px;font-size:15.5px;border-radius:12px}
.btn[disabled]{opacity:.42;box-shadow:none}

/* ---- panels ------------------------------------------------------------------ */
.panel{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.panel.hud::before,.panel.hud::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;border-color:var(--cyan);opacity:.55}
.panel.hud::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid;border-top-left-radius:var(--r)}
.panel.hud::after{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid;border-bottom-right-radius:var(--r)}
.ph{display:flex;align-items:center;gap:10px;padding:13px 16px 0}
.ph h3{margin:0;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.ph .tag{font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.ph .sp{flex:1}
.pb{padding:14px 16px 16px}
.kicker{display:inline-flex;align-items:center;gap:8px;font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.kicker::before{content:"";width:18px;height:1px;background:currentColor}

/* ---- status badges / chips ------------------------------------------------- */
.st{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 8px;border-radius:99px;font-size:11.5px;font-weight:700;white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.ONLINE{color:var(--ok);background:var(--ok-bg)}
.st.WARNING{color:var(--warn);background:var(--warn-bg)}
.st.WARNING::before{animation:blink 1s steps(2) infinite}
.st.OFFLINE{color:#8e9ab3;background:var(--off-bg)}
.st.ERROR{color:var(--err);background:var(--err-bg)}
@keyframes blink{50%{opacity:.25}}
.chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:9px;border:1px solid var(--line);
  color:var(--ink2);font-size:13px;font-weight:600;white-space:nowrap;transition:all .18s}
.chip:hover{border-color:var(--line2);color:var(--ink)}
.chip.on{background:rgba(91,59,255,.2);border-color:rgba(142,124,255,.55);color:#fff}
.chip .n{font:700 11px/1 var(--mono);padding:3px 6px;border-radius:6px;background:rgba(255,255,255,.07);color:var(--ink2)}
.chip.on .n{background:rgba(255,255,255,.16);color:#fff}
.chip svg{width:16px;height:16px}
.tagx{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;border:1px solid var(--line);font:600 11px/1.2 var(--mono);color:var(--ink2)}
.kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;border:1px solid var(--line2);border-bottom-width:2px;font:700 10.5px/1 var(--mono);color:var(--ink2)}
.meth{display:inline-grid;place-items:center;min-width:46px;height:20px;padding:0 6px;border-radius:5px;font:800 10.5px/1 var(--mono);letter-spacing:.04em}
.meth.GET{background:rgba(34,211,122,.15);color:#4be39a}
.meth.POST{background:rgba(255,194,61,.15);color:#ffcf5c}
.meth.WS{background:rgba(44,227,255,.14);color:var(--cyan)}
.meth.BLE{background:rgba(142,124,255,.18);color:var(--nest2)}

/* ---- toasts ---------------------------------------------------------------- */
.toasts{position:fixed;z-index:200;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:min(380px,calc(100vw - 36px))}
.toast{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:12px;background:rgba(14,22,40,.96);
  border:1px solid var(--line2);box-shadow:var(--shadow);font-size:13px;animation:tin .28s var(--ease)}
.toast b{display:block;font-size:13px}
.toast small{color:var(--ink3);font-family:var(--mono);font-size:11px}
.toast i{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--cyan)}
.toast.ok i{background:var(--ok)} .toast.warn i{background:var(--warn)} .toast.err i{background:var(--err)}
.toast.out{animation:tout .25s var(--ease) forwards}
@keyframes tin{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes tout{to{opacity:0;transform:translateX(20px)}}

/* ---- device glyph ------------------------------------------------------------ */
.dg{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:rgba(44,227,255,.08);color:var(--cyan);border:1px solid rgba(44,227,255,.18)}
.dg svg{width:20px;height:20px}
.dg.OFFLINE{background:rgba(93,107,134,.12);border-color:rgba(93,107,134,.25);color:#7c88a3}
.dg.WARNING{background:rgba(255,194,61,.1);border-color:rgba(255,194,61,.35);color:var(--warn)}

/* ---- battery ---------------------------------------------------------------- */
.bat{display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 var(--mono);color:var(--ink2)}
.bat .bar{position:relative;width:26px;height:11px;border:1.5px solid currentColor;border-radius:3px;opacity:.9}
.bat .bar::after{content:"";position:absolute;right:-4px;top:2.5px;width:2px;height:3.5px;background:currentColor;border-radius:0 1px 1px 0}
.bat .bar i{position:absolute;left:1.5px;top:1.5px;bottom:1.5px;border-radius:1px;background:var(--ok)}
.bat.low .bar i{background:var(--warn)} .bat.crit .bar i{background:var(--err)}

/* ---- demo notice ------------------------------------------------------------ */
.demo-note{display:inline-flex;align-items:center;gap:7px;font:600 11px/1.3 var(--mono);color:var(--ink3);letter-spacing:.02em}
.demo-note::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--spark);box-shadow:0 0 8px var(--spark)}

/* ---- scrollbars ------------------------------------------------------------- */
.scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(122,162,255,.25) transparent}
.scroll::-webkit-scrollbar{width:8px;height:8px}
.scroll::-webkit-scrollbar-thumb{background:rgba(122,162,255,.22);border-radius:8px;border:2px solid transparent;background-clip:content-box}

/* ---- json highlight ----------------------------------------------------------- */
.json{font:12px/1.6 var(--mono);white-space:pre-wrap;word-break:break-word;color:#c9d4ec}
.json .k{color:#8ec5ff} .json .s{color:#9fe6a0} .json .n{color:#ffcf5c} .json .b{color:#ff9ad5} .json .z{color:#8e9ab3}

/* ---- responsive top bar ------------------------------------------------------- */
@media (max-width:980px){
  .brand .sub{display:none}
  .nav{position:fixed;top:60px;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:8px 12px 14px;background:rgba(5,8,15,.97);
    border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .2s var(--ease)}
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:13px 12px;font-size:15px}
  .nav a.on::after{left:0;right:auto;top:12px;bottom:12px;width:3px;height:auto}
  .menu-btn{display:inline-grid}
  .top{gap:10px;padding:0 14px}
  .top .pill-live{display:none}
}
@media (max-width:420px){ .top .btn-cta{display:none} }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---- situation map ---------------------------------------------------------- */
.snmap{width:100%;height:100%;user-select:none;-webkit-user-select:none}
.snmap .mlabel{font:600 8.5px/1 var(--mono);fill:rgba(170,190,230,.55);letter-spacing:.04em}
.snmap .mlabel.bk{font-size:10px;fill:rgba(44,227,255,.85);font-weight:800}
.snmap .mlabel.bn{font-size:8.2px;fill:rgba(200,214,240,.62)}
.snmap .mlabel.hot{fill:rgba(255,194,61,.9)}
.snmap .mlabel.water{fill:rgba(44,227,255,.5)}
.snmap .mlabel.pipe-l{fill:rgba(255,138,91,.85)}
.snmap .mlabel.nestH{font-size:10px;fill:#ffd21f;font-weight:800}
.snmap .ripple{animation:ripple 7s linear infinite}
@keyframes ripple{to{stroke-dashoffset:-144}}
.snmap .sweep{animation:sweep 4s linear infinite;transform-origin:0 0}
@keyframes sweep{to{transform:rotate(360deg)}}
.snmap .zone{animation:zone 2.4s ease-in-out infinite}
@keyframes zone{50%{stroke-opacity:.25}}
.snmap .fence{animation:fence 30s linear infinite}
@keyframes fence{to{stroke-dashoffset:-260}}
.snmap .dev{cursor:pointer;outline:none}
.snmap-hero .dev{cursor:default}
.snmap .dev .ic{color:inherit}
.snmap .dev .ic *{vector-effect:non-scaling-stroke}
.snmap .dev .dlabel{font:700 8px/1 var(--sans);fill:rgba(233,238,251,.8);paint-order:stroke;stroke:rgba(6,13,26,.9);stroke-width:3px;opacity:0;transition:opacity .2s}
.snmap-full .dev .dlabel,.snmap-hero .dev .dlabel{opacity:.85}
.snmap .dev .pulse{opacity:0}
.snmap .dev.warn .pulse{animation:dpulse 1.4s ease-out infinite}
.snmap .dev.sel .pulse{animation:dpulse 1.8s ease-out infinite;stroke:#fff!important}
@keyframes dpulse{0%{opacity:.9;r:10}100%{opacity:0;r:26}}
.snmap .dev.sel .halo{stroke-width:2.6;filter:drop-shadow(0 0 6px currentColor)}
.snmap .dev.sel .dlabel{opacity:1;fill:#fff}
.snmap .dev:hover .halo,.snmap .dev:focus-visible .halo{stroke-width:2.6}
.snmap .dev.off{opacity:.7}
.snmap .trail{opacity:.7;stroke-dasharray:1 3}
.snmap-hero .trail{opacity:.5}
.snmap-mini .mlabel,.snmap-mini .scale,.snmap-mini .dlabel{display:none}
.snmap-mini .trail{stroke-width:.6;stroke-dasharray:none;opacity:.9}

/* segmented control (shared) */
.seg{display:inline-flex;padding:3px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.seg button{height:26px;padding:0 10px;border-radius:7px;font-size:12px;font-weight:700;color:var(--ink3);white-space:nowrap}
.seg button.on{background:rgba(255,255,255,.1);color:var(--ink)}
.seg button svg{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px}

/* =============================================================================
   Frosted glass — the Apple / Google translucent-material look.
   Three ingredients, all needed: something colourful BEHIND (the ambient layer
   below), a heavy backdrop blur with saturation on the surface, and a thin
   bright edge + inner top highlight so the pane reads as a physical sheet.
   Blur only on top-level surfaces; controls inside a pane get the tint and the
   highlight without a second blur (nested backdrop-filters cost a lot).
   ============================================================================= */
:root{
  --glass-tint:rgba(16,24,44,.46);
  --glass-sheen:linear-gradient(150deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.02) 38%,rgba(255,255,255,.012) 62%,rgba(255,255,255,.05) 100%);
  --glass-blur:blur(26px) saturate(175%);
  --glass-edge:rgba(255,255,255,.10);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 0 1px rgba(255,255,255,.025);
  --glass-drop:0 22px 50px -26px rgba(0,0,0,.85);
  --amb-a:rgba(91,59,255,.34); --amb-b:rgba(44,227,255,.18); --amb-c:rgba(255,210,31,.08);
}
html{background:var(--bg)}
body{background:transparent!important}
body::before{content:"";position:fixed;inset:-15%;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 38% at 78% 12%,var(--amb-a),transparent 70%),radial-gradient(38% 36% at 8% 78%,var(--amb-b),transparent 70%),radial-gradient(30% 30% at 50% 108%,var(--amb-c),transparent 70%),radial-gradient(26% 24% at 30% 22%,rgba(31,209,180,.10),transparent 70%);
  filter:blur(20px);animation:amb 38s ease-in-out infinite alternate}
@keyframes amb{50%{transform:translate3d(-3%,2%,0) scale(1.05)}100%{transform:translate3d(2%,-2%,0) scale(1.02)}}

.panel,.toast,.user-menu,.hover-card,.hud-card,.tip-bar,.login-card{
  background:var(--glass-sheen),var(--glass-tint);border:1px solid var(--glass-edge);
  box-shadow:var(--glass-hi),var(--glass-drop);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.toast,.user-menu,.hover-card{--glass-tint:rgba(14,21,40,.72)}
.top{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),rgba(6,10,20,.5);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.08);box-shadow:inset 0 -1px 0 rgba(0,0,0,.3)}
.btn-ghost{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 20px -12px rgba(0,0,0,.7);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}
.btn-ghost:hover{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border-color:rgba(255,255,255,.22)}
.btn-spark{background:linear-gradient(180deg,#ffe36a 0%,#ffd21f 48%,#f5c400 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.12),0 10px 30px -12px rgba(255,210,31,.85)}
.btn-spark:hover{background:linear-gradient(180deg,#fff08f 0%,#ffdc3d 48%,#ffcc14 100%)}
.btn-nest{background:linear-gradient(180deg,#7b62ff,#5b3bff 55%,#4a2cf0);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 30px -12px rgba(91,59,255,.95)}
.btn-danger{background:linear-gradient(180deg,#ff6b78,#ff4d5e 50%,#e0283c);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 26px -12px rgba(255,77,94,.95)}
.chip,.seg,.lang,.pill-live,.user-chip,.menu-btn{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.chip.on{background:linear-gradient(180deg,rgba(142,124,255,.42),rgba(91,59,255,.22));border-color:rgba(170,155,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 18px -8px rgba(91,59,255,.8)}
.seg button.on,.lang button.on{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 8px rgba(0,0,0,.35)}
.demo-note{font:500 12px/1.5 var(--sans);letter-spacing:0}
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2{word-break:keep-all;overflow-wrap:anywhere}

.nav a.nav-ext{color:var(--spark);opacity:.85}
.nav a.nav-ext:hover{opacity:1;background:rgba(255,210,31,.08)}
.nav a.nav-ext::before{content:"";display:inline-block;width:1px;height:14px;margin-right:12px;vertical-align:-2px;background:rgba(255,255,255,.14)}
@media (max-width:980px){ .nav a.nav-ext::before{display:none} }
.ing-mark{display:inline-flex;align-items:center;gap:8px;color:var(--ink3);font-size:12px}
.ing-mark img{height:18px;width:auto;opacity:.9}


/* labels sit on the rendered site plan: give them a dark halo */
.snmap .mlabel{paint-order:stroke;stroke:rgba(3,7,15,.88);stroke-width:2.6px;stroke-linejoin:round;fill:rgba(220,232,255,.86)}
.snmap .mlabel.bk{fill:#04121f;stroke:none;font-size:8px}
.snmap .mlabel.bn{font-size:8.4px;fill:rgba(233,240,255,.92)}
.snmap .mlabel.hot{fill:#ffd36a}
.snmap .mlabel.water{fill:rgba(140,230,255,.9)}
.snmap .mlabel.pipe-l{fill:#ffa27a}