:root {
  --ink: #111522;
  --navy: #10263a;
  --teal: #2b938c;
  --aqua: #9adbd3;
  --rose: #d9859b;
  --pearl: #fff8f2;
  --gold: #d8b36a;
  --nav-height: 72px;
  --page-pad-x: clamp(13px, 4vw, 26px);
  --page-pad-bottom: 20px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100%;
  color: var(--pearl);
  background: #031023;
  font-family: "Noto Serif TC", serif;
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-shell {
  height: 100dvh;
  overflow: hidden;
}

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(18px, 5vw, 64px);
  color: rgba(255, 248, 242, .86);
  background: linear-gradient(180deg, rgba(3, 10, 28, .72), rgba(3, 10, 28, 0));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 26px;
}

.brand img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(103, 231, 255, .34));
}

.brand span {
  display: grid;
  gap: 1px;
}

.brand strong {
  font: inherit;
}

.brand small {
  color: var(--aqua);
  font-size: 12px;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  gap: clamp(14px, 3vw, 34px);
  font-size: 13px;
}

.nav-links a {
  position: relative;
  white-space: nowrap;
}

.nav-links a::before,
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .24s ease, transform .24s ease;
}

.nav-links a::before {
  bottom: -12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35d8ff;
  box-shadow:
    0 0 8px rgba(53, 216, 255, .95),
    0 0 18px rgba(53, 157, 255, .48);
  transform: translateX(-50%) scale(.72);
}

.nav-links a::after {
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  margin: 0 auto;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #17cfff 18%, #51e8ff 50%, #17cfff 82%, transparent);
  box-shadow:
    0 0 9px rgba(53, 216, 255, .72),
    0 0 18px rgba(53, 126, 255, .26);
  transform: scaleX(.62);
}

.nav-links a:hover::before,
.nav-links a[aria-current="page"]::before,
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav-links a:hover::before,
.nav-links a[aria-current="page"]::before {
  transform: translateX(-50%) scale(1);
}

.nav-links a[aria-current="page"] {
  color: #48dfff;
  text-shadow: 0 0 10px rgba(72, 223, 255, .55);
}

.eyebrow {
  display: block;
  margin: 0 0 8px;
  color: var(--gold);
  font: 700 13px/1 "Cormorant Garamond", serif;
  text-transform: uppercase;
}

.music-site {
  height: 100dvh;
  background: #031023;
}

.music-page {
  position: relative;
  height: 100dvh;
  padding: var(--nav-height) var(--page-pad-x) var(--page-pad-bottom);
  color: var(--pearl);
  background: #000c23;
  /* background:
    radial-gradient(circle at 50% 20%, rgba(52, 160, 255, .2), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(12, 80, 168, .34), transparent 40%),
    radial-gradient(circle at 12% 88%, rgba(26, 135, 233, .22), transparent 20%),
    radial-gradient(circle at 88% 86%, rgba(85, 43, 177, .2), transparent 20%),
    linear-gradient(180deg, #08224a 0%, #041739 48%, #031023 100%); */
  overflow: hidden;
}

.music-site.is-embedded {
  --nav-height: 0px;
  --page-pad-bottom: 0px;
  --page-pad-x: 0px;
}

.music-site.is-embedded .top-nav {
  display: none;
}

.music-site.is-embedded .music-page {
  padding: 0;
}


.music-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(155, 221, 255, .68) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.38) 1px, transparent 1px);
  background-size: 38px 38px, 81px 81px;
  opacity: .2;
}

.music-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(89, 196, 255, .32), transparent 1px, transparent calc(100% - 1px), rgba(89, 196, 255, .32)),
    radial-gradient(circle at 50% 50%, transparent 0 45%, rgba(0,0,0,.24) 76%, rgba(0,0,0,.42) 100%);
}

.music-shell {
  position: relative;
  z-index: 1;
  max-width: 1680px;
  height: calc(100dvh - var(--nav-height) - var(--page-pad-bottom));
  margin: 0 auto;
  overflow: hidden;
}

.music-heading {
  display: none;
}

.music-heading .eyebrow {
  margin-bottom: 4px;
  color: #79e7ff;
}

.music-heading h1 {
  margin: 0;
  font: 700 22px/1 "Cormorant Garamond", serif;
}

.music-heading p:not(.eyebrow) {
  display: none;
}

.deep-player {
  display: grid;
  grid-template-columns: minmax(430px, 560px) minmax(620px, 1fr);
  justify-content: center;
  align-items: stretch;
  /* gap: clamp(20px, 2vw, 34px); */
  position: relative;
  height: 100%;
  min-height: 0;
}

