/* 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;
        --track: #000000;
        --track-strong: #111827;
        --track-tint: #f4f4f5;
        --paper: #ffffff;
        --surface: #f8fafc;
        --panel: #ffffff;
        --line: #e5e7eb;
        --line-strong: #cbd5e1;
        --text: #111827;
        --muted: #4b5563;
        --code: #f3f4f6;
      }
      html[data-diagram-theme="dark"] {
        color-scheme: dark;
        --track: #e5e7eb;
        --track-strong: #f4f4f5;
        --track-tint: #202024;
        --paper: #111113;
        --surface: #18181b;
        --panel: #111113;
        --line: #343a40;
        --line-strong: #52525b;
        --text: #f4f4f5;
        --muted: #d4d4d8;
        --code: #242428;
      }
      * {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: transparent;
        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: anywhere;
      }
      .diagram {
        width: 100%;
        border: 1px solid var(--line);
        border-radius:8px;
        overflow: hidden;
        background: var(--paper);
        contain: layout paint;
        display: grid;
        gap: 12px;
        padding: 16px;
        font-size:14px;
        line-height: 1.5;
      }
      .diagram,
      .diagram * {
        max-width: 100%;
        min-width: 0;
      }
      .diagram
        :is(
          header,
          section,
          footer,
          article,
          aside,
          div,
          h1,
          h2,
          h3,
          p,
          span,
          strong,
          code
        ) {
        margin: 0;
        overflow-wrap: anywhere;
      }
      .diagram > header,
      .diagram > section,
      .diagram > footer {
        border: 1px solid var(--line);
        border-radius:8px;
        background: var(--panel, var(--surface, var(--paper)));
      }
      .diagram > header {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px;
        background: var(--surface);
      }
      .diagram > header > div,
      .diagram aside,
      .diagram article {
        display: grid;
        gap: 8px;
        align-content: start;
      }
      .diagram aside {
        padding: 10px;
        border: 1px solid var(--line);
        border-radius:8px;
        background: var(--panel, var(--surface, var(--paper)));
      }
      .diagram > header aside {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .diagram [data-token] {
        display: inline-flex;
        width: fit-content;
        align-items: center;
        justify-content: center;
        min-height: 24px;
        padding: 3px 8px;
        border: 1px solid var(--line-strong);
        border-radius:6px;
        background: var(--track-tint);
        color: var(--track-strong);
        font-size:12px;
        font-weight: 800;
        line-height: 1.35;
        white-space: normal;
      }
      .diagram h1 {
        color: var(--text);
        font-size:22px;
        line-height: 1.28;
        font-weight: 850;
      }
      .diagram h2,
      .diagram h3 {
        color: var(--text);
        font-size:14px;
        line-height: 1.35;
        font-weight: 800;
      }
      .diagram p,
      .diagram span {
        color: var(--muted);
        font-size:12.5px;
        line-height: 1.48;
      }
      .diagram code {
        display: inline-block;
        padding: 1px 5px;
        border: 1px solid var(--line);
        border-radius:6px;
        background: var(--code);
        color: var(--track-strong);
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
        font-size:12px;
        font-weight: 700;
        line-height: 1.35;
        white-space: normal;
      }
      .diagram [data-metric] {
        display: grid;
        grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
        gap: 8px;
        align-items: start;
        padding: 7px;
        border: 1px solid var(--line);
        border-radius:7px;
        background: var(--surface);
      }
      .diagram [data-metric] strong {
        color: var(--track-strong);
        font-size:12px;
        line-height: 1.35;
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
      }
      .diagram [data-layout="grid"] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        border: 0;
        padding: 0;
        background: transparent;
      }
      .diagram [data-layout="grid"] article,
      .diagram [data-panel] {
        border: 1px solid var(--line);
        border-radius:8px;
        background: var(--panel, var(--surface, var(--paper)));
        padding: 12px;
      }
      .diagram [data-layout="grid"] article[data-focus="true"] {
        border-color: var(--line-strong);
        background: var(--track-tint);
      }
      .diagram [data-layout="lower"] {
        display: grid;
        grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr);
        gap: 12px;
        border: 0;
        padding: 0;
        background: transparent;
      }
      .diagram [data-list] {
        display: grid;
        gap: 6px;
      }
      .diagram [data-item] {
        display: grid;
        grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1fr);
        gap: 8px;
        align-items: start;
        padding: 7px;
        border: 1px solid var(--line);
        border-radius:7px;
        background: var(--surface);
      }
      .diagram [data-item] strong {
        color: var(--text);
        font-size:12.5px;
        line-height: 1.35;
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
      }
      .diagram > footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        align-items: start;
        padding: 10px 12px;
        background: var(--surface);
      }
      .diagram > footer strong {
        color: var(--track-strong);
        font-size:13px;
        line-height: 1.35;
      }
      @media (max-width: 1040px) {
        .diagram [data-metric] {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 820px) {
        .diagram {
          padding: 12px;
        }
        .diagram > header,
        .diagram [data-layout="lower"],
        .diagram > footer {
          grid-template-columns: 1fr;
        }
        .diagram > header aside {
          grid-template-columns: 1fr;
        }
        .diagram [data-layout="grid"] {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .diagram h1 {
          font-size:20px;
        }
      }
      @media (max-width: 560px) {
        html,
        body {
          overflow: auto;
        }
        .diagram {
          gap: 10px;
          padding: 10px;
        }
        .diagram > header,
        .diagram aside,
        .diagram [data-layout="grid"] article,
        .diagram [data-panel] {
          padding: 10px;
        }
        .diagram [data-layout="grid"],
        .diagram [data-metric],
        .diagram [data-item] {
          grid-template-columns: 1fr;
        }
        .diagram [data-item] strong {
          white-space: normal;
        }
      }
      @media (max-width: 360px) {
        .diagram {
          padding: 8px;
        }
        .diagram h1 {
          font-size:18px;
        }
        .diagram [data-token] {
          width: 100%;
          justify-content: flex-start;
        }
        .diagram > footer {
          padding: 9px;
        }
      }

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


/* codex-gold-next-ch9-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-ch9-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 */