*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --text:#e9f1ea;
  --text-soft:#a6b8aa;
  --glass:rgba(18,29,23,.52);
  --glass-strong:rgba(20,32,26,.72);
  --glass-line:rgba(160,200,170,.20);
  --blur:blur(16px) saturate(130%);
  --accent:#a98be6;
  --accent-2:#7c6bd0;
  --font-body:'Inter','Apple Color Emoji','Segoe UI Emoji',sans-serif;
  --font-head:'Unbounded','Apple Color Emoji','Segoe UI Emoji',sans-serif;
  --shadow-sm:0 2px 14px rgba(0,0,0,.38);
  --shadow-md:0 12px 32px rgba(0,0,0,.50);
  --shadow-lg:0 28px 72px rgba(0,0,0,.60);
  --ease:cubic-bezier(.22,1,.36,1);
}

html,body{
  width:100%;height:100%;
  overflow-x:hidden;overflow-y:auto;
  font-family:var(--font-body);color:var(--text);
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
}

img.emoji{
  height:1em;width:1em;
  display:inline-block;
  vertical-align:-0.14em;
  margin:0 .03em;
  object-fit:contain;
  -webkit-user-drag:none;user-select:none;
}

body{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:#0c130f;}
img,svg,video{-webkit-user-drag:none;user-select:none;}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
  background:rgba(140,120,200,.4);
  border-radius:999px;border:2px solid transparent;background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(140,120,200,.65);background-clip:padding-box;}

#bg{
  position:fixed;inset:0;z-index:0;
  background-image:url('../../assets/backs/one.png');
  background-position:center;background-size:cover;background-repeat:no-repeat;
  transform:scale(1.06);
  transition:transform .25s ease-out;
  will-change:transform;
}
#bg-alt{
  position:fixed;inset:0;z-index:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  transform:scale(1.06);
  opacity:0;pointer-events:none;
  transition:opacity 1.2s ease-in-out;
  will-change:opacity;
}
#bg-alt.show{opacity:1;}

#bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(18,32,24,.30), transparent 55%),
    radial-gradient(120% 130% at 50% 120%, rgba(0,0,0,.62), transparent 62%),
    linear-gradient(180deg, rgba(8,16,12,.55), rgba(4,9,7,.80));
}

#bg::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(120,100,210,.18), transparent 70%),
    radial-gradient(45% 45% at 80% 25%, rgba(90,150,110,.16), transparent 70%),
    radial-gradient(50% 50% at 60% 80%, rgba(150,120,225,.14), transparent 70%);
  filter:blur(34px);
  animation:aurora 22s ease-in-out infinite alternate;
  will-change:transform,opacity;
}
@keyframes aurora{
  0%  {transform:translate3d(-3%,-2%,0) scale(1);opacity:.7;}
  50% {transform:translate3d(3%,2%,0) scale(1.08);opacity:.95;}
  100%{transform:translate3d(-2%,3%,0) scale(1.04);opacity:.8;}
}

#cursor-glow{
  position:fixed;top:0;left:0;width:320px;height:320px;z-index:1;
  pointer-events:none;border-radius:50%;opacity:0;
  background:radial-gradient(circle, rgba(170,140,255,.34), rgba(120,185,140,.14) 45%, transparent 70%);
  mix-blend-mode:screen;filter:blur(8px);
  transition:opacity .4s ease;will-change:transform;
}

.blossom{position:fixed;z-index:1;pointer-events:none;opacity:.78;filter:drop-shadow(0 6px 16px rgba(0,0,0,.4));}
.blossom-tl{top:-10px;left:-10px;width:420px;transform-origin:top left;}
.blossom-br{bottom:-10px;right:-10px;width:380px;transform-origin:bottom right;transform:rotate(180deg);animation:sway 9s ease-in-out infinite alternate;}
@keyframes sway{from{transform:rotate(180deg) translateY(0)}to{transform:rotate(180deg) translateY(8px)}}

.petal{position:fixed;z-index:2;pointer-events:none;opacity:0;animation:fall linear infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
@keyframes fall{
  0%  {transform:translateY(-20px) rotate(0deg) translateX(0);opacity:0;}
  10% {opacity:.7;}90%{opacity:.4;}
  100%{transform:translateY(100vh) rotate(720deg) translateX(60px);opacity:0;}
}

#weather{
  position:fixed;top:18px;left:18px;z-index:10;
  display:flex;align-items:center;gap:10px;
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);border-radius:16px;
  padding:8px 14px;opacity:0;animation:fadeIn .6s .3s forwards;
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease),box-shadow .25s;
}
#weather:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
#weather .w-icon{font-size:20px;line-height:1;}
#weather .w-temp{font-size:15px;font-weight:500;}
#weather .w-desc{font-size:11px;color:var(--text-soft);}

