* {
  box-sizing: border-box;
}

:root {
  color-scheme: light;
  --ink: rgba(18, 25, 42, 0.88);
  --muted: rgba(32, 42, 64, 0.48);
  --glass: rgba(255, 255, 255, 0.34);
  --glass-strong: rgba(255, 255, 255, 0.58);
  --rim: rgba(255, 255, 255, 0.82);
  --violet: #a8a9ff;
  --peach: #ffe3c8;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 18px;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.96), transparent 22rem),
    radial-gradient(circle at 86% 18%, rgba(255, 239, 203, 0.86), transparent 19rem),
    radial-gradient(circle at 20% 88%, rgba(196, 204, 255, 0.82), transparent 21rem),
    linear-gradient(135deg, #e6edf8 0%, #fbfbfe 46%, #e3ebf6 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  filter: blur(58px);
  opacity: 0.62;
  pointer-events: none;
  animation: blob-drift 26s ease-in-out infinite alternate;
}

body::after {
  animation-duration: 34s;
  animation-delay: -9s;
}

@keyframes blob-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(2.4rem, -1.6rem, 0) scale(1.08);
  }

  100% {
    transform: translate3d(-1.6rem, 2rem, 0) scale(0.94);
  }
}

body::before {
  left: -6rem;
  bottom: -5rem;
  background: #b9c3ff;
}

body::after {
  right: -6rem;
  top: -5rem;
  background: #ffe8c7;
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.shell {
  position: relative;
  width: min(100%, 31rem);
  margin: 0 auto;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 32px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.82), transparent 16rem),
    radial-gradient(circle at 86% 76%, rgba(255, 218, 190, 0.32), transparent 14rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(236, 242, 255, 0.22)),
    var(--glass);
  box-shadow:
    0 34px 100px rgba(91, 110, 146, 0.26),
    0 0 0 1px rgba(78, 92, 132, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.34) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -34px 70px rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(46px) saturate(180%) contrast(106%);
  -webkit-backdrop-filter: blur(46px) saturate(180%) contrast(106%);
}

.shell::before,
.content::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.shell::before {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.82), transparent 28%),
    radial-gradient(ellipse at 30% 18%, rgba(255, 255, 255, 0.62), transparent 18rem),
    radial-gradient(circle at 72% 30%, rgba(178, 183, 255, 0.4), transparent 22rem),
    radial-gradient(circle at 90% 82%, rgba(255, 223, 190, 0.5), transparent 16rem);
  mix-blend-mode: screen;
}

.shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.content {
  position: relative;
  z-index: 1;
}

.content::before {
  inset: -12% -18% auto 28%;
  z-index: -1;
  width: 16rem;
  height: 16rem;
  border-radius: 45% 55% 52% 48%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.6), transparent 38%),
    radial-gradient(circle at 62% 68%, rgba(168, 169, 255, 0.24), transparent 48%);
  filter: blur(18px);
  opacity: 0.78;
  transform: rotate(-18deg);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 34px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(22, 32, 52, 0.58);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 180ms ease;
}

.brand:hover,
.brand:focus-visible {
  color: rgba(22, 32, 52, 0.82);
}

.brand::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d45656;
  box-shadow: 0 0 0 0 rgba(212, 86, 86, 0.32);
  animation: live-pulse 2.6s ease-in-out infinite;
}

@keyframes live-pulse {
  0%,
  100% {
    opacity: 0.78;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(212, 86, 86, 0.22);
  }

  50% {
    opacity: 1;
    transform: scale(1.06);
    box-shadow: 0 0 0 5px rgba(212, 86, 86, 0.1);
  }
}

.topbar-btn {
  width: 44px;
  min-width: 0;
  height: 44px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.16)),
    rgba(255, 255, 255, 0.28);
  box-shadow:
    0 12px 32px rgba(91, 111, 150, 0.16),
    0 0 0 1px rgba(69, 82, 118, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -10px 18px rgba(168, 169, 255, 0.08);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.topbar-btn:hover,
.topbar-btn:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 16px 36px rgba(91, 111, 150, 0.16),
    0 0 24px rgba(168, 169, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -10px 18px rgba(168, 169, 255, 0.1);
}

.topbar-btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: rgba(28, 37, 58, 0.72);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes pulse {
  to {
    transform: scaleY(1.75);
    opacity: 0.82;
  }
}

.hero h1 {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  margin: 0;
  max-width: 100%;
  padding: 0 0 10px;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 6.4vw, 4rem);
  font-weight: 430;
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: none;
  background: linear-gradient(
    126deg,
    rgba(11, 15, 25, 0.96) 12%,
    rgba(52, 59, 105, 0.94) 43%,
    rgba(176, 103, 78, 0.88) 74%,
    rgba(235, 176, 124, 0.86) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 18px 34px rgba(17, 24, 40, 0.08);
}

.hero-title__name {
  display: inline-block;
}

.hero-title__mark {
  display: inline-block;
  color: rgba(91, 98, 126, 0.72);
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.28em;
  font-weight: 850;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  -webkit-text-fill-color: currentColor;
}

/* .hero h1::after {
  content: "";
  position: absolute;
  left: 0.02em;
  right: 0.03em;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(28, 34, 56, 0.92), rgba(139, 98, 213, 0.72), rgba(226, 143, 95, 0.82));
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(110, 82, 170, 0.16);
} */

@media (max-width: 430px) {
  .hero h1 {
    font-size: clamp(2.2rem, 12vw, 2.9rem);
    letter-spacing: 0;
    line-height: 0.96;
  }
}

@media (max-width: 350px) {
  .hero h1 {
    font-size: 2.12rem;
  }
}

.hero {
  margin-bottom: 2px;
}

.tagline {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 0;
  color: rgba(30, 39, 62, 0.44);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tagline::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(116, 121, 224, 0.85), rgba(255, 175, 130, 0.85));
  border-radius: 999px;
}

.subtitle {
  margin: 8px 0 0;
  max-width: 22rem;
  color: rgba(32, 42, 64, 0.48);
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.hero-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  max-width: 24rem;
}

.hero-genres span {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: rgba(30, 39, 62, 0.56);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.12)),
    rgba(255, 255, 255, 0.2);
  box-shadow:
    0 4px 14px rgba(91, 111, 150, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: nowrap;
}