.visualizer-panel {
  position: relative;
  grid-column: 1;
  width: min(100%, 560px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: clamp(50px, 4vh, 46px) 18px clamp(66px, 8vh, 82px);
  overflow: hidden;
  /* border: 1px solid #141c36;
  border-radius: 14px; */
  background:radial-gradient(circle at 50% 30%, #000e2d 50%, #000d31 46%, #000d2cff 100%);
  /* box-shadow:
    0 24px 90px rgba(0,0,0,.28),
    inset 0 0 80px rgba(70, 160, 255, .08),
    inset 0 1px 0 rgba(255,255,255,.1); */
}

.panel-title {
  position: absolute;
  top: clamp(18px, 3vh, 30px);
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 22px;
  color: rgba(222, 232, 255, .8);
  font: 700 16px/1 "Cormorant Garamond", serif;
  letter-spacing: .42em;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.title-text {
  display: inline-block;
}

.title-ornament {
  display: block;
  width: 98px;
  height: 18px;
  flex: 0 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2298%22%20height%3D%2218%22%20viewBox%3D%220%200%2098%2018%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22g%22%20x%3D%22-20%25%22%20y%3D%22-80%25%22%20width%3D%22140%25%22%20height%3D%22260%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%221.2%22%20result%3D%22b%22/%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22b%22/%3E%3CfeMergeNode%20in%3D%22SourceGraphic%22/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg%20stroke%3D%22%231fd8ff%22%20stroke-linecap%3D%22round%22%20filter%3D%22url%28%23g%29%22%3E%3Cpath%20d%3D%22M2%209H38%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%220.1%207%22%20opacity%3D%22.75%22/%3E%3Cpath%20d%3D%22M60%209H96%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%220.1%207%22%20opacity%3D%22.75%22/%3E%3Cpath%20d%3D%22M43%209V7%20M47%209V3%20M51%209V14%20M55%209V5%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M40%209H58%22%20stroke-width%3D%221%22%20opacity%3D%22.65%22/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter:
    drop-shadow(0 0 5px rgba(31, 216, 255, .62))
    drop-shadow(0 0 11px rgba(31, 133, 255, .22));
  opacity: .86;
}

.title-ornament-right {
  transform: scaleX(-1);
}

.visualizer-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(118px, 18vh, 170px);
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 13, 47, .18) 18%, rgba(0, 13, 47, .08) 100%),
    url("assets/images/bg_progressbar.webp") center bottom / cover no-repeat;
  opacity: .92;
  filter: saturate(1.12) drop-shadow(0 0 18px rgba(76, 190, 255, .36));
  mask: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.visualizer-panel::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: clamp(96px, 11vh, 122px);
  height: 24px;
  opacity: .62;
  background:transparent;
  filter: drop-shadow(0 0 12px rgba(103, 231, 255, .52));
}

.time-readout {
  position: absolute;
  top: 32%;
  left: max(18px, calc(50% - 276px));
  right: max(18px, calc(50% - 276px));
  z-index: 2;
  display: flex;
  justify-content: space-between;
  color: rgba(219, 239, 255, .6);
  font-family: "Cormorant Garamond", serif;
  font-size: 21px;
}

.orbital-meter {
  position: relative;
  width: min(76vw, 430px, calc((100dvh - var(--nav-height) - var(--page-pad-bottom)) * .48));
  aspect-ratio: 1;
  margin: clamp(16px, 3vh, 28px) auto 6px;
  display: grid;
  place-items: center;
}

.orbital-meter::before,
.orbital-meter::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.orbital-meter::before {
  inset: -7%;
  background: repeating-conic-gradient(from 12deg, #034487 1deg 1.4deg, transparent 0deg 4deg);
  mask: radial-gradient(circle, transparent 0 68%, #000 69% 71%, transparent 72%);
}

.orbital-meter::after {
  inset: 4%;
  border: 1px solid rgba(102, 208, 255, .16);
  box-shadow: inset 0 0 48px rgba(72, 163, 255, .1);
}

.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid rgba(69, 188, 255, .2);
  box-shadow: 0 0 20px rgba(67, 184, 255, .12), inset 0 0 32px rgba(67, 184, 255, .06);
}

.ring-one {
  inset: 5%;
  border-width: 2px;
  border-top-color: rgba(138, 99, 255, .88);
  border-left-color: rgba(65, 204, 255, .78);
  box-shadow: 0 0 32px rgba(73, 202, 255, .22);
  animation: spin 10s linear infinite;
}

.ring-two {
  /* inset: 13%; */
  border-top-color: rgba(58, 120, 255, .45);
  border-right-color: rgba(95, 223, 255, .9);
  animation: spin 16s linear reverse infinite;
}

.ring-three {
  inset: 16%;
  border-style: dashed;
  border-color: rgba(114, 204, 255, .26);
  border-bottom-color: rgba(255,255,255,.72);
  animation: pulseRing 2.4s ease-in-out infinite;
}

.ring-cardinals {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.ring-cardinals span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3adaff;
  box-shadow:
    0 0 10px rgba(58, 218, 255, .95),
    0 0 22px rgba(58, 154, 255, .55);
}

.ring-cardinals span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(178, 246, 255, .95);
  transform: translate(-50%, -50%);
}

.ring-cardinals span:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ring-cardinals span:nth-child(2) {
  top: 50%;
  right: 0;
  background: #9b59ff;
  box-shadow:
    0 0 10px rgba(155, 89, 255, .95),
    0 0 22px rgba(108, 83, 255, .55);
  transform: translate(50%, -50%);
}

.ring-cardinals span:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.ring-cardinals span:nth-child(4) {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.outer-ring-bubbles {
  position: absolute;
  inset: -12%;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
}

.outer-ring-bubbles span {
  position: absolute;
  width: var(--bubble-size, 10px);
  height: var(--bubble-size, 10px);
  border: 1px solid rgb(48,75 ,92 ,.48);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(230, 255, 255, .52), transparent 17%),
    radial-gradient(circle at 58% 68%, rgba(51, 159, 255, .1), transparent 58%);
  box-shadow:
    inset 0 0 7px rgba(113, 214, 255, .2),
    0 0 12px rgba(76, 180, 255, .2);
  opacity: var(--bubble-opacity, .48);
  animation: outerBubbleFloat var(--bubble-speed, 5.8s) ease-in-out infinite;
  animation-delay: var(--bubble-delay, 0s);
}

