:root{
  --ink:#e8ecff;
  --muted:#a9b3d9;
  --bg1:#050a1a;
  --bg2:#0b1331;
  --card-bg:rgba(7,12,30,.45);
  --card-border:rgba(255,255,255,.08);
  --card-shadow:0 24px 62px rgba(4,10,24,.48);
  --button-bg:rgba(7,12,30,.6);
  --button-border:rgba(255,255,255,.24);
  --button-hover-bg:rgba(12,20,40,.72);
  --button-shadow:0 16px 32px rgba(3,8,20,.4);
  --theme-selector-bg:rgba(6,12,26,.6);
  --theme-selector-border:rgba(255,255,255,.16);
  --theme-selector-shadow:0 18px 42px rgba(3,8,22,.38);
}
body[data-theme="bw"]{
  --ink:#f5f5f5;
  --muted:#d4d4d4;
  --bg1:#111315;
  --bg2:#1b1d1f;
  --card-bg:rgba(18,19,22,.78);
  --card-border:rgba(255,255,255,.12);
  --card-shadow:0 28px 64px rgba(0,0,0,.7);
  --crumb-bg:rgba(17,18,20,.8);
  --crumb-pill:rgba(243,243,243,.08);
  --crumb-pill-active:rgba(217,217,217,.18);
  --crumb-shadow:0 12px 32px rgba(0,0,0,.66);
  --button-bg:rgba(20,21,24,.78);
  --button-border:rgba(255,255,255,.14);
  --button-hover-bg:rgba(38,40,44,.84);
  --button-shadow:0 20px 48px rgba(0,0,0,.68);
  --theme-selector-bg:rgba(20,21,24,.78);
  --theme-selector-border:rgba(255,255,255,.14);
  --theme-selector-shadow:0 20px 48px rgba(0,0,0,.68);
}
body[data-theme="invert"]{
  --ink:#0b1226;
  --muted:#48556a;
  --bg1:#f3f6ff;
  --bg2:#e5ebff;
  --card-bg:rgba(255,255,255,.96);
  --card-border:rgba(10,20,52,.16);
  --card-shadow:0 24px 64px rgba(15,24,56,.16);
  --crumb-bg:rgba(243,247,255,.9);
  --crumb-pill:rgba(255,255,255,.95);
  --crumb-pill-active:rgba(226,235,255,.96);
  --crumb-shadow:0 18px 36px rgba(15,24,56,.12);
  --button-bg:rgba(248,250,255,.92);
  --button-border:rgba(12,24,56,.18);
  --button-hover-bg:rgba(232,238,255,.98);
  --button-shadow:0 20px 54px rgba(15,24,56,.14);
  --theme-selector-bg:rgba(245,248,255,.88);
  --theme-selector-border:rgba(12,24,56,.18);
  --theme-selector-shadow:0 20px 42px rgba(12,20,52,.14);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font:400 16px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(1200px 900px at 50% 120%, var(--bg2), var(--bg1) 60%) fixed,
    linear-gradient(180deg, rgba(4,10,24,.6), transparent 35%) fixed;
  overflow-x:hidden;
}
.top-bar{
  position:sticky;
  top:0;
  z-index:15;
  padding:clamp(10px,2vw,18px) clamp(16px,3vw,32px) 0;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.top-bar-inner{
  pointer-events:auto;
  width:100%;
  max-width:72rem;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(.75rem,2vw,1.5rem);
  flex-wrap:wrap;
}
.theme-selector{
  display:inline-flex;
  gap:6px;
  background:var(--theme-selector-bg);
  border:1px solid var(--theme-selector-border);
  border-radius:999px;
  padding:4px;
  box-shadow:var(--theme-selector-shadow);
  pointer-events:auto;
  backdrop-filter:blur(12px) saturate(120%);
}
.top-bar-inner .theme-selector{
  margin-left:auto;
}
.top-bar .back-button{
  pointer-events:auto;
  justify-content:center;
  white-space:nowrap;
}
.top-bar-back{min-width:fit-content;}
.theme-button{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  font:600 0.78rem/1.2 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  padding:6px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:color .18s ease, background .18s ease;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.theme-button:focus-visible{
  outline:2px solid rgba(56,189,248,.9);
  outline-offset:2px;
}
.theme-button[aria-pressed="true"]{
  background:rgba(94,234,212,.18);
  color:var(--ink);
}
body[data-theme="bw"] .theme-button[aria-pressed="true"]{
  background:rgba(229,229,229,.16);
}
body[data-theme="invert"] .theme-button[aria-pressed="true"]{
  background:rgba(59,130,246,.2);
  color:var(--ink);
}
header{
  max-width:72rem;
  margin:auto;
  padding:clamp(16px,2vw,24px);
  text-align:center;
}
main{
  max-width:72rem;
  margin:auto;
  padding:clamp(16px,2vw,24px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(1rem,1vw+1rem,1.75rem);
}
.headline{margin:.25em 0 0;line-height:1.08;font-weight:900;font-size:clamp(2.2rem,3.8vw+0.8rem,4.6rem);text-align:center}
.sub{margin:.25rem auto 1.25rem;text-align:center;color:var(--muted)}
.rainbow{
  --grad: conic-gradient(from 210deg,#5eead4,#38bdf8,#a78bfa,#f472b6,#fb7185,#f59e0b,#84cc16,#22d3ee,#5eead4);
  background:var(--grad);
  background-size:250% 250%;
  animation:rainbow-shift 12s linear infinite;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 22px rgba(94,234,212,.45),0 0 36px rgba(56,189,248,.35);
}
.rainbow *{
  background:inherit;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.card{
  max-width:70rem;
  margin:1rem auto 2rem;
  padding:clamp(16px,2vw,28px);
  width:100%;
  text-align:center;
  border:1px solid var(--card-border);
  border-radius:16px;
  background:var(--card-bg);
  backdrop-filter:saturate(1.05) blur(6px);
  box-shadow:var(--card-shadow);
}
.song-footer{
  max-width:72rem;
  margin:clamp(1.5rem,3vw,2.75rem) auto clamp(1rem,2vw,2rem);
  padding:0 clamp(16px,3vw,24px);
  text-align:center;
}
.rainbow-blessing{
  display:inline-block;
  font:800 clamp(1.6rem,1.6vw+1.2rem,2.6rem)/1.1 'Poppins',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#fff;
  animation:blessing-rainbow 6s linear infinite;
  text-shadow:0 0 12px rgba(94,234,212,.85),0 0 24px rgba(56,189,248,.65),0 0 36px rgba(168,139,250,.55);
}
.rainbow-blessing::selection{background:rgba(94,234,212,.35);color:#050a1a}
.back-button{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.55rem 1.4rem;
  border-radius:999px;
  border:1px solid var(--button-border);
  background:var(--button-bg);
  color:var(--ink);
  font:600 .95rem/1 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  cursor:pointer;
  text-decoration:none;
  transition:background-color .18s ease,transform .18s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.back-button:hover{
  background:var(--button-hover-bg);
  transform:translateY(-1px);
}
.back-button:focus-visible{
  outline:2px solid rgba(94,234,212,.9);
  outline-offset:3px;
}
.back-button:active{transform:translateY(0)}
.song-title{margin:.2rem 0 .6rem;font-weight:900;font-size:clamp(2.9rem,3vw+2rem,5.6rem)}
.by{margin:0 0 1.25rem;color:var(--muted)}
.lyrics{letter-spacing:.01em;font-size:clamp(1.28rem,1.6vw+1.05rem,2.2rem);line-height:1.78}
.lyrics-block{
  display:flex;
  flex-direction:column;
  gap:clamp(1.3rem,1vw+1.2rem,2.4rem);
  align-items:center;
  text-align:center;
  margin:0;
}
.lyrics-block p{margin:0 auto;font-weight:650;max-width:48ch}
.lyrics-block .tag{
  display:block;
  margin-bottom:.9rem;
  padding-bottom:.35rem;
  font-size:clamp(.9rem,.65vw+.85rem,1.25rem);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  text-shadow:none;
  transition:text-shadow .2s ease,color .2s ease;
  background-repeat:no-repeat;
  background-image:linear-gradient(90deg,rgba(94,234,212,.55),rgba(56,189,248,.25));
  background-size:38px 2px;
  background-position:center calc(100% - 1px);
}
.lyrics-block .tag.glow-refren{
  color:#c6fbff;
  text-shadow:0 0 12px rgba(94,234,212,.95),0 0 26px rgba(56,189,248,.7);
  background-image:linear-gradient(90deg,rgba(56,189,248,.9),rgba(94,234,212,.9));
}
.lyrics-block .tag.glow-strofa{
  color:#ffe8be;
  text-shadow:0 0 12px rgba(255,196,120,.92),0 0 26px rgba(255,176,64,.65);
  background-image:linear-gradient(90deg,rgba(255,196,120,.85),rgba(255,139,56,.7));
}
.neon-blue{color:#8ee6ff;text-shadow:0 0 10px #00aaff,0 0 20px #00aaff,0 0 40px #00aaff,0 0 80px #00aaff,0 0 120px #00aaff}
.neon-orange{color:#ffc187;text-shadow:0 0 10px #ff8800,0 0 20px #ff8800,0 0 40px #ff8800,0 0 80px #ff8800,0 0 120px #ff8800}
.neon-pink{color:#ff9bf2;text-shadow:0 0 10px #ff2ad4,0 0 20px #ff2ad4,0 0 40px #ff2ad4,0 0 80px #ff2ad4,0 0 120px #ff2ad4}
.neon-green{color:#9fffa0;text-shadow:0 0 10px green,0 0 20px green,0 0 40px green,0 0 80px green,0 0 120px green}
.neon-purple{color:#e0b6ff;text-shadow:0 0 10px #cc55ff,0 0 20px #cc55ff,0 0 40px #cc55ff,0 0 80px #cc55ff,0 0 120px #cc55ff}
.neon-yellow{color:#fff6a0;text-shadow:0 0 10px #d4d449,0 0 20px #d4d449,0 0 40px #d4d449,0 0 80px #d4d449,0 0 120px #d4d449}
.neon-red{color:#ffb3b3;text-shadow:0 0 10px #ff4444,0 0 20px #ff4444,0 0 40px #ff4444,0 0 80px #ff4444,0 0 120px #ff4444}
.neon-indigo{color:#c7d0ff;text-shadow:0 0 10px #4f46e5,0 0 20px #4f46e5,0 0 40px #4338ca,0 0 80px #4338ca,0 0 120px #312e81}
.neon-violet{color:#f1b5ff;text-shadow:0 0 10px #c026d3,0 0 20px #c026d3,0 0 40px #a21caf,0 0 80px #86198f,0 0 120px #701a75}
.verse-refren{color:#f8fbff;text-shadow:0 0 12px rgba(255,255,255,.92),0 0 26px rgba(255,255,255,.75)}
body[data-theme="bw"] .song-title,
body[data-theme="invert"] .song-title,
body[data-theme="bw"] .neon-blue,
body[data-theme="bw"] .neon-orange,
body[data-theme="bw"] .neon-pink,
body[data-theme="bw"] .neon-green,
body[data-theme="bw"] .neon-purple,
body[data-theme="bw"] .neon-yellow,
body[data-theme="bw"] .neon-red,
body[data-theme="bw"] .neon-indigo,
body[data-theme="bw"] .neon-violet,
body[data-theme="invert"] .neon-blue,
body[data-theme="invert"] .neon-orange,
body[data-theme="invert"] .neon-pink,
body[data-theme="invert"] .neon-green,
body[data-theme="invert"] .neon-purple,
body[data-theme="invert"] .neon-yellow,
body[data-theme="invert"] .neon-red,
body[data-theme="invert"] .neon-indigo,
body[data-theme="invert"] .neon-violet{
  text-shadow:none;
}
body[data-theme="invert"] .crumbs a,
body[data-theme="invert"] .crumbs span{color:var(--ink)}
body[data-theme="invert"] .crumbs a:hover{color:#23304f}
body[data-theme="invert"] .lyrics-block .tag{
  color:#1e293b;
  background-image:linear-gradient(90deg,rgba(59,130,246,.28),rgba(37,211,182,.22));
}
body[data-theme="bw"] .lyrics-block .tag{
  color:#e5e7eb;
  background-image:linear-gradient(90deg,rgba(210,210,210,.42),rgba(140,140,140,.24));
}
body[data-theme="invert"] .neon-blue{color:#1d4ed8}
body[data-theme="invert"] .neon-orange{color:#c2410c}
body[data-theme="invert"] .neon-pink{color:#be185d}
body[data-theme="invert"] .neon-green{color:#047857}
body[data-theme="invert"] .neon-purple{color:#6b21a8}
body[data-theme="invert"] .neon-yellow{color:#b45309}
body[data-theme="invert"] .neon-red{color:#b91c1c}
body[data-theme="invert"] .neon-indigo{color:#4338ca}
body[data-theme="invert"] .neon-violet{color:#7c3aed}
body[data-theme="invert"] .verse-refren{
  color:#1f2937;
  text-shadow:none;
}
.rainbow-blessing::before,.rainbow-blessing::after{
  content:"";
  display:inline-block;
  width:.6em;
  height:2px;
  margin:0 .45em;
  vertical-align:middle;
  background:linear-gradient(90deg,rgba(248,113,113,.8),rgba(251,191,36,.75),rgba(134,239,172,.75),rgba(59,130,246,.8),rgba(192,132,252,.8));
  box-shadow:0 0 12px rgba(56,189,248,.6);
}
.rainbow-blessing,
.song-title.rainbow{
  animation-duration:10s;
}

@keyframes rainbow-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.rainbow-blessing::before{margin-left:0}
.rainbow-blessing::after{margin-right:0}
@media (max-width:680px){
  .top-bar-inner{
    justify-content:center;
  }
  .top-bar .back-button{
    order:-1;
    width:100%;
  }
  .top-bar-inner .theme-selector{
    margin-left:0;
  }
  .rainbow-blessing{
    letter-spacing:.12em;
  }
  .rainbow-blessing::before,
  .rainbow-blessing::after{
    display:none;
  }
}
.scene{position:fixed;inset:0;overflow:hidden;z-index:-1}
.layer{position:absolute;inset:-10%}
.stars{background-repeat:repeat;opacity:.85;}
.stars.far{background-size:320px 320px;background-image:
  radial-gradient(1.2px 1.2px at 7% 12%,rgba(255,255,255,.9) 60%,transparent 61%),
  radial-gradient(1.2px 1.2px at 33% 62%,rgba(190,220,255,.9) 60%,transparent 61%),
  radial-gradient(1.4px 1.4px at 74% 72%,rgba(255,242,220,.9) 60%,transparent 61%)}
.stars.near{background-size:420px 420px;background-image:
  radial-gradient(1.8px 1.8px at 12% 22%,rgba(255,255,255,.95) 60%,transparent 61%),
  radial-gradient(2.4px 2.4px at 44% 84%,rgba(255,241,221,1) 56%,transparent 57%),
  radial-gradient(1.8px 1.8px at 54% 46%,rgba(255,255,255,.95) 60%,transparent 61%)}
.nebula{mix-blend-mode:screen;background:
  radial-gradient(900px 700px at 10% 15%,rgba(120,0,255,.20),transparent 60%),
  radial-gradient(700px 600px at 80% 30%,rgba(0,170,255,.18),transparent 60%),
  radial-gradient(800px 650px at 60% 78%,rgba(255,0,120,.14),transparent 60%)}
.accent{position:relative;display:inline-block}
.accent::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:-6px;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(94,234,212,.9),rgba(56,189,248,.9),transparent);
  filter:blur(1px);
  animation:glide 4s ease-in-out infinite;
}
@keyframes blessing-rainbow{
  0%{color:#f87171;text-shadow:0 0 14px rgba(248,113,113,.8),0 0 28px rgba(244,114,182,.55)}
  14%{color:#fb923c;text-shadow:0 0 14px rgba(251,146,60,.8),0 0 28px rgba(251,191,36,.55)}
  28%{color:#facc15;text-shadow:0 0 14px rgba(250,204,21,.75),0 0 28px rgba(163,230,53,.5)}
  42%{color:#4ade80;text-shadow:0 0 14px rgba(74,222,128,.75),0 0 28px rgba(45,212,191,.52)}
  57%{color:#38bdf8;text-shadow:0 0 16px rgba(56,189,248,.75),0 0 30px rgba(14,165,233,.5)}
  71%{color:#a855f7;text-shadow:0 0 16px rgba(168,85,247,.75),0 0 30px rgba(236,72,153,.55)}
  85%{color:#f472b6;text-shadow:0 0 16px rgba(244,114,182,.78),0 0 32px rgba(248,113,113,.52)}
  100%{color:#f87171;text-shadow:0 0 14px rgba(248,113,113,.8),0 0 28px rgba(244,114,182,.55)}
}
/* parallax animations removed for performance */
@keyframes glide{0%,100%{transform:translateX(-10%);opacity:.55}50%{transform:translateX(10%);opacity:.95}}
@media (prefers-reduced-motion:reduce){.anim-none{display:none}.stars,.nebula{animation:none}}