:root{
  --ink: rgba(233,230,223,.76);
  --ink-bright: rgba(255,255,255,.92);
  --ink-faint: rgba(233,230,223,.42);
  --cyan: rgba(0,194,255,.30);
}

*{ box-sizing:border-box; }
html,body{
  height:100%;
  width:100%;
}
body{
  margin:0;
  background:#02030a;
  overflow:hidden;
  color:var(--ink);
}

#scene{
  position:relative;
  width:100vw;
  height:100vh;
  min-height:100dvh;
  overflow:hidden;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
}

#stars{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  min-height:100dvh;
  background:
    radial-gradient(1200px 800px at 60% 20%, rgba(255,255,255,.06), transparent 65%),
    radial-gradient(900px 700px at 20% 10%, rgba(0,194,255,.05), transparent 60%),
    linear-gradient(180deg, #01020a, #030318 55%, #01010a);
  pointer-events:none;
  transition: filter 380ms ease, opacity 380ms ease;
  z-index: 0;
}
#stars::before{
  content:"";
  position:absolute;
  inset:-35%;
  background-image:
    radial-gradient(2px 2px at 8% 18%, rgba(255,255,255,.60), transparent 60%),
    radial-gradient(1px 1px at 14% 72%, rgba(255,255,255,.34), transparent 60%),
    radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,.26), transparent 60%),
    radial-gradient(2px 2px at 34% 62%, rgba(255,255,255,.48), transparent 60%),
    radial-gradient(1px 1px at 40% 20%, rgba(255,255,255,.24), transparent 60%),
    radial-gradient(1px 1px at 52% 80%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(2px 2px at 62% 28%, rgba(255,255,255,.44), transparent 60%),
    radial-gradient(1px 1px at 70% 58%, rgba(255,255,255,.24), transparent 60%),
    radial-gradient(1px 1px at 78% 14%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(2px 2px at 86% 70%, rgba(255,255,255,.46), transparent 60%),
    radial-gradient(1px 1px at 92% 40%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(1px 1px at 10% 90%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,.18), transparent 60%);
  opacity:.78;
  filter: blur(.2px);
  animation: drift 48s linear infinite;
}
@keyframes drift{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-2.4%, 1.2%, 0); }
}

#scene.sparkle #stars{
  filter: brightness(1.18) contrast(1.05) saturate(1.06);
}
#scene.sparkle-strong #stars{
  filter: brightness(1.32) contrast(1.10) saturate(1.12);
}

#sparkles{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  min-height:100dvh;
  pointer-events:none;
  z-index: 2;
}

#viewport{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index: 3;
  touch-action: none;
  cursor: grab;
}
#viewport:active{ cursor: grabbing; }

#world{
  position:absolute;
  width: 2000px;
  height: 2600px;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

#lyrics{
  position:absolute;
  inset:0;
}

.lyric{
  position:absolute;
  left: 0;
  top: 0;
  transform: translate3d(0,0,0);

  background: transparent;
  border:none;
  padding: 6px 10px;
  margin:0;

  font: 540 16px/1.25 ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing: .02em;
  color: var(--ink);
  text-transform: lowercase;

  border-radius: 12px;
  cursor: pointer;
  user-select: none;

  transition:
    transform 900ms cubic-bezier(.18,.9,.16,1),
    color 260ms ease,
    text-shadow 260ms ease,
    background-color 260ms ease,
    opacity 260ms ease;
}

.lyric:hover{
  color: var(--ink-bright);
  text-shadow:
    0 0 16px rgba(255,255,255,.12),
    0 0 28px rgba(0,194,255,.14);
  background-color: rgba(255,255,255,.03);
}
.lyric.faint{ color: var(--ink-faint); }
.lyric.danger{ color: rgba(233,230,223,.64); }
.lyric.chorus{ font-weight: 680; letter-spacing:.07em; }
.lyric.spine{ font-weight: 730; }
.lyric.finale{ font-weight: 820; }

#veil{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(4px);
  z-index: 20;
  cursor:pointer;
}
#veil.visible{ display:flex; }

