.system-lab{padding:24px;border:1px solid var(--border);border-radius:16px;background:var(--panel);margin:24px 0}.system-lab-heading{display:flex;justify-content:space-between;gap:16px;align-items:center}.system-lab-heading h3{margin:0}.system-lab-heading>span{font-size:12px;color:var(--accent);white-space:nowrap}.lab-assumptions{font-size:13px;color:var(--muted);margin:12px 0 24px}.enhanced .system-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.system-inputs label{display:flex;flex-direction:column;gap:8px;font-size:14px;min-width:0}.system-inputs input[type=range]{width:100%;accent-color:var(--accent)}.system-inputs output{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent)}.system-inputs select{width:100%;font-size:14px;white-space:normal}.system-inputs .lab-toggle{flex-direction:row;align-items:center}.lab-toggle input{width:20px;height:20px;accent-color:var(--accent)}.system-flow{padding:24px;margin:24px 0;background:var(--accent-soft);border-radius:12px;font:14px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}.system-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.system-metrics>div{border:1px solid var(--border);border-radius:12px;padding:14px}.system-metrics strong{display:block;font-size:25px;color:var(--accent);font-variant-numeric:tabular-nums}.system-metrics span{font-size:12px;color:var(--muted)}.system-explanation{margin:20px 0 0;font-size:14px;line-height:1.7}@media(max-width:650px){.system-lab{padding:16px}.system-lab-heading{align-items:flex-start;flex-direction:column;gap:8px}.enhanced .system-inputs{grid-template-columns:1fr}.system-metrics{gap:6px}.system-metrics>div{padding:10px}.system-metrics strong{font-size:20px}.system-flow{padding:16px}}

.intro-illustration{margin:24px 0}.intro-illustration img{display:block;width:100%;height:auto;border-radius:14px}.intro-illustration figcaption{font-size:14px;line-height:1.6;color:var(--muted);margin-top:10px}.learning-outcomes{margin:24px 0 0;padding:20px 22px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}.learning-outcomes h3{font-size:18px;margin:0 0 12px}.learning-outcomes ul{padding-left:20px;margin:0}.learning-outcomes li{padding-left:4px;margin:10px 0;font-size:16px;line-height:1.65}.learning-outcomes li::marker{color:var(--accent)}.system-lab+.section-prose{margin-top:20px}.interactive-course[data-course=system-design] .section-prose{line-height:1.8}.interactive-course[data-course=system-design] .section-prose details{margin-top:20px}.interactive-course[data-course=system-design] .section-prose summary{cursor:pointer;font-weight:650;margin-bottom:12px}@media(max-width:650px){.learning-outcomes{padding:18px}.learning-outcomes li{font-size:15px}.intro-illustration figcaption{font-size:13px}}

