:root {
  --bg: #050611;
  --panel: rgba(9, 12, 28, .76);
  --panel-2: rgba(16, 22, 48, .72);
  --text: #eef6ff;
  --muted: #9fb2c7;
  --cyan: #00e5ff;
  --pink: #ff2bd6;
  --yellow: #ffe45e;
  --line: rgba(255,255,255,.12);
  --shadow: 0 24px 80px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 43, 214, .18), transparent 30%),
    radial-gradient(circle at 80% 5%, rgba(0, 229, 255, .14), transparent 32%),
    linear-gradient(180deg, #03040c 0%, #07101f 48%, #050611 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Arial, Helvetica, sans-serif;
  line-height: 1.55;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 1px, transparent 4px),
    linear-gradient(90deg, rgba(255,43,214,.04), rgba(0,229,255,.035));
  mix-blend-mode: screen;
  opacity: .52;
  z-index: 20;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.hero {
  min-height: 92vh;
  display: grid;
  place-items: center;
  padding: 48px 22px 32px;
  position: relative;
  overflow: hidden;
}
.hero-art {
  position: absolute;
  inset: 0;
  opacity: .52;
  filter: saturate(1.1) contrast(1.05);
}
.hero-art svg { width: 100%; height: 100%; object-fit: cover; display:block; }
.hero-art img, .art img, .viewer-art img { width: 100%; height: 100%; display:block; object-fit: cover; }

