.visual-hero { padding-bottom: 2.5rem; }
.visual-legend { position: relative; overflow: hidden; min-height: 220px; padding: 1.35rem; }
.visual-legend::after { content: ""; position: absolute; right: -50px; bottom: -70px; width: 210px; height: 210px; border: 1px dashed var(--brand); border-radius: 50%; opacity: .35; }
.legend-orb { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 1rem; border: 8px solid var(--brand-soft); border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.legend-orb::after { content: "TOKEN"; position: absolute; left: 68px; color: var(--brand); font-family: var(--mono); font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.legend-orb.moving { animation: orb-breathe 1.8s ease-in-out 2; }

.lab-jump { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.lab-jump a { display: flex; min-height: 72px; align-items: center; justify-content: center; gap: .55rem; padding: .75rem; border-right: 1px solid var(--line); color: var(--ink); font-size: .9rem; font-weight: 750; text-decoration: none; }
.lab-jump a:last-child { border-right: 0; }
.lab-jump a:hover { background: var(--brand-soft); color: var(--brand); }
.lab-jump span { color: var(--brand); font-family: var(--mono); font-size: .73rem; }
.learning-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.learning-map a { min-height: 86px; flex-direction: column; align-items: flex-start; gap: .2rem; padding-inline: 1rem; }
.learning-map a:nth-child(4) { border-right: 0; }
.learning-map a:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
.learning-map span { font-size: .66rem; letter-spacing: .05em; }
.explainer-section { scroll-margin-top: 80px; }

.motion-panel, .token-lab, .context-lab, .kv-lab, .mode-lab { border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.motion-toolbar, .token-demo-head, .kv-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.motion-controls { display: flex; flex-wrap: wrap; gap: .5rem; }
.lab-button { min-height: 36px; padding: .38rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; font-size: .84rem; font-weight: 760; }
.lab-button:hover { border-color: var(--brand); color: var(--brand); }
.lab-button.primary { border-color: var(--brand); background: var(--brand); color: #fff; }
.lab-button:disabled { cursor: default; opacity: .6; }
.lab-button:focus-visible, .context-controls button:focus-visible, .kv-concurrency button:focus-visible, .mode-tabs button:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 2px; }
.step-counter { color: var(--muted); font-family: var(--mono); font-size: .82rem; }

.request-track { position: relative; display: grid; grid-template-columns: .8fr .25fr 1fr .25fr 1fr .25fr 1fr .25fr .8fr; align-items: center; min-height: 285px; padding: 2rem 1.25rem; overflow: hidden; }
.endpoint, .machine { position: relative; z-index: 2; min-height: 145px; display: flex; flex-direction: column; justify-content: center; padding: .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: center; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, opacity 220ms ease; }
.endpoint { min-height: 120px; }
.endpoint strong, .machine strong { font-size: .94rem; }
.endpoint small, .machine small { color: var(--muted); font-size: .73rem; line-height: 1.45; }
.endpoint-icon { width: 34px; height: 34px; display: grid; place-items: center; margin: 0 auto .5rem; border-radius: 50%; background: var(--surface-2); color: var(--brand); font-weight: 900; }
.machine-rank { color: var(--brand); font-family: var(--mono); font-size: .63rem; font-weight: 800; }
.layer-stack { display: flex; justify-content: center; gap: 3px; margin-top: .65rem; }
.layer-stack i { width: 18%; height: 7px; border-radius: 2px; background: var(--surface-3); transition: background 180ms ease; }
.track-link { position: relative; z-index: 1; height: 2px; background: var(--line); }
.track-link::after { content: ""; position: absolute; top: -3px; right: -1px; border-width: 4px 0 4px 6px; border-style: solid; border-color: transparent transparent transparent var(--line); }
.request-track [data-flow-node].is-active { transform: translateY(-6px); border-color: var(--brand); box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 18%, transparent); }
.request-track [data-flow-node].is-active .layer-stack i { background: var(--brand); animation: layer-pulse .8s ease-in-out infinite alternate; animation-play-state: paused; }
.motion-panel.is-playing .request-track [data-flow-node].is-active .layer-stack i { animation-play-state: running; }
.request-track [data-flow-node].is-done { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.request-packet { position: absolute; z-index: 4; top: 50%; left: 7.3%; width: 28px; height: 28px; display: grid; place-items: center; transform: translate(-50%, -50%); border: 5px solid var(--brand-soft); border-radius: 50%; background: var(--brand); color: transparent; box-shadow: 0 0 0 1px var(--brand), 0 5px 16px color-mix(in srgb, var(--brand) 40%, transparent); transition: left 520ms cubic-bezier(.2,.8,.2,1), background 180ms ease, opacity 180ms ease; }
.request-packet.is-token { background: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 5px 16px color-mix(in srgb, var(--accent) 40%, transparent); }
.request-packet.is-teleporting { opacity: 0; transition: none; }
.flow-story { min-height: 118px; display: grid; grid-template-columns: 110px 1fr; gap: .15rem 1rem; align-items: center; padding: 1rem 1.3rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--brand-soft) 58%, var(--surface)); }
.flow-story .flow-kicker { grid-row: 1 / 3; align-self: stretch; display: grid; place-items: center; border-radius: 10px; background: var(--brand); color: #fff; font-size: .78rem; font-weight: 850; text-align: center; }
.flow-story strong { align-self: end; font-size: 1.08rem; }
.flow-story p { align-self: start; margin: 0; color: var(--muted); font-size: .88rem; }
.plain-conclusion { margin-top: 1rem; padding: 1rem 1.15rem; border-left: 4px solid var(--brand); border-radius: 0 12px 12px 0; background: var(--brand-soft); }

.token-demo-head > div:first-child { display: flex; flex-direction: column; }
.token-demo-head span { color: var(--muted); font-size: .72rem; }
.token-factory { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: .55rem; padding: 1.4rem; }
.factory-step { min-height: 96px; display: grid; grid-template-columns: 32px 1fr; align-content: center; gap: 0 .6rem; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); opacity: .55; transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease; }
.factory-step > span { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--brand); font-weight: 900; }
.factory-step strong { font-size: .9rem; }
.factory-step small { color: var(--muted); font-size: .7rem; }
.factory-step.is-on { transform: translateY(-4px); border-color: var(--brand); opacity: 1; box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 12%, transparent); }
.factory-step.is-on > span { background: var(--brand); color: #fff; }
.factory-arrow { color: var(--muted); }
.decode-loop-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem .7rem; margin: 0 1.4rem 1.25rem; padding: .65rem .8rem; border: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface)); font-size: .74rem; }
.decode-loop-note span { color: var(--muted); font-weight: 750; }
.decode-loop-note strong { color: var(--brand); font-family: var(--mono); }
.decode-loop-note i { width: 1px; height: 20px; background: var(--line); }
.token-workbench { display: grid; grid-template-columns: 1.1fr .8fr 1.1fr; gap: 1rem; padding: 1.4rem; border-top: 1px solid var(--line); background: var(--surface-2); }
.token-stream, .candidate-box { min-height: 140px; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.stream-label, .candidate-box > span { display: block; margin-bottom: .7rem; color: var(--muted); font-size: .72rem; font-weight: 750; }
.token-chips { display: flex; flex-wrap: wrap; gap: .38rem; }
.token-chips i { padding: .25rem .46rem; border-radius: 6px; background: var(--blue-soft); color: var(--blue); font-style: normal; font-size: .78rem; font-weight: 760; }
.candidate-box div { display: grid; gap: .45rem; }
.candidate-box i { position: relative; z-index: 0; overflow: hidden; padding: .28rem .45rem; border-radius: 5px; font-style: normal; font-size: .72rem; }
.candidate-box i::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: var(--p); background: var(--brand-soft); }
.generated-line { min-height: 44px; font-size: 1.3rem; font-weight: 850; letter-spacing: .06em; }
.typing-caret { display: inline-block; width: 2px; height: 1.2em; vertical-align: -.2em; background: var(--brand); animation: caret-blink .75s steps(1) infinite; animation-play-state: paused; }
.token-lab.is-playing .typing-caret { animation-play-state: running; }
[data-token-candidates].is-selecting i:first-child { outline: 2px solid var(--brand); outline-offset: 1px; }
.output-stream small { color: var(--muted); }
.prefill-decode-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.prefill-decode-compare article { padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.prefill-decode-compare h3 { margin: .6rem 0 .25rem; }
.prefill-decode-compare p { margin: 0; color: var(--muted); }
.phase-label { display: inline-flex; padding: .2rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 850; }
.phase-label.prefill { background: var(--blue-soft); color: var(--blue); }
.phase-label.decode { background: var(--accent-soft); color: var(--accent); }

.context-controls { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.context-controls button { min-height: 58px; border: 0; border-right: 1px solid var(--line); background: var(--surface-2); color: var(--muted); cursor: pointer; font-weight: 750; }
.context-controls button:last-child { border-right: 0; }
.context-controls button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.context-dashboard { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .45fr); gap: 1.2rem; padding: 1.3rem; }
.context-gauge { min-width: 0; }
.gauge-top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.gauge-top > div:last-child { text-align: right; }
.gauge-top span { display: block; color: var(--muted); font-size: .72rem; }
.gauge-top strong { font-size: 1.45rem; }
.context-bar { height: 60px; display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: repeating-linear-gradient(90deg, var(--surface-2) 0 9%, transparent 9% 10%); }
.context-bar i { display: grid; place-items: center; width: var(--segment); min-width: 0; color: #fff; font-style: normal; transition: width 450ms cubic-bezier(.2,.8,.2,1); }
.context-bar i span { overflow: hidden; padding: 0 .2rem; font-size: .69rem; font-weight: 850; white-space: nowrap; }
.context-bar .ctx-system, .context-legend .ctx-system::before { background: #375a7f; }
.context-bar .ctx-tools, .context-legend .ctx-tools::before { background: #6b57a7; }
.context-bar .ctx-history, .context-legend .ctx-history::before { background: #277f6a; }
.context-bar .ctx-user, .context-legend .ctx-user::before { background: #cf6b3d; }
.context-bar .ctx-output, .context-legend .ctx-output::before { background: #9a6500; }
.context-bar .ctx-free, .context-legend .ctx-free::before { background: var(--surface-3); }
.context-bar .ctx-free { color: var(--muted); }
.context-threshold { position: relative; height: 35px; border-top: 1px dashed var(--line); }
.context-threshold span { position: absolute; left: var(--mark); top: 4px; transform: translateX(-100%); color: var(--muted); font-size: .66rem; white-space: nowrap; }
.context-threshold span::before { content: ""; position: absolute; left: 100%; bottom: 100%; height: 35px; border-left: 1px dashed var(--danger); }
.context-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; color: var(--muted); font-size: .72rem; }
.context-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.context-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; }
.context-result { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.context-result > span { display: inline-flex; padding: .18rem .5rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .7rem; font-weight: 850; }
.context-result strong { display: block; margin: .8rem 0 .3rem; font-size: 1.1rem; }
.context-result p { margin: 0; color: var(--muted); font-size: .86rem; }
.context-result small { display: block; margin-top: 1rem; color: var(--muted); font-size: .68rem; }
.context-result[data-context-state="caution"] > span { background: var(--warning-soft); color: var(--warning); }
.context-result[data-context-state="danger"] > span { background: var(--danger-soft); color: var(--danger); }
.context-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: context-rule; }
.context-rules li { position: relative; min-height: 115px; padding: 1rem 1rem 1rem 3rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); counter-increment: context-rule; }
.context-rules li::before { content: counter(context-rule); position: absolute; left: 1rem; top: 1rem; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font-size: .72rem; font-weight: 900; }
.context-rules strong { display: block; }
.context-rules span { color: var(--muted); font-size: .82rem; }

.kv-controls { align-items: flex-start; }
.kv-concurrency { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .78rem; }
.kv-concurrency button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); cursor: pointer; }
.kv-concurrency button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; }
.kv-machine { display: grid; gap: .7rem; padding: 1.4rem; }
.kv-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 1rem; }
.kv-row > strong { font-size: .82rem; }
.kv-blocks { min-height: 58px; display: flex; flex-wrap: wrap; align-content: center; gap: 5px; padding: .55rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.kv-blocks i { width: 23px; height: 32px; display: grid; place-items: center; border-radius: 4px; background: var(--blue); color: #fff; font-style: normal; font-size: .55rem; }
.kv-blocks i.is-new { animation: block-in 240ms ease-out both; }
.cache-blocks i { width: 30px; background: var(--request-color, var(--brand)); font-size: .52rem; font-weight: 850; }
.kv-arrow-down { padding-left: 146px; color: var(--muted); font-size: .72rem; }
.kv-capacity { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; align-items: center; padding-top: .8rem; border-top: 1px dashed var(--line); }
.kv-capacity > div:first-child span { display: block; color: var(--muted); font-size: .68rem; }
.kv-capacity > div:first-child strong { font-size: .82rem; }
.capacity-track { height: 16px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.capacity-track i { display: block; width: var(--fill); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--warning), var(--danger)); transition: width 320ms ease; }
.kv-capacity small { grid-column: 1 / -1; color: var(--muted); font-size: .68rem; }
.myth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.myth-grid article { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.myth-grid article > span { display: block; color: var(--brand); font-size: .7rem; font-weight: 850; }
.myth-grid strong { display: block; margin: .25rem 0; }
.myth-grid p { margin: 0; color: var(--muted); font-size: .8rem; }

.mode-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.mode-tabs button { min-height: 60px; border: 0; border-right: 1px solid var(--line); background: var(--surface-2); color: var(--muted); cursor: pointer; font-weight: 780; }
.mode-tabs button:last-child { border-right: 0; }
.mode-tabs button[aria-selected="true"] { background: var(--brand); color: #fff; }
.mode-stage { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); min-height: 360px; }
.mode-diagram { position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; overflow: hidden; background: radial-gradient(circle at 50% 50%, var(--brand-soft), transparent 55%); }
.mode-copy { padding: 1.4rem; border-left: 1px solid var(--line); background: var(--surface-2); }
.mode-copy > span { display: inline-flex; padding: .2rem .5rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .7rem; font-weight: 850; }
.mode-copy h3 { margin: .8rem 0 .4rem; font-size: 1.35rem; }
.mode-copy p { color: var(--muted); font-size: .86rem; }
.mode-copy dl { margin: 1rem 0 0; }
.mode-copy dl div { padding: .65rem 0; border-top: 1px solid var(--line); }
.mode-copy dt { color: var(--muted); font-size: .68rem; }
.mode-copy dd { margin: .1rem 0 0; font-size: .82rem; font-weight: 700; }
.mode-node { position: relative; z-index: 2; width: 150px; min-height: 150px; display: flex; flex-direction: column; justify-content: center; padding: .8rem; border: 2px solid var(--brand); border-radius: 16px; background: var(--surface); text-align: center; box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 12%, transparent); }
.mode-node b { font-size: .9rem; }
.mode-node small { color: var(--muted); font-size: .68rem; }
.mode-node .mode-layers { height: 35px; display: flex; align-items: end; justify-content: center; gap: 3px; margin-top: .5rem; }
.mode-node .mode-layers i { width: 10px; height: var(--h, 24px); border-radius: 2px; background: var(--brand); }
.mode-arrow { position: relative; z-index: 1; color: var(--brand); font-size: 1.45rem; animation: arrow-flow 1.3s ease-in-out 2; }
.mode-node.tp { width: 190px; }
.mode-node.tp::after { content: "每层的一半"; position: absolute; inset: auto .7rem .55rem; padding: .2rem; border-radius: 4px; background: var(--brand-soft); color: var(--brand); font-size: .62rem; }
.mode-node.replica-group { width: 235px; min-height: 210px; border-style: dashed; }
.mode-node.replica-group em { margin-top: .5rem; color: var(--brand); font-style: normal; font-size: .68rem; font-weight: 800; }
.mode-gateway { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); padding: .35rem .7rem; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: .68rem; font-weight: 800; }