/* Native teaching diagrams: shapes and readable labels, with optional actions. */
.system-illustration{--diagram-blue:#edf3ff;--diagram-blue-edge:#b8cce8;--diagram-gold:#fff4dd;--diagram-gold-edge:#e7ce97;margin:20px 0;min-width:0}.system-illustration strong{font-weight:700}.diagram-route{display:flex;flex-direction:column;align-items:stretch;gap:0}.diagram-node{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:18px 14px;border:1px solid var(--section-edge);border-radius:14px;background:var(--panel);text-align:center;min-width:0}.diagram-node>span:last-child{font-size:13px;color:var(--muted);line-height:1.5}.diagram-node-mark{width:26px;height:26px;border-radius:50%;background:var(--section-ink);box-shadow:0 0 0 6px var(--section-soft);margin-bottom:6px}.diagram-node.balancer{background:var(--diagram-blue);border-color:var(--diagram-blue-edge)}.diagram-node.balancer .diagram-node-mark{border-radius:7px;background:#4c78ad;box-shadow:none}.diagram-node.cloud{background:var(--diagram-gold);border-color:var(--diagram-gold-edge)}.diagram-node.cloud .diagram-node-mark{border-radius:50% 50% 8px 8px;background:#a87928;box-shadow:none}.diagram-node.hardware .diagram-node-mark{border-radius:4px;background:#8059a2;box-shadow:none}.diagram-arrow{display:grid;place-items:center;min-height:36px;font-size:25px;color:var(--section-ink);line-height:1}.diagram-frontdoor{position:relative}.request-packet{position:absolute;left:calc(50% - 5px);bottom:-5px;width:10px;height:10px;border-radius:50%;background:var(--section-ink);opacity:0;pointer-events:none}.request-packet.in-flight{animation:diagram-request 650ms ease-out}.diagram-server-pool{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.diagram-server{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 10px;background:var(--panel);border:1px solid var(--section-edge);border-radius:12px;text-align:center;min-width:0;transition:background-color 180ms,border-color 180ms}.diagram-server>span:not(.server-shape){font-size:13px;line-height:1.5;color:var(--muted)}.server-shape{display:block;width:38px;height:30px;border:2px solid var(--section-ink);border-radius:5px;background:repeating-linear-gradient(to bottom,transparent 0 7px,var(--section-edge) 7px 9px)}.diagram-server.unavailable{border-style:dashed;background:var(--bg)}.diagram-server.unavailable .server-shape{opacity:.4}.diagram-server.receiving{border-color:var(--section-ink);box-shadow:inset 0 0 0 2px var(--section-ink);background:var(--section-soft)}.diagram-controls{gap:12px;flex-wrap:wrap;margin:20px 0 0;align-items:flex-end}.diagram-controls label{display:flex;flex-direction:column;gap:8px;font-size:14px;max-width:100%;flex:1;min-width:180px}.diagram-controls select{max-width:100%;width:100%;font-size:14px}.diagram-controls button{min-height:44px;padding:10px 14px;font-size:14px;font-weight:650}.diagram-controls button:first-of-type{background:var(--section-ink);color:var(--panel);border-color:var(--section-ink)}.diagram-result{font-size:15px;line-height:1.7;background:var(--panel);border-left:3px solid var(--section-ink);border-radius:0 8px 8px 0;padding:14px 16px;margin:20px 0 0}.diagram-note{font-size:13px;line-height:1.6;color:var(--muted);margin:12px 0 0}.diagram-demand,.measurement-centre{padding:14px;background:var(--panel);border:1px solid var(--section-edge);border-radius:12px;text-align:center;font-weight:650;margin:0 0 16px}.capacity-meter{height:8px;overflow:hidden;border-radius:8px;width:100%;background:var(--border);margin-top:8px}.capacity-meter span{display:block;width:100%;height:100%;background:var(--section-ink);transition:width 220ms ease}.unavailable .capacity-meter span{width:0}.diagram-capacity-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.diagram-capacity-summary>div{padding:14px;background:var(--panel);border:1px solid var(--section-edge);border-radius:12px}.diagram-capacity-summary strong{display:block;font-size:26px;color:var(--section-ink);font-variant-numeric:tabular-nums}.diagram-capacity-summary span{font-size:13px;color:var(--muted)}.diagram-controls .diagram-toggle{flex-direction:row;align-items:center;min-width:0}.diagram-toggle input{width:20px;height:20px;accent-color:var(--section-ink)}.diagram-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.diagram-card{border:1px solid var(--section-edge);border-radius:14px;background:var(--panel);padding:16px;min-width:0}.diagram-card .diagram-node{padding:16px 10px}.diagram-card h4,.requirement-card h4,.recovery-stage h4{font-size:18px;line-height:1.4;margin:0 0 12px}.diagram-card p{font-size:14px;line-height:1.7;margin:16px 0 0}.diagram-tag{display:block;border-top:1px solid var(--section-edge);margin-top:16px;padding-top:12px;font-size:12px;color:var(--muted);line-height:1.5}.measurement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.measurement-card{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:18px;border:1px solid var(--section-edge);border-radius:12px;background:var(--panel);min-width:0}.measurement-symbol{border-radius:9px;background:var(--section-soft);color:var(--section-ink);font:600 14px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;padding:8px 10px}.measurement-card>span:last-child{font-size:13px;line-height:1.6;color:var(--muted)}.diagram-mini-pool{display:grid;grid-template-columns:1fr 1fr;gap:8px}.diagram-mini-pool span{border:1px dashed var(--section-edge);background:var(--section-soft);border-radius:8px;padding:12px 7px;text-align:center;font-size:13px;line-height:1.5}.requirement-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.requirement-card{border:1px solid var(--section-edge);border-radius:12px;background:var(--panel);padding:18px;min-width:0}.requirement-card p{font-size:14px;line-height:1.7;margin:0 0 10px}.requirement-card .requirement-cost{color:var(--muted);margin:0;border-top:1px solid var(--section-edge);padding-top:10px}.requirement-indicator{display:block;width:22px;height:22px;border:1px solid var(--section-edge);border-radius:50%;margin-bottom:12px}.requirement-card.recommended{border-color:var(--section-ink);box-shadow:inset 0 0 0 1px var(--section-ink)}.recommended .requirement-indicator{background:var(--section-ink)}.docker-network{padding:20px;border:2px dashed var(--section-ink);border-radius:16px;background:var(--panel)}.network-boundary-label{display:block;font-size:13px;font-weight:650;color:var(--section-ink);margin-bottom:16px}.two-servers{grid-template-columns:repeat(2,minmax(0,1fr))}.recovery-stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.recovery-stage{padding:18px;border:1px solid var(--section-edge);border-radius:14px;background:var(--panel);min-width:0}.current-stage{border-color:var(--section-ink);box-shadow:inset 0 0 0 1px var(--section-ink)}.stage-number{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--section-soft);color:var(--section-ink);font-size:13px;font-weight:700;margin-bottom:12px}.current-stage .stage-number{background:var(--section-ink);color:var(--panel)}.recovery-server{display:flex;justify-content:space-between;gap:8px;font-size:13px;line-height:1.6;margin:8px 0;border-bottom:1px solid var(--section-edge);padding-bottom:8px;flex-wrap:wrap}.recovery-server.unavailable{border-bottom-style:dashed}.recovery-stage p{font-size:13px;line-height:1.7;margin:14px 0 0}.reliability-symbol{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--section-soft);color:var(--section-ink);font-size:24px;font-weight:650;margin-bottom:16px}
:root[data-theme=dark] .system-illustration{--diagram-blue:#25374b;--diagram-blue-edge:#425f7e;--diagram-gold:#3d3321;--diagram-gold-edge:#695634}@keyframes diagram-request{0%{opacity:1;transform:translateY(0)}80%{opacity:1}100%{opacity:0;transform:translateY(38px)}}@media(max-width:900px){.diagram-cards{grid-template-columns:1fr}.measurement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.diagram-server-pool{grid-template-columns:1fr}.two-servers{grid-template-columns:1fr}.diagram-server{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;text-align:left;padding:14px}.diagram-server .server-status,.diagram-server [data-connections]{flex-basis:100%}.diagram-node{padding:16px 12px}.diagram-controls label{min-width:0;flex-basis:100%}.diagram-controls button{flex:1}.requirement-grid,.recovery-stages{grid-template-columns:1fr}.measurement-card{padding:14px}.measurement-grid{gap:8px}.docker-network{padding:14px}.diagram-capacity-summary>div{padding:12px}.diagram-capacity-summary strong{font-size:23px}}@media(prefers-reduced-motion:reduce){.request-packet.in-flight{animation:none}.diagram-server,.capacity-meter span{transition:none}}

.database-models,.cache-stores,.cache-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.data-table-wrap{overflow:auto;border:1px solid var(--section-edge);border-radius:10px}.data-table-wrap table{display:table;width:100%;font-size:13px}.data-table-wrap caption{padding:12px;text-align:left;background:var(--section-soft);font-weight:700}.data-table-wrap td,.data-table-wrap th{padding:10px;text-align:left}.document-shape{border:1px solid var(--section-edge);border-radius:12px;background:var(--section-soft);padding:18px;display:flex;flex-direction:column;gap:12px;font:14px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}.document-nested{display:flex;flex-direction:column;gap:8px;border-left:3px solid var(--section-ink);padding-left:14px}.order-records{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.order-record{display:flex;flex-direction:column;gap:8px;border:1px solid var(--section-edge);padding:16px;border-radius:12px;background:var(--panel);font-size:14px}.order-record.inspected{background:var(--section-soft);border-style:dashed}.order-record.matched-record,.active-destination{box-shadow:inset 0 0 0 2px var(--section-ink);background:var(--section-soft)!important}.order-record.matched-record::after{content:'Found';font-size:12px;color:var(--section-ink);font-weight:650}.transaction-boundary{padding:20px;border:2px dashed var(--section-ink);border-radius:14px;background:var(--panel)}.transaction-boundary>.diagram-mini-pool{margin:16px 0}.transaction-boundary p{margin:0;font-size:14px}.store-cylinder{display:block;width:48px;height:44px;border:2px solid var(--section-ink);border-radius:50% / 18%;background:var(--section-soft);margin:8px 0}.diagram-node .store-value{font-size:28px;font-weight:750;color:var(--section-ink);font-variant-numeric:tabular-nums}.cache-paths{margin-top:20px}.cache-paths .diagram-tag{border:0;margin:0 0 12px;padding:0;font-weight:700;color:var(--section-ink)}@media(max-width:650px){.database-models,.cache-stores,.cache-paths{grid-template-columns:1fr}.order-records{grid-template-columns:repeat(2,minmax(0,1fr))}.data-table-wrap th,.data-table-wrap td{padding:8px}.transaction-boundary{padding:16px}}
@media(max-width:650px){.diagram-controls button{flex:1 1 120px;min-width:120px}.diagram-controls .diagram-toggle{min-width:0;flex-basis:100%}}
.queue-jobs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.queue-jobs span{padding:8px 12px;border:1px solid var(--section-edge);border-radius:8px;background:var(--panel);font-weight:650;font-size:14px}.token-bucket{padding:24px;margin:20px 0;border:2px solid var(--section-edge);border-radius:16px 16px 28px 28px;background:var(--panel);text-align:center}.token-slots{display:flex;justify-content:center;gap:18px;margin:24px 0}.token-slot{width:44px;height:44px;border:2px dashed var(--section-edge);border-radius:50%;background:var(--bg)}.token-slot.full{background:var(--section-ink);border-style:solid;border-color:var(--section-ink);box-shadow:inset 0 0 0 6px var(--panel)}.token-bucket p{font-size:13px;color:var(--muted);margin:0;line-height:1.6}

.latency-requests { display: grid; gap: 12px; margin: 20px 0; }
.latency-request { display: grid; grid-template-columns: 90px minmax(0, 1fr) 90px; align-items: center; gap: 12px; font-size: .85rem; }
.latency-request strong { text-align: right; font-variant-numeric: tabular-nums; }
.latency-track { display: flex; height: 14px; background: var(--section-soft); border-radius: 7px; overflow: hidden; }
.latency-wait { background: #d6a541; }
.latency-work { background: #259d91; }
.latency-key { display: flex; flex-wrap: wrap; gap: 18px; font-size: .85rem; }
.latency-key span { display: inline-flex; align-items: center; gap: 7px; }
.latency-key i { width: 12px; height: 12px; border-radius: 3px; }
@media (max-width: 650px) {
  .latency-request { grid-template-columns: 70px minmax(0, 1fr) 68px; gap: 6px; font-size: .75rem; }
}

[data-illustration="estimate-lab"] .measurement-grid .diagram-card,
[data-illustration="latency-lab"] .measurement-grid .diagram-card { display: flex; flex-direction: column; gap: 8px; }
[data-illustration="estimate-lab"] .measurement-grid strong,
[data-illustration="latency-lab"] .measurement-grid strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

[data-illustration="scaling-lab"] .diagram-node { margin-top: 14px; }
[data-illustration="scaling-lab"] .diagram-controls label[hidden] { display: none; }
[data-illustration="scaling-lab"] .scale-failed { border-style: dashed; background: var(--section-soft); }
[data-illustration="scaling-lab"] .diagram-capacity-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 650px) {
  [data-illustration="scaling-lab"] .diagram-capacity-summary { grid-template-columns: 1fr; }
}

.design-decision-case { border: 0; padding: 0; margin: 20px 0 24px; min-width: 0; }
.design-decision-case legend { font-weight: 650; line-height: 1.6; margin-bottom: 12px; padding: 0; }
.design-decision-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.design-decision-option { display: flex; flex-direction: column; gap: 12px; text-align: left; border: 1px solid var(--section-edge); border-radius: 14px; padding: 18px; background: var(--panel); color: var(--text); font: inherit; line-height: 1.6; cursor: pointer; min-width: 0; }
.design-decision-option strong { font-size: 1rem; }
.design-decision-option span { color: var(--muted); font-size: .875rem; }
.design-decision-option:disabled { cursor: default; opacity: 1; }
.design-decision-option[aria-pressed="true"] { border-color: var(--section-ink); box-shadow: inset 0 0 0 1px var(--section-ink); background: var(--section-soft); }
.design-decision-option:focus-visible { outline: 2px solid var(--section-ink); outline-offset: 4px; }
@media (max-width: 650px) {
  .design-decision-options { grid-template-columns: 1fr; }
  .design-decision-option { padding: 16px; }
}

.topic-record-match { border-color: var(--section-ink) !important; background: var(--section-soft) !important; font-weight: 700; }
[data-illustration="layers-lab"] .diagram-controls,
[data-illustration="invalidation-lab"] .diagram-controls { margin-top: 18px; }
[data-illustration="schedule-lab"] .queue-jobs { margin-top: 18px; }

.topic-pipeline { display: grid; gap: 10px; margin: 18px 0; }
.topic-stage { display: flex; align-items: center; gap: 12px; border: 1px solid var(--section-edge); border-radius: 12px; background: var(--panel); padding: 14px; }
.topic-stage > span { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--section-soft); color: var(--section-ink); font-size: .875rem; }
.topic-stage-current { border-color: var(--section-ink); box-shadow: inset 0 0 0 1px var(--section-ink); }
.topic-stage-done > span { background: var(--section-ink); color: var(--panel); }
.topic-stage-failed { border-style: dashed; border-color: var(--incorrect); color: var(--incorrect); }
.topic-latencies { display: grid; gap: 10px; margin: 20px 0; }
.topic-latency-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 80px; gap: 8px; align-items: center; font-size: .85rem; }
.topic-latency-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.topic-latency-track { height: 12px; border-radius: 6px; background: var(--panel); overflow: hidden; }
.topic-latency-track > span { display: block; height: 100%; background: var(--section-ink); }
[data-illustration="chat-lab"] .queue-jobs { margin-top: 18px; }
@media (max-width: 650px) {
  .topic-latency-row { grid-template-columns: 72px minmax(0, 1fr) 65px; font-size: .75rem; gap: 6px; }
}

/* Each key keeps its label and owner visible as membership changes. */
.placement-keys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-block: 16px;
}
.placement-key {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--section-edge);
  border-radius: 12px;
  background: var(--panel);
  transition: background-color 180ms ease, border-color 180ms ease;
}
.placement-key span { color: var(--muted); font-family: monospace; }
.placement-key-moved { background: var(--section-soft); border-color: var(--section-ink); }
.placement-key-moved span { color: var(--section-ink); }
@media (max-width: 650px) {
  .placement-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .placement-key { transition: none; }
}
.hash-ring {
  position: relative;
  width: min(230px, calc(100% - 52px));
  aspect-ratio: 1;
  margin: 48px auto;
  border: 3px solid var(--section-edge);
  border-radius: 50%;
}
.hash-ring[hidden] { display: none; }
.hash-ring-center {
  position: absolute;
  inset: 28%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.hash-ring-center span { color: var(--muted); font-size: 0.8rem; }
.hash-ring-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px;
  border-radius: 12px;
  border: 1px solid var(--section-edge);
  background: var(--panel);
  min-width: 74px;
  transform: translate(-50%, -50%);
}
.hash-ring-node span { font-size: 0.75rem; color: var(--muted); }
.hash-ring-a { left: 50%; top: 0; }
.hash-ring-b { left: 93.3%; top: 75%; }
.hash-ring-c { left: 6.7%; top: 75%; }
.hash-ring-d { left: 6.7%; top: 25%; border-style: dashed; }
.hash-ring-joined { background: var(--section-soft); border-color: var(--section-ink); border-style: solid; }
@media (max-width: 650px) {
  [data-illustration="hash-placement-lab"] .measurement-grid,
  [data-illustration="retry-budget-lab"] .measurement-grid { grid-template-columns: minmax(0, 1fr); }
}

