.demo-preview{--demo-duration:8500ms;margin:0;color:var(--ink,#29241c);font-family:var(--sans,system-ui,sans-serif)}
.demo-preview__stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--rule,#bbad93);background:var(--soft,#e6dbc6);box-shadow:0 24px 64px rgba(41,36,28,.12)}
.demo-preview__frame{position:absolute;inset:0;display:grid;place-items:start;overflow:hidden;background:var(--paper,#f8f3e8)}
.demo-preview__frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.demo-preview__frame img[alt^="FieldProof"]{object-fit:contain;background:var(--paper,#f8f3e8)}
.demo-preview:has(img[alt^="FieldProof"]).is-playing .demo-preview__frame--desktop,
.demo-preview:has(img[alt^="FieldProof"]).is-complete .demo-preview__frame--desktop{animation:none;transform:none;filter:none}
.demo-preview__frame--mobile{inset:8% 4% 5% auto;width:25%;border:3px solid #050505;box-shadow:0 18px 38px rgba(0,0,0,.2);opacity:0;transform:translate3d(14%,4%,0) scale(.96)}
.demo-preview__output{position:absolute;z-index:3;inset:4% 6%;display:grid;place-items:center;opacity:0;transform:translateY(2%) scale(.96)}
.demo-preview__output img{width:auto;height:100%;max-width:100%;object-fit:contain;background:#fff;box-shadow:0 20px 48px rgba(0,0,0,.2)}
.demo-preview__output span,.demo-preview__framing-source span,.demo-preview__framing-result span{position:absolute;right:10px;bottom:10px;padding:7px 10px;background:#050505;color:#f8f3e8;font-size:12px;line-height:1.2}
.demo-preview__framing-source,.demo-preview__framing-result{position:absolute;inset:6%;display:grid;place-items:center}
.demo-preview__framing-source img{width:min(84%,800px);height:auto;max-height:86%;object-fit:contain;box-shadow:0 18px 44px rgba(0,0,0,.16)}
.demo-preview__framing-result{inset:5% auto auto 50%;height:90%;aspect-ratio:1;background:#fff;opacity:0;transform:translateX(-50%) scale(.92)}
.demo-preview__framing-result img{width:100%;height:100%;object-fit:contain}
.demo-preview figcaption{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;min-height:68px;padding-top:12px;font-size:14px;line-height:1.35}
.demo-preview__caption{max-width:56ch;color:var(--muted,#706555)}
.demo-preview__reduced{display:none}
.demo-preview__controls{display:flex;flex:none;gap:8px}
.demo-preview button{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.demo-preview button:hover{background:color-mix(in srgb,var(--accent,currentColor) 10%,transparent);border-color:var(--accent,currentColor)}
.demo-preview button:focus-visible{outline:3px solid var(--accent,currentColor);outline-offset:3px}
.demo-preview__control-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.demo-preview__icon{position:relative;display:block;width:18px;height:18px}
.demo-preview__icon--play:before{content:"";position:absolute;left:5px;top:2px;border-block:7px solid transparent;border-left:11px solid currentColor}
.demo-preview.is-playing .demo-preview__icon--play:before{left:4px;top:3px;width:10px;height:12px;border:0;border-inline:3px solid currentColor}
.demo-preview__icon--sound:before{content:"";position:absolute;left:1px;top:6px;width:6px;height:6px;background:currentColor;box-shadow:5px 0 0 -1px currentColor}
.demo-preview__icon--sound:after{content:"";position:absolute;right:0;top:3px;width:8px;height:12px;border-right:2px solid currentColor;border-radius:0 50% 50% 0}
.demo-preview[data-muted="true"] .demo-preview__icon--sound:after{top:8px;right:0;width:10px;height:2px;border:0;border-top:2px solid currentColor;border-radius:0;transform:rotate(-45deg)}
.demo-preview.is-playing .demo-preview__frame--desktop{animation:demo-desktop var(--demo-duration) cubic-bezier(.2,.65,.2,1) both}
.demo-preview.is-playing .demo-preview__frame--mobile{animation:demo-mobile var(--demo-duration) cubic-bezier(.2,.65,.2,1) both}
.demo-preview.is-playing .demo-preview__output{animation:demo-output var(--demo-duration) ease both}
.demo-preview.is-playing .demo-preview__framing-source{animation:demo-framing-source var(--demo-duration) ease both}
.demo-preview.is-playing .demo-preview__framing-result{animation:demo-framing-result var(--demo-duration) cubic-bezier(.2,.65,.2,1) both}
.demo-preview.is-complete .demo-preview__frame--desktop{transform:scale(1.025) translate3d(-2%,0,0)}
.demo-preview.is-complete .demo-preview__frame--mobile{opacity:1;transform:none}
.demo-preview.is-complete.demo-preview--has-output .demo-preview__frame{opacity:0}
.demo-preview.is-complete .demo-preview__output{opacity:1;transform:none}
.demo-preview.is-complete .demo-preview__framing-source{opacity:0}
.demo-preview.is-complete .demo-preview__framing-result{opacity:1;transform:translateX(-50%)}
@keyframes demo-desktop{0%{transform:scale(1);filter:saturate(.82)}42%{transform:scale(1.045) translate3d(-1%,-1%,0);filter:saturate(1)}74%,100%{transform:scale(1.025) translate3d(-2%,0,0);filter:saturate(1)}}
@keyframes demo-mobile{0%,40%{opacity:0;transform:translate3d(14%,4%,0) scale(.96)}62%,100%{opacity:1;transform:none}}
@keyframes demo-output{0%,62%{opacity:0;transform:translateY(2%) scale(.96)}78%,100%{opacity:1;transform:none}}
@keyframes demo-framing-source{0%,38%{opacity:1;transform:none}56%,100%{opacity:0;transform:scale(.96)}}
@keyframes demo-framing-result{0%,38%{opacity:0;transform:translateX(-50%) scale(.92)}60%,100%{opacity:1;transform:translateX(-50%)}}
.demo-preview--card figcaption{min-height:56px;font-size:12px}
.demo-preview--card .demo-preview__controls{gap:4px}
@media(max-width:620px){.demo-preview__stage{aspect-ratio:4/3}.demo-preview__frame--mobile{width:32%;right:4%}.demo-preview figcaption{grid-template-columns:minmax(0,1fr) auto;gap:10px;min-height:64px}.demo-preview__caption{font-size:12px}.demo-preview__output span,.demo-preview__framing-source span,.demo-preview__framing-result span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.demo-preview__frame--desktop{transform:none!important;filter:none!important}.demo-preview__frame--mobile{display:none!important}.demo-preview--has-output .demo-preview__frame--desktop,.demo-preview__framing-source{display:none!important}.demo-preview__output{opacity:1!important;transform:none!important}.demo-preview__framing-result{opacity:1!important;transform:translateX(-50%)!important}.demo-preview__caption{display:none}.demo-preview__reduced{display:inline;color:var(--muted,#706555)}.demo-preview [data-demo-play]{display:none}}