body.page-hidden{
  overflow:hidden;
}

.site-loader{
  position:fixed;
  inset:0;
  z-index:30;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 20% 18%, rgba(53,17,31,.28) 0, transparent 32%),
    radial-gradient(circle at 82% 16%, rgba(36,11,54,.22) 0, transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.02), transparent 35%),
    linear-gradient(180deg, #05070c 0%, #020306 100%);
  opacity:1;
  visibility:visible;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), visibility .9s cubic-bezier(.22,.61,.36,1);
}

.site-loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.site-loader__core{
  width:min(320px, calc(100vw - 48px));
  display:grid;
  justify-items:center;
  gap:18px;
  padding:28px 24px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)), rgba(7,9,16,.58);
  box-shadow:0 26px 60px rgba(0,0,0,.34);
  backdrop-filter:blur(18px) saturate(125%);
}

.site-loader__mark{
  position:relative;
  width:96px;
  height:96px;
  display:grid;
  place-items:center;
  border-radius:28px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.32);
  overflow:hidden;
}
.site-loader__mark::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:34px;
  background:radial-gradient(circle, rgba(214,58,85,.18), transparent 62%);
  filter:blur(18px);
  opacity:.9;
  animation:loaderHalo 3s ease-in-out infinite;
}
.site-loader__mark::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(145deg, rgba(255,255,255,.1), transparent 48%, rgba(255,255,255,.04));
  pointer-events:none;
}

.site-loader__logo{
  position:relative;
  z-index:1;
  width:68px;
  height:68px;
  object-fit:cover;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  filter:drop-shadow(0 12px 24px rgba(214,58,85,.12));
  opacity:.98;
  animation:loaderLogo 2.8s cubic-bezier(.22,.61,.36,1) infinite;
}

.site-loader__text{
  font-size:.84rem;
  letter-spacing:0;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  font-weight:700;
  padding-left:.34em;
}

.site-loader__line{
  width:100%;
  height:4px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.07);
}
.site-loader__line i{
  display:block;
  width:42%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(255,255,255,.22), var(--accent), rgba(255,255,255,.22));
  animation:loaderSweep 1.4s cubic-bezier(.22,.61,.36,1) infinite;
}

.reveal{
  opacity:0;
  transform:translate3d(0,24px,0) scale(.985);
  filter:blur(10px);
}

body.is-ready .reveal{
  animation:panelReveal .88s cubic-bezier(.19,1,.22,1) forwards;
}
body.is-ready .reveal--1{animation-delay:.06s}
body.is-ready .reveal--2{animation-delay:.16s}
body.is-ready .reveal--3{animation-delay:.26s}

body.is-transitioning .reveal{
  opacity:0;
  transform:translate3d(0,18px,0) scale(.99);
  filter:blur(8px);
  transition:opacity .52s ease, transform .82s cubic-bezier(.22,.61,.36,1), filter .82s ease;
}
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg-dark:#050509;
  --bg-soft:#0d0f18;
  --accent:#d63a55;
  --accent-soft:#ef7488;
  --accent-glow:rgba(214,58,85,.18);
  --violet:rgba(114,78,255,.14);
  --border-soft:rgba(255,255,255,.09);
  --card-bg:rgba(10,12,20,.72);
  --card-strong:rgba(255,255,255,.06);
  --text-main:#f7f7f8;
  --text-muted:rgba(255,255,255,.68);
  --shadow:0 20px 56px rgba(0,0,0,.34);
}

html{scroll-behavior:smooth}

body{
  font-family:"Montserrat",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  min-height:100vh;
  color:var(--text-main);
  background:
    radial-gradient(circle at 0% 0%, rgba(53,17,31,.52) 0, transparent 42%),
    radial-gradient(circle at 100% 0%, rgba(36,11,54,.42) 0, transparent 36%),
    radial-gradient(circle at 50% 100%, #080a11 0, #000 72%);
  background-color:var(--bg-dark);
  position:relative;
  overflow-x:hidden;
  padding:24px 16px 146px;
}

body::before,
body::after,
.nebula,
 .particle-field{position:fixed;inset:0;pointer-events:none}

body::before{
  content:"";
  background:
    radial-gradient(circle at 20% 18%, rgba(255,43,79,.12), transparent 22%),
    radial-gradient(circle at 80% 16%, rgba(129,88,255,.1), transparent 24%),
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.04), transparent 32%);
  filter:blur(16px); opacity:.72;
}

body::after{
  content:"";
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  opacity:.36;
  animation:noiseMove 7s linear infinite;
}

.nebula{
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.04), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(255,43,79,.1), transparent 34%);
  filter:blur(24px);
}

 .particle-field{overflow:hidden;z-index:0}