.filters {
  display: flex;
  gap: 7px;
  margin: 18px 0 0;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.filters::-webkit-scrollbar {
  display: none;
}

.filters button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 999px;
  color: rgba(30, 39, 62, 0.52);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.12)),
    rgba(255, 255, 255, 0.18);
  box-shadow:
    0 6px 16px rgba(91, 111, 150, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  font-size: 0.62rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.filters button.is-active {
  color: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.76);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.32), transparent 54%),
    linear-gradient(135deg, rgba(116, 121, 224, 0.92), rgba(255, 189, 150, 0.9));
  box-shadow:
    0 10px 24px rgba(116, 121, 224, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

@media (hover: hover) {
  .filters button:hover {
    transform: translateY(-1px);
    color: rgba(28, 37, 60, 0.78);
    border-color: rgba(255, 255, 255, 0.88);
  }

  .filters button.is-active:hover {
    color: rgba(255, 255, 255, 0.96);
  }
}

.now-playing {
  position: relative;
  max-height: 0;
  margin-top: 0;
  padding: 0 14px;
  scroll-margin-top: 14px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 22px;
  opacity: 0;
  transform: translateY(10px);
  background:
    radial-gradient(circle at 15% 18%, rgba(168, 169, 255, 0.18), transparent 38%),
    radial-gradient(circle at 88% 84%, rgba(255, 205, 179, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(231, 236, 252, 0.16));
  box-shadow:
    0 10px 34px rgba(91, 111, 150, 0.1),
    0 0 0 1px rgba(69, 82, 118, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -14px 28px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  transition:
    max-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
    margin 380ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 380ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 360ms ease,
    opacity 360ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.now-playing::before {
  content: none;
}

.has-player .now-playing {
  max-height: 13.5rem;
  margin-top: 18px;
  padding: 11px 13px 10px;
  border-color: rgba(255, 255, 255, 0.72);
  opacity: 1;
  transform: translateY(0);
}

.has-player .topbar {
  margin-bottom: 22px;
}

.has-player .slider-wrap {
  margin-top: 30px;
}

.now-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
}

.now-main > div:not(.orb) {
  min-width: 0;
}

.orb {
  --orb-radius: 20px;
  position: relative;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: var(--orb-radius);
  background:
    radial-gradient(circle at 30% 70%, rgba(142, 112, 224, 0.72), transparent 24%),
    radial-gradient(circle at 64% 39%, rgba(255, 255, 255, 0.92), transparent 26%),
    linear-gradient(145deg, #f4f5fb 0%, #cdd8f7 62%, #d6c7ef 100%);
  box-shadow:
    0 0 0 1px rgba(69, 82, 118, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset -8px -12px 22px rgba(118, 124, 220, 0.18),
    0 18px 34px rgba(99, 112, 153, 0.16);
  transition: box-shadow 320ms ease, transform 320ms ease;
}

.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  opacity: 0;
  box-shadow: inset 0 0 14px rgba(168, 169, 255, 0.14);
  pointer-events: none;
}

.orb .art-live {
  z-index: 0;
}

.orb-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  box-sizing: border-box;
  border-radius: var(--orb-radius);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  padding: 2px;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  transition: opacity 220ms ease;
}

.orb-loader::before {
  content: "";
  position: absolute;
  inset: -70%;
  background: conic-gradient(
    from 0deg,
    rgba(168, 169, 255, 0.98) 0deg,
    rgba(255, 189, 150, 0.82) 72deg,
    rgba(255, 255, 255, 0.2) 132deg,
    transparent 210deg,
    transparent 360deg
  );
}

.is-buffering .orb-loader {
  opacity: 1;
}

.is-buffering .orb-loader::before {
  animation: orb-spin 1.1s linear infinite;
}

.is-playing .orb::after {
  animation: orb-breathe 3.6s ease-in-out infinite;
}

@keyframes orb-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes orb-breathe {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 0.38;
  }
}

.label {
  margin: 0 0 3px;
  color: rgba(34, 44, 68, 0.44);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.now-main .label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.now-title {
  margin: 0;
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.now-title .track-prefix {
  display: inline;
  margin: 0;
  color: rgba(34, 44, 68, 0.34);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: inherit;
  text-transform: uppercase;
}

.now-title .track-name {
  display: inline;
  margin: 0;
  color: rgba(18, 25, 42, 0.78);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: inherit;
}

.now-time {
  margin: 1px 0 0;
  color: rgba(34, 44, 68, 0.38);
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.now-time.is-error {
  color: #c44a4a;
}

.primary-play,
.card-play,
.skip,
.share-current {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  color: rgba(43, 52, 76, 0.72);
  background: rgba(255, 255, 255, 0.76);
  box-shadow:
    0 12px 28px rgba(83, 100, 136, 0.18),
    0 0 0 1px rgba(69, 82, 118, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease, color 200ms ease;
}

@media (hover: hover) {
  .skip:hover,
  .card-play:hover,
  .share-current:hover {
    transform: translateY(-1px) scale(1.06);
    color: rgba(28, 37, 60, 0.92);
    box-shadow:
      0 16px 32px rgba(83, 100, 136, 0.22),
      0 0 0 1px rgba(69, 82, 118, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);
  }
}

.primary-play:active,
.card-play:active,
.skip:active,
.share-current:active {
  transform: scale(0.94);
}

.primary-play {
  width: 52px;
  height: 52px;
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.42), transparent 52%),
    linear-gradient(135deg, #8d92ec 0%, #ab9fee 52%, #ffbf97 100%);
  box-shadow:
    0 14px 32px rgba(116, 121, 224, 0.36),
    0 0 0 1px rgba(94, 99, 178, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

@media (hover: hover) {
  .primary-play:hover {
    transform: translateY(-1px) scale(1.05);
    box-shadow:
      0 18px 40px rgba(116, 121, 224, 0.44),
      0 0 26px rgba(168, 169, 255, 0.32),
      0 0 0 1px rgba(94, 99, 178, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
}

.is-playing .primary-play {
  animation: play-glow 3.4s ease-in-out infinite;
}

@keyframes play-glow {
  0%,
  100% {
    box-shadow:
      0 14px 32px rgba(116, 121, 224, 0.36),
      0 0 0 1px rgba(94, 99, 178, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }

  50% {
    box-shadow:
      0 14px 36px rgba(116, 121, 224, 0.46),
      0 0 30px rgba(255, 189, 150, 0.34),
      0 0 0 1px rgba(94, 99, 178, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
}

.icon-play,
.icon-pause {
  display: inline-block;
}

.icon-play {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 11px solid currentColor;
  transform: translateX(2px);
}

.icon-pause {
  width: 13px;
  height: 16px;
  border-right: 4px solid currentColor;
  border-left: 4px solid currentColor;
}

.timeline {
  position: relative;
  z-index: 1;
  margin-top: 10px;
}

.progress {
  position: relative;
  width: 100%;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow:
    inset 0 1px 8px rgba(92, 107, 139, 0.12),
    0 0 18px rgba(168, 169, 255, 0.12),
    0 0 0 1px rgba(69, 82, 118, 0.08);
  cursor: pointer;
}

.progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(116, 121, 224, 0.9), rgba(255, 189, 150, 0.94));
  box-shadow: 0 0 12px rgba(140, 146, 236, 0.42);
}

.progress span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 1px 6px rgba(60, 72, 110, 0.35),
    0 0 0 1px rgba(69, 82, 118, 0.12);
  transform: translate(50%, -50%) scale(0);
  transition: transform 180ms ease;
  pointer-events: none;
}

.progress:hover span::after,
.progress:focus-visible span::after {
  transform: translate(50%, -50%) scale(1);
}

.time-row {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: rgba(40, 50, 74, 0.42);
  font-size: 0.72rem;
  font-weight: 750;
}

.controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.skip,
.share-current {
  width: 34px;
  height: 34px;
}

.skip svg,
.share-current svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.share-current {
  position: relative;
}

.share-current.is-copied::after {
  content: attr(data-state);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  padding: 4px 7px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(20, 24, 38, 0.82);
  box-shadow: 0 8px 18px rgba(24, 30, 48, 0.18);
  font-size: 0.56rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1;
  pointer-events: none;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.slider-wrap {
  position: relative;
  margin: 24px -22px 0;
  padding: 10px 0 18px;
  background: none;
  container-type: inline-size;
}

.load-state {
  display: none;
  place-items: center;
  min-height: 248px;
  padding: 8px 22px 14px;
}

.is-loading-sessions .load-state {
  display: grid;
}

.is-loading-sessions .sessions,
.is-loading-sessions .dots {
  display: none;
}

.load-dots {
  display: flex;
  align-items: center;
  gap: 9px;
}

.load-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(168, 169, 255, 0.95), rgba(255, 189, 150, 0.92));
  box-shadow: 0 0 16px rgba(168, 169, 255, 0.28);
  animation: load-dot 1.15s ease-in-out infinite;
}

.load-dots span:nth-child(2) {
  animation-delay: 0.16s;
}

.load-dots span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes load-dot {
  0%,
  80%,
  100% {
    transform: translateY(0) scale(0.78);
    opacity: 0.42;
  }

  40% {
    transform: translateY(-5px) scale(1);
    opacity: 1;
  }
}

.sessions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(218px, 78%);
  gap: 14px;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: 22px;
  /* Extra bottom room so card shadows fade out instead of clipping at the
     scroll container edge; negative margin keeps the layout unchanged */
  padding: 8px 22px 60px;
  margin: 0 0 -46px;
  background: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Eased multi-stop fade: wider and softer than a linear two-stop mask */
  mask-image: linear-gradient(
    to right,
    transparent 0,
    rgba(0, 0, 0, 0.013) 8px,
    rgba(0, 0, 0, 0.049) 17px,
    rgba(0, 0, 0, 0.104) 26px,
    rgba(0, 0, 0, 0.175) 35px,
    rgba(0, 0, 0, 0.259) 44px,
    rgba(0, 0, 0, 0.352) 53px,
    rgba(0, 0, 0, 0.45) 62px,
    rgba(0, 0, 0, 0.55) 71px,
    rgba(0, 0, 0, 0.648) 80px,
    rgba(0, 0, 0, 0.741) 89px,
    rgba(0, 0, 0, 0.825) 98px,
    rgba(0, 0, 0, 0.896) 107px,
    rgba(0, 0, 0, 0.951) 116px,
    rgba(0, 0, 0, 0.987) 125px,
    #000 134px,
    #000 calc(100% - 134px),
    rgba(0, 0, 0, 0.987) calc(100% - 125px),
    rgba(0, 0, 0, 0.951) calc(100% - 116px),
    rgba(0, 0, 0, 0.896) calc(100% - 107px),
    rgba(0, 0, 0, 0.825) calc(100% - 98px),
    rgba(0, 0, 0, 0.741) calc(100% - 89px),
    rgba(0, 0, 0, 0.648) calc(100% - 80px),
    rgba(0, 0, 0, 0.55) calc(100% - 71px),
    rgba(0, 0, 0, 0.45) calc(100% - 62px),
    rgba(0, 0, 0, 0.352) calc(100% - 53px),
    rgba(0, 0, 0, 0.259) calc(100% - 44px),
    rgba(0, 0, 0, 0.175) calc(100% - 35px),
    rgba(0, 0, 0, 0.104) calc(100% - 26px),
    rgba(0, 0, 0, 0.049) calc(100% - 17px),
    rgba(0, 0, 0, 0.013) calc(100% - 8px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    rgba(0, 0, 0, 0.013) 8px,
    rgba(0, 0, 0, 0.049) 17px,
    rgba(0, 0, 0, 0.104) 26px,
    rgba(0, 0, 0, 0.175) 35px,
    rgba(0, 0, 0, 0.259) 44px,
    rgba(0, 0, 0, 0.352) 53px,
    rgba(0, 0, 0, 0.45) 62px,
    rgba(0, 0, 0, 0.55) 71px,
    rgba(0, 0, 0, 0.648) 80px,
    rgba(0, 0, 0, 0.741) 89px,
    rgba(0, 0, 0, 0.825) 98px,
    rgba(0, 0, 0, 0.896) 107px,
    rgba(0, 0, 0, 0.951) 116px,
    rgba(0, 0, 0, 0.987) 125px,
    #000 134px,
    #000 calc(100% - 134px),
    rgba(0, 0, 0, 0.987) calc(100% - 125px),
    rgba(0, 0, 0, 0.951) calc(100% - 116px),
    rgba(0, 0, 0, 0.896) calc(100% - 107px),
    rgba(0, 0, 0, 0.825) calc(100% - 98px),
    rgba(0, 0, 0, 0.741) calc(100% - 89px),
    rgba(0, 0, 0, 0.648) calc(100% - 80px),
    rgba(0, 0, 0, 0.55) calc(100% - 71px),
    rgba(0, 0, 0, 0.45) calc(100% - 62px),
    rgba(0, 0, 0, 0.352) calc(100% - 53px),
    rgba(0, 0, 0, 0.259) calc(100% - 44px),
    rgba(0, 0, 0, 0.175) calc(100% - 35px),
    rgba(0, 0, 0, 0.104) calc(100% - 26px),
    rgba(0, 0, 0, 0.049) calc(100% - 17px),
    rgba(0, 0, 0, 0.013) calc(100% - 8px),
    transparent 100%
  );
}

@supports (width: 1cqi) {
  .sessions {
    grid-auto-columns: max(218px, 78cqi);
    padding-inline: max(22px, calc((100cqi - max(218px, 78cqi)) / 2));
  }
}

.sessions::-webkit-scrollbar {
  display: none;
}

.card {
  --card-radius: 22px;
  position: relative;
  isolation: isolate;
  contain: paint;
  min-height: 248px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--card-radius);
  color: rgba(255, 255, 255, 0.94);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), transparent 42%),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    0 12px 30px rgba(88, 104, 145, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -18px 32px rgba(255, 255, 255, 0.1);
  scroll-snap-align: center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, box-shadow 220ms ease;
  animation: card-in 980ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(820ms + var(--card-i, 0) * 95ms);
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
    filter: blur(6px);
  }

  55% {
    filter: blur(0);
  }
}

.card.is-focused {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.9);
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.94);
    box-shadow:
      0 18px 42px rgba(120, 132, 176, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -18px 32px rgba(255, 255, 255, 0.12);
  }
}

.card.is-active {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 18px 42px rgba(120, 132, 176, 0.18),
    0 0 24px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -18px 32px rgba(255, 255, 255, 0.12);
}

.card.is-active.is-focused {
  transform: translateY(-3px);
}

.art {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  clip-path: inset(0 round var(--card-radius));
  transform: translateZ(0) scale(1.001);
  transform-origin: var(--art-origin, 50% 50%);
}

.art::after {
  content: "";
  position: absolute;
  inset: -10%;
  opacity: 0.24;
  background: var(--art-texture, radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42), transparent 54%));
  transform: rotate(var(--texture-angle, 0deg)) scale(1.04);
  pointer-events: none;
}

.card .art,
.card .art-live {
  filter: hue-rotate(var(--art-hue, 0deg));
}

.orb {
  filter: hue-rotate(var(--art-hue, 0deg));
}

.art-live {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--card-radius);
  opacity: 0;
  overflow: hidden;
  clip-path: inset(0 round var(--card-radius));
  -webkit-clip-path: inset(0 round var(--card-radius));
  transition: opacity 420ms ease;
  pointer-events: none;
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
  transform: translateZ(0);
}

