/* ai-infra-from-zero-04: figure, table and card components only. The page itself
   uses the notes' layout and type from infra-notes.css (same as ai-infra-from-zero-02). */
.prose .infra-04 .figure,.prose .infra-04 .tablewrap{width:min(800px,calc(100vw - 32px));position:relative;left:50%;transform:translateX(-50%)}
.prose .infra-04 h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 7px}
.infra-04{--paper:#faf8f3;--white:#fffdfa;--ink:#273831;--body:#405149;--muted:#78877d;--rule:#e5e8df;--green:#2a6b5c;--green-deep:#194d41;--mint:#e5f1e9;--mint2:#f1f7f1;--peach:#f6eadc;--blue:#e9eff1;--warm:#f5f1e9;--mono:#31584e;--shadow:0 13px 35px rgba(37,65,47,.045)}
.infra-04 *{box-sizing:border-box}
.infra-04 code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:.89em;color:var(--mono);background:#eaf2e9;border-radius:5px;padding:2px 5px;white-space:normal}
.infra-04 sup.ref a{font-size:10px;border-radius:4px;padding:0 2px;color:#6a9685}
.infra-04 .subtle{color:var(--muted)}
.infra-04 .note{font-size:12px;color:#7f8b7f;line-height:1.75}
.infra-04 .micro{font-size:11px;font-weight:780;letter-spacing:.14em;text-transform:uppercase;color:#739484}
.infra-04 .figure{background:var(--white);border:1px solid #e5e8df;border-radius:15px;padding:23px;margin:28px 0 12px;box-shadow:var(--shadow)}
.infra-04 .figure .figtitle{font-size:12px;font-weight:750;letter-spacing:.055em;color:#395f50;margin-bottom:16px}
.infra-04 .figcap{font-size:12px;color:#829187;line-height:1.65;margin:11px 0 25px}
.infra-04 .figure .figcap{margin:15px 0 0}
.infra-04 .steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:stretch}
.infra-04 .step{min-height:112px;border:1px solid #dfe7df;background:#f6faf5;border-radius:10px;padding:12px 10px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.infra-04 .step .n{font-family:Georgia,serif;font-size:12px;color:#a0b3a6}
.infra-04 .step strong{font-size:12px;line-height:1.45;color:#2b5b49}
.infra-04 .step small{font-size:10px;line-height:1.45;color:#789284}
.infra-04 .step.primary{background:#e5f1e9;border-color:#c8dfd0}
.infra-04 .arrowrow{display:flex;align-items:center;justify-content:center;color:#9bb8a6;font-size:20px}
.infra-04 .stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.infra-04 .panel{background:var(--white);border:1px solid #e5e8df;border-radius:12px;padding:19px 18px}
.infra-04 .panel .label{font-size:10px;font-weight:780;letter-spacing:.15em;color:#789585;text-transform:uppercase;margin-bottom:10px}
.infra-04 .panel p:last-child{margin-bottom:0}
.infra-04 .panel h4{font-family:Georgia,"Noto Serif CJK SC",serif;text-transform:none;letter-spacing:0;font-size:18px;font-weight:600;margin:0 0 9px;color:#284c3e}
.infra-04 .panel.peach{background:#faf5eb;border-color:#ede3d6}
.infra-04 .panel.mint{background:#f0f7f0;border-color:#d6e8db}
.infra-04 .scene{border:1px solid #e5e8df;border-radius:13px;background:var(--white);padding:22px 24px;margin:20px 0 27px}
.infra-04 .scene .scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.infra-04 .scene .quote{font-family:Georgia,"Noto Serif CJK SC",serif;color:#355344;font-size:16px;line-height:1.54;margin-bottom:10px}
.infra-04 .scene .under{font-size:11px;line-height:1.65;color:#889588}
.infra-04 .scene .speaker{font-size:11px;text-transform:uppercase;font-weight:760;letter-spacing:.1em;color:#65937b;margin-bottom:11px}
.infra-04 .scene .scene-grid>div:not(:last-child){border-right:1px solid #e5e8df;padding-right:16px}
.infra-04 .grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:22px 0}
.infra-04 .diag-flow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.infra-04 .chip{border:1px solid #cfdfd2;background:#eef5ed;border-radius:9px;color:#2d5b4a;padding:10px 12px;font-size:12px;font-weight:690;line-height:1.4;text-align:center}
.infra-04 .chip.gray{background:#f4f5f0;border-color:#e0e4d9;color:#66796c}
.infra-04 .chip.peach{background:#faf1e4;border-color:#ecdec9;color:#8a6343}
.infra-04 .diagar{color:#93b09e;font-size:18px}
.infra-04 .branchroot{margin:0 auto 12px;border:1px solid #c5d8c8;border-radius:9px;background:#ebf5eb;max-width:280px;text-align:center;padding:13px;font-size:13px;font-weight:730;color:#2c5d4b}
.infra-04 .branchline{width:1px;height:20px;background:#9cbca7;margin:auto}
.infra-04 .branchfork{height:20px;width:53%;border-top:1px solid #9cbca7;border-left:1px solid #9cbca7;border-right:1px solid #9cbca7;margin:auto}
.infra-04 .branchcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;max-width:610px;margin:auto}
.infra-04 .branchleaf{border:1px solid #e5e0d5;background:#fcf5e9;border-radius:11px;padding:14px 13px;text-align:center;color:#776346;font-size:13px}
.infra-04 .branchleaf.blue{background:#eaf0f2;border-color:#d8e1e5;color:#567582}
.infra-04 .branchleaf span{display:block;font-size:11px;color:#9a9b8b;margin-top:4px}
.infra-04 .tagline{font-size:13px;color:#607d6c;text-align:center;margin:15px 0 0}
.infra-04 .memorypair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:13px}
.infra-04 .memorybox{border-radius:10px;padding:14px;background:#e8f2e9;border:1px solid #cfe1d1;text-align:center;font-size:12px;color:#385a48}
.infra-04 .memorybox.alt{background:#f5efe5;border-color:#e9decc;color:#7a694d}
.infra-04 .memorybox strong{display:block;margin-bottom:5px}
.infra-04 .memoryarrow{color:#8fae99;font-size:24px}
.infra-04 .tinylist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.infra-04 .tinylist div{background:#f5f7f2;border:1px solid #e3e9df;padding:12px;border-radius:9px}
.infra-04 .tinylist strong{display:block;font-size:11px}
.infra-04 .tinylist small{display:block;font-size:11px;line-height:1.6;color:#879789}
.infra-04 .twolane{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.infra-04 .lane{border-radius:12px;padding:17px 18px;background:#f0f6ee;border:1px solid #d8e7d7}
.infra-04 .lane:nth-child(2){background:#f1f5f6;border-color:#dce5e7}
.infra-04 .lane h4{font-family:Inter,sans-serif;font-size:14px;letter-spacing:0;text-transform:none}
.infra-04 .lane .blk{border:1px solid #d6e2d6;padding:11px;background:#fffdfa;border-radius:8px;font-size:12px;margin:9px 0;color:#466452}
.infra-04 .lane .lane-note{font-size:11px;color:#798e7f}
.infra-04 .bridge{display:grid;grid-template-columns:1fr;gap:6px;margin-top:13px}
.infra-04 .bridge .bridge-row{padding:10px 12px;border-radius:8px;font-size:12px;text-align:center;background:#f7f7f3;border:1px solid #e9e8df}
.infra-04 .bridge b{color:#2e5949}
.infra-04 .tablewrap{width:100%;overflow-x:auto;margin:20px 0 13px;border:1px solid #e5e8df;border-radius:12px;background:var(--white)}
.infra-04 table{border-collapse:collapse;width:100%;min-width:530px}
.infra-04 th,.infra-04 td{text-align:left;padding:13px 15px;border-bottom:1px solid #e8ebe4;font-size:12.5px;line-height:1.65;vertical-align:top}
.infra-04 th{font-size:11px;letter-spacing:.035em;background:#f2f5ed;color:#4c6d5b;font-weight:750}
.infra-04 tr:last-child td{border-bottom:0}
.infra-04 td strong{font-weight:730}
.infra-04 td:first-child{font-weight:650;color:#344c40}
.infra-04 .atlas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:24px 0}
.infra-04 .atlas-card{padding:20px;border:1px solid #dfe7dc;border-radius:12px;background:#fffefa}
.infra-04 .atlas-card:nth-child(1),.infra-04 .atlas-card:nth-child(5){background:#eff6ee}
.infra-04 .atlas-card:nth-child(4){background:#f9f3e9}
.infra-04 .atlas-card .index{font-family:Georgia,serif;color:#90aa94;font-size:16px}
.infra-04 .atlas-card h3{font-family:Georgia,"Noto Serif CJK SC","Songti SC",serif;font-size:18px;color:#2e5543;margin:5px 0 13px;line-height:1.4}
.infra-04 .atlas-card dl{margin:0}
.infra-04 .atlas-card dt{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#779183;font-weight:790;margin:9px 0 2px}
.infra-04 .atlas-card dd{margin:0;font-size:12.5px;line-height:1.62;color:#506258}
.infra-04 .atlas-card .verdict{border-top:1px solid #dce6dd;margin-top:12px;padding-top:11px;font-size:12px;color:#386451}
.infra-04 .bar-chart{padding:21px 22px;border:1px solid #e5e8df;background:var(--white);border-radius:12px;margin:22px 0}
.infra-04 .bar-chart .bar-row{display:grid;grid-template-columns:135px 1fr 65px;gap:13px;align-items:center;margin:13px 0}
.infra-04 .bar-chart .bar-label{font-size:12px;color:#4a6255}
.infra-04 .bar-chart .track{height:17px;background:#edf1eb;border-radius:5px;overflow:hidden}
.infra-04 .bar-chart .fill{height:100%;background:#91b5a2;border-radius:5px}
.infra-04 .bar-chart .fill.muted{background:#d4cab6}
.infra-04 .bar-chart .fill.strong{background:#347f65}
.infra-04 .bar-chart .val{color:#3a604c;font-weight:740;font-size:12px;text-align:right}
.infra-04 .formula{background:#f1f6ee;border-left:2px solid #98bea5;padding:12px 17px;color:#37604b;margin:20px 0;font-family:Georgia,"Noto Serif CJK SC",serif;font-size:16px}
.infra-04 .chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:20px 0}
.infra-04 .chain .cell{background:#f0f6ef;border:1px solid #d8e7d8;padding:17px 10px;border-radius:8px;font-size:11px;color:#3c6651;text-align:center;line-height:1.6}
.infra-04 .chain .cell strong{display:block;font-size:12px;margin-bottom:4px}
.infra-04 .questions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:23px 0}
.infra-04 .q-card{border-top:2px solid #afcab4;background:#fffefa;padding:17px 16px;border-radius:0 0 10px 10px}
.infra-04 .q-card .number{font-family:Georgia,serif;color:#8ca98d;font-size:20px}
.infra-04 .q-card h4{font-family:Georgia,"Noto Serif CJK SC",serif;text-transform:none;letter-spacing:0;font-size:19px;font-weight:540;margin:7px 0 9px;color:#2d5442}
.infra-04 .q-card p{font-size:12px;line-height:1.6;margin:0;color:#6c8072}
.infra-04 .footerrefs{font-size:12px;line-height:1.85;color:#647469}
.infra-04 .footerrefs li{padding-bottom:5px}
.infra-04 .lastnote{border-top:1px solid #e5e8df;padding-top:20px;margin-top:25px;font-size:12px;color:#88978d}
.infra-04 .ending{font-family:Georgia,"Noto Serif CJK SC","Songti SC",serif;font-size:22px;color:#2a5b47;line-height:1.64;border-top:1px solid #e5e8df;padding-top:29px;margin-top:29px}
@media(max-width:660px){.infra-04 .figure{padding:17px 13px}.infra-04 .scene .scene-grid,.infra-04 .atlas,.infra-04 .questions,.infra-04 .grid-two,.infra-04 .stack{grid-template-columns:1fr}.infra-04 .scene .scene-grid>div:not(:last-child){border-right:0;border-bottom:1px solid #e5e8df;padding-right:0;padding-bottom:15px}.infra-04 .steps{grid-template-columns:repeat(2,1fr)}.infra-04 .step{min-height:91px}.infra-04 .step:last-child{grid-column:1/-1}.infra-04 .bar-chart .bar-row{grid-template-columns:87px 1fr 48px;gap:8px}.infra-04 .tinylist{grid-template-columns:1fr}.infra-04 .chain{grid-template-columns:repeat(2,1fr)}.infra-04 .twolane{grid-template-columns:1fr}.infra-04 .memorypair{gap:8px}.infra-04 .panel{padding:17px}}
@media print{.infra-04 .figure,.infra-04 .panel,.infra-04 .atlas-card,.infra-04 .tablewrap{break-inside:avoid}}
/* Match notes 01-03 (e.g. ai-infra-from-zero-02): heading font,italic section numbers,warm text,lemon highlights,terra quote rule. Layout and figure colors are unchanged. */
.infra-04{--ink:#2A241B;--body:#2A241B;--muted:#6E6556;--green:#2A241B}
.infra-04 sup.ref a{text-decoration:none}