.particle{
  position:absolute;
  width:3px;height:1px;border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 10px rgba(255,255,255,.5),0 0 24px rgba(255,255,255,.16);
  opacity:.55;
  animation:particleFloat 24s cubic-bezier(.22,.61,.36,1) infinite;
}
.particle::after{
  content:"";
  position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.26), transparent 68%);
}
.p1{top:10%;left:8%;animation-duration:15s;animation-delay:-2s}
.p2{top:18%;left:20%;animation-duration:18s;animation-delay:-8s}
.p3{top:12%;left:34%;animation-duration:21s;animation-delay:-3s}
.p4{top:28%;left:47%;animation-duration:17s;animation-delay:-9s}
.p5{top:20%;left:61%;animation-duration:19s;animation-delay:-6s}
.p6{top:14%;left:78%;animation-duration:16s;animation-delay:-11s}
.p7{top:8%;left:90%;animation-duration:22s;animation-delay:-4s}
.p8{top:40%;left:10%;animation-duration:20s;animation-delay:-10s}
.p9{top:48%;left:26%;animation-duration:18s;animation-delay:-13s}
.p10{top:44%;left:39%;animation-duration:23s;animation-delay:-5s}
.p11{top:52%;left:56%;animation-duration:15s;animation-delay:-1s}
.p12{top:46%;left:72%;animation-duration:19s;animation-delay:-7s}
.p13{top:58%;left:86%;animation-duration:21s;animation-delay:-12s}
.p14{top:72%;left:14%;animation-duration:17s;animation-delay:-14s}
.p15{top:78%;left:32%;animation-duration:18s;animation-delay:-9s}
.p16{top:74%;left:52%;animation-duration:20s;animation-delay:-15s}
.p17{top:82%;left:69%;animation-duration:24s;animation-delay:-6s}
.p18{top:76%;left:88%;animation-duration:16s;animation-delay:-2s}

.lang-switch-wrap{
  position:fixed;
  top:20px;left:20px;
  z-index:6;
}

.lang-switch{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)), rgba(7,9,16,.7);
  color:var(--text-main);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 16px 40px rgba(0,0,0,.28);
  cursor:pointer;
}

.lang-label{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:0;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}

.lang-track{
  position:relative;
  width:58px;height:28px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.lang-thumb{
  position:absolute;
  top:3px;left:3px;
  width:20px;height:20px;
  border-radius:50%;
  background:linear-gradient(145deg, var(--accent-soft), var(--accent));
  box-shadow:0 8px 18px rgba(255,43,79,.34);
  transition:transform .24s ease;
}

body.lang-ru .lang-thumb{transform:translateX(30px)}
body.lang-en .lang-label--left,
body.lang-ru .lang-label--right{color:#fff}

.hero{
  min-height:calc(100vh - 220px);
  display:grid;
  place-items:center;
  position:relative;
  z-index:1;
}


.hero-layout{
  width:min(1360px, calc(100% - 32px));
  display:grid;
  grid-template-columns:minmax(210px, 248px) minmax(0, 740px) minmax(210px, 248px);
  align-items:center;
  justify-content:center;
  gap:24px;
}
.hero-side{
  display:grid;
  gap:14px;
  align-self:center;
  min-width:0;
}
.contact-group__head{
  display:grid;
  gap:5px;
  padding:0 4px 2px;
}
.contact-group__kicker{
  color:rgba(255,255,255,.48);
  text-transform:uppercase;
  letter-spacing:0;
  font-size:.64rem;
  font-weight:700;
}
.contact-group__head h2{
  color:#fff;
  font-size:1.08rem;
  line-height:1.1;
  font-weight:800;
  letter-spacing:0;
}
.contact-group__links{
  display:grid;
  gap:12px;
}
.contact-btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:16px 18px;
  border-radius:22px;
  text-decoration:none;
  color:var(--text-main);
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)), rgba(255,255,255,.02);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  transition:transform .55s cubic-bezier(.22,.61,.36,1), border-color .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s cubic-bezier(.22,.61,.36,1), background .55s cubic-bezier(.22,.61,.36,1), filter .55s cubic-bezier(.22,.61,.36,1);
}
.contact-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(140deg, rgba(255,255,255,.12), transparent 40%, rgba(255,255,255,.02) 70%);
  opacity:.6;
  pointer-events:none;
}
.contact-btn:hover{
  transform:translateY(-5px) scale(1.01);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 18px 36px rgba(0,0,0,.26);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)), rgba(255,255,255,.03);
  filter:saturate(1.08);
}
.contact-btn:active{transform:translateY(-1px) scale(.99)}
.contact-btn__shine{
  position:absolute;
  inset:-35% auto auto -15%;
  width:80%;
  height:80%;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 62%);
  opacity:.8;
  pointer-events:none;
  z-index:0;
}
.contact-btn__icon,
.contact-btn__label,
.contact-btn__meta{position:relative;z-index:1}
.contact-btn__icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 24px rgba(0,0,0,.22);
}
.contact-btn__icon svg{width:24px;height:24px}
.contact-btn__label{
  font-size:1rem;
  font-weight:800;
  letter-spacing:0;
}
.contact-btn__meta{
  color:rgba(255,255,255,.66);
  font-size:.8rem;
  line-height:1.5;
  word-break:break-word;
}
.contact-btn--hero{
  min-height:142px;
  justify-content:center;
  text-align:left;
  padding:19px 18px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.014)),
    rgba(7,9,16,.78);
  box-shadow:0 22px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.contact-btn--telegram{box-shadow:0 22px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(95,199,255,.08)}