.art-live__bloom,
.art-live__sheen {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

.art-live__bloom {
  top: -12%;
  left: -14%;
  width: 88%;
  height: 88%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(188, 190, 255, 0.82) 24%, rgba(168, 169, 255, 0.45) 48%, transparent 74%);
  filter: blur(14px);
  opacity: 1;
}

.art-live__bloom--b {
  top: auto;
  left: auto;
  right: -18%;
  bottom: -14%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.82) 0%, rgba(255, 205, 170, 0.72) 26%, rgba(255, 189, 150, 0.38) 50%, transparent 74%);
}

.art-live__sheen {
  inset: -50% -80%;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.22) 46%,
    rgba(255, 255, 255, 0.72) 50%,
    rgba(255, 255, 255, 0.22) 54%,
    transparent 62%
  );
  mix-blend-mode: screen;
}

.art-live--orb {
  mix-blend-mode: normal;
}

.art-live--orb .art-live__bloom {
  width: 100%;
  height: 100%;
  filter: blur(8px);
  opacity: 1;
}

.art-live--orb .art-live__sheen {
  inset: -70% -100%;
}

.card.is-sounding .art-live,
.shell.is-playing .orb .art-live {
  opacity: 1;
}

.card.is-sounding .art {
  animation: art-breathe var(--pulse-speed, 6s) ease-in-out var(--pulse-delay, 0s) infinite;
}

.card.is-sounding .art::after {
  animation: texture-breathe var(--pulse-speed, 6s) ease-in-out var(--pulse-delay, 0s) infinite alternate;
}

.card.is-sounding .art-live__bloom:not(.art-live__bloom--b),
.shell.is-playing .orb .art-live__bloom:not(.art-live__bloom--b) {
  animation: art-drift-a 4s ease-in-out infinite;
}

.card.is-sounding .art-live__bloom--b,
.shell.is-playing .orb .art-live__bloom--b {
  animation: art-drift-b 4.8s ease-in-out infinite;
}

.card.is-sounding .art-live__sheen,
.shell.is-playing .orb .art-live__sheen {
  animation: art-sheen 3.6s ease-in-out infinite;
}

.card.is-sounding::before,
.card.is-sounding::after {
  opacity: 0.52;
}

@keyframes art-drift-a {
  0%,
  100% {
    transform: translate(-22%, -16%) scale(0.82);
  }

  50% {
    transform: translate(28%, 22%) scale(1.22);
  }
}

@keyframes art-drift-b {
  0%,
  100% {
    transform: translate(24%, 18%) scale(1.12);
  }

  50% {
    transform: translate(-26%, -20%) scale(0.8);
  }
}

@keyframes art-sheen {
  0%,
  48% {
    transform: translateX(-140%) skewX(-12deg);
    opacity: 0;
  }

  56% {
    opacity: 1;
  }

  100% {
    transform: translateX(140%) skewX(-12deg);
    opacity: 0;
  }
}

@keyframes art-breathe {
  0%,
  100% {
    transform: translateZ(0) scale(1.001);
  }

  50% {
    transform: translateZ(0) scale(1.035);
  }
}

@keyframes texture-breathe {
  from {
    opacity: 0.16;
    transform: rotate(var(--texture-angle, 0deg)) scale(1.02) translate3d(-0.5%, 0, 0);
  }

  to {
    opacity: 0.34;
    transform: rotate(var(--texture-angle, 0deg)) scale(1.08) translate3d(0.5%, -0.5%, 0);
  }
}

.art--1,
.orb.art--1 {
  --art-origin: 30% 70%;
  --texture-angle: -7deg;
  --art-texture: repeating-radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.28) 0 1px, transparent 2px 12px);
  background:
    radial-gradient(circle at 30% 70%, rgba(142, 112, 224, 0.72), transparent 24%),
    radial-gradient(circle at 64% 39%, rgba(255, 255, 255, 0.92), transparent 26%),
    linear-gradient(145deg, #f4f5fb 0%, #cdd8f7 62%, #d6c7ef 100%);
}

.art--2,
.orb.art--2 {
  --art-origin: 68% 64%;
  --texture-angle: 12deg;
  --art-texture: linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, 0.3) 49%, transparent 70%);
  background:
    radial-gradient(circle at 67% 65%, rgba(255, 205, 229, 0.6), transparent 17%),
    radial-gradient(circle at 28% 38%, rgba(255, 255, 255, 0.76), transparent 17%),
    linear-gradient(145deg, #f3f4ff 5%, #9daefb 49%, #e6def8 100%);
}

