/* Tokens mirror main/tools/theme/theme.js (and about/about.css) so the page shares the platform's identity. */
:root,
:root[data-theme="light"] {
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f7f7f5;
  --theme-bg-tertiary: #eeeeea;
  --theme-text-primary: #18181b;
  --theme-text-secondary: #52525b;
  --theme-text-tertiary: #a1a1aa;
  --theme-text-inverse: #ffffff;
  --theme-border-subtle: #e4e4e7;
  --theme-border-default: #d4d4d8;
  --theme-color-primary: #2d5cf6;
  --theme-surface-raised: #ffffff;
  --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --graph-on-primary: #ffffff;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --theme-bg-primary: #0f0f10;
  --theme-bg-secondary: #18181b;
  --theme-bg-tertiary: #27272a;
  --theme-text-primary: #fafafa;
  --theme-text-secondary: #a1a1aa;
  --theme-text-tertiary: #71717a;
  --theme-text-inverse: #18181b;
  --theme-border-subtle: #27272a;
  --theme-border-default: #3f3f46;
  --theme-color-primary: #6b8cff;
  --theme-surface-raised: #1c1c1f;
  --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --graph-on-primary: #0f0f10;
  color-scheme: dark;
}

:root {
  --theme-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --theme-radius-sm: 6px;
  --theme-radius-md: 10px;
  --theme-radius-lg: 14px;
  --theme-radius-full: 9999px;
  --graph-primary-soft: color-mix(in srgb, var(--theme-color-primary) 12%, transparent);
  --graph-header-height: 64px;
  --graph-nav-height: 56px;
  --graph-gutter: 16px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--graph-header-height) + env(safe-area-inset-top, 0px) + var(--graph-nav-height));
}

.graph {
  margin: 0;
  background: var(--theme-bg-primary);
  color: var(--theme-text-primary);
  font-family: var(--theme-font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:where(.graph) a {
  color: inherit;
}

:where(.graph) :where(h1, h2, h3) {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

:where(.graph) p {
  margin: 0;
}

:where(.graph) :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.graph-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--graph-gutter);
}

/* Logos swap with the theme without JS. */
:root[data-theme="dark"] .graph-logo-light,
:root:not([data-theme="dark"]) .graph-logo-dark {
  display: none;
}

/* Header */

.graph-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--theme-bg-tertiary) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: var(--theme-shadow-sm);
}

.graph-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--graph-header-height);
}

.graph-header-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.graph-header-logo {
  width: auto;
  height: 48px;
}

.graph-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.graph-icon-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--theme-radius-md);
  background: transparent;
  color: var(--theme-text-primary);
  cursor: pointer;
  transition: background 120ms ease;
}

.graph-icon-button:hover {
  background: var(--theme-bg-secondary);
}

.graph-language {
  position: relative;
}

.graph-language[hidden] {
  display: none;
}

/* The native select sits invisibly over the globe, so a click opens the
   platform's own language list (the picker on phones). */
.graph-language-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
}

:root[data-theme="dark"] .graph-theme-moon,
:root:not([data-theme="dark"]) .graph-theme-sun {
  display: none;
}

.graph-language:has(.graph-language-select:focus-visible),
.graph-icon-button:focus-visible,
.graph-button:focus-visible {
  outline: 2px solid var(--theme-color-primary);
  outline-offset: 2px;
}

/* Buttons */

.graph-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.graph-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--theme-radius-md);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.graph-button:hover {
  transform: translateY(-1px);
}

.graph-button-primary {
  background: var(--theme-color-primary);
  color: var(--graph-on-primary);
  box-shadow: var(--theme-shadow-sm);
}

.graph-button-primary:hover {
  box-shadow: var(--theme-shadow-md);
}

.graph-button-outline {
  border-color: var(--theme-border-default);
  background: var(--theme-surface-raised);
  color: var(--theme-text-primary);
}

