.library-background-editor {
  position: fixed;
  inset-inline-start: var(--space-md);
  inset-inline-end: auto;
  inset-block-start: calc(var(--header-block-size) + var(--space-md));
  inset-block-end: auto;
  z-index: var(--z-index-account);
  width: min(calc(100% - var(--space-2xl)), var(--library-image-editor-inline-size));
  max-height: calc(100dvh - var(--header-block-size) - var(--space-2xl));
  margin: 0;
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-md);
  overflow: auto;
  border: var(--line-width-default) solid rgb(var(--color-gray-200));
  border-radius: var(--radius-squircle-md);
  color: rgb(var(--color-gray-900));
  background: rgb(var(--color-gray-50));
}
.library-background-editor:not(:popover-open) { display: none; }

.library-background-editor .field { flex: 1; min-width: var(--size-control-lg); }
.library-background-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.library-background-help,
.library-background-status { flex-basis: 100%; color: rgb(var(--color-gray-500)); font-size: var(--font-size-sm); }
.library-background-status:empty { display: none; }

.library-overview-artwork,
.library-overview-image-controls {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 100cqw;
  translate: -50% 0;
  overflow: clip;
  pointer-events: none;
}
.library-overview-artwork { z-index: var(--runtime-library-artwork-z-index, var(--z-index-indicator)); }
.library-overview-image-controls { z-index: var(--z-index-indicator); }

.library-overview-artwork-image,
.library-overview-image-handle {
  position: absolute;
  inset-inline-start: calc(50% + (var(--runtime-library-artwork-x, 75%) - 50%) * var(--runtime-library-artwork-frame-scale, 1));
  inset-block-start: var(--runtime-library-artwork-y, 50%);
  width: calc(var(--runtime-library-artwork-inline-size, 65%) * var(--runtime-library-artwork-frame-scale, 1));
  height: auto;
  max-width: none;
  translate: -50% -50%;
}
.library-overview-artwork-image { pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .library-overview:not([data-background-editing]) .library-overview-artwork-image:not([hidden]) {
    animation: library-image-enter var(--library-image-enter-duration) var(--easing-out) both;
  }
}

@keyframes library-image-enter {
  from { opacity: 0; transform: translateY(var(--space-xl)); }
  to { opacity: 1; transform: none; }
}

.library-overview-heading,
.library-category-cards { position: relative; z-index: var(--z-index-content); }
.library-overview-image-handle {
  aspect-ratio: var(--runtime-library-artwork-aspect-ratio);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  outline: var(--line-width-default) solid rgb(var(--color-primary-start));
}
.library-overview-image-handle[data-dragging] { cursor: grabbing; }
.library-overview[data-background-preview="mobile"] :is(.library-overview-artwork, .library-overview-image-controls) {
  width: min(100cqw, var(--library-background-mobile-frame-inline-size));
  outline: var(--line-width-default) solid rgb(var(--color-gray-500));
}