.suucar-map-root, .suucar-map-stage {
  --bg: #eef2f6;
  --card: #ffffff;
  --border: #dde5ee;
  --text: #334155;
  --muted: #64748b;
  --ground: #dce5d0;
  --land: #86b36c;
  --land-hi: #a9cc8c;
  --land-line: #4a7c3a;
  --nb: #c2cdb6;
  --sea: #5b9fcb;
  --sea2: #3f86b5;
  --hub: #1d4ed8;
  --hub-ring: #93c5fd;
  --hub-core: #eff6ff;
  --label: #0f172a;
  --nlabel: #64748b;
  --sky0: #b9cce0;
  --sky1: #d0e0c8;
  --sky2: #e4edda;
}
html.dark .suucar-map-root, html.dark .suucar-map-stage {
  --bg: #0a0e13;
  --card: #121820;
  --border: #1e293b;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --ground: #1e2a20;
  --land: #3a5640;
  --land-hi: #4a6b50;
  --land-line: #6a8f6a;
  --nb: #2a382c;
  --sea: #163a54;
  --sea2: #123048;
  --hub: #3b82f6;
  --hub-ring: #93c5fd;
  --hub-core: #dbeafe;
  --label: #f8fafc;
  --nlabel: #94a3b8;
  --sky0: #0c141c;
  --sky1: #121c16;
  --sky2: #0e1610;
}

