:root {
  color-scheme: dark;

  --ds-bg: #0e1117;
  --ds-surface-1: #161b22;
  --ds-surface-2: #1c2128;
  --ds-line: #21262d;

  --ds-text: #e6edf3;
  --ds-text-secondary: #8b949e;
  --ds-text-muted: #6e7681;

  --ds-up: #f85149;
  --ds-down: #3fb950;
  --ds-brand: #d29922;
  --ds-link: #58a6ff;

  --ds-font-sans: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --ds-font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

  --ds-type-metric: 700 28px/1.15 var(--ds-font-mono);
  --ds-type-title: 600 16px/1.35 var(--ds-font-sans);
  --ds-type-body: 400 14px/1.55 var(--ds-font-sans);
  --ds-type-note: 400 12px/1.45 var(--ds-font-sans);

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;

  --ds-radius-card: 8px;
  --ds-radius-control: 4px;
  --ds-motion-fast: 120ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--ds-bg); }

body {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-text);
  font: var(--ds-type-body);
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
a { color: var(--ds-link); }

.ds-shell {
  width: min(1480px, calc(100% - 48px));
  margin-inline: auto;
  padding-block: var(--ds-space-5) var(--ds-space-8);
}

.ds-topbar {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  min-height: 48px;
  padding: var(--ds-space-2) var(--ds-space-5);
  background: var(--ds-surface-1);
}

.ds-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  color: var(--ds-text);
  font: 700 15px/1 var(--ds-font-mono);
  letter-spacing: .08em;
}

.ds-brand img { width: 28px; height: 28px; }
.ds-spacer { flex: 1; }

.ds-context,
.ds-note,
.ds-kicker {
  color: var(--ds-text-secondary);
  font: var(--ds-type-note);
}

.ds-kicker {
  color: var(--ds-brand);
  font-family: var(--ds-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ds-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: 28px;
  padding-inline: var(--ds-space-3);
  border-radius: var(--ds-radius-control);
  background: var(--ds-surface-2);
  color: var(--ds-text-secondary);
  font: 600 12px/1 var(--ds-font-sans);
  white-space: nowrap;
}

.ds-status::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-text-muted);
  content: "";
}

.ds-status.up::before { background: var(--ds-up); }
.ds-status.down::before { background: var(--ds-down); }
.ds-status.selected { color: var(--ds-brand); }
.ds-status.selected::before { background: var(--ds-brand); }

.ds-section { margin-top: var(--ds-space-6); }

.ds-section-head {
  display: flex;
  align-items: end;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-3);
}

.ds-section-head h2,
.ds-card h3 {
  margin: 0;
  font: var(--ds-type-title);
  text-wrap: pretty;
}

.ds-section-head .ds-note { margin-left: auto; }

.ds-grid { display: grid; gap: var(--ds-space-4); }
.ds-grid.indices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-grid.regime { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid.lower { grid-template-columns: minmax(280px, .7fr) minmax(680px, 1.7fr); }

.ds-card {
  min-width: 0;
  padding: var(--ds-space-5);
  border-radius: var(--ds-radius-card);
  background: var(--ds-surface-1);
}

.ds-card.raised { background: var(--ds-surface-2); }

.ds-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--ds-space-3);
}

.ds-metric {
  margin-top: var(--ds-space-3);
  font: var(--ds-type-metric);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}

.ds-delta {
  margin-top: var(--ds-space-1);
  font: 600 13px/1.3 var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
}

.ds-up { color: var(--ds-up); }
.ds-down { color: var(--ds-down); }
.ds-brand-text { color: var(--ds-brand); }

.ds-sparkline {
  display: block;
  width: 100%;
  height: 32px;
  margin-top: var(--ds-space-4);
}

.ds-spark-slot {
  display: flex;
  align-items: center;
  height: 32px;
  margin-top: var(--ds-space-4);
  color: var(--ds-text-muted);
  font: 500 11px/1 var(--ds-font-mono);
  letter-spacing: .04em;
}

.ds-definition {
  margin: var(--ds-space-4) 0 0;
  color: var(--ds-text-muted);
  font: var(--ds-type-note);
  text-wrap: pretty;
}

.ds-bars { margin-top: var(--ds-space-4); }

.ds-bar-row {
  display: grid;
  grid-template-columns: 56px 1fr 48px;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: 28px;
  color: var(--ds-text-secondary);
  font: 500 12px/1 var(--ds-font-mono);
}

.ds-bar-track {
  height: 6px;
  overflow: hidden;
  border-radius: var(--ds-radius-control);
  background: var(--ds-surface-2);
}

.ds-bar-track > i {
  display: block;
  height: 100%;
  background: var(--ds-brand);
}

.ds-list { margin-top: var(--ds-space-3); }

.ds-list-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: 40px;
  border-bottom: 1px solid var(--ds-line);
}

.ds-list-row:last-child { border-bottom: 0; }
.ds-rank { color: var(--ds-text-muted); font: 500 12px/1 var(--ds-font-mono); }
.ds-symbol { font: 700 13px/1.2 var(--ds-font-mono); }
.ds-name { margin-left: var(--ds-space-2); color: var(--ds-text-secondary); font: var(--ds-type-note); }
.ds-list-value { font: 600 13px/1 var(--ds-font-mono); font-variant-numeric: tabular-nums; }

.ds-table-wrap { overflow-x: auto; }

.ds-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ds-table th,
.ds-table td {
  height: 40px;
  padding: 0 var(--ds-space-3);
  border-bottom: 1px solid var(--ds-line);
  text-align: right;
  white-space: nowrap;
}

.ds-table th {
  color: var(--ds-text-muted);
  font: 500 11px/1 var(--ds-font-sans);
}

.ds-table td { color: var(--ds-text-secondary); font: 500 12px/1 var(--ds-font-mono); }
.ds-table th:first-child,
.ds-table td:first-child,
.ds-table th:nth-child(2),
.ds-table td:nth-child(2) { text-align: left; }
.ds-table td:first-child { color: var(--ds-text); font-weight: 700; }
.ds-table tbody tr { transition: background var(--ds-motion-fast) ease-out; }
.ds-table tbody tr:hover { background: var(--ds-surface-2); }

.ds-assumptions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-4);
  margin-top: var(--ds-space-4);
}

.ds-assumption {
  padding: var(--ds-space-4);
  border-radius: var(--ds-radius-card);
  background: var(--ds-surface-1);
  color: var(--ds-text-secondary);
  font: var(--ds-type-note);
  text-wrap: pretty;
}

:focus-visible { outline: 2px solid var(--ds-link); outline-offset: 2px; }

@media (max-width: 980px) {
  .ds-grid.indices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-grid.regime,
  .ds-grid.lower { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ds-shell { width: min(100% - 24px, 1480px); }
  .ds-topbar { align-items: flex-start; flex-wrap: wrap; padding-inline: var(--ds-space-3); }
  .ds-context { order: 3; width: 100%; }
  .ds-grid.indices { grid-template-columns: 1fr; }
  .ds-section-head { align-items: start; flex-direction: column; }
  .ds-section-head .ds-note { margin-left: 0; }
  .ds-assumptions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0ms !important; }
}