/* Capability-first editor layout. Source, action and result stay in view. */
.editor-demo .editor-body{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:stretch}
.editor-demo .chapters{padding:22px 12px;grid-column:1;border-right:1px solid var(--line)}
.editor-demo .chapters>.mini-label{font-size:7px;line-height:1.8;margin:0 9px 18px}
.editor-demo .chapters button{padding:15px 10px;gap:9px;min-height:91px}.editor-demo .chapter-name{font-size:11px;line-height:1.5}.editor-demo .chapter-name small{font-size:8px;line-height:1.7;margin-top:5px}.editor-demo .chapter-number,.editor-demo .chapter-duration{font-size:8px}.editor-demo .tour-status{font-size:7px;line-height:1.7}
.editor-demo .preview-area{grid-column:2;min-width:0}.editor-demo .stage-meta{padding:18px 25px 10px;font-size:8px;letter-spacing:.08em}
.editor-demo .inspector{display:grid;grid-template-columns:1fr auto;gap:5px 20px;border:0;padding:4px 25px 18px;background:var(--panel);align-items:center;grid-column:auto}
.editor-demo .inspector>.mini-label,.editor-demo .source-note,.editor-demo #ed-property-visual{display:none}
.editor-demo .inspector h2{font-size:25px;line-height:1.15;max-width:none;margin:0}.editor-demo .inspector>p:not(.mini-label){font-size:10px;line-height:1.8;max-width:560px;margin:0;grid-column:1}
.editor-demo .property-box{grid-column:2;grid-row:1/3;min-width:110px;max-width:170px;margin:0;padding:0 0 0 18px;border:0;border-left:1px solid var(--line)}
.editor-demo .property-box>span{font-size:7px}.editor-demo .property-box>strong{font-size:11px;line-height:1.6;margin-top:6px}
.editor-demo .stage,.editor-demo .workspace[data-step="5"] .stage{display:flex;align-items:center;justify-content:center;gap:36px;padding:24px 28px;min-height:474px;position:relative}
.editor-demo .reference{display:block;width:340px;max-width:48%;flex:0 1 340px;position:relative}
.editor-demo .reference>span:first-child{display:block;font-size:8px;letter-spacing:.08em;color:var(--muted);margin-bottom:13px}
.editor-demo .ed-reference-media{width:100%;position:relative;aspect-ratio:16/9;background:var(--paper);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.editor-demo .ed-reference-media>video,.editor-demo .ed-reference-media>img{width:100%;height:100%;object-fit:contain;display:block;border:0;box-shadow:none;max-width:none;margin:0}
.editor-demo .reference[data-reference-kind=portrait]{max-width:42%;width:280px;flex-basis:280px}
.editor-demo .reference[data-reference-kind=portrait] .ed-reference-media{aspect-ratio:9/16;width:160px;height:284px;margin-inline:auto}
.editor-demo .reference>p{font:400 12px/1.8 var(--sans);letter-spacing:0;white-space:normal;margin-top:16px;max-width:330px;color:var(--muted)}
.editor-demo .ed-operation-detail{font-size:9px;line-height:1.7;margin-top:12px;padding:10px 11px;background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:3px;color:var(--ink)}
.editor-demo .video-frame{height:426px;width:240px;max-width:45%;aspect-ratio:9/16;flex:0 0 auto;border-radius:5px;transition:box-shadow .3s,border-color .3s}
.editor-demo .video-frame>video{width:100%;height:100%;object-fit:contain;transition:opacity .3s}
.editor-demo .video-frame.wide{height:auto;width:360px;aspect-ratio:16/9;max-width:48%}
.editor-demo .workspace[data-step="5"] .video-frame.wide{max-width:95%;width:640px}
.editor-demo .workspace[data-step="5"] .reference{display:none}
.editor-demo .workspace[data-step="5"] .video-frame{max-width:95%}
.editor-demo .canvas-badge{font-size:7px;top:10px;left:10px;padding:6px 8px;line-height:1.4;z-index:4}
.editor-demo .workspace:not([data-step="5"])[data-phase=before] .video-frame>video{opacity:.32}
.editor-demo .workspace:not([data-step="5"])[data-phase=editing] .video-frame>video{opacity:.7}
.editor-demo .workspace[data-phase=result] .video-frame{box-shadow:0 0 0 2px #7b8f6480,0 8px 28px #25272015}
.editor-demo .ed-crop-guides{position:absolute;inset:0;opacity:.4;transition:opacity .3s}
.editor-demo .ed-crop-guides>i{position:absolute;border:2px solid var(--crop);box-shadow:0 0 0 1px #00000020}
.editor-demo .ed-crop-guides b{position:absolute;top:3px;left:3px;background:var(--crop);color:#fff;font:600 9px/1 var(--sans);padding:4px;border-radius:2px;box-shadow:0 1px 3px #0002}
.editor-demo .ed-crop-one{--crop:#a8452b;left:29.7%;top:11.1%;width:42.2%;height:66.7%;z-index:2}
.editor-demo .ed-crop-two{--crop:#41684b;left:4.7%;top:0;width:31.6%;height:100%}
.editor-demo .ed-crop-three{--crop:#435f88;left:62.5%;top:0;width:31.6%;height:100%}
.editor-demo .workspace[data-phase=editing] .ed-crop-guides,.editor-demo .workspace[data-phase=result] .ed-crop-guides{opacity:1}
.editor-demo .ed-crop-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:11px}.editor-demo .ed-crop-legend>span{display:flex;align-items:center;gap:4px;font-size:7px;color:var(--muted)}.editor-demo .ed-crop-legend i{font-style:normal;font-size:7px;color:white;background:#a8452b;display:grid;place-items:center;width:13px;height:13px;border-radius:2px}.editor-demo .ed-crop-legend>span:nth-child(2) i{background:#41684b}.editor-demo .ed-crop-legend>span:nth-child(3) i{background:#435f88}
.editor-demo .ed-result-panes{position:absolute;inset:0;pointer-events:none;opacity:.4;transition:opacity .3s}.editor-demo .ed-result-panes>i{position:absolute;font:600 9px/1 var(--sans);font-style:normal;color:#fff;padding:4px;background:#a8452b;border-radius:2px;z-index:3;left:8px;top:38px}.editor-demo .ed-result-panes>i:nth-child(2){top:calc(50% + 8px);background:#41684b}.editor-demo .ed-result-panes>i:nth-child(3){top:calc(50% + 8px);left:calc(50% + 8px);background:#435f88}.editor-demo .workspace[data-phase=result] .ed-result-panes{opacity:1}
.editor-demo .transformation{padding:12px 24px;min-height:61px;gap:18px;border-top:1px solid var(--line);background:var(--paper)}
.editor-demo .phase-steps{gap:7px;flex-shrink:0}.editor-demo .phase-steps button{background:none;border:1px solid transparent;padding:7px 8px;min-height:31px;font-size:8px;white-space:nowrap;border-radius:3px;color:var(--muted)}.editor-demo .phase-steps button.is-active{border-color:var(--line);background:var(--sage);color:var(--ink);font-weight:600}.editor-demo .phase-steps button:disabled{opacity:.7;cursor:default}.editor-demo .phase-steps>i{font-size:9px}.editor-demo .transformation>p{font-size:9px;line-height:1.7;max-width:340px}
.editor-demo .transport{padding:10px 20px;gap:12px}.editor-demo .transport button{min-height:38px;font-size:9px}.editor-demo #ed-time{font-size:8px;min-width:75px}
.editor-demo .timeline{padding:20px 22px 17px;border-top:1px solid var(--line);background:var(--panel)}
.editor-demo .timeline-heading{gap:13px}.editor-demo .timeline-heading>span:first-child{font-size:8px;white-space:nowrap}.editor-demo .timeline-heading>p{font-size:9px;line-height:1.7}.editor-demo .timeline-operation{font-size:7px;white-space:nowrap}
.editor-demo .track-row{margin-top:7px}.editor-demo .track-row>.track{height:28px}.editor-demo .track-row>span{font-size:7px}.editor-demo .timeline-clip{font-size:8px;line-height:1.4}.editor-demo .ed-track-focus>.track{outline:1px solid #b8412645;outline-offset:2px}.editor-demo .ed-track-focus>span{color:var(--accent);font-weight:600}.editor-demo .timeline-note{font-size:8px;line-height:1.7;align-items:start}.editor-demo .timeline-note>i{margin-top:5px}.editor-demo .timeline-note>span:not(#ed-final-pass){max-width:650px}.editor-demo .ruler{font-size:7px;margin-top:18px}.editor-demo .cut-line{left:calc(48px + (100% - 48px)*.665)}
.editor-demo [hidden]{display:none!important}.editor-demo :is(button,input):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:1100px){.editor-demo .editor-body{grid-template-columns:155px minmax(0,1fr)}.editor-demo .stage{gap:25px;padding-inline:22px}.editor-demo .reference{width:290px;flex-basis:290px}.editor-demo .video-frame{height:391px;width:220px}.editor-demo .chapters{padding-inline:9px}.editor-demo .chapters button{padding:13px 8px}.editor-demo .chapter-name{font-size:10px}.editor-demo .chapter-name small{font-size:7px}.editor-demo .stage,.editor-demo .workspace[data-step="5"] .stage{min-height:439px}.editor-demo .property-box{min-width:95px;max-width:120px}.editor-demo .inspector h2{font-size:24px}.editor-demo .transformation{display:block;text-align:left}.editor-demo .transformation>p{max-width:none;text-align:left;margin-top:7px}.editor-demo .phase-steps{justify-content:start}}
@media(max-width:800px){.editor-demo .editor-body{display:flex;flex-direction:column}.editor-demo .chapters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:9px;gap:4px;border-right:0;border-bottom:1px solid var(--line)}.editor-demo .chapters>.mini-label,.editor-demo .tour-status{display:none}.editor-demo .chapters button{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:10px 4px;min-height:64px;margin:0}.editor-demo .chapter-number{font-size:8px}.editor-demo .chapter-name{font-size:8px;line-height:1.5}.editor-demo .chapter-name small,.editor-demo .chapter-duration{display:none}.editor-demo .inspector{display:grid;padding:4px 20px 17px;gap:6px 15px}.editor-demo .inspector h2{font-size:25px;max-width:none}.editor-demo .inspector>p:not(.mini-label){max-width:none;font-size:10px}.editor-demo .stage-meta{padding-inline:20px}.editor-demo .stage,.editor-demo .workspace[data-step="5"] .stage{padding:22px;min-height:440px;gap:35px}.editor-demo .reference{flex-basis:310px;width:310px}.editor-demo .reference[data-reference-kind=portrait]{flex-basis:260px;width:260px}.editor-demo .video-frame{height:391px;width:220px}.editor-demo .video-frame.wide{width:310px}.editor-demo .reference>p{font-size:11px}.editor-demo .ed-operation-detail{font-size:8px}.editor-demo .transport{padding-inline:15px}.editor-demo .timeline{padding-inline:18px}}
@media(max-width:540px){.editor-demo .chapters{grid-template-columns:repeat(3,minmax(0,1fr));padding:8px;gap:4px}.editor-demo .chapters button{flex-direction:row;text-align:left;justify-content:start;gap:7px;min-height:47px;padding:8px}.editor-demo .chapter-name{font-size:8px;line-height:1.45}.editor-demo .chapter-number{font-size:7px}.editor-demo .stage-meta{font-size:6px;padding:15px 13px 10px}.editor-demo .inspector{padding:2px 13px 15px;grid-template-columns:1fr}.editor-demo .inspector h2{font-size:24px}.editor-demo .inspector>p:not(.mini-label){font-size:10px;line-height:1.8}.editor-demo .property-box{display:block;grid-column:1;grid-row:auto;max-width:none;min-width:0;border:0;padding:0;margin-top:3px}.editor-demo .property-box>span{font-size:6px;display:inline;margin-right:7px}.editor-demo .property-box>strong{font-size:8px;display:inline;margin:0}.editor-demo .stage,.editor-demo .workspace[data-step="5"] .stage{gap:16px;padding:20px 13px;min-height:307px}.editor-demo .reference{display:block;max-width:47%;width:auto;flex:1 1 47%}.editor-demo .reference>span:first-child{font-size:6px;line-height:1.7;margin-bottom:9px;letter-spacing:.04em}.editor-demo .reference[data-reference-kind=portrait]{display:block;max-width:47%;flex:1 1 47%;width:auto}.editor-demo .reference[data-reference-kind=portrait] .ed-reference-media{width:100%;height:auto;aspect-ratio:9/16;max-height:230px}.editor-demo .reference>p{font-size:8px;line-height:1.7;margin-top:10px}.editor-demo .ed-operation-detail{font-size:7px;line-height:1.7;padding:7px;margin-top:9px}.editor-demo .video-frame{height:auto;width:45%;max-width:45%;aspect-ratio:9/16;flex:0 0 45%}.editor-demo .video-frame.wide{height:auto;width:45%;max-width:45%;aspect-ratio:16/9}.editor-demo .workspace[data-step="5"] .video-frame{width:160px;max-width:80%;flex-basis:auto;height:284px}.editor-demo .workspace[data-step="5"] .video-frame.wide{height:auto;width:100%;max-width:100%;aspect-ratio:16/9}.editor-demo .workspace[data-step="1"] .stage{min-height:245px}.editor-demo .canvas-badge{font-size:5px;padding:4px 5px;top:6px;left:6px}.editor-demo .ed-crop-guides>i{border-width:1px}.editor-demo .ed-crop-guides b{font-size:6px;padding:2px;left:1px;top:1px}.editor-demo .ed-crop-legend{gap:5px;margin-top:8px}.editor-demo .ed-crop-legend>span{font-size:5px;gap:3px}.editor-demo .ed-crop-legend i{font-size:5px;width:9px;height:9px}.editor-demo .ed-result-panes>i{font-size:6px;padding:3px;top:27px;left:5px}.editor-demo .ed-result-panes>i:nth-child(2){top:calc(50% + 5px)}.editor-demo .ed-result-panes>i:nth-child(3){top:calc(50% + 5px);left:calc(50% + 5px)}.editor-demo .transformation{padding:10px 13px;min-height:90px}.editor-demo .phase-steps{justify-content:start;gap:5px}.editor-demo .phase-steps button{font-size:7px;min-height:31px;padding:6px 7px}.editor-demo .phase-steps>i{font-size:7px}.editor-demo .transformation>p{font-size:8px;line-height:1.8;margin-top:8px}.editor-demo .transport{padding:9px 12px;gap:7px;flex-wrap:wrap}.editor-demo #ed-time{font-size:7px;min-width:67px}.editor-demo .transport button{font-size:7px;min-height:36px;padding-inline:8px}.editor-demo .transport #ed-play{width:33px;min-height:36px}.editor-demo .scrub-label{order:5;flex-basis:100%;height:20px}.editor-demo .scrub-label input{height:20px}.editor-demo #ed-sound{margin-left:auto}.editor-demo .timeline{padding:15px 12px}.editor-demo .timeline-heading{display:block}.editor-demo .timeline-heading>p{font-size:8px;margin-top:7px;line-height:1.7}.editor-demo .timeline-operation{display:none}.editor-demo .track-row>.track{height:28px}.editor-demo .track-row>span{width:28px;font-size:6px}.editor-demo .timeline-clip{font-size:6px;padding-inline:4px}.editor-demo .timeline-clip img{width:18px;min-width:18px}.editor-demo .ruler{font-size:6px;margin-left:34px}.editor-demo .timeline-note{font-size:7px;padding-left:34px}.editor-demo .timeline-note>span:not(#ed-final-pass){max-width:none}.editor-demo .cut-line{left:calc(34px + (100% - 34px)*.665)}.editor-demo .playhead>span{font-size:6px}.editor-demo #ed-final-pass{font-size:6px}}
@media(max-width:360px){.editor-demo .chapters button{padding-inline:5px;gap:5px}.editor-demo .chapter-name{font-size:7px}.editor-demo .stage,.editor-demo .workspace[data-step="5"] .stage{gap:12px;padding-inline:11px;min-height:280px}.editor-demo .ed-operation-detail{font-size:6px}.editor-demo .reference>p{font-size:7px}.editor-demo .inspector h2{font-size:22px}.editor-demo .transport{gap:5px}.editor-demo .transport button{padding-inline:6px}.editor-demo #ed-time{min-width:62px}}
@media(prefers-reduced-motion:reduce){.editor-demo *{transition:none!important}}
.editor-demo .workspace:not([data-step="5"]) .reference{display:block}
.editor-demo .preview-area>.inspector{order:0}
@media(max-width:540px){.editor-demo .ed-crop-legend>span{font-size:6px}.editor-demo .ed-crop-legend i{font-size:6px;width:11px;height:11px}}
@media(max-width:540px){.editor-demo .stage,.editor-demo .workspace[data-step="1"] .stage,.editor-demo .workspace[data-step="5"] .stage{min-height:390px}}
@media(max-width:360px){.editor-demo .stage,.editor-demo .workspace[data-step="1"] .stage,.editor-demo .workspace[data-step="5"] .stage{min-height:360px}}
.editor-demo .workspace[data-phase=editing] .video-frame>video{opacity:1}
.editor-demo .workspace[data-step="3"] .video-frame::after{content:"";position:absolute;left:61.1%;top:4.4%;width:33.3%;height:32.7%;border:2px solid var(--accent);box-shadow:0 0 0 1px #f7f7f2;pointer-events:none;opacity:0;transition:opacity .2s}
.editor-demo .workspace[data-step="3"][data-phase=editing] .video-frame::after,.editor-demo .workspace[data-step="3"][data-phase=result] .video-frame::after{opacity:1}