.art--3,
.orb.art--3 {
  --art-origin: 42% 54%;
  --texture-angle: -15deg;
  --art-texture: repeating-linear-gradient(104deg, transparent 0 15px, rgba(255, 255, 255, 0.15) 16px 17px, transparent 18px 31px);
  background:
    radial-gradient(ellipse at 69% 25%, rgba(255, 255, 255, 0.9), transparent 28%),
    radial-gradient(ellipse at 40% 58%, rgba(130, 137, 226, 0.62), transparent 22%),
    radial-gradient(ellipse at 62% 61%, rgba(255, 255, 255, 0.92), transparent 24%),
    linear-gradient(140deg, #e9edf8 12%, #aab8ef 54%, #f7f4fa 100%);
}

.art--4,
.orb.art--4 {
  --art-origin: 50% 55%;
  --texture-angle: 3deg;
  --art-texture: radial-gradient(ellipse at 50% 55%, transparent 20%, rgba(255, 255, 255, 0.2) 21%, transparent 23%, rgba(92, 101, 185, 0.14) 24%, transparent 35%);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 3px, rgba(115, 123, 205, 0.16) 3px 6px),
    radial-gradient(circle at 48% 55%, rgba(99, 104, 195, 0.54), transparent 22%),
    linear-gradient(145deg, #f7f4fb 0%, #d5cdf5 61%, #c9d5ee 100%);
}

.art--5,
.orb.art--5 {
  --art-origin: 72% 68%;
  --texture-angle: -10deg;
  --art-texture: conic-gradient(from 210deg at 72% 68%, transparent, rgba(255, 255, 255, 0.24), transparent 32%);
  background:
    radial-gradient(circle at 74% 70%, rgba(188, 166, 232, 0.58), transparent 20%),
    radial-gradient(circle at 31% 34%, rgba(255, 255, 255, 0.9), transparent 25%),
    linear-gradient(145deg, #faf7f7 0%, #fee7d4 58%, #d4d9f3 100%);
}

.art--6,
.orb.art--6 {
  --art-origin: 26% 42%;
  --texture-angle: 9deg;
  --art-texture: repeating-linear-gradient(28deg, transparent 0 18px, rgba(255, 255, 255, 0.2) 19px 20px, transparent 21px 38px);
  background:
    radial-gradient(ellipse at 25% 42%, rgba(255, 255, 255, 0.92), transparent 22%),
    radial-gradient(circle at 76% 74%, rgba(114, 155, 207, 0.52), transparent 25%),
    linear-gradient(150deg, #edf7f5 0%, #b9dcd9 48%, #c9c8ea 100%);
}

.art--7,
.orb.art--7 {
  --art-origin: 62% 30%;
  --texture-angle: -4deg;
  --art-texture: radial-gradient(circle at 62% 30%, rgba(255, 255, 255, 0.28) 0 2%, transparent 3% 11%, rgba(255, 255, 255, 0.13) 12%, transparent 14% 24%);
  background:
    radial-gradient(circle at 62% 30%, rgba(255, 252, 238, 0.94), transparent 20%),
    radial-gradient(ellipse at 30% 78%, rgba(224, 154, 134, 0.5), transparent 27%),
    linear-gradient(142deg, #f5eee8 0%, #d9b9c6 52%, #b9c9e8 100%);
}

.art--8,
.orb.art--8 {
  --art-origin: 50% 50%;
  --texture-angle: 18deg;
  --art-texture: conic-gradient(from 35deg at 50% 50%, rgba(255, 255, 255, 0.2), transparent 14%, rgba(255, 255, 255, 0.14) 28%, transparent 48%, rgba(116, 106, 191, 0.12) 70%, transparent);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.82), transparent 18%),
    radial-gradient(ellipse at 78% 25%, rgba(144, 122, 213, 0.46), transparent 24%),
    radial-gradient(ellipse at 22% 76%, rgba(123, 174, 195, 0.4), transparent 24%),
    linear-gradient(150deg, #edf0f8 0%, #c8c4e6 52%, #c7e2df 100%);
}

.orb.has-cover {
  background:
    linear-gradient(to top, rgba(7, 10, 20, 0.16), transparent 58%),
    var(--cover-image) center / cover no-repeat;
}

:root[data-theme="night"] .orb.has-cover {
  background:
    linear-gradient(to top, rgba(7, 10, 20, 0.14), transparent 42%),
    var(--cover-image-dark) center / cover no-repeat;
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--card-radius);
  pointer-events: none;
  transition: opacity 320ms ease;
}

.card::before {
  background:
    radial-gradient(circle at 24% 10%, rgba(255, 255, 255, 0.5), transparent 26%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), transparent 38%),
    linear-gradient(to top, rgba(23, 26, 48, 0.54), rgba(23, 26, 48, 0.18) 45%, transparent 72%);
  mix-blend-mode: screen;
}

.card::after {
  background: linear-gradient(to top, rgba(20, 22, 42, 0.5), rgba(20, 22, 42, 0.18) 50%, transparent 74%);
}

.dj,
.track {
  position: relative;
  z-index: 3;
}

.dj {
  color: rgba(24, 30, 48, 0.58);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.34);
}

.new-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  padding: 4px 8px 3px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.76);
  background: rgba(18, 25, 45, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.52rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.track {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-top: auto;
  padding-top: 52px;
}

.track h2 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 7px;
  line-height: 1.1;
}

.track h2 .track-prefix {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(15, 18, 34, 0.28);
}

.track h2 .track-name {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-shadow: 0 1px 2px rgba(15, 18, 34, 0.28);
}

.track p {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.74rem;
  font-weight: 850;
  text-shadow: 0 1px 8px rgba(15, 18, 34, 0.3);
}

.track .style {
  display: block;
  max-width: 12rem;
  margin: 0 0 5px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(15, 18, 34, 0.22);
}

.card-play {
  width: 38px;
  height: 38px;
  color: rgba(42, 50, 82, 0.72);
  background: rgba(255, 255, 255, 0.88);
}

.dots {
  position: relative;
  display: flex;
  justify-content: safe center;
  gap: 6px;
  margin: 10px 22px 0;
  padding: 4px 2px;
  overflow-x: auto;
  scroll-behavior: smooth;
  background: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 14%,
    #000 86%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 14%,
    #000 86%,
    transparent 100%
  );
}

.dots::-webkit-scrollbar {
  display: none;
}

.dots-thumb {
  display: none;
}

.dots button {
  position: relative;
  z-index: 1;
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(120, 132, 168, 0.28);
  cursor: pointer;
  opacity: 0.55;
  transition:
    background-color 360ms ease,
    opacity 360ms ease,
    flex-basis 420ms cubic-bezier(0.22, 1, 0.36, 1),
    width 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms ease;
}

.dots button.is-active {
  flex-basis: 18px;
  width: 18px;
  opacity: 1;
  background: linear-gradient(90deg, rgba(116, 121, 224, 0.85), rgba(255, 175, 130, 0.9));
  box-shadow: 0 0 10px rgba(168, 169, 255, 0.35);
}

.dots button:not(.is-active):hover,
.dots button:not(.is-active):focus-visible {
  opacity: 0.85;
}

.empty-state {
  margin: 24px 0 0;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 22px;
  color: rgba(34, 44, 68, 0.56);
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(22px);
  font-size: 0.86rem;
  line-height: 1.5;
}

.listen-hint {
  margin: 16px 0 0;
  padding: 0 22px;
  color: rgba(34, 44, 68, 0.46);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
}

.social {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
  padding-top: 8px;
}

.social a {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  color: rgba(34, 44, 68, 0.62);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.18)),
    rgba(255, 255, 255, 0.36);
  box-shadow:
    0 12px 28px rgba(82, 99, 136, 0.16),
    0 0 0 1px rgba(69, 82, 118, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -10px 18px rgba(168, 169, 255, 0.08);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, color 180ms ease;
}

.social a:hover,
.social a:active {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.96);
  color: rgba(24, 34, 55, 0.82);
}

.social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.social svg.icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.social-mark {
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.aether-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 4px;
  padding-top: 18px;
  color: rgba(34, 44, 68, 0.34);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: center;
}

.aether-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 42px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(116, 121, 224, 0.42), rgba(255, 175, 130, 0.42), transparent);
  border-radius: 999px;
  opacity: 0.7;
}

.aether-mark__name {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 0.74rem;
  font-weight: 450;
  font-variation-settings: "SOFT" 55, "WONK" 0.6;
  letter-spacing: 0.1em;
  color: rgba(34, 44, 68, 0.42);
}

.aether-mark__sep {
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(116, 121, 224, 0.55), rgba(255, 175, 130, 0.55));
  opacity: 0.65;
}

.aether-mark__phrase {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 380;
  font-variation-settings: "SOFT" 70, "WONK" 0.4;
  letter-spacing: 0.04em;
  color: rgba(34, 44, 68, 0.3);
}

.shell {
  animation: shell-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.hero h1,
.tagline,
.subtitle,
.slider-wrap,
.listen-hint,
.aether-mark {
  animation: rise-in 1050ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.topbar {
  animation: drop-in 950ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 160ms;
}

.hero-genres span,
.social a {
  animation: bloom-in 900ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.hero h1 {
  animation-delay: 280ms;
}

.tagline {
  animation-delay: 430ms;
}

.subtitle {
  animation-delay: 520ms;
}

.hero-genres span {
  animation-delay: 600ms;
}

.hero-genres span:nth-child(2) {
  animation-delay: 655ms;
}

.hero-genres span:nth-child(3) {
  animation-delay: 710ms;
}

.hero-genres span:nth-child(4) {
  animation-delay: 765ms;
}

.hero-genres span:nth-child(5) {
  animation-delay: 820ms;
}

.hero-genres span:nth-child(6) {
  animation-delay: 875ms;
}

.hero-genres span:nth-child(7) {
  animation-delay: 930ms;
}

.slider-wrap {
  animation-delay: 720ms;
}

.listen-hint {
  animation-delay: 1040ms;
}

.social a {
  animation-delay: 1120ms;
}

.social a:nth-child(2) {
  animation-delay: 1210ms;
}

.social a:nth-child(3) {
  animation-delay: 1300ms;
}

.social a:nth-child(4) {
  animation-delay: 1390ms;
}

.aether-mark {
  animation-delay: 1520ms;
}

@keyframes shell-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.992);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(6px);
  }

  55% {
    filter: blur(0);
  }
}

