:root {
  /* FRAME brand palette and type (mirrors site/static/style.css's --paper /
     --ink / --accent / --sans tokens, duplicated here so this page still
     renders correctly when generated standalone, outside the site build).
     --at-shade and --at-target keep their own values: they carry map-data
     meaning (a highlighted country, an "aimed at" marker) rather than brand
     color, and the accent-soft rgba keeps --at-accent's new hue. */
  --at-surface: #f7f5f0;
  --at-panel: #efece4;
  --at-rule: #dcdad4;
  --at-land: #d9d9d6;
  --at-land-edge: #f7f5f0;
  --at-shade: #d9c8b4;
  --at-ink: #0b0b0b;
  --at-ink-2: #4a4a4a;
  --at-muted: #6f6f6f;
  --at-accent: #c8102e;
  --at-accent-soft: rgba(200, 16, 46, 0.16);
  --at-target: #2f6fa3;
  --at-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --at-serif: var(--at-sans);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --at-surface: #0b0b0b; --at-panel: #161615; --at-rule: #2e2e2c; --at-land: #262625; --at-land-edge: #0b0b0b;
    --at-shade: #4a3f35; --at-ink: #f7f5f0; --at-ink-2: #d9d9d6; --at-muted: #9a9a98; --at-accent: #e14a5f;
    --at-accent-soft: rgba(225, 74, 95, 0.2); --at-target: #4f8fc9;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --at-surface: #0b0b0b; --at-panel: #161615; --at-rule: #2e2e2c; --at-land: #262625; --at-land-edge: #0b0b0b;
  --at-shade: #4a3f35; --at-ink: #f7f5f0; --at-ink-2: #d9d9d6; --at-muted: #9a9a98; --at-accent: #e14a5f;
  --at-accent-soft: rgba(225, 74, 95, 0.2); --at-target: #4f8fc9;
  color-scheme: dark;
}

* { box-sizing: border-box; }
.at-page { max-width: 1320px; margin: 0 auto; padding: 32px 16px 64px; }
.at-eyebrow, .at-chip, .at-panel h2, .at-label, .at-key, button, select, .at-list, .at-tl, .at-tip { font-family: var(--at-sans); }
.at-eyebrow { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--at-muted); margin: 0 0 6px; }
h1 { font: 600 clamp(28px, 4vw, 40px)/1.15 var(--at-sans); margin: 0 0 10px; }
.at-lede { max-width: 70ch; color: var(--at-ink-2); margin: 0 0 20px; }

.at-controls { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin: 0 0 12px; }
.at-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.at-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--at-rule); border-radius: 999px; background: transparent; color: var(--at-ink);
  font-size: 14px; cursor: pointer;
}
.at-chip:hover { border-color: var(--at-muted); }
.at-chip[aria-pressed="false"] { color: var(--at-muted); text-decoration: line-through; }
.at-chip[aria-pressed="true"] { border-color: var(--at-ink); }
.at-chip .at-n { color: var(--at-muted); font-variant-numeric: tabular-nums; }
.at-select { display: flex; align-items: center; gap: 8px; font: 14px var(--at-sans); color: var(--at-muted); }
.at-select select {
  min-height: 36px; padding: 6px 10px; font: 14px var(--at-sans); color: var(--at-ink);
  background: var(--at-panel); border: 1px solid var(--at-rule); border-radius: 6px; max-width: 260px;
}
.at-toggle { display: inline-flex; align-items: center; gap: 8px; font: 14px var(--at-sans); color: var(--at-ink-2); cursor: pointer; min-height: 36px; }
.at-toggle input { width: 18px; height: 18px; accent-color: var(--at-accent); }

.at-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
@media (max-width: 960px) { .at-grid { grid-template-columns: 1fr; } }