.contact-btn--telegram .contact-btn__icon{background:linear-gradient(180deg, rgba(99,200,255,.35), rgba(59,145,255,.14));}
.contact-btn--discord .contact-btn__icon{background:linear-gradient(180deg, rgba(132,140,255,.42), rgba(88,101,242,.16));}
.contact-btn--discord{cursor:pointer;}
.contact-btn--steam .contact-btn__icon{background:linear-gradient(180deg, rgba(137,205,255,.24), rgba(64,120,172,.12));}
.contact-btn--youtube .contact-btn__icon{background:linear-gradient(180deg, rgba(255,113,113,.32), rgba(255,0,0,.12));}
.contact-btn--channel .contact-btn__icon{background:linear-gradient(180deg, rgba(86,210,255,.28), rgba(26,145,255,.13));}
.contact-btn--hero .contact-btn__label{
  font-size:1rem;
}
.contact-btn--hero .contact-btn__meta{
  font-size:.82rem;
}
.profile-card{
  width:min(780px,100%);
  position:relative;
  overflow:hidden;
  border:1px solid var(--border-soft);
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(7,9,16,.72);
  backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 20px 46px rgba(0,0,0,.32);
  border-radius:24px;
  padding:24px 24px;
}

.profile-card__glow{
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.14), transparent 26%),
    radial-gradient(circle at bottom right, rgba(255,43,79,.16), transparent 28%);
  opacity:.9;
}

.profile-topline{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.84);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:0;
  text-transform:uppercase;
  margin-bottom:20px;
}

.status-dot{
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg, #ffadb9, var(--accent));
  box-shadow:0 0 14px rgba(255,43,79,.85);
  animation:dotPulse 1.8s ease-in-out infinite;
}

.profile-main{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:188px minmax(0,1fr);
  gap:24px;
  align-items:center;
}

.avatar-wrap{
  position:relative;
  width:100%;
  max-width:188px;
  margin:0 auto;
  padding:10px;
  border-radius:14px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)),
    rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.24);
}

.avatar-wrap::before{
  content:"";
  position:absolute;
  inset:-14px;
  z-index:-1;
  background:radial-gradient(circle, var(--accent-glow), transparent 62%);
  filter:blur(20px); opacity:.5;
}

.avatar{
  width:100%;
  aspect-ratio:1/1;
  display:block;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
}

.eyebrow{
  color:rgba(255,255,255,.52);
  text-transform:uppercase;
  letter-spacing:0;
  font-size:.72rem;
  margin-bottom:14px;
}

.profile-copy{
  display:grid;
  align-content:center;
}

.profile-copy h1{
  font-size:clamp(2rem, 5.5vw, 3.4rem);
  line-height:.95;
  letter-spacing:0;
  font-weight:800;
  margin-bottom:12px;
  text-shadow:0 10px 28px rgba(0,0,0,.32);
}

.profile-copy h1::after{
  content:"";
  display:block;
  width:72px;
  height:1px;
  margin-top:12px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), #ffb0bf, transparent);
  box-shadow:0 0 22px rgba(255,43,79,.45);
}

.description{
  max-width:470px;
  color:var(--text-muted);
  font-size:.92rem;
  line-height:1.68;
  margin-bottom:20px;
}

.tags{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  align-items:stretch;
}

.tag-item{
  min-height:82px;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
    rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 10px 20px rgba(0,0,0,.12);
}

.tag-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(255,43,79,.2), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  box-shadow:0 10px 18px rgba(214,58,85,.12);
}

.tag-icon--lang{background:linear-gradient(145deg, rgba(114,78,255,.24), rgba(255,255,255,.06));box-shadow:0 12px 22px rgba(114,78,255,.16)}
.tag-icon svg{width:30px;height:30px}
.tag-copy strong{
  display:block;
  font-size:.84rem;
  font-weight:700;
  margin-bottom:0;
}
.tag-copy span{
  display:block;
  color:rgba(255,255,255,.68);
  font-size:.8rem;
  line-height:1.48;
}

.floating{animation:float 18s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes float{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-2px,0)}100%{transform:translate3d(0,0,0)}}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.18);opacity:.56}}
@keyframes noiseMove{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(8px,-6px,0)}}
@keyframes particleFloat{0%{transform:translate3d(0,0,0) scale(.94);opacity:.12}30%{opacity:.34}50%{transform:translate3d(14px,-18px,0) scale(1.02);opacity:.42}100%{transform:translate3d(-8px,-40px,0) scale(.98);opacity:.08}}
@keyframes eqBounce{0%,100%{height:6px}50%{height:14px}}

.player{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:4;
  padding:0 14px 14px;
}

.player-inner{max-width:900px;margin:0 auto}

.player-shell{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)),
    rgba(7,9,16,.78);
  backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 14px 36px rgba(0,0,0,.34);
  transition:border-color .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1), background .45s cubic-bezier(.22,.61,.36,1);
}

