:root {
  --red-dark: #be123c;
  --green-dark: #166534;
  --surface-tint: #f8fafc;
}html[data-diagram-theme="dark"] {
  --red-dark: #fda4af;
  --green-dark: #bbf7d0;
  --surface-tint: #15191f;
}
* { box-sizing: border-box; }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;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}.diagram {

  width: 100%;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius:8px;
  background: var(--paper);
  overflow: hidden;
  contain: layout paint;
}
.nest-ch10-ch10-2-hero { display: grid; gap: 7px; }
h1 { margin: 0; font-size:23px; line-height: 1.28; font-weight: 900; }
p { margin: 0; }
.nest-ch10-ch10-2-lead { color: var(--muted); font-size:13px; line-height: 1.55; }
.nest-ch10-ch10-2-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nest-ch10-ch10-2-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.nest-ch10-ch10-2-card, .nest-ch10-ch10-2-step, .note, .code {
  border: 1px solid var(--border);
  border-radius:8px;
  background: var(--surface-tint);
  padding: 12px;
  min-width: 0;
}
.nest-ch10-ch10-2-card { display: grid; gap: 7px; }
.nest-ch10-ch10-2-step { background: var(--paper); }
.note { color: var(--green-dark); background: var(--green-tint); font-weight: 750; }
.nest-ch10-ch10-2-danger { color: var(--red-dark); background: var(--red-tint); }
.nest-ch10-ch10-2-amber { color: var(--amber); background: var(--amber-tint); }
.nest-ch10-ch10-2-blue { color: var(--blue); background: var(--blue-tint); }
.nest-ch10-ch10-2-tag {
  width: fit-content;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius:6px;
  background: var(--paper);
  color: var(--red-dark);
  font-size:12px;
  font-weight: 850;
}
.nest-ch10-ch10-2-num {
  width: fit-content;
  min-width: 23px;
  height: 23px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius:8px;
  background: var(--green-tint);
  color: var(--green-dark);
  font-size:12px;
  font-weight: 850;
}
.nest-ch10-ch10-2-title { font-size:15px; line-height: 1.42; font-weight: 850; }
.nest-ch10-ch10-2-desc { color: var(--muted); font-size:12px; line-height: 1.5; }
.code {
  background: #f3f4f6;
  color: #0f172a;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size:12px;
  line-height: 1.5;
  white-space: pre-wrap;
}
html[data-diagram-theme="dark"] .code { background: #101418; color: #e5e7eb; }
.kv { display: grid; gap: 5px; }
.kv div { display: grid; gap: 2px; }
.kv b { font-size:12px; color: var(--ink); }
.kv span { color: var(--muted); font-size:12px; line-height: 1.45; }
code {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius:5px;
  background: var(--paper);
  color: var(--ink);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size:12px;
}
@media (max-width: 620px) {
  .diagram { padding: 14px; }
  h1 { font-size:21px; }
  .nest-ch10-ch10-2-grid2, .grid3, .nest-ch10-ch10-2-flow { grid-template-columns: 1fr; }
}

.diagram,
.diagram * {
  max-width: 100%;
}

@media (max-width: 360px) {
  .diagram {
    padding: 12px;
  }
}

/* visual-stability-2-nest-ch10-2-final */
.nest-ch10-ch10-2-root {
  --vs2-track: var(--track, #e0234e);
  --vs2-paper: var(--paper, #fff);
  --vs2-ink: var(--ink, #111827);
  --vs2-muted: var(--muted, #475569);
  --vs2-line: color-mix(in srgb, var(--line, #e2e8f0) 82%, var(--vs2-track) 18%);
  --vs2-line-muted: color-mix(in srgb, var(--line, #e2e8f0) 92%, var(--vs2-track) 8%);
  --vs2-fill: color-mix(in srgb, var(--vs2-paper) 96%, var(--vs2-track) 4%);
  gap: clamp(14px, 2vw, 20px) !important;
  padding: clamp(16px, 2.2vw, 20px) !important;
  background: var(--vs2-paper) !important;
}
html[data-diagram-theme="dark"] .nest-ch10-ch10-2-root {
  --vs2-paper: #101113;
  --vs2-ink: #f5f7fb;
  --vs2-muted: #b7c0cc;
  --vs2-line: #2b3038;
  --vs2-line-muted: #20252d;
  --vs2-fill: rgba(255,255,255,.025);
}
.nest-ch10-ch10-2-root :where(header, .nest-ch10-ch10-2-hero) {
  background: transparent !important;
  border-color: var(--vs2-line) !important;
  box-shadow: none !important;
}
.nest-ch10-ch10-2-tag {
  width: fit-content !important;
  background: color-mix(in srgb, var(--vs2-paper) 94%, var(--vs2-track) 6%) !important;
  border-color: color-mix(in srgb, var(--vs2-line) 70%, var(--vs2-track) 30%) !important;
  color: var(--vs2-track) !important;
}
.nest-ch10-ch10-2-card,
.nest-ch10-ch10-2-step,
.nest-ch10-ch10-2-note,
.nest-ch10-ch10-2-notes > div {
  background: var(--vs2-paper) !important;
  border-color: var(--vs2-line) !important;
  box-shadow: none !important;
}
.nest-ch10-ch10-2-blue,
.nest-ch10-ch10-2-amber,
.nest-ch10-ch10-2-danger,
.nest-ch10-ch10-2-safe,
.nest-ch10-ch10-2-warn {
  background: var(--vs2-paper) !important;
  border-color: color-mix(in srgb, var(--vs2-line) 72%, var(--vs2-track) 28%) !important;
}
.nest-ch10-ch10-2-num {
  background: color-mix(in srgb, var(--vs2-paper) 92%, var(--vs2-track) 8%) !important;
  border-color: color-mix(in srgb, var(--vs2-line) 70%, var(--vs2-track) 30%) !important;
  color: var(--vs2-track) !important;
}
.nest-ch10-ch10-2-matrix {
  background: transparent !important;
  border-color: var(--vs2-line) !important;
}
.nest-ch10-ch10-2-row > div {
  background: transparent !important;
  border-color: var(--vs2-line-muted) !important;
}
.nest-ch10-ch10-2-row:first-child > div {
  background: var(--vs2-fill) !important;
  border-bottom-color: var(--vs2-line) !important;
}
.nest-ch10-ch10-2-code,
.nest-ch10-ch10-2-runtime,
.nest-ch10-ch10-2-secret,
.nest-ch10-ch10-2-label {
  color: var(--vs2-ink) !important;
}
.nest-ch10-ch10-2-label,
.nest-ch10-ch10-2-row:first-child > div,
.nest-ch10-ch10-2-root :where(strong, b) {
  font-weight: 850 !important;
}
html[data-diagram-theme="dark"] .nest-ch10-ch10-2-root :where(.nest-ch10-ch10-2-card, .nest-ch10-ch10-2-step, .nest-ch10-ch10-2-note, .nest-ch10-ch10-2-notes > div, .nest-ch10-ch10-2-matrix) {
  border-color: var(--vs2-line) !important;
}
html[data-diagram-theme="dark"] .nest-ch10-ch10-2-row > div {
  border-color: var(--vs2-line-muted) !important;
}
@media (max-width: 760px) {
  .nest-ch10-ch10-2-root {
    gap: 12px !important;
    padding: 12px !important;
  }
  .nest-ch10-ch10-2-row {
    border-color: var(--vs2-line) !important;
  }
}
/* /visual-stability-2-nest-ch10-2-final */