/* TP / PP and multi-node topology explainer */
.parallel-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.parallel-controls > div { display: grid; }
.parallel-controls span { color: var(--muted); font-size: .74rem; }
.parallel-story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.parallel-card { overflow: hidden; padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.parallel-card.tp-story { border-top: 4px solid var(--blue); }
.parallel-card.pp-story { border-top: 4px solid var(--brand); }
.parallel-title span { display: inline-flex; padding: .2rem .55rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .7rem; font-weight: 850; }
.tp-story .parallel-title span { background: var(--blue-soft); color: var(--blue); }
.parallel-title h3 { margin: .55rem 0 1rem; font-size: 1.2rem; }
.parallel-card > p { color: var(--muted); font-size: .84rem; }
.parallel-card dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin: 1rem 0 0; }
.parallel-card dl div { padding: .7rem; border-radius: 10px; background: var(--surface-2); }
.parallel-card dt { color: var(--muted); font-size: .66rem; }
.parallel-card dd { margin: .2rem 0 0; font-size: .78rem; font-weight: 700; }

.tp-stage { min-height: 245px; display: grid; align-content: center; gap: .65rem; padding: 1rem; border-radius: 14px; background: color-mix(in srgb, var(--blue-soft) 55%, var(--surface)); }
.layer-ticket { justify-self: center; padding: .3rem .7rem; border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line)); border-radius: 999px; background: var(--surface); color: var(--blue); font-size: .72rem; font-weight: 850; }
.layer-ticket.next { opacity: .65; }
.tp-workers { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
.tp-workers span { position: relative; min-height: 68px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: center; }
.tp-workers b, .tp-workers small { position: relative; z-index: 2; display: block; }
.tp-workers small { color: var(--muted); font-size: .65rem; }
.tp-workers i { position: absolute; inset: auto 0 0; height: 5px; background: var(--blue); transform-origin: left; animation: tp-work 2.4s ease-in-out infinite; animation-play-state: paused; }
.sync-gate { position: relative; min-height: 50px; display: grid; place-items: center; padding: .45rem; border: 1px dashed var(--blue); border-radius: 9px; background: var(--surface); text-align: center; }
.sync-gate::before, .sync-gate::after { content: ""; position: absolute; top: -14px; height: 14px; border-left: 2px solid var(--blue); }
.sync-gate::before { left: 25%; }
.sync-gate::after { right: 25%; }
.sync-gate b { color: var(--blue); font-size: .74rem; }
.sync-gate small { color: var(--muted); font-size: .62rem; }
.sync-gate { animation: sync-pulse 2.4s ease-in-out infinite; animation-play-state: paused; }

.pp-stage { position: relative; min-height: 245px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .35rem; padding: 1rem; overflow: hidden; border-radius: 14px; background: color-mix(in srgb, var(--brand-soft) 58%, var(--surface)); }
.pp-stage span { position: relative; z-index: 2; min-height: 90px; display: grid; place-items: center; align-content: center; padding: .5rem; border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); border-radius: 10px; background: var(--surface); text-align: center; }
.pp-stage span b, .pp-stage span small { display: block; }
.pp-stage span small { color: var(--muted); font-size: .64rem; }
.pp-stage > i { position: relative; z-index: 2; color: var(--brand); font-style: normal; font-size: .55rem; font-weight: 850; text-align: center; }
.pp-stage > i::after { content: "→"; display: block; font-size: 1.2rem; }
.pp-stage > em { position: absolute; z-index: 3; top: 46%; left: 15%; width: 20px; height: 20px; display: grid; place-items: center; transform: translate(-50%, -50%); border: 3px solid var(--brand-soft); border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 0 0 1px var(--brand); font-style: normal; font-size: .48rem; font-weight: 900; animation: pp-baton 4.2s ease-in-out infinite; animation-play-state: paused; }
.pp-stage > em.batch-b { top: 53%; animation-delay: -1.4s; }
.pp-stage > em.batch-c { top: 60%; animation-delay: -2.8s; }
.pipeline-caption { position: absolute; z-index: 4; right: 10px; bottom: 9px; left: 10px; color: var(--muted); font-size: .55rem; text-align: center; }
.parallel-story.is-playing .tp-workers i,
.parallel-story.is-playing .sync-gate,
.parallel-story.is-playing .pp-stage > em { animation-play-state: running; }

