to , so the drag had zero visual feedback. */ body.edx-page .edx-dragghost { position: fixed; z-index: 400; pointer-events: none; transform: translate(10px, 10px); max-width: 220px; padding: 5px 10px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--edx-accent-line); box-shadow: 0 8px 22px rgba(0,0,0,.45); color: var(--text); font-size: 11.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* (v8) EDGE-DRAG LABEL — an edge drag RATE STRETCHES: clip.speed is recomputed so the whole (frozen) source window fits the new length, the opposite edge stays pinned, and there is no modifier. Text blocks and stills have no source to re-time, so their grips set the plain length instead. The label shows the number the drag is writing. */ body.edx-page .edx-dragghost--mode { font-variant-numeric: tabular-nums; border-color: var(--violet); color: var(--text); } body.edx-page.is-ratedrag, body.edx-page.is-ratedrag * { cursor: col-resize !important; } /* left action buttons full width */ body.edx-page .edx-left .btn { width: 100%; justify-content: center; } body.edx-page .btn--block { width: 100%; justify-content: center; } /* ========================================================= 5c) (R2) LIBRARY TABS — Media · Text · Captions (CapCut left panel) The pane no longer scrolls as a whole; the tab BODY owns the scroll so the tab row stays pinned. Same visual language as the right-hand tab row. ========================================================= */ body.edx-page .edx-left__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; } body.edx-page .edx-left__body::-webkit-scrollbar { width: 9px; } body.edx-page .edx-left__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } body.edx-page .edx-left__body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); background-clip: padding-box; } body.edx-page .edx-lefttabs { display: flex; gap: 2px; flex: 0 0 auto; border-bottom: var(--edx-line); } body.edx-page .edx-lefttabs button { position: relative; flex: 0 0 auto; appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 500; padding: 9px 10px 8px; line-height: 1; transition: color .14s ease; } body.edx-page .edx-lefttabs button::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background .14s ease; } body.edx-page .edx-lefttabs button:hover { color: var(--text); } body.edx-page .edx-lefttabs button.is-active { color: var(--text); } body.edx-page .edx-lefttabs button.is-active::after { background: var(--violet); } body.edx-page .edx-lpane { display: flex; flex-direction: column; gap: 10px; min-width: 0; } body.edx-page .edx-lpane[hidden] { display: none; } /* text preset library (engine builds the tiles) */ body.edx-page .edx-presets { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; } body.edx-page .edx-preset { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 62px; padding: 10px 8px; border-radius: 11px; cursor: pointer; min-width: 0; background: var(--bg-card); border: var(--edx-line); color: var(--text); font: inherit; transition: border-color .14s ease, background .14s ease, transform .06s ease; } body.edx-page .edx-preset:hover { border-color: var(--edx-accent-line); background: linear-gradient(180deg, var(--edx-accent-soft), transparent 62%), var(--bg-card); } body.edx-page .edx-preset:active { transform: scale(.985); } body.edx-page .edx-preset__prev { max-width: 100%; font-size: 20px; font-weight: 800; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.edx-page .edx-preset__lbl { font-size: 10.5px; font-weight: 500; color: var(--text-dim); } /* native select, on-brand */ body.edx-page .edx-select { width: 100%; appearance: none; -webkit-appearance: none; background: var(--bg-card); border: var(--edx-line); border-radius: 9px; color: var(--text); font: inherit; font-size: 12.5px; padding: 8px 11px; cursor: pointer; } body.edx-page .edx-select:focus { outline: none; border-color: var(--edx-accent-line); } /* legacy prep progress (force-hidden by JS) reuse look */ body.edx-page .capprog { display: flex; align-items: center; gap: 10px; } body.edx-page .capprog .cap__bar { flex: 1; height: 4px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); } body.edx-page .capprog .cap__bar > i { display: block; height: 100%; width: 0; background: var(--grad-violet); } /* ========================================================= 6) CENTER — preview stage / compositor ========================================================= */ /* (R3) the stage is a COLUMN now: preview area on top, player bar underneath. Nothing may float over the frame any more — the guides / aspect dropdowns and the play button all moved into .edx-playbar. */ body.edx-page .edx-stage { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-width: 0; min-height: 0; overflow: hidden; padding: 0; background: radial-gradient(120% 90% at 50% 0%, rgba(105,101,219,.06), transparent 60%), var(--bg); } body.edx-page.edx-focus .edx-stage { padding: 0; } body.edx-page .edx-stage__view { /* (Z1) `position: relative` anchors the zoom HUD; `overflow: hidden` was already here and is what clips the magnified frame. Neither creates a stacking context (z-index stays auto), so the playbar's fly-up menus (.edx-guidedd, z-index 20) still paint over the preview. */ position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 10px; overflow: hidden; /* NOTE: no `touch-action` override here on purpose. A trackpad pinch arrives as ctrl+wheel and is handled (and preventDefault()ed) in JS, which is the actual "the whole site zooms" complaint; forcing `touch-action: none` would only take page scrolling away from touch users without giving them anything. */ } body.edx-page .edx-stage__view.is-panning { cursor: grabbing; } /* (Z1) PREVIEW ZOOM HUD — floats over the backdrop, bottom-right of the stage view. Hidden at Fit; the engine unhides it the moment the view scale moves. */ body.edx-page .edx-zoomhud { position: absolute; right: 12px; bottom: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 7px; padding: 3px 3px 3px 10px; border-radius: 999px; background: rgba(16,16,20,.78); border: 1px solid rgba(255,255,255,.10); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0,0,0,.35); } body.edx-page .edx-zoomhud[hidden] { display: none; } body.edx-page .edx-zoomhud__val { font-size: 11px; font-weight: 400; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; } body.edx-page .edx-zoomhud__fit { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 11px; font-weight: 500; line-height: 1.1; color: #fff; background: var(--violet); padding: 4px 10px; border-radius: 999px; transition: filter .15s ease; } body.edx-page .edx-zoomhud__fit:hover { filter: brightness(1.1); } /* ---- CapCut player bar ---- */ body.edx-page .edx-playbar { flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 6px 10px; border-top: var(--edx-line); background: var(--bg-soft); min-width: 0; } body.edx-page .edx-playbar__l { display: flex; align-items: center; gap: 8px; min-width: 0; } body.edx-page .edx-playbar__c { display: flex; align-items: center; gap: 2px; justify-self: center; } body.edx-page .edx-playbar__r { display: flex; align-items: center; gap: 6px; justify-content: flex-end; min-width: 0; } body.edx-page .edx-playbar__time { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; color: var(--text-dim); white-space: nowrap; } body.edx-page .edx-playbar .tlicon--play { color: var(--text); } body.edx-page .edx-playbar .tlicon--play svg { width: 18px; height: 18px; } /* the two dropdowns now live IN the bar — kill the absolute corner positioning and fly both menus UP so they never leave the viewport. */ body.edx-page .edx-playbar .edx-guidedd, body.edx-page .edx-playbar .edx-aspectdd { position: relative; left: auto; right: auto; top: auto; bottom: auto; z-index: 20; } body.edx-page .edx-playbar .edx-guidedd .edx-guidemenu { left: auto; right: 0; top: auto; bottom: calc(100% + 5px); } /* fullscreen preview — the STAGE goes fullscreen so the bar comes along */ body.edx-page .edx-stage:fullscreen { background: #000; } body.edx-page .edx-stage:fullscreen .edx-playbar { background: rgba(16,16,20,.92); border-top-color: rgba(255,255,255,.08); } body.edx-page.edx-prevfs .edx-stage__view { padding: 6px; } /* ========================================================= (G) PLATFORM SAFE-ZONE GUIDES — compact corner dropdown (#prevModes), mirrors the aspect dropdown. Engine keeps toggling [hidden] on the wrapper so it only exists at 9:16. Options: No guides / TikTok / Instagram Reels / YouTube Shorts. The guide boxes themselves are .uiov__box / .uiov__line inside #uiOverlay, positioned inline by buildOverlay() exactly like reaction.js — app.css owns their base look and is NOT touched; everything below is scoped to body.edx-page only. ========================================================= */ body.edx-page .edx-guidedd { position: absolute; left: 16px; top: 16px; z-index: 6; } body.edx-page .edx-guidedd[hidden] { display: none; } /* the guide menu drops DOWN-LEFT (the aspect one flies UP-RIGHT) */ body.edx-page .edx-guidedd .edx-guidemenu { right: auto; bottom: auto; left: 0; top: calc(100% + 5px); min-width: 176px; } body.edx-page .edx-guidedd .edx-cornerbtn { font-variant-numeric: normal; } /* overlay itself — above the layers, below the transform box */ body.edx-page .uiov[hidden] { display: none; } body.edx-page .uiov > * { pointer-events: none; } /* scoped polish only — never restyled globally */ body.edx-page .uiov__box { border-radius: 7px; } body.edx-page .uiov__lab { letter-spacing: .04em; } /* legacy 3-button pill row (kept for safety; markup now uses .edx-guidedd) */ body.edx-page .edx-guide { position: absolute; top: 16px; left: 16px; z-index: 6; display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(18,18,18,.72); backdrop-filter: blur(6px); border: var(--edx-line); } body.edx-page .edx-guide[hidden] { display: none; } body.edx-page .edx-guide button { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 6px; cursor: pointer; transition: background .14s ease, color .14s ease; } body.edx-page .edx-guide button:hover { color: var(--text); } body.edx-page .edx-guide button.is-active { color: var(--violet-light); background: var(--edx-accent-soft); } /* ---- compact corner dropdown (aspect ratio) in the player's bottom-right ---- */ body.edx-page .edx-aspectdd { position: absolute; right: 16px; bottom: 16px; z-index: 6; } body.edx-page .edx-cornerbtn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; cursor: pointer; background: rgba(18,18,18,.72); backdrop-filter: blur(6px); border: var(--edx-line); color: var(--text); font: inherit; font-size: 11.5px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; transition: border-color .14s ease, color .14s ease; } body.edx-page .edx-cornerbtn svg { opacity: .8; transition: transform .16s ease; } body.edx-page .edx-cornerbtn:hover { border-color: var(--edx-accent-line); } body.edx-page .edx-cornerbtn[aria-expanded="true"] { border-color: var(--edx-accent-line); color: var(--violet-light); } body.edx-page .edx-cornerbtn[aria-expanded="true"] svg { transform: rotate(180deg); } body.edx-page .edx-cornermenu { position: absolute; right: 0; bottom: calc(100% + 5px); z-index: 30; min-width: 168px; padding: 5px; background: var(--bg-card); border: 1px solid var(--border-lt); border-radius: 11px; box-shadow: var(--shadow); } body.edx-page .edx-cornermenu[hidden] { display: none; } body.edx-page .edx-cornermenu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 500; padding: 8px 9px; border-radius: 8px; white-space: nowrap; transition: background .13s ease, color .13s ease; } body.edx-page .edx-cornermenu button:hover { background: var(--edx-accent-soft); color: var(--violet-light); } body.edx-page .edx-cornermenu button.is-active { background: var(--edx-accent-soft); color: var(--violet-light); } /* (P8) GUIDES DROPDOWN — brand LOGO on the trigger, logo + full label in the menu. These rules MUST come after `.edx-cornermenu button { display:block }` above: identical specificity, so source order decides which `display` wins. */ body.edx-page .edx-guidedd__ico { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 auto; } body.edx-page .edx-guidedd__ico svg { width: 16px; height: 16px; display: block; } /* the trigger is icon-only now — tighten it so it reads as a control, not a chip */ body.edx-page .edx-cornerbtn--ico { padding: 5px 7px; gap: 4px; } body.edx-page .edx-guidemenu button { display: flex; align-items: center; gap: 9px; } body.edx-page .edx-guidemenu__ico { flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; color: var(--text-dim); } body.edx-page .edx-guidemenu__ico svg { width: 15px; height: 15px; display: block; } body.edx-page .edx-guidemenu button:hover .edx-guidemenu__ico, body.edx-page .edx-guidemenu button.is-active .edx-guidemenu__ico { color: var(--violet-light); } /* the aspect frame = compositor root (sized by JS via sizeStage → --edx-frame-w/h). sizeStage() computes the LARGEST box of the current aspect that fits BOTH the stage width and height, so the preview always fits its allotted space for 9:16, 1:1 AND 16:9. max-* clamp is a safety net if JS hasn't run yet. */ body.edx-page .edx-frame { position: relative; width: var(--edx-frame-w); height: var(--edx-frame-h); max-width: 100%; max-height: 100%; border-radius: 12px; overflow: hidden; background: #000; /* (Z1) the preview zoom scales the frame about its own centre. No `transform` is declared here — caption.v7.js writes one ONLY while the view is off Fit and clears it back to "" at 100 %, so at Fit the frame has no transform at all and every client rect reads exactly as it did before the zoom existed. */ transform-origin: 50% 50%; box-shadow: 0 18px 60px rgba(0,0,0,.5), 0 0 0 1px var(--border); /* self-contained z stack: nothing inside the preview (layers, transform box, play button) may out-paint the stage's corner controls (z 6) */ isolation: isolate; } /* (B5) `isolation: isolate` is LOAD-BEARING, not decoration. The compositor gives each layer a stacking z of (tracks - ti) * 100 + z + 1 — i.e. 101 and up. With `.edx-comp` at z-index:auto it creates NO stacking context, so those layer z-indexes competed directly with the frame's overlays in the root stacking context and painted OVER them: the transform box (z 8), the play button (z 9) and the safe-zone overlay (z 7) all ended up behind the video, which made them invisible AND unhittable (elementFromPoint returned the