@layer tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    --dl-thumb: var(--ghost-on-base-hover);
    --dl-groove: var(--surface-1);
    --pl-stage: #000;
    --pl-ink: #fff;
    --pl-ink-2: rgb(255 255 255 / .82);
    --pl-mat: rgb(22 22 24 / .76);
    --pl-mat-strong: rgb(22 22 24 / .92);
    --pl-rail: rgb(255 255 255 / .26);
    --pl-buf: rgb(255 255 255 / .46);
    --pl-hover: rgb(255 255 255 / .14);
    --pl-blur: blur(24px) saturate(120%);
  }

  :root,
  ::backdrop {
    --dl-scrim: rgb(0 0 0 / .55);
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --dl-thumb: var(--surface-1);
    }

    :root:not([data-theme="dark"]),
    :root:not([data-theme="dark"]) ::backdrop {
      --dl-scrim: rgb(0 0 0 / .32);
    }
  }

  :root[data-theme="light"] {
    --dl-thumb: var(--surface-1);
  }

  :root[data-theme="light"],
  :root[data-theme="light"] ::backdrop {
    --dl-scrim: rgb(0 0 0 / .32);
  }
}

@layer components {
  .dl__bar {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
  }

  .dl__field {
    min-block-size: 50px;
    padding-inline-end: var(--s2);
  }

  .dl__field > .input {
    flex: 1 1 auto;
    text-overflow: ellipsis;
  }

  .dl__field > .btn {
    flex: none;
  }

  @media (hover: hover) {
    .dl__field > .btn--quiet:hover {
      background: var(--ghost-on-base-hover);
    }
  }

  .dl__go {
    inline-size: 100%;
  }

  .dl__go .spinner,
  .dl-btn .spinner {
    inline-size: 18px;
    block-size: 18px;
  }

  .dl__go[aria-busy="true"] {
    cursor: progress;
  }

  .dl .card__foot.is-held {
    color: var(--text-1);
    font-weight: 600;
  }

  @media (pointer: coarse) {
    .dl__clear::after,
    .dl__paste::after {
      inset-inline: -6px;
    }

    .dl-player__seek::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block: -10px;
    }

    .dl-again {
      min-block-size: 44px;
    }
  }

  @media (max-width: 29.99rem) {
    .main > header > .tile-ico--hero {
      display: none;
    }

    .main > .dl > .card__head {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .main.stack--lg > header + .dl {
      margin-block-start: var(--s6);
    }
  }

  @media (min-width: 40rem) {
    .dl__bar {
      flex-direction: row;
      align-items: stretch;
    }

    .dl__field {
      flex: 1 1 auto;
      min-inline-size: 0;
    }

    .dl__go {
      flex: none;
      inline-size: auto;
      min-inline-size: 12.5rem;
    }
  }

  .dl__form--source {
    display: grid;
    gap: var(--s4);
    margin-block-start: var(--s4);
  }

  .dl__step {
    display: grid;
    gap: var(--s2);
  }

  .dl__label {
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--text-1);
  }

  .dl__note {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-sm);
  }

  .dl__vsrow {
    display: flex;
    gap: var(--s2);
    align-items: stretch;
  }

  .dl__vsfield {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding-inline: var(--s3);
    border-radius: var(--r-ctl);
    background: var(--field);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    text-overflow: ellipsis;
  }

  .dl__copy {
    flex: none;
    min-block-size: 44px;
  }

  .dl__copy[data-copied] {
    color: var(--ok-ink);
  }

  .dl__source {
    min-block-size: 7.5rem;
    max-block-size: 16rem;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .dl__source::placeholder {
    font-family: var(--font-sans);
  }

  [dir="rtl"] .dl__source:placeholder-shown {
    direction: rtl;
  }

  [dir="rtl"] .dl-err a.btn .icon {
    scale: -1 1;
  }

  .dl__go--block {
    inline-size: 100%;
  }

  .dl--source .callout {
    margin-block-start: var(--s2);
  }

  @media (min-width: 40rem) {
    .dl__go--block {
      justify-self: start;
      inline-size: auto;
      min-inline-size: 12.5rem;
    }
  }

  .dl__out {
    display: grid;
    align-content: start;
    gap: var(--s5);
    margin-block-start: var(--s5);
  }

  .dl-media {
    display: grid;
    gap: var(--s4);
    align-items: start;
  }

  .dl-media__preview {
    justify-self: center;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    inline-size: min(100%, calc(400px * var(--dl-ar, 16 / 9)));
    inline-size: min(100%, calc(min(50svh, 400px) * var(--dl-ar, 16 / 9)));
    aspect-ratio: var(--dl-ar, 16 / 9);
    border-radius: var(--r-nested);
    background: var(--surface-2);
    color: var(--text-3);
    overflow: hidden;
  }

  .dl-media__preview > * {
    grid-area: 1 / 1;
  }

  .dl-media__preview > [hidden] {
    display: none;
  }

  .dl-media__preview > video,
  .dl-media__preview > img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  .dl-media__preview--fill > video,
  .dl-media__preview--fill > img {
    object-fit: cover;
  }

  .dl-media__preview--empty {
    display: grid;
    place-items: center;
    color: var(--text-3);
  }

  .dl-player {
    --pl-p: 0;
    --pl-b: 0;
    --pl-h: 0;
    direction: ltr;
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    container-type: inline-size;
    background: var(--pl-stage);
    color: var(--pl-ink);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .dl-player[data-idle] {
    cursor: none;
  }

  .dl-player > video,
  .dl-player__art,
  .dl-player__art > img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  .dl-player__art {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    color: var(--pl-ink-2);
  }

  .dl-player > audio {
    display: none;
  }

  .dl-player__big,
  .dl-player__wait {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    display: grid;
    place-items: center;
    inline-size: 52px;
    block-size: 52px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--pl-mat);
    -webkit-backdrop-filter: var(--pl-blur);
    backdrop-filter: var(--pl-blur);
    color: var(--pl-ink);
    translate: -50% -50%;
    transition: opacity var(--t) var(--ease), scale var(--t) var(--ease), background-color var(--t-fast) var(--ease), visibility 0s linear 0s;
  }

  .dl-player__big {
    cursor: pointer;
  }

  .dl-player:not([data-state="playing"]) .dl-player__big .icon {
    translate: 1.5px 0;
  }

  .dl-player__big:active {
    scale: .94;
  }

  .dl-player[data-state="playing"] .dl-player__big,
  .dl-player[data-wait] .dl-player__big,
  .dl-player__wait {
    opacity: 0;
    scale: .88;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t) var(--ease), scale var(--t) var(--ease), visibility 0s linear var(--t);
  }

  .dl-player[data-wait] .dl-player__wait {
    opacity: 1;
    scale: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .dl-player__bar {
    position: absolute;
    inset-inline: 6px;
    inset-block-end: 6px;
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "seek seek seek seek seek seek"
      "toggle time eq . mute fs";
    align-items: center;
    padding: 0 2px 2px;
    border-radius: 9px;
    background: var(--pl-mat);
    -webkit-backdrop-filter: var(--pl-blur);
    backdrop-filter: var(--pl-blur);
    transition: opacity var(--t) var(--ease), translate var(--t) var(--ease), visibility 0s linear 0s;
  }

  .dl-player[data-kind="video"][data-state="idle"] .dl-player__bar {
    opacity: 0;
    translate: 0 8px;
    visibility: hidden;
    transition: opacity var(--t) var(--ease), translate var(--t) var(--ease), visibility 0s linear var(--t);
  }

  .dl-player[data-idle]:not(:has(:focus-visible)) .dl-player__bar {
    opacity: 0;
    translate: 0 8px;
    pointer-events: none;
  }

  .dl-player__seek {
    grid-area: seek;
    position: relative;
    display: grid;
    align-items: center;
    block-size: 24px;
    padding-inline: 8px;
    border-radius: 7px;
    cursor: pointer;
    touch-action: none;
    outline: none;
  }

  .dl-player__rail {
    position: relative;
    block-size: 4px;
    border-radius: var(--r-pill);
    background: var(--pl-rail);
    transition: block-size var(--t-fast) var(--ease);
  }

  .dl-player__buf,
  .dl-player__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: inherit;
  }

  .dl-player__buf {
    inline-size: calc(var(--pl-b) * 100%);
    background: var(--pl-buf);
  }

  .dl-player__fill {
    inline-size: calc(var(--pl-p) * 100%);
    background: var(--accent);
  }

  .dl-player__knob {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(var(--pl-p) * 100%);
    inline-size: 12px;
    block-size: 12px;
    border-radius: 50%;
    background: var(--pl-ink);
    translate: -50% -50%;
    scale: 0;
    transition: scale var(--t-fast) var(--ease);
  }

  .dl-player__seek:focus-visible .dl-player__rail,
  .dl-player[data-drag] .dl-player__rail {
    block-size: 6px;
  }

  .dl-player__seek:focus-visible .dl-player__knob,
  .dl-player[data-drag] .dl-player__knob {
    scale: 1;
  }

  .dl-player__tip {
    position: absolute;
    inset-block-end: calc(100% + 4px);
    inset-inline-start: clamp(24px, calc(8px + var(--pl-h) * (100% - 16px)), calc(100% - 24px));
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--pl-mat-strong);
    color: var(--pl-ink);
    font-size: var(--fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    white-space: nowrap;
    translate: -50% 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast) var(--ease);
  }

  .dl-player[data-tip] .dl-player__tip {
    opacity: 1;
  }

  .dl-player__btn {
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--pl-ink);
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease);
  }

  .dl-player__btn[hidden] {
    display: none;
  }

  .dl-player__toggle { grid-area: toggle; }
  .dl-player__vol { grid-area: mute; }
  .dl-player__fs { grid-area: fs; }

  .dl-player__vol {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .dl-player__vslider {
    display: grid;
    align-items: center;
    inline-size: 0;
    block-size: 32px;
    padding-inline: 0;
    border-radius: 7px;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    touch-action: none;
    outline: none;
    transition: inline-size var(--t) var(--ease), padding var(--t) var(--ease), opacity var(--t) var(--ease);
  }

  .dl-player__vol:hover .dl-player__vslider,
  .dl-player__vol:has(:focus-visible) .dl-player__vslider,
  .dl-player[data-vdrag] .dl-player__vslider {
    inline-size: 64px;
    padding-inline: 8px 6px;
    opacity: 1;
    pointer-events: auto;
  }

  .dl-player__vrail {
    position: relative;
    block-size: 4px;
    border-radius: var(--r-pill);
    background: var(--pl-rail);
  }

  .dl-player__vfill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: calc(var(--pl-v, 1) * 100%);
    border-radius: inherit;
    background: var(--pl-ink);
  }

  .dl-player__vknob {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(var(--pl-v, 1) * 100%);
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: var(--pl-ink);
    translate: -50% -50%;
  }

  .dl-player__btn:focus-visible,
  .dl-player__big:focus-visible,
  .dl-player__seek:focus-visible,
  .dl-player__vslider:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }

  .dl-player__time {
    grid-area: time;
    padding-inline: 4px 2px;
    color: var(--pl-ink-2);
    font-size: var(--fs-xs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
  }

  .dl-player__now {
    color: var(--pl-ink);
  }

  .dl-player__eq {
    grid-area: eq;
    display: none;
    align-items: flex-end;
    gap: 2px;
    block-size: 12px;
    margin-inline: 4px 2px;
  }

  .dl-player__eq > i {
    inline-size: 3px;
    block-size: 100%;
    border-radius: 1px;
    background: var(--accent);
    transform-origin: 50% 100%;
    animation: dl-eq 1s var(--ease) infinite alternate;
  }

  .dl-player__eq > i:nth-child(2) {
    animation-duration: .8s;
    animation-delay: -.4s;
  }

  .dl-player__eq > i:nth-child(3) {
    animation-duration: 1.2s;
    animation-delay: -.7s;
  }

  .dl-player[data-state="playing"] .dl-player__eq {
    display: inline-flex;
  }

  .dl-player[data-wait] .dl-player__eq > i {
    animation-play-state: paused;
  }

  @keyframes dl-eq {
    from { scale: 1 .25; }
    to { scale: 1 1; }
  }

  @media (hover: hover) {
    .dl-player__btn:hover {
      background: var(--pl-hover);
    }

    .dl-player__big:hover {
      background: var(--pl-mat-strong);
    }

    .dl-player__seek:hover .dl-player__rail {
      block-size: 6px;
    }

    .dl-player__seek:hover .dl-player__knob {
      scale: 1;
    }
  }

  @media (pointer: coarse) {
    .dl-player__btn {
      inline-size: 44px;
      block-size: 44px;
    }

    .dl-player__btn .icon {
      inline-size: 22px;
      block-size: 22px;
    }

    .dl-player__seek {
      block-size: 28px;
    }
  }

  @container (min-width: 18rem) {
    .dl-player__bar {
      grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
      grid-template-areas: "toggle time seek eq mute fs";
      padding: 2px;
    }

    .dl-player__big,
    .dl-player__wait {
      inline-size: 60px;
      block-size: 60px;
    }
  }

  @container (max-width: 20rem) {
    .dl-player__bar:has(.dl-player__vol:hover > .dl-player__vslider) .dl-player__time,
    .dl-player__bar:has(.dl-player__vslider:focus-visible, .dl-player__vslider ~ :focus-visible) .dl-player__time,
    .dl-player[data-vdrag] .dl-player__time {
      display: none;
    }
  }

  @container (max-width: 12.5rem) {
    .dl-player__dur {
      display: none;
    }

    .dl-player__bar {
      inset-inline: 4px;
      inset-block-end: 4px;
    }

    .dl-player__big,
    .dl-player__wait {
      inline-size: 44px;
      block-size: 44px;
    }
  }

  .dl-player[data-fs] > video {
    object-fit: contain;
  }

  .dl-player[data-fs] .dl-player__bar {
    inset-inline: 16px;
    inset-block-end: 16px;
    border-radius: 12px;
  }

  .dl-player[data-fs] .dl-player__big,
  .dl-player[data-fs] .dl-player__wait {
    inline-size: 72px;
    block-size: 72px;
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .dl-player__bar,
    .dl-player__big,
    .dl-player__wait {
      background: var(--pl-mat-strong);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dl-player__eq > i {
      animation: none;
      scale: 1 .6;
    }

    .dl-player__eq > i:nth-child(2) {
      scale: 1 1;
    }

    .dl-player__eq > i:nth-child(3) {
      scale: 1 .4;
    }
  }

  @media (min-width: 40rem) {
    .dl-media--tall { --dl-pw: 11rem; }
    .dl-media--square { --dl-pw: 14rem; }
    .dl-media--wide { --dl-pw: 18rem; }

    .dl-media:has(> .dl-media__preview) {
      grid-template-columns: var(--dl-pw, 14rem) minmax(0, 1fr);
      column-gap: var(--s5);
    }
  }

  .dl-media__info {
    display: grid;
    gap: var(--s3);
    min-inline-size: 0;
    align-content: start;
  }

  .dl-author {
    display: flex;
    align-items: center;
    gap: var(--s2);
    min-inline-size: 0;
    color: var(--text-1);
    font-size: var(--fs-sm);
    font-weight: 600;
  }

  .dl-author__img {
    flex: none;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    object-fit: cover;
  }

  .dl-author__img--letter {
    display: inline-grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1;
  }

  .dl-author__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dl-author .icon {
    --ico: 16px;
    color: var(--accent-ink);
  }

  .dl-media__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: var(--fs-lg);
    overflow-wrap: anywhere;
  }

  .dl-media__desc {
    color: var(--text-2);
    font-size: var(--fs-sm);
    white-space: pre-line;
    overflow-wrap: anywhere;
  }

  .dl-media__desc.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  .dl-more {
    justify-self: start;
    margin-block-start: calc(-1 * var(--s2));
    margin-inline-start: calc(-1 * var(--s3));
    color: var(--accent-ink);
  }

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

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

  .dl-stats .chip {
    font-variant-numeric: tabular-nums;
  }

  .dl-seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--r-ctl);
    background: var(--surface-2);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .dl-seg::-webkit-scrollbar {
    display: none;
  }

  .dl-seg__tab {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-block-size: 36px;
    padding-inline: var(--s3);
    border: 0;
    border-radius: calc(var(--r-ctl) - 3px);
    background: transparent;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }

  .dl-seg__tab:hover {
    color: var(--text-1);
  }

  .dl-seg__tab:focus-visible {
    outline-offset: -2px;
  }

  .dl-seg__tab[aria-selected="true"] {
    background: var(--dl-thumb);
    color: var(--text-1);
  }

  .dl-seg__n {
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }

  .dl-seg__tab[aria-selected="true"] .dl-seg__n {
    color: var(--text-2);
  }

  @media (pointer: coarse) {
    .dl-seg__tab {
      min-block-size: 44px;
    }
  }

  .dl-item .row__title {
    flex-wrap: wrap;
  }

  .dl-item .row__meta {
    font-variant-numeric: tabular-nums;
  }

  .dl-item__err {
    color: var(--err-ink);
  }

  .row__meta.dl-item__err {
    white-space: normal;
  }

  .dl-btn {
    min-inline-size: 7.5rem;
    font-variant-numeric: tabular-nums;
  }

  .dl-btn[aria-disabled="true"],
  .dl-actions .btn[aria-disabled="true"] {
    background: var(--ghost-on-base);
  }


  .dl-btn[aria-busy="true"] {
    color: var(--text-2);
    cursor: progress;
  }

  .dl-item.is-job {
    flex-wrap: wrap;
  }

  .dl-job {
    display: grid;
    align-content: start;
    flex: 1 0 100%;
    gap: var(--s3);
    padding-block: var(--s1);
  }

  .dl-job__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    min-block-size: 32px;
    color: var(--text-1);
    font-size: var(--fs-sm);
    font-weight: 600;
  }

  .dl-job__status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--s2);
    row-gap: 2px;
    min-inline-size: 0;
  }

  .dl-job__pct {
    color: var(--text-2);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }

  .dl-job__pct:empty {
    display: none;
  }

  .dl-job__head > .btn {
    flex: none;
  }

  .dl-meter {
    block-size: 6px;
    border-radius: var(--r-pill);
    background: var(--dl-groove);
    overflow: hidden;
  }

  .dl-meter__fill {
    block-size: 100%;
    inline-size: 0;
    border-radius: inherit;
    background: var(--accent-ink);
    transition: inline-size var(--t) var(--ease);
  }

  .dl-job.is-done .dl-meter__fill {
    background: var(--ok-ink);
  }

  .dl-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: var(--s2);
    row-gap: var(--s1);
  }

  .dl-step {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-weight: 600;
  }

  .dl-step::before {
    content: "";
    flex: none;
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--r-pill);
    background: currentColor;
    opacity: .45;
  }

  .dl-step.is-now {
    color: var(--text-1);
  }

  .dl-step.is-done {
    color: var(--accent-ink);
  }

  .dl-step.is-now::before,
  .dl-step.is-done::before {
    opacity: 1;
  }

  .dl-job.is-done .dl-step {
    color: var(--ok-ink);
  }

  .dl-job__note {
    color: var(--text-2);
    font-size: var(--fs-xs);
  }

  .dl-job.is-throttled .dl-job__note {
    color: var(--warn-ink);
    font-weight: 600;
  }

  .dl-job.is-saved > :not(.dl-save) {
    display: none;
  }

  .dl-save {
    inline-size: 100%;
    flex-wrap: wrap;
    row-gap: 2px;
    line-height: 1.2;
  }

  .dl-save > span {
    white-space: nowrap;
  }

  @media (max-width: 39.99rem) {
    .dl-save {
      padding-inline: var(--s4);
    }
  }

  .dl-item.is-job > .row__aside {
    display: none;
  }

  .dl-save__size {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  .dl-tracks {
    margin-block-start: var(--s2);
  }

  .dl-tracks__toggle {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-block-size: 44px;
    padding-inline: var(--s4);
    border-radius: var(--r-nested);
    background: var(--ghost-on-base);
    color: var(--text-1);
    font-size: var(--fs-sm);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
  }

  .dl-tracks__toggle::-webkit-details-marker {
    display: none;
  }

  .dl-tracks__toggle::after {
    content: "";
    inline-size: 7px;
    block-size: 7px;
    margin-inline-start: auto;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    rotate: 45deg;
    translate: 0 -2px;
  }

  .dl-tracks[open] > .dl-tracks__toggle::after {
    rotate: 225deg;
    translate: 0 2px;
  }

  @media (hover: hover) {
    .dl-tracks__toggle:hover {
      background: var(--ghost-on-base-hover);
    }
  }

  .dl-tracks > .list {
    margin-block-start: var(--s2);
  }

  .dl-shots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
    gap: var(--s3);
  }

  .dl-tip {
    margin-block-end: var(--s3);
  }

  .dl-shot {
    display: grid;
    align-content: start;
    gap: var(--s2);
    padding: var(--s2);
    border-radius: var(--r-nested);
    background: var(--surface-2);
  }

  .dl-shot__frame {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    border-radius: calc(var(--r-nested) - 4px);
    background: var(--dl-groove);
    color: var(--text-3);
    overflow: hidden;
  }

  .dl-shot__frame > img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .dl-shot__meta {
    color: var(--text-2);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dl-shot .dl-btn {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .dl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-block-start: var(--s3);
  }

  .dl-skel {
    display: grid;
    gap: var(--s5);
  }

  .dl-skel__block {
    display: block;
    border-radius: var(--r-nested);
    background: var(--surface-2);
    animation: dl-pulse 1.4s var(--ease) infinite alternate;
  }

  .dl-skel__line {
    block-size: 14px;
    inline-size: 90%;
    border-radius: var(--r-pill);
  }

  .dl-skel__line--s {
    inline-size: 40%;
  }

  .dl-skel__line--m {
    inline-size: 70%;
  }

  .dl-skel__seg {
    block-size: 42px;
    border-radius: var(--r-ctl);
  }

  .dl-skel__row {
    block-size: 64px;
  }

  @keyframes dl-pulse {
    from { opacity: 1; }
    to { opacity: .55; }
  }

  @media (prefers-reduced-motion: reduce) {
    .dl-skel__block {
      animation: none;
    }
  }

  .dl-again {
    justify-self: start;
  }

  @media (max-width: 39.99rem) {
    .dl-again {
      justify-self: stretch;
    }
  }

  .dl-verify {
    inline-size: min(100% - 2 * var(--s4), 22rem);
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-1);
  }

  .dl-verify::backdrop {
    background: var(--dl-scrim);
  }

  .dl-verify.is-fallback {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    place-items: center;
    inline-size: auto;
    padding: var(--s4);
    background: var(--dl-scrim);
  }

  .dl-verify__box {
    display: grid;
    gap: var(--s3);
    inline-size: 100%;
    max-inline-size: 22rem;
    padding: var(--s5);
    border-radius: var(--r-card);
    background: var(--elevated);
    color: var(--text-1);
    text-align: center;
  }

  .dl-verify__text {
    color: var(--text-2);
    font-size: var(--fs-sm);
  }

  .dl-verify__widget {
    display: grid;
    place-items: center;
    min-block-size: 65px;
  }

  @media (forced-colors: active) {
    .dl-seg__tab[aria-selected="true"] {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }

    .dl-meter {
      border: 1px solid CanvasText;
    }

    .dl-meter__fill {
      background: Highlight;
    }

    .dl-shot,
    .dl-verify__box,
    .dl-media__preview {
      border: 1px solid ButtonBorder;
    }

    .dl-player__bar,
    .dl-player__big,
    .dl-player__wait,
    .dl-player__tip {
      border: 1px solid CanvasText;
      background: Canvas;
      color: CanvasText;
    }

    .dl-player__rail {
      background: GrayText;
    }

    .dl-player__buf {
      background: CanvasText;
    }

    .dl-player__fill,
    .dl-player__knob,
    .dl-player__vfill,
    .dl-player__vknob,
    .dl-player__eq > i {
      background: Highlight;
    }

    .dl-player__vrail {
      background: GrayText;
    }
  }
}

@media (max-width: 24.99rem) {
  .dl__paste > span,
  .dl__clear > span { display: none; }
  .dl__paste,
  .dl__clear { padding-inline: var(--s2); }
}