.player-cover{
  position:relative;
  border-radius:18px;
}
.player-cover::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:22px;
  background:radial-gradient(circle, rgba(214,58,85,.12), transparent 66%);
  opacity:0;
  transform:scale(.92);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.player-cover img{
  width:64px;height:64px;display:block;object-fit:cover;border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
  transition:transform .75s cubic-bezier(.22,.61,.36,1), filter .75s cubic-bezier(.22,.61,.36,1), box-shadow .75s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.player-info{min-width:0}
.track-title{
  font-size:.96rem;font-weight:700;letter-spacing:0;margin-bottom:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.track-artist span{
  color:rgba(255,255,255,.64);font-size:.84rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
}

.player-controls{
  display:flex;align-items:center;gap:10px;
}

.icon-btn,.play-btn,.close-btn{
  border:none;cursor:pointer;color:var(--text-main);
  transition:transform .62s cubic-bezier(.22,.61,.36,1), background .62s cubic-bezier(.22,.61,.36,1), border-color .62s cubic-bezier(.22,.61,.36,1), opacity .62s cubic-bezier(.22,.61,.36,1), box-shadow .62s cubic-bezier(.22,.61,.36,1);
}

.icon-btn,.close-btn{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}

.play-btn{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(145deg, var(--accent-soft), var(--accent));
  box-shadow:0 10px 22px rgba(214,58,85,.22);
}

.icon-btn:hover,.play-btn:hover,.close-btn:hover{transform:translateY(-1px) scale(1.02)}
.icon-btn:active,.play-btn:active,.close-btn:active{transform:translateY(0) scale(.97)}
.icon-btn svg,.close-btn svg{width:22px;height:22px}
.play-btn svg{width:24px;height:24px;transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease}
.play-btn:hover svg{transform:scale(1.06)}
.icon-pause{display:none}
.is-playing .icon-play{display:none}
.is-playing .icon-pause{display:block}

.progress-block{
  display:flex;align-items:center;gap:12px;margin-left:8px;
}

.progress{
  width:200px;height:6px;border-radius:999px;cursor:pointer;overflow:hidden;
  background:rgba(255,255,255,.08);position:relative;
  transition:box-shadow .35s ease, transform .35s ease;
}
.progress:hover{box-shadow:0 0 0 5px rgba(255,255,255,.03)}
.progress-fill{
  position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg, var(--accent), #ffb6c1);
  border-radius:inherit;
  transition:transform .18s linear;
}
.progress-fill::after{
  content:"";
  position:absolute;
  top:0;right:0;
  width:18px;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.8));
  opacity:.8;
}

.eq{display:flex;align-items:flex-end;gap:3px;height:18px;opacity:.24;transition:opacity .35s ease, transform .35s ease}
.eq-bar{
  width:3px;border-radius:999px;background:rgba(255,255,255,.82);height:6px;
}
.is-playing .eq-bar{animation:eqBounce 1.1s ease-in-out infinite}
.is-playing .eq-bar:nth-child(2){animation-delay:.12s}
.is-playing .eq-bar:nth-child(3){animation-delay:.24s}
.is-playing .eq-bar:nth-child(4){animation-delay:.36s}
.is-playing .eq{opacity:1}

.playlist-overlay{
  position:fixed;inset:0;z-index:9;pointer-events:none;
}
.playlist-overlay::before{display:none}
.playlist-overlay.open{pointer-events:none}

.playlist-panel{
  position:fixed;
  left:50%;
  bottom:102px;
  transform:translate(-50%, 10px) scale(.985);
  transform-origin:bottom center;
  width:min(420px, calc(100vw - 28px));max-height:min(42vh,360px);overflow:auto;
  padding:14px;border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.03), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)),
    rgba(7,9,16,.96);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  opacity:0;
  pointer-events:none;
  transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s cubic-bezier(.22,.61,.36,1);
}
.playlist-overlay.open .playlist-panel{
  transform:translate(-50%, 0) scale(1);
  opacity:1;
  pointer-events:auto;
  box-shadow:0 18px 36px rgba(0,0,0,.34);
}
#playlistBtn.is-active{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)), rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}

