/* [project]/delato-editor/studio/studio.css [app-client] (css) */
:root {
  --st-1: 1px;
  --st-2: 2px;
  --st-3: 3px;
  --st-4: var(--dl-s1);
  --st-5: 5px;
  --st-6: var(--dl-r-sm);
  --st-7: 7px;
  --st-8: var(--dl-s2);
  --st-9: 9px;
  --st-10: var(--dl-r-md);
  --st-11: 11px;
  --st-14: 14px;
  --st-15: var(--dl-fs-md);
  --st-18: var(--dl-fs-lg);
  --st-22: var(--dl-fs-xl);
  --st-26: 26px;
  --st-28: var(--dl-fs-2xl);
  --st-30: 30px;
  --st-36: var(--dl-fs-3xl);
  --st-38: 38px;
  --st-44: 44px;
  --st-52: 52px;
  --st-58: 58px;
  --st-74: 74px;
  --st-78: 78px;
  --st-90: 90px;
  --st-92: 92px;
  --st-99: var(--dl-r-full);
  --st-104: 104px;
  --st-150: 150px;
  --st-160: 160px;
  --st-180: 180px;
  --st-460: 460px;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light dark;
  --bg: var(--dl-bg);
  --panel: var(--dl-panel);
  --panel-2: var(--dl-panel-2);
  --line: var(--dl-line);
  --text: var(--dl-ink);
  --muted: var(--dl-dim);
  --accent: var(--dl-accent);
  --accent-ink: var(--dl-accent-ink);
  --play: var(--dl-err);
  --video: var(--dl-info);
  --audio: var(--dl-ok);
  --caption: var(--dl-warn);
  --title: var(--dl-accent);
  font-family: var(--dl-font);
  font-size: var(--dl-fs-sm);
}

@media (prefers-color-scheme: dark) {
  :root {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
  }
}

* {
  box-sizing: border-box;
}

html, body, #root {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: var(--dl-panel-2);
  border: var(--st-1) solid var(--dl-line-2);
  border-radius: var(--st-8);
  height: var(--st-28);
  padding: 0 var(--st-10);
  cursor: pointer;
}

button:hover {
  background: var(--dl-line-2);
}

button.on, button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: #0000;
  font-weight: 700;
}

button.primary:hover {
  background: var(--dl-accent);
}

button svg {
  width: var(--st-14);
  height: var(--st-14);
  display: block;
}

.app {
  -webkit-user-select: none;
  user-select: none;
  flex-direction: column;
  height: 100vh;
  display: flex;
}

input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

.topbar, .side, .inspector, .bin, .captions, .catalog, .modal {
  direction: inherit;
}

.timeline, .monitor, .timecode, .curve-box, .wheels, .field input, .zoom, .master, .tl-toolbar {
  direction: ltr;
}

.topbar {
  height: var(--st-52);
  align-items: center;
  gap: var(--dl-s2);
  padding: 0 var(--dl-s3);
  background: var(--dl-bg);
  border-bottom: var(--st-1) solid var(--line);
  flex: none;
  display: flex;
  overflow-x: auto;
}

.brand {
  align-items: center;
  gap: var(--dl-s2);
  flex: none;
  display: flex;
}

.brand strong {
  font-size: var(--st-15);
  line-height: 1.1;
  display: block;
}

.brand small {
  color: var(--muted);
  font-size: var(--st-11);
}

.logo {
  width: var(--st-26);
  height: var(--st-26);
  flex: none;
  display: block;
}

.project-name, .clip-name, .text-field input, .text-field select, .timecode, textarea {
  background: var(--dl-bg);
  border: var(--st-1) solid var(--dl-line-2);
  border-radius: var(--st-4);
  padding: var(--dl-s1) var(--dl-s2);
}

.project-name {
  width: var(--st-180);
  height: var(--st-28);
}

.topbar button:not(.dl-ibtn):not(.dl-tbtn) {
  height: var(--dl-s6);
}

.tl-toolbar button:not(.dl-ibtn):not(.dl-tbtn):not(.dl-tool) {
  height: var(--st-26);
}