@keyframes drop-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
    filter: blur(4px);
  }

  55% {
    filter: blur(0);
  }
}

@keyframes bloom-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.88);
    filter: blur(4px);
  }

  55% {
    filter: blur(0);
  }
}

.brand:focus-visible,
.topbar-btn:focus-visible,
.primary-play:focus-visible,
.skip:focus-visible,
.share-current:focus-visible,
.card-play:focus-visible,
.filters button:focus-visible,
.social a:focus-visible,
.dots button:focus-visible,
.progress:focus-visible,
.photo-view__close:focus-visible {
  outline: 2px solid rgba(126, 132, 222, 0.8);
  outline-offset: 2px;
}

:root[data-theme="night"] .brand:focus-visible,
:root[data-theme="night"] .topbar-btn:focus-visible,
:root[data-theme="night"] .primary-play:focus-visible,
:root[data-theme="night"] .skip:focus-visible,
:root[data-theme="night"] .share-current:focus-visible,
:root[data-theme="night"] .card-play:focus-visible,
:root[data-theme="night"] .filters button:focus-visible,
:root[data-theme="night"] .social a:focus-visible,
:root[data-theme="night"] .dots button:focus-visible,
:root[data-theme="night"] .progress:focus-visible,
:root[data-theme="night"] .photo-view__close:focus-visible {
  outline-color: rgba(168, 173, 255, 0.85);
}

.photo-view {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.photo-view[hidden] {
  display: none;
}

.photo-view__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(8, 12, 22, 0.52);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  cursor: pointer;
}

.photo-view:not([hidden]) .photo-view__backdrop {
  animation: photo-backdrop-in 260ms ease;
}

.photo-view__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  pointer-events: none;
}

.photo-view__media {
  position: absolute;
  inset: 0;
}

.photo-view__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.photo-view:not([hidden]) .photo-view__media img {
  animation: photo-media-in 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.photo-view__copy {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding:
    88px 20px max(22px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  background: linear-gradient(
    to top,
    rgba(8, 12, 22, 0.86) 0%,
    rgba(8, 12, 22, 0.44) 42%,
    transparent 100%
  );
  pointer-events: none;
}

.photo-view__label {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.photo-view__title {
  margin: 0;
  max-width: 12ch;
  color: rgba(255, 255, 255, 0.96);
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.55rem, 7vw, 2.15rem);
  font-weight: 380;
  letter-spacing: -0.025em;
  line-height: 1.04;
}

.photo-view__close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(10, 14, 26, 0.34);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.photo-view__close:hover,
.photo-view__close:focus-visible {
  transform: scale(1.04);
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(10, 14, 26, 0.48);
}

.photo-view__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

@keyframes photo-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes photo-media-in {
  from {
    opacity: 0;
    transform: scale(1.035);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 380px) {
  body {
    padding: 10px;
  }

  .shell {
    padding: 16px;
    border-radius: 26px;
  }

  .topbar {
    margin-bottom: 24px;
  }

  .has-player .now-playing {
    max-height: 17rem;
    margin-top: 14px;
    padding: 10px 10px 9px;
  }

  .has-player .slider-wrap {
    margin-top: 24px;
  }

  .timeline {
    margin-top: 8px;
  }

  .controls {
    margin-top: 7px;
  }

  .skip {
    width: 32px;
    height: 32px;
  }

  .now-main {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  .orb {
    --orb-radius: 15px;
    width: 48px;
    height: 48px;
  }

  .now-title {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.15;
  }

  .now-title .track-prefix {
    display: block;
    font-size: 0.54rem;
  }

  .now-title .track-name {
    display: block;
    margin-top: 1px;
    font-size: 0.82rem;
  }

  .now-time {
    margin-top: 2px;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    font-size: 0.6rem;
  }

  .primary-play {
    width: 42px;
    height: 42px;
    margin-top: 2px;
  }

  .icon-play {
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 9px;
    transform: translateX(1px);
  }

  .icon-pause {
    width: 11px;
    height: 13px;
    border-right-width: 3px;
    border-left-width: 3px;
  }

  .timeline {
    margin-top: 11px;
  }

  .time-row {
    margin-top: 6px;
    font-size: 0.64rem;
  }

  .controls {
    gap: 10px;
    margin-top: 10px;
  }

  .skip {
    width: 34px;
    height: 34px;
    font-size: 0.92rem;
  }

  .slider-wrap {
    margin-left: -16px;
    margin-right: -16px;
  }

  .dots {
    margin-left: 16px;
    margin-right: 16px;
  }
}

@media (min-width: 700px) {
  body {
    display: grid;
    place-items: center;
    padding: 32px;
  }

  .shell {
    width: min(94vw, 72rem);
    padding: 42px 46px 34px;
    border-radius: 34px;
  }

  .topbar {
    margin-bottom: 48px;
  }

  .hero {
    max-width: 34rem;
  }

  .now-playing {
    max-width: 32rem;
  }

  .slider-wrap {
    margin-left: 0;
    margin-right: 0;
    padding: 12px 0 20px;
  }

  .dots {
    margin-left: 0;
    margin-right: 0;
  }

  .sessions {
    grid-auto-columns: minmax(260px, 30%);
    padding-left: 0;
    padding-right: 0;
    scroll-padding-inline: 0;
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 56px,
      #000 calc(100% - 56px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 56px,
      #000 calc(100% - 56px),
      transparent 100%
    );
  }

  .card {
    --card-radius: 18px;
    min-height: 268px;
    border-radius: var(--card-radius);
  }

  .photo-view {
    padding: 28px;
  }

  .photo-view__panel {
    width: min(92vw, 40rem);
    height: min(88vh, 48rem);
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  }
}

:root[data-theme="night"] {
  color-scheme: dark;
  --ink: rgba(236, 241, 255, 0.92);
  --muted: rgba(218, 226, 245, 0.62);
  --glass: rgba(18, 25, 42, 0.46);
  --glass-strong: rgba(38, 48, 74, 0.6);
  --rim: rgba(235, 241, 255, 0.24);
  --violet: #8f96ff;
  --peach: #ffc8a7;
}

body {
  transition: background 420ms ease, color 420ms ease;
}

:root[data-theme="night"] body {
  background:
    radial-gradient(circle at 18% 8%, rgba(115, 123, 214, 0.32), transparent 21rem),
    radial-gradient(circle at 84% 18%, rgba(255, 170, 124, 0.18), transparent 18rem),
    radial-gradient(circle at 28% 88%, rgba(78, 88, 156, 0.26), transparent 22rem),
    linear-gradient(135deg, #0d1322 0%, #161c2d 48%, #0a101d 100%);
}

:root[data-theme="night"] body::before {
  background: #4954b7;
  opacity: 0.36;
}

:root[data-theme="night"] body::after {
  background: #a96f4e;
  opacity: 0.28;
}

:root[data-theme="night"] .shell {
  border-color: rgba(235, 241, 255, 0.2);
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.16), transparent 16rem),
    radial-gradient(circle at 86% 76%, rgba(255, 180, 138, 0.12), transparent 14rem),
    linear-gradient(145deg, rgba(40, 50, 78, 0.58), rgba(13, 19, 34, 0.34)),
    var(--glass);
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -34px 70px rgba(8, 12, 24, 0.18);
}

:root[data-theme="night"] .shell::before {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.22), transparent 28%),
    radial-gradient(ellipse at 30% 18%, rgba(255, 255, 255, 0.16), transparent 18rem),
    radial-gradient(circle at 72% 30%, rgba(143, 150, 255, 0.22), transparent 22rem),
    radial-gradient(circle at 90% 82%, rgba(255, 200, 167, 0.16), transparent 16rem);
}

:root[data-theme="night"] .brand {
  color: rgba(226, 233, 252, 0.62);
}

:root[data-theme="night"] .hero h1::after {
  background: linear-gradient(90deg, rgba(246, 248, 255, 0.86), rgba(160, 168, 255, 0.72), rgba(255, 190, 148, 0.76));
  box-shadow: 0 10px 26px rgba(160, 168, 255, 0.18);
}

:root[data-theme="night"] .tagline {
  color: rgba(226, 233, 252, 0.38);
}

:root[data-theme="night"] .subtitle {
  color: rgba(226, 233, 252, 0.44);
}

