/* Ink & Storyboard: animation-only comparison, using the existing artwork and copy. */
.storyboard-stage{position:relative;transform-origin:100% 60%}
.storyboard-stage>img{display:block;transform:none!important}
.motion-ready:not(.motion-off) .storyboard-stage{transform:translate3d(0,calc(var(--hero-progress,0) * -35px),0) scale(calc(1 + var(--hero-progress,0) * .09))}
.storyboard-covers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none;overflow:visible}
.ink-ready:not(.motion-off) .storyboard-covers{display:block}
.story-cover{opacity:1;transform-box:fill-box;transform-origin:left center}
.story-playing .story-cover{animation:uncover-panel .6s cubic-bezier(.35,0,.2,1) both}
.story-playing .panel-one{animation-delay:.35s}
.story-playing .connector-one{animation-delay:.92s;animation-duration:.24s}
.story-playing .panel-two{animation-delay:1.2s}
.story-playing .connector-two{animation-delay:1.77s;animation-duration:.24s}
.story-playing .panel-three{animation-delay:2.05s}
@keyframes uncover-panel{0%{clip-path:inset(0 0 0 0);opacity:1}75%{opacity:1}100%{clip-path:inset(0 0 0 100%);opacity:0}}
.replay-storyboard,.replay-edits{background:transparent;color:var(--muted);font-family:var(--sans);font-size:11px;line-height:1.4;padding:10px 0;border-bottom:1px solid #50616a66;display:inline-flex;align-items:center;gap:12px;cursor:pointer}
.replay-storyboard{display:flex;margin:16px auto 0}
.replay-storyboard:hover,.replay-edits:hover{color:var(--red);border-color:var(--red)}
.replay-edits{margin:10px 0 0}
.replay-storyboard:disabled,.replay-edits:disabled{opacity:.55;cursor:default}
.ink-document .annotation{width:190px;bottom:27px;left:28px;line-height:1}
.ink-document .decision-stamp{position:relative;border:0;width:215px;max-width:100%;line-height:1;margin-top:14px}
.ink-document .pen-writing{display:block;position:static!important;width:100%!important;height:auto!important;transform:none!important;overflow:visible;color:var(--red)}
.pen-writing path,.pen-underline path{fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.pen-underline{display:block;position:absolute;left:0;bottom:-8px;width:100%;height:14px;color:var(--red);overflow:visible}
.pen-underline path{stroke-width:1.6}
.ink-document.role-preview em{background:linear-gradient(#d7e6e8,#d7e6e8) left bottom/100% 90% no-repeat;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ink-ready:not(.motion-off) .ink-document .pen-writing path,.ink-ready:not(.motion-off) .ink-document .pen-underline path{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.ink-ready:not(.motion-off) .ink-document.role-preview em{background-size:0% 90%}
.ink-ready:not(.motion-off) .ink-document.ink-playing .pen-writing path{animation:pen-stroke .19s ease-out var(--stroke-delay,0s) both}
.ink-ready:not(.motion-off) .ink-document.ink-playing .pen-underline path{animation:pen-stroke .55s ease-in-out 2.35s both}
.ink-ready:not(.motion-off) .ink-document.ink-playing.role-preview em{animation:marker-stroke .7s ease .15s both}
@keyframes pen-stroke{0%{opacity:0;stroke-dashoffset:1}1%{opacity:1}100%{opacity:1;stroke-dashoffset:0}}
@keyframes marker-stroke{to{background-size:100% 90%}}
.motion-off .storyboard-covers{display:none}
.motion-off .pen-writing path,.motion-off .pen-underline path{stroke-dashoffset:0!important;opacity:1!important}
.motion-off .ink-document.role-preview em{background-size:100% 90%}
@media(max-width:900px){.motion-ready:not(.motion-off) .storyboard-stage{transform:none}.replay-storyboard{margin-top:12px}}
@media(max-width:650px){.ink-document .annotation{width:190px}.ink-document .decision-stamp{width:215px}.replay-edits{margin-top:22px;min-height:44px}.replay-storyboard{min-height:44px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.storyboard-covers{display:none!important}.pen-writing path,.pen-underline path{stroke-dashoffset:0!important;opacity:1!important}.ink-document.role-preview em{background-size:100% 90%!important}.storyboard-stage{transform:none!important}}
@media print{.storyboard-covers,.replay-storyboard,.replay-edits{display:none!important}.pen-writing path,.pen-underline path{stroke-dashoffset:0!important;opacity:1!important}}
.story-cover{stroke:none}
/* Keep the hero artwork intact: no rectangular masks over the raster illustration. */
.storyboard-covers{display:none!important}
.caption-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.pen-caption .caption-writing{display:block;width:100%;height:auto;overflow:visible;color:var(--red)}
.caption-writing path{fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.ink-ready:not(.motion-off) .pen-caption .caption-writing path{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.ink-ready:not(.motion-off) .pen-caption.ink-playing .caption-writing path{animation:pen-stroke .28s ease-out var(--stroke-delay,0s) both}
.motion-ready:not(.motion-off) .big-arrow.arrow-moving{animation:arrow-gesture 3.8s ease-in-out infinite}
@keyframes arrow-gesture{0%,20%,100%{translate:0 0}45%,55%{translate:8px 4px}}
.motion-off .caption-writing path{stroke-dashoffset:0!important;opacity:1!important}
.motion-off .big-arrow{translate:0 0!important}
@media(prefers-reduced-motion:reduce){.caption-writing path{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}.big-arrow{animation:none!important;translate:0 0!important}}
@media print{.caption-writing path{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}.big-arrow{animation:none!important;translate:0 0!important}}