.ba {
  margin: 0 0 var(--dl-s2);
  border-radius: var(--st-6);
  border: var(--st-1) solid var(--dl-line);
  background: var(--dl-bg);
  line-height: 0;
  position: relative;
  overflow: hidden;
}

.ba-layer {
  width: 100%;
  height: auto;
  display: block;
}

.ba-after {
  animation: 7s ease-in-out infinite alternate ba-sweep;
  position: absolute;
  inset: 0;
}

.ba.is-manual .ba-after {
  clip-path: polygon(0 0, var(--ba-x) 0, calc(var(--ba-x) - 7%) 100%, 0 100%);
  animation: none;
}

.ba-edge {
  width: var(--st-2);
  background: var(--dl-accent);
  transform-origin: top;
  pointer-events: none;
  animation: 7s ease-in-out infinite alternate ba-edge;
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
}

.ba.is-manual .ba-edge {
  animation: none;
  inset-inline-start: var(--ba-x);
  transform: skewX(-4deg);
}

.ba-cap {
  justify-content: space-between;
  align-items: center;
  gap: var(--dl-s2);
  padding: var(--st-4) var(--st-6);
  font-size: var(--dl-fs-xs);
  color: var(--dl-dim);
  line-height: normal;
  display: flex;
}

.ba-cap b {
  color: var(--dl-ink);
}

@keyframes ba-sweep {
  from {
    clip-path: polygon(0 0, 22% 0, 15% 100%, 0 100%);
  }

  to {
    clip-path: polygon(0 0, 88% 0, 81% 100%, 0 100%);
  }
}