.outer-ring-bubbles span:nth-child(1) {
  --bubble-size: 8px;
  --bubble-opacity: .38;
  --bubble-delay: -1.2s;
  left: 2%;
  top: 68%;
}

.outer-ring-bubbles span:nth-child(2) {
  --bubble-size: 13px;
  --bubble-opacity: .55;
  --bubble-speed: 6.4s;
  --bubble-delay: -3.3s;
  left: 14%;
  top: 82%;
}

.outer-ring-bubbles span:nth-child(3) {
  --bubble-size: 7px;
  --bubble-opacity: .34;
  --bubble-speed: 5.2s;
  --bubble-delay: -2s;
  left: 34%;
  top: 96%;
}

.outer-ring-bubbles span:nth-child(4) {
  --bubble-size: 10px;
  --bubble-opacity: .45;
  --bubble-speed: 6.8s;
  --bubble-delay: -4.5s;
  right: 34%;
  top: 97%;
}

.outer-ring-bubbles span:nth-child(5) {
  --bubble-size: 15px;
  --bubble-opacity: .56;
  --bubble-speed: 7s;
  --bubble-delay: -2.7s;
  right: 13%;
  top: 84%;
}

.outer-ring-bubbles span:nth-child(6) {
  --bubble-size: 9px;
  --bubble-opacity: .42;
  --bubble-speed: 5.6s;
  --bubble-delay: -.8s;
  right: 1%;
  top: 70%;
}

.wave-line {
  position: absolute;
  left: 1%;
  right: 1%;
  top: 50%;
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transform: translateY(-50%);
}

.wave-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #2f8cff 8%, #8ce7ff 28%, #fff 50%, #8ce7ff 72%, #2f8cff 92%, transparent);
  box-shadow: 0 0 22px rgba(96,211,255,.95);
}

.wave-line span {
  position: relative;
  z-index: 1;
  width: 2px;
  height: 16px;
  background: linear-gradient(180deg, transparent, #9bedff, transparent);
  box-shadow: 0 0 14px rgba(139,223,255,1);
  animation: equalize 1.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 1) * -80ms);
}

.wave-line span:nth-child(1) { --i: 1; }
.wave-line span:nth-child(2) { --i: 2; }
.wave-line span:nth-child(3) { --i: 7; }
.wave-line span:nth-child(4) { --i: 3; }
.wave-line span:nth-child(5) { --i: 9; }
.wave-line span:nth-child(6) { --i: 4; }
.wave-line span:nth-child(7) { --i: 10; }
.wave-line span:nth-child(8) { --i: 5; }
.wave-line span:nth-child(9) { --i: 11; }
.wave-line span:nth-child(10) { --i: 6; }
.wave-line span:nth-child(11) { --i: 12; }
.wave-line span:nth-child(12) { --i: 8; }
.wave-line span:nth-child(13) { --i: 3; }
.wave-line span:nth-child(14) { --i: 9; }
.wave-line span:nth-child(15) { --i: 5; }
.wave-line span:nth-child(16) { --i: 11; }
.wave-line span:nth-child(17) { --i: 4; }
.wave-line span:nth-child(18) { --i: 10; }
.wave-line span:nth-child(19) { --i: 2; }
.wave-line span:nth-child(20) { --i: 7; }
.wave-line span:nth-child(21) { --i: 1; }
.wave-line span:nth-child(22) { --i: 6; }
.wave-line span:nth-child(23) { --i: 8; }
.wave-line span:nth-child(24) { --i: 12; }

.deep-player:not(.is-playing) .wave-line span,
.deep-player:not(.is-playing) .ring {
  animation-play-state: paused;
}

.creature-stage {
  position: relative;
  width: min(230px, calc((100dvh - var(--nav-height) - var(--page-pad-bottom)) * .25));
  aspect-ratio: 1;
  filter: drop-shadow(0 0 18px rgba(98, 211, 255, .86)) drop-shadow(0 0 46px rgba(63, 134, 255, .5)); 
  animation: creatureFloat 4s ease-in-out infinite;
}

.creature-glow {
  position: absolute;
  inset: 10% 8% 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,.9), rgba(117,226,255,.44) 16%, rgba(54,135,255,.2) 42%, transparent 70%);
  filter: blur(80px);
  opacity: .1;
}

.creature-image {
  position: absolute;
  inset: -10%;
  z-index: 2;
  width: 120%;
  height: 120%;
  object-fit: contain;
  opacity: 1;
  mix-blend-mode: screen;
  filter:
    saturate(1.24)
    contrast(1.08)
    drop-shadow(0 0 18px rgba(106, 223, 255, .85))
    drop-shadow(0 0 42px rgba(64, 126, 255, .46));
  transform: scale(.96);
}

.creature-stage[data-creature="dolphin"] .creature-image,
.creature-stage[data-creature="blindfish"] .creature-image,
.creature-stage[data-creature="wrasse"] .creature-image,
.creature-stage[data-creature="sardines"] .creature-image {
  inset: 5% -22%;
  width: 144%;
  height: 92%;
}

.creature-stage[data-creature="octopus"] .creature-image {
  inset: -15% -10%;
  width: 120%;
  height: 130%;
}

