:root {
  color-scheme: light;
  --calibration: oklch(0.55 0.15 338);
  --calibration-deep: oklch(0.49 0.15 338);
  --calibration-soft: oklch(0.96 0.025 338);
  --equipment: oklch(0.34 0.08 220);
  --equipment-soft: oklch(0.95 0.02 220);
  --canvas: oklch(1 0 0);
  --panel: oklch(0.965 0 0);
  --ink: oklch(0.19 0.01 320);
  --muted: oklch(0.46 0.015 320);
  --border: oklch(0.88 0.01 320);
  --border-strong: oklch(0.74 0.015 320);
  --risk-high: oklch(0.50 0.18 25);
  --risk-high-soft: oklch(0.95 0.035 25);
  --risk-medium: oklch(0.72 0.14 75);
  --risk-medium-soft: oklch(0.95 0.045 75);
  --state-ok: oklch(0.45 0.10 155);
  --state-ok-soft: oklch(0.95 0.035 155);
  --focus: 0 0 0 3px oklch(0.55 0.15 338 / 0.24);
  --font-sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sidebar: 244px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

button, select { font: inherit; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 6px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: white;
  padding: 10px 14px;
  border-radius: 8px;
}

.skip-link:focus { top: 12px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  background: var(--canvas);
  padding: 0 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 9px;
  background: var(--calibration);
  color: white;
  font-weight: 800;
}

.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; line-height: 1.25; }
.brand small { color: var(--muted); font-size: 11px; line-height: 1.4; }

.topbar-meta { display: flex; align-items: center; gap: 16px; font-size: 13px; }
.topbar-meta a { font-weight: 650; }

.demo-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--calibration-soft);
  color: oklch(0.38 0.12 338);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 650;
}

.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }

.sidebar {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  border-right: 1px solid var(--border);
  background: var(--panel);
  padding: 22px 16px;
  overflow-y: auto;
}

.station-context { padding: 0 10px 20px; border-bottom: 1px solid var(--border); }
.station-context span, .station-context strong, .station-context small { display: block; }
.station-context span { color: var(--muted); font-size: 11px; font-weight: 650; }
.station-context strong { margin-top: 6px; font-family: var(--font-mono); font-size: 13px; }
.station-context small { margin-top: 3px; color: var(--muted); font-size: 11px; }

.sidebar nav { display: grid; gap: 4px; margin-top: 18px; }
.sidebar nav a {
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.sidebar nav a:hover { background: var(--canvas); color: var(--ink); }
.sidebar nav a.active { background: var(--calibration-soft); color: oklch(0.35 0.12 338); }

.sidebar-note {
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--canvas);
  padding: 13px;
}
.sidebar-note strong { font-size: 12px; }
.sidebar-note p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

main { min-width: 0; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 40px;
  align-items: end;
  border-bottom: 1px solid var(--border);
  padding: 48px clamp(24px, 5vw, 72px) 40px;
  scroll-margin-top: 64px;
}

