/* codex-quality-baseline */
:root{--track:#61dafb;--track-strong:#61dafb;}
html[data-diagram-theme="dark"]{--track:#8de7ff;--track-strong:#8de7ff;}
*,*::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 */

/* codex-lint-normalize */
:root{--track:#61dafb;}
html[data-diagram-theme="dark"]{--track:#8de7ff;}
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 */

      :root {
        color-scheme: light dark;
        --paper: #ffffff;
        --ink: #111827;
        --muted: #475569;
        --line: #d8e0ea;
        --panel: #f8fafc;
        --head: #eef4f8;
        --accent: #0891b2;
        --track: #61dafb;
        --track-tint: #ecfeff;
      }
      html[data-diagram-theme="dark"] {
        --paper: #020617;
        --ink: #f8fafc;
        --muted: #cbd5e1;
        --line: #334155;
        --panel: #0f172a;
        --head: #172033;
        --track: #8de7ff;
        --track-tint: #0b1220;
      }
      * { box-sizing: border-box; }
      .diagram,
      .diagram * {
        max-width: 100%;
      }
      html,
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: transparent;
      }
      body {
        color: var(--ink);
        font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
      }
      .diagram {
        width: 100%;
        max-width: 960px;
        margin: 0 auto;
        border: 1px solid var(--line);
        border-radius:8px;
        overflow: hidden;
        background: var(--paper);
        contain: layout paint;
      }
      .react-ch6-ch6-4-root {
        padding: 16px;
        overflow-wrap: anywhere;
      }
      .react-ch6-ch6-4-tag {
        display: inline-flex;
        align-items: center;
        border: 1px solid #a5f3fc;
        border-radius:6px;
        padding: 3px 9px;
        background: var(--track-tint);
        color: var(--accent);
        font-size:12px;
        font-weight: 800;
        line-height: 1.2;
      }
      h1 {
        margin: 10px 0 8px;
        color: var(--ink);
        font-size:24px;
        line-height: 1.25;
        letter-spacing: 0;
      }
      p {
        margin: 0;
        color: var(--muted);
        font-size:14px;
        line-height: 1.62;
      }
      .react-ch6-ch6-4-path {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
        align-items: stretch;
        gap: 8px;
        margin-top: 14px;
      }
      .react-ch6-ch6-4-step,
      .react-ch6-ch6-4-phase,
      .react-ch6-ch6-4-panel {
        min-width: 0;
        border: 1px solid var(--line);
        border-radius:8px;
        background: var(--panel);
      }
      .react-ch6-ch6-4-step,
      .react-ch6-ch6-4-phase,
      .react-ch6-ch6-4-panel {
        padding: 10px;
      }
      .react-ch6-ch6-4-step span,
      .react-ch6-ch6-4-phase span,
      .react-ch6-ch6-4-panel strong,
      .react-ch6-ch6-4-node {
        display: block;
        color: var(--accent);
        font-size:12px;
        font-weight: 800;
        line-height: 1.3;
      }
      .react-ch6-ch6-4-step strong,
      .react-ch6-ch6-4-phase strong {
        display: block;
        margin-top: 5px;
        color: var(--ink);
        font-size:15px;
        line-height: 1.35;
      }
      .react-ch6-ch6-4-step em,
      .react-ch6-ch6-4-phase em,
      .react-ch6-ch6-4-panel span,
      .react-ch6-ch6-4-desc {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size:12px;
        font-style: normal;
        line-height: 1.45;
      }
      .react-ch6-ch6-4-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--track);
        font-size:18px;
        font-weight: 800;
      }
      .react-ch6-ch6-4-split,
      .react-ch6-ch6-4-cycle {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 14px;
      }
      .react-ch6-ch6-4-tree {
        display: grid;
        margin-top: 14px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius:8px;
        background: var(--panel);
      }
      .react-ch6-ch6-4-branch {
        display: grid;
        grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        min-width: 0;
        margin-left: calc(var(--depth) * 24px);
        padding: 9px 10px;
        border-top: 1px solid var(--line);
        background: transparent;
      }
      .react-ch6-ch6-4-branch:first-child { border-top: 0; }
      .react-ch6-ch6-4-branch::before {
        content: "";
        width: calc(var(--depth) * 14px);
        max-width: 42px;
        height: 1px;
        margin: 8px 0 0 calc(var(--depth) * -14px);
        background: var(--line);
      }
      .react-ch6-ch6-4-branch {
        grid-template-columns: auto minmax(110px, 0.7fr) minmax(0, 1fr);
      }
      .react-ch6-ch6-4-matrix {
        margin-top: 10px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius:8px;
      }
      .react-ch6-ch6-4-row {
        display: grid;
        grid-template-columns: 120px 1fr 1fr;
      }
      .react-ch6-ch6-4-row > div {
        min-width: 0;
        padding: 9px 10px;
        border-top: 1px solid var(--line);
        border-left: 1px solid var(--line);
        color: var(--muted);
        font-size:13px;
        line-height: 1.48;
      }
      .react-ch6-ch6-4-row > div:first-child {
        border-left: 0;
        color: var(--accent);
        font-weight: 800;
      }
      .react-ch6-ch6-4-head > div {
        border-top: 0;
        background: var(--head);
        color: var(--ink);
        font-weight: 800;
      }
      .react-ch6-ch6-4-note {
        margin-top: 10px;
        border: 1px solid var(--line);
        border-radius:8px;
        padding: 10px 12px;
        background: var(--panel);
        color: var(--muted);
        font-size:13px;
        line-height: 1.58;
      }
      .react-ch6-ch6-4-note b {
        color: var(--accent);
      }
      @media (max-width: 640px) {
        .react-ch6-ch6-4-root { padding: 13px; }
        h1 { font-size:21px; line-height: 1.28; }
        p { font-size:13px; line-height: 1.58; }
        .react-ch6-ch6-4-path,
        .react-ch6-ch6-4-split,
        .react-ch6-ch6-4-cycle {
          grid-template-columns: 1fr;
          gap: 6px;
        }
        .react-ch6-ch6-4-arrow {
          min-height: 14px;
          transform: rotate(90deg);
          font-size:15px;
        }
        .react-ch6-ch6-4-step,
        .react-ch6-ch6-4-phase,
        .react-ch6-ch6-4-panel { padding: 9px; }
        .react-ch6-ch6-4-branch {
          margin-left: calc(var(--depth) * 12px);
          grid-template-columns: auto minmax(92px, 0.6fr) minmax(0, 1fr);
          gap: 7px;
        }
        .react-ch6-ch6-4-branch::before {
          width: calc(var(--depth) * 8px);
          max-width: 24px;
          margin-left: calc(var(--depth) * -8px);
        }
        .react-ch6-ch6-4-row { grid-template-columns: 96px 1fr 1fr; }
        .react-ch6-ch6-4-row > div { padding: 8px 7px; font-size:12px; line-height: 1.45; }
      }
      @media (max-width: 360px) {
        .react-ch6-ch6-4-root { padding: 10px; }
        h1 { font-size:19px; }
        .react-ch6-ch6-4-row { grid-template-columns: 88px 1fr 1fr; }
        .react-ch6-ch6-4-row > div { padding: 7px 4px; font-size:12px; }
        .react-ch6-ch6-4-branch {
          margin-left: calc(var(--depth) * 8px);
          grid-template-columns: auto minmax(82px, 0.55fr) minmax(0, 1fr);
        }
        .react-ch6-ch6-4-branch::before {
          width: calc(var(--depth) * 6px);
          max-width: 18px;
          margin-left: calc(var(--depth) * -6px);
        }
      }
    


/* codex-gold-react-ch6-soft-theme */
:root {
  --track: #149eca;
  --track-strong: #087ea4;
  --track-tint: #ecfeff;
  --react-gold-line: #bae6fd;
  --react-gold-line-strong: #7dd3fc;
  --react-gold-paper: #ffffff;
  --react-gold-surface: #f8fafc;
  --react-gold-surface-strong: #cffafe;
  --react-gold-text: #111827;
  --react-gold-muted: #475569;
  --line: #bae6fd;
  --line-strong: #bae6fd;
  --paper: #ffffff;
  --surface: #f8fafc;
  --surface-strong: #cffafe;
  --node: #ffffff;
  --text: #111827;
  --ink: #111827;
  --muted: #475569;
  --subtle: #64748b;
  --accent: #149eca;
  --accent-2: #149eca;
  --safe: #149eca;
  --success: #149eca;
  --ok: #149eca;
  --warn: #149eca;
  --warning: #149eca;
  --risk: #149eca;
  --danger: #149eca;
  --error: #149eca;
  --green: #149eca;
  --yellow: #149eca;
  --orange: #149eca;
  --warn-bg: #ecfeff;
  --warn-tint: #ecfeff;
  --success-bg: #ecfeff;
  --danger-bg: #ecfeff;
}
html[data-diagram-theme="dark"] {
  --track: #7dd3fc;
  --track-strong: #bae6fd;
  --track-tint: rgba(125, 211, 252, 0.10);
  --react-gold-line: rgba(125, 211, 252, 0.22);
  --react-gold-line-strong: rgba(125, 211, 252, 0.30);
  --react-gold-paper: #111113;
  --react-gold-surface: #171a20;
  --react-gold-surface-strong: rgba(125, 211, 252, 0.10);
  --react-gold-text: #f4f4f5;
  --react-gold-muted: #b6c2d2;
  --line: rgba(125, 211, 252, 0.22);
  --line-strong: rgba(125, 211, 252, 0.30);
  --paper: #111113;
  --surface: #171a20;
  --surface-strong: rgba(125, 211, 252, 0.10);
  --node: #111113;
  --text: #f4f4f5;
  --ink: #f4f4f5;
  --muted: #b6c2d2;
  --subtle: #94a3b8;
  --accent: #bae6fd;
  --accent-2: #bae6fd;
  --safe: #bae6fd;
  --success: #bae6fd;
  --ok: #bae6fd;
  --warn: #bae6fd;
  --warning: #bae6fd;
  --risk: #bae6fd;
  --danger: #bae6fd;
  --error: #bae6fd;
  --green: #bae6fd;
  --yellow: #bae6fd;
  --orange: #bae6fd;
  --warn-bg: rgba(125, 211, 252, 0.10);
  --warn-tint: rgba(125, 211, 252, 0.10);
  --success-bg: rgba(125, 211, 252, 0.10);
  --danger-bg: rgba(125, 211, 252, 0.10);
}
.diagram {
  border-color: var(--react-gold-line) !important;
  background: var(--react-gold-paper) !important;
  color: var(--react-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(--react-gold-line) !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(--react-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(--react-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(--react-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(--react-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(--react-gold-text)) !important;
}
.diagram :where([class*="lead"], [class*="text"], [class*="desc"], [class*="sub"], p) {
  color: var(--react-gold-muted) !important;
}
.diagram :where(table, .table) {
  border-color: var(--react-gold-line) !important;
}
.diagram :where(th, [class*="thead"], [class*="header"]) {
  background: color-mix(in srgb, var(--track) 7%, var(--react-gold-surface)) !important;
}
.diagram :where(pre, code, [class*="code"]) {
  border-color: color-mix(in srgb, var(--track) 22%, var(--react-gold-line)) !important;
  background: color-mix(in srgb, var(--react-gold-paper) 84%, var(--track-tint)) !important;
  color: var(--react-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;
}

:root {
  --rule: var(--react-gold-line);
  --border: var(--react-gold-line);
  --strong: var(--react-gold-line-strong);
  --accent: var(--track-strong);
  --accent-2: var(--track-strong);
  --teal: var(--track-strong);
  --blue: var(--track-strong);
  --blue-tint: var(--track-tint);
  --teal-tint: var(--track-tint);
  --accent-bg: var(--track-tint);
  --track-tint-strong: var(--react-gold-surface-strong);
}
html[data-diagram-theme="dark"] {
  --rule: var(--react-gold-line);
  --border: var(--react-gold-line);
  --strong: var(--react-gold-line-strong);
  --accent: var(--track-strong);
  --accent-2: var(--track-strong);
  --teal: var(--track-strong);
  --blue: var(--track-strong);
  --blue-tint: var(--track-tint);
  --teal-tint: var(--track-tint);
  --accent-bg: var(--track-tint);
  --track-tint-strong: var(--react-gold-surface-strong);
}
body {
  background: transparent !important;
  color: var(--react-gold-text) !important;
}
.diagram {
  border-color: var(--react-gold-line) !important;
  background: var(--react-gold-paper) !important;
  color: var(--react-gold-text) !important;
  box-shadow: none !important;
}
.diagram :where([class*="head"], [class*="hero"], [class*="intro"], [class*="header"], [class*="top"], [class*="title"]) {
  border-color: var(--react-gold-line) !important;
  background: var(--react-gold-paper) !important;
  box-shadow: none !important;
}
.diagram :where(
  [class*="frame"],
  [class*="panel"],
  [class*="section"],
  [class*="matrix"],
  [class*="table"],
  [class*="record"],
  [class*="piece"],
  [class*="card"],
  [class*="tile"],
  [class*="step"],
  [class*="item"],
  [class*="node"],
  [class*="lane"],
  [class*="stage"],
  [class*="metric"],
  [class*="summary"],
  [class*="diagnosis"],
  [class*="check"],
  [class*="note"],
  [class*="callout"],
  [class*="box"],
  [class*="result"],
  [class*="choice"],
  [class*="question"],
  [class*="answer"],
  [class*="row"],
  [class*="cell"],
  [class*="case"],
  [class*="layer"],
  [class*="rule"],
  [class*="entry"],
  [class*="option"],
  [class*="block"],
  [class*="board"],
  [class*="map"],
  [class*="screen"],
  [class*="browser"],
  [class*="server"],
  [class*="client"],
  [class*="request"],
  [class*="response"],
  [class*="flowitem"],
  [class*="flow-item"],
  [class*="flow-step"],
  [class*="workflow"],
  [class*="structure"],
  [class*="axis"],
  [class*="field"],
  [class*="unit"],
  [class*="band"],
  [class*="gate"],
  [class*="zone"],
  [class*="mini"]
) {
  border-color: color-mix(in srgb, var(--track) 24%, var(--react-gold-line)) !important;
  background: color-mix(in srgb, var(--react-gold-paper) 91%, var(--track-tint)) !important;
  color: var(--react-gold-text) !important;
  box-shadow: none !important;
}
.diagram :where(
  [class*="kicker"],
  [class*="eyebrow"],
  [class*="badge"],
  [class*="tag"],
  [class*="pill"],
  [class*="label"],
  [class*="chip"],
  [class*="key"],
  [class*="num"],
  [class*="index"],
  [class*="step-no"],
  [class*="kind"]
) {
  border-color: color-mix(in srgb, var(--track) 34%, var(--react-gold-line)) !important;
  background: color-mix(in srgb, var(--track) 8%, transparent) !important;
  color: var(--track-strong) !important;
  box-shadow: none !important;
}
.diagram :where(h1, h2, h3, strong, b, [class*="title"], [class*="headline"], [class*="subhead"], [class*="name"]) {
  color: color-mix(in srgb, var(--track-strong) 16%, var(--react-gold-text)) !important;
}
.diagram :where([class*="lead"], [class*="desc"], [class*="copy"], [class*="text"], [class*="small"], p, dd, td, span) {
  color: var(--react-gold-muted) !important;
}
.diagram :where(table, .table, [class*="matrix"], [class*="data-table"], [class*="grid-table"]) {
  border-color: color-mix(in srgb, var(--track) 30%, var(--react-gold-line)) !important;
  background: var(--react-gold-paper) !important;
}
.diagram :where(thead, th, [class*="thead"], [class*="table-head"], [class*="header-row"], [class*="headCell"], [class*="axisHead"]) {
  border-color: color-mix(in srgb, var(--track) 28%, var(--react-gold-line)) !important;
  background: color-mix(in srgb, var(--track) 10%, var(--react-gold-surface)) !important;
  color: color-mix(in srgb, var(--track-strong) 18%, var(--react-gold-text)) !important;
}
.diagram :where(td, th, [class*="cell"], [class*="piece"]) {
  border-color: color-mix(in srgb, var(--track) 18%, var(--react-gold-line)) !important;
}
.diagram :where(pre, code, kbd, [class*="code"], [class*="cmd"], [class*="snippet"], [class*="token"]) {
  border-color: color-mix(in srgb, var(--track) 20%, var(--react-gold-line)) !important;
  background: var(--react-gold-paper) !important;
  color: var(--react-gold-text) !important;
}
.diagram :where(svg, [class*="arrow"], [class*="connector"], [class*="flowline"], [class*="pathRun"], [class*="pipe-line"], [class*="rail"]) {
  color: color-mix(in srgb, var(--track) 58%, var(--react-gold-muted)) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.diagram :where(svg line, svg path, svg polyline, svg polygon, [class*="connector"], [class*="flowline"], [class*="pathRun"], [class*="rail"]) {
  stroke: color-mix(in srgb, var(--track) 34%, var(--react-gold-line-strong)) !important;
}
.diagram :where([class*="dot"]) {
  width: .55rem !important;
  min-width: .55rem !important;
  max-width: .55rem !important;
  height: .55rem !important;
  min-height: .55rem !important;
  max-height: .55rem !important;
  border-radius:8px !important;
  border: 1px solid color-mix(in srgb, var(--track) 34%, var(--react-gold-line)) !important;
  background: color-mix(in srgb, var(--track) 18%, transparent) !important;
}
.diagram :where([class*="bar"], [class*="fill"]) {
  border-color: color-mix(in srgb, var(--track) 24%, var(--react-gold-line)) !important;
  background: color-mix(in srgb, var(--react-gold-paper) 84%, var(--track-tint)) !important;
}
html[data-diagram-theme="dark"] .diagram :where([class*="head"], [class*="hero"], [class*="intro"], [class*="header"], [class*="top"], [class*="title"]) {
  background: color-mix(in srgb, #111113 86%, var(--track-tint)) !important;
}
html[data-diagram-theme="dark"] .diagram :where(
  [class*="frame"],
  [class*="panel"],
  [class*="section"],
  [class*="matrix"],
  [class*="table"],
  [class*="record"],
  [class*="piece"],
  [class*="card"],
  [class*="tile"],
  [class*="step"],
  [class*="item"],
  [class*="node"],
  [class*="lane"],
  [class*="stage"],
  [class*="metric"],
  [class*="summary"],
  [class*="diagnosis"],
  [class*="check"],
  [class*="note"],
  [class*="callout"],
  [class*="box"],
  [class*="result"],
  [class*="choice"],
  [class*="question"],
  [class*="answer"],
  [class*="row"],
  [class*="cell"],
  [class*="case"],
  [class*="layer"],
  [class*="rule"],
  [class*="entry"],
  [class*="option"],
  [class*="block"],
  [class*="board"],
  [class*="map"],
  [class*="screen"],
  [class*="browser"],
  [class*="server"],
  [class*="client"],
  [class*="request"],
  [class*="response"],
  [class*="flowitem"],
  [class*="flow-item"],
  [class*="flow-step"],
  [class*="workflow"],
  [class*="structure"],
  [class*="axis"],
  [class*="field"],
  [class*="unit"],
  [class*="band"],
  [class*="gate"],
  [class*="zone"],
  [class*="mini"]
) {
  border-color: var(--react-gold-line) !important;
  background: color-mix(in srgb, #111113 88%, var(--track-tint)) !important;
  color: var(--react-gold-text) !important;
}
html[data-diagram-theme="dark"] .diagram :where(table, .table, [class*="matrix"], [class*="data-table"], [class*="grid-table"]) {
  border-color: var(--react-gold-line) !important;
  background: #111113 !important;
}
html[data-diagram-theme="dark"] .diagram :where(thead, th, [class*="thead"], [class*="table-head"], [class*="header-row"], [class*="headCell"], [class*="axisHead"]) {
  border-color: var(--react-gold-line) !important;
  background: color-mix(in srgb, #111113 82%, var(--track-tint)) !important;
  color: var(--react-gold-text) !important;
}
html[data-diagram-theme="dark"] .diagram :where(pre, code, kbd, [class*="code"], [class*="cmd"], [class*="snippet"], [class*="token"]) {
  border-color: var(--react-gold-line) !important;
  background: color-mix(in srgb, #111113 88%, var(--track-tint)) !important;
  color: var(--react-gold-text) !important;
}
@media (max-width: 640px) {
  .diagram :where(
    [class*="top"],
    [class*="head"],
    [class*="hero"],
    [class*="intro"],
    [class*="main"],
    [class*="split"],
    [class*="grid"],
    [class*="cards"],
    [class*="tiles"],
    [class*="lanes"],
    [class*="stages"],
    [class*="columns"],
    [class*="cols"],
    [class*="matrix"],
    [class*="record"],
    [class*="flow"],
    [class*="flowline"],
    [class*="workflow"],
    [class*="pipeline"],
    [class*="structure"],
    [class*="axisHead"],
    [class*="rowMap"],
    [class*="row"],
    [class*="fields"],
    [class*="state-row"],
    [class*="topology"],
    [class*="board"],
    [class*="heat"],
    [class*="spectrum"]
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .diagram :where([class*="arrow"]) {
    transform: none !important;
    justify-self: start !important;
    font-size:14px !important;
  }
  .diagram :where([class*="cell"], [class*="piece"], td, th) {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: keep-all !important;
  }
  .diagram :where([class*="matrix"], [class*="data-table"], [class*="grid-table"]) :where([class*="head"][class*="row"], thead) {
    display: none !important;
  }
  .diagram :where([class*="matrix"], [class*="data-table"], [class*="grid-table"]) :where([class*="cell"], td, th)::before,
  .diagram :where([class*="matrix"]) :where([class*="row"] > div)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--track-strong);
    font-size:12px;
    font-weight: 850;
    line-height: 1.25;
  }
  .diagram :where([class*="matrix"], [class*="data-table"], [class*="grid-table"]) :where([class*="cell"], td, th):not([data-label])::before,
  .diagram :where([class*="matrix"], [class*="data-table"], [class*="grid-table"]) :where([class*="cell"], td, th)[data-label=""]::before,
  .diagram :where([class*="matrix"]) :where([class*="row"] > div):not([data-label])::before,
  .diagram :where([class*="matrix"]) :where([class*="row"] > div)[data-label=""]::before {
    display: none !important;
  }
}

/* /codex-gold-react-ch6-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 */