.graph-button-outline svg {
  color: var(--theme-color-primary);
}

.graph-button-outline:hover {
  border-color: var(--theme-color-primary);
}

/* Shared section pieces */

.graph-section {
  padding: 88px 0;
}

.graph-section-alt {
  background: var(--theme-bg-secondary);
}

.graph-eyebrow {
  margin-bottom: 12px;
  color: var(--theme-color-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.graph-title {
  max-width: 24ch;
  margin-bottom: 20px;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 700;
}


.graph-lead {
  max-width: 64ch;
  margin-bottom: 24px;
  color: var(--theme-text-secondary);
  font-size: 18px;
}

.graph-prose {
  display: grid;
  gap: 12px;
  max-width: 64ch;
  color: var(--theme-text-secondary);
  font-size: 18px;
}

.graph-block {
  margin-top: 56px;
}

.graph-grid {
  display: grid;
  gap: 20px;
}


.graph-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.graph-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.graph-subhead {
  margin-bottom: 16px;
  font-size: 17px;
  font-weight: 600;
}

.graph-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--theme-radius-sm);
  background: var(--graph-primary-soft);
  color: var(--theme-color-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.graph-chip-large {
  padding: 4px 12px;
  font-size: 17px;
}

.graph-inline-code {
  padding: 1px 6px;
  border-radius: var(--theme-radius-sm);
  background: var(--theme-bg-tertiary);
  color: var(--theme-text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.graph-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.graph-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 28px;
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-lg);
  background: var(--theme-surface-raised);
  box-shadow: var(--theme-shadow-sm);
}

.graph-card h3 {
  font-size: 19px;
  font-weight: 700;
}

.graph-card p {
  color: var(--theme-text-secondary);
  font-size: 15px;
}

.graph-tile-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--theme-radius-md);
  background: var(--graph-primary-soft);
  color: var(--theme-color-primary);
}


/* Hero */

.graph-hero {
  position: relative;
  padding: 96px 0 56px;
  background:
    radial-gradient(900px 480px at 85% -10%, var(--graph-primary-soft), transparent 70%),
    radial-gradient(700px 420px at -10% 110%, var(--graph-primary-soft), transparent 70%),
    var(--theme-bg-primary);
  overflow: hidden;
}

.graph-hero-title {
  max-width: 22ch;
  margin-bottom: 40px;
  font-size: clamp(2.25rem, 5.4vw, 3.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.graph-highlight {
  color: var(--theme-color-primary);
}

/* Hero: the map and the editor's tour, side by side below the title */

.graph-hero-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 48px;
  align-items: center;
}

/* The editor's tour, framed like the page's other figures. */
.graph-video {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-lg);
  background: var(--theme-bg-secondary);
  box-shadow: var(--theme-shadow-sm);
}

.graph-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 944 / 720;
}

/* The map: the EGF at the hub and its neighbours around it */

.graph-map {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.graph-map-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--theme-font-sans);
}

.graph-map-orbit {
  fill: none;
  stroke: var(--theme-border-default);
  stroke-width: 1.5;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}

.graph-map-link {
  cursor: pointer;
  outline: none;
}

