.story-svg{width:100%;height:100%;font-family:var(--font-sans), sans-serif;display:block;overflow:visible}.story-svg .motion-hidden{opacity:0;visibility:hidden}.story-svg .diagram-label{fill:#bfb3c8;font-size:17px}.story-svg .diagram-code{fill:#dfb8d0;font:17px ui-monospace,SFMono-Regular,Menlo,monospace}.story-svg .diagram-question{fill:#eee6ed;font-size:24px}.story-svg .diagram-knowledge{fill:#edcf8b;font:500 54px system-ui,sans-serif}.story-svg .diagram-answer{fill:#edcf8b;font-size:24px}.story-svg .diagram-version{fill:#eee6ed;font:15px ui-monospace,SFMono-Regular,Menlo,monospace}@media (max-width:700px){.story-svg .diagram-label,.story-svg .diagram-code,.story-svg .diagram-version{font-size:22px}}
.scroll-story{--story-stage-height:520px;--story-top:max(32px, calc(50svh - 260px));width:min(1040px,100% - 80px);height:calc(var(--story-stage-height) + 165svh);scroll-margin-top:var(--story-top);border-top:1px solid #ffffff26;margin:0 auto 56px;position:relative}.scroll-story[data-kind=routing]{height:calc(var(--story-stage-height) + 150svh)}.story-stage{top:var(--story-top);height:var(--story-stage-height);grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);grid-template-areas:"copy art";align-items:center;column-gap:clamp(32px,5vw,72px);display:grid;position:sticky}.story-copy{grid-area:copy;max-width:365px}.story-copy-stack{min-height:192px;display:grid}.story-label{color:#dbb5c9;align-items:center;gap:20px;margin:0 0 24px;font-size:13px;display:flex}.internalize-page .story-step h2{margin:0 0 20px;font-size:clamp(25px,2.4vw,31px);font-weight:450;line-height:1.28}.story-description{color:#c9c0d1;text-wrap:pretty;margin:0;font-size:17px;line-height:1.75}.story-description code{white-space:nowrap;color:#edc3dc;font-size:.9em}.story-visual{grid-area:art;justify-self:end;width:100%;max-width:490px;margin:0}.story-art{aspect-ratio:520/440;contain:layout style}.stories-close{align-items:center;gap:28px;width:min(1040px,100% - 80px);margin:0 auto;padding:24px 0 76px;display:flex}.scroll-story:is([data-mode=static],[data-mode=reduced]) .story-step{margin-bottom:28px}@media (max-height:619px){.scroll-story{--story-stage-height:calc(100svh - 32px);--story-top:16px}}@media (max-width:700px){.scroll-story,.scroll-story[data-kind=routing]{--story-stage-height:min(620px, calc(100svh - 32px));--story-top:16px;width:calc(100% - 44px);margin-bottom:32px}.story-stage{box-sizing:border-box;grid-template:"art"minmax(0,1fr)"copy"/1fr;gap:18px;padding-block:12px}.story-copy{max-width:440px}.story-copy-stack{min-height:0}.story-label{margin-bottom:18px}.internalize-page .story-step h2{margin-bottom:14px;font-size:25px}.story-description{font-size:16px;line-height:1.65}.story-visual{justify-self:center;width:min(100%,400px);height:100%;min-height:0}.story-art{aspect-ratio:auto;height:100%}.stories-close{width:calc(100% - 44px);padding:4px 0 54px}}@media (max-width:360px){.internalize-page .story-step h2{font-size:23px}.story-description{font-size:15px;line-height:1.6}}.story-step{opacity:0;visibility:hidden;pointer-events:none;grid-area:1/1;transition:opacity .18s ease-out,visibility 0s .18s}.story-step[data-active=true]{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .32s ease-in .1s,visibility}.scroll-story:is([data-mode=static],[data-mode=reduced]) .story-copy-stack{display:block}@media (prefers-reduced-motion:reduce){.story-step,.story-step[data-active=true]{transition:none}}.scroll-story:is([data-mode=static],[data-mode=reduced]){height:auto}.scroll-story:is([data-mode=static],[data-mode=reduced]) .story-stage{grid-template-rows:auto auto;height:auto;padding-block:32px;position:static}.scroll-story:is([data-mode=static],[data-mode=reduced]) .story-visual{height:auto}.scroll-story:is([data-mode=static],[data-mode=reduced]) .story-art{aspect-ratio:520/440;height:auto}
