/* Hand-built figures for lesson 7, The transformer block. */

/* shared: two columns that stack on a phone, planes, handles, arrows, small text */
.tf-two { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .tf-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tf-plane { width: 100%; max-width: 360px; margin: 0 auto; touch-action: none; display: block; }
.tf-grid { stroke: var(--line); }
.tf-axis { stroke: var(--ink-3); stroke-width: 1.2; }
.tf-tick { font: 12px var(--f-mono); fill: var(--ink-3); }
.tf-tick.mu { fill: var(--ink); font-weight: 600; }
.tf-tick.relu { fill: var(--ink-3); } .tf-tick.gelu { fill: var(--accent-ink); font-weight: 600; }
.tf-vec { stroke-width: 3.5; stroke-linecap: round; }
.tf-head { stroke: none; }
.tf-vec.in, .tf-head.in { stroke: var(--ink-3); fill: var(--ink-3); }
.tf-vec.attn, .tf-head.attn { stroke: var(--gold); fill: var(--gold); }
.tf-vec.ffn, .tf-head.ffn { stroke: var(--accent); fill: var(--accent); }
.tf-vec.row, .tf-head.row { stroke: var(--ink-3); fill: var(--ink-3); stroke-width: 2.5; }
.tf-vec.best, .tf-head.best { stroke: var(--good); fill: var(--good); }
.tf-lbl { font: italic 600 15px var(--f-body); fill: var(--ink-2); }
.tf-lbl.in { fill: var(--gold); } .tf-lbl.out { fill: var(--ink); } .tf-lbl.row { font-style: normal; font: 12px var(--f-mono); fill: var(--ink-2); }
.tf-handle { fill: var(--ink); fill-opacity: 0.12; stroke: var(--ink-2); stroke-width: 1.5; cursor: grab; }
.tf-handle:focus-visible { outline: none; stroke: var(--gold); stroke-width: 3; }
.tf-side .kicker { margin-bottom: 10px; }
.tf-work { font: 0.92rem/1.6 var(--f-mono); color: var(--ink-2); margin: 0 0 8px; overflow-wrap: anywhere; }
.tf-work.best b { color: var(--good); }
.tf-big { font: 400 2rem/1.1 var(--f-display); margin: 8px 0; }
.tf-check { display: flex; gap: 8px; align-items: flex-start; font-size: 0.85rem; color: var(--ink-2); margin: 8px 0; }
.tf-check input { margin-top: 3px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }
.sw.attn { background: var(--gold); } .sw.ffn { background: var(--accent); }
.sw.c1 { background: var(--c1); } .sw.c2 { background: var(--c2); } .sw.c3 { background: var(--c3); } .sw.c7 { background: var(--c7); }

/* hero */
.ht { width: 100%; height: auto; display: block; margin: 0 auto; max-width: 900px; }
.ht-highway { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; opacity: 0.85; }
.ht-branch { fill: none; stroke-width: 2; stroke-dasharray: 5 5; }
.ht-branch.attn { stroke: var(--gold); } .ht-branch.ffn { stroke: var(--accent); }
.ht-box { fill: var(--surface); stroke-width: 1.5; }
.ht-box.attn { stroke: var(--gold); } .ht-box.ffn { stroke: var(--accent); }
.ht-lbl { font: 500 20px var(--f-ui); fill: var(--ink-2); }
.ht-plus { fill: var(--bg); stroke: var(--ink); stroke-width: 2; }
.ht-plus-lbl { font: 600 15px var(--f-ui); fill: var(--ink); }
.ht-pulse { fill: var(--gold); }

/* 1: the residual edit */
.re-out { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.7; }

/* 2: layer norm */
.nc-scroll { overflow-x: auto; }
.nc-hint { display: none; font-size: 0.8rem; margin: 0 0 6px; }
@media (max-width: 600px) { .nc-hint { display: block; } }
.nc-line { width: 100%; min-width: 540px; height: auto; touch-action: none; display: block; }
.nc-band { fill: var(--accent-soft); }
.nc-mean { stroke: var(--ink-2); stroke-dasharray: 5 4; }
.nc-dot { stroke: var(--bg-2); stroke-width: 2; cursor: grab; }
.nc-dot.out { cursor: default; }
.nc-dot.c0 { fill: var(--c1); } .nc-dot.c1 { fill: var(--c2); } .nc-dot.c2 { fill: var(--c3); } .nc-dot.c3 { fill: var(--c4); }
.nc-dot:focus-visible { outline: none; stroke: var(--gold); stroke-width: 3; }
.nc-read { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.9rem; margin: 8px 0 0; color: var(--ink-2); }
.nc-read b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* 3: the feed-forward network */
.fd-curve { width: 100%; max-width: 360px; height: auto; display: block; }
.fd-relu { fill: none; stroke: var(--ink-3); stroke-width: 2; }
.fd-gelu { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.fd-pt { fill: var(--gold); }
.fd-read, .fd-params { font-size: 0.88rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fd-read b, .fd-params b { color: var(--ink); }
.fd-shapes { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 14px; }
.fd-box { display: flex; align-items: center; gap: 10px; font: 0.82rem var(--f-mono); color: var(--ink-2); }
.fd-box span { min-width: 64px; }
.fd-box i { display: block; height: 14px; border-radius: 4px; width: calc(12% + var(--n) * 88%); background: var(--ink-3); transition: width 0.2s; }
.fd-box.wide i { background: var(--accent); } .fd-box.g i { background: var(--gold); } .fd-box.in i, .fd-box.out i { background: var(--ink-3); }
.fd-op { font: 0.78rem var(--f-ui); color: var(--ink-3); padding-left: 74px; }
.ffn-desk .slider, .fd-read { margin-top: 8px; }

/* 4: a tiny GPT */
.tg-ctl { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.85rem; margin-bottom: 14px; }
.tg-pipe { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.tg-stage { padding: 10px 12px; border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.tg-stage.block { border-color: var(--accent); } .tg-stage.logits { border-color: var(--gold); }
.tg-shape { font: 600 1.15rem var(--f-mono); color: var(--ink); }
.tg-name { font-size: 0.78rem; color: var(--ink-2); line-height: 1.35; }
.tg-params { font-size: 0.88rem; color: var(--ink-2); margin: 12px 0 18px; }
.tg-params b { color: var(--ink); }
.tg-score { padding-top: 16px; border-top: 1px solid var(--line); }

/* 5: three families */
.mf-ctl { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 0.85rem; margin-bottom: 14px; }
.mf-wrap { overflow-x: auto; }
.mf-grid { display: grid; gap: 4px; align-items: center; justify-content: start; }
.mf-corner { width: 34px; }
.mf-col, .mf-row { font: 0.85rem var(--f-mono); color: var(--ink-2); text-align: center; }
.mf-col { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 5px 0; cursor: pointer; }
.mf-col.on { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.mf-row { padding-right: 8px; text-align: right; }
.mf-row.hit { color: var(--gold); font-weight: 600; }
.mf-cell { aspect-ratio: 1; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); min-width: 22px; }
.mf-cell.ok { background: var(--accent); border-color: var(--accent); opacity: 0.85; }
.mf-cell.ok.diag { opacity: 1; }
.mf-cell.via { box-shadow: inset 0 0 0 3px var(--gold); }
.mf-read { font-size: 0.9rem; color: var(--ink-2); margin: 14px 0 0; }
.mf-read b { color: var(--ink); }

/* 6: counting parameters */
.pc-preset { display: inline-flex; align-items: center; gap: 8px; }
.pc-preset .seg { display: inline-flex; }
.pc-ctl { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 0.85rem; margin-bottom: 16px; }
.pc-bar { display: flex; height: 34px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.pc-bar i { display: block; height: 100%; transition: width 0.25s; }
.pc-bar .c1 { background: var(--c1); } .pc-bar .c2 { background: var(--c2); } .pc-bar .c3 { background: var(--c3); } .pc-bar .c7 { background: var(--c7); }
.pc-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0; font-size: 0.85rem; color: var(--ink-2); }
.pc-legend b { color: var(--ink); }
.pc-read { font-size: 0.9rem; color: var(--ink-2); margin: 8px 0 0; }
.pc-read b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* 7: mixture of experts */
.mr .slider { font-size: 0.85rem; margin: 6px 0; }
.mr .seg { margin-top: 10px; }
.mr-exp { display: grid; grid-template-columns: 76px 1fr 64px; gap: 10px; align-items: center; margin: 8px 0; font-size: 0.85rem; color: var(--ink-3); }
.mr-exp.on { color: var(--ink); }
.mr-gate { height: 20px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.mr-gate i { display: block; height: 100%; background: var(--gold); transition: width 0.2s; }
.mr-exp b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.mr-exp:not(.on) b { font-weight: 400; font-size: 0.8rem; }
.mr-work { font: 0.82rem/1.6 var(--f-mono); color: var(--ink-2); margin: 10px 0 0; overflow-wrap: anywhere; }
.mr-count { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.mr-ctl { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.85rem; margin-bottom: 10px; }
.mr-bar { display: grid; grid-template-columns: 1fr; gap: 5px; margin: 10px 0; font-size: 0.85rem; color: var(--ink-2); }
.mr-bar i { display: block; height: 18px; border-radius: 6px; background: var(--ink-3); transition: width 0.25s; min-width: 4px; }
.mr-bar.hi i { background: var(--gold); }
.mr-bar b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* 8: compute arithmetic */
.fe-ctl { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 0.85rem; margin-bottom: 16px; }
.fe-ctl .slider b { min-width: 7ch; }
.fe-out { display: grid; gap: 12px; }
.fe-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 12px 14px; border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--line); }
.fe-stat .n { font: 400 1.7rem/1.1 var(--f-display); color: var(--ink); white-space: nowrap; }
.fe-stat .l { font-size: 0.85rem; color: var(--ink-2); }
.fe-stat.hi { border-color: var(--gold); } .fe-stat.hi .n { color: var(--gold); }
.fe-split { display: flex; gap: 4px; height: 26px; }
.fe-split i { display: flex; align-items: center; justify-content: center; border-radius: 6px; font: 0.78rem var(--f-ui); color: var(--bg); overflow: hidden; }
.fe-split .fwd { background: var(--accent); } .fe-split .bwd { background: var(--gold); }
.fe-split span { white-space: nowrap; padding: 0 6px; }