/* [project]/delato-platform/packages/style/delato.style.css [app-client] (css) */
:root {
  --dl-accent: #0aa894;
  --dl-accent-ink: #fff;
  --dl-accent-soft: #d2f5f0;
  --dl-accent-2: #e2602c;
  --dl-accent-2-ink: #fff;
  --dl-accent-2-soft: #fde8de;
  --dl-bg: #f2f4f5;
  --dl-panel: #fff;
  --dl-panel-2: #e8ecee;
  --dl-line: #d3d9dd;
  --dl-line-2: #b9c2c8;
  --dl-ink: #14191d;
  --dl-dim: #5d6b74;
  --dl-faint: #8a969e;
  --dl-ok: #2e8b57;
  --dl-ok-soft: #e4f3ea;
  --dl-warn: #c97a12;
  --dl-warn-soft: #fbeed8;
  --dl-err: #c0392b;
  --dl-err-soft: #f9e6e3;
  --dl-info: #2e6da4;
  --dl-info-soft: #e5eef7;
  --dl-font: "IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dl-mono: "IBM Plex Mono","IBM Plex Sans Arabic",ui-monospace,"Courier New",monospace;
  --dl-fs-xs: 12px;
  --dl-fs-sm: 13px;
  --dl-fs-md: 15px;
  --dl-fs-lg: 18px;
  --dl-fs-xl: 22px;
  --dl-fs-2xl: 28px;
  --dl-fs-3xl: 36px;
  --dl-lh: 1.7;
  --dl-lh-tight: 1.35;
  --dl-s1: 4px;
  --dl-s2: 8px;
  --dl-s3: 12px;
  --dl-s4: 16px;
  --dl-s5: 24px;
  --dl-s6: 32px;
  --dl-s7: 48px;
  --dl-s8: 64px;
  --dl-r-sm: 6px;
  --dl-r-md: 10px;
  --dl-r-lg: 16px;
  --dl-r-full: 999px;
  --dl-shadow-1: 0 1px 3px #0f131514;
  --dl-shadow-2: 0 6px 20px #0f13151f;
  --dl-shadow-3: 0 16px 48px #0f13152e;
  --dl-t-fast: .12s ease;
  --dl-t-med: .22s ease;
  --dl-z-nav: 100;
  --dl-z-drop: 200;
  --dl-z-modal: 300;
  --dl-z-toast: 400;
  --dl-container: 1120px;
  --dl-gutter: 16px;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dl-accent: #19e6c9;
    --dl-accent-ink: #06201c;
    --dl-accent-soft: #0f3b36;
    --dl-accent-2: #ff7a45;
    --dl-accent-2-ink: #1a0c06;
    --dl-accent-2-soft: #3d2316;
    --dl-bg: #1a1f23;
    --dl-panel: #232a2f;
    --dl-panel-2: #2c343a;
    --dl-line: #39434a;
    --dl-line-2: #4a565e;
    --dl-ink: #e6ebed;
    --dl-dim: #97a5ad;
    --dl-faint: #67757d;
    --dl-ok: #5fbf85;
    --dl-ok-soft: #1b2f24;
    --dl-warn: #e39a3b;
    --dl-warn-soft: #3a2c18;
    --dl-err: #e07070;
    --dl-err-soft: #3a2222;
    --dl-info: #6aa5d8;
    --dl-info-soft: #1e2a38;
    --dl-shadow-1: 0 1px 3px #0006;
    --dl-shadow-2: 0 6px 20px #00000073;
    --dl-shadow-3: 0 16px 48px #0000008c;
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --dl-accent: #19e6c9;
  --dl-accent-ink: #06201c;
  --dl-accent-soft: #0f3b36;
  --dl-accent-2: #ff7a45;
  --dl-accent-2-ink: #1a0c06;
  --dl-accent-2-soft: #3d2316;
  --dl-bg: #1a1f23;
  --dl-panel: #232a2f;
  --dl-panel-2: #2c343a;
  --dl-line: #39434a;
  --dl-line-2: #4a565e;
  --dl-ink: #e6ebed;
  --dl-dim: #97a5ad;
  --dl-faint: #67757d;
  --dl-ok: #5fbf85;
  --dl-ok-soft: #1b2f24;
  --dl-warn: #e39a3b;
  --dl-warn-soft: #3a2c18;
  --dl-err: #e07070;
  --dl-err-soft: #3a2222;
  --dl-info: #6aa5d8;
  --dl-info-soft: #1e2a38;
  --dl-shadow-1: 0 1px 3px #0006;
  --dl-shadow-2: 0 6px 20px #00000073;
  --dl-shadow-3: 0 16px 48px #0000008c;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

.dl-root, body.dl-root {
  background: var(--dl-bg);
  color: var(--dl-ink);
  font: var(--dl-fs-md)/var(--dl-lh) var(--dl-font);
  -webkit-font-smoothing: antialiased;
  direction: rtl;
  margin: 0;
}

.dl-container {
  max-width: var(--dl-container);
  padding-inline: var(--dl-gutter);
  margin-inline: auto;
}

.dl-mono {
  font-family: var(--dl-mono);
}

.dl-dim {
  color: var(--dl-dim);
}

.dl-faint {
  color: var(--dl-faint);
}

h1.dl, .dl-h1 {
  font-size: var(--dl-fs-3xl);
  line-height: var(--dl-lh-tight);
  margin: 0 0 var(--dl-s4);
  font-weight: 700;
}

h2.dl, .dl-h2 {
  font-size: var(--dl-fs-2xl);
  line-height: var(--dl-lh-tight);
  margin: 0 0 var(--dl-s3);
  font-weight: 700;
}

h3.dl, .dl-h3 {
  font-size: var(--dl-fs-xl);
  line-height: var(--dl-lh-tight);
  margin: 0 0 var(--dl-s2);
  font-weight: 700;
}

h4.dl, .dl-h4 {
  font-size: var(--dl-fs-lg);
  margin: 0 0 var(--dl-s2);
  font-weight: 500;
}

.dl-label {
  font-size: var(--dl-fs-xs);
  color: var(--dl-dim);
  letter-spacing: .4px;
}

a.dl, .dl-link {
  color: var(--dl-accent);
  transition: border-color var(--dl-t-fast);
  border-bottom: 1px solid #0000;
  text-decoration: none;
}

a.dl:hover, .dl-link:hover {
  border-bottom-color: var(--dl-accent);
}

:is(.dl-btn, .dl-input, .dl-select, .dl-check input, .dl-link, a.dl):focus-visible {
  outline: 2px solid var(--dl-accent);
  outline-offset: 2px;
  border-radius: var(--dl-r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

.dl-btn {
  justify-content: center;
  align-items: center;
  gap: var(--dl-s2);
  font: inherit;
  font-size: var(--dl-fs-sm);
  cursor: pointer;
  border-radius: var(--dl-r-sm);
  border: 1px solid var(--dl-line);
  background: var(--dl-panel);
  color: var(--dl-ink);
  min-height: 38px;
  transition: background var(--dl-t-fast),border-color var(--dl-t-fast),transform var(--dl-t-fast);
  -webkit-user-select: none;
  user-select: none;
  padding: 8px 18px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.dl-btn:hover {
  border-color: var(--dl-line-2);
  background: var(--dl-panel-2);
}

.dl-btn:active {
  transform: translateY(1px);
}

.dl-btn:disabled, .dl-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.dl-btn--primary {
  background: var(--dl-accent);
  border-color: var(--dl-accent);
  color: var(--dl-accent-ink);
  font-weight: 700;
}

.dl-nav a.dl-btn--primary, .dl-nav a.dl-btn--primary:hover {
  color: var(--dl-accent-ink);
}

.dl-btn--primary:hover {
  filter: brightness(1.06);
  background: var(--dl-accent);
  border-color: var(--dl-accent);
}

.dl-btn--ghost {
  color: var(--dl-dim);
  background: none;
  border-color: #0000;
}

.dl-btn--ghost:hover {
  background: var(--dl-panel-2);
  color: var(--dl-ink);
}

.dl-btn--danger {
  border-color: var(--dl-err);
  color: var(--dl-err);
  background: none;
}

.dl-btn--danger:hover {
  background: var(--dl-err);
  color: #fff;
}

.dl-btn--sm {
  min-height: 30px;
  font-size: var(--dl-fs-xs);
  padding: 4px 12px;
}

.dl-btn--lg {
  min-height: 48px;
  font-size: var(--dl-fs-md);
  padding: 12px 28px;
}

.dl-btn--block {
  width: 100%;
  display: flex;
}

.dl-field {
  gap: var(--dl-s1);
  margin-bottom: var(--dl-s4);
  flex-direction: column;
  display: flex;
}

.dl-field > label {
  font-size: var(--dl-fs-sm);
  color: var(--dl-dim);
}

.dl-input, .dl-select, textarea.dl-input {
  font: inherit;
  font-size: var(--dl-fs-sm);
  color: var(--dl-ink);
  background: var(--dl-panel);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-sm);
  min-height: 38px;
  transition: border-color var(--dl-t-fast);
  box-sizing: border-box;
  width: 100%;
  padding: 8px 12px;
}

.dl-input:hover, .dl-select:hover {
  border-color: var(--dl-line-2);
}

.dl-input::placeholder {
  color: var(--dl-faint);
}

.dl-input[aria-invalid="true"], .dl-input.dl--err {
  border-color: var(--dl-err);
}

.dl-field .dl-err-msg {
  font-size: var(--dl-fs-xs);
  color: var(--dl-err);
}

.dl-input--num {
  font-family: var(--dl-mono);
  text-align: center;
  direction: ltr;
}

.dl-check {
  align-items: center;
  gap: var(--dl-s2);
  cursor: pointer;
  font-size: var(--dl-fs-sm);
  display: inline-flex;
}

.dl-check input {
  accent-color: var(--dl-accent);
  width: 16px;
  height: 16px;
}

.dl-card {
  background: var(--dl-panel);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-md);
  padding: var(--dl-s5);
}

.dl-card--raised {
  box-shadow: var(--dl-shadow-2);
  border: none;
}

.dl-panel {
  background: var(--dl-panel-2);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-md);
  padding: var(--dl-s4);
}

.dl-divider {
  border: none;
  border-top: 1px solid var(--dl-line);
  margin: var(--dl-s5) 0;
}

.dl-badge {
  border-radius: var(--dl-r-full);
  font-size: var(--dl-fs-xs);
  white-space: nowrap;
  padding: 1px 10px;
  font-weight: 500;
  display: inline-block;
}

.dl-badge--ok {
  background: var(--dl-ok-soft);
  color: var(--dl-ok);
}

.dl-badge--warn {
  background: var(--dl-warn-soft);
  color: var(--dl-warn);
}

.dl-badge--err {
  background: var(--dl-err-soft);
  color: var(--dl-err);
}

.dl-badge--info {
  background: var(--dl-info-soft);
  color: var(--dl-info);
}

.dl-badge--accent {
  background: var(--dl-accent-soft);
  color: var(--dl-accent);
}

.dl-table-wrap {
  background: var(--dl-panel);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-md);
  overflow-x: auto;
}

