.music-cards-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: clip;
  isolation: isolate;
  pointer-events: none;
  color: #f4eae2;
  perspective: 1100px;
}

.music-cards-field .music-card-anchor {
  position: absolute;
  left: var(--card-left);
  top: var(--card-top);
  width: clamp(126px, calc(var(--card-width) * .78), var(--card-width));
  transform: translate(-50%, -50%) translate3d(0, var(--card-travel-y, 0px), var(--card-travel-z, 0px));
  opacity: var(--card-reveal, 1);
  z-index: var(--card-layer);
  perspective: 800px;
  pointer-events: auto;
}

.music-cards-field .music-card-anchor[aria-hidden="true"] {pointer-events: none;}

.music-cards-field .music-card {
  display: block;
  position: relative;
  width: 100%;
  min-height: calc(94px + var(--card-depth) * 30px);
  padding: calc(13px + var(--card-depth) * 5px);
  padding-top: 38px;
  overflow: hidden;
  border: 1px solid rgba(234, 188, 154, calc(.045 + var(--card-depth) * .14));
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(86, 49, 38, .14), rgba(13, 14, 17, .23) 62%, rgba(65, 34, 40, .11));
  color: inherit;
  font: inherit;
  text-align: left;
  line-height: 1.15;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(246, 225, 201, .055), 0 10px 32px rgba(5, 4, 8, .13);
  backdrop-filter: blur(calc(5px + var(--card-depth) * 9px));
  -webkit-backdrop-filter: blur(calc(5px + var(--card-depth) * 9px));
  opacity: calc(.36 + var(--card-depth) * .6);
  filter: blur(calc((1 - var(--card-depth)) * .7px));
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
  touch-action: pan-x pan-y;
  -webkit-tap-highlight-color: transparent;
}

.music-cards-field .music-card:hover,
.music-cards-field .music-card:focus-visible {
  opacity: 1;
  filter: none;
  border-color: rgba(237, 185, 130, .38);
  background: linear-gradient(135deg, rgba(107, 66, 43, .21), rgba(22, 18, 21, .28) 68%);
}

.music-cards-field .music-card:focus-visible {
  outline: 1px solid #e9b77d;
  outline-offset: 5px;
}

.music-cards-field .music-card-number {
  position: absolute;
  top: 14px;
  left: calc(13px + var(--card-depth) * 5px);
  font-size: 9px;
  letter-spacing: .09em;
  color: rgba(231, 211, 199, .42);
}

.music-cards-field .music-card-symbol {
  position: absolute;
  top: 14px;
  right: calc(13px + var(--card-depth) * 5px);
  display: flex;
  align-items: center;
  height: 10px;
  gap: 2px;
  opacity: .68;
}

.music-cards-field .music-card-symbol i {
  display: block;
  width: 1px;
  height: 4px;
  background: #d8ac86;
}

.music-cards-field .music-card-symbol i:nth-child(2),
.music-cards-field .music-card-symbol i:nth-child(4) {height: 7px;}
.music-cards-field .music-card-symbol i:nth-child(3) {height: 10px;}

.music-cards-field .music-card-title {
  display: block;
  font-size: calc(12px + var(--card-depth) * 7px);
  font-weight: 500;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.music-cards-field .music-card-artist {
  display: block;
  margin-top: 6px;
  font-size: calc(9px + var(--card-depth) * 2px);
  letter-spacing: .01em;
  color: rgba(225, 205, 201, .62);
  overflow-wrap: anywhere;
}

.music-cards-field .music-card-progress {
  display: block;
  position: relative;
  margin-top: 18px;
  height: 1px;
  background: rgba(233, 218, 211, .13);
  border-radius: 1px;
}

.music-cards-field .music-card-progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--track-progress);
  background: linear-gradient(90deg, #803d40, #dc9564);
  box-shadow: 0 0 4px rgba(233, 160, 102, .13);
}

.music-cards-field .music-card-progress > span::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  right: -1px;
  top: -1px;
  border-radius: 50%;
  background: #d9ad8b;
}

.music-cards-field .music-card-glint {
  position: absolute;
  left: var(--impact-x, 50%);
  top: var(--impact-y, 50%);
  height: 290%;
  width: 95px;
  pointer-events: none;
  opacity: var(--glint-opacity, 0);
  background: linear-gradient(90deg, transparent, rgba(240, 187, 144, .09) 25%, rgba(255, 235, 213, .38) 49%, rgba(242, 192, 142, .17) 52%, transparent 85%);
  transform: translate(calc(-50% + var(--glint-travel, 0px)), -50%) rotate(24deg);
  mix-blend-mode: screen;
}

.music-cards-field .music-card-impact {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--impact-x, 50%) var(--impact-y, 50%), #ffcf9a 0, rgba(228, 178, 126, .3) 12%, transparent 42%);
  opacity: var(--impact-opacity, 0);
  pointer-events: none;
  mix-blend-mode: screen;
}

@media (min-width: 1500px) {
  .music-cards-field .music-card-anchor {width: var(--card-width);}
}

@media (max-width: 1100px) and (min-width: 821px) {
  .music-cards-field .music-card-anchor {width: calc(var(--card-width) * .67);}
  .music-cards-field .music-card {min-height: 94px; padding: 12px; padding-top: 32px;}
  .music-cards-field .music-card-number,
  .music-cards-field .music-card-symbol {top: 11px;}
  .music-cards-field .music-card-title {font-size: calc(11px + var(--card-depth) * 4px);}
  .music-cards-field .music-card-progress {margin-top: 14px;}
}

@media (max-width: 760px) {
  .music-cards-field {
    top: 47%;
    bottom: 13%;
    height: auto;
    display: flex;
    align-items: center;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(224, 160, 104, .23) transparent;
    padding: 20px 9vw;
    scroll-padding: 9vw;
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
  }
  .music-cards-field .music-card-anchor {
    position: relative;
    left: auto;
    top: auto;
    width: min(69vw, 300px);
    flex: 0 0 min(69vw, 300px);
    transform: translate3d(0, var(--card-travel-y, 0px), var(--card-travel-z, 0px));
    scroll-snap-align: center;
  }
  .music-cards-field .music-card {
    --card-depth: 1;
    min-height: 144px;
    padding: 20px;
    padding-top: 43px;
    opacity: .93;
    filter: none;
  }
  .music-cards-field .music-card-number {left: 20px; top: 17px;}
  .music-cards-field .music-card-symbol {right: 20px; top: 17px;}
  .music-cards-field .music-card-title {font-size: 19px;}
  .music-cards-field .music-card-artist {font-size: 11px;}
  .music-cards-field .music-card-progress {margin-top: 21px;}
}

@media (prefers-reduced-motion: reduce) {
  .music-cards-field .music-card {will-change: auto;}
  .music-cards-field {scroll-behavior: auto;}
}