body:is([data-page="crop"], [data-page="resize"], [data-page="rotate"], [data-page="mute"], [data-page="speed"], [data-page="compress"], [data-page="convert"], [data-page="gif"]) .cut-timeline-scroll,
body:is([data-page="crop"], [data-page="resize"], [data-page="rotate"], [data-page="mute"], [data-page="speed"], [data-page="compress"], [data-page="convert"], [data-page="gif"]) .cut-timeline-toolbar > div:not(.rotate-actions),
body:is([data-page="crop"], [data-page="resize"], [data-page="rotate"], [data-page="mute"], [data-page="speed"], [data-page="compress"], [data-page="convert"], [data-page="gif"]) #cut-prev,
body:is([data-page="crop"], [data-page="resize"], [data-page="rotate"], [data-page="mute"], [data-page="speed"], [data-page="compress"], [data-page="convert"], [data-page="gif"]) #cut-next { display: none; }
.transform-settings h2 { font-size: .9375rem; margin-bottom: 1rem; }
.transform-settings > label { display: block; font-size: .75rem; color: var(--color-muted); margin-block: .75rem .25rem; }
.transform-settings > select { width: 100%; margin-bottom: .75rem; }
.transform-settings .secondary-button { min-height: 2.75rem; font-size: .8125rem; }
.transform-settings > .secondary-button { width: 100%; margin-top: 1rem; }
.transform-hint { color: var(--color-muted); font-size: .75rem; margin-top: .75rem; }
.transform-position { margin-block: .75rem; }
.transform-position summary { min-height: 2.75rem; font-size: .8125rem; padding-block: .625rem; cursor: pointer; }
.transform-source, .transform-output { position: relative; flex-shrink: 0; }
.transform-output { overflow: hidden; cursor: grab; touch-action: none; }
.transform-output:active { cursor: grabbing; }
.transform-source video, .transform-output video { position: absolute; max-width: none; max-height: none; object-fit: fill; }
.transform-source video, .transform-output video { pointer-events: none; }
body[data-page="rotate"] .transform-output { cursor: default; }
.transform-mask { position: absolute; background: #0008; pointer-events: none; z-index: 1; }
.crop-frame { position: absolute; border: 2px solid var(--color-primary); cursor: move; touch-action: none; z-index: 2; background: linear-gradient(to right, transparent 33.2%, #ffffff60 33.3%, transparent 33.6%, transparent 66.4%, #ffffff60 66.6%, transparent 66.8%), linear-gradient(to bottom, transparent 33.2%, #ffffff60 33.3%, transparent 33.6%, transparent 66.4%, #ffffff60 66.6%, transparent 66.8%); }
.crop-frame::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: 1.25rem; pointer-events: none; }
.crop-grip { position: absolute; width: 2.75rem; height: 2.75rem; padding: 0; background: transparent; border: 0; transform: translate(-50%, -50%); touch-action: none; }
.crop-grip::after { content: ""; display: block; width: .75rem; height: .75rem; border: 2px solid white; background: var(--color-primary); border-radius: .125rem; margin: auto; }
.transform-scrub { width: 100%; min-height: 2.75rem; margin: 0; accent-color: var(--color-primary); flex-shrink: 0; }
.resize-dimensions { display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1fr); gap: .375rem; align-items: end; }
.resize-lock svg { width: 1.25rem; height: 1.25rem; }
.resize-lock[aria-pressed="true"] { color: var(--color-primary); background: var(--color-tint); }
.transform-fit { display: flex; gap: 1rem; border: 0; border-top: 1px solid var(--color-line); padding: .5rem 0 0; margin-top: 1rem; }
.transform-fit legend { padding-top: 1rem; font-size: .8125rem; }
.transform-fit label { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; min-height: 2.75rem; cursor: pointer; }
.transform-fit input { accent-color: var(--color-primary); }
.transform-settings input[type="range"] { width: 100%; min-height: 2.75rem; accent-color: var(--color-primary); }
.transform-settings output { font-variant-numeric: tabular-nums; }
.resize-background { display: flex !important; justify-content: space-between; align-items: center; }
.resize-background input { width: 3.5rem; min-height: 2.75rem; padding: .25rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: .375rem; }
.rotate-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.rotate-actions button { display: flex; flex-direction: column; gap: .25rem; padding: .625rem .25rem; }
.rotate-actions span { font-size: 2rem; line-height: 1; }
.transform-angle { display: block; text-align: center; color: var(--color-muted); margin-top: 1rem; }
body[data-page="rotate"] .cut-editor { grid-template-columns: minmax(0, 1fr); }
body[data-page="rotate"] .rotate-actions { display: flex; gap: .5rem; }
body[data-page="rotate"] .rotate-actions button { flex-direction: row; align-items: center; min-height: 2.75rem; padding: .375rem .625rem; font-size: .75rem; }
body[data-page="rotate"] .rotate-actions span { font-size: 1.5rem; }
body[data-page="rotate"] .transform-angle { margin: 0; font-size: .75rem; }
@media (min-width: 600px) and (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
  .transform-scrub { grid-column: 2; grid-row: 3; align-self: center; }
}

body:is([data-page="speed"], [data-page="compress"], [data-page="convert"], [data-page="gif"]) .transform-output { cursor: default; }
.transform-settings :is(section, #convert-video-settings, #convert-audio-settings) > label { display: block; margin: .75rem 0 .25rem; color: var(--color-muted); font-size: .75rem; }
.transform-settings :is(section, #convert-video-settings, #convert-audio-settings) > select { width: 100%; }
.transform-settings h3 { margin-block: 1rem .75rem; font-size: .8125rem; }
.processing-check { display: flex !important; align-items: center; gap: .5rem; min-height: 2.75rem; font-size: .875rem !important; color: var(--color-text) !important; cursor: pointer; }
.processing-check input { width: 1.125rem; height: 1.125rem; accent-color: var(--color-primary); }
.speed-primary { display: grid; grid-template-columns: 1fr auto; align-items: center; flex-shrink: 0; font-size: .8125rem; }
.speed-primary input[type="range"] { grid-column: 1 / -1; width: 100%; min-height: 2.75rem; margin: 0; accent-color: var(--color-primary); }
.speed-primary output { color: var(--color-primary); font-weight: 600; margin-left: .25rem; }
.speed-primary .processing-check { margin: 0; font-size: .8125rem !important; }
@media (max-width: 899px) {
  body[data-page="compress"] .cut-stage { height: auto; min-height: 0; }
  body[data-page="compress"] .cut-player { height: min(35svh, 15rem); flex: none; }
}
.speed-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-block: .75rem; }
.speed-presets button { min-height: 2.75rem; padding: .375rem; border: 1px solid var(--color-line); border-radius: .5rem; background: var(--color-surface); font-size: .8125rem; }
.speed-presets button[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-tint); color: var(--color-primary); }
.compress-presets { display: grid; gap: .625rem; margin-block: 1rem; }
.compress-presets button { padding: .875rem; text-align: start; border: 1px solid var(--color-line); border-radius: .5rem; background: var(--color-surface); }
.compress-presets button[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.compress-presets strong { display: flex; justify-content: space-between; align-items: center; font-size: .875rem; }
.compress-presets span { display: block; margin-top: .25rem; color: var(--color-muted); font-size: .75rem; }
.compression-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding-block: .75rem; }
.compression-sizes dt { font-size: .6875rem; color: var(--color-muted); }
.compression-sizes dd { font-size: .8125rem; margin: .25rem 0 0; font-variant-numeric: tabular-nums; }
.processing-filename { font-size: .75rem; overflow-wrap: anywhere; color: var(--color-muted); }
#editor-result-gif { width: 100%; max-height: calc(100svh - 15rem); object-fit: contain; border-radius: .625rem; background: var(--slate-50); }
#editor-result-audio { align-self: start; width: 100%; margin-top: 1rem; }
@media (min-width: 900px) { #editor-result-gif { height: calc(100svh - 7.5rem); max-height: none; } }
@media (min-width: 600px) and (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
  body[data-page="speed"] .cut-stage { grid-template-rows: 2.75rem 1.25rem 2.75rem 5.5rem; }
  body[data-page="speed"] .speed-primary { grid-column: 2; grid-row: 4; }
  body[data-page="speed"] .cut-timeline-toolbar { display: none; }
}