/* Chapter 18: editable system diagram and content, matching the supplied light-blue reference. */
#system-design.system-reference {
  --sd-unit: min(1vw, 22.857px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  color: #0c204d;
  background: radial-gradient(ellipse at 90% 24%, #e5f0ff80, transparent 49%), linear-gradient(120deg, #f5faff, #f9fcff 55%, #f4faff);
}
#system-design.system-reference::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: calc(20 * var(--sd-unit));
  height: calc(20 * var(--sd-unit));
  left: calc(-11.3 * var(--sd-unit));
  top: calc(9.2 * var(--sd-unit));
  border-radius: 50%;
  background: linear-gradient(130deg, #eaf5ff00, #bcd9ff6b);
}
#system-design .sd-shell { width: 87.5%; max-width: 2000px; margin: 0 auto; padding: calc(3.5 * var(--sd-unit)) 0 calc(1.15 * var(--sd-unit)); }
#system-design .sd-hero { display: grid; grid-template-columns: 51% 49%; min-height: calc(26.15 * var(--sd-unit)); padding-left: 7.14%; }
#system-design .sd-copy { position: relative; z-index: 2; min-width: 0; }
#system-design .section-label { margin: 0 0 calc(1.25 * var(--sd-unit)); color: #587199; font-size: clamp(11px, calc(.78 * var(--sd-unit)), 16px); line-height: 1.7; letter-spacing: .12em; }
#system-design h2 { margin: 0; max-width: none; color: #071638; font-size: clamp(30px, calc(2.74 * var(--sd-unit)), 62px); font-weight: 700; line-height: 1.36; letter-spacing: -.025em; text-wrap: initial; }
#system-design .sd-demo { position: relative; display: inline-block; color: #2d82ff; }
#system-design .sd-title-tail { white-space: nowrap; }
#system-design .sd-demo::after { content: ""; position: absolute; height: calc(.25 * var(--sd-unit)); min-height: 3px; background: #68a6ff; border-radius: 50%; left: 0; right: -.35em; bottom: -.04em; transform: rotate(-1.5deg); }
#system-design .sd-intro { max-width: 96%; margin: calc(2.35 * var(--sd-unit)) 0 0; color: #566f98; font-size: clamp(15px, calc(1.17 * var(--sd-unit)), 25px); line-height: 1.72; text-wrap: pretty; }
#system-design .sd-architecture { position: relative; height: calc(25.2 * var(--sd-unit)); min-width: 0; margin: calc(-.1 * var(--sd-unit)) calc(-1 * var(--sd-unit)) 0 0; }
#system-design .sd-art-orbit { position: absolute; width: calc(25 * var(--sd-unit)); height: calc(25 * var(--sd-unit)); top: calc(-1.5 * var(--sd-unit)); right: calc(-6.1 * var(--sd-unit)); border-radius: 50%; background: linear-gradient(140deg, #eff7ff00 9%, #c7dfff90 60%, #deedff20 61%); }
#system-design .sd-art-pedestal { position: absolute; width: calc(6.8 * var(--sd-unit)); height: calc(3 * var(--sd-unit)); left: 10%; top: 62%; border-radius: 40%; transform: rotate(-19deg); background: linear-gradient(160deg, #ffffffd9, #d8eaff52); box-shadow: 0 calc(1.4 * var(--sd-unit)) calc(2 * var(--sd-unit)) #adcef52b, inset 0 -1px 1px #fff; }
#system-design .sd-art-pedestal::before { content: ""; position: absolute; width: 57%; height: 70%; border-radius: 30%; top: -31%; left: 22%; background: linear-gradient(120deg, #e8f4ff9e, #fff9); }
#system-design .sd-handwriting { position: absolute; left: 0; top: 11%; color: #627dac; font-family: 'KaiTi', 'STKaiti', '楷体', serif; font-size: clamp(16px, calc(1.33 * var(--sd-unit)), 28px); line-height: 1.6; letter-spacing: .12em; transform: rotate(-12deg); white-space: nowrap; }
#system-design .sd-handwriting svg { width: calc(13.5 * var(--sd-unit)); height: calc(3.4 * var(--sd-unit)); margin-top: calc(-.5 * var(--sd-unit)); }
#system-design .sd-stack { position: absolute; width: 35.5%; left: 39%; top: 13%; transform: rotate(9deg); }
#system-design .sd-glass { position: absolute; z-index: 0; border: 1px solid #ffffffd9; border-radius: calc(1 * var(--sd-unit)); pointer-events: none; }
#system-design .sd-glass-back { inset: calc(1.75 * var(--sd-unit)) calc(-4.25 * var(--sd-unit)) calc(-1.3 * var(--sd-unit)) calc(2.6 * var(--sd-unit)); background: linear-gradient(135deg, #e6f2ff46, #c8dff93d); transform: rotate(-1deg); }
#system-design .sd-glass-middle { inset: calc(-2 * var(--sd-unit)) calc(-2.5 * var(--sd-unit)) calc(-1.8 * var(--sd-unit)) calc(.9 * var(--sd-unit)); background: linear-gradient(130deg, #ffffffba, #d9eaff57 64%, #ffffff70); }
#system-design .sd-layers { position: relative; display: grid; gap: calc(.55 * var(--sd-unit)); padding: calc(.6 * var(--sd-unit)); border-radius: calc(.95 * var(--sd-unit)); background: linear-gradient(130deg, #ffffffc7, #cadeff87); border: 1px solid #fff; box-shadow: calc(1.5 * var(--sd-unit)) calc(1.3 * var(--sd-unit)) calc(2.2 * var(--sd-unit)) #79aaf01c; }
#system-design .sd-layers li { display: flex; align-items: center; gap: calc(.85 * var(--sd-unit)); min-width: 0; height: calc(3.95 * var(--sd-unit)); padding: calc(.6 * var(--sd-unit)) calc(.85 * var(--sd-unit)); color: #123984; background: linear-gradient(100deg, #fff, #f4f9ffd9); border-radius: calc(.65 * var(--sd-unit)); font-size: clamp(10px, calc(.84 * var(--sd-unit)), 19px); line-height: 1.4; }
#system-design .sd-layers li:nth-child(2) { background: linear-gradient(100deg, #f9fcff, #e5f1ffd9); }
#system-design .sd-layers li:nth-child(3) { background: linear-gradient(100deg, #f4faff, #deedffd9); }
#system-design .sd-layers li:nth-child(4) { background: linear-gradient(100deg, #edf6ff, #d9eaffd9); }
#system-design .sd-layer-icon { width: calc(1.85 * var(--sd-unit)); height: calc(1.85 * var(--sd-unit)); flex: 0 0 auto; color: #5d9fff; }
#system-design .sd-layer-icon svg { width: 100%; height: 100%; }
#system-design .sd-app-icon { display: grid; grid-template-columns: 1fr 1fr; gap: calc(.15 * var(--sd-unit)); }
#system-design .sd-app-icon i { border-radius: calc(.15 * var(--sd-unit)); background: linear-gradient(140deg, #81b7ff, #247aff); }
#system-design .sd-operations { position: absolute; right: 0; top: 37%; width: 15.6%; display: grid; gap: calc(1 * var(--sd-unit)); transform: rotate(9deg); }
#system-design .sd-operations li { position: relative; display: flex; flex-direction: column; gap: calc(.13 * var(--sd-unit)); padding: calc(.72 * var(--sd-unit)) calc(.75 * var(--sd-unit)); border: 1px solid #ffffffa6; border-radius: calc(.7 * var(--sd-unit)); background: linear-gradient(130deg, #f7fbffe6, #eaf5ff9c); color: #294a84; font-size: clamp(10px, calc(.71 * var(--sd-unit)), 16px); line-height: 1.5; }
#system-design .sd-operations li::before { content: ""; position: absolute; width: calc(3.2 * var(--sd-unit)); left: calc(-3.8 * var(--sd-unit)); top: 45%; border-top: 1px dashed #a7caff; }
#system-design .sd-operations li::after { content: ""; position: absolute; width: calc(.35 * var(--sd-unit)); height: calc(.35 * var(--sd-unit)); border-radius: 50%; left: calc(-.7 * var(--sd-unit)); top: calc(45% - calc(.15 * var(--sd-unit))); background: #7eb3ff; }
#system-design .sd-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(.7 * var(--sd-unit)); }
#system-design .sd-pillars > li { display: flex; gap: calc(1.45 * var(--sd-unit)); min-width: 0; min-height: calc(11.3 * var(--sd-unit)); padding: calc(1 * var(--sd-unit)) calc(1.05 * var(--sd-unit)) calc(1.3 * var(--sd-unit)); border: 1px solid #e2edfc; border-radius: 12px; background: #ffffffa3; }
#system-design .sd-pillar-icon { flex: 0 0 auto; display: grid; place-items: center; width: calc(4.15 * var(--sd-unit)); height: calc(4.15 * var(--sd-unit)); border-radius: 50%; color: #2881ff; background: #e7f0ff; }
#system-design .sd-pillar-icon svg { width: calc(2 * var(--sd-unit)); height: calc(2 * var(--sd-unit)); }
#system-design .sd-pillars > li > div { min-width: 0; padding-top: calc(.65 * var(--sd-unit)); }
#system-design .sd-number { color: #587199; font-size: clamp(12px, calc(.88 * var(--sd-unit)), 19px); }
#system-design .sd-pillars h3 { margin-top: calc(1.5 * var(--sd-unit)); color: #0b204e; font-size: clamp(14px, calc(1.12 * var(--sd-unit)), 25px); font-weight: 700; line-height: 1.5; letter-spacing: -.025em; text-wrap: initial; }
#system-design .sd-pillars p { margin-top: calc(.8 * var(--sd-unit)); color: #5a7298; font-size: clamp(12px, calc(.84 * var(--sd-unit)), 18px); line-height: 1.8; text-wrap: pretty; }
#system-design .sd-takeaway { display: flex; gap: calc(2.4 * var(--sd-unit)); align-items: center; margin-top: calc(2.4 * var(--sd-unit)); padding-top: calc(1.35 * var(--sd-unit)); border-top: 1px solid #9bb2d3; }
#system-design .sd-bulb { flex: 0 0 auto; display: grid; place-items: center; width: calc(5.1 * var(--sd-unit)); height: calc(5.1 * var(--sd-unit)); border-radius: 50%; background: #e7f1ff; color: #639fff; }
#system-design .sd-bulb svg { width: calc(2.6 * var(--sd-unit)); height: calc(2.6 * var(--sd-unit)); }
#system-design .sd-takeaway p { color: #142e5e; font-size: clamp(17px, calc(1.37 * var(--sd-unit)), 30px); line-height: 1.5; }
#system-design .sd-signature { margin-left: auto; color: #587199; font-size: clamp(10px, calc(.74 * var(--sd-unit)), 16px); line-height: 1.5; letter-spacing: .16em; }
#system-design .sd-signature::before { content: ""; display: block; width: calc(1.4 * var(--sd-unit)); border-top: 1px solid #91a7ca; margin-bottom: calc(.8 * var(--sd-unit)); }
#system-design .sd-engineering { margin-top: calc(1.5 * var(--sd-unit)); color: #536d93; }
#system-design .sd-engineering > summary { display: flex; align-items: center; gap: 12px; width: fit-content; min-height: 36px; list-style: none; font-size: 12px; cursor: pointer; }
#system-design .sd-engineering > summary::-webkit-details-marker { display: none; }
#system-design .sd-engineering > summary:hover { color: #176bd3; }
#system-design .sd-engineering > summary:focus-visible { outline: 2px solid #2b7ce8; outline-offset: 4px; border-radius: 3px; }
#system-design .sd-engineering > summary > span { font-size: 17px; }
#system-design .sd-engineering[open] > summary > span { transform: rotate(45deg); }
#system-design .sd-engineering-content { padding: 25px 0 14px; border-top: 1px solid #dae5f4; margin-top: 10px; }
#system-design .sd-implementation, #system-design .sd-scope { display: grid; grid-template-columns: 1fr 1fr; gap: calc(5 * var(--sd-unit)); }
#system-design .sd-engineering h3 { font-size: 16px; color: #18345a; font-weight: 700; margin-bottom: 10px; }
#system-design .sd-engineering p { font-size: 14px; line-height: 1.8; }
#system-design .sd-comparison p { margin: 0 0 12px; }
#system-design .sd-comparison strong, #system-design .sd-comparison span { display: block; }
#system-design .sd-record-note { margin-top: 26px; }
#system-design .sd-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 16px; }
#system-design .sd-metrics > div { display: flex; flex-direction: column-reverse; }
#system-design .sd-metrics dt { font-size: 12px; }
#system-design .sd-metrics dd { font-size: 30px; font-weight: 700; color: #225fab; }
#system-design .sd-principles { margin: 22px 0; letter-spacing: .08em; }
#system-design .sd-scope { border-top: 1px solid #dae5f4; padding-top: 22px; }
@media (max-width: 1100px) {
 #system-design .sd-desktop-break { display: none; }
 #system-design .sd-shell { width: 90%; padding-top: 40px; padding-bottom: 24px; }
 #system-design .sd-hero { padding-left: 0; grid-template-columns: 54% 46%; min-height: 350px; }
 #system-design h2 { font-size: clamp(27px, calc(3 * var(--sd-unit)), 33px); }
 #system-design .sd-intro { max-width: 100%; font-size: 15px; margin-top: 24px; }
 #system-design .sd-architecture { align-self: center; height: calc(30 * var(--sd-unit)); }
 #system-design .sd-handwriting { top: -5%; left: 5%; font-size: 16px; }
 #system-design .sd-stack { width: 47%; left: 22%; top: 20%; }
 #system-design .sd-layers li { height: calc(4.7 * var(--sd-unit)); font-size: 10px; }
 #system-design .sd-operations { top: 43%; width: 23%; }
 #system-design .sd-operations li { font-size: 10px; }
 #system-design .sd-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
 #system-design .sd-pillars > li { min-height: 160px; padding: 20px; gap: 20px; }
 #system-design .sd-pillar-icon { width: 58px; height: 58px; }
 #system-design .sd-pillar-icon svg { width: 28px; height: 28px; }
 #system-design .sd-pillars > li > div { padding-top: 4px; }
 #system-design .sd-pillars h3 { font-size: 18px; margin-top: 15px; }
 #system-design .sd-pillars p { font-size: 14px; margin-top: 10px; }
 #system-design .sd-takeaway { margin-top: 30px; padding-top: 22px; gap: 24px; }
 #system-design .sd-bulb { width: 64px; height: 64px; }
 #system-design .sd-bulb svg { width: 32px; height: 32px; }
 #system-design .sd-takeaway p { font-size: 18px; }
 #system-design .sd-signature { font-size: 10px; }
}
@media (max-width: 760px) {
 #system-design .sd-shell { padding-top: 32px; }
 #system-design .sd-hero { display: flex; flex-direction: column; }
 #system-design .section-label { margin-bottom: 18px; font-size: 11px; }
 #system-design h2 { font-size: clamp(25px, calc(4.7 * var(--sd-unit)), 35px); line-height: 1.5; }
 #system-design .sd-intro { max-width: 600px; margin-top: 24px; line-height: 1.85; }
 #system-design .sd-architecture { align-self: stretch; width: 100%; height: calc(61 * var(--sd-unit)); margin: 12px 0 24px; }
 #system-design .sd-art-orbit { width: calc(57 * var(--sd-unit)); height: calc(57 * var(--sd-unit)); top: 0; right: calc(-10 * var(--sd-unit)); }
 #system-design .sd-handwriting { top: 10%; left: 2%; font-size: clamp(16px, calc(2.8 * var(--sd-unit)), 21px); }
 #system-design .sd-handwriting svg { width: calc(28 * var(--sd-unit)); height: calc(8 * var(--sd-unit)); }
 #system-design .sd-stack { left: 38%; top: 14%; width: 38%; }
 #system-design .sd-glass { border-radius: calc(2 * var(--sd-unit)); }
 #system-design .sd-glass-back { inset: calc(4 * var(--sd-unit)) calc(-7 * var(--sd-unit)) calc(-2 * var(--sd-unit)) calc(3 * var(--sd-unit)); }
 #system-design .sd-glass-middle { inset: calc(-4 * var(--sd-unit)) calc(-4 * var(--sd-unit)) calc(-4 * var(--sd-unit)) calc(1.2 * var(--sd-unit)); }
 #system-design .sd-layers { padding: calc(1.3 * var(--sd-unit)); gap: calc(1.3 * var(--sd-unit)); border-radius: calc(2 * var(--sd-unit)); }
 #system-design .sd-layers li { height: calc(9.5 * var(--sd-unit)); padding: calc(1.7 * var(--sd-unit)); gap: calc(2 * var(--sd-unit)); border-radius: calc(1.4 * var(--sd-unit)); font-size: clamp(10px, calc(2.2 * var(--sd-unit)), 16px); }
 #system-design .sd-layer-icon { width: calc(4.4 * var(--sd-unit)); height: calc(4.4 * var(--sd-unit)); }
 #system-design .sd-app-icon { gap: calc(.4 * var(--sd-unit)); }
 #system-design .sd-app-icon i { border-radius: calc(.4 * var(--sd-unit)); }
 #system-design .sd-operations { top: 40%; right: -1%; width: 18%; gap: calc(2 * var(--sd-unit)); }
 #system-design .sd-operations li { padding: calc(1.3 * var(--sd-unit)) calc(1.4 * var(--sd-unit)); font-size: clamp(9px, calc(1.9 * var(--sd-unit)), 14px); border-radius: calc(1.5 * var(--sd-unit)); }
 #system-design .sd-art-pedestal { width: calc(16 * var(--sd-unit)); height: calc(7 * var(--sd-unit)); }
 #system-design .sd-takeaway { align-items: flex-start; gap: 18px; }
 #system-design .sd-takeaway p { font-size: 17px; line-height: 1.75; }
 #system-design .sd-takeaway p br { display: none; }
 #system-design .sd-bulb { width: 52px; height: 52px; }
 #system-design .sd-bulb svg { width: 29px; height: 29px; }
 #system-design .sd-signature { display: none; }
 #system-design .sd-engineering { margin-top: 24px; }
 #system-design .sd-implementation, #system-design .sd-scope { grid-template-columns: 1fr; gap: 22px; }
 #system-design .sd-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 #system-design .sd-principles { font-size: 11px; letter-spacing: .02em; }
}
@media (max-width: 560px) {
 #system-design h2 { font-size: clamp(20px, calc(5.6 * var(--sd-unit)), 28px); letter-spacing: -.025em; }
 #system-design .sd-handwriting { top: 4%; left: 0; font-size: clamp(13px, calc(3.4 * var(--sd-unit)), 17px); letter-spacing: .06em; }
 #system-design .sd-stack { top: 17%; }
 #system-design .sd-pillars { grid-template-columns: 1fr; gap: 12px; }
 #system-design .sd-pillars > li { min-height: 145px; padding: 18px; }
 #system-design .sd-pillars h3 { margin-top: 10px; font-size: 18px; }
 #system-design .sd-pillars p { margin-top: 8px; }
 #system-design .sd-pillar-icon { width: 52px; height: 52px; }
 #system-design .sd-number { font-size: 12px; }
}