/* Finished compositions, with detail-only animation and container-relative type. */
.concept-demo{display:block;width:100%;min-width:0;background:#102330;color:#eff7fa;border-bottom:1px solid #526572}
.demo-viewport{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;container-type:inline-size;background:#eee8da;color:#182b35;text-align:left;isolation:isolate}
.demo-viewport *{box-sizing:border-box}.cv-photo{display:block;width:100%;height:100%;object-fit:cover;max-width:none}.cv-main{position:absolute;inset:0}
.cv-kicker{position:absolute;left:7%;top:8%;z-index:5;font:800 2.35cqw/1.3 var(--body);letter-spacing:.09em;max-width:86%}
.cv-headline{position:absolute;left:7%;top:24%;font:900 8.4cqw/.94 var(--body);letter-spacing:-.065em;z-index:3}.cv-headline em,.cv-keyword-copy em{font-style:normal}
.demo-sequence{display:none}#style-dialog>.concept-demo .demo-sequence{display:flex;flex-wrap:wrap;gap:8px 14px;padding:14px 18px;font-size:14px;line-height:1.45;border-top:1px solid #526572;color:#c6d7e3}
.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0;color:#aebec7;font-size:14px}.demo-controls button{min-height:44px}
.movement-note{font-size:16px;line-height:1.6;color:#ddf8ba;border-left:3px solid #b0f344;padding-left:14px}
#style-dialog>.concept-demo{max-width:640px;margin:0 auto;border:1px solid #526572;border-radius:10px;overflow:hidden}
/* Clean Talking Head */
.demo-focus .cv-main{object-position:50% 38%;transform-origin:50% 35%}.demo-focus .cv-kicker{background:#fff9ef;padding:1.7% 2.5%;border-radius:2px}
.cv-subtitle{position:absolute;left:8%;bottom:9%;font:800 6.7cqw/1.07 var(--body);letter-spacing:-.045em;background:#153042;color:#fff;padding:3% 4%;z-index:3}.cv-subtitle em{color:#d6fa6c;font-style:normal}.cv-focus-frame{position:absolute;inset:5%;border:1px solid #ffffff80;pointer-events:none}
/* Fast-Paced Jump Cut */
.demo-jump .demo-viewport{background:#1c37b4;color:#fff}.cv-jump-shot{position:absolute;inset:0 0 0 37%;overflow:hidden;transform:rotate(4deg) scale(1.08)}.cv-jump-shot .cv-photo{object-position:48% 20%;transform:scale(1.25);transform-origin:50% 30%}
.cv-jump-inset{position:absolute;right:5%;bottom:10%;width:29%;height:38%;border:3px solid #ffde66;transform:rotate(-6deg);overflow:hidden;z-index:4}.cv-jump-inset .cv-photo{transform:scale(1.7);transform-origin:49% 20%}.cv-jump-inset b{position:absolute;bottom:0;left:0;background:#ffde66;color:#162b36;font:800 3cqw var(--body);padding:2% 7%}
.demo-jump .cv-kicker{max-width:33%;font-size:2.2cqw;line-height:1.5}.demo-jump .cv-headline{top:32%;font-size:9cqw;text-shadow:0 2px 16px #18296133}.demo-jump em{color:#ffde66}.cv-cutline{position:absolute;bottom:5%;left:7%;right:7%;height:3%;display:flex;gap:2%}.cv-cutline i{background:#9aadef;flex:1}.cv-cutline i:nth-child(even){flex:1.7;background:#ffde66}
/* Point-by-Point Explainer */
.demo-points .demo-viewport{background:#f7c85f}.demo-points .cv-headline{font-size:9.5cqw;top:20%;color:#172d52}.demo-points em{color:#2253b8}.cv-point-list{position:absolute;left:7%;bottom:8%;width:43%;display:grid;gap:1.8cqw;z-index:3;font:700 3.1cqw var(--body)}.cv-point-list>span{display:flex;align-items:center;gap:3%}.cv-point-list b{display:grid;place-items:center;width:5cqw;height:5cqw;border-radius:50%;background:#172d52;color:#fff;font-size:2.3cqw}.cv-point-portrait{position:absolute;right:-3%;top:25%;width:51%;height:75%;overflow:hidden;border-radius:45% 45% 0 0;background:#eee5d5}.cv-point-portrait .cv-photo{object-position:49% 25%;transform:scale(1.1)}
/* Simple B-Roll Story */
.demo-pan .demo-viewport{background:#ede4cc;color:#202b20}.cv-story-photo{position:absolute;inset:0 0 0 43%;overflow:hidden}.cv-story-photo .cv-photo{object-position:55% 50%;transform:scale(1.15)}.cv-story-strip{position:absolute;right:5%;bottom:8%;width:25%;height:32%;border:5px solid #fff9eb;transform:rotate(8deg);overflow:hidden;box-shadow:0 5px 12px #443b2429}.demo-pan .cv-headline{top:30%;font-size:8.9cqw}.demo-pan em{color:#d75b36}.demo-pan .cv-kicker{max-width:36%;line-height:1.5}.cv-story-note{position:absolute;bottom:10%;left:7%;width:35%;font:600 3cqw/1.45 var(--body)}
/* Natural Product Demo */
.demo-product .demo-viewport{background:#f4ebda}.demo-product .cv-main{object-position:63% 50%;transform:translateX(17%) scale(1.05);transform-origin:65% 60%}.demo-product .cv-headline{top:25%;font-size:8cqw}.demo-product em{color:#bd4c2c}.cv-product-inset{position:absolute;left:7%;bottom:8%;width:25%;height:28%;overflow:hidden;border:3px solid #fff;box-shadow:0 3px 12px #613e2925;z-index:3}.cv-product-inset .cv-photo{transform:scale(2.6);transform-origin:65% 58%}.cv-product-line{position:absolute;left:31%;bottom:22%;width:25%;height:1px;background:#9d4a2b;transform:rotate(-16deg);transform-origin:left}
/* Keyword Punch */
.demo-keyword .demo-viewport{background:#decffc;color:#2d1755}.cv-keyword-portrait{position:absolute;right:-5%;top:17%;width:49%;height:90%;overflow:hidden;border-radius:50% 0 0 0}.cv-keyword-portrait .cv-photo{object-position:48% 25%}.cv-keyword-copy{position:absolute;left:7%;top:28%;z-index:3}.cv-keyword-copy>span{display:block;font:600 3.1cqw var(--body);margin-bottom:3cqw}.cv-keyword-copy strong{display:block;font:900 11.6cqw/.98 var(--body);letter-spacing:-.07em}.cv-keyword-copy em{display:inline-block;background:#ceff67;color:#1b2931;padding:0 3%;transform:rotate(-4deg)}.cv-underline{position:absolute;width:47%;height:1.5%;background:#784da8;bottom:13%;left:7%;transform:rotate(-4deg)}
/* Detail & Callout */
.demo-callout .demo-viewport{background:#f0e8d8}.demo-callout .cv-main{transform:translate(-8%,12%) scale(.98)}.demo-callout .cv-headline{top:22%;font-size:7.5cqw}.demo-callout em{color:#b84d2b}.cv-magnifier{position:absolute;right:6%;top:21%;width:34%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:4px solid #b84d2b;box-shadow:0 5px 20px #70432426;z-index:3}.cv-magnifier .cv-photo{transform:scale(3);transform-origin:60% 57%}.cv-callout-line{position:absolute;left:45%;top:62%;width:26%;height:2px;background:#b84d2b;transform:rotate(-24deg);transform-origin:left}.cv-callout-label{position:absolute;right:5%;bottom:13%;background:#b84d2b;color:white;padding:2% 3%;font:700 3cqw var(--body);z-index:3}
/* Split-Screen Explainer */
.demo-split .demo-viewport{background:#ede5d3}.cv-split-left,.cv-split-right{position:absolute;top:0;bottom:0;width:50%;overflow:hidden}.cv-split-left{left:0}.cv-split-right{right:0}.cv-split-left .cv-photo{object-position:48% 20%}.cv-split-right .cv-photo{object-position:55% 50%}.cv-split-left b,.cv-split-right b{position:absolute;left:12%;top:10%;font:800 2.8cqw var(--body);letter-spacing:.08em;background:#fff8e9;padding:3% 5%}.cv-split-divider{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff9ec}.cv-split-caption{position:absolute;bottom:10%;left:7%;right:7%;text-align:center;font:800 5.4cqw/1.2 var(--body);background:#17352a;color:#fff;padding:3% 1%;letter-spacing:-.04em}.cv-split-caption em{font-style:normal;color:#d9ee8f}
/* POV Walkthrough */
.demo-walkthrough .demo-viewport{background:#cde4ef;color:#163147}.demo-walkthrough .cv-headline{font-size:6.8cqw;top:20%}.demo-walkthrough em{color:#22629b}.cv-workspace{position:absolute;left:20%;right:7%;top:47%;height:48%;background:#fffdf6;border:1px solid #b7cbd2;box-shadow:8px 8px 0 #76a9c34d;border-radius:5px;padding:6% 5% 2%;transform:rotate(-3deg)}.cv-window-bar{position:absolute;top:0;left:0;right:0;height:15%;border-bottom:1px solid #d5dfe4;display:flex;align-items:center;gap:3px;padding-left:6%}.cv-window-bar i{width:4px;height:4px;border-radius:50%;background:#96aebc}.cv-work-step{display:flex;align-items:center;gap:5%;font:700 3cqw var(--body);height:30%;padding:0 3%;border-radius:3px}.cv-work-step b{color:#4682a4;font-size:2.4cqw}.cv-work-step>span{margin-left:auto;color:#3b7254}.cv-step-three{background:#def5b2}.cv-pointer{position:absolute;right:4%;bottom:0;font:900 8cqw var(--body);color:#224b80;text-shadow:1px 1px white;z-index:3}
/* Rhythm & Match Cut */
.demo-match .demo-viewport{background:#1c3432;color:#f5ebd6}.cv-match-disc{position:absolute;top:20%;width:31%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid #f5d076}.cv-disc-one{left:12%;transform:rotate(-10deg)}.cv-disc-two{right:12%;transform:rotate(10deg)}.cv-disc-one .cv-photo{transform:scale(2);transform-origin:56% 55%}.cv-disc-two .cv-photo{transform:scale(3);transform-origin:57% 47%}.cv-match-arrow{position:absolute;left:46%;top:36%;font:600 6cqw var(--body);color:#f5d076}.demo-match .cv-headline{top:auto;bottom:9%;left:7%;font-size:6.6cqw;line-height:1.05}.demo-match em{color:#f5d076}.cv-beats{position:absolute;right:7%;bottom:10%;width:33%;height:12%;display:flex;align-items:center;gap:7%}.cv-beats i{width:7%;height:40%;background:#f5d076}.cv-beats i:nth-child(2n){height:85%}.cv-beats i:nth-child(3n){height:60%}
/* Detail playback. Matching pointer previews are added below. */
#style-dialog[open] .concept-demo *{animation-duration:7s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
#style-dialog[open] .demo-focus .cv-main{animation-name:cv-focus}
#style-dialog[open] .demo-jump .cv-jump-shot .cv-photo{animation-name:cv-jump;animation-timing-function:steps(1,end)}
#style-dialog[open] .demo-points .cv-point-list>span{animation-name:cv-point}#style-dialog[open] .demo-points .cv-point-list>span:nth-child(2){animation-delay:2.33s}#style-dialog[open] .demo-points .cv-point-list>span:nth-child(3){animation-delay:4.66s}
#style-dialog[open] .demo-pan .cv-story-photo .cv-photo{animation-name:cv-pan}
#style-dialog[open] .demo-product .cv-main{animation-name:cv-product}
#style-dialog[open] .demo-keyword .cv-keyword-copy em{animation-name:cv-word}
#style-dialog[open] .demo-callout .cv-magnifier{animation-name:cv-callout}
#style-dialog[open] .demo-split .cv-split-left{animation-name:cv-split-left}#style-dialog[open] .demo-split .cv-split-right{animation-name:cv-split-right}#style-dialog[open] .demo-split .cv-split-divider{animation-name:cv-divider}
#style-dialog[open] .demo-walkthrough .cv-pointer{animation-name:cv-pointer}
#style-dialog[open] .demo-match .cv-disc-one .cv-photo{animation-name:cv-match;animation-timing-function:steps(1,end)}#style-dialog[open] .demo-match .cv-beats i{animation-name:cv-beat;animation-duration:1s}#style-dialog[open] .demo-match .cv-beats i:nth-child(2n){animation-delay:.3s}
#style-dialog[open] .demo-paused *,#style-dialog[open] .demo-paused{animation-play-state:paused!important}
@keyframes cv-focus{0%,15%,85%,100%{transform:scale(1)}35%,65%{transform:scale(1.13)}}
@keyframes cv-jump{0%,24%,85%,100%{transform:scale(1.25)}25%,49%{transform:scale(1.45)}50%,84%{transform:scale(1.65)}}
@keyframes cv-point{0%,8%,31%,100%{transform:translateX(0);opacity:.65}10%,29%{transform:translateX(6%);opacity:1}}
@keyframes cv-pan{0%,100%{transform:scale(1.15) translateX(3%)}60%{transform:scale(1.25) translateX(-5%)}}
@keyframes cv-product{0%,15%,90%,100%{transform:translateX(17%) scale(1.05)}38%,68%{transform:translateX(12%) scale(1.2)}}
@keyframes cv-word{0%,18%,90%,100%{transform:rotate(-4deg) scale(1)}28%,65%{transform:rotate(-4deg) scale(1.1)}}
@keyframes cv-callout{0%,15%,90%,100%{transform:scale(.9)}35%,70%{transform:scale(1.06)}}
@keyframes cv-split-left{0%,15%,85%,100%{width:50%}40%,65%{width:35%}}
@keyframes cv-split-right{0%,15%,85%,100%{width:50%}40%,65%{width:65%}}
@keyframes cv-divider{0%,15%,85%,100%{left:50%}40%,65%{left:35%}}
@keyframes cv-pointer{0%,20%,100%{transform:translateY(-180%)}35%,50%{transform:translateY(-90%)}65%,85%{transform:translateY(0)}}
@keyframes cv-match{0%,44%,90%,100%{opacity:0}45%,89%{opacity:1}}
@keyframes cv-beat{0%,100%{transform:scaleY(.65)}50%{transform:scaleY(1)}}
.cv-disc-one .cv-photo{position:absolute;inset:0}.cv-disc-one .cv-match-next,.cv-disc-two .cv-photo{transform:scale(1.15);transform-origin:center}.cv-disc-one .cv-match-next{opacity:0}#style-dialog[open] .demo-match .cv-disc-one .cv-photo{animation-name:none}#style-dialog[open] .demo-match .cv-disc-one .cv-match-next{animation-name:cv-match;animation-timing-function:steps(1,end)}
@media(prefers-reduced-motion:reduce){#style-dialog[open] .concept-demo *{animation:none!important}.demo-controls button{display:none}}
.style-card-copy{flex:1;grid-template-rows:auto 1fr auto}.style-dialog-header h2{min-width:0;overflow-wrap:anywhere}.style-dialog-header button{min-height:44px}#style-dialog .style-detail-actions>*{min-height:44px}#style-dialog .style-spec pre{max-width:100%;margin-bottom:0}
@media(max-width:600px){.style-dialog-header{align-items:flex-start;gap:12px}#style-dialog{padding:16px}.style-dialog-header h2{font-size:1.5rem}.movement-note{padding-left:12px}#style-dialog>.concept-demo .demo-sequence{display:grid;padding:12px;gap:6px}}

/* Desktop hover/focus previews use the same concept motion as the detail view. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.style-card:is(:hover,:focus-visible) .concept-demo *{animation-duration:7s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.style-card:is(:hover,:focus-visible) .demo-focus .cv-main{animation-name:cv-focus}
.style-card:is(:hover,:focus-visible) .demo-jump .cv-jump-shot .cv-photo{animation-name:cv-jump;animation-timing-function:steps(1,end)}
.style-card:is(:hover,:focus-visible) .demo-points .cv-point-list>span{animation-name:cv-point}.style-card:is(:hover,:focus-visible) .demo-points .cv-point-list>span:nth-child(2){animation-delay:2.33s}.style-card:is(:hover,:focus-visible) .demo-points .cv-point-list>span:nth-child(3){animation-delay:4.66s}
.style-card:is(:hover,:focus-visible) .demo-pan .cv-story-photo .cv-photo{animation-name:cv-pan}
.style-card:is(:hover,:focus-visible) .demo-product .cv-main{animation-name:cv-product}
.style-card:is(:hover,:focus-visible) .demo-keyword .cv-keyword-copy em{animation-name:cv-word}
.style-card:is(:hover,:focus-visible) .demo-callout .cv-magnifier{animation-name:cv-callout}
.style-card:is(:hover,:focus-visible) .demo-split .cv-split-left{animation-name:cv-split-left}.style-card:is(:hover,:focus-visible) .demo-split .cv-split-right{animation-name:cv-split-right}.style-card:is(:hover,:focus-visible) .demo-split .cv-split-divider{animation-name:cv-divider}
.style-card:is(:hover,:focus-visible) .demo-walkthrough .cv-pointer{animation-name:cv-pointer}
.style-card:is(:hover,:focus-visible) .demo-match .cv-disc-one .cv-photo{animation-name:cv-match;animation-timing-function:steps(1,end)}.style-card:is(:hover,:focus-visible) .demo-match .cv-beats i{animation-name:cv-beat;animation-duration:1s}.style-card:is(:hover,:focus-visible) .demo-match .cv-beats i:nth-child(2n){animation-delay:.3s}
.style-card:is(:hover,:focus-visible) .demo-match .cv-disc-one .cv-photo{animation-name:none}
.style-card:is(:hover,:focus-visible) .demo-match .cv-disc-one .cv-match-next{animation-name:cv-match;animation-timing-function:steps(1,end)}
.style-card:is(:hover,:focus-visible) .concept-demo *{animation-duration:4s;animation-delay:-1.2s}
.style-card:is(:hover,:focus-visible) .demo-points .cv-point-list>span:nth-child(2){animation-delay:-2.53s}
.style-card:is(:hover,:focus-visible) .demo-points .cv-point-list>span:nth-child(3){animation-delay:-3.86s}
.style-card:is(:hover,:focus-visible) .demo-match .cv-beats i{animation-duration:1s}
.style-card .style-sample{transition:transform .3s ease;transform-origin:center}
.style-card:is(:hover,:focus-visible) .style-sample{transform:scale(1.025)}
.style-card .sample-rule,.style-card .sample-dot{transition:translate .35s ease,scale .35s ease}
.style-card:is(:hover,:focus-visible) .sample-rule{translate:8px 0}
.style-card:is(:hover,:focus-visible) .sample-dot{scale:1.1;translate:-4px 3px}
}