.playlist-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;
}
.playlist-kicker{
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
  letter-spacing:0;
  font-size:.64rem;
  margin-bottom:6px;
}
.playlist-title{font-size:.96rem;font-weight:600;color:#fff}
.playlist-title b{font-weight:800;color:#fff}
.playlist-list{display:grid;gap:8px}

.track-item{
  display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:8px;border-radius:14px;border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)), rgba(255,255,255,.02);cursor:pointer;
  transition:transform .32s cubic-bezier(.22,.61,.36,1),border-color .32s cubic-bezier(.22,.61,.36,1),background .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s cubic-bezier(.22,.61,.36,1);
  color:#fff;
}
.track-item:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.08);box-shadow:0 8px 18px rgba(0,0,0,.16)}
.track-item.active{border-color:rgba(255,43,79,.24);background:linear-gradient(180deg, rgba(255,43,79,.08), rgba(255,255,255,.025)), rgba(255,43,79,.05)}
.track-item-cover img{width:48px;height:48px;display:block;object-fit:cover;border-radius:10px}
.track-item-meta{min-width:0}
.track-item-title{font-weight:620;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:.9rem}
.track-item-artist span{color:rgba(255,255,255,.56);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.track-item-hint{font-size:.58rem;letter-spacing:0;text-transform:uppercase;color:rgba(255,255,255,.42)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:999px}
::-webkit-scrollbar-track{background:transparent}





@keyframes loaderPanel{
  0%,100%{transform:translateY(0) scale(1);opacity:.32}
  50%{transform:translateY(-4px) scale(1.03);opacity:.72}
}
@keyframes loaderPulse{
  0%,100%{transform:scale(.64);box-shadow:0 0 0 rgba(214,58,85,0)}
  50%{transform:scale(.72);box-shadow:0 0 28px rgba(214,58,85,.16)}
}
@keyframes loaderSweep{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(320%)}
}
@keyframes loaderLogo{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-3px) scale(1.03)}
}
@keyframes loaderHalo{
  0%,100%{opacity:.55;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.05)}
}
@keyframes coverFloat{
  0%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(1.5deg) scale(1.025)}
  100%{transform:rotate(0deg) scale(1)}
}
@keyframes panelReveal{
  0%{opacity:0;transform:translate3d(0,20px,0) scale(.992);filter:blur(12px)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}


body.playlist-open .player-shell{border-color:rgba(255,255,255,.1);box-shadow:0 14px 28px rgba(0,0,0,.24);transform:translateY(-1px)}
.is-playing .player-shell{border-color:rgba(255,255,255,.12);box-shadow:0 18px 36px rgba(0,0,0,.3), 0 0 0 1px rgba(214,58,85,.06)}
.is-playing .player-cover::before{opacity:1;transform:scale(1)}
.is-playing .player-cover img{animation:coverFloat 6s ease-in-out infinite;filter:saturate(1.05)}
.is-playing .eq{opacity:1;transform:translateY(-1px)}
.nebula{opacity:.72}
.particle:nth-child(n+11){display:none}


.site-loader__mark{
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(255,255,255,.02);
}
.site-loader__glyph{
  position:relative;
  width:54px;
  height:54px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(145deg, rgba(214,58,85,.24), rgba(255,255,255,.04)),
    rgba(8,10,18,.52);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 28px rgba(0,0,0,.28);
  animation:loaderGlyph 2.8s cubic-bezier(.22,.61,.36,1) infinite;
}
.site-loader__glyph::before,
.site-loader__glyph::after{
  content:"";
  position:absolute;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  box-shadow:0 0 16px rgba(255,255,255,.16);
}
.site-loader__glyph::before{
  width:18px;height:2px;left:50%;top:50%;transform:translate(-50%,-50%);
}
.site-loader__glyph::after{
  width:2px;height:18px;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.72;
}






@keyframes loaderGlyph{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  50%{transform:translateY(-3px) rotate(3deg) scale(1.035)}
}

.site-loader__mark,.site-loader__glyph{display:none !important;}


.contact-btn__icon--image{
  padding:9px;
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)),
    rgba(7,12,22,.78);
  box-shadow:0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.contact-btn__icon--image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:12px;
  transform:scale(.9);
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.22));
}


.copy-toast{
  position:fixed;
  top:20px;
  left:50%;
  z-index:50;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:min(420px, calc(100vw - 28px));
  max-width:min(520px, calc(100vw - 28px));
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(7,9,16,.92);
  box-shadow:0 22px 56px rgba(0,0,0,.42), 0 0 0 1px rgba(88,101,242,.08);
  backdrop-filter:blur(20px) saturate(135%);
  transform:translate(-50%, -22px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease, transform .32s cubic-bezier(.22,.61,.36,1), visibility .28s ease;
}
.copy-toast.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}
.copy-toast__icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(180deg, rgba(132,140,255,.42), rgba(88,101,242,.18));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 22px rgba(0,0,0,.22);
}
.copy-toast__icon svg{width:20px;height:20px}
.copy-toast__text{
  font-size:.92rem;
  font-weight:600;
  color:rgba(255,255,255,.92);
  line-height:1.45;
}









/* ===== Responsive refinement ===== */
@media (max-width: 1180px){
  body{
    padding:22px 16px 154px;
  }

  .hero{
    min-height:auto;
    padding-top:42px;
    padding-bottom:28px;
  }

  .hero-layout{
    width:min(100%, 980px);
    grid-template-columns:minmax(0, 1fr);
    gap:18px;
  }

  .contact-group__links{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
  }

  .hero-side--left{order:2;}
  .profile-card{order:1;}
  .hero-side--right{order:3;}

  .contact-btn--hero{
    min-height:132px;
  }
}