.creature-stage.use-icon .sea-creature {
  display: none !important;
}

.sea-creature {
  position: absolute;
  inset: 0;
  display: none;
}

.creature-stage[data-creature="octopus"] .creature-octopus,
.creature-stage[data-creature="wrasse"] .creature-wrasse,
.creature-stage[data-creature="dolphin"] .creature-dolphin,
.creature-stage[data-creature="blindfish"] .creature-blindfish,
.creature-stage[data-creature="sardines"] .creature-sardines {
  display: block;
}

.creature-octopus::before {
  content: "";
  position: absolute;
  left: 22%;
  top: 13%;
  width: 56%;
  height: 42%;
  border-radius: 56% 56% 38% 38%;
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.98), transparent 8%),
    radial-gradient(circle at 66% 28%, rgba(185,246,255,.64), transparent 15%),
    linear-gradient(180deg, rgba(202, 248, 255, .94), rgba(93, 216, 255, .7) 36%, rgba(41, 118, 231, .52) 76%, rgba(42,118,231,.18)),
    repeating-linear-gradient(100deg, rgba(255,255,255,.26) 0 1px, transparent 1px 12px);
  box-shadow:
    inset 0 10px 22px rgba(255,255,255,.26),
    inset 0 -18px 30px rgba(31,105,228,.34),
    0 0 36px rgba(81,213,255,.9);
}

.creature-octopus::after {
  content: "";
  position: absolute;
  left: 28%;
  top: 30%;
  width: 44%;
  height: 20%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.42), transparent);
  filter: blur(4px);
}

.creature-octopus b {
  position: absolute;
  left: 29%;
  top: 30%;
  width: 42%;
  height: 18%;
  border-radius: 0 0 50% 50%;
  border-bottom: 2px solid rgba(192, 244, 255, .68);
  box-shadow: 0 10px 14px rgba(82, 209, 255, .18);
}

.creature-octopus i {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 106px;
  border-radius: 999px;
  border-left: 2px solid rgba(174, 241, 255, .62);
  border-bottom: 1px solid rgba(104, 219, 255, .24);
  filter: drop-shadow(0 0 8px rgba(98, 211, 255, .84));
  transform-origin: top center;
}

.creature-octopus i:nth-of-type(1) { left: 29%; transform: rotate(20deg); }
.creature-octopus i:nth-of-type(2) { left: 39%; transform: rotate(8deg); height: 118px; }
.creature-octopus i:nth-of-type(3) { left: 49%; transform: rotate(-1deg); height: 132px; }
.creature-octopus i:nth-of-type(4) { left: 59%; transform: rotate(-10deg); height: 118px; }
.creature-octopus i:nth-of-type(5) { left: 69%; transform: rotate(-22deg); height: 108px; }

.bubble {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(142, 228, 255, .42);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(230, 255, 255, .5), transparent 18%),
    radial-gradient(circle at 58% 68%, rgba(82, 185, 255, .12), transparent 54%);
  box-shadow:
    inset 0 0 8px rgba(142, 228, 255, .18),
    0 0 10px rgba(142, 228, 255, .2);
  opacity: .64;
  animation: bubbleRise 4.8s ease-in-out infinite;
}

.bubble-one {
  left: 7%;
  top: 58%;
  width: 12px;
  height: 12px;
}

.bubble-two {
  right: 2%;
  top: 42%;
  width: 15px;
  height: 15px;
  animation-delay: -1.6s;
}

.bubble-three {
  right: 12%;
  top: 63%;
  width: 18px;
  height: 18px;
  animation-delay: -2.8s;
}

.bubble-four {
  left: 18%;
  top: 28%;
  width: 7px;
  height: 7px;
  opacity: .46;
  animation-delay: -3.4s;
}

.bubble-five {
  right: 18%;
  top: 24%;
  width: 9px;
  height: 9px;
  opacity: .52;
  animation-delay: -1s;
}

.bubble-six {
  left: 2%;
  top: 40%;
  width: 8px;
  height: 8px;
  opacity: .42;
  animation-delay: -4.1s;
}

.bubble-seven {
  right: 4%;
  top: 74%;
  width: 10px;
  height: 10px;
  opacity: .5;
  animation-delay: -2.2s;
}

.bubble-eight {
  left: 28%;
  top: 72%;
  width: 6px;
  height: 6px;
  opacity: .38;
  animation-delay: -3.8s;
}

