@import url("./components/confirm-modal.css");

:root {
  color-scheme: dark;
  --desk: #141518;
  --panel: #1a1b1f;
  --raised: #232429;
  --inset: #111215;
  --stage: #101113;
  --ink: #f0f0f4;
  --secondary: #b3b4bf;
  --muted: #777985;
  --faint: #555762;
  --line: #ffffff0e;
  --line-strong: #ffffff1b;
  --violet: #b49afa;
  --violet-soft: #b49afa16;
  --mint: #84dfc6;
  --danger: #f099a5;
  --video-track: #314944;
  --text-track: #493b65;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-size: 12px;
  color: var(--ink);
  background: var(--desk);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow: hidden;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
select {
  cursor: pointer;
}
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  color: inherit;
  background: none;
  border-radius: 7px;
  transition:
    background 0.15s,
    border-color 0.15s;
}
button:hover:not(:disabled) {
  background: var(--raised);
}
button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}
a {
  text-decoration: none;
  color: inherit;
}
svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
[hidden] {
  display: none !important;
}
input,
select,
textarea {
  color: var(--ink);
  background: var(--inset);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  min-width: 0;
  padding: 8px;
}
input[type='range'] {
  accent-color: var(--violet);
  height: 18px;
  padding: 0;
  border: none;
  cursor: pointer;
}
input[type='color'] {
  width: 36px;
  height: 32px;
  padding: 3px;
}
h1,
h2,
p {
  margin: 0;
}
h1,
h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.editor-header {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
}
.editor-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.editor-brand img {
  width: 36px;
  height: 36px;
}
.editor-brand strong {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  gap: 2px;
  font-size: 21px;
  letter-spacing: -0.8px;
  font-weight: 750;
}
.editor-brand strong span {
  font-size: 11px;
  font-weight: 450;
  letter-spacing: 0.3px;
  color: var(--secondary);
  margin-left: 0;
}
.header-divider {
  height: 28px;
  border-left: 1px solid var(--line-strong);
}
.project-heading {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.project-heading input {
  height: 30px;
  border-radius: 3px;
  padding: 4px 8px;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 550;
  font-size: 13px;
  width: 230px;
}
#save-state {
  font-size: 10px;
  color: var(--muted);
}
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.avatar {
  background: var(--violet-soft);
  color: var(--violet);
  border: 1px solid #b49afa35;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
}
.primary-button {
  background: var(--violet);
  color: #1b142c;
  padding: 10px 16px;
  min-height: 38px;
  font-weight: 650;
  display: inline-flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 7px;
}
.primary-button:hover:not(:disabled) {
  background: #c5afff;
}
.quiet-button {
  padding: 9px 12px;
  color: var(--secondary);
}
.icon-button {
  width: 32px;
  height: 32px;
  font-size: 23px;
  color: var(--secondary);
  flex-shrink: 0;
}
.editor-workspace {
  height: calc(100dvh - 72px);
  display: grid;
  grid-template-columns: 72px 264px minmax(260px, 1fr) 252px;
  grid-template-rows: minmax(280px, 1fr) 290px;
}
.tool-rail {
  grid-row: 1 / 3;
  border-right: 1px solid var(--line);
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rail-button {
  transition:
    background 0.15s,
    border-color 0.15s;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 55px;
  min-height: 62px;
  padding: 4px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 24px minmax(24px, auto);
  justify-items: center;
  gap: 4px;
  color: var(--muted);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 500;
}
.rail-button > span:not(.text-icon) {
  min-width: 0;
  max-width: 100%;
  line-height: 12px;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.rail-button:hover {
  background: var(--raised);
}
.rail-button:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}
.rail-button svg {
  height: 21px;
  width: 21px;
}
.rail-button.active {
  color: var(--violet);
  background: var(--violet-soft);
}
.text-icon {
  font-family: Georgia, serif;
  font-size: 25px;
  line-height: 23px;
}
.rail-bottom {
  margin-top: auto;
}
.library-panel,
.inspector-panel {
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  min-height: 0;
}
.library-section {
  padding: 22px 16px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  margin-bottom: 21px;
}
.count-badge {
  color: var(--muted);
  font-size: 10px;
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
}
.segmented {
  display: flex;
  padding: 3px;
  background: var(--inset);
  border-radius: 7px;
  margin-bottom: 18px;
  gap: 2px;
}
.segmented button {
  flex: 1;
  font-size: 11px;
  height: 29px;
  color: var(--muted);
}
.segmented button.active {
  color: var(--ink);
  background: var(--raised);
}
.import-button {
  background: var(--violet-soft);
  color: var(--violet);
  border: 1px dashed #b49afa50;
  min-height: 42px;
  width: 100%;
  font-weight: 550;
}
.import-button:hover:not(:disabled) {
  background: #b49afa25;
  border-color: var(--violet);
}
.media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 10px;
  margin-top: 18px;
}
.media-card {
  min-width: 0;
  position: relative;
}
.media-thumb {
  height: 67px;
  width: 100%;
  object-fit: cover;
  background: var(--inset);
  display: block;
  border-radius: 6px;
}
.media-length {
  font-size: 9px;
  position: absolute;
  top: 45px;
  left: 5px;
  color: white;
  background: #000a;
  padding: 2px 4px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.media-remove {
  position: absolute;
  right: 4px;
  top: 4px;
  background: #000b;
  width: 20px;
  height: 20px;
  opacity: 0;
}
.media-card:hover .media-remove,
.media-card:focus-within .media-remove {
  opacity: 1;
}
.library-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 38px 15px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}
.library-empty svg {
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  color: var(--faint);
}
.library-footnote {
  margin-top: auto;
  padding-top: 30px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--faint);
  font-size: 9px;
  line-height: 1.7;
}
.library-footnote svg {
  width: 13px;
  height: 13px;
  margin-top: 2px;
}
.library-caption,
.panel-description {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
  margin-bottom: 18px;
}
#upload-status {
  color: var(--violet);
  margin-top: 9px;
  font-size: 10px;
}
.download-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.download-card p {
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.download-card small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
}
.download-card button {
  color: var(--violet);
  font-size: 20px;
}
.viewer-panel {
  background: var(--desk);
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.viewer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  gap: 12px;
}
.section-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--muted);
}
.canvas-options {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: var(--muted);
}
.canvas-options select {
  font-size: 10px;
  border-color: var(--line);
  background: var(--raised);
  padding: 7px 8px;
}
.stage {
  padding: 12px 30px;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.stage.drag-over {
  background: var(--violet-soft);
  outline: 2px dashed var(--violet);
  outline-offset: -10px;
}
.canvas-wrap {
  position: relative;
  background: #000;
  flex-shrink: 0;
}
#preview {
  width: 100%;
  height: 100%;
  display: block;
}
.canvas-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--stage);
  text-align: center;
  gap: 15px;
  border: 1px solid var(--line);
}
.empty-illustration {
  width: min(260px, 65%);
  height: auto;
  max-height: 32%;
  object-fit: contain;
  flex-shrink: 1;
}
.canvas-empty h2 {
  font-size: clamp(20px, 2vw, 31px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -1px;
}
.canvas-empty p {
  color: var(--muted);
  font-size: 11px;
}
.canvas-empty > span {
  color: var(--faint);
  font-size: 9px;
}
.canvas-empty .primary-button {
  margin-top: 3px;
  font-size: 11px;
}
.playback-bar {
  height: 57px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 22px;
}
.preview-note,
.frame-rate {
  color: var(--faint);
  font-size: 9px;
}
.transport {
  display: flex;
  align-items: center;
  gap: 12px;
}
.play-button {
  border-radius: 50%;
  background: var(--ink);
  color: var(--desk);
  width: 30px;
  height: 30px;
}
.play-button:hover:not(:disabled) {
  background: var(--violet);
}
.play-button svg {
  width: 14px;
  height: 14px;
}
.timecode {
  font:
    10px ui-monospace,
    monospace;
  font-variant-numeric: tabular-nums;
  display: flex;
  gap: 9px;
  color: var(--muted);
}
.timecode strong {
  color: var(--secondary);
  font-weight: 500;
}
.inspector-panel {
  border-left: 1px solid var(--line);
  border-right: none;
  padding: 22px 18px;
}
.tiny-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--violet);
}
.inspector-empty {
  padding: 20px 0;
}
.inspector-empty > svg {
  width: 28px;
  height: 28px;
  color: var(--faint);
  margin-bottom: 18px;
}
.inspector-empty h3 {
  font-size: 12px;
  font-weight: 500;
  margin: 0 0 10px;
}
.inspector-empty p {
  line-height: 1.8;
  color: var(--muted);
  font-size: 11px;
}
.workflow-steps {
  border-top: 1px solid var(--line);
  margin-top: 27px;
  padding-top: 24px;
  display: grid;
  gap: 20px;
}
.workflow-steps div {
  display: flex;
  gap: 11px;
  align-items: center;
  font-size: 10px;
  color: var(--muted);
}
.workflow-steps b {
  width: 22px;
  height: 22px;
  background: var(--raised);
  display: grid;
  place-items: center;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 500;
  color: var(--secondary);
}
.property-section {
  border-bottom: 1px solid var(--line);
  padding: 0 0 18px;
  margin-bottom: 18px;
}
.property-section h3 {
  font-size: 11px;
  font-weight: 550;
  margin: 0 0 13px;
}
.property-section label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 10px;
  color: var(--secondary);
}
.property-section input[type='number'] {
  width: 77px;
  padding: 7px;
  font-variant-numeric: tabular-nums;
}
.property-section select {
  max-width: 125px;
  font-size: 10px;
}
.property-section textarea {
  width: 100%;
  min-height: 70px;
  resize: vertical;
  font-size: 11px;
  line-height: 1.5;
}
.property-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.property-grid label {
  gap: 6px;
}
.property-grid input[type='number'] {
  width: 65px;
}
.property-hint {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.7;
  margin-top: 12px;
}
.property-title {
  color: var(--violet);
  font-size: 11px;
  margin-bottom: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preset-row {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}
.preset-row button {
  font-size: 10px;
  border-color: var(--line-strong);
  padding: 6px 9px;
}
.text-preset {
  width: 100%;
  min-height: 95px;
  flex-direction: column;
  background: var(--raised);
  margin-top: 12px;
}
#text-panel .section-label {
  margin-top: 30px;
}
.text-preset small {
  font:
    9px Inter,
    sans-serif;
  color: var(--muted);
  letter-spacing: 0;
}
.title-preset {
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -1px;
}
.caption-preset > span {
  font-size: 11px;
  color: white;
  background: #000;
  padding: 8px;
}
.label-preset > span {
  color: #211632;
  background: var(--violet);
  font-size: 10px;
  font-weight: 700;
  padding: 7px;
}
.layer-item {
  width: 100%;
  padding: 12px 10px;
  margin-bottom: 5px;
  justify-content: flex-start;
  text-align: left;
  background: var(--raised);
  font-size: 11px;
}
.layer-item.selected {
  border-color: var(--violet);
}
.layer-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timeline-panel {
  grid-column: 2 / 5;
  border-top: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
}
.timeline-toolbar {
  height: 52px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 15px;
}
.timeline-actions,
.timeline-zoom {
  display: flex;
  gap: 5px;
  align-items: center;
}
.tool-button {
  padding: 8px 10px;
  font-size: 10px;
  color: var(--secondary);
}
.toolbar-divider {
  height: 19px;
  border-left: 1px solid var(--line-strong);
  margin: 0 9px;
}
.timeline-zoom > span {
  color: var(--muted);
  font-size: 10px;
  margin-right: 8px;
}
.timeline-zoom input {
  width: 75px;
}
.timeline-scroll {
  flex: 1;
  overflow: auto;
  position: relative;
}
#timeline-grid {
  position: relative;
  min-height: 100%;
  padding-bottom: 12px;
}
.timeline-ruler {
  height: 30px;
  position: relative;
  margin-left: 120px;
  background: repeating-linear-gradient(
    90deg,
    var(--line-strong) 0px,
    var(--line-strong) 1px,
    transparent 1px,
    transparent var(--tick)
  );
  background-size: 100% 5px;
  background-position: bottom;
  background-repeat: no-repeat;
  cursor: crosshair;
}
.ruler-label {
  position: absolute;
  top: 8px;
  color: var(--muted);
  font:
    9px ui-monospace,
    monospace;
  pointer-events: none;
}
.track-row {
  display: flex;
  height: 55px;
  margin-bottom: 5px;
  position: relative;
}
.track-label {
  width: 120px;
  flex-shrink: 0;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 10px;
}
.track-label svg {
  width: 14px;
  height: 14px;
}
.track-lane {
  position: relative;
  flex: 1;
  background: #ffffff02;
  border-top: 1px solid #ffffff04;
  border-bottom: 1px solid #ffffff04;
}
.track-placeholder {
  position: absolute;
  top: 18px;
  left: 18px;
  font-size: 10px;
  color: var(--faint);
  pointer-events: none;
}
.timeline-clip {
  position: absolute;
  top: 3px;
  height: 48px;
  background: var(--video-track);
  border: 1px solid #84dfc650;
  border-radius: 5px;
  overflow: hidden;
  cursor: grab;
  min-width: 6px;
  padding: 0;
  display: block;
  text-align: left;
  touch-action: none;
}
.timeline-clip.text-clip {
  background: var(--text-track);
  border-color: #b49afa50;
}
.timeline-clip.selected {
  --clip-accent: var(--mint);
  border: 2px solid var(--clip-accent);
  border-radius: 7px;
  z-index: 2;
}
.timeline-clip.text-clip.selected {
  --clip-accent: var(--violet);
  border-color: var(--clip-accent);
}
.clip-filmstrip {
  display: flex;
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.75;
  pointer-events: none;
}
.clip-filmstrip img {
  flex-shrink: 0;
  width: 66px;
  height: 100%;
  object-fit: cover;
}
.clip-title {
  position: absolute;
  inset: 0 0 auto;
  padding: 4px 9px;
  background: #0008;
  color: #fff;
  font-size: 9px;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}
