/* The supplied screenshot is the UI: these are viewports into its original pixels. */
.screenshot-ui{--tilt-x:0deg;--tilt-y:0deg;position:relative;display:block;overflow:hidden;width:100%;max-width:350px;padding:0;border:0;border-radius:14px;background:#211c29;box-shadow:0 12px 28px #20143930,0 0 0 1px #8053b133;transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .32s ease,box-shadow .32s ease;isolation:isolate}
.screenshot-ui .ui-piece,.screenshot-ui .fact-row,.final-visual .screenshot-ui .fact-row{display:block;position:relative;aspect-ratio:537/var(--piece-height);height:auto;min-height:0;width:100%;overflow:hidden;padding:0;margin:0;border:0;background:transparent;gap:0;transform:none}
.screenshot-ui .ui-piece>img,.product-card .screenshot-ui img{display:block;width:111.173184%;max-width:none;height:auto;margin:var(--piece-offset) 0 0 -6.331471%;padding:0;border:0;border-radius:0;box-shadow:none;transform:none;pointer-events:none;user-select:none}
.mechanics-visual .screenshot-ui{transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}.story-destination .screenshot-ui{max-width:none}.screenshot-ui .progressive-row{opacity:0}.screenshot-ui .progressive-row.is-revealed{opacity:1}.screenshot-ui[data-card=story] .progressive-row:not(.story-slot){opacity:1}.screenshot-ui .story-slot{visibility:hidden;opacity:0}.fact-story-panel[data-story=saved] .screenshot-ui .story-slot{visibility:visible;opacity:1}.final-visual .screenshot-ui .fact-row{opacity:0}.final-visual .screenshot-ui .fact-row.is-revealed{opacity:1}.anke-card .screenshot-ui{pointer-events:auto}.final-visual .screenshot-ui{background:#211c29}.workflow-video{aspect-ratio:600/640}.hero-product{background:#18181b}.viewer-ui .ui-heading,.viewer-ui .ui-footer{opacity:1}.message b{overflow-wrap:anywhere}.story-source .message b{font-size:14px}
@media(hover:hover) and (pointer:fine){.screenshot-ui:hover,.mechanics-visual .screenshot-ui:hover{transform:perspective(900px) translateY(-3px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));box-shadow:0 18px 36px #18103145,0 0 0 1px #9580da75,0 0 25px #7564bd30}.screenshot-ui .fact-row:hover{filter:brightness(1.07)}}
@media(hover:none){.screenshot-ui:active{box-shadow:0 12px 28px #20143940,0 0 0 1px #a391e580,0 0 20px #7564bd25}}
@media(max-width:600px){.screenshot-ui{border-radius:12px}.story-source .message b{font-size:13px}.situation .message b{font-size:13px}.timestamp{margin-left:7px}}
@media(prefers-reduced-motion:reduce){.screenshot-ui,.screenshot-ui:hover,.mechanics-visual .screenshot-ui,.mechanics-visual .screenshot-ui:hover{transform:none!important;transition:none}.screenshot-ui .fact-row:hover{filter:none}}
.workflow-video{display:grid;grid-template-columns:1fr;aspect-ratio:auto}.workflow-video video{width:100%;height:auto;aspect-ratio:600/640}.video-toggle{position:static;justify-self:end;width:30px;height:30px;margin:0 10px 8px 0}.video-toggle svg{width:17px;height:17px}
.hero-product{transition:transform .32s ease,box-shadow .32s ease}
@media(hover:hover) and (pointer:fine){.hero-product:hover{transform:translateY(-3px);box-shadow:0 22px 42px #18103145,0 0 0 1px #9580da65,0 0 24px #7564bd25}}
@media(prefers-reduced-motion:reduce){.hero-product:hover{transform:none}}