.creature-wrasse::before,
.creature-blindfish::before {
  content: "";
  position: absolute;
  left: 18%;
  top: 42%;
  width: 62%;
  height: 24%;
  border-radius: 60% 42% 42% 60%;
  background: linear-gradient(90deg, #55d9ff, #e8cf6d 44%, #ff7fb1);
}

.creature-wrasse::after,
.creature-blindfish::after {
  content: "";
  position: absolute;
  right: 7%;
  top: 44%;
  border-left: 42px solid #ff7fb1;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
}

.creature-wrasse i {
  position: absolute;
  left: 46%;
  top: 34%;
  width: 42px;
  height: 34px;
  border-radius: 50% 50% 0 0;
  background: rgba(255,255,255,.34);
}

.creature-dolphin::before {
  content: "";
  position: absolute;
  left: 18%;
  top: 34%;
  width: 70%;
  height: 30%;
  border-radius: 58% 70% 46% 52%;
  background: linear-gradient(160deg, #bff5ff, #4eaee9 58%, #235aa8);
  transform: rotate(-12deg);
}

.creature-dolphin::after {
  content: "";
  position: absolute;
  left: 42%;
  top: 24%;
  border-bottom: 42px solid #6bc8ef;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  transform: rotate(-14deg);
}

.creature-dolphin i {
  position: absolute;
  right: 7%;
  top: 39%;
  border-left: 42px solid #4eaee9;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  transform: rotate(-12deg);
}

.creature-blindfish {
  opacity: .86;
  filter: saturate(.65) brightness(1.25);
}

.creature-blindfish::before {
  background: linear-gradient(90deg, #d8f7ff, #fff8f2 50%, #aacbd6);
}

.creature-blindfish::after {
  border-left-color: #aacbd6;
}

.creature-blindfish i {
  position: absolute;
  left: 27%;
  top: 49%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(5, 17, 41, .28);
}

.creature-sardines i {
  position: absolute;
  width: 64px;
  height: 18px;
  border-radius: 60% 45% 45% 60%;
  background: linear-gradient(90deg, #eefcff, #62d3ff 70%, #2d78dc);
}

.creature-sardines i::after {
  content: "";
  position: absolute;
  right: -16px;
  top: 3px;
  border-left: 18px solid #62d3ff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.creature-sardines i:nth-child(1) { left: 18%; top: 32%; }
.creature-sardines i:nth-child(2) { left: 44%; top: 42%; transform: scale(.82); }
.creature-sardines i:nth-child(3) { left: 20%; top: 54%; transform: scale(.72); }
.creature-sardines i:nth-child(4) { left: 54%; top: 58%; transform: scale(.62); }
.creature-sardines i:nth-child(5) { left: 38%; top: 25%; transform: scale(.56); }

.track-meta {
  position: relative;
  top: 3%;
  z-index: 1;
  max-width: 520px;
  min-height: 13vh;
  margin: clamp(0px, 1vh, 6px) auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.track-meta h2 {
  margin: 0;
  margin-bottom: 2.5px;
  color: rgba(255, 248, 242, .92);
  font: 700 clamp(25px, 4vw, 32px)/1 "Cormorant Garamond", serif;
  text-shadow: 0 0 16px rgba(117, 215, 255, .2);
}

.track-meta p {
  margin: clamp(4px, 1vh, 8px) 0 clamp(8px, 1.4vh, 14px);
  color: rgba(209, 226, 255, .64);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.track-meta span {
  color: rgba(225, 235, 255, .72);
  line-height: 1.7;
  font-size: clamp(13px, 1.7vh, 16px);
}

.player-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 6vw, 64px);
  margin: clamp(12px, 2vh, 22px) 0 clamp(20px, 3vh, 30px);
}

.round-control,
.play-control {
  position: relative;
  display: grid;
  place-items: center;
  color: #bff3ff;
  background:
    radial-gradient(circle at 50% 48%, rgba(86, 217, 255, .16), rgba(6, 29, 68, .48) 58%, rgba(3, 15, 36, .8)),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
    0 0 28px rgba(75, 201, 255, .26),
    inset 0 0 30px rgba(75, 201, 255, .14),
    inset 0 1px 0 rgba(255,255,255,.2);
}

.round-control::before,
.play-control::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px dotted rgba(118, 218, 255, .46);
}

.round-control::after,
.play-control::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.round-control[data-prev]::before,
.round-control[data-next]::before {
  inset: -12px;
  border-style: dashed;
  border-color: rgba(111, 218, 255, .58);
  box-shadow: 0 0 14px rgba(87, 206, 255, .22);
}

.round-control[data-prev]::after,
.round-control[data-next]::after {
  inset: -12px;
  border-radius: 50%;
  background:
    conic-gradient(from -18deg, rgba(103, 231, 255, .96) 0deg 46deg, transparent 48deg 360deg);
  filter: drop-shadow(0 0 10px rgba(103, 231, 255, .72));
  mask: radial-gradient(circle, transparent 0 68%, #000 69% 73%, transparent 74%);
  animation: spin 3.8s linear infinite;
}

.round-control[data-prev]::after {
  background:
    conic-gradient(from -78deg, rgba(103, 231, 255, .96) 0deg 50deg, transparent 52deg 360deg);
  animation-direction: reverse;
}

.round-control[data-prev]::before {
  border-color: rgba(85, 217, 255, .62);
  box-shadow: 0 0 14px rgba(66, 198, 255, .26);
}

.round-control[data-next]::before {
  border-color: rgba(159, 115, 255, .64);
  box-shadow: 0 0 14px rgba(159, 115, 255, .26);
}

.round-control[data-next]::after {
  background:
    conic-gradient(from 30deg, rgba(162, 102, 255, .96) 0deg 50deg, transparent 52deg 360deg);
  filter: drop-shadow(0 0 10px rgba(162, 102, 255, .72));
}

.play-control::before {
  inset: -11px;
  border-color: rgba(106, 204, 255, .42);
  box-shadow: 0 0 18px rgba(80, 194, 255, .18);
}

.play-control::after {
  inset: -11px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 8deg,
      rgba(100, 224, 255, .98) 0deg 54deg,
      transparent 56deg 180deg,
      rgba(100, 224, 255, .98) 180deg 234deg,
      transparent 236deg 360deg
    );
  filter: drop-shadow(0 0 12px rgba(100, 224, 255, .78));
  mask: radial-gradient(circle, transparent 0 69%, #000 70% 73%, transparent 74%);
  animation: spin 4.2s linear infinite;
}

.orbit-dolphin {
  position: absolute;
  inset: -12px;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  animation: spin 3.8s linear infinite;
}

.round-control[data-prev] .orbit-dolphin {
  animation-direction: reverse;
}

.orbit-dolphin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -15px;
  width: 40px;
  height: 40px;
  background: url("assets/icons/icon_dolphin_left.webp") center / contain no-repeat;
  filter:
    drop-shadow(0 0 8px rgba(127, 233, 255, .9))
    drop-shadow(0 0 16px rgba(82, 151, 255, .48));
  transform: translateX(-50%) rotate(-223deg);
}

.round-control[data-next] .orbit-dolphin::before {
  background-image: url("assets/icons/icon_dolphin_right.webp");
  filter:
    drop-shadow(0 0 8px rgba(190, 153, 255, .9))
    drop-shadow(0 0 16px rgba(149, 84, 255, .52));
  transform: translateX(-50%) rotate(223deg);
}

.round-control {
  width: clamp(48px, 6.6vh, 62px);
  height: clamp(48px, 6.6vh, 62px);
  font-size: 0;
}

.play-control {
  width: clamp(62px, 8.5vh, 78px);
  height: clamp(62px, 8.5vh, 78px);
  font-size: 36px;
}

.round-control img,
.play-control img {
  position: relative;
  z-index: 1;
  display: block;
  width: 42%;
  height: 42%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(131, 230, 255, .92));
}

.play-control img {
  width: 48%;
  height: 48%;
}

.progress-bar {
  position: absolute;
  left: 8%;
  right: 8%;
  z-index: 2;
  display: block;
}

.progress-bar input {
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  accent-color: #60d3ff;
}

.progress-bar input::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(84, 178, 255, .8), rgba(103, 231, 255, .92), rgba(84, 178, 255, .8), transparent);
  box-shadow: 0 0 16px rgba(103, 231, 255, .65);
}

.progress-bar input::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -9px;
  border-radius: 50%;
  background: #88eaff;
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 0 18px rgba(103, 231, 255, 1);
}