.text-clip .clip-title {
  background: none;
  top: 12px;
  color: #e4d8ff;
}
.trim-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 11px;
  z-index: 2;
  cursor: ew-resize;
}
.trim-handle.left {
  left: 0;
}
.trim-handle.right {
  right: 0;
}
.selected .trim-handle { background: transparent; }
.selected .trim-handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 23px;
  transform: translateY(-50%);
  background: var(--clip-accent);
  border: 1px solid #ffffff66;
  border-radius: 4px;
  box-shadow: 0 1px 4px #0005;
  transition: filter 120ms ease;
}
.selected .trim-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 1px;
  height: 9px;
  transform: translateY(-50%);
  background: var(--panel);
  border-radius: 1px;
  pointer-events: none;
}
.selected .trim-handle.right::before { left: auto; right: 0; }
.selected .trim-handle.right::after { left: auto; right: 3px; }
.selected .trim-handle:hover::before { filter: brightness(1.15); }
#playhead {
  position: absolute;
  top: 20px;
  bottom: 6px;
  width: 1px;
  background: var(--ink);
  z-index: 4;
  pointer-events: none;
}
#playhead > span {
  display: block;
  width: 10px;
  height: 13px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 65%, 50% 100%, 0 65%);
  transform: translate(-4.5px, -10px);
}
.timeline-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 29px;
  padding: 0 20px;
  color: var(--faint);
  font-size: 9px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.timeline-footer b {
  margin: 0 9px;
  font-weight: 400;
}
.status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--mint);
  border-radius: 50%;
  margin-right: 5px;
}
kbd {
  font: inherit;
  border: 1px solid var(--line-strong);
  padding: 1px 4px;
  border-radius: 3px;
}
#selection {
  position: absolute;
  border: 1px solid var(--mint);
  pointer-events: none;
}
.selection-label {
  position: absolute;
  left: -1px;
  top: -20px;
  height: 18px;
  padding: 3px 6px;
  background: var(--mint);
  color: #14221e;
  font-size: 9px;
  white-space: nowrap;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#text-edit {
  position: absolute;
  white-space: pre-wrap;
  overflow: hidden;
  outline: 1px solid var(--violet);
  font-family: Arial, sans-serif;
  transform-origin: top left;
  cursor: text;
  padding: 12px;
  line-height: 1.2;
}
dialog {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 28px;
  width: min(460px, 90vw);
}
dialog::backdrop {
  background: #000a;
  backdrop-filter: blur(4px);
}
.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.dialog-heading h2 {
  font-size: 18px;
  letter-spacing: -0.5px;
}
dialog p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 12px;
}
.export-spec {
  display: flex;
  justify-content: space-between;
  padding: 18px 0;
  margin: 20px 0;
  border-block: 1px solid var(--line);
  font-size: 11px;
  color: var(--secondary);
}
.export-spec strong {
  font-weight: 500;
}
dialog .primary-button {
  width: 100%;
  margin-top: 20px;
}
progress {
  width: 100%;
  height: 8px;
  accent-color: var(--violet);
}
.editor-toast {
  position: fixed;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  background: var(--raised);
  border: 1px solid var(--line-strong);
  padding: 12px 18px;
  border-radius: 9px;
  z-index: 20;
  max-width: 80vw;
  color: var(--ink);
  font-size: 12px;
}
.shortcut-list {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  margin-top: 25px;
  font-size: 12px;
}
.shortcut-list dt {
  color: var(--secondary);
}
.shortcut-list dd {
  margin: 0;
  color: var(--violet);
}
::-webkit-scrollbar {
  width: 6px;
  height: 7px;
}
::-webkit-scrollbar-thumb {
  background: #ffffff1a;
  border-radius: 5px;
}
@media (min-height: 950px) {
  .editor-workspace {
    grid-template-rows: minmax(280px, 1fr) 340px;
  }
}
@media (max-width: 1200px) {
  .editor-workspace {
    grid-template-columns: 62px 215px minmax(220px, 1fr) 218px;
  }
  .tool-rail {
    padding-inline: 4px;
  }
  .preview-note {
    display: none;
  }
  .viewer-toolbar {
    padding-inline: 15px;
  }
  .stage {
    padding: 8px 20px;
  }
  .inspector-panel {
    padding-inline: 13px;
  }
}