.veil-inner{
  max-width: min(560px, 88vw);
  padding: 24px 24px 22px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(6,10,18,.58);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;

  color: rgba(233,230,223,.84);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  text-align:center;
  letter-spacing:.01em;
}
.veil-dot{
  width:10px; height:10px;
  border-radius:50%;
  background: rgba(0,194,255,.62);
  box-shadow: 0 0 26px rgba(0,194,255,.42);
}
.veil-title{
  font-size: 16px;
  letter-spacing: .10em;
  text-transform: lowercase;
  color: rgba(255,255,255,.92);
}
.veil-guide{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(233,230,223,.72);
}
.veil-credits{
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: lowercase;
  color: rgba(233,230,223,.48);
}

#download-pill{
  position:fixed;
  top: 16px;
  left: 16px;
  z-index: 18;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,194,255,.22);
  background: rgba(8,14,24,.44);
  backdrop-filter: blur(4px);
  color: rgba(233,230,223,.76);
  text-decoration:none;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: lowercase;
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}
#download-pill:hover{
  border-color: rgba(0,194,255,.42);
  background: rgba(0,194,255,.08);
  color: rgba(255,255,255,.90);
}

#edge-credit{
  position:fixed;
  top: 50%;
  right: 8px;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  text-orientation: mixed;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: lowercase;
  color: rgba(233,230,223,.38);

  z-index: 6;
  pointer-events:none;
}

#lyric-focus-backdrop{
  position:fixed;
  inset:0;
  z-index: 24;
  display:none;
  background: rgba(0,0,0,.10);
}
#lyric-focus-backdrop.visible{
  display:block;
}

#lyric-focus{
  position:fixed;
  inset:0;
  z-index: 25;
  display:none;
  pointer-events:none;
}
#lyric-focus.visible{
  display:block;
}

#lyric-focus-card{
  position:absolute;
  pointer-events:auto;
  width: min(92vw, 860px);
  max-width: 92vw;
  padding: 10px 14px;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: rgba(255,255,255,.96);
  text-align:left;
  cursor: grab;
  user-select: none;

  transform: translate3d(-50%, -50%, 0) scale(.3);
  opacity: 0;
  transition:
    left 640ms cubic-bezier(.18,.9,.16,1),
    top 640ms cubic-bezier(.18,.9,.16,1),
    transform 640ms cubic-bezier(.18,.9,.16,1),
    opacity 320ms ease;
}

#lyric-focus.visible #lyric-focus-card{
  opacity: 1;
}

#lyric-focus-card.is-settled{
  animation: lyricFloat 4.4s ease-in-out infinite;
}

#lyric-focus-card:active{
  cursor: grabbing;
}

#lyric-focus-text{
  display:block;
  width: 100%;
  font: 700 clamp(26px, 5vw, 64px)/1.08 ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing: .01em;
  text-transform: lowercase;
  text-shadow:
    0 0 10px rgba(255,255,255,.10),
    0 0 24px rgba(0,194,255,.12),
    0 0 42px rgba(0,194,255,.08);

  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;
  hyphens: none;
}

#lyric-focus-text .letter{
  display:inline-block;
  will-change: transform, opacity, filter;
}

@keyframes lyricFloat{
  0%, 100%{
    transform: translate3d(-50%, -50%, 0) scale(1) rotate(-0.3deg);
  }
  50%{
    transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.3deg);
  }
}

.glint{
  position: fixed;
  z-index: 26;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,.9);
  box-shadow:
    0 0 10px rgba(255,255,255,.7),
    0 0 22px rgba(0,194,255,.4);
  opacity: 0;
}

@media (max-width: 700px){
  .lyric{ font-size: 14px; padding: 6px 8px; }
  #edge-credit{ right: 6px; font-size: 11px; }
  #download-pill{
    top: 12px;
    left: 12px;
    font-size: 11px;
    padding: 9px 12px;
  }
  .veil-inner{
    padding: 20px 18px 18px;
  }

  #lyric-focus-card{
    width: min(94vw, 94vw);
    max-width: 94vw;
    padding: 8px 8px;
  }

  #lyric-focus-text{
    font-size: clamp(22px, 7.2vw, 44px);
    line-height: 1.06;
    letter-spacing: 0;
  }
}