.transformer-lesson{--transformer-blue:#6fd3ff;--transformer-violet:#bd91ff;--transformer-orange:#ffae64;background:radial-gradient(circle at 76% 18%,#bd91ff14,#0000 28%),radial-gradient(circle at 16% 78%,#6fd3ff12,#0000 27%),#030604}.transformer-calibrate-workspace,.transformer-shard-workspace,.transformer-overlap-workspace{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:16px;display:grid}.transformer-code{align-content:center;min-height:176px}.transformer-code .lesson-code-line code{font-size:clamp(8px,.88vw,11px)}.fp8-code-panel,.overlap-code-panel{align-content:start;display:grid}.transformer-options{align-content:start;gap:7px;display:grid}.fp8-options,.overlap-options{padding:0 18px 18px}.transformer-options>span{color:#69756c;font-family:var(--font-geist-mono),monospace;letter-spacing:.12em;margin-bottom:2px;font-size:7px}.transformer-options button{color:#758178;cursor:pointer;text-align:left;background:#050806db;border:1px solid #29332b;align-content:center;justify-items:start;gap:6px;min-height:78px;padding:12px 14px;display:grid}.transformer-options button strong{color:#b7c1b8;font-family:var(--font-geist-mono),monospace;letter-spacing:.04em;font-size:8px;font-weight:500}.transformer-options button small{color:#6c786f;font-size:9px;line-height:1.45}.transformer-options button i{color:#4f5a52;font-family:var(--font-geist-mono),monospace;letter-spacing:.06em;font-size:6px;font-style:normal}.transformer-options button.is-selected{border-color:var(--green);background:#9dff3a0e}.transformer-options button.is-selected strong,.transformer-options button.is-selected i{color:var(--green)}.transformer-options button:disabled{cursor:not-allowed;opacity:.64}.fp8-lab-panel,.overlap-lab-panel{padding-bottom:18px}.precision-range{background:#050806;border:1px solid #2b352d;gap:20px;margin:20px 18px 16px;padding:18px;display:grid}.fp8-row{gap:9px;display:grid}.fp8-row header{font-family:var(--font-geist-mono),monospace;justify-content:space-between;gap:12px;display:flex}.fp8-row header span{color:#68746b;font-size:7px}.fp8-row header strong{color:var(--transformer-violet);font-size:8px;font-weight:500}.fp8-bars{border-bottom:1px solid #303a32;grid-template-columns:repeat(12,1fr);align-items:end;gap:5px;height:92px;display:grid}.fp8-bars i{height:var(--value);opacity:.18;transform-origin:bottom;background:#bd91ff17;border:1px solid #bd91ff52;transition:opacity .12s,transform .12s,background .12s;transform:scaleY(.4)}.fp8-bars i.is-visible{opacity:1;transform:scaleY(1)}.fp8-bars i.is-clipped{background:repeating-linear-gradient(135deg,#ff867640,#ff867640 3px,#0000 3px 6px);border-color:#ff8676}.fp8-bars i.is-drifting{border-color:var(--transformer-orange);background:#ffae642e}.precision-range--scaled .fp8-row:first-child .fp8-bars i{background:#6fd3ff21;border-color:#6fd3ff80}.precision-range--scaled .fp8-row:nth-child(2) .fp8-bars i{background:#bd91ff21;border-color:#bd91ff80}.fp8-scale-line{grid-template-columns:auto 1fr auto;align-items:center;gap:10px;display:grid}.fp8-scale-line span,.fp8-scale-line strong{color:#5e6a61;font-family:var(--font-geist-mono),monospace;font-size:6px}.fp8-scale-line strong{color:var(--transformer-orange);font-weight:500}.fp8-scale-line i{background:linear-gradient(90deg,var(--transformer-orange),transparent);height:1px}.precision-range--scaled .fp8-scale-line strong{color:var(--green)}.precision-range--scaled .fp8-scale-line i{background:linear-gradient(90deg,var(--green),transparent)}.transformer-run-state{font-family:var(--font-geist-mono),monospace;background:#050806;border:1px solid #283229;justify-content:space-between;align-items:center;gap:12px;margin:0 18px;padding:12px 14px;display:flex}.transformer-run-state span,.transformer-run-state strong{letter-spacing:.08em;font-size:7px}.transformer-run-state span{color:#68746b}.transformer-run-state strong{color:var(--green);font-weight:500}.transformer-run-state--running,.transformer-run-state--done{border-color:#9dff3a6b}.transformer-feedback{background:#050806;border:1px solid #29332b;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;margin-top:15px;padding:15px 17px;display:grid}.transformer-feedback p{color:#ffb668;margin:0;font-size:11px;line-height:1.58}.transformer-feedback p.is-correct{color:var(--green)}.transformer-feedback small{color:#59655b;margin-top:6px;font-size:9px;line-height:1.5;display:block}.transformer-shard-workspace{grid-template-columns:minmax(280px,.68fr) minmax(0,1.32fr)}.shard-options button{min-height:104px}.shard-panel{min-height:380px}.shard-diagram{padding:20px}.shard-ranks{grid-template-columns:repeat(4,1fr);gap:7px;display:grid}.shard-rank{background:#050806;border:1px solid #2d3830;grid-template-rows:auto auto 1fr auto;gap:9px;min-width:0;min-height:240px;padding:12px;display:grid}.shard-rank>span,.shard-rank>strong,.shard-rank>small{font-family:var(--font-geist-mono),monospace}.shard-rank>span{color:var(--green);letter-spacing:.09em;font-size:6px}.shard-rank>strong{color:#a9b4ab;font-size:7px;font-weight:500}.shard-rank>small{color:#5a665d;font-size:6px;line-height:1.4}.shard-rank>div{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.shard-rank>div i{background:#ffffff05;border:1px solid #ffffff14}.shard-rank>div i.is-replica{background:#bd91ff14;border-color:#bd91ff4d}.shard-rank>div i.is-owned{border-color:var(--transformer-blue);background:#6fd3ff38;box-shadow:0 0 8px #6fd3ff1a}.shard-diagram--pipeline .shard-rank:nth-child(2n)>div i.is-replica{background:#ffae6414;border-color:#ffae6459}.shard-collective{border:1px solid #29332b;grid-template-columns:auto 32px 1fr;align-items:center;gap:10px;margin-top:11px;padding:11px 13px;display:grid}.shard-collective span,.shard-collective strong{color:#5e6961;font-family:var(--font-geist-mono),monospace;font-size:6px}.shard-collective i{color:#556057;text-align:center;font-style:normal}.shard-collective strong{text-align:right;font-weight:500}.shard-collective.is-active{border-color:#9dff3a7a}.shard-collective.is-active span,.shard-collective.is-active i,.shard-collective.is-active strong{color:var(--green)}.transformer-overlap-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.overlap-code{min-height:180px}.overlap-options button{min-height:76px}.overlap-timeline{background:#050806;border:1px solid #2b352d;margin:22px 18px 16px;padding:18px 14px}.overlap-scale{grid-template-columns:repeat(8,1fr);gap:4px;margin-left:88px;display:grid}.overlap-scale span{color:#485249;font-family:var(--font-geist-mono),monospace;text-align:center;font-size:5px}.overlap-row{grid-template-columns:78px 1fr;align-items:center;gap:10px;margin-top:10px;display:grid}.overlap-row>strong{color:#68746b;font-family:var(--font-geist-mono),monospace;font-size:6px;font-weight:500}.overlap-row>div{grid-template-columns:repeat(8,1fr);gap:4px;display:grid}.overlap-row i{background:#ffffff05;border:1px solid #273129;height:38px}.overlap-row i.is-compute{background:#6fd3ff2e;border-color:#6fd3ff94}.overlap-row i.is-comm{background:#bd91ff2e;border-color:#bd91ff94}.overlap-row i.is-consume{background:#9dff3a29;border-color:#9dff3a94}.overlap-row i.is-unsafe{background:repeating-linear-gradient(135deg,#ff867633,#ff867633 3px,#0000 3px 6px);border-color:#ff8676}.dependency-line{grid-template-columns:auto 1fr auto;align-items:center;gap:9px;margin:18px 0 0 88px;display:grid}.dependency-line span,.dependency-line strong{color:#657168;font-family:var(--font-geist-mono),monospace;font-size:5px}.dependency-line strong{color:var(--green);font-weight:500}.dependency-line i{background:linear-gradient(90deg,var(--transformer-blue),var(--transformer-violet),var(--green));height:1px}.transformer-principle code{color:var(--transformer-violet);background:#bd91ff12}@media (max-width:1040px){.transformer-calibrate-workspace,.transformer-overlap-workspace{grid-template-columns:1fr}.transformer-shard-workspace{grid-template-columns:minmax(250px,.64fr) minmax(590px,1.36fr);overflow-x:auto}}@media (max-width:760px){.transformer-shard-workspace{grid-template-columns:1fr;overflow:visible}.transformer-feedback{grid-template-columns:1fr}.shard-ranks{grid-template-columns:repeat(2,1fr)}.shard-rank{min-height:180px}}@media (max-width:480px){.transformer-code .lesson-code-line code{font-size:7px}.fp8-bars{gap:3px}.shard-ranks{grid-template-columns:1fr}.shard-rank{min-height:150px}.shard-rank>div{min-height:70px}.overlap-timeline{padding:13px 8px}.overlap-scale{margin-left:66px}.overlap-row{grid-template-columns:57px 1fr;gap:8px}.dependency-line{margin-left:66px}}@media (prefers-reduced-motion:reduce){.fp8-bars i{transition:none}}