.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(3,4,12,.25), #050611 92%);
}
.hero-content {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 34px;
  align-items: end;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #d8fbff;
  background: rgba(0,0,0,.24);
  box-shadow: inset 0 0 28px rgba(0,229,255,.08);
  letter-spacing: .13em;
  font-size: 12px;
  text-transform: uppercase;
}
.badge::before { content:""; width:8px; height:8px; border-radius:50%; background: var(--pink); box-shadow: 0 0 18px var(--pink); }
h1 {
  font-size: clamp(54px, 9vw, 138px);
  line-height: .86;
  margin: 22px 0 18px;
  letter-spacing: -.08em;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(255,43,214,.42), 0 0 54px rgba(0,229,255,.24);
}
.hero p {
  max-width: 760px;
  color: #c8d8ea;
  font-size: clamp(18px, 2.2vw, 24px);
  margin: 0;
}
.hero-side {
  background: rgba(3,6,18,.58);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 26px;
  padding: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.hero-side h2 { margin: 0 0 8px; font-size: 18px; color: var(--cyan); letter-spacing: .08em; text-transform: uppercase; }
.hero-side p { font-size: 15px; color: var(--muted); margin: 0 0 16px; }
.stats { display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.stat { background: rgba(255,255,255,.06); border-radius: 18px; padding: 14px; border: 1px solid rgba(255,255,255,.08); }
.stat strong { display:block; font-size: 26px; }
.stat span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(3,5,15,.75);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { width: min(1180px, calc(100% - 32px)); margin: auto; display:flex; gap: 14px; align-items:center; justify-content:space-between; padding: 12px 0; }
.logo { font-weight: 900; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.nav-links { display:flex; gap: 10px; flex-wrap: wrap; justify-content:flex-end; }
.nav-links a { padding:8px 12px; border-radius:999px; color:var(--muted); border:1px solid transparent; }
.nav-links a:hover { color:#fff; border-color:rgba(0,229,255,.35); background:rgba(0,229,255,.07); }
section { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 76px 0; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap: 20px; margin-bottom: 28px; }
.section-title h2 { margin:0; font-size: clamp(30px, 5vw, 58px); letter-spacing:-.05em; }
.section-title p { margin:0; color:var(--muted); max-width: 540px; }
.timeline { position: relative; display:grid; gap: 14px; }
.timeline::before { content:""; position:absolute; left: 24px; top: 10px; bottom:10px; width:2px; background: linear-gradient(var(--pink), var(--cyan), var(--yellow)); opacity:.6; }
.time-item {
  position: relative;
  margin-left: 58px;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: 22px;
  padding: 18px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.time-item::before {
  content:"";
  position:absolute;
  left:-46px;
  top:22px;
  width:16px;
  height:16px;
  border-radius:50%;
  background: var(--cyan);
  box-shadow: 0 0 22px var(--cyan);
}
.time-item h3 { margin:0 0 5px; font-size: 18px; }
.time-item .phase { color: var(--pink); font-size: 12px; letter-spacing:.16em; text-transform:uppercase; }
.time-item p { margin:8px 0 0; color:var(--muted); }
.song-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.song-card {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  overflow:hidden;
  background: var(--panel);
  box-shadow: 0 18px 60px rgba(0,0,0,.23);
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  text-align:left;
  color:inherit;
  padding:0;
}
.song-card:hover { transform: translateY(-5px); border-color: rgba(0,229,255,.55); box-shadow: 0 24px 70px rgba(0,229,255,.11); }
.art { aspect-ratio: 16 / 9; background:#080b18; overflow:hidden; }
.art svg { width:100%; height:100%; display:block; }
.card-body { padding: 17px; }
.card-body small { color: var(--cyan); letter-spacing:.13em; text-transform:uppercase; }
.card-body h3 { margin:7px 0 6px; font-size: 21px; }
.card-body p { color:var(--muted); margin:0; font-size: 14px; }
.viewer {
  margin-top: 28px;
  border:1px solid rgba(255,255,255,.15);
  border-radius: 30px;
  overflow:hidden;
  background: rgba(5,7,18,.82);
  box-shadow: var(--shadow);
}
.viewer-top { display:grid; grid-template-columns: 1fr 1fr; min-height: 340px; }
.viewer-art svg { width:100%; height:100%; display:block; object-fit:cover; }
.viewer-info { padding: 34px; display:flex; flex-direction:column; justify-content:end; background: linear-gradient(135deg, rgba(255,43,214,.12), rgba(0,229,255,.08)); }
.viewer-info .phase { color:var(--yellow); text-transform:uppercase; letter-spacing:.16em; font-size:12px; }
.viewer-info h2 { margin: 10px 0 10px; font-size: clamp(34px, 5vw, 62px); line-height:.92; letter-spacing:-.05em; }
.viewer-info p { color:#c7d7e8; margin: 0 0 12px; }
.lyrics-wrap { padding: 36px; display:grid; grid-template-columns: .32fr .68fr; gap: 34px; border-top:1px solid var(--line); }
.lyrics-meta { color:var(--muted); position: sticky; top: 78px; align-self:start; }
.lyrics-meta b { color:#fff; }
.lyrics {
  white-space: pre-wrap;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.72;
  letter-spacing: .01em;
}
.close-note { color: var(--muted); font-size: 13px; margin-top: 12px; }
.footer {
  padding: 50px 20px 70px;
  text-align:center;
  color:var(--muted);
}
.footer strong { color:#fff; }

.language-switch { display:flex; gap: 8px; flex-wrap:wrap; align-items:center; justify-content:center; }
.lang-btn {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 11px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.lang-btn:hover,
.lang-btn.is-active {
  color: #fff;
  border-color: rgba(0,229,255,.55);
  background: rgba(0,229,255,.10);
  box-shadow: 0 0 24px rgba(0,229,255,.12);
}
.lyrics { white-space: normal; }
.stanza { margin: 0 0 1.35em; }
.stanza-line { display:block; }

@media (max-width: 930px) {
  .hero-content, .viewer-top, .lyrics-wrap { grid-template-columns: 1fr; }
  .song-grid { grid-template-columns: repeat(2, 1fr); }
  .lyrics-meta { position: static; }
}
@media (max-width: 620px) {
  .song-grid { grid-template-columns: 1fr; }
  .nav-inner { align-items:flex-start; flex-direction:column; }
  .stats { grid-template-columns: 1fr; }
  .hero { min-height: 86vh; }
}



.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .58;
  filter: saturate(1.12) contrast(1.08);
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(0,229,255,.10), transparent 30%),
    linear-gradient(180deg, rgba(3,4,12,.28), rgba(5,6,17,.78) 76%, #050611 100%);
  z-index: 0;
  pointer-events: none;
}


.hero-art {
  background: #000;
}
.hero-video,
.hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 2.4s ease;
}
.hero-video {
  opacity: 1;
  z-index: 0;
  filter: saturate(1.12) contrast(1.08);
}
.hero-poster {
  opacity: 0;
  z-index: 0;
  filter: saturate(1.08) contrast(1.05);
}
.hero.show-poster .hero-video {
  opacity: 0;
}
.hero.show-poster .hero-poster {
  opacity: .72;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(0,229,255,.10), transparent 30%),
    linear-gradient(180deg, rgba(3,4,12,.30), rgba(5,6,17,.76) 76%, #050611 100%);
  z-index: 0;
  pointer-events: none;
}


/* Soft intro start and cycle behavior */
.hero {
  background: #000;
}
.hero-video,
.hero-poster,
.hero-black {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-video,
.hero-poster {
  object-fit: cover;
  transition: opacity 3.2s ease;
}
.hero-video {
  opacity: 0;
  z-index: 0;
  filter: saturate(1.12) contrast(1.08);
}
.hero-poster {
  opacity: .72;
  z-index: 0;
  filter: saturate(1.08) contrast(1.05);
}
.hero-black {
  background: #000;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  transition: opacity 3.4s ease;
}
.hero.video-active .hero-video {
  opacity: 1;
}
.hero.video-active .hero-poster {
  opacity: 0;
}
.hero.video-active .hero-black {
  opacity: 0;
}
.hero.show-poster .hero-video {
  opacity: 0;
}
.hero.show-poster .hero-poster {
  opacity: .72;
}
.hero.show-poster .hero-black {
  opacity: 0;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(0,229,255,.10), transparent 30%),
    linear-gradient(180deg, rgba(3,4,12,.30), rgba(5,6,17,.76) 76%, #050611 100%);
  z-index: 2;
  pointer-events: none;
}
.hero-content {
  z-index: 3;
}


.lyrics {
  white-space: normal;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.68;
  letter-spacing: .01em;
}
.stanza {
  margin: 0 0 1.65em;
}
.stanza-line {
  display: block;
}
.jp-lyric {
  display: block;
  margin-top: .16em;
  color: #fff;
}
.romaji-line {
  display: block;
  margin-left: 1.05em;
  color: #b7c9da;
  font-size: .9em;
}
.translation-line {
  display: block;
  margin-left: 1.05em;
  color: #8fa4b8;
  font-size: .86em;
}


/* Embedded single-file audio player */
.viewer-player {
  position: relative;
  min-height: 420px;
  background: #03040c;
  overflow: hidden;
}
.viewer-player .viewer-art {
  position: absolute;
  inset: 0;
}
.viewer-player .viewer-art img,
.viewer-player .viewer-art svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.viewer-player::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(0,229,255,.06), transparent 28%),
    linear-gradient(180deg, rgba(3,4,12,.08), rgba(3,4,12,.52) 78%, rgba(3,4,12,.70));
  pointer-events: none;
  z-index: 2;
}
.visualizer-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .96;
}
.audio-panel {
  position: relative;
  z-index: 1;
  padding: 13px 14px;
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(3,5,15,.72), rgba(13,18,40,.46));
  backdrop-filter: blur(18px);
  box-shadow: inset 0 0 30px rgba(0,229,255,.045), 0 12px 34px rgba(0,0,0,.20);
}
.audio-controls {
  display: grid;
  grid-template-columns: auto auto minmax(150px, 1fr) minmax(95px, 130px);
  gap: 11px;
  align-items: center;
}
.audio-btn {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.08);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.audio-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(0,229,255,.62);
  background: rgba(0,229,255,.13);
  box-shadow: 0 0 24px rgba(0,229,255,.16);
}
.audio-btn svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.seek-wrap {
  display: grid;
  gap: 6px;
}
.seek-bar,
.volume-bar {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 8px;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 0 14px rgba(0,0,0,.42);
}
.seek-bar {
  background:
    linear-gradient(90deg, rgba(0,229,255,.95) var(--progress, 0%), rgba(255,43,214,.45) var(--progress, 0%), rgba(255,255,255,.11) var(--progress, 0%));
}
.volume-bar {
  background:
    linear-gradient(90deg, rgba(255,43,214,.9) var(--volume, 85%), rgba(255,255,255,.11) var(--volume, 85%));
}
.seek-bar::-webkit-slider-thumb,
.volume-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.95);
}
.seek-bar::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(0,229,255,.85), 0 0 38px rgba(255,43,214,.25);
}
.volume-bar::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  background: var(--pink);
  box-shadow: 0 0 16px rgba(255,43,214,.85);
}
.seek-bar::-moz-range-thumb,
.volume-bar::-moz-range-thumb {
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 50%;
}
.seek-bar::-moz-range-thumb {
  width: 17px;
  height: 17px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(0,229,255,.85), 0 0 38px rgba(255,43,214,.25);
}
.volume-bar::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: var(--pink);
  box-shadow: 0 0 16px rgba(255,43,214,.85);
}
.time-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.volume-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}
.volume-icon {
  color: #d8fbff;
  text-shadow: 0 0 12px rgba(0,229,255,.45);
}
.lyrics-wrap {
  max-height: min(74vh, 760px);
  overflow: hidden;
}
.lyrics-scroll {
  max-height: min(64vh, 680px);
  overflow-y: auto;
  padding-right: 18px;
  scroll-behavior: smooth;
}
.lyrics-scroll::-webkit-scrollbar {
  width: 12px;
}
.lyrics-scroll::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(255,43,214,.08), rgba(0,229,255,.08));
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
}
.lyrics-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,43,214,.95), rgba(0,229,255,.95));
  box-shadow: 0 0 18px rgba(0,229,255,.4);
}
.lyrics-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,.9) rgba(255,255,255,.08);
}
@media (max-width: 930px) {
  .viewer-player {
    min-height: 360px;
  }
  .lyrics-wrap {
    max-height: none;
  }
  .lyrics-scroll {
    max-height: 70vh;
  }
}
@media (max-width: 620px) {
  .audio-controls {
    grid-template-columns: auto auto 1fr;
  }
  .volume-wrap {
    grid-column: 1 / -1;
  }
}