.progress-bar span {
  position: absolute;
  left: 0;
  top: 11px;
  width: var(--progress, 0%);
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, #327dff, #67e7ff);
  box-shadow: 0 0 18px rgba(103, 231, 255, .8);
}

.utility-controls {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: clamp(20px, 3vh, 30px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.volume-control {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 18px;
}

.mode-controls {
  display: flex;
  align-items: center;
  gap: 26px;
}

.utility-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: rgba(199, 227, 255, .56);
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: .72;
  transition: opacity .22s ease, filter .22s ease, transform .22s ease;
}

.utility-button:hover,
.utility-button.is-active {
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(103, 231, 255, .7));
}

.utility-button.is-active {
  color: #6de7ff;
}

.utility-icon {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
}

.volume-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: .76;
  transition: opacity .22s ease, filter .22s ease;
}

.volume-toggle:hover,
.volume-toggle.is-active {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(103, 231, 255, .58));
}

.volume-toggle img,
.utility-image-icon {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(154, 220, 255, .42));
}

.volume-slider {
  position: relative;
  display: block;
  flex: 1 1 auto;
  max-width: 300px;
  min-width: 120px;
}

.volume-slider input {
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  accent-color: #60d3ff;
}

.volume-slider input::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(91, 126, 205, .2);
  box-shadow: inset 0 0 0 1px rgba(103, 231, 255, .07);
}

.volume-slider input::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: #35cfff;
  box-shadow: 0 0 16px rgba(53, 207, 255, .95);
}

.volume-slider span {
  position: absolute;
  left: 0;
  top: 11px;
  width: var(--volume, 80%);
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, #4b5cff, #35cfff);
  box-shadow: 0 0 14px rgba(53, 207, 255, .64);
}

.shuffle-icon::before,
.shuffle-icon::after,
.repeat-icon::before,
.repeat-icon::after {
  content: "";
  position: absolute;
  border-color: currentColor;
  filter: drop-shadow(0 0 8px rgba(103, 231, 255, .42));
}

.shuffle-icon::before,
.shuffle-icon::after {
  left: 3px;
  width: 22px;
  height: 9px;
  border-top: 3px solid currentColor;
}

.shuffle-icon::before {
  top: 8px;
  transform: skewY(24deg);
}

.shuffle-icon::after {
  top: 18px;
  transform: skewY(-24deg);
}

.shuffle-icon {
  color: currentColor;
}

.shuffle-icon span,
.repeat-icon span {
  display: none;
}

.utility-button .shuffle-icon {
  color: inherit;
}

.shuffle-icon {
  background:
    linear-gradient(45deg, transparent 70%, currentColor 70% 78%, transparent 78%) 20px 7px / 10px 10px no-repeat,
    linear-gradient(-45deg, transparent 70%, currentColor 70% 78%, transparent 78%) 20px 17px / 10px 10px no-repeat;
}

.repeat-icon::before {
  left: 3px;
  top: 7px;
  width: 22px;
  height: 16px;
  border: 3px solid currentColor;
  border-left-color: transparent;
  border-radius: 4px;
}