.serial-answer { display: grid; grid-template-columns: minmax(235px, .36fr) 1fr; gap: 1.2rem; align-items: center; margin-top: 1rem; padding: 1.1rem 1.2rem; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); border-radius: var(--radius); background: linear-gradient(120deg, var(--brand-soft), var(--surface)); }
.serial-answer h3 { margin: .5rem 0 0; }
.serial-answer > p { margin: 0; color: var(--muted); font-size: .88rem; }
.answer-badge, .option-state, .topology-label { display: inline-flex; padding: .22rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 850; }
.answer-badge { background: var(--brand); color: #fff; }
.inline-heading { margin-top: 2rem; }
.inline-heading h3 { margin: .15rem 0 0; font-size: 1.35rem; }

.spark-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.spark-option { padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.spark-option.current { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: inset 0 4px 0 var(--brand); }
.spark-option h3 { margin: .6rem 0 1rem; }
.option-state.estimated { background: var(--warning-soft); color: var(--warning); }
.option-state.verified { background: var(--brand-soft); color: var(--brand); }
.memory-split { display: flex; min-height: 78px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.memory-split i, .memory-split em { display: grid; place-items: center; align-content: center; padding: .55rem; font-style: normal; text-align: center; }
.memory-split i { width: var(--share); background: var(--brand); color: #fff; }
.two-spark .memory-split i { background: var(--warning); }
.memory-split em { flex: 1; color: var(--ink); }
.memory-split b, .memory-split small { display: block; }
.memory-split b { font-size: .85rem; }
.memory-split small { opacity: .78; font-size: .6rem; }
.spark-option ul, .four-topologies ul { padding-left: 1.1rem; color: var(--muted); font-size: .8rem; }
.spark-option li + li, .four-topologies li + li { margin-top: .4rem; }
.option-verdict { display: block; padding: .75rem; border-radius: 9px; font-size: .8rem; }
.option-verdict.caution { background: var(--warning-soft); color: var(--warning); }
.option-verdict.good { background: var(--brand-soft); color: var(--brand); }

.three-node-explainer { display: grid; grid-template-columns: minmax(420px, .92fr) minmax(0, 1.08fr); gap: 1rem; align-items: start; }
.triangle-network { position: relative; min-height: 420px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; place-items: center; overflow: hidden; padding: 38px clamp(28px, 7vw, 78px) 32px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 50% 48%, var(--brand-soft), var(--surface) 63%); }
.triangle-node { position: relative; z-index: 5; width: 132px; min-height: 92px; display: grid; place-items: center; align-content: center; padding: .5rem; border: 2px solid var(--brand); border-radius: 13px; background: var(--surface); text-align: center; box-shadow: 0 9px 24px color-mix(in srgb, var(--brand) 14%, transparent); }
.triangle-node small, .triangle-node strong, .triangle-node b { display: block; }
.triangle-node small { color: var(--muted); font-size: .62rem; }
.triangle-node b { color: var(--brand); font-size: .68rem; }
.triangle-node.node-0 { grid-column: 1 / -1; grid-row: 1; }
.triangle-node.node-1 { grid-column: 1; grid-row: 3; justify-self: start; }
.triangle-node.node-2 { grid-column: 2; grid-row: 3; justify-self: end; }
.triangle-edge { position: absolute; z-index: 1; top: var(--edge-y, 0); left: var(--edge-x, 0); width: var(--edge-length, 0); height: 3px; background: var(--brand); transform: rotate(var(--edge-angle, 0deg)); transform-origin: 0 50%; }
.triangle-edge span { position: absolute; top: -28px; left: 50%; transform: translateX(-50%) rotate(var(--edge-label-angle, 0deg)); padding: .16rem .38rem; border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line)); border-radius: 999px; background: var(--surface); color: var(--brand); font-size: .56rem; font-weight: 800; white-space: nowrap; }
.triangle-edge.muted-edge { background: var(--line); }
.triangle-edge.muted-edge span { color: var(--muted); }
.path-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.path-facts article { display: grid; grid-template-columns: 30px 1fr; gap: .65rem; padding: .85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.path-facts article > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font-size: .72rem; font-weight: 900; }
.path-facts strong { font-size: .83rem; }
.path-facts p { margin: .3rem 0 0; color: var(--muted); font-size: .74rem; }

.four-topologies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.four-topologies > article { padding: 1.05rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.four-topologies > article.recommended-topology { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: inset 0 4px 0 var(--brand); }
.four-topologies h3 { margin: .55rem 0; }
.four-topologies p { color: var(--muted); font-size: .8rem; }
.four-topologies > article > strong { color: var(--ink); font-size: .8rem; }
.topology-label.risk { background: var(--danger-soft); color: var(--danger); }
.topology-label.caution { background: var(--warning-soft); color: var(--warning); }
.topology-label.good { background: var(--brand-soft); color: var(--brand); }
.line-topology, .switch-topology { min-height: 98px; display: flex; align-items: center; justify-content: center; padding: .6rem; border-radius: 10px; background: var(--surface-2); }
.line-topology i, .ring-topology i, .switch-topology i { position: relative; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid var(--brand); border-radius: 8px; background: var(--surface); color: var(--brand); font-style: normal; font-size: .7rem; font-weight: 900; }
.line-topology b { width: 23px; height: 2px; background: var(--line); }
.ring-topology { position: relative; min-height: 98px; display: grid; grid-template-columns: 1fr 1fr; place-items: center; gap: 12px 76px; padding: .55rem 2rem; border-radius: 10px; background: var(--surface-2); }
.ring-topology::before { content: ""; position: absolute; width: 110px; height: 52px; border: 2px solid var(--brand); border-radius: 12px; }
.ring-topology b { display: none; }
.switch-topology { position: relative; gap: .35rem; padding-top: 45px; }
.switch-topology > strong { position: absolute; top: 8px; left: 50%; z-index: 3; min-width: 72px; transform: translateX(-50%); padding: .25rem; border-radius: 7px; background: var(--ink); color: var(--surface); font-size: .58rem; line-height: 1.1; text-align: center; }
.switch-topology i::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 16px; background: var(--brand); }

/* Interactive physical topology labs */
.topology-motion-panel, .four-node-lab, .engine-lab { overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: var(--surface); box-shadow: var(--shadow); }
.topology-motion-panel .motion-toolbar { display: grid; grid-template-columns: 1fr auto auto; }
.topology-motion-panel .motion-toolbar > div:first-child { display: grid; gap: .1rem; }
.topology-motion-panel .motion-toolbar small { color: var(--muted); font-size: .68rem; }
.triangle-node, .triangle-edge { transition: opacity 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 220ms ease; }
.triangle-node { border-color: var(--blue); }
.triangle-node b { color: var(--blue); }
.triangle-edge { background: var(--blue); opacity: .5; }
.triangle-edge span { color: var(--blue); }
.triangle-node.is-active { border-color: var(--brand); box-shadow: 0 0 0 5px var(--brand-soft), 0 12px 28px color-mix(in srgb, var(--brand) 22%, transparent); }
.triangle-node.is-active b { color: var(--brand); }
.triangle-node.is-done { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.triangle-edge.is-active { height: 5px; background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand)); background-size: 200% 100%; opacity: 1; box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 32%, transparent); animation: network-flow 1s linear infinite; animation-play-state: paused; }
.topology-motion-panel.is-playing .triangle-edge.is-active { animation-play-state: running; }
.triangle-edge.is-active span { color: var(--brand); }
.triangle-network[data-three-state="physical"] .triangle-edge { opacity: 1; }
.triangle-packet { position: absolute; z-index: 8; top: var(--packet-y, 25%); left: var(--packet-x, 50%); min-width: 42px; height: 24px; display: grid; place-items: center; transform: translate(-50%, -50%); border-radius: 999px; background: var(--brand); color: #fff; font-size: .56rem; font-weight: 850; box-shadow: 0 0 0 6px var(--brand-soft); transition: left 600ms cubic-bezier(.2,.8,.2,1), top 600ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease; }
.triangle-packet.is-hidden { opacity: 0; }
.three-live-copy { display: grid; grid-template-rows: auto auto; align-content: start; gap: .75rem; }
.topology-story { display: grid; gap: .3rem; align-content: center; min-height: 126px; padding: 1rem; border-radius: 12px; background: var(--brand-soft); }
.topology-story > span { width: fit-content; padding: .18rem .45rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: .65rem; font-weight: 850; }
.topology-story > strong { font-size: 1rem; }
.topology-story p { margin: 0; color: var(--muted); font-size: .78rem; }
.compact-facts article { padding: .7rem; }

.topology-toolbar { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: center; padding: .8rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.topology-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.topology-tabs button, .engine-tabs button { min-height: 38px; padding: .4rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; font-weight: 760; }
.topology-tabs button[aria-selected="true"], .engine-tabs button[aria-selected="true"] { border-color: var(--brand); background: var(--brand); color: #fff; }
.topology-tabs button:focus-visible, .engine-tabs button:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 2px; }
.four-stage { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); min-height: 380px; }
.four-live-diagram { min-width: 0; min-height: 380px; display: grid; place-items: center; padding: 1.4rem; overflow: hidden; background: radial-gradient(circle at 50% 50%, var(--blue-soft), transparent 62%); }
.four-live-copy { padding: 1.25rem; border-left: 1px solid var(--line); background: var(--surface-2); }
.four-live-copy h3 { margin: .7rem 0 .45rem; }
.four-live-copy > p { color: var(--muted); font-size: .82rem; }
.four-live-copy dl { margin: .9rem 0 0; }
.four-live-copy dl div { padding: .55rem 0; border-top: 1px solid var(--line); }
.four-live-copy dt { color: var(--muted); font-size: .66rem; }
.four-live-copy dd { margin: .12rem 0 0; font-size: .78rem; font-weight: 700; }
.four-story { border-top: 1px solid var(--line); border-radius: 0; }
.four-network { position: relative; width: min(720px, 100%); min-height: 260px; display: grid; place-items: center; }
.four-node-row { width: 100%; display: flex; align-items: center; justify-content: center; }
.four-node { position: relative; z-index: 3; width: 112px; min-height: 112px; display: grid; place-items: center; align-content: center; padding: .55rem; border: 2px solid var(--blue); border-radius: 14px; background: var(--surface); text-align: center; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, opacity 220ms ease; }
.four-node small, .four-node strong, .four-node b { display: block; }
.four-node small { color: var(--muted); font-size: .6rem; }
.four-node strong { font-size: 1rem; }
.four-node b { color: var(--blue); font-size: .65rem; }
.four-node.is-active { transform: translateY(-7px); border-color: var(--brand); box-shadow: 0 0 0 5px var(--brand-soft), 0 14px 28px color-mix(in srgb, var(--brand) 18%, transparent); }
.four-node.is-active b { color: var(--brand); }
.four-node.is-done { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.four-link { position: relative; z-index: 2; width: clamp(22px, 5vw, 62px); height: 4px; display: block; background: var(--blue); opacity: .45; transition: opacity 200ms ease, height 200ms ease, box-shadow 200ms ease; }
.four-link::after { content: ""; position: absolute; top: -4px; right: -2px; border-width: 6px 0 6px 8px; border-style: solid; border-color: transparent transparent transparent var(--blue); }
.four-link span { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: .56rem; white-space: nowrap; }
.four-link.is-active, .switch-branch > i.is-active { background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand)); background-size: 200% 100%; opacity: 1; box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 35%, transparent); animation: network-flow .9s linear infinite; animation-play-state: paused; }
.four-node-lab.is-playing .four-link.is-active,
.four-node-lab.is-playing .switch-branch > i.is-active { animation-play-state: running; }
.four-link.is-active::after { border-left-color: var(--brand); }
.diagram-note { position: absolute; bottom: 18px; padding: .3rem .65rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .66rem; }
.ring-return { position: absolute; z-index: 1; top: 34px; left: 14%; right: 14%; height: 64px; border: 3px solid var(--blue); border-bottom: 0; border-radius: 32px 32px 0 0; opacity: .72; }
.ring-return span { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); color: var(--blue); font-size: .6rem; font-weight: 800; white-space: nowrap; }
.ring-return.is-active { opacity: 1; border-color: var(--brand); }
.diagram-switch { display: grid; grid-template-rows: auto 1fr; align-content: center; }
.switch-hub { position: relative; z-index: 4; min-width: 150px; padding: .7rem 1rem; border: 2px solid var(--blue); border-radius: 12px; background: var(--ink); color: var(--surface); text-align: center; transition: box-shadow 220ms ease, border-color 220ms ease, transform 220ms ease; }
.switch-hub small, .switch-hub strong { display: block; }
.switch-hub small { opacity: .72; font-size: .6rem; }
.switch-hub.is-active { transform: scale(1.04); border-color: var(--accent); box-shadow: 0 0 0 7px var(--brand-soft); }
.switch-node-grid { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; align-items: start; margin-top: 0; }
.switch-branch { display: grid; justify-items: center; }
.switch-branch > i { width: 4px; height: 54px; display: block; background: var(--blue); opacity: .45; }
.switch-branch .four-node { width: 100%; max-width: 112px; min-height: 96px; }
.topology-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1rem; }
.topology-outcomes article { display: grid; gap: .45rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.topology-outcomes .recommended-topology { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: inset 0 4px 0 var(--brand); }
.topology-outcomes p { margin: 0; color: var(--muted); font-size: .76rem; }

/* Inference engine learning and comparison */
.engine-lab { --engine-color: var(--brand); }
.engine-lab[data-engine-current="vllm"] { --engine-color: var(--blue); }
.engine-lab[data-engine-current="trtllm"] { --engine-color: var(--accent); }
.engine-lab[data-engine-current="tgi"] { --engine-color: var(--warning); }
.engine-lab[data-engine-current="llamacpp"] { --engine-color: var(--pending); }
.engine-lab[data-engine-current="ollama"] { --engine-color: var(--muted); }
.engine-primer { display: grid; grid-template-columns: 1fr auto 1.1fr auto 1fr; align-items: center; gap: .65rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.engine-primer > div { min-height: 78px; display: grid; place-items: center; align-content: center; padding: .65rem; border-radius: 10px; background: var(--surface-2); text-align: center; }
.engine-primer .engine-center { background: var(--brand); color: #fff; }
.engine-primer span, .engine-primer small { display: block; }
.engine-primer span { font-weight: 850; }
.engine-primer small { color: var(--muted); font-size: .66rem; }
.engine-primer .engine-center small { color: rgba(255,255,255,.78); }
.engine-primer > b { color: var(--brand); font-size: .7rem; }
.engine-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; padding: .7rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.engine-tabs button { min-height: 46px; padding-inline: .45rem; font-size: .74rem; }
.engine-stage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); min-height: 370px; }
.engine-control-room { position: relative; min-height: 370px; display: grid; place-items: center; align-content: center; gap: 1rem; overflow: hidden; padding: 1.5rem; background: radial-gradient(circle at 50% 50%, var(--brand-soft), transparent 60%); }
.engine-request { padding: .3rem .7rem; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: .68rem; font-weight: 850; }
.engine-request::after { content: " ↓"; }
.engine-core { position: relative; z-index: 2; min-width: min(360px, 90%); min-height: 150px; display: grid; place-items: center; align-content: center; gap: .35rem; padding: 1rem; border: 2px solid var(--engine-color); border-radius: 18px; background: var(--surface); box-shadow: 0 16px 34px color-mix(in srgb, var(--engine-color) 18%, transparent); transition: border-color 220ms ease, box-shadow 220ms ease; }
.engine-core small { color: var(--muted); font-size: .65rem; }
.engine-core strong { font-size: 1.55rem; }
.engine-capabilities { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: .35rem; }
.engine-capabilities i { padding: .25rem .45rem; border-radius: 6px; background: color-mix(in srgb, var(--engine-color) 14%, var(--surface)); color: var(--engine-color); font-style: normal; font-size: .62rem; font-weight: 800; animation: capability-in 260ms ease-out both; }
.engine-capabilities i:nth-child(2) { animation-delay: 70ms; }
.engine-capabilities i:nth-child(3) { animation-delay: 140ms; }
.engine-outputs { display: flex; gap: .4rem; }
.engine-outputs span { padding: .3rem .5rem; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: .64rem; }
.engine-lab.is-switching .engine-request { animation: engine-request-in 620ms ease-out both; }
.engine-lab.is-switching .engine-core { animation: engine-accept 620ms 160ms ease-out both; }
.engine-lab.is-switching .engine-outputs span { animation: engine-batch-out 520ms ease-out both; }
.engine-lab.is-switching .engine-outputs span:nth-child(1) { animation-delay: 420ms; }
.engine-lab.is-switching .engine-outputs span:nth-child(2) { animation-delay: 510ms; }
.engine-lab.is-switching .engine-outputs span:nth-child(3) { animation-delay: 600ms; }
.engine-copy { padding: 1.25rem; border-left: 1px solid var(--line); background: var(--surface-2); }
.engine-copy h3 { margin: .7rem 0 .45rem; }
.engine-copy > p { color: var(--muted); font-size: .82rem; }
.engine-copy dl { margin: .9rem 0 0; }
.engine-copy dl div { padding: .55rem 0; border-top: 1px solid var(--line); }
.engine-copy dt { color: var(--muted); font-size: .66rem; }
.engine-copy dd { margin: .12rem 0 0; font-size: .78rem; font-weight: 700; }
.engine-table-wrap { margin-top: 1rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.engine-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: .78rem; }
.engine-table th, .engine-table td { padding: .85rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.engine-table th { background: var(--surface-2); color: var(--muted); font-size: .68rem; letter-spacing: .04em; }
.engine-table tr:last-child td { border-bottom: 0; }
.engine-table td:first-child { min-width: 130px; }
.engine-table td small { display: block; margin-top: .2rem; color: var(--muted); font-size: .62rem; }
.engine-table .current-engine td { background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface)); }
.engine-answer { margin-top: 1rem; }
.decision-strip { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; align-items: center; margin-top: 1rem; padding: 1rem 1.15rem; border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); border-radius: var(--radius); background: var(--brand-soft); }
.decision-strip > span { grid-row: 1 / 3; align-self: stretch; display: grid; place-items: center; padding: .55rem; border-radius: 9px; background: var(--brand); color: #fff; font-size: .7rem; font-weight: 850; }
.decision-strip p { margin: 0; color: var(--muted); font-size: .82rem; }
.mode-rule { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 14px; background: var(--warning-soft); }
.mode-rule strong { white-space: nowrap; }
.mode-rule span { color: var(--muted); font-size: .84rem; }

.real-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.real-story { padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.real-story > span { color: var(--brand); font-size: .72rem; font-weight: 850; }
.real-story h3 { min-height: 3.2rem; margin: .4rem 0 .8rem; }
.real-story p { margin: .9rem 0 0; color: var(--muted); font-size: .82rem; }
.story-bars { display: grid; gap: .75rem; }
.story-bars div { display: grid; grid-template-columns: 1fr auto; gap: .25rem .5rem; }
.story-bars label { color: var(--muted); font-size: .68rem; }
.story-bars strong { font-size: .72rem; }
.story-bars i { grid-column: 1 / -1; width: var(--w); height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.boundary-scale { display: flex; height: 38px; overflow: hidden; border-radius: 8px; }
.boundary-scale i { width: var(--w); display: grid; place-items: center; color: #fff; font-style: normal; font-size: .7rem; font-weight: 800; }
.boundary-scale .safe { background: var(--brand); }
.boundary-scale .risk { background: var(--danger); }
.next-reading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.next-reading h3 { margin: 0; }
.next-reading > div:last-child { display: flex; flex-wrap: wrap; gap: .55rem; }

@keyframes orb-breathe { 50% { transform: scale(1.12); box-shadow: 0 0 0 12px color-mix(in srgb, var(--brand) 8%, transparent); } }
@keyframes layer-pulse { to { opacity: .35; } }
@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes block-in { from { opacity: 0; transform: translateY(8px) scale(.8); } }
@keyframes arrow-flow { 50% { transform: translateX(5px); } }
@keyframes tp-work { 0%, 8% { transform: scaleX(.08); } 58%, 78% { transform: scaleX(1); } 100% { transform: scaleX(.08); } }
@keyframes sync-pulse { 0%, 54%, 82%, 100% { border-color: var(--blue); box-shadow: none; } 62%, 74% { border-color: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 12%, transparent); } }
@keyframes pp-baton { 0%, 10% { left: 15%; } 45%, 58% { left: 50%; } 90%, 100% { left: 85%; } }
@keyframes network-flow { to { background-position: -200% 0; } }
@keyframes capability-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes engine-request-in { from { opacity: 0; transform: translateY(-12px); } }
@keyframes engine-accept { 50% { transform: translateY(-4px); box-shadow: 0 20px 40px color-mix(in srgb, var(--engine-color) 24%, transparent); } }
@keyframes engine-batch-out { from { opacity: 0; transform: translateY(-10px); } }

@media (max-width: 1050px) {
  .lab-jump { grid-template-columns: repeat(3, 1fr); }
  .lab-jump a:nth-child(3) { border-right: 0; }
  .lab-jump a:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .learning-map { grid-template-columns: repeat(4, 1fr); }
  .learning-map a:nth-child(3) { border-right: 1px solid var(--line); }
  .learning-map a:nth-child(4) { border-right: 0; }
  .learning-map a:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
  .request-track { grid-template-columns: .7fr .15fr 1fr .15fr 1fr .15fr 1fr .15fr .7fr; padding-inline: .75rem; }
  .endpoint, .machine { padding: .55rem; }
  .machine-rank { font-size: .55rem; }
  .mode-stage { grid-template-columns: 1fr; }
  .mode-copy { border-top: 1px solid var(--line); border-left: 0; }
  .three-node-explainer { grid-template-columns: 1fr; }
  .four-topologies { grid-template-columns: 1fr 1fr; }
  .four-stage, .engine-stage { grid-template-columns: 1fr; }
  .four-live-copy, .engine-copy { border-top: 1px solid var(--line); border-left: 0; }
  .engine-tabs { grid-template-columns: repeat(3, 1fr); }
  .four-topologies .recommended-topology { grid-column: 1 / -1; }
  .real-story-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .lab-jump { grid-template-columns: repeat(2, 1fr); }
  .lab-jump a:nth-child(3) { border-right: 1px solid var(--line); }
  .lab-jump a:nth-child(even) { border-right: 0; }
  .lab-jump a:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
  .learning-map a:nth-child(3) { border-right: 1px solid var(--line); }
  .learning-map a:nth-child(-n+6) { border-bottom: 1px solid var(--line); }
  .motion-toolbar, .token-demo-head, .kv-controls, .next-reading, .mode-rule, .parallel-controls { align-items: stretch; flex-direction: column; }
  .topology-motion-panel .motion-toolbar, .topology-toolbar { grid-template-columns: 1fr; align-items: stretch; }
  .request-track { grid-template-columns: 1fr; gap: .45rem; padding: 1rem; }
  .track-link { width: 2px; height: 24px; justify-self: center; }
  .track-link::after { top: auto; right: -3px; bottom: -1px; border-width: 6px 4px 0; border-color: var(--line) transparent transparent; }
  .endpoint, .machine { min-height: 92px; }
  .request-packet { display: none; }
  .flow-story { grid-template-columns: 1fr; }
  .flow-story .flow-kicker { grid-row: auto; min-height: 36px; }
  .token-factory { grid-template-columns: 1fr; }
  .factory-arrow { transform: rotate(90deg); justify-self: center; }
  .token-workbench, .prefill-decode-compare, .context-dashboard, .context-rules, .myth-grid, .real-story-grid, .parallel-story, .spark-compare, .four-topologies, .topology-outcomes { grid-template-columns: 1fr; }
  .parallel-card dl, .path-facts { grid-template-columns: 1fr; }
  .serial-answer { grid-template-columns: 1fr; }
  .three-node-explainer { grid-template-columns: 1fr; }
  .triangle-network { min-height: 350px; padding: 28px 14px 22px; }
  .triangle-node { width: 105px; min-height: 78px; }
  .triangle-edge span { display: none; }
  .triangle-packet { min-width: 34px; height: 21px; font-size: .5rem; }
  .recommended-topology { grid-column: auto; }
  .decision-strip { grid-template-columns: 1fr; }
  .decision-strip > span { grid-row: auto; min-height: 34px; }
  .context-controls, .mode-tabs { grid-template-columns: 1fr 1fr; }
  .context-controls button:nth-child(2), .mode-tabs button:nth-child(2) { border-right: 0; }
  .context-controls button:nth-child(-n+2), .mode-tabs button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .gauge-top { flex-direction: column; }
  .gauge-top > div:last-child { text-align: left; }
  .context-bar { height: 48px; }
  .context-bar i span { display: none; }
  .kv-concurrency { flex-wrap: wrap; }
  .kv-row { grid-template-columns: 1fr; gap: .35rem; }
  .kv-arrow-down { padding-left: 0; }
  .kv-capacity { grid-template-columns: 1fr; }
  .mode-diagram { min-height: 450px; flex-direction: column; }
  .mode-arrow { transform: rotate(90deg); }
  .mode-node { width: min(240px, 90%); min-height: 105px; }
  .mode-node.replica-group { width: min(240px, 90%); min-height: 145px; }
  .mode-gateway { top: 12px; }
  .four-stage, .engine-stage { grid-template-columns: 1fr; }
  .four-live-diagram { min-height: 300px; padding-inline: .35rem; }
  .four-network { min-height: 235px; }
  .four-node { width: 60px; min-height: 80px; padding: .25rem; }
  .four-node small { font-size: .5rem; }
  .four-node strong { font-size: .86rem; }
  .four-node b { font-size: .46rem; line-height: 1.25; }
  .four-link { width: clamp(8px, 3vw, 16px); }
  .four-link span { display: none; }
  .ring-return { left: 11%; right: 11%; top: 42px; height: 48px; }
  .ring-return span { top: -20px; font-size: .5rem; }
  .switch-node-grid { gap: .25rem; }
  .switch-branch > i { height: 38px; }
  .switch-branch .four-node { min-height: 72px; }
  .engine-primer { grid-template-columns: 1fr; }
  .engine-primer > b { transform: rotate(90deg); justify-self: center; }
  .engine-tabs { grid-template-columns: 1fr 1fr; }
  .engine-control-room { min-height: 330px; padding-inline: .7rem; }
  .engine-core { min-width: 90%; }
  .next-reading > div:last-child { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .legend-orb.moving, .typing-caret, .request-track [data-flow-node].is-active .layer-stack i, .mode-arrow, .tp-workers i, .sync-gate, .pp-stage > em, .triangle-edge.is-active, .four-link.is-active, .switch-branch > i.is-active, .engine-request, .engine-core, .engine-outputs span, .engine-capabilities i { animation: none; }
  .pp-stage > em.batch-b { left: 50%; }
  .pp-stage > em.batch-c { left: 85%; }
  .request-packet, .context-bar i, .capacity-track i, .triangle-packet { transition: none; }
}