/* Mechanism diagrams for long-form technical writing. Scoped to .edu-diagram. */
.edu-diagram {
  --ed-bg: var(--dg-ground, #fbfaf8);
  --ed-panel: var(--dg-panel, #f6f5f1);
  --ed-ink: var(--dg-ink, #1c1b1a);
  --ed-muted: var(--dg-soft, #56534e);
  --ed-line: var(--dg-hair, #c9c5bc);
  --ed-blue: var(--dg-link, #26456b);
  --ed-red: var(--dg-red, #8a2f2f);
  --ed-green: var(--dg-green, #3d5c43);
  color: var(--ed-ink);
  font: 15px/1.45 var(--sans, system-ui, sans-serif);
  margin-block: 36px 46px !important;
  min-width: 0;
}
.edu-diagram *, .edu-diagram *::before, .edu-diagram *::after { box-sizing: border-box; }
.edu-diagram .ed-board { border: 1px solid var(--ed-line); background: var(--ed-bg); padding: clamp(20px, 3vw, 32px); overflow: hidden; }
.edu-diagram .ed-head { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 15px; margin-bottom: 28px; }
.edu-diagram .ed-index { border: 1px solid var(--ed-blue); color: var(--ed-blue); font: 600 12px/1 var(--mono, monospace); padding: 9px 7px; min-width: 33px; text-align: center; }
.edu-diagram .ed-title { display: block; font: 600 clamp(22px,2.7vw,29px)/1.14 var(--serif, Georgia, serif); letter-spacing: -.02em; }
.edu-diagram .ed-deck { display: block; color: var(--ed-muted); font-size: 14px; line-height: 1.5; margin-top: 8px; max-width: 66ch; }
.edu-diagram .ed-label { font: 600 11px/1.3 var(--mono, monospace); letter-spacing: .07em; text-transform: uppercase; color: var(--ed-muted); }
.edu-diagram .ed-blue { color: var(--ed-blue); }
.edu-diagram .ed-red { color: var(--ed-red); }
.edu-diagram .ed-green { color: var(--ed-green); }
.edu-diagram .ed-tag { display: inline-block; border: 1px solid var(--ed-line); padding: 4px 7px; font: 11px/1.2 var(--mono, monospace); white-space: nowrap; }
.edu-diagram .ed-arrow { color: var(--ed-blue); font: 24px/1 var(--mono, monospace); text-align: center; align-self: center; }
.post .edu-diagram figcaption { margin-top: 12px; }

/* 01: Nested territory. A process is inside one region, while assets remain outside. */
.ed-request { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 17px; }
.ed-request .ed-agent { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
.ed-request .ed-agent::before { content: ''; width: 15px; height: 15px; border: 3px solid var(--ed-blue); border-radius: 50%; }
.ed-request code { padding: 7px 11px !important; border: 1px solid var(--ed-line); background: var(--ed-panel) !important; font: 12px/1.4 var(--mono, monospace) !important; overflow-wrap: anywhere; }
.ed-world { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(0,1fr); gap: 10px; min-height: 250px; }
.ed-zone { padding: 16px; min-width: 0; }
.ed-sandbox-zone { border: 2px solid var(--ed-blue); background: color-mix(in srgb, var(--ed-blue) 7%, var(--ed-bg)); }
.ed-host-zone { border: 1px dashed var(--ed-red); background: color-mix(in srgb, var(--ed-red) 4%, var(--ed-bg)); }
.ed-zone-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.ed-zone-title { font: 600 16px/1.2 var(--sans, system-ui, sans-serif); }
.ed-runner { background: var(--ed-bg); border: 1px solid var(--ed-line); padding: 12px 14px; margin-bottom: 13px; }
.ed-runner strong { display: block; font: 600 12px/1.3 var(--mono, monospace); }
.ed-runner small { display: block; color: var(--ed-muted); margin-top: 4px; font-size: 12px; }
.ed-access { display: flex; flex-wrap: wrap; gap: 7px; }
.ed-access .ed-tag { border-color: var(--ed-green); color: var(--ed-green); }
.ed-host-zone .ed-access { display: grid; }
.ed-host-zone .ed-tag { border-color: var(--ed-red); color: var(--ed-red); width: fit-content; }
.ed-wall-label { margin: 11px 0 0; color: var(--ed-blue); font: 11px/1.35 var(--mono, monospace); }

/* 02: The agent feedback loop. Large numerals replace tiny equal boxes. */
.ed-loop { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; border-block: 1px solid var(--ed-line); }
.ed-loop-step { padding: 18px 14px 22px; min-height: 178px; border-right: 1px solid var(--ed-line); position: relative; }
.ed-loop-step:last-child { border-right: 0; }
.ed-loop-step::before { content: attr(data-step); display: block; font: 500 40px/1 var(--mono, monospace); color: var(--ed-blue); margin-bottom: 12px; }
.ed-loop-step strong { display: block; font-size: 15px; line-height: 1.25; }
.ed-loop-step small { display: block; font-size: 12px; line-height: 1.45; color: var(--ed-muted); margin-top: 6px; }
.ed-loop-step:last-child::before { color: var(--ed-red); }
.ed-loop-return { display: flex; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--ed-line); color: var(--ed-blue); font: 11px/1.3 var(--mono, monospace); }

/* 03: Architecture as distinct vertical layers. */
.ed-stacks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.ed-stack { min-width: 0; }
.ed-stack-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 11px; }
.ed-stack-heading strong { font-size: 17px; }
.ed-stack-heading small { font-size: 11px; color: var(--ed-muted); }
.ed-layer { padding: 13px 14px; border: 1px solid var(--ed-line); margin-top: 4px; display: flex; justify-content: space-between; gap: 9px; align-items: center; min-height: 48px; font-size: 13px; }
.ed-layer small { font: 11px/1.3 var(--mono, monospace); color: var(--ed-muted); text-align: right; }
.ed-layer.ed-kernel { border-color: var(--ed-blue); background: color-mix(in srgb, var(--ed-blue) 9%, var(--ed-bg)); font-weight: 600; }
.ed-layer.ed-hypervisor { border-style: dashed; border-color: var(--ed-blue); color: var(--ed-blue); background: color-mix(in srgb, var(--ed-blue) 4%, var(--ed-bg)); }
.ed-stack-foot { display: block; margin-top: 10px; color: var(--ed-muted); font-size: 12px; }

/* 04: Two meanings of micro, presented as scale and duration. */
.ed-micro { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.ed-micro-panel { border: 1px solid var(--ed-line); padding: 17px; min-height: 260px; background: color-mix(in srgb, var(--ed-blue) 4%, var(--ed-bg)); }
.ed-micro-panel h3 { margin: 0 0 5px !important; font: 600 17px/1.2 var(--sans,system-ui,sans-serif) !important; }
.ed-micro-panel > p { margin: 0 0 16px !important; font-size: 12px; color: var(--ed-muted); }
.ed-micro-vm { width: min(185px,100%); aspect-ratio: 1; margin: 12px auto; border: 2px solid var(--ed-blue); border-radius: 50%; display: grid; place-items: center; text-align: center; font: 600 13px/1.25 var(--mono,monospace); }
.ed-micro-vm span { display: block; color: var(--ed-blue); font-size: 10px; font-weight: 400; margin-top: 8px; }
.ed-micro-timeline { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin: 51px 0 42px; }
.ed-micro-timeline span { border: 1px solid var(--ed-blue); padding: 10px 8px; font: 11px/1.25 var(--mono,monospace); text-align: center; flex: 1; }
.ed-micro-timeline i { flex: 0 0 12px; height: 1px; background: var(--ed-blue); }
.ed-micro-result { border-top: 1px solid var(--ed-line); padding-top: 10px; color: var(--ed-blue); font-size: 12px; }

/* 05: A permitted bridge across two security domains. */
.ed-route { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; min-height: 225px; }
.ed-route-region { border: 1px solid var(--ed-line); padding: 17px; min-width: 0; position: relative; }
.ed-route-region:first-child { border-color: var(--ed-blue); background: var(--ed-panel); }
.ed-route-region:nth-child(2) { border: 2px solid var(--ed-blue); background: color-mix(in srgb, var(--ed-blue) 9%, var(--ed-bg)); }
.ed-route-region:last-child { border-color: var(--ed-red); background: color-mix(in srgb, var(--ed-red) 5%, var(--ed-bg)); }
.ed-route-region:not(:last-child)::after { content: '→'; position: absolute; right: -22px; top: 48%; z-index: 1; background: var(--ed-bg); color: var(--ed-blue); font: 25px/1 var(--mono,monospace); }
.ed-route .ed-region-title { display: block; font: 600 11px/1.3 var(--mono,monospace); letter-spacing: .05em; margin-bottom: 26px; }
.ed-route .ed-actor { font: 600 21px/1.15 var(--serif,Georgia,serif); display: block; }
.ed-route .ed-actor-detail { color: var(--ed-muted); font-size: 12px; display: block; margin-top: 10px; }
.ed-route-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.ed-route-steps span { border-top: 2px solid var(--ed-line); padding-top: 8px; font-size: 11px; color: var(--ed-muted); }
.ed-route-steps b { color: var(--ed-blue); font: 600 11px/1 var(--mono,monospace); margin-right: 5px; }

/* 06: Egress policy: approved domain, unauthorized account/action. */
.ed-api { display: grid; grid-template-columns: minmax(0,1fr) 32px minmax(0,1.25fr); align-items: center; gap: 10px; min-height: 215px; }
.ed-api-origin { border: 1px solid var(--ed-blue); padding: 18px; background: var(--ed-panel); }
.ed-api-origin strong { display: block; font: 600 20px/1.2 var(--serif,Georgia,serif); margin: 20px 0 8px; }
.ed-api-origin small { display: block; color: var(--ed-muted); font-size: 12px; }
.ed-api-dest { border: 1px solid var(--ed-line); padding: 18px; }
.ed-api-dest .ed-domain { font: 600 14px/1.3 var(--mono,monospace); color: var(--ed-green); display: block; margin: 13px 0 4px; }
.ed-api-dest .ed-account { font: 600 20px/1.2 var(--serif,Georgia,serif); color: var(--ed-red); display: block; margin: 10px 0; }
.ed-api-dest small { color: var(--ed-muted); font-size: 12px; }

/* 07: Task-to-boundary selection, with the governing question for each row. */
.ed-choice { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr) minmax(0,1.2fr); }
.ed-choice > * { border-bottom: 1px solid var(--ed-line); padding: 14px 12px; font-size: 12px; min-width: 0; }
.ed-choice .ed-choice-head { padding-top: 4px; color: var(--ed-muted); font: 600 10px/1.3 var(--mono,monospace); text-transform: uppercase; }
.ed-choice strong { font-size: 14px; }
.ed-choice em { font-style: normal; color: var(--ed-blue); font-weight: 600; }

@media (max-width: 700px) {
  .edu-diagram .ed-board { padding: 18px; }
  .ed-world, .ed-micro, .ed-stacks { grid-template-columns: 1fr; }
  .ed-world { min-height: 0; }
  .ed-loop { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ed-loop-step:nth-child(2) { border-right: 0; }
  .ed-loop-step:nth-child(-n+2) { border-bottom: 1px solid var(--ed-line); }
  .ed-loop-step { min-height: 150px; }
  .ed-micro-panel { min-height: 0; }
  .ed-micro-timeline { margin: 20px 0; }
  .ed-route { grid-template-columns: minmax(0,1fr); }
  .ed-route-region { min-height: 155px; }
  .ed-route .ed-region-title { margin-bottom: 18px; }
  .ed-route-region:not(:last-child)::after { content: '↓'; right: 50%; top: auto; bottom: -23px; }
  .ed-api { grid-template-columns: 1fr; }
  .ed-api .ed-arrow { transform: rotate(90deg); }
  .ed-choice { grid-template-columns: 1fr; }
  .ed-choice .ed-choice-head { display: none; }
  .ed-choice > * { border-bottom: 0; padding: 5px 0; }
  .ed-choice > strong { border-top: 1px solid var(--ed-line); padding-top: 14px; margin-top: 7px; }
}

/* Kubernetes: from one host to cluster coordination. */
.edu-diagram .ed-k8s-scales { display: grid; grid-template-columns: minmax(0,1fr) 32px minmax(0,1.8fr); align-items: stretch; gap: 14px; }
.edu-diagram .ed-k8s-host, .edu-diagram .ed-k8s-fleet { min-width: 0; padding: 18px; border: 1px solid var(--ed-line); background: var(--ed-panel); }
.edu-diagram .ed-k8s-host > strong, .edu-diagram .ed-k8s-fleet > strong { display: block; margin: 9px 0 18px; font: 600 22px/1.2 var(--serif, Georgia, serif); }
.edu-diagram .ed-k8s-host > small, .edu-diagram .ed-k8s-fleet > small { display: block; margin-top: 18px; color: var(--ed-muted); font-size: 12px; line-height: 1.5; }
.edu-diagram .ed-k8s-container { border: 2px solid var(--ed-blue); background: var(--ed-bg); padding: 18px 12px; text-align: center; font-weight: 600; }
.edu-diagram .ed-k8s-container span { display: block; color: var(--ed-blue); font-size: 32px; line-height: 1; margin-bottom: 8px; }
.edu-diagram .ed-k8s-scale-arrow { align-self: center; color: var(--ed-blue); font-size: 30px; text-align: center; }
.edu-diagram .ed-k8s-nodes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.edu-diagram .ed-k8s-node { display: flex; flex-direction: column; gap: 7px; padding: 12px; min-width: 0; border: 1px solid var(--ed-blue); background: var(--ed-bg); }
.edu-diagram .ed-k8s-node b { font: 600 12px/1.2 var(--mono, monospace); }
.edu-diagram .ed-k8s-node span { padding: 7px; background: color-mix(in srgb, var(--ed-blue) 10%, var(--ed-bg)); font-size: 12px; }

/* Kubernetes: desired state and reconciliation. */
.edu-diagram .ed-k8s-loop { display: grid; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1.25fr); align-items: stretch; gap: 9px; }
.edu-diagram .ed-k8s-desired, .edu-diagram .ed-k8s-actual, .edu-diagram .ed-k8s-reconcile { min-width: 0; padding: 18px; border: 1px solid var(--ed-line); background: var(--ed-panel); }
.edu-diagram .ed-k8s-desired { border-top: 4px solid var(--ed-blue); }
.edu-diagram .ed-k8s-actual { border-top: 4px solid var(--ed-red); }
.edu-diagram .ed-k8s-reconcile { border-top: 4px solid var(--ed-green); }
.edu-diagram .ed-k8s-loop strong { display: block; margin-top: 12px; font: 600 20px/1.2 var(--serif, Georgia, serif); }
.edu-diagram .ed-k8s-pods { display: block; margin-top: 18px; color: var(--ed-blue); font-size: 22px; white-space: nowrap; }
.edu-diagram .ed-k8s-pods i { color: var(--ed-red); font: 12px/1.2 var(--mono, monospace); }
.edu-diagram .ed-k8s-loop small { display: block; margin-top: 13px; color: var(--ed-muted); font-size: 12px; line-height: 1.5; }
.edu-diagram .ed-k8s-loop-arrow { align-self: center; text-align: center; color: var(--ed-blue); font-size: 26px; }
.edu-diagram .ed-k8s-repeat { margin-top: 14px; padding: 11px 15px; border-left: 3px solid var(--ed-green); background: color-mix(in srgb, var(--ed-green) 7%, var(--ed-bg)); font-size: 13px; }
.edu-diagram .ed-k8s-repeat span { font-size: 20px; margin-right: 7px; vertical-align: middle; }

/* Kubernetes: stable Service and changing backends. */
.edu-diagram .ed-k8s-traffic { display: grid; grid-template-columns: minmax(0,.7fr) 26px minmax(0,1fr) 26px minmax(0,1.7fr); gap: 9px; align-items: center; }
.edu-diagram .ed-k8s-client, .edu-diagram .ed-k8s-service { min-width: 0; padding: 18px 13px; border: 1px solid var(--ed-line); text-align: center; background: var(--ed-panel); }
.edu-diagram .ed-k8s-service { border: 2px solid var(--ed-blue); background: color-mix(in srgb, var(--ed-blue) 7%, var(--ed-bg)); }
.edu-diagram .ed-k8s-client strong, .edu-diagram .ed-k8s-service strong { display: block; font: 600 20px/1.2 var(--serif, Georgia, serif); margin-top: 8px; }
.edu-diagram .ed-k8s-service small { display: block; margin-top: 8px; color: var(--ed-muted); font-size: 12px; }
.edu-diagram .ed-k8s-route { text-align: center; color: var(--ed-blue); font-size: 26px; }
.edu-diagram .ed-k8s-backends { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.edu-diagram .ed-k8s-backends > div { min-width: 0; padding: 13px 8px; border: 1px solid var(--ed-line); text-align: center; background: var(--ed-bg); }
.edu-diagram .ed-k8s-backends b, .edu-diagram .ed-k8s-backends span { display: block; }
.edu-diagram .ed-k8s-backends b { font: 600 11px/1.2 var(--mono, monospace); }
.edu-diagram .ed-k8s-backends span { margin-top: 8px; font-size: 12px; }
.edu-diagram .ed-k8s-backends .ed-k8s-ready { border-top: 4px solid var(--ed-green); }
.edu-diagram .ed-k8s-backends .ed-k8s-failed { border-top: 4px solid var(--ed-red); color: var(--ed-red); background: color-mix(in srgb, var(--ed-red) 5%, var(--ed-bg)); }
.edu-diagram .ed-k8s-recovery { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ed-line); font-size: 13px; line-height: 1.5; }

@media (max-width: 700px) {
  .edu-diagram .ed-k8s-scales, .edu-diagram .ed-k8s-loop, .edu-diagram .ed-k8s-traffic { grid-template-columns: minmax(0,1fr); }
  .edu-diagram .ed-k8s-scale-arrow, .edu-diagram .ed-k8s-loop-arrow, .edu-diagram .ed-k8s-route { transform: rotate(90deg); line-height: 1; }
  .edu-diagram .ed-k8s-nodes, .edu-diagram .ed-k8s-backends { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  .edu-diagram:is(:hover,:focus-within) .ed-route-region:not(:last-child)::after { animation: ed-cross 1.1s ease-in-out 2 alternate; }
  @keyframes ed-cross { from { opacity: .3; transform: translateX(-9px); } to { opacity: 1; transform: translateX(0); } }
}

/* Sandbox revision: access map, three decisions and syscall routes.
   All labels remain visible. These figures are static in both motion modes. */
.edu-diagram .ed-scope-map { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 16px; }
.edu-diagram .ed-scope-inner { border: 2px solid var(--ed-blue); padding: 20px; background: color-mix(in srgb, var(--ed-blue) 5%, var(--ed-bg)); }
.edu-diagram .ed-scope-inner > strong { display: block; font-size: 19px; }
.edu-diagram .ed-scope-note { display: block; margin-top: 6px; color: var(--ed-muted); font-size: 13px; }
.edu-diagram .ed-workspace { margin-top: 18px; padding: 16px; border-left: 4px solid var(--ed-green); background: var(--ed-bg); }
.edu-diagram .ed-workspace strong { display: block; color: var(--ed-green); margin-bottom: 6px; }
.edu-diagram .ed-workspace code { font-size: 12px; overflow-wrap: anywhere; }
.edu-diagram .ed-scope-protected { border: 2px dashed var(--ed-red); padding: 20px; }
.edu-diagram .ed-scope-protected > strong { color: var(--ed-red); display: block; font-size: 19px; }
.edu-diagram .ed-scope-protected ul { margin: 14px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.65; }
.edu-diagram .ed-scope-protected li { margin: 0; }
.edu-diagram .ed-mediated { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1.3fr) auto minmax(0,1fr); align-items: center; gap: 10px; margin-top: 16px; padding: 16px; border: 1px solid var(--ed-blue); }
.edu-diagram .ed-mediated strong { display: block; font-size: 14px; }
.edu-diagram .ed-mediated small { display: block; font-size: 12px; color: var(--ed-muted); margin-top: 5px; }
.edu-diagram .ed-policy-gate { border-inline: 3px solid var(--ed-blue); padding: 12px; background: var(--ed-panel); }
.edu-diagram .ed-api-authority { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 18px; margin-top: 16px; padding: 18px; border: 2px solid var(--dg-purple, #5a3f7a); }
.edu-diagram .ed-api-authority strong { color: var(--dg-purple, #5a3f7a); display: block; }
.edu-diagram .ed-api-authority span { font-size: 13px; }

.edu-diagram .ed-decisions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; }
.edu-diagram .ed-decision { min-width: 0; padding: 18px; border: 1px solid var(--ed-line); border-top: 4px solid var(--ed-blue); }
.edu-diagram .ed-decision + .ed-decision { border-left: 0; }
.edu-diagram .ed-decision:nth-child(2) { border-top-color: var(--ed-green); }
.edu-diagram .ed-decision:nth-child(3) { border-top-color: var(--dg-purple, #5a3f7a); }
.edu-diagram .ed-decision-title { display: block; font: 600 24px/1.2 var(--serif, Georgia, serif); }
.edu-diagram .ed-decision-question { display: block; margin: 13px 0; font-size: 15px; font-weight: 600; line-height: 1.45; }
.edu-diagram .ed-decision-detail { display: block; min-height: 66px; color: var(--ed-muted); font-size: 13px; }
.edu-diagram .ed-decision-example { display: block; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--ed-line); font-size: 13px; }
.edu-diagram .ed-decision-example b { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ed-muted); margin-bottom: 7px; }
.edu-diagram .ed-lifecycle-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 9px; font: 12px/1.4 var(--mono, monospace); }
.edu-diagram .ed-lifecycle-flow span { border: 1px solid var(--ed-line); padding: 4px 6px; }

.edu-diagram .ed-kernel-paths { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.edu-diagram .ed-kernel-path { min-width: 0; display: flex; flex-direction: column; }
.edu-diagram .ed-kernel-path-title { display: block; font: 600 24px/1.2 var(--serif, Georgia, serif); margin-bottom: 6px; }
.edu-diagram .ed-kernel-path-summary { display: block; color: var(--ed-muted); font-size: 12px; min-height: 42px; }
.edu-diagram .ed-kernel-track { display: flex; flex-direction: column; flex: 1; margin-top: 12px; }
.edu-diagram .ed-path-node { border: 1px solid var(--ed-line); padding: 14px 12px; min-width: 0; font-size: 14px; background: var(--ed-panel); }
.edu-diagram .ed-path-node strong { display: block; }
.edu-diagram .ed-path-node small { display: block; margin-top: 5px; font-size: 12px; color: var(--ed-muted); line-height: 1.5; }
.edu-diagram .ed-path-node.ed-application-kernel { border: 2px solid var(--ed-blue); background: color-mix(in srgb, var(--ed-blue) 7%, var(--ed-bg)); }
.edu-diagram .ed-path-node.ed-guest-kernel { border: 2px solid var(--ed-green); background: color-mix(in srgb, var(--ed-green) 7%, var(--ed-bg)); }
.edu-diagram .ed-path-hop { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 4px; font-size: 12px; color: var(--ed-muted); }
.edu-diagram .ed-path-hop > span:first-child { font-size: 26px; color: var(--ed-blue); }
.edu-diagram .ed-path-hop.ed-direct-hop { flex: 1; min-height: 154px; }
.edu-diagram .ed-path-hop.ed-direct-hop > span:first-child { align-self: stretch; position: relative; width: 15px; font-size: 0; }
.edu-diagram .ed-direct-hop > span:first-child::before { content: ''; display: block; width: 1px; height: calc(100% - 8px); background: var(--ed-blue); margin: 0 auto; }
.edu-diagram .ed-direct-hop > span:first-child::after { content: '\2193'; font-size: 26px; position: absolute; bottom: -3px; left: -1px; }
.edu-diagram .ed-path-filter { border-block: 1px dashed var(--ed-blue); padding: 12px; font-size: 13px; }
.edu-diagram .ed-path-filter small { display: block; font-size: 12px; color: var(--ed-muted); margin-top: 4px; }
.edu-diagram .ed-path-host { margin-top: auto; padding: 14px 12px; border-top: 3px solid var(--ed-red); background: color-mix(in srgb, var(--ed-red) 6%, var(--ed-bg)); font-size: 13px; }
.edu-diagram .ed-path-host strong { display: block; color: var(--ed-red); margin-bottom: 5px; }
.edu-diagram .ed-host-foundation { margin-top: 0; padding: 16px; border: 1px solid var(--ed-red); background: color-mix(in srgb, var(--ed-red) 6%, var(--ed-bg)); text-align: center; }
.edu-diagram .ed-host-foundation strong { display: block; font-size: 19px; }
.edu-diagram .ed-host-foundation small { display: block; font-size: 12px; color: var(--ed-muted); margin-top: 4px; }
.edu-diagram .ed-path-caveat { display: block; margin-top: 14px; color: var(--ed-muted); font-size: 12px; line-height: 1.6; }

@media (max-width: 700px) {
  .edu-diagram .ed-scope-map, .edu-diagram .ed-api-authority, .edu-diagram .ed-decisions, .edu-diagram .ed-kernel-paths { grid-template-columns: minmax(0,1fr); }
  .edu-diagram .ed-scope-inner, .edu-diagram .ed-scope-protected { padding: 16px; }
  .edu-diagram .ed-mediated { grid-template-columns: minmax(0,1fr); text-align: center; }
  .edu-diagram .ed-mediated > .ed-arrow { transform: rotate(90deg); }
  .edu-diagram .ed-decision + .ed-decision { border-left: 1px solid var(--ed-line); }
  .edu-diagram .ed-decision-detail { min-height: 0; }
  .edu-diagram .ed-kernel-path { padding-bottom: 14px; }
  .edu-diagram .ed-kernel-path-summary { min-height: 0; }
  .edu-diagram .ed-path-hop.ed-direct-hop { min-height: 80px; }
  .edu-diagram .ed-host-foundation { text-align: left; }
}