@keyframes ba-edge {
  from {
    inset-inline-start: 19%;
    transform: skewX(-4deg);
  }

  to {
    inset-inline-start: 85%;
    transform: skewX(-4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ba-after, .ba-edge {
    animation: none;
  }

  .ba-after {
    clip-path: polygon(0 0, 55% 0, 48% 100%, 0 100%);
  }

  .ba-edge {
    inset-inline-start: 52%;
  }
}

.swatch.shot {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--st-4);
  width: 100%;
  height: auto;
}

.rail {
  padding: var(--dl-s2) var(--st-4);
  background: var(--panel);
  border-inline-end: var(--st-1) solid var(--dl-line);
  flex-direction: column;
  flex: none;
  align-items: center;
  display: flex;
}

.spacer {
  flex: 1;
}

.ro {
  color: var(--dl-warn);
  border: var(--st-1) solid var(--dl-warn);
  border-radius: var(--st-99);
  padding: 0 var(--dl-s2);
  height: var(--st-22);
  font-size: var(--dl-fs-xs);
  align-items: center;
  display: inline-flex;
}

.seq {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.workspace {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.side {
  background: var(--panel);
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.center {
  background: var(--dl-bg);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.vsplit, .hsplit {
  background: var(--dl-bg);
  flex: none;
}

.vsplit {
  width: var(--st-6);
  cursor: col-resize;
}

.hsplit {
  height: var(--st-6);
  cursor: row-resize;
}

.timeline-wrap {
  flex: none;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.tabs {
  gap: var(--dl-s1);
  padding: var(--dl-s2);
  border-bottom: var(--st-1) solid var(--line);
  display: flex;
}

.tabs button {
  flex: 1;
}

.side-title {
  padding: var(--dl-s2) var(--st-10);
  border-bottom: var(--st-1) solid var(--line);
  color: var(--muted);
}

.monitor {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.stage {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: var(--dl-s4);
  background: radial-gradient(ellipse at center, var(--dl-panel) 0%, var(--dl-bg) 70%);
  flex: 1;
  place-items: center;
  display: grid;
  overflow: hidden;
}

.frame {
  background: var(--dl-bg);
  box-shadow: var(--dl-shadow-2);
  border-radius: var(--dl-s3);
  max-width: 100%;
  max-height: 100%;
  position: relative;
  overflow: hidden;
}

.frame canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.monitor-tc {
  left: var(--dl-s2);
  bottom: var(--dl-s2);
  background: color-mix(in srgb, var(--dl-bg) 55%, transparent);
  padding: var(--st-2) var(--st-6);
  border-radius: var(--st-3);
  font-variant-numeric: tabular-nums;
  font-size: var(--dl-s3);
  position: absolute;
}

.monitor-empty {
  text-align: center;
  padding: var(--dl-s5);
  background: color-mix(in srgb, var(--dl-bg) 45%, transparent);
  direction: inherit;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.monitor-empty strong {
  font-size: var(--dl-fs-2xl);
  margin-bottom: var(--st-8);
}

.monitor-empty p {
  max-width: var(--st-460);
  color: var(--dl-dim);
  line-height: var(--dl-lh);
}

.text-handle {
  width: var(--st-14);
  height: var(--st-14);
  border: var(--st-2) solid var(--dl-ink);
  background: var(--accent);
  border-radius: 50%;
  padding: 0;
  position: absolute;
  transform: translate(-50%, -50%);
}

.bin, .catalog, .captions, .inspector {
  padding: var(--dl-s2);
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.bin-actions, .row-buttons, .preset-row {
  gap: var(--st-6);
  margin-bottom: var(--dl-s2);
  flex-wrap: wrap;
  display: flex;
}

.preset-row.wrap button {
  font-size: var(--dl-fs-xs);
}

.bin-list, .caption-list {
  gap: var(--dl-s2);
  flex-direction: column;
  display: flex;
}

.media-card {
  grid-template-columns: var(--st-92) 1fr;
  gap: var(--dl-s2);
  background: var(--panel-2);
  border: var(--st-1) solid var(--dl-line);
  border-radius: var(--st-6);
  padding: var(--st-6);
  cursor: grab;
  display: grid;
}

.media-thumb {
  height: var(--st-58);
  border-radius: var(--dl-s1);
  background: var(--dl-bg) center/cover no-repeat;
  color: var(--muted);
  place-items: center;
  display: grid;
}

.media-meta strong, .clip-label {
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.media-meta span, .hint, .empty-copy {
  color: var(--muted);
  line-height: 1.6;
}

.media-buttons {
  gap: var(--dl-s1);
  margin-top: var(--dl-s1);
  flex-wrap: wrap;
  display: flex;
}

.media-buttons button {
  white-space: nowrap;
  flex: 0 auto;
  min-width: 0;
}

.fx-grid {
  gap: var(--st-6);
  margin-bottom: var(--st-10);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.catalog h3, .inspector h3, .stack h3 {
  margin: var(--dl-s3) 0 var(--st-6);
  font-size: var(--dl-s3);
  color: var(--dl-dim);
  font-weight: 600;
}

.cap {
  gap: var(--dl-s1);
  background: var(--dl-panel-2);
  border: var(--st-1) solid var(--dl-line);
  border-radius: var(--st-6);
  padding: var(--st-6);
  flex-direction: column;
  display: flex;
}

.cap.on {
  border-color: var(--accent);
}

.cap textarea, .script {
  resize: vertical;
  width: 100%;
  min-height: var(--st-52);
  direction: inherit;
}

.clip-name, .text-field, .text-field select, .text-field input {
  width: 100%;
}

.text-field {
  gap: var(--dl-s1);
  margin: var(--st-6) 0;
  flex-direction: column;
  display: flex;
}

.text-field.colors {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.check {
  align-items: center;
  gap: var(--st-6);
  margin: var(--st-6) 0;
  display: flex;
}

.stack {
  gap: var(--st-2);
  flex-direction: column;
  display: flex;
}

.field {
  gap: var(--st-2) var(--dl-s2);
  margin: var(--st-5) 0;
  direction: inherit;
  grid-template-columns: 1fr auto;
  display: grid;
}

.field .val {
  color: var(--dl-ink);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.field input[type="range"] {
  grid-column: 1 / -1;
}

input[type="range"] {
  appearance: none;
  height: var(--dl-s1);
  border-radius: var(--st-99);
  background: var(--dl-line-2);
  accent-color: var(--accent);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--dl-s3);
  height: var(--dl-s3);
  background: var(--dl-ink);
  cursor: pointer;
  border-radius: 50%;
}

input[type="color"] {
  width: var(--st-36);
  height: var(--dl-s5);
  border: var(--st-1) solid var(--dl-line-2);
  background: none;
  padding: 0;
}

.wheels {
  justify-content: space-between;
  gap: var(--dl-s2);
  direction: ltr;
  display: flex;
}

.wheel-wrap {
  align-items: center;
  gap: var(--dl-s1);
  color: var(--muted);
  font-size: var(--st-11);
  flex-direction: column;
  display: flex;
}

.wheel {
  width: var(--st-92);
  height: var(--st-92);
  touch-action: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--dl-ink) 8%, transparent), color-mix(in srgb, var(--dl-bg) 55%, transparent) 72%),
    conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  box-shadow: var(--dl-shadow-2);
  border-radius: 50%;
  position: relative;
}

.wheel-dot {
  width: var(--st-10);
  height: var(--st-10);
  background: var(--dl-ink);
  border: var(--st-1) solid var(--dl-bg);
  pointer-events: none;
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.curve-box {
  height: var(--st-150);
  background: var(--dl-bg);
  border: var(--st-1) solid var(--dl-line);
  border-radius: var(--st-6);
  margin: var(--st-6) 0 var(--st-10);
  touch-action: none;
  position: relative;
}

.curve-box svg {
  width: 100%;
  height: 100%;
  display: block;
}

.curve-base {
  fill: none;
  stroke: var(--dl-line);
  stroke-width: 1px;
}

.curve-line {
  fill: none;
  stroke-width: 1.6px;
  vector-effect: non-scaling-stroke;
}

.curve-dot {
  width: var(--st-9);
  height: var(--st-9);
  border: var(--st-1) solid var(--dl-bg);
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.histogram {
  width: 100%;
  height: var(--st-44);
  background: var(--dl-bg);
  border-radius: var(--dl-s1);
  display: block;
}

.ab-row {
  gap: var(--st-6);
  display: flex;
}

.ab-row button {
  flex: 1;
}

.timeline {
  background: var(--dl-panel);
  border-top: var(--st-1) solid var(--dl-line);
  flex-direction: column;
  height: 100%;
  display: flex;
}

.tl-toolbar {
  align-items: center;
  gap: var(--st-6);
  padding: var(--st-5) var(--dl-s2);
  background: var(--dl-panel);
  border-bottom: var(--st-1) solid var(--dl-line);
  flex-wrap: wrap;
  flex: none;
  display: flex;
}

.tool-group {
  gap: var(--dl-s1);
  display: flex;
}

.timecode {
  min-width: var(--st-104);
  text-align: center;
  font-variant-numeric: tabular-nums;
  height: var(--st-26);
}

.dur {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.zoom, .master {
  align-items: center;
  gap: var(--st-6);
  color: var(--muted);
  white-space: nowrap;
  display: flex;
}

.zoom input {
  width: var(--st-90);
}

.play {
  width: var(--dl-s6);
  background: var(--dl-line);
  place-items: center;
  display: grid;
}

.tl-ruler-row, .tl-body-row {
  min-width: 0;
  display: flex;
}

.tl-body-row {
  flex: 1;
  min-height: 0;
}

.corner {
  background: var(--dl-panel);
  border-bottom: var(--st-1) solid var(--dl-line);
  border-inline-end: var(--st-1) solid var(--dl-line);
  flex: none;
}

.ruler-scroll {
  background: var(--dl-panel);
  border-bottom: var(--st-1) solid var(--dl-line);
  flex: 1;
  overflow: hidden;
}

.ruler-content {
  height: 100%;
  position: relative;
}

.tick {
  border-left: var(--st-1) solid var(--dl-line-2);
  position: absolute;
  top: 0;
  bottom: 0;
}

.tick span {
  top: var(--dl-s1);
  left: var(--dl-s1);
  color: var(--dl-dim);
  font-size: var(--st-10);
  font-variant-numeric: tabular-nums;
  position: absolute;
}

.headers {
  background: var(--dl-panel);
  border-inline-end: var(--st-1) solid var(--dl-line);
  flex: none;
  overflow: hidden;
}

.th {
  border-bottom: var(--st-1) solid var(--dl-line);
  padding: var(--dl-s1) var(--st-6);
  justify-content: center;
  gap: var(--dl-s1);
  flex-direction: column;
  display: flex;
}

.th.target {
  background: var(--dl-line);
}

.th-top, .th-bot {
  align-items: center;
  gap: var(--dl-s1);
  display: flex;
}

.th .th-name {
  text-align: start;
  width: auto;
  min-width: 0;
  height: var(--st-22);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  border: 0;
  flex: 1;
  overflow: hidden;
}

.th-rename {
  min-width: 0;
  height: var(--st-22);
  background: var(--dl-bg);
  color: inherit;
  border: var(--st-1) solid var(--accent);
  border-radius: var(--dl-s1);
  padding: 0 var(--dl-s1);
  text-align: start;
  flex: 1;
}

.th-x, .th-move {
  width: var(--st-18);
  padding: 0;
}

.th-move:disabled {
  opacity: .28;
}

.th button {
  width: var(--st-22);
  height: var(--st-22);
  place-items: center;
  padding: 0;
  display: grid;
}

.th-bot input {
  flex: 1;
}

.th-bot button.on {
  background: var(--dl-err-soft);
}

.th-bot button.solo.on {
  background: var(--dl-warn);
  color: var(--dl-bg);
}

.lanes-scroll {
  background: var(--dl-bg);
  flex: 1;
  overflow: auto;
}

.lanes {
  min-height: 100%;
  position: relative;
}

.lane {
  border-bottom: var(--st-1) solid var(--dl-line);
  background: var(--dl-panel);
  position: relative;
}

.lane.audio {
  background: var(--dl-ok-soft);
}

.lane.caption {
  background: var(--dl-warn-soft);
}

.lane.target {
  box-shadow: var(--dl-shadow-2);
}

.clip {
  top: var(--dl-s1);
  height: calc(100% - var(--dl-s2));
  border-radius: var(--dl-s1);
  border: var(--st-1) solid color-mix(in srgb, var(--dl-ink) 22%, transparent);
  background: var(--video);
  color: #fff;
  touch-action: none;
  position: absolute;
  overflow: hidden;
}

.clip.audio, .clip.audio-only {
  background: var(--audio);
}

.clip.raised {
  height: calc(100% - var(--st-30));
}

.clip.audio-only {
  top: auto;
  bottom: var(--dl-s1);
  height: var(--st-22);
  z-index: 3;
}

.clip.audio-only .wave {
  height: 100%;
}

.clip.audio-only .clip-label {
  top: var(--st-1);
}

.clip.caption {
  background: var(--caption);
}

.clip.title {
  background: var(--title);
}

.clip.sel {
  outline: var(--st-1) solid var(--dl-ink);
  border-color: var(--dl-ink);
  z-index: 2;
}

.clip.missing {
  background: var(--dl-err-soft);
}

.clip-label {
  top: var(--st-3);
  left: var(--st-10);
  right: var(--dl-s2);
  font-size: var(--st-11);
  pointer-events: none;
  text-shadow: 0 var(--st-1) var(--st-2) color-mix(in srgb, var(--dl-bg) 80%, transparent);
  direction: inherit;
  text-align: start;
  position: absolute;
}

.wave {
  pointer-events: none;
  width: 100%;
  height: 62%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.trim {
  width: var(--dl-s2);
  z-index: 3;
  cursor: ew-resize;
  position: absolute;
  top: 0;
  bottom: 0;
}

.trim.l {
  left: 0;
}

.trim.r {
  right: 0;
}

.trim:after {
  content: "";
  width: var(--st-2);
  background: color-mix(in srgb, var(--dl-ink) 80%, transparent);
  position: absolute;
  top: 22%;
  bottom: 22%;
}

.trim.l:after {
  left: var(--st-2);
}

.trim.r:after {
  right: var(--st-2);
}

.playhead {
  border-left: var(--st-1) solid var(--play);
  z-index: 5;
  pointer-events: none;
  width: 0;
  position: absolute;
  top: 0;
  bottom: 0;
}

.ruler-playhead {
  z-index: 6;
  width: 0;
  position: absolute;
  top: 0;
  bottom: 0;
}

.playhead-head {
  top: 0;
  left: -var(--st-6);
  border-left: var(--st-6) solid transparent;
  border-right: var(--st-6) solid transparent;
  border-top: var(--st-9) solid var(--play);
  cursor: ew-resize;
  position: absolute;
}

.mark {
  z-index: 4;
  pointer-events: none;
  width: 0;
  position: absolute;
  top: 0;
  bottom: 0;
}

.mark.in {
  border-left: var(--st-2) solid var(--dl-info);
}

.mark.out {
  border-right: var(--st-2) solid var(--dl-info);
}

.io-range {
  background: color-mix(in srgb, var(--dl-info) 13%, transparent);
  pointer-events: none;
  z-index: 0;
  position: absolute;
  top: 0;
  bottom: 0;
}

.tl-empty {
  color: var(--muted);
  pointer-events: none;
  direction: inherit;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0;
}

.tool-razor, .tool-razor * {
  cursor: crosshair;
}

.tool-hand, .tool-hand * {
  cursor: grab;
}

.menu {
  z-index: 30;
  background: var(--dl-panel);
  border: var(--st-1) solid var(--dl-line-2);
  border-radius: var(--st-6);
  min-width: var(--st-160);
  padding: var(--dl-s1);
  box-shadow: var(--dl-shadow-2);
  flex-direction: column;
  display: flex;
  position: fixed;
}

.menu button {
  text-align: start;
  height: var(--st-30);
  background: none;
  border: 0;
}

.modal-back {
  background: color-mix(in srgb, var(--dl-bg) 55%, transparent);
  z-index: 40;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}

.modal {
  width: min(var(--st-460), calc(100vw - var(--dl-s6)));
  background: var(--dl-panel);
  border: var(--st-1) solid var(--dl-line-2);
  border-radius: var(--st-10);
  padding: var(--st-14);
}

.modal header {
  margin-bottom: var(--dl-s2);
  justify-content: space-between;
  align-items: center;
  font-weight: 650;
  display: flex;
}

.help {
  padding: 0 var(--st-18) 0 0;
  margin: 0;
  line-height: 1.9;
}

.help b {
  font-weight: 650;
}

.progress {
  height: var(--dl-s2);
  background: var(--dl-line);
  border-radius: var(--st-99);
  overflow: hidden;
}

.progress span {
  background: var(--accent);
  height: 100%;
  display: block;
}

.toast {
  bottom: var(--st-18);
  background: var(--dl-bg);
  border: var(--st-1) solid var(--dl-line-2);
  border-radius: var(--dl-s2);
  padding: var(--dl-s2) var(--st-14);
  z-index: 50;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

::-webkit-scrollbar {
  width: var(--st-10);
  height: var(--st-10);
}

::-webkit-scrollbar-thumb {
  background: var(--dl-line-2);
  border-radius: var(--st-99);
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: var(--st-1) solid var(--accent);
  outline-offset: var(--st-1);
}

.library {
  background: var(--panel);
  flex-direction: row;
}

.rail {
  width: var(--st-78);
  gap: var(--dl-s1);
  padding: var(--dl-s2) var(--st-6);
  background: var(--dl-bg);
  border-inline-end: var(--st-1) solid var(--line);
  flex-direction: column;
  flex: none;
  display: flex;
  overflow: auto;
}

.rail button {
  height: auto;
  min-height: var(--st-52);
  justify-content: center;
  align-items: center;
  gap: var(--st-5);
  padding: var(--st-6) var(--st-2);
  font-size: var(--st-11);
  color: var(--muted);
  background: none;
  border-color: #0000;
  flex-direction: column;
  font-weight: 600;
  display: flex;
}

.rail button i {
  width: var(--dl-s4);
  height: var(--dl-s4);
  border-radius: var(--st-5);
  border: 1.var(--st-5) solid currentColor;
  display: block;
}

.rail button.on {
  background: color-mix(in srgb, var(--dl-accent) 12%, transparent);
  color: var(--accent);
}

.library-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.library-main > * {
  flex: 1;
}

.card-grid {
  gap: var(--dl-s2);
  margin-bottom: var(--st-10);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.card {
  height: auto;
  min-height: var(--st-74);
  justify-content: flex-end;
  align-items: stretch;
  gap: var(--st-6);
  padding: var(--dl-s2);
  text-align: start;
  background: var(--dl-panel-2);
  border-color: var(--dl-line-2);
  color: var(--text);
  flex-direction: column;
  font-weight: 600;
  display: flex;
}

.card.on, button.card.on {
  background: var(--dl-ok-soft);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: var(--dl-shadow-2);
}

.text-card strong {
  font-size: var(--dl-fs-md);
  line-height: var(--dl-lh-tight);
}

.swatch {
  height: var(--st-38);
  border-radius: var(--st-7);
  background: linear-gradient(135deg, var(--dl-line), var(--dl-bg));
  display: block;
}

.swatch.shape.solid {
  background: var(--dl-ink);
}

.swatch.shape.circle {
  background: radial-gradient(circle at center, var(--dl-ink) 0 42%, transparent 44%);
}

.swatch.shape.star {
  background: conic-gradient(from 20deg, var(--dl-ink) 0 8%, transparent 8% 20%, var(--dl-ink) 20% 28%, transparent 28% 40%, var(--dl-ink) 40% 48%, transparent 48% 60%, var(--dl-ink) 60% 68%, transparent 68% 80%, var(--dl-ink) 80% 88%, transparent 88%);
}

.swatch.shape.heart {
  background: radial-gradient(circle at 35% 40%, var(--dl-ink) 0 18%, transparent 19%), radial-gradient(circle at 65% 40%, var(--dl-ink) 0 18%, transparent 19%), linear-gradient(160deg, transparent 42%, var(--dl-ink) 43% 78%, transparent 79%);
}

.swatch.shape.arrow {
  background: linear-gradient(90deg, transparent 55%, var(--dl-ink) 55%), linear-gradient(var(--dl-ink), var(--dl-ink)) 0 42% / 62% 28% no-repeat;
}

.swatch.fx.glitch {
  background: linear-gradient(90deg, var(--dl-err) 0 30%, var(--dl-bg) 30% 34%, var(--dl-info) 34% 70%, var(--dl-bg) 70% 74%, var(--dl-ink) 74%);
}

.swatch.fx.shake {
  background: repeating-linear-gradient(90deg, var(--dl-line) 0 var(--st-6), var(--dl-ink) var(--st-6) var(--dl-s2));
}

.swatch.fx.grain, .swatch.fx.vhs {
  background: repeating-linear-gradient(var(--dl-bg) 0 var(--st-2), var(--dl-faint) var(--st-2) var(--st-3));
}

.swatch.fx.rgb {
  background: linear-gradient(90deg, var(--dl-err), var(--dl-info), var(--dl-ink));
}

.swatch.fx.flicker {
  background: linear-gradient(var(--dl-ink), var(--dl-bg));
}

.swatch.fx.leak {
  background: radial-gradient(circle at 20% 30%, var(--dl-warn), var(--dl-err) 55%, var(--dl-bg));
}

.swatch.fx.punch {
  background: radial-gradient(circle, var(--dl-ink), var(--dl-accent) 40%, var(--dl-bg) 70%);
}

.swatch.tr {
  background: linear-gradient(90deg, var(--dl-accent), transparent 70%), var(--dl-panel);
}

.swatch.tone {
  background: linear-gradient(90deg, var(--dl-ok), var(--dl-accent));
}

.safe-zone {
  border: var(--st-1) dashed color-mix(in srgb, var(--dl-ink) 55%, transparent);
  pointer-events: none;
  border-radius: var(--st-10);
  position: absolute;
  inset: 7% 5%;
}

.safe-zone:after {
  content: "";
  border-top: var(--st-1) dashed color-mix(in srgb, var(--dl-accent) 80%, transparent);
  border-bottom: var(--st-1) dashed color-mix(in srgb, var(--dl-accent) 80%, transparent);
  position: absolute;
  inset: 14% 0 20%;
}

.side-title {
  letter-spacing: 0;
  font-weight: 700;
}

.inspector, .catalog, .bin, .captions {
  background: none;
}

body.dl-root {
  flex-direction: column;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

body.dl-root > main.dl-container {
  flex: auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 0;
  padding-inline: 0;
  overflow: hidden;
}

.app {
  width: 100%;
  max-width: 100%;
  height: 100%;
}

/*# sourceMappingURL=delato-editor_studio_studio_0lnxg97.css.map*/