.graph-map-spoke {
  fill: none;
  stroke: color-mix(in srgb, var(--theme-color-primary) 45%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke 160ms ease, stroke-width 160ms ease;
}

/* The body's origin is the circle's centre, so it grows in place. */
.graph-map-body {
  transform-box: view-box;
  transform-origin: 0 0;
  transition: transform 160ms ease;
}

.graph-map-circle {
  fill: var(--theme-surface-raised);
  stroke: var(--theme-color-primary);
  stroke-width: 2;
  transition: fill 160ms ease;
}

.graph-map-ring {
  fill: none;
  stroke: var(--theme-color-primary);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  opacity: 0;
}

.graph-map-icon {
  color: var(--theme-color-primary);
}

.graph-map-label {
  fill: var(--theme-text-primary);
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
}

.graph-map-link:is(:hover, :focus-visible) .graph-map-body {
  transform: scale(1.06);
}

.graph-map-link:is(:hover, :focus-visible) .graph-map-spoke {
  stroke: var(--theme-color-primary);
  stroke-width: 3;
}

.graph-map-link:not(.graph-map-hub):is(:hover, :focus-visible) .graph-map-circle {
  fill: color-mix(in srgb, var(--theme-color-primary) 10%, var(--theme-surface-raised));
}

.graph-map-link:focus-visible .graph-map-ring {
  opacity: 1;
}

.graph-map-hub .graph-map-circle {
  fill: var(--theme-color-primary);
}

.graph-map-halo {
  fill: var(--graph-primary-soft);
  transform-box: view-box;
  transform-origin: 0 0;
  animation: graph-map-pulse 3.2s ease-in-out infinite;
}

.graph-map-acronym {
  fill: var(--graph-on-primary);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-anchor: middle;
}

.graph-map-name {
  fill: var(--graph-on-primary);
  font-size: 12.5px;
  font-weight: 600;
  text-anchor: middle;
  opacity: 0.85;
}

/* Badges are cut out of the circle they sit on by a ring of the page's colour. */
.graph-map-badge {
  color: var(--graph-on-primary);
}

.graph-map-badge circle {
  fill: var(--theme-color-primary);
  stroke: var(--theme-bg-primary);
  stroke-width: 3;
}

.graph-map-badge-text {
  fill: var(--graph-on-primary);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
}

.graph-map-hub .graph-map-badge circle {
  fill: var(--theme-surface-raised);
  stroke: var(--theme-color-primary);
  stroke-width: 2;
}

.graph-map-hub .graph-map-badge-text {
  fill: var(--theme-color-primary);
}

@keyframes graph-map-pulse {
  50% {
    opacity: 0.5;
    transform: scale(1.08);
  }
}

/* Footer: the way to the specification, below every part, and the way to the
   contact form under it */

.graph-footer {
  margin-top: 72px;
  padding: 48px 0 calc(64px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--theme-border-subtle);
  background: var(--theme-bg-secondary);
}

.graph-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.graph-footer-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--theme-radius-md);
  color: var(--theme-text-secondary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color 120ms ease;
}

.graph-footer-contact:hover {
  color: var(--theme-color-primary);
}

.graph-footer-contact:focus-visible {
  outline: 2px solid var(--theme-color-primary);
  outline-offset: 2px;
}

/* Section bar: sticks under the header and marks the part being read */

.graph-nav {
  position: sticky;
  top: calc(var(--graph-header-height) + env(safe-area-inset-top, 0px));
  z-index: 9;
  border-bottom: 1px solid var(--theme-border-subtle);
  background: color-mix(in srgb, var(--theme-bg-primary) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

.graph-nav-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: -1px;
}

.graph-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 12px 8px;
  border-bottom: 2px solid transparent;
  color: var(--theme-text-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease;
}

.graph-nav-link:hover {
  color: var(--theme-text-primary);
}

.graph-nav-link:focus-visible {
  outline: 2px solid var(--theme-color-primary);
  outline-offset: -2px;
}

.graph-nav-index {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--theme-radius-full);
  background: var(--graph-primary-soft);
  color: var(--theme-color-primary);
  font-size: 12px;
  font-weight: 800;
  transition: background 120ms ease, color 120ms ease;
}

.graph-nav-link[aria-current="page"] {
  border-bottom-color: var(--theme-color-primary);
  color: var(--theme-text-primary);
}

.graph-nav-link[aria-current="page"] .graph-nav-index {
  background: var(--theme-color-primary);
  color: var(--graph-on-primary);
}

/* Parts: one at a time, each opening with its number and name */

/* Focus lands on the part when it changes, for keyboards and screen readers only. */
.graph-part:focus {
  outline: none;
}

