.arch-controls { display:flex; flex-wrap:wrap; gap:1rem 2rem; margin:1rem 0; }
.arch-controls label { flex:1 1 180px; }
.arch-controls input, .arch-controls select { display:block; width:100%; max-width:300px; margin-top:.5rem; }
.arch-controls select { padding:.4rem; font:inherit; }
.arch-controls output { display:inline-block; min-width:3rem; font-variant-numeric:tabular-nums; }
#norm-values td { font-variant-numeric:tabular-nums; }
.hd-body a { overflow-wrap:anywhere; }
.arch-flow { margin:1.5rem 0; overflow-x:auto; }
.arch-flow svg { display:block; width:100%; min-width:650px; height:auto; font-family:sans-serif; }
.arch-flow figcaption { font-size:.9rem; color:#526577; margin-top:.5rem; }
@media(max-width:900px) { .hd-toc ol ol { column-count:1; } }
@media(max-width:480px) { .hd-toc > ol { column-count:1; } }
@media print { .arch-flow svg { min-width:0; } .hd-body pre { white-space:pre-wrap; overflow-wrap:anywhere; } [data-toggle-answers] { display:none; } }
/* Contain math accessibility layers and wide tables on narrow viewports. */
.tbl-scroll, .hd-body .katex-display { position:relative; }

/* Credited slide crops used in Handout 13. */
.arch-slide img { display:block; width:100%; height:auto; }
.arch-norm img { max-width:520px; margin:0 auto; }
.arch-cost img { min-width:540px; max-width:720px; margin:0 auto; }
@media print {
    .arch-slide { break-inside:avoid; }
    .arch-norm img { max-width:390px; }
    .arch-cost img { min-width:0; }
}

.arch-scroll-hint { display:none; font-size:.85em; color:var(--muted); }
@media screen and (max-width:620px) { .arch-scroll-hint { display:block; } }

/* Slide crops in Handout 14 complement the original dependency diagram. */
.arch-activation img { max-width:640px; margin:0 auto; }
.arch-tying img { max-width:520px; margin:0 auto; }
@media print {
    .arch-activation img { max-width:420px; }
    .arch-tying img { max-width:390px; }
}

.arch-aspect img { max-width:700px; margin:0 auto; }
@media print { .arch-aspect img { max-width:520px; } }

/* Theory titles identify the optional material after answers expand for print. */
@media print {
    details.ans[id^="theory-"] > summary, details.ans#bonus-gelu > summary { display:block; }
    details.ans[id^="theory-"] > summary::before, details.ans#bonus-gelu > summary::before { display:none; }
}