:root {
  --ff-cyan: #63ecff;
  --ff-blue: #879fff;
  --ff-deep: #07141d;
  --ff-panel: #0c202b;
  --ff-line: rgba(99, 236, 255, 0.25);
}

.feed-forward-page { --ff-ink: var(--ff-cyan); }
.feed-forward-page .lesson-progress-track span { background: var(--ff-cyan); width: 71.4286%; }
.feed-forward-page .lesson-hero { background-color: var(--ff-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 76% 43%, rgba(99,236,255,.2), transparent 34%); }
.feed-forward-page .lesson-hero::before { background: repeating-linear-gradient(135deg, var(--ff-cyan) 0 8px, transparent 8px 16px); }
.feed-forward-page .lesson-hero h1 em, .feed-forward-page .lesson-eyebrow, .feed-forward-page .one-line-label { color: var(--ff-cyan); }
.feed-forward-page .one-line { border-color: var(--ff-cyan); }
.ff-hero-art::before { border-color: rgba(99,236,255,.34); }
.ff-hero-art::after { border-color: rgba(135,159,255,.26); }
.ff-art-map { background: radial-gradient(circle at 51% 50%, rgba(99,236,255,.11), transparent 34%), linear-gradient(rgba(238,242,234,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(238,242,234,.06) 1px, transparent 1px), #0d151b; background-size: auto, 43px 43px, 43px 43px, auto; }
.ff-hero-grid path { fill: none; stroke: rgba(99,236,255,.15); stroke-width: 1; }
.ff-hero-edges path { fill: none; stroke: url(#ffEdge); stroke-dasharray: 2 9; stroke-linecap: round; stroke-width: 1.5; }
.ff-hero-nodes circle { stroke: rgba(238,242,234,.78); stroke-width: 1.5; }
.ff-input-node { fill: var(--mint); }
.ff-hidden-node { fill: var(--ff-blue); }
.ff-output-node { fill: var(--orange); }
.ff-hero-labels text { fill: rgba(238,242,234,.76); font: 12px 'DM Mono', monospace; }
.ff-section .walkthrough-intro h2 em, .ff-try-section h2 em { color: var(--ff-cyan); }
.ff-demo, .ff-compare-demo, .ff-calc-demo { background: var(--ff-deep); border-color: rgba(99,236,255,.24); color: var(--paper); }
.ff-demo .demo-topbar, .ff-compare-demo .demo-topbar, .ff-calc-demo .demo-topbar { border-color: rgba(99,236,255,.18); }
.ff-demo .demo-index, .ff-compare-demo .demo-index, .ff-calc-demo .demo-index { color: var(--ff-cyan); }
.ff-control-deck { border-bottom: 1px solid rgba(99,236,255,.18); display: grid; gap: 1px; grid-template-columns: 1.15fr .92fr 1fr; background: rgba(99,236,255,.18); }
.ff-control-block { background: var(--ff-deep); min-width: 0; padding: 1.15rem; }
.ff-control-label { color: rgba(238,242,234,.64); display: flex; font: .54rem var(--mono); justify-content: space-between; letter-spacing: .08em; text-transform: uppercase; }
.ff-control-block output { color: var(--ff-cyan); }
.ff-control-block p, .ff-live-inspector p, .ff-feature-panel p, .ff-compare-inspector p, .ff-calc-note p { color: rgba(238,242,234,.62); font-size: .68rem; line-height: 1.65; margin: .8rem 0 0; }
.ff-choice-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.ff-choice { background: rgba(238,242,234,.03); border: 1px solid rgba(99,236,255,.26); color: var(--paper); min-height: 49px; padding: .55rem .65rem; text-align: left; }
.ff-choice strong, .ff-choice small { display: block; }
.ff-choice strong { font: .58rem var(--mono); text-transform: uppercase; }
.ff-choice small { color: rgba(238,242,234,.5); font-size: .6rem; margin-top: .25rem; }
.ff-choice:hover, .ff-choice.is-selected, .ff-choice:focus-visible { background: rgba(99,236,255,.13); border-color: var(--ff-cyan); color: var(--ff-cyan); }
.ff-choice.is-selected small { color: rgba(99,236,255,.75); }
.ff-control-block input[type='range'] { accent-color: var(--ff-cyan); margin-top: .9rem; min-height: 28px; width: 100%; }
.ff-stepbar { align-items: center; border-bottom: 1px solid rgba(99,236,255,.18); display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 1.15rem; }
.ff-stepbar p { color: rgba(238,242,234,.62); font-size: .67rem; line-height: 1.55; margin: .4rem 0 0; max-width: 360px; }
.ff-step-actions, .ff-stage-buttons { align-items: center; display: flex; gap: .35rem; }
.ff-step-actions { flex-wrap: wrap; justify-content: flex-end; }
.ff-step-nav, .ff-stage-button { background: transparent; border: 1px solid rgba(99,236,255,.28); color: rgba(238,242,234,.7); min-height: 35px; padding: .45rem .58rem; font: .51rem var(--mono); text-transform: uppercase; }
.ff-step-nav:hover, .ff-step-nav:focus-visible, .ff-stage-button:hover, .ff-stage-button.is-selected, .ff-stage-button:focus-visible { background: rgba(99,236,255,.13); border-color: var(--ff-cyan); color: var(--ff-cyan); }
.ff-state-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(220px, .7fr); }
.ff-state-grid { background: rgba(99,236,255,.18); display: grid; gap: 1px; grid-template-columns: repeat(5, minmax(125px, 1fr)); overflow-x: auto; }
.ff-state-card { background: var(--ff-deep); min-width: 125px; padding: 1rem .8rem; position: relative; transition: background 180ms ease, transform 180ms ease; }
.ff-state-card::before { background: rgba(238,242,234,.2); content: ''; height: 2px; left: .8rem; position: absolute; right: .8rem; top: 0; }
.ff-state-card.is-active { background: #0c202b; transform: translateY(-3px); }
.ff-state-card.is-active::before { background: var(--ff-cyan); }
.ff-state-heading { align-items: baseline; display: flex; justify-content: space-between; gap: .5rem; }
.ff-state-heading span, .ff-state-heading strong, .ff-state-card small, .ff-feature-panel .ff-panel-heading, .ff-live-inspector span, .ff-inspector-number span, .ff-inspector-number small, .ff-inspector-note, .ff-statusbar, .ff-token span, .ff-compare-row span, .ff-compare-inspector small, .ff-calc-label, .ff-calc-note > span, .ff-code-top, .ff-code-output span, .ff-code-walkthrough span, .ff-deferred-grid span { font-family: var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.ff-state-heading span, .ff-state-card small { color: rgba(238,242,234,.43); font-size: .45rem; }
.ff-state-heading strong { color: var(--ff-cyan); font-size: .55rem; }
.ff-state-card h4 { font: 600 .9rem var(--display); letter-spacing: -.05em; margin: 1rem 0 0; }
.ff-state-card p { color: rgba(238,242,234,.56); font-size: .62rem; line-height: 1.5; min-height: 54px; margin: .55rem 0; }
.ff-state-card output { color: var(--paper); display: block; font: .69rem var(--mono); line-height: 1.5; min-height: 43px; }
.ff-state-card small { display: block; line-height: 1.45; margin-top: .6rem; }
.ff-live-inspector { border-left: 1px solid rgba(99,236,255,.18); min-width: 0; padding: 1.15rem; }
.ff-live-inspector .inspector-kicker, .ff-compare-inspector .inspector-kicker { color: var(--ff-cyan); display: block; font: .5rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ff-live-inspector > strong, .ff-compare-inspector > strong { display: block; font: 1.08rem var(--display); letter-spacing: -.05em; line-height: 1.05; margin-top: 1.35rem; }
.ff-inspector-number { border-top: 1px solid rgba(99,236,255,.18); margin-top: 1.35rem; padding-top: .85rem; }
.ff-inspector-number span, .ff-inspector-number small { color: rgba(238,242,234,.48); display: block; font-size: .48rem; }
.ff-inspector-number output { color: var(--ff-cyan); display: block; font: .9rem var(--mono); margin: .5rem 0; }
.ff-inspector-note { border-left: 2px solid var(--ff-cyan); color: rgba(238,242,234,.58); font-size: .48rem; line-height: 1.65; margin-top: 1.15rem; padding-left: .7rem; }
.ff-feature-panel { border-top: 1px solid rgba(99,236,255,.18); padding: 1.15rem; }
.ff-panel-heading { align-items: baseline; color: rgba(238,242,234,.52); display: flex; font-size: .5rem; justify-content: space-between; }
.ff-panel-heading strong { color: var(--ff-cyan); font-weight: 400; }
.ff-feature-bars, .ff-compare-bars { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); margin-top: 1rem; }
.ff-feature-bar, .ff-compare-bar { background: rgba(238,242,234,.045); border: 1px solid rgba(238,242,234,.13); padding: .65rem; }
.ff-feature-bar.is-silent { opacity: .58; }
.ff-feature-bar header, .ff-compare-bar header { align-items: baseline; display: flex; justify-content: space-between; gap: .4rem; }
.ff-feature-bar header span, .ff-compare-bar header span { color: rgba(238,242,234,.58); font: .52rem var(--mono); }
.ff-feature-bar header strong, .ff-compare-bar header strong { color: var(--ff-cyan); font: .72rem var(--mono); }
.ff-feature-track { background: rgba(99,236,255,.12); height: 7px; margin-top: .7rem; }
.ff-feature-track i { background: var(--ff-cyan); display: block; height: 100%; transition: width 240ms ease; }
.ff-feature-bar small { color: rgba(238,242,234,.42); display: block; font: .45rem var(--mono); margin-top: .5rem; text-transform: uppercase; }
.ff-statusbar { align-items: center; border-top: 1px solid rgba(99,236,255,.15); color: rgba(238,242,234,.5); display: flex; font-size: .48rem; justify-content: space-between; gap: 1rem; padding: .78rem 1.15rem; }
.ff-statusbar i { background: var(--ff-cyan); border-radius: 50%; display: inline-block; height: 6px; margin-right: .4rem; width: 6px; }
.ff-compare-section { background: var(--paper); }
.ff-compare-section .walkthrough-intro h2 { color: var(--ink); }
.ff-token-picker { border-bottom: 1px solid rgba(99,236,255,.18); display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); background: rgba(99,236,255,.18); }
.ff-token { background: var(--ff-deep); border: 0; color: var(--paper); min-height: 96px; padding: .9rem; text-align: left; }
.ff-token:hover, .ff-token.is-selected, .ff-token:focus-visible { background: #0c202b; box-shadow: inset 0 3px 0 var(--ff-cyan); }
.ff-token span { color: rgba(238,242,234,.45); display: block; font-size: .47rem; }
.ff-token strong { display: block; font: 600 1.1rem var(--display); letter-spacing: -.06em; margin-top: .45rem; }
.ff-token small { color: rgba(238,242,234,.52); display: block; font: .52rem var(--mono); margin-top: .35rem; }
.ff-compare-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(230px, .7fr); }
.ff-compare-trace { padding: 1.15rem; }
.ff-compare-row { align-items: center; background: rgba(238,242,234,.04); border: 1px solid rgba(238,242,234,.13); display: flex; gap: 1rem; justify-content: space-between; min-height: 66px; padding: .7rem .8rem; }
.ff-compare-row span { color: rgba(238,242,234,.5); font-size: .49rem; }
.ff-compare-row output { color: var(--ff-cyan); font: .77rem var(--mono); text-align: right; }
.ff-compare-output { border-color: var(--ff-cyan); }
.ff-compare-arrow { color: var(--ff-cyan); font: .5rem var(--mono); letter-spacing: .08em; padding: .55rem 0; text-align: center; text-transform: uppercase; }
.ff-compare-inspector { border-left: 1px solid rgba(99,236,255,.18); padding: 1.15rem; }
.ff-compare-inspector p { min-height: 70px; }
.ff-compare-inspector small { color: rgba(238,242,234,.48); display: block; font-size: .47rem; line-height: 1.5; margin-top: 1rem; }
.ff-calc-header { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); background: rgba(99,236,255,.18); }
.ff-calc-header > div { background: var(--ff-deep); min-width: 0; padding: 1rem 1.15rem; }
.ff-calc-label { color: rgba(238,242,234,.48); display: block; font-size: .48rem; }
.ff-calc-header strong { color: var(--ff-cyan); display: block; font: .72rem var(--mono); margin-top: .55rem; overflow-wrap: anywhere; }
.ff-calc-table-wrap { overflow-x: auto; padding: 1.15rem 1.15rem .4rem; }
.ff-calc-table { border-collapse: collapse; min-width: 620px; width: 100%; }
.ff-calc-table caption { color: rgba(238,242,234,.52); font: .5rem var(--mono); letter-spacing: .07em; margin-bottom: .8rem; text-align: left; text-transform: uppercase; }
.ff-calc-table th, .ff-calc-table td { border-bottom: 1px solid rgba(99,236,255,.15); padding: .65rem .5rem; text-align: left; vertical-align: top; }
.ff-calc-table th { color: rgba(238,242,234,.45); font: .48rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ff-calc-table td { color: rgba(238,242,234,.72); font: .64rem var(--mono); line-height: 1.6; }
.ff-calc-table td:first-child { color: var(--ff-cyan); width: 15%; }
.ff-calc-table td:last-child { color: var(--paper); width: 23%; }
.ff-output-receipt { border: 1px solid var(--ff-cyan); margin: .6rem 1.15rem 0; padding: 1rem; }
.ff-output-receipt span { color: rgba(238,242,234,.5); display: block; font: .48rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ff-output-receipt strong { color: var(--ff-cyan); display: block; font: 1.45rem var(--display); letter-spacing: -.07em; margin: .45rem 0; }
.ff-output-receipt p { color: rgba(238,242,234,.62); font: .58rem var(--mono); line-height: 1.65; margin: 0; }
.ff-calc-note { border-top: 1px solid rgba(99,236,255,.18); margin-top: 1.15rem; padding: 1rem 1.15rem 0; }
.ff-calc-note > span { color: var(--ff-cyan); font-size: .48rem; }
.ff-calc-note p { margin-top: .5rem; }
.ff-calc-note code, .ff-overview-flow code, .ff-code-walkthrough code { color: var(--ff-cyan); font-family: var(--mono); }
.ff-code-section { background: var(--paper); }
.ff-code-section .walkthrough-intro h2 { color: var(--ink); }
.ff-code-shell { background: var(--ff-deep); border: 1px solid rgba(11,16,20,.55); color: var(--paper); overflow: hidden; }
.ff-code-top { align-items: center; border-bottom: 1px solid rgba(99,236,255,.18); color: rgba(238,242,234,.5); display: flex; font-size: .49rem; justify-content: space-between; padding: .9rem 1rem; }
.ff-run-code { background: transparent; border: 1px solid var(--ff-cyan); color: var(--ff-cyan); font: .5rem var(--mono); padding: .55rem .7rem; text-transform: uppercase; }
.ff-run-code:hover, .ff-run-code:focus-visible { background: var(--ff-cyan); color: var(--ff-deep); }
.ff-code-shell pre { margin: 0; overflow-x: auto; padding: 1.2rem; }
.ff-code-shell code { color: #e9f5e9; font: .66rem/1.7 var(--mono); }
.ff-code-output { border-top: 1px solid rgba(99,236,255,.18); padding: 1rem 1.2rem; }
.ff-code-output span { color: rgba(238,242,234,.5); display: block; font-size: .48rem; }
.ff-code-output output { color: var(--ff-cyan); display: block; font: 1.25rem var(--mono); margin: .45rem 0; }
.ff-code-output small { color: rgba(238,242,234,.58); font-size: .64rem; line-height: 1.6; }
.ff-code-walkthrough { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); margin-top: .8rem; background: var(--line); }
.ff-code-walkthrough > div { background: rgba(11,16,20,.04); padding: 1rem; }
.ff-code-walkthrough span { color: var(--text-muted); display: block; font-size: .48rem; }
.ff-code-walkthrough p { color: var(--text-muted); font-size: .68rem; line-height: 1.65; margin: .6rem 0 0; }
.ff-deferred-section { background: #d5e8e6; padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 7vw, 8.5rem); }
.ff-deferred-inner { display: grid; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); margin: 0 auto; max-width: var(--max); }
.ff-deferred-section h2, .ff-try-section h2 { color: var(--ff-deep); font: 600 clamp(3rem, 6vw, 6.3rem)/.83 var(--display); letter-spacing: -.1em; margin: 1rem 0 0; text-transform: uppercase; }
.ff-deferred-section h2 em, .ff-try-section h2 em { color: #06778c; font-style: normal; }
.ff-deferred-section p, .ff-try-section p { color: rgba(7,20,29,.7); font-size: .8rem; line-height: 1.75; margin: 1.4rem 0 0; max-width: 530px; }
.ff-deferred-grid { display: grid; gap: .8rem; }
.ff-deferred-grid article { border-left: 2px solid #06778c; padding: .35rem 0 .35rem 1rem; }
.ff-deferred-grid article:nth-child(2) { border-color: var(--orange); }
.ff-deferred-grid article:nth-child(3) { border-color: var(--ff-blue); }
.ff-deferred-grid span { color: rgba(7,20,29,.55); font-size: .48rem; }
.ff-deferred-grid h3 { color: var(--ff-deep); font: 600 1.35rem var(--display); letter-spacing: -.06em; margin: .55rem 0 0; }
.ff-deferred-grid p { font-size: .7rem; margin: .45rem 0 0; }
.ff-try-section { background: var(--ff-cyan); padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 7vw, 8.5rem); }
.ff-try-inner { align-items: end; display: flex; gap: 2rem; justify-content: space-between; margin: 0 auto; max-width: var(--max); }
.ff-try-section .try-kicker { color: rgba(7,20,29,.66); }
.ff-try-section h2 em { color: var(--paper); }
.ff-try-section p { max-width: 590px; }
.ff-try-reveal { background: var(--ff-deep); }
.ff-try-reveal:hover, .ff-try-reveal:focus-visible { background: var(--paper); color: var(--ff-deep); }
.ff-try-section .try-feedback { border-top: 1px solid rgba(7,20,29,.35); color: var(--ff-deep); margin: 2rem auto 0; max-width: var(--max); padding-top: 1rem; }
.ff-source { background: #d5e8e6; padding: 1rem clamp(1.25rem, 7vw, 8.5rem); }
.ff-source p { color: rgba(7,20,29,.68); font-size: .65rem; line-height: 1.65; margin: 0 auto; max-width: var(--max); }
.ff-source span { color: #06778c; font: .55rem var(--mono); letter-spacing: .08em; margin-right: .6rem; }
.ff-source a { color: #06778c; font-weight: 700; }
.ff-mental-check { align-items: start; border: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: .7fr 1.3fr; margin-top: .8rem; padding: 1rem 1.15rem; }
.ff-mental-check h3 { font: 600 1.15rem var(--display); letter-spacing: -.06em; margin: .65rem 0 0; }
.ff-mental-check ul { display: grid; gap: .4rem 1rem; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
.ff-mental-check li { border-left: 2px solid var(--ff-cyan); color: var(--text-muted); font-size: .68rem; padding: .4rem .55rem; }

@media (max-width: 1040px) { .ff-control-deck { grid-template-columns: 1fr 1fr; }.ff-control-block:last-child { grid-column: 1 / -1; }.ff-state-layout, .ff-compare-grid, .ff-deferred-inner { grid-template-columns: 1fr; }.ff-live-inspector, .ff-compare-inspector { border-left: 0; border-top: 1px solid rgba(99,236,255,.18); } }
@media (max-width: 760px) { .ff-stepbar, .ff-try-inner { align-items: flex-start; flex-direction: column; }.ff-step-actions { justify-content: flex-start; }.ff-stage-buttons { flex-wrap: wrap; }.ff-control-deck, .ff-calc-header, .ff-code-walkthrough { grid-template-columns: 1fr; }.ff-control-block:last-child { grid-column: auto; }.ff-token-picker { grid-template-columns: 1fr; }.ff-token { min-height: 75px; }.ff-mental-check { grid-template-columns: 1fr; }.ff-mental-check ul { grid-template-columns: 1fr; }.ff-try-reveal { width: 100%; justify-content: space-between; }.ff-calc-header > div { padding: .8rem 1rem; } }
@media (max-width: 520px) { .ff-choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.ff-choice { width: 100%; }.ff-state-grid { grid-template-columns: repeat(5, minmax(155px, 1fr)); }.ff-compare-row { align-items: flex-start; flex-direction: column; gap: .55rem; }.ff-compare-row output { text-align: left; }.ff-demo .demo-topbar, .ff-compare-demo .demo-topbar, .ff-calc-demo .demo-topbar { align-items: flex-start; flex-direction: column; padding: .8rem; }.ff-feature-panel, .ff-live-inspector, .ff-compare-inspector, .ff-compare-trace, .ff-calc-table-wrap { padding-left: .8rem; padding-right: .8rem; } }
@media (max-width: 520px) {
  .ff-state-grid { grid-template-columns: 1fr; overflow: visible; }
  .ff-state-card { min-width: 0; }
  .ff-calc-table-wrap { overflow-x: hidden; }
  .ff-calc-table { display: block; min-width: 0; width: 100%; }
  .ff-calc-table caption { display: block; width: 100%; }
  .ff-calc-table thead { clip: rect(0 0 0 0); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
  .ff-calc-table tbody, .ff-calc-table tr, .ff-calc-table td { display: block; width: 100% !important; }
  .ff-calc-table tr { border-bottom: 1px solid rgba(99,236,255,.15); padding: .7rem 0; }
  .ff-calc-table tr:last-child { border-bottom: 0; }
  .ff-calc-table td { border: 0; padding: .24rem 0; }
  .ff-calc-table td::before { color: var(--muted); display: block; font: 700 .62rem/1.2 var(--mono); letter-spacing: .11em; margin-bottom: .12rem; text-transform: uppercase; }
  .ff-calc-table td:first-child { color: var(--ff-cyan); padding-top: 0; }
  .ff-calc-table td:first-child::before { content: 'hidden neuron'; }
  .ff-calc-table td:nth-child(2)::before { content: 'weighted sum'; }
  .ff-calc-table td:nth-child(3)::before { content: 'activation'; }
}
@media (prefers-reduced-motion: reduce) { .ff-hero-edges path, .ff-state-card, .ff-feature-track i { animation: none; transition: none; } }