style.css

:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Medium-gray surfaces with simple, flat tool selections. */
  --bg: #646464;
  --panel: #6f6f6f;
  --panel-tools: #6b6b6b;
  --panel-preview: #707070;
  --panel-timeline: #656565;
  --panel-settings: #707070;
  --field: #555555;
  --recess: #606060;
  --selection-edge: #a0a0a0;
  --line: #858585;
  --muted: #fafafa;
  --dim: #eeeeee;
  --accent: #7fb0e4;
  --control: #717171;
  --hover: #7b7b7b;
  --selected: #a5a5a5;
  --selected-text: #252525;
  --edge: #535353;
  --stage: #464646;
  --text: #ffffff;
  --header: #a7a7a7;
  /* Shared action controls; primary/secondary labels do not change the material. */
  --action-hover: #757575;
  --control-radius: 4px;
  --control-font-size: 13px;
  --control-font-weight: 500;
  --control-height: 38px;
  --switch-on: #78b8ee;
  --switch-on-hover: #8cc6f5;
  --switch-on-edge: #477da8;
  --switch-off: #595959;
  --switch-knob: #f5f5f5;
  --active-blue: #4c769b;
  --raised-shadow: inset 0 1px 0 #ffffff24, 0 1px 1px #00000024;
  --inset-shadow: inset 0 1px 2px #00000026;
  --pressed-shadow: inset 0 1px 2px #00000030;
  --panel-shadow: inset 0 1px 0 #ffffff18;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button { color: inherit; border: 0; }