.code-example-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  margin-block: 18px 8px;
}
.bridge-contract {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.bridge-contract-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  color: var(--section-ink);
  font-family: monospace;
}
.bridge-contract-link span:last-child { transform: rotate(-90deg); }
.bridge-combinations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.bridge-live-result { margin-top: 18px; }
.bridge-live-result .diagram-result { min-height: 80px; margin-bottom: 14px; }
.bridge-controls { align-items: end; }
@media (max-width: 650px) {
  .bridge-contract { grid-template-columns: minmax(0, 1fr); }
  .bridge-contract-link span:last-child { transform: none; }
  .bridge-combinations { grid-template-columns: minmax(0, 1fr); }
}

/* Booking introduction diagrams: distinct icon, heading, copy and result areas. */
.sd-figure{margin:28px 0;min-width:0;container-type:inline-size}
.sd-lesson-diagram{display:block;width:100%;height:auto;font-family:var(--font-text);overflow:visible}
.sd-diagram-mobile{display:none;max-width:360px;margin-inline:auto}
.sd-diagram-canvas{fill:var(--bg)}
.sd-node-card{fill:var(--panel);stroke:var(--border);stroke-width:1.5}
.sd-node-heading{fill:var(--text);font-weight:750}
.sd-node-copy{fill:var(--muted)}
.sd-node-badge{fill:#20372a;font-weight:650}
.sd-diagram-connector{fill:none;stroke:#64748b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sd-figure figcaption{margin-top:16px;color:var(--muted);line-height:1.6}
@media(max-width:800px){.sd-diagram-desktop{display:none}.sd-diagram-mobile{display:block}}
@container(max-width:800px){.sd-diagram-desktop{display:none}.sd-diagram-mobile{display:block}}