.song-summary-box {
  position: sticky;
  top: 78px;
  align-self: start;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,43,214,.10), transparent 38%),
    radial-gradient(circle at 92% 2%, rgba(0,229,255,.10), transparent 34%),
    rgba(7,10,24,.58);
  box-shadow: 0 18px 55px rgba(0,0,0,.22), inset 0 0 30px rgba(0,229,255,.035);
}
.song-summary-box h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.song-summary-box p {
  margin: 0;
  color: #b9cada;
  line-height: 1.72;
}
@media (max-width: 930px) {
  .song-summary-box {
    position: static;
  }
}


/* Reworked hero layout so the artwork stays visible */
.hero {
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding: 28px 22px 18px;
}
.hero-art {
  opacity: .58;
}
.hero::after {
  background:
    radial-gradient(circle at 50% 42%, rgba(5,6,17,.08), rgba(5,6,17,.20) 42%, rgba(5,6,17,.58) 72%, #050611 100%),
    linear-gradient(180deg, rgba(3,4,12,.06), rgba(5,6,17,.28) 58%, rgba(5,6,17,.82) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  width: min(1280px, calc(100% - 26px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 560px) minmax(250px, 360px);
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  padding-top: 40vh;
}
.hero-copy {
  max-width: 560px;
  justify-self: start;
  align-self: end;
  padding: 18px 20px 22px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,43,214,.10), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(0,229,255,.08), transparent 34%),
    rgba(4,7,19,.34);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 38px rgba(0,0,0,.18), inset 0 0 24px rgba(255,255,255,.02);
}
.hero-copy h1 {
  margin-top: 14px;
  margin-bottom: 12px;
  font-size: clamp(56px, 8vw, 112px);
}
.hero-copy p {
  max-width: 100%;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.55;
}
.hero-side {
  max-width: 360px;
  justify-self: end;
  align-self: end;
  background: rgba(3,6,18,.42);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  padding: 18px 18px 20px;
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
}
.hero-side h2 {
  margin-bottom: 8px;
  font-size: 16px;
}
.hero-side p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.stats {
  gap: 8px;
}
.stat {
  padding: 12px;
  border-radius: 16px;
}
.stat strong {
  font-size: 22px;
}
@media (max-width: 980px) {
  .hero {
    align-items: flex-end;
    padding: 24px 18px 16px;
  }
  .hero-content {
    width: min(100%, calc(100% - 12px));
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 34vh;
  }
  .hero-copy,
  .hero-side {
    max-width: none;
    justify-self: stretch;
  }
}
@media (max-width: 620px) {
  .hero-content {
    padding-top: 28vh;
  }
  .hero-copy {
    padding: 16px 16px 18px;
    border-radius: 22px;
  }
  .hero-side {
    padding: 15px 15px 17px;
    border-radius: 20px;
  }
  .hero-copy h1 {
    font-size: clamp(48px, 16vw, 82px);
  }
}


.legal-card a {
  color: var(--cyan);
  text-decoration: none;
}
.legal-card a:hover {
  color: #fff;
  text-shadow: 0 0 18px rgba(0,229,255,.45);
}
.legal-card strong {
  color: #fff;
}
@media (max-width: 900px) {
  .public-legal-grid {
    grid-template-columns: 1fr;
  }
}


/* Hero card removal, keep title text only */
.hero-copy {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  max-width: 680px !important;
}
.hero-side {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.hero-content {
  grid-template-columns: minmax(0, 680px) !important;
  justify-content: start !important;
}
.hero-copy .badge {
  display: inline-flex !important;
}
@media (max-width: 930px) {
  .hero-content {
    grid-template-columns: 1fr !important;
  }
}


/* Remove duplicate hero text overlay because title is already in artwork */
.hero-content {
  display: none !important;
}
.hero {
  min-height: 100vh !important;
}
.hero-art,
.hero-video,
.hero-poster {
  width: 100% !important;
  height: 100% !important;
}


/* Static hero mode, intro video disabled */
.hero-video,
.hero-black,
.hero-video-overlay {
  display: none !important;
}
.hero-poster {
  opacity: 1 !important;
  visibility: visible !important;
}
.hero-art {
  background: #000;
}


/* Footer alignment correction */
.footer {
  text-align: left !important;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}
.footer strong,
.footer span,
.footer p {
  text-align: left !important;
}


/* Lyrics auto height, no internal lyric scrollbar */
.lyrics-wrap,
.lyrics-scroll,
.lyrics-panel,
.lyrics-body,
.song-lyrics,
.lyrics {
  max-height: none !important;
}
.lyrics-wrap,
.lyrics-scroll,
.lyrics-panel,
.lyrics-body,
.song-lyrics {
  overflow: visible !important;
}
.lyrics-scroll {
  padding-right: 0 !important;
  scrollbar-width: auto !important;
}
.lyrics-scroll::-webkit-scrollbar {
  display: none !important;
}
.viewer,
.song-viewer,
.song-detail,
.selected-song {
  overflow: visible !important;
}


/* Neon City complete cover display and compact player height */
.viewer {
  overflow: hidden !important;
}
.viewer-top {
  align-items: stretch !important;
}
.viewer-player,
.viewer-art {
  min-height: 0 !important;
  height: clamp(300px, 32vw, 390px) !important;
  max-height: 390px !important;
  overflow: hidden !important;
  background: #03040c !important;
}
.viewer-art {
  position: relative !important;
}
.viewer-art::before {
  content: "";
  position: absolute;
  inset: -20px;
  background-image: var(--cover-bg);
  background-size: cover;
  background-position: center;
  filter: blur(24px) brightness(.38) saturate(.9);
  transform: scale(1.08);
  opacity: .82;
  z-index: 0;
}
.viewer-art img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  z-index: 1 !important;
}
.viewer-art svg {
  position: relative !important;
  z-index: 1 !important;
}
.visualizer-canvas {
  z-index: 2 !important;
}
.viewer-player::after {
  z-index: 3 !important;
}
.viewer-info {
  min-height: clamp(300px, 32vw, 390px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
@media (max-width: 930px) {
  .viewer-player,
  .viewer-art {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
  }
  .viewer-info {
    min-height: auto !important;
    justify-content: flex-start !important;
  }
}


/* Smartphone song navigation and mobile hero correction */
.mobile-song-nav {
  display: none;
}
@media (max-width: 760px) {
  .mobile-song-nav {
    display: block;
    width: min(1180px, calc(100% - 32px));
    margin: 22px auto 0;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    background:
      radial-gradient(circle at 0% 0%, rgba(255,43,214,.11), transparent 38%),
      radial-gradient(circle at 100% 0%, rgba(0,229,255,.10), transparent 36%),
      rgba(7,10,24,.72);
    box-shadow: 0 18px 55px rgba(0,0,0,.26);
    backdrop-filter: blur(14px);
  }
  .mobile-song-nav h2 {
    margin: 0 0 6px;
    font-size: 22px;
    letter-spacing: -.02em;
  }
  .mobile-song-nav p {
    margin: 0 0 14px;
    color: var(--muted);
    line-height: 1.45;
    font-size: 14px;
  }
  .mobile-song-list {
    display: grid;
    gap: 8px;
  }
  .mobile-song-link {
    width: 100%;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    color: #fff;
    background: rgba(255,255,255,.055);
    text-align: left;
    cursor: pointer;
  }
  .mobile-song-link:hover,
  .mobile-song-link.active {
    border-color: rgba(0,229,255,.48);
    background: rgba(0,229,255,.10);
    box-shadow: 0 0 22px rgba(0,229,255,.08);
  }
  .mobile-song-number {
    color: var(--cyan);
    font-weight: 800;
    letter-spacing: .08em;
    font-size: 12px;
  }
  .mobile-song-title {
    line-height: 1.25;
    font-weight: 750;
  }
  .time-item {
    cursor: pointer;
  }
  .time-item.active {
    border-color: rgba(0,229,255,.42);
    background:
      radial-gradient(circle at 0% 0%, rgba(255,43,214,.14), transparent 38%),
      radial-gradient(circle at 100% 0%, rgba(0,229,255,.13), transparent 36%),
      rgba(255,255,255,.065);
  }
  .hero {
    min-height: 72vh !important;
    background: #03040c;
  }
  .hero-art {
    background: #03040c;
  }
  .hero-art img,
  .hero-poster {
    object-fit: contain !important;
    object-position: center center !important;
    background: #03040c;
  }
  .hero::after {
    background: linear-gradient(180deg, rgba(3,4,12,.08), rgba(5,6,17,.34) 72%, #050611 100%) !important;
  }
}
@media (min-width: 761px) {
  .mobile-song-nav {
    display: none !important;
  }
}


/* Neon City timeline tile readability and desktop hover polish */
.time-item {
  color: #fff;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.time-item h3,
.time-item strong,
.time-item .phase {
  color: #fff;
}
.time-item p {
  color: var(--muted);
}
@media (min-width: 761px) {
  .time-item:hover {
    transform: translateY(-2px);
    border-color: rgba(0,229,255,.48);
    background:
      radial-gradient(circle at 0% 0%, rgba(255,43,214,.15), transparent 38%),
      radial-gradient(circle at 100% 0%, rgba(0,229,255,.15), transparent 36%),
      rgba(255,255,255,.075);
    box-shadow: 0 18px 45px rgba(0,0,0,.28), 0 0 28px rgba(0,229,255,.10);
  }
}


/* Compact mobile navigation, aligned with the shortened labels */
.navbar{overflow:hidden}
.nav-inner{flex-wrap:nowrap;min-width:0}
.logo{white-space:nowrap;flex:0 0 auto}
.language-switch{flex-wrap:nowrap;flex:0 0 auto;gap:6px}
.nav-links{flex-wrap:nowrap;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:flex-end;align-items:center}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a,.lang-btn{white-space:nowrap;line-height:1;flex:0 0 auto}
@media(max-width:720px){
  .nav-inner{width:calc(100% - 18px);padding:10px 0;gap:8px;flex-direction:row;align-items:center;justify-content:flex-start}
  .logo{font-size:12px;letter-spacing:.08em;max-width:102px;overflow:hidden;text-overflow:ellipsis}
  .language-switch{gap:4px}
  .lang-btn{font-size:11px;padding:7px 8px;min-height:30px}
  .nav-links{gap:5px;flex:1 1 auto;justify-content:flex-start;padding-bottom:2px}
  .nav-links a{font-size:11px;padding:7px 8px;min-height:30px;display:inline-flex;align-items:center}
}