/* One useful flow. No four-scene scroll track or chapter navigation. */
html{scroll-padding-top:100px}body{height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto}
.bg,.has-materials .bg{z-index:0;background:radial-gradient(ellipse at 85% 40%,#c21436 0%,#8f001e 34%,#43000d 67%,#260008 100%)}
.shade,.has-materials .shade{z-index:1;background:linear-gradient(90deg,#1e0007bf 0%,#2b000862 40%,transparent 70%),linear-gradient(0deg,#20000760,transparent 30%)}
.bg-video.female-character,.has-materials .bg-video.female-character{z-index:2;opacity:1;visibility:visible;mask-image:linear-gradient(0deg,transparent 0%,#000 6%,#000 100%);filter:none;translate:none;transition:none}
.head-view{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right bottom;opacity:0;transition:opacity 95ms linear}.head-view.active{opacity:1}
.bg-video.female-character.video-mode,.has-materials .bg-video.female-character.video-mode{right:1vw;width:56.25dvh;max-width:70vw;height:100dvh;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 93%,transparent),linear-gradient(0deg,transparent,#000 7%,#000 95%,transparent);mask-composite:intersect}
.page{position:relative;z-index:1;min-height:100dvh;height:auto;align-items:stretch;padding:24px 32px}
.hero{min-height:calc(100dvh - 100px);max-width:none;width:100%;margin:0;display:flex;align-items:flex-start;justify-content:center;text-align:left;padding:110px 38px 95px}
.hero-copy{width:min(650px,52vw);margin:0;position:relative;z-index:1}.hero h1{font-size:clamp(43px,4.8vw,68px);font-weight:450;letter-spacing:-2.5px;line-height:1.2}
.hero .typed{font-size:13px;line-height:1.9}.hero .video-input{background:#30000bbf;border-color:#ffd7c650;box-shadow:0 20px 70px #1400042b;backdrop-filter:blur(12px)}
.page-foot{margin-top:auto;position:relative;bottom:auto;padding:10px 0 0;background:none}
.has-materials .hero{min-height:0;padding:115px 38px 24px}.has-materials .hero-copy{width:min(850px,65vw)}
#results-region{margin:0 0 35px 38px;width:min(900px,calc(100% - 350px))}
.has-materials .bg-video.female-character{opacity:1}.workspace-open #tool-stage{margin-top:115px}
@media(max-width:1100px){.hero-copy{width:58vw}.bg-video.female-character{right:-9%;height:82%;width:66%}#results-region{width:calc(100% - 76px)}}
@media(max-width:700px){.page{padding:18px 18px}.hero{min-height:calc(100dvh - 80px);padding:130px 4px 90px;justify-content:flex-start}.hero-copy{width:100%;max-width:550px}.hero h1{font-size:42px;letter-spacing:-1.5px;max-width:360px}.hero .typed{font-size:11px;max-width:290px}.clear-kicker{font-size:8px;letter-spacing:1.6px}.hero .video-input{background:#280009d9}.bg-video.female-character,.has-materials .bg-video.female-character{right:-31%;width:110%;height:73%;opacity:.62;mask-image:linear-gradient(0deg,#0008,black)}.shade{background:linear-gradient(90deg,#240007a6,transparent 75%)}.has-materials .hero{padding:100px 0 20px}.has-materials .hero-copy{width:100%}#results-region{margin:0 0 30px;width:100%}.page-foot{font-size:7px;gap:9px}.page-foot>div{display:flex;gap:4px}.page-foot button{font-size:8px;padding:6px 4px}.workspace-open #tool-stage{width:100%;margin:110px 0 30px}.hero .action-pills{max-width:350px}}
@media(prefers-reduced-motion:reduce){.hero,.hero-copy{animation:none!important}.bg-video{transform:none!important}}
@media(max-width:700px){.bg-video.female-character.video-mode,.has-materials .bg-video.female-character.video-mode{right:-14%;width:50.625dvh;max-width:95vw;height:90dvh}}

/* Match the early reference balance: character below header, right of the tool. */
.bg-video.female-character.video-mode,.has-materials .bg-video.female-character.video-mode{right:3vw;width:64dvh;max-width:44vw;height:80dvh}
@media(max-width:700px){.bg-video.female-character.video-mode,.has-materials .bg-video.female-character.video-mode{right:-12%;width:49.6dvh;max-width:95vw;height:62dvh}}

/* User-provided transparent still: preserve the actual alpha, without rectangular blending masks. */
.bg-video.female-character.static-mode,.has-materials .bg-video.female-character.static-mode{right:3vw;bottom:0;width:64dvh;max-width:44vw;height:80dvh;mask-image:none;mask-composite:add;background:transparent}
.static-mode .head-view{object-fit:contain;object-position:center bottom}
@media(max-width:700px){.bg-video.female-character.static-mode,.has-materials .bg-video.female-character.static-mode{top:75px;bottom:auto;right:12px;width:152px;max-width:42vw;height:190px;opacity:1}.hero{padding-top:220px}.has-materials .bg-video.female-character.static-mode{opacity:.25}.has-materials .hero{padding-top:100px}}