.build18-only{min-height:100svh;display:grid;place-items:center;background:#fafafa;margin:0}
.build18-wrap{width:min(1050px,calc(100vw - 32px));padding:24px 0}
.build18-wrap .film{margin:0;max-width:none}
.build18-wrap .film-copy :is(h1,h2){font-size:clamp(36px,4.9vw,65px);line-height:1.03;font-weight:600;letter-spacing:-2.8px;margin:0;color:#373342;animation:type-arrive .72s cubic-bezier(.16,1,.3,1) both}
.build18-wrap .film-copy :is(h1,h2) span{color:#a397b4}
.build18-wrap .film-product{--w:400px;--px:70%;--py:53%;--rotate:0deg}
.build18-wrap .shot{position:relative;aspect-ratio:var(--ratio);overflow:hidden;clip-path:none;border-radius:var(--capture-radius,18px)!important;background:none}
.build18-wrap .shot img{position:absolute;max-width:none;height:auto;display:block;user-select:none}
.build18-wrap .film-stage[data-beat=mighty] .film-product{--w:200px;--py:53%;--px:70%;--rotate:-2deg}
.build18-wrap .film-stage[data-kind=detail] .film-product{--w:300px;--px:70%;--py:53%;--rotate:1deg}
.build18-wrap .film-stage[data-beat=cpu] .film-product{--rotate:-1deg}
.build18-wrap .film-stage[data-beat=bluetooth] .film-aura{background:radial-gradient(ellipse,#b1c8f977,transparent 65%)}
.build18-wrap .film-stage[data-beat=technical] .film-product{--w:280px;--py:53%;--px:71%;--rotate:1deg}
.build18-wrap .film-stage[data-beat=confirm] .film-product{--w:390px;--py:54%;--px:71%;--rotate:0deg}
.build18-wrap .film-stage[data-beat=shortcut] .film-product{--w:410px;--py:54%;--px:71%;--rotate:-1deg}
.build18-wrap .film-stage:is([data-beat=detach],[data-beat=finale]) .film-product{--w:340px;--px:70%;--py:66%}
.build18-wrap .film-stage:is([data-beat=detach],[data-beat=finale]) .film-copy{top:20%;width:68%}
.build18-wrap .film-stage:is([data-beat=detach],[data-beat=finale]) :is(h1,h2){font-size:clamp(32px,4.6vw,53px);letter-spacing:-2px}
.build18-wrap .film-stage[data-paused=true] :is(.shot,.film-copy :is(h1,h2),.film-kicker,.film-copy p){animation:none!important}
.build18-controls{display:flex;align-items:center;gap:19px;margin-top:17px;color:#94899f;font-size:10px}
.film-buttons{display:flex;gap:4px;align-items:center}.film-buttons button{border:0;background:transparent;color:#786b89;font:inherit;min-height:34px;min-width:34px;cursor:pointer;padding:5px 8px;border-radius:9px}
.film-buttons button:hover{background:#ede8f2}.film-buttons #play{min-width:60px}.scene-picker select{max-width:210px;font:inherit;color:#81758e;border:0;background:transparent;cursor:pointer;padding:8px 22px 8px 4px}
.build-label{margin-left:auto;color:#a49aaf}.build18-controls a{color:#8b7b9b;text-decoration:none;white-space:nowrap}
.build18-progress{height:2px;background:#ece7f1;border-radius:3px;overflow:hidden;margin-top:7px}.build18-progress span{display:block;height:100%;background:linear-gradient(90deg,#9eb8e4,#ac91ce);transform:scaleX(0);transform-origin:left}
.capture-note{text-align:center;font-size:9px;line-height:1.6;color:#aaa1b3;margin:13px 0 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.build18-wrap .film-handle{border:0;background:transparent;outline-offset:5px}.build18-wrap :focus-visible{outline:2px solid #a38abe;outline-offset:3px}.build18-wrap .film-handle:focus-visible{outline-offset:-5px}
@media(max-width:1000px) and (min-width:751px){.build18-wrap .film-stage[data-kind=detail] .film-product{--w:270px}.build18-wrap .film-stage[data-beat=technical] .film-product{--w:260px}.build18-wrap .film-stage[data-beat=shortcut] .film-product{--w:340px}.build18-wrap .film-stage[data-beat=confirm] .film-product{--w:320px}}
@media(max-width:750px){.build18-wrap{width:calc(100vw - 24px);padding:12px 0}.build18-wrap .film-stage{height:620px;border-radius:22px}.build18-wrap .film-top{left:22px;right:22px;top:20px;font-size:7px}.build18-wrap .film-copy{top:12%;left:8%;width:85%}.build18-wrap .film-copy :is(h1,h2){font-size:44px;letter-spacing:-1.8px}.build18-wrap .film-copy p{margin-top:12px;max-width:260px;font-size:11px}.build18-wrap .film-kicker{margin-bottom:13px}.build18-wrap .film-stage .film-product{--px:50%;--py:67%;--rotate:0deg;--w:min(290px,82vw)}.build18-wrap .film-stage[data-kind=detail] .film-product{--w:250px;--px:50%;--py:68%;--rotate:0deg}.build18-wrap .film-stage[data-beat=mighty] .film-product{--w:155px;--px:50%;--py:67%;--rotate:0deg}.build18-wrap .film-stage[data-beat=technical] .film-product{--w:220px;--px:50%;--py:69%}.build18-wrap .film-stage:is([data-beat=shortcut],[data-beat=confirm]) .film-product{--w:min(320px,84vw);--px:50%;--py:67%}.build18-wrap .film-stage:is([data-beat=detach],[data-beat=finale]) .film-copy{top:12%;width:85%}.build18-wrap .film-stage:is([data-beat=detach],[data-beat=finale]) :is(h1,h2){font-size:39px}.build18-controls{gap:8px;flex-wrap:wrap;font-size:9px;margin-top:11px}.scene-picker{margin-right:auto}.scene-picker select{max-width:175px}.build-label{margin-left:7px;font-size:8px}.build18-controls a{margin-left:auto;font-size:9px}.capture-note{font-size:8px}.film-buttons button{min-width:29px;padding:4px}.film-buttons #play{min-width:50px}}
@media(prefers-reduced-motion:reduce){.build18-wrap *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.home-film{margin-inline:auto;padding:0}.home-film .film{margin-top:48px;margin-bottom:48px}

/* Brief fades leave the native interface readable within each beat. */
.build18-wrap .film-product{transition-duration:120ms!important}
.build18-wrap .film-stage .shot{animation:none!important}
.build18-wrap .film-copy :is(h1,h2),.build18-wrap .film-copy :is(h1,h2) span,.build18-wrap .film-kicker,.build18-wrap .film-copy p{animation:none!important;transition-duration:120ms!important}
.build18-wrap .film-stage[data-beat=detach] .film-menu{animation:none!important}

/* One stable landing point. The capture settles independently of its native proportions. */
.build18-wrap .film-stage[data-beat] .film-product{--px:70%;--py:53%;--rotate:0deg;transition:none!important}
.build18-wrap .film-stage .shot{transition:none!important;transform-origin:50% 50%;will-change:transform,opacity}
.build18-wrap .film-stage[data-kind=detail] .film-product{--px:70%;--py:53%;--rotate:0deg}
.build18-wrap .film-stage:is([data-beat=detach],[data-beat=finale]) .film-product{--px:70%;--py:66%;--rotate:0deg}
.build18-wrap .film-stage .film-detach-cue{display:none}
.build18-wrap .film-product.dragging .shot{will-change:auto}
@media(max-width:750px){
 .build18-wrap .film-stage[data-beat] .film-product{--px:50%;--py:67%;--rotate:0deg}
 .build18-wrap .film-stage[data-kind=detail] .film-product{--px:50%;--py:68%}
 .build18-wrap .film-stage:is([data-beat=detach],[data-beat=finale]) .film-product{--px:50%;--py:67%}
}

/* Playful landings are intentional; the window itself keeps its true proportions. */
.build18-wrap .film-stage[data-beat=small] .film-product{--px:68%;--py:54%}
.build18-wrap .film-stage[data-beat=cards] .film-product{--px:72%;--py:50%}
.build18-wrap .film-stage[data-beat=full] .film-product{--px:69%;--py:52%}
.build18-wrap .film-stage[data-beat=mighty] .film-product{--px:72%;--py:51%}
.build18-wrap .film-stage[data-beat=gpu] .film-product{--px:69%;--py:54%}
.build18-wrap .film-stage[data-beat=cpu] .film-product{--px:71%;--py:52%}
.build18-wrap .film-stage[data-beat=apps] .film-product{--px:68%;--py:54%}
.build18-wrap .film-stage[data-beat=network] .film-product{--px:72%;--py:52%}
.build18-wrap .film-stage[data-beat=memory] .film-product{--px:69%;--py:53%}
.build18-wrap .film-stage[data-beat=disk] .film-product{--px:71%;--py:51%}
.build18-wrap .film-stage[data-beat=bluetooth] .film-product{--px:70%;--py:54%}
.build18-wrap .film-stage[data-beat=shortcut] .film-product{--px:70%;--py:52%}
.build18-wrap .film-stage[data-beat=independent] .film-product{--px:71%;--py:53%}
.build18-wrap .film-stage[data-beat=before-detach] .film-product{--px:70%;--py:48%}
.build18-wrap .film-stage[data-beat=detach] .film-product{--px:69%;--py:65%}
.build18-wrap .film-stage[data-beat=finale] .film-product{--px:70%;--py:66%}
@media(max-width:750px){
 .build18-wrap .film-stage[data-beat] .film-product{--px:50%;--py:67%}
 .build18-wrap .film-stage[data-kind=detail] .film-product{--px:50%;--py:68%}
}

/* A tab lifts out of the native panel, then two independent windows trade sizes. */
.build18-wrap .film-stage[data-kind=tab-demo] .film-product{--w:490px;--px:70%;--py:55%}
.tab-demo{position:relative;width:100%;aspect-ratio:500/400}
.demo-parent,.demo-window,.demo-tab-chip{position:absolute;transition:opacity 180ms ease,left 300ms cubic-bezier(.2,.75,.3,1),top 300ms cubic-bezier(.2,.75,.3,1),height 360ms cubic-bezier(.2,.75,.3,1)}
.demo-parent{left:4%;top:2.5%;width:29.6%;opacity:0;filter:drop-shadow(0 8px 10px #55456812)}
.demo-window{width:44%;height:81.52%;overflow:hidden;border-radius:12px;filter:drop-shadow(0 12px 10px #55456822);transform-origin:0 0}
.demo-window .demo-expanded,.demo-window .demo-collapsed{position:absolute;left:0;top:0;width:100%;transition:opacity 90ms ease}
.demo-cpu{left:1%;top:8.75%;transform:rotate(-2deg)}
.demo-gpu{left:52%;top:2.5%;transform:rotate(2deg);opacity:1}
.demo-collapsed{opacity:0}
.demo-expanded{opacity:1}
.demo-tab-chip{left:19%;top:31%;width:6.7%;opacity:0;z-index:4}
.film-stage[data-demo=pull] .demo-parent{opacity:.78}
.film-stage[data-demo=pull] .demo-cpu{left:52%;top:5.5%}
.film-stage:is([data-demo=pull],[data-demo=fold]) .demo-gpu{opacity:0}
.film-stage[data-demo=fold] .demo-cpu{left:28%;top:21.25%}
.film-stage[data-demo=gpu] .demo-cpu{left:1%;top:7.5%}
.film-stage[data-demo=gpu] .demo-gpu{top:8.5%}
.film-stage[data-demo=swap] .demo-cpu{top:5%}
.film-stage[data-demo=swap] .demo-gpu{top:17.5%}
.film-stage[data-demo=small] .demo-cpu{left:7%;top:20%}
.film-stage[data-demo=small] .demo-gpu{left:48%;top:50%}
.film-stage:is([data-demo=fold],[data-demo=gpu],[data-demo=small]) .demo-cpu,.film-stage:is([data-demo=swap],[data-demo=small]) .demo-gpu{height:25.54%}
.film-stage:is([data-demo=fold],[data-demo=gpu],[data-demo=small]) .demo-cpu .demo-expanded,.film-stage:is([data-demo=swap],[data-demo=small]) .demo-gpu .demo-expanded{opacity:0}
.film-stage:is([data-demo=fold],[data-demo=gpu],[data-demo=small]) .demo-cpu .demo-collapsed,.film-stage:is([data-demo=swap],[data-demo=small]) .demo-gpu .demo-collapsed{opacity:1}
@media(max-width:1000px) and (min-width:751px){.build18-wrap .film-stage[data-kind=tab-demo] .film-product{--w:400px;--px:72%}}
@media(max-width:750px){.build18-wrap .film-stage[data-kind=tab-demo] .film-product{--w:min(340px,90vw);--px:50%;--py:67%}}
@media(prefers-reduced-motion:reduce){.tab-demo *{transition:none!important}}
.hidden-motion .tab-demo *{transition:none!important}

/* A brief halo identifies the actual disclosure and the tab being lifted out. */
.demo-window::after{content:"";position:absolute;left:65%;top:2px;width:19px;height:19px;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 0 2px #aa96ca77,inset 0 0 0 1px #fff9;background:#baa8dc12}
.film-stage:is([data-demo=fold],[data-demo=swap],[data-demo=small],[data-demo=mighty]) .demo-cpu::after,.film-stage:is([data-demo=swap],[data-demo=small],[data-demo=mighty]) .demo-gpu::after{animation:disclosure-accent 390ms ease-out both}
.film-stage[data-demo=pull] .demo-tab-chip{filter:drop-shadow(0 0 5px #a890db99)}
@keyframes disclosure-accent{0%{opacity:0;transform:scale(.75)}25%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
.build18-wrap .film-copy :is(h1,h2) span{display:inline;color:#a397b4}
.film-stage[data-paused=true] .demo-window::after,.hidden-motion .demo-window::after{animation:none!important}
@media(prefers-reduced-motion:reduce){.demo-window::after{animation:none!important}}

/* The opening rolls upward through the actual native sizes at one fixed scale. */
.build18-wrap .film-stage[data-intro=true] .film-product{--w:210px;--px:70%;--py:8%;transform:translateX(-50%)}
.intro-previous{position:absolute!important;left:0;top:0;width:100%;pointer-events:none;z-index:1}
/* A single floating monitor lifts out, glides freely, then becomes the mini view. */
.build18-wrap .film-stage[data-kind=floating-demo] .film-product{--w:470px;--px:70%;--py:73%}
.floating-demo{position:relative;width:100%;aspect-ratio:500/400}
.floating-window{position:absolute;left:8%;top:5%;width:66%;height:62.86%;overflow:hidden;border-radius:15px;transform:rotate(-2deg);filter:drop-shadow(0 12px 12px #55456822);transition:left 420ms cubic-bezier(.2,.7,.3,1),top 420ms cubic-bezier(.2,.7,.3,1),height 400ms cubic-bezier(.2,.7,.3,1),transform 420ms ease}
.floating-expanded,.floating-compact{position:absolute;top:0;left:0;width:100%;transition:opacity 100ms ease}
.floating-compact{opacity:0}
.film-stage[data-floating=drift] .floating-window{left:31%;top:23%;transform:rotate(2deg)}
.film-stage[data-floating=compact] .floating-window{left:18%;top:40%;height:15.23%;transform:rotate(0)}
.film-stage[data-floating=compact] .floating-expanded{opacity:0}
.film-stage[data-floating=compact] .floating-compact{opacity:1}
.build18-wrap .film-stage[data-kind=floating-demo] .film-copy{top:17%;width:75%}
.build18-wrap .film-stage[data-kind=floating-demo] :is(h1,h2){font-size:clamp(32px,4.6vw,53px);letter-spacing:-2px}
.build18-wrap .film-stage[data-floating=compact] .film-handle{left:18%;top:40%;width:66%;height:15.23%}
@media(max-width:1000px) and (min-width:751px){.build18-wrap .film-stage[data-kind=floating-demo] .film-product{--w:400px;--px:70%}}
@media(max-width:750px){.build18-wrap .film-stage[data-intro=true] .film-product{--w:155px;--px:50%;--py:37%;transform:translateX(-50%)}.build18-wrap .film-stage[data-kind=floating-demo] .film-product{--w:min(340px,90vw);--px:50%;--py:68%}.build18-wrap .film-stage[data-kind=floating-demo] .film-copy{top:12%;width:85%}.build18-wrap .film-stage[data-kind=floating-demo] :is(h1,h2){font-size:39px}}
@media(prefers-reduced-motion:reduce){.floating-demo *{transition:none!important}}
.hidden-motion .floating-demo *{transition:none!important}