.dl-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--dl-fs-sm);
}

.dl-table th, .dl-table td {
  border-bottom: 1px solid var(--dl-line);
  text-align: start;
  vertical-align: top;
  padding: 10px 14px;
}

.dl-table th {
  font-size: var(--dl-fs-xs);
  color: var(--dl-dim);
  font-weight: 500;
}

.dl-table tr:last-child td {
  border-bottom: none;
}

.dl-table--nums td {
  font-variant-numeric: tabular-nums;
}

.dl-toasts {
  top: var(--dl-s4);
  z-index: var(--dl-z-toast);
  gap: var(--dl-s2);
  flex-direction: column;
  align-items: center;
  display: flex;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

.dl-toast {
  background: var(--dl-panel);
  border: 1px solid var(--dl-line-2);
  border-radius: var(--dl-r-md);
  box-shadow: var(--dl-shadow-2);
  max-width: min(560px, 86vw);
  font-size: var(--dl-fs-sm);
  padding: 10px 18px;
}

.dl-toast--ok {
  border-color: var(--dl-ok);
  color: var(--dl-ok);
}

.dl-toast--err {
  border-color: var(--dl-err);
  color: var(--dl-err);
}

.dl-overlay {
  z-index: var(--dl-z-modal);
  padding: var(--dl-gutter);
  background: #0a0b0e8c;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.dl-modal {
  background: var(--dl-panel);
  border: 1px solid var(--dl-line-2);
  border-radius: var(--dl-r-lg);
  box-shadow: var(--dl-shadow-3);
  padding: var(--dl-s5);
  min-width: min(340px, 92vw);
  max-width: min(640px, 92vw);
  max-height: 86vh;
  overflow: auto;
}

.dl-modal > h3 {
  margin-top: 0;
}

.dl-modal-foot {
  gap: var(--dl-s2);
  margin-top: var(--dl-s5);
  display: flex;
}

.dl-nav {
  z-index: var(--dl-z-nav);
  align-items: center;
  gap: var(--dl-s4);
  background: var(--dl-panel);
  border-bottom: 1px solid var(--dl-line);
  padding: var(--dl-s3) var(--dl-s5);
  display: flex;
  position: sticky;
  top: 0;
}

.dl-nav .dl-brand {
  font-weight: 700;
  font-size: var(--dl-fs-lg);
  color: var(--dl-accent);
}

.dl-nav a {
  color: var(--dl-dim);
  font-size: var(--dl-fs-sm);
  border-radius: var(--dl-r-sm);
  padding: 4px 10px;
  text-decoration: none;
}

.dl-nav a:hover {
  color: var(--dl-ink);
  background: var(--dl-panel-2);
}

.dl-nav a[aria-current="page"] {
  color: var(--dl-accent);
  font-weight: 500;
}

.dl-row {
  gap: var(--dl-s3);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.dl-col {
  gap: var(--dl-s3);
  flex-direction: column;
  display: flex;
}

.dl-grid-2 {
  gap: var(--dl-s4);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.dl-grid-3 {
  gap: var(--dl-s4);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

@media (max-width: 720px) {
  .dl-grid-2, .dl-grid-3 {
    grid-template-columns: 1fr;
  }
}

:root {
  --dl-fs-4xl: 46px;
  --dl-fs-5xl: 64px;
  --dl-s9: 96px;
  --dl-s10: 128px;
  --dl-nav-h: 60px;
  --dl-glow: radial-gradient(58% 58% at 50% 0%,
            color-mix(in srgb,var(--dl-accent) 20%,transparent) 0%, transparent 72%);
}

.dl-banner {
  background: var(--dl-warn-soft);
  color: var(--dl-warn);
  text-align: center;
  font-size: var(--dl-fs-xs);
  padding: 6px var(--dl-s4);
  border-bottom: 1px solid var(--dl-line);
}

.dl-nav--glass {
  background: color-mix(in srgb,var(--dl-bg) 76%,transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  min-height: var(--dl-nav-h);
  padding: 0 var(--dl-s5);
}

.dl-nav-links {
  align-items: center;
  gap: var(--dl-s1);
  display: flex;
}

@media (max-width: 1120px) {
  .dl-nav-links {
    display: none;
  }
}

.dl-nav .dl-brand-mark {
  align-items: center;
  gap: var(--dl-s2);
  text-decoration: none;
  display: inline-flex;
}

.dl-brand-dot {
  border-radius: var(--dl-r-full);
  background: var(--dl-accent);
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 4px var(--dl-accent-soft);
}

.dl-hero {
  padding: var(--dl-s9) 0 var(--dl-s8);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.dl-hero:before {
  content: "";
  background: var(--dl-glow);
  pointer-events: none;
  height: 620px;
  position: absolute;
  inset: -160px -10% auto;
}

.dl-hero > * {
  position: relative;
}

.dl-eyebrow {
  align-items: center;
  gap: var(--dl-s2);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-full);
  background: var(--dl-panel);
  font-size: var(--dl-fs-xs);
  color: var(--dl-dim);
  padding: 4px 14px;
  display: inline-flex;
}

.dl-hero-title {
  font-size: clamp(var(--dl-fs-2xl),6.2vw,var(--dl-fs-5xl));
  letter-spacing: -.4px;
  margin: var(--dl-s5) auto var(--dl-s4);
  max-width: 18ch;
  font-weight: 700;
  line-height: 1.14;
}

.dl-hero-title em {
  color: var(--dl-accent);
  font-style: normal;
}

.dl-hero-sub {
  max-width: 60ch;
  margin: 0 auto var(--dl-s6);
  color: var(--dl-dim);
  font-size: var(--dl-fs-lg);
  line-height: var(--dl-lh);
}

.dl-hero-cta {
  gap: var(--dl-s3);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.dl-section {
  padding: var(--dl-s8) 0;
}

.dl-section-head {
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--dl-s4);
  margin-bottom: var(--dl-s5);
  flex-wrap: wrap;
  display: flex;
}

.dl-section-head p {
  margin: var(--dl-s1) 0 0;
  color: var(--dl-dim);
  font-size: var(--dl-fs-sm);
}

.dl-grid-auto {
  gap: var(--dl-s4);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  display: grid;
}

.dl-tile {
  background: var(--dl-panel);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-lg);
  color: inherit;
  transition: border-color var(--dl-t-med),transform var(--dl-t-med),box-shadow var(--dl-t-med);
  flex-direction: column;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.dl-tile:hover {
  border-color: var(--dl-accent);
  box-shadow: var(--dl-shadow-2);
  transform: translateY(-3px);
}

.dl-tile[aria-disabled="true"] {
  opacity: .6;
  pointer-events: none;
}

.dl-tile[aria-pressed="true"] {
  border-color: var(--dl-accent);
  box-shadow: 0 0 0 2px var(--dl-accent-soft),var(--dl-shadow-2);
}

.dl-tile[aria-pressed="true"] .dl-tile-title {
  color: var(--dl-accent);
}

.dl-tile-media {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--dl-line);
  position: relative;
  overflow: hidden;
}

.dl-tile-body {
  gap: var(--dl-s2);
  padding: var(--dl-s4) var(--dl-s5) var(--dl-s5);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.dl-tile-head {
  justify-content: space-between;
  align-items: center;
  gap: var(--dl-s2);
  display: flex;
}

.dl-tile-title {
  font-size: var(--dl-fs-lg);
  margin: 0;
  font-weight: 700;
}

.dl-tile-desc {
  color: var(--dl-dim);
  font-size: var(--dl-fs-sm);
  flex: 1;
  margin: 0;
}

.dl-tile-foot {
  align-items: center;
  gap: var(--dl-s2);
  color: var(--dl-accent);
  font-size: var(--dl-fs-sm);
  font-weight: 500;
  display: flex;
}

.dl-mesh {
  background-color: var(--dl-panel-2);
  position: absolute;
  inset: 0;
}

.dl-mesh:after {
  content: "";
  background-image: linear-gradient(to left,color-mix(in srgb,var(--dl-line-2) 70%,transparent) 1px,transparent 1px),
    linear-gradient(to top,color-mix(in srgb,var(--dl-line-2) 70%,transparent) 1px,transparent 1px);
  background-size: 26px 26px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to top, #000, #0000);
  mask-image: linear-gradient(to top, #000, #0000);
}

.dl-mesh--a {
  background-image: linear-gradient(145deg,color-mix(in srgb,var(--dl-accent) 42%,transparent),transparent 62%),
  radial-gradient(72% 90% at 18% 92%,color-mix(in srgb,var(--dl-info) 42%,transparent),transparent);
}

.dl-mesh--b {
  background-image: linear-gradient(200deg,color-mix(in srgb,var(--dl-info) 40%,transparent),transparent 58%),
  radial-gradient(80% 70% at 82% 20%,color-mix(in srgb,var(--dl-ok) 36%,transparent),transparent);
}

.dl-mesh--c {
  background-image: linear-gradient(120deg,color-mix(in srgb,var(--dl-err) 34%,transparent),transparent 60%),
  radial-gradient(70% 80% at 30% 15%,color-mix(in srgb,var(--dl-accent) 40%,transparent),transparent);
}

.dl-mesh--d {
  background-image: linear-gradient(165deg,color-mix(in srgb,var(--dl-ok) 36%,transparent),transparent 62%),
  radial-gradient(75% 85% at 75% 85%,color-mix(in srgb,var(--dl-info) 38%,transparent),transparent);
}

.dl-stats {
  gap: var(--dl-s4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  display: grid;
}

.dl-stat {
  background: var(--dl-panel);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-md);
  padding: var(--dl-s5);
  text-align: center;
}

.dl-stat-num {
  font-size: var(--dl-fs-3xl);
  color: var(--dl-accent);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.1;
}

.dl-stat-cap {
  margin-top: var(--dl-s2);
  color: var(--dl-ink);
  font-size: var(--dl-fs-sm);
}

.dl-stat-src {
  margin-top: var(--dl-s1);
  color: var(--dl-faint);
  font-size: var(--dl-fs-xs);
}

.dl-steps {
  gap: var(--dl-s4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  display: grid;
}

.dl-step {
  background: var(--dl-panel);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-md);
  padding: var(--dl-s5);
}

.dl-step-num {
  border-radius: var(--dl-r-full);
  background: var(--dl-accent-soft);
  width: 32px;
  height: 32px;
  color: var(--dl-accent);
  margin-bottom: var(--dl-s3);
  justify-content: center;
  align-items: center;
  font-weight: 700;
  display: flex;
}

.dl-step h4 {
  margin: 0 0 var(--dl-s1);
}

.dl-step p {
  color: var(--dl-dim);
  font-size: var(--dl-fs-sm);
  margin: 0;
}

.dl-footer {
  border-top: 1px solid var(--dl-line);
  margin-top: var(--dl-s8);
  padding: var(--dl-s7) 0 var(--dl-s6);
  color: var(--dl-dim);
  font-size: var(--dl-fs-sm);
}

.dl-footer-grid {
  gap: var(--dl-s5);
  grid-template-columns: 2fr repeat(3, 1fr);
  display: grid;
}

@media (max-width: 760px) {
  .dl-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.dl-footer h5 {
  margin: 0 0 var(--dl-s2);
  color: var(--dl-ink);
  font-size: var(--dl-fs-sm);
  font-weight: 500;
}

.dl-footer a {
  color: var(--dl-dim);
  padding: 3px 0;
  text-decoration: none;
  display: block;
}

.dl-footer a:hover {
  color: var(--dl-accent);
}

.dl-footer-bar {
  margin-top: var(--dl-s6);
  padding-top: var(--dl-s4);
  border-top: 1px solid var(--dl-line);
  justify-content: space-between;
  gap: var(--dl-s3);
  font-size: var(--dl-fs-xs);
  color: var(--dl-faint);
  flex-wrap: wrap;
  display: flex;
}

.dl-root[dir="ltr"], [dir="ltr"] .dl-root, :where([dir="ltr"]) .dl-input--num {
  direction: ltr;
}

:root {
  --dl-rail: 320px;
  --dl-composer-h: auto;
}

.dl-studio {
  grid-template-columns: 1fr var(--dl-rail);
  gap: var(--dl-s5);
  min-height: calc(100vh - var(--dl-nav-h));
  align-items: start;
  display: grid;
}

.dl-studio-main {
  gap: var(--dl-s4);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.dl-studio-rail {
  top: calc(var(--dl-nav-h) + var(--dl-s4));
  gap: var(--dl-s4);
  background: var(--dl-panel);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-lg);
  padding: var(--dl-s5);
  max-height: calc(100vh - var(--dl-nav-h) - var(--dl-s6));
  flex-direction: column;
  display: flex;
  position: sticky;
  overflow: auto;
}

@media (max-width: 980px) {
  .dl-studio {
    grid-template-columns: 1fr;
  }

  .dl-studio-rail {
    max-height: none;
    position: static;
  }
}

.dl-prompt {
  background: var(--dl-panel);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-lg);
  padding: var(--dl-s3);
  transition: border-color var(--dl-t-fast),box-shadow var(--dl-t-fast);
}

.dl-prompt:focus-within {
  border-color: var(--dl-accent);
  box-shadow: var(--dl-shadow-1);
}

.dl-prompt-box {
  box-sizing: border-box;
  width: 100%;
  color: var(--dl-ink);
  font: inherit;
  font-size: var(--dl-fs-md);
  line-height: var(--dl-lh);
  resize: vertical;
  min-height: 84px;
  padding: var(--dl-s2);
  background: none;
  border: none;
}

.dl-prompt-box:focus {
  outline: none;
}

.dl-prompt-box::placeholder {
  color: var(--dl-faint);
}

.dl-prompt-foot {
  align-items: center;
  gap: var(--dl-s2);
  padding-top: var(--dl-s2);
  border-top: 1px solid var(--dl-line);
  flex-wrap: wrap;
  display: flex;
}

.dl-modelpick {
  gap: var(--dl-s1);
  flex-direction: column;
  display: flex;
}

.dl-modelpick-item {
  align-items: center;
  gap: var(--dl-s3);
  text-align: start;
  width: 100%;
  font: inherit;
  cursor: pointer;
  border-radius: var(--dl-r-md);
  padding: var(--dl-s2) var(--dl-s3);
  transition: background var(--dl-t-fast),border-color var(--dl-t-fast);
  background: none;
  border: 1px solid #0000;
  display: flex;
}

.dl-modelpick-item:hover {
  background: var(--dl-panel-2);
}

.dl-modelpick-item[aria-selected="true"] {
  border-color: var(--dl-accent);
  background: var(--dl-accent-soft);
}

.dl-modelpick-item[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

.dl-model-name {
  font-weight: 500;
  font-size: var(--dl-fs-sm);
}

.dl-model-meta {
  gap: var(--dl-s2);
  font-size: var(--dl-fs-xs);
  color: var(--dl-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-inline-start: auto;
  display: flex;
}

.dl-seg {
  background: var(--dl-panel-2);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-sm);
  gap: 2px;
  padding: 2px;
  display: inline-flex;
}

.dl-seg-item {
  font: inherit;
  font-size: var(--dl-fs-xs);
  cursor: pointer;
  color: var(--dl-dim);
  border-radius: calc(var(--dl-r-sm) - 2px);
  transition: background var(--dl-t-fast),color var(--dl-t-fast);
  background: none;
  border: none;
  padding: 5px 12px;
}

.dl-seg-item:hover {
  color: var(--dl-ink);
}

.dl-seg-item[aria-pressed="true"] {
  background: var(--dl-panel);
  color: var(--dl-ink);
  box-shadow: var(--dl-shadow-1);
  font-weight: 500;
}

.dl-chips {
  gap: var(--dl-s2);
  flex-wrap: wrap;
  display: flex;
}

.dl-chip {
  align-items: center;
  gap: var(--dl-s1);
  font: inherit;
  font-size: var(--dl-fs-xs);
  cursor: pointer;
  background: var(--dl-panel-2);
  color: var(--dl-dim);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-full);
  transition: all var(--dl-t-fast);
  padding: 4px 12px;
  display: inline-flex;
}

.dl-chip:hover {
  border-color: var(--dl-line-2);
  color: var(--dl-ink);
}

.dl-chip[aria-pressed="true"] {
  background: var(--dl-accent-soft);
  border-color: var(--dl-accent);
  color: var(--dl-accent);
  font-weight: 500;
}

.dl-ratios {
  gap: var(--dl-s2);
  flex-wrap: wrap;
  align-items: flex-end;
  display: flex;
}

.dl-ratio {
  align-items: center;
  gap: var(--dl-s1);
  font: inherit;
  cursor: pointer;
  color: var(--dl-dim);
  background: none;
  border: none;
  flex-direction: column;
  padding: 0;
  display: flex;
}

.dl-ratio-box {
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.dl-ratio-box i {
  border: 1.5px solid;
  border-radius: 3px;
  display: block;
}

.dl-ratio-lab {
  font-size: var(--dl-fs-xs);
  font-variant-numeric: tabular-nums;
}

.dl-ratio:hover {
  color: var(--dl-ink);
}

.dl-ratio[aria-pressed="true"] {
  color: var(--dl-accent);
}

.dl-range {
  gap: var(--dl-s1);
  flex-direction: column;
  display: flex;
}

.dl-range-head {
  font-size: var(--dl-fs-xs);
  color: var(--dl-dim);
  justify-content: space-between;
  align-items: baseline;
  display: flex;
}

.dl-range-val {
  font-family: var(--dl-mono);
  color: var(--dl-ink);
  font-variant-numeric: tabular-nums;
}

.dl-range input[type="range"] {
  width: 100%;
  accent-color: var(--dl-accent);
  margin: 0;
}

.dl-adv {
  border-top: 1px solid var(--dl-line);
  padding-top: var(--dl-s3);
}

.dl-adv > summary {
  cursor: pointer;
  align-items: center;
  gap: var(--dl-s2);
  font-size: var(--dl-fs-sm);
  color: var(--dl-dim);
  -webkit-user-select: none;
  user-select: none;
  list-style: none;
  display: flex;
}

.dl-adv > summary::-webkit-details-marker {
  display: none;
}

.dl-adv > summary:after {
  content: "+";
  font-family: var(--dl-mono);
  margin-inline-start: auto;
}

.dl-adv[open] > summary:after {
  content: "−";
}

.dl-adv > summary:hover {
  color: var(--dl-ink);
}

.dl-adv-body {
  gap: var(--dl-s4);
  padding-top: var(--dl-s4);
  flex-direction: column;
  display: flex;
}

.dl-cost {
  align-items: center;
  gap: var(--dl-s2);
  background: var(--dl-panel-2);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-md);
  padding: var(--dl-s3);
  font-size: var(--dl-fs-sm);
  flex-wrap: wrap;
  display: flex;
}

.dl-cost-num {
  font-family: var(--dl-mono);
  color: var(--dl-accent-2);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.dl-cost--over {
  border-color: var(--dl-err);
  background: var(--dl-err-soft);
}

.dl-cost--over .dl-cost-num {
  color: var(--dl-err);
}

.dl-drop {
  place-items: center;
  gap: var(--dl-s2);
  text-align: center;
  border: 1.5px dashed var(--dl-line-2);
  border-radius: var(--dl-r-md);
  padding: var(--dl-s5) var(--dl-s3);
  color: var(--dl-dim);
  font-size: var(--dl-fs-xs);
  transition: border-color var(--dl-t-fast),background var(--dl-t-fast);
  display: grid;
}

.dl-drop:hover, .dl-drop[data-over="true"] {
  border-color: var(--dl-accent);
  background: var(--dl-accent-soft);
}

.dl-refs {
  gap: var(--dl-s2);
  flex-wrap: wrap;
  display: flex;
}

.dl-ref {
  border-radius: var(--dl-r-sm);
  border: 1px solid var(--dl-line);
  background: var(--dl-panel-2);
  width: 60px;
  height: 60px;
  position: relative;
  overflow: hidden;
}

.dl-ref img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.dl-ref-x {
  border-radius: var(--dl-r-full);
  cursor: pointer;
  background: var(--dl-ink);
  width: 18px;
  height: 18px;
  color: var(--dl-bg);
  font-size: var(--dl-fs-xs);
  border: none;
  line-height: 1;
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
}

.dl-results {
  gap: var(--dl-s5);
  flex-direction: column;
  display: flex;
}

.dl-result-row {
  gap: var(--dl-s2);
  flex-direction: column;
  display: flex;
}

.dl-result-head {
  align-items: center;
  gap: var(--dl-s2);
  font-size: var(--dl-fs-xs);
  color: var(--dl-dim);
  flex-wrap: wrap;
  display: flex;
}

.dl-result-head .dl-row-actions {
  gap: var(--dl-s1);
  opacity: 0;
  transition: opacity var(--dl-t-fast);
  margin-inline-start: auto;
  display: flex;
}

.dl-result-row:hover .dl-row-actions, .dl-result-row:focus-within .dl-row-actions {
  opacity: 1;
}

.dl-result-grid {
  gap: var(--dl-s3);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  display: grid;
}

.dl-result {
  aspect-ratio: 1;
  border-radius: var(--dl-r-md);
  background: var(--dl-panel-2);
  border: 1px solid var(--dl-line);
  position: relative;
  overflow: hidden;
}

.dl-result img, .dl-result video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.dl-result-actions {
  gap: var(--dl-s1);
  padding: var(--dl-s2);
  opacity: 0;
  transition: opacity var(--dl-t-fast);
  background: linear-gradient(to top, #0a0b0eb8, #0000);
  display: flex;
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
}

.dl-result:hover .dl-result-actions, .dl-result:focus-within .dl-result-actions {
  opacity: 1;
}

.dl-result[data-state="pending"] {
  place-items: center;
  display: grid;
}

.dl-result[data-selected="true"] {
  outline: 2px solid var(--dl-accent);
  outline-offset: -2px;
}

.dl-progress {
  background: var(--dl-panel-2);
  border-radius: var(--dl-r-full);
  height: 4px;
  overflow: hidden;
}

.dl-progress-bar {
  background: var(--dl-accent);
  height: 100%;
  transition: width var(--dl-t-med);
}

.dl-progress--idle .dl-progress-bar {
  background: var(--dl-line-2);
}

.dl-empty {
  place-items: center;
  gap: var(--dl-s3);
  text-align: center;
  padding: var(--dl-s8) var(--dl-s4);
  color: var(--dl-dim);
  border: 1px dashed var(--dl-line);
  border-radius: var(--dl-r-lg);
  display: grid;
}

.dl-kbd {
  font-family: var(--dl-mono);
  font-size: var(--dl-fs-xs);
  background: var(--dl-panel-2);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-sm);
  color: var(--dl-dim);
  border-block-end-width: 2px;
  padding: 1px 6px;
}

.dl-page {
  min-height: calc(100vh - var(--dl-nav-h));
}

.dl-nav-drawer {
  display: none;
  position: relative;
}

@media (max-width: 1120px) {
  .dl-nav-drawer {
    display: block;
  }
}

.dl-nav-drawer > summary {
  list-style: none;
}

.dl-nav-drawer > summary::-webkit-details-marker {
  display: none;
}

.dl-nav-drawer-panel {
  inset-inline-end: 0;
  top: calc(100% + var(--dl-s2));
  background: var(--dl-panel);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-md);
  min-width: 200px;
  box-shadow: var(--dl-shadow-2);
  padding: var(--dl-s2);
  z-index: var(--dl-z-drop);
  flex-direction: column;
  display: flex;
  position: absolute;
}

.dl-nav-drawer-panel a {
  padding: var(--dl-s2) var(--dl-s3);
  display: block;
}

.dl-nav-links a {
  white-space: nowrap;
  padding: 4px 8px;
}

.dl-nav-soon {
  font-size: var(--dl-fs-sm);
  color: var(--dl-faint);
  white-space: nowrap;
  cursor: default;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  display: inline-flex;
}

.dl-nav-soon small {
  font-size: var(--dl-fs-xs);
  border: 1px solid var(--dl-line);
  color: var(--dl-dim);
  border-radius: 999px;
  padding: 1px 6px;
}

.dl-nav-drawer-panel {
  min-width: 300px;
  max-width: min(92vw, 360px);
}

.dl-nav-drawer-panel a, .dl-nav-drawer-panel .dl-nav-soon {
  white-space: normal;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  display: flex;
}

.dl-nav-drawer-panel b {
  color: var(--dl-ink);
  font-weight: 600;
}

.dl-nav-drawer-panel a[aria-current="page"] b {
  color: var(--dl-accent);
}

.dl-nav-drawer-panel small {
  font-size: var(--dl-fs-xs);
  color: var(--dl-dim);
  line-height: 1.5;
}

.dl-nav-drawer-panel .dl-nav-soon small {
  border: 0;
  padding: 0;
}

.dl-subnav {
  align-items: center;
  gap: var(--dl-s1);
  padding: var(--dl-s1) var(--dl-s5);
  background: var(--dl-panel);
  border-bottom: 1px solid var(--dl-line);
  display: flex;
  overflow-x: auto;
}

.dl-subnav a {
  color: var(--dl-dim);
  font-size: var(--dl-fs-sm);
  border-radius: var(--dl-r-sm);
  white-space: nowrap;
  padding: 4px 10px;
  text-decoration: none;
}

.dl-subnav a:hover {
  color: var(--dl-ink);
  background: var(--dl-panel-2);
}

.dl-subnav a[aria-current="page"] {
  color: var(--dl-accent);
  background: var(--dl-accent-soft);
  font-weight: 500;
}

.dl-hero--split {
  text-align: start;
}

.dl-hero-grid {
  gap: var(--dl-s7);
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  display: grid;
}

@media (max-width: 880px) {
  .dl-hero-grid {
    gap: var(--dl-s6);
    grid-template-columns: 1fr;
  }
}

.dl-hero--split .dl-hero-sub {
  margin-inline: 0;
}

.dl-hero--split .dl-hero-cta, .dl-hero--split .dl-eyebrow {
  justify-content: flex-start;
}

.dl-preview {
  background: var(--dl-panel);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-lg);
  box-shadow: var(--dl-shadow-3);
  overflow: hidden;
}

.dl-preview-bar {
  align-items: center;
  gap: var(--dl-s2);
  padding: var(--dl-s2) var(--dl-s3);
  border-bottom: 1px solid var(--dl-line);
  background: var(--dl-panel-2);
  font-size: var(--dl-fs-xs);
  color: var(--dl-dim);
  display: flex;
}

.dl-preview-body {
  padding: var(--dl-s4);
  gap: var(--dl-s3);
  display: grid;
}

.dl-preview-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--dl-r-md);
  border: 1px solid var(--dl-line);
  position: relative;
  overflow: hidden;
}

.dl-preview-row {
  justify-content: space-between;
  align-items: center;
  gap: var(--dl-s3);
  font-size: var(--dl-fs-sm);
  display: flex;
}

.dl-stations {
  gap: var(--dl-s4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  display: grid;
}

.dl-station {
  gap: var(--dl-s3);
  background: var(--dl-panel);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-lg);
  padding: var(--dl-s4);
  color: inherit;
  transition: border-color var(--dl-t-fast),transform var(--dl-t-fast),box-shadow var(--dl-t-fast);
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

a.dl-station:hover {
  border-color: var(--dl-accent);
  box-shadow: var(--dl-shadow-2);
  transform: translateY(-2px);
}

.dl-station[aria-disabled="true"] {
  opacity: .6;
}

.dl-station-ico {
  border-radius: var(--dl-r-md);
  background: var(--dl-accent-soft);
  width: 44px;
  height: 44px;
  color: var(--dl-accent);
  flex: none;
  place-items: center;
  display: grid;
}

.dl-station-ico svg {
  width: 22px;
  height: 22px;
}

.dl-station-body {
  gap: var(--dl-s1);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.dl-station-title {
  font-weight: 700;
  font-size: var(--dl-fs-md);
  gap: var(--dl-s2);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.dl-station-desc {
  color: var(--dl-dim);
  font-size: var(--dl-fs-sm);
}

.dl-credits {
  gap: var(--dl-s4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  display: grid;
}

.dl-credit {
  background: var(--dl-panel);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-lg);
  padding: var(--dl-s5);
  color: inherit;
  text-decoration: none;
}

.dl-credit-num {
  font-family: var(--dl-mono);
  font-size: var(--dl-fs-2xl);
  color: var(--dl-accent);
  font-weight: 700;
  line-height: var(--dl-lh-tight);
}

a.dl-credit--link:hover {
  border-color: var(--dl-accent);
}

.dl-footer-tagline {
  max-width: 34ch;
}

.dl-brand-mark {
  align-items: center;
  gap: var(--dl-s2);
  color: inherit;
  text-decoration: none;
  display: inline-flex;
}

.dl-footer .dl-brand {
  font-weight: 700;
  font-size: var(--dl-fs-lg);
  color: var(--dl-accent);
}

:root {
  --dl-ctl-h: 32px;
  --dl-ctl-h-sm: 26px;
  --dl-ctl-r: 8px;
  --dl-ctl-gap: 6px;
  --dl-ico: 18px;
}

.dl-toolbar {
  align-items: center;
  gap: var(--dl-ctl-gap);
  row-gap: var(--dl-ctl-gap);
  flex-wrap: wrap;
  min-width: 0;
  display: flex;
}

.dl-toolbar--bar {
  background: var(--dl-panel);
  border-bottom: 1px solid var(--dl-line);
  padding: 6px 8px;
}

.dl-sep {
  background: var(--dl-line);
  flex: none;
  width: 1px;
  height: 22px;
}

.dl-grow {
  flex: auto;
}

.dl-tbtn, .dl-ibtn {
  height: var(--dl-ctl-h);
  background: var(--dl-panel-2);
  color: var(--dl-ink);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-ctl-r);
  font: inherit;
  font-size: var(--dl-fs-sm);
  white-space: nowrap;
  cursor: pointer;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  line-height: 1;
  display: inline-flex;
}

.dl-ibtn {
  width: var(--dl-ctl-h);
  padding: 0;
}

.dl-tbtn:hover, .dl-ibtn:hover {
  border-color: var(--dl-line-2);
}

.dl-tbtn:focus-visible, .dl-ibtn:focus-visible {
  outline: 2px solid var(--dl-accent);
  outline-offset: 1px;
}

.dl-tbtn:disabled, .dl-ibtn:disabled {
  opacity: .4;
  cursor: default;
}

.dl-tbtn.is-on, .dl-ibtn.is-on, .dl-tbtn[aria-pressed="true"], .dl-ibtn[aria-pressed="true"] {
  background: var(--dl-accent-soft);
  border-color: var(--dl-accent);
  color: var(--dl-ink);
}

.dl-tbtn--primary {
  background: var(--dl-accent);
  border-color: var(--dl-accent);
  color: var(--dl-accent-ink);
  font-weight: 700;
}

.dl-tbtn--primary:hover {
  filter: brightness(1.06);
  border-color: var(--dl-accent);
}

.dl-tbtn--sm, .dl-ibtn--sm {
  height: var(--dl-ctl-h-sm);
  font-size: var(--dl-fs-xs);
  border-radius: 6px;
}

.dl-ibtn--sm {
  width: var(--dl-ctl-h-sm);
}

.dl-ibtn--ghost {
  color: var(--dl-dim);
  background: none;
  border-color: #0000;
}

.dl-ibtn--ghost:hover {
  background: var(--dl-line);
  color: var(--dl-ink);
  border-color: #0000;
}

.dl-ibtn--ghost.is-off {
  opacity: .35;
}

.dl-tbtn .dl-svg, .dl-ibtn .dl-svg {
  width: var(--dl-ico);
  height: var(--dl-ico);
  flex: none;
}

.dl-ibtn--sm .dl-svg, .dl-tbtn--sm .dl-svg {
  width: 16px;
  height: 16px;
}

.dl-tool {
  background: var(--dl-panel-2);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-ctl-r);
  width: 46px;
  height: 40px;
  color: var(--dl-ink);
  cursor: pointer;
  place-items: center;
  padding: 0;
  display: grid;
  position: relative;
}

.dl-tool:hover {
  border-color: var(--dl-line-2);
}

.dl-tool.is-on {
  background: var(--dl-accent-soft);
  border-color: var(--dl-accent);
}

.dl-tool .dl-svg {
  width: 22px;
  height: 22px;
}

.dl-tool .k {
  inset-inline-start: 4px;
  color: var(--dl-dim);
  font-size: 9px;
  font-family: var(--dl-mono);
  position: absolute;
  bottom: 2px;
}

[dir="rtl"] .dl-flip .dl-svg, [dir="rtl"] .dl-svg.dl-flip {
  transform: scaleX(-1);
}

@media (pointer: coarse) {
  .dl-tbtn, .dl-ibtn {
    height: 40px;
  }

  .dl-ibtn {
    width: 40px;
  }

  .dl-tbtn--sm, .dl-ibtn--sm {
    height: 36px;
  }

  .dl-ibtn--sm {
    width: 36px;
  }
}

.dl-reel {
  isolation: isolate;
  background: var(--dl-panel-2);
  align-items: end;
  min-height: min(78vh, 760px);
  display: grid;
  position: relative;
  overflow: hidden;
}

.dl-reel-video {
  object-fit: cover;
  z-index: -2;
  filter: saturate(1.05) contrast(1.02);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.dl-reel:after {
  content: "";
  z-index: -1;
  background: linear-gradient(to top,var(--dl-bg) 0%,color-mix(in oklab,var(--dl-bg) 72%,transparent) 38%,transparent 70%),
             linear-gradient(to right,color-mix(in oklab,var(--dl-bg) 55%,transparent),transparent 55%);
  position: absolute;
  inset: 0;
}

[dir="rtl"] .dl-reel:after {
  background: linear-gradient(to top,var(--dl-bg) 0%,color-mix(in oklab,var(--dl-bg) 72%,transparent) 38%,transparent 70%),
             linear-gradient(to left,color-mix(in oklab,var(--dl-bg) 55%,transparent),transparent 55%);
}

.dl-reel-body {
  padding: var(--dl-s9) 0 var(--dl-s7);
  max-width: 62ch;
}

.dl-reel .dl-hero-title {
  text-align: start;
  margin-bottom: var(--dl-s4);
  text-wrap: balance;
  text-shadow: 0 2px 24px color-mix(in oklab,var(--dl-bg) 80%,transparent);
}

.dl-reel .dl-hero-sub {
  text-align: start;
  margin-inline: 0;
}

.dl-reel .dl-hero-cta {
  justify-content: flex-start;
}

.dl-reel-credit {
  inset-inline-end: var(--dl-s4);
  bottom: var(--dl-s4);
  gap: var(--dl-s2);
  background: color-mix(in oklab,var(--dl-bg) 70%,transparent);
  border: 1px solid var(--dl-line);
  font-size: var(--dl-fs-xs);
  color: var(--dl-dim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  align-items: center;
  padding: 6px 10px;
  display: flex;
  position: absolute;
}

.dl-reel-credit b {
  color: var(--dl-ink);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .dl-reel-video {
    display: none;
  }

  .dl-reel {
    background: var(--dl-panel);
  }
}

.dl-showcase {
  gap: var(--dl-s4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  display: grid;
}

.dl-showcase-card {
  background: var(--dl-panel);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-lg);
  color: inherit;
  transition: border-color var(--dl-t-med),transform var(--dl-t-med),box-shadow var(--dl-t-med);
  flex-direction: column;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.dl-showcase-card:hover {
  border-color: var(--dl-accent);
  box-shadow: var(--dl-shadow-2);
  transform: translateY(-3px);
}

.dl-showcase-card--wide {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .dl-showcase-card--wide {
    grid-column: span 1;
  }
}

.dl-showcase-media {
  aspect-ratio: 16 / 9;
  background: var(--dl-panel-2);
  position: relative;
  overflow: hidden;
}

.dl-showcase-card--tall .dl-showcase-media {
  aspect-ratio: 9 / 16;
}

.dl-showcase-media > video, .dl-showcase-media > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.dl-showcase-kind {
  top: var(--dl-s2);
  position: absolute;
  inset-inline-start: var(--dl-s2);
}

.dl-showcase-body {
  gap: var(--dl-s2);
  padding: var(--dl-s3) var(--dl-s4) var(--dl-s4);
  flex-direction: column;
  display: flex;
}

.dl-showcase-title {
  font-size: var(--dl-fs-md);
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
}

.dl-showcase-meta {
  gap: var(--dl-s2) var(--dl-s3);
  font-size: var(--dl-fs-xs);
  color: var(--dl-dim);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.dl-showcase-meta .dl-cost-num {
  font-size: var(--dl-fs-sm);
}

.dl-showcase-empty {
  padding: var(--dl-s7);
  text-align: center;
  color: var(--dl-dim);
  border: 1px dashed var(--dl-line-2);
  border-radius: var(--dl-r-lg);
  grid-column: 1 / -1;
}

.dl-shot {
  gap: var(--dl-s5);
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  align-items: start;
  display: grid;
}

@media (max-width: 900px) {
  .dl-shot {
    grid-template-columns: 1fr;
  }
}

.dl-shot-media {
  background: var(--dl-panel-2);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-lg);
  position: relative;
  overflow: hidden;
}

.dl-shot-media > video {
  background: #000;
  width: 100%;
  height: auto;
  max-height: 78vh;
  display: block;
}

.dl-shot-prompt {
  white-space: pre-wrap;
  font-size: var(--dl-fs-sm);
  margin: 0;
  line-height: 1.7;
}

.dl-models {
  gap: var(--dl-s3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  display: grid;
}

.dl-model-card {
  gap: var(--dl-s2);
  padding: var(--dl-s4);
  background: var(--dl-panel);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-lg);
  color: inherit;
  transition: border-color var(--dl-t-med),transform var(--dl-t-med);
  flex-direction: column;
  text-decoration: none;
  display: flex;
}

.dl-model-card:hover {
  border-color: var(--dl-accent);
  transform: translateY(-2px);
}

.dl-model-card[aria-disabled="true"] {
  opacity: .55;
}

.dl-model-head {
  justify-content: space-between;
  align-items: center;
  gap: var(--dl-s2);
  display: flex;
}

.dl-model-name {
  font-size: var(--dl-fs-md);
  margin: 0;
  font-weight: 700;
}

.dl-model-provider {
  font-size: var(--dl-fs-xs);
  color: var(--dl-faint);
  font-family: var(--dl-mono);
}

.dl-caps {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.dl-cap {
  font-size: var(--dl-fs-xs);
  background: var(--dl-panel-2);
  border: 1px solid var(--dl-line);
  color: var(--dl-dim);
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  display: inline-flex;
}

.dl-cap--on {
  color: var(--dl-ink);
  border-color: var(--dl-line-2);
}

.dl-model-cost {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--dl-s2);
  padding-top: var(--dl-s2);
  border-top: 1px solid var(--dl-line);
  font-size: var(--dl-fs-xs);
  color: var(--dl-dim);
  margin-top: auto;
  display: flex;
}

.dl-flow {
  height: calc(100dvh - var(--dl-nav-h));
  background: var(--dl-bg);
  min-height: 0;
  color: var(--dl-ink);
  flex-direction: column;
  display: flex;
}

.dl-flow-stage {
  flex: auto;
  min-height: 0;
  position: relative;
}

.dl-flow-status {
  align-items: center;
  gap: var(--dl-s3);
  padding: var(--dl-s1) var(--dl-s3);
  font-size: var(--dl-fs-xs);
  color: var(--dl-dim);
  background: var(--dl-panel);
  border-top: thin solid var(--dl-line);
  min-height: var(--dl-ctl-h-sm);
  display: flex;
}

.dl-flow-status [data-tone="err"] {
  color: var(--dl-err);
}

.dl-flow-status [data-tone="ok"] {
  color: var(--dl-ok);
}

.dl-flow-status [data-tone="warn"] {
  color: var(--dl-warn);
}

.dl-flow-title {
  inline-size: calc(var(--dl-rail) * .6);
  height: var(--dl-ctl-h-sm);
}

.dl-flow-canvas {
  --xy-background-color: var(--dl-bg);
  --xy-background-pattern-color: var(--dl-line);
  --xy-edge-stroke: var(--dl-line-2);
  --xy-edge-stroke-selected: var(--dl-accent);
  --xy-edge-stroke-width: 2;
  --xy-connectionline-stroke: var(--dl-accent);
  --xy-node-background-color: var(--dl-panel);
  --xy-node-border: thin solid var(--dl-line);
  --xy-node-color: var(--dl-ink);
  --xy-node-boxshadow-selected: var(--dl-glow);
  --xy-selection-background-color: var(--dl-accent-soft);
  --xy-selection-border: thin dashed var(--dl-accent);
  --xy-minimap-background-color: var(--dl-panel);
  --xy-minimap-mask-background-color: var(--dl-accent-soft);
  --xy-minimap-node-background-color: var(--dl-line-2);
  --xy-controls-button-background-color: var(--dl-panel);
  --xy-controls-button-color: var(--dl-ink);
  --xy-controls-button-border-color: var(--dl-line);
  --xy-attribution-background-color: transparent;
  block-size: 100%;
  inline-size: 100%;
}

.dl-flow-canvas .react-flow__minimap {
  border: thin solid var(--dl-line);
  border-radius: var(--dl-r-md);
  overflow: hidden;
}

.dl-node {
  inline-size: calc(var(--dl-rail) * .75);
  background: var(--dl-panel);
  border: thin solid var(--dl-line);
  border-radius: var(--dl-r-md);
  box-shadow: var(--dl-shadow-1);
  font-size: var(--dl-fs-sm);
  color: var(--dl-ink);
}

.dl-node--wide {
  inline-size: var(--dl-rail);
}

.selected > .dl-node, .dl-node[data-selected="true"] {
  border-color: var(--dl-accent);
  box-shadow: var(--dl-glow);
}

.dl-node-head {
  align-items: center;
  gap: var(--dl-s2);
  padding: var(--dl-s1) var(--dl-s2) var(--dl-s1) var(--dl-s3);
  border-bottom: thin solid var(--dl-line);
  color: var(--dl-dim);
  font-size: var(--dl-fs-xs);
  min-height: var(--dl-ctl-h);
  font-weight: 600;
  display: flex;
}

.dl-node-head .dl-svg {
  inline-size: var(--dl-fs-sm);
  block-size: var(--dl-fs-sm);
}

.dl-node-body {
  gap: var(--dl-s2);
  padding: var(--dl-s3);
  display: grid;
}

.dl-node-body textarea {
  resize: vertical;
  min-block-size: calc(var(--dl-s10) * .6);
  font-size: var(--dl-fs-sm);
}

.dl-node-media {
  inline-size: 100%;
  max-block-size: calc(var(--dl-rail) * .7);
  object-fit: contain;
  border-radius: var(--dl-r-sm);
  background: var(--dl-panel-2);
  display: block;
}

.dl-node-drop {
  place-items: center;
  gap: var(--dl-s1);
  inline-size: 100%;
  min-block-size: calc(var(--dl-s10) * .75);
  padding: var(--dl-s3);
  font: inherit;
  border: thin dashed var(--dl-line-2);
  border-radius: var(--dl-r-sm);
  color: var(--dl-faint);
  font-size: var(--dl-fs-xs);
  text-align: center;
  cursor: pointer;
  background: none;
  display: grid;
}

.dl-node-drop:hover, .dl-node-drop[data-over="true"] {
  border-color: var(--dl-accent);
  color: var(--dl-accent);
}

.dl-node--note {
  background: var(--dl-warn-soft);
  border-color: var(--dl-warn-soft);
}

.dl-node--comment {
  background: var(--dl-info-soft);
  border-color: var(--dl-info-soft);
  border-inline-start: medium solid var(--dl-info);
}

.dl-node-meta {
  font-size: var(--dl-fs-xs);
  color: var(--dl-faint);
}

.dl-node-err {
  font-size: var(--dl-fs-xs);
  color: var(--dl-err);
}

.dl-node-ports {
  gap: var(--dl-s1);
  padding: var(--dl-s2) 0;
  display: grid;
}

.dl-port-row {
  align-items: center;
  gap: var(--dl-s1);
  padding: 0 var(--dl-s3);
  font-size: var(--dl-fs-xs);
  color: var(--dl-dim);
  min-block-size: var(--dl-ctl-h-sm);
  display: flex;
  position: relative;
}

.dl-port-row--out {
  justify-content: flex-end;
}

.dl-port-row [data-req="true"]:after {
  content: " *";
  color: var(--dl-err);
}

.dl-flow-canvas .react-flow__handle.dl-port {
  inline-size: var(--dl-s3);
  block-size: var(--dl-s3);
  border: medium solid var(--dl-panel);
  border-radius: var(--dl-r-full);
  background: var(--dl-line-2);
}

.dl-flow-canvas .react-flow__handle.dl-port--text {
  background: var(--dl-info);
}

.dl-flow-canvas .react-flow__handle.dl-port--image {
  background: var(--dl-accent);
}

.dl-flow-canvas .react-flow__handle.dl-port--video {
  background: var(--dl-warn);
}

.dl-flow-canvas .react-flow__handle.dl-port--audio {
  background: var(--dl-ok);
}

.dl-flow-canvas .react-flow__handle.dl-port.connectingto {
  box-shadow: var(--dl-glow);
}

.dl-flow-canvas .react-flow__edge.dl-edge--text path.react-flow__edge-path {
  stroke: var(--dl-info);
}

.dl-flow-canvas .react-flow__edge.dl-edge--image path.react-flow__edge-path {
  stroke: var(--dl-accent);
}

.dl-flow-canvas .react-flow__edge.dl-edge--video path.react-flow__edge-path {
  stroke: var(--dl-warn);
}

.dl-flow-canvas .react-flow__edge.dl-edge--audio path.react-flow__edge-path {
  stroke: var(--dl-ok);
}

.dl-flow-canvas .react-flow__edge.selected path.react-flow__edge-path {
  stroke-width: 3px;
  filter: drop-shadow(var(--dl-glow));
}

.dl-flow-pop {
  z-index: var(--dl-z-drop);
  gap: var(--dl-s1);
  padding: var(--dl-s2);
  background: var(--dl-panel);
  border: thin solid var(--dl-line);
  border-radius: var(--dl-r-md);
  box-shadow: var(--dl-shadow-2);
  display: grid;
  position: absolute;
}

.dl-flow-pop--row {
  grid-auto-flow: column;
}

.dl-flow-list {
  inline-size: var(--dl-rail);
  max-block-size: 70%;
  inset-block-start: var(--dl-s2);
  inset-inline-start: var(--dl-s2);
  overflow: auto;
}

.dl-flow-list button {
  justify-content: space-between;
  gap: var(--dl-s2);
  inline-size: 100%;
  padding: var(--dl-s2);
  text-align: start;
  border-radius: var(--dl-r-sm);
  color: var(--dl-ink);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  display: flex;
}

.dl-flow-list button:hover {
  background: var(--dl-line);
}

.dl-flow-empty {
  place-content: center;
  gap: var(--dl-s1);
  text-align: center;
  pointer-events: none;
  color: var(--dl-faint);
  display: grid;
  position: absolute;
  inset: 0;
}

.dl-flow-embed {
  block-size: calc(var(--dl-s10) * 4);
  border: thin solid var(--dl-line);
  border-radius: var(--dl-r-lg);
  background: var(--dl-bg);
  box-shadow: var(--dl-shadow-2);
  text-align: start;
  position: relative;
  overflow: hidden;
}

.dl-flow-embed--sm {
  block-size: calc(var(--dl-s10) * 2.25);
}

.dl-flow-embed .dl-flow {
  block-size: 100%;
}

/* [project]/delato-flow/node_modules/@xyflow/react/dist/base.css [app-client] (css) */
.react-flow {
  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;
  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;
  --xy-attribution-background-color-default: #ffffff80;
  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: #f0f0f099;
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;
  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-border-default: 1px solid #bbb;
  --xy-node-border-selected-default: 1px solid #555;
  --xy-handle-background-color-default: #333;
  --xy-selection-background-color-default: #9696b41a;
  --xy-selection-border-default: 1px dotted #9b9b9bcc;
  --xy-resize-background-color-default: #3367d9;
  direction: ltr;
}

.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;
  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;
  --xy-attribution-background-color-default: #96969640;
  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: #3c3c3c99;
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;
  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #555;
  --xy-background-pattern-lines-color-default: #333;
  --xy-background-pattern-cross-color-default: #333;
  --xy-node-color-default: #f8f8f8;
}

.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}

.react-flow__container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.react-flow__pane {
  z-index: 1;
  touch-action: none;
}

.react-flow__pane.draggable {
  cursor: grab;
}

.react-flow__pane.dragging {
  cursor: grabbing;
}

.react-flow__pane.selection {
  cursor: pointer;
}

.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}

.react-flow__renderer {
  z-index: 4;
}

.react-flow__selection {
  z-index: 6;
}

.react-flow__nodesselection-rect:focus, .react-flow__nodesselection-rect:focus-visible {
  outline: none;
}

.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}

.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}

.react-flow .react-flow__edges {
  position: absolute;
}

.react-flow .react-flow__edges svg {
  pointer-events: none;
  position: absolute;
  overflow: visible;
}

.react-flow__edge {
  pointer-events: visibleStroke;
}

.react-flow__edge.selectable {
  cursor: pointer;
}

.react-flow__edge.animated path {
  stroke-dasharray: 5;
  animation: .5s linear infinite dashdraw;
}

.react-flow__edge.animated path.react-flow__edge-interaction {
  stroke-dasharray: none;
  animation: none;
}

.react-flow__edge.inactive {
  pointer-events: none;
}

.react-flow__edge.selected, .react-flow__edge:focus, .react-flow__edge:focus-visible {
  outline: none;
}

.react-flow__edge.selected .react-flow__edge-path, .react-flow__edge.selectable:focus .react-flow__edge-path, .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
  stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
}

.react-flow__edge-textwrapper {
  pointer-events: all;
}

.react-flow__edge .react-flow__edge-text {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}

.react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}

