/* Approved content studio, scoped to the homepage sharing card. */
#practice .practice-grid{grid-template-rows:auto auto auto 322px}
#practice .build-viz{height:292px}
#practice .dual-stage{height:258px}
.creator-stage{--scene-ease:cubic-bezier(.65,0,.35,1);position:relative;width:100%;height:292px;background:var(--neutral-50);border:1px solid var(--neutral-200);border-radius:8px;overflow:hidden;isolation:isolate;direction:ltr}
.studio-topline{position:absolute;inset-block-start:0;inset-inline:0;height:31px;border-bottom:1px solid var(--neutral-200);display:flex;align-items:center;justify-content:space-between;padding-inline:13px;z-index:5;font:7px var(--font-mono);letter-spacing:.05em;color:var(--neutral-600);background:var(--neutral-50)}.take-indicator{display:flex;align-items:center;gap:5px}.take-indicator i{width:4px;height:4px;border-radius:50%;background:var(--vermilion-500)}
.creator-controls{position:absolute;bottom:3px;inset-inline:0;height:35px;display:flex;align-items:center;gap:10px;padding-inline:12px;background:var(--neutral-0);z-index:6;border-top:1px solid var(--neutral-200)}.creator-controls .motion-toggle{width:22px;height:22px;background:var(--neutral-950);color:var(--neutral-50);border-radius:50%;font:9px var(--font-body);padding:0}.creator-chapters{display:flex;gap:14px}.creator-chapters button{padding:0;background:none;font:8px var(--font-mono);color:var(--neutral-500);min-height:28px}.creator-chapters button.active{color:var(--neutral-950)}.scene-count{margin-inline-start:auto;font:7px var(--font-mono);color:var(--neutral-500)}.creator-progress{position:absolute;bottom:0;inset-inline:0;height:3px;background:var(--neutral-200);z-index:7}.creator-progress i{display:block;width:var(--progress,0%);height:100%;background:var(--vermilion-500)}
.creator-stage.is-paused *{animation-play-state:paused!important}
[dir=rtl] .creator-stage{direction:rtl}[dir=rtl] .studio-topline,[dir=rtl] .creator-chapters button{font-family:var(--font-body);letter-spacing:0}
/* Visual editing bay: footage, cuts, waveform, captions and output formats. */
.visual-monitor{position:absolute;inset-inline-end:12px;top:42px;width:calc(100% - 61px);height:155px;background:var(--neutral-950);border-radius:5px;overflow:hidden;z-index:2;transition:width .9s var(--scene-ease),height .9s var(--scene-ease),top .9s var(--scene-ease)}
.monitor-disc{position:absolute;inset-inline-end:50%;top:18px;width:185px;height:auto;aspect-ratio:1;border-radius:50%;background:var(--vermilion-500);transform:translateX(50%);transition:width .9s var(--scene-ease),top .9s var(--scene-ease)}
.monitor-portrait{position:absolute;inset-inline-end:50%;bottom:0;height:158px;width:158px;max-width:none;object-fit:contain;object-position:bottom;transform:translateX(50%);transition:height .9s var(--scene-ease),width .9s var(--scene-ease)}
.monitor-rec{position:absolute;inset-inline-start:9px;top:9px;color:var(--neutral-400);font:7px var(--font-mono);letter-spacing:.06em}.monitor-rec::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--vermilion-300);margin-inline-end:4px}
.focus-bracket{position:absolute;width:13px;height:13px;border-color:var(--neutral-400);border-style:solid;z-index:3}.bracket-a{inset-inline-start:9px;bottom:9px;border-width:0 0 1px 1px}.bracket-b{inset-inline-end:9px;top:9px;border-width:1px 1px 0 0}
.monitor-play{position:absolute;inset-inline-start:20px;bottom:33px;width:28px;height:28px;border:1px solid var(--neutral-400);border-radius:50%;display:grid;place-items:center;color:var(--neutral-50);font-size:10px;transition:opacity .5s}.monitor-caption{position:absolute;bottom:13px;inset-inline:20px 20px;display:flex;gap:4px;z-index:3;max-width:100px}.monitor-caption i{height:4px;width:62%;background:var(--neutral-50);clip-path:inset(0 100% 0 0);transition:clip-path .7s .3s}.monitor-caption i:last-child{width:38%;background:var(--vermilion-300)}
.audio-meter{position:absolute;inset-inline-start:13px;top:52px;width:25px;height:132px;display:flex;gap:3px;align-items:end;transition:opacity .5s,translate .7s}.meter-track{width:4px;height:113px;background:var(--neutral-200);border-radius:1px;position:relative;overflow:hidden}.meter-track i{position:absolute;inset:auto 0 0;height:85%;background:var(--neutral-500);animation:meter 1.3s ease-in-out infinite;transform-origin:bottom}.meter-track:nth-child(2) i{animation-delay:-.35s;background:var(--vermilion-500)}.meter-track:nth-child(3) i{animation-delay:-.7s}.audio-meter>span{position:absolute;inset-inline-start:16px;font:5px var(--font-mono);color:var(--neutral-500)}.audio-meter>span:nth-last-child(3){top:17px}.audio-meter>span:nth-last-child(2){top:65px}.audio-meter>span:last-child{bottom:0}
.edit-tools{position:absolute;inset-inline-start:12px;top:44px;display:flex;gap:5px;opacity:0;translate:0 8px;transition:opacity .45s .2s,translate .6s .2s}.edit-tools>div{width:26px;height:26px;border:1px solid var(--neutral-200);border-radius:4px;display:grid;place-items:center;background:var(--neutral-0);font:10px var(--font-mono);color:var(--neutral-600)}.edit-tools .caption-tool{background:var(--neutral-950);color:var(--neutral-50)}.crop-tool i{width:11px;height:9px;border:1px solid var(--neutral-600)}
.caption-editor{position:absolute;inset-inline-start:12px;top:89px;width:34%;height:72px;background:var(--neutral-0);border:1px solid var(--neutral-200);border-radius:4px;padding:14px 9px;display:grid;gap:6px;opacity:0;clip-path:inset(0 0 100% 0);transition:opacity .45s,clip-path .75s var(--scene-ease)}.caption-editor>i{height:4px;background:var(--neutral-200);z-index:1}.caption-editor>i:nth-of-type(2){width:82%}.caption-editor>i:nth-of-type(3){width:60%}.caption-marker{position:absolute;inset-inline-start:9px;top:13px;width:var(--phase-progress,0%);max-width:calc(100% - 18px);height:7px;background:var(--vermilion-500)}.caption-caret{position:absolute;inset-inline-start:68%;bottom:15px;height:9px;width:1px;background:var(--neutral-950)}
.editor-timeline{position:absolute;inset-inline:12px;bottom:45px;height:43px;transition:height .8s var(--scene-ease),opacity .4s,translate .8s var(--scene-ease);overflow:hidden}.time-ruler{height:10px;display:flex;align-items:start;justify-content:space-between;color:var(--neutral-500);font:5px var(--font-mono);direction:ltr}.time-ruler>i{width:1px;height:4px;background:var(--neutral-300)}.film-track{display:flex;height:18px;gap:2px;border:1px solid var(--neutral-400);border-radius:2px;overflow:hidden;padding:1px;background:var(--neutral-0)}.film-frame{flex:1;min-width:0;position:relative;overflow:hidden;background:var(--neutral-200)}.film-frame:nth-child(3n){background:var(--vermilion-500)}.film-frame img{height:25px;width:24px;object-fit:contain;position:absolute;left:50%;top:-1px;transform:translateX(-50%)}.audio-track{height:14px;display:flex;gap:2px;align-items:center;padding:1px 3px;background:var(--neutral-100);margin-top:2px;border-radius:2px;overflow:hidden}.audio-track i{flex:1;min-width:1px;height:calc(var(--bar)*.45px);background:var(--neutral-500);animation:track-wave 1.5s var(--delay) ease-in-out infinite}.audio-track i:nth-child(3n){background:var(--vermilion-500)}.timeline-playhead{position:absolute;top:9px;bottom:0;inset-inline-start:var(--phase-progress,0%);width:1px;background:var(--vermilion-500);z-index:4}.timeline-playhead i{position:absolute;top:0;left:-2px;width:5px;height:5px;background:var(--vermilion-500);clip-path:polygon(0 0,100% 0,50% 100%)}
.export-tiles{position:absolute;inset-inline-start:12px;top:42px;width:59%;height:149px;display:grid;grid-template-columns:1fr 1fr;gap:7px;opacity:0;visibility:hidden;translate:0 15px;transition:opacity .6s .25s,translate .8s .25s var(--scene-ease),visibility .6s}.export-tile{position:relative;border:1px solid var(--neutral-200);border-radius:5px;overflow:hidden;background:var(--neutral-0);align-self:center}.square-format{aspect-ratio:1;background:var(--neutral-50)}.square-format>img{position:absolute;inset-inline:0;bottom:0;width:100%;height:calc(100% - 8px);object-fit:contain;object-position:center bottom;max-width:none}.export-disc{position:absolute;inset-inline:5%;top:16%;width:90%;aspect-ratio:1;border-radius:50%;background:var(--vermilion-500)}.mini-play{position:absolute;bottom:6px;inset-inline-start:7px;color:var(--neutral-950);font-size:8px}.export-check{position:absolute;top:5px;inset-inline-end:5px;background:var(--neutral-50);color:var(--neutral-950);border-radius:50%;height:12px;width:12px;display:grid;place-items:center;font-size:8px;opacity:0;transition:opacity .5s .95s}.post-format{height:133px;padding:7px}.post-format-head{display:flex;gap:4px;align-items:center;margin-bottom:7px}.post-format-head img{width:12px;height:12px;border-radius:2px}.post-format-head i{height:3px;background:var(--neutral-300);width:55%}.post-format-lines{display:grid;gap:4px;margin-bottom:7px}.post-format-lines i{height:3px;background:var(--neutral-200)}.post-format-lines i:nth-child(2){width:70%;background:var(--vermilion-500)}.post-format-lines i:last-child{width:86%}.post-format-picture{height:62px;background:var(--neutral-50);overflow:hidden;position:relative}.post-format-picture img{height:calc(100% - 6px);width:100%;object-fit:contain;object-position:center bottom;position:absolute;inset-inline:0;bottom:0}
.format-tabs{position:absolute;inset-inline-start:12px;top:204px;width:59%;display:flex;justify-content:space-around;gap:8px;opacity:0;transition:opacity .6s .4s}.format-tabs span{display:flex;align-items:center;gap:4px;font:6px var(--font-mono);color:var(--neutral-600)}.format-tabs i{display:block;border:1px solid var(--neutral-400);border-radius:1px}.format-vertical{width:7px;height:12px}.format-tabs .format-square{width:10px;height:10px}.format-tabs .format-wide{width:14px;height:8px}
[data-scene="1"] .visual-monitor{width:50%;height:132px}[data-scene="1"] .monitor-portrait{height:122px;width:135px}[data-scene="1"] .monitor-disc{width:145px}[data-scene="1"] .audio-meter,[data-scene="2"] .audio-meter{opacity:0;translate:0 10px}[data-scene="1"] .edit-tools{opacity:1;translate:0 0}[data-scene="1"] .caption-editor{opacity:1;clip-path:inset(0)}[data-scene="1"] .editor-timeline{height:66px}[data-scene="1"] .film-track{height:27px}[data-scene="1"] .film-frame img{height:34px;width:30px}[data-scene="1"] .audio-track{height:22px}[data-scene="1"] .audio-track i{height:calc(var(--bar)*.7px)}[data-scene="1"] .monitor-caption i,[data-scene="2"] .monitor-caption i{clip-path:inset(0)}[data-scene="1"] .monitor-play{opacity:0}
[data-scene="2"] .visual-monitor{width:30%;height:193px}[data-scene="2"] .monitor-portrait{height:180px;width:165px}[data-scene="2"] .monitor-disc{width:170px;top:30px}[data-scene="2"] .editor-timeline{opacity:0;translate:0 24px;pointer-events:none}[data-scene="2"] .export-tiles{opacity:1;visibility:visible;translate:0 0}[data-scene="2"] .format-tabs{opacity:1}[data-scene="2"] .export-check{opacity:1}[data-scene="2"] .monitor-caption{inset-inline:9px;bottom:26px}[data-scene="2"] .monitor-play{width:18px;height:18px;inset-inline-start:8px;bottom:40px;font-size:7px}[data-scene="2"] .monitor-rec{opacity:0}
@keyframes meter{0%,100%{scale:1 .35}40%{scale:1 .9}70%{scale:1 .55}}@keyframes track-wave{0%,100%{opacity:.45}50%{opacity:1}}
[dir=rtl] .monitor-portrait{transform:translateX(-50%) scaleX(-1)}[dir=rtl] .monitor-disc{transform:translateX(-50%)}[dir=rtl] .square-format>img,[dir=rtl] .post-format-picture img{transform:scaleX(-1)}[dir=rtl] .film-frame img{transform:translateX(-50%) scaleX(-1)}[dir=rtl] .bracket-a{border-width:0 1px 1px 0}[dir=rtl] .bracket-b{border-width:1px 0 0 1px}[dir=rtl] .monitor-caption i{clip-path:inset(0 0 0 100%)}[dir=rtl] [data-scene="1"] .monitor-caption i,[dir=rtl] [data-scene="2"] .monitor-caption i{clip-path:inset(0)}
@media(max-width:390px){.visual-monitor{width:calc(100% - 56px)}.monitor-portrait{width:146px;height:155px}.format-tabs{gap:4px}.format-tabs span{font-size:5px;gap:2px}.post-format{padding:5px}.edit-tools{gap:3px}.edit-tools>div{width:22px;height:24px}[data-scene="2"] .monitor-portrait{width:147px}}

@media(max-width:760px){#practice .practice-grid{grid-template-rows:none}#practice .build-viz{height:292px}#practice .dual-stage{height:258px}.creator-stage{flex:none}}
@media(prefers-reduced-motion:reduce){.creator-stage *{animation:none!important;transition:none!important}}

/* Center the recording composition and fill the unused black area with its disc. */
[data-scene="0"] .monitor-disc{inset-inline-end:50%;top:17px;width:88%;height:auto;aspect-ratio:1;transform:translateX(50%)}
[data-scene="0"] .monitor-portrait{inset-inline-end:50%;width:176px;height:145px;transform:translateX(50%)}
[dir=rtl] [data-scene="0"] .monitor-disc{transform:translateX(-50%)}
[dir=rtl] [data-scene="0"] .monitor-portrait{transform:translateX(-50%) scaleX(-1)}