:root {
  --bg: #f7f8fa; --surface: #ffffff; --ink: #1b2330; --muted: #5b6676; --line: #dfe4ea;
  --accent: #1f5fbf; --series: #1f5fbf; --warn-bg: #fff4dc; --warn-ink: #7a4b00;
  --ok-ink: #1c6b3c; --err-ink: #a32020;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11151b; --surface: #1a2029; --ink: #e8ecf1; --muted: #9aa5b4; --line: #303947;
    --accent: #7fb0f5; --series: #7fb0f5; --warn-bg: #3a2c10; --warn-ink: #f5cf8a;
    --ok-ink: #7ed6a2; --err-ink: #f5a3a3;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 system-ui, "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
a { color: var(--accent); }
.top { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; color: var(--ink); text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; gap: 16px; flex: 1; }
.top nav a { text-decoration: none; }
main { max-width: 1100px; margin: 0 auto; padding: 24px; }
h1 { font-size: 1.6rem; line-height: 1.3; margin: 0 0 16px; }
h2 { font-size: 1.15rem; margin: 32px 0 12px; }
.muted { color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 24px; }
.tiles div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
.tiles dt { color: var(--muted); font-size: .85rem; }
.tiles dd { margin: 0; font-size: 1.25rem; font-weight: 600; }
.scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
table.tight td { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; white-space: nowrap; }
.s-persistent, .s-proximity { border-color: var(--accent); color: var(--accent); }
.s-closed { color: var(--muted); }
.warn, .note { background: var(--warn-bg); color: var(--warn-ink); padding: 10px 14px; border-radius: 8px; }
.ok { color: var(--ok-ink); }
.error { color: var(--err-ink); }
.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: 8px; padding: 32px; text-align: center; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
input, select, button { font: inherit; color: inherit; padding: 8px 12px; min-height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
button { background: var(--accent); border-color: var(--accent); color: var(--surface); cursor: pointer; }
button.ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.check { display: flex; gap: 6px; align-items: center; }
.check input { min-height: 0; }
.pager { display: flex; gap: 16px; justify-content: center; margin-top: 16px; }
.login { max-width: 360px; margin: 12vh auto 0; }
.login-lang { text-align: right; margin: 0; }
.login form { display: grid; gap: 10px; }
.chart { position: relative; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart figcaption { font-size: .85rem; margin-top: 4px; }
.grid { stroke: var(--line); stroke-width: 1; }
.tick { fill: var(--muted); font-size: 12px; }
.trend { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; }
.dot { fill: var(--series); stroke: var(--surface); stroke-width: 2; }
.hit { fill: transparent; cursor: pointer; }
.hit:focus { outline: none; stroke: var(--series); }
.tip { position: absolute; transform: translate(-50%, -130%); background: var(--ink); color: var(--bg); padding: 4px 8px; border-radius: 6px; font-size: .82rem; white-space: nowrap; pointer-events: none; }
footer { max-width: 1100px; margin: 0 auto; padding: 16px 24px 32px; color: var(--muted); font-size: .82rem; }
footer p { margin: 4px 0; }
.ghost-link { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); text-decoration: none; }
main section { scroll-margin-top: 16px; }
.hero { padding: 48px 0 32px; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.2; margin: 0 0 16px; }
.eyebrow { color: var(--accent); font-weight: 600; margin: 0 0 8px; }
.lead { font-size: 1.15rem; max-width: 42em; }
.cta { display: inline-block; margin-top: 8px; padding: 10px 20px; border-radius: 8px; background: var(--accent); color: var(--surface); text-decoration: none; font-weight: 600; }
.small { font-size: .85rem; }
.hero.compact { padding: 32px 0 8px; }
.hero.compact .note { max-width: 46em; }
.feature { display: grid; gap: 4px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--accent); border-radius: 8px; color: var(--ink); text-decoration: none; }
.feature .eyebrow { margin: 0; }
.feature strong { font-size: 1.25rem; }
.feature + .feature { margin-top: 12px; }
.materials { list-style: none; padding: 0; margin: 12px 0; }
.materials li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.materials li > a { font-weight: 600; }
.materials li > span { display: block; color: var(--muted); }
.feature .more { color: var(--accent); font-weight: 600; margin-top: 6px; }
main:has(.viewer) { max-width: none; padding: 0; }
.viewer { position: relative; display: grid; grid-template-columns: 1fr 320px; grid-template-rows: minmax(0, 1fr); height: calc(100vh - 70px); min-height: 520px; }
.globe { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #000; }
.globe > .cesium-viewer { position: absolute; inset: 0; }
.globe .cesium-viewer, .globe .cesium-widget, .globe canvas { width: 100%; height: 100%; }
.orbit-panel { overflow-y: auto; padding: 16px; background: var(--surface); border-left: 1px solid var(--line); }
.orbit-panel h1 { font-size: 1.25rem; margin: 0 0 4px; }
.orbit-panel h2 { font-size: 1rem; margin: 0 0 6px; }
.orbit-panel input[type=search] { width: 100%; margin: 4px 0; }
.results { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; }
.results button { width: 100%; min-height: 36px; text-align: left; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip { min-height: 34px; padding: 4px 10px; font-size: .85rem; background: transparent; color: var(--ink); border-color: var(--line); border-radius: 999px; }
.legend { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 10px 0; font-size: .9rem; }
.legend label, .legend p { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.legend input { min-height: 0; }
.legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.c0, .ca { background: #4f8ae0; } .c1 { background: #27a662; } .c2, .cb { background: #c47c12; } .c3 { background: #c84d82; }
.info { border-top: 1px solid var(--line); padding-top: 10px; margin: 10px 0; }
.info dl, .info.static { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: .9rem; }
.info dt { color: var(--muted); }
.info dd { margin: 0; font-variant-numeric: tabular-nums; }
.viewer-event { height: 62vh; min-height: 440px; }
.rtn { position: relative; max-width: 1200px; margin: 0 auto; padding: 24px; }
.rtn h2 { margin-top: 0; }
.rtn-controls { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin: 8px 0 16px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.seg > span { color: var(--muted); font-size: .85rem; }
.seg .chip { color: var(--ink); background: transparent; }
.seg .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.rtn-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.rtn-stats dd { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.rtn-charts { display: grid; gap: 12px; grid-template-columns: minmax(0, 720px); }
.rtn-charts.all { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rtn-charts svg, #rtn-range svg { touch-action: pan-y; }
.axis0 { stroke: var(--muted); stroke-width: 1; }
.axis-title { fill: var(--muted); font-size: 13px; }
.rtn .tick { font-size: 12px; }
.rtn figure.chart { min-width: 0; }
.mark-label { fill: var(--ink); font-size: 13px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.pt-start { fill: var(--surface); stroke: var(--series); stroke-width: 2; }
.pt-close { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.pt-origin { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.rtn-data { margin: 16px 0; }
.rtn-data summary { cursor: pointer; color: var(--accent); margin-bottom: 8px; }
.conf-high { border-color: var(--ok-ink); color: var(--ok-ink); }
.conf-medium { border-color: var(--warn-ink); color: var(--warn-ink); }
.conf-low { border-color: var(--err-ink); color: var(--err-ink); }
.lang-switch { color: var(--muted); text-decoration: none; white-space: nowrap; font-size: .9rem; }
.case-picker { width: 100%; max-width: 480px; margin: 4px 0 8px; display: block; }
.case-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.case-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; }
.case-card h4 { margin: 0 0 8px; font-size: 1.05rem; }
.case-card p { margin: 6px 0; }
.group-row td { background: var(--bg); font-weight: 600; }
.linklike { min-height: 0; padding: 0; border: 0; background: transparent; color: var(--accent); text-decoration: underline; text-align: left; font: inherit; }
main:not(:has(.viewer)) section.rtn { padding-left: 0; padding-right: 0; }
.obs-stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.obs-hud { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 8px 12px; color: #f2f5f9; background: rgba(0, 0, 0, .68); border-radius: 6px; font-size: .875rem; }
.obs-hud h2 { margin: 0 0 4px; font-size: .875rem; }
.obs-hud ul { list-style: none; margin: 0; padding: 0; }
.obs-hud li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 1px 0; font-variant-numeric: tabular-nums; }
.obs-hud li[hidden] { display: none; }
.obs-hud small { color: #ffd9a0; }
.obs-hud form { display: flex; gap: 4px; align-items: center; margin-top: 6px; }
.obs-hud form[hidden] { display: none; }
.obs-hud select { max-width: 150px; font-size: .8125rem; color: #f2f5f9; background: #1a2029; border: 1px solid #5a6675; }
.obs-inset { position: absolute; right: 12px; top: 12px; width: min(320px, 36%); margin: 0; padding: 6px 8px; color: #f2f5f9; background: rgba(0, 0, 0, .78); border: 1px solid #f2f5f9; font-size: .8125rem; }
.obs-inset[hidden] { display: none; }
.obs-inset svg { display: block; width: 100%; height: auto; }
.obs-chart-box { position: relative; display: flex; gap: 10px; margin: 6px 0 0; }
#obs-chart { flex: 1 1 0; min-width: 0; height: 130px; cursor: pointer; }
.obs-chart-key { list-style: none; margin: 0; padding: 0; font-size: .8125rem; }
.obs-chart-key li { display: flex; align-items: center; gap: 6px; }
.obs-chart-key i { display: inline-block; width: 16px; height: 3px; }
.obs-chart-key .s0 { background: #ff6b6b; } .obs-chart-key .s1 { background: #ffd34d; } .obs-chart-key .s2 { background: #4fd18b; } .obs-chart-key .s3 { background: #6fb7ff; }
.obs-x, .obs-plus { min-width: 24px; min-height: 24px; padding: 0; color: inherit; background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; }
.obs-x:hover, .obs-plus:hover { border-color: #f2f5f9; }
.sr { display: inline-flex; font-size: 0; }
.sr select { font-size: .8125rem; }
.obs-bar { padding: 8px 12px; background: var(--surface); border-top: 1px solid var(--line); }
.obs-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.obs-clock { margin-left: auto; font-variant-numeric: tabular-nums; }
.obs-timeline { position: relative; height: 44px; margin-top: 6px; }
.obs-timeline svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.obs-timeline input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: none; cursor: pointer; }
.obs-spark { fill: none; stroke: var(--series); stroke-width: 2; vector-effect: non-scaling-stroke; }
.obs-close-line { stroke: var(--err-ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.obs-legend { margin: 4px 0 0; }
.obs-objects { list-style: none; margin: 0 0 12px; padding: 0; }
.obs-objects li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.obs-objects li > div { display: flex; align-items: center; gap: 6px; }
.obs-objects li > div label:last-child { margin-left: auto; font-size: .8125rem; white-space: nowrap; }
.obs-objects i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 2px; }
.obs-objects p { margin: 2px 0 0; }
.observe .orbit-panel h2 { margin-top: 14px; }
.observe .check { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.obs-scenes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.obs-scenes li { display: grid; gap: 2px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.timeline { padding-left: 1.2em; }
.timeline li { margin: 8px 0; }
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 16px 0; }
.compare article, .steps li { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; }
.compare h3, .steps h3 { margin: 0 0 8px; font-size: 1.1rem; }
.compare h3 span { color: var(--muted); font-size: .85rem; font-weight: 400; }
.compare dt { color: var(--muted); font-size: .85rem; margin-top: 10px; }
.compare dd { margin: 0; }
.compare ul { margin: 0; padding-left: 1.2em; }
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; padding: 0; margin: 16px 0; }
.steps li { counter-increment: step; }
.steps h3::before { content: counter(step) ". "; color: var(--accent); }
.steps p { margin: 0; }
h3.sub { margin: 24px 0 8px; font-size: 1.05rem; }
.uses, .sources { padding-left: 1.2em; }
.uses li, .sources li { margin: 6px 0; }
@media (max-width: 640px) {
  .viewer { grid-template-columns: 1fr; grid-template-rows: 60vh auto; height: auto; }
  .viewer.observe { grid-template-rows: auto auto; }
  .obs-stage { grid-template-rows: 52vh auto auto; }
  .obs-hud { position: static; transform: none; max-width: none; border-radius: 0; background: #000; order: 1; }
  .obs-bar { order: 2; }
  .rtn { padding: 16px; }
  .rtn .tick { font-size: 12px; }
  .orbit-panel { border-left: 0; border-top: 1px solid var(--line); }
  .top { padding: 10px 16px; justify-content: space-between; }
  .top nav { order: 3; flex-basis: 100%; gap: 14px; font-size: .92rem; }
  main { padding: 16px; }
  footer { padding: 12px 16px 24px; }
  .tick { font-size: 24px; }
  .trend { stroke-width: 4; }
  .dot { r: 8px; stroke-width: 3; }
}