:root {
  color-scheme: dark;
  --ground: #101113;
  --surface: #191a1e;
  --surface-deep: #111923;
  --ink: #f3eee3;
  --quiet: #c0b8a8;
  --gold: #efc889;
  --line: #534738;
  --blue: #a5c9de;
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--ground);
  color: var(--ink);
  scrollbar-color: var(--line) var(--ground);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-underline-offset: .22em; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
::selection { background: var(--gold); color: #221909; }
h1, h2, h3, p { margin: 0; }
h2, h3 { line-height: 1.28; }
.shell { width: min(100% - 64px, 1200px); margin-inline: auto; }
.skip { position: fixed; inset: 8px auto auto 12px; z-index: 3; padding: 8px 12px; background: var(--gold); color: #221909; transform: translateY(-150%); }
.skip:focus { transform: none; }
.masthead { border-bottom: 1px solid var(--line); }
.masthead-inner { min-height: 70px; display: flex; align-items: center; gap: 36px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; line-height: 1.22; }
.brand img { border-radius: 5px; }
.brand strong { display: block; font-size: 1.14rem; font-weight: 680; }
.brand-note { display: block; margin-top: 3px; color: var(--quiet); font-size: .78rem; }
.nav { display: flex; align-items: center; gap: 25px; margin-inline-start: auto; }
.nav a { color: var(--quiet); font-size: .94rem; text-decoration: none; }
.nav a:hover { color: var(--gold); text-decoration: underline; }
.locale { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; }
.locale button, .filters button { min-height: 38px; padding: 3px 12px; border: 0; border-radius: 4px; background: transparent; color: var(--quiet); font-size: .87rem; }
.locale button:hover, .filters button:hover { color: var(--ink); background: #2a241d; }
.locale [aria-pressed="true"], .filters [aria-pressed="true"] { background: var(--gold); color: #251b0b; font-weight: 680; }
.locale [aria-pressed="true"]:hover, .filters [aria-pressed="true"]:hover { background: #f5d8a8; color: #251b0b; }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; min-height: 206px; gap: 18px; padding: 20px 0 16px; }
.intro h1 { color: var(--ink); font-size: clamp(2.15rem, 4.3vw, 3.75rem); letter-spacing: -.032em; line-height: 1.12; font-weight: 740; text-wrap: balance; }
:lang(zh-CN) .intro h1 { letter-spacing: -.01em; }
.intro p { max-width: 67ch; margin-top: 13px; color: var(--quiet); font-size: clamp(.98rem, 1.5vw, 1.12rem); }
.lamp { display: block; justify-self: end; width: 220px; height: 168px; object-fit: contain; }
.section { margin-bottom: 66px; scroll-margin-block-start: 20px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px 24px; padding: 13px 0 16px; border-top: 1px solid var(--line); }
.section-heading h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 680; }
.section-heading p { margin-top: 3px; color: var(--quiet); font-size: .92rem; }
.section-heading .sample-flag { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--gold); font-size: .83rem; }
.sample-flag > span:first-child, .map-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.atlas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 30%); border: 1px solid var(--line); border-radius: 12px; overflow: clip; background: var(--surface); }
.map-pane { min-width: 0; display: grid; align-content: center; background: var(--surface-deep); }
.map-stage { position: relative; isolation: isolate; }
.world { display: block; width: 100%; height: auto; }
.markers { position: absolute; inset: 0; }
.marker { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; transform: translate(-50%, -50%); background: transparent; font-size: .73rem; font-weight: 750; color: var(--ink); }
.marker[hidden] { display: none; }
.marker::before { content: ""; position: absolute; width: 25px; height: 25px; border-radius: 50%; z-index: -1; border: 1px solid var(--gold); background: #352c20; }
.marker[aria-pressed="true"] { color: #271b0b; z-index: 1; }
.marker:hover::before, .marker[aria-pressed="true"]::before { background: var(--gold); box-shadow: 0 3px 13px #08090d; }
.marker[data-id="roads"] { left: 57.3%; top: 82.7%; }
.marker[data-id="seals"] { left: 54.9%; top: 76.3%; }
.marker[data-id="drainage"] { left: 69.8%; top: 25.9%; }
.marker[data-id="solar"] { left: 45.2%; top: 49.5%; }
.map-footer { display: flex; justify-content: space-between; gap: 8px 12px; padding: 10px 14px; border-top: 1px solid #334151; font-size: .79rem; color: var(--blue); }
.map-footer > span { display: inline-flex; gap: 8px; align-items: center; }
.detail { display: flex; flex-direction: column; min-width: 0; padding: 25px 23px 18px; border-inline-start: 1px solid var(--line); }
.detail-meta { color: var(--gold); font-size: .82rem; font-weight: 650; }
.detail h3 { margin-top: 9px; font-size: clamp(1.2rem, 2vw, 1.47rem); font-weight: 690; }
.detail-body { margin-top: 11px; color: var(--quiet); font-size: .96rem; }
.detail-controls { display: flex; flex-wrap: wrap; gap: 0 13px; align-items: center; margin-top: 12px; }
.edition { font-size: .79rem; color: var(--quiet); }
.text-action { min-height: 42px; padding: 0; border: 0; background: transparent; color: var(--gold); font-size: .87rem; font-weight: 660; text-decoration: underline; text-underline-offset: .22em; }
.text-action:hover { color: #ffe2aa; }
.detail-source { margin-top: auto; padding-top: 14px; color: var(--quiet); font-size: .76rem; }
.feed { margin-top: 25px; }
.feed-heading { display: flex; align-items: center; justify-content: space-between; gap: 9px 24px; }
.feed h3 { font-size: 1.26rem; }
.filters { display: flex; flex-wrap: wrap; gap: 3px; }
.feed-list { padding: 0; margin: 11px 0 0; list-style: none; border-top: 1px solid var(--line); }
.feed-list li { border-bottom: 1px solid var(--line); }
.feed-list button { display: grid; grid-template-columns: 31px minmax(0, 1fr) minmax(110px, 18%) 20px; gap: 8px 14px; align-items: center; width: 100%; min-height: 65px; padding: 10px 12px; border: 0; background: transparent; text-align: start; }
.feed-list button:hover, .feed-list button[aria-pressed="true"] { background: #24211d; }
.feed-number { color: var(--gold); font-size: .83rem; font-variant-numeric: tabular-nums; }
.feed-title { font-size: .99rem; font-weight: 640; line-height: 1.35; }
.feed-meta { color: var(--quiet); font-size: .83rem; }
.chevron { width: 12px; height: 12px; color: var(--gold); }
.progress { margin-bottom: 56px; }
.progress-list { margin: 0; }
.progress-row { display: grid; grid-template-columns: minmax(140px, 26%) minmax(0, 1fr); gap: 6px 26px; padding: 17px 0; border-top: 1px solid var(--line); }
.progress-row dt { font-weight: 680; color: var(--gold); }
.progress-row dd { max-width: 72ch; margin: 0; color: var(--quiet); }
.footer { border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 19px 0 26px; }
.footer p, .no-script { color: var(--quiet); font-size: .86rem; }

@media (max-width: 850px) {
  .shell { width: calc(100% - 42px); }
  .intro { grid-template-columns: minmax(0, 1fr) 150px; min-height: 175px; }
  .lamp { width: 150px; height: 132px; }
  .atlas { grid-template-columns: 1fr; }
  .detail { min-height: 180px; border-inline-start: 0; border-top: 1px solid var(--line); padding: 18px 19px 16px; }
  .marker[data-id="roads"] { translate: 7px 7px; }
  .marker[data-id="seals"] { translate: -6px -6px; }
}
@media (max-width: 560px) {
  .shell { width: calc(100% - 32px); }
  .masthead-inner { min-height: 64px; gap: 9px; justify-content: space-between; }
  .brand { gap: 7px; }
  .brand img { width: 38px; height: 38px; }
  .brand strong { font-size: 1rem; }
  .nav { display: none; }
  .locale button { padding: 2px 8px; }
  .intro { grid-template-columns: minmax(0, 1fr) 76px; gap: 5px; min-height: 0; padding: 23px 0 20px; }
  .intro h1 { font-size: clamp(1.64rem, 7.1vw, 2.22rem); }
  .intro p { margin-top: 10px; font-size: .89rem; }
  .lamp { align-self: start; width: 76px; height: 104px; }
  .section { margin-bottom: 41px; }
  .section-heading, .feed-heading { flex-wrap: wrap; align-items: start; }
  .section-heading p { font-size: .86rem; }
  .map-footer { padding: 8px 10px; font-size: .72rem; }
  .marker[data-id="roads"] { translate: 11px 7px; }
  .marker[data-id="seals"] { translate: -9px -9px; }
  .detail { padding: 14px 15px; }
  .feed { margin-top: 21px; }
  .filters button { padding: 2px 7px; font-size: .79rem; }
  .feed-list button { grid-template-columns: 23px minmax(0, 1fr) 11px; gap: 3px 8px; padding-inline: 6px; }
  .feed-meta { grid-column: 2; }
  .chevron { grid-row: 1 / span 2; grid-column: 3; }
  .progress-row { grid-template-columns: 1fr; padding-block: 14px; }
}