.react-flow__connection {
  pointer-events: none;
}

.react-flow__connection .animated {
  stroke-dasharray: 5;
  animation: .5s linear infinite dashdraw;
}

svg.react-flow__connectionline {
  z-index: 1001;
  position: absolute;
  overflow: visible;
}

.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}

.react-flow__node {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
  position: absolute;
}

.react-flow__node.selectable {
  cursor: pointer;
}

.react-flow__node.draggable {
  cursor: grab;
  pointer-events: all;
}

.react-flow__node.draggable.dragging {
  cursor: grabbing;
}

.react-flow__nodesselection {
  z-index: 3;
  transform-origin: 0 0;
  pointer-events: none;
}

.react-flow__nodesselection-rect {
  pointer-events: all;
  cursor: grab;
  position: absolute;
}

.react-flow__handle {
  pointer-events: none;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  min-width: 5px;
  min-height: 5px;
  position: absolute;
}

.react-flow__handle.connectingfrom {
  pointer-events: all;
}

.react-flow__handle.connectionindicator {
  pointer-events: all;
  cursor: crosshair;
}

.react-flow__handle-bottom {
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.react-flow__handle-top {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.react-flow__handle-left {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.react-flow__handle-right {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}

.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}

.react-flow__panel {
  z-index: 5;
  margin: 15px;
  position: absolute;
}

.react-flow__panel.top {
  top: 0;
}

.react-flow__panel.bottom {
  bottom: 0;
}

.react-flow__panel.top.center, .react-flow__panel.bottom.center {
  left: 50%;
  transform: translateX(-15px) translateX(-50%);
}

.react-flow__panel.left {
  left: 0;
}

.react-flow__panel.right {
  right: 0;
}

.react-flow__panel.left.center, .react-flow__panel.right.center {
  top: 50%;
  transform: translateY(-15px) translateY(-50%);
}

.react-flow__attribution {
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  margin: 0;
  padding: 2px 3px;
  font-size: 10px;
}

.react-flow__attribution a {
  color: #999;
  text-decoration: none;
}

@keyframes dashdraw {
  from {
    stroke-dashoffset: 10px;
  }
}

.react-flow__edgelabel-renderer {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.react-flow__viewport-portal {
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.react-flow__minimap {
  background: var(--xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)));
}

.react-flow__minimap-svg {
  display: block;
}

.react-flow__minimap-mask {
  fill: var(--xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)));
  stroke: var(--xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)));
  stroke-width: var(--xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)));
}

