/* Creator flows are compositions, independent of changing editor chrome. */
.creator-reels { width:min(1200px,calc(100% - 80px)); grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:56px; padding-block:52px; }
.creator-reels .feature-copy { grid-column:1; grid-row:1; max-width:380px; }
.creator-reels .feature-copy > p { max-width:360px; }
.creator-reels .reel-story { grid-column:2; grid-row:1; width:100%; min-width:0; }
.reel-story { background: #181a1b; }
.reel-story__stage { position: relative; aspect-ratio: 16 / 10.5; margin: 10px 15px; }
.reel-story__source,.reel-story__output { position: absolute; inset: 9% auto auto 4%; width: 92%; height: 79%; overflow: hidden; border-radius: 5px; }
.reel-story__source { opacity: .12; transition: opacity .7s; }
.reel-story__source img,.reel-story__output img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 38%; transition: object-position 1.2s; }
.reel-story__output { z-index: 2; background:#101112; border: 1px solid #ffffff20; box-shadow: 0 16px 30px #0003; transition: width 1.2s cubic-bezier(.2,.65,.2,1),height 1.2s cubic-bezier(.2,.65,.2,1),left 1.2s cubic-bezier(.2,.65,.2,1),top 1.2s cubic-bezier(.2,.65,.2,1); }
.reel-story__output:after { content:''; position:absolute; inset: 28% 0 0; background: linear-gradient(transparent,#0009); opacity:0; transition:opacity .6s; }
.reel-story__source-name { position:absolute; top:12px; left:15px; padding: 3px 7px; background:#111a; font-size:11px; color:#ededeb; transition:opacity .5s; }
.reel-story__frame-guide { position:absolute; inset:8% 30%; border:1px solid #edd8b8; opacity:0; transition:opacity .4s; }
.reel-story__frame-guide:after { content:''; position:absolute; width:1px; height:100%; left:50%; background:#edd8b84a; }
.reel-story[data-phase='1'] .reel-story__frame-guide { opacity:.75; }
.reel-story:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-story__output { left:59%; top:4%; width:33%; height:89.4%; }
.reel-story:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-story__output img { object-position:43% center; }
.reel-story:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-story__output:after { opacity:1; }
.reel-story:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-story__source-name { opacity:0; }
.reel-story:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-story__source { opacity:0; }
.reel-story__opening { position:absolute; z-index:3; left:8%; bottom:16%; padding:13px 17px; background:#161b1bed; border:1px solid #f0d1b953; border-radius:4px; opacity:0; transform:translateY(10px); transition:opacity .5s,transform .5s; }
.reel-story__opening > span { font-size:10px; color:#dfbda1; }
.reel-story__opening p { font-size:clamp(13px,1.3vw,18px); margin-top:4px; }
.reel-story[data-phase='1'] .reel-story__opening { opacity:1; transform:translateY(0); }
.reel-story__hook { position:absolute; left:5%; width:46%; top:16%; opacity:0; transform:translateX(-12px); transition:opacity .6s .3s,transform .6s .3s; }
.reel-story__time { display:flex; align-items:center; gap:13px; color:#929793; font-size:11px; font-variant-numeric:tabular-nums; }
.reel-story__time > span { color:#b9bdba; }
.reel-story__hook p { margin-top:15px; color:#ececea; font-size:clamp(16px,1.7vw,25px); line-height:1.4; letter-spacing:-.3px; }
.reel-story__assembly { position:absolute; left:5%; width:44%; bottom:14%; opacity:0; transform:translateY(8px); transition:opacity .6s .5s,transform .6s .5s; }
.reel-story__assembly-title,.reel-story__cut-labels { display:flex; justify-content:space-between; color:#969b98; font-size:10px; font-variant-numeric:tabular-nums; }
.reel-story__assembly-title > span:last-child { color:#d1d4d1; }
.reel-story__cut-labels { display:grid; grid-template-columns:1fr 3fr 1fr; gap:3px; padding-inline:2px; }
.reel-story__cuts { display:flex; position:relative; height:37px; gap:10px; margin:10px 0 6px; transition:gap .9s .5s; }
.reel-story__cuts i { position:relative; min-width:0; flex:3; background:#393d40; border:1px solid #5c6265; border-radius:2px; box-shadow:inset 0 1px #ffffff08; }
.reel-story__cuts i:first-child { flex:1; background:#303437; }.reel-story__cuts i:last-of-type { flex:1; background:#33373a; }
.reel-story:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-story__hook,.reel-story:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-story__assembly { opacity:1; transform:none; }
.reel-story:is([data-phase='3'],[data-phase='4']) .reel-story__cuts { gap:3px; }
.reel-story__caption { position:absolute; z-index:3; left:5%; right:5%; bottom:20%; font-size:clamp(13px,1.5vw,21px); line-height:1.25; letter-spacing:-.2px; font-weight:550; color:#fff8ed; text-align:center; opacity:0; transform:translateY(8px); transition:opacity .5s,transform .5s; text-shadow:0 2px 8px #0008; }
.reel-story__duration { position:absolute; z-index:3; right:10px; bottom:9px; color:#ededeb; font-size:10px; font-variant-numeric:tabular-nums; opacity:0; transition:opacity .5s; }
.reel-story:is([data-phase='3'],[data-phase='4']) .reel-story__caption { opacity:1; transform:none; }.reel-story[data-phase='4'] .reel-story__duration { opacity:1; }
/* Transcript is one connected image, phrase selection, and matching audio cut. */
.creator-transcript { display:grid; width:min(1200px,calc(100% - 80px)); grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:center; gap:56px; padding-block:52px; border-bottom:1px solid var(--line); }
.creator-transcript__heading { grid-column:2; grid-row:1; display:block; max-width:380px; margin-bottom:0; }
.creator-transcript__heading > p { color:#c4c1b9; font-size:15px; font-weight:450; line-height:1.7; margin-top:19px; max-width:360px; }
.creator-transcript__heading .text-link { margin-top:24px; }
.creator-transcript > .transcript-story { grid-column:1; grid-row:1; width:100%; min-width:0; }
.transcript-story.transcript-example { display:grid; grid-template-columns:.9fr 1.1fr; overflow:hidden; padding:0; background:#1a1c1d; border:1px solid #ffffff1c; border-radius:7px; }
.transcript-story__photo { position:relative; min-height:342px; overflow:hidden; }
.transcript-story__photo img { width:100%; height:100%; object-fit:cover; object-position:69% center; }
.transcript-story__photo:after { content:''; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,#0008); pointer-events:none; }
.transcript-story__subtitle { position:absolute; z-index:1; bottom:35px; left:14px; right:14px; text-align:center; color:#fff; font-size:15px; }
.transcript-story__subtitle > span { padding:3px 7px; background:#111b; box-decoration-break:clone; }
.transcript-story__photo-time { position:absolute; z-index:1; right:13px; bottom:9px; color:#ffffffa0; font-size:10px; }
.transcript-story__words { padding:29px 37px 25px; display:flex; flex-direction:column; min-width:0; }
.transcript-story__speaker { display:flex; align-items:center; gap:8px; color:#c4beb1; font-size:12px; }
.transcript-story__speaker > span:last-child { margin-left:auto; color:#858d8c; font-size:10px; }
.transcript-story__speaker-dot { display:inline-block; width:7px; height:7px; background:#ad927c; border-radius:50%; }
.transcript-story #transcript-excerpt { padding:26px 0 24px; min-height:0; color:#e4ded2; font-size:clamp(23px,2.15vw,31px); line-height:1.5; letter-spacing:-.5px; }
.transcript-story .transcript-filler { background:#d8b89c; color:#332b24; text-decoration:none; padding:1px 2px; box-decoration-break:clone; }
.transcript-story__last { color:#a9aaa3; }
.transcript-story__action { display:flex; align-items:center; gap:15px; margin-top:auto; min-height:36px; }
.transcript-story #transcript-cut { display:inline-flex; gap:7px; align-items:center; border:1px solid #9d8d7a; border-radius:4px; padding:7px 10px; color:#efe3d1; background:#282825; font-size:11px; line-height:1.6; white-space:nowrap; }
.transcript-story #transcript-cut svg { width:15px; height:15px; }
.transcript-story #transcript-cut:hover { background:#37332d; border-color:#cbb59a; }
.transcript-story:not([data-transcript-ready]) #transcript-cut { display:none; }
.transcript-story__feedback { font-size:10px; color:#999f99; }
.transcript-story__audio { grid-column:1/-1; display:flex; align-items:center; gap:24px; padding:17px 24px; border-top:1px solid #ffffff12; background:#16191a; }
.transcript-story__audio-label,.transcript-story__audio-time { font-size:10px; color:#999d95; flex-shrink:0; }
.transcript-story__audio-time { width:44px; text-align:right; font-variant-numeric:tabular-nums; }
.transcript-story__wave { display:flex; flex:1; height:29px; position:relative; overflow:hidden; border-radius:2px; }
.transcript-story__wave-part { height:100%; border-radius:2px; background-color:#80939120; position:relative; }
.transcript-story__wave-part:before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 3px,#b0c1b89b 3px 4px,transparent 4px 6px,#a7bbb869 6px 7px); clip-path:polygon(0 35%,8% 25%,13% 42%,18% 5%,23% 30%,27% 15%,35% 32%,44% 0,52% 28%,61% 20%,66% 40%,72% 12%,79% 28%,88% 0,94% 20%,100% 40%,100% 60%,94% 80%,88% 100%,79% 72%,72% 88%,66% 60%,61% 80%,52% 72%,44% 100%,35% 68%,27% 85%,23% 70%,18% 95%,13% 58%,8% 75%,0 65%); }
.transcript-story__wave-part--a { width:24%; }.transcript-story__wave-part--b { flex:1; }.transcript-story__wave-part--filler { width:11.111%; background:#bb926d50; border-inline:1px solid #ceac829c; transition:width .6s cubic-bezier(.2,.7,.2,1),opacity .3s; }
.transcript-story__wave-part--filler:before { opacity:.55; }
.transcript-story.is-cut .transcript-story__wave-part--filler { width:0; border-width:0; opacity:0; }
.transcript-story__splice { position:absolute; top:0; bottom:0; left:24%; width:1px; background:#e9c4a2; opacity:0; transition:opacity .35s .5s; }
.transcript-story.is-cut .transcript-story__splice { opacity:1; }
.transcript-story__after { display:none; }.transcript-story.is-cut .transcript-story__before { display:none; }.transcript-story.is-cut .transcript-story__after { display:inline; }
@media(max-width:1050px) { .creator-reels { gap:35px; }.reel-story__hook { top:12%; }.reel-story__hook p { margin-top:10px; }.reel-story__hook-arrow { margin-top:13px; width:28px; }.reel-story__assembly { bottom:12%; }.reel-story__cuts { height:29px; }.transcript-story__words { padding:25px; }.transcript-story__photo { min-height:330px; }.transcript-story #transcript-excerpt { font-size:26px; }.transcript-story__action { gap:10px; }.transcript-story__feedback { font-size:9px; } }
@media(max-width:760px) { .creator-reels { grid-template-columns:1fr; gap:26px; }.creator-reels .feature-copy { grid-row:1; }.reel-story__hook p { font-size:clamp(16px,3.5vw,23px); }.reel-story__caption { font-size:clamp(14px,3.2vw,21px); }.creator-transcript__heading { align-items:flex-start; flex-direction:column; gap:16px; margin-bottom:25px; }.creator-transcript__heading h2 br { display:none; }.creator-transcript__heading > p { font-size:15px; }.creator-transcript { padding-block:45px; }.transcript-story.transcript-example { grid-template-columns:1fr; }.transcript-story__photo { min-height:0; aspect-ratio:16/9; }.transcript-story__photo img { object-position:center 48%; }.transcript-story__words { padding:25px 27px; }.transcript-story #transcript-excerpt { padding:22px 0; font-size:28px; }.transcript-story__audio { gap:12px; padding:17px 20px; }.transcript-story__audio-label { display:none; }.transcript-story__feedback { font-size:10px; }.transcript-story__action { gap:17px; }.transcript-story__subtitle { font-size:13px; bottom:24px; } }
@media(max-width:420px) { .reel-story__stage { margin:8px 5px; aspect-ratio:16/13; }.reel-story__source,.reel-story__output { top:18%; height:63.7%; }.reel-story:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-story__output { left:55%; top:4%; width:40%; height:87.5%; }.reel-story__hook { width:43%; }.reel-story__hook-arrow { display:none; }.reel-story__time { gap:7px; font-size:9px; }.reel-story__hook { top:12%; }.reel-story__hook p { font-size:16px; line-height:1.32; margin-top:8px; }.reel-story__hook-arrow { margin-top:12px; width:26px; }.reel-story__assembly { bottom:17%; width:43%; }.reel-story__assembly-title,.reel-story__cut-labels { font-size:8px; }.reel-story__cuts { height:24px; margin-block:7px 5px; }.reel-story__caption { font-size:12px; }.reel-story__opening { padding:9px 11px; }.reel-story__opening p { font-size:12px; }.reel-story__opening > span { font-size:9px; }.reel-story__source-name { top:9px; left:9px; font-size:9px; }.transcript-story__words { padding:22px; }.transcript-story #transcript-excerpt { font-size:25px; }.transcript-story__action { gap:12px; }.transcript-story #transcript-cut { font-size:10px; padding:7px 8px; }.transcript-story__feedback { font-size:9px; }.transcript-story__speaker { font-size:11px; }.transcript-story__speaker > span:last-child { font-size:9px; } }
@media(max-width:350px) { .reel-story__hook p { font-size:14px; }.reel-story__hook-arrow { margin-top:8px; width:23px; }.reel-story__caption { font-size:10px; }.reel-story__caption mark { padding-inline:3px; }.reel-story__assembly-title { font-size:7px; }.reel-story__time { font-size:8px; gap:5px; }.transcript-story__words { padding:20px 18px; }.transcript-story #transcript-excerpt { font-size:23px; }.transcript-story__action { flex-wrap:wrap; gap:8px 12px; }.transcript-story__subtitle { font-size:11px; }.transcript-story__audio { padding-inline:18px; } }
@media(prefers-reduced-motion:reduce) { .creator-reels *, .creator-reels *:before, .creator-reels *:after, .transcript-story *, .transcript-story *:before, .transcript-story *:after { transition:none!important; } }

/* On phones, give the finished portrait enough room for its captions to read. */
@media(max-width:520px) {
 .reel-story__stage { margin:8px 5px; aspect-ratio:16/26; }
  .reel-story__source,.reel-story__output { top:33%; height:31.85%; }
 .reel-story:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-story__output { left:20%; top:19%; width:60%; height:65.641%; }
 .reel-story:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-story__source { opacity:0; }
 .reel-story__opening { bottom:37%; }
 .reel-story__hook { left:6%; top:2%; width:88%; }
 .reel-story__time { font-size:10px; gap:10px; }
 .reel-story__hook p { font-size:17px; line-height:1.35; margin-top:8px; letter-spacing:-.2px; }
 .reel-story__hook-arrow { display:none; }
 .reel-story__assembly { left:9%; width:82%; bottom:1.2%; }
 .reel-story__assembly-title,.reel-story__cut-labels { font-size:10px; line-height:1.2; }
 .reel-story__cuts { height:15px; margin:7px 0 4px; }
 .reel-story__caption { font-size:clamp(14px,3.9vw,18px); line-height:1.3; bottom:20%; }
 .reel-story__caption mark { padding:3px 5px; }
 .reel-story__duration { font-size:11px; }
}
@media(max-width:350px) { .reel-story__hook p { font-size:16px; }.reel-story__hook { top:1.5%; }.reel-story__time { font-size:9px; } }
/* Keep the cut assembly and reframe moving at the pace of the agent sequence. */
.reel-story__output { transition-duration: .75s; }
.reel-story__output img { transition-duration: .75s; }
.reel-story__hook,.reel-story__assembly { transition-duration: .35s; transition-delay: .12s; }
.reel-story__cuts { transition-duration: .55s; transition-delay: .15s; }
.transcript-story__wave-part--filler { transition-duration: .35s; }
.transcript-story__splice { transition-delay: .25s; }

/* The guide and portrait share the same crop of the original 16:9 view. */
.reel-story { --reel-focus-x: 66%; --reel-focus-y: 50%; }
.reel-story__source { height: auto; aspect-ratio: 16 / 9; }
.reel-story__output { height: 78.85714286%; border: 0; box-shadow: 0 16px 30px #0003,inset 0 0 0 1px #ffffff20; }
.reel-story__source img,.reel-story__output img { object-fit:contain; object-position:50% 50%; }
.reel-story__output img { transform: scale(1); transform-origin: var(--reel-focus-x) var(--reel-focus-y); transition: transform .75s cubic-bezier(.2,.65,.2,1); }
.reel-story__frame-guide { inset: 0 auto 0 45.1171875%; width: 31.640625%; border-color: #fff9; border-radius: 2px; box-shadow: 0 0 0 100vmax #08090b45; }
.reel-story__frame-guide:after { display: none; }
.reel-story[data-phase='1'] .reel-story__frame-guide { opacity: 1; }
.reel-story:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-story__output { height: 89.3968254%; }
.reel-story:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-story__output img { object-fit:cover; object-position: var(--reel-focus-x) var(--reel-focus-y); transform:scale(1); }
/* Short subtitle cues sit below the van, within the lower safe area. */
.reel-story__caption { display: grid; left: 7%; right: 7%; bottom: 16%; font-size: clamp(12px,1.12vw,16px); line-height: 1.3; letter-spacing: -.15px; font-weight: 550; color: #fff; text-shadow: 0 1px 3px #000,0 2px 9px #0009; }
.reel-story__caption > span { grid-area: 1 / 1; align-self: end; }
.reel-story__caption-end { visibility: hidden; white-space: nowrap; }
.reel-story[data-phase='4'] .reel-story__caption-lead { visibility: hidden; }
.reel-story[data-phase='4'] .reel-story__caption-end { visibility: visible; }
@media(max-width:760px) { .reel-story__caption { font-size: clamp(13px,2.5vw,16px); } }
@media(max-width:520px) { .reel-story__caption { font-size: clamp(12px,3.2vw,15px); } }

/* Explicit heights keep the aspect-correct frame transition smooth. */
@media(max-width:520px) {
 .reel-story__output { height: 31.84615385%; }
 .reel-story:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-story__output { height: 65.64102564%; }
}

.reel-story .motion-scene__identity { font-size: 16px; font-weight: 500; white-space:nowrap; }

/* Copy and demonstrations alternate on desktop, then stack on smaller screens. */
@media(max-width:1100px) { .creator-reels,.creator-transcript { gap:36px; } }
@media(max-width:900px) {
 .creator-reels,.creator-transcript { width:calc(100% - 48px); grid-template-columns:minmax(0,1fr); gap:26px; padding-block:38px; }
 .creator-reels .feature-copy,.creator-transcript__heading { grid-column:1; grid-row:1; max-width:500px; margin:0; }
 .creator-reels .feature-copy > p,.creator-transcript__heading > p { max-width:460px; }
 .creator-reels .reel-story,.creator-transcript > .transcript-story { grid-column:1; grid-row:2; }
}
@media(max-width:600px) { .creator-reels,.creator-transcript { width:calc(100% - 40px); } }

/* Keep the desktop story compact while preserving both media aspect ratios. */
@media(min-width:901px) {
 .reel-story__stage { --reel-landscape-width:min(72vw,720px); height:432px; aspect-ratio:auto; margin:10px 24px; }
 .reel-story__source,.reel-story__output {
  left:calc((100% - var(--reel-landscape-width))/2);
  top:calc((432px - var(--reel-landscape-width)*9/16)/2);
  width:var(--reel-landscape-width);
  height:calc(var(--reel-landscape-width)*9/16);
  aspect-ratio:16/9;
 }
 .reel-story:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-story__output {
  left:calc(100% - 280px); top:2.666667px; width:240px; height:426.666667px; aspect-ratio:9/16;
 }
 .reel-story__hook,.reel-story__assembly { left:6%; width:calc(100% - 380px); max-width:470px; }
 .reel-story__hook { top:100px; }
 .reel-story__hook p { margin-top:12px; }
 .reel-story__assembly { top:248px; bottom:auto; }
 .reel-story__cuts { height:32px; }
 .reel-story__caption { font-size:15px; }
}