.diagram {
      display: grid;
      gap: 20px;
    }
    .diagram header { display: grid; gap: 10px; }
    .diagram h1 { max-width: 920px; }
    .diagram [data-diagram-role="lead"] { max-width: 850px; }
    .input-card, .decision, .outcome, .policy-source, .policy-node,
    .sync-step, .loop-node, .contrast-item {
      min-width: 0;
      border: 1px solid var(--diagram-line);
      border-radius: 8px;
      background: var(--diagram-panel);
    }
    .input-card, .policy-node, .sync-step, .loop-node, .contrast-item {
      padding: 15px;
    }
    .input-card, .policy-node, .sync-step, .loop-node {
      display: grid;
      align-content: start;
      gap: 7px;
    }
    .input-card h2, .policy-node h2, .sync-step h2, .loop-node h2,
    .outcome h2, .contrast-item h2 {
      margin: 0;
      font-size: 15px !important;
      line-height: 1.35;
    }
    .input-card p, .policy-node p, .sync-step p, .loop-node p,
    .outcome p, .contrast-item p {
      margin: 0;
      color: var(--diagram-muted);
      font-size: 12px;
      line-height: 1.55;
    }
    .eyebrow {
      color: var(--track-strong, var(--track));
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    code {
      width: fit-content;
      padding: 3px 7px;
      border: 1px solid var(--diagram-line);
      border-radius: 6px;
      background: var(--diagram-paper);
      color: var(--diagram-text);
      font-size: 12px;
      font-weight: 750;
    }
    .rbac-map {
      display: grid;
      grid-template-columns: minmax(180px, .95fr) 34px minmax(190px, 1fr) 34px minmax(180px, .95fr);
      align-items: center;
      gap: 10px;
    }
    .input-stack, .outcome-stack { display: grid; gap: 10px; }
    .join-arrow, .branch-arrow, .flow-arrow, .turn-arrow {
      display: grid;
      place-items: center;
      color: var(--track-strong, var(--track));
      font-size: 20px;
      font-weight: 900;
    }
    .decision {
      display: grid;
      place-items: center;
      min-height: 132px;
      padding: 18px;
      border-color: color-mix(in srgb, var(--track) 44%, var(--diagram-line));
      background: var(--diagram-accent-bg);
      text-align: center;
    }
    .decision strong { color: var(--diagram-text); font-size: 17px; }
    .decision span { color: var(--diagram-muted); font-size: 12px; }
    .outcome {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      padding: 13px;
    }
    .outcome-mark {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      background: var(--diagram-accent-bg);
      color: var(--track-strong, var(--track));
      font-size: 12px;
      font-weight: 900;
    }
    .outcome.denied .outcome-mark {
      background: color-mix(in srgb, var(--diagram-panel-strong) 82%, var(--diagram-paper));
      color: var(--diagram-muted);
    }
    .contrast {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      overflow: hidden;
      border: 1px solid var(--diagram-line);
      border-radius: 8px;
    }
    .contrast-item { border: 0; border-radius: 0; background: var(--diagram-paper); }
    .contrast-item + .contrast-item { border-left: 1px solid var(--diagram-line); }
    .policy-map { display: grid; gap: 12px; }
    .policy-source {
      justify-self: center;
      display: grid;
      gap: 6px;
      width: min(100%, 420px);
      padding: 15px 20px;
      border-color: color-mix(in srgb, var(--track) 44%, var(--diagram-line));
      background: var(--diagram-accent-bg);
      text-align: center;
    }
    .policy-source strong { color: var(--diagram-text); font-size: 16px; }
    .fanout {
      position: relative;
      height: 24px;
      margin: 0 calc(16.666% - 1px);
      border-top: 1px solid var(--diagram-line);
      border-left: 1px solid var(--diagram-line);
      border-right: 1px solid var(--diagram-line);
    }
    .fanout::before {
      content: "";
      position: absolute;
      top: -13px;
      left: 50%;
      height: 13px;
      border-left: 1px solid var(--diagram-line);
    }
    .policy-consumers {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .policy-node {
      position: relative;
      border-top: 3px solid color-mix(in srgb, var(--track) 58%, transparent);
    }
    .sync-flow {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: stretch;
      gap: 8px;
    }
    .sync-step { background: var(--diagram-paper); }
    .step-no {
      display: grid;
      place-items: center;
      width: 25px;
      height: 25px;
      border: 1px solid color-mix(in srgb, var(--track) 38%, var(--diagram-line));
      border-radius: 999px;
      background: var(--diagram-accent-bg);
      color: var(--track-strong, var(--track));
      font-size: 10px;
      font-weight: 900;
    }
    .loop-shell {
      display: grid;
      gap: 8px;
      padding: 16px;
      border: 1px solid var(--diagram-line);
      border-radius: 8px;
      background: var(--diagram-paper);
    }
    .loop-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: stretch;
      gap: 8px;
    }
    .loop-node { background: var(--diagram-panel); }
    .loop-node strong { color: var(--track-strong, var(--track)); font-size: 11px; }
    .loop-turn {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      min-height: 28px;
      padding-right: 8%;
      color: var(--diagram-muted);
      font-size: 11px;
      font-weight: 750;
    }
    .loop-row.bottom { direction: rtl; }
    .loop-row.bottom > * { direction: ltr; }
    .loop-row.bottom .flow-arrow::before { content: "←"; }
    .loop-row.bottom .flow-arrow { font-size: 0; }
    .loop-row.bottom .flow-arrow::before { font-size: 20px; }
    .return-line {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 10px;
      color: var(--track-strong, var(--track));
      font-size: 11px;
      font-weight: 850;
      text-align: center;
    }
    .return-line::before, .return-line::after {
      content: "";
      height: 1px;
      background: var(--diagram-line);
    }
    @media (max-width: 720px) {
      .diagram { gap: 16px; }
      .rbac-map { grid-template-columns: 1fr; gap: 8px; }
      .join-arrow, .branch-arrow, .flow-arrow { transform: rotate(90deg); min-height: 24px; }
      .decision { min-height: 102px; }
      .contrast { grid-template-columns: 1fr; }
      .contrast-item + .contrast-item { border-left: 0; border-top: 1px solid var(--diagram-line); }
      .fanout { display: none; }
      .policy-consumers { grid-template-columns: 1fr; }
      .policy-source::after {
        content: "↓";
        position: absolute;
        left: 50%;
        margin-top: 56px;
        color: var(--track-strong, var(--track));
        font-size: 18px;
        transform: translateX(-50%);
      }
      .policy-source { position: relative; margin-bottom: 18px; }
      .policy-consumers { padding-left: 18px; }
      .policy-consumers::before {
        content: "";
        position: absolute;
        top: 28px;
        bottom: 28px;
        left: 0;
        width: 1px;
        background: var(--diagram-line);
      }
      .policy-node::before {
        content: "";
        position: absolute;
        top: 27px;
        left: -18px;
        width: 18px;
        height: 1px;
        background: var(--diagram-line);
      }
      .sync-flow, .loop-row { grid-template-columns: 1fr; }
      .loop-turn { justify-content: center; padding: 0; }
      .loop-row.bottom { direction: ltr; }
      .loop-row.bottom .flow-arrow::before { content: "→"; }
      .return-line { grid-template-columns: 1fr; }
      .return-line::before, .return-line::after { display: none; }
    }