:root {
  --transformer-cyan: #55e9ff;
  --transformer-violet: #a896ff;
  --transformer-deep: #08131c;
  --transformer-panel: #0d202a;
  --transformer-line: rgba(85, 233, 255, 0.24);
}

.transformer-page { --transformer-accent: var(--transformer-cyan); }
.transformer-page .lesson-progress-track span { background: var(--transformer-cyan); width: 100%; }
.transformer-page .lesson-hero { background-color: var(--transformer-deep); background-image: linear-gradient(rgba(238,242,234,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(238,242,234,.055) 1px, transparent 1px), radial-gradient(circle at 74% 44%, rgba(85,233,255,.19), transparent 34%); }
.transformer-page .lesson-hero::before { background: repeating-linear-gradient(135deg, var(--transformer-cyan) 0 8px, transparent 8px 16px); }
.transformer-page .lesson-hero h1 em, .transformer-page .lesson-eyebrow, .transformer-page .one-line-label { color: var(--transformer-cyan); }
.transformer-page .one-line { border-color: var(--transformer-cyan); }
.transformer-hero-art::before { border-color: rgba(85,233,255,.34); }
.transformer-hero-art::after { border-color: rgba(168,150,255,.27); }
.transformer-art-map { background: radial-gradient(circle at 53% 50%, rgba(168,150,255,.12), transparent 34%), linear-gradient(130deg, rgba(85,233,255,.06), transparent 60%); }
.transformer-hero-grid path, .transformer-hero-links path { fill: none; stroke: rgba(85,233,255,.16); stroke-width: 1; }
.transformer-hero-links path { stroke: url(#transformerEdge); stroke-dasharray: 4 10; animation: transformer-flow 4s linear infinite; }
.transformer-hero-flow circle { fill: var(--transformer-cyan); stroke: var(--paper); stroke-width: 1.5; animation: transformer-pulse 2.5s ease-in-out infinite; }
.transformer-hero-flow circle:nth-child(2) { fill: var(--transformer-violet); animation-delay: -.5s; }
.transformer-hero-flow circle:nth-child(3) { fill: var(--blue); animation-delay: -1s; }
.transformer-hero-flow circle:nth-child(4) { fill: var(--orange); animation-delay: -1.5s; }
.transformer-hero-flow circle:nth-child(5) { fill: var(--mint); animation-delay: -2s; }
.transformer-hero-labels text, .transformer-hero-marks text { fill: rgba(238,242,234,.72); font: 12px 'DM Mono', monospace; }
.transformer-hero-marks text { fill: var(--transformer-cyan); font-size: 10px; }
@keyframes transformer-flow { to { stroke-dashoffset: -48; } }
@keyframes transformer-pulse { 0%,100% { opacity: .55; transform: scale(.8); transform-origin: center; } 50% { opacity: 1; transform: scale(1.12); transform-origin: center; } }

.transformer-overview .overview-card:first-child, .transformer-overview .overview-detail:first-child { border-color: var(--transformer-cyan); }
.transformer-overview .overview-card:last-child { border-color: var(--transformer-violet); }
.transformer-overview .overview-card:first-child .overview-label, .transformer-overview .overview-detail:first-child .overview-label { color: #078ca1; }
.transformer-overview .overview-flow-heading strong, .transformer-overview .overview-cta-label { color: var(--transformer-cyan); }
.transformer-overview .overview-cta:hover, .transformer-overview .overview-cta:focus-visible { box-shadow: 5px 5px 0 var(--transformer-cyan); }
.transformer-before-after { background: var(--ink); border: 1px solid rgba(11,16,20,.55); color: var(--paper); margin-top: .8rem; padding: clamp(1rem,2vw,1.35rem); }
.before-after-label, .forward-prompt-bar, .stage-rail-label, .timeline-board-head, .depth-controls, .context-caption, .code-card-heading { align-items: baseline; display: flex; gap: 1rem; justify-content: space-between; }
.before-after-label span, .state-tag, .forward-prompt-bar > div > span, .word-editor span, .stage-rail-label span, .timeline-board-head span, .depth-controls label > span, .depth-note, .context-caption span, .math-source > span, .math-operation > span, .math-explanation > span, .code-card-heading span, .prediction-card-head span, .limitations > span, .transformer-sources span { color: rgba(238,242,234,.53); font: .5rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.before-after-label strong { color: var(--transformer-cyan); font: 500 1rem var(--display); letter-spacing: -.06em; }
.before-after-grid { align-items: center; display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr); margin-top: 1rem; }
.before-after-grid p { color: rgba(238,242,234,.57); font-size: .68rem; line-height: 1.6; margin: .75rem 0 0; }
.state-tag { color: var(--orange); display: block; }
.state-tag.is-after { color: var(--mint); }
.token-line { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.token-line b { border: 1px solid rgba(238,242,234,.2); color: var(--paper); font: .68rem var(--mono); padding: .48rem .55rem; }
.after-line b:last-child { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.before-after-arrow { color: var(--transformer-cyan); font: 1.6rem var(--display); text-align: center; }

.transformer-lab-section .walkthrough-intro h2 em, .depth-section .walkthrough-intro h2 em, .calculation-section .walkthrough-intro h2 em { color: var(--transformer-cyan); }
.forward-demo, .depth-demo, .context-map, .math-card, .code-card { background: var(--transformer-deep); border-color: rgba(85,233,255,.25); color: var(--paper); }
.forward-demo .demo-topbar, .depth-demo .demo-topbar, .context-map .demo-topbar, .math-card .demo-topbar { border-color: rgba(85,233,255,.17); }
.forward-demo .demo-index, .depth-demo .demo-index, .context-map .demo-index, .math-card .demo-index { color: var(--transformer-cyan); }
.forward-prompt-bar { align-items: flex-end; border-bottom: 1px solid rgba(85,233,255,.17); flex-wrap: wrap; padding: 1rem; }
.forward-prompt-bar > div > span { display: block; }
.forward-prompt-bar > div > strong { color: var(--paper); display: block; font: 500 1.25rem var(--display); letter-spacing: -.07em; margin-top: .35rem; }
.prompt-choices { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.prompt-choice, .stepper-button, .next-step-button, .word-editor input { appearance: none; }
.prompt-choice { background: transparent; border: 1px solid rgba(85,233,255,.26); color: rgba(238,242,234,.68); font: .5rem var(--mono); min-height: 37px; padding: .55rem .62rem; text-transform: uppercase; }
.prompt-choice:hover, .prompt-choice:focus-visible, .prompt-choice.is-selected { background: rgba(85,233,255,.11); border-color: var(--transformer-cyan); color: var(--transformer-cyan); }
.word-editor { display: grid; gap: .3rem; min-width: 118px; }
.word-editor span { color: var(--transformer-cyan); }
.word-editor input { background: rgba(238,242,234,.06); border: 1px solid rgba(238,242,234,.25); color: var(--paper); font: .68rem var(--mono); min-height: 37px; padding: .45rem .55rem; width: 100%; }
.word-editor input:focus { border-color: var(--transformer-cyan); outline: 2px solid rgba(85,233,255,.22); outline-offset: 2px; }
.stage-rail-wrap { padding: 1rem; }
.stage-rail-label output { color: var(--transformer-cyan); font: .52rem var(--mono); text-transform: uppercase; }
.stage-rail { align-items: center; display: flex; gap: .25rem; margin-top: .85rem; overflow-x: auto; padding: .2rem 0 .35rem; scrollbar-color: var(--transformer-cyan) transparent; }
.stage-rail > i { color: rgba(238,242,234,.3); font-style: normal; }
.stage-stop { align-items: center; background: rgba(238,242,234,.04); border: 1px solid rgba(238,242,234,.16); color: rgba(238,242,234,.55); display: flex; flex: 1 0 66px; flex-direction: column; gap: .22rem; justify-content: center; min-height: 59px; padding: .45rem .35rem; }
.stage-stop span { color: var(--transformer-cyan); font: .46rem var(--mono); }
.stage-stop strong { font: .57rem var(--mono); text-transform: uppercase; }
.stage-stop:hover, .stage-stop:focus-visible, .stage-stop.is-selected { background: rgba(85,233,255,.13); border-color: var(--transformer-cyan); color: var(--paper); }
.stage-stop.is-selected { box-shadow: inset 0 -3px 0 var(--transformer-cyan); }
.forward-state-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(230px,.75fr); }
.state-visual { background: radial-gradient(circle at 48% 46%, rgba(85,233,255,.11), transparent 42%), linear-gradient(rgba(238,242,234,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(238,242,234,.04) 1px, transparent 1px), #0b171e; background-size: auto, 36px 36px, 36px 36px, auto; min-height: 330px; padding: 1.15rem; position: relative; }
.state-visual-heading { align-items: baseline; border-bottom: 1px solid rgba(85,233,255,.16); display: flex; gap: 1rem; justify-content: space-between; padding-bottom: .8rem; }
.state-visual-heading span { color: var(--transformer-cyan); font: .5rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.state-visual-heading strong { font: 500 1rem var(--display); letter-spacing: -.06em; text-align: right; }
.state-stage-content { min-height: 215px; padding-top: 1.15rem; }
.state-baton { align-items: center; border-top: 1px solid rgba(85,233,255,.16); bottom: 0; color: rgba(238,242,234,.5); display: flex; font: .49rem var(--mono); gap: .5rem; left: 1.15rem; padding-top: .75rem; position: absolute; right: 1.15rem; text-transform: uppercase; }
.state-baton i, .demo-bottombar i, .math-status i { background: var(--transformer-cyan); border-radius: 50%; box-shadow: 0 0 11px rgba(85,233,255,.7); display: inline-block; height: 6px; width: 6px; }
.forward-inspector { border-left: 1px solid rgba(85,233,255,.2); padding: 1.15rem; }
.inspector-stage { align-items: baseline; border-bottom: 1px solid rgba(85,233,255,.18); display: flex; gap: .65rem; padding: 1.3rem 0 .85rem; }
.inspector-stage span, .inspector-triptych span { color: rgba(238,242,234,.48); font: .49rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.inspector-stage strong { color: var(--transformer-cyan); font: 2rem var(--display); letter-spacing: -.08em; }
.inspector-triptych { display: grid; gap: .8rem; margin-top: 1rem; }
.inspector-triptych div { border-left: 2px solid rgba(85,233,255,.35); padding-left: .65rem; }
.inspector-triptych div:nth-child(2) { border-color: var(--blue); }
.inspector-triptych div:nth-child(3) { border-color: var(--orange); }
.inspector-triptych strong { display: block; font: .72rem var(--display); line-height: 1.25; margin-top: .35rem; }
.forward-inspector > p { color: rgba(238,242,234,.62); font-size: .7rem; line-height: 1.65; margin: 1.25rem 0 0; }
.forward-controls { align-items: center; border-top: 1px solid rgba(85,233,255,.17); display: flex; gap: 1rem; justify-content: space-between; padding: 1rem; }
.stepper-controls { align-items: center; display: flex; gap: .4rem; }
.stepper-button, .next-step-button { border: 1px solid rgba(85,233,255,.3); font: .51rem var(--mono); min-height: 42px; padding: .65rem .75rem; text-transform: uppercase; }
.stepper-button { background: transparent; color: rgba(238,242,234,.67); }
.stepper-button:disabled { cursor: not-allowed; opacity: .35; }
.stepper-button:not(:disabled):hover, .stepper-button:not(:disabled):focus-visible { border-color: var(--transformer-cyan); color: var(--transformer-cyan); }
.next-step-button { background: var(--transformer-cyan); border-color: var(--transformer-cyan); color: var(--ink); }
.next-step-button:hover, .next-step-button:focus-visible { background: var(--paper); box-shadow: 4px 4px 0 var(--orange); transform: translate(-2px,-2px); }
.forward-controls .demo-action { color: var(--transformer-cyan); min-height: 42px; }
.forward-progress { min-width: 200px; }
.forward-progress > span { color: rgba(238,242,234,.5); display: flex; font: .48rem var(--mono); gap: .6rem; justify-content: space-between; text-transform: uppercase; }
.forward-progress b { color: var(--transformer-cyan); font-weight: 400; }
.forward-progress > i { background: rgba(238,242,234,.12); display: block; height: 4px; margin-top: .6rem; }
.forward-progress > i b { background: var(--transformer-cyan); display: block; height: 100%; transition: width 240ms ease; width: 12.5%; }
.forward-demo .demo-bottombar, .depth-demo .demo-bottombar, .context-map .demo-bottombar { border-top-color: rgba(85,233,255,.17); color: rgba(238,242,234,.42); }
.forward-demo .demo-bottombar i, .depth-demo .demo-bottombar i, .context-map .demo-bottombar i { background: var(--transformer-cyan); }

.stage-token-view { display: flex; flex-wrap: wrap; gap: .5rem; }
.stage-token-view span { border: 1px solid rgba(85,233,255,.4); color: var(--paper); font: .77rem var(--mono); padding: .62rem .7rem; }
.stage-token-view span:last-child { background: rgba(85,233,255,.16); border-color: var(--transformer-cyan); }
.state-caption { color: rgba(238,242,234,.57); font-size: .7rem; line-height: 1.65; margin: 1.2rem 0 0; max-width: 450px; }
.vector-view { align-items: end; display: flex; gap: .65rem; height: 145px; }
.vector-bar { background: var(--transformer-cyan); min-width: 28px; opacity: .8; position: relative; transition: height 260ms ease; width: 12%; }
.vector-bar:nth-child(2) { background: var(--blue); }.vector-bar:nth-child(3) { background: var(--orange); }.vector-bar:nth-child(4) { background: var(--mint); }.vector-bar span { bottom: -1.25rem; color: rgba(238,242,234,.48); font: .45rem var(--mono); left: 0; position: absolute; }
.attention-view { display: grid; gap: .45rem; grid-template-columns: repeat(4,minmax(0,1fr)); }
.attention-view div { border: 1px solid rgba(238,242,234,.13); padding: .6rem; }.attention-view div.is-focus { border-color: var(--transformer-cyan); background: rgba(85,233,255,.12); }.attention-view span { color: rgba(238,242,234,.57); display: block; font: .5rem var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.attention-view i { background: var(--transformer-cyan); display: block; height: 7px; margin-top: 1.2rem; transition: width 260ms ease; }.attention-view strong { color: var(--transformer-cyan); display: block; font: .65rem var(--mono); margin-top: .45rem; }
.block-view { display: grid; gap: .6rem; grid-template-columns: repeat(3,1fr); }.block-view div { background: rgba(238,242,234,.05); border-left: 2px solid var(--blue); min-height: 90px; padding: .7rem; }.block-view div:first-child { border-color: var(--transformer-cyan); }.block-view div:last-child { border-color: var(--orange); }.block-view span, .logit-view span { color: rgba(238,242,234,.52); font: .48rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }.block-view strong { display: block; font: 1.1rem var(--display); margin-top: .65rem; }.block-view small { color: rgba(238,242,234,.5); display: block; font-size: .57rem; line-height: 1.35; margin-top: .35rem; }
.logit-view { display: grid; gap: .4rem; max-width: 480px; }.logit-row { align-items: center; display: grid; gap: .6rem; grid-template-columns: 5rem minmax(0,1fr) 2.8rem; }.logit-row span, .logit-row strong { font: .58rem var(--mono); }.logit-track { background: rgba(238,242,234,.1); height: 8px; }.logit-track i { background: var(--orange); display: block; height: 100%; }.probability-view { display: grid; gap: .6rem; max-width: 500px; }.probability-row { align-items: center; display: grid; gap: .6rem; grid-template-columns: 5.5rem minmax(0,1fr) 3rem; }.probability-row span, .probability-row strong { font: .62rem var(--mono); }.probability-row strong { color: var(--transformer-cyan); text-align: right; }.probability-track { background: rgba(238,242,234,.1); height: 9px; }.probability-track i { background: var(--transformer-cyan); display: block; height: 100%; }.probability-row:first-child .probability-track i { background: var(--mint); }.choice-view { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; }.choice-token { background: var(--mint); color: var(--ink); font: 600 1.8rem var(--display); letter-spacing: -.08em; padding: .9rem 1rem; }.choice-copy { color: rgba(238,242,234,.6); font-size: .7rem; line-height: 1.55; max-width: 260px; }.choice-copy strong { color: var(--paper); display: block; font: 1rem var(--display); margin-bottom: .35rem; }

.transformer-timeline-section .walkthrough-intro h2 em, .consolidation-section .walkthrough-intro h2 em { color: var(--mint); }
.timeline-board { background: var(--transformer-panel); border: 1px solid rgba(85,233,255,.23); overflow: hidden; }
.timeline-board-head { border-bottom: 1px solid rgba(85,233,255,.17); padding: 1rem; }.timeline-board-head strong { color: var(--transformer-cyan); font: 500 1rem var(--display); letter-spacing: -.06em; }
.process-timeline { display: grid; grid-template-columns: repeat(8,minmax(90px,1fr)); list-style: none; margin: 0; overflow-x: auto; padding: 1rem; position: relative; }.process-timeline::before { background: rgba(85,233,255,.24); content: ''; height: 1px; left: 2rem; position: absolute; right: 2rem; top: 2.8rem; }.timeline-item { min-width: 90px; position: relative; z-index: 1; }.timeline-item button { background: transparent; border: 0; color: rgba(238,242,234,.5); display: flex; flex-direction: column; gap: .38rem; min-height: 84px; padding: .3rem; text-align: left; width: 100%; }.timeline-item button:hover, .timeline-item button:focus-visible, .timeline-item.is-selected button { color: var(--paper); }.timeline-number { align-items: center; background: var(--transformer-panel); border: 1px solid rgba(85,233,255,.35); border-radius: 50%; color: var(--transformer-cyan); display: flex; font: .5rem var(--mono); height: 31px; justify-content: center; width: 31px; }.timeline-item.is-selected .timeline-number { background: var(--transformer-cyan); color: var(--ink); }.timeline-item strong { font: .61rem var(--mono); text-transform: uppercase; }.timeline-item small { color: rgba(238,242,234,.44); font-size: .53rem; line-height: 1.25; }.timeline-detail { border-top: 1px solid rgba(85,233,255,.17); display: grid; gap: 1rem; grid-template-columns: minmax(160px,.75fr) minmax(180px,1.25fr) minmax(220px,1fr); padding: 1rem; }.timeline-detail-label { color: var(--transformer-cyan); }.timeline-detail > div:first-child span { color: var(--transformer-cyan); display: block; font: .5rem var(--mono); text-transform: uppercase; }.timeline-detail > div:first-child strong { display: block; font: 1.15rem var(--display); margin-top: .4rem; }.timeline-detail p { color: rgba(238,242,234,.62); font-size: .7rem; line-height: 1.65; margin: 0; }.timeline-detail-flow { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; }.timeline-detail-flow span { border: 1px solid rgba(85,233,255,.27); color: var(--paper); font: .53rem var(--mono); padding: .5rem; }.timeline-detail-flow b { color: var(--transformer-cyan); font: 1rem var(--display); }

.depth-demo { border-color: rgba(185,255,85,.28); }.depth-controls { border-bottom: 1px solid rgba(185,255,85,.16); padding: 1rem; }.depth-controls label { max-width: 430px; width: 100%; }.depth-controls label > span { color: rgba(238,242,234,.65); display: flex; justify-content: space-between; }.depth-controls output { color: var(--mint); }.depth-controls input { accent-color: var(--mint); min-height: 28px; width: 100%; }.depth-note { color: var(--mint); text-align: right; }.depth-visual { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(210px,.8fr); }.depth-stack { align-items: stretch; background: linear-gradient(rgba(238,242,234,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(238,242,234,.04) 1px, transparent 1px), #0b171e; background-size: 34px 34px; display: flex; gap: .55rem; min-height: 270px; padding: 1.15rem; }.depth-block { align-items: center; background: rgba(185,255,85,.08); border: 1px solid rgba(185,255,85,.45); display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 66px; padding: .65rem .4rem; position: relative; }.depth-block::after { color: var(--mint); content: '→'; font: 1.1rem var(--display); position: absolute; right: -.67rem; top: 50%; transform: translateY(-50%); }.depth-block:last-child::after { content: ''; }.depth-block span { color: var(--mint); font: .5rem var(--mono); }.depth-block strong { font: 1rem var(--display); margin-top: .7rem; }.depth-block small { color: rgba(238,242,234,.5); font: .45rem var(--mono); margin-top: .35rem; text-align: center; }.depth-baton { background: var(--orange); border-radius: 50%; box-shadow: 0 0 16px rgba(255,139,103,.65); height: 10px; left: 50%; position: absolute; top: 20%; transform: translateX(-50%); width: 10px; }.depth-inspector { border-left: 1px solid rgba(185,255,85,.2); padding: 1.15rem; }.depth-inspector .inspector-kicker { color: var(--mint); }.depth-inspector > strong { display: block; font: 1.25rem var(--display); letter-spacing: -.07em; margin-top: 1.1rem; }.depth-inspector > p { color: rgba(238,242,234,.6); font-size: .7rem; line-height: 1.65; }.depth-vector { border-top: 1px solid rgba(185,255,85,.18); margin-top: 1rem; padding-top: .9rem; }.depth-vector span, .depth-vector small { color: rgba(238,242,234,.48); display: block; font: .49rem var(--mono); text-transform: uppercase; }.depth-vector strong { color: var(--mint); display: block; font: 1.25rem var(--mono); margin: .5rem 0; }.depth-vector small { text-transform: none; }

.context-map { border-color: rgba(85,233,255,.25); }.context-map-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(210px,.75fr); }.context-visual { background: radial-gradient(circle at 50% 48%, rgba(85,233,255,.13), transparent 39%), linear-gradient(rgba(238,242,234,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(238,242,234,.04) 1px, transparent 1px), #0b171e; background-size: auto, 35px 35px, 35px 35px, auto; min-height: 310px; padding: 1.15rem; position: relative; }.context-query { align-items: center; background: var(--transformer-cyan); color: var(--ink); display: flex; flex-direction: column; height: 76px; justify-content: center; left: 50%; position: absolute; top: 43%; transform: translate(-50%,-50%); width: 76px; z-index: 2; }.context-query span { font: .47rem var(--mono); text-transform: uppercase; }.context-query strong { font: 1.25rem var(--display); letter-spacing: -.07em; margin-top: .25rem; }.context-nodes { inset: 0; position: absolute; }.context-node { align-items: center; background: rgba(168,150,255,.15); border: 1px solid var(--transformer-violet); color: var(--paper); display: flex; flex-direction: column; height: 60px; justify-content: center; position: absolute; transform: translate(-50%,-50%); width: 78px; z-index: 2; }.context-node.is-top { background: var(--mint); border-color: var(--mint); color: var(--ink); }.context-node span { font: .58rem var(--mono); }.context-node strong { font: 1rem var(--display); margin-top: .2rem; }.context-node small { font: .45rem var(--mono); margin-top: .15rem; }.context-caption { bottom: 1rem; left: 1.15rem; position: absolute; right: 1.15rem; }.context-caption strong { color: var(--transformer-cyan); font: .5rem var(--mono); text-transform: uppercase; }.context-links { inset: 0; position: absolute; }.context-link { background: var(--transformer-cyan); height: 2px; left: 50%; opacity: .45; position: absolute; top: 50%; transform-origin: left center; z-index: 1; }.context-inspector { border-left: 1px solid rgba(85,233,255,.2); padding: 1.15rem; }.context-inspector .inspector-kicker { color: var(--transformer-cyan); }.context-inspector > strong { display: block; font: 1.2rem var(--display); letter-spacing: -.06em; margin-top: 1.1rem; }.context-inspector > p { color: rgba(238,242,234,.62); font-size: .7rem; line-height: 1.65; }.context-formula { border-top: 1px solid rgba(85,233,255,.18); margin-top: 1rem; padding-top: .9rem; }.context-formula span { color: rgba(238,242,234,.47); display: block; font: .49rem var(--mono); text-transform: uppercase; }.context-formula strong { color: var(--transformer-cyan); display: block; font: .61rem var(--mono); line-height: 1.55; margin-top: .5rem; }

.calculation-section .walkthrough-intro h2 em { color: var(--orange); }.math-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; }.math-source, .math-operation, .math-explanation { min-width: 0; padding: 1.15rem; }.math-source, .math-operation { border-right: 1px solid rgba(85,233,255,.16); }.math-source > span, .math-operation > span, .math-explanation > span { display: block; }.math-source div { border-left: 2px solid var(--blue); margin-top: .9rem; padding-left: .65rem; }.math-source div:nth-child(3) { border-color: var(--mint); }.math-source div:nth-child(4) { border-color: var(--orange); }.math-source b, .math-source strong, .math-source em { display: block; }.math-source b { font: .62rem var(--mono); }.math-source strong { color: var(--paper); font: .75rem var(--mono); margin: .3rem 0; }.math-source em { color: var(--transformer-cyan); font: .6rem var(--mono); font-style: normal; }.math-operation strong { color: rgba(238,242,234,.76); display: block; font: .66rem var(--mono); line-height: 1.8; margin-top: 1rem; }.math-operation > b { color: var(--transformer-cyan); display: block; font: 1.35rem var(--display); margin-top: 1rem; }.math-explanation strong { color: var(--mint); display: block; font: 1.65rem var(--display); margin: 1rem 0 .7rem; }.math-explanation p { color: rgba(238,242,234,.62); font-size: .69rem; line-height: 1.65; margin: 0; }.math-status { align-items: center; border-top: 1px solid rgba(85,233,255,.16); color: rgba(238,242,234,.45); display: flex; font: .49rem var(--mono); justify-content: space-between; padding: .85rem 1.15rem; text-transform: uppercase; }.math-status span:first-child { align-items: center; display: flex; gap: .4rem; }.code-card { border: 1px solid rgba(85,233,255,.22); margin-top: .8rem; overflow: hidden; }.code-card-heading { border-bottom: 1px solid rgba(85,233,255,.17); padding: .85rem 1rem; }.code-card-heading strong { color: var(--transformer-cyan); font: .53rem var(--mono); text-transform: uppercase; }.code-card pre { color: var(--paper); font: .64rem/1.7 var(--mono); margin: 0; overflow-x: auto; padding: 1rem; }.code-card pre code { color: rgba(238,242,234,.83); }.code-card p { border-top: 1px solid rgba(85,233,255,.17); color: rgba(238,242,234,.6); font-size: .69rem; line-height: 1.65; margin: 0; padding: 1rem; }

.consolidation-section { padding-bottom: clamp(4.5rem,8vw,8rem); }.prediction-card { background: var(--mint); color: var(--ink); padding: clamp(1.2rem,3vw,2rem); }.prediction-card-head { align-items: baseline; display: flex; gap: 1rem; justify-content: space-between; }.prediction-card-head span { color: rgba(11,16,20,.65); }.prediction-card-head strong { font: 500 1.35rem var(--display); letter-spacing: -.07em; }.prediction-card > p { font-size: .78rem; line-height: 1.7; margin: 1.2rem 0; max-width: 650px; }.prediction-card details { border-top: 1px solid rgba(11,16,20,.28); padding-top: .85rem; }.prediction-card summary { cursor: pointer; font: .55rem var(--mono); text-transform: uppercase; }.prediction-reveal { align-items: start; background: var(--ink); color: var(--paper); display: grid; gap: .2rem 1rem; grid-template-columns: auto 1fr; margin-top: 1rem; padding: .9rem; }.prediction-reveal span { color: var(--mint); font: .5rem var(--mono); text-transform: uppercase; }.prediction-reveal strong { font: 1.1rem var(--display); }.prediction-reveal p { color: rgba(238,242,234,.58); font-size: .65rem; grid-column: 1 / -1; line-height: 1.6; margin: .5rem 0 0; }.causal-recap { border: 1px solid rgba(85,233,255,.2); display: grid; grid-template-columns: repeat(4,1fr); margin-top: .8rem; }.causal-recap > div { border-right: 1px solid rgba(85,233,255,.2); min-height: 130px; padding: .95rem; }.causal-recap > div:last-child { border: 0; }.causal-recap span { color: var(--transformer-cyan); font: .5rem var(--mono); }.causal-recap strong { display: block; font: 1rem var(--display); margin-top: 1.2rem; }.causal-recap p { color: rgba(238,242,234,.57); font-size: .62rem; line-height: 1.45; margin: .45rem 0 0; }.limitations { border-left: 2px solid var(--orange); margin-top: 1.5rem; padding-left: 1rem; }.limitations > span { color: var(--orange); }.limitations h3 { font: 500 1.35rem var(--display); letter-spacing: -.07em; margin: .65rem 0 .5rem; }.limitations p { color: rgba(238,242,234,.6); font-size: .7rem; line-height: 1.7; margin: 0; max-width: 680px; }
.transformer-sources { background: #d5e7e5; display: grid; gap: 2rem; grid-template-columns: 1.2fr .8fr; padding: 1rem clamp(1.25rem,7vw,8.5rem); }.transformer-sources > div { margin: 0 auto; max-width: var(--max); }.transformer-sources span { color: #08788c; }.transformer-sources p { color: rgba(7,20,29,.68); font-size: .67rem; line-height: 1.65; margin: .55rem 0 0; }.transformer-sources a { color: #08788c; font-weight: 700; }

@media (max-width: 1000px) { .forward-state-grid, .depth-visual, .context-map-grid { grid-template-columns: 1fr; }.forward-inspector, .depth-inspector, .context-inspector { border-left: 0; border-top: 1px solid rgba(85,233,255,.2); }.depth-stack { min-height: 220px; }.timeline-detail { grid-template-columns: 1fr 1.2fr; }.timeline-detail-flow { grid-column: 1 / -1; } }
@media (max-width: 760px) { .forward-prompt-bar, .before-after-label, .depth-controls, .context-caption, .code-card-heading { align-items: flex-start; flex-direction: column; }.prompt-choices { margin-left: 0; width: 100%; }.prompt-choice { flex: 1; }.word-editor { max-width: none; width: 100%; }.before-after-grid { grid-template-columns: 1fr; }.before-after-arrow { transform: rotate(90deg); }.math-grid { grid-template-columns: 1fr; }.math-source, .math-operation { border-bottom: 1px solid rgba(85,233,255,.16); border-right: 0; }.math-operation > b { margin-top: .8rem; }.causal-recap { grid-template-columns: repeat(2,1fr); }.causal-recap > div:nth-child(2) { border-right: 0; }.causal-recap > div:nth-child(3), .causal-recap > div:nth-child(4) { border-top: 1px solid rgba(85,233,255,.2); }.causal-recap > div:nth-child(3) { border-right: 1px solid rgba(85,233,255,.2); }.transformer-sources { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .stage-rail { align-items: stretch; }.stage-rail > i { display: none; }.stage-stop { flex-basis: 66px; }.forward-controls { align-items: stretch; flex-direction: column; }.stepper-controls { flex-wrap: wrap; }.stepper-controls .stepper-button, .stepper-controls .next-step-button { flex: 1; }.forward-progress { width: 100%; }.state-visual, .forward-inspector, .depth-inspector, .context-inspector, .math-source, .math-operation, .math-explanation { padding-left: .8rem; padding-right: .8rem; }.state-visual { min-height: 320px; }.state-visual-heading { align-items: flex-start; flex-direction: column; }.state-visual-heading strong { text-align: left; }.attention-view { grid-template-columns: repeat(2,1fr); }.block-view { grid-template-columns: 1fr; }.block-view div { min-height: 72px; }.probability-row, .logit-row { grid-template-columns: 4.5rem minmax(0,1fr) 2.5rem; }.depth-stack { gap: .35rem; overflow-x: auto; padding: .8rem; }.depth-block { min-width: 55px; }.timeline-board-head { align-items: flex-start; flex-direction: column; }.timeline-detail { grid-template-columns: 1fr; }.timeline-detail-flow { grid-column: auto; }.prediction-card-head { align-items: flex-start; flex-direction: column; }.prediction-reveal { grid-template-columns: 1fr; }.prediction-reveal p { grid-column: auto; }.math-status { align-items: flex-start; flex-direction: column; gap: .45rem; } }
@media (max-width: 380px) { .prompt-choice { font-size: .46rem; padding-left: .38rem; padding-right: .38rem; }.stage-stop { flex-basis: 58px; }.stage-stop strong { font-size: .5rem; }.stage-token-view span { font-size: .66rem; }.vector-bar { min-width: 20px; }.causal-recap { grid-template-columns: 1fr; }.causal-recap > div, .causal-recap > div:nth-child(3) { border-bottom: 1px solid rgba(85,233,255,.2); border-right: 0; border-top: 0; }.causal-recap > div:last-child { border-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .transformer-hero-links path, .transformer-hero-flow circle { animation: none; }.forward-progress > i b, .vector-bar, .attention-view i { transition: none; } }