.at-mapwrap { position: relative; border: 1px solid var(--at-rule); border-radius: 6px; overflow: hidden; background: var(--at-surface); }
.at-map { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.at-map.zoomed { touch-action: none; }
.at-map.dragging { cursor: grabbing; }
.at-land { fill: var(--at-land); stroke: var(--at-land-edge); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.at-land.shade { fill: var(--at-shade); }
.at-land.hot { fill: var(--at-shade); stroke: var(--at-ink-2); stroke-width: 1; }
.at-arc { fill: none; stroke: var(--at-accent); stroke-opacity: 0.4; vector-effect: non-scaling-stroke; stroke-linecap: round; cursor: pointer; }
.at-arc.region { stroke-dasharray: 4 4; }
.at-arc:hover, .at-arc.hot { stroke-opacity: 0.95; }
.at-arc-hit { fill: none; stroke: transparent; stroke-width: 12; vector-effect: non-scaling-stroke; cursor: pointer; }
.at-spot { cursor: pointer; outline: none; }
.at-spot .made { fill: var(--at-accent); stroke: var(--at-surface); vector-effect: non-scaling-stroke; stroke-width: 2; }
.at-spot .aimed { fill: none; stroke: var(--at-target); vector-effect: non-scaling-stroke; stroke-width: 2; }
.at-spot .hit { fill: transparent; }
.at-spot text { font: 600 11px var(--at-sans); fill: #fff; pointer-events: none; text-anchor: middle; dominant-baseline: central; }
.at-spot:focus-visible .made, .at-spot:focus-visible .aimed, .at-spot.active .made, .at-spot.active .aimed { stroke: var(--at-ink); stroke-width: 3; }
.is-focused .at-spot.dim { opacity: 0.2; }
.is-focused .at-arc.dim { stroke-opacity: 0.07; }
.at-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
.at-zoom button {
  width: 36px; height: 36px; border: 1px solid var(--at-rule); border-radius: 6px; background: var(--at-panel);
  color: var(--at-ink); font-size: 18px; line-height: 1; cursor: pointer;
}
.at-zoom button:hover { border-color: var(--at-muted); }
.at-key { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--at-muted); margin: 8px 0 0; align-items: center; }
.at-key span { display: inline-flex; align-items: center; gap: 6px; }
.at-key svg { flex: none; }

.at-tl { margin-top: 16px; }
.at-tl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.at-tl-head h2 { font: 600 16px var(--at-sans); margin: 0; }
.at-range { font: 600 15px var(--at-sans); color: var(--at-accent); font-variant-numeric: tabular-nums; }
.at-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.at-presets button {
  border: 1px solid var(--at-rule); border-radius: 999px; background: transparent; color: var(--at-ink);
  font-size: 13px; padding: 5px 11px; min-height: 32px; cursor: pointer; white-space: nowrap;
}
.at-presets button:hover { border-color: var(--at-muted); }
.at-presets button[aria-pressed="true"] { background: var(--at-ink); color: var(--at-surface); border-color: var(--at-ink); }
.at-strip { display: block; width: 100%; overflow: visible; }
.at-strip text { font: 11px var(--at-sans); fill: var(--at-muted); }
.at-strip .era { fill: var(--at-panel); }
.at-strip .era.alt { fill: var(--at-surface); }
.at-strip .era-edge { stroke: var(--at-rule); }
.at-strip .bar { fill: var(--at-ink-2); }
.at-strip .evt-tick { fill: var(--at-shade); }
.at-strip .brush { fill: var(--at-accent-soft); stroke: var(--at-accent); stroke-width: 1.5; cursor: grab; }
.at-strip .handle { fill: var(--at-accent); cursor: ew-resize; outline: none; }
.at-strip .handle:focus-visible { stroke: var(--at-ink); stroke-width: 2; }
.at-strip .lane-label { font-weight: 600; fill: var(--at-ink-2); }
.at-strip .lane-rule { stroke: var(--at-rule); }
.at-strip .dot { fill: var(--at-ink-2); cursor: pointer; }
.at-strip .dot:hover, .at-strip .dot.active { fill: var(--at-accent); }
.at-strip .stack { fill: var(--at-ink-2); cursor: pointer; }
.at-strip .stack:hover { fill: var(--at-accent); }
.at-strip .span { fill: var(--at-ink-2); opacity: 0.5; cursor: pointer; }
.at-strip .evt { fill: var(--at-shade); cursor: pointer; }
.at-strip .evt:hover, .at-strip .evt.active { fill: var(--at-accent); }
.at-strip .evt-label { fill: var(--at-ink); pointer-events: none; }
.at-strip .tick { stroke: var(--at-rule); }
.at-strip .hit { fill: transparent; cursor: pointer; }
.at-strip .gap { fill: var(--at-muted); font-style: italic; }

.at-panel { position: sticky; top: 16px; background: var(--at-panel); border: 1px solid var(--at-rule); border-radius: 6px; padding: 20px; min-height: 260px; max-height: calc(100vh - 32px); overflow-y: auto; }
@media (max-width: 960px) { .at-panel { position: static; max-height: none; } }
.at-panel h2 { font-size: 21px; font-weight: 600; margin: 4px 0 6px; line-height: 1.25; }
.at-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--at-muted); margin: 14px 0 4px; }
.at-panel p { margin: 0 0 8px; }
.at-kicker { font: 600 12px var(--at-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--at-accent); }
.at-meta { color: var(--at-muted); font-size: 15px; }
.at-panel img { display: block; max-width: 100%; margin: 10px 0; border-radius: 3px; background: var(--at-land); }
.at-hero { width: 100%; max-height: 460px; object-fit: contain; }
.at-more-img { width: 100%; max-height: 220px; object-fit: contain; }
.at-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 14px; }
.at-thumbs button { display: block; width: 100%; padding: 0; border: 0; background: var(--at-land); cursor: pointer; }
.at-thumbs img { width: 100%; height: 92px; margin: 0; object-fit: cover; }
.at-row-img { width: 54px; height: 54px; margin: 0; object-fit: cover; flex: none; }
.at-route { font: 15px var(--at-sans); color: var(--at-ink-2); }
.at-route b { color: var(--at-ink); }
.at-techs { display: flex; flex-wrap: wrap; gap: 6px; }
.at-techs button { border: 1px solid var(--at-rule); border-radius: 999px; background: var(--at-surface); color: var(--at-ink); font-size: 13px; padding: 4px 10px; cursor: pointer; }
.at-techs button:hover { border-color: var(--at-accent); }
.at-open { display: inline-block; margin-top: 14px; padding: 9px 14px; border-radius: 4px; text-decoration: none; background: var(--at-ink); color: var(--at-surface); font: 600 14px var(--at-sans); }
.at-open:hover { background: var(--at-accent); }
.at-back { background: none; border: 0; color: var(--at-muted); font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline; }
.at-note { font-size: 14px; color: var(--at-muted); font-style: italic; }
.at-src { font: 13px var(--at-sans); }
.at-src a, .at-panel a:not(.at-open) { color: var(--at-ink); }
.at-list { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; }
.at-list li + li { border-top: 1px solid var(--at-rule); }
.at-list button { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: none; color: var(--at-ink); font: inherit; text-align: left; padding: 7px 0; cursor: pointer; }
.at-list button:hover .at-t { text-decoration: underline; }
.at-list .at-when { display: block; color: var(--at-muted); font-size: 12px; }
.at-list .at-t { display: block; line-height: 1.35; }
.at-counts { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font: 14px var(--at-sans); margin: 4px 0 16px; }
.at-counts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--at-ink-2); }
.at-counts dt { color: var(--at-ink-2); }
.at-more { border: 0; background: none; color: var(--at-muted); font: 13px var(--at-sans); cursor: pointer; padding: 6px 0; text-decoration: underline; }

.at-table { margin-top: 24px; }
.at-table summary { font: 600 15px var(--at-sans); cursor: pointer; }
.at-table table { width: 100%; border-collapse: collapse; font: 14px var(--at-sans); margin-top: 8px; }
.at-table th, .at-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--at-rule); vertical-align: top; }
.at-table th { color: var(--at-muted); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.at-table td a { color: var(--at-ink); }
.at-tablewrap { overflow-x: auto; }
.at-fine { font: 13px var(--at-sans); color: var(--at-muted); margin-top: 24px; max-width: 80ch; }

.at-tip {
  position: fixed; z-index: 10; pointer-events: none; max-width: 280px; padding: 7px 10px; border-radius: 4px;
  background: var(--at-ink); color: var(--at-surface); font-size: 13px; line-height: 1.35; opacity: 0; transition: opacity 80ms;
}
.at-tip.on { opacity: 1; }
.at-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (forced-colors: active) {
  .at-spot .made { fill: CanvasText; } .at-arc { stroke: CanvasText; } .at-strip .brush { stroke: Highlight; }
}