.react-flow__minimap-node {
  fill: var(--xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)));
  stroke: var(--xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)));
  stroke-width: var(--xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)));
}

.react-flow__background-pattern.dots {
  fill: var(--xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)));
}

.react-flow__background-pattern.lines {
  stroke: var(--xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)));
}

.react-flow__background-pattern.cross {
  stroke: var(--xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)));
}

.react-flow__controls {
  flex-direction: column;
  display: flex;
}

.react-flow__controls.horizontal {
  flex-direction: row;
}

.react-flow__controls-button {
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  padding: 4px;
  display: flex;
}

.react-flow__controls-button svg {
  fill: currentColor;
  width: 100%;
  max-width: 12px;
  max-height: 12px;
}

.react-flow__node-input, .react-flow__node-default, .react-flow__node-output, .react-flow__node-group {
  border: var(--xy-node-border, var(--xy-node-border-default));
  color: var(--xy-node-color, var(--xy-node-color-default));
}

.react-flow__node-input.selected, .react-flow__node-input:focus, .react-flow__node-input:focus-visible, .react-flow__node-default.selected, .react-flow__node-default:focus, .react-flow__node-default:focus-visible, .react-flow__node-output.selected, .react-flow__node-output:focus, .react-flow__node-output:focus-visible, .react-flow__node-group.selected, .react-flow__node-group:focus, .react-flow__node-group:focus-visible {
  border: var(--xy-node-border-selected, var(--xy-node-border-selected-default));
  outline: none;
}

