/* Progressive, static-first architecture map. Markup: tools/render_transformer_foundation_map.py. */
.tr-series .tr-article.reveal { opacity: 1; transform: none; }
.tf-map, .tf-family-figure {
  --tf-green: #176348; --tf-green-soft: #edf5ef;
  --tf-blue: var(--tr-blue, #426da8); --tf-blue-soft: var(--tr-blue-soft, #edf2fa);
  --tf-warm: var(--tr-warm, #a55b28); --tf-warm-soft: var(--tr-warm-soft, #fbf0e4);
  --tf-path: #93a399;
  margin: 2rem 0; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); scroll-margin-top: 6rem;
}
.tf-map [hidden] { display: none !important; }
.tf-map > figcaption { padding: 1.4rem 1.5rem 1rem; }
.tf-map-kicker { display: block; color: var(--tf-green); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tf-map-title { display: block; margin-top: .4rem; font: 700 1.25rem/1.4 'Syne', sans-serif; }
.tf-map .tf-map-description { margin: .6rem 0 0; color: var(--ink-muted); font-size: .85rem; line-height: 1.7; }
.tf-map-overview { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap: .6rem; align-items: center; padding: 0 1.5rem 1.25rem; }
.tf-map-overview .tf-map-node { min-width: 0; overflow-wrap: anywhere; }
.tf-map-overview > span, .tf-stack-head > span { color: var(--tf-path); }
.tf-map a.tf-map-node { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .6rem .5rem; min-height: 52px; border: 1px solid var(--line); border-radius: 7px; background: #f5f6f2; color: var(--ink); text-decoration: none; text-align: center; line-height: 1.5; transition: background .2s, border-color .2s, box-shadow .2s; }
.tf-map-node strong { font-size: .83rem; }
.tf-map-node small { font-size: .7rem; color: var(--ink-muted); }
.tf-map a.tf-embed, .tf-map a.tf-block { border-color: #b8d2c2; background: var(--tf-green-soft); }
.tf-map a.tf-attention { border-color: #b8cce5; background: var(--tf-blue-soft); }
.tf-map a.tf-mlp, .tf-map a.tf-predict { border-color: #e1c9af; background: var(--tf-warm-soft); }
.tf-map a.tf-map-node:hover { border-color: var(--tf-green); box-shadow: 0 2px 8px #17634818; }
.tf-map a.tf-map-node.is-current { border: 2px solid var(--tf-green); box-shadow: 0 0 0 2px #17634812; }
.tf-map a.tf-map-node.is-current::before { content: ''; position: absolute; top: .35rem; right: .35rem; width: 5px; height: 5px; border-radius: 50%; background: var(--tf-green); }
.tf-map :focus-visible { outline: 3px solid var(--tf-green); outline-offset: 3px; }
.tf-map-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); background: #f7f8f4; padding: .4rem; gap: .25rem; }
.tf-map button { font: 700 .79rem/1.4 'Manrope', sans-serif; color: var(--ink-muted); cursor: pointer; }
.tf-map-controls button { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem .3rem; min-height: 44px; border: 1px solid transparent; border-radius: 6px; background: transparent; }
.tf-map-controls button span { font-size: .65rem; opacity: .7; }
.tf-map-controls button[aria-pressed="true"] { background: var(--card); color: var(--tf-green); border-color: #b8d2c2; box-shadow: 0 1px 3px #13201a08; }
.tf-map-controls button:hover { color: var(--tf-green); background: var(--card); }
.tf-map-panels { position: relative; }
.tf-map.is-enhanced .tf-map-panels { transition: height 280ms cubic-bezier(.22,.7,.25,1); overflow: hidden; }
.tf-map-panel { padding: 1.5rem; border-top: 1px solid var(--line); }
.tf-map.is-enhanced .tf-map-panel { border-top: 0; }
.tf-map.is-enhanced .tf-map-panel.is-entering { animation: tf-panel-enter 280ms ease both; }
@keyframes tf-panel-enter { from { opacity: .3; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.tf-map-panel-heading > strong { display: block; margin-top: .4rem; font: 700 1.08rem/1.5 'Syne', sans-serif; }
.tf-map .tf-map-panel-heading p { margin: .6rem 0 1.5rem; font-size: .87rem; line-height: 1.8; }
.tf-map .tf-map-bridge { margin: 1.35rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .84rem; line-height: 1.8; }
.tf-map-bridge strong { color: var(--tf-green); }
.tf-map .tf-map-caption { margin: 1rem 0 0; font-size: .76rem; line-height: 1.8; color: var(--ink-muted); }
.tf-model-flow { display: grid; grid-template-columns: 1fr auto 1.3fr auto .8fr; align-items: center; gap: .7rem; padding: 1.5rem 0; }
.tf-model-input, .tf-model-output { text-align: center; }
.tf-model-flow small { display: block; margin-top: .6rem; color: var(--ink-muted); font-size: .69rem; line-height: 1.5; }
.tf-tokens { display: flex; justify-content: center; gap: .35rem; }
.tf-tokens span, .tf-token-next { padding: .4rem .55rem; border: 1px solid #b8d2c2; border-radius: 5px; background: var(--tf-green-soft); font: 700 .9rem/1.5 ui-monospace, monospace; }
.tf-token-next { display: inline-block; color: var(--tf-warm); background: var(--tf-warm-soft); border-color: #e1c9af; }
.tf-model-box { padding: 1.6rem .7rem; border: 1.5px solid var(--tf-green); border-radius: 10px; text-align: center; background: var(--tf-green-soft); }
.tf-model-box > strong { font: 700 1.1rem 'Syne',sans-serif; }
.tf-flow-arrow { color: var(--tf-path); font-size: 1.15rem; }
.tf-stack-flow { max-width: 500px; margin: auto; }
.tf-stack-input { max-width: 280px; margin: auto; text-align: center; }
.tf-map .tf-position-link { display: block; margin: .35rem 0 0; color: var(--tf-green); font-size: .73rem; }
.tf-down { display: block; text-align: center; color: var(--tf-path); font-size: 1.1rem; line-height: 1.7; }
.tf-stack-tower { border: 1px dashed #8fb59e; border-radius: 10px; padding: .9rem; max-width: 350px; margin: auto; background: #f8fbf7; }
.tf-stack-label { display: block; text-align: center; margin-bottom: .75rem; color: var(--tf-green); font-size: .71rem; font-weight: 700; }
.tf-stack-ellipsis { display: block; text-align: center; color: var(--tf-path); line-height: 1.7; }
.tf-stack-head { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .4rem; }
.tf-stack-head .tf-map-node { align-self: stretch; }
.tf-map-stages { max-width: 650px; margin: auto; }
.tf-map-stage { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); column-gap: 1.5rem; }
.tf-map-stage-note { padding-top: 4.3rem; }
.tf-map-stage + .tf-map-stage .tf-map-stage-note { padding-top: 2rem; }
.tf-stage-number { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tf-blue-soft); color: var(--tf-blue); font-size: .73rem; font-weight: 800; margin-bottom: .55rem; }
.tf-map-stage:nth-child(2) .tf-stage-number { background: var(--tf-warm-soft); color: var(--tf-warm); }
.tf-map-stage-note > strong { font-size: .85rem; }
.tf-map .tf-map-stage-note p { margin: .45rem 0; font-size: .78rem; line-height: 1.8; color: var(--ink-muted); }
.tf-map-stage-flow { min-width: 0; }
.tf-map-state { position: relative; margin-left: 2.1rem; text-align: center; padding: .55rem .3rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); z-index: 1; }
.tf-map-state strong { display: block; font-size: .8rem; }
.tf-map-state small { font-size: .65rem; color: var(--ink-muted); }
.tf-map-state-u { background: var(--tf-blue-soft); }
.tf-map-branch { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .85rem; padding: 1rem 0 .6rem 2.1rem; }
.tf-map-branch::before { content: ''; position: absolute; top: 0; bottom: 1.5rem; left: .45rem; width: calc(50% + .6rem); border: 1.5px solid var(--tf-path); border-right: 0; border-radius: 9px 0 0 9px; }
.tf-map-branch::after { content: ''; position: absolute; left: calc(50% + 1.05rem); top: 0; bottom: 0; border-left: 1.5px solid var(--tf-path); }
.tf-map-skip { position: absolute; left: .45rem; top: 48%; transform: translate(-50%,-50%) rotate(-90deg); background: var(--card); padding: 0 .4rem; color: var(--ink-muted); font-size: .68rem; white-space: nowrap; z-index: 1; }
.tf-map-branch > .tf-map-node, .tf-map-add { position: relative; z-index: 1; }
.tf-map-branch > .tf-map-node::after { content: '↓'; position: absolute; left: calc(50% - .3rem); bottom: -.84rem; font-size: .8rem; line-height: .85rem; color: var(--tf-path); }
.tf-map a.tf-map-dropout { min-height: 40px; padding: .3rem; border-style: dashed; background: var(--card); }
.tf-map-dropout strong { font-size: .71rem; }
.tf-map-dropout small { font-size: .65rem; }
.tf-map-add { align-self: center; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--tf-path); border-radius: 50%; background: var(--card); font: 500 1.3rem/1 sans-serif; }
.tf-map-add::before { content: '→'; position: absolute; left: -.8rem; font-size: .9rem; color: var(--tf-path); }
.tf-map .tf-block-handoff { margin: .5rem 0 0; text-align: center; font-size: .79rem; color: var(--tf-green); font-weight: 700; }
.tf-block-handoff > span { display: block; font-size: 1rem; }
.tf-attention-flow { max-width: 420px; margin: auto; }
.tf-attention-flow > .tf-map-state { margin: 0 2rem; }
.tf-head-detail { border: 1px solid #b8cce5; border-radius: 10px; padding: .75rem; background: #f8fafd; }
.tf-qkv { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding-top: .8rem; text-align: center; }
.tf-qkv > span { border: 1px solid #c9d7e9; border-radius: 6px; padding: .5rem .2rem; background: var(--card); }
.tf-qkv strong { display: block; color: var(--tf-blue); font: 700 1rem ui-monospace,monospace; }
.tf-qkv small { display: block; font-size: .63rem; line-height: 1.6; }
.tf-head-operation { padding: .5rem; text-align: center; font-size: .8rem; font-weight: 700; }
.tf-head-operation small { display: block; font-size: .72rem; font-weight: 400; margin-top: .35rem; color: var(--ink-muted); }
.tf-map-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1.5rem; border-top: 1px solid var(--line); }
.tf-map-footer button { border: 1px solid var(--line); border-radius: 6px; padding: .6rem .8rem; min-height: 44px; background: var(--card); }
.tf-map-footer button[data-map-next] { color: var(--tf-green); border-color: #b8d2c2; }
.tf-map-footer button:disabled { opacity: .4; cursor: default; }
.tf-map-progress { font-size: .72rem; color: var(--ink-muted); }
.tf-map .tf-map-reference { margin: 0; padding: .9rem 1.5rem; background: #f7f8f4; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; font-size: .72rem; line-height: 1.8; color: var(--ink-muted); }
.tf-map-reference a { color: var(--tf-green); }
.tr-article .tf-chapter-location { margin: 1.1rem 0 1.6rem; color: var(--ink-muted); font-size: .8rem; line-height: 1.8; scroll-margin-top: 9rem; }
.tf-chapter-location a { display: inline-block; color: var(--brand); }
@media (max-width: 650px) {
  .tf-map > figcaption, .tf-map-panel { padding: 1.1rem; }
  .tf-map-title { font-size: 1.1rem; }
  .tf-map-overview { gap: .25rem; padding: 0 1.1rem 1rem; }
  .tf-map-overview .tf-map-node { min-height: 70px; padding: .45rem .25rem; }
  .tf-map-overview .tf-map-node strong { font-size: .7rem; }
  .tf-map-overview .tf-map-node small { font-size: .6rem; }
  .tf-map-controls button { flex-direction: column; gap: .2rem; font-size: .7rem; }
  .tf-model-flow { grid-template-columns: 1fr; padding: .5rem 0; gap: .4rem; justify-items: center; }
  .tf-flow-arrow { transform: rotate(90deg); }
  .tf-model-box { min-width: 200px; padding: 1rem; }
  .tf-map-stage { grid-template-columns: 1fr; }
  .tf-map-stage-note, .tf-map-stage + .tf-map-stage .tf-map-stage-note { padding: 0 0 .65rem; }
  .tf-map-stage + .tf-map-stage .tf-map-stage-note { margin-top: 1.3rem; }
  .tf-stage-number { display: inline-grid; margin: 0 .4rem 0 0; }
  .tf-map-stage-flow { width: 100%; max-width: 380px; margin: auto; }
  .tf-map-stage-note p { margin-bottom: 0; }
  .tf-stack-head { grid-template-columns: 1fr; justify-items: stretch; max-width: 280px; margin: auto; }
  .tf-stack-head > span { text-align: center; transform: rotate(90deg); }
  .tf-map-footer { padding: .75rem 1rem; flex-wrap: wrap; }
  .tf-map-footer button { font-size: .72rem; padding: .5rem; }
  .tf-map .tf-map-reference { padding: .85rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tf-map *, .tf-map *::before, .tf-map *::after { transition: none !important; animation: none !important; }
}
@media print {
  .tf-map-controls, .tf-map-footer { display: none !important; }
  .tf-map .tf-map-panels { height: auto !important; overflow: visible !important; }
  .tf-map .tf-map-panel[hidden] { display: block !important; }
  .tf-map-panel { break-inside: avoid; }
}
/* Architecture families use the same component colors as the progressive map. */
.tf-map-controls { scroll-margin-top: 5rem; }
.tf-family-figure > figcaption { padding: 1.4rem 1.5rem 0; }
.tf-family-figure > figcaption > strong { display: block; margin-top: .4rem; font: 700 1.15rem/1.5 'Syne',sans-serif; }
.tf-family-figure > figcaption p, .tf-family-figure .tf-family-bridge { font-size: .85rem; line-height: 1.8; }
.tf-family-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.4rem; padding: 1rem 1.5rem; }
.tf-family-card, .tf-seq2seq { min-width: 0; }
.tf-family-figure h3 { margin: 0 !important; font: 700 .9rem/1.6 'Syne',sans-serif; }
.tf-family-card > p, .tf-seq2seq > p { margin: .2rem 0 1rem; color: var(--ink-muted); font-size: .76rem; }
.tf-family-node { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; padding: .65rem .45rem; background: #f5f6f2; text-align: center; font-size: .78rem; line-height: 1.6; }
.tf-family-figure a.tf-family-node { color: var(--ink); text-decoration: none; }
.tf-family-figure a.tf-family-node:hover { border-color: var(--tf-green); }
.tf-family-figure a:focus-visible { outline: 3px solid var(--tf-green); outline-offset: 3px; }
.tf-family-node small, .tf-family-result small { display: block; font-size: .65rem; line-height: 1.6; color: var(--ink-muted); }
.tf-family-node.tf-attention { background: var(--tf-blue-soft); border-color: #b8cce5; }
.tf-family-node.tf-mlp { background: var(--tf-warm-soft); border-color: #e1c9af; }
.tf-family-tokens { display: flex; align-items: center; justify-content: center; min-height: 62px; border-radius: 6px; padding: .5rem; background: var(--tf-green-soft); color: var(--tf-green); font: 700 .78rem/1.8 ui-monospace,monospace; text-align: center; }
.tf-family-stack { border: 1px dashed #8fb59e; padding: .7rem; border-radius: 8px; background: #f8fbf7; }
.tf-family-stack > small { display: block; text-align: center; color: var(--ink-muted); font-size: .65rem; margin-top: .4rem; }
.tf-family-result { padding: .55rem .25rem; font-size: .77rem; line-height: 1.6; text-align: center; }
.tf-family-figure .tf-family-bridge { margin: .5rem 1.5rem 1.5rem; padding-block: 1rem; border-block: 1px solid var(--line); }
.tf-seq2seq { padding: 0 1.5rem; }
.tf-seq-grid { display: grid; grid-template-columns: minmax(0,1fr) 65px minmax(0,1fr); grid-template-rows: auto auto auto auto auto 1fr 1fr 1fr auto auto auto auto auto auto; align-items: stretch; }
.tf-seq-grid > .tf-source { grid-column: 1; }
.tf-seq-grid > .tf-target { grid-column: 3; position: relative; z-index: 1; }
.tf-seq-grid > .tf-down { align-self: center; }
.tf-seq-grid .tf-down small { display: block; color: var(--tf-blue); font: 400 .65rem/1.5 'Manrope',sans-serif; }
.tf-cross-link { grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--tf-blue); }
.tf-cross-link small { font: 700 .7rem ui-monospace,monospace; }
.tf-cross-link > span { font-size: 1.8rem; line-height: 1; }
.tf-decoder-outline { grid-column: 3; grid-row: 5 / 13; border: 1px dashed #8fb59e; border-radius: 8px; margin: -6px; position: relative; }
.tf-family-figure .tf-family-caption { padding: 1rem 1.5rem; margin: 1rem 0 0; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: .72rem; line-height: 1.8; }
@media (max-width:650px) {
  .tf-family-pair { grid-template-columns: 1fr; gap: 1.6rem; }
  .tf-family-figure > figcaption, .tf-family-pair, .tf-seq2seq { padding-inline: 1rem; }
  .tf-family-figure .tf-family-bridge { margin-inline: 1rem; }
  .tf-seq-grid { grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr); }
  .tf-seq-grid .tf-family-node { font-size: .68rem; padding: .45rem .3rem; }
  .tf-seq-grid .tf-family-tokens { font-size: .67rem; }
  .tf-seq-grid .tf-family-stack { padding: .4rem; }
  .tf-seq-grid .tf-stack-label { font-size: .63rem; }
}
.tf-head-calculation { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); column-gap: .5rem; }
.tf-score-path { min-width: 0; }
.tf-value-path { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--tf-blue); }
.tf-value-path::before { content: ''; position: absolute; top: 0; bottom: 1rem; left: 50%; border-left: 1.5px solid #b8cce5; }
.tf-value-path > span:first-child { position: relative; background: #f8fafd; padding: .4rem 0; font-size: .68rem; text-align: center; }
.tf-value-path > .tf-down { position: absolute; bottom: 0; }
.tf-weighted-values { grid-column: 1 / -1; border: 1px solid #b8cce5; border-radius: 6px; background: var(--tf-blue-soft); }
@media (max-width:650px) {
  .tf-map, .tf-family-figure, .tf-map-controls { scroll-margin-top: 9rem; }
}