#settingsVideoFrameGroup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#settingsVideoFrameGroup button { min-width: 0; padding-inline: 5px; }
.video-frame-locked { opacity: .45; }
.shot-card[data-video-frame-mode="none"] .shot-grid { grid-template-columns: minmax(0, 1fr) minmax(210px, 280px); }
.shot-card[data-video-frame-mode="none"] .shot-input-video-rail { display: none; }
@container (max-width: 1180px) {
  .shot-card[data-video-frame-mode="none"] .shot-grid { grid-template-columns: minmax(0, 1fr); }
}
.shot-card[data-video-frame-mode="edit"] .shot-duration-field { min-width: 210px; }
.video-edit-range { display: grid; gap: 5px; font-size: 12px; }
.video-edit-range[hidden], .shot-duration-field > [hidden] { display: none !important; }
.video-edit-track { position: relative; height: 24px; min-width: 180px; }
.video-edit-track::before { content: ''; position: absolute; inset: 10px 0; border-radius: 4px; background: linear-gradient(to right, #35434b var(--range-start), #6ed2c8 var(--range-start), #6ed2c8 var(--range-end), #35434b var(--range-end)); }
.video-edit-track input { position: absolute; inset: 0; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; height: 24px; min-height: 0; background: transparent; appearance: none; pointer-events: none; }
.video-edit-track input::-webkit-slider-thumb { appearance: none; width: 13px; height: 20px; border: 2px solid #b7f5e9; border-radius: 4px; background: #24534e; cursor: ew-resize; pointer-events: auto; }
.video-edit-track input:focus-visible { outline: none; }
.video-edit-track input:focus-visible::-webkit-slider-thumb { outline: 2px solid #fff; outline-offset: 2px; }