button:disabled { cursor: default; opacity: .55; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
h1, h2, p { margin: 0; }
svg { flex-shrink: 0; }
input[type=number] { appearance: textfield; -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button { opacity: 0; }
input[type=number]:focus::-webkit-inner-spin-button { opacity: 1; }
summary::-webkit-details-marker { display: none; }
.app-shell { max-width: 1920px; margin: 0 auto; padding: 0 12px; }
.app-header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 12px; margin: 0 -12px 10px; background: var(--header); color: #292929; border-bottom: 1px solid var(--edge); }
.header-brand { display: flex; align-items: center; min-width: 0; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 600; letter-spacing: -.4px; white-space: nowrap; }
.brand-icon { display: inline-flex; color: #eeeeee; }
.brand-icon img { display: block; width: 34px; height: 34px; }
.header-hint { display: flex; align-items: flex-start; flex: 1; gap: 9px; min-width: 0; padding-left: 20px; border-left: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: #303030; }
.header-hint > [data-icon] { margin-top: 1px; }
.header-hint > #header-hint { min-width: 0; overflow-wrap: anywhere; }
.header-hint[data-tone=warning] { color: #292929; }
.header-actions { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; }
/* Raised actions share the icon buttons' surface and edge treatment. */
.btn, .fill-stop-add, .alignment-controls .text-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-height); padding: 9px 14px;
  background: var(--control); color: var(--text);
  border: 1px solid var(--edge); border-radius: var(--control-radius);
  font-size: var(--control-font-size); font-weight: var(--control-font-weight); line-height: 1.3;
  text-align: center; white-space: nowrap; box-shadow: var(--raised-shadow);
  transition: background .15s, border-color .15s;
}
.btn:hover:enabled, .fill-stop-add:hover:enabled, .alignment-controls .text-btn:hover:enabled {
  background: var(--action-hover); border-color: var(--selection-edge);
}
.btn:active:enabled, .fill-stop-add:active:enabled, .alignment-controls .text-btn:active:enabled {
  background: var(--recess); box-shadow: var(--pressed-shadow);
}
.btn:disabled, .fill-stop-add:disabled, .alignment-controls .text-btn:disabled {
  opacity: 1; color: #ffffff80; background: var(--control); box-shadow: none;
}
.btn.full, .fill-stop-add { width: 100%; }
.icon-btn { display: inline-flex; justify-content: center; align-items: center; background: var(--control); border: 1px solid var(--edge); border-radius: 4px; min-width: 34px; height: 34px; padding: 6px; color: var(--text); box-shadow: var(--raised-shadow); }
.icon-btn:hover:enabled { background: var(--hover); color: var(--text); }
.icon-btn[aria-pressed=true] { background: var(--active-blue); border-color: #6098d0; color: #ffffff; box-shadow: var(--pressed-shadow); }
.icon-btn:active:enabled { background: var(--selected); color: var(--selected-text); box-shadow: var(--pressed-shadow); }
.github-link { width: 40px; height: 40px; flex-shrink: 0; text-decoration: none; }
.github-link:hover { background: var(--hover); }
.github-link:active { background: var(--selected); color: var(--selected-text); box-shadow: var(--pressed-shadow); }
.text-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 0; color: var(--muted); background: transparent; font-size: 12px; }
.text-btn:hover:enabled { color: #ffffff; }
main { padding-top: 0; }
.workbench { display: grid; grid-template-columns: 264px minmax(0,1fr); gap: 8px; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--edge); border-radius: 4px; min-width: 0; }
.panel-title { font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: -.15px; color: var(--text); }
.controls-panel { grid-column: 1; grid-row: 1; padding: 16px 12px; background: var(--panel-tools); }
.controls-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 5px 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.mobile-preview-link { display: none; }
.tool-body { min-width: 0; }
.method-grid { display: flex; flex-direction: column; gap: 2px; padding: 3px; background: var(--recess); border: 1px solid var(--edge); border-radius: 5px; }
.method-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 12px; min-height: 43px; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 4px; }
.method-card:hover:enabled { background: var(--control); }
.method-card.selected { background: var(--selected); color: var(--selected-text); border-color: transparent; }
.method-card.selected .method-icon { color: inherit; }
.method-card.selected:hover:enabled { background: #b1b1b1; }
.method-icon { display: flex; align-items: center; justify-content: center; width: 25px; color: #eaeaea; flex-shrink: 0; }
.method-icon svg { width: 25px; height: 25px; stroke-width: 1.6; }
.method-card b { display: block; font-size: 14px; font-weight: 450; line-height: 1.3; }
.method-card small { display: none; }
.method-fields { border-top: 1px solid var(--line); margin: 19px 8px 0; padding-top: 19px; gap: 0 !important; }
.method-fields .field { margin-bottom: 18px; }
.method-fields #field-setting-speed { order: 4; }
.method-fields #field-setting-transition { order: 1; }
.method-fields #field-setting-curve { order: 2; }
.method-fields #field-setting-shift { order: 3; }
.method-fields > .field:not(.range-number-field) { display: grid; grid-template-columns: 1fr; gap: 9px; }
.field.range-number-field { display: grid; grid-template-columns: minmax(0,1fr) 88px; align-items: center; gap: 12px; }
.range-number-field > span { margin: 0 !important; color: #e3e3e3 !important; }
.range-number-field > input[type=range] { grid-column: 1/-1; margin: 4px 0 1px; }
.range-number-field .input-unit input { height: 36px; }
.method-about { margin: 0 8px !important; }
.method-detail { font-size: 12px; line-height: 1.65; color: var(--muted); }
.method-summary { margin: 12px 8px 0; color: var(--muted); font-size: 12px; line-height: 1.65; font-variant-numeric: tabular-nums; }
.layer-image-hint { margin: 10px 8px 14px; }
.layer-add-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
.layer-add-actions .btn { padding-inline: 8px; }
.layer-patch-actions { display: grid; gap: 8px; }
.layer-list { display: grid; gap: 7px; max-height: 360px; overflow-y: auto; padding: 3px; margin: -3px; }
.layer-item { padding: 8px; min-width: 0; border: 1px solid var(--edge); border-radius: 4px; background: var(--recess); }
.layer-item.selected { background: var(--control); border-color: var(--selection-edge); }
.layer-item.selected .layer-select small { color: var(--muted); }
.layer-item.muted .layer-select { opacity: .5; }
.layer-item-head { display: flex; align-items: center; gap: 5px; }
.layer-select { display: flex; align-items: center; gap: 9px; padding: 5px 2px; min-width: 0; flex: 1; color: #eeeeee; background: transparent; text-align: left; border-radius: 6px; }
.layer-select > span:last-child { min-width: 0; }
.layer-select b { display: block; font-size: 12px; font-weight: 450; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.layer-select small { display: block; margin-top: 3px; color: var(--dim); font-size: 10px; }
.layer-type { display: grid; place-items: center; width: 23px; flex-shrink: 0; font-size: 17px; }
.layer-visibility { flex-shrink: 0; font-size: 11px; }
.layer-item-actions { display: flex; align-items: center; gap: 6px; padding-top: 3px; }
.layer-item-actions .icon-btn { min-width: 27px; width: 27px; height: 27px; padding: 2px; font-size: 17px; }
.layer-item-actions .text-btn { margin-left: auto; font-size: 11px; }
.layer-item-actions .text-btn + .text-btn { margin-left: 4px; }
.layer-controls { border-top: 1px solid var(--line); margin: 18px 3px 0; padding-top: 17px; }
.layer-controls .fields.two { gap: 10px; }
.layer-controls .field { margin-bottom: 13px; }
.layer-controls .fields.two .field > span { font-size: 11px; }
.layer-controls .input-unit input { padding-inline: 10px 27px; }
.layer-controls .input-unit > span { right: 9px; }
.layer-controls textarea { width: 100%; min-height: 76px; resize: vertical; padding: 9px 11px; color: #eeeeee; background: var(--field); border: 1px solid var(--edge); border-radius: 4px; font-size: 13px; line-height: 1.5; }
.layer-font-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.layer-font-actions .btn { padding: 7px 6px; white-space: normal; text-align: center; }
.text-fill-editor { min-width: 0; margin: 16px 0 18px; padding: 12px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--recess); }
.fill-toolbar .field { margin-bottom: 10px; }
/* Gradients here visualize editable fill content and color values, not chrome. */
.fill-preview, .fill-stop-track, .fill-stop-swatch, .fill-stop-handle { background-color: #363636; background-image: var(--fill-preview,linear-gradient(#ffffff,#ffffff)), repeating-conic-gradient(#4b4b4b 0% 25%,#303030 0% 50%); background-size: auto,12px 12px; }
.fill-preview { height: 38px; margin-bottom: 12px; border: 1px solid #ffffff21; border-radius: 6px; }
.fill-stop-track { position: relative; height: 30px; margin: 8px 10px 21px; border: 1px solid #ffffff21; border-radius: 6px; touch-action: none; }
.fill-stop-handle { position: absolute; top: 100%; width: 22px; height: 24px; padding: 0; border: 2px solid #e8e8e8; border-radius: 6px; box-shadow: none; transform: translate(-50%,-50%); cursor: ew-resize; touch-action: none; }
.fill-stop-handle.selected { z-index: 1; outline: 2px solid #ffffff; outline-offset: 2px; }
.fill-stop-list { display: grid; gap: 5px; max-height: 215px; overflow-y: auto; padding: 3px; margin: 0 -3px 10px; }
.fill-stop-row { display: grid; grid-template-columns: minmax(0,1fr) 80px 26px; align-items: center; gap: 5px; min-width: 0; padding: 3px; border: 1px solid transparent; border-radius: 6px; }
.fill-stop-row:has(.fill-stop-select[aria-pressed=true]) { background: var(--control); border-color: transparent; }
.fill-stop-select { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 32px; padding: 4px; background: transparent; border-radius: 6px; text-align: left; font-size: 11px; }
.fill-stop-select > span:last-child { overflow-wrap: anywhere; }
.fill-stop-swatch { width: 17px; height: 17px; flex-shrink: 0; border: 1px solid #ffffff40; border-radius: 4px; }
.fill-stop-position { position: relative; min-width: 0; }
.fill-stop-position input { width: 100%; height: 33px; padding: 7px 16px 7px 6px; border: 1px solid var(--edge); border-radius: 6px; background: var(--field); color: inherit; font-size: 11px; }
.fill-stop-position input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.fill-stop-position input::-webkit-inner-spin-button, .fill-stop-position input::-webkit-outer-spin-button { display: none; appearance: none; margin: 0; }
.fill-stop-position > span { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); color: var(--dim); font-size: 10px; pointer-events: none; }
.fill-stop-remove { min-width: 26px; height: 32px; padding: 0; background: transparent; border-radius: 6px; color: var(--muted); font-size: 19px; }
.fill-stop-select:hover:enabled, .fill-stop-remove:hover:enabled { background: var(--hover); }

.fill-geometry { margin-top: 12px; }
.fill-picker { margin-top: 14px; }
.fill-picker-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.fill-sv { position: relative; width: 100%; aspect-ratio: 1.65; border: 1px solid #ffffff29; border-radius: 6px; cursor: crosshair; touch-action: none; }
.fill-sv-white, .fill-sv-black { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.fill-sv-white { background: linear-gradient(to right,#ffffff,transparent); }
.fill-sv-black { background: linear-gradient(to top,#000000,transparent); }
.fill-sv-handle { position: absolute; width: 14px; height: 14px; border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 1px #000000bb; transform: translate(-50%,-50%); pointer-events: none; }
.fill-sv:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fill-range-row { margin-top: 12px; }
.fill-range-row > label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; }
.fill-range-row output { font-variant-numeric: tabular-nums; color: #e5e5e5; }
.fill-range-row input[type=range] { height: 10px; margin: 12px 0 4px; background-image: var(--fill-range-background,linear-gradient(#4d4d4d,#4d4d4d)), repeating-conic-gradient(#4b4b4b 0% 25%,#303030 0% 50%); background-size: auto,12px 12px; }
.fill-range-row input[type=range]::-webkit-slider-runnable-track { height: 10px; border: 0; border-radius: 4px; background: transparent; }
.fill-range-row input[type=range]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -3px; border: 0; border-radius: 50%; background: #f3f3f3; box-shadow: none; }
.fill-range-row input[type=range]::-moz-range-track { height: 10px; border: 0; border-radius: 4px; background: transparent; }
.fill-range-row input[type=range]::-moz-range-progress { height: 10px; border-radius: 4px; background: transparent; }
.fill-range-row input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #f3f3f3; box-shadow: none; }
.fill-channel-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 7px; margin-top: 13px; }
.fill-channel-grid > .field:first-child { grid-column: 1/-1; }
.fill-channel-grid .field { margin-bottom: 10px; }
.fill-channel-grid input { padding-inline: 7px; font-size: 12px; font-variant-numeric: tabular-nums; }
.text-fill-editor input:disabled, .text-fill-editor select:disabled, .fill-sv[aria-disabled=true] { opacity: .5; }
.layer-animation-speed { margin-bottom: 17px; }
.layer-animation-speed .range-field { margin: 12px 0 6px; }
.layer-speed-summary { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.layer-motion-help { margin: 14px 3px 0; }
.preview-panel { grid-column: 2; grid-row: 1; padding: 10px 12px 8px; overflow: hidden; background: var(--panel-preview); }
.preview-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-height: 38px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; align-items: stretch; width: 100%; min-width: 0; gap: 3px; padding: 3px; background: var(--recess); border: 1px solid var(--edge); border-radius: 5px; }
.tabs button { display: inline-flex; flex: 1; min-width: 0; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; padding: 8px 12px; background: transparent; border: 1px solid transparent; border-radius: 4px; font-size: 13px; color: var(--muted); }
.tabs button:hover { color: #ffffff; background: var(--control); }
.tabs button.active { color: var(--selected-text); background: var(--selected); border-color: transparent; }
.preview-stage { height: clamp(390px,36.5vw,590px); position: relative; background: var(--stage); display: flex; align-items: center; justify-content: center; border-radius: 2px; overflow: hidden; outline: 1px solid var(--edge); outline-offset: -1px; }
.preview-stage canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; aspect-ratio: var(--preview-aspect); }
.preview-stage canvas[data-editable="true"] { cursor: grab; touch-action: none; }
.preview-stage canvas[data-dragging="true"] { cursor: grabbing; }
.preview-stage canvas:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }
.preview-transform { position: absolute; pointer-events: none; z-index: 2; }
.preview-selection { display: block; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.preview-selection polygon { fill: transparent; stroke: #ffffff; stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 0 #000000); pointer-events: auto; cursor: grab; touch-action: none; }
.preview-resize-handle, .preview-rotate-handle { position: absolute; width: 44px; height: 44px; padding: 0; transform: translate(-50%,-50%); background: transparent; pointer-events: auto; touch-action: none; }
.preview-resize-handle::after { content: ""; position: absolute; inset: 16px; border: 2px solid #ffffff; border-radius: 2px; background: #2a2a2a; box-shadow: none; }
.preview-resize-handle:focus-visible, .preview-rotate-handle:focus-visible { outline: 2px solid #ffffff; outline-offset: -8px; border-radius: 6px; }
.preview-rotate-handle { display: grid; place-items: center; cursor: grab; color: #ffffff; }
.preview-rotate-handle svg { opacity: 0; filter: drop-shadow(0 1px 0 #000000); transition: opacity .12s; }
.preview-rotate-handle:hover svg, .preview-rotate-handle:focus-visible svg, .preview-stage:has(canvas[data-dragging="true"]) .preview-rotate-handle svg { opacity: 1; }
.preview-output-frame { position: absolute; border: 1px dashed #aaaaaa80; pointer-events: none; }
.preview-output-frame span { position: absolute; top: 4px; left: 5px; padding: 2px 4px; font-size: 9px; color: #f2f2f2; background: #353535; border-radius: 3px; white-space: nowrap; }
.preview-view-controls { display: flex; align-items: center; gap: 3px; margin-left: auto; padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--recess); }
.preview-view-controls .icon-btn { width: 30px; height: 30px; }
.preview-view-controls output { min-width: 38px; text-align: center; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.preview-view-controls .text-btn { padding: 5px 8px; font-size: 11px; }
@media (hover: none) { .preview-rotate-handle svg { opacity: .8; } }
.preview-framing { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 11px 5px 0; }
.preview-framing .micro { flex-basis: 100%; margin: 0; }
.preview-tag { position: absolute; left: 12px; top: 12px; z-index: 1; background: var(--field); border: 1px solid var(--line); border-radius: 3px; padding: 5px 9px; color: #eeeeee; font-size: 9px; letter-spacing: .7px; font-weight: 500; }
.decoder { width: 1px; height: 1px; position: absolute; opacity: 0; pointer-events: none; bottom: 0; }
.aspect-guides { position: absolute; border: 1px solid var(--switch-on); border-radius: 0; z-index: 3; box-sizing: border-box; pointer-events: none; }
.aspect-guides span { position: absolute; bottom: 5px; left: 5px; padding: 3px 5px; color: #ffffff; background: #353535; font-size: 10px; white-space: nowrap; }
.preview-stage:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.preview-stage:fullscreen canvas { height: 100%; max-height: 100%; width: auto; }
.wallpaper-preview-controls { margin: 0 0 13px; }
.wallpaper-screen-options { display: flex; width: max-content; max-width: 100%; }
.wallpaper-screen-options.segmented button { padding: 8px 12px; font-size: 12px; white-space: normal; }
.wallpaper-preview-note { margin: 7px 3px 0; line-height: 1.5; }
.wallpaper-device, .wallpaper-display { display: contents; }
.wallpaper-screen-chrome { display: none; }
.wallpaper-screen-active .wallpaper-device {
  position: relative; display: block; width: calc(var(--wallpaper-width) + 14px);
  flex-shrink: 0; border: 7px solid #090909; border-radius: calc(var(--wallpaper-unit) * 13);
  background: #090909; box-shadow: none;
}
.wallpaper-screen-active .wallpaper-display {
  position: relative; display: block; width: 100%; overflow: hidden;
  border-radius: calc(var(--wallpaper-unit) * 10); background: #151515;
}
.wallpaper-screen-active .wallpaper-display > #preview-canvas,
.wallpaper-screen-active .wallpaper-poster {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  max-width: none; max-height: none; object-fit: cover;
}
.wallpaper-screen-active .wallpaper-live-hidden { visibility: hidden; }
.wallpaper-screen-active .wallpaper-screen-chrome {
  position: absolute; inset: 0; display: block; z-index: 4; pointer-events: none;
  color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-shadow: 0 1px 0 #000000;
}
.wallpaper-screen-active .aspect-guides { z-index: 3; }
.wallpaper-status { position: absolute; top: 2.6%; left: 8%; right: 8%; display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--wallpaper-unit) * 3.6); font-weight: 600; }
.wallpaper-status-time { visibility: hidden; }
[data-wallpaper-screen="home"] .wallpaper-status-time { visibility: visible; }
.wallpaper-status-icons { display: flex; align-items: center; gap: calc(var(--wallpaper-unit) * 1.4); }
.wallpaper-signal { display: block; width: calc(var(--wallpaper-unit) * 4.6); height: calc(var(--wallpaper-unit) * 2.8); background: linear-gradient(to top, #ffffff 33%, transparent 33%) 0 100% / 15% 100%, linear-gradient(to top, #ffffff 55%, transparent 55%) 28% 100% / 15% 100%, linear-gradient(to top, #ffffff 77%, transparent 77%) 58% 100% / 15% 100%, linear-gradient(#ffffff, #ffffff) 88% 100% / 15% 100%; background-repeat: no-repeat; }
.wallpaper-battery { display: block; width: calc(var(--wallpaper-unit) * 6); height: calc(var(--wallpaper-unit) * 2.8); border: 1px solid #ffffff; border-radius: calc(var(--wallpaper-unit) * .7); background: linear-gradient(to right, #ffffff 75%, transparent 75%); }
.wallpaper-camera-cutout { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); background: #090909; }
[data-device="notch"] .wallpaper-camera-cutout { top: -.2%; width: 42%; height: 4.7%; border-radius: 0 0 calc(var(--wallpaper-unit) * 4) calc(var(--wallpaper-unit) * 4); }
[data-device="island"] .wallpaper-camera-cutout { top: 1.4%; width: 29%; height: 3.3%; border-radius: 999px; }
.wallpaper-date { position: absolute; top: 9.5%; left: 0; right: 0; text-align: center; font-size: calc(var(--wallpaper-unit) * 4.3); font-weight: 500; }
.wallpaper-clock { position: absolute; top: 12%; left: 0; right: 0; text-align: center; font-size: calc(var(--wallpaper-unit) * 24); line-height: 1.1; letter-spacing: calc(var(--wallpaper-unit) * -.8); font-weight: 600; }
.wallpaper-lock-actions { position: absolute; bottom: 7%; left: 11%; right: 11%; display: flex; justify-content: space-between; }
.wallpaper-lock-actions > span { display: grid; place-items: center; width: calc(var(--wallpaper-unit) * 12); height: calc(var(--wallpaper-unit) * 12); border-radius: 50%; background: #1b1b1b66; }
.wallpaper-lock-actions svg { width: 45%; height: 45%; }
.wallpaper-home-indicator { position: absolute; bottom: 1.8%; width: 34%; height: calc(var(--wallpaper-unit) * 1.2); left: 33%; border-radius: 999px; background: #ffffff; box-shadow: none; }
.wallpaper-home-ui { display: none; }
[data-wallpaper-screen="home"] .wallpaper-lock-ui { display: none; }
[data-wallpaper-screen="home"] .wallpaper-home-ui { display: block; }
.wallpaper-app-grid { position: absolute; top: 9%; left: 8%; right: 8%; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: 7%; row-gap: calc(var(--wallpaper-unit) * 7); }
.wallpaper-app { min-width: 0; text-align: center; }
.wallpaper-app > span { display: grid; place-items: center; aspect-ratio: 1; border-radius: calc(var(--wallpaper-unit) * 3.3); background: var(--wallpaper-app-color); box-shadow: none; }
.wallpaper-app svg { width: 59%; height: 59%; }
.wallpaper-app small { display: block; margin-top: calc(var(--wallpaper-unit) * 1.3); font-size: calc(var(--wallpaper-unit) * 2.8); font-weight: 500; }
.wallpaper-dock { position: absolute; bottom: 5%; left: 5%; right: 5%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7%; padding: 3.5%; background: #c1c1c14f; border-radius: calc(var(--wallpaper-unit) * 7); }
.wallpaper-screen-active .wallpaper-device[data-device="button"] { padding-top: calc(var(--wallpaper-unit) * 10); padding-bottom: calc(var(--wallpaper-unit) * 16); border-radius: calc(var(--wallpaper-unit) * 11); }
[data-device="button"] .wallpaper-display { border-radius: calc(var(--wallpaper-unit) * 1.5); }
[data-device="button"] .wallpaper-camera-cutout, [data-device="button"] .wallpaper-home-indicator { display: none; }
.wallpaper-screen-active [data-device="button"]::before { content: ""; position: absolute; top: calc(var(--wallpaper-unit) * 3); left: 43%; width: 14%; height: calc(var(--wallpaper-unit) * 1.3); background: #383838; border-radius: 999px; }
.wallpaper-screen-active [data-device="button"]::after { content: ""; position: absolute; bottom: calc(var(--wallpaper-unit) * 2); left: 43%; width: calc(var(--wallpaper-unit) * 14); height: calc(var(--wallpaper-unit) * 14); border: 1px solid #4a4a4a; border-radius: 50%; }
.transport { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px; padding: 13px 0 3px; min-height: 72px; }
.segmented { display: inline-flex; align-items: center; background: var(--recess); border: 1px solid var(--edge); border-radius: 4px; min-width: 0; padding: 2px; gap: 2px; }
.segmented button { display: inline-flex; align-items: center; justify-content: center; flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 3px; padding: 9px 12px; background: transparent; color: var(--muted); white-space: nowrap; font-size: 12px; line-height: 1.2; }
.segmented button:hover:enabled { color: #ffffff; background: var(--control); }
.segmented button.active { color: var(--selected-text); background: var(--selected); border-color: transparent; }
.tabs button.active:hover:enabled, .segmented button.active:hover:enabled { background: #b1b1b1; color: var(--selected-text); }
.preview-mode button { padding: 10px 15px; }
.playback-controls { display: flex; justify-content: center; align-items: center; gap: 15px; }
.play-btn { border-radius: 5px; width: 46px; height: 40px; display: grid; place-items: center; flex-shrink: 0; background: var(--control); color: #efefef; border: 1px solid var(--selection-edge); }
.play-btn:hover:enabled { background: var(--hover); }
.play-btn svg { width: 23px; height: 23px; }
.transport-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.1px; }
.transport-options { display: flex; align-items: center; gap: 5px; }
.preview-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 29px; }
.preview-foot > span { display: flex; gap: 6px; align-items: center; font-size: 10px; color: var(--dim); }
.preview-foot > div { display: flex; gap: 4px; }
.preview-foot .icon-btn { width: 29px; min-width: 29px; height: 29px; }
.fields { display: grid; gap: 12px; }
.fields.two { grid-template-columns: 1fr 1fr; }
.field { display: block; margin-bottom: 14px; min-width: 0; font-size: 13px; }
.field > span { display: block; color: var(--muted); margin-bottom: 8px; font-weight: 400; }
.field input, .field select { width: 100%; height: 39px; padding: 8px 12px; border: 1px solid var(--edge); background: var(--field); color: var(--text); border-radius: 4px; min-width: 0; font-size: 13px; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23dadce0' fill='none' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 15px; }
.field select option { background: var(--field); color: var(--text); }
.field input[type=color] { padding: 5px; }
.input-unit { position: relative; min-width: 0; }
.input-unit > span { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 12px; color: var(--dim); }
.input-unit input { padding-right: 30px; font-variant-numeric: tabular-nums; }
.range-field { display: block; margin: 16px 0; }
.range-field > span { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.range-field b { font-weight: 400; color: #ececec; }
input[type=range] { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border: 0; border-radius: 4px; background: #525252; accent-color: var(--accent); cursor: pointer; padding: 0; }
.range-field input { margin: 14px 0 4px; }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #adadad; border: 1px solid #454545; box-shadow: none; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #adadad; border: 1px solid #454545; }
input[type=range]::-moz-range-progress { background: #8d8d8d; border-radius: 4px; }
.micro { margin: 7px 0 10px; font-size: 11px; line-height: 1.6; color: var(--dim); }
.disclosure { border-top: 1px solid var(--line); margin-top: 15px; }
.disclosure > summary { display: flex; align-items: center; gap: 8px; padding: 13px 0 3px; font-size: 12px; color: var(--muted); list-style: none; }
.disclosure > summary:after { content: "+"; margin-left: auto; color: var(--dim); font-size: 16px; }
.disclosure[open] > summary:after { content: "−"; }
.disclosure-content { margin-top: 14px; }
.toggle-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; color: #e9e9e9; font-size: 13px; cursor: pointer; min-height: 42px; }
.toggle-row > span:first-child { flex: 1; }
.toggle-row small { display: block; color: var(--dim); font-size: 10px; margin-top: 5px; line-height: 1.5; }
.toggle-row input { position: absolute; right: 0; opacity: 0; width: 39px; height: 23px; margin: 0; }
.switch { width: 39px; height: 23px; border-radius: 12px; flex-shrink: 0; background: var(--switch-off); transition: background .15s; pointer-events: none; border: 1px solid var(--edge); box-shadow: var(--inset-shadow); }
.switch:after { content: ""; display: block; width: 17px; height: 17px; border-radius: 50%; background: #dddddd; margin: 2px; transition: transform .15s; box-shadow: 0 1px 2px #00000040; }
.toggle-row input:checked + .switch { background: var(--switch-on); border-color: var(--switch-on-edge); box-shadow: none; }
.toggle-row input:checked + .switch:after { transform: translateX(16px); background: var(--switch-knob); }
.toggle-row:hover input:enabled:checked + .switch { background: var(--switch-on-hover); }
.toggle-row:hover input:enabled:not(:checked) + .switch { background: var(--recess); }
.toggle-row input:disabled + .switch { opacity: .5; }
.toggle-row:has(input:disabled) { cursor: default; }
.toggle-row input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 3px; }
.export-panel { grid-column: 1/-1; grid-row: 3; padding: 22px; background: var(--panel-settings); }
.export-title { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.format-badge { color: var(--muted); font-size: 10px; border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; }
.export-panel > fieldset { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px 24px; align-items: start; }
.wallpaper-destination { grid-column: 1/-1; max-width: 430px; width: 100%; }
.wallpaper-settings { grid-column: 1/-1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px 24px; padding: 18px 0; border-block: 1px solid var(--line); }
.wallpaper-settings .range-field { margin: 0; }
.wallpaper-settings .range-field > span { gap: 10px; }
.wallpaper-settings .range-field b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wallpaper-settings .wallpaper-duration-note { grid-column: 1/3; }
.wallpaper-install-guide { grid-column: 3/5; margin: 0; border-top: 0; }
.wallpaper-install-guide > summary { padding-top: 0; }
.wallpaper-install-guide p + p { margin-top: 10px; }
.wallpaper-photo-actions .btn { width: 100%; }
.control-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #e9e9e9; margin-bottom: 9px; }
.output-aspect .segmented { display: flex; width: 100%; }
.output-aspect .aspect-options { display: grid; grid-template-columns: 1.35fr repeat(3,.8fr) 1.25fr; }
.aspect-options button { padding: 9px 2px; font-size: 11px; }
.output-aspect #dimension-fields { margin-top: 14px; gap: 12px; }
.output-aspect #dimension-fields .field { margin-bottom: 0; }
.dimension-note { color: var(--dim); font-size: 10px; margin-top: 8px; }
.dimension-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; margin: 10px 2px 0; }
#destination-label { color: var(--dim); font-size: 10px; }
.format-fields { gap: 0; }
.format-fields .field { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,142px); align-items: center; gap: 12px; margin-bottom: 10px; }
.format-fields .field:last-child { margin-bottom: 0; }
.format-fields .field > span { margin-bottom: 0; color: #e2e2e2; }
.format-fields #field-setting-format { order: 1; }
.format-fields #field-setting-fps { order: 2; }
.format-fields .field select { border-radius: 4px; font-size: 12px; }
.audio-box { padding: 0; }
#field-audio-strip small { display: none; }
.output-settings { grid-column: 1/-1; border-top: 1px solid var(--line); margin: 0; padding-top: 14px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 24px; align-items: start; }
#quality-field { grid-column: 1; grid-row: 1; }
.output-settings > #motion-fields { grid-column: 2; grid-row: 1; }
.output-settings > details { grid-column: 3; grid-row: 1; margin-top: 0; border-top: 0; }
#output-settings[data-format=gif] { display: block; }
.output-settings > details > summary { padding-top: 0; min-height: 24px; }
.preset-hint { color: var(--dim); font-size: 11px; line-height: 1.5; margin: -5px 0 15px; }
.export-footer { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.export-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: min(100%, 460px); min-width: 0; }
.output-summary { order: 0; min-width: 0; }
.output-summary > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.output-summary div > span { color: #e9e9e9; font-size: 13px; }
.output-summary b { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.output-summary b small { font-size: 13px; font-weight: 450; margin-left: 4px; }
.output-summary > span { display: block; font-size: 10px; color: var(--dim); margin-top: 5px; overflow-wrap: anywhere; }
.export-valid { display: flex; align-items: center; gap: 5px; margin: 0; color: var(--muted); font-size: 10px; order: 1; }
.validation { margin: 10px 0; padding: 11px; background: var(--recess); border: 1px solid var(--selection-edge); color: var(--text); border-radius: 6px; font-size: 11px; line-height: 1.5; box-shadow: var(--inset-shadow); }
.export-actions .validation { order: 2; margin: 0; }
.export-actions #long-loop-warning { order: 3; margin: 0; }
.validation p + p { margin-top: 6px; }
.validation .text-btn { color: #e5e5e5; font-size: 11px; justify-content: flex-start; text-align: left; margin-top: 7px; }
.export-btn { min-height: 44px; order: 4; margin: 0; }
.play-btn .spin { display: inline-flex; }
.download-result { display: flex; gap: 10px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line); color: #d7d7d7; order: 5; }
.download-result b { display: block; font-size: 12px; font-weight: 500; }
.download-result #download-meta { display: block; font-size: 10px; color: var(--dim); margin: 5px 0; }
.timeline-fieldset { grid-column: 1/-1; grid-row: 2; min-width: 0; }
.timeline-panel { padding: 17px 21px 16px; background: var(--panel-timeline); }
.timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; min-width: 0; }
.source-meta { display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--dim); font-size: 11px; }
.source-meta > span { white-space: nowrap; }
.file-name { color: #ededed; font-size: 14px; font-weight: 500; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.timeline-actions { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
#range-duration { color: var(--dim); font-size: 11px; }
.history-controls { display: flex; gap: 0; border-right: 1px solid var(--line); padding-right: 8px; }
.timeline-actions .text-btn { font-size: 11px; }
.timeline-actions .text-btn > span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.timeline-caption { margin: 0 0 15px; color: var(--muted); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.timeline-result-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 15px; color: var(--muted); font-size: 11px; }
.timeline-result-summary > span { display: inline-flex; align-items: center; gap: 9px; }
.timeline-result-summary b { color: #ededed; font-size: 13px; font-weight: 450; font-variant-numeric: tabular-nums; }
.timeline-result-summary small { margin-left: 4px; font-size: 11px; font-weight: 400; }
.ruler-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim); font-variant-numeric: tabular-nums; margin-bottom: 7px; }
.filmstrip { position: relative; height: 84px; border-radius: 3px; background: var(--stage); border: 1px solid var(--edge); isolation: isolate; touch-action: none; }
.filmstrip-images { display: flex; overflow: hidden; height: 100%; border-radius: 2px; }
.filmstrip-images > img, .filmstrip-images > span { display: block; width: 10%; flex: 0 0 10%; height: 100%; object-fit: cover; border-right: 1px solid #ffffff15; }
.selection-shade { position: absolute; inset-block: 0; background: #13131386; pointer-events: none; z-index: 1; }
.selection-shade.left { left: 0; border-radius: 6px 0 0 6px; }
.selection-shade.right { right: 0; border-radius: 0 6px 6px 0; }
.selection-outline { position: absolute; inset-block: -1px; border: 2px solid #e5e5e5; border-radius: 3px; pointer-events: none; z-index: 2; }
.trim-handle { position: absolute; width: 18px; height: 49px; top: 50%; transform: translate(-50%,-50%); border-radius: 4px; background: #ebebeb; color: #363636; z-index: 4; cursor: ew-resize; padding: 0; display: grid; place-items: center; touch-action: none; }
.trim-handle > span { width: 3px; height: 18px; background: #565656; border-radius: 3px; }
.playhead { position: absolute; top: -9px; bottom: 0; width: 2px; background: #f6f6f6; transform: translateX(-50%); z-index: 3; cursor: ew-resize; touch-action: none; }
.playhead:before { content: ""; position: absolute; top: -9px; left: -5px; width: 12px; height: 14px; background: #f6f6f6; clip-path: polygon(0 0,100% 0,100% 45%,50% 100%,0 45%); border-radius: 3px; }
.trim-fields { display: flex; align-items: center; gap: 22px; margin-top: 15px; }
.trim-fields .field { display: flex; align-items: center; gap: 12px; margin: 0; flex: 0 1 204px; min-width: 0; }
.trim-fields .field > span { white-space: nowrap; color: #dfdfdf; font-size: 12px; margin: 0; }
.trim-fields .input-unit { flex: 1; }
.trim-fields .field input { height: 40px; border-radius: 6px; font-size: 13px; }
.range-summary { display: flex; align-items: center; gap: 20px; padding: 3px 20px; border-left: 1px solid var(--line); }
.range-summary > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.range-summary b { font-size: 13px; font-weight: 450; font-variant-numeric: tabular-nums; white-space: nowrap; }
.range-summary small { font-size: 11px; font-weight: 400; color: var(--muted); }
kbd { background: #ffffff07; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; font-size: 9px; min-width: 17px; padding: 2px 4px; text-align: center; font-family: inherit; }
.panel-copy { color: var(--muted); font-size: 12px; line-height: 1.7; padding: 0 5px; margin-bottom: 20px; }
#panel-find, #panel-inspect { padding: 0 6px; }
#panel-find .fields { gap: 10px; }
#panel-find .field { font-size: 11px; }
#panel-find .field input { padding-left: 9px; }
#panel-find .btn, #panel-inspect .btn { padding-inline: 10px; }
.candidate-section { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.candidate-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.candidate-head b { font-size: 12px; font-weight: 500; }
.candidate-head .text-btn { font-size: 10px; }
.candidates { max-height: 340px; overflow: auto; scrollbar-color: var(--line) var(--field); scrollbar-width: thin; margin-bottom: 14px; }
.candidate { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.candidate-check { display: grid; place-items: center; flex-shrink: 0; min-height: 35px; }
.candidate-check input { accent-color: var(--accent); width: 13px; height: 13px; margin: 0; }
.candidate-thumb { --thumb: 43px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--thumb); height: var(--thumb); }
.candidate-thumb img { display: block; max-width: var(--thumb); max-height: var(--thumb); border-radius: 4px; }
.candidate-main { background: transparent; text-align: left; flex: 1; min-width: 0; padding: 2px 0; }
.candidate-main:hover { color: #ffffff; }
.candidate-main b { font-size: 10px; font-weight: 450; font-variant-numeric: tabular-nums; }
.candidate-main b > span { display: block; font-size: 9px; color: var(--dim); margin: 1px 0; }
.candidate-main small { display: block; font-size: 9px; line-height: 1.5; color: var(--dim); margin-top: 4px; }
.score { font-size: 19px; font-variant-numeric: tabular-nums; text-align: center; color: #cacaca; }
.score.strong { color: #f1f1f1; }
.score small { display: block; font-size: 9px; font-weight: 400; color: var(--dim); margin-top: 2px; }
.score.tier { font-size: 12px; font-weight: 600; }
.score.tier.strong { color: var(--accent); }
.seam-images { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 20px; }
.seam-images figure { margin: 0; min-width: 0; }
.seam-images img { width: 100%; aspect-ratio: var(--source-aspect,9/16); object-fit: contain; border-radius: 6px; background: #141414; display: block; }
.seam-images figcaption { color: var(--muted); font-size: 10px; text-align: center; margin-top: 8px; }
.seam-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 19px; padding-top: 14px; border-top: 1px solid var(--line); }
.seam-stats span { display: block; font-size: 11px; color: var(--muted); }
.seam-stats b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 450; color: #e7e7e7; margin-top: 8px; }
.seam-stats small { font-size: 10px; color: var(--dim); }
.inspection-tips p { color: var(--muted); font-size: 11px; line-height: 1.7; margin-top: 12px; }
.alert, .notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 15px; margin-bottom: 12px; border-radius: 6px; font-size: 12px; line-height: 1.6; }
.alert.error { background: var(--field); border: 1px solid var(--selection-edge); color: #ffffff; border-left: 4px solid #eeeeee; }
.alert p { margin-top: 5px; }
.notice { background: var(--field); border: 1px solid var(--line); color: var(--text); }
.notice > [data-icon] { flex: 0 0 auto; }
.notice #notice-message { flex: 1; }
.notice .icon-btn { min-width: 25px; height: 25px; }
.job-panel { display: flex; align-items: center; gap: 16px; position: sticky; bottom: 18px; padding: 16px 20px; margin-top: 18px; border: 1px solid var(--selection-edge); border-radius: 4px; background: var(--panel); z-index: 5; box-shadow: var(--raised-shadow); color: var(--text); }
.job-panel > div { flex: 1; min-width: 0; }
.job-label { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 8px; }
.job-label b { font-size: 12px; font-weight: 450; }
.job-label span { font-size: 11px; font-variant-numeric: tabular-nums; }
progress { display: block; width: 100%; height: 4px; border: 0; border-radius: 4px; overflow: hidden; accent-color: var(--accent); }
progress::-webkit-progress-bar { background: var(--field); }
progress::-webkit-progress-value { background: var(--accent); }
.spin { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 6px 20px; color: var(--dim); font-size: 10px; }
footer > span, footer > div { display: flex; align-items: center; gap: 7px; }
footer > div { gap: 24px; }
footer .text-btn { font-size: 10px; }
footer a:hover { color: #f0f0f0; }
.drop-overlay { position: fixed; inset: 14px; border: 2px dashed var(--accent); border-radius: 6px; z-index: 100; background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; pointer-events: none; color: #f0f0f0; }
.drop-overlay b { font-size: 26px; }
.drop-overlay > span:last-child { color: var(--muted); font-size: 14px; }
.help-dialog { color: var(--muted); background: var(--panel); border: 1px solid var(--selection-edge); border-radius: 6px; max-width: 640px; width: calc(100% - 32px); padding: 28px; box-shadow: var(--raised-shadow); max-height: calc(100dvh - 40px); }
.help-dialog::backdrop { background: #00000099; }
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.help-head h2 { color: #f0f0f0; font-size: 22px; font-weight: 550; letter-spacing: -.5px; }
.help-dialog > p { font-size: 14px; line-height: 1.7; }
.help-dialog ul { padding-left: 20px; font-size: 12px; line-height: 1.8; }
.help-dialog li { margin-bottom: 11px; }
.help-dialog b { color: #e3e3e3; font-weight: 550; }
.shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--line); padding-top: 17px; margin: 23px 0; font-size: 11px; }
.shortcut-grid > span { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.help-dialog .micro { font-size: 11px; line-height: 1.7; margin: 17px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
[hidden] { display: none !important; }

.field input:hover:enabled, .field select:hover:enabled, .layer-controls textarea:hover:enabled { border-color: var(--selection-edge); }
.segmented button:focus-visible, .tabs button:focus-visible, .method-card:focus-visible { outline-offset: -2px; }
::selection { background: var(--accent); color: var(--selected-text); }

/* Shallow form depth; tool selections stay flat and easy to scan. */
.panel, .patch-dialog { box-shadow: var(--panel-shadow); }
.app-header { box-shadow: inset 0 1px 0 #ffffff45, 0 1px 0 #ffffff20; }
.play-btn { box-shadow: var(--raised-shadow); }
.tabs button, .segmented button { color: var(--text); }
.segmented button.active, .layer-item.selected { box-shadow: var(--pressed-shadow); }
.segmented, .preview-view-controls,
.field input, .field select, .layer-controls textarea, .fill-stop-position input,
.text-fill-editor, .repair-report, input[type=range] { box-shadow: var(--inset-shadow); }
.play-btn:active:enabled { box-shadow: var(--pressed-shadow); }
input[type=range]::-webkit-slider-thumb { box-shadow: var(--raised-shadow); }
input[type=range]::-moz-range-thumb { box-shadow: var(--raised-shadow); }

@media (min-width: 1600px) {
  .controls-panel { padding: 23px 15px; }
  .method-card { min-height: 53px; }
  .method-card b { font-size: 15px; }
  .export-panel { padding-inline: 20px; }
  .preview-stage { height: 590px; }
}
@media (max-width: 1279px) {
  .controls-panel { padding: 20px 12px; }
  .method-card { gap: 10px; padding-inline: 12px; min-height: 47px; }
  .method-card b { font-size: 13px; }
  .export-panel { padding: 20px; }
  .preview-panel { padding-inline: 12px; }
  .tabs { gap: 2px; width: 100%; }
  .tabs button { flex: 1; font-size: 12px; padding: 10px 7px; gap: 6px; }
  .dimension-caption { flex-wrap: wrap; }
  .format-fields .field { grid-template-columns: 1fr 120px; gap: 8px; font-size: 12px; }
  .source-meta { gap: 9px; }
  .source-meta > span:nth-child(n+3) { display: none; }
  .timeline-actions { gap: 12px; }
  .trim-fields { gap: 16px; }
  .range-summary { padding-inline: 15px; gap: 12px; }
}
@media (max-width: 1099px) {
  .wallpaper-settings { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wallpaper-settings .wallpaper-duration-note { grid-column: 1; }
  .wallpaper-install-guide { grid-column: 2; }
  .app-header { display: grid; grid-template-columns: auto auto; gap: 12px 20px; }
  .header-brand { grid-column: 1; grid-row: 1; }
  .header-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  .header-hint { grid-column: 1/-1; grid-row: 2; padding-left: 0; border-left: 0; }
  .header-actions .btn { padding-inline: 14px; }
  .export-panel > fieldset { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 24px; }
  .output-aspect { grid-column: 1; grid-row: 1; }
  #format-fields { grid-column: 2; grid-row: 1; }
  #audio-fields { grid-column: 1/-1; grid-row: 2; }
  #output-settings { grid-column: 1/-1; grid-row: 3; border-top: 1px solid var(--line); grid-template-columns: repeat(2,minmax(0,1fr)); }
  #output-settings > #motion-fields { grid-column: 1; grid-row: 2; }
  #output-settings > details { grid-column: 2; grid-row: 2; border-top: 1px solid var(--line); margin-top: 10px; }
  #output-settings > details > summary { padding-top: 13px; }

  .transport { grid-template-columns: auto 1fr auto; gap: 8px; }
  .transport-time { grid-column: 1/-1; grid-row: 2; text-align: center; margin: 3px 0 6px; }
  .preview-mode button { font-size: 12px; padding-inline: 10px; }
  .playback-controls { gap: 6px; }
  .play-btn { width: 47px; height: 47px; }
  .timeline-head { flex-wrap: wrap; }
  .source-meta > span:nth-child(n+3) { display: block; }
  .timeline-actions { gap: 14px; }
  #range-duration { display: none; }
  .trim-fields { display: grid; grid-template-columns: 1fr 1fr; }
  .trim-fields .field { flex: 1; }
  .range-summary { grid-row: 2; border-left: 0; border-top: 1px solid var(--line); padding: 13px 0 0; justify-content: space-between; }
}
@media (max-width: 739px) {
  .wallpaper-settings { display: block; margin-bottom: 20px; }
  .wallpaper-settings > * + * { margin-top: 18px; }
  .wallpaper-settings .range-field { margin-top: 18px; }
  .wallpaper-install-guide { border-top: 1px solid var(--line); }
  .wallpaper-install-guide > summary { padding-top: 13px; }
  .app-header { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; padding-block: 14px; }
  .brand { font-size: 21px; gap: 9px; }
  .brand-icon img { width: 32px; height: 32px; }
  .header-hint { grid-column: 1; grid-row: 3; }
  .header-actions { display: grid; grid-column: 1; grid-row: 2; justify-self: stretch; grid-template-columns: minmax(0,1fr) 40px; gap: 7px; }
  .header-actions .btn { min-height: 40px; padding: 8px; font-size: 12px; gap: 6px; }
  .header-actions [data-action=open] { grid-column: 1; grid-row: 1; }
  .header-actions .github-link { grid-column: 2; grid-row: 1; }
  .workbench { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .preview-panel { grid-column: 1; grid-row: 1; padding: 10px 10px 8px; }
  .timeline-fieldset { grid-column: 1; grid-row: 2; }
  .controls-panel { grid-column: 1; grid-row: 3; padding: 20px 14px; }
  .export-panel { grid-column: 1; grid-row: 4; padding: 22px 19px; }
  .tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2px; }
  .tabs button { font-size: 11px; gap: 4px; padding: 10px 3px; line-height: 1.25; min-height: 38px; white-space: normal; }
  .tabs button [data-icon] { display: none; }
  .preview-stage { height: min(106vw,490px); border-radius: 2px; }
  .transport { gap: 6px; padding-top: 12px; }
  .preview-mode button { padding: 9px 11px; font-size: 12px; }
  .playback-controls { gap: 3px; }
  .play-btn { width: 44px; height: 44px; }
  .playback-controls .icon-btn { min-width: 28px; width: 28px; padding: 3px; }
  .transport-options { gap: 0; }
  .transport-options .icon-btn { min-width: 30px; width: 30px; }
  .transport-time { font-size: 12px; }
  .preview-foot > span { font-size: 10px; }
  .controls-header { margin-bottom: 15px; }
  .mobile-preview-link { display: inline-flex; flex-shrink: 0; min-height: 36px; padding: 4px 0 4px 8px; font-size: 12px; }
  .method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .method-card { gap: 10px; padding: 12px 10px; min-height: 55px; border-radius: 6px; }
  .method-card b { font-size: 13px; }
  .method-icon, .method-icon svg { width: 23px; height: 23px; }
  .method-fields { padding-top: 20px; margin-top: 20px; }
  .range-number-field { grid-template-columns: 1fr 105px; }
  .field { font-size: 13px; }
  .field input, .field select { font-size: 16px; min-height: 42px; }
  .layer-controls textarea { font-size: 16px; }
  .fill-channel-grid input { font-size: 16px; }
  .fill-stop-select { min-height: 38px; font-size: 12px; }
  .fill-stop-position input { height: 38px; font-size: 16px; }
  .fill-stop-remove { height: 38px; }
  .fill-stop-handle { width: 24px; height: 26px; }
  .range-number-field .input-unit input { min-height: 40px; }
  .method-fields #field-setting-curve { display: grid; grid-template-columns: 1fr 150px; align-items: center; }
  .method-fields #field-setting-curve > span { margin: 0; }
  .export-panel > fieldset, #output-settings { display: block; }
  .export-panel > fieldset > .output-aspect, .export-panel > fieldset > #format-fields { margin-bottom: 20px; }
  .format-fields .field { grid-template-columns: 1fr 155px; }
  .format-fields .field select { font-size: 14px; }
  .dimension-caption { font-size: 12px; }
  #destination-label { font-size: 11px; }
  .control-label { font-size: 13px; }
  .aspect-options button { padding-block: 11px; font-size: 13px; }
  .toggle-row { font-size: 13px; }
  #output-settings { border-top: 1px solid var(--line); margin-top: 10px; }
  .timeline-panel { padding: 16px 15px; }
  .timeline-head { gap: 9px; margin-bottom: 14px; }
  .source-meta { flex-wrap: wrap; gap: 5px 12px; font-size: 10px; }
  .source-meta .file-name { width: 100%; max-width: 100%; font-size: 13px; }
  .timeline-actions { width: 100%; justify-content: space-between; gap: 7px; }
  .history-controls { padding-right: 7px; }
  .timeline-actions kbd { display: none; }
  .timeline-actions .text-btn { font-size: 11px; }
  .filmstrip { height: 70px; }
  .trim-handle { height: 44px; }
  .trim-fields { gap: 13px 16px; margin-top: 17px; }
  .trim-fields .field { display: block; }
  .trim-fields .field > span { display: block; margin-bottom: 7px; }
  .trim-fields .field input { font-size: 16px; }
  .range-summary { gap: 8px; flex-wrap: wrap; padding-top: 12px; }
  .range-summary > span { font-size: 10px; }
  .range-summary b { font-size: 12px; }
  #panel-find .field { font-size: 12px; }
  .candidate-thumb { --thumb: 52px; }
  .candidate { gap: 10px; }
  .candidate-main b { font-size: 12px; }
  .candidate-main b > span { display: inline; font-size: 11px; margin: 0 3px; }
  .candidate-main small { font-size: 10px; }
  .candidate-check { width: 23px; height: 44px; }
  .candidate-check input { width: 17px; height: 17px; }
  .alert { flex-wrap: wrap; }
  .job-panel { padding: 14px; gap: 10px; border-radius: 6px; bottom: 10px; }
  .job-panel .btn { padding: 9px 12px; font-size: 12px; }
  .job-label { align-items: flex-start; }
  .job-label b { font-size: 11px; }
  footer { align-items: flex-start; font-size: 10px; line-height: 1.6; padding: 17px 4px 22px; }
  footer > div { align-items: flex-end; flex-direction: column; gap: 5px; }
  .help-dialog { padding: 23px; border-radius: 6px; }
  .shortcut-grid { grid-template-columns: 1fr; }
}
@media (max-width: 379px) {
  .brand { font-size: 22px; gap: 8px; }
  .brand-icon img { width: 31px; height: 31px; }
  .tabs button { font-size: 10px; padding-inline: 2px; }
  .preview-mode button { font-size: 11px; padding-inline: 8px; }
  .playback-controls { gap: 0; }
  .play-btn { width: 39px; height: 39px; }
  .playback-controls .icon-btn { min-width: 24px; width: 24px; }
  .transport-options .icon-btn { min-width: 27px; width: 27px; }
  .transport { grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .preview-mode { grid-column: 1; grid-row: 1; justify-self: start; }
  .transport-options { grid-column: 2; grid-row: 1; }
  .playback-controls { grid-column: 1/-1; grid-row: 2; }
  .transport-time { grid-column: 1/-1; grid-row: 3; margin: 0; }
  .method-card { gap: 8px; padding-inline: 8px; }
  .method-card b { font-size: 12px; }
  .method-icon, .method-icon svg { width: 21px; height: 21px; }
  .preview-foot > span > [data-icon] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .spin { animation: none; }
}
.field input[type=range] { min-height: 6px; height: 6px; padding: 0; border: 0; }

/* Loop repair follows the editor's neutral surfaces and visible form states. */
.repair-heading { font-size: 12px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.repair-full { margin-top: 9px; }
.repair-report { padding: 10px; background: var(--field); border: 1px solid var(--line); border-radius: 4px; margin: 12px 0; }
.repair-report p + p { margin-top: 8px; }
.repair-images { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.repair-images figure { margin: 0; }
.repair-images img { width: 100%; display: block; }
.repair-images figcaption { color: var(--dim); font-size: 10px; margin-top: 5px; }
.repair-preview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 16px; }
.repair-preview-actions .btn { white-space: normal; padding-inline: 6px; }
#panel-repair .panel-copy { padding: 0; margin-bottom: 12px; }
#repair-controls .toggle-row { align-items: flex-start; padding: 8px 0; }
#repair-controls:disabled .repair-heading, .toggle-row:has(input:disabled) > span:first-child { opacity: .55; }
.field input:disabled, .field select:disabled, .range-field input:disabled { opacity: .55; cursor: default; }
@media (min-width: 740px) {
  .controls-panel:has(#panel-repair:not([hidden])), .controls-panel:has(#panel-layers:not([hidden])) { max-height: min(760px, calc(100vh - 100px)); overflow-y: auto; }
}
.repair-report summary { cursor: pointer; color: var(--text); }
.repair-report details { margin-top: 10px; }
.patch-dialog { width: min(1100px, 95vw); max-height: 94vh; overflow: auto; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 20px; }
.patch-dialog[open] { display: flex; flex-direction: column; height: min(940px, 94vh); }
.patch-dialog > :not(.patch-viewport) { flex-shrink: 0; }
.patch-dialog::backdrop { background: rgba(0,0,0,.7); }
.patch-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin: 12px 0; }
.patch-toolbar .field { margin: 0; max-width: 180px; }
.patch-viewport { flex: 1 1 auto; min-height: 150px; height: 55vh; overflow: auto; background: var(--stage); margin: 12px 0; }
.patch-zoom { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.patch-zoom input { width: 140px; }
.patch-canvas { display: block; max-width: none; max-height: none; margin: 0 auto; cursor: crosshair; touch-action: none; }
.patch-footer { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
@media (max-width: 739px) { .patch-dialog { padding: 12px; } .patch-footer { flex-wrap: wrap; } }

@media (min-width: 740px) and (max-width: 1000px) {
  .tabs button { white-space: normal; padding-inline: 4px; }
  .tabs button [data-icon] { display: none; }
}

.auto-repair-controls { padding-bottom: 12px; }
.auto-repair-dialog { max-width: 820px; }
.auto-repair-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.auto-repair-comparison figure { margin: 0; min-width: 0; }
.auto-repair-comparison figcaption { margin-bottom: 8px; font-size: 12px; }
.auto-repair-stage { position: relative; max-width: 280px; margin: auto; }
.auto-repair-stage video { display: block; width: 100%; background: var(--stage); }
.auto-repair-region { position: absolute; border: 2px dashed var(--accent); pointer-events: none; }
.auto-repair-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 18px; }
.auto-repair-dialog > details { font-size: 12px; }
@media (max-width: 739px) { .auto-repair-comparison { grid-template-columns: 1fr; } }

.alignment-controls { display: flex; flex-wrap: wrap; gap: 4px; }
.alignment-controls .text-btn { min-height: 30px; padding: 5px 7px; font-size: 12px; }

.layer-video-marker { padding: 8px; color: var(--muted); font-size: 11px; border-block: 1px solid var(--line); }
.layer-video-marker.selected { background: var(--control); border-color: var(--selection-edge); }
.layer-video-marker .layer-select { width: 100%; text-align: left; }

/* Keep the export decision visible beside its settings on wide editor screens. */
@media (min-width: 1100px) {
  .export-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(310px,350px); gap: 0 24px; }
  .export-title { grid-column: 1/-1; grid-row: 1; }
  .export-panel > .wallpaper-destination { grid-column: 1/-1; grid-row: 2; }
  .export-panel > fieldset { grid-column: 1; grid-row: 3; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 20px; }
  .wallpaper-destination, .wallpaper-settings, #output-settings { grid-column: 1/-1; }
  .output-aspect { grid-column: 1; grid-row: auto; }
  #format-fields { grid-column: 2; grid-row: auto; }
  #audio-fields { grid-column: 1/-1; grid-row: auto; }
  #output-settings { grid-row: auto; }
  .export-footer { grid-column: 2; grid-row: 3; align-self: start; position: sticky; top: 12px; justify-content: stretch; margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--line); }
  .export-actions { width: 100%; justify-content: flex-end; }
  .export-panel:has(#wallpaper-settings:not([hidden])) > fieldset { grid-column: 1/-1; }
  .export-panel:has(#wallpaper-settings:not([hidden])) .export-footer { grid-column: 1/-1; grid-row: 4; position: static; justify-content: flex-end; margin-top: 16px; padding: 16px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .export-panel:has(#wallpaper-settings:not([hidden])) .export-actions { max-width: 460px; }
}

.method-card > span:nth-child(2) { min-width: 0; }
.method-score { margin-left: auto; flex-shrink: 0; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.method-fit-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.method-fit-row b { font-weight: 500; }
.method-fit-row > span { font-variant-numeric: tabular-nums; }
.method-fit-row small { grid-column: 1/-1; color: var(--dim); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.method-compare-button { margin-top: 12px; padding-inline: 7px; font-size: 12px; white-space: normal; }

/* Distinguish applying a loop from selecting it for batch export. */
.candidate-check > span { font-size: 9px; color: var(--dim); }
.candidate-use { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--control, #717171); font-size: 11px; }

.seam-pause-controls { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.pause-frame-field { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 8px; margin: 12px 0; }
.pause-frame-field .field { margin: 0; }
.pause-frame-field > input[type=range] { grid-column: 1 / -1; width: 100%; }
.pause-step-buttons { display: flex; align-items: end; gap: 4px; }
.pause-trim-region { position: absolute; top: 0; bottom: 0; background: #c5945077; border-inline: 1px solid #d5ac73; pointer-events: none; z-index: 2; }

.layer-timeline { --track-label-width: 180px; min-width: 0; }
.layer-timeline-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.layer-timeline-heading h3 { font-size: 13px; font-weight: 500; }
.layer-timeline-heading > span { font-size: 11px; color: var(--dim); }
.layer-timeline-heading b { font-weight: 500; font-variant-numeric: tabular-nums; }
.layer-track-scale, .layer-track-row { display: grid; grid-template-columns: var(--track-label-width) minmax(0,1fr); gap: 12px; min-width: 0; }
.layer-track-scale { margin-bottom: 6px; color: var(--dim); font-size: 10px; }
.layer-track-scale > span { padding-left: 10px; }
.layer-track-ruler { display: flex; justify-content: space-between; gap: 3px; padding-block: 6px; border-bottom: 1px solid var(--line); cursor: crosshair; touch-action: none; font-variant-numeric: tabular-nums; }
.layer-track-row { margin-bottom: 4px; }
.layer-track-label { display: flex; align-items: center; gap: 8px; min-width: 0; height: 42px; padding: 5px 9px; border: 1px solid transparent; border-radius: 3px; background: var(--control); color: var(--text); text-align: left; }
.layer-track-label > span:first-child { flex: 0 0 16px; }
.layer-track-label > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.layer-track-label b, .layer-track-label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-track-label b { font-size: 12px; font-weight: 500; }
.layer-track-label small { font-size: 9px; color: var(--dim); font-variant-numeric: tabular-nums; }
.layer-track-row.selected .layer-track-label { border-color: var(--accent); background: var(--recess); box-shadow: var(--inset-shadow); }
.layer-track-lane { position: relative; min-width: 0; height: 42px; border-block: 1px solid var(--edge); border-radius: 3px; background: var(--field); cursor: crosshair; touch-action: none; }
.layer-track-clip { position: absolute; top: 5px; height: 30px; min-width: 1px; border: 1px solid #a2adb6; border-radius: 3px; background: #778590; box-shadow: var(--raised-shadow); }
.layer-track-row.selected .layer-track-clip { background: var(--active-blue); border-color: var(--accent); }
.layer-track-row.muted .layer-track-clip { opacity: .45; }
.layer-track-body { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0 14px; border-radius: 2px; background: transparent; color: var(--text); cursor: grab; overflow: hidden; white-space: nowrap; text-align: left; }
.layer-track-body > span { overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.layer-track-body:active { cursor: grabbing; }
[data-track-row="video"] .layer-track-body { cursor: crosshair; }
.layer-track-body small { font-size: 9px; font-variant-numeric: tabular-nums; }
.layer-track-edge { position: absolute; top: -1px; bottom: -1px; width: 16px; z-index: 2; padding: 0; background: transparent; cursor: ew-resize; touch-action: none; }
.layer-track-edge.start { left: -7px; }
.layer-track-edge.end { right: -7px; }
.layer-track-edge::after { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: #f3f3f3; }
.layer-track-playhead { position: absolute; top: -2px; bottom: -2px; border-left: 2px solid #fff; z-index: 3; pointer-events: none; }
#layer-track-help { margin-top: 12px; }
@media (max-width: 739px) {
  .layer-timeline { --track-label-width: 100px; }
  .layer-track-scale, .layer-track-row { gap: 8px; }
  .layer-timeline-heading { flex-wrap: wrap; gap: 5px; }
  .layer-track-label { padding-inline: 5px; gap: 5px; }
  .layer-track-label b { font-size: 11px; }
  .layer-track-ruler { font-size: 9px; }
  .layer-track-ruler > span:nth-child(2), .layer-track-ruler > span:nth-child(4), .layer-track-body small { display: none; }
  .layer-track-body { padding-inline: 9px; }
}