@scope(.reel-page){:scope{gap:var(--space-5);grid-template-columns:minmax(0,1fr);max-inline-size:72rem;display:grid}.reel-head{justify-items:start;gap:var(--space-2);display:grid;& .page-title{font-size:clamp(1.625rem,1.3rem + 1.2vw,2.25rem)}}.meta{gap:var(--space-2);color:var(--text-muted);flex-wrap:wrap;font-weight:500;display:flex}.bar{background:var(--color-surface-strong);border-radius:4px;block-size:8px;overflow:hidden;& span{border-radius:inherit;background:var(--color-ink);block-size:100%;display:block}&[data-indeterminate] span{inline-size:30%;@media (prefers-reduced-motion:no-preference){animation:reel-slide 1.4s var(--ease-out) infinite}}}}@keyframes reel-slide{0%{transform:translate(-100%)}to{transform:translate(340%)}}@scope(.reel-new){:scope{gap:var(--space-5);align-items:start;display:grid;@media (width>=1024px){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.shots-head{justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.shots-title{font-size:var(--text-h3);letter-spacing:-.02em;font-weight:700}.shot-list{gap:var(--space-2);padding-inline-start:1.5em;list-style:decimal;display:grid;& li::marker{color:var(--color-accent-strong);font-weight:800}}.reel-note{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--surface);color:var(--color-ink-soft);font-size:var(--text-small);@media (width>=1024px){grid-column:1/-1}}.reel-progress .head{justify-content:space-between;gap:var(--space-3);font-variant-numeric:tabular-nums;display:flex}.reel-failed{& .badge{background:var(--color-warning-soft);block-size:56px;inline-size:56px;color:var(--color-warning);border-radius:50%;place-items:center;display:grid}& h2{font-size:var(--text-h3);letter-spacing:-.02em;font-weight:800}}}@scope(.reel-editor){:scope{border-radius:var(--radius-lg);background:var(--color-ink);box-shadow:var(--shadow-card);display:grid;overflow:hidden;@media (width>=1024px){grid-template-columns:minmax(0,1fr) minmax(22rem,26rem);min-block-size:40rem}}.stage{padding:var(--space-5) var(--space-4);place-items:center;display:grid}.frame,.cover{aspect-ratio:9/16;border-radius:var(--radius-md);background:var(--color-ink-soft);inline-size:min(100%,13rem);position:relative;overflow:hidden;container-type:inline-size;@media (width>=768px){inline-size:min(100%,17rem)}@media (width>=1024px){inline-size:min(100%,20rem)}& :is(video,img){object-fit:cover;block-size:100%;inline-size:100%;position:absolute;inset:0}}.placeholder{block-size:100%;color:var(--color-line);place-items:center;font-weight:600;display:grid}.overlay{pointer-events:none;justify-items:center;display:grid;position:absolute;inset-inline:0;& span{color:var(--ink);font-size:var(--size);font-weight:700;line-height:var(--leading);text-align:center;white-space:nowrap;text-shadow:0 0 .3cqi var(--outline), 0 0 .3cqi var(--outline)}}.play{color:var(--color-ink);cursor:pointer;background:0 0;border:0;place-items:center;display:grid;position:absolute;inset:0;& .icon{box-sizing:content-box;fill:currentColor;background:#ffffffeb;border-radius:50%;padding:19px 17px 19px 21px}&[data-playing] .icon{opacity:0}&:focus-visible .icon,&[data-playing]:hover .icon{opacity:1}}.badge{color:var(--color-bg);font-size:var(--text-caption);background:#0009;border-radius:8px;padding:3px 8px;font-weight:600;position:absolute;inset-block-start:10px;inset-inline-start:10px}.cover-stage{justify-content:center;gap:var(--space-4);color:var(--color-line);font-size:var(--text-caption);flex-wrap:wrap;display:flex;& .cover{inline-size:10rem}& .fit{gap:var(--space-2);align-content:start;max-inline-size:13rem;display:grid}}.profile-grid{grid-template-columns:repeat(3,1fr);gap:2px;display:grid;& .tile{aspect-ratio:var(--tile-ratio);background:var(--color-ink-soft);color:var(--color-subtle);place-items:center;display:grid;overflow:hidden;&[data-mine]{outline:2px solid var(--color-bg);outline-offset:-2px}& img{object-fit:cover;block-size:100%;inline-size:100%}}}.panel{border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--color-bg);grid-template-rows:auto 1fr auto;display:grid;@media (width>=1024px){border-radius:0}}.editor-tabs{border-block-end:1px solid var(--line);display:flex;& :is(button,.soon){min-block-size:64px;padding:var(--space-2) var(--space-1);color:var(--text-muted);font:inherit;font-size:var(--text-caption);cursor:pointer;background:0 0;border:0;flex:1;justify-items:center;gap:2px;font-weight:500;display:grid}& [aria-current]{color:var(--text);box-shadow:inset 0 -2px 0 var(--color-ink);font-weight:700}& .soon{color:var(--text-subtle);cursor:default}}.panel-body{padding:var(--space-4) var(--space-5);& hr{border:0;border-block-start:1px solid var(--line)}& .label{color:var(--text);font-size:var(--text-small);font-weight:600}}.panel-foot{justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-5) var(--space-4);border-block-start:1px solid var(--line);display:flex}.spread{justify-content:space-between;align-items:baseline;gap:var(--space-2);font-variant-numeric:tabular-nums;flex-wrap:wrap;display:flex}.trim{border-radius:var(--radius-sm);block-size:56px;position:relative;overflow:clip;& .strip{border-radius:var(--radius-sm);background:var(--line);gap:2px;block-size:100%;display:flex;overflow:hidden;& img{object-fit:cover;flex:1;min-inline-size:0}}& .box{inline-size:calc(var(--end) - var(--start));border:3px solid var(--color-ink);clip-path:inset(-3px -100vmax);pointer-events:none;border-inline-width:12px;border-radius:8px;position:absolute;inset-block:0;inset-inline-start:var(--start);box-shadow:0 0 0 100vmax #ffffffb8}& input{appearance:none;pointer-events:none;background:0 0;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0;&::-webkit-slider-thumb{appearance:none;pointer-events:auto;cursor:ew-resize;background:0 0;border:0;block-size:64px;inline-size:24px}&::-moz-range-thumb{pointer-events:auto;cursor:ew-resize;background:0 0;border:0;block-size:64px;inline-size:24px}&:focus-visible{outline:2px solid var(--focus);outline-offset:2px}}}.steps-row{justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;display:flex;& .group{align-items:center;gap:var(--space-2);display:flex}}.step{border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--color-bg);min-block-size:44px;min-inline-size:52px;font:inherit;cursor:pointer;font-weight:600;&:disabled{opacity:.4;cursor:not-allowed}}.toggle{justify-content:space-between;align-items:center;gap:var(--space-3);min-block-size:var(--tap);display:flex;&>span{gap:2px;display:grid}& input[role=switch]{block-size:24px;inline-size:24px;accent-color:var(--color-ink);flex:none}&[aria-disabled] strong{color:var(--text-muted)}}.volume{min-block-size:32px;inline-size:100%;accent-color:var(--color-ink)}.script{gap:var(--space-1);padding:var(--space-3);border-radius:var(--radius-md);background:var(--page);display:grid}.voice-state{justify-content:space-between;align-items:center;gap:var(--space-3);min-block-size:56px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--surface);font-weight:600;display:flex;&[data-tone=recording]{background:var(--color-accent-soft);justify-content:flex-start}&[data-tone=done]{background:var(--color-success-soft);color:var(--color-success)}& .dot{background:var(--color-accent-strong);border-radius:50%;block-size:12px;inline-size:12px}}.play-voice{inline-size:var(--tap);block-size:var(--tap);background:var(--color-bg);color:var(--color-ink);cursor:pointer;border:0;border-radius:50%;place-items:center;display:grid;& .icon{fill:currentColor}}.chips .chip[aria-pressed=true]{background:var(--color-accent)}.chips .chip{white-space:normal;text-align:start;max-inline-size:100%}.swatches{align-items:center;gap:var(--space-3);border:0;flex-wrap:wrap;display:flex;& legend{float:inline-start;margin-inline-end:auto}}.swatch{inline-size:var(--tap);block-size:var(--tap);cursor:pointer;place-items:center;display:grid;position:relative;&:before{content:"";border:1px solid var(--line-strong);background:var(--swatch);border-radius:50%;block-size:32px;inline-size:32px}& input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}&:has(input:checked):before{outline:2px solid var(--color-accent-strong);outline-offset:2px}&:has(input:focus-visible):before{outline:2px solid var(--focus);outline-offset:4px}}.frames{gap:var(--space-2)}.frame-pick{aspect-ratio:9/16;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;flex:none;inline-size:56px;position:relative;overflow:hidden;& img{object-fit:cover;block-size:100%;inline-size:100%}& input{opacity:0;position:absolute}&:has(input:checked){border:3px solid var(--color-ink)}&:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}}}@scope(.reel-publish){:scope{gap:var(--space-5);grid-template-columns:minmax(0,1fr);align-items:start;display:grid;@media (width>=1024px){grid-template-columns:minmax(0,1fr) 20rem}}.reel-summary{align-items:center;gap:var(--space-4);display:flex;& .reel-thumb{aspect-ratio:9/16;border-radius:var(--radius-sm);background:var(--color-surface-strong);flex:none;inline-size:64px;overflow:hidden;& img{object-fit:cover;block-size:100%;inline-size:100%}}& .title{font-size:var(--text-h3);letter-spacing:-.02em;font-weight:700}}.risk{gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);background:var(--color-warning-soft);color:var(--color-ink-soft);font-size:var(--text-small);display:grid}.ok{color:var(--color-success);font-size:var(--text-small);font-weight:600}.question{gap:var(--space-2);border:0;display:grid;& legend{margin-block-end:var(--space-2);font-weight:600}}.consent{& :is(.minor,.minor-blocked,.consent-yes){display:none}&:has([name=person][value=yes]:checked) .minor{display:grid}&:has([name=person][value=yes]:checked):has([name=minor][value=yes]:checked) .minor-blocked{display:flex}&:has([name=person][value=yes]:checked):has([name=minor][value=no]:checked) .consent-yes{display:grid}}.when{& .auto{align-items:center;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);background:var(--color-success-soft);color:var(--color-success);font-weight:600;display:flex}& .manual{padding:var(--space-3);border-radius:var(--radius-md);background:var(--color-accent-soft);display:none}&:has([name=music]:checked){& .auto{display:none}& .manual{display:grid}}}.publish-side{@media (width>=1024px){position:sticky;inset-block-start:var(--space-5)}}.render-status video{aspect-ratio:9/16;border-radius:var(--radius-md);background:var(--color-ink-soft);justify-self:center;inline-size:min(100%,14rem)}.approve .hint{text-align:center}}