/* Illustrative, local-only code. The walkthrough clock drives every character. */
.engine-code{margin-top:1.2rem;border-block:1px solid #2c405e;background:#0b1422;font-family:var(--font-halo);font-size:.78rem;line-height:1.6rem}
.engine-code-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem .7rem;border-bottom:1px solid #253955;color:#b7d4ff;font-size:.78rem;line-height:1.4}
.engine-code-header>span:first-child{display:flex;align-items:center;gap:.6rem}
.engine-code-header svg{width:1.1rem;height:1.1rem;color:#85b1ff}
.engine-code-header>span:last-child{font-family:var(--font-halo);font-size:.7rem;color:#9cb2d1}
.engine-code-viewport{height:11.2rem;overflow:hidden;padding:0;margin:.65rem 0}
.engine-code-lines{position:relative;list-style:none;margin:0;padding:0;line-height:1.6rem;transition:transform 200ms var(--ease-out)}
.engine-code-lines li{height:1.6rem;line-height:1.6rem;display:flex;align-items:baseline;padding-right:.3rem;white-space:pre;color:#c4d3e9}
.engine-code-number{width:2.3rem;flex:none;padding-left:.7rem;color:#728bad;font-size:.65rem;user-select:none}
.engine-code-lines code{font:inherit;white-space:pre}
.engine-code-lines li.is-active{background:#1b3151}
.engine-code-lines li.is-active>.engine-code-number{color:#a4c5f7}
.engine-code-lines li.is-active code::after{content:'';display:inline-block;width:1px;height:.95em;margin-left:1px;vertical-align:-.1em;background:#b3d3ff;animation:caret 1.1s steps(2,end) infinite}
.code-keyword{color:#b3a0ff}.code-method{color:#8dc6ff}.code-type{color:#6fd8d1}.code-string{color:#afdaa0}.code-number{color:#e7be87}
.engine-code-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .7rem;border-top:1px solid #253955;font-family:var(--font-halo);font-size:.65rem;line-height:1.6;color:#98afcf}
.sequence-section[data-code-state=ready] [data-code-status]{color:#acd8c2}
.sequence-section.is-paused .engine-code-lines li.is-active code::after{animation-play-state:paused}
.sequence-section[data-code-state=waiting] .engine-code-lines li.is-active code::after{opacity:0}
@media(max-width:1100px) and (min-width:761px){.engine-code{font-size:.67rem}.engine-code-number{width:1.7rem;padding-left:.35rem}.engine-code-footer{font-size:.6rem;padding-inline:.35rem}}
@media(max-width:760px){.engine-code{font-size:.8rem}.engine-code-header{padding-block:.8rem}.engine-code-footer{font-size:.7rem}.engine-code-viewport{height:11.2rem}}
@media(max-width:380px){.engine-code{font-size:.72rem}.engine-code-number{width:1.8rem;padding-left:.4rem}.engine-code-footer{font-size:.65rem;padding-inline:.4rem}}
@media(prefers-reduced-motion:reduce){.engine-code-lines{transition:none}.engine-code-lines li.is-active code::after{display:none;animation:none}}