.repeat-icon::after {
  right: 0;
  top: 3px;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.repeat-icon {
  color: inherit;
}

.playlist-panel {
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: auto;
  margin: 0;
  padding: 28px;
  /* border: 1px solid #141c36;
  border-radius: 14px; */
  background:
    linear-gradient(180deg, rgba(1, 15, 47, .12) 0%, rgba(1, 15, 47, .55) 32%, transparent 54%),
    url("assets/images/bg_playlist_top.webp") center top / 100% auto no-repeat,
    radial-gradient(circle at 82% 0%, rgba(72, 155, 255, .18), transparent 28%),
    linear-gradient(180deg, rgb(1 15 47), rgba(3, 15, 36, .78)),
    radial-gradient(circle at 20% 0%, rgba(115, 219, 255, .18), transparent 32%);
  /* box-shadow:
    0 24px 80px rgba(0,0,0,.36),
    inset 0 0 50px rgba(54, 169, 255, .08),
    inset 0 1px 0 rgba(255,255,255,.12); */
  backdrop-filter: blur(14px);
}

.playlist-panel::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 10px;
  pointer-events: none;
 border-left: 1px solid rgba(142, 228, 255, .1);
  /* border: 1px solid rgba(142, 228, 255, .1);
  border-radius: 6px; */
}

.playlist-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: clamp(220px, 34vh, 360px);
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(1, 15, 47, .08) 18%, rgba(1, 15, 47, .28) 100%),
    url("assets/images/bg_playlist_bottom.webp") center bottom / cover no-repeat;
  opacity: .74;
  filter: saturate(1.08) drop-shadow(0 0 18px rgba(53, 171, 255, .2));
  -webkit-mask: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .18) 28%, rgba(0, 0, 0, .72) 54%, #000 100%);
  mask: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .18) 28%, rgba(0, 0, 0, .72) 54%, #000 100%);
}

.playlist-heading,
.playlist-table-head,
.playlist {
  position: relative;
  z-index: 2;
}

.playlist-heading {
  min-height: 58px;
  display: flex;
  align-items: baseline;
  overflow: hidden;
}

.playlist-heading p {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 8px;
  color: rgba(222, 232, 255, .82);
  font: 700 18px/1 "Cormorant Garamond", serif;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.playlist-heading .title-ornament {
  width: 92px;
}

.playlist-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: clamp(16px, 3vh, 28px) 0 clamp(12px, 2vh, 18px);
  color: rgba(225,235,255,.46);
  font-weight: 900;
}

.playlist-tabs span {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}

.playlist-tabs span.is-active {
  color: #69d9ff;
}

.playlist-tabs span.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 3px;
  background: linear-gradient(90deg, #327dff, #67e7ff);
  box-shadow: 0 0 14px rgba(103,231,255,.7);
}

