.library {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  inline-size: 100%;
  max-inline-size: calc(var(--layout-library-max-width) + 2 * var(--space-gutter));
  margin-inline: auto;
  padding: var(--space-12) max(var(--space-gutter), env(safe-area-inset-right))
    max(var(--space-16), env(safe-area-inset-bottom))
    max(var(--space-gutter), env(safe-area-inset-left));
}

.library__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}

.library__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.library__title,
.library__count,
.library__empty,
.library__end {
  margin: 0;
}

.library__title {
  font-size: var(--font-size-apple-title-1);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-apple-title);
  letter-spacing: var(--tracking-title);
}

.library__count,
.library__empty,
.library__end {
  font-size: var(--font-size-apple-subheadline);
  font-variant-numeric: tabular-nums;
  color: var(--color-label-muted);
}

.library__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--size-tile-min), 100%), 1fr));
  gap: var(--space-9) var(--space-7);
  padding: 0;
  margin: 0;
  list-style: none;
}

.library__empty {
  padding-block: var(--space-6);
  text-align: center;
}

.library__more {
  display: flex;
  justify-content: center;
}

.library__more:has(> :not([hidden])) {
  padding-block-start: var(--space-2);
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  inline-size: 100%;
  padding: 0;
  font-family: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  background: none;
  border: 0;
  outline: none;
  user-select: none;
  -webkit-touch-callout: none;
  animation: tile-enter var(--duration-rise) var(--easing-spring) backwards;
  animation-delay: calc(var(--order, 0) * var(--duration-stagger) / 2);
}

.tile__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
}

.tile__ring {
  position: absolute;
  inset: calc(-1 * var(--size-tile-ring-gap));
  border: var(--border-width-ring) solid var(--color-card-ring);
  border-radius: var(--radius-tile-ring);
  opacity: 0;
  transition: opacity var(--duration-tile) var(--easing-standard);
}

.tile.is-selected .tile__ring {
  opacity: 1;
}

.tile:focus-visible .tile__ring {
  opacity: 1;
}

.tile__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-card-blank);
  border-radius: var(--radius-tile);
  container-type: inline-size;
  transition: scale var(--duration-tile) var(--easing-spring);
}

.tile__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-card-edge);
  pointer-events: none;
}

.tile__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-inline: var(--space-1);
}

.tile__title {
  font-size: var(--font-size-apple-callout);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.tile__genre {
  font-size: var(--font-size-segment);
  color: var(--color-label-muted);
}

@media (hover: hover) {
  .tile:hover .tile__frame {
    scale: var(--scale-tile-hover);
  }
}

.tile:active .tile__frame {
  scale: var(--scale-pressed);
  transition-duration: var(--duration-fast);
}

@keyframes tile-enter {
  from {
    opacity: 0;
    translate: 0 var(--offset-rise);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile,
  .tile__ring,
  .tile__frame {
    transition: none;
    animation: none;
  }
}