.engine-port-labels{letter-spacing:0}
.engine-core-label{min-width:170px}
.before-after-card{border:1px solid var(--line);border-radius:8px;padding:var(--space-5);background:var(--paper);position:relative}
.ba-label{font-size:var(--text-xs);letter-spacing:.1em;color:var(--muted)}
.before-after-card h4{font:500 var(--text-base)/1.5 var(--font-body);margin:var(--space-3) 0 var(--space-4)}
.before-after-card>p{font-size:var(--text-sm);line-height:1.7;color:var(--muted);margin-bottom:var(--space-4)}
.before-after-card>small{display:block;font-size:var(--text-xs);line-height:1.7;color:var(--muted)}
.before-after-arrow{font-size:var(--text-lg);color:var(--gold-text);text-align:center;padding-block:var(--space-3)}
.ba-after{background:#151a23;color:#f5f7fa;border-color:#46505e}
.ba-after .ba-label{color:#d5bd7c}
.ba-after>small{color:#c0c8d4}
.ba-step{display:flex;align-items:start;gap:var(--space-3);padding-block:var(--space-3);border-top:1px solid #46505e}
.ba-step>span{font-size:var(--text-xs);display:grid;place-items:center;width:22px;height:22px;border:1px solid #697484;flex-shrink:0;color:#d5bd7c}
.ba-step>p{font-size:var(--text-sm);line-height:1.7;margin:0;color:#f5f7fa}
.ba-output{padding:var(--space-4);border-left:2px solid #d5bd7c;background:#202733;margin:var(--space-4) 0}
.ba-output strong{font-size:var(--text-xs);color:#d5bd7c;font-weight:500}
.ba-output p{font-size:var(--text-sm);line-height:1.7;color:#f5f7fa;margin-top:var(--space-2);margin-bottom:0}
.architecture-intro>p:last-child{max-width:650px}
.layer-code{letter-spacing:.04em}.layer-name{font-size:1.4rem}
@media(max-width:360px){.engine-port-labels>span>span{font-size:var(--text-xs);letter-spacing:-.03em}.before-after-card{padding:var(--space-4)}}