.dl-studio {
  --dls-accent: #bda478;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 580px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 28px;
  background: #0c0c12;
  color: #f4f0e8;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
}
.dl-studio[data-backdrop="clear"] { background: repeating-conic-gradient(#cfd0d5 0% 25%, #ececf0 0% 50%) 50% / 24px 24px; }
.dl-studio[data-tone="light"] { color: #1c1b24; }
.dl-studio:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.dl-studio__stage { position: absolute; inset: 0; outline: none; touch-action: none; user-select: none; }
.dl-studio__stage:focus-visible { outline: 3px solid var(--dls-accent); outline-offset: -5px; }
.dl-studio__stage canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.dl-studio__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.dl-studio__hint { position: absolute; z-index: 2; top: 25px; left: 25px; right: 130px; font-size: 12px; opacity: .75; pointer-events: none; transition: opacity .35s; }
.dl-studio__hint[data-faded="true"] { opacity: 0; }
.dl-studio__hint kbd { color: inherit; font-family: inherit; font-weight: 650; }
.dl-studio__tools { position: absolute; z-index: 3; top: 16px; right: 16px; display: flex; gap: 8px; }
.dl-studio__circle { border: 1px solid #ffffff22; border-radius: 50%; width: 40px; height: 40px; padding: 10px; display: grid; place-items: center; color: #f5f2ec; background: #202027d9; box-shadow: 0 4px 14px #0003; cursor: pointer; }
.dl-studio__circle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dl-studio button:focus-visible, .dl-studio input:focus-visible { outline: 2px solid var(--dls-accent); outline-offset: 3px; }
.dl-studio__dock { position: absolute; z-index: 4; bottom: 18px; left: 18px; right: 18px; max-width: 930px; margin: 0 auto; background: #141418ed; color: #f4f0e8; border: 1px solid #ffffff17; border-radius: 22px; box-shadow: 0 12px 45px #0004; backdrop-filter: blur(18px); }
.dl-studio__tabbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
/* Fractional tab widths can round down the native RTL scroll range; the inset keeps end tabs whole. */
.dl-studio__tablist { display: flex; flex: 1; gap: 4px; min-width: 0; padding-inline: 1px; overflow-x: auto; scrollbar-width: none; }
.dl-studio__tab { flex: 1; white-space: nowrap; padding: 10px 13px; border: 0; border-radius: 100px; background: transparent; color: #aaa9b5; font: inherit; font-weight: 600; cursor: pointer; }
.dl-studio__tab[aria-selected="true"] { background: #ffffff10; color: #f4f0e8; box-shadow: 0 2px 8px #0002; }
.dl-studio__dock .dl-studio__circle { flex-shrink: 0; width: 34px; height: 34px; padding: 8px; }
.dl-studio__panel { padding: 0 18px 16px; }
.dl-studio [hidden] { display: none !important; }
.dl-studio__row { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.dl-studio__row + .dl-studio__row { border-top: 1px solid #ffffff0b; }
.dl-studio__row-label { flex: 0 0 78px; color: #aaa9b5; font-size: 12px; }
.dl-studio__row-items { display: flex; flex: 1; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.dl-studio__pill { display: inline-flex; justify-content: center; align-items: center; gap: 7px; border: 1px solid #ffffff19; border-radius: 100px; background: #ffffff05; color: #e6e2db; padding: 8px 13px; font: inherit; font-size: 12px; cursor: pointer; box-shadow: 0 2px 6px #0002; }
.dl-studio__pill:hover { background: #ffffff10; }
.dl-studio__pill[aria-pressed="true"] { border-color: var(--dls-accent); color: var(--dls-accent); background: color-mix(in srgb, var(--dls-accent) 12%, #141418); }
.dl-studio__pill--action { border-color: color-mix(in srgb, var(--dls-accent) 40%, transparent); }
.dl-studio__swatch { display: flex; width: 20px; height: 14px; border-radius: 8px; overflow: hidden; border: 1px solid #ffffff2a; background: linear-gradient(135deg, var(--dls-swatch-a) 50%, var(--dls-swatch-b) 50%); }
.dl-studio__swatch span { display: block; flex: 1; min-width: 0; }
.dl-studio__slider { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 130px; max-width: 420px; }
.dl-studio__range { width: 100%; min-width: 60px; accent-color: var(--dls-accent); cursor: pointer; }
.dl-studio__output { min-width: 38px; text-align: right; color: #dbd7d0; font: 12px/1.2 monospace; }
.dl-studio__notice { position: absolute; z-index: 3; top: 65px; right: 20px; padding: 8px 14px; border-radius: 100px; background: #202027ed; color: #f4f0e8; opacity: 0; pointer-events: none; transition: opacity .15s; box-shadow: 0 3px 14px #0002; }
.dl-studio[data-zoom-notice="true"] .dl-studio__notice { opacity: 1; }
.dl-studio__status { position: absolute; z-index: 5; top: 45%; left: 8%; right: 8%; text-align: center; border-radius: 20px; padding: 22px; background: #141418ed; color: #f4f0e8; box-shadow: 0 8px 30px #0004; }
.dl-studio[data-state="error"] .dl-studio__status { border: 1px solid #eaac8599; }
@media (max-width: 600px) {
  .dl-studio { border-radius: 20px; min-height: 600px; }
  .dl-studio__dock { left: 8px; right: 8px; bottom: 8px; border-radius: 18px; }
  .dl-studio__tabbar { padding: 7px; gap: 4px; }
  .dl-studio__tab { padding: 10px 8px; font-size: 11px; }
  .dl-studio__panel { padding: 0 12px 12px; }
  .dl-studio__row { align-items: flex-start; gap: 7px; padding: 8px 0; }
  .dl-studio__row-label { flex-basis: 60px; padding-top: 8px; font-size: 11px; }
  .dl-studio__pill { padding: 8px 10px; font-size: 11px; }
  .dl-studio__hint { left: 14px; top: 18px; right: 100px; font-size: 10px; }
  .dl-studio__tools { right: 10px; top: 10px; gap: 6px; }
  .dl-studio__circle { width: 34px; height: 34px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) { .dl-studio * { transition: none !important; } }
.dl-studio__export-status { margin: 12px 0 4px; max-width: 58ch; font-size: 12px; line-height: 1.5; opacity: .75; }