/* A brief stellar pause between selected chapters, driven by native scrolling. */
.stellar-interlude { position: relative; height: 145vh; background: #070d12; }
.stellar-interlude__stage { position: sticky; top: var(--topbar, 72px); height: calc(100svh - var(--topbar, 72px)); min-height: 420px; overflow: hidden; isolation: isolate; }
.stellar-interlude canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.stellar-interlude__caption { position: absolute; z-index: 1; bottom: 8%; left: 8%; margin: 0; max-width: 72%; color: #e2edf5; text-shadow: 0 2px 14px #070d12; }
.stellar-interlude__caption span { display: block; font: 400 clamp(22px, 2.5vw, 38px)/1.2 var(--sans); letter-spacing: -.035em; }
.stellar-interlude__caption small { display: block; margin-top: 14px; color: #9caebc; font: 12px/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.stellar-interlude__pause { position: absolute; z-index: 2; right: 24px; top: 24px; border: 1px solid #b3d8ef35; border-radius: 24px; padding: 10px 16px; background: #070d12c9; color: #b6cbd9; font: 12px var(--sans); cursor: pointer; }
.stellar-interlude__pause:focus-visible { outline: 2px solid #b3d8ef; outline-offset: 4px; }
.stellar-interlude[data-state="fallback"] { height: 200px; }
.stellar-interlude[data-state="fallback"] .stellar-interlude__stage { position: relative; height: 200px; min-height: 0; top: 0; }
.stellar-interlude[data-state="fallback"] button { display: none; }
@media (max-width: 760px) {
  .stellar-interlude { height: 115svh; }
  .stellar-interlude__stage { min-height: 320px; }
  .stellar-interlude__caption { left: 24px; bottom: 9%; }
}
@media (prefers-reduced-motion: reduce) {
  .stellar-interlude { display: none; }
}