/* codex-lint-normalize */
:root{--track:#000000;}
html[data-diagram-theme="dark"]{--track:#e5e7eb;}
html,
body{margin:0;padding:0;overflow:hidden;background:transparent;}
body{overflow-wrap:anywhere;}
.diagram{width:100%;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper);contain:layout paint;}
.diagram,.diagram *{max-width:100%;}
@media (max-width: 760px){}
@media (max-width: 360px){}
/* /codex-lint-normalize */

/* codex-quality-baseline */
:root{--track:#000000;--track-strong:#000000;}
html[data-diagram-theme="dark"]{--track:#e5e7eb;--track-strong:#e5e7eb;}
*,*::before,*::after{box-sizing:border-box;}
html,
body{margin:0;padding:0;overflow:hidden;background:transparent;}
body{overflow-wrap:break-word;}
.diagram{width:100%;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper);contain:layout paint;}
.diagram,.diagram *{max-width:100%;}
@media (max-width: 760px){}
@media (max-width: 360px){}
[class*="step-no"],[class*="step-number"],[class*="step-index"]{border:1px solid var(--line);background:var(--paper);color:var(--track);}
/* /codex-quality-baseline */

:root {
  color-scheme: light;
  --paper: #ffffff;
  --panel: #f8fafc;
  --panel-strong: #f1f5f9;
  --text: #111827;
  --muted: #526071;
  --line: #dfe5ec;
  --line-strong: #cbd5e1;
  --blue: #2563eb;
  --green: #059669;
  --amber: #b45309;
  --red: #dc2626;
}
html[data-diagram-theme="dark"] {
  color-scheme: dark;
  --paper: #111113;
  --panel: #18181b;
  --panel-strong: #202127;
  --text: #f8fafc;
  --muted: #cbd5e1;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.2);
  --blue: #93c5fd;
  --green: #6ee7b7;
  --amber: #fbbf24;
  --red: #fca5a5;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
  letter-spacing: 0;
}
body {
  color: var(--text);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.diagram {
  width: 100%;
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius:8px;
  background: var(--paper);
}
.next-ch5-ch5-2-header {
  display: grid;
  gap: 7px;
}
.next-ch5-ch5-2-kicker {
  width: fit-content;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius:6px;
  background: var(--panel);
  color: var(--blue);
  font-size:12px;
  font-weight: 800;
}
h1, h2, h3, p { margin: 0; }
h1 {
  font-size:24px;
  line-height: 1.25;
}
h2 {
  font-size:15px;
  line-height: 1.35;
}
p, span, li, td, th {
  font-size:13px;
  line-height: 1.52;
}
.next-ch5-ch5-2-lead, .muted, td span {
  color: var(--muted);
}
.grid {
  display: grid;
  gap: 10px;
}
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card, .step, .note, .next-ch5-ch5-2-table-wrap {
  border: 1px solid var(--line);
  border-radius:8px;
  background: var(--paper);
}
.card, .step, .note {
  display: grid;
  gap: 7px;
  padding: 11px;
}
.panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius:8px;
  background: var(--panel);
}
.badge {
  width: fit-content;
  padding: 2px 7px;
  border-radius:6px;
  border: 1px solid var(--line-strong);
  background: var(--panel-strong);
  color: var(--green);
  font-size:12px;
  font-weight: 800;
}
.num {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius:6px;
  background: var(--panel);
  color: var(--blue);
  font-size:12px;
  font-weight: 850;
}
.sequence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.sequence .step {
  align-content: start;
}
.path {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.path .step {
  min-height: 104px;
}
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
th, td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--panel);
  color: var(--text);
  font-size:13px;
}
tr:last-child td { border-bottom: 0; }
.ok { color: var(--green); font-weight: 800; }
.warn { color: var(--amber); font-weight: 800; }
.bad { color: var(--red); font-weight: 800; }
.code {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius:7px;
  background: var(--panel);
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size:12px;
  line-height: 1.5;
  white-space: pre-wrap;
}
@media (max-width: 720px) {
  .diagram { padding: 12px; gap: 12px; }
  h1 { font-size:21px; }
  .cols-2, .cols-3, .cols-4, .sequence, .path {
    grid-template-columns: minmax(0, 1fr);
  }
  .path .step { min-height: 0; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr {
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
  }
  tr:last-child { border-bottom: 0; }
  td {
    border-bottom: 0;
    padding: 5px 10px;
  }
  td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size:12px;
    font-weight: 800;
    margin-bottom: 2px;
  }
}

/* codex-quality-theme */
:root{--track:#000000;}
html[data-diagram-theme="dark"]{--track:#e5e7eb;}
/* /codex-quality-theme */




/* codex-gold-next-ch5-soft-theme */
:root {
  --track: #2563eb;
  --track-strong: #2563eb;
  --track-tint: #eef6ff;
  --next-gold-line: #bfd7ff;
  --next-gold-line-strong: #8fb8ff;
  --next-gold-paper: #ffffff;
  --next-gold-surface: #f8fafc;
  --next-gold-surface-strong: #eaf4ff;
  --next-gold-text: #111827;
  --next-gold-muted: #475569;
  --line: #bfd7ff;
  --line-strong: #bfd7ff;
  --paper: #ffffff;
  --surface: #f8fafc;
  --surface-strong: #eaf4ff;
  --node: #ffffff;
  --text: #111827;
  --ink: #111827;
  --muted: #475569;
  --subtle: #64748b;
  --accent: #2563eb;
  --accent-2: #2563eb;
  --safe: #2563eb;
  --success: #2563eb;
  --ok: #2563eb;
  --warn: #2563eb;
  --warning: #2563eb;
  --risk: #2563eb;
  --danger: #2563eb;
  --error: #2563eb;
  --green: #2563eb;
  --yellow: #2563eb;
  --orange: #2563eb;
  --warn-bg: #eef6ff;
  --warn-tint: #eef6ff;
  --success-bg: #eef6ff;
  --danger-bg: #eef6ff;
}
html[data-diagram-theme="dark"] {
  --track: #86b7ff;
  --track-strong: #a8c7ff;
  --track-tint: rgba(134, 183, 255, 0.12);
  --next-gold-line: rgba(134, 183, 255, 0.26);
  --next-gold-line-strong: rgba(134, 183, 255, 0.34);
  --next-gold-paper: #111113;
  --next-gold-surface: #171a20;
  --next-gold-surface-strong: rgba(134, 183, 255, 0.13);
  --next-gold-text: #f4f4f5;
  --next-gold-muted: #b6c2d2;
  --line: rgba(134, 183, 255, 0.26);
  --line-strong: rgba(134, 183, 255, 0.3);
  --paper: #111113;
  --surface: #171a20;
  --surface-strong: rgba(134, 183, 255, 0.13);
  --node: #111113;
  --text: #f4f4f5;
  --ink: #f4f4f5;
  --muted: #b6c2d2;
  --subtle: #94a3b8;
  --accent: #a8c7ff;
  --accent-2: #a8c7ff;
  --safe: #a8c7ff;
  --success: #a8c7ff;
  --ok: #a8c7ff;
  --warn: #a8c7ff;
  --warning: #a8c7ff;
  --risk: #a8c7ff;
  --danger: #a8c7ff;
  --error: #a8c7ff;
  --green: #a8c7ff;
  --yellow: #a8c7ff;
  --orange: #a8c7ff;
  --warn-bg: rgba(134, 183, 255, 0.12);
  --warn-tint: rgba(134, 183, 255, 0.12);
  --success-bg: rgba(134, 183, 255, 0.12);
  --danger-bg: rgba(134, 183, 255, 0.12);
}
.diagram {
  border-color: var(--next-gold-line) !important;
  background: var(--next-gold-paper) !important;
  color: var(--next-gold-text) !important;
  box-shadow: none !important;
}
.diagram :where([class*="wrap"], [class*="body"], [class*="content"]) {
  background: transparent !important;
}
.diagram :where(
  [class*="head"],
  [class*="hero"],
  [class*="intro"],
  [class*="panel"],
  [class*="section"],
  [class*="summary"],
  [class*="note"],
  [class*="result"],
  [class*="compare"],
  [class*="matrix"],
  [class*="checks"],
  [class*="snippet"],
  [class*="side"]
) {
  border-color: var(--next-gold-line) !important;
}
.diagram :where([class*="head"], [class*="hero"], [class*="intro"]) {
  background: color-mix(in srgb, var(--next-gold-paper) 84%, var(--track-tint)) !important;
}
.diagram :where(
  [class*="card"],
  [class*="type"],
  [class*="item"],
  [class*="tile"],
  [class*="box"],
  [class*="step"],
  [class*="row"],
  [class*="cell"],
  [class*="case"],
  [class*="node"],
  [class*="choice"],
  [class*="rule"],
  [class*="check"],
  [class*="axis"],
  [class*="entry"],
  [class*="option"],
  [class*="lane"],
  [class*="stage"],
  [class*="contract"],
  [class*="note"],
  [class*="summary"],
  [class*="result"],
  [class*="compare"],
  [class*="matrix"],
  [class*="principle"],
  [class*="warning"],
  [class*="warn"],
  [class*="alert"],
  [class*="hint"],
  [class*="callout"],
  [class*="decision"],
  [class*="ledger"],
  [class*="evidence"],
  [class*="safe"],
  [class*="success"],
  [class*="ok"],
  [class*="risk"],
  [class*="danger"],
  [class*="error"],
  [class*="caution"],
  [class*="pitfall"],
  [class*="benefit"],
  [class*="cost"],
  [class*="problem"],
  [class*="signal"],
  [class*="operator"],
  [class*="source"],
  [class*="producer"],
  [class*="consumer"],
  [class*="cleanup"],
  [data-tone]
) {
  border-color: color-mix(in srgb, var(--track) 24%, var(--next-gold-line)) !important;
}
.diagram :where(
  [class*="card"],
  [class*="type"],
  [class*="item"],
  [class*="tile"],
  [class*="box"],
  [class*="step"],
  [class*="case"],
  [class*="choice"],
  [class*="rule"],
  [class*="check"],
  [class*="option"],
  [class*="lane"],
  [class*="stage"],
  [class*="contract"],
  [class*="note"],
  [class*="summary"],
  [class*="result"],
  [class*="compare"],
  [class*="matrix"],
  [class*="principle"],
  [class*="warning"],
  [class*="warn"],
  [class*="alert"],
  [class*="hint"],
  [class*="callout"],
  [class*="decision"],
  [class*="ledger"],
  [class*="evidence"],
  [class*="safe"],
  [class*="success"],
  [class*="ok"],
  [class*="risk"],
  [class*="danger"],
  [class*="error"],
  [class*="caution"],
  [class*="pitfall"],
  [class*="benefit"],
  [class*="cost"],
  [class*="problem"],
  [class*="signal"],
  [class*="operator"],
  [class*="stage"],
  [class*="contract"],
  [class*="source"],
  [class*="producer"],
  [class*="consumer"],
  [class*="cleanup"],
  [data-tone]
) {
  background: color-mix(in srgb, var(--next-gold-paper) 90%, var(--track-tint)) !important;
}
.diagram :where(
  [class*="kicker"],
  [class*="badge"],
  [class*="tag"],
  [class*="pill"],
  [class*="label"],
  [class*="key"],
  [class*="num"]
) {
  border-color: color-mix(in srgb, var(--track) 34%, var(--next-gold-line)) !important;
  background: color-mix(in srgb, var(--track) 8%, transparent) !important;
  color: var(--track-strong) !important;
}
.diagram :where(h1, h2, h3, strong, b, [class*="title"], [class*="accent"], [class*="important"]) {
  color: color-mix(in srgb, var(--track-strong) 18%, var(--next-gold-text)) !important;
}
.diagram :where(
  [class*="safe"],
  [class*="success"],
  [class*="ok"],
  [class*="risk"],
  [class*="danger"],
  [class*="error"],
  [class*="warning"],
  [class*="warn"],
  [class*="caution"],
  [class*="benefit"],
  [class*="cost"],
  [class*="problem"],
  [class*="signal"],
  [class*="operator"],
  [class*="source"],
  [class*="producer"],
  [class*="consumer"],
  [class*="cleanup"]
) :where(strong, b, span, small) {
  color: color-mix(in srgb, var(--track-strong) 22%, var(--next-gold-text)) !important;
}
.diagram :where([class*="lead"], [class*="text"], [class*="desc"], [class*="sub"], p) {
  color: var(--next-gold-muted) !important;
}
.diagram :where(table, .table) {
  border-color: var(--next-gold-line) !important;
}
.diagram :where(th, [class*="thead"], [class*="header"]) {
  background: color-mix(in srgb, var(--track) 7%, var(--next-gold-surface)) !important;
}
.diagram :where(pre, code, [class*="code"]) {
  border-color: color-mix(in srgb, var(--track) 22%, var(--next-gold-line)) !important;
  background: color-mix(in srgb, var(--next-gold-paper) 84%, var(--track-tint)) !important;
  color: var(--next-gold-text) !important;
}
html[data-diagram-theme="dark"] .diagram {
  background: #111113 !important;
}
html[data-diagram-theme="dark"] .diagram :where([class*="wrap"], [class*="body"], [class*="content"]) {
  background: #171a20 !important;
}
html[data-diagram-theme="dark"] .diagram :where(
  [class*="card"],
  [class*="type"],
  [class*="item"],
  [class*="tile"],
  [class*="box"],
  [class*="step"],
  [class*="case"],
  [class*="choice"],
  [class*="rule"],
  [class*="check"],
  [class*="option"],
  [class*="lane"],
  [class*="stage"],
  [class*="contract"],
  [class*="matrix"],
  [class*="principle"],
  [class*="warning"],
  [class*="warn"],
  [class*="alert"],
  [class*="hint"],
  [class*="callout"],
  [class*="decision"],
  [class*="ledger"],
  [class*="evidence"],
  [class*="safe"],
  [class*="success"],
  [class*="ok"],
  [class*="risk"],
  [class*="danger"],
  [class*="error"],
  [class*="caution"],
  [class*="pitfall"],
  [class*="benefit"],
  [class*="cost"],
  [class*="problem"],
  [class*="signal"],
  [class*="operator"],
  [class*="source"],
  [class*="producer"],
  [class*="consumer"],
  [class*="cleanup"],
  [data-tone]
) {
  background: color-mix(in srgb, #111113 88%, var(--track-tint)) !important;
}

body {
  background: transparent !important;
  color: var(--next-gold-text) !important;
}
html[data-diagram-theme="dark"] body {
  background: transparent !important;
  color: var(--next-gold-text) !important;
}
.diagram :where([class*="-header"], [class*="__head"], [class*="__hero"], [class*="__intro"]) {
  border: 1px solid var(--next-gold-line) !important;
  border-radius:8px !important;
  background: var(--next-gold-paper) !important;
  padding: clamp(12px, 2vw, 18px) !important;
  box-shadow: none !important;
}
html[data-diagram-theme="dark"] .diagram :where([class*="-header"], [class*="__head"], [class*="__hero"], [class*="__intro"]) {
  background: color-mix(in srgb, #111113 84%, var(--track-tint)) !important;
}
.diagram :where(
  [class*="tick"],
  [class*="track"],
  [class*="phase"],
  [class*="panel"],
  [class*="lane"],
  [class*="card"],
  [class*="case"],
  [class*="scenario"],
  [class*="choice"],
  [class*="option"],
  [class*="domain"],
  [class*="dns"],
  [class*="cert"],
  [class*="compare"],
  [class*="tree"],
  [class*="stack"],
  [class*="folder"],
  [class*="route-map"],
  [class*="path"],
  [class*="line"],
  [class*="boundary"],
  [class*="slot"],
  [class*="template"],
  [class*="shell"],
  [class*="box"],
  [class*="item"],
  [class*="note"],
  [class*="rule"],
  [class*="table"],
  [class*="head"],
  [class*="loading"],
  [class*="fallback"],
  [class*="skeleton"],
  [class*="preview"],
  [class*="placeholder"],
  [class*="screen"],
  [class*="mock"],
  [class*="frame"],
  [class*="browser"],
  [class*="form"],
  [class*="input"],
  [class*="output"],
  [class*="state"],
  [class*="empty"],
  [class*="mode"],
  [class*="env"],
  [class*="secret"],
  [class*="scope"],
  [class*="sample"],
  [class*="question"],
  [class*="answer"],
  [class*="row"],
  [class*="cell"],
  [class*="col"],
  [class*="data"],
  [class*="field"],
  [class*="axis"],
  [class*="stage"],
  [class*="signal"],
  [class*="check"],
  [class*="name"],
  [class*="copy"],
  [class*="tool"],
  [class*="audit"],
  [class*="group"],
  [class*="list"],
  [class*="good"],
  [class*="bad"],
  [class*="ok"],
  [class*="pass"],
  [class*="fail"],
  [class*="risk"],
  [class*="warn"],
  [class*="danger"],
  [class*="include"],
  [class*="block"],
  [class*="target"],
  [class*="result"],
  [class*="center"],
  [class*="caption"],
  [class*="final"],
  [class*="badge"],
  [class*="tag"],
  [class*="pill"],
  [class*="label"],
  [class*="status"],
  [class*="method"],
  [class*="metric"],
  [class*="mini"],
  [class*="chip"]
) {
  border-color: color-mix(in srgb, var(--track) 24%, var(--next-gold-line)) !important;
  background: color-mix(in srgb, var(--next-gold-paper) 90%, var(--track-tint)) !important;
  color: var(--next-gold-text) !important;
}
.diagram :where([class*="copy"], [class*="signal"], [class*="check"], [class*="stage"], [class*="path"], [class*="line"], [class*="lane"], [class*="box"], [class*="item"], [class*="card"], [class*="case"], [class*="scenario"], [class*="choice"], [class*="option"], [class*="domain"], [class*="dns"], [class*="cert"], [class*="browser"], [class*="form"], [class*="input"], [class*="output"], [class*="state"], [class*="mode"], [class*="env"], [class*="secret"], [class*="scope"], [class*="sample"], [class*="question"], [class*="answer"], [class*="row"], [class*="cell"]) :where(span, strong, b, code) {
  color: var(--next-gold-text) !important;
}
.diagram :where([class*="signal"], [class*="minirow"], [class*="row"], [class*="item"], [class*="line"], [class*="step"], [class*="steps"], [class*="stage"], [class*="lane"], [class*="mode"], [class*="card"], [class*="case"], [class*="choice"], [class*="option"], [class*="domain"], [class*="dns"], [class*="cert"], [class*="browser"], [class*="form"], [class*="state"], [class*="env"], [class*="secret"], [class*="scope"], [class*="sample"], [class*="question"], [class*="answer"]) > :where(div, span) {
  border-color: color-mix(in srgb, var(--track) 20%, var(--next-gold-line)) !important;
  background: color-mix(in srgb, var(--next-gold-paper) 91%, var(--track-tint)) !important;
  color: var(--next-gold-text) !important;
}
.diagram :where(code, pre, kbd, [class*="code"], [class*="snippet"], [class*="token"]) {
  border-color: color-mix(in srgb, var(--track) 20%, var(--next-gold-line)) !important;
  background: var(--next-gold-paper) !important;
  color: var(--next-gold-text) !important;
}
.diagram :where([class*="tool"], [class*="audit"], [class*="panel"], [class*="lane"], [class*="card"], [class*="case"], [class*="scenario"], [class*="choice"], [class*="option"], [class*="domain"], [class*="dns"], [class*="cert"], [class*="browser"], [class*="form"], [class*="mode"], [class*="group"], [class*="list"], [class*="path"], [class*="box"], [class*="item"], [class*="step"], [class*="section"], [class*="note"], [class*="rule"], [class*="env"], [class*="secret"], [class*="scope"], [class*="question"], [class*="answer"]) :where(h2, h3, dt, dd) {
  border-color: var(--next-gold-line) !important;
  background: color-mix(in srgb, var(--next-gold-paper) 92%, var(--track-tint)) !important;
  color: var(--next-gold-text) !important;
}
.diagram :where([class*="cards"], [class*="tiles"], [class*="grid"], [class*="flow"]) > :where(article, div, li) {
  border-color: color-mix(in srgb, var(--track) 22%, var(--next-gold-line)) !important;
  background: color-mix(in srgb, var(--next-gold-paper) 90%, var(--track-tint)) !important;
  color: var(--next-gold-text) !important;
}
html[data-diagram-theme="dark"] .diagram :where(
  [class*="tick"],
  [class*="track"],
  [class*="phase"],
  [class*="panel"],
  [class*="lane"],
  [class*="card"],
  [class*="case"],
  [class*="scenario"],
  [class*="choice"],
  [class*="option"],
  [class*="domain"],
  [class*="dns"],
  [class*="cert"],
  [class*="compare"],
  [class*="tree"],
  [class*="stack"],
  [class*="folder"],
  [class*="route-map"],
  [class*="path"],
  [class*="line"],
  [class*="boundary"],
  [class*="slot"],
  [class*="template"],
  [class*="shell"],
  [class*="box"],
  [class*="item"],
  [class*="note"],
  [class*="rule"],
  [class*="table"],
  [class*="head"],
  [class*="loading"],
  [class*="fallback"],
  [class*="skeleton"],
  [class*="preview"],
  [class*="placeholder"],
  [class*="screen"],
  [class*="mock"],
  [class*="frame"],
  [class*="browser"],
  [class*="form"],
  [class*="input"],
  [class*="output"],
  [class*="state"],
  [class*="empty"],
  [class*="mode"],
  [class*="env"],
  [class*="secret"],
  [class*="scope"],
  [class*="sample"],
  [class*="question"],
  [class*="answer"],
  [class*="row"],
  [class*="cell"],
  [class*="col"],
  [class*="data"],
  [class*="field"],
  [class*="axis"],
  [class*="stage"],
  [class*="signal"],
  [class*="check"],
  [class*="name"],
  [class*="copy"],
  [class*="tool"],
  [class*="audit"],
  [class*="group"],
  [class*="list"],
  [class*="good"],
  [class*="bad"],
  [class*="ok"],
  [class*="pass"],
  [class*="fail"],
  [class*="risk"],
  [class*="warn"],
  [class*="danger"],
  [class*="include"],
  [class*="block"],
  [class*="target"],
  [class*="result"],
  [class*="center"],
  [class*="caption"],
  [class*="final"],
  [class*="badge"],
  [class*="tag"],
  [class*="pill"],
  [class*="label"],
  [class*="status"],
  [class*="method"],
  [class*="metric"],
  [class*="mini"],
  [class*="chip"]
) {
  border-color: var(--next-gold-line) !important;
  background: color-mix(in srgb, #111113 86%, var(--track-tint)) !important;
  color: var(--next-gold-text) !important;
}
html[data-diagram-theme="dark"] .diagram :where([class*="copy"], [class*="signal"], [class*="check"], [class*="stage"], [class*="path"], [class*="line"], [class*="lane"], [class*="box"], [class*="item"], [class*="card"], [class*="case"], [class*="scenario"], [class*="choice"], [class*="option"], [class*="domain"], [class*="dns"], [class*="cert"], [class*="browser"], [class*="form"], [class*="input"], [class*="output"], [class*="state"], [class*="mode"], [class*="env"], [class*="secret"], [class*="scope"], [class*="sample"], [class*="question"], [class*="answer"], [class*="row"], [class*="cell"]) :where(span, strong, b, code) {
  color: var(--next-gold-text) !important;
}
html[data-diagram-theme="dark"] .diagram :where([class*="signal"], [class*="minirow"], [class*="row"], [class*="item"], [class*="line"], [class*="step"], [class*="steps"], [class*="stage"], [class*="lane"], [class*="mode"], [class*="card"], [class*="case"], [class*="choice"], [class*="option"], [class*="domain"], [class*="dns"], [class*="cert"], [class*="browser"], [class*="form"], [class*="state"], [class*="env"], [class*="secret"], [class*="scope"], [class*="sample"], [class*="question"], [class*="answer"]) > :where(div, span) {
  border-color: var(--next-gold-line) !important;
  background: color-mix(in srgb, #111113 88%, var(--track-tint)) !important;
  color: var(--next-gold-text) !important;
}
html[data-diagram-theme="dark"] .diagram :where(code, pre, kbd, [class*="code"], [class*="snippet"], [class*="token"]) {
  border-color: var(--next-gold-line) !important;
  background: color-mix(in srgb, #111113 88%, var(--track-tint)) !important;
  color: var(--next-gold-text) !important;
}
html[data-diagram-theme="dark"] .diagram :where([class*="tool"], [class*="audit"], [class*="panel"], [class*="lane"], [class*="card"], [class*="case"], [class*="scenario"], [class*="choice"], [class*="option"], [class*="domain"], [class*="dns"], [class*="cert"], [class*="browser"], [class*="form"], [class*="mode"], [class*="group"], [class*="list"], [class*="path"], [class*="box"], [class*="item"], [class*="step"], [class*="section"], [class*="note"], [class*="rule"], [class*="env"], [class*="secret"], [class*="scope"], [class*="question"], [class*="answer"]) :where(h2, h3, dt, dd) {
  border-color: var(--next-gold-line) !important;
  background: color-mix(in srgb, #111113 89%, var(--track-tint)) !important;
  color: var(--next-gold-text) !important;
}
html[data-diagram-theme="dark"] .diagram :where([class*="cards"], [class*="tiles"], [class*="grid"], [class*="flow"]) > :where(article, div, li) {
  border-color: var(--next-gold-line) !important;
  background: color-mix(in srgb, #111113 87%, var(--track-tint)) !important;
  color: var(--next-gold-text) !important;
}
.diagram :where(table, .table, [class*="table"]) {
  border-color: color-mix(in srgb, var(--track) 30%, var(--next-gold-line)) !important;
  background: var(--next-gold-paper) !important;
}
.diagram :where(thead, th, [class*="thead"], [class*="table-head"], [class*="header-row"]) {
  border-color: color-mix(in srgb, var(--track) 28%, var(--next-gold-line)) !important;
  background: color-mix(in srgb, var(--track) 10%, var(--next-gold-surface)) !important;
  color: color-mix(in srgb, var(--track-strong) 18%, var(--next-gold-text)) !important;
}
.diagram :where(td, [class*="td"], [class*="table-cell"]) {
  border-color: color-mix(in srgb, var(--track) 18%, var(--next-gold-line)) !important;
}
html[data-diagram-theme="dark"] .diagram :where(table, .table, [class*="table"]) {
  border-color: var(--next-gold-line) !important;
  background: #111113 !important;
}
html[data-diagram-theme="dark"] .diagram :where(thead, th, [class*="thead"], [class*="table-head"], [class*="header-row"]) {
  border-color: var(--next-gold-line) !important;
  background: color-mix(in srgb, #111113 82%, var(--track-tint)) !important;
  color: var(--next-gold-text) !important;
}
html[data-diagram-theme="dark"] .diagram :where(td, [class*="td"], [class*="table-cell"]) {
  border-color: color-mix(in srgb, var(--track) 20%, var(--next-gold-line)) !important;
}

/* /codex-gold-next-ch5-soft-theme */

/* visual-stability-2 */
:root{
  --vs2-paper:#ffffff;
  --vs2-ink:var(--ink, var(--text, #111827));
  --vs2-muted:var(--muted, #475569);
  --vs2-track:var(--track, #2563eb);
  --vs2-line:color-mix(in srgb, var(--vs2-track) 24%, #d9e2ee);
  --vs2-line-muted:color-mix(in srgb, var(--vs2-track) 12%, #e6ebf2);
  --vs2-fill:color-mix(in srgb, var(--vs2-paper) 96%, var(--vs2-track));
  --vs2-note:color-mix(in srgb, var(--vs2-paper) 97%, var(--vs2-track));
}
html[data-diagram-theme="dark"]{
  --vs2-paper:#111113;
  --vs2-ink:var(--ink, var(--text, #f4f4f5));
  --vs2-muted:var(--muted, #a1a1aa);
  --vs2-line:rgba(255,255,255,.14);
  --vs2-line-muted:rgba(255,255,255,.095);
  --vs2-fill:color-mix(in srgb, var(--vs2-paper) 94%, var(--vs2-track));
  --vs2-note:color-mix(in srgb, var(--vs2-paper) 96%, var(--vs2-track));
}
.diagram{
  background:var(--vs2-paper)!important;
  color:var(--vs2-ink)!important;
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram[class]{
  background:var(--vs2-paper)!important;
}
.diagram :where(
  header,
  [class$="-hero"], [class$="__hero"],
  [class$="-head"], [class$="__head"],
  [class$="-header"], [class$="__header"],
  [class$="-wrap"], [class$="__wrap"],
  [class$="-stage"], [class$="__stage"],
  [class$="-canvas"], [class$="__canvas"],
  [class$="-surface"], [class$="__surface"],
  [class$="-scene"], [class$="__scene"]
){
  background:transparent!important;
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram :where(
  [class$="-badge"], [class$="__badge"],
  [class$="-eyebrow"], [class$="__eyebrow"],
  [class$="-kicker"], [class$="__kicker"],
  [class$="-chip"], [class$="__chip"],
  [class$="-tag"], [class$="__tag"],
  [class$="-label"], [class$="__label"]
){
  background:var(--vs2-fill)!important;
  border-color:var(--vs2-line)!important;
  color:var(--vs2-track)!important;
  box-shadow:none!important;
}
.diagram :where(
  [class$="-note"], [class$="__note"],
  [class$="-takeaway"], [class$="__takeaway"],
  [class$="-summary"], [class$="__summary"],
  [class$="-footer"], [class$="__footer"]
){
  background:var(--vs2-note)!important;
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram :where(
  [class$="-lane"][data-kind], [class$="__lane"][data-kind],
  [class$="-card"][data-kind], [class$="__card"][data-kind],
  [class$="-panel"][data-kind], [class$="__panel"][data-kind],
  [class$="-box"][data-kind], [class$="__box"][data-kind],
  [class$="-case"][data-kind], [class$="__case"][data-kind]
){
  background:var(--vs2-paper)!important;
  border-color:var(--vs2-line)!important;
}
.diagram :where(
  [class$="-grid"], [class$="__grid"],
  [class$="-cards"], [class$="__cards"],
  [class$="-columns"], [class$="__columns"],
  [class$="-panels"], [class$="__panels"],
  [class$="-steps"], [class$="__steps"],
  [class$="-flow"], [class$="__flow"],
  [class$="-lanes"], [class$="__lanes"],
  [class$="-rows"], [class$="__rows"]
){
  gap:max(var(--existing-gap, 0px), clamp(12px, 1.6vw, 18px))!important;
}
.diagram [class$="-card"], .diagram [class$="__card"],
.diagram [class$="-panel"], .diagram [class$="__panel"],
.diagram [class$="-box"], .diagram [class$="__box"],
.diagram [class$="-rule"], .diagram [class$="__rule"],
.diagram [class$="-effect"], .diagram [class$="__effect"],
.diagram [class$="-table-card"], .diagram [class$="__table-card"]{
  background:var(--vs2-paper)!important;
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram :where(table, [class$="-matrix"], [class$="__matrix"], [class$="-sheet"], [class$="__sheet"]){
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram :where(th,td,tr,[class$="-row"],[class$="__row"]){
  border-color:var(--vs2-line-muted)!important;
}
.diagram :where(tbody tr,tbody th,tbody td,[class$="-table-row"],[class$="__table-row"],[class$="-data-row"],[class$="__data-row"]){
  background:var(--vs2-paper)!important;
}
.diagram :where(thead th,[class$="-colhead"],[class$="__colhead"],[class$="-matrix-head"],[class$="__matrix-head"]){
  background:var(--vs2-fill)!important;
  border-color:var(--vs2-line)!important;
}
html[data-diagram-theme="dark"] .diagram :where(tbody th,td,tr,[class$="-row"],[class$="__row"]){
  background:transparent!important;
}
.diagram :where([class$="-arrow"], [class$="__arrow"], [class$="-connector"], [class$="__connector"]){
  color:var(--vs2-track)!important;
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram header,
.diagram [class$="-hero"], .diagram [class$="__hero"],
.diagram [class$="-head"], .diagram [class$="__head"],
.diagram [class$="-header"], .diagram [class$="__header"],
.diagram [class$="-wrap"], .diagram [class$="__wrap"],
.diagram [class$="-stage"], .diagram [class$="__stage"],
.diagram [class$="-canvas"], .diagram [class$="__canvas"],
.diagram [class$="-surface"], .diagram [class$="__surface"],
.diagram [class$="-scene"], .diagram [class$="__scene"]{
  background:transparent!important;
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram [class$="-lane"][data-kind], .diagram [class$="__lane"][data-kind],
.diagram [class$="-card"][data-kind], .diagram [class$="__card"][data-kind],
.diagram [class$="-panel"][data-kind], .diagram [class$="__panel"][data-kind],
.diagram [class$="-box"][data-kind], .diagram [class$="__box"][data-kind],
.diagram [class$="-case"][data-kind], .diagram [class$="__case"][data-kind]{
  background:var(--vs2-paper)!important;
  border-color:var(--vs2-line)!important;
}
.diagram table,
.diagram [class$="-matrix"], .diagram [class$="__matrix"],
.diagram [class$="-sheet"], .diagram [class$="__sheet"]{
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram th,
.diagram td,
.diagram tr,
.diagram [class$="-row"], .diagram [class$="__row"]{
  border-color:var(--vs2-line-muted)!important;
}
.diagram tbody tr,
.diagram tbody th,
.diagram tbody td,
.diagram [class$="-table-row"], .diagram [class$="__table-row"],
.diagram [class$="-data-row"], .diagram [class$="__data-row"]{
  background:var(--vs2-paper)!important;
}
.diagram thead th,
.diagram [class$="-colhead"], .diagram [class$="__colhead"],
.diagram [class$="-matrix-head"], .diagram [class$="__matrix-head"],
.diagram [class$="-sheet-head"], .diagram [class$="__sheet-head"]{
  background:var(--vs2-fill)!important;
  border-color:var(--vs2-line)!important;
}
html[data-diagram-theme="dark"] .diagram svg :where([class*="-line"], [class*="__line"], [class*="-edge"], [class*="__edge"]){
  stroke:rgba(255,255,255,.28)!important;
}
@media(max-width:720px){
  .diagram :where([class$="-arrow"], [class$="__arrow"], [class$="-connector"], [class$="__connector"]){
    position:static!important;
    transform:none!important;
  }
}
/* /visual-stability-2 */

    /* codex-frame-color-audit:start */
    :root {
      --diagram-frame-line: color-mix(
        in srgb,
        var(--track, var(--track-strong, #6366f1)) 48%,
        #dfe5eb
      );
    }

    html[data-diagram-theme="dark"],
    html.dark {
      --diagram-frame-line: color-mix(
        in srgb,
        var(--track, var(--track-strong, #a5b4fc)) 58%,
        transparent
      );
    }

    .diagram.diagram.diagram.diagram.diagram {
      border: 1px solid var(--diagram-frame-line) !important;
    }
    /* codex-frame-color-audit:end */