.download-thumb,
.download-expired {
  width: 62px;
  height: 43px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  background: var(--inset);
}
.download-expired {
  display: grid;
  place-items: center;
  color: var(--faint);
}
.download-card {
  gap: 8px;
}
.download-card > div {
  min-width: 0;
  flex: 1;
}
.download-card p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.download-card small {
  font-size: 9px;
  line-height: 1.6;
}
.sticker-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 16px 0;
}
.sticker-categories button {
  font-size: 9px;
  color: var(--muted);
  padding: 6px 8px;
  background: var(--raised);
}
.sticker-categories button.active {
  color: var(--violet);
  background: var(--violet-soft);
}
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.sticker-grid button {
  font-size: 30px;
  height: 53px;
  background: var(--raised);
}
.sticker-grid button:hover {
  border-color: var(--violet);
}
.export-settings {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}
.export-settings label {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  color: var(--secondary);
  font-size: 11px;
}
.export-settings input,
.export-settings select {
  width: 100%;
}
.timeline-clip.dragging {
  cursor: grabbing;
  z-index: 5;
  will-change: left, width;
}
@media (min-width: 951px) {
  .editor-workspace {
    position: relative;
    --rail-width: 72px;
    --library-width: 264px;
    --inspector-width: 252px;
    --timeline-height: 290px;
    grid-template-columns: var(--rail-width) var(--library-width) minmax(260px, 1fr) var(--inspector-width);
    grid-template-rows: minmax(260px, 1fr) var(--timeline-height);
  }
  .panel-resizer {
    position: absolute;
    z-index: 30;
    background: transparent;
    touch-action: none;
    transition: background 0.15s;
  }
  .panel-resizer:hover,
  .panel-resizer:focus-visible {
    background: #b49afa80;
    outline: none;
  }
  .panel-resizer.vertical {
    width: 6px;
    top: 0;
    bottom: var(--timeline-height);
    cursor: col-resize;
  }
  #library-resizer {
    left: calc(var(--rail-width) + var(--library-width) - 3px);
  }
  #inspector-resizer {
    right: calc(var(--inspector-width) - 3px);
  }
  #timeline-resizer {
    left: var(--rail-width);
    right: 0;
    bottom: calc(var(--timeline-height) - 3px);
    height: 6px;
    cursor: row-resize;
  }
}
@media (min-width: 951px) and (max-width: 1200px) {
  .editor-workspace {
    --rail-width: 62px;
  }
}
@media (max-width: 950px) {
  .panel-resizer {
    display: none;
  }
}
.resizing-vertical,
.resizing-vertical * {
  cursor: col-resize !important;
  user-select: none !important;
}
.resizing-horizontal,
.resizing-horizontal * {
  cursor: row-resize !important;
  user-select: none !important;
}
.timeline-ruler {
  position: sticky;
  top: 0;
  z-index: 6;
  background-color: var(--panel);
}
#ruler-playhead {
  position: absolute;
  bottom: 0;
  height: 13px;
  width: 10px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 65%, 50% 100%, 0 65%);
  transform: translateX(-4.5px);
  pointer-events: none;
}
#playhead > span {
  display: none;
}
.clip-context-menu {
  position: fixed;
  z-index: 30;
  width: 232px;
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 5px;
}
.clip-context-menu button {
  width: 100%;
  justify-content: space-between;
  padding: 9px 10px;
  font-size: 11px;
}
.clip-context-menu button:hover:not(:disabled),
.clip-context-menu button:focus-visible {
  background: var(--violet-soft);
  color: var(--violet);
}
.clip-context-menu kbd {
  font-size: 9px;
  color: var(--muted);
  border: none;
}
.clip-context-menu hr {
  border: none;
  border-top: 1px solid var(--line-strong);
  margin: 5px;
}
.context-title {
  padding: 9px 10px;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-label {
  display: block;
  padding: 6px 13px;
}
.track-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
}
.track-controls {
  display: flex;
  gap: 5px;
  margin-top: 3px;
}
.track-controls button {
  width: 23px;
  height: 19px;
  padding: 1px;
  font-size: 13px;
  color: var(--muted);
}
.track-controls button svg {
  width: 12px;
  height: 12px;
}
.track-controls button[aria-pressed='true'] {
  color: var(--violet);
  background: var(--violet-soft);
}
.hidden-layer .timeline-clip {
  opacity: 0.35;
}
.muted-layer .clip-title::before {
  content: '♫̸ ';
}
.aspect-picker {
  position: relative;
}
.aspect-trigger {
  background: var(--raised);
  border: 1px solid var(--line);
  font-size: 10px;
  padding: 7px 9px;
  color: var(--secondary);
}
.aspect-trigger svg {
  width: 13px;
  height: 13px;
}
.aspect-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  z-index: 15;
  width: 246px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--raised);
}
.aspect-option {
  width: 100%;
  min-height: 55px;
  border-radius: 7px;
  justify-content: flex-start;
  padding: 8px 12px;
  gap: 15px;
  text-align: left;
}
.aspect-option:hover:not(:disabled) {
  background: var(--violet-soft);
}
.aspect-option[aria-checked='true'] {
  color: var(--violet);
}
.aspect-shape-wrap {
  width: 31px;
  display: flex;
  justify-content: center;
}
.aspect-shape {
  display: block;
  border: 1.5px solid var(--muted);
  background: #ffffff06;
  border-radius: 3px;
}
.aspect-option[aria-checked='true'] .aspect-shape {
  border-color: var(--violet);
}
.aspect-option strong {
  display: block;
  font-size: 13px;
  font-weight: 550;
  margin-bottom: 4px;
}
.aspect-option small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}
.aspect-check {
  margin-left: auto;
  color: var(--violet);
}
.aspect-option:first-child {
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  margin-bottom: 5px;
  padding-bottom: 15px;
}
.viewer-toolbar {
  position: relative;
  z-index: 10;
}
.fade-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.fade-presets button,
.filter-grid button {
  padding: 4px 4px 7px;
}
.fade-presets button {
  flex-direction: column;
  gap: 10px;
}
.fade-presets strong {
  font-size: 10px;
  font-weight: 500;
  color: var(--secondary);
}
.fade-demo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 78px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--violet);
  font-size: 32px;
  font-weight: 750;
  background: var(--raised);
}
.fade-in {
  background: linear-gradient(90deg, var(--inset), var(--violet-soft));
}
.fade-out {
  background: linear-gradient(90deg, var(--violet-soft), var(--inset));
}
.fade-both {
  background: linear-gradient(90deg, var(--inset), var(--violet-soft), var(--inset));
}
.filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 10px;
}
.filter-grid button {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.filter-sample {
  height: 70px;
  background: #87909a;
  border-radius: 7px;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 27px;
  color: #f0c793;
}
.filter-sample img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.filter-grid strong {
  font-size: 10px;
  font-weight: 500;
  color: var(--secondary);
  text-align: left;
}
.filter-grid .active .filter-sample {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}
.filter-grid .active strong {
  color: var(--violet);
}

.layer-group {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.layer-group > header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 5px;
  background: var(--raised);
  cursor: grab;
}
.layer-group > header strong {
  font-size: 10px;
  flex: 1;
}
.layer-grip {
  color: var(--muted);
}
.layer-order {
  display: flex;
}
.layer-order button,
.layer-clip-action {
  padding: 3px;
  min-width: 21px;
  font-size: 12px;
  background: transparent;
  border: 0;
}
.layer-group .track-controls {
  margin: 0;
}
.layer-entry {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
}
.layer-entry .layer-item {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 9px 5px;
  font-size: 10px;
}
.layer-entry .layer-item span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layer-drop-target {
  border-color: var(--mint);
  box-shadow: 0 0 0 1px var(--mint);
}
.layer-empty {
  color: var(--muted);
  padding: 5px 12px;
  font-size: 10px;
}
.clip-hidden,
.hidden-layer .layer-entry {
  opacity: 0.4;
}
.audio-clip {
  background: #204e46;
  border-color: #4e9d8b;
}
.audio-waveform {
  max-width: none;
  height: 100%;
  object-fit: fill;
}
#snap-toggle[aria-pressed='true'] {
  background: #203b3d;
  color: var(--mint);
}
input[type='range'] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: #60636d;
}
input[type='range']::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: #60636d;
}
input[type='range']::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  background: #f2f3f7;
  border: 1px solid #a3a7b3;
  border-radius: 50%;
  box-shadow: 0 1px 3px #0004;
}
input[type='range']::-moz-range-thumb {
  width: 11px;
  height: 11px;
  background: #f2f3f7;
  border: 1px solid #a3a7b3;
  border-radius: 50%;
}
.timeline-zoom {
  gap: 4px;
}
.timeline-zoom input {
  width: 110px;
}
.timeline-zoom .icon-button {
  width: 30px;
  height: 30px;
}
.timeline-zoom input::-webkit-slider-thumb {
  width: 5px;
  height: 5px;
  margin-top: -1px;
  border: 0;
  background: #b9bdc7;
}
.timeline-zoom input::-moz-range-thumb {
  width: 5px;
  height: 5px;
  border: 0;
  background: #b9bdc7;
}
.property-section .range-field {
  display: block;
  margin: 14px 0;
}
.range-control {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 7px;
}
.range-control input {
  flex: 1;
  width: 0;
}
.range-control output {
  min-width: 48px;
  text-align: center;
  padding: 7px;
  border-radius: 7px;
  background: var(--raised);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.color-picker {
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--raised);
}
.color-picker summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
}
.color-picker summary::-webkit-details-marker {
  display: none;
}
.current-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--swatch);
  border: 1px solid #8886;
}
.color-picker-body {
  padding: 0 10px 12px;
}
.color-caption {
  display: block;
  font-size: 10px;
  color: var(--secondary);
  margin: 12px 0 8px;
}
.color-picker-body { container-type: inline-size; }
.color-grid {
  display: grid;
  grid-template-columns: repeat(var(--swatch-columns, 7), minmax(0, 24px));
  justify-content: start;
  gap: max(4px, calc((100cqw - 168px) / 6));
}
.color-swatch {
  padding: 0;
  width: 100%;
  aspect-ratio: 1;
  min-height: 18px;
  background: var(--swatch);
  border-radius: 4px;
  border: 1px solid #8886;
}
.color-swatch.selected {
  outline: 2px solid var(--violet);
  outline-offset: 1px;
}
.transparent-swatch {
  background: linear-gradient(45deg, transparent 48%, #9398a5 49%, #9398a5 51%, transparent 52%), var(--panel);
}
.color-tools {
  display: flex;
  gap: 8px;
  align-items: center;
}
.color-tools > .color-swatch {
  width: 25px;
}
.property-section .custom-color {
  display: flex;
  margin: 0;
  gap: 6px;
  cursor: pointer;
}
.custom-color input[type='color'] {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 5px;
}
button {
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

#export,
#start-export,
#download-export {
  background: linear-gradient(110deg, #aa85f3 0%, #c599f5 52%, #8cded2 100%);
  color: #211832;
  border: 0;
  box-shadow: 0 3px 14px #ad89f31c;
}
#export:hover,
#start-export:hover,
#download-export:hover {
  filter: brightness(1.08);
}
#export-dialog {
  width: min(490px, 94vw);
  max-height: min(92dvh, calc(100dvh - 24px));
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
}
#export-dialog[open] { display: flex; flex-direction: column; }
#export-dialog .dialog-heading { margin: 0; padding: 22px 28px; flex-shrink: 0; }
.export-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 28px 18px; }
.export-dialog-footer { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px 28px 22px; border-top: 1px solid var(--line); background: var(--panel); }
#export-dialog .export-dialog-footer > :is(button, a) { width: 100%; margin-top: 0; }
#export-dialog .dialog-heading h2 {
  font-size: 21px;
}
.export-cover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.export-cover strong {
  display: block;
  font-size: 13px;
}
.export-cover span {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  color: var(--muted);
}
.export-cover img {
  width: 116px;
  height: auto;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  object-fit: contain;
  background: #09090c;
}
#export-description {
  margin: 18px 0 0;
}
#export-dialog .export-settings {
  gap: 17px;
  margin-top: 21px;
}
.export-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
}
.export-field-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
}
#export-filename,
.select-trigger {
  width: 100%;
  height: 45px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 14px;
  background: var(--raised);
  font-size: 13px;
  color: var(--ink);
}
.editor-select {
  position: relative;
}
.select-source {
  position: absolute;
  width: 1px !important;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.select-trigger {
  justify-content: space-between;
  text-align: left;
  font-weight: 400;
}
.select-trigger svg {
  width: 18px;
  height: 18px;
  color: var(--secondary);
  transition: transform 0.15s;
}
.select-trigger[aria-expanded='true'] {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px #b49afa20;
}
.select-trigger[aria-expanded='true'] .dropdown-chevron {
  transform: rotate(180deg);
}
.select-options {
  position: fixed;
  inset: auto;
  margin: 0;
  overflow-y: auto;
  z-index: 3;
  background: #26272d;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 22px #0004;
}
.select-options button {
  width: 100%;
  justify-content: space-between;
  padding: 11px;
  border: 0;
  text-align: left;
  border-radius: 8px;
  background: transparent;
}
.select-options button[aria-selected='true'],
.select-options button:hover {
  background: #34333f;
}
.select-options strong {
  font-size: 13px;
  font-weight: 450;
}
.select-options small {
  display: block;
  font-size: 10px;
  color: var(--secondary);
  margin-top: 5px;
}
.select-check {
  color: var(--mint);
  visibility: hidden;
}
[aria-selected='true'] .select-check {
  visibility: visible;
}
#export-dialog .export-spec {
  margin: 18px 0 0;
  padding: 14px 0;
}
#export-dialog #start-export,
#export-dialog #download-export {
  min-height: 45px;
  border-radius: 10px;
  font-size: 14px;
  margin-top: 10px;
}
#export-status:empty {
  display: none;
}
#undo:disabled,
#redo:disabled {
  opacity: 0.28;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000a;
  backdrop-filter: blur(4px);
}
.modal-overlay.open {
  display: flex;
}
.modal-overlay .modal {
  width: min(440px, 92vw);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 20px 70px #0006;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px;
  border-bottom: 1px solid var(--line);
}
.modal-header h2 {
  font-size: 17px;
  margin: 0;
}
.modal-close {
  background: transparent;
  border: 0;
  padding: 5px;
}
.modal-body {
  padding: 24px;
  text-align: center;
}
.confirm-icon {
  margin-bottom: 16px;
}
.confirm-text h3 {
  font-size: 15px;
  margin: 0 0 10px;
}
.confirm-text p {
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 22px;
  border-top: 1px solid var(--line);
}
.modal-footer button {
  padding: 10px 15px;
  font-size: 12px;
}
.modal-footer .btn-primary {
  background: var(--violet);
  color: #211832;
  border-color: transparent;
}
.modal-footer .btn-danger {
  background: #dc2626;
  color: #fff;
  border-color: transparent;
  font-weight: 650;
}
.modal-footer .btn-danger:hover:not(:disabled) {
  background: #b91c1c;
  color: #fff;
}

