/* Vector previews: shared theme colours, deliberate frames, one-time reveals. */
:root{--preview-paper:#fff;--preview-panel:#f5f6fa;--preview-line:#d6dcea;--preview-skeleton:#c9d1e2;--preview-accent:#355cff;--preview-soft:#e9edff;--preview-stagger:30ms}
html[data-theme=dark]{--preview-paper:#141820;--preview-panel:#1e2430;--preview-line:#384254;--preview-skeleton:#515e76;--preview-accent:#8b9bff;--preview-soft:#2a3557}
.product-illustration{display:block;width:100%;height:auto;overflow:visible}
.app-hero .hero-crop{padding:12px;background:var(--preview-panel);border-radius:20px}
.feature-shot,.sync-pair{padding:14px;background:var(--preview-panel)}
.evidence-visual.simplified-visual{width:100%;max-width:380px}
.preview-card,.preview-detail{transform-box:fill-box;transform-origin:center}
.preview-ready.is-visible .preview-card{animation:preview-settle var(--duration-slow) var(--ease-out-quart) both;animation-delay:calc(var(--preview-order)*var(--preview-stagger))}
.preview-ready.is-visible .preview-detail{animation:preview-detail-in var(--duration-slow) var(--ease-out-quart) both;animation-delay:var(--duration-normal)}
.preview-ready.is-visible .preview-link{animation:eye-fade-in var(--duration-normal) var(--ease-out-cubic) both;animation-delay:var(--duration-slow)}
@keyframes preview-settle{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes preview-detail-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.preview-ready.is-visible .preview-card,.preview-ready.is-visible .preview-detail,.preview-ready.is-visible .preview-link{animation:eye-fade-in var(--duration-short) var(--ease-out-cubic);animation-delay:0ms}}
@media(max-width:640px){.app-hero .hero-crop{padding:6px;border-radius:12px}.feature-shot,.sync-pair{padding:8px}.evidence-visual.simplified-visual{max-width:300px}}

/* Centre each narrative against its illustration and avoid inherited screenshot crops. */
.landing .learning-section{align-items:center}
.landing .hero-crop{aspect-ratio:auto;padding:0;overflow:hidden;border-radius:16px}
.landing .app-hero{padding:10px}
.landing .sync-pair{align-self:center}
.landing .illustration-sync{max-width:620px;margin-inline:auto}
@media(max-width:640px){.landing .app-hero{padding:6px}.landing .hero-crop{border-radius:10px}}

/* Give the notes illustration room inside its narrative panel. */
.landing .evidence-visual.simplified-visual{max-width:320px}
@media(max-width:767px){.landing .evidence-visual.simplified-visual{max-width:280px}}
@media(min-width:1024px){.landing .learning-section{grid-template-columns:1.2fr .8fr}}
/* Slow narrative loops; the surrounding interface stays still. */
.product-illustration .preview-card,.product-illustration .preview-detail,.product-illustration .preview-link{animation:none!important}
.product-illustration .preview-card.library-new-reference{animation:library-collect 14s cubic-bezier(.22,1,.36,1) infinite!important}
.capture-region{transform-box:fill-box;transform-origin:top left;animation:capture-highlight 14s cubic-bezier(.22,1,.36,1) infinite}
.capture-observation{animation:observation-write 14s ease-in-out infinite;animation-delay:calc(var(--step)*320ms)}
.capture-save{animation:capture-saved 14s ease-in-out infinite}
.notes-source{animation:notes-highlight 14s ease-in-out infinite}
.notes-written{animation:notes-transcribe 14s ease-in-out infinite;animation-delay:calc(var(--step)*240ms)}
.sync-source{animation:sync-origin 14s ease-in-out infinite}
.sync-destination{animation:sync-copy 14s ease-in-out infinite}
.sync-travel{animation:sync-context-travel 14s linear infinite}
.product-illustration:not(.is-visible) *, .animated-preview-frame.animation-paused *{animation-play-state:paused!important}
@keyframes library-collect{0%,12%{opacity:.15;transform:translateY(5px)}30%,86%{opacity:1;transform:translateY(0)}100%{opacity:.15;transform:translateY(5px)}}
@keyframes capture-highlight{0%,12%{opacity:.15;transform:scaleX(.7)}28%,84%{opacity:1;transform:scaleX(1)}100%{opacity:.15;transform:scaleX(.7)}}
@keyframes observation-write{0%,28%{opacity:.12}45%,82%{opacity:1}100%{opacity:.12}}
@keyframes capture-saved{0%,52%,92%,100%{opacity:.4}65%,80%{opacity:1}}
@keyframes notes-highlight{0%,8%,94%,100%{opacity:.25}20%,75%{opacity:1}}
@keyframes notes-transcribe{0%,24%{opacity:.16}42%,80%{opacity:1}100%{opacity:.16}}
@keyframes sync-origin{0%,10%,95%,100%{opacity:.3}20%,82%{opacity:1}}
@keyframes sync-copy{0%,34%,100%{opacity:.25}47%,88%{opacity:1}}
@keyframes sync-context-travel{0%,24%{opacity:0;transform:translateX(-10px)}28%{opacity:1;transform:translateX(-6px)}38%{opacity:1;transform:translateX(6px)}42%,60%{opacity:0;transform:translateX(10px)}64%{opacity:1;transform:translateX(6px)}74%{opacity:1;transform:translateX(-6px)}78%,100%{opacity:0;transform:translateX(-10px)}}
.animated-preview-frame{position:relative;padding-bottom:56px!important}.illustration-toggle{position:absolute;right:12px;bottom:10px;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--muted);cursor:pointer;transition:background 160ms ease,color 160ms ease,border-color 160ms ease}.illustration-toggle:hover{background:var(--surface);border-color:var(--accent);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.product-illustration *{animation:none!important;opacity:1;transform:none}.sync-travel{display:none}.illustration-toggle{display:none}.animated-preview-frame{padding-bottom:14px!important}}

/* Complete actions, followed by a quiet hold and reset. */
.product-illustration .preview-card.library-new-reference{animation:library-arrival 16s cubic-bezier(.22,1,.36,1) infinite!important}.library-note-indicator{animation:library-note 16s ease-in-out infinite}.library-collected-outline{animation:library-confirm 16s ease-in-out infinite}
@keyframes library-arrival{0%,10%{opacity:0;transform:translateY(-24px) scale(.97)}26%,88%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(0) scale(1)}}
@keyframes library-note{0%,30%{opacity:0}42%,88%{opacity:1}100%{opacity:0}}
@keyframes library-confirm{0%,30%,72%,100%{opacity:0}42%,54%{opacity:1}}
.capture-cursor{animation:capture-point 16s cubic-bezier(.45,0,.2,1) infinite;opacity:0}
[data-theme="dark"] .capture-cursor{filter:brightness(0) invert(1)}
@keyframes capture-point{0%{opacity:0;transform:translate(610px,380px)}8%{opacity:1;transform:translate(610px,380px)}18%,22%{opacity:1;transform:translate(258px,547px)}36%,42%{opacity:1;transform:translate(582px,652px)}54%{opacity:1;transform:translate(970px,380px)}65%,70%{opacity:1;transform:translate(1010px,680px)}78%,100%{opacity:0;transform:translate(1010px,680px)}}
.capture-region{animation:capture-draw 16s cubic-bezier(.22,1,.36,1) infinite}.capture-observation{transform-box:fill-box;transform-origin:left;animation:capture-write-lines 16s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--step)*400ms)}.capture-save{transform-box:fill-box;transform-origin:center;animation:capture-save-press 16s ease-in-out infinite}
@keyframes capture-draw{0%,22%{opacity:0;transform:scale(.05)}36%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes capture-write-lines{0%,40%{opacity:0;transform:scaleX(.1)}56%,86%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes capture-save-press{0%,66%,74%,100%{transform:scale(1);opacity:.6}69%{transform:scale(.97);opacity:1}71%{transform:scale(1);opacity:1}}
.notes-source{animation:notes-source-selected 16s ease-in-out infinite}.notes-written{transform-box:fill-box;transform-origin:left;animation:notes-observation-lines 16s ease-in-out infinite;animation-delay:calc(var(--step)*200ms)}.illustration-notes rect.notes-written[x="56"]{animation-name:notes-file-lines}.notes-context-transfer{animation:notes-transfer 16s linear infinite}
@keyframes notes-source-selected{0%,8%,100%{opacity:.3}20%,86%{opacity:1}}
@keyframes notes-observation-lines{0%,18%{opacity:.15;transform:scaleX(.7)}34%,86%{opacity:1;transform:scaleX(1)}100%{opacity:.15;transform:scaleX(.7)}}
@keyframes notes-transfer{0%,38%{opacity:0;transform:translateY(0)}42%{opacity:1;transform:translateY(6px)}49%{opacity:1;transform:translateY(23px)}53%,100%{opacity:0;transform:translateY(30px)}}
@keyframes notes-file-lines{0%,50%{opacity:.15;transform:scaleX(.6)}68%,86%{opacity:1;transform:scaleX(1)}100%{opacity:.15;transform:scaleX(.6)}}
.sync-source{animation:sync-first-note 16s ease-in-out infinite}.sync-destination{animation:sync-received-note 16s ease-in-out infinite}.sync-travel{animation:sync-round-trip 16s linear infinite}.sync-edit-right{animation:sync-right-edit 16s ease-in-out infinite}.sync-edit-left{animation:sync-left-edit 16s ease-in-out infinite}
@keyframes sync-first-note{0%,8%,100%{opacity:.2}20%,88%{opacity:1}}
@keyframes sync-received-note{0%,30%,100%{opacity:.2}42%,88%{opacity:1}}
@keyframes sync-round-trip{0%,24%{opacity:0;transform:translate(-20px,-30px)}28%{opacity:1;transform:translate(-10px,-30px)}34%{opacity:1;transform:translate(10px,-30px)}38%,61%{opacity:0;transform:translate(20px,-30px)}65%{opacity:1;transform:translate(10px,-20px)}71%{opacity:1;transform:translate(-10px,-20px)}75%,100%{opacity:0;transform:translate(-20px,-20px)}}
@keyframes sync-right-edit{0%,48%{opacity:0}58%,88%{opacity:1}100%{opacity:0}}
@keyframes sync-left-edit{0%,72%{opacity:0}82%,88%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.product-illustration *{animation:none!important;opacity:1;transform:none}.capture-cursor,.notes-context-transfer,.sync-travel,.library-collected-outline{display:none}}
@media(prefers-reduced-motion:reduce){.product-illustration .preview-card.library-new-reference{animation:none!important;opacity:1;transform:none}}

/* Controls occupy a shared external rail beside each illustration. */
.animated-preview-frame{padding-bottom:14px!important;margin-right:52px}.illustration-toggle{right:-50px;bottom:0}.app-hero.animated-preview-frame{padding-bottom:10px!important}.evidence-visual.animated-preview-frame{padding-bottom:0!important;width:calc(100% - 52px)}
@media(max-width:640px){.animated-preview-frame{margin-right:48px}.illustration-toggle{right:-46px}.evidence-visual.animated-preview-frame{width:calc(100% - 48px)}}
@media(prefers-reduced-motion:reduce){.animated-preview-frame{margin-right:0}.evidence-visual.animated-preview-frame{width:100%}}
@media(max-width:640px){.animated-preview-frame{margin-right:0;margin-bottom:52px}.illustration-toggle{right:0;bottom:-48px}.evidence-visual.animated-preview-frame{width:100%}}

/* Consistent, quiet controls below the illustration edge. */
.animated-preview-frame{margin-right:0;margin-bottom:52px}.illustration-toggle{right:0;bottom:-48px;background:transparent;border-color:var(--line)}.evidence-visual.animated-preview-frame{width:100%}.illustration-toggle:hover{background:var(--surface);border-color:var(--accent);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.animated-preview-frame{margin-bottom:0}}

/* Completed state is the default; loops exist only while eligible to play. */
.animated-preview-frame:not(.is-playing) .product-illustration *, .animated-preview-frame:not(.is-playing) .product-illustration .preview-card.library-new-reference{animation:none!important;opacity:1;transform:none}.animated-preview-frame:not(.is-playing) .capture-cursor,.animated-preview-frame:not(.is-playing) .notes-context-transfer,.animated-preview-frame:not(.is-playing) .sync-travel,.animated-preview-frame:not(.is-playing) .library-collected-outline{display:none}.animated-preview-frame:not(.is-in-frame) .illustration-toggle{visibility:hidden;pointer-events:none}

.illustration-toggle{left:50%;right:auto;transform:translateX(-50%)}