/* A quiet desktop card holds the diagram until its scroll-led route is complete. */
.system-page .engine-section { padding-block: clamp(56px, 6.5vw, 96px); scroll-margin-top: 32px; }
.engine-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: end; margin-bottom: 42px; }
.engine-intro .sci-label { margin-bottom: 18px; }
.engine-intro h2 { max-width: 13ch; font-size: clamp(36px, 4.4vw, 60px); }
.engine-intro > p { max-width: 58ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.75; }
.engine-demo { --engine-gold: #f1cd59; --engine-rule: #536c5b; position: relative; }
/* Keep the card above the fading page scrim, including after its sticky hold. */
.engine-demo::before { content: ''; position: fixed; inset: 0; z-index: 20; background: #131c1929; opacity: 0; pointer-events: none; transition: opacity 700ms cubic-bezier(.22,.61,.36,1); }
.engine-demo.is-engaged::before { opacity: 1; }
.engine-scroll-track { position: relative; }
.engine-card { position: relative; z-index: 21; padding: 26px 28px 24px; color: #f3f5ec; background: linear-gradient(125deg,#203229,#1a2922); border: 1px solid #46594a; border-radius: 18px; box-shadow: 0 20px 50px -30px #14271d55; }
.engine-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 36px 84px -18px #13271f80, 0 12px 30px -12px #14271d66, 0 0 64px 6px #dbbe5f30, 0 0 0 1.5px #e5d18aa6; transition: opacity 480ms cubic-bezier(.22,.61,.36,1); }
.engine-demo.is-engaged .engine-card::before { opacity: 1; }
.engine-demo.is-pinned .engine-card { position: sticky; top: var(--engine-sticky-top); }
.engine-kicker { display: flex; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid #4b5e4e; color: #e2e8d8; font: 500 12px/1.5 var(--mono); letter-spacing: .075em; text-transform: uppercase; }
.engine-kicker img { width: 23px; height: 27px; }
.engine-desktop-art { margin: 12px -8px 10px; }
.engine-desktop-art > svg { display: block; width: 100%; height: auto; overflow: visible; }
.engine-trace-base { opacity: 0; }
.engine-trace { stroke: #f7d565; stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--engine-draw, 0)); opacity: var(--engine-visible,0); }
.engine-choice { --choice-fill: #819e89; --choice-stroke: #a3b6a6; --choice-node: #131c19; --choice-glow: 0; }
.engine-choice.is-reached, .is-reduced-motion .engine-choice { --choice-fill: #e5ba38; --choice-stroke: #e5ba38; --choice-node: #e5ba38; --choice-glow: 1; }
.engine-choice-fill { fill: var(--choice-fill); }
.engine-choice-stroke { stroke: var(--choice-stroke); }
.engine-choice-node { fill: var(--choice-node); }
.engine-choice-glow { opacity: var(--choice-glow); }
.engine-beam-head { fill: #ffe69a; filter: drop-shadow(0 0 5px #e5ba3890); opacity: 0; pointer-events: none; }
.engine-step-flow { position: relative; }
.engine-stages { position: relative; display: grid; grid-template-columns: 145fr 135fr 152.5fr 242.5fr 297.5fr 245fr 182.5fr; gap: 0; list-style: none; margin: 0; padding: 0; }
.engine-step { position: relative; min-width: 0; padding-inline: 8px; text-align: center; }
.engine-stage-heading { position: relative; isolation: isolate; min-height: 84px; }
.engine-stage-heading::before { content: ''; position: absolute; z-index: -1; inset: -12px -3px -8px; border-radius: 9px; background: linear-gradient(180deg,#e8cf7014,#e8cf7003); box-shadow: inset 0 1px #e8cf7073; opacity: 0; transition: opacity 240ms ease; }
.engine-step.is-current .engine-stage-heading::before { opacity: 1; }
.engine-stage-number { display: block; color: #aebeaf; font: 12px/1.5 var(--mono); letter-spacing: .035em; margin-bottom: 9px; transition: color 240ms ease; }
.engine-step.is-current .engine-stage-number { color: #f7d565; }
.engine-step.is-current .engine-stage-name { color: #ffe8a4; }
.engine-step .engine-stage-name { margin: 0; color: #f0f3e9; font: 550 18px/1.3 var(--sans); letter-spacing: -.025em; overflow-wrap: break-word; hyphens: auto; transition: color 240ms ease; }
.engine-stage-caption { display: block; color: #c3d1c6; font-size: 14px; line-height: 1.5; margin-top: 7px; }
.engine-step > .engine-description { display: none; color: #d0dbd2; }
.engine-details { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 26px 30px; list-style: none; margin: 36px 0 0; padding: 0; }
.engine-details li { grid-column: span 3; padding-top: 18px; border-top: 1px solid #c8d2c3; }
.engine-details li:nth-child(n+5) { grid-column: span 4; }
.engine-detail-number { display: block; color: #62735b; font: 12px/1.5 var(--mono); margin-bottom: 10px; }
.engine-details p { margin: 0; color: #52634e; font-size: 15px; line-height: 1.75; max-width: 38ch; }
.engine-mobile-art, .engine-mobile-track { display: none; }
.engine-demo .engine-footnote { color: #62735b; font-size: 12px; line-height: 1.7; margin-top: 18px; }
.engine-origin { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 40px; margin-top: 28px; }
.engine-origin p { max-width: 82ch; color: #52634e; font-size: 13px; line-height: 1.8; }
.engine-origin .sci-link { white-space: nowrap; font-size: 13px; }
.system-page .engine-section + .sci-reading { padding-top: 20px; }
.engine-demo.is-reduced-motion .engine-trace, .engine-demo.is-reduced-motion .engine-beam-head { display: none; }
.engine-demo.is-reduced-motion .engine-trace-base { opacity: 1; }
@media (max-width: 1100px) {
  .engine-intro { grid-template-columns: 1fr; gap: 20px; }
  .engine-intro h2 { max-width: 22ch; }
  .engine-intro > p { max-width: 70ch; }
  .engine-origin { grid-template-columns: 1fr; gap: 15px; }
  .engine-desktop-art { display: none; }
  .engine-details { display: none; }
  .engine-demo { width: 100%; max-width: none; padding: 28px var(--rail) 30px; background: #1c2b24; }
  .engine-card { position: static !important; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .engine-demo::before, .engine-card::before, .engine-stage-heading::before { display: none; }
  .engine-scroll-track { height: auto !important; }
  .engine-kicker { margin-bottom: 6px; font-size: 11px; }
  .engine-demo .engine-footnote { color: #aebeaf; border-top: 1px solid #425748; padding-top: 18px; }
  .engine-stages { display: block; }
  .engine-step { display: grid; grid-template-columns: 38px minmax(0,1fr); column-gap: 23px; padding: 28px 0 34px; text-align: left; }
  .engine-stage-heading { display: grid; grid-template-columns: 38px minmax(0,1fr); grid-column: 1 / -1; gap: 0 23px; min-height: 0; }
  .engine-stage-number { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; margin: 0; border: 1px solid #91a88d; border-radius: 50%; background: #1c2b24; font-size: 12px; z-index: 1; }
  .engine-step .engine-stage-name { font-size: 25px; line-height: 1.25; }
  .engine-stage-caption { font-size: 15px; margin-top: 5px; }
  .engine-mobile-art { display: block; grid-column: 2; width: min(100%,380px); margin: 22px 0 17px; }
  .engine-mobile-art svg { display: block; width: 100%; height: auto; overflow: visible; }
  .engine-step > .engine-description { display: block; grid-column: 2; margin: 0; padding: 0; border: 0; font-size: 16px; line-height: 1.8; max-width: 54ch; }
  .engine-mobile-track { display: block; position: absolute; left: 18px; top: var(--engine-track-top,47px); height: var(--engine-track-height,calc(100% - 180px)); width: 2px; background: #627d66; pointer-events: none; }
  .engine-mobile-track::before { content: ''; position: absolute; inset: 0; background: #ebca64; transform-origin: top; transform: scaleY(var(--engine-travel,0)); }
  .engine-mobile-track::after { content: ''; position: absolute; top: calc(var(--engine-travel,0) * 100%); left: -3px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #ffe69a; box-shadow: 0 0 12px #e5ba3860; opacity: 0; }
  .engine-demo.is-scroll-ready:not(.is-reduced-motion) .engine-mobile-track::after { opacity: 1; }
  .engine-demo.is-reduced-motion .engine-mobile-track::before { transform: scaleY(1); }
}
@media (max-width: 480px) {
  .engine-intro { margin-bottom: 30px; }
  .engine-intro h2 { max-width: 15ch; font-size: 38px; }
  .engine-step, .engine-stage-heading { column-gap: 17px; }
  .engine-step .engine-stage-name { font-size: 23px; }
  .engine-stage-caption { font-size: 14px; }
  .engine-step > .engine-description { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .engine-demo .engine-card { position: relative; top: auto; }
  .engine-scroll-track { height: auto !important; }
  .engine-trace, .engine-beam-head, .engine-mobile-track::after { display: none !important; }
  .engine-trace-base { opacity: 1; }
  .engine-choice { --choice-fill: #e5ba38; --choice-stroke: #e5ba38; --choice-node: #e5ba38; --choice-glow: 1; }
  .engine-demo::before, .engine-card::before, .engine-stage-heading::before { display: none; }
  .engine-stage-number, .engine-step .engine-stage-name { transition: none; }
  .engine-mobile-track::before { transform: scaleY(1); }
}