.playlist-table-head {
  display: grid;
  grid-template-columns: 46px 58px minmax(220px, 1fr) 92px 42px;
  gap: 16px;
  padding: clamp(10px, 1.8vh, 16px) 18px clamp(8px, 1.4vh, 12px);
  color: rgba(225,235,255,.42);
  border-top: 1px solid rgba(126, 202, 255, .12);
  font: 700 13px/1 "Cormorant Garamond", serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.playlist-table-head span:first-child {
  text-align: center;
}

.playlist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.playlist button {
  display: grid;
  grid-template-columns: 46px 58px minmax(220px, 1fr) 92px 42px;
  gap: 16px;
  align-items: center;
  width: 100%;
  min-height: clamp(58px, 8.2vh, 74px);
  padding: clamp(7px, 1.2vh, 10px) 18px;
  color: var(--pearl);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: rgba(126, 202, 255, .09);
  border-radius: 0;
  cursor: pointer;
  box-shadow: none;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.playlist button:hover {
  transform: translateX(3px);
  border-color: rgba(151, 230, 255, .42);
}

.playlist button.is-active {
  /* border-color: rgba(96,211,255,.34); */
  border-radius: 8px;
  /* background:
    linear-gradient(135deg, rgba(33, 100, 164, .46), rgba(8, 34, 77, .52)),
    radial-gradient(circle at 92% 18%, rgba(104, 224, 255, .24), transparent 30%); */
 border-color: #1b387b;
    background: linear-gradient(135deg, #010d2a5c, #011e6f30), radial-gradient(circle at 92% 18%, rgba(104, 224, 255, 0.24), transparent 30%);
    box-shadow: 0 0 28px rgba(79, 208, 256, 0.12), inset 0 0 1px rgba(71, 206, 255, .08);
}

.playlist-index {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  color: #62668d;
  font: 700 24px/1 "Cormorant Garamond", serif;
}

.deep-player.is-playing .playlist button.is-active .playlist-index {
  justify-content: flex-end;
  padding-right: 2px;
}

.playlist-playing {
  position: absolute;
  left: 0;
  top: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: 18px;
  height: 18px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .18s ease;
}

.deep-player.is-playing .playlist button.is-active .playlist-playing {
  opacity: 1;
}

.playlist-playing i {
  width: 2px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #79efff, #16b9ff);
  box-shadow: 0 0 8px rgba(40, 204, 255, .78);
  animation: playlistPlayingWave .8s ease-in-out infinite;
}

.playlist-playing i:nth-child(2) {
  animation-delay: -.18s;
}

.playlist-playing i:nth-child(3) {
  animation-delay: -.34s;
}

.playlist-playing i:nth-child(4) {
  animation-delay: -.52s;
}

.playlist-thumb {
  position: relative;
  width: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
}

.playlist-thumb::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background-image: var(--thumb-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter:
    saturate(1.18)
    contrast(1.06)
    drop-shadow(0 0 7px rgba(95, 219, 255, .8));
  mix-blend-mode: screen;
}

.playlist-thumb::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #4679ff -0.2deg 3deg, #071330b5 2deg 16deg);
  mask: radial-gradient(circle, #000f2e03 0 68%, #93a2f4 69% 71%, transparent 72%);
}

.playlist-thumb[data-creature="octopus"]::before {
  inset: 0;
  background-size: 128%;
}

.playlist-thumb[data-creature="dolphin"]::before,
.playlist-thumb[data-creature="blindfish"]::before,
.playlist-thumb[data-creature="wrasse"]::before,
.playlist-thumb[data-creature="sardines"]::before {
  inset: 5px -7px;
  background-size: contain;
}

.playlist-title {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.playlist-title strong {
  font-size: 18px;
  line-height: 1.25;
}

.playlist-title small,
.playlist-creature {
  color: rgba(255,248,242,.58);
  font-size: 12px;
}

.playlist-wave {
  position: relative;
  display: block;
  height: 24px;
  width: 100%;
  overflow: hidden;
}

.playlist-wave-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.playlist-wave-svg path {
  vector-effect: non-scaling-stroke;
}

.wave-haze {
  stroke-width: 6;
  stroke-linecap: round;
  opacity: .16;
  filter: blur(3px);
}

.wave-dots {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: .1 7.2;
  opacity: .95;
}

.wave-peaks {
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wave-peaks .wave-cap {
  stroke-width: 1.1;
  opacity: .82;
}

.playlist-duration {
  color: #62668d;
  font: 700 18px/1 "Cormorant Garamond", serif;
}

.playlist-more {
  color: rgba(225,235,255,.46);
  font-size: 18px;
  letter-spacing: .1em;
}

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

@keyframes pulseRing {
  0%, 100% { transform: scale(.98); opacity: .5; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes equalize {
  0%, 100% { height: 10px; opacity: .48; }
  35% { height: 46px; opacity: 1; }
  70% { height: 22px; opacity: .72; }
}

@keyframes creatureFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.03); }
}

@keyframes bubbleRise {
  0%, 100% { transform: translateY(10px) scale(.85); opacity: .18; }
  50% { transform: translateY(-18px) scale(1); opacity: .72; }
}

@keyframes outerBubbleFloat {
  0%, 100% { transform: translate3d(0, 8px, 0) scale(.88); }
  45% { transform: translate3d(7px, -13px, 0) scale(1); }
  72% { transform: translate3d(-4px, -6px, 0) scale(.95); }
}

@keyframes playlistPlayingWave {
  0%, 100% { height: 5px; opacity: .58; }
  35% { height: 15px; opacity: 1; }
  68% { height: 9px; opacity: .78; }
}

@media (max-width: 820px) {
  .nav-links {
    display: none;
  }

  .music-page {
    padding-top: var(--nav-height);
    overflow:auto;
  }

  .music-shell {
    max-width: 640px;
    height: auto;
  }

  .deep-player {
    grid-template-columns: 1fr;
    /* grid-template-rows: minmax(0, 1fr) minmax(170px, 32vh); */
    /* gap: 12px; */
    min-height: 0;
  }

  .visualizer-panel {
    grid-column: 1;
    grid-row: 1;
    padding: clamp(50px, 4vh, 46px) 18px clamp(86px, 8vh, 82px);
  }

  .playlist-panel {
    grid-column: 1;
    grid-row: 2;
    height: 100%;
    max-height: none;
    margin: 0 auto;
    overflow: auto;
  }

  .playlist-table-head {
    grid-template-columns: 34px 44px minmax(0, 1fr) 62px 24px;
    gap: 9px;
    padding-inline: 10px;
  }

  .playlist-table-head span:nth-child(2) {
    grid-column: auto;
  }

  .playlist button {
    grid-template-columns: 34px 44px minmax(0, 1fr) 62px 24px;
    gap: 9px;
    padding-inline: 10px;
  }

  .playlist-thumb {
    width: 42px;
  }

  .playlist-duration {
    font-size: 15px;
  }

  .visualizer-panel {
    height: 100%;
    min-height: 0;
  }

  .orbital-meter {
    width: min(76vw, 330px, 42vh);
  }

  .time-readout {
    top: 32%;
  }

  .round-control {
    width: 50px;
    height: 50px;
  }

  .play-control {
    width: 66px;
    height: 66px;
  }

  .utility-controls {
    gap: 14px;
  }

  .mode-controls {
    gap: 14px;
  }

  .volume-slider {
    min-width: 90px;
  }

  .playlist {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 821px) and (max-width: 1080px) {
  .music-page {
    padding-inline: 20px;
  }

  .deep-player {
    grid-template-columns: minmax(360px, 430px) minmax(430px, 1fr);
    /* gap: 22px; */
  }

  .playlist-panel {
    margin-top: 0;
    padding: 22px;
  }

  .playlist button {
    grid-template-columns: 34px 44px minmax(0, 1fr) 66px 24px;
    gap: 10px;
  }

  .playlist-table-head {
    grid-template-columns: 34px 44px minmax(0, 1fr) 66px 24px;
    gap: 10px;
  }

  .playlist-thumb {
    width: 42px;
  }
}