.story-video-editor { --trim-frame: #f9fafc; --trim-grip: #626d7e; width: 100%; min-width: 0; color: #747d8b; font: inherit; user-select: none; -webkit-user-select: none; }
.story-video-heading, .story-video-labels { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.story-video-heading { min-height: 20px; margin-bottom: 5px; }
.story-video-heading > span { min-width: 0; overflow-wrap: anywhere; }
.story-video-heading output { flex-shrink: 0; padding: 2px 7px; border: 1px solid #e2e5eb; border-radius: 6px; color: #626b79; background: #fff; font-size: 11px; line-height: 1.3; white-space: nowrap; }
.story-video-labels { margin-top: 4px; color: #8b94a2; font-size: 11px; }
.story-video-timeline { position: relative; height: 44px; border-radius: 7px; background: #464d58; cursor: crosshair; touch-action: none; isolation: isolate; box-shadow: 0 0 0 1px rgba(61,69,83,.08); }
.story-video-thumbnails { position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: inherit; pointer-events: none; }
.story-video-thumbnails > img, .story-video-thumbnails > span { display: block; flex: 1 1 0; width: 12.5%; min-width: 0; height: 100%; object-fit: cover; }
.story-video-thumbnails > span { background: linear-gradient(135deg,#555e6b,#3d4551); border-right: 1px solid rgba(255,255,255,.04); }
.story-video-shade { position: absolute; z-index: 1; top: 0; bottom: 0; background: rgba(20,24,31,.54); pointer-events: none; }
.story-video-shade--start { left: 0; border-radius: 7px 0 0 7px; }
.story-video-shade--end { right: 0; border-radius: 0 7px 7px 0; }
.story-video-window { position: absolute; z-index: 2; top: 0; bottom: 0; border: 2px solid var(--trim-frame); border-radius: 7px; box-shadow: 0 1px 5px rgba(13,23,39,.2); cursor: grab; touch-action: none; outline: 0; }
/* The controls stay large for pointing; only their narrow inner grips are painted. */
.story-video-editor .story-video-trim,
.story-video-editor .story-video-playhead { position: absolute; display: block; appearance: none; -webkit-appearance: none; box-sizing: border-box; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; outline: 0; box-shadow: none; transform: translateX(-50%); touch-action: none; -webkit-tap-highlight-color: transparent; }
.story-video-editor .story-video-trim { z-index: 3; top: 0; width: 28px; height: 44px; cursor: ew-resize; }
.story-video-trim::before { position: absolute; top: 0; bottom: 0; width: 9px; content: ""; background: var(--trim-frame); transition: background-color .15s, box-shadow .15s; pointer-events: none; }
.story-video-trim--start::before { left: 50%; border-radius: 6px 0 0 6px; }
.story-video-trim--end::before { right: 50%; border-radius: 0 6px 6px 0; }
.story-video-trim > span { position: absolute; top: 50%; display: block; width: 2px; height: 14px; margin: 0; border-radius: 2px; background: var(--trim-grip); transform: translateY(-50%); pointer-events: none; }
.story-video-trim--start > span { left: calc(50% + 3.5px); }
.story-video-trim--end > span { right: calc(50% + 3.5px); }
.story-video-playhead-line { position: absolute; z-index: 2; top: 2px; bottom: 2px; width: 1.5px; border-radius: 1px; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.65); transform: translateX(-50%); pointer-events: none; }
.story-video-editor .story-video-playhead { z-index: 4; top: -7px; width: 26px; height: 17px; cursor: ew-resize; }
.story-video-playhead::before { position: absolute; top: 0; left: 50%; width: 6px; height: 9px; border: 1px solid rgba(53,63,79,.18); border-radius: 3px 3px 1px 1px; background: #fff; box-shadow: 0 1px 3px rgba(13,23,39,.2); content: ""; transform: translateX(-50%); pointer-events: none; }
.story-video-editor :is(.story-video-trim,.story-video-playhead):focus { outline: 0; box-shadow: none; }
.story-video-editor :is(.story-video-trim,.story-video-playhead):focus-visible::before { outline: 2px solid #59677b; outline-offset: -2px; background: #fff; }
.story-video-editor .story-video-window:focus-visible { outline: 0; border-color: #fff; box-shadow: inset 0 0 0 1px #59677b, 0 0 0 1px #59677b; }
.story-video-editor.is-trimming-video .story-video-window { cursor: grabbing; box-shadow: 0 1px 9px rgba(13,23,39,.28); }
.story-video-editor [aria-disabled="true"] { cursor: default; }
.story-video-editor button:disabled { cursor: default; opacity: .6; }
.story-video-overview { display: block; appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 100%; height: 24px; min-height: 0; padding: 0; margin: 3px 0 0; border: 0; border-radius: 5px; background: transparent; cursor: ew-resize; touch-action: none; }
.story-video-overview::-webkit-slider-runnable-track { height: 3px; border: 0; border-radius: 2px; background: #dce1e8; }
.story-video-overview::-moz-range-track { height: 3px; border: 0; border-radius: 2px; background: #dce1e8; }
.story-video-overview::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 28px; height: 7px; margin-top: -2px; border: 1px solid #f3f4f6; border-radius: 4px; background: #8996a9; box-shadow: 0 1px 3px rgba(40,51,70,.14); }
.story-video-overview::-moz-range-thumb { width: 28px; height: 7px; border: 1px solid #f3f4f6; border-radius: 4px; background: #8996a9; box-shadow: 0 1px 3px rgba(40,51,70,.14); }
/* Model publication pages also have a global input:focus shadow. Keep focus on the thumb. */
.story-video-editor .story-video-overview:focus { outline: 0 !important; box-shadow: none !important; }
.story-video-overview:focus-visible::-webkit-slider-thumb { outline: 2px solid #59677b; outline-offset: 2px; }
.story-video-overview:focus-visible::-moz-range-thumb { outline: 2px solid #59677b; outline-offset: 2px; }
.story-video-overview:disabled { cursor: default; opacity: .6; }
.story-composer--direct .story-video-editor { color: #b7c1d0; }
.story-composer--direct .story-video-heading output { border-color: rgba(220,227,238,.22); border-style: dashed; color: #dfe3eb; background: transparent; }
.story-composer--direct .story-video-labels { color: #a6b3c6; }
.story-composer--direct .story-video-overview::-webkit-slider-runnable-track { background: #535a65; }
.story-composer--direct .story-video-overview::-moz-range-track { background: #535a65; }
.story-composer--direct .story-video-overview::-webkit-slider-thumb { border-color: #34393f; background: #bdc5d1; }
.story-composer--direct .story-video-overview::-moz-range-thumb { border-color: #34393f; background: #bdc5d1; }
.story-composer--direct .story-video-overview:focus-visible::-webkit-slider-thumb { outline-color: #d2def0; }
.story-composer--direct .story-video-overview:focus-visible::-moz-range-thumb { outline-color: #d2def0; }
@media (hover: hover) {
    .story-video-trim:hover::before { background: #fff; box-shadow: 0 0 0 1px rgba(82,98,122,.3); }
    .story-video-trim:hover > span { background: #3e4a5d; }
    .story-video-playhead:hover::before { background: #fff; box-shadow: 0 0 0 1px #8492a5, 0 1px 4px rgba(13,23,39,.2); }
}
@media (pointer: coarse) {
    /* The mobile shell has 16px edge space; reserve 6px more for half of a 44px handle. */
    .story-composer--direct .story-video-timeline { margin-inline: 6px; }
    .story-video-editor .story-video-trim { width: 44px; }
    .story-video-editor .story-video-playhead { width: 40px; height: 28px; top: -13px; }
    .story-video-playhead::before { top: 6px; }
    .story-video-overview { height: 32px; margin-top: 0; }
}
@media (max-height: 600px) {
    .story-video-heading { margin-bottom: 3px; }
    .story-video-labels { margin-top: 3px; }
    .story-video-overview { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .story-video-trim::before { transition: none; } }