:root[data-theme="night"] .hero-genres span {
  border-color: rgba(235, 241, 255, 0.18);
  color: rgba(226, 233, 252, 0.6);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(16, 23, 39, 0.3);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

:root[data-theme="night"] .filters button {
  color: rgba(226, 233, 252, 0.62);
  border-color: rgba(235, 241, 255, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
    rgba(16, 23, 39, 0.28);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

:root[data-theme="night"] .filters button.is-active {
  color: rgba(255, 255, 255, 0.94);
  border-color: rgba(235, 241, 255, 0.28);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.24), transparent 54%),
    linear-gradient(135deg, rgba(118, 124, 221, 0.92), rgba(232, 162, 118, 0.9));
}

:root[data-theme="night"] .listen-hint {
  color: rgba(226, 233, 252, 0.42);
}

:root[data-theme="night"] .aether-mark {
  color: rgba(226, 233, 252, 0.28);
}

:root[data-theme="night"] .aether-mark__name {
  color: rgba(226, 233, 252, 0.36);
}

:root[data-theme="night"] .aether-mark__phrase {
  color: rgba(226, 233, 252, 0.24);
}

:root[data-theme="night"] .aether-mark::before {
  background: linear-gradient(90deg, transparent, rgba(143, 150, 255, 0.38), rgba(255, 180, 138, 0.32), transparent);
}

:root[data-theme="night"] .brand:hover,
:root[data-theme="night"] .brand:focus-visible {
  color: rgba(245, 248, 255, 0.88);
}

:root[data-theme="night"] .now-time.is-error {
  color: #f08a8a;
}

:root[data-theme="night"] .load-dots span {
  background: linear-gradient(145deg, rgba(143, 150, 255, 0.95), rgba(255, 180, 138, 0.9));
  box-shadow: 0 0 16px rgba(143, 150, 255, 0.22);
}

:root[data-theme="night"] .brand::before {
  background: #e86a6a;
  box-shadow: 0 0 0 0 rgba(232, 106, 106, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .is-playing .primary-play,
  .brand::before,
  .is-playing .orb::after,
  .is-buffering .orb-loader::before,
  .load-dots span,
  .photo-view:not([hidden]) .photo-view__backdrop,
  .photo-view:not([hidden]) .photo-view__media img,
  .art-live__bloom,
  .art-live__sheen,
  .card,
  .shell,
  .topbar,
  .hero h1,
  .tagline,
  .subtitle,
  .hero-genres span,
  .filters button,
  .slider-wrap,
  .listen-hint,
  .social a,
  .aether-mark {
    animation: none;
  }

  .card.is-sounding .art-live,
  .shell.is-playing .orb .art-live {
    opacity: 0.72;
  }

  .is-buffering .orb-loader {
    opacity: 0.55;
  }

  .sessions,
  .dots {
    scroll-behavior: auto;
  }

  .dots-thumb {
    transition: none;
  }

  .card,
  .now-playing,
  .orb,
  .dots button,
  body {
    transition: none;
  }
}

:root[data-theme="night"] .hero h1 {
  background: linear-gradient(
    126deg,
    rgba(246, 248, 255, 0.96) 12%,
    rgba(177, 183, 255, 0.92) 48%,
    rgba(255, 196, 158, 0.9) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

:root[data-theme="night"] .hero-title__mark {
  color: rgba(226, 233, 252, 0.64);
  -webkit-text-fill-color: currentColor;
}

:root[data-theme="night"] .now-playing {
  background:
    radial-gradient(circle at 15% 18%, rgba(143, 150, 255, 0.16), transparent 38%),
    radial-gradient(circle at 88% 84%, rgba(255, 180, 138, 0.1), transparent 42%),
    linear-gradient(145deg, rgba(44, 54, 84, 0.46), rgba(16, 23, 39, 0.22));
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -14px 28px rgba(0, 0, 0, 0.12);
}

:root[data-theme="night"] .label,
:root[data-theme="night"] .now-time,
:root[data-theme="night"] .time-row {
  color: rgba(226, 233, 252, 0.62);
}

:root[data-theme="night"] .now-title .track-prefix {
  color: rgba(226, 233, 252, 0.46);
}

:root[data-theme="night"] .now-title .track-name {
  color: rgba(248, 250, 255, 0.92);
}

:root[data-theme="night"] .primary-play,
:root[data-theme="night"] .card-play,
:root[data-theme="night"] .skip,
:root[data-theme="night"] .share-current,
:root[data-theme="night"] .topbar-btn,
:root[data-theme="night"] .social a {
  color: rgba(230, 236, 255, 0.86);
  border-color: rgba(235, 241, 255, 0.2);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)),
    rgba(16, 23, 39, 0.36);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -10px 18px rgba(143, 150, 255, 0.08);
}

:root[data-theme="night"] .topbar-btn svg {
  stroke: rgba(230, 236, 255, 0.82);
}

:root[data-theme="night"] .primary-play {
  color: #fff;
  border-color: rgba(235, 241, 255, 0.3);
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.3), transparent 52%),
    linear-gradient(135deg, #767cdd 0%, #9a8de4 52%, #e8a276 100%);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(143, 150, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

:root[data-theme="night"] .tagline::before {
  background: linear-gradient(90deg, rgba(143, 150, 255, 0.9), rgba(255, 180, 138, 0.9));
}

:root[data-theme="night"] .is-playing .primary-play {
  animation-name: play-glow-night;
}

@keyframes play-glow-night {
  0%,
  100% {
    box-shadow:
      0 14px 32px rgba(0, 0, 0, 0.34),
      0 0 24px rgba(143, 150, 255, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }

  50% {
    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.38),
      0 0 32px rgba(255, 180, 138, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.46);
  }
}

:root[data-theme="night"] .progress {
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 8px rgba(0, 0, 0, 0.22),
    0 0 18px rgba(143, 150, 255, 0.1);
}

:root[data-theme="night"] .card {
  border-color: rgba(235, 241, 255, 0.22);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent 42%),
    rgba(12, 18, 32, 0.12);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -18px 32px rgba(0, 0, 0, 0.12);
}

:root[data-theme="night"] .card::after {
  background: linear-gradient(to top, rgba(7, 10, 22, 0.62), rgba(7, 10, 22, 0.22) 52%, transparent 76%);
}

:root[data-theme="night"] .dj {
  color: rgba(226, 233, 252, 0.62);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.24);
}

:root[data-theme="night"] .new-badge {
  border-color: rgba(235, 241, 255, 0.24);
  color: rgba(235, 241, 255, 0.72);
  background: rgba(8, 13, 28, 0.28);
}

:root[data-theme="night"] .track h2 .track-prefix {
  color: rgba(255, 255, 255, 0.68);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

:root[data-theme="night"] .dots button {
  background: rgba(226, 233, 252, 0.2);
}

:root[data-theme="night"] .dots button.is-active {
  background: linear-gradient(90deg, rgba(143, 150, 255, 0.92), rgba(255, 180, 138, 0.9));
  box-shadow: 0 0 12px rgba(143, 150, 255, 0.3);
}

:root[data-theme="night"] .dots button:hover,
:root[data-theme="night"] .dots button:focus-visible {
  opacity: 0.78;
}


:root[data-theme="night"] .photo-view__backdrop {
  background: rgba(4, 7, 16, 0.68);
}

:root[data-theme="night"] .photo-view__copy {
  background: linear-gradient(
    to top,
    rgba(4, 7, 16, 0.9) 0%,
    rgba(4, 7, 16, 0.5) 44%,
    transparent 100%
  );
}

/* iOS Safari: keep motion, drop the heaviest compositing layers */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  body::before,
  body::after {
    width: 14rem;
    height: 14rem;
    filter: blur(34px);
    opacity: 0.48;
  }

  .shell {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background:
      radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.82), transparent 16rem),
      radial-gradient(circle at 86% 76%, rgba(255, 218, 190, 0.32), transparent 14rem),
      linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(236, 242, 255, 0.72));
  }

  .shell::before,
  .shell::after,
  .content::before {
    display: none;
  }

  .topbar-btn,
  .social a,
  .skip,
  .share-current,
  .card-play,
  .primary-play,
  .now-playing,
  .photo-view__panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .card {
    filter: none;
  }

  .card::before {
    mix-blend-mode: normal;
  }

  .card .art-live {
    mix-blend-mode: normal;
  }

  .card .art-live__bloom {
    filter: blur(8px);
  }

  .card .art-live__sheen {
    mix-blend-mode: normal;
  }

  .card.is-active:not(.is-sounding) .art-live {
    opacity: 0.34;
  }

  .card.is-active:not(.is-sounding) .art-live__sheen {
    animation: art-sheen 5.4s ease-in-out infinite;
  }

  .card.is-sounding .art-live {
    opacity: 1;
  }

  .card.is-sounding {
    animation: card-glow-mobile 3.2s ease-in-out infinite;
  }

  .shell.is-playing .orb .art-live__bloom {
    filter: blur(6px);
  }

  :root[data-theme="night"] .shell {
    background:
      radial-gradient(circle at 16% 12%, rgba(44, 54, 84, 0.5), transparent 16rem),
      radial-gradient(circle at 86% 76%, rgba(255, 180, 138, 0.14), transparent 14rem),
      linear-gradient(145deg, rgba(24, 32, 52, 0.94), rgba(16, 23, 39, 0.88));
  }

  :root[data-theme="night"] .card.is-sounding {
    animation-name: card-glow-mobile-night;
  }
}

