/* Interactive canvas and progressive, edge-dissolving product compositions. */
.live-product-surface{position:absolute;z-index:5;background:#000;border-radius:10px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .6s ease;box-shadow:0 24px 75px #0009}
.live-product-surface.is-ready{opacity:1;pointer-events:auto}
.live-product-surface iframe{border:0;display:block;transform-origin:top left;background:#000}
.demo-meta{position:relative;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:28px;color:#8e949f;font-size:14px;line-height:1.7}
.demo-meta>div{display:flex;gap:24px}.demo-meta button,.try-operation{border:0;background:none;color:#c7c3d2;font-size:14px;min-height:44px;padding:10px 0}
.demo-meta button:hover,.try-operation:hover{color:#fff}
.live-demo-dialog{width:calc(100vw - 48px);max-width:1440px;height:calc(100dvh - 48px);max-height:none;padding:0;border-radius:14px;overflow:hidden;background:#090a0b}
.live-demo-dialog>header{height:72px;display:flex;gap:32px;align-items:center;padding:12px 24px}
.live-demo-dialog h2{font-size:17px;font-weight:500;margin-right:auto}.live-demo-dialog header [role=group]{display:flex;gap:8px}.live-demo-dialog header button{border:0;background:none;color:#969ba5;min-width:44px;min-height:44px;font-size:14px;padding:10px 16px;border-radius:999px}.live-demo-dialog header button[aria-pressed=true]{background:#ffffff09;color:#eee}.live-demo-dialog header .close-live-demo{font-size:24px;padding:0}
.demo-modal-body{height:calc(100% - 116px);position:relative}.live-demo-dialog>p{font-size:14px;line-height:1.5;color:#858c98;padding:12px 24px;margin:0}.live-demo-dialog .live-product-surface{border-radius:0}
.try-operation{display:block;margin:0 0 22px}.generation-story{min-height:650px;padding-bottom:40px;position:relative}
.generation-backdrop{position:absolute;z-index:-1;top:88px;left:0;width:100%;height:auto;opacity:.38;pointer-events:none;mask-image:linear-gradient(90deg,#000 0%,#000 25%,#0009 65%,transparent),linear-gradient(#000 35%,transparent 100%);mask-composite:intersect;translate:var(--pointer-x,0px) calc(var(--pointer-y,0px) + var(--scroll-depth,0px));transition:translate .65s var(--motion-ease),opacity .6s}
.generation-window{position:relative;width:58%;margin-top:48px;overflow:visible;z-index:2;filter:drop-shadow(0 24px 55px #0009)}
.generation-window .image-open{position:relative;aspect-ratio:1.76;overflow:hidden;box-shadow:0 -1px 0 #ffffff0c}
.generation-window img{position:absolute;width:194%;max-width:none;height:auto;left:-47%;top:-57%;object-fit:initial}
.generation-story[data-view="workspace-hd.jpg"] .generation-window{width:88%;margin-left:12%;margin-top:36px}
.generation-story[data-view="workspace-hd.jpg"] .generation-window .image-open{aspect-ratio:1.6}
.generation-story[data-view="workspace-hd.jpg"] .generation-window img{position:static;width:100%;height:100%;object-fit:cover;margin:0}
.generation-story[data-view="workspace-hd.jpg"] .generation-backdrop{opacity:.12}
.editing-window{padding-top:36px;padding-left:32px}
.editing-backplane{position:absolute;z-index:-1;top:0;left:0;width:94%;height:auto;opacity:.4;pointer-events:none;mask-image:linear-gradient(135deg,#000 10%,#0008 50%,transparent 85%);translate:var(--pointer-x,0px) calc(var(--pointer-y,0px) + var(--scroll-depth,0px));transition:translate .65s var(--motion-ease)}
.selection-story{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:0;padding-bottom:48px}
.selection-story .selection-window{position:relative;z-index:0;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 87%,transparent)}
.selection-story .explanation-window{position:relative;z-index:2;margin-left:-36px;translate:0 var(--scroll-depth,0px);transition:translate .7s var(--motion-ease)}
.selection-story .explanation-window .image-open{box-shadow:0 -1px 0 #ffffff0b,0 24px 70px #000b}
.progressive-stage.depth-visible .generation-backdrop,.progressive-stage.depth-visible .editing-backplane{animation:embedded-light 9s ease-in-out infinite alternate;animation-play-state:paused}
.motion-active .progressive-stage.depth-visible .generation-backdrop,.motion-active .progressive-stage.depth-visible .editing-backplane{animation-play-state:running}
@keyframes embedded-light{from{filter:brightness(.7)}to{filter:brightness(1)}}
@media(max-width:1100px){.generation-story{min-height:550px}.generation-window{width:64%}.live-demo-dialog>header{gap:16px}}
@media(max-width:760px){.hero-shot .live-product-surface{display:none}.hero-shot>.hero-screen[aria-hidden=true]{visibility:visible}.demo-meta{gap:16px;flex-wrap:wrap}.demo-meta>div{gap:22px}.live-demo-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px);border-radius:10px}.live-demo-dialog>header{height:108px;flex-wrap:wrap;padding:8px 16px;gap:0 12px}.live-demo-dialog h2{width:calc(100% - 60px);order:0}.live-demo-dialog header .close-live-demo{order:1}.live-demo-dialog header [role=group]{order:2;width:100%;justify-content:center}.demo-modal-body{height:calc(100% - 158px)}.live-demo-dialog>p{font-size:14px;padding:10px 16px}.generation-story{min-height:410px}.generation-backdrop{top:75px}.generation-window{width:75%;margin-top:36px}.editing-window{padding-top:28px;padding-left:24px}.selection-story .explanation-window{margin-left:-20px}}
@media(max-width:540px){.demo-meta{display:block;margin-top:22px}.demo-meta>div{margin-top:8px;justify-content:space-between}.generation-story{min-height:0;padding-bottom:48px}.generation-window,.generation-story[data-view="workspace-hd.jpg"] .generation-window{width:100%;margin:32px 0 0}.generation-backdrop{opacity:.22;top:50px}.generation-window .image-open{aspect-ratio:1.6}.generation-window img{top:-52%}.editing-window{padding-top:20px;padding-left:16px}.selection-story{grid-template-columns:1fr;padding-bottom:0;gap:36px}.selection-story .selection-window{mask-image:none}.selection-story .explanation-window{margin-left:0;width:90%;justify-self:end;translate:none}.try-operation{margin-bottom:12px}.live-demo-dialog header button{padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.live-product-surface,.generation-backdrop,.editing-backplane,.selection-story .explanation-window{transition:none!important;translate:none!important}.progressive-stage.depth-visible .generation-backdrop,.progressive-stage.depth-visible .editing-backplane{animation:none!important}}

/* Keep the iframe mounted while switching from inline to the modal top layer. */
.live-demo-dialog.is-inline{display:block;position:absolute;inset:auto;margin:0;padding:0;border:0;z-index:5;max-width:none;max-height:none;background:transparent;overflow:visible}
.live-demo-dialog.is-inline>header,.live-demo-dialog.is-inline>p{display:none}
.live-demo-dialog.is-inline>.demo-modal-body{height:100%}
@media(max-width:760px){.live-demo-dialog.is-inline{display:none}}

.editing-window>.editing-backplane{width:94%;max-width:94%;margin:0}

.generation-window{transition:width .7s var(--motion-ease),margin .7s var(--motion-ease)}
@media(prefers-reduced-motion:reduce){.generation-window{transition:none}}

.live-demo-dialog.is-inline{pointer-events:none}
.live-demo-dialog.is-inline .live-product-surface.is-ready{pointer-events:auto}

.live-demo-dialog.is-inline{animation:none!important}