#export,
#start-export,
#download-export {
  color: #fff;
  background: linear-gradient(110deg, #7752be, #8553b8 52%, #267f7b);
}
.modal-footer .btn-primary:hover:not(:disabled) {
  background: #c5adff;
  color: #211832;
  border-color: #c5adff;
}
#fullscreen-seek,
#exit-fullscreen {
  display: none;
}
.viewer-panel:fullscreen {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  min-width: 0;
  overflow: hidden;
  background: #101113;
}
.viewer-panel:fullscreen .viewer-toolbar,
.viewer-panel:fullscreen .preview-note,
.viewer-panel:fullscreen .frame-rate,
.viewer-panel:fullscreen #back-start,
.viewer-panel:fullscreen #selection {
  display: none;
}
.viewer-panel:fullscreen .stage {
  width: 100%;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  padding: 24px 32px;
}
.viewer-panel:fullscreen .playback-bar {
  flex: 0 0 56px;
  justify-content: space-between;
  padding: 0 20px;
}
.viewer-panel:fullscreen .transport {
  justify-content: flex-start;
}
.viewer-panel:fullscreen #fullscreen-seek {
  display: block;
  flex: 0 0 14px;
  width: 100%;
  margin: 0;
  border-radius: 0;
}
.viewer-panel:fullscreen #exit-fullscreen {
  display: inline-flex;
}
.viewer-panel:fullscreen #preview {
  cursor: default;
}

