@charset "UTF-8";
/* Shared desktop workspace tokens. Appearance never changes processed pixels. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  color-scheme: light;
  --page: #f1f3f7;
  --surface: #ffffff;
  --canvas: #e8ebf0;
  --surface-subtle: #f8f9fb;
  --surface-hover: #edf0f4;
  --ink: #202735;
  --muted: #647084;
  --line: #dce2ea;
  --line-strong: #b8c1ce;
  --accent: #5263e8;
  --accent-hover: #4051d2;
  --on-accent: #ffffff;
  --accent-soft: #eef0ff;
  --accent-line: #b8c0f6;
  --disabled-ink: #939cab;
  --disabled-bg: #f3f5f8;
  --disabled-line: #e2e7ee;
  --danger: #b42332;
  --danger-soft: #fff0f1;
  --warning: #87520b;
  --warning-soft: #fff7e8;
  --success: #246d45;
  --success-soft: #edf7f0;
  --checker: #edf0f4;
  --selection-fill: #5263e81a;
  --playhead: #20242c;
  --overlay: #17212f55;
  --floating-shadow: 0 4px 12px #17212f0a, 0 16px 48px #17212f1a;
  --panel-shadow: 0 4px 16px rgba(20, 30, 50, .04);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 4px;
  --radius-control: 8px;
  --radius-panel: 12px;
  --radius-dialog: 16px;
  --control-height: 36px;
  --top: 64px;
  background: var(--page);
  color: var(--ink);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #16181c;
  --surface: #202329;
  --canvas: #14171d;
  --surface-subtle: #252931;
  --surface-hover: #2e333d;
  --ink: #e6e8ec;
  --muted: #a1a8b3;
  --line: #343840;
  --line-strong: #626c7c;
  --accent: #9aa8ff;
  --accent-hover: #b0baff;
  --on-accent: #142033;
  --accent-soft: #2b3150;
  --accent-line: #525e93;
  --disabled-ink: #717b8d;
  --disabled-bg: #252932;
  --disabled-line: #303640;
  --danger: #ffa1ab;
  --danger-soft: #40282e;
  --warning: #efc67e;
  --warning-soft: #3b3224;
  --success: #9bd3ae;
  --success-soft: #23392e;
  --checker: #2b3038;
  --selection-fill: #9aa8ff22;
  --playhead: #e6e8ec;
  --overlay: #0c101aaa;
  --floating-shadow: 0 4px 12px #090d1626, 0 16px 48px #090d1666;
  --panel-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 1120px; font-size: 14px; line-height: 1.5; }
button, input, select { font: inherit; }
button, input, select, summary { -webkit-tap-highlight-color: transparent; }
button {
  appearance: none;
  min-height: var(--control-height); padding: 6px var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap;
}
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
button.secondary { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 500; }
button.quiet { background: transparent; border-color: transparent; }
button.icon-button { width: var(--control-height); padding: var(--space-1); font-size: 22px; line-height: 1; }
button.tiny { font-size: 12px; min-height: 28px; padding: var(--space-1) var(--space-2); }
button.danger { color: var(--danger); }
button:active:not(:disabled) { filter: brightness(.96); }
button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
button:disabled, input:disabled, select:disabled { opacity: 1; cursor: default; color: var(--disabled-ink); border-color: var(--disabled-line); background: var(--disabled-bg); }
button.quiet:disabled { background: transparent; border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--line-strong); }
  button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
  button.secondary:hover:not(:disabled), button[aria-pressed="true"]:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
  .help-link:hover, summary:hover { color: var(--ink); }
  .action-row:hover:not(.active) { background: var(--surface-subtle); }
  .drop-zone:hover, .drag-over { border-color: var(--accent); background: var(--accent-soft); }
}
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
::selection { background: var(--accent-soft); color: var(--ink); }
.hidden { display: none !important; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 500; }
input, select { min-height: var(--control-height); min-width: 0; max-width: 100%; padding: 6px var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-control); color: var(--ink); background: var(--surface); }
select { cursor: pointer; }
input[type="range"] { border: 0; padding: 0; accent-color: var(--accent); background: transparent; cursor: pointer; }
input[type="range"] { appearance: none; }
input[type="range"]::-moz-range-track { height: 4px; border-radius: var(--radius-sm); background: var(--line-strong); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--surface); border-radius: 50%; background: var(--muted); }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-sm); background: var(--line-strong); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 2px solid var(--surface); border-radius: 50%; background: var(--muted); }
input[type="range"]:focus-visible::-moz-range-thumb { background: var(--accent); }
input[type="range"]:focus-visible::-webkit-slider-thumb { background: var(--accent); }
input[type="range"]:disabled { background: transparent; cursor: default; }
input[type="range"]:disabled::-moz-range-track { background: var(--disabled-line); }
input[type="range"]:disabled::-webkit-slider-runnable-track { background: var(--disabled-line); }
input[type="range"]:disabled::-moz-range-thumb { background: var(--disabled-ink); }
input[type="range"]:disabled::-webkit-slider-thumb { background: var(--disabled-ink); }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; min-height: 0; margin: 0; flex-shrink: 0; }
input[type="color"] { padding: var(--space-1); width: 100%; cursor: pointer; }
label { display: flex; flex-direction: column; gap: var(--space-2); font-size: 14px; }
.check-label { flex-direction: row; align-items: center; }
.hint, .timeline-hint { font-size: 12px; line-height: 1.6; color: var(--muted); }
output, .position-text, .playback-time, .parameter-state, #selectionText { font-variant-numeric: tabular-nums; }
kbd { font: 11px/1.4 ui-monospace, monospace; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1px var(--space-1); margin-left: var(--space-1); }
.divider { width: 1px; height: 20px; background: var(--line); margin: 0 var(--space-1); flex-shrink: 0; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
.button-with-icon { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.section-title { display: inline-flex; align-items: center; gap: var(--space-2); }
.section-title .icon { width: 16px; height: 16px; color: var(--muted); }
.topbar { height: var(--top); padding: 0 var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 20; }
.brand { font-size: 21px; font-weight: 650; letter-spacing: -.35px; white-space: nowrap; }
.brand a { display: inline-flex; align-items: center; gap: var(--space-3); }
.brand-mark { display: block; width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; filter: brightness(0); }
[data-theme="dark"] .brand-mark { filter: brightness(0) invert(1); }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.header-actions .primary { min-width: 88px; margin-left: var(--space-2); }
.help-link { color: var(--muted); font-size: 12px; margin-right: var(--space-2); }
.theme-control { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-subtle); }
.theme-control button { min-height: 28px; padding: 2px var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-size: 12px; }
.theme-control button[aria-pressed="true"] { background: var(--surface); color: var(--ink); border-color: var(--line); }
.message-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); max-width: 1552px; margin: var(--space-3) var(--space-6) 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--danger-soft); color: var(--danger); }
.message-bar.info { background: var(--surface-subtle); color: var(--ink); }
.message-bar button { color: inherit; }
.workspace { max-width: 1600px; margin: 0 auto; padding: var(--space-6); }
.workspace-description { margin-bottom: var(--space-3); color: var(--muted); font-size: 12px; font-weight: 400; }
.workspace.has-video .workspace-description { display: none; }
.workspace-heading { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); min-width: 0; }
.workspace-heading h2 { max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-heading p { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.studio-grid { display: grid; grid-template-columns: 272px minmax(420px, 1fr) 224px; grid-template-areas: "parameters editor actions"; column-gap: var(--space-4); align-items: start; }
.editor-column { grid-area: editor; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-panel); }
.parameters, .action-card, .editor-column { box-shadow: var(--panel-shadow); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); min-width: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.count { font-size: 12px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--surface-hover); color: var(--muted); }
.parameters { grid-area: parameters; padding: var(--space-4); position: sticky; top: calc(var(--top) + var(--space-4)); max-height: calc(100dvh - 184px); min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.parameters > .section-heading { margin-bottom: 0; }
.parameter-section { padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.parameter-section:first-of-type { border-top: 0; }
.parameter-section:last-child { padding-bottom: 0; }
.parameter-section > summary { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.parameter-section > summary::-webkit-details-marker { display: none; }
.parameter-section > summary::after { content: ""; width: 6px; height: 6px; flex-shrink: 0; margin-left: auto; margin-right: 2px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); }
.parameter-section[open] > summary::after { transform: rotate(45deg) translateY(-2px); }
.parameter-state, .tool-group-heading span { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--surface-hover); color: var(--muted); font-size: 11px; font-weight: 400; white-space: nowrap; }
.parameter-state { margin-left: auto; }
.parameter-section > summary:has(.parameter-state)::after { margin-left: 0; }
.sampling-form, .background-controls, .detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
.wide { grid-column: 1 / -1; }
.parameter-section > .hint { margin-top: var(--space-2); }
.background-controls { grid-template-columns: 72px minmax(0, 1fr); align-items: end; }
.range-field { position: relative; }
.range-field output { position: absolute; right: 0; color: var(--muted); font-size: 12px; }
.range-field input { width: 100%; }
.detail-settings { margin-top: var(--space-6); }
.detail-grid { gap: var(--space-3); }
.detail-settings .detail-grid { display: flex; flex-direction: column; gap: var(--space-2); }
.detail-settings .detail-grid label { flex-direction: row; align-items: center; justify-content: space-between; font-size: 14px; }
.detail-settings .detail-grid .range-field { flex-wrap: wrap; }
.detail-settings .detail-grid .range-field input { flex-basis: 100%; }
.detail-settings .detail-grid .check-label { justify-content: flex-start; gap: var(--space-2); font-size: 12px; line-height: 1.6; }
.detail-settings .detail-grid select { width: 104px; }
.detail-grid label { font-size: 12px; }
.detail-grid select { width: 100%; }
.detail-grid .check-label { align-items: flex-start; }
.detail-grid .check-label input { margin-top: 2px; }
.details-settings { margin-top: var(--space-3); }
.details-settings summary, .export-advanced summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.settings-apply { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.settings-apply .hint { text-align: center; }
.draft-status { font-size: 12px; color: var(--warning); }
.preview-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-4); }
.preview-tools > .hint, .tool-group-heading, .wand-tolerance { flex-basis: 100%; }
.tool-group-heading { font-size: 14px; font-weight: 500; }
.tool-group-heading span { float: right; }
.preview-tools > button { flex: 1; padding: 6px var(--space-2); font-size: 12px; }
.wand-tolerance { position: relative; margin-top: var(--space-2); font-size: 12px; }
.wand-tolerance output { position: absolute; right: 0; color: var(--muted); }
.wand-tolerance input { width: 100%; }
.region-tools { margin-top: var(--space-6); }
.region-buttons { display: flex; gap: var(--space-2); }
.region-buttons button { flex: 1; padding: 6px var(--space-2); font-size: 12px; }
.region-form { margin-top: var(--space-3); }
.region-form > button { margin-top: var(--space-2); }
.region-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1); margin: var(--space-3) 0 var(--space-2); }
.preview-card { grid-area: preview; border-bottom: 0; border-radius: var(--radius-panel) var(--radius-panel) 0 0; overflow: hidden; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.preview-heading strong { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-switch { font-size: 12px; }
.checkerboard { background-color: var(--surface-subtle); background-image: linear-gradient(45deg, var(--checker) 25%, transparent 25%), linear-gradient(-45deg, var(--checker) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--checker) 75%), linear-gradient(-45deg, transparent 75%, var(--checker) 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
.preview-stage { height: clamp(320px, 36vh, 480px); position: relative; overflow: hidden; background: var(--canvas); }
.source-preview { position: absolute; inset: 11px; width: calc(100% - 22px); height: calc(100% - 22px); object-fit: contain; }
.preview-mat { position: absolute; pointer-events: none; box-shadow: 0 0 0 1px var(--line); }
#previewCanvas { position: relative; width: 100%; height: 100%; display: block; }
#previewCanvas.cleanup-tool { cursor: crosshair; touch-action: none; }
.preview-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6); text-align: center; }
.drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); width: min(420px, 100%); padding: var(--space-6); border: 1px dashed var(--line-strong); border-radius: var(--radius-panel); background: var(--surface-subtle); cursor: pointer; }
.drop-zone:focus-within, .drop-zone.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.upload-symbol { width: 48px; height: 48px; border-radius: var(--radius-panel); background: var(--accent-soft); color: var(--accent); margin-bottom: var(--space-1); }
.upload-symbol .icon { width: 28px; height: 28px; }
.import-copy strong { display: block; color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: .02em; }
.import-copy p { margin-top: var(--space-1); color: var(--muted); font-size: 13px; }
#chooseVideoButton { min-width: 128px; min-height: 40px; margin-top: var(--space-2); }
.drop-prompt, .import-limit { font-size: 12px; color: var(--muted); }
.import-limit { margin-top: var(--space-1); }
.uploading { pointer-events: none; }
.frame-badge, .pending-badge { position: absolute; left: var(--space-3); bottom: var(--space-3); max-width: calc(100% - 24px); padding: var(--space-1) var(--space-2); background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12px; pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-badge { bottom: auto; top: var(--space-3); color: var(--warning); background: var(--warning-soft); }
.preview-tool-hint { padding: var(--space-2) var(--space-4); background: var(--accent-soft); color: var(--ink); font-size: 12px; border-bottom: 1px solid var(--accent-line); }
.play-controls { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4) 0; }
.transport { display: flex; align-items: center; gap: var(--space-1); }
.transport > button { min-width: 32px; padding: var(--space-1) var(--space-2); font-size: 22px; }
.transport .play-button { min-width: 76px; font-size: 12px; }
.position-text, .playback-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.playback-time { margin-left: auto; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.position-slider { width: calc(100% - 32px); min-height: 16px; height: 16px; margin: var(--space-2) var(--space-4) var(--space-3); }
.action-card { grid-area: actions; align-self: stretch; padding: var(--space-4); display: flex; flex-direction: column; }
.action-list { display: flex; flex-direction: column; gap: var(--space-1); max-height: 480px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.action-row { display: flex; align-items: center; min-width: 0; border: 1px solid transparent; border-radius: var(--radius-control); }
.action-row.active { background: var(--accent-soft); border-color: var(--accent-line); }
.action-select { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; padding: var(--space-2) 6px; border: 0; background: transparent; text-align: left; white-space: normal; }
.action-thumbnail { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; color: var(--muted); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.action-thumbnail img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.action-copy { min-width: 0; }
.action-copy strong { display: block; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-copy small { display: block; margin-top: var(--space-1); color: var(--muted); white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; }
.action-more { border: 0; background: transparent; color: var(--muted); font-size: 20px; padding: 0 var(--space-1); min-width: 24px; }
.action-options { margin-top: auto; padding-top: var(--space-4); }
.action-options .check-label { padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: 12px; }
.actions-empty { padding: var(--space-8) 0; margin-top: var(--space-6); text-align: center; }
.empty-action-symbol { width: 44px; height: 44px; margin-bottom: var(--space-3); border-radius: var(--radius-panel); background: var(--surface-subtle); color: var(--muted); }
.empty-action-symbol .icon { width: 24px; height: 24px; }
.actions-empty strong { display: block; font-size: 13px; font-weight: 500; }
.actions-empty p { margin-top: var(--space-2); font-size: 12px; line-height: 1.8; color: var(--muted); }
.timeline-card { grid-area: timeline; padding: var(--space-4); border-top: 0; border-radius: 0 0 var(--radius-panel) var(--radius-panel); }
.timeline-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-4); margin-bottom: var(--space-3); }
.timeline-heading h2 { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; }
.timeline-heading h2 span { font-size: 12px; color: var(--muted); font-weight: 400; }
.timeline-heading > label { flex-direction: row; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--muted); }
.timeline-heading input { width: 80px; min-height: 20px; }
.timeline-viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-subtle); }
.timeline-track { height: 96px; position: relative; }
#timelineCanvas { height: 96px; position: sticky; left: 0; display: block; touch-action: none; }
.selection-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 40px; font-size: 12px; color: var(--muted); }
.edit-controls { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.edit-controls button, .frame-more summary { font-size: 12px; }
.timeline-hint { margin-top: var(--space-2); }
.frame-more { position: relative; margin-left: auto; }
.frame-more > summary { cursor: pointer; color: var(--muted); padding: var(--space-2); list-style: none; border-radius: var(--radius-control); }
.frame-more > summary::after { content: "⌄"; margin-left: var(--space-2); }
.frame-more-content { position: absolute; z-index: 30; right: 0; bottom: calc(100% + 8px); width: 240px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--floating-shadow); }
.frame-more-content button { width: 100%; text-align: left; border-color: transparent; }
.frame-more-content p { padding: var(--space-2); }
.context-menu { position: fixed; z-index: 60; width: 196px; padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--floating-shadow); }
.context-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; text-align: left; background: transparent; }
.context-menu button span { font-size: 12px; color: var(--muted); }
.context-menu button:focus { background: var(--surface-hover); }
.context-menu .danger:focus { background: var(--danger-soft); }
dialog { width: min(420px, calc(100vw - 48px)); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-dialog); background: var(--surface); color: var(--ink); box-shadow: var(--floating-shadow); }
dialog::backdrop { background: var(--overlay); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.dialog-heading h2 { font-size: 20px; }
dialog label { margin-top: var(--space-4); }
dialog .hint { margin-top: var(--space-2); }
#nameInput { width: 100%; margin-top: var(--space-2); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }
.export-drawer { position: fixed; inset: var(--top) 0 0 auto; margin: 0; width: 368px; height: calc(100dvh - var(--top)); max-height: calc(100dvh - var(--top)); border-radius: 0; border-width: 0 0 0 1px; overflow: auto; }
.format-options { border: 0; padding: 0; margin: var(--space-6) 0 0; }
.format-options legend { font-size: 14px; }
.format-options label { flex-direction: row; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
.export-advanced { border-top: 1px solid var(--line); padding-top: var(--space-4); margin-top: var(--space-4); }
.export-summary { background: var(--surface-subtle); border: 1px solid var(--line); border-radius: var(--radius-control); padding: var(--space-3); margin-top: var(--space-6); color: var(--muted); white-space: pre-line; line-height: 1.8; font-size: 12px; }
.export-result { background: var(--success-soft); color: var(--success); padding: var(--space-3); border-radius: var(--radius-control); margin-top: var(--space-3); font-size: 12px; }
#exportSubmitButton { width: 100%; margin-top: var(--space-4); }
#cancelExportButton { width: 100%; margin-top: var(--space-2); }
#exportProgress { overflow-wrap: anywhere; }
.pending-settings { border: 1px solid var(--line); background: var(--warning-soft); padding: var(--space-3); border-radius: var(--radius-control); font-size: 12px; }
.pending-settings strong { color: var(--warning); font-weight: 500; }
.pending-settings p { margin: var(--space-2) 0 var(--space-3); }
.pending-settings > div { display: flex; gap: var(--space-2); }
.pending-settings button { font-size: 12px; }
.download-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.download-list button { font-size: 12px; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.tool-guide { max-width: 1552px; margin: var(--space-4) auto var(--space-8); padding: var(--space-6) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8) 48px; font-size: 14px; scroll-margin-top: calc(var(--top) + 16px); }
.tool-guide > section { min-width: 0; scroll-margin-top: calc(var(--top) + 16px); }
.guide-intro, .guide-wide { grid-column: 1 / -1; }
.guide-intro > p { max-width: 960px; }
.tool-guide h2 { margin-bottom: var(--space-4); }
.tool-guide h3 { font-size: 14px; font-weight: 500; line-height: 1.7; }
.tool-guide p { color: var(--muted); line-height: 1.8; }
.guide-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); font-size: 12px; }
.guide-nav a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.guide-steps { display: grid; gap: var(--space-4); margin: 0; padding-left: var(--space-6); }
.guide-steps li { padding-left: var(--space-1); }
.guide-steps p, .guide-use-cases p, .guide-engine-grid p { margin-top: var(--space-2); }
.guide-use-cases { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.guide-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-control); }
.guide-format-table { width: 100%; border-collapse: collapse; text-align: left; line-height: 1.8; background: var(--surface); }
.guide-format-table th, .guide-format-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.guide-format-table th { font-weight: 500; }
.guide-format-table thead { background: var(--surface-subtle); }
.guide-format-table tbody th { width: 180px; }
.guide-format-table td { color: var(--muted); }
.guide-format-table tbody tr:last-child > * { border-bottom: 0; }
.guide-engine-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.tool-guide code { font-size: .9em; overflow-wrap: anywhere; }
.guide-faq details { border-top: 1px solid var(--line); padding: var(--space-3) 0; }
.guide-faq details:first-of-type { border-top: 0; padding-top: 0; }
.guide-faq summary { cursor: pointer; font-weight: 500; }
.guide-faq p { margin-top: var(--space-2); }
.noscript-note { margin: var(--space-4) var(--space-6); color: var(--warning); }
@media (max-width: 1600px) { .tool-guide { margin-left: var(--space-6); margin-right: var(--space-6); } }
@media (min-width: 1680px) { .workspace { max-width: 1760px; } .studio-grid { grid-template-columns: 288px minmax(420px, 1fr) 240px; } .preview-stage { height: min(44vh, 560px); } .tool-guide { max-width: 1712px; } }
/* Keep the frame commands visible on shorter desktop/laptop windows. */
@media (max-height: 850px) {
  .preview-stage { height: 220px; }
  .workspace:not(.has-video) .preview-stage { height: 250px; }
  .drop-zone { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-2); padding: var(--space-4) var(--space-6); text-align: left; }
  .upload-symbol { grid-column: 1; grid-row: 1; margin: 0; }
  .import-copy { grid-column: 2; }
  .import-copy strong { font-size: 18px; }
  #chooseVideoButton { grid-column: 2; justify-self: start; margin-top: var(--space-1); }
  .drop-prompt, .import-limit { grid-column: 2; }
  .import-limit { margin-top: 0; }
  .preview-heading { padding: var(--space-2) var(--space-4); }
  .play-controls { padding-top: var(--space-2); }
  .position-slider { margin-bottom: var(--space-2); }
  .timeline-card { padding: var(--space-3) var(--space-4); }
  .timeline-heading { padding-top: var(--space-3); margin-bottom: var(--space-2); }
  .timeline-track, #timelineCanvas { height: 88px; }
  .selection-row { min-height: 32px; }
}
.job-dialog { position: fixed; inset: 0; margin: auto; width: 384px; max-height: calc(100dvh - 48px); text-align: center; overflow: auto; }
.job-dialog h2 { font-size: 20px; font-weight: 600; margin: var(--space-2) 0; }
.job-dialog #jobText { font-size: 14px; line-height: 1.7; min-height: 24px; overflow-wrap: anywhere; }
.job-dialog progress { display: block; width: 100%; height: 4px; margin: var(--space-4) 0 0; border: 0; border-radius: var(--radius-sm); accent-color: var(--accent); background: var(--surface-hover); }
.job-dialog progress::-moz-progress-bar { background: var(--accent); }
.job-dialog progress::-webkit-progress-bar { background: var(--surface-hover); }
.job-dialog progress::-webkit-progress-value { background: var(--accent); }
.job-hint { color: var(--muted); font-size: 12px; margin: var(--space-4) 0 var(--space-6); }
.job-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
#jobElapsed { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pixel-loader { position: relative; width: 144px; height: 106px; margin: 0 auto var(--space-3); contain: layout paint; }
.pixel-frame { position: absolute; left: 38px; top: 16px; width: 68px; height: 68px; border: 1px solid var(--accent-line); border-radius: var(--radius-control); background: var(--accent-soft); }
.pixel-frame-back { transform: translate(9px, 8px) rotate(10deg); background: var(--surface); border-color: var(--line); }
.pixel-loader i { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; border-radius: var(--radius-sm); background: var(--accent); animation: pixel-assemble 2.8s cubic-bezier(.22, 1, .36, 1) infinite; animation-delay: var(--delay); }
.pixel-loader i:nth-of-type(3n) { opacity: .5; }
.pixel-spark { display: none; }
@keyframes pixel-assemble { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(-50deg) scale(.65); } 35%, 68% { opacity: 1; transform: translate(0, 0) rotate(0); } 94%, 100% { opacity: 0; transform: scale(.75); } }
.job-dialog.is-paused .pixel-loader * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .pixel-loader i { transform: none; opacity: .8; } }