@media (max-width: 820px){
  body{
    padding:18px 14px 168px;
  }

  .lang-switch-wrap{
    top:14px;
    left:14px;
  }

  .lang-switch{
    padding:7px 10px;
    gap:8px;
  }

  .hero{
    display:block;
    padding-top:56px;
  }

  .hero-layout{
    width:100%;
    gap:14px;
  }

  .contact-group__links{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }

  .profile-card{
    border-radius:22px;
    padding:20px 18px;
  }

  .profile-topline{
    margin-bottom:16px;
  }

  .profile-main{
    grid-template-columns:1fr;
    gap:18px;
    text-align:center;
  }

  .profile-copy{
    justify-items:center;
  }

  .profile-copy h1::after{
    margin-left:auto;
    margin-right:auto;
  }

  .description{
    max-width:100%;
    margin-bottom:18px;
  }

  .avatar-wrap{
    max-width:168px;
  }

  .tags{
    grid-template-columns:1fr;
    width:100%;
  }

  .tag-item{
    min-height:unset;
    text-align:left;
  }

  .player{
    padding:0 10px 10px;
  }

  .player-inner{
    max-width:100%;
  }

  .player-shell{
    grid-template-columns:60px minmax(0, 1fr);
    gap:12px;
    padding:12px;
    border-radius:20px;
  }

  .player-cover img{
    width:56px;
    height:56px;
    border-radius:14px;
  }

  .player-controls{
    grid-column:1 / -1;
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }

  .progress-block{
    margin-left:0;
    width:100%;
    order:10;
  }

  .progress{
    width:100%;
    flex:1 1 auto;
  }

  .playlist-panel{
    bottom:94px;
    width:min(420px, calc(100vw - 20px));
    max-height:min(50vh, 420px);
  }

  .copy-toast{
    top:14px;
    min-width:unset;
    max-width:calc(100vw - 20px);
    width:calc(100vw - 20px);
    padding:12px 14px;
    border-radius:16px;
  }

  .copy-toast__text{
    font-size:.88rem;
  }
}

