.graph-hero { padding-top: 70px; padding-bottom: 54px; }
.graph-kicker { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.graph-hero h1 { max-width: 1050px; font-size: clamp(42px, 6.3vw, 80px); }
.graph-hero .hero-lead { max-width: 760px; margin-top: 28px; }
.graph-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
.graph-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 52px; border-block: 1px solid var(--line); }
.graph-stats > div { padding: 22px 24px; border-right: 1px solid var(--line); }
.graph-stats > div:first-child { padding-left: 0; }
.graph-stats > div:last-child { border-right: 0; }
.graph-stats dt { font: 36px/1.2 var(--serif); }
.graph-stats dd { margin-top: 8px; color: var(--muted); font-size: 12px; }
.graph-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding-block: 48px 64px; }
.graph-principles p { align-self: end; color: var(--muted); }
.graph-section { padding-block: 48px 64px; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.graph-intro { color: var(--muted); max-width: 760px; margin-top: 22px; }
.graph-skill-list { margin-top: 36px; }
.graph-skill { display: grid; grid-template-columns: 70px 1fr; gap: 24px; padding-block: 34px; border-top: 1px solid var(--line-subtle); }
.graph-number { font: 24px var(--mono); color: var(--accent); }
.graph-skill h3 { font-size: 30px; margin-block: 16px; }
.graph-skill p { max-width: 790px; color: var(--muted); margin-bottom: 10px; }
.graph-skill .graph-outcome { color: var(--ink); }
.graph-slug { display: block; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; margin-top: 20px; }
.graph-skill details { margin-top: 22px; }
.graph-skill summary { cursor: pointer; font-size: 13px; color: var(--accent); padding-block: 8px; }
.graph-source-path { font: 12px var(--mono); overflow-wrap: anywhere; }
.graph-section pre { background: var(--code-bg); color: var(--code-text); padding: 24px; border-radius: 2px; font: 12px/1.7 var(--mono); overflow: auto; margin-block: 20px; max-width: 100%; }
.graph-section pre code { white-space: pre; }
.graph-source { max-height: 420px; }
.graph-skill > div, .graph-install, .graph-capsule, .graph-map { min-width: 0; }
.graph-demo-layout { display: grid; grid-template-columns: 1.3fr 1fr; border: 1px solid var(--line); margin-top: 30px; }
.graph-map { background: var(--paper-elevated); padding: 26px; }
.graph-map svg { width: 100%; height: auto; overflow: visible; }
.graph-edges path { stroke: var(--line); stroke-width: 2; fill: none; }
.graph-map circle { fill: var(--wash); stroke: var(--muted-light); stroke-width: 2; transition: fill .15s; }
.graph-map text { fill: var(--muted); font: 12px var(--sans); }
.graph-map .is-included circle { fill: #dce8dd; stroke: var(--success); }
.graph-map .is-seed circle { fill: var(--accent); stroke: var(--accent-dark); }
.graph-seeds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.graph-seeds button { border: 1px solid var(--line); padding: 7px 10px; font: 11px var(--mono); }
.graph-seeds button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.graph-capsule { border-left: 1px solid var(--line); padding: 28px; }
.graph-capsule h3 { margin-bottom: 18px; font-size: 25px; }
.graph-capsule p { font-size: 13px; color: var(--muted); }
.graph-capsule ul { padding-left: 18px; margin-block: 16px; }
.graph-capsule li { font-size: 13px; margin-bottom: 14px; }
.graph-demo-metrics { font: 11px var(--mono); border-top: 1px solid var(--line); padding-top: 18px; color: var(--accent); }
.graph-install [role="tablist"] { display: flex; border-bottom: 1px solid var(--line); margin-top: 30px; }
.graph-install [role="tab"] { padding: 16px 24px; font: 12px var(--mono); border-bottom: 2px solid transparent; }
.graph-install [role="tab"][aria-selected="true"] { border-color: var(--accent); color: var(--accent); }
.graph-install [role="tabpanel"] { padding-top: 30px; }
.graph-install [hidden] { display: none; }
.graph-install h3 { margin-bottom: 18px; }
.graph-install p { max-width: 850px; color: var(--muted); font-size: 14px; }
.graph-section .card-grid-3 { margin-top: 30px; }
.graph-section .card h3 { margin-bottom: 20px; }
.graph-download { background: var(--wash); padding: 40px; margin-bottom: 50px; }
.graph-download p { max-width: 800px; margin-top: 20px; color: var(--muted); }
.graph-connect { padding-bottom: 64px; }
.graph-connect p { font: 26px/1.4 var(--serif); max-width: 900px; }
.graph-home-callout { border: 1px solid var(--line); padding: 36px; margin-block: 30px 60px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; }
.graph-home-callout p { color: var(--muted); margin-top: 16px; }
.graph-home-callout .graph-actions { align-self: center; margin: 0; }
@media (max-width: 780px) {
  .graph-hero { padding-top: 42px; }
  .graph-stats { grid-template-columns: repeat(2,1fr); }
  .graph-stats > div { padding: 20px 16px; }
  .graph-stats > div:nth-child(2) { border-right: 0; }
  .graph-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .graph-stats > div:first-child { padding-left: 16px; }
  .graph-principles, .graph-demo-layout, .graph-home-callout { grid-template-columns: 1fr; gap: 24px; }
  .graph-skill { grid-template-columns: 36px 1fr; gap: 12px; }
  .graph-skill h3 { font-size: 26px; }
  .graph-capsule { border-left: 0; border-top: 1px solid var(--line); }
  .graph-map, .graph-capsule, .graph-download { padding: 22px; }
  .graph-section pre { padding: 18px; font-size: 11px; }
  .graph-actions .btn { width: 100%; text-align: center; }
  .graph-map text { font-size: 11px; }
  .graph-home-callout { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { .graph-map circle { transition: none; } }