@keyframes card-glow-mobile {
  0%,
  100% {
    box-shadow:
      0 18px 42px rgba(120, 132, 176, 0.18),
      0 0 20px rgba(168, 169, 255, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -18px 32px rgba(255, 255, 255, 0.12);
  }

  50% {
    box-shadow:
      0 20px 46px rgba(120, 132, 176, 0.24),
      0 0 30px rgba(255, 189, 150, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -18px 32px rgba(255, 255, 255, 0.14);
  }
}

@keyframes card-glow-mobile-night {
  0%,
  100% {
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.22),
      0 0 20px rgba(143, 150, 255, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -18px 32px rgba(0, 0, 0, 0.12);
  }

  50% {
    box-shadow:
      0 20px 48px rgba(0, 0, 0, 0.28),
      0 0 32px rgba(255, 180, 138, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      inset 0 -18px 32px rgba(0, 0, 0, 0.14);
  }
}

/* Lite mode: iPhone, Instagram in-app browser, touch devices */
[data-lite="1"] body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-lite="1"] body::before,
[data-lite="1"] body::after,
[data-lite="1"] .shell::before,
[data-lite="1"] .shell::after,
[data-lite="1"] .content::before,
[data-lite="1"] .card .art-live {
  display: none !important;
}

[data-lite="1"] .shell,
[data-lite="1"] .topbar-btn,
[data-lite="1"] .social a,
[data-lite="1"] .skip,
[data-lite="1"] .share-current,
[data-lite="1"] .card-play,
[data-lite="1"] .primary-play,
[data-lite="1"] .now-playing,
[data-lite="1"] .photo-view__panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-lite="1"] .shell {
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.82), transparent 16rem),
    radial-gradient(circle at 86% 76%, rgba(255, 218, 190, 0.32), transparent 14rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(236, 242, 255, 0.78));
}

[data-lite="1"][data-theme="night"] .shell {
  background:
    radial-gradient(circle at 16% 12%, rgba(44, 54, 84, 0.5), transparent 16rem),
    radial-gradient(circle at 86% 76%, rgba(255, 180, 138, 0.14), transparent 14rem),
    linear-gradient(145deg, rgba(24, 32, 52, 0.94), rgba(16, 23, 39, 0.88));
}

[data-lite="1"] .sessions {
  /* Static edge veil: carousel depth without a costly live blur in Safari. */
  mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.42) 14px, #000 36px, #000 calc(100% - 36px), rgba(0, 0, 0, 0.42) calc(100% - 14px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.42) 14px, #000 36px, #000 calc(100% - 36px), rgba(0, 0, 0, 0.42) calc(100% - 14px), transparent 100%);
}

[data-lite="1"] .card,
[data-lite="1"] .orb {
  filter: none !important;
}

[data-lite="1"] .card::before {
  mix-blend-mode: normal;
}


/* One opacity-only layer while audio plays: gentle, GPU-friendly on iOS. */
[data-lite="1"] .card.is-sounding::after {
  animation: lite-sound-pulse 4.8s ease-in-out infinite;
}

@keyframes lite-sound-pulse {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.68;
  }
}

[data-lite="1"] .shell,
[data-lite="1"] .topbar,
[data-lite="1"] .hero h1,
[data-lite="1"] .tagline,
[data-lite="1"] .subtitle,
[data-lite="1"] .hero-genres span,
[data-lite="1"] .filters button,
[data-lite="1"] .slider-wrap,
[data-lite="1"] .listen-hint,
[data-lite="1"] .social a,
[data-lite="1"] .aether-mark,
[data-lite="1"] .card {
  animation: none !important;
}

[data-lite="1"] .card.is-active {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(120, 132, 176, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-lite="1"] .is-playing .primary-play,
[data-lite="1"] .is-playing .orb::after,
[data-lite="1"] .orb .art-live__bloom,
[data-lite="1"] .orb .art-live__sheen {
  animation: none !important;
}

[data-lite="1"] .shell.is-playing .orb .art-live {
  opacity: 0.55;
}

[data-lite="1"] .orb .art-live__bloom {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .card.is-sounding .art,
  .card.is-sounding .art::after,
  [data-lite="1"] .card.is-sounding::after {
    animation: none !important;
  }
}


/* Underground redesign */
/* :root,
:root[data-theme="night"] {
  color-scheme: dark;
  --ink: rgba(246, 244, 235, 0.92);
  --muted: rgba(246, 244, 235, 0.58);
  --glass: rgba(14, 13, 12, 0.84);
  --glass-strong: rgba(26, 24, 22, 0.92);
  --rim: rgba(201, 176, 106, 0.42);
  --violet: #c9b06a;
  --peach: #8f3d2e;
  --acid: #c9b06a;
  --danger: #8f3d2e;
  --coal: #090908;
  --paper: #f4f0df;
} */

:root,
:root[data-theme="night"] {
  color-scheme: dark;

  /* Text */
  --ink: rgba(223, 223, 219, 0.90);
  --muted: rgba(223, 223, 219, 0.42);

  /* Surfaces */
  --glass: rgba(14, 14, 14, 0.84);
  --glass-strong: rgba(20, 20, 20, 0.94);

  /* Borders */
  --rim: rgba(95, 95, 95, 0.16);

  /* Almost invisible accents */
  --violet: #525451;
  --peach:  #56453f;
  --acid:   #5c6057;
  --danger: #604541;

  /* Base */
  --coal:  #090909;
  --paper: #d8d6cf;
}


html {
  background: #050505;
}

body,
:root[data-theme="night"] body {
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(201, 176, 106, 0.16), transparent 18rem),
    radial-gradient(circle at 86% 7%, rgba(143, 61, 46, 0.14), transparent 20rem),
    radial-gradient(circle at 44% 94%, rgba(244, 240, 223, 0.07), transparent 26rem),
    linear-gradient(150deg, #050505 0%, #12100e 48%, #030303 100%);
}

body::before,
body::after,
:root[data-theme="night"] body::before,
:root[data-theme="night"] body::after {
  display: none;
}

body::before,
:root[data-theme="night"] body::before {
  left: -8vw;
  top: 9vh;
  bottom: auto;
  width: 34vw;
  height: 2px;
  background: var(--acid);
  box-shadow: 0 0 26px rgba(201, 176, 106, 0.38);
  transform: rotate(-7deg);
}

body::after,
:root[data-theme="night"] body::after {
  right: -7vw;
  top: 74vh;
  width: 38vw;
  height: 2px;
  background: var(--danger);
  box-shadow: 0 0 26px rgba(143, 61, 46, 0.34);
  transform: rotate(8deg);
}

.shell,
:root[data-theme="night"] .shell,
[data-lite="1"] .shell,
[data-lite="1"][data-theme="night"] .shell {
  border: 1px solid rgba(201, 176, 106, 0.28);
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 10%, rgba(201, 176, 106, 0.09), transparent 18rem),
    radial-gradient(circle at 86% 76%, rgba(143, 61, 46, 0.1), transparent 17rem),
    linear-gradient(145deg, rgba(19, 18, 16, 0.96), rgba(6, 6, 5, 0.94));
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(244, 240, 223, 0.06) inset,
    0 0 36px rgba(201, 176, 106, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.shell::before,
.shell::after,
.content::before,
:root[data-theme="night"] .shell::before,
[data-lite="1"] .shell::before,
[data-lite="1"] .shell::after,
[data-lite="1"] .content::before {
  display: block !important;
}

.shell::before,
:root[data-theme="night"] .shell::before {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(244, 240, 223, 0.045), transparent 24%);
  mix-blend-mode: normal;
}

.shell::after {
  opacity: 0.12;
  mix-blend-mode: screen;
}

.content::before {
  inset: 9rem -8rem auto auto;
  width: 18rem;
  height: 18rem;
  border-radius: 0;
  background: radial-gradient(circle at 50% 50%, rgba(143, 61, 46, 0.1), transparent 62%);
  filter: none;
  opacity: 0.22;
  transform: rotate(12deg);
}

.brand,
:root[data-theme="night"] .brand {
  color: rgba(244, 240, 223, 0.72);
  letter-spacing: 0.22em;
}

.brand::before,
:root[data-theme="night"] .brand::before {
  width: 9px;
  height: 9px;
  border-radius: 1px;
  background: var(--danger);
  box-shadow: 0 0 16px rgba(143, 61, 46, 0.62);
  animation: live-pulse 1.35s steps(2, end) infinite;
}

.topbar-btn,
:root[data-theme="night"] .topbar-btn,
.social a,
:root[data-theme="night"] .social a,
.skip,
.share-current,
.card-play,
:root[data-theme="night"] .skip,
:root[data-theme="night"] .share-current,
:root[data-theme="night"] .card-play {
  border-color: rgba(244, 240, 223, 0.18);
  border-radius: 8px;
  color: rgba(244, 240, 223, 0.86);
  background: rgba(10, 10, 9, 0.78);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(201, 176, 106, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.topbar-btn svg,
:root[data-theme="night"] .topbar-btn svg {
  stroke: currentColor;
}

.hero h1,
:root[data-theme="night"] .hero h1 {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  background: linear-gradient(92deg, var(--paper) 0%, var(--acid) 47%, var(--danger) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.hero-title__mark,
:root[data-theme="night"] .hero-title__mark {
  color: var(--danger);
  font-size: 0.25em;
  letter-spacing: 0.28em;
  -webkit-text-fill-color: currentColor;
}

.hero h1::after,
:root[data-theme="night"] .hero h1::after {
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--acid) 0 18px, transparent 18px 27px, var(--danger) 27px 34px, transparent 34px 42px);
  box-shadow: 0 0 22px rgba(201, 176, 106, 0.24);
}

.tagline,
.subtitle,
:root[data-theme="night"] .tagline,
:root[data-theme="night"] .subtitle {
  color: rgba(244, 240, 223, 0.6);
}

.tagline {
  letter-spacing: 0.24em;
}

.tagline::before,
:root[data-theme="night"] .tagline::before {
  width: 34px;
  height: 3px;
  background: var(--danger);
}

.hero-genres span,
:root[data-theme="night"] .hero-genres span,
.filters button,
:root[data-theme="night"] .filters button {
  border-color: rgba(244, 240, 223, 0.18);
  border-radius: 4px;
  color: rgba(244, 240, 223, 0.72);
  background: rgba(7, 7, 6, 0.7);
  box-shadow: none;
}

.filters button.is-active,
:root[data-theme="night"] .filters button.is-active {
  color: #070706;
  border-color: var(--acid);
  background: var(--acid);
  box-shadow: 0 0 20px rgba(201, 176, 106, 0.24);
}

.now-playing,
:root[data-theme="night"] .now-playing {
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(143, 61, 46, 0.1), transparent 34%),
    rgba(8, 8, 7, 0.86);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.38),
    inset 4px 0 0 var(--danger),
    inset 0 0 0 1px rgba(244, 240, 223, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.orb,
:root[data-theme="night"] .orb {
  --orb-radius: 6px;
  border-color: rgba(201, 176, 106, 0.44);
  border-radius: var(--orb-radius);
  background:
    radial-gradient(circle at 45% 40%, rgba(201, 176, 106, 0.38), transparent 22%),
    linear-gradient(145deg, #171511, #050505);
  box-shadow: 0 0 22px rgba(201, 176, 106, 0.12);
}

.orb.has-cover,
:root[data-theme="night"] .orb.has-cover {
  background:
    linear-gradient(to top, rgba(5, 5, 5, 0.72), transparent 54%),
    var(--cover-image-dark) center / cover no-repeat;
}

.now-title .track-prefix,
:root[data-theme="night"] .now-title .track-prefix,
.now-time,
.time-row,
:root[data-theme="night"] .now-time,
:root[data-theme="night"] .time-row {
  color: rgba(244, 240, 223, 0.56);
}

.now-title .track-name,
:root[data-theme="night"] .now-title .track-name {
  color: var(--paper);
  letter-spacing: 0.01em;
}

.primary-play,
:root[data-theme="night"] .primary-play {
  border-radius: 10px;
  color: #060605;
  border-color: var(--acid);
  background: var(--acid);
  box-shadow:
    0 0 26px rgba(201, 176, 106, 0.34),
    0 12px 30px rgba(0, 0, 0, 0.42);
}

.progress,
:root[data-theme="night"] .progress {
  height: 7px;
  border-radius: 0;
  background: rgba(244, 240, 223, 0.14);
  box-shadow: inset 0 0 0 1px rgba(244, 240, 223, 0.08);
}

.progress span,
.dots button.is-active,
:root[data-theme="night"] .dots button.is-active {
  border-radius: 0;
  background: linear-gradient(90deg, var(--danger), var(--acid));
  box-shadow: 0 0 16px rgba(201, 176, 106, 0.24);
}

.progress span::after {
  border-radius: 0;
  background: var(--acid);
}

.card,
:root[data-theme="night"] .card {
  --card-radius: 8px;
  border-color: rgba(244, 240, 223, 0.18);
  border-radius: var(--card-radius);
  background: #090908;
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(201, 176, 106, 0.06);
}

.card:hover,
.card.is-focused,
.card.is-active,
:root[data-theme="night"] .card:hover,
:root[data-theme="night"] .card.is-focused,
:root[data-theme="night"] .card.is-active {
  border-color: rgba(201, 176, 106, 0.68);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.56),
    0 0 22px rgba(201, 176, 106, 0.16),
    inset 0 0 0 1px rgba(201, 176, 106, 0.14);
}

.card::before,
:root[data-theme="night"] .card::before {
  background:
    repeating-linear-gradient(0deg, rgba(244, 240, 223, 0.08) 0 1px, transparent 1px 5px),
    linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.16) 58%, transparent 100%);
  mix-blend-mode: normal;
  opacity: 0.72;
}

.card::after,
:root[data-theme="night"] .card::after {
  background:
    linear-gradient(135deg, rgba(143, 61, 46, 0.32), transparent 24%),
    linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 55%);
}

