.video-composer{display:grid;gap:var(--space-5);min-width:0;container-type:inline-size}.video-composer__title{font-size:28px}.video-composer__intro{margin-top:var(--space-1);color:var(--muted)}.video-composer__body{display:grid;gap:var(--space-5);min-width:0}.video-composer__preview{display:grid;justify-items:center;gap:var(--space-2);align-content:start}.video-composer__controls{display:grid;gap:var(--space-4);align-content:start;min-width:0}.video-composer__hint{color:var(--muted);font-size:13px;line-height:1.5}.video-composer__preview .video-composer__hint{max-width:300px;text-align:center}.video-composer__frame-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-1)}.video-composer__details{display:grid;gap:var(--space-4);min-width:0;margin:0;padding:0;border:0}.clip-frame{position:relative;width:min(100%,300px);aspect-ratio:9/16;overflow:hidden;border-radius:var(--radius-lg);background:#0d1a16;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}.clip-frame--dragging{cursor:grabbing}.clip-frame__video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.clip-frame--empty{aspect-ratio:auto;min-height:220px;display:grid;place-content:center;justify-items:center;gap:var(--space-3);padding:var(--space-5);border:1px dashed var(--line);background:var(--surface);color:var(--muted);text-align:center;touch-action:auto;cursor:default}.clip-frame--empty p{font-size:13px}.clip-frame__move,.clip-frame__play{position:absolute;display:grid;place-items:center;border-radius:var(--radius-full);background:rgb(0 0 0/45%);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.clip-frame__move{top:var(--space-3);right:var(--space-3);width:32px;height:32px;pointer-events:none}.clip-frame__play{left:var(--space-3);bottom:var(--space-3);width:44px;height:44px;border:0;cursor:pointer}.clip-frame__play:disabled{opacity:.5;cursor:default}.trim{display:grid;gap:var(--space-2);min-width:0;margin:0;padding:0;border:0}.trim__legend{padding:0;margin-bottom:var(--space-2);font-weight:600}.trim__times{display:flex;justify-content:space-between;gap:var(--space-2);color:var(--muted);font-size:13px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.trim__times strong{color:var(--ink)}.trim__track{position:relative;height:32px}.trim__span,.trim__track:before{content:"";position:absolute;top:50%;height:6px;border-radius:var(--radius-full);transform:translateY(-50%)}.trim__track:before{inset-inline:0;background:var(--surface-muted)}.trim__span{left:var(--from);right:calc(100% - var(--to));background:var(--orange)}.trim__handle{position:absolute;inset:0;width:100%;height:100%;margin:0;background:none;pointer-events:none;appearance:none;-webkit-appearance:none}.trim__handle::-webkit-slider-runnable-track{background:none}.trim__handle::-moz-range-track{background:none}.trim__handle::-webkit-slider-thumb{width:24px;height:24px;border:2px solid var(--orange);border-radius:var(--radius-full);background:var(--surface);box-shadow:var(--shadow-sm);pointer-events:auto;cursor:ew-resize;-webkit-appearance:none}.trim__handle::-moz-range-thumb{width:20px;height:20px;border:2px solid var(--orange);border-radius:var(--radius-full);background:var(--surface);box-shadow:var(--shadow-sm);pointer-events:auto;cursor:ew-resize}.trim__handle:focus-visible{outline:none}.trim__handle:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ink);outline-offset:2px}.trim__handle:focus-visible::-moz-range-thumb{outline:2px solid var(--ink);outline-offset:2px}.trim:disabled .trim__handle{opacity:.55}@container (min-width: 620px){.video-composer__body{grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:var(--space-6)}}.clip-frame:focus-visible{outline:3px solid var(--orange);outline-offset:3px}.video-composer__progress{display:grid;gap:var(--space-2)}.video-composer__progress-label{color:var(--ink);font-size:14px;font-weight:600;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.video-composer__progress progress{appearance:none;width:100%;height:8px;border:0;border-radius:999px;overflow:hidden;background:var(--surface-muted);accent-color:var(--ink)}.video-composer__progress progress::-webkit-progress-bar{background:var(--surface-muted)}.video-composer__progress progress::-webkit-progress-value{background:var(--ink);border-radius:999px}.video-composer__progress progress::-moz-progress-bar{background:var(--ink);border-radius:999px}.video-composer__progress .button{justify-self:start}