.suucar-map-root { width: 100%; }
.suucar-map-svg { display: block; width: 100%; height: auto; border-radius: 1rem; }
.suucar-map-stage {
  background: var(--card, #fff);
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 1.15rem;
  overflow: hidden;
  box-shadow: 0 18px 44px -20px rgba(15,23,42,0.16), 0 1px 0 rgba(255,255,255,0.7) inset;
}
html.dark .suucar-map-stage {
  background: #121820;
  border-color: #1e293b;
  box-shadow: 0 16px 40px -18px rgba(0,0,0,0.45);
}
.suucar-map-svg .lbl {
  fill: #0f172a; font-size: 10.5px; font-weight: 700;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  stroke: #fff; stroke-width: 3.4px; paint-order: stroke fill; stroke-linejoin: round;
}
html.dark .suucar-map-svg .lbl { fill: #f8fafc; stroke: #121820; }
.suucar-map-svg .intl-lbl, .suucar-map-svg .nlbl {
  fill: #334155; font-size: 10px; font-weight: 700;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  stroke: #fff; stroke-width: 2.5px; paint-order: stroke fill;
}
html.dark .suucar-map-svg .intl-lbl, html.dark .suucar-map-svg .nlbl { fill: #e2e8f0; stroke: #121820; }
.suucar-map-svg .hubt {
  fill: #0f172a; font-size: 11.5px; font-weight: 800;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
html.dark .suucar-map-svg .hubt { fill: #f8fafc; }
.suucar-map-svg .hubs { fill: #64748b; font-size: 8px; font-family: system-ui, sans-serif; }
html.dark .suucar-map-svg .hubs { fill: #94a3b8; }
.suucar-map-svg .ms-tag {
  font-size: 11px; font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  fill: #0f172a;
  stroke-width: 3.15px;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-miterlimit: 1.5;
  paint-order: stroke fill;
  pointer-events: none;
}
html.dark .suucar-map-svg .ms-tag { fill: #f8fafc; }
.suucar-map-svg .nb-land { opacity: 0.92; }
html.dark .suucar-map-svg .nb-land { opacity: 0.72; }
.suucar-map-svg .suucar-pin .pin-shadow { fill: rgba(15,23,42,0.2); }
html.dark .suucar-map-svg .suucar-pin .pin-shadow { fill: rgba(0,0,0,0.4); }

.suucar-map-svg .suucar-pin .cloud-body {
  fill: #3b82f6;
  stroke: #93c5fd;
  stroke-width: 1.35;
  filter: drop-shadow(0 2px 3px rgba(37,99,235,0.28));
}
html.dark .suucar-map-svg .suucar-pin .cloud-body {
  fill: #60a5fa;
  stroke: #bfdbfe;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.suucar-map-svg .suucar-pin .cloud-core {
  fill: #eff6ff;
  stroke: #93c5fd;
  stroke-width: 0.7;
}
html.dark .suucar-map-svg .suucar-pin .cloud-core {
  fill: #dbeafe;
  stroke: #93c5fd;
}

.suucar-map-svg .suucar-pin .cloud-float {
  transform-origin: center center;
  animation: suucarCloudFloat 3.4s ease-in-out infinite;
}
@keyframes suucarCloudFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.8px); }
}
.suucar-map-svg .ring { fill: none; stroke-width: 1.8; opacity: 0; animation: none; }
.suucar-map-svg .ring.is-live,
.suucar-map-svg .ring.is-hub { animation: suucarPing 2.2s ease-out infinite; }
@keyframes suucarPing { 0% { r: 3.2; opacity: 0.85; } 70% { opacity: 0.35; } 100% { r: 13; opacity: 0; } }
.suucar-map-svg .inset-panel { fill: #fff; stroke: #64748b; stroke-width: 1.5; }
html.dark .suucar-map-svg .inset-panel { fill: #121820; stroke: #94a3b8; }
.suucar-map-svg .inset-panel-bg { fill: #dbe8c8; }
html.dark .suucar-map-svg .inset-panel-bg { fill: #1a2a1c; }
.suucar-map-svg .inset-cap { fill: #64748b; font-size: 8.5px; font-weight: 600; font-family: system-ui, sans-serif; }
html.dark .suucar-map-svg .inset-cap { fill: #94a3b8; }
.hero-map-wrap { margin-top: 1.5rem; }
.hero-map-wrap .suucar-map-stage {
  border-radius: 1.15rem;
  background: var(--sky1, #d0e0c8);
}
.hero-map-wrap .suucar-map-svg {
  min-height: 0;
  height: auto;
  aspect-ratio: 860 / 480;
}
@media (min-width: 1024px) {
  .hero-with-map {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(420px, 1.55fr);
    gap: 1.25rem 1.75rem;
    align-items: center;
    text-align: left;
  }
  .hero-with-map .hero-desc { margin-left: 0; margin-right: 0; max-width: 32rem; }
  .hero-with-map .hero-btns { justify-content: flex-start; }
  .hero-map-wrap { margin-top: 0; }
  
}
@media (min-width: 1280px) {
  .hero-with-map {
    grid-template-columns: minmax(300px, 0.75fr) minmax(520px, 1.7fr);
    gap: 1.5rem 2rem;
  }
  
}
@media (max-width: 640px) {
  .suucar-map-svg .lbl { font-size: 9px; }
  .suucar-map-svg .intl-lbl, .suucar-map-svg .nlbl { font-size: 8.5px; }
  .suucar-map-svg .hubt { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .suucar-map-svg .suucar-pin .cloud-float,
  .suucar-map-svg .suucar-pin .cloud-body,
  .suucar-map-svg .ring { animation: none !important; }
}

.suucar-map-svg [class*="dot-c"], .suucar-map-svg circle[class*="dot-c"] { fill: #3b82f6; }
.suucar-map-svg .ring-c15 { stroke: #c084fc; }
.suucar-map-svg .ring-c16 { stroke: #2dd4bf; }
.suucar-map-svg .ring-c17 { stroke: #fb7185; }
.suucar-map-svg .dot-sm { fill: #3b82f6; opacity: 1; }
.suucar-map-svg .ring-c1 { stroke: #3b82f6; }
.suucar-map-svg .ring-c2 { stroke: #0ea5e9; }
.suucar-map-svg .ring-c3 { stroke: #22d3ee; }
.suucar-map-svg .ring-c4 { stroke: #a78bfa; }
.suucar-map-svg .ring-c5 { stroke: #fbbf24; }
.suucar-map-svg .ring-c6 { stroke: #fb923c; }
.suucar-map-svg .ring-c7 { stroke: #34d399; }
.suucar-map-svg .ring-c8 { stroke: #2dd4bf; }
.suucar-map-svg .ring-c9 { stroke: #818cf8; }
.suucar-map-svg .ring-c10 { stroke: #f472b6; }
.suucar-map-svg .ring-c11 { stroke: #a3e635; }
.suucar-map-svg .ring-c12 { stroke: #f43f5e; }
.suucar-map-svg .ring-c13 { stroke: #eab308; }
.suucar-map-svg .ring-c14 { stroke: #38bdf8; }
.suucar-map-svg circle.dot { fill: #3b82f6; }

.suucar-map-svg .star-bj {
  fill: #3b82f6;
  stroke: #ffffff;
  stroke-width: 0.9;
  filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.55));
}
html.dark .suucar-map-svg .ms-tag { stroke-width: 3.15px; }
html.dark .suucar-map-svg .star-bj { fill: #3b82f6; stroke: #0f172a; }
@media (max-width: 640px) {
  .suucar-map-svg .ms-tag { font-size: 9.5px; }
}

.suucar-map-svg .pkt-path {
  fill: none !important;
  stroke: none !important;
}

.suucar-map-root {
  contain: layout style;
}
.suucar-map-root.map-anim-paused .suucar-pin .cloud-float,
.suucar-map-root.map-anim-paused .suucar-logo-img,
.suucar-map-root.map-anim-paused .ring,
.suucar-map-root.map-anim-paused .ring.is-hub,
.suucar-map-root.map-anim-paused .ring.is-live {
  animation: none !important;
}

.suucar-map-svg .ring-c1 { animation-delay: 0.00s; }
.suucar-map-svg .ring-c2 { animation-delay: 0.22s; }
.suucar-map-svg .ring-c3 { animation-delay: 0.44s; }
.suucar-map-svg .ring-c4 { animation-delay: 0.66s; }
.suucar-map-svg .ring-c5 { animation-delay: 0.88s; }
.suucar-map-svg .ring-c6 { animation-delay: 1.10s; }
.suucar-map-svg .ring-c7 { animation-delay: 1.32s; }
.suucar-map-svg .ring-c8 { animation-delay: 1.54s; }
.suucar-map-svg .ring-c9 { animation-delay: 0.00s; }
.suucar-map-svg .ring-c10 { animation-delay: 0.22s; }
.suucar-map-svg .ring-c11 { animation-delay: 0.44s; }
.suucar-map-svg .ring-c12 { animation-delay: 0.66s; }
.suucar-map-svg .ring-c13 { animation-delay: 0.88s; }
.suucar-map-svg .ring-c14 { animation-delay: 1.10s; }
.suucar-map-svg .ring-c15 { animation-delay: 1.32s; }
.suucar-map-svg .ring-c16 { animation-delay: 1.54s; }
.suucar-map-svg .ring-c17 { animation-delay: 0.00s; }

.suucar-map-svg .suucar-logo-img {
  transform-box: fill-box;
  transform-origin: center;
  animation: suucarLogoPulse 3.2s ease-in-out infinite;
}
@keyframes suucarLogoPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 1px 2px rgba(37,99,235,.25)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 2px 6px rgba(56,189,248,.45)); }
}
html.dark .suucar-map-svg .suucar-logo-img {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
.suucar-map-svg .dot,
.suucar-map-svg circle.dot,
.suucar-map-svg .dot-sm {
  stroke: #24402a;
  stroke-width: 0.65px;
}
html.dark .suucar-map-svg .dot,
html.dark .suucar-map-svg circle.dot,
html.dark .suucar-map-svg .dot-sm {
  stroke: none;
}

.suucar-map-svg .dot-jp, .suucar-map-svg circle.dot-jp { fill: #3b82f6; }
.suucar-map-svg .ring-jp { stroke: #6366f1; }
.suucar-map-svg .dot-mo, .suucar-map-svg circle.dot-mo { fill: #3b82f6; }



.suucar-map-stage.map-play-dock,
.hero-map-wrap .suucar-map-stage{
  position:relative;
}
.map-play-track{
  position:absolute;
  left:14px; right:14px; bottom:10px;
  height:3px;
  border-radius:999px;
  background:transparent;
  overflow:hidden;
  z-index:5;
  pointer-events:none;
}
html.dark .map-play-track{background:transparent}
.map-play-track .map-play-fill{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,#2563eb,#38bdf8);
}
.suucar-map-root.is-playing .map-play-track .map-play-fill,
.map-play-dock.is-playing .map-play-track .map-play-fill{
  animation:heroMapBar 15s linear forwards;
}
@keyframes heroMapBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.suucar-map-stage > .map-play-hero{
  position:absolute;
  left:max(14px, env(safe-area-inset-left)); right:auto; bottom:max(22px, calc(10px + env(safe-area-inset-bottom)));
  z-index:6;
  height:2.15rem;
  padding:0 .8rem 0 .7rem;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border:1px solid rgba(226,232,240,.9);
  border-radius:10px;
  background:rgba(255,255,255,.48);
  color:#1e40af;
  cursor:pointer;
  box-shadow:0 6px 18px -10px rgba(15,23,42,.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
html.dark .suucar-map-stage > .map-play-hero{
  background:rgba(15,23,42,.72);
  border-color:rgba(148,163,184,.28);
  color:#bfdbfe;
}
.suucar-map-stage > .map-play-hero:hover{
  background:rgba(255,255,255,.66);
  border-color:#bfdbfe;
}
.suucar-map-stage > .map-play-hero .icon{
  width:.85rem;height:.85rem;fill:currentColor;flex:none;
}
.suucar-map-stage > .map-play-hero .map-play-label{
  font-size:.75rem;font-weight:700;font-style:normal;letter-spacing:.04em;
}

.suucar-map-root.is-user-paused .map-play-track .map-play-fill,
.map-play-dock.is-user-paused .map-play-track .map-play-fill{
  animation-play-state:paused;
}

.suucar-map-root.is-hold-paused .map-play-hero{
  animation:mapPlayBeat 1.7s ease-in-out infinite;
}
.suucar-map-root.is-hold-paused .map-play-hero .icon{
  animation:mapPlayNudge 1.7s ease-in-out infinite;
  transform-origin:center;
}
@keyframes mapPlayBeat{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
@keyframes mapPlayNudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){
  .suucar-map-root.is-hold-paused .map-play-hero .icon{animation:none;}
}

.suucar-map-root.map-anim-paused .suucar-map-svg,
.suucar-map-root.map-anim-paused .suucar-map-svg *{
  filter:none !important;
}