.color-swatch:hover:not(:disabled) {
  background: var(--swatch);
  border-color: var(--violet);
}
.color-swatch.transparent-swatch:hover:not(:disabled) {
  background: linear-gradient(45deg, transparent 48%, #9398a5 49%, #9398a5 51%, transparent 52%), var(--panel);
}
.color-picker {
  margin: 7px 0;
  border-radius: 6px;
}
.color-picker summary {
  padding: 6px 8px;
  gap: 7px;
  font-size: 10px;
}
.current-color {
  width: 15px;
  height: 15px;
}
.resize-handle,
.resize-handle:hover:not(:disabled) {
  position: absolute;
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--mint);
  background: #fff;
  pointer-events: auto;
  touch-action: none;
  transform: translate(-50%, -50%);
}
.resize-handle[data-resize='nw'] {
  left: 0;
  top: 0;
  cursor: nwse-resize;
}
.resize-handle[data-resize='n'] {
  left: 50%;
  top: 0;
  cursor: ns-resize;
  width: 18px;
  height: 7px;
  border-radius: 5px;
}
.resize-handle[data-resize='ne'] {
  left: 100%;
  top: 0;
  cursor: nesw-resize;
}
.resize-handle[data-resize='e'] {
  left: 100%;
  top: 50%;
  cursor: ew-resize;
  width: 7px;
  height: 18px;
  border-radius: 5px;
}
.resize-handle[data-resize='se'] {
  left: 100%;
  top: 100%;
  cursor: nwse-resize;
}
.resize-handle[data-resize='s'] {
  left: 50%;
  top: 100%;
  cursor: ns-resize;
  width: 18px;
  height: 7px;
  border-radius: 5px;
}
.resize-handle[data-resize='sw'] {
  left: 0;
  top: 100%;
  cursor: nesw-resize;
}
.resize-handle[data-resize='w'] {
  left: 0;
  top: 50%;
  cursor: ew-resize;
  width: 7px;
  height: 18px;
  border-radius: 5px;
}

/* The editor follows the shared application theme preference. */
:root[data-theme='light'] {
  color-scheme: light;
  --desk: #edf0f5;
  --panel: #ffffff;
  --raised: #f0f1f6;
  --inset: #e7eaf0;
  --stage: #e3e7ed;
  --ink: #252232;
  --secondary: #595668;
  --muted: #706d80;
  --faint: #8c8999;
  --line: #29233912;
  --line-strong: #29233926;
  --violet: #7852ba;
  --violet-soft: #7852ba14;
  --mint: #207e6b;
  --danger: #be3853;
  --video-track: #c8e1d9;
  --text-track: #ded0ef;
}
[data-theme='light'] .select-options {
  background: var(--panel);
}
[data-theme='light'] .select-option:hover,
[data-theme='light'] .select-option:focus-visible {
  background: var(--raised);
}
[data-theme='light'] .audio-clip {
  background: #bedfd7;
  border-color: #559b8c;
}
[data-theme='light'] .text-clip .clip-title {
  color: var(--ink);
}
[data-theme='light'] .track-lane {
  border-color: var(--line);
}
.viewer-panel:fullscreen {
  background: var(--stage);
}
.media-select {
  width: 100%;
  padding: 0;
  display: block;
  text-align: left;
}
.media-card {
  cursor: grab;
  border: 1px solid transparent;
  border-radius: 8px;
}
.media-card.selected-media {
  border-color: var(--violet);
}
.media-card .media-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: absolute;
  top: 38px;
  right: 5px;
  width: 25px;
  height: 25px;
  padding: 0;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-size: 20px;
  opacity: 0;
}
.media-card:hover .media-add,
.media-card:focus-within .media-add {
  opacity: 1;
}
.media-card .media-add:hover {
  background: var(--violet);
  filter: brightness(1.1);
}
.media-drop-target {
  outline: 2px solid var(--violet);
  outline-offset: -2px;
  background: var(--violet-soft);
}
.range-control input[type='number'] {
  width: 62px;
  flex: 0 0 62px;
  padding: 6px;
  text-align: center;
}
.corner-controls .segmented {
  margin: 10px 0;
}
.corner-controls [aria-pressed='true'] {
  background: var(--violet-soft);
  color: var(--violet);
}
@media (hover: none) {
  .media-card .media-add,
  .media-remove {
    opacity: 1;
  }
}

.timeline-footer > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.select-options {
  color: var(--ink);
}
[data-theme='light'] .select-options button[aria-selected='true'],
[data-theme='light'] .select-options button:hover,
[data-theme='light'] .select-options button:focus-visible {
  background: var(--raised);
}
.library-top-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 14px;
}
.library-top-actions .link-import-button { flex: 1; min-width: 0; margin: 0; }
.library-top-actions .icon-button { flex: 0 0 36px; height: auto; }
#remove-all-uploads { border: 1px solid var(--line); }
.link-import-button {
  width: 100%;
  margin: 0 0 14px;
  padding: 9px;
  border: 1px solid var(--line-strong);
  color: var(--secondary);
}
#link-dialog {
  width: min(480px, calc(100vw - 32px));
}
.link-form {
  display: grid;
  gap: 16px;
}
.link-form input {
  width: 100%;
  padding: 12px;
  background: var(--raised);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}
.link-form label {
  display: grid;
  gap: 7px;
}
.link-info {
  display: grid;
  gap: 12px;
}
.link-info strong {
  overflow-wrap: anywhere;
}
.link-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#link-status,
#link-background-status {
  color: var(--secondary);
  line-height: 1.5;
}
#link-background-status:empty {
  display: none;
}
#link-background-status {
  padding-bottom: 10px;
  font-size: 10px;
}

[data-theme='light'] #snap-toggle[aria-pressed='true'] {
  background: #def2eb;
}
[data-theme='light'] .selection-label {
  color: #fff;
}

.link-range-field {
  display: grid;
  gap: 6px;
}
.link-form input[type='range'] {
  padding: 0;
  height: 18px;
  background: transparent;
  border: 0;
}
.link-result-media {
  width: 100%;
  max-height: 310px;
  object-fit: contain;
  background: var(--inset);
  border-radius: 10px;
}
.link-result-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.link-mode {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.link-mode button {
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
}
.link-mode button[aria-pressed='true'] {
  color: var(--violet);
  background: var(--violet-soft);
}
#link-result-name {
  overflow-wrap: anywhere;
}

.media-used {
  position: absolute;
  top: 4px;
  left: 4px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  background: rgb(36 94 80 / 78%);
}
.media-used[hidden] { display: none; }

.media-skeleton .media-visual { background: var(--raised); }
.media-skeleton .media-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--line-strong) 50%, transparent 80%);
  animation: media-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes media-skeleton-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .media-skeleton .media-visual::after { animation: none; }
}