.react-flow__nodesselection-rect, .react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}

.react-flow__resize-control {
  position: absolute;
}

.react-flow__resize-control.left, .react-flow__resize-control.right {
  cursor: ew-resize;
}

.react-flow__resize-control.top, .react-flow__resize-control.bottom {
  cursor: ns-resize;
}

.react-flow__resize-control.top.left, .react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}

.react-flow__resize-control.bottom.left, .react-flow__resize-control.top.right {
  cursor: nesw-resize;
}

.react-flow__resize-control.handle {
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border: 1px solid #fff;
  border-radius: 1px;
  width: 5px;
  height: 5px;
  translate: -50% -50%;
}

.react-flow__resize-control.handle.left {
  top: 50%;
  left: 0;
}

.react-flow__resize-control.handle.right {
  top: 50%;
  left: 100%;
}

.react-flow__resize-control.handle.top {
  top: 0;
  left: 50%;
}

.react-flow__resize-control.handle.bottom {
  top: 100%;
  left: 50%;
}

.react-flow__resize-control.handle.top.left, .react-flow__resize-control.handle.bottom.left {
  left: 0;
}

.react-flow__resize-control.handle.top.right, .react-flow__resize-control.handle.bottom.right {
  left: 100%;
}

.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-style: solid;
  border-width: 0;
}

.react-flow__resize-control.line.left, .react-flow__resize-control.line.right {
  width: 1px;
  height: 100%;
  top: 0;
  transform: translate(-50%);
}

.react-flow__resize-control.line.left {
  border-left-width: 1px;
  left: 0;
}

.react-flow__resize-control.line.right {
  border-right-width: 1px;
  left: 100%;
}

.react-flow__resize-control.line.top, .react-flow__resize-control.line.bottom {
  width: 100%;
  height: 1px;
  left: 0;
  transform: translate(0, -50%);
}

.react-flow__resize-control.line.top {
  border-top-width: 1px;
  top: 0;
}

.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}

/*# sourceMappingURL=_0sqtsgcqq4p4b._.css.map*/