.graph-part-header {
  padding: 88px 0 40px;
}

.graph-nav + .graph-part .graph-part-header {
  padding-top: 56px;
}

.graph-part-header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.graph-part-index {
  flex: none;
  color: var(--theme-color-primary);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.graph-part-title {
  padding-left: 20px;
  border-left: 2px solid var(--theme-border-default);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 800;
}

.graph-part-soon {
  padding-bottom: 32px;
}

.graph-soon {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 28px;
  border: 1px dashed var(--theme-border-default);
  border-radius: var(--theme-radius-lg);
  color: var(--theme-text-secondary);
  font-size: 17px;
}

/* Pager: the parts before and after the one on screen */

.graph-pager {
  padding-top: 56px;
}

.graph-pager-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.graph-pager-link {
  gap: 6px;
  padding: 20px 24px;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.graph-pager-link:hover {
  border-color: var(--theme-color-primary);
  box-shadow: var(--theme-shadow-md);
  transform: translateY(-1px);
}

.graph-pager-link:focus-visible {
  outline: 2px solid var(--theme-color-primary);
  outline-offset: 2px;
}

.graph-pager-next {
  align-items: flex-end;
  text-align: right;
}

.graph-pager-direction {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--theme-color-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.graph-pager-title {
  font-size: 17px;
  font-weight: 700;
}

/* Part 03: node kinds and types */

.graph-type-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.graph-types {
  margin-top: 40px;
}

/* Tables: the display nodes' formats, modes and names (mode by format). They
   stack with their first columns lined up. */

.graph-tables {
  display: grid;
  gap: 40px;
}

.graph-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-lg);
  background: var(--theme-surface-raised);
  box-shadow: var(--theme-shadow-sm);
}

.graph-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.graph-table :where(th, td) {
  padding: 16px 24px;
  border-bottom: 1px solid var(--theme-border-subtle);
  text-align: left;
}

.graph-table tbody tr:last-child :where(th, td) {
  border-bottom: 0;
}

.graph-table thead th {
  color: var(--theme-text-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.graph-table tbody th {
  width: 24%;
  font-weight: 700;
}

.graph-table td {
  color: var(--theme-text-secondary);
}

.graph-table-terms td {
  line-height: 1.6;
}

.graph-table-term {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.graph-table-term .graph-tile-icon {
  width: 36px;
  height: 36px;
}

.graph-table-names td .graph-chip {
  margin-right: 12px;
}

/* What the collection nodes' answers are used for */

.graph-uses {
  display: grid;
  gap: 12px;
  max-width: 72ch;
}

.graph-uses li {
  position: relative;
  padding-left: 28px;
  color: var(--theme-text-secondary);
  font-size: 17px;
}

.graph-uses li::before {
  content: '';
  position: absolute;
  top: 0.6em;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: var(--theme-radius-full);
  background: var(--theme-color-primary);
}

/* Do it yourself: the three stages */

.graph-steps-intro {
  margin: 32px 0 20px;
  font-size: 17px;
  font-weight: 600;
}

.graph-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.graph-step-index {
  color: var(--theme-color-primary);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  opacity: 0.35;
}

.graph-step h3 {
  font-size: 22px;
}

/* EGF: the concept figure */

.graph-concept {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.graph-concept-figure {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-lg);
  background:
    radial-gradient(circle, var(--theme-border-default) 1px, transparent 1.5px) 0 0 / 16px 16px,
    var(--theme-bg-secondary);
}

/* The graph runs top to bottom, so its width is capped to keep it short. */
.graph-concept-svg {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
}

.graph-svg-edge {
  fill: none;
  stroke: var(--theme-color-primary);
  stroke-width: 2;
  stroke-linecap: round;
}

.graph-svg-arrow {
  fill: var(--theme-color-primary);
}

.graph-svg-node {
  fill: var(--theme-surface-raised);
  stroke: var(--theme-color-primary);
  stroke-width: 2.5;
}

.graph-svg-node.is-start {
  fill: var(--theme-color-primary);
}

.graph-concept-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  color: var(--theme-text-secondary);
  font-size: 14px;
}

.graph-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.graph-legend-item strong {
  color: var(--theme-text-primary);
}

/* EGF: knowledge graph vs learning graph, as a note of guidance */

.graph-guidance {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 56px;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--theme-color-primary) 35%, transparent);
  border-radius: var(--theme-radius-lg);
  background: var(--graph-primary-soft);
}

.graph-guidance p {
  max-width: 80ch;
  color: var(--theme-text-primary);
  font-size: 17px;
}

.graph-guidance .graph-tile-icon {
  background: var(--theme-surface-raised);
}

/* EGF: the example courses */

.graph-examples {
  display: grid;
  gap: 20px;
}

.graph-example {
  padding: 32px;
}

.graph-example-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.graph-card .graph-example-label {
  color: var(--theme-color-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.graph-card .graph-example-text {
  margin-bottom: 8px;
  color: var(--theme-text-secondary);
  font-size: 18px;
}

/* An example with a recording: its text and buttons beside the video. */
.graph-example-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 32px;
  align-items: center;
}

.graph-example-video video {
  aspect-ratio: 1654 / 944;
}

/* Code figures: a piece of an EGF file, with its caption */

.graph-code-figure {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  margin: 0;
}

.graph-code {
  margin: 0;
  padding: 24px;
  overflow-x: auto;
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-lg);
  background: var(--theme-surface-raised);
  box-shadow: var(--theme-shadow-sm);
  color: var(--theme-text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.7;
}

.graph-code-caption {
  color: var(--theme-text-secondary);
  font-size: 14px;
  text-align: center;
}

/* Part 02: the desktop editor */

/* The download button sits at the foot of its card, whatever the text's length. */
.graph-download .graph-actions {
  margin-top: auto;
  padding-top: 8px;
}

.graph-download-next {
  margin: 40px 0 0;
}

.graph-guidance-body {
  display: grid;
  gap: 20px;
}

/* Id prefixes share one width, so the editor's names line up after them. */
.graph-table-code {
  min-width: 40px;
  text-align: center;
}

/* Part 04: publishing and consuming */

.graph-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* The four options: what each one is for sits at the card's foot. */
.graph-card .graph-option-fit {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--theme-border-subtle);
}

.graph-option-fit strong {
  color: var(--theme-text-primary);
}

.graph-local-actions {
  margin-top: 28px;
}

/* Unplugged AI: the part's highlight, dressed like the hero. */
.graph-section-feature {
  border-block: 1px solid color-mix(in srgb, var(--theme-color-primary) 25%, transparent);
  background:
    radial-gradient(900px 480px at 90% 0%, var(--graph-primary-soft), transparent 70%),
    radial-gradient(700px 420px at 0% 100%, var(--graph-primary-soft), transparent 70%),
    var(--theme-bg-secondary);
}

.graph-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: var(--theme-radius-full);
  background: var(--theme-color-primary);
  color: var(--graph-on-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.graph-title-wide {
  max-width: 28ch;
}

/* Nodes by kind, with a mark for each way of running the course. */
.graph-table-plugs tbody th {
  width: auto;
}

.graph-table-plugs thead th:not(:first-child),
.graph-table-plugs td {
  width: 26%;
  text-align: center;
}

.graph-table-plugs thead th:nth-child(2) {
  color: var(--theme-color-primary);
}

.graph-table-note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.graph-table .graph-table-group th {
  padding-top: 10px;
  padding-bottom: 10px;
  background: var(--theme-bg-secondary);
  color: var(--theme-text-secondary);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Each group ends its own tbody: keep the line between groups. */
.graph-table-plugs tbody:not(:last-child) tr:last-child :where(th, td) {
  border-bottom: 1px solid var(--theme-border-subtle);
}

.graph-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--theme-radius-full);
  vertical-align: middle;
}

.graph-mark.is-on {
  background: var(--graph-primary-soft);
  color: var(--theme-color-primary);
}

.graph-mark.is-off {
  background: var(--theme-bg-tertiary);
  color: var(--theme-text-tertiary);
}

/* Business opportunities: each card ends with its examples */

.graph-card .graph-business-label {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--theme-border-subtle);
  color: var(--theme-color-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.graph-business-examples {
  gap: 8px;
}

.graph-business-examples li {
  padding-left: 20px;
  font-size: 15px;
}

.graph-business-examples li::before {
  left: 2px;
  width: 6px;
  height: 6px;
}

/* Page end: no footer, only breathing room below the last section. */

.graph-noscript {
  padding: 64px var(--graph-gutter);
}

/* Reveal on scroll */

.graph-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.graph-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .graph-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .graph-button:hover,
  .graph-pager-link:hover,
  .graph-map-link:is(:hover, :focus-visible) .graph-map-body {
    transform: none;
  }

  .graph-map-halo {
    animation: none;
  }
}

/* Responsive */

@media (min-width: 768px) {
  :root {
    --graph-gutter: 32px;
  }
}

@media (max-width: 900px) {
  /* The bar becomes a strip that scrolls sideways, edge to edge. */
  .graph-nav-list {
    display: flex;
    margin-right: calc(-1 * var(--graph-gutter));
    margin-left: calc(-1 * var(--graph-gutter));
    padding: 0 var(--graph-gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .graph-nav-list::-webkit-scrollbar {
    display: none;
  }

  .graph-nav-list > li {
    flex: none;
  }

  .graph-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .graph-nav-link {
    padding: 10px 8px;
    white-space: nowrap;
  }

  .graph-concept {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .graph-hero-media {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .graph-example-media {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width: 768px) {
  .graph-section {
    padding: 64px 0;
  }

  .graph-hero {
    padding: 64px 0 40px;
  }

  .graph-grid-2,
  .graph-grid-3,
  .graph-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .graph-block {
    margin-top: 44px;
  }

  .graph-part-header {
    padding: 64px 0 32px;
  }

  .graph-nav + .graph-part .graph-part-header {
    padding-top: 40px;
  }
}

@media (max-width: 560px) {
  :root {
    --graph-header-height: 56px;
  }

  .graph-header-logo {
    height: 40px;
  }

  .graph-card,
  .graph-example,
  .graph-concept-figure,
  .graph-code,
  .graph-guidance,
  .graph-soon {
    padding: 22px;
  }

  .graph-part-header-inner {
    gap: 14px;
  }

  .graph-table :where(th, td) {
    padding: 12px 14px;
  }

  .graph-table-names td span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
  }

  /* Terms stack over their descriptions: two columns are too narrow here. */
  .graph-table-terms tr {
    display: grid;
  }

  .graph-table-terms tbody th {
    width: auto;
    padding-bottom: 4px;
    border-bottom: 0;
  }

  .graph-table-terms td {
    padding-top: 4px;
  }

  /* The node table keeps its three columns: tighter cells and headings. */
  .graph-table-plugs thead th:not(:first-child),
  .graph-table-plugs td {
    width: 24%;
    padding-right: 6px;
    padding-left: 6px;
  }

  .graph-table-plugs thead th {
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .graph-table-plugs .graph-table-note {
    font-size: 11px;
  }

  .graph-table-plugs .graph-table-term {
    gap: 8px;
  }

  .graph-pager-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .graph-pager-inner > span:empty {
    display: none;
  }

  .graph-part-title {
    padding-left: 14px;
  }

  .graph-guidance {
    flex-direction: column;
    gap: 14px;
  }

  .graph-actions .graph-button {
    flex: 1 1 auto;
  }
}