/* Landing walkthrough in ReelFyre's actual transcript/canvas/inspector/timeline structure. */
.app-editor-demo{--panel:#fff;--paper:#f7f7f2;--sage:#edf0e6;--line:#d9ddd0;background:transparent}
.app-editor-demo>.chapters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;border:0;padding:0 0 20px;background:none;width:100%;max-width:100%}
.app-editor-demo>.chapters>.mini-label,.app-editor-demo>.chapters>.tour-status{display:none}.app-editor-demo>.chapters button{position:relative;display:grid;grid-template-columns:20px 1fr;align-items:start;gap:8px;border:1px solid var(--line);border-radius:7px;background:var(--panel);padding:14px 10px;min-height:94px;margin:0;overflow:hidden;text-align:left;transition:border-color .2s,background .2s}.app-editor-demo>.chapters button[aria-current]{background:var(--sage);border-color:#7c856e;box-shadow:none}.app-editor-demo .chapter-number{font-size:11px;padding-top:2px}.app-editor-demo .chapter-name{font-size:13px;line-height:1.4}.app-editor-demo .chapter-name small{font-size:10px;line-height:1.4;margin-top:5px;display:block}.app-editor-demo .chapter-duration{display:none}.app-editor-demo .chapter-progress{height:2px;background:var(--accent)}
.app-editor-demo .workspace{border-radius:10px;border:1px solid var(--line);overflow:hidden;box-shadow:0 16px 40px #25272008;background:var(--paper)}
.app-editor-demo .workspace-bar{display:flex;align-items:center;gap:16px;padding:12px 16px;min-height:58px;background:var(--panel);border-bottom:1px solid #a4aa99;flex-wrap:nowrap}.app-editor-demo .workspace-bar .app-project{display:flex;align-items:center;gap:12px;min-width:0;font-size:13px}.app-editor-demo .app-project>span{font-size:24px}.app-editor-demo .app-project strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:235px;font-weight:600}.app-editor-demo .app-project small{display:block;white-space:nowrap;font-size:11px;color:var(--muted);letter-spacing:0}.app-editor-demo .workspace-bar .app-format{display:flex;gap:16px;align-items:center;margin-left:auto;font-size:12px;white-space:nowrap}.app-editor-demo .app-toolbar-layout{border-left:1px solid var(--line);padding-left:16px;color:var(--muted)}.app-editor-demo .app-toolbar-layout strong{font-weight:600;color:var(--ink)}.app-editor-demo .app-download{display:flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:8px 14px;border-radius:5px;background:var(--ink);color:var(--paper);font-size:12px;flex-shrink:0}
.app-editor-demo .editor-body{display:grid;grid-template-columns:210px minmax(0,1fr) 244px 64px;align-items:stretch;min-height:520px;background:var(--paper)}
.app-transcript{padding:20px 14px;border-right:1px solid var(--line);min-width:0;display:flex;flex-direction:column;background:var(--paper)}.app-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}.app-panel-heading>span{font-size:11px;padding:5px 8px;border:1px solid var(--line);background:var(--panel);border-radius:5px}.app-transcript-hint{font-size:11px;color:var(--muted);margin:10px 0 18px}.app-transcript button{display:grid;grid-template-columns:32px 1fr;align-items:start;text-align:left;gap:10px;padding:12px 6px;margin:0 0 5px;border:1px solid transparent;border-radius:6px;background:transparent;font:400 13px/1.65 var(--sans);min-height:60px;color:var(--ink)}.app-transcript time{font-size:10px;color:var(--muted);padding-top:3px}.app-transcript button.is-active{background:var(--sage);border-color:var(--line)}.app-transcript button small{grid-column:2;font-size:10px;color:var(--muted)}.app-transcript .app-repeat{opacity:.6}.app-editor-demo .workspace[data-step="1"] .app-repeat span{text-decoration:line-through}.app-transcript-foot{font-size:10px;color:var(--muted);margin-top:auto;padding-top:20px}
.app-editor-demo .preview-area{grid-column:auto;display:flex;flex-direction:column;min-width:0;background:#f3f2eb;position:relative}.app-editor-demo .stage-meta{font-size:9px;padding:14px 16px 0;letter-spacing:.08em}.app-editor-demo .stage,.app-editor-demo .workspace[data-step="1"] .stage,.app-editor-demo .workspace[data-step="5"] .stage{display:flex;flex:1;align-items:center;justify-content:center;padding:20px 16px;gap:0;min-height:458px}.app-editor-demo .video-frame,.app-editor-demo .workspace[data-step="5"] .video-frame{height:410px;width:231px;max-width:94%;flex:none;aspect-ratio:9/16;border-radius:7px;box-shadow:0 5px 20px #25272012}.app-editor-demo .video-frame.wide,.app-editor-demo .workspace[data-step="5"] .video-frame.wide{width:94%;height:auto;max-width:94%;aspect-ratio:16/9}.app-editor-demo .workspace:not([data-step="5"])[data-phase=before] .video-frame>video{opacity:1}.app-editor-demo .canvas-badge{font-size:8px;padding:5px 7px}.app-editor-demo .ed-result-panes>i{font-size:9px}.app-editor-demo .transformation{display:block;border-top:0;padding:0 16px 14px;min-height:0;background:transparent;text-align:center}.app-editor-demo .phase-steps{justify-content:center;gap:4px}.app-editor-demo .phase-steps button{font-size:10px;min-height:34px;padding:6px 8px}.app-editor-demo .transformation>p{font-size:11px;line-height:1.55;max-width:none;text-align:center;margin-top:8px;min-height:34px}.app-editor-demo .ed-mobile-compare{display:none!important}.app-editor-demo .compare-control{top:34px;left:50%;transform:translateX(-50%);width:max-content}.app-editor-demo .compare-control button{font-size:10px;min-height:32px}
.app-editor-demo .inspector{display:flex;flex-direction:column;align-items:stretch;grid-column:auto;border-left:1px solid var(--line);padding:0 14px 16px;background:var(--panel);gap:0;min-width:0;order:0}.app-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;padding:18px 0 16px;margin-bottom:16px}.app-settings-heading>span:last-child{color:var(--muted);font-size:18px;font-weight:400}.app-editor-demo .inspector h2{font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.4;letter-spacing:-.02em;margin-bottom:8px}.app-editor-demo .inspector>p:not(.mini-label){font-size:12px;line-height:1.6;max-width:none;margin:0 0 16px}.app-editor-demo .property-box{display:block;min-width:0;max-width:none;border:0;padding:12px;background:var(--paper);border-radius:5px;margin:0 0 14px}.app-editor-demo .property-box>span{font-size:9px;display:block;letter-spacing:.08em}.app-editor-demo .property-box>strong{font-size:12px;display:block;margin-top:5px}.app-tool-settings{margin-bottom:16px}.app-layout-diagram{display:grid;grid-template-columns:1fr 1fr;gap:3px;border:1px solid #99a48a;border-radius:5px;padding:5px;max-width:100px;height:84px;background:var(--sage)}.app-layout-diagram i{border:1px solid #a4ae96;border-radius:2px;background:#d9e0cc}.app-layout-diagram i:first-child{grid-column:1/-1}.app-setting-line{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:11px}.app-setting-line strong{font-size:11px;font-weight:500}.app-setting-track{height:9px;border-radius:3px;background:linear-gradient(90deg,#d7c7a7 18%,#bfb58d 18% 70%,var(--paper) 70%);border:1px solid var(--line);margin-top:12px}.app-media-thumb{width:100%;height:82px;object-fit:cover;border-radius:4px;margin-bottom:8px}
.app-editor-demo .workspace:not([data-step="5"]) .reference,.app-editor-demo .reference{display:block;max-width:none;width:100%;flex:none;margin-top:auto;border-top:1px solid var(--line);padding-top:12px}.app-editor-demo .workspace[data-step="5"] .reference{display:none}.app-editor-demo .reference>span:first-child{font-size:9px;margin-bottom:8px}.app-editor-demo .reference[data-reference-kind=portrait]{max-width:none;width:100%;flex:none}.app-editor-demo .reference[data-reference-kind=portrait] .ed-reference-media{width:66px;height:117px;margin:0;aspect-ratio:9/16}.app-editor-demo .reference>p{font-size:10px;line-height:1.5;margin-top:8px}.app-editor-demo .ed-operation-detail{display:none}.app-editor-demo .ed-crop-legend{gap:5px;margin-top:6px}.app-editor-demo .ed-crop-legend>span,.app-editor-demo .ed-crop-legend i{font-size:8px}.app-editor-demo .ed-crop-legend i{height:12px;width:12px}
.app-tool-rail{display:flex;flex-direction:column;gap:4px;padding:12px 5px;border-left:1px solid var(--line);background:var(--panel)}.app-tool-rail button{display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:7px;min-height:68px;padding:8px 2px;font:400 10px/1.3 var(--sans)}.app-tool-rail button>span{font-size:20px;line-height:1;font-family:var(--sans)}.app-tool-rail button.is-active{background:var(--sage);border-color:#acb29f;box-shadow:inset 2px 0 var(--ink)}
.app-editor-demo .transport{display:flex;align-items:center;border-top:1px solid #a4aa99;padding:10px 18px;gap:12px;background:var(--panel)}.app-editor-demo .transport button{min-height:36px;font-size:11px}.app-editor-demo .transport #ed-play{width:36px;min-width:36px;min-height:36px;border-radius:50%;background:var(--sage);border-color:#a4aa99}.app-editor-demo #ed-time{font-size:11px;min-width:88px}.app-editor-demo .scrub-label{order:0;flex:1;height:22px}.app-editor-demo .timeline{padding:12px 18px 16px;background:var(--paper);border-top:1px solid var(--line)}.app-editor-demo .timeline-heading{gap:12px;align-items:center}.app-editor-demo .timeline-heading>span:first-child{font-size:9px}.app-editor-demo .timeline-heading>p{font-size:11px}.app-editor-demo .ruler{font-size:10px;margin-top:12px;margin-left:72px}.app-editor-demo .track-row{gap:12px;margin-top:5px}.app-editor-demo .track-row>span{width:60px;font-size:10px;text-transform:none}.app-editor-demo .track-row>.track{height:26px;border:0;background:#e5e8dd}.app-editor-demo .track-row[data-track=video]>.track{height:42px}.app-editor-demo .track-row[data-track=voice]>.track{height:31px}.app-editor-demo .timeline-clip{font-size:9px;border-color:#bec7b0;border-radius:5px;background:#e5e9dc;color:#41483a}.app-editor-demo .timeline-clip.voice{background:#d8e7de;border-color:#c8d9ce}.app-editor-demo .timeline-clip.text{background:#e1daed;border-color:#d3c9e2;color:#6b5786}.app-editor-demo .timeline-clip.overlay{background:#eee4ce;border-color:#ddcfaf}.app-editor-demo .timeline-clip img{width:42px}.app-editor-demo .timeline-clip .wave{opacity:.7}.app-editor-demo .ed-track-focus>.track{outline:1px solid #8c967d;outline-offset:1px}.app-editor-demo .playhead{background:#ff713b}.app-editor-demo .playhead>i{background:#ff713b}.app-editor-demo .timeline-note{font-size:10px;margin-top:10px;padding-left:72px}.app-editor-demo .cut-line{left:calc(72px + (100% - 72px)*.665)}
@media(max-width:1100px){.app-editor-demo .editor-body{grid-template-columns:170px minmax(0,1fr) 210px 58px}.app-editor-demo .app-project small{display:none}.app-editor-demo .app-toolbar-layout{display:none}.app-editor-demo .app-project strong{max-width:220px}.app-editor-demo .inspector{padding-inline:12px}.app-transcript{padding-inline:10px}.app-transcript button{font-size:12px;gap:6px}.app-editor-demo>.chapters .chapter-name small{display:none}.app-editor-demo>.chapters button{min-height:70px}}
@media(max-width:850px){.app-editor-demo .editor-body{grid-template-columns:minmax(0,1fr) 210px 58px}.app-transcript{display:none}.app-editor-demo>.chapters{display:flex;flex-direction:row;overflow:auto;scroll-snap-type:x mandatory}.app-editor-demo>.chapters button{flex:0 0 165px;height:68px;scroll-snap-align:start}.app-editor-demo .video-frame{max-width:95%}.app-editor-demo .app-project strong{max-width:200px}.app-editor-demo .workspace-bar{gap:10px}.app-editor-demo .timeline{overflow:auto}.app-editor-demo .tracks{min-width:620px}.app-editor-demo .ruler{min-width:548px}}
@media(max-width:600px){.app-editor-demo .workspace-bar{padding:10px;min-height:52px}.app-editor-demo .app-project strong{max-width:155px;font-size:12px}.app-editor-demo .workspace-bar .app-format{font-size:11px;gap:6px}.app-editor-demo .app-download{padding:7px 10px;min-height:34px}.app-editor-demo .app-download span{display:none}.app-editor-demo .editor-body{display:grid;grid-template-columns:minmax(0,1fr) 54px}.app-editor-demo .preview-area{grid-column:1;grid-row:1}.app-editor-demo .app-tool-rail{grid-column:2;grid-row:1;padding:8px 3px}.app-tool-rail button{min-height:58px;font-size:9px}.app-tool-rail button>span{font-size:18px}.app-editor-demo .inspector{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:0 16px;padding:14px;border-top:1px solid var(--line);border-left:0}.app-settings-heading{grid-column:1/-1;padding:0 0 12px;margin-bottom:12px}.app-editor-demo .inspector h2{grid-column:1/-1;font-size:16px}.app-editor-demo .inspector>p:not(.mini-label){grid-column:1/-1;font-size:13px;margin-bottom:12px}.app-editor-demo .property-box{grid-column:1;margin:0 0 10px}.app-editor-demo .app-tool-settings{grid-column:1;margin-bottom:0}.app-editor-demo .reference,.app-editor-demo .workspace:not([data-step="5"]) .reference{grid-column:2;grid-row:4/7;margin:0;padding:0;border:0;display:block}.app-editor-demo .reference>p{font-size:11px}.app-editor-demo .reference[data-reference-kind=portrait] .ed-reference-media{width:72px;height:128px}.app-editor-demo .stage,.app-editor-demo .workspace[data-step="1"] .stage,.app-editor-demo .workspace[data-step="5"] .stage{min-height:390px;padding:12px}.app-editor-demo .video-frame,.app-editor-demo .workspace[data-step="5"] .video-frame{width:182px;height:324px;max-width:100%}.app-editor-demo .video-frame.wide,.app-editor-demo .workspace[data-step="5"] .video-frame.wide{height:auto;width:100%}.app-editor-demo .stage-meta{font-size:8px;padding:12px 10px 0}.app-editor-demo .transformation{padding:0 10px 12px}.app-editor-demo .phase-steps button{font-size:10px;padding:6px;min-height:44px}.app-editor-demo .transformation>p{font-size:11px;min-height:50px}.app-editor-demo .transport{display:flex;flex-wrap:wrap;padding:10px;gap:8px}.app-editor-demo .transport button,.app-editor-demo .transport #ed-play{min-height:44px;font-size:11px}.app-editor-demo #ed-time{font-size:10px;min-width:80px}.app-editor-demo #ed-tour{margin-left:auto}.app-editor-demo #ed-sound{margin-left:auto}.app-editor-demo .scrub-label{order:5;flex-basis:100%;height:24px}.app-editor-demo .timeline{padding:12px 10px}.app-editor-demo .timeline-heading{display:block}.app-editor-demo .timeline-note{padding-left:0;font-size:11px}.app-editor-demo .track-row>.track{height:28px}.app-editor-demo .timeline-clip{font-size:10px}.app-editor-demo .compare-control{top:28px}.app-editor-demo>.chapters button{flex-basis:160px}.app-editor-demo .chapter-name{font-size:13px}}
.app-tool-rail button>svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.app-editor-demo .timeline-clip.text,.app-editor-demo .timeline-clip.text.is-active{background:#e1daed;border-color:#cfc2df;color:#695581}.app-editor-demo .timeline-clip.voice,.app-editor-demo .timeline-clip.voice.is-active{background:#d8e7de;border-color:#bfd5c7}.app-editor-demo .timeline-clip.overlay,.app-editor-demo .timeline-clip.overlay.is-active{background:#eee4ce;border-color:#ddcfaf}.app-editor-demo .timeline-clip.layout{background:#eff1e8;border-color:#c5ccb8}.app-editor-demo .workspace[data-step="5"] .reference{display:none}