/* Buffering messages must not move the playback controls while scrubbing. */
.playback-bar .preview-note {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playback-bar .transport {
  flex: 0 0 auto;
}
.timecode {
  white-space: nowrap;
  align-items: center;
  line-height: 1.4;
}
.timecode #current-time,
.timecode #total-time {
  flex: 0 0 8ch;
  width: 8ch;
  text-align: center;
}
.playback-bar .play-button,
.playback-bar .icon-button {
  flex-shrink: 0;
}

.link-result-actions > button {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  padding: 10px 12px;
}

.rail-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rail-bottom #themeToggle {
  width: 40px;
  height: 34px;
  margin-bottom: 8px;
}

.viewer-panel {
  container-type: inline-size;
}
.playback-bar {
  position: relative;
}
.playback-bar .preview-note {
  max-width: calc(50% - 112px);
}
.playback-bar .frame-rate {
  margin-left: auto;
}
.playback-bar .transport {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 32px 30px 32px;
  gap: 10px;
}
.transport #back-start {
  position: absolute;
  right: calc(100% + 8px);
}
.transport .timecode {
  position: absolute;
  left: calc(100% + 12px);
}
@container (max-width: 540px) {
  .playback-bar .preview-note,
  .playback-bar .frame-rate {
    visibility: hidden;
  }
  .transport .timecode {
    font-size: 8px;
    gap: 4px;
    left: calc(100% + 4px);
  }
}
.viewer-panel:fullscreen .transport {
  position: static;
  transform: none;
}
.viewer-panel:fullscreen .transport .timecode {
  position: static;
}
.viewer-panel:fullscreen .transport {
  grid-template-columns: 32px 30px 32px auto;
}
@container (max-width: 400px) {
  .playback-bar {
    height: 70px;
  }
  .transport .timecode {
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
  }
}
.viewer-panel:fullscreen .transport .timecode {
  transform: none;
}

