:root { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

.article-theme-toggle {
  position: fixed;
  right: 16px;
  top: 14px;
  z-index: 9999;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(15, 23, 42, .82);
  color: #f8fbff;
  font: 800 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

html[data-theme="light"] .article-theme-toggle {
  border-color: rgba(15,23,42,.16);
  background: rgba(255,255,255,.9);
  color: #17212b;
  box-shadow: 0 10px 26px rgba(15,23,42,.12);
}

html[data-theme="dark"] body,
html[data-theme="dark"] body > section {
  background: #0b1020 !important;
}

html[data-theme="dark"] main,
html[data-theme="dark"] article,
html[data-theme="dark"] .page {
  background: #0b1020 !important;
  color: #dbe7f6 !important;
}

html[data-theme="dark"] .cover {
  background: #10192c !important;
  border-color: rgba(125, 211, 252, .22) !important;
}

html[data-theme="dark"] body > section {
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 24px 70px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] section[style*="background: #fff"],
html[data-theme="dark"] section[style*="background:#fff"],
html[data-theme="dark"] section[style*="background: #f8"],
html[data-theme="dark"] section[style*="background:#f8"],
html[data-theme="dark"] section[style*="background: #f4"],
html[data-theme="dark"] section[style*="background:#f4"],
html[data-theme="dark"] section[style*="background: #edf"],
html[data-theme="dark"] section[style*="background:#edf"],
html[data-theme="dark"] div[style*="background: #fff"],
html[data-theme="dark"] div[style*="background:#fff"],
html[data-theme="dark"] div[style*="background: #f8"],
html[data-theme="dark"] div[style*="background:#f8"],
html[data-theme="dark"] div[style*="background: #f4"],
html[data-theme="dark"] div[style*="background:#f4"],
html[data-theme="dark"] div[style*="background: #edf"],
html[data-theme="dark"] div[style*="background:#edf"] {
  background: #10192c !important;
  border-color: rgba(125, 211, 252, .22) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] li,
html[data-theme="dark"] figcaption,
html[data-theme="dark"] .dek {
  color: #dbe7f6 !important;
}

html[data-theme="dark"] p[style*="color: #6f7d89"],
html[data-theme="dark"] p[style*="color: #53616f"],
html[data-theme="dark"] p[style*="color: #8a9bad"] {
  color: #a8b7cc !important;
}

html[data-theme="dark"] section[style*="background: #edf5f8"],
html[data-theme="dark"] section[style*="background: #f7f3ea"],
html[data-theme="dark"] section[style*="background:#edf5f8"],
html[data-theme="dark"] section[style*="background:#f7f3ea"] {
  background: #131d31 !important;
  border-color: rgba(125, 211, 252, .34) !important;
}

p[style*="background: #f4f8fb"],
p[style*="background:#f4f8fb"],
p[style*="background: #f8f5ef"],
p[style*="background:#f8f5ef"] {
  background: transparent !important;
  border-left: 3px solid #5baad0 !important;
  border-radius: 0 !important;
  margin: 10px 0 16px !important;
  padding: 2px 0 2px 13px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #526170 !important;
}

html[data-theme="dark"] p[style*="background: #f4f8fb"],
html[data-theme="dark"] p[style*="background:#f4f8fb"],
html[data-theme="dark"] p[style*="background: #f8f5ef"],
html[data-theme="dark"] p[style*="background:#f8f5ef"] {
  color: #c8d5e7 !important;
}

html[data-theme="dark"] section[style*="border-top"],
html[data-theme="dark"] section[style*="border-bottom"] {
  border-color: rgba(125, 211, 252, .34) !important;
}

html[data-theme="dark"] img {
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.32) !important;
}

strong.auto-emphasis,
strong[style] {
  font-weight: 900 !important;
  padding: 0 .04em;
  border-radius: 4px;
}

html[data-theme="dark"] strong,
html[data-theme="dark"] strong[style] {
  color: var(--emphasis-color, #9ee7c0) !important;
  text-shadow: 0 0 18px color-mix(in srgb, var(--emphasis-color, #9ee7c0) 20%, transparent);
}

html[data-theme="light"] strong.auto-emphasis {
  color: var(--emphasis-light, #137654) !important;
}

strong.auto-emphasis.accent-0 { --emphasis-color: #7dd3fc; --emphasis-light: #0b67c2; }
strong.auto-emphasis.accent-1 { --emphasis-color: #9ee7c0; --emphasis-light: #137654; }
strong.auto-emphasis.accent-2 { --emphasis-color: #c4f08a; --emphasis-light: #437314; }
strong.auto-emphasis.accent-3 { --emphasis-color: #f0a6ca; --emphasis-light: #9b2f62; }
strong.auto-emphasis.accent-4 { --emphasis-color: #a7f3d0; --emphasis-light: #087857; }

a,
a:hover,
a:focus,
strong,
em,
i,
.auto-emphasis,
.auto-english {
  text-decoration: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
}

em,
i,
.auto-english,
p[style*="font-style: italic"],
p[style*="font-family: Georgia"],
p[style*="font-family: Optima"] {
  font-style: italic !important;
}

html[data-theme="dark"] em,
html[data-theme="dark"] i,
html[data-theme="dark"] .auto-english,
html[data-theme="dark"] p[style*="font-style: italic"],
html[data-theme="dark"] p[style*="font-family: Georgia"],
html[data-theme="dark"] p[style*="font-family: Optima"] {
  color: #dbe7f6 !important;
}

.auto-caption {
  margin: 9px 0 20px !important;
  padding-left: 10px !important;
  border-left: 3px solid #5baad0 !important;
  font: italic 12px/1.65 Optima-Regular, "PingFang SC", serif !important;
  letter-spacing: .2px !important;
  color: #6f7d89 !important;
}

html[data-theme="dark"] .auto-caption {
  color: #b6c5d8 !important;
}

.article-map-panel {
  margin: 12px 0 30px;
}

.article-map-window {
  overflow: hidden;
  border: 5px solid rgba(255,255,255,.88);
  border-radius: 8px;
  background: #a8d4e8;
  box-shadow: 0 12px 30px rgba(15,23,42,.14);
}

html[data-theme="dark"] .article-map-window {
  border-color: rgba(255,255,255,.86);
  background: #1b2943;
  box-shadow: 0 18px 42px rgba(0,0,0,.34);
}

.article-map-window.article-map-progress-experiment {
  border-color: rgba(255,255,255,.82);
  background: #333b52;
  box-shadow: 0 18px 42px rgba(0,0,0,.34);
}

.article-map-window.article-map-snapshot + .article-map-caption {
  margin-bottom: 18px;
}

.article-map-window.article-map-force-light {
  border-color: rgba(255,255,255,.94);
  background: #a8d4e8;
  box-shadow: 0 12px 30px rgba(15,23,42,.14);
}

html[data-theme="dark"] .article-map-window.article-map-force-light {
  background: #a8d4e8;
  box-shadow: 0 12px 30px rgba(15,23,42,.14);
}

.article-map-window.article-map-force-dark {
  border-color: rgba(255,255,255,.82);
  background: #333b52;
  box-shadow: 0 18px 42px rgba(0,0,0,.34);
}

.article-map-window svg {
  display: block;
  width: 100%;
  height: auto;
}

.article-map-window .article-map-highlight {
  fill: #f06a4f !important;
  stroke: #e8f7ff !important;
  stroke-width: 5 !important;
  filter: drop-shadow(0 0 8px rgba(125, 211, 252, .55));
}

.article-map-window .article-map-current-state {
  stroke: #10151f !important;
  stroke-width: 5.8 !important;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .55));
}

.article-map-window.article-map-progress-experiment .article-map-current-state {
  stroke: #9ee7c0 !important;
  stroke-width: 1.7 !important;
  filter: drop-shadow(0 0 3px rgba(158, 231, 192, .55));
}

.article-map-window.article-map-force-light .article-map-current-state {
  stroke: #17202b !important;
  stroke-width: 1.55 !important;
  filter: drop-shadow(0 0 3px rgba(23, 32, 43, .24));
}

.article-map-window.article-map-progress-experiment .article-map-progress-current {
  opacity: 1 !important;
}

.article-map-window .article-map-marker-glow {
  fill: rgba(255, 83, 64, .24);
  stroke: none;
}

.article-map-window .article-map-marker-ring {
  fill: none;
  stroke: #e8f7ff;
  stroke-width: 3.2;
}

.article-map-window .article-map-marker {
  fill: #ff4f43;
  stroke: #e8f7ff;
  stroke-width: 3;
  filter: drop-shadow(0 0 7px rgba(125, 211, 252, .5));
}

.article-map-window .article-map-progress-dot-glow {
  fill: rgba(255, 59, 48, .28);
  stroke: none;
  pointer-events: none;
}

.article-map-window .article-map-progress-dot {
  fill: #ff3b30;
  stroke: #fff;
  stroke-width: 1.5;
  pointer-events: none;
}

.article-map-window .article-map-progress-dot-current {
  stroke: #e8f7ff;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 5px rgba(125, 211, 252, .48));
}

.article-map-window .article-map-label {
  fill: #0f172a;
  stroke: #e8f7ff;
  stroke-width: 6;
  paint-order: stroke;
  font: 900 44px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.article-map-window .article-map-small-label {
  fill: #0f172a;
  stroke: #e8f7ff;
  stroke-width: 4;
  paint-order: stroke;
  font: 900 24px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .2px;
}

.article-map-window.article-map-progress-experiment .article-map-label {
  fill: #f8fbff;
  stroke: rgba(19, 27, 43, .72);
  stroke-width: 6.5;
}

.article-map-window.article-map-force-dark .article-map-small-label {
  fill: #f8fbff;
  stroke: rgba(19, 27, 43, .82);
  stroke-width: 4.6;
}

.article-map-window .article-world-land path {
  transition: fill .2s ease, opacity .2s ease, stroke .2s ease;
}

.article-map-window .article-world-current-country {
  filter: drop-shadow(0 0 5px rgba(158, 231, 192, .52));
}

.article-map-caption {
  margin: 9px 0 0;
  padding-left: 10px;
  border-left: 3px solid #5baad0;
  color: #6f7d89;
  font: italic 12px/1.65 Optima-Regular, "PingFang SC", serif;
  letter-spacing: .2px;
}

html[data-theme="dark"] .article-map-caption {
  color: #b6c5d8;
}

.article-map-world {
  padding: 22px 24px;
  border: 1px solid rgba(125,211,252,.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(125,211,252,.16), rgba(158,231,192,.08)),
    #10192c;
  color: #dbe7f6;
}

.article-map-world b {
  display: block;
  margin-bottom: 6px;
  color: #9ee7c0;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.article-map-world span {
  display: block;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 900;
}

@media (max-width: 640px) {
  .article-theme-toggle { right: 10px; top: 10px; padding: 7px 10px; }
  body > section { padding-top: 54px !important; }
  .article-map-window { border-width: 4px; }
  .article-map-world { padding: 18px; }
}