#socials{
  position:fixed;top:18px;right:18px;z-index:10;
  display:flex;gap:10px;opacity:0;animation:fadeIn .6s .4s forwards;
}
.icon-btn{
  width:38px;height:38px;border-radius:50%;
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;text-decoration:none;color:var(--text);
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .25s;
}
.icon-btn:hover{transform:translateY(-3px) scale(1.1);background:var(--glass-strong);box-shadow:var(--shadow-md);color:var(--accent);}
.icon-btn svg{width:18px;height:18px;}

#card{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:10;text-align:center;
  opacity:0;animation:riseIn .9s .1s var(--ease) forwards;
  transform-style:preserve-3d;
}
#card.tilt-ready{transition:transform .2s ease-out;}

.avatar-shell{position:relative;width:152px;height:152px;margin:0 auto 18px;}

.avatar-wrap{
  width:152px;height:152px;margin:0;
  border-radius:50%;overflow:hidden;position:relative;
  box-shadow:0 12px 38px rgba(0,0,0,.55);
  border:2px solid rgba(170,205,180,.30);
}
.avatar-wrap::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 26px rgba(0,0,0,.35);pointer-events:none;
}
.avatar-wrap img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
  transition:transform .5s var(--ease),opacity .9s ease;
}
.avatar-alt{opacity:0;}
.avatar-wrap.flip .avatar-img{opacity:0;}
.avatar-wrap.flip .avatar-alt{opacity:1;}
.avatar-wrap:hover img{transform:scale(1.07);}

.avatar-status{
  position:absolute;right:9px;bottom:9px;z-index:4;
  width:30px;height:30px;border-radius:50%;
  background:#3ba55d;
  border:5px solid #0d140f;
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 12px rgba(59,165,93,.7);
  display:none;
}
.avatar-status.online{display:block;animation:statusPulse 2.6s ease-in-out infinite;}
@keyframes statusPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 9px rgba(59,165,93,.55);}
  50%    {box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 20px rgba(59,165,93,.95);}
}

#card h1{
  font-family:var(--font-head);font-weight:600;
  font-size:2.9rem;letter-spacing:.04em;
  background:linear-gradient(100deg,#e7ddf6,#bda2ec 55%,#9d86e4);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 3px 16px rgba(0,0,0,.55));
  margin-bottom:24px;
}

.btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.btn{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:999px;
  border:1px solid var(--glass-line);
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  font-family:var(--font-body);font-size:13px;font-weight:500;
  color:var(--text);cursor:pointer;text-decoration:none;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .25s;
  box-shadow:var(--shadow-sm);
}
.btn::before{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease);
}
.btn:hover::before{left:140%;}
.btn:hover{transform:translateY(-3px);background:var(--glass-strong);box-shadow:var(--shadow-md);color:var(--accent);}
.btn:active{transform:translateY(-1px) scale(.98);}
.btn svg{width:16px;height:16px;flex-shrink:0;position:relative;}

.btn-support{
  border-color:rgba(220,165,115,.4);
  background:linear-gradient(135deg,rgba(150,110,70,.34),rgba(125,90,135,.34));
}
.btn-support:hover{background:linear-gradient(135deg,rgba(180,135,85,.55),rgba(150,110,160,.5));color:#f3cda0;}

#player{
  margin:16px auto 0;
  display:flex;align-items:center;gap:10px;
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);border-radius:999px;
  padding:8px 14px 8px 8px;
  width:fit-content;min-width:240px;max-width:340px;
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s;
}
#player:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}

#p-art{
  width:36px;height:36px;border-radius:9px;
  object-fit:cover;flex-shrink:0;
  background:rgba(60,80,68,.4);
  display:block;box-shadow:0 2px 8px rgba(0,0,0,.4);
}
#p-art.is-hidden{display:none;}
#p-art.loaded ~ #p-note{display:none;}

#p-note{
  width:36px;height:36px;border-radius:9px;
  background:rgba(60,80,68,.4);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:16px;
}

.p-info{display:flex;flex-direction:column;min-width:0;flex:1;}
.p-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p-artist{font-size:11px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

#p-btn{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:none;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(124,107,208,.45);
  transition:background .2s,transform .15s,box-shadow .2s;
}
#p-btn:hover{transform:scale(1.1);box-shadow:0 4px 16px rgba(124,107,208,.6);}
#p-btn:active{transform:scale(.94);}
#p-btn svg{width:13px;height:13px;fill:#fff;}

