/* One viewing surface, one selection, one export action. */
.cutter { padding-block: 1.5rem 2rem; }
.cutter .product-heading { text-align: center; margin-block: 1.5rem 2rem; }
.cut-upload { display: flex; flex-direction: column; align-items: center; gap: .875rem; padding: 3rem 1rem; border: 1px dashed var(--slate-400); border-radius: var(--radius); background: var(--slate-50); text-align: center; }
.cut-upload.is-dragging { border-color: var(--color-primary); background: var(--color-tint); }
.cut-upload-icon { width: 2.5rem; height: 2.5rem; margin-bottom: .5rem; }
.cut-file-label { cursor: pointer; }
.cut-upload p, .cut-upload small { color: var(--color-muted); font-size: .8125rem; }
.cut-upload:has(input:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 4px; }
body.cutter-open { padding-bottom: 0; }
.cutter-open > .site-header, .cutter-open > .foot, .cutter-open > .mobile-nav, .cutter-open .cutter > .back-link, .cutter-open .product-heading { display: none; }
.cutter-open .cutter { width: 100%; max-width: var(--editor-max-width); padding: 0; }
.cut-workspace-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: var(--editor-header-height); padding: .25rem max(1rem, env(safe-area-inset-left)); border-bottom: 1px solid var(--color-line); }
.cut-workspace-header strong { font-size: .875rem; text-align: center; }
.cut-workspace-header > a { color: var(--color-text); }
.cut-workspace-header > a span { font-size: 1.125rem; font-weight: 750; letter-spacing: -.06em; }
.cut-workspace-header button { font-size: .8125rem; }
.cut-stage { display: flex; flex-direction: column; gap: .5rem; padding: .75rem 1rem 0; height: calc(100svh - var(--editor-header-height) - var(--editor-export-height) - env(safe-area-inset-bottom)); min-height: var(--editor-panel-width); }
.cut-player { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--slate-50); border-radius: .625rem; overflow: hidden; }
.cut-player video { display: block; width: 100%; height: 100%; object-fit: contain; }
.cut-transport { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; flex-shrink: 0; }
.cut-transport .primary-button { min-height: 2.75rem; padding: .5rem .875rem; font-size: .8125rem; }
.cut-transport .primary-button svg { fill: currentColor; stroke: none; width: 1rem; height: 1rem; }
.cut-step { display: inline-grid; place-items: center; width: 2.75rem; min-height: 2.75rem; flex-shrink: 0; padding: 0; border: 0; background: transparent; font-size: 1.5rem; }
.cut-step[aria-pressed="true"] { color: var(--color-muted); background: var(--slate-200); border-radius: .5rem; }
.cut-playback-info { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .25rem .5rem; font-size: .6875rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.cut-time { color: var(--color-text); }
.cut-time small { margin-left: .5rem; color: var(--color-muted); }
.cut-timeline-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; flex-shrink: 0; }
.cut-timeline-toolbar > div { display: flex; gap: .5rem; align-items: center; }
.cut-timeline-toolbar .text-button, .cut-snap-toggle { font-size: .75rem; }
.cut-snap-toggle { min-height: 2.75rem; padding: .375rem .5rem; border: 0; border-radius: .5rem; background: transparent; }
.cut-snap-toggle[aria-pressed="true"] { color: var(--color-primary); background: var(--color-tint); }
.cutter select { max-width: 100%; min-height: 2.75rem; padding: .25rem .375rem; border: 1px solid var(--color-line); border-radius: .5rem; background: var(--color-surface); font-size: .8125rem; }
.cut-timeline-scroll { overflow-x: auto; overscroll-behavior-x: contain; flex-shrink: 0; padding: 0 1.375rem .375rem; border: 1px solid var(--color-line); border-radius: .5rem; background: var(--slate-50); }
.cut-timeline { position: relative; width: 100%; height: 6.25rem; user-select: none; touch-action: pan-y; }
.cut-ruler { position: relative; height: 1.75rem; font-size: .625rem; font-variant-numeric: tabular-nums; color: var(--color-muted); }
.cut-ruler span { position: absolute; top: .375rem; transform: translateX(-50%); white-space: nowrap; }
.cut-ruler span:first-child { transform: none; }
.cut-ruler span:last-child { transform: translateX(-100%); }
.cut-filmstrip { position: absolute; inset: 1.75rem 0 .375rem; display: flex; background: var(--slate-200); overflow: hidden; border-radius: .25rem; }
.cut-filmstrip img { flex: 1; min-width: 0; width: 0; height: 100%; object-fit: cover; opacity: .55; }
.cut-overlays { position: absolute; inset: 1.75rem 0 .375rem; pointer-events: none; }
.cut-region { position: absolute; top: 0; bottom: 0; border: 1px solid var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); pointer-events: auto; cursor: grab; touch-action: none; }
.cut-region.is-selected { border-width: 3px; background: transparent; }
.cut-region:active { cursor: grabbing; }
.cut-region span { position: absolute; top: .125rem; left: .25rem; padding: 0 .25rem; border-radius: .25rem; background: var(--color-primary); color: var(--white); font-size: .6875rem; }
.cut-playhead-line { position: absolute; width: 2px; top: 1.5rem; bottom: 0; background: var(--color-text); pointer-events: none; z-index: 2; }
.cut-playhead-line.is-snapped { background: var(--color-primary); }
.cut-cursor-handle { position: absolute; z-index: 4; top: -.25rem; width: 2.75rem; height: 2.75rem; transform: translateX(-50%); border: 0; background: none; cursor: ew-resize; touch-action: none; }
.cut-cursor-handle span { display: block; width: .75rem; height: .75rem; margin: 1rem auto 0; background: var(--color-text); clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%); }
.cut-cursor-handle.is-snapped span { background: var(--color-primary); }
.cut-handle { position: absolute; z-index: 3; top: 1.75rem; bottom: .375rem; width: 2.75rem; padding: 0; border: 0; background: transparent; transform: translateX(-50%); cursor: ew-resize; touch-action: none; }
.cut-handle span { display: block; width: .625rem; height: 100%; margin-inline: auto; background: var(--color-primary); border: 2px solid var(--color-surface); border-radius: .25rem; box-shadow: 0 0 0 1px var(--color-primary); }
.cut-handle span::after { content: ""; position: absolute; width: 2px; height: .875rem; top: calc(50% - .4375rem); left: calc(50% - 1px); background: var(--white); }
.cut-settings { padding: 1rem 1rem 7rem; border-top: 1px solid var(--color-line); }
.cut-mode { display: flex; flex-wrap: wrap; gap: .25rem .75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-line); }
.cut-mode label { display: flex; align-items: center; gap: .375rem; min-height: 2.75rem; font-size: .875rem; cursor: pointer; }
.cut-mode input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--color-primary); }
.cut-clips-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-block: 1rem .5rem; }
.cut-clips-toolbar h2 { font-size: .875rem; }
.cut-clips { display: grid; gap: .75rem; }
.cut-clip { border: 1px solid var(--color-line); border-radius: .625rem; padding: .75rem; }
.cut-clip.is-selected:not(:only-child) { border-color: var(--color-primary); }
.cut-clip-top { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.cut-clip-select { min-height: 2.75rem; padding: .25rem 0; font-size: .8125rem; font-weight: 600; border: 0; background: none; }
.cut-clip-duration { margin-right: auto; padding-inline: .375rem; font-size: .6875rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.cut-icon-button { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; border: 0; border-radius: .375rem; background: transparent; }
.cut-clip:only-child .cut-clip-top, .cut-clip:only-child .cut-clip-play { display: none; }
.cut-boundaries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.cut-boundary { min-width: 0; }
.cut-boundary label { display: block; font-size: .75rem; color: var(--color-muted); margin-bottom: .25rem; }
.cut-value input { width: 100%; min-height: 2.75rem; padding: .5rem; border: 1px solid var(--color-line); border-radius: .375rem; background: var(--input-bg); font-variant-numeric: tabular-nums; }
.cut-value input[aria-invalid="true"] { border-color: var(--color-danger); }
.cut-boundary small { display: block; font-size: .625rem; color: var(--color-muted); margin-top: .25rem; font-variant-numeric: tabular-nums; }
.cut-fine { margin-top: .5rem; }
.cut-fine summary, .cut-about summary { min-height: 2.75rem; padding-block: .625rem; cursor: pointer; font-size: .75rem; color: var(--color-muted); }
.cut-fine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.cut-nudge { display: flex; gap: .5rem; }
.cut-nudge button { flex: 1; min-width: 0; min-height: 2.75rem; padding: .25rem; font-size: .75rem; border: 1px solid var(--color-line); border-radius: .375rem; background: var(--slate-50); }
.cut-set { width: 100%; font-size: .75rem; }
.cut-clip-play { width: 100%; min-height: 2.75rem; padding: .5rem; font-size: .8125rem; }
.cut-clip-play svg { fill: currentColor; stroke: none; width: 1rem; height: 1rem; }
.cut-edit-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem; }
.cut-edit-actions .secondary-button { min-height: 2.75rem; padding: .5rem .75rem; font-size: .8125rem; }
.cut-edit-actions .text-button { font-size: .8125rem; }
.cut-output-warning { color: var(--color-danger); font-size: .8125rem; }
.cut-about { margin-top: 1rem; border-top: 1px solid var(--color-line); overflow-wrap: anywhere; }
.cut-about strong, .cut-about p { display: block; margin-block: .5rem; font-size: .75rem; color: var(--color-muted); }
.cut-export-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding: .75rem max(1rem, env(safe-area-inset-left)) calc(.75rem + env(safe-area-inset-bottom)); background: var(--color-surface); border-top: 1px solid var(--color-line); }
.cut-export-bar > div { flex: 1; min-width: 0; }
.cut-export-bar strong { display: block; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.cut-export-bar p { color: var(--color-muted); font-size: .6875rem; }
.cut-export-bar .primary-button { min-height: 2.75rem; padding: .625rem 1rem; font-size: .875rem; }
.keyboard-open .cut-export-bar { visibility: hidden; }
.cut-loading { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 1rem; text-align: center; }
.cut-loading progress { width: min(100%, 20rem); height: .375rem; accent-color: var(--color-primary); }
.cut-exporting { justify-content: center; min-height: calc(100svh - var(--editor-header-height)); }
.cut-exporting h2 { font-size: 1.25rem; }
.cut-export-icon { width: 3rem; height: 3rem; color: var(--color-primary); }
.cut-result { padding: 1rem; }
.cut-result video { display: block; width: 100%; max-height: calc(100svh - 18rem); background: var(--slate-50); border-radius: .625rem; }
.cut-result-actions { display: flex; flex-direction: column; align-self: start; gap: .75rem; padding-block: 1.5rem; }
.cut-result h2 { font-size: 1.125rem; }
.cut-result-actions p { color: var(--color-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.editor-continue { display: flex; flex-direction: column; gap: .25rem; border-top: 1px solid var(--color-line); padding-top: 1rem; margin-top: .25rem; }
.editor-continue strong { font-size: .8125rem; }
.editor-continue button { text-align: start; min-height: 2.75rem; font-size: .8125rem; }
#editor-result-status:empty { display: none; }
.cutter .message:empty { display: none; }
.cutter .message:not(:empty) { padding: .75rem 1rem; color: var(--color-danger); background: var(--color-danger-bg); font-size: .875rem; }
.cutter-open #cut-message:not(:empty) { position: fixed; top: calc(var(--editor-header-height) + .5rem); left: 1rem; right: 1rem; z-index: 9; max-width: 40rem; margin-inline: auto; border-radius: .625rem; }
@media (min-width: 900px) {
  .cut-editor { display: grid; grid-template-columns: minmax(0, 1fr) var(--editor-panel-width); }
  .cut-stage { height: calc(100svh - var(--editor-header-height) - 5rem); min-height: 26rem; padding: 1.25rem 2rem .5rem; }
  .cut-settings { border-top: 0; border-left: 1px solid var(--color-line); padding: 1.25rem 1.25rem 7rem; }
  .cut-mode { flex-direction: column; gap: 0; }
  .cut-export-bar { max-width: var(--editor-max-width); margin-inline: auto; }
  .cut-export-bar .primary-button { min-width: 10rem; }
  .cut-export-bar p { display: inline; }
  .cut-playback-info { font-size: .75rem; }
  .cut-result { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; gap: 2rem; padding: 2rem; }
  .cut-result video { height: calc(100svh - 7.5rem); max-height: none; object-fit: contain; }
}
@media (max-width: 599px) {
  .cut-workspace-header > a span { display: none; }
}
@media (max-width: 359px) {
  .cut-workspace-header { padding-inline: .75rem; }
  .cut-stage { padding-inline: .75rem; }
  .cut-playback-info > span { display: none; }
  .cut-export-bar { padding-inline: .75rem; }
  .cut-export-bar p { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
  .cut-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: 2.75rem 1.25rem 6.75rem 2.75rem; gap: .375rem .75rem; height: auto; min-height: 0; }
  .cut-player { grid-column: 1; grid-row: 1 / 5; }
  .cut-transport, .cut-playback-info, .cut-timeline-scroll, .cut-timeline-toolbar { grid-column: 2; }
  .cut-transport { grid-row: 1; }
  .cut-playback-info { grid-row: 2; }
  .cut-timeline-scroll { grid-row: 3; }
  .cut-timeline-toolbar { grid-row: 4; }
}
body[data-page="voiceover"] #cut-start-handle,
body[data-page="voiceover"] #cut-end-handle,
body[data-page="voiceover"] #cut-undo,
body[data-page="voiceover"] #cut-snap-toggle { display: none; }
.voiceover-settings { display: grid; align-content: start; gap: 12px; min-width: 0; }
.voiceover-settings h2, .voiceover-settings p { margin: 0; }
.voiceover-check { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; cursor: pointer; }
.voiceover-check input { width: 1.125rem; height: 1.125rem; flex-shrink: 0; accent-color: var(--color-primary); }
body[data-page="voiceover"] #voiceover-reference-audio { width: 100%; }
.voiceover-reference-picker .sheet-body { display: grid; gap: .75rem; }
.voiceover-reference-picker .sheet-body p { margin: 0; }
.voiceover-reference-picker video { width: 100%; height: min(25dvh, 12rem); background: var(--color-text); border-radius: .75rem; object-fit: contain; }
.voiceover-reference-picker input[type="range"] { width: 100%; min-height: 2.75rem; accent-color: var(--color-primary); }
.voiceover-reference-picker .secondary-button { width: 100%; }
.voiceover-reference-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.voiceover-reference-sources button[aria-pressed="true"] { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-tint); }
#voiceover-reference-file-preview { width: 100%; }
#voiceover-reference-language-field { display: grid; gap: .375rem; }