.export-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.export-field-row:has(#export-fps-field[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

/* Source proportions remain stable while the library panel resizes. */
.media-grid { align-items: start; }
.media-visual { display: block; position: relative; width: 100%; overflow: hidden; border-radius: 6px; }
.media-visual .media-thumb { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; }
.media-visual .media-length { top: auto; bottom: 5px; }
.media-card .media-add { top: auto; bottom: 26px; }
.playback-bar .play-button:hover { color: #fff; }
.link-result-actions > button { height: 42px; margin: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; }
#preview-quality-field { display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; }
#preview-quality-field .export-field-label { font-size: 10px; margin: 0; }
.canvas-options .aspect-trigger,
#preview-quality-field .select-trigger {
  height: 30px;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 10px;
  gap: 6px;
}
#preview-quality-field .select-trigger svg { width: 13px; height: 13px; }
#preview-quality-list { min-width: 140px; padding: 4px; border-radius: 8px; overflow-x: hidden; }
#preview-quality-list button { min-height: 32px; padding: 7px 9px; gap: 16px; }
#preview-quality-list strong { font-size: 11px; }
#preview-quality-list .select-check { flex-shrink: 0; }
#link-image-preview { max-width: 100%; max-height: 220px; object-fit: contain; margin: 12px auto; }
#link-image-preview:not([hidden]) { display: block; }

.timeline-selection-box { position: fixed; pointer-events: none; z-index: 100; border: 1px solid var(--violet); background: color-mix(in srgb, var(--violet) 18%, transparent); }

#media-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
#media-library .media-column { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#media-library .library-empty { column-span: all; }

#preview-quality-field.preparing .select-trigger::before { content: ''; width: 8px; height: 8px; border: 1px solid var(--secondary); border-top-color: transparent; border-radius: 50%; animation: preview-spin 1s linear infinite; }
@keyframes preview-spin { to { transform: rotate(360deg); } }
.media-card .media-add,
.media-card .media-remove {
  width: 28px;
  height: 28px;
  right: 4px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #fff;
}
.media-card .media-add { top: 38px; bottom: auto; }
.media-card .media-remove { top: 4px; font-size: 18px; }

.project-heading input:hover { background: var(--raised); border-color: var(--line); }
.project-heading input:focus { background: var(--raised); border-color: var(--violet); }
.project-heading input::selection { background: var(--violet-soft); }

.media-view-toggle { display: flex; gap: 3px; margin-left: auto; }
.media-view-toggle button { width: 27px; height: 27px; padding: 5px; color: var(--secondary); }
.media-view-toggle button[aria-pressed='true'] { color: var(--violet); background: var(--violet-soft); }
#media-panel[data-view='list'] #media-library { display: flex; flex-direction: column; gap: 8px; }
#media-panel[data-view='list'] .media-card { width: 100%; }
#media-panel[data-view='list'] .media-select { display: flex; align-items: center; gap: 10px; padding-right: 34px; min-height: 76px; }
#media-panel[data-view='list'] .media-visual { flex: 0 0 72px; width: 72px; height: 64px; aspect-ratio: auto !important; }

#media-panel[data-view='grid'] #downloads-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#media-panel[data-view='grid'] .download-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
#media-panel[data-view='grid'] .download-thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.media-hover-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; background: var(--inset); }
.media-scrub-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 3px #000; pointer-events: none; }
.media-preview-popover { position: fixed; inset: auto; margin: 0; padding: 12px; width: min(310px, calc(100vw - 24px)); background: var(--raised); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 12px 40px #0006; overflow: auto; max-height: calc(100vh - 16px); }
.media-preview-popover video, .media-preview-popover img { display: block; width: 100%; max-height: min(440px, calc(100vh - 110px)); object-fit: contain; background: var(--inset); border-radius: 6px; }
.media-preview-popover audio { display: block; width: 100%; margin-top: 28px; }
.media-preview-popover footer { display: flex; align-items: center; gap: 8px; padding-top: 10px; }
.media-preview-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 11px; color: var(--secondary); }
.media-preview-popover .media-preview-close { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; background: #000b; color: #fff; z-index: 1; border-radius: 50%; }
.media-preview-add { color: #fff; background: var(--violet); border-radius: 50%; }
.media-preview-popover .icon-button:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 12%, var(--raised)); color: var(--ink); }
.media-preview-popover .media-preview-add:hover:not(:disabled) { background: color-mix(in srgb, var(--violet) 85%, #fff); color: #fff; }
.media-preview-popover .media-preview-close:hover:not(:disabled) { background: #000e; color: #fff; }
.media-context-menu { inset: auto; margin: 0; border: 1px solid var(--line-strong); }
.media-context-menu button { justify-content: flex-start; gap: 12px; }
.media-context-menu button > span:first-child { width: 18px; font-size: 20px; text-align: center; }

#zoom::-webkit-slider-thumb { transition: transform 120ms ease; }
#zoom:hover::-webkit-slider-thumb, #zoom:focus-visible::-webkit-slider-thumb { transform: scale(2); }
#zoom::-moz-range-thumb { transition: transform 120ms ease; }
#zoom:hover::-moz-range-thumb, #zoom:focus-visible::-moz-range-thumb { transform: scale(2); }
#zoom:hover::-webkit-slider-runnable-track { height: 4px; }
#zoom:hover::-moz-range-track { height: 4px; }
@media (prefers-reduced-motion: reduce) {
  #zoom::-webkit-slider-thumb, #zoom::-moz-range-thumb { transition: none; }
}

#media-panel[data-view='list'] .media-select { padding: 6px 38px 6px 6px; }
#media-panel[data-view='list'] .media-length { display: none; }
.media-details { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; color: var(--secondary); font-size: 10px; }
.media-details strong { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 550; color: var(--ink); }

.layer-name-button { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-content: flex-start; padding: 2px 3px; font: inherit; color: inherit; }
.layer-name-button:hover { color: var(--ink); }
.layer-name-input { min-width: 0; width: 100%; padding: 2px 3px; font: inherit; border-radius: 3px; }
.track-name > svg { flex-shrink: 0; }
.track-name .layer-name-button, .track-name .layer-name-input { flex: 1; }
.layer-group > header > .layer-name-button, .layer-group > header > .layer-name-input { flex: 1; font-weight: 550; }

.download-card { position: relative; }
.download-visual { position: relative; overflow: hidden; border-radius: 7px; background: var(--inset); }
.download-card > .download-visual { flex: 0 0 62px; width: 62px; height: 48px; }
.download-visual .download-thumb, .download-visual .download-expired { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 0; }
.download-visual .download-expired { display: grid; place-items: center; }
.download-platform, .download-duration { position: absolute; display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border-radius: 4px; background: #101114cc; color: #fff; font-size: 9px; line-height: 1.2; }
.download-platform { top: 6px; left: 6px; }
.download-duration { bottom: 6px; left: 6px; font-variant-numeric: tabular-nums; }
.download-expiry { display: flex !important; align-items: flex-start; gap: 4px; }
.download-expiry svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 1px; }
.download-card .download-import { width: 28px; height: 28px; flex-shrink: 0; padding: 0; background: var(--violet); color: #fff; border-radius: 50%; }
.download-card .download-import:hover:not(:disabled) { background: var(--violet); filter: brightness(1.1); }
#media-panel[data-view='grid'] #downloads-library { gap: 14px 10px; align-items: start; }
#media-panel[data-view='grid'] .download-card { display: block; padding: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--panel); transition: border-color 120ms ease; }
#media-panel[data-view='grid'] .download-card:hover { border-color: var(--line-strong); }
#media-panel[data-view='grid'] .download-card > .download-visual { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
#media-panel[data-view='grid'] .download-visual .download-thumb, #media-panel[data-view='grid'] .download-visual .download-expired { position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%; }
#media-panel[data-view='grid'] .download-details { padding: 8px; }
#media-panel[data-view='grid'] .download-details p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; line-height: 1.4; font-weight: 500; font-size: 10px; min-height: 28px; }
#media-panel[data-view='grid'] .download-list-meta { display: none; }
#media-panel[data-view='grid'] .download-import { position: absolute; right: 6px; top: 6px; box-shadow: 0 2px 7px #0003; }
#media-panel[data-view='grid'] .download-platform { max-width: calc(100% - 46px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#media-panel[data-view='list'] .download-platform, #media-panel[data-view='list'] .download-duration { display: none; }
.download-card.is-expired .download-visual { opacity: 0.55; }
#canvas-import,
#canvas-import:hover:not(:disabled) {
  color: #fff;
}
#canvas-import { background: #8b5cf6; }
#canvas-import:hover:not(:disabled) { background: #7c3aed; }

.editor-header { position: relative; z-index: 40; }
.user-menu-compact .user-menu-trigger { padding: 0; border-radius: 50%; }
.user-menu-compact .user-name,
.user-menu-compact .user-menu-arrow { display: none; }
.user-menu-compact .user-avatar { width: 30px; height: 30px; }

#media-panel > .segmented button { gap: 8px; }
#media-panel .segmented .count-badge { flex-shrink: 0; min-width: 20px; padding: 2px 5px; font-variant-numeric: tabular-nums; }

.preview-player { position: relative; overflow: hidden; border-radius: 6px; }
.preview-player video { cursor: pointer; }
.preview-player-controls { position: absolute; inset: auto 0 0; padding: 28px 12px 8px; color: #fff; background: linear-gradient(transparent, #000b); }
.preview-player-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.preview-player-controls .preview-player-toggle { width: 30px; height: 30px; padding: 5px; color: #fff; border-radius: 5px; }
.preview-player-controls .preview-player-toggle:hover { background: #ffffff20; color: #fff; }
.preview-player-toggle svg { width: 20px; height: 20px; }
.preview-player-time { display: flex; gap: 8px; align-items: center; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preview-player-divider { opacity: 0.5; }
.preview-player-controls .preview-player-seek { display: block; appearance: none; width: 100%; height: 4px; margin: 0; padding: 0; border: 0; border-radius: 4px; cursor: pointer; background: linear-gradient(to right, var(--violet) var(--progress, 0%), #ffffff55 var(--progress, 0%)); }
.preview-player-seek::-webkit-slider-thumb { appearance: none; width: 11px; height: 11px; border: 0; border-radius: 50%; background: #fff; }
.preview-player-seek::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: #fff; }
.preview-player-audio { margin-top: 28px; min-height: 80px; background: var(--inset); }
.preview-player-audio audio { display: none; }

.local-import-notice { color: var(--muted); font-size: 10px; line-height: 1.5; margin: 0 0 14px; }

.project-file-action { background: var(--raised); }
.project-file-action span { display: none; }
@media (min-width: 1200px) {
  .project-file-action { width: auto; padding: 0 12px; gap: 7px; }
  .project-file-action span { display: inline; white-space: nowrap; font-size: 12px; }
}

.project-health { margin: 12px 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; color: var(--muted); }
.project-health summary { cursor: pointer; line-height: 1.5; }
.project-health p { margin: 8px 0; line-height: 1.5; }
#missing-media:empty { display: none; }
#missing-media { padding: 10px; margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; }
#missing-media button { display: block; width: 100%; text-align: left; overflow-wrap: anywhere; margin-top: 8px; }
#cancel-export { width: 100%; margin: 8px 0; }

canvas.audio-waveform { position: absolute; top: 22px; pointer-events: none; }

.media-thumb[src$="media-placeholder.svg"], .download-thumb[src$="media-placeholder.svg"], #export-cover[src$="media-placeholder.svg"] {
  background: linear-gradient(135deg, #292832, #202027);
}

#editor-settings-dialog { width: min(520px, calc(100vw - 32px)); }
.editor-settings-section { padding: 20px 0; border-top: 1px solid var(--line); }
.editor-settings-section h3 { margin: 0 0 12px; font-size: 14px; }
.editor-settings-section p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 10px 0; }
.editor-settings-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.editor-settings-actions .tool-button { border: 1px solid var(--line); padding: 10px 12px; }
.editor-settings-actions .storage-danger { color: var(--danger); }
.editor-settings-actions .storage-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }

.canvas-wrap { container-type: inline-size; }
.canvas-empty { padding: 12px; }
.canvas-empty h2 { font-size: clamp(14px, 7cqw, 31px); }
.canvas-empty p, .canvas-empty > span { max-width: 100%; text-wrap: balance; }
@container (max-width: 300px) {
  .canvas-empty { gap: 8px; }
  .canvas-empty p { font-size: 10px; }
  .canvas-empty .primary-button { max-width: 100%; padding-inline: 10px; }
}

#export-access-dialog .dialog-footer { display: flex; flex-direction: column; gap: 12px; }
#export-access-dialog .dialog-footer > button { width: 100%; margin-top: 0; justify-content: center; }
#export-access-dialog .export-dialog-body { padding-inline: 0; text-align: left; }
#export-access-dialog .quiet-button { border: 1px solid var(--line-strong); border-radius: 7px; }
#export-access-dialog .primary-button { background: #7438cc; color: #fff; }
#export-access-dialog .primary-button:hover:not(:disabled) { background: #642bb8; }
#export-access-dialog [data-checkout-error] {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 7px;
}
#export-access-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.export-premium-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 18px;
}

.export-duration { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; font-size: 12px; color: var(--secondary); }
.export-duration strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.clip-effects { position: absolute; inset: 0; pointer-events: none; }
.effect-region { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--violet) 22%, transparent); border-inline: 1px solid var(--violet); }
.effect-in { clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.effect-out { clip-path: polygon(0 0, 100% 100%, 0 100%); }
.effect-transition { clip-path: none; background: repeating-linear-gradient(135deg, var(--violet-soft) 0 5px, color-mix(in srgb, var(--violet) 25%, transparent) 5px 7px); }
.effect-handle { position: absolute; top: 1px; z-index: 5; width: 22px; height: 22px; padding: 0; border-radius: 4px; background: var(--panel); border: 1px solid var(--violet); color: var(--violet); font-size: 10px; cursor: ew-resize; pointer-events: auto; touch-action: none; transform: translateX(-50%); }
.effect-handle[style*="right:"] { transform: translateX(50%); }
.transition-handle { top: auto; bottom: 1px; }
.effect-tags { position: absolute; bottom: 2px; left: 8px; right: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; line-height: 16px; color: var(--ink); background: var(--inset); border-radius: 3px; padding-inline: 4px; }
.crossfade-button { width: 100%; margin-bottom: 12px; border: 1px solid var(--line-strong); }
#safe-area-overlay { position: absolute; inset: 10%; z-index: 3; pointer-events: none; border: 1px dashed var(--violet); box-shadow: 0 0 0 100vmax #0003; clip-path: inset(-100%); color: var(--violet); font-size: 10px; padding: 6px; }
#safe-area-overlay[data-mode="social"] { inset: 10% 18% 22% 8%; }
.canvas-wrap:has(#safe-area-overlay:not([hidden])) { overflow: hidden; }
.safe-area-options { display: grid; gap: 12px; padding: 8px 0 20px; }
.safe-area-options button { min-height: 44px; border: 1px solid var(--line-strong); }
.safe-area-options button[aria-pressed="true"] { color: var(--violet); border-color: var(--violet); }
.safe-area-options p { color: var(--muted); line-height: 1.6; }
@media (max-width: 950px) {
  .effect-handle { width: 26px; height: 24px; }
  .mobile-context-bar #ripple-delete, .mobile-context-bar #close-gaps { flex-direction: column; min-width: 78px; flex-shrink: 0; }
  .mobile-playback-tools #safe-area { margin-left: 8px; }
}

.timeline-snap-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--violet);
  box-shadow: 0 0 4px var(--violet);
  pointer-events: none;
  z-index: 8;
}

.timeline-layer-grip { position: absolute; right: 0; top: 0; width: 20px; height: 24px; padding: 0; cursor: grab; touch-action: none; color: var(--muted); }
.timeline-layer-grip.reordering { cursor: grabbing; color: var(--violet); }
.track-label:has(.timeline-layer-grip) .track-name { padding-right: 7px; }
.track-reorder-target { outline: 2px solid var(--violet); outline-offset: -2px; background: var(--violet-soft); }
@media (max-width: 950px) {
  .track-label .timeline-layer-grip { position: relative; width: 44px; height: 24px; display: block; }
  .track-label:has(.timeline-layer-grip) .track-controls button { height: 28px; }
}

.text-style-presets { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; flex-wrap: nowrap; }
.text-style-presets::-webkit-scrollbar { display: none; }
.text-style-presets button { flex: 0 0 auto; white-space: nowrap; }
.font-field { min-width: 0; width: 100%; }
.font-field .editor-select, .font-field .select-trigger { width: 100%; }
.font-options [role='option'] { min-height: 42px; font-size: 16px; }
.track-reorder-source { opacity: 0.3; }
.timeline-layer-ghost { position: fixed; z-index: 10000; pointer-events: none; overflow: hidden; margin: 0; border: 1px solid var(--violet); border-radius: 6px; background: var(--panel); box-shadow: 0 10px 26px #0006; opacity: 0.9; transform: scale(1.015); transform-origin: left center; }
.timeline-layer-ghost .track-label { position: relative; }
.timeline-layer-ghost.drop-ready { border-color: var(--mint, #82cdb7); box-shadow: 0 10px 26px #0006, 0 0 0 1px var(--mint, #82cdb7); }
.timeline-layer-drop-line { position: fixed; z-index: 10001; height: 3px; border-radius: 3px; background: var(--mint, #82cdb7); box-shadow: 0 0 8px #82cdb766; pointer-events: none; }
.timeline-layer-drop-line::before { content: ''; position: absolute; left: 0; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: inherit; }
.timeline-layer-ghost { animation: layer-drag-lift 120ms ease-out; transition: border-color 120ms, box-shadow 120ms; }
@keyframes layer-drag-lift { from { opacity: 0.5; } to { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .timeline-layer-ghost { animation: none; transition: none; } }

.color-picker summary.select-trigger { justify-content: flex-start; }
.color-picker .dropdown-chevron { margin-left: auto; flex-shrink: 0; }
.color-picker[open] > .select-trigger .dropdown-chevron { transform: rotate(180deg); }
.font-options strong { font-weight: inherit; font-family: inherit; }

.text-format-toolbar { display: grid; grid-template-columns: 50px repeat(6, minmax(0, 1fr)); gap: 2px; align-items: center; margin-block: 14px; }
.text-format-field { min-width: 0; }
.text-format-field > .export-field-label, .format-value-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.text-format-toolbar .select-trigger, .text-format-toggle { height: 36px; min-width: 0; width: 100%; padding: 0; border: 1px solid transparent; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--ink); font-size: 16px; }
.text-format-toolbar .select-trigger svg { width: 17px; height: 17px; flex-shrink: 0; }
.text-size-field .select-trigger { gap: 3px; background: var(--raised); font-size: 12px; }
.text-size-field .select-trigger .dropdown-chevron { width: 12px; }
.text-format-toggle[aria-pressed='true'] { background: var(--violet-soft); color: var(--violet); }
.text-format-toggle:hover, .text-format-toolbar .select-trigger:hover { background: var(--raised); }
.format-bold { font-weight: 800; }
.format-italic { font-style: italic; font-family: Georgia, serif; }
.format-underline { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 950px) { .text-format-toolbar .select-trigger, .text-format-toggle { height: 44px; } }
.timing-field { display: flex; margin-block: 14px; gap: 8px; color: var(--secondary); font-size: 11px; }
.timing-field > .range-control { width: 100%; }
.timing-field input[type='range'] { min-width: 0; flex: 1; }
.timing-field input[type='number'] { flex: 0 0 64px; width: 64px; }

.preset-scroll { position: relative; isolation: isolate; min-width: 0; max-width: 100%; margin-block: 12px; }
.preset-scroll .text-style-presets { margin: 0; user-select: none; }
.preset-scroll .scroll-dragging, .preset-scroll .scroll-dragging button { cursor: grabbing; }
.preset-scroll > .progressive-blur { --progressive-blur-tint-strong: var(--panel); --progressive-blur-tint-mid: color-mix(in srgb, var(--panel) 60%, transparent); z-index: 1; width: 28px; opacity: 0; transition: opacity 140ms; }
.preset-scroll > .scroll-edge-start { right: auto; }
.preset-scroll > .scroll-edge-end { left: auto; }
.preset-scroll[data-scroll-start='true'] > .scroll-edge-start,
.preset-scroll[data-scroll-end='true'] > .scroll-edge-end { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .preset-scroll > .progressive-blur { transition: none; } }

.fade-presets button { overflow: hidden; }
.fade-presets button:is(:hover, :focus-visible) .fade-demo { animation: transition-demo 1.8s ease-in-out infinite; }
.fade-demo { --demo-from: inset(0); --demo-to: inset(0); }
.fade-demo.wipe-left { --demo-from: inset(0 0 0 100%); }
.fade-demo.wipe-right { --demo-from: inset(0 100% 0 0); }
.fade-demo.wipe-up { --demo-from: inset(100% 0 0); }
.fade-demo.wipe-down { --demo-from: inset(0 0 100%); }
.fade-demo.reveal-horizontal { --demo-from: inset(0 50%); }
.fade-demo.reveal-vertical { --demo-from: inset(50% 0); }
.fade-demo.fade-in { --demo-opacity-from: 0; }
.fade-demo.fade-out { --demo-opacity-to: 0; }
.fade-demo.fade-both { --demo-opacity-from: 0; --demo-opacity-to: 0; }
@keyframes transition-demo {
  0%, 10% { clip-path: var(--demo-from); opacity: var(--demo-opacity-from, 1); }
  65% { clip-path: var(--demo-to); opacity: 1; }
  90%, 100% { clip-path: var(--demo-to); opacity: var(--demo-opacity-to, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .fade-presets button:is(:hover, :focus-visible) .fade-demo { animation: none; }
}

#text-fontSize-list { padding: 4px; min-width: 88px; }
#text-fontSize-list [role='option'] { min-height: 30px; padding: 5px 8px; }
#text-edit { overflow-wrap: anywhere; }

.clip-join-transition { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 5; width: 24px; height: 28px; padding: 0; border: 1px solid var(--violet); border-radius: 5px; background: var(--panel); color: var(--violet); }

.media-mark { position: absolute; top: 5px; left: 5px; z-index: 2; width: 24px; height: 24px; padding: 0; border: 1px solid var(--line-strong); border-radius: 5px; color: transparent; background: var(--panel); opacity: 0; }
.media-card:is(:hover, :focus-within, .marked-media) .media-mark { opacity: 1; }
.media-mark[aria-checked='true'] { background: var(--violet); color: #fff; border-color: var(--violet); }
.media-card.marked-media { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 6px; }
.media-card:has(.media-mark) .media-used { top: 34px; }
.media-selection-actions { display: flex; gap: 8px; align-items: center; margin-block: 10px; }
.media-selection-actions[hidden] { display: none; }
@media (hover: none) { .media-mark { opacity: 1; } }
#media-library { padding: 4px; }