#p-prog-wrap{
  position:absolute;bottom:0;left:0;right:0;height:3px;
  background:rgba(255,255,255,.08);cursor:pointer;
}
#p-prog-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0%;transition:width .5s linear;border-radius:0 0 999px 999px;box-shadow:0 0 8px rgba(150,120,225,.6);}

.eq{display:flex;align-items:flex-end;gap:2px;height:14px;flex-shrink:0;}
.eq span{width:3px;background:linear-gradient(180deg,var(--accent-2),var(--accent));border-radius:2px;animation:eqb .8s ease-in-out infinite alternate;}
.eq span:nth-child(1){height:6px; animation-delay:0s;}
.eq span:nth-child(2){height:10px;animation-delay:.15s;}
.eq span:nth-child(3){height:7px; animation-delay:.3s;}
.eq span:nth-child(4){height:12px;animation-delay:.1s;}
@keyframes eqb{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.eq.paused span{animation-play-state:paused;transform:scaleY(.4);}

#footer-wrap {
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  z-index:10;display:flex;flex-direction:column;align-items:center;gap:6px;
  pointer-events:none;
}

.global-footer {
  text-align: center;
  padding: 20px;
  position: relative;
  z-index: 2;
}

#site-copy{
  font-size:11px;letter-spacing:.04em;color:var(--text-soft);
  text-shadow:0 1px 6px rgba(0,0,0,.7);
  user-select:none;
  opacity:0;
  animation:fadeInMuted .8s .5s forwards;
  margin:0;
  display: inline-block;
}

#scroll-down-indicator {
  color: var(--text);
  opacity: 0;
  animation: fadeInMuted .8s .6s forwards, bounce 2s infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scroll-down-indicator svg {
  width: 32px;
  height: 32px;
  stroke-width: 2.5px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-6px);}
  60% {transform: translateY(-3px);}
}

@keyframes fadeInMuted{from{opacity:0}to{opacity:.7}}

#sup-modal{
  display:none;position:fixed;inset:0;z-index:100;
  background:rgba(4,9,7,.55);backdrop-filter:blur(7px);
  align-items:center;justify-content:center;
}
#sup-modal.open{display:flex;}
.sup-box{
  background:var(--glass-strong);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid var(--glass-line);border-radius:24px;
  width:min(360px,90vw);
  box-shadow:var(--shadow-lg);
  animation:popIn .35s var(--ease);
  overflow:hidden;
}
.sup-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 12px;
  font-family:var(--font-head);font-size:1.25rem;font-weight:500;
  border-bottom:1px solid var(--glass-line);
}
.sup-close{background:none;border:none;cursor:pointer;font-size:18px;opacity:.55;transition:opacity .2s,transform .2s;color:var(--text);}
.sup-close:hover{opacity:1;transform:rotate(90deg);}
.sup-body{padding:18px;}
.sup-body p{font-size:13px;color:var(--text-soft);margin-bottom:16px;line-height:1.6;}
.sup-links{display:flex;flex-direction:column;gap:10px;}
.sup-link{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:14px;
  background:rgba(40,54,44,.5);
  border:1px solid var(--glass-line);
  text-decoration:none;color:var(--text);
  font-size:13px;font-weight:400;
  transition:background .2s,transform .2s var(--ease),box-shadow .2s;
}
.sup-link:hover{background:rgba(52,68,56,.72);transform:translateX(4px);box-shadow:var(--shadow-sm);}
.sup-link-icon{
  width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;flex-shrink:0;
}
.sup-link-info{display:flex;flex-direction:column;}
.sup-link-name{font-weight:600;}
.sup-link-desc{font-size:11px;color:var(--text-soft);}

#map-modal{
  display:none;position:fixed;inset:0;z-index:100;
  background:rgba(4,9,7,.55);backdrop-filter:blur(7px);
  align-items:center;justify-content:center;
}
#map-modal.open{display:flex;}
.map-box{
  background:var(--glass-strong);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--glass-line);border-radius:22px;overflow:hidden;
  width:min(520px,90vw);box-shadow:var(--shadow-lg);
  animation:popIn .35s var(--ease);
}
@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.map-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  font-family:var(--font-head);font-size:1.2rem;font-weight:500;
  border-bottom:1px solid var(--glass-line);
}
.map-close{background:none;border:none;cursor:pointer;font-size:18px;opacity:.55;transition:opacity .2s,transform .2s;color:var(--text);}
.map-close:hover{opacity:1;transform:rotate(90deg);}
.map-body{padding:14px 18px 18px;text-align:center;}
.map-body p{font-size:13px;color:var(--text-soft);margin-bottom:14px;}
.map-body iframe{width:100%;height:280px;border:none;border-radius:14px;box-shadow:var(--shadow-sm);filter:saturate(.85) brightness(.92);}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{
  from{opacity:0;transform:translate(-50%,calc(-50% + 24px));}
  to{opacity:1;transform:translate(-50%,-50%);}
}