@media (max-width: 640px){
  body{
    padding:14px 10px 184px;
  }

  .lang-switch-wrap{
    top:10px;
    left:10px;
  }

  .lang-switch{
    transform:scale(.95);
    transform-origin:top left;
  }

  .hero{
    padding-top:52px;
  }

  .hero-layout{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .hero-side{
    display:grid;
    gap:10px;
    width:100%;
  }

  .contact-group__links{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    width:100%;
  }

  .contact-group__head{
    gap:4px;
    padding:0 2px;
  }

  .contact-group__kicker{
    font-size:.58rem;
  }

  .contact-group__head h2{
    font-size:.98rem;
  }

  .hero-side--left,
  .hero-side--right,
  .profile-card{
    width:100%;
  }

  .profile-card{
    order:2;
    flex:none;
    grid-area:auto;
    grid-column:auto;
    overflow:visible;
  }

  .hero-side--left{
    order:1;
  }

  .hero-side--right{
    order:3;
  }

  .contact-btn--hero{
    min-height:unset;
    padding:15px 14px;
    border-radius:20px;
    gap:8px;
    min-width:0;
  }

  .contact-btn__icon{
    width:48px;
    height:48px;
    border-radius:16px;
  }

  .contact-btn__label{
    font-size:.92rem;
    line-height:1.2;
  }

  .contact-btn__meta{
    font-size:.75rem;
    line-height:1.35;
    word-break:break-word;
  }

  .contact-btn__icon{
    width:44px;
    height:44px;
    border-radius:14px;
  }

  .profile-card{
    padding:15px 12px;
    border-radius:20px;
  }

  .profile-topline{
    font-size:.64rem;
    letter-spacing:0;
    gap:8px;
    padding:6px 10px;
    margin-bottom:12px;
  }

  .profile-main{
    gap:12px;
  }

  .profile-copy h1{
    font-size:clamp(1.72rem, 10vw, 2.35rem);
    line-height:1;
    margin-bottom:8px;
  }

  .eyebrow{
    font-size:.64rem;
    letter-spacing:0;
    margin-bottom:10px;
  }

  .description{
    font-size:.82rem;
    line-height:1.45;
    margin-bottom:12px;
  }

  .avatar-wrap{
    max-width:112px;
    padding:7px;
  }

  .tags{
    gap:8px;
  }

  .tag-item{
    grid-template-columns:46px minmax(0,1fr);
    gap:9px;
    padding:8px 10px;
    border-radius:14px;
  }

  .tag-icon{
    width:46px;
    height:46px;
    border-radius:14px;
  }

  .tag-icon svg{
    width:24px;
    height:24px;
  }

  .tag-copy strong{
    font-size:.8rem;
    margin-bottom:4px;
  }

  .tag-copy span{
    font-size:.74rem;
    line-height:1.42;
  }

  .player{
    padding:0 8px 8px;
  }

  .player-shell{
    grid-template-columns:52px minmax(0, 1fr);
    gap:10px;
    padding:10px;
    border-radius:18px;
  }

  .player-cover img{
    width:52px;
    height:52px;
    border-radius:13px;
  }

  .track-title{
    font-size:.94rem;
  }

  .track-artist span{
    font-size:.76rem;
  }

  .player-controls{
    gap:8px;
  }

  .icon-btn,
  .close-btn{
    width:40px;
    height:40px;
    border-radius:13px;
  }

  .play-btn{
    width:46px;
    height:46px;
    border-radius:15px;
  }

  .progress-block{
    gap:8px;
  }

  .playlist-panel{
    bottom:86px;
    border-radius:16px;
    padding:12px;
  }

  .playlist-head{
    margin-bottom:10px;
  }

  .track-item{
    grid-template-columns:42px minmax(0,1fr);
    gap:10px;
  }

  .track-item-cover img{
    width:42px;
    height:42px;
  }

  .track-item-hint{
    display:none;
  }

  .copy-toast{
    gap:10px;
    padding:11px 12px;
    border-radius:15px;
  }

  .copy-toast__icon{
    width:34px;
    height:34px;
    flex-basis:34px;
    border-radius:12px;
  }
}

@media (max-width: 420px){
  body{
    padding:12px 8px 190px;
  }

  .hero{
    padding-top:48px;
  }

  .profile-card{
    padding:16px 12px;
  }

  .profile-copy h1{
    font-size:clamp(1.7rem, 11vw, 2.25rem);
  }

  .description{
    font-size:.84rem;
  }

  .tag-item{
    grid-template-columns:46px minmax(0,1fr);
    padding:9px 10px;
  }

  .tag-icon{
    width:46px;
    height:46px;
    border-radius:14px;
  }

  .hero-layout{
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .contact-btn--hero{
    padding:13px 12px;
    border-radius:18px;
    gap:7px;
  }

  .contact-btn__label{
    font-size:.88rem;
  }

  .contact-btn__meta{
    font-size:.72rem;
  }

  .player-shell{
    padding:9px;
  }

  .icon-btn,
  .close-btn{
    width:38px;
    height:38px;
  }

  .play-btn{
    width:44px;
    height:44px;
  }

  .playlist-panel{
    width:calc(100vw - 16px);
    bottom:82px;
    max-height:min(54vh, 440px);
  }

  .copy-toast__text{
    font-size:.82rem;
    line-height:1.35;
  }
}

@media (hover: none) and (pointer: coarse){
  .contact-btn:hover,
  .icon-btn:hover,
  .play-btn:hover,
  .close-btn:hover,
  .track-item:hover{
    transform:none;
  }

  .progress:hover{
    box-shadow:none;
  }
}


.cover-fallback{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#fff;
  font-weight:800;
  line-height:1;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.16), transparent 30%),
    radial-gradient(circle at 74% 78%, rgba(255,43,79,.18), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  box-shadow:0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  position:relative;
}
.cover-fallback::after{
  content:attr(data-letter);
  position:absolute;
  inset:auto -8px -10px auto;
  color:rgba(255,255,255,.045);
  font-size:2.8em;
  font-weight:900;
  transform:rotate(-10deg);
}
.player-cover-fallback{
  width:64px;
  height:64px;
  border-radius:16px;
  font-size:1.75rem;
}
.track-item-cover-fallback{
  width:48px;
  height:48px;
  border-radius:10px;
  font-size:1.25rem;
}
.player-cover img[hidden],
.cover-fallback[hidden]{display:none!important}
.is-playing .player-cover-fallback{animation:coverFloat 6s ease-in-out infinite}

/* ===== Projects folder ===== */
body{padding-bottom:226px;}
body.is-ready .reveal--4{animation-delay:.34s}

@media (min-width:1181px){
  body{
    height:100vh;
    overflow:hidden;
    padding-bottom:0;
  }

  .hero{
    min-height:calc(100vh - 128px);
  }

  .contact-group{
    transform:translateY(-28px);
  }
}

.projects-dock{
  position:fixed;
  left:0;
  right:0;
  bottom:200px;
  z-index:5;
  padding:0 14px;
  pointer-events:none;
}
.projects-dock__inner{
  width:min(900px,100%);
  margin:0 auto;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.projects-folder{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:min(460px,100%);
  min-height:58px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 32px;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:none;
  border-radius:20px;
  cursor:pointer;
  color:var(--text-main);
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    rgba(7,9,16,.86);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 16px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px) saturate(125%);
  pointer-events:auto;
  transition:transform .45s cubic-bezier(.22,.61,.36,1), border-color .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1), background .45s cubic-bezier(.22,.61,.36,1);
}
.projects-folder::before{
  content:none;
}
.projects-folder:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 20px 40px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08);
}
.projects-folder:active{transform:translateY(0) scale(.99)}
.projects-folder__shine{
  display:none;
}
.projects-folder__icon,
.projects-folder__copy,
.projects-folder__chevron{position:relative;z-index:1}
.projects-folder__icon{
  width:46px;
  height:46px;
  border-radius:15px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(180deg, rgba(255,173,73,.35), rgba(214,58,85,.14));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 12px 22px rgba(0,0,0,.22);
}
.projects-folder__icon svg{width:25px;height:25px}
.projects-folder__copy{
  min-width:0;
  display:grid;
  gap:3px;
  text-align:left;
}
.projects-folder__label{
  font-size:.96rem;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.projects-folder__meta{
  font-size:.76rem;
  color:rgba(255,255,255,.58);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.projects-folder__chevron{
  width:32px;
  height:32px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.82);
  transition:transform .32s cubic-bezier(.22,.61,.36,1), background .32s ease, border-color .32s ease;
}
.projects-folder__chevron svg{width:18px;height:18px}
body.projects-open .projects-folder,
#projectsBtn.is-active{
  border-color:rgba(255,255,255,.15);
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
    rgba(7,9,16,.9);
  box-shadow:0 18px 38px rgba(0,0,0,.34), 0 0 0 1px rgba(255,173,73,.06);
}
body.projects-open .projects-folder__chevron,
#projectsBtn.is-active .projects-folder__chevron{transform:rotate(180deg)}

