:root {
  --ov-ink: #e9edf2;
  --ov-muted: #9aa3ae;
  --ov-line: rgba(233, 237, 242, .16);
  --ov-paper: #0a0e14;
  --ov-accent: #d4af37;
  --ov-accent-2: #e5c65c;
  --ov-cream: #f0e6cd;
  --ov-wordmark: "Bodoni 72", Didot, "Times New Roman", serif;
  --ov-impl: #57c98b;
  --ov-planned: #e5b354;
  --ov-gap: #ff8b96;
}

* { box-sizing: border-box; }

body.ov {
  margin: 0;
  background: #06080d;
  color: var(--ov-ink);
  font-family: var(--font-ui, ui-sans-serif, system-ui, sans-serif);
  line-height: 1.45;
}

.ov-page { max-width: 210mm; margin: 0 auto; padding: 10mm 12mm 14mm; background: var(--ov-paper); box-shadow: 0 12px 40px -20px rgba(0, 0, 0, .6); }

.ov-toolbar { max-width: 210mm; margin: 0 auto; padding: 10px 12mm 0; display: flex; justify-content: flex-end; }
.ov-print-btn { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 3px; border: 1px solid var(--ov-accent); background: var(--ov-accent); color: #0a0e14; cursor: pointer; transition: transform .12s ease; }
.ov-print-btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .ov-print-btn { transition: none; } }

.ov-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--ov-accent); padding-bottom: 6px; margin-bottom: 8px; }
.ov-brand { display: flex; align-items: center; gap: 10px; }
.ov-brand svg { width: 30px; height: 30px; flex: none; }
.ov-brand h1 { font-size: 20px; margin: 0; letter-spacing: .01em; }
.ov-brand h1 .ov-word { font-family: var(--ov-wordmark); font-size: 24px; font-weight: 600; letter-spacing: .02em; color: var(--ov-cream); }
.ov-brand h1 b { color: var(--ov-accent); }
.ov-tagline { margin: 2px 0 0; font-size: 12px; color: var(--ov-muted); }
.ov-buildinfo { font-size: 10.5px; color: var(--ov-muted); text-align: right; white-space: nowrap; }

.ov-lede { font-size: 13px; margin: 0 0 10px; max-width: 72ch; }

h2.ov-h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ov-accent-2); border-bottom: 1px solid var(--ov-line); padding-bottom: 3px; margin: 14px 0 6px; }
.ov-page > h2.ov-h2:first-of-type { margin-top: 6px; }
.ov-section-note { font-size: 11px; color: var(--ov-muted); margin: 0 0 6px; }

.ov-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 11px; margin: 0 0 8px; }
.ov-pill { font-weight: 700; border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; }
.ov-pill.is-impl { color: var(--ov-impl); }
.ov-pill.is-planned { color: var(--ov-planned); }
.ov-pill.is-none { color: var(--ov-gap); }
.ov-pill.is-demo { color: var(--ov-accent); }

.ov-diagram { margin: 0 0 8px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.ov-diagram li { flex: 1 1 150px; border: 1px solid var(--ov-line); border-radius: 4px; padding: 8px 10px; font-size: 11px; position: relative; background: #10151d; }
.ov-diagram li.is-core { background: rgba(212, 175, 55, .08); border: 2px solid var(--ov-accent); }
.ov-diagram li b { display: block; font-size: 11.5px; margin-bottom: 2px; }
.ov-diagram li small { color: var(--ov-muted); }
.ov-diagram li:not(:last-child)::after { content: "\2192"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--ov-ink); }
.ov-support { margin: 0 0 10px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 16px; font-size: 11px; color: var(--ov-muted); }

.ov-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.ov-table th, .ov-table td { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--ov-line); vertical-align: top; }
.ov-table thead th { color: var(--ov-muted); font-weight: 600; border-bottom: 1px solid var(--ov-ink); }
.ov-table code { font-size: 10.5px; background: rgba(233, 237, 242, .08); padding: 1px 3px; border-radius: 2px; }

.ov-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.ov-cols2 > div { font-size: 11px; }
.ov-cols2 h3 { font-size: 11.5px; margin: 0 0 4px; }
.ov-cols2 ul { margin: 0; padding-left: 16px; }
.ov-cols2 li { margin-bottom: 2px; }

.ov-states { margin: 0 0 6px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 5px; font-size: 10.5px; }
.ov-states li { border: 1px solid var(--ov-line); border-radius: 3px; padding: 2px 6px; }

.ov-gaps { margin: 0 0 8px; padding-left: 18px; font-size: 11.5px; }
.ov-gaps li { margin-bottom: 3px; }

.ov-foot-note { font-size: 10px; color: var(--ov-muted); margin: 2px 0; }
.ov-legal { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--ov-line); font-size: 9px; color: var(--ov-muted); }

@media (max-width: 720px) {
  .ov-page { padding: 6mm 5mm 10mm; }
  .ov-head { flex-direction: column; }
  .ov-buildinfo { text-align: left; }
  .ov-diagram { flex-direction: column; }
  .ov-diagram li:not(:last-child)::after { content: "\2193"; right: 50%; top: auto; bottom: -12px; transform: translateX(50%); }
  .ov-support, .ov-cols2 { grid-template-columns: 1fr; }
}

@media print {
  @page { size: A4; margin: 10mm 12mm; }
  :root {
    --ov-ink: #14181f;
    --ov-muted: #4b5563;
    --ov-line: #d8dde3;
    --ov-paper: #ffffff;
    --ov-accent: #8a6a12;
    --ov-accent-2: #14181f;
    --ov-cream: #14181f;
    --ov-impl: #1c6b3a;
    --ov-planned: #8a5a00;
    --ov-gap: #8a2b0f;
  }
  html, body { background: #fff; }
  .ov-toolbar { display: none; }
  .ov-brand svg path { stroke: #14181f; }
  .ov-page { max-width: none; margin: 0; padding: 0; box-shadow: none; }
  .ov-diagram li { background: #fff; }
  .ov-diagram li.is-core { background: #f7f2e4; }
  .ov-diagram, .ov-table, .ov-cols2, .ov-gaps { break-inside: avoid; }
  h2.ov-h2 { break-after: avoid; }
  a { color: inherit; text-decoration: none; }
}