.transformer-page { --block-violet: #bca7ff; --block-cyan: #8fe7df; }
.transformer-page .lesson-progress-track span { background: var(--block-violet); width: 85.7143%; }
.transformer-hero { 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 78% 43%, rgba(188,167,255,.2), transparent 34%); }
.transformer-hero::before { background: repeating-linear-gradient(135deg, var(--block-violet) 0 8px, transparent 8px 16px); }
.transformer-hero h1 em { color: var(--block-violet); }
.transformer-hero-art::before { border-color: rgba(188,167,255,.3); }
.transformer-hero-art::after { border-color: rgba(143,231,223,.24); }
.block-hero-map { min-height: 330px; padding: 2.8rem 1rem 1.4rem; position: relative; }
.block-hero-map svg { height: 280px; overflow: visible; width: 100%; }
.block-hero-grid path { fill: none; stroke: rgba(238,242,234,.08); stroke-width: 1; }
.hero-signal-main, .hero-signal-skip { fill: none; stroke: url(#heroSignal); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.hero-signal-skip { opacity: .45; stroke: var(--mint); stroke-dasharray: 5 8; stroke-width: 2; }
.hero-signal-skip.second { opacity: .22; stroke: var(--block-violet); }
.hero-block-nodes circle { fill: var(--ink); stroke: var(--mint); stroke-width: 2; }
.hero-block-nodes circle:nth-child(2), .hero-block-nodes circle:nth-child(4) { fill: var(--block-violet); stroke: var(--paper); }
.hero-block-labels { fill: var(--paper-dim); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.hero-block-tag { border: 1px solid rgba(238,242,234,.22); color: var(--paper); font-family: var(--mono); font-size: .48rem; letter-spacing: .08em; padding: .42rem .52rem; position: absolute; text-transform: uppercase; }
.tag-attn { left: 20%; top: 4.3rem; color: var(--mint); }
.tag-ffn { bottom: 2.2rem; right: 17%; color: var(--orange); }
.transformer-page .lesson-intro-strip { border-color: rgba(188,167,255,.25); }
.pipeline-section { background: #f1f3ed; }
.block-demo, .residual-demo, .depth-demo { background: var(--ink); border: 1px solid rgba(11,16,20,.26); box-shadow: 12px 12px 0 rgba(11,16,20,.08); color: var(--paper); overflow: hidden; }
.pipeline-head { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; padding: 2rem clamp(1.1rem,3vw,2.6rem) 1.2rem; }
.pipeline-label, .control-label, .pipeline-head p, .pipeline-count span, .stage-visual-label, .shape-row small, .depth-output small { color: var(--paper-dim); font-family: var(--mono); font-size: .51rem; letter-spacing: .08em; text-transform: uppercase; }
.pipeline-head strong { color: var(--mint); display: block; font-family: var(--display); font-size: clamp(1.8rem,4vw,3.3rem); letter-spacing: -.07em; line-height: 1; margin-top: .45rem; text-transform: uppercase; }
.pipeline-head p { font-family: var(--body); font-size: .78rem; letter-spacing: 0; line-height: 1.6; margin: .8rem 0 0; max-width: 560px; text-transform: none; }
.pipeline-count { align-items: baseline; display: flex; gap: .2rem; }
.pipeline-count strong { color: var(--block-violet); font-family: var(--display); font-size: 3.3rem; letter-spacing: -.1em; line-height: .8; }
.stage-stepper { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); padding: 0 clamp(1.1rem,3vw,2.6rem); }
.stage-tab { background: transparent; border: 0; border-top: 1px solid rgba(238,242,234,.18); color: rgba(238,242,234,.48); cursor: pointer; min-height: 80px; padding: .75rem .35rem .6rem; text-align: left; transition: color 180ms ease, border-color 180ms ease, background 180ms ease; }
.stage-tab span { display: block; font-family: var(--mono); font-size: .48rem; letter-spacing: .08em; }
.stage-tab b { display: block; font-family: var(--body); font-size: .66rem; font-weight: 700; line-height: 1.2; margin-top: .6rem; }
.stage-tab:hover, .stage-tab:focus-visible { background: rgba(238,242,234,.06); color: var(--paper); }
.stage-tab.is-active { border-top-color: var(--mint); color: var(--mint); }
.stage-tab.is-active b { color: var(--paper); }
.pipeline-progress { background: rgba(238,242,234,.11); height: 3px; margin: 0 clamp(1.1rem,3vw,2.6rem); }
.pipeline-progress span { background: linear-gradient(90deg, var(--mint), var(--block-violet)); display: block; height: 100%; transition: width 260ms ease; width: 12.5%; }
.pipeline-panel { display: grid; gap: 1.4rem; grid-template-columns: minmax(0,1.2fr) minmax(230px,.8fr); min-height: 330px; padding: clamp(1.1rem,3vw,2.6rem); }
.stage-visual { background: radial-gradient(circle at 50% 40%, rgba(188,167,255,.18), transparent 47%), linear-gradient(135deg, rgba(185,255,85,.05), transparent 55%); border: 1px solid rgba(238,242,234,.14); display: flex; min-height: 290px; overflow: hidden; padding: 1.3rem; position: relative; }
.stage-visual-2, .stage-visual-4, .stage-visual-5 { min-height: 360px; }
.stage-visual::before { background-image: linear-gradient(rgba(238,242,234,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(238,242,234,.07) 1px, transparent 1px); background-size: 44px 44px; content: ''; inset: 0; opacity: .6; position: absolute; }
.stage-visual > * { position: relative; z-index: 1; }
.stage-visual-label { position: absolute; right: 1rem; top: 1rem; }
.vector-visual { align-items: center; display: flex; flex: 1; gap: clamp(.6rem,2vw,1.6rem); justify-content: center; }
.vector-lane { display: grid; gap: .45rem; min-width: 52px; }
.vector-lane span { color: var(--paper-dim); font-family: var(--mono); font-size: .53rem; text-align: center; }
.vector-cell { align-items: center; background: rgba(238,242,234,.08); border: 1px solid rgba(238,242,234,.18); display: flex; font-family: var(--mono); font-size: .7rem; height: 42px; justify-content: center; transition: background 250ms ease, border-color 250ms ease, transform 250ms ease; width: 66px; }
.vector-cell.is-hot { background: rgba(185,255,85,.22); border-color: var(--mint); color: var(--mint); transform: translateY(-4px); }
.vector-arrow { color: var(--block-violet); font-family: var(--display); font-size: 1.6rem; }
.attention-visual { align-items: center; display: flex; flex: 1; justify-content: center; padding: 2rem 1rem; position: relative; }
.attention-links { align-items: center; display: flex; gap: .6rem; justify-content: center; width: 100%; }
.attention-token { align-items: center; display: flex; flex-direction: column; gap: .65rem; }
.attention-token strong { border: 1px solid rgba(238,242,234,.2); border-radius: 50%; display: grid; font-family: var(--mono); font-size: .65rem; height: 57px; place-items: center; width: 57px; }
.attention-token i { background: var(--orange); display: block; height: 5px; width: 48px; }
.attention-token small { color: var(--paper-dim); font-family: var(--mono); font-size: .48rem; }
.attention-token.is-query strong { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.attention-token.is-query i { background: var(--mint); }
.attention-token.is-top strong { background: var(--block-violet); border-color: var(--block-violet); color: var(--ink); }
.attention-token.is-top i { background: var(--block-violet); width: 78px; }
.attention-join { border-top: 2px solid var(--block-violet); flex: 1; max-width: 96px; opacity: .5; position: relative; }
.attention-join::after { border-bottom: 5px solid transparent; border-left: 7px solid var(--block-violet); border-top: 5px solid transparent; content: ''; position: absolute; right: -1px; top: -6px; }
.residual-visual-stage, .ffn-visual { align-items: center; display: grid; flex: 1; gap: .8rem; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); justify-content: center; width: 100%; }
.residual-box, .norm-box, .ffn-box { border: 1px solid rgba(238,242,234,.25); min-width: 0; padding: 1rem .65rem; text-align: center; }
.residual-visual-stage > :nth-child(1), .ffn-visual > :nth-child(1) { grid-column: 1; grid-row: 1; }
.residual-visual-stage > :nth-child(2), .ffn-visual > :nth-child(2) { grid-column: 2; grid-row: 1; }
.residual-visual-stage > :nth-child(3), .ffn-visual > :nth-child(3) { grid-column: 3; grid-row: 1; }
.residual-visual-stage > :nth-child(4), .ffn-visual > :nth-child(4) { grid-column: 2; grid-row: 2; justify-self: center; }
.residual-visual-stage > :nth-child(5), .ffn-visual > :nth-child(5) { grid-column: 3; grid-row: 2; justify-self: center; }
.norm-visual { align-items: center; display: grid; flex: 1; gap: .8rem; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); width: 100%; }
.residual-box strong, .norm-box strong, .ffn-box strong { color: var(--mint); display: block; font-family: var(--mono); font-size: .75rem; line-height: 1.8; }
.residual-box span, .norm-box span, .ffn-box span { color: var(--paper-dim); display: block; font-family: var(--mono); font-size: .48rem; letter-spacing: .08em; text-transform: uppercase; }
.residual-box.original { border-color: var(--mint); }.residual-box.new { border-color: var(--block-violet); }.residual-box.sum { border-color: var(--orange); }
.visual-plus { color: var(--orange); font-family: var(--display); font-size: 2rem; }.visual-arrow { color: var(--block-violet); font-size: 1.5rem; }
.norm-bars, .ffn-bars { align-items: end; display: flex; gap: .7rem; height: 170px; justify-content: center; min-width: 0; width: 100%; }
.norm-bar, .ffn-bar { background: var(--block-violet); min-height: 8px; width: 32px; }.norm-bar:nth-child(2), .ffn-bar:nth-child(2) { background: var(--mint); }.norm-bar:nth-child(3), .ffn-bar:nth-child(3) { background: var(--orange); }.norm-bar:nth-child(4), .ffn-bar:nth-child(4) { background: var(--block-cyan); }
.norm-bar-wrap, .ffn-bar-wrap { align-items: center; display: flex; flex-direction: column; gap: .55rem; }.norm-bar-wrap span, .ffn-bar-wrap span { color: var(--paper-dim); font-family: var(--mono); font-size: .5rem; }
.stage-inspector { background: rgba(238,242,234,.06); border-left: 2px solid var(--mint); padding: 1.3rem; }
.inspector-kicker { color: var(--mint); display: block; font-family: var(--mono); font-size: .49rem; letter-spacing: .09em; text-transform: uppercase; }
.stage-inspector h4 { color: var(--paper); font-family: var(--display); font-size: 1.3rem; letter-spacing: -.05em; line-height: 1.1; margin: .8rem 0; }.stage-inspector p { color: var(--paper-dim); font-size: .75rem; line-height: 1.7; margin: 0; }
.stage-value { border-top: 1px solid rgba(238,242,234,.16); margin-top: 1.25rem; padding-top: 1rem; }.stage-value span, .stage-value small { color: var(--paper-dim); display: block; font-family: var(--mono); font-size: .48rem; letter-spacing: .07em; text-transform: uppercase; }.stage-value strong { color: var(--block-violet); display: block; font-family: var(--mono); font-size: .82rem; line-height: 1.6; margin: .5rem 0; word-break: break-word; }
.stepper-controls { align-items: center; border-top: 1px solid rgba(238,242,234,.14); display: flex; gap: 1rem; justify-content: space-between; padding: 1rem clamp(1.1rem,3vw,2.6rem); }.stepper-hint { color: var(--paper-dim); font-family: var(--mono); font-size: .48rem; text-align: center; text-transform: uppercase; }.stepper-hint span { color: var(--mint); display: block; margin-bottom: .35rem; }.stepper-button { background: transparent; border: 1px solid rgba(238,242,234,.3); color: var(--paper); cursor: pointer; font-family: var(--mono); font-size: .55rem; letter-spacing: .07em; padding: .7rem .8rem; text-transform: uppercase; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; }.stepper-button:hover:not(:disabled), .stepper-button:focus-visible { background: var(--mint); border-color: var(--mint); color: var(--ink); }.stepper-button:disabled { cursor: not-allowed; opacity: .3; }
.residual-section { background: var(--ink); color: var(--paper); }.residual-controls { align-items: center; border-bottom: 1px solid rgba(238,242,234,.15); display: flex; justify-content: space-between; padding: 1.3rem clamp(1.1rem,3vw,2.6rem); }.residual-controls strong { color: var(--mint); display: block; font-family: var(--display); font-size: 1.05rem; letter-spacing: -.04em; margin-top: .4rem; }.toggle-button { align-items: center; background: transparent; border: 1px solid rgba(238,242,234,.28); color: var(--paper); cursor: pointer; display: inline-flex; gap: .65rem; padding: .55rem .7rem; }.toggle-track { background: rgba(238,242,234,.22); border-radius: 20px; height: 20px; padding: 3px; transition: background 180ms ease; width: 36px; }.toggle-track i { background: var(--paper); border-radius: 50%; display: block; height: 14px; transition: transform 180ms ease; width: 14px; }.toggle-button[aria-checked="true"] .toggle-track { background: var(--mint); }.toggle-button[aria-checked="true"] .toggle-track i { background: var(--ink); transform: translateX(16px); }.toggle-button strong { font-family: var(--mono); font-size: .51rem; letter-spacing: .07em; text-transform: uppercase; }
.residual-visual { display: grid; gap: 1.5rem; grid-template-columns: 1.2fr .8fr; padding: clamp(1.1rem,3vw,2.6rem); }.residual-equation { align-items: center; display: flex; gap: .55rem; justify-content: center; }.residual-node { border: 1px solid rgba(238,242,234,.22); color: var(--paper); font-family: var(--mono); font-size: .62rem; line-height: 1.55; padding: .8rem .55rem; text-align: center; }.residual-node small { color: var(--paper-dim); font-size: .47rem; }.original-node { border-color: var(--mint); }.attention-node { border-color: var(--block-violet); }.result-node { border-color: var(--orange); }.residual-plus, .residual-arrow { color: var(--orange); font-family: var(--display); font-size: 1.4rem; }.residual-route-map { border: 1px solid rgba(238,242,234,.16); min-height: 160px; overflow: hidden; padding: 1.2rem; position: relative; }.route-line { height: 2px; left: 12%; position: absolute; right: 12%; transform-origin: left center; }.route-line-main { background: linear-gradient(90deg,var(--mint),var(--block-violet)); top: 54%; }.route-line-skip { border-top: 2px dashed var(--mint); top: 25%; transform: rotate(18deg); transition: opacity 220ms ease; }.route-line-skip.is-off { opacity: .08; }.route-dot { background: var(--paper); border: 2px solid var(--mint); border-radius: 50%; height: 9px; position: absolute; width: 9px; }.dot-one { left: 16%; top: calc(54% - 4px); }.dot-two { left: 48%; top: calc(54% - 4px); }.dot-three { right: 15%; top: calc(54% - 4px); }.route-label { color: var(--mint); font-family: var(--mono); font-size: .48rem; left: 12%; position: absolute; text-transform: uppercase; top: 15%; }.route-label-bottom { color: var(--block-violet); left: auto; right: 12%; top: 67%; }.survival-readout { border-top: 1px solid rgba(238,242,234,.15); padding: 1.3rem clamp(1.1rem,3vw,2.6rem); }.survival-heading { align-items: baseline; display: flex; justify-content: space-between; }.survival-heading span { color: var(--paper-dim); font-family: var(--mono); font-size: .5rem; letter-spacing: .07em; text-transform: uppercase; }.survival-heading strong { color: var(--mint); font-family: var(--display); font-size: 1rem; letter-spacing: -.04em; }.survival-bars { display: grid; gap: .7rem; grid-template-columns: repeat(4,1fr); margin: 1.2rem 0; }.survival-bar span, .survival-bar strong { display: block; font-family: var(--mono); font-size: .5rem; }.survival-bar strong { color: var(--paper); margin-top: .25rem; }.survival-track { background: rgba(238,242,234,.13); display: block; height: 6px; margin-top: .6rem; }.survival-track i { background: linear-gradient(90deg,var(--mint),var(--orange)); display: block; height: 100%; transition: width 220ms ease; }.survival-readout p { color: var(--paper-dim); font-size: .72rem; line-height: 1.7; margin: 0; }.residual-section .demo-bottombar { border-color: rgba(238,242,234,.15); }
.depth-section { background: #f6f4ed; }.depth-control { background: var(--ink); color: var(--paper); padding: 1.4rem clamp(1.1rem,3vw,2.6rem); }.depth-control label { display: block; }.depth-control label > span { align-items: baseline; display: flex; justify-content: space-between; }.depth-control output { color: var(--mint); font-family: var(--display); font-size: 1.6rem; letter-spacing: -.06em; }.depth-control input { accent-color: var(--mint); margin: 1rem 0 .5rem; width: 100%; }.depth-marker { color: var(--paper-dim); display: flex; font-family: var(--mono); font-size: .48rem; justify-content: space-between; text-transform: uppercase; }.depth-layout { background: var(--ink); display: grid; gap: 1.2rem; grid-template-columns: 1.15fr .85fr; padding: 0 clamp(1.1rem,3vw,2.6rem) 1.7rem; }.depth-stack { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem; min-height: 142px; }.depth-block { align-items: center; border: 1px solid var(--block-violet); display: flex; flex-direction: column; gap: .55rem; justify-content: center; min-height: 120px; min-width: 100px; padding: .7rem; position: relative; }.depth-block::after { color: var(--mint); content: '→'; font-family: var(--display); font-size: 1.2rem; position: absolute; right: -.85rem; }.depth-block:last-child::after { content: ''; }.depth-block span { color: var(--paper-dim); font-family: var(--mono); font-size: .48rem; letter-spacing: .08em; text-transform: uppercase; }.depth-block strong { color: var(--paper); font-family: var(--display); font-size: 1rem; letter-spacing: -.05em; }.depth-block i { background: var(--mint); display: block; height: 3px; width: 52px; }.depth-inspector { border-left: 2px solid var(--block-violet); padding: 1rem 0 1rem 1.2rem; }.depth-inspector > strong { color: var(--paper); display: block; font-family: var(--display); font-size: 1.25rem; letter-spacing: -.05em; line-height: 1.1; margin: .7rem 0; }.depth-inspector p { color: var(--paper-dim); font-size: .73rem; line-height: 1.7; margin: 0; }.depth-output { border-top: 1px solid rgba(238,242,234,.15); margin-top: 1rem; padding-top: .8rem; }.depth-output span { color: var(--paper-dim); display: block; font-family: var(--mono); font-size: .48rem; text-transform: uppercase; }.depth-output strong { color: var(--mint); display: block; font-family: var(--mono); font-size: .8rem; margin: .4rem 0; }.depth-table-wrap { background: var(--ink); overflow-x: auto; padding: 0 clamp(1.1rem,3vw,2.6rem) 1.7rem; }.depth-table { border-collapse: collapse; min-width: 580px; width: 100%; }.depth-table caption { color: var(--paper-dim); font-family: var(--mono); font-size: .49rem; letter-spacing: .08em; padding: .4rem 0 .8rem; text-align: left; text-transform: uppercase; }.depth-table th, .depth-table td { border-bottom: 1px solid rgba(238,242,234,.13); padding: .7rem .5rem .7rem 0; text-align: left; }.depth-table th { color: var(--mint); font-family: var(--mono); font-size: .49rem; letter-spacing: .08em; text-transform: uppercase; }.depth-table td { color: var(--paper-dim); font-size: .66rem; line-height: 1.4; }.depth-table td:nth-child(2) { color: var(--block-violet); font-family: var(--mono); font-size: .59rem; }
.calculation-section { background: #edf1eb; }.calculation-grid { display: grid; gap: 1.1rem; grid-template-columns: 1.12fr .88fr; }.static-calculation, .shape-inspector { background: var(--paper); border: 1px solid rgba(11,16,20,.16); padding: clamp(1.1rem,3vw,2rem); }.calc-heading { border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding-bottom: .8rem; }.calc-heading span { color: var(--text-muted); font-family: var(--mono); font-size: .5rem; letter-spacing: .08em; text-transform: uppercase; }.calc-heading strong { color: var(--ink); font-family: var(--display); font-size: .86rem; letter-spacing: -.04em; }.calc-list { counter-reset: calc; list-style: none; margin: 0; padding: 1rem 0 0; }.calc-list li { border-bottom: 1px solid var(--line); counter-increment: calc; display: grid; gap: .65rem; grid-template-columns: 145px 1fr; padding: 1rem 0; }.calc-list li::before { color: var(--orange); content: '0' counter(calc); font-family: var(--mono); font-size: .5rem; grid-column: 1; grid-row: 1 / span 2; }.calc-list span { color: var(--ink); font-family: var(--body); font-size: .7rem; font-weight: 800; grid-column: 1; margin-left: 1.7rem; }.calc-list code { color: #42504a; font-family: var(--mono); font-size: .65rem; grid-column: 2; grid-row: 1 / span 2; line-height: 1.7; }.shape-row { border-bottom: 1px solid var(--line); display: grid; gap: .4rem; grid-template-columns: 1fr auto; padding: 1rem 0; }.shape-row span { color: var(--ink); font-family: var(--body); font-size: .67rem; font-weight: 800; }.shape-row strong { color: var(--blue); font-family: var(--mono); font-size: .62rem; }.shape-row small { grid-column: 1 / -1; letter-spacing: .02em; text-transform: none; }.shape-row.learned { background: rgba(135,159,255,.08); margin-inline: -.5rem; padding-inline: .5rem; }.shape-row.learned strong { color: var(--orange); }.shape-note { border-left: 2px solid var(--mint); color: #59675e; font-size: .69rem; line-height: 1.7; margin: 1.2rem 0 0; padding-left: .9rem; }.shape-note b { color: var(--ink); }
.code-section { background: var(--ink); color: var(--paper); }.code-lab { background: #111a1f; border: 1px solid rgba(238,242,234,.2); box-shadow: 12px 12px 0 rgba(0,0,0,.17); overflow: hidden; }.code-lab-top { align-items: center; border-bottom: 1px solid rgba(238,242,234,.16); display: flex; justify-content: space-between; padding: .9rem 1rem; }.code-lab-top > span { color: var(--paper-dim); font-family: var(--mono); font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; }.demo-play { background: var(--mint); border: 0; color: var(--ink); cursor: pointer; display: inline-flex; font-family: var(--mono); font-size: .56rem; gap: .8rem; letter-spacing: .07em; padding: .75rem .8rem; text-transform: uppercase; }.demo-play:hover, .demo-play:focus-visible { background: var(--paper); }.code-lab pre { color: #dbe4db; font-family: var(--mono); font-size: clamp(.59rem,1.15vw,.75rem); line-height: 1.75; margin: 0; max-height: 540px; overflow: auto; padding: 1.3rem clamp(1rem,3vw,2.2rem); tab-size: 2; }.code-output { border-top: 1px solid rgba(238,242,234,.16); padding: 1rem clamp(1rem,3vw,2.2rem) 1.2rem; }.code-output-heading { align-items: center; display: flex; justify-content: space-between; }.code-output-heading span { color: var(--paper-dim); font-family: var(--mono); font-size: .5rem; letter-spacing: .08em; text-transform: uppercase; }.code-output-heading strong { color: var(--mint); font-family: var(--mono); font-size: .53rem; font-weight: 400; }.code-output pre { color: var(--block-violet); font-size: .67rem; line-height: 1.6; max-height: 180px; padding: .8rem 0 0; }.code-note { border-left: 2px solid var(--orange); color: var(--paper-dim); font-size: .7rem; line-height: 1.7; margin: 0; padding: .8rem 1rem; }.code-note b { color: var(--paper); }
.consolidate-section { background: #f4f0e8; }.try-grid { display: grid; gap: 1px; grid-template-columns: repeat(3,1fr); }.try-card { background: var(--ink); color: var(--paper); min-height: 245px; padding: clamp(1.2rem,3vw,2rem); }.try-card:nth-child(2) { background: var(--block-violet); color: var(--ink); }.try-card:nth-child(3) { background: var(--mint); color: var(--ink); }.try-number, .limits-note > span { font-family: var(--mono); font-size: .5rem; letter-spacing: .08em; text-transform: uppercase; }.try-card h3 { font-family: var(--display); font-size: 1.55rem; letter-spacing: -.06em; line-height: 1; margin: 2.2rem 0 .8rem; }.try-card p { font-size: .73rem; line-height: 1.7; margin: 0; }.try-card code { font-family: var(--mono); font-size: .64rem; }.limits-note { border: 1px solid var(--line); margin-top: 1.2rem; padding: 1.2rem 1.4rem; }.limits-note > span { color: var(--orange); }.limits-note p { color: #5e6b64; font-size: .72rem; line-height: 1.75; margin: .7rem 0 0; }.block-source { background: var(--paper-deep); padding: 2.3rem clamp(1.25rem,7vw,8.5rem); }.block-source p { color: #5f6c63; font-size: .7rem; line-height: 1.8; margin: 0 auto; max-width: var(--max); }.block-source p span { color: var(--ink); font-family: var(--mono); font-size: .49rem; letter-spacing: .08em; margin-right: .6rem; text-transform: uppercase; }.block-source a { color: var(--ink); font-weight: 800; }
@media (max-width: 900px) { .pipeline-panel, .residual-visual, .depth-layout, .calculation-grid { grid-template-columns: 1fr; }.stage-visual { min-height: 245px; }.stage-inspector { border-left: 0; border-top: 2px solid var(--mint); }.residual-route-map { min-height: 140px; }.depth-inspector { border-left: 0; border-top: 2px solid var(--block-violet); padding: 1rem 0 0; }.try-grid { grid-template-columns: 1fr; }.try-card { min-height: auto; }.stage-stepper { overflow-x: auto; grid-template-columns: repeat(8, minmax(92px,1fr)); } }
@media (max-width: 620px) { .transformer-hero { min-height: 700px; }.transformer-hero-art { min-height: 360px; }.block-hero-map { min-height: 270px; }.block-hero-map svg { height: 235px; }.hero-block-tag { font-size: .4rem; }.pipeline-head { padding-top: 1.4rem; }.pipeline-head strong { font-size: 2.1rem; }.pipeline-count strong { font-size: 2.7rem; }.pipeline-panel { padding: 1rem; }.stage-visual { min-height: 220px; padding: .8rem; }.stage-visual-2, .stage-visual-4, .stage-visual-5 { min-height: 360px; }.vector-cell { font-size: .6rem; height: 35px; width: 55px; }.attention-links { gap: .25rem; }.attention-token strong { height: 42px; width: 42px; }.attention-token i { width: 28px; }.attention-token.is-top i { width: 48px; }.attention-token small { font-size: .4rem; }.residual-equation { flex-wrap: wrap; }.residual-node { font-size: .52rem; max-width: 116px; }.residual-node small { font-size: .4rem; }.survival-heading { align-items: flex-start; flex-direction: column; gap: .5rem; }.survival-bars { gap: .45rem; }.calc-list li { grid-template-columns: 1fr; }.calc-list li::before { grid-column: 1; grid-row: auto; }.calc-list span { grid-column: 1; margin-left: 1.7rem; margin-top: -.8rem; }.calc-list code { grid-column: 1; grid-row: auto; margin-left: 1.7rem; }.code-lab-top { align-items: flex-start; flex-direction: column; gap: .8rem; }.code-lab pre { font-size: .55rem; }.stepper-controls { gap: .5rem; }.stepper-hint { font-size: .4rem; }.stepper-button { font-size: .47rem; padding: .65rem .5rem; } }
@media (prefers-reduced-motion: reduce) { .stage-tab, .vector-cell, .pipeline-progress span, .toggle-track, .toggle-track i, .route-line-skip, .survival-track i { transition: none; } }