.projects-overlay{
  position:fixed;
  inset:0;
  z-index:8;
  pointer-events:none;
}
.projects-panel{
  position:fixed;
  left:50%;
  bottom:182px;
  transform:translate(-50%, 10px) scale(.985);
  transform-origin:bottom center;
  width:min(480px, calc(100vw - 28px));
  max-height:min(42vh,360px);
  overflow:auto;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top left, rgba(255,173,73,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.02)),
    rgba(7,9,16,.97);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  opacity:0;
  pointer-events:none;
  backdrop-filter:blur(18px) saturate(125%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s cubic-bezier(.22,.61,.36,1);
}
.projects-overlay.open .projects-panel{
  transform:translate(-50%, 0) scale(1);
  opacity:1;
  pointer-events:auto;
  box-shadow:0 18px 36px rgba(0,0,0,.34);
}
.projects-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.projects-kicker{
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
  letter-spacing:0;
  font-size:.64rem;
  margin-bottom:6px;
}
.projects-title{font-size:.98rem;font-weight:800;color:#fff}
.projects-list{display:grid;gap:9px}
.project-item{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.016)), rgba(255,255,255,.02);
  color:#fff;
  text-decoration:none;
  transition:transform .32s cubic-bezier(.22,.61,.36,1), border-color .32s cubic-bezier(.22,.61,.36,1), background .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s cubic-bezier(.22,.61,.36,1);
}
.project-item:hover,
.project-item:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  outline:none;
}
.project-item__logo{
  width:54px;
  height:54px;
  display:block;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}
.project-item__meta{min-width:0;text-align:left}
.project-item__title{
  font-size:.94rem;
  font-weight:800;
  color:#fff;
  margin-bottom:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.project-item__description{
  color:rgba(255,255,255,.62);
  font-size:.8rem;
  line-height:1.45;
}
.project-item__site{
  margin-top:4px;
  color:rgba(255,255,255,.82);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:0;
}

@media (max-width:1180px){
  body{padding-bottom:244px;}
  .projects-dock{bottom:186px;}
}
@media (max-width:820px){
  body{padding-bottom:292px;}
  .projects-dock{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto!important;
    z-index:2;
    padding:14px 10px 0;
  }
  .projects-folder{width:min(420px,100%);min-height:56px;border-radius:19px;padding:11px 13px;}
  .projects-folder::before{content:none;}
  .projects-panel{width:min(420px, calc(100vw - 20px));max-height:min(46vh,420px);}
  .player-cover-fallback{width:56px;height:56px;border-radius:14px;font-size:1.42rem;}
}
@media (max-width:640px){
  body{padding-bottom:18px;}
  .projects-dock{padding:10px 8px 0;}
  .player{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    z-index:2;
    padding:10px 8px 0;
  }
  .projects-folder{
    width:100%;
    grid-template-columns:42px minmax(0,1fr) 30px;
    gap:10px;
    min-height:54px;
    padding:10px 12px;
    border-radius:18px;
  }
  .projects-folder::before{content:none;}
  .projects-folder__icon{width:42px;height:42px;border-radius:14px;}
  .projects-folder__icon svg{width:23px;height:23px;}
  .projects-folder__label{font-size:.9rem;}
  .projects-folder__meta{font-size:.72rem;}
  .projects-folder__chevron{width:30px;height:30px;border-radius:10px;}
  .projects-panel{border-radius:16px;padding:12px;}
  .project-item{grid-template-columns:48px minmax(0,1fr);gap:10px;padding:9px;border-radius:15px;}
  .project-item__logo{width:48px;height:48px;border-radius:13px;}
  .project-item__title{font-size:.88rem;}
  .project-item__description{font-size:.74rem;}
  .project-item__site{font-size:.68rem;}
  .player-cover-fallback{width:52px;height:52px;border-radius:13px;font-size:1.25rem;}
  .track-item-cover-fallback{width:42px;height:42px;border-radius:10px;font-size:1.05rem;}
}
@media (max-width:420px){
  body{padding-bottom:16px;}
  .projects-dock{padding:8px 8px 0;}
  .projects-folder{min-height:52px;padding:9px 10px;}
  .projects-folder::before{content:none;}
  .projects-panel{width:calc(100vw - 16px);max-height:min(48vh,420px);}
}
@media (hover:none) and (pointer:coarse){
  .projects-folder:hover,
  .project-item:hover{transform:none;}
}