.screen {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#home-screen {z-index: 2;}

#sets-screen {z-index: 2;padding: 60px 20px;}

.sets-container {
  width: 100%;
  max-width: 900px;
  background: rgba(16,26,20,.5);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  border: 1px solid var(--glass-line);
  border-radius: 28px;
  padding: 44px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 30px;
  opacity: 0;
  animation: fadeIn .8s .3s forwards;
  color: var(--text);
}

.sets-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 2.4rem;
  text-align: center;
  background:linear-gradient(100deg,#e7ddf6,#bda2ec 55%,#9d86e4);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  margin-bottom: 6px;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.5));
}

.sets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.set-card {
  background: rgba(28,42,34,.5);
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s, background .35s;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.set-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  background: rgba(36,52,42,.66);
}

.set-video-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
  overflow:hidden;
}

.set-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.set-audio-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #2c2546 0%, #1b2d24 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.set-audio-cover {
  font-size: 3.2rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.45));
}

.set-audio-wrap audio {
  width: 86%;
  height: 38px;
}

.set-info {
  padding: 16px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing:.02em;
}

.sets-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

#sets-page-info {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-soft);
}

.sets-pagination .btn {padding: 8px 16px;}

.sets-pagination .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.sets-pagination .btn:disabled::before{display:none;}

.sets-empty{
  grid-column:1 / -1;
  text-align:center;
  padding:40px 20px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.sets-empty-icon{font-size:42px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));}
.sets-empty-title{
  font-family:var(--font-head);font-size:1.55rem;font-weight:500;color:var(--text);
}
.sets-empty-sub{font-size:.9rem;color:var(--text-soft);max-width:340px;line-height:1.5;}

#spotify-widget{
  position:fixed;left:18px;bottom:18px;z-index:11;
  display:flex;align-items:center;gap:12px;
  width:min(300px,calc(100vw - 36px));
  padding:10px 14px 10px 10px;
  text-decoration:none;color:var(--text);
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);border-radius:16px;
  box-shadow:var(--shadow-md);
  overflow:hidden;
  transform:translateY(160%);opacity:0;pointer-events:none;
  transition:transform .55s var(--ease),opacity .4s ease,box-shadow .25s;
}
#spotify-widget.active{transform:translateY(0);opacity:1;pointer-events:auto;}
#spotify-widget.active:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}

.sp-art{position:relative;width:46px;height:46px;flex-shrink:0;}
.sp-art img{
  width:46px;height:46px;border-radius:10px;object-fit:cover;display:block;
  background:rgba(60,80,68,.4);box-shadow:0 3px 10px rgba(0,0,0,.5);
  position:relative;z-index:2;
}
.sp-disc{
  position:absolute;top:50%;right:-8px;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;z-index:1;
  background:repeating-radial-gradient(circle at center,#222 0 2px,#333 2px 4px);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  animation:spinDisc 3.5s linear infinite;
}
.sp-disc::after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background:#1DB954;transform:translate(-50%,-50%);}
@keyframes spinDisc{to{transform:translateY(-50%) rotate(360deg);}}

.sp-info{display:flex;flex-direction:column;min-width:0;flex:1;}
.sp-label{
  display:flex;align-items:center;gap:5px;
  font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:#1ed760;font-weight:600;margin-bottom:1px;
}
.sp-label svg{width:13px;height:13px;flex-shrink:0;}
.sp-song{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-artist{font-size:11px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.sp-eq{display:flex;align-items:flex-end;gap:2px;height:16px;flex-shrink:0;}
.sp-eq span{width:3px;background:#1ed760;border-radius:2px;animation:eqb .8s ease-in-out infinite alternate;}
.sp-eq span:nth-child(1){height:7px;animation-delay:0s;}
.sp-eq span:nth-child(2){height:12px;animation-delay:.18s;}
.sp-eq span:nth-child(3){height:8px;animation-delay:.34s;}
.sp-eq span:nth-child(4){height:14px;animation-delay:.1s;}

.sp-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.1);}
.sp-prog-bar{height:100%;width:0%;background:#1ed760;box-shadow:0 0 8px rgba(30,215,96,.6);transition:width .25s linear;}

@media (max-width: 600px){
  #spotify-widget{left:12px;right:12px;bottom:12px;width:auto;}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  #bg::before{animation:none;}
}

@media (max-width: 600px){
  #card h1{font-size:2.4rem;}
  .sets-container{padding:28px 18px;}
  .sets-title{font-size:1.9rem;}
  #cursor-glow{display:none;}
}