.card.is-active::after {
  background:
    linear-gradient(135deg, rgba(201, 176, 106, 0.25), transparent 24%),
    linear-gradient(to top, rgba(0, 0, 0, 0.74), transparent 55%);
}

.card .art,
.card .art-live {
  filter: saturate(1.15) contrast(1.12) brightness(0.74) hue-rotate(var(--art-hue, 0deg));
}

.art-live {
  mix-blend-mode: screen;
}

.art-live__bloom {
  background: radial-gradient(circle, rgba(201, 176, 106, 0.9) 0%, rgba(201, 176, 106, 0.4) 36%, transparent 72%);
}

.art-live__bloom--b {
  background: radial-gradient(circle, rgba(143, 61, 46, 0.82) 0%, rgba(143, 61, 46, 0.36) 38%, transparent 74%);
}

.dj,
:root[data-theme="night"] .dj,
.track h2 .track-prefix,
:root[data-theme="night"] .track h2 .track-prefix,
.track .style,
.track p {
  color: rgba(244, 240, 223, 0.72);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.track h2 .track-name,
:root[data-theme="night"] .track h2 .track-name {
  color: var(--paper);
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

.new-badge,
:root[data-theme="night"] .new-badge {
  border-color: var(--danger);
  border-radius: 3px;
  color: #fff;
  background: rgba(143, 61, 46, 0.72);
  box-shadow: 0 0 18px rgba(143, 61, 46, 0.26);
}

.dots button,
:root[data-theme="night"] .dots button {
  border-radius: 0;
  background: rgba(244, 240, 223, 0.24);
}

.empty-state {
  border-color: rgba(244, 240, 223, 0.2);
  border-radius: 8px;
  color: rgba(244, 240, 223, 0.7);
  background: rgba(8, 8, 7, 0.82);
}

.listen-hint,
:root[data-theme="night"] .listen-hint {
  color: rgba(201, 176, 106, 0.62);
  letter-spacing: 0.24em;
}

.social a:hover,
.social a:active {
  border-color: var(--acid);
  color: var(--acid);
  transform: translateY(-2px) rotate(-2deg);
}

.aether-mark,
.aether-mark__name,
.aether-mark__phrase,
:root[data-theme="night"] .aether-mark,
:root[data-theme="night"] .aether-mark__name,
:root[data-theme="night"] .aether-mark__phrase {
  color: rgba(244, 240, 223, 0.38);
}

.aether-mark::before,
:root[data-theme="night"] .aether-mark::before {
  width: 76px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--acid) 0 10px, transparent 10px 16px, var(--danger) 16px 22px, transparent 22px 28px);
}


.card.has-cover .art,
:root[data-theme="night"] .card.has-cover .art {
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.18) 58%, rgba(0, 0, 0, 0.34)),
    var(--cover-image-dark) center / cover no-repeat;
}

.card.has-cover .art::after {
  opacity: 0.42;
  background:
    repeating-linear-gradient(0deg, rgba(244, 240, 223, 0.13) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 24% 18%, rgba(201, 176, 106, 0.22), transparent 34%),
    radial-gradient(circle at 92% 72%, rgba(143, 61, 46, 0.18), transparent 30%);
}

.photo-view__backdrop,
:root[data-theme="night"] .photo-view__backdrop {
  background: rgba(0, 0, 0, 0.84);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.photo-view__panel,
:root[data-theme="night"] .photo-view__panel {
  border: 1px solid rgba(201, 176, 106, 0.26);
  border-radius: 10px;
  background: #050505;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.66), 0 0 28px rgba(201, 176, 106, 0.1);
}

.photo-view__media img {
  filter: contrast(1.14) saturate(0.88) brightness(0.82);
}

.photo-view__copy,
:root[data-theme="night"] .photo-view__copy {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.52) 48%, transparent 100%);
}

.photo-view__title {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.photo-view__close {
  border-radius: 8px;
  background: rgba(5, 5, 5, 0.82);
}

@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .shell,
  :root[data-theme="night"] .shell {
    background:
      radial-gradient(circle at 18% 10%, rgba(201, 176, 106, 0.08), transparent 16rem),
      radial-gradient(circle at 86% 76%, rgba(143, 61, 46, 0.08), transparent 14rem),
      linear-gradient(145deg, rgba(18, 17, 15, 0.98), rgba(5, 5, 5, 0.96));
  }

  .shell::before,
  .shell::after,
  .content::before {
    display: block;
  }
}