.hero-copy { max-width: 820px; }
.breadcrumb { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.title-line { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; }
.hero-copy > p { max-width: 70ch; margin: 16px 0 0; color: var(--muted); font-size: 16px; line-height: 1.75; text-wrap: pretty; }

.risk-chip {
  flex: 0 0 auto;
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 10px;
  color: white;
  font-size: 12px;
  font-weight: 700;
}
.risk-high { background: var(--risk-high); }
.risk-medium { background: var(--risk-medium); color: oklch(0.22 0.04 75); }
.risk-low { background: var(--state-ok); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.button {
  min-height: 40px;
  border-radius: 8px;
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.button:hover { transform: translateY(-1px); }
.button.primary { border: 0; background: var(--calibration); color: white; }
.button.primary:hover { background: var(--calibration-deep); }
.button.secondary { border: 1px solid var(--border-strong); background: white; color: var(--ink); }
.button.secondary:hover { background: var(--panel); }
.button.text-button { border: 0; background: transparent; color: var(--equipment); padding-inline: 8px; }
.button:disabled { cursor: default; opacity: 0.58; transform: none; }

.load-state { color: var(--muted) !important; font-size: 12px !important; }
.ready .load-state { display: none; }
.load-state.error { display: block; color: var(--risk-high) !important; }

.score-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 20px;
}
.score-panel > span { color: var(--muted); font-size: 12px; font-weight: 650; }
.score-panel div { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
.score-panel div strong { font-family: var(--font-mono); font-size: 42px; line-height: 1; letter-spacing: -0.04em; }
.score-panel div small { color: var(--muted); }
.score-panel p { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
  padding: 0 clamp(24px, 5vw, 72px);
}
.metric-strip > div { min-width: 0; border-right: 1px solid var(--border); padding: 20px 24px; }
.metric-strip > div:first-child { padding-left: 0; }
.metric-strip > div:last-child { border-right: 0; }
.metric-strip span, .metric-strip strong, .metric-strip small { display: block; }
.metric-strip span { color: var(--muted); font-size: 11px; font-weight: 650; }
.metric-strip strong { margin-top: 5px; font-family: var(--font-mono); font-size: 15px; }
.metric-strip small { margin-top: 2px; color: var(--muted); font-size: 11px; }

.section-block { padding: 56px clamp(24px, 5vw, 72px); border-bottom: 1px solid var(--border); scroll-margin-top: 64px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 24px; }
.section-heading > p { max-width: 58ch; margin: 0; color: var(--muted); font-size: 13px; }
.section-kicker { color: var(--equipment); font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
h2 { margin: 4px 0 0; font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
h3 { margin: 0; font-size: 15px; line-height: 1.4; }

.signal-grid, .analysis-grid, .knowledge-layout { display: grid; gap: 16px; }
.signal-grid { grid-template-columns: minmax(0, 1.75fr) minmax(280px, 0.75fr); }
.analysis-grid { grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr); }
.knowledge-layout { grid-template-columns: 1fr; }

.panel { border: 1px solid var(--border); border-radius: 12px; background: var(--canvas); padding: 20px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-heading > div span, .panel-heading > div strong { display: block; }
.panel-heading > div span { color: var(--muted); font-size: 11px; font-weight: 650; }
.panel-heading > div strong { margin-top: 2px; font-family: var(--font-mono); font-size: 16px; }

.chart-legend { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.legend-line, .legend-base { display: inline-block; width: 16px; height: 2px; }
.legend-line { background: var(--calibration); }
.legend-base { margin-left: 7px; border-top: 1px dashed var(--equipment); }
.trend-chart { display: block; width: 100%; margin-top: 12px; overflow: visible; }
.grid-line { stroke: var(--border); stroke-width: 1; }
.risk-zone { fill: var(--risk-high-soft); }
.baseline-line { stroke: var(--equipment); stroke-width: 1.5; stroke-dasharray: 5 5; }
.torque-line { fill: none; stroke: var(--calibration); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.axis-label, .axis-caption { fill: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.chart-foot { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 11px; }
.chart-foot strong { color: var(--ink); font-family: var(--font-mono); }

.signal-summary p { margin: 18px 0; color: var(--ink); line-height: 1.75; }
.source-tag { display: inline-flex; border-radius: 999px; background: var(--equipment-soft); color: var(--equipment); padding: 3px 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
.compact-dl { display: grid; gap: 0; margin: 0; }
.compact-dl div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; border-top: 1px solid var(--border); padding: 10px 0; }
.compact-dl dt { color: var(--muted); font-size: 11px; }
.compact-dl dd { margin: 0; font-size: 12px; font-weight: 600; }

.score-breakdown { display: grid; gap: 16px; margin-top: 18px; }
.score-label { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.score-label strong { font-family: var(--font-mono); }
.score-track { height: 7px; margin-top: 7px; border-radius: 999px; background: var(--panel); overflow: hidden; }
.score-track span { display: block; height: 100%; border-radius: inherit; background: var(--calibration); }
.inference-panel { background: var(--panel); }
.fact-label { display: inline-flex; border-radius: 999px; background: var(--calibration-soft); color: oklch(0.38 0.12 338); padding: 3px 8px; font-size: 11px; font-weight: 700; }
.inference-panel h3 { max-width: 34ch; margin-top: 13px; font-size: 20px; }
.inference-panel > p { max-width: 62ch; color: var(--muted); }
.uncertainty { border: 1px solid var(--border-strong); border-radius: 8px; background: white; padding: 12px 14px; font-size: 12px; }
.baseline-mode .score-track span { background: var(--state-ok); }

.evidence-list { display: grid; gap: 8px; }
.evidence-item { border: 1px solid var(--border); border-radius: 10px; background: white; overflow: clip; }
.evidence-item summary { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.evidence-item summary::-webkit-details-marker { display: none; }
.evidence-item summary::before { content: "+"; grid-column: 3; grid-row: 1; color: var(--muted); font-family: var(--font-mono); }
.evidence-item[open] summary::before { content: "−"; }
.evidence-item summary .source-tag { grid-column: 1; grid-row: 1; justify-self: start; }
.evidence-item summary::before + * { grid-column: auto; }
.evidence-type { display: none; }
.evidence-heading { grid-column: 2; min-width: 0; }
.evidence-heading strong, .evidence-heading small { display: block; }
.evidence-heading strong { font-size: 13px; }
.evidence-heading small { margin-top: 2px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evidence-detail { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr); gap: 18px; border-top: 1px solid var(--border); background: var(--panel); padding: 16px; }
.evidence-detail dl { display: grid; gap: 8px; margin: 0; }
.evidence-detail dl div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; }
.evidence-detail dt { color: var(--muted); font-size: 11px; }
.evidence-detail dd { margin: 0; font-family: var(--font-mono); font-size: 11px; word-break: break-all; }
pre { margin: 0; border-radius: 8px; background: oklch(0.20 0.015 320); color: oklch(0.94 0.01 320); padding: 12px; font: 11px/1.55 var(--font-mono); overflow: auto; }

.table-wrap { margin-top: 24px; border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
.table-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); padding: 14px 16px; }
.table-heading span { color: var(--muted); font-size: 11px; }
table { width: 100%; border-collapse: collapse; min-width: 780px; }
.cause-wrap th:nth-child(1) { width: 22%; }
.cause-wrap th:nth-child(2) { width: 12%; }
.cause-wrap th:nth-child(3) { width: 31%; }
.cause-wrap th:nth-child(4) { width: 35%; }
th, td { border-bottom: 1px solid var(--border); padding: 12px 14px; text-align: left; vertical-align: middle; font-size: 12px; }
th { background: var(--panel); color: var(--muted); font-size: 11px; font-weight: 650; }
tbody tr:last-child td { border-bottom: 0; }
td strong, td small { display: block; }
td small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.rank { display: inline-grid; width: 22px; height: 22px; place-items: center; margin-right: 8px; border-radius: 6px; background: var(--panel); font-family: var(--font-mono); font-size: 10px; }
.confidence, .task-status { display: inline-flex; border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.confidence-high, .confidence-mediumhigh { background: var(--risk-high-soft); color: oklch(0.40 0.15 25); }
.confidence-medium { background: var(--risk-medium-soft); color: oklch(0.38 0.08 75); }
.task-status.pending { background: var(--risk-medium-soft); color: oklch(0.38 0.08 75); }
.task-status.created { background: var(--state-ok-soft); color: oklch(0.34 0.09 155); }
.mono { font-family: var(--font-mono); }

.relationship-panel { padding: 0; overflow: hidden; }
.relationship-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.relationship-panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.relationship-chain { border-top: 1px solid var(--border); }
.relation-empty { margin: 0; padding: 22px 20px; color: var(--muted); font-size: 13px; }
.relation-lane { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 20px; padding: 20px; }
.relation-lane + .relation-lane { border-top: 1px solid var(--border); }
.relation-lane > header { padding-top: 5px; }
.relation-lane > header strong, .relation-lane > header span { display: block; }
.relation-lane > header strong { font-size: 13px; }
.relation-lane > header span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.relation-path { display: flex; min-width: 0; align-items: stretch; }
.relation-node-group { display: grid; min-width: 0; flex: 1 1 0; gap: 6px; }
.relation-node { display: grid; align-content: start; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); padding: 9px 10px; }
.relation-node.key-node { border-color: oklch(0.82 0.035 220); background: var(--equipment-soft); }
.relation-node span, .relation-node strong, .relation-node code { display: block; min-width: 0; }
.relation-node span { color: var(--equipment); font-size: 10px; font-weight: 700; }
.relation-node strong { margin-top: 3px; font-size: 12px; line-height: 1.4; text-wrap: pretty; }
.relation-node code { margin-top: 3px; color: var(--muted); font-family: var(--font-mono); font-size: 9px; overflow-wrap: anywhere; }
.relation-link { display: grid; flex: 0 0 84px; place-content: center; justify-items: center; padding: 0 4px; text-align: center; }
.relation-link strong { color: var(--equipment); font-size: 10px; line-height: 1.3; }
.relation-link code { margin-top: 2px; color: var(--muted); font-family: var(--font-mono); font-size: 9px; line-height: 1.3; white-space: nowrap; }
.relation-arrow { margin-top: 5px; color: var(--border-strong); font-family: var(--font-mono); font-size: 17px; line-height: 1; }
.graph-note { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.75fr); gap: 28px; background: var(--panel); }
.graph-note > div > p { max-width: 68ch; margin: 8px 0 0; color: var(--muted); font-size: 13px; }

.workflow-action { display: flex; align-items: center; gap: 12px; }
.workflow-action > span { color: var(--muted); font-size: 11px; }
.agent-trace { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0 0 22px; padding: 0; list-style: none; }
.agent-trace li { position: relative; display: flex; gap: 9px; border-top: 1px solid var(--border-strong); padding: 14px 12px 0 0; }
.agent-trace li:not(:last-child) { margin-right: 12px; }
.trace-index { display: grid; flex: 0 0 24px; height: 24px; place-items: center; border-radius: 7px; background: var(--equipment); color: white; font-family: var(--font-mono); font-size: 10px; }
.agent-trace strong { font-family: var(--font-mono); font-size: 10px; }
.agent-trace p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.integration-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; }

.evaluation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.evaluation-grid > div { border-right: 1px solid var(--border); padding: 20px; }
.evaluation-grid > div:last-child { border-right: 0; }
.evaluation-grid span, .evaluation-grid strong, .evaluation-grid small { display: block; }
.evaluation-grid span { color: var(--muted); font-size: 11px; }
.evaluation-grid strong { margin-top: 4px; font-family: var(--font-mono); font-size: 24px; }
.evaluation-grid small { color: var(--muted); font-size: 10px; }
.limitation-note { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 14px 16px; }
.limitation-note strong { font-size: 12px; }
.limitation-note p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }

footer { display: flex; justify-content: space-between; gap: 24px; padding: 32px clamp(24px, 5vw, 72px); }
footer strong { font-size: 13px; }
footer p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.footer-links { display: flex; gap: 18px; font-size: 12px; }

@media (max-width: 1080px) {
  :root { --sidebar: 210px; }
  .hero { grid-template-columns: 1fr; }
  .score-panel { max-width: 320px; }
  .signal-grid, .knowledge-layout { grid-template-columns: 1fr; }
  .agent-trace { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
}

@media (max-width: 760px) {
  .topbar { padding: 0 16px; }
  .topbar-meta .demo-badge { display: none; }
  .app-shell { display: block; }
  .sidebar { position: static; width: auto; height: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px 16px; }
  .station-context, .sidebar-note { display: none; }
  .sidebar nav { display: flex; gap: 4px; margin: 0; overflow-x: auto; }
  .sidebar nav a { display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; }
  .hero { padding-top: 34px; }
  .title-line { align-items: flex-start; flex-direction: column; }
  h1 { font-size: 32px; }
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-strip > div:nth-child(2) { border-right: 0; }
  .metric-strip > div:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
  .metric-strip > div:nth-child(3) { padding-left: 0; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .analysis-grid { grid-template-columns: 1fr; }
  .evidence-item summary { grid-template-columns: minmax(0, 1fr) auto; }
  .evidence-item summary .source-tag { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 6px; }
  .evidence-heading { grid-column: 1 / -1; grid-row: 2; }
  .evidence-detail { grid-template-columns: 1fr; }
  .agent-trace { grid-template-columns: 1fr; }
  .workflow-action { align-items: flex-start; flex-direction: column; }
  .button { min-height: 44px; }
  .relation-lane { grid-template-columns: 1fr; gap: 12px; padding: 18px 16px; }
  .relation-lane > header { padding-top: 0; }
  .relation-lane > header strong { font-size: 14px; }
  .relation-lane > header span { font-size: 13px; }
  .relation-path { flex-direction: column; }
  .relation-node-group { width: 100%; }
  .relation-node { padding: 11px 12px; }
  .relation-node span { font-size: 12px; }
  .relation-node strong { font-size: 14px; }
  .relation-node code { font-size: 11px; }
  .relation-link { min-height: 50px; flex-basis: auto; }
  .relation-link strong { font-size: 12px; }
  .relation-link code { font-size: 10px; }
  .relation-arrow { transform: rotate(90deg); }
  .graph-note { grid-template-columns: 1fr; gap: 16px; }
  .cause-wrap, .task-wrap { overflow: visible; }
  .cause-wrap table, .task-wrap table { min-width: 0; }
  .cause-wrap thead, .task-wrap thead { display: none; }
  .cause-wrap tbody, .task-wrap tbody,
  .cause-wrap tr, .task-wrap tr,
  .cause-wrap td, .task-wrap td { display: block; width: 100%; }
  .cause-wrap tr, .task-wrap tr { border-bottom: 1px solid var(--border); padding: 10px 12px; }
  .cause-wrap tr:last-child, .task-wrap tr:last-child { border-bottom: 0; }
  .cause-wrap td, .task-wrap td {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    border: 0;
    padding: 7px 0;
  }
  .cause-wrap td::before, .task-wrap td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
  }
  .task-wrap td strong, .task-wrap td small { grid-column: 2; }
  .task-wrap td small { margin-top: -5px; }
  .evaluation-grid { grid-template-columns: 1fr; }
  .evaluation-grid > div { border-right: 0; border-bottom: 1px solid var(--border); }
  .evaluation-grid > div:last-child { border-bottom: 0; }
  footer { flex-direction: column; }
}

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