/* ==========================================================================
   EXPERIENCE LAYER (assets/js/experience.js)
   Cover-driven dynamic palette, spectrum frame, lyrics layer, install panel, skeletons.
   Loaded after style.css so it can refine the base theme.
   ========================================================================== */

/* --- Dynamic palette (colours are extracted from the album cover; JS sets --dyn-*) --- */
@property --dyn-1 { syntax: '<color>'; inherits: true; initial-value: #dfc278; }
@property --dyn-2 { syntax: '<color>'; inherits: true; initial-value: #6082d6; }
@property --dyn-3 { syntax: '<color>'; inherits: true; initial-value: #ba9a42; }
@property --dyn-bg { syntax: '<color>'; inherits: true; initial-value: #080d1a; }
@property --dyn-bg-2 { syntax: '<color>'; inherits: true; initial-value: #182551; }

:root {
  --dyn-1: #dfc278;
  --dyn-2: #6082d6;
  --dyn-3: #ba9a42;
  --dyn-bg: #080d1a;
  --dyn-bg-2: #182551;
  --beat: 0;
  transition: --dyn-1 0.9s ease, --dyn-2 0.9s ease, --dyn-3 0.9s ease, --dyn-bg 0.9s ease, --dyn-bg-2 0.9s ease;
}

/* Page ambience follows the cover (repeated class beats the album theme selectors on purpose) */
body.has-dyn.has-dyn.has-dyn.has-dyn {
  --theme-ambient-glow-1: color-mix(in srgb, var(--dyn-bg-2) 82%, transparent);
  --theme-ambient-glow-2: color-mix(in srgb, var(--dyn-1) 24%, transparent);
}

/* Desktop player bar picks up the same palette */
body.has-dyn .music-player-bar .seekbar-progress {
  background: linear-gradient(90deg, var(--dyn-2), var(--dyn-1));
}
body.has-dyn .music-player-bar .btn-main-play {
  background: linear-gradient(135deg, color-mix(in srgb, var(--dyn-1) 68%, #ffffff), var(--dyn-1) 55%, var(--dyn-2));
}

/* --- Fullscreen mobile player: palette mesh, spectrum frame, beat reactions --- */
#spotifyMobilePlayer.has-dyn.has-dyn {
  background-color: var(--dyn-bg);
  background-image:
    radial-gradient(circle at 50% 14%, color-mix(in srgb, var(--dyn-bg-2) 86%, var(--dyn-1) 14%) 0%, var(--dyn-bg) 64%),
    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.38) 100%);
}

.smp-glow-blob-3 {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  left: -12%;
  bottom: 14%;
  width: 56vw;
  height: 56vw;
  opacity: 0.32;
  background: rgba(100, 120, 200, 0.3);
}

#spotifyMobilePlayer.has-dyn .smp-glow-blob-1 {
  background: color-mix(in srgb, var(--dyn-1) 62%, transparent);
  opacity: 0.44;
  animation: wjMeshA 19s ease-in-out infinite alternate;
}
#spotifyMobilePlayer.has-dyn .smp-glow-blob-2 {
  background: color-mix(in srgb, var(--dyn-2) 58%, transparent);
  opacity: 0.4;
  animation: wjMeshB 23s ease-in-out infinite alternate;
}
#spotifyMobilePlayer.has-dyn .smp-glow-blob-3 {
  background: color-mix(in srgb, var(--dyn-3) 60%, transparent);
  opacity: 0.34;
  animation: wjMeshC 27s ease-in-out infinite alternate;
}
#spotifyMobilePlayer:not(.is-playing) .smp-glow-blob {
  animation-play-state: paused;
}

@keyframes wjMeshA { 0% { transform: translate(0, 0); } 100% { transform: translate(-9vw, 12vw); } }
@keyframes wjMeshB { 0% { transform: translate(0, 0); } 100% { transform: translate(-12vw, -14vw); } }
@keyframes wjMeshC { 0% { transform: translate(0, 0); } 100% { transform: translate(16vw, -10vw); } }

#spotifyMobilePlayer.has-dyn .smp-artwork-aura {
  background: radial-gradient(circle,
    color-mix(in srgb, var(--dyn-1) 58%, transparent) 0%,
    color-mix(in srgb, var(--dyn-2) 16%, transparent) 52%,
    transparent 74%);
}
#spotifyMobilePlayer.has-dyn.is-playing .smp-artwork-img {
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.88), 0 0 40px color-mix(in srgb, var(--dyn-1) 42%, transparent);
}

#spotifyMobilePlayer.has-dyn .smp-seekbar-fill {
  background: linear-gradient(90deg, var(--dyn-2), var(--dyn-1));
  box-shadow: 0 0 10px color-mix(in srgb, var(--dyn-1) 60%, transparent);
}
#spotifyMobilePlayer.has-dyn .smp-btn-main-play {
  background: linear-gradient(135deg, color-mix(in srgb, var(--dyn-1) 66%, #ffffff), var(--dyn-1) 55%, var(--dyn-2));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--dyn-1) 45%, transparent), 0 0 20px color-mix(in srgb, var(--dyn-1) 30%, transparent);
}
#spotifyMobilePlayer.has-dyn.is-playing .smp-btn-main-play {
  animation: wjPlayBreath var(--breath, 2.6s) ease-in-out infinite;
}
@keyframes wjPlayBreath {
  0%, 100% { scale: 1; box-shadow: 0 8px 24px color-mix(in srgb, var(--dyn-1) 38%, transparent), 0 0 18px color-mix(in srgb, var(--dyn-1) 24%, transparent); }
  50% { scale: 1.045; box-shadow: 0 10px 30px color-mix(in srgb, var(--dyn-1) 54%, transparent), 0 0 28px color-mix(in srgb, var(--dyn-1) 38%, transparent); }
}

/* --- Fullscreen lyrics layer (one song, one sheet) --- */
body.lyrics-layer-open {
  overflow: hidden;
}

.smp-lyrics-layer {
  position: fixed;
  inset: 0;
  z-index: 1900;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  color: #ffffff;
  background-color: var(--dyn-bg, #050814);
  background-image:
    radial-gradient(circle at 50% -6%, color-mix(in srgb, var(--dyn-bg-2, #1c2748) 84%, var(--dyn-1, #dfc278) 16%) 0%, var(--dyn-bg, #050814) 68%);
  padding-top: env(safe-area-inset-top, 0px);
  overflow: hidden;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.28s ease, visibility 0s linear 0.42s;
  will-change: transform;
}
.smp-lyrics-layer.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.smp-lyrics-layer.dragging {
  transition: none;
}

.sll-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sll-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
}
.sll-blob-1 { top: -14%; right: -18%; width: 78vw; height: 78vw; background: color-mix(in srgb, var(--dyn-1, #dfc278) 46%, transparent); opacity: 0.5; animation: wjMeshA 21s ease-in-out infinite alternate; scale: calc(1 + var(--beat, 0) * 0.06); }
.sll-blob-2 { top: 38%; left: -26%; width: 70vw; height: 70vw; background: color-mix(in srgb, var(--dyn-2, #6082d6) 44%, transparent); opacity: 0.42; animation: wjMeshB 25s ease-in-out infinite alternate; scale: calc(1 + var(--beat, 0) * 0.05); }
.sll-blob-3 { bottom: -18%; right: -10%; width: 64vw; height: 64vw; background: color-mix(in srgb, var(--dyn-3, #ba9a42) 44%, transparent); opacity: 0.34; animation: wjMeshC 29s ease-in-out infinite alternate; }
.smp-lyrics-layer:not(.is-playing) .sll-blob { animation-play-state: paused; }

.sll-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 6px;
}
.sll-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}
.sll-kicker {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.6);
}
.sll-album {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sll-tools {
  display: flex;
  gap: 6px;
}
.sll-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.95rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease;
}
.sll-icon-btn:active { transform: scale(0.92); }
.sll-tool { width: 36px; height: 36px; font-size: 0.85rem; }
.sll-icon-btn.active {
  background: color-mix(in srgb, var(--dyn-1, #dfc278) 34%, transparent);
  border-color: color-mix(in srgb, var(--dyn-1, #dfc278) 70%, transparent);
  color: #ffffff;
}
.sll-aa { display: inline-flex; align-items: baseline; gap: 1px; font-weight: 800; line-height: 1; }
.sll-aa small { font-size: 0.7rem; }
.sll-aa big { font-size: 1.05rem; }

.sll-scroll {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* tall bottom room: the last section must be able to scroll up to the focus area, not stay stuck low */
  padding: 14px 24px max(190px, 62dvh);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 150px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 150px), transparent 100%);
  scrollbar-width: none;
}
.sll-scroll::-webkit-scrollbar { display: none; }

.sll-titleblock {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sll-cover {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 22px color-mix(in srgb, var(--dyn-1, #dfc278) 30%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.sll-titletext { min-width: 0; }
.sll-title {
  font-family: var(--font-heading);
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.sll-sub {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.62);
}

.sll-body { --sll-font: 1.42rem; }
.smp-lyrics-layer[data-size="s"] .sll-body { --sll-font: 1.16rem; }
.smp-lyrics-layer[data-size="l"] .sll-body { --sll-font: 1.74rem; }

.sll-block {
  margin-bottom: 34px;
  opacity: 0.4;
  transition: opacity 0.4s ease;
  animation: sllRise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.sll-block.is-active { opacity: 1; }
.sll-block.kind-chorus,
.sll-block.kind-prechorus {
  padding-left: 14px;
  border-left: 3px solid color-mix(in srgb, var(--dyn-1, #dfc278) 75%, transparent);
}
.sll-block.kind-prechorus { border-left-style: dashed; }
.sll-block.kind-intro .sll-line,
.sll-block.kind-outro .sll-line { font-style: italic; font-weight: 600; }

.sll-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dyn-1, #dfc278) 78%, #ffffff);
}
.sll-tag::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--dyn-1, #dfc278) 45%, transparent), transparent);
}
.sll-line {
  margin: 0 0 0.28em;
  font-family: var(--font-heading);
  font-size: var(--sll-font);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -0.005em;
  color: #ffffff;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

@keyframes sllRise {
  from { opacity: 0; transform: translateY(16px); }
}

.sll-empty {
  text-align: center;
  padding: 60px 10px;
  color: rgba(255, 255, 255, 0.65);
}
.sll-empty i { font-size: 2rem; color: var(--dyn-1, #dfc278); margin-bottom: 14px; }

.sll-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.sll-end-dot { opacity: 0.6; }

/* Lyrics skeleton */
.sll-skel-block { margin-bottom: 34px; }
.sll-skel-tag { display: block; width: 74px; height: 10px; margin-bottom: 16px; }
.sll-skel-line { display: block; height: 22px; margin-bottom: 12px; border-radius: 10px; }

.sll-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 34px 22px max(14px, env(safe-area-inset-bottom, 14px));
  background: linear-gradient(to top, var(--dyn-bg, #050814) 58%, transparent);
  pointer-events: none;
}
.sll-dock > * { pointer-events: auto; }
.sll-progress {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.sll-progress::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}
.sll-progress-fill {
  position: relative;
  height: 4px;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dyn-2, #6082d6), var(--dyn-1, #dfc278));
  box-shadow: 0 0 10px color-mix(in srgb, var(--dyn-1, #dfc278) 55%, transparent);
}
.sll-progress-fill::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
.sll-times {
  display: flex;
  justify-content: space-between;
  margin-top: -2px;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.6);
}
.sll-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 6px;
}
.sll-ctrl {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.2rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}
.sll-ctrl:active { transform: scale(0.88); }
.sll-play {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #060b18;
  font-size: 1.3rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--dyn-1, #dfc278) 66%, #ffffff), var(--dyn-1, #dfc278) 55%, var(--dyn-2, #6082d6));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--dyn-1, #dfc278) 45%, transparent);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}
.sll-play:active { transform: scale(0.92); }

@media (min-width: 769px) {
  /* The layer is a phone-sized sheet; keep it readable if it is ever opened on a wide screen */
  .smp-lyrics-layer .sll-scroll { padding-left: max(24px, calc(50% - 300px)); padding-right: max(24px, calc(50% - 300px)); }
  .smp-lyrics-layer .sll-dock { padding-left: max(22px, calc(50% - 300px)); padding-right: max(22px, calc(50% - 300px)); }
}

/* --- Install panel (inside Settings) --- */
.install-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(6, 10, 22, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.install-panel.attention {
  animation: installAttention 1.8s ease;
}
@keyframes installAttention {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  30% { box-shadow: 0 0 0 4px var(--gold-glow), 0 0 28px var(--gold-glow); border-color: var(--gold-primary); }
}
.install-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.install-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-highlight);
  box-shadow: 0 0 16px var(--gold-glow);
}
.install-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.install-meta strong { font-size: 0.92rem; color: var(--text-white); }
.install-meta span { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }
.install-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
}
.install-panel[data-state="prompt"] .install-badge {
  color: #061018;
  background: var(--gold-gradient);
  border-color: transparent;
}
.install-panel[data-state="installed"] .install-badge {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.4);
}
.install-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.install-perks i {
  width: 18px;
  text-align: center;
  margin-right: 6px;
  color: var(--gold-light);
}
.install-panel[data-state="installed"] .install-perks { display: none; }
.install-btn[hidden],
.install-steps[hidden] { display: none !important; }
.install-btn { width: 100%; flex: none; }
.install-steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.install-steps li {
  counter-increment: step;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-light);
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.install-steps li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #061018;
  background: var(--gold-gradient);
}
.install-steps li span { flex: 1; min-width: 0; }
.install-steps li i { color: var(--gold-light); }

.shortcut-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(6, 10, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.76rem;
  color: var(--text-muted);
}
.shortcut-grid kbd {
  display: inline-block;
  min-width: 22px;
  margin-right: 4px;
  padding: 1px 6px;
  border-radius: 6px;
  font: 700 0.72rem var(--font-body);
  text-align: center;
  color: var(--gold-light);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-subtle);
  border-bottom-width: 2px;
}
@media (hover: none) and (pointer: coarse) {
  .shortcut-section { display: none; }
}

/* --- Install prompt (one gentle bottom sheet) --- */
.install-prompt {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--player-height, 90px) + 14px + env(safe-area-inset-bottom, 0px));
  z-index: 1500;
  max-width: 540px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 14px;
  align-items: center;
  padding: 16px 18px 14px;
  border-radius: 22px;
  background: rgba(10, 16, 34, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--border-highlight);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 36px var(--gold-glow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.1);
}
.install-prompt.show { opacity: 1; transform: translateY(0) scale(1); }
.install-prompt-glow {
  position: absolute;
  inset: -40% -10% auto auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-glow), transparent 70%);
  pointer-events: none;
}
.install-prompt-icon {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-highlight);
}
.install-prompt-text { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 18px; }
.install-prompt-text strong { font-family: var(--font-heading); font-size: 1rem; color: var(--text-white); }
.install-prompt-text span { font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); }
.install-prompt-actions {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}
.install-prompt-actions button {
  flex: 1;
  padding: 10px 14px;
  border-radius: 12px;
  font: 700 0.84rem var(--font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.install-prompt-yes {
  border: none;
  color: #061018;
  background: var(--gold-gradient);
  box-shadow: 0 6px 18px var(--gold-glow);
}
.install-prompt-no {
  color: var(--text-light);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.install-prompt-x {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
body.mobile-player-open .install-prompt,
body.lyrics-layer-open .install-prompt { display: none; }
@media (min-width: 769px) {
  .install-prompt { left: auto; right: 24px; margin: 0; width: 400px; }
}

/* --- Skeleton loading --- */
.skel {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.skel::after,
.wj-booting .tracklist-container .track-item::after,
.wj-booting .tracklist-container .all-track-row::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  animation: skelSweep 1.35s ease-in-out infinite;
}
@keyframes skelSweep { to { transform: translateX(100%); } }
@keyframes skelPulse { 50% { opacity: 0.55; } }
@keyframes skelBg { to { background-position: -150% 0; } }
@keyframes wjFadeUp { from { opacity: 0; transform: translateY(14px); } }

/* Cover images shimmer until their pixels arrive */
img.is-img-loading {
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.06) 70%) 0 0 / 250% 100%;
  animation: skelBg 1.25s linear infinite;
}

/* First paint: tracklist rows are placeholders until the page is ready */
.wj-booting .tracklist-container .track-item,
.wj-booting .tracklist-container .all-track-row {
  position: relative;
  overflow: hidden;
  pointer-events: none;
  min-height: 66px;
}
.wj-booting .tracklist-container .track-item > *,
.wj-booting .tracklist-container .all-track-row > * {
  opacity: 0 !important;
}
.wj-booting .tracklist-container .track-item::before,
.wj-booting .tracklist-container .all-track-row::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle 17px at 40px 50%, rgba(255, 255, 255, 0.1) 98%, transparent 100%),
    linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) 80px calc(50% - 10px) / min(46%, 260px) 12px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)) 80px calc(50% + 9px) / min(26%, 150px) 9px no-repeat;
  animation: skelPulse 1.4s ease-in-out infinite;
}
.wj-booted .tracklist-container .track-item,
.wj-booted .tracklist-container .all-track-row {
  animation: wjFadeUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Album switch: incoming rows rise in one after another */
.tl-enter .track-item,
.tl-enter .all-track-row {
  animation: wjFadeUp 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--tl-i, 0) * 38ms);
}

@media (prefers-reduced-motion: reduce) {
  .skel::after,
  .wj-booting .tracklist-container .track-item::after,
  .wj-booting .tracklist-container .all-track-row::after,
  img.is-img-loading,
  .sll-blob,
  #spotifyMobilePlayer.has-dyn .smp-glow-blob,
  .sll-block,
  .tl-enter .track-item,
  .tl-enter .all-track-row,
  .wj-booted .tracklist-container .track-item,
  .wj-booted .tracklist-container .all-track-row {
    animation: none !important;
  }
  :root { transition: none; }
}

/* Desktop hero visualizer: soft and see-through */
/* --- Fullscreen player: round soft-border header buttons, square smaller cover, calmer spacing --- */
.smp-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 2px 0 10px;
}
.smp-header-left { justify-self: start; display: flex; gap: 8px; }
.smp-header-actions { justify-self: end; display: flex; gap: 8px; }
/* Three action buttons must fit beside the title on narrow phones */
@media (max-width: 420px) {
  .smp-header-left, .smp-header-actions { gap: 6px; }
  .smp-header .smp-round-btn { width: 36px; height: 36px; font-size: 0.85rem; }
}

.smp-round-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.95rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease;
}
.smp-round-btn:active { transform: scale(0.92); }
.smp-round-btn.active {
  background: color-mix(in srgb, var(--dyn-1, #dfc278) 34%, transparent);
  border-color: color-mix(in srgb, var(--dyn-1, #dfc278) 70%, transparent);
}
.smp-repeat-btn.repeat-one::after {
  content: '1';
  position: absolute;
  right: 7px;
  bottom: 6px;
  font-size: 0.55rem;
  font-weight: 900;
  line-height: 1;
}

/* Cover: square corners, a little smaller */
.smp-artwork-card {
  width: min(68vw, 300px, 32vh);
  width: min(68vw, 300px, 32dvh);
}
.smp-artwork-img {
  border-radius: 0;
}
.smp-artwork-aura,
.smp-artwork-aurora {
  border-radius: 4px;
}
@media (max-height: 700px) {
  .smp-artwork-card {
    width: min(60vw, 27vh);
    width: min(60vw, 27dvh);
  }
}

/* Arrangement picker: no title line, a little air below the cover */
.smp-versions-head { display: none; }
.smp-versions { margin-top: 20px; }

/* Header title may wrap to two lines between the round buttons instead of colliding with them */
.smp-header-context { min-width: 0; padding: 0 2px; }
.smp-context-label {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.6rem;
}
.smp-context-album {
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  font-size: 0.8rem;
  line-height: 1.25;
  text-wrap: balance;
}

/* Cover is centred in the space between the header and the arrangement card, nudged a little
   above true centre so the gap above and below reads as even (phones, tablets, tall screens) */
.smp-artwork-section {
  align-items: center;
  padding-bottom: 6px;
}
@media (min-height: 701px) and (max-height: 779px) {
  .smp-artwork-card {
    width: min(80vw, 360px, 37vh);
    width: min(80vw, 360px, 37dvh);
  }
}
@media (min-height: 780px) {
  .smp-artwork-card {
    width: min(82vw, 380px, 40vh);
    width: min(82vw, 380px, 40dvh);
  }
}
.smp-versions { margin-top: 10px; }

/* Free height is shared 2 : 1 between the cover area (the cover sits centred in it, so half of its share
   is the gap under the cover) and the space under the version picker, which makes the picker sit midway
   between the cover and the song title at any screen height */
.smp-artwork-section { flex: 2 1 auto; }
.smp-versions { flex: 1 1 auto; margin-top: 0; }


/* ==========================================================================
   FULL PLAYER MOTION: cover swap / drag / preview, waveform seek bar, tempo breathing
   ========================================================================== */

/* --- Cover: follows the finger, snaps back, or glides away --- */
.smp-artwork-section {
  touch-action: pan-y;
}
.smp-artwork-card {
  translate: var(--drag-x, 0px) 0;
  rotate: var(--drag-rot, 0deg);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.smp-artwork-card.is-dragging {
  transition: none;
}
.smp-artwork-card.is-snapback {
  transition: translate 0.45s cubic-bezier(0.3, 1.35, 0.4, 1), rotate 0.45s cubic-bezier(0.3, 1.35, 0.4, 1);
}
.smp-artwork-img {
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease, box-shadow 0.45s ease, filter 0.25s ease;
}
.smp-artwork-card.will-commit .smp-artwork-img {
  filter: brightness(1.07);
}

/* Outgoing cover (a clone) glides away while the real one glides in. Individual transform
   properties (translate / rotate / scale) are used so they never fight the play / pause scaling. */
.smp-art-ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.smp-art-hold {
  opacity: 0 !important;
  transition: none !important;
}
.smp-art-in {
  animation: smpCoverInSlide 0.56s cubic-bezier(0.2, 0.85, 0.25, 1) backwards;
}
.smp-art-out {
  animation: smpCoverOutSlide 0.46s cubic-bezier(0.4, 0.1, 0.3, 1) both;
}
.smp-artwork-card[data-motion="version"] .smp-art-in {
  animation: smpCoverInDisc 0.8s cubic-bezier(0.2, 0.9, 0.25, 1) backwards;
}
.smp-artwork-card[data-motion="version"] .smp-art-out {
  animation: smpCoverOutDisc 0.62s cubic-bezier(0.4, 0.1, 0.3, 1) both;
}

@keyframes smpCoverInSlide {
  from {
    opacity: 0;
    translate: calc(var(--dir, 1) * 34%) 0;
    rotate: calc(var(--dir, 1) * 7deg);
    scale: 0.9;
    filter: blur(5px);
  }
}
@keyframes smpCoverOutSlide {
  from {
    translate: var(--gx, 0px) 0;
    rotate: var(--gr, 0deg);
  }
  to {
    opacity: 0;
    translate: calc(var(--dir, 1) * -34%) 0;
    rotate: calc(var(--dir, 1) * -7deg);
    scale: 0.9;
    filter: blur(5px);
  }
}
/* Version change: the record is swapped, a soft twirl and cross-dissolve rather than a slide */
@keyframes smpCoverInDisc {
  from {
    opacity: 0;
    scale: 0.8;
    rotate: calc(var(--dir, 1) * 18deg);
    filter: blur(10px) saturate(0.7);
  }
  40% {
    opacity: 1;
  }
}
@keyframes smpCoverOutDisc {
  45% {
    opacity: 0.9;
  }
  to {
    opacity: 0;
    scale: 1.1;
    rotate: calc(var(--dir, 1) * -18deg);
    filter: blur(10px) saturate(0.7);
  }
}

/* A single soft ripple leaves the cover when something new arrives */
.smp-artwork-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border: 1.5px solid color-mix(in srgb, var(--dyn-1, #dfc278) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.smp-artwork-card.smp-bloom::after {
  animation: smpRipple 1s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes smpRipple {
  from { opacity: 0.55; scale: 0.96; }
  to { opacity: 0; scale: 1.22; }
}

/* Title and artist slip in from the side the song came from */
.smp-meta-swap .smp-track-title {
  animation: smpMetaIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.smp-meta-swap .smp-track-artist {
  animation: smpMetaIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.07s backwards;
}
@keyframes smpMetaIn {
  from {
    opacity: 0;
    translate: calc(var(--dir, 1) * 22px) 0;
    filter: blur(4px);
  }
}

/* --- Press and hold: peek at the next song for 10 seconds --- */
.smp-preview-ring {
  position: absolute;
  inset: -7px;
  border-radius: 29px;
  padding: 2.5px;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: conic-gradient(from -90deg,
    color-mix(in srgb, var(--dyn-1, #dfc278) 85%, #ffffff) calc(var(--pv, 0) * 360deg),
    rgba(255, 255, 255, 0.12) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
#spotifyMobilePlayer.smp-previewing .smp-preview-ring {
  opacity: 1;
}
#spotifyMobilePlayer.smp-previewing .smp-artwork-img {
  transform: scale(1.04);
  opacity: 1;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 44px color-mix(in srgb, var(--dyn-1, #dfc278) 42%, transparent);
}
.smp-preview-chip {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 5;
  translate: -50% 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 24px);
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(8, 12, 22, 0.62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 0.72rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, translate 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}
#spotifyMobilePlayer.smp-previewing .smp-preview-chip {
  opacity: 1;
  translate: -50% 0;
}
.smp-preview-chip i {
  color: var(--dyn-1, #dfc278);
  font-size: 0.8rem;
}
.smp-preview-label {
  opacity: 0.6;
  font-weight: 500;
}
.smp-preview-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}
.smp-preview-time {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* --- Waveform seek bar --- */
.smp-seekbar-track.smp-seekbar-wave {
  height: 56px;
  overflow: visible;
}
.smp-seekbar-wave::before,
.smp-seekbar-wave .smp-seekbar-fill,
.smp-seekbar-wave .smp-seekbar-thumb {
  display: none;
}
.smp-wave-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.smp-wave-bubble {
  position: absolute;
  top: -22px;
  left: 0;
  translate: -50% 6px;
  scale: 0.85;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #0b1020;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, translate 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), scale 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.smp-wave-bubble.show {
  opacity: 1;
  translate: -50% 0;
  scale: 1;
}
.smp-seekbar-wave:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--dyn-1, #dfc278) 70%, transparent);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Loading inside the full player: the waveform shimmers and a thin arc circles the play button */
#spotifyMobilePlayer.is-loading .smp-wave-canvas {
  animation: smpWaveLoad 1.3s ease-in-out infinite;
}
@keyframes smpWaveLoad {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}

/* --- Play button: breathes at the song's tempo (--breath is set per track), with a soft ring --- */
.smp-btn-main-play {
  position: relative;
}
.smp-btn-main-play::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--dyn-1, #dfc278) 60%, transparent);
  opacity: 0;
  pointer-events: none;
}
#spotifyMobilePlayer.is-playing .smp-btn-main-play::before {
  animation: wjBreathRing var(--breath, 2.6s) ease-out infinite;
}
@keyframes wjBreathRing {
  0% { opacity: 0.45; scale: 1; }
  70%, 100% { opacity: 0; scale: 1.42; }
}
.smp-btn-main-play::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: color-mix(in srgb, var(--dyn-1, #dfc278) 85%, #ffffff);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#spotifyMobilePlayer.is-loading .smp-btn-main-play::after {
  opacity: 1;
  animation: smpSpin 0.9s linear infinite;
}
@keyframes smpSpin {
  to { rotate: 360deg; }
}

@media (max-width: 768px) and (max-height: 700px) {
  .smp-seekbar-track.smp-seekbar-wave {
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smp-art-in,
  .smp-art-out,
  .smp-meta-swap .smp-track-title,
  .smp-meta-swap .smp-track-artist,
  .smp-artwork-card.smp-bloom::after,
  #spotifyMobilePlayer.has-dyn.is-playing .smp-btn-main-play,
  #spotifyMobilePlayer.is-playing .smp-btn-main-play::before {
    animation: none !important;
  }
}


/* ==========================================================================
   SHUFFLE PICKER, VERSION CRATE REFINEMENT, PHONE PLAYER BAR
   ========================================================================== */

/* --- Time row: current time | shuffle pill | total time --- */
.smp-time-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.smp-time-row .smp-time-text:first-child {
  justify-self: start;
}
.smp-time-row .smp-time-text:last-child {
  justify-self: end;
}
/* Shuffle pill and repeat button side by side */
.smp-time-mid {
  display: flex;
  align-items: center;
  gap: 6px;
}
.smp-time-mid .smp-repeat-btn {
  width: 26px;
  height: 26px;
  font-size: 0.7rem;
}
.smp-time-mid .smp-repeat-btn.repeat-one::after {
  right: 3px;
  bottom: 2px;
  font-size: 0.5rem;
}
.smp-time-mid .smp-repeat-btn.active {
  color: color-mix(in srgb, var(--dyn-1, #dfc278) 82%, #ffffff);
}

/* Gentle breathing for buttons that invite a tap (lyrics, lyric card) */
@keyframes wjBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--dyn-1, #dfc278) 0%, transparent); }
  50% { transform: scale(1.07); box-shadow: 0 0 14px 1px color-mix(in srgb, var(--dyn-1, #dfc278) 42%, transparent); }
}
.wj-breathe:not(.active) { animation: wjBreathe 3.6s ease-in-out infinite; }
.wj-breathe:active { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .wj-breathe:not(.active) { animation: none; }
}
.smp-shuffle-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.66);
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.smp-shuffle-pill i {
  font-size: 0.7rem;
}
.smp-shuffle-pill:active {
  transform: scale(0.94);
}
.smp-shuffle-pill.is-on {
  color: color-mix(in srgb, var(--dyn-1, #dfc278) 82%, #ffffff);
  background: color-mix(in srgb, var(--dyn-1, #dfc278) 16%, transparent);
  border-color: color-mix(in srgb, var(--dyn-1, #dfc278) 38%, transparent);
}

/* --- Picker popover --- */
.wj-shuffle-menu {
  position: fixed;
  z-index: 2600;
  padding: 6px;
  border-radius: 20px;
  background: rgba(14, 18, 30, 0.9);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.97);
  transform-origin: var(--arrow-x, 50%) 100%;
  transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s linear 0.26s;
}
.wj-shuffle-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.wj-shuffle-arrow {
  position: absolute;
  bottom: -6px;
  left: var(--arrow-x, 50%);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: rgba(14, 18, 30, 0.96);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transform: rotate(45deg);
  border-bottom-right-radius: 3px;
}
.wj-shuffle-opt {
  display: grid;
  grid-template-columns: 34px 1fr 18px;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease;
}
.wj-shuffle-opt:hover,
.wj-shuffle-opt:active {
  background: rgba(255, 255, 255, 0.07);
}
.wj-shuffle-opt.is-selected {
  background: color-mix(in srgb, var(--dyn-1, #dfc278) 15%, transparent);
}
.wj-shuffle-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
}
.wj-shuffle-opt.is-selected .wj-shuffle-ico {
  background: color-mix(in srgb, var(--dyn-1, #dfc278) 26%, transparent);
  color: color-mix(in srgb, var(--dyn-1, #dfc278) 80%, #ffffff);
}
.wj-shuffle-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wj-shuffle-txt strong {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.9rem;
  font-weight: 700;
}
.wj-shuffle-txt small {
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.58);
}
.wj-shuffle-check {
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--dyn-1, #dfc278) 85%, #ffffff);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.3, 1.4, 0.4, 1);
}
.wj-shuffle-opt.is-selected .wj-shuffle-check {
  opacity: 1;
  transform: none;
}

/* Desktop bar button */
.btn-ctrl.btn-shuffle.active {
  color: var(--gold-light);
  text-shadow: 0 0 10px var(--gold-primary);
}

/* --- Version crate: smaller discs on a lighter, glassier card --- */
.smp-versions {
  padding: 2px 16px 6px;
}
.smp-versions-rail {
  padding: 4px 4px 3px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}
.smp-versions-halo {
  top: 4px;
  width: 42px;
  height: 42px;
}
.smp-vdisc {
  gap: 2px;
}
.smp-vdisc-art {
  width: 32px;
  height: 32px;
  margin: 5px 0 3px;
}
.smp-vdisc-tag {
  font-size: 0.5rem;
}

@media (max-width: 768px) and (max-height: 700px) {
  .smp-versions-halo {
    top: 3px;
    width: 36px;
    height: 36px;
  }
  .smp-vdisc-art {
    width: 28px;
    height: 28px;
    margin: 4px 0 0;
  }
  .smp-versions-rail {
    padding: 3px 4px;
  }
}

/* --- Phone player bar: only previous / play / next, and no mini equaliser --- */
@media (max-width: 768px) {
  .music-player-bar #btnSeekBack10,
  .music-player-bar #btnSeekForward10,
  .music-player-bar .player-audio-wave {
    display: none !important;
  }
}

/* --- Lyric share card: pick lines, then a 9:16 preview sheet --- */
.sll-selectbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px max(16px, env(safe-area-inset-bottom, 16px));
  background: color-mix(in srgb, var(--dyn-bg, #050814) 92%, transparent);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0.3s;
}
.smp-lyrics-layer.is-selecting .sll-selectbar {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
.smp-lyrics-layer.is-selecting .sll-dock { visibility: hidden; }
.sll-selecttext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sll-selecttext strong { font-size: 0.92rem; }
.sll-selecttext span { font-size: 0.7rem; color: rgba(255, 255, 255, 0.58); }

.sll-select-btn {
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, opacity 0.2s ease;
}
.sll-select-btn:active { transform: scale(0.96); }
.sll-select-btn.ghost { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); }
.sll-select-btn.primary {
  background: var(--dyn-1, #dfc278);
  border: 0;
  color: #0b0d14;
}
.sll-select-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* While picking, every block is fully readable and lines act as buttons */
.smp-lyrics-layer.is-selecting .sll-block { opacity: 1; }
.smp-lyrics-layer.is-selecting .sll-scroll { padding-bottom: 130px; user-select: none; -webkit-user-select: none; }
.smp-lyrics-layer.is-selecting .sll-line {
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.sll-line.is-picked {
  background: color-mix(in srgb, var(--dyn-1, #dfc278) 30%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--dyn-1, #dfc278) 30%, transparent);
}

.wj-card-sheet {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(3, 5, 10, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.wj-card-sheet.open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.wjc-panel {
  width: min(100%, 420px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #ffffff;
  transform: translateY(18px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.wj-card-sheet.open .wjc-panel { transform: none; }
.wjc-top { display: flex; align-items: center; justify-content: space-between; }
.wjc-top strong { font-family: var(--font-heading); font-size: 1.05rem; }
.wjc-stage {
  min-height: 0;
  display: flex;
  justify-content: center;
}
.wjc-stage canvas {
  display: block;
  height: min(52dvh, 480px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: box-shadow 0.3s ease;
}
/* Preview size per format; the panel widens for the landscape card */
.wj-card-sheet[data-format="story"] .wjc-stage canvas { height: min(46dvh, 440px); }
.wj-card-sheet[data-format="square"] .wjc-stage canvas {
  height: auto;
  width: min(100%, 420px, 46dvh);
  aspect-ratio: 1 / 1;
}
.wj-card-sheet[data-format="wide"] .wjc-stage canvas {
  height: auto;
  width: min(100%, 760px);
  aspect-ratio: 16 / 9;
}
.wj-card-sheet[data-format="wide"] .wjc-panel { width: min(100%, 760px); }
.wjc-stage { align-items: center; min-height: min(46dvh, 240px); }

/* Album look: four covers, the chosen one is ringed */
.wjc-albums {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.wjc-alb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 2px 5px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.wjc-alb img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.18);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.wjc-alb:hover { color: #ffffff; }
.wjc-alb:active { transform: scale(0.96); }
.wjc-alb.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}
.wjc-alb.active img { border-color: #ffffff; transform: scale(1.06); }
@media (max-height: 760px) {
  .wjc-alb { flex-direction: row; justify-content: center; gap: 6px; padding: 4px 2px; }
  .wjc-alb img { width: 24px; height: 24px; border-radius: 7px; }
}

/* Format switch: segmented control, each option shows the shape of its card */
.wjc-formats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.wjc-fmt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 6px;
  border-radius: 12px;
  border: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.wjc-fmt:hover { color: #ffffff; }
.wjc-fmt:active { transform: scale(0.97); }
.wjc-fmt small { font-size: 0.64rem; font-weight: 600; opacity: 0.6; }
.wjc-fmt.active { color: #0b0d14; background: #ffffff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.wjc-fmt-shape {
  flex: none;
  display: block;
  border: 2px solid currentColor;
  border-radius: 3px;
}
.wjc-fmt[data-format="story"] .wjc-fmt-shape { width: 11px; height: 19px; }
.wjc-fmt[data-format="square"] .wjc-fmt-shape { width: 15px; height: 15px; }
.wjc-fmt[data-format="wide"] .wjc-fmt-shape { width: 21px; height: 12px; }
@media (max-width: 400px) {
  .wjc-fmt small { display: none; }
  .wjc-fmt { font-size: 0.74rem; gap: 6px; }
}
.wjc-styles { display: flex; justify-content: center; gap: 8px; }
.wjc-chip {
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
}
.wjc-chip.active { color: #0b0d14; background: #ffffff; border-color: #ffffff; }
.track-item.is-shared { animation: wjSharedPulse 1.1s ease-in-out 3; }
@keyframes wjSharedPulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 2px var(--gold-primary, #BA9A42), 0 0 28px var(--gold-glow, rgba(186, 154, 66, 0.35)); }
}
.wjc-size { display: flex; align-items: center; justify-content: center; gap: 10px; }
.wjc-size-a { font-family: var(--font-heading); font-weight: 800; color: rgba(255, 255, 255, 0.7); }
.wjc-size input[type="range"] { flex: 1; max-width: 240px; accent-color: #ffffff; cursor: pointer; }
.wjc-size .wjc-chip { height: 30px; padding: 0 12px; }
.wjc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wjc-actions .sll-select-btn { height: 46px; }
.wjc-actions .sll-select-btn.primary { background: #ffffff; }

/* ==========================================================================
   Settings v2: tabs (Suara / Offline / Aplikasi), equalizer console with a live curve, preset cards.
   Accent = --dyn-1 (palette of the active cover) with the gold as fallback.
   ========================================================================== */
.eq-modal-card {
  --eq-accent: var(--dyn-1, #dfc278);
  --eq-glass: rgba(255, 255, 255, 0.05);
  --eq-line: rgba(255, 255, 255, 0.08);
  max-width: 700px;
  max-height: 90vh;
  max-height: 90dvh;
  border-radius: 26px;
  background:
    radial-gradient(120% 60% at 50% -12%, color-mix(in srgb, var(--eq-accent) 22%, transparent), transparent 62%),
    linear-gradient(165deg, #131d3d 0%, #0a1024 100%);
  border: 1px solid color-mix(in srgb, var(--eq-accent) 40%, transparent);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 60px color-mix(in srgb, var(--eq-accent) 16%, transparent);
}

.eq-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 1.35rem 4rem 1rem 1.5rem;
}

.eq-modal-header-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.1rem;
  color: #0a1024;
  background: radial-gradient(circle at 35% 30%, #fff4cf, var(--eq-accent) 55%, color-mix(in srgb, var(--eq-accent) 55%, #000));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--eq-accent) 45%, transparent), 0 0 0 4px color-mix(in srgb, var(--eq-accent) 18%, transparent);
}

.eq-modal-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
}

.eq-modal-subtitle {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.eq-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}

/* ---------- Tabs ---------- */
.eq-modal-card[data-tab="offline"] { --i: 1; }
.eq-modal-card[data-tab="app"] { --i: 2; }

.eq-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 1.5rem;
  padding: 4px;
  border-radius: 16px;
  background: var(--eq-glass);
  border: 1px solid var(--eq-line);
}

.eq-tab-ink {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--eq-accent) 92%, #fff), color-mix(in srgb, var(--eq-accent) 70%, #000));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--eq-accent) 35%, transparent);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform 0.4s cubic-bezier(0.34, 1.25, 0.5, 1);
}

.eq-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 6px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--text-muted);
  font: 600 0.84rem var(--font-body);
  cursor: pointer;
  transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.eq-tab.active { color: #0a1024; font-weight: 700; }
.eq-tab:not(.active):hover { color: #fff; }

/* ---------- Body ---------- */
.eq-modal-body {
  padding: 1.1rem 1.5rem 1.4rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.eq-pane.active { animation: eqPaneIn 0.35s ease both; }
@keyframes eqPaneIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.eq-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}

.eq-pane > .eq-block-head:not(:first-child) { margin-top: 22px; }

.eq-block-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eq-accent);
}

.eq-curve-name {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: color-mix(in srgb, var(--eq-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--eq-accent) 40%, transparent);
}

/* ---------- Equalizer console ---------- */
.eq-console {
  --eq-h: 190px;
  --eq-t: 24px;
  padding: 14px 8px 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(4, 8, 20, 0.9), rgba(10, 16, 36, 0.85));
  border: 1px solid var(--eq-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 30px rgba(0, 0, 0, 0.35);
}

.eq-gain-row,
.eq-freq-row,
.eq-track-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.eq-gain-val {
  text-align: center;
  font: 700 0.74rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.eq-gain-val.positive { color: #4ade80; }
.eq-gain-val.negative { color: #fb923c; }

.eq-track-row {
  position: relative;
  height: var(--eq-h);
  margin: 8px 0 10px;
}

.eq-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.eq-grid line {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}

.eq-grid line.zero {
  stroke: rgba(255, 255, 255, 0.24);
  stroke-dasharray: none;
}

.eq-curve-area { fill: url(#eqFillGrad); }

.eq-curve-line {
  fill: none;
  stroke: var(--eq-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--eq-accent) 70%, transparent));
}

.eq-console.is-bypass .eq-curve { opacity: 0.2; }
.eq-console.is-bypass .eq-slider-vertical { opacity: 0.45; }

.eq-slider-track {
  position: relative;
  height: 100%;
}

/* Horizontal range rotated to vertical: works in every browser, unlike appearance: slider-vertical */
.eq-slider-vertical {
  --p: 0.5;
  --x: calc(var(--eq-t) / 2 + var(--p) * (100% - var(--eq-t)));
  --eq-fill: linear-gradient(to right,
    rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0.14) min(var(--x), 50%),
    var(--eq-accent) min(var(--x), 50%), var(--eq-accent) max(var(--x), 50%),
    rgba(255, 255, 255, 0.14) max(var(--x), 50%), rgba(255, 255, 255, 0.14) 100%);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--eq-h);
  height: 44px;
  margin: 0;
  background: none;
  cursor: pointer;
  touch-action: none;
  -webkit-appearance: none;
  appearance: none;
  transform: translate(-50%, -50%) rotate(-90deg);
  transition: opacity 0.2s ease;
}

.eq-slider-vertical:focus { outline: none; }
.eq-slider-vertical:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--eq-accent) 55%, transparent); }

.eq-slider-vertical::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--eq-fill);
}

.eq-slider-vertical::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--eq-t);
  height: var(--eq-t);
  margin-top: -9px;
  border-radius: 50%;
  border: 2px solid #0a1024;
  background: radial-gradient(circle at 35% 30%, #fff4cf, var(--eq-accent) 55%, color-mix(in srgb, var(--eq-accent) 55%, #000));
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), 0 0 0 3px color-mix(in srgb, var(--eq-accent) 28%, transparent);
  transition: transform 0.15s ease;
}

.eq-slider-vertical:active::-webkit-slider-thumb { transform: scale(1.15); }

.eq-slider-vertical::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--eq-fill);
}

.eq-slider-vertical::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--eq-t);
  height: var(--eq-t);
  border-radius: 50%;
  border: 2px solid #0a1024;
  background: radial-gradient(circle at 35% 30%, #fff4cf, var(--eq-accent) 55%, color-mix(in srgb, var(--eq-accent) 55%, #000));
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), 0 0 0 3px color-mix(in srgb, var(--eq-accent) 28%, transparent);
}

.eq-freq-row > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
}

.eq-freq-row b {
  font: 700 0.76rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #fff;
}

.eq-freq-row span {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Actions ---------- */
.eq-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.eq-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 8px;
  border-radius: 14px;
  background: var(--eq-glass);
  border: 1px solid var(--eq-line);
  color: var(--text-light, #e2e8f0);
  font: 600 0.8rem var(--font-body);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.eq-act:hover { background: rgba(255, 255, 255, 0.09); border-color: color-mix(in srgb, var(--eq-accent) 45%, transparent); }
.eq-act:active { transform: scale(0.97); }
.eq-act.active {
  color: #0a1024;
  background: var(--eq-accent);
  border-color: transparent;
}

.eq-save-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.eq-save-form[hidden] { display: none; }

.eq-save-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--eq-accent) 45%, transparent);
  background: rgba(4, 8, 20, 0.7);
  color: #fff;
  font: 500 0.86rem var(--font-body);
}

.eq-save-form input:focus { outline: 2px solid var(--eq-accent); outline-offset: 1px; }

.eq-save-ok,
.eq-save-cancel {
  padding: 0 14px;
  border-radius: 12px;
  font: 700 0.8rem var(--font-body);
  cursor: pointer;
}

.eq-save-ok { border: 0; background: var(--eq-accent); color: #0a1024; }
.eq-save-cancel { border: 1px solid var(--eq-line); background: none; color: var(--text-muted); }

/* ---------- Presets ---------- */
.eq-block-head-presets { flex-wrap: wrap; }

.eq-chips {
  display: flex;
  gap: 6px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.eq-chips::-webkit-scrollbar { display: none; }

.eq-chip {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--eq-line);
  background: none;
  color: var(--text-muted);
  font: 600 0.72rem var(--font-body);
  cursor: pointer;
  transition: all 0.2s ease;
}

.eq-chip:hover { color: #fff; border-color: color-mix(in srgb, var(--eq-accent) 45%, transparent); }
.eq-chip.active {
  color: #0a1024;
  background: var(--eq-accent);
  border-color: transparent;
}

.eq-presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 8px;
}

.eq-preset-wrap { position: relative; }

.eq-preset-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  height: 100%;
  padding: 9px 10px 10px;
  border-radius: 14px;
  background: var(--eq-glass);
  border: 1px solid var(--eq-line);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.eq-preset-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
  border-color: color-mix(in srgb, var(--eq-accent) 40%, transparent);
}

.eq-preset-btn.active {
  background: color-mix(in srgb, var(--eq-accent) 14%, transparent);
  border-color: var(--eq-accent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--eq-accent) 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--eq-accent) 35%, transparent);
}

.eq-preset-btn.active::after {
  content: '\f00c';
  font: 900 0.6rem 'Font Awesome 6 Free';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #0a1024;
  background: var(--eq-accent);
}

.eq-preset-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 20px;
}

.eq-preset-icon {
  width: 18px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--eq-accent);
}

.eq-preset-name {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.eq-preset-spark svg {
  display: block;
  width: 100%;
  height: 22px;
  overflow: visible;
}

.eq-preset-spark path {
  fill: none;
  stroke: var(--eq-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0.7;
  vector-effect: non-scaling-stroke;
}

.eq-preset-btn.active .eq-preset-spark path { opacity: 1; }

.spark-zero {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}

.eq-preset-del {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  font-size: 0.65rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.eq-preset-del:hover { color: #fff; background: rgba(239, 68, 68, 0.6); }
.eq-preset-wrap:has(.eq-preset-del) .eq-preset-btn.active::after { right: 36px; }

/* ---------- Offline ---------- */
.cache-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(4, 8, 20, 0.8), rgba(10, 16, 36, 0.8));
  border: 1px solid var(--eq-line);
}

.cache-hero {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cache-percent-text {
  min-width: 4.2rem;
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--eq-accent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--eq-accent) 45%, transparent);
}

.cache-hero-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cache-hero-text > span { font-size: 0.92rem; font-weight: 700; color: #fff; }

.cache-detail-text {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.cache-progress {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.cache-progress-bar {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--eq-accent) 70%, #000), var(--eq-accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--eq-accent) 60%, transparent);
  transition: width 0.4s ease;
}

.cache-actions { display: flex; gap: 10px; }

.cache-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--eq-line);
  background: var(--eq-glass);
  color: #fff;
  font: 700 0.84rem var(--font-body);
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.2s ease, background 0.2s ease;
}

.cache-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cache-btn:not(:disabled):active { transform: scale(0.98); }

.cache-btn-primary {
  color: #0a1024;
  border: 0;
  background: linear-gradient(145deg, color-mix(in srgb, var(--eq-accent) 92%, #fff), color-mix(in srgb, var(--eq-accent) 70%, #000));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--eq-accent) 30%, transparent);
}

.cache-btn-primary:not(:disabled):hover { filter: brightness(1.08); }

.cache-btn-danger {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.1);
}

.cache-btn-danger:not(:disabled):hover { background: rgba(239, 68, 68, 0.22); }
.cache-danger-panel { background: rgba(239, 68, 68, 0.04); border-color: rgba(239, 68, 68, 0.2); }

/* ---------- Footer ---------- */
.eq-footer-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--eq-line);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.eq-footer-note i { color: var(--eq-accent); }

@media (max-width: 600px) {
  .eq-modal-card { border-radius: 22px; }
  .eq-modal-header { padding: 1.1rem 3.6rem 0.9rem 1.1rem; }
  .eq-tabs { margin: 0 1rem; }
  .eq-modal-body { padding: 1rem 1rem 1.2rem; }
  .eq-console { --eq-h: 160px; }
  .eq-presets-grid { grid-template-columns: repeat(2, 1fr); }
  .eq-actions .eq-act span { font-size: 0.74rem; }
  .eq-freq-row span { font-size: 0.5rem; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  .eq-pane.active { animation: none; }
  .eq-tab-ink { transition: none; }
}

/* ==========================================================================
   Hero v2: quick-access dock, album showcase, version tabs.
   Accent = --dyn-1 (palette of the active cover, always light) with the gold as fallback.
   ========================================================================== */

/* ---------- Quick-access dock (letter / songbook / settings): three quiet glass pills ---------- */
.hero-dock {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 2rem;
  animation: fadeInUp 0.7s ease-out 0.2s both;
}

.dock-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.dock-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: color-mix(in srgb, var(--dyn-1, #dfc278) 55%, transparent);
  color: #fff;
}
.dock-card:active { transform: scale(0.97); }
.dock-card:focus-visible { outline: 2px solid var(--dyn-1, #dfc278); outline-offset: 3px; }

.dock-medal {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--dyn-1, #dfc278);
}
.dock-text { display: flex; line-height: 1.2; }
.dock-text strong {
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.dock-text small { display: none; }

/* Unopened letter (flag in localStorage `wj_letter_opened`): a small red dot breathes and the envelope nods now and then */
.dock-letter::after {
  content: '';
  position: absolute;
  display: none;
  top: 3px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d9625b;
}
.dock-letter.is-unread { border-color: color-mix(in srgb, var(--dyn-1, #dfc278) 40%, transparent); }
.dock-letter.is-unread::after { display: block; animation: letterDot 1.8s ease-in-out infinite; }
.dock-letter.is-unread .dock-medal { animation: letterBeckon 3.6s ease-in-out infinite; }

@keyframes letterDot {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217, 98, 91, 0.6); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(217, 98, 91, 0); }
}
@keyframes letterBeckon {
  0%, 55%, 100% { transform: none; }
  62% { transform: translateY(-2px) rotate(-14deg); }
  70% { transform: rotate(12deg); }
  78% { transform: rotate(-6deg); }
  86% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dock-letter.is-unread .dock-medal { animation: none; }
}

/* ---------- Album showcase ---------- */
.album-showcase-grid { gap: 1rem; }

.album-card-hero {
  padding: 16px 8px 14px;
  border-radius: 24px;
  /* bare cards: no panel, no border, only sleeve + CD + title + status */
  border: 0;
  background: none;
  box-shadow: none;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.square-cover-container {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 16px;
}

.album-card-hero.active .square-cover-container,
.album-card-hero:hover .square-cover-container {
  border-color: var(--dyn-1, var(--gold-light));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85), 0 0 26px color-mix(in srgb, var(--dyn-1, #dfc278) 40%, transparent);
}

/* Soft floor shadow under the sleeve */
.album-artwork-wrapper::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -6px;
  height: 16px;
  z-index: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
  filter: blur(4px);
  pointer-events: none;
}

.album-card-title {
  font: 700 0.64rem var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-muted);
  text-shadow: none;
}

.album-card-title br { display: none; }

.album-title-subline {
  display: block;
  margin-top: 2px;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  transition: color 0.3s ease;
}

.album-card-hero:hover .album-card-title { color: var(--text-muted); }
.album-card-hero.active .album-card-title { color: var(--text-muted); text-shadow: none; }
.album-card-hero.active .album-title-subline { color: var(--dyn-1, var(--gold-light)); }

/* Status line under every card: "Open album" / "Selected" / "Now playing" (same height for all) */
.album-card-body::after {
  content: 'Open album';
  display: inline-block;
  margin-top: 9px;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 700 0.58rem var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.album-card-hero.active .album-card-body::after {
  content: 'Selected';
  opacity: 1;
  color: #0a1024;
  background: var(--dyn-1, var(--gold-light));
}

.album-card-hero.playing .album-card-body::after {
  content: 'Now playing';
  opacity: 1;
  color: #0a1024;
  background: var(--dyn-1, var(--gold-light));
}

/* ---------- CD in the album cards: a real object, not a sticker ---------- */
/* Only the artwork spins; the rim, the hub and the light sheen stay still, so the motion reads as a turning disc */
.vinyl-disc-container {
  background: radial-gradient(circle, #1a2340 0%, #080d1a 70%);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.22),
    0 0 0 4px rgba(8, 13, 26, 0.85),
    0 14px 30px rgba(0, 0, 0, 0.75);
}

.vinyl-disc-container::before {
  content: '';
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 17%;
  height: 17%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #060a16 0 32%, rgba(255, 255, 255, 0.6) 34% 40%, rgba(10, 16, 36, 0.92) 42% 100%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14), 0 0 10px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.vinyl-disc-container::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  background: conic-gradient(from 25deg, transparent 0 14%, rgba(255, 255, 255, 0.22) 22%, transparent 31% 56%, rgba(255, 255, 255, 0.15) 64%, transparent 73%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.album-card-hero.playing .vinyl-disc-container {
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.3),
    0 0 0 4px rgba(8, 13, 26, 0.85),
    0 14px 30px rgba(0, 0, 0, 0.75),
    0 0 20px color-mix(in srgb, var(--dyn-1, #dfc278) 34%, transparent);
}

/* ---------- CD stays inside its card ---------- */
/* The card clips its own glow, and the cover + CD pair is nudged left while the CD slides out,
   so even "Now playing" never pushes the CD over the gold frame. */
.album-card-hero { overflow: hidden; }

.album-artwork-wrapper { transition: translate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }

@media (min-width: 769px) {
  .album-card-hero:hover .album-artwork-wrapper,
  .album-card-hero.active .album-artwork-wrapper,
  .album-card-hero.playing .album-artwork-wrapper { translate: -14px 0; }

  .album-card-hero:hover .vinyl-disc-container,
  .album-card-hero.active .vinyl-disc-container,
  .album-card-hero.playing .vinyl-disc-container { transform: translateX(34px) rotate(45deg); }

  .album-card-hero:hover .square-cover-container,
  .album-card-hero.active .square-cover-container { transform: translateX(-20px) scale(1.03); }

  .album-card-hero:hover .vinyl-celestial-aura,
  .album-card-hero.active .vinyl-celestial-aura { transform: translateX(34px) scale(1.06); }
  .album-card-hero.playing .vinyl-celestial-aura { transform: translateX(34px) scale(1.1); }
  .album-card-hero[data-album-id="4"].playing .vinyl-celestial-aura { animation-name: auroraAuraSwirlIn; }
}

@keyframes auroraAuraSwirlIn {
  0% { transform: translateX(34px) scale(1.1) rotate(0deg); filter: blur(14px) hue-rotate(0deg); opacity: 0.85; }
  50% { filter: blur(18px) hue-rotate(25deg); opacity: 0.95; }
  100% { transform: translateX(34px) scale(1.1) rotate(360deg); filter: blur(14px) hue-rotate(0deg); opacity: 0.85; }
}

/* Narrower columns (small laptops / tablets): the sleeve + CD shrink with the column instead of being cut */
@media (min-width: 769px) and (max-width: 1100px) { .album-artwork-wrapper { scale: 0.92; } }
@media (min-width: 769px) and (max-width: 1000px) { .album-artwork-wrapper { scale: 0.84; } }
@media (min-width: 769px) and (max-width: 900px) { .album-artwork-wrapper { scale: 0.74; } }
@media (min-width: 769px) and (max-width: 820px) { .album-artwork-wrapper { scale: 0.66; } }

@media (max-width: 768px) {
  .album-card-hero { border-radius: 20px; }

  .album-card-hero:hover .album-artwork-wrapper,
  .album-card-hero.active .album-artwork-wrapper,
  .album-card-hero.playing .album-artwork-wrapper { translate: -8px 0; }

  .album-card-hero:hover .vinyl-disc-container,
  .album-card-hero.active .vinyl-disc-container,
  .album-card-hero.playing .vinyl-disc-container { transform: translateX(14px) rotate(35deg); }

  .album-card-hero:hover .vinyl-celestial-aura,
  .album-card-hero.active .vinyl-celestial-aura,
  .album-card-hero.playing .vinyl-celestial-aura { transform: translateX(14px) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .album-artwork-wrapper { transition: none; }
}

/* ---------- Version tabs ---------- */
.modern-album-switcher {
  gap: 4px;
  padding: 6px;
  border-radius: 22px;
  background: rgba(8, 13, 30, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.switcher-slider-pill {
  border-radius: 17px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--dyn-1, #dfc278) 92%, #fff), color-mix(in srgb, var(--dyn-1, #dfc278) 68%, #000));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--dyn-1, #dfc278) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.switcher-option-btn {
  border-radius: 17px;
  padding: 8px 18px 8px 9px;
  color: rgba(255, 255, 255, 0.62);
}

.switcher-option-btn:hover { color: #fff; }
.switcher-option-btn.active { color: #0a1024; }

.switcher-opt-icon {
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
}

.switcher-opt-title {
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
}

.switcher-option-btn.active .switcher-opt-title { color: #0a1024; font-weight: 800; }
.switcher-option-btn.active .switcher-opt-icon { border-color: rgba(10, 16, 36, 0.45); }

/* ---------- Phones ---------- */
@media (max-width: 768px) {
  .hero-dock { gap: 6px; width: 100%; max-width: 420px; margin-bottom: 1.1rem; padding: 0 4px; flex-wrap: nowrap; }
  .dock-card { flex: 1 1 0; justify-content: center; gap: 6px; padding: 9px 6px; }
  .dock-medal { font-size: 0.8rem; }
  .dock-text strong { font-size: 0.74rem; }

  /* Phones: the four album cards are hidden; the version tabs below do the switching */
  .hero-showcase-wrapper { display: none; }

  .album-card-hero {
    flex: 1 1 0;
    padding: 8px 2px 8px;
    border-radius: 18px;
    transition: flex-grow 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  }
  .album-card-hero.active { flex-grow: 2.2; padding: 8px 4px 10px; }

  .album-artwork-wrapper { zoom: 0.43; transition: zoom 0.45s cubic-bezier(0.25, 1, 0.5, 1); }
  .album-card-hero.active .album-artwork-wrapper { zoom: 1; }
  .album-card-hero:not(.active) .album-artwork-wrapper { translate: none; }
  .album-card-hero:not(.active) .vinyl-disc-container,
  .album-card-hero:not(.active) .vinyl-celestial-aura { transform: none; }
  .album-card-hero:not(.active) .square-cover-container { transform: none; }

  .album-card-hero:not(.active) .album-card-body { opacity: 0.8; }
  .album-card-hero:not(.active) .album-card-title { font-size: 0; line-height: 0; margin: 0; }
  .album-card-hero:not(.active) .album-title-subline {
    display: block;
    font-size: 0.56rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .album-card-hero:not(.active) .album-card-body::after { display: none; }
  .album-card-title { font-size: 0.5rem; letter-spacing: 0.16em; }
  .album-title-subline { font-size: 0.92rem; }
  .album-card-body::after { margin-top: 6px; padding: 2px 8px; font-size: 0.5rem; }

  .modern-album-switcher { border-radius: 16px; padding: 4px; gap: 2px; }
  .switcher-slider-pill { border-radius: 12px; }
  .switcher-option-btn { border-radius: 12px; padding: 6px 2px; }
  .switcher-opt-icon { width: 26px; height: 26px; }
  .switcher-opt-title { font-size: clamp(0.5rem, 2.1vw, 0.6rem); letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  .dock-card { transition: none; }
  .hero-dock { animation: none; }
}

/* ---------- Switch row (Settings > App > Auto Mini Player) ---------- */
.eq-switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--eq-glass);
  border: 1px solid var(--eq-line);
  cursor: pointer;
}

.eq-switch-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.eq-switch-text strong { font-size: 0.9rem; color: #fff; }
.eq-switch-text small { font-size: 0.74rem; line-height: 1.5; color: var(--text-muted); }

.eq-switch { position: relative; flex-shrink: 0; }

.eq-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.eq-switch-ui {
  display: block;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  position: relative;
  transition: background 0.25s ease;
}

.eq-switch-ui::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.eq-switch input:checked + .eq-switch-ui { background: var(--eq-accent); }
.eq-switch input:checked + .eq-switch-ui::after { transform: translateX(20px); background: #0a1024; }
.eq-switch input:focus-visible + .eq-switch-ui { outline: 2px solid var(--eq-accent); outline-offset: 3px; }
.eq-switch input:disabled { cursor: not-allowed; }
.eq-switch input:disabled + .eq-switch-ui { opacity: 0.4; }

.eq-switch-note {
  margin: 8px 4px 0;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* A floating mini player only exists on desktop */
@media (hover: none) and (pointer: coarse) {
  .pip-section { display: none; }
}

/* ==========================================================================
   Welcome / name note: a small handwritten note on cream paper, sealed with wax.
   JS hooks kept: .welcome-modal-card (.shake), #welcomeModalTitle, #userNameInput, .btn-welcome-submit span.
   ========================================================================== */
.welcome-modal-backdrop {
  z-index: 2500;
}

.welcome-modal-card {
  --paper: #f8f1e2;
  --ink: #3a2e22;
  --ink-soft: #66543f;
  --ink-gold: #8a5f0f;
  --wax: #8f2a2a;
  --wlc-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --wlc-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: none;
  margin-top: 30px; /* room for the seal that sits on the top edge */
  overflow: visible;
  border-radius: 8px;
  border: 1px solid rgba(120, 90, 40, 0.3);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(140% 100% at 50% 100%, rgba(150, 110, 50, 0.16), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .34 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--paper);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 0 60px rgba(160, 120, 60, 0.16);
  color: var(--ink);
  text-align: center;
  transform: translateY(40px) rotate(-1.6deg) scale(0.96);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.welcome-modal-backdrop.active .welcome-modal-card { transform: none; }

.welcome-modal-card.shake { animation: wlcShake 0.45s ease-in-out; }

@keyframes wlcShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

/* Wax seal on the top edge */
.wlc-seal {
  position: absolute;
  top: -30px;
  left: 50%;
  z-index: 5;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
  color: rgba(255, 220, 200, 0.88);
  font-size: 1.3rem;
  background: radial-gradient(circle at 34% 30%, #c4554f 0%, var(--wax) 48%, #5c1515 100%);
  box-shadow: 0 6px 14px rgba(70, 20, 20, 0.5), inset 0 0 0 4px rgba(255, 255, 255, 0.05), inset 0 -3px 6px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%) rotate(-6deg);
}

.wlc-seal::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 220, 200, 0.4);
}

.welcome-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(58, 46, 34, 0.07);
  border-color: rgba(58, 46, 34, 0.16);
  color: var(--ink-soft);
}

.welcome-modal-close:hover { background: var(--ink); color: var(--paper); }

.welcome-modal-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 2.5rem 1.9rem 1.7rem;
  font-family: var(--wlc-serif);
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 90, 40, 0.35) transparent;
}

.wlc-letterhead {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.wlc-letterhead::before,
.wlc-letterhead::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(102, 84, 63, 0.4));
}

.wlc-letterhead::after { transform: scaleX(-1); }

.wlc-title {
  margin: 0.7rem 0 0;
  font-family: var(--wlc-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--ink);
}

.wlc-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0.9rem 0 0.9rem;
  color: var(--ink-gold);
  font-size: 0.66rem;
}

.wlc-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(138, 95, 15, 0.55), transparent);
}

.wlc-text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--ink);
}

.wlc-form { margin-top: 1.1rem; }

.wlc-prompt {
  display: block;
  font-family: var(--wlc-hand);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink-gold);
}

/* The name is signed on a line, in handwriting */
.wlc-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.7rem;
  padding: 4px 8px 2px;
  border-bottom: 2px dashed rgba(138, 95, 15, 0.5);
  border-radius: 6px 6px 0 0;
  color: var(--ink-gold);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.wlc-line:focus-within {
  background: rgba(138, 95, 15, 0.07);
  border-bottom-style: solid;
  border-bottom-color: var(--ink-gold);
}

.wlc-input {
  flex: 1;
  min-width: 0;
  padding: 2px 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  font-family: var(--wlc-hand);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
  caret-color: var(--ink-gold);
}

.wlc-input::placeholder {
  font-size: 1.6rem;
  font-weight: 500;
  color: rgba(102, 84, 63, 0.5);
}

.wlc-input::selection {
  background: rgba(138, 95, 15, 0.28);
  color: var(--ink);
}

.wlc-ps {
  margin: 1rem 0 0;
  font-size: 0.76rem;
  line-height: 1.6;
  text-align: left;
  color: var(--ink-soft);
}

.wlc-ps b {
  margin-right: 4px;
  font-family: var(--wlc-hand);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--wax);
}

.btn-welcome-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 1.1rem;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid rgba(223, 194, 120, 0.5);
  background: linear-gradient(160deg, #24305b 0%, #121a38 100%);
  color: #f3dfa4;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(40, 30, 10, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-welcome-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 26px rgba(40, 30, 10, 0.45);
}

.btn-welcome-submit:active { transform: scale(0.98); }

/* The note's parts settle in one after another */
.welcome-modal-backdrop.active .wlc-seal { animation: wlcSeal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both; }
.welcome-modal-backdrop.active .welcome-modal-body > * { animation: letterFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.welcome-modal-backdrop.active .welcome-modal-body > :nth-child(1) { animation-delay: 0.2s; }
.welcome-modal-backdrop.active .welcome-modal-body > :nth-child(2) { animation-delay: 0.3s; }
.welcome-modal-backdrop.active .welcome-modal-body > :nth-child(3) { animation-delay: 0.4s; }
.welcome-modal-backdrop.active .welcome-modal-body > :nth-child(4) { animation-delay: 0.5s; }
.welcome-modal-backdrop.active .welcome-modal-body > :nth-child(5) { animation-delay: 0.62s; }

@keyframes wlcSeal {
  from { opacity: 0; transform: translateX(-50%) rotate(-6deg) scale(1.6); }
  to { opacity: 1; transform: translateX(-50%) rotate(-6deg) scale(1); }
}

@media (max-width: 480px) {
  .welcome-modal-card { max-width: calc(100vw - 32px); }
  .welcome-modal-body { padding: 2.4rem 1.3rem 1.4rem; }
  .wlc-title { font-size: 1.4rem; }
  .wlc-text { font-size: 0.88rem; }
  .wlc-prompt { font-size: 1.4rem; }
  .wlc-input { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-modal-card { transform: none; transition: opacity 0.2s ease; }
  .welcome-modal-backdrop.active .wlc-seal,
  .welcome-modal-backdrop.active .welcome-modal-body > * { animation: none; }
}

/* ==========================================================================
   HERO AMBIENCE: soft palette glow, thin smoke and a few twinkling stars behind the headline.
   Pure CSS (no canvas, no audio reaction). The layers fade out well above the album cards,
   so they never read as a divider. Colours follow the album via --dyn-*.
   ========================================================================== */
.hero-section::before,
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0 0 18% 0;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}

/* glow + smoke: big, already-soft gradients that only translate (cheap to animate) */
.hero-section::before {
  background:
    radial-gradient(ellipse 38% 46% at 22% 30%, color-mix(in srgb, var(--dyn-1) 20%, transparent), transparent 70%),
    radial-gradient(ellipse 34% 42% at 80% 24%, color-mix(in srgb, var(--dyn-2) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 52% 26% at 50% 62%, rgba(255, 255, 255, 0.045), transparent 72%),
    radial-gradient(ellipse 30% 20% at 68% 70%, rgba(255, 255, 255, 0.035), transparent 72%);
  animation: heroDrift 38s ease-in-out infinite alternate;
}

/* stars: two sets of tiny dots that fade in and out out of step with each other */
.hero-section::after {
  background-image:
    radial-gradient(1.4px 1.4px at 8% 22%, color-mix(in srgb, var(--dyn-1) 70%, #fff) 0, transparent 100%),
    radial-gradient(1.3px 1.3px at 17% 58%, #fff 0, transparent 100%),
    radial-gradient(1.2px 1.2px at 29% 14%, color-mix(in srgb, var(--dyn-2) 60%, #fff) 0, transparent 100%),
    radial-gradient(1.3px 1.3px at 41% 44%, #fff 0, transparent 100%),
    radial-gradient(1.4px 1.4px at 63% 18%, color-mix(in srgb, var(--dyn-1) 70%, #fff) 0, transparent 100%),
    radial-gradient(1.3px 1.3px at 76% 52%, #fff 0, transparent 100%),
    radial-gradient(1.2px 1.2px at 91% 30%, color-mix(in srgb, var(--dyn-2) 60%, #fff) 0, transparent 100%),
    radial-gradient(1.3px 1.3px at 87% 66%, #fff 0, transparent 100%);
  opacity: 0.9;
  animation: heroTwinkle 7s ease-in-out infinite;
}

.hero-section .hero-content-relative::before {
  content: '';
  position: absolute;
  inset: -40px 0 30% 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 38%, #fff 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 24% 72%, color-mix(in srgb, var(--dyn-1) 70%, #fff) 0, transparent 100%),
    radial-gradient(1.3px 1.3px at 36% 26%, #fff 0, transparent 100%),
    radial-gradient(1.2px 1.2px at 58% 34%, color-mix(in srgb, var(--dyn-2) 60%, #fff) 0, transparent 100%),
    radial-gradient(1.3px 1.3px at 70% 12%, #fff 0, transparent 100%),
    radial-gradient(1.4px 1.4px at 84% 46%, color-mix(in srgb, var(--dyn-1) 70%, #fff) 0, transparent 100%),
    radial-gradient(1.3px 1.3px at 95% 80%, #fff 0, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
  opacity: 0.6;
  animation: heroTwinkle 9s ease-in-out -4s infinite;
}

@keyframes heroDrift {
  from { transform: translate3d(-1.5%, 0, 0) scale(1); }
  to   { transform: translate3d(1.5%, -2%, 0) scale(1.06); }
}
@keyframes heroTwinkle {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.75; }
}

/* While a song plays: thin smoke rises and sways behind the headline, the glow brightens, the stars blink livelier */
.hero-section .hero-content-relative::after {
  content: '';
  position: absolute;
  inset: 0 -14% 50% -14%; /* upper half only: nothing reaches the album cards or gets cut by the section edge */
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background:
    radial-gradient(ellipse 30% 34% at 14% 66%, rgba(255, 255, 255, 0.2), transparent 70%),
    radial-gradient(ellipse 36% 38% at 48% 54%, rgba(255, 255, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 28% 32% at 86% 62%, color-mix(in srgb, var(--dyn-1) 34%, transparent), transparent 70%),
    radial-gradient(ellipse 24% 28% at 30% 30%, color-mix(in srgb, var(--dyn-2) 28%, transparent), transparent 70%),
    radial-gradient(ellipse 26% 28% at 70% 26%, rgba(255, 255, 255, 0.12), transparent 70%);
  filter: blur(12px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 55%, transparent 100%);
}

body:has(.music-player-bar.is-playing) .hero-section .hero-content-relative::after {
  animation: heroSmoke 12s ease-in-out infinite, heroSmokeSway 7s ease-in-out infinite alternate;
}
body:has(.music-player-bar.is-playing) .hero-section::before {
  background:
    radial-gradient(ellipse 40% 48% at 22% 30%, color-mix(in srgb, var(--dyn-1) 34%, transparent), transparent 70%),
    radial-gradient(ellipse 36% 44% at 80% 24%, color-mix(in srgb, var(--dyn-2) 36%, transparent), transparent 70%),
    radial-gradient(ellipse 52% 22% at 50% 40%, rgba(255, 255, 255, 0.07), transparent 72%);
  animation: heroDrift 18s ease-in-out infinite alternate;
}
body:has(.music-player-bar.is-playing) .hero-section::after {
  opacity: 1;
  animation: heroTwinkleLive 3.2s ease-in-out infinite;
}
body:has(.music-player-bar.is-playing) .hero-section .hero-content-relative::before {
  opacity: 0.9;
  animation: heroTwinkleLive 4.1s ease-in-out -1.8s infinite;
}

@keyframes heroSmoke {
  0%   { opacity: 0; transform: translate3d(0, 10%, 0) scale(1); }
  25%  { opacity: 1; }
  75%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate3d(0, -14%, 0) scale(1.14); }
}
@keyframes heroSmokeSway {
  from { translate: -4% 0; }
  to   { translate: 4% 0; }
}
@keyframes heroTwinkleLive {
  0%, 100% { opacity: 0.12; }
  16%      { opacity: 0.95; }
  30%      { opacity: 0.3; }
  48%      { opacity: 1; }
  66%      { opacity: 0.18; }
  82%      { opacity: 0.8; }
}

@media (max-width: 768px) {
  .hero-section::before { animation-duration: 52s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-section::before,
  .hero-section::after,
  .hero-section .hero-content-relative::before,
  body:has(.music-player-bar.is-playing) .hero-section::after,
  body:has(.music-player-bar.is-playing) .hero-section .hero-content-relative::before,
  body:has(.music-player-bar.is-playing) .hero-section .hero-content-relative::after { animation: none; }
  .hero-section::after { opacity: 0.45; }
  .hero-section .hero-content-relative::after { display: none; }
  body:has(.music-player-bar.is-playing) .hero-section::before { animation: none; }
}

/* ==========================================================================
   HERO TYPOGRAPHY + COMPACT SPACING
   Serif display headline (Cormorant Garamond) with an italic accent line; tighter rhythm above the dock.
   ========================================================================== */
.hero-section { padding-top: 108px; }
.hero-pill { margin-bottom: 28px; }

.hero-title {
  font-family: 'Cormorant Garamond', 'Lora', Georgia, serif;
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0 auto 12px;
  max-width: 900px;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}
.hero-title-accent {
  display: inline-block;
  margin-top: 2px;
  font-style: italic;
  font-weight: 600;
  font-size: 0.82em;
  letter-spacing: 0.01em;
  background: linear-gradient(100deg, var(--dyn-1), color-mix(in srgb, var(--dyn-2) 55%, #fff));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.6;
  max-width: 600px;
  margin-bottom: 18px;
}
.hero-dock { margin-bottom: 1.3rem; }

@media (max-width: 768px) {
  .hero-section { padding-top: 84px; }
  .hero-pill { margin-bottom: 22px; }
  .hero-title {
    font-size: clamp(1.75rem, 7.6vw, 2.2rem);
    line-height: 1.1;
    margin-bottom: 8px;
  }
  .hero-subtitle { font-size: 0.84rem; line-height: 1.55; }
}
.hero-nobreak { white-space: nowrap; }
.hero-title { text-wrap: balance; }

/* ==========================================================================
   Footer v3: the closing page. Light falling from above, serif voice, gold verse, handwritten signature.
   No stamps: just type, light and one hand-drawn line.
   ========================================================================== */
.site-footer {
  --sf-gold: var(--dyn-1, #dfc278);
  --sf-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sf-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  position: relative;
  overflow: hidden;
  padding: 72px 0 44px;
  margin-top: 30px;
  background: linear-gradient(180deg, rgba(4, 7, 16, 0.7) 0%, #04070f 40%);
  text-align: center;
}

.site-footer.has-player { margin-top: 60px; padding-bottom: 124px; }

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sf-gold) 70%, transparent), transparent);
}

/* Soft rays from the top edge, fading out before they reach the signature */
.sf-rays {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(1000px, 130%);
  height: 100%;
  transform-origin: 50% 0;
  background: repeating-conic-gradient(from 166deg at 50% -8%, color-mix(in srgb, var(--sf-gold) 12%, transparent) 0 3.4deg, transparent 3.4deg 9deg);
  -webkit-mask-image: radial-gradient(ellipse 55% 82% at 50% 0%, #000 0%, transparent 74%);
  mask-image: radial-gradient(ellipse 55% 82% at 50% 0%, #000 0%, transparent 74%);
  pointer-events: none;
  animation: sfSway 16s ease-in-out infinite alternate;
}

@keyframes sfSway {
  from { transform: translateX(-50%) rotate(-2.5deg); }
  to { transform: translateX(-50%) rotate(2.5deg); }
}

.sf-glow {
  position: absolute;
  left: 50%;
  top: -35%;
  width: min(900px, 120%);
  height: 85%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sf-gold) 16%, transparent), transparent);
  pointer-events: none;
}

.sf-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.sf-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(240px, 62%);
  margin: 0 auto 20px;
}

.sf-orn span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sf-gold) 75%, transparent), transparent);
}

.sf-orn i {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  transform: rotate(45deg);
  background: var(--sf-gold);
  box-shadow: 0 0 12px color-mix(in srgb, var(--sf-gold) 70%, transparent);
}

.sf-brand {
  margin: 0 0 28px;
  font-family: var(--sf-serif);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--sf-gold);
}

.sf-note { font-family: var(--sf-serif); }

.sf-lead {
  margin: 0 0 16px;
  font-size: 1.32rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}

.sf-body {
  max-width: 560px;
  margin: 0 auto 12px;
  font-size: 0.98rem;
  line-height: 1.9;
  color: rgba(226, 232, 240, 0.72);
}

.sf-verse {
  margin: 22px 0 0;
  font-size: clamp(2.1rem, 6.4vw, 3.1rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.15;
  color: var(--sf-gold);
  background: linear-gradient(100deg, color-mix(in srgb, var(--sf-gold) 85%, #000) 0%, #fff4cf 45%, var(--sf-gold) 70%, color-mix(in srgb, var(--sf-gold) 85%, #000) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--sf-gold) 38%, transparent));
  animation: sfShine 7s ease-in-out infinite alternate;
}

@keyframes sfShine {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

.sf-copy {
  margin: 52px auto 0;
  padding-top: 20px;
  max-width: 560px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.76rem;
  color: var(--text-dim, #64748b);
}

@media (max-width: 600px) {
  .site-footer { padding-top: 56px; }
  .sf-lead { font-size: 1.16rem; }
  .sf-body { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-rays, .sf-verse { animation: none; }
}


/* ==========================================================================
   About / liner notes: the composer's note on cream paper, the cover pinned like a print.
   ========================================================================== */
.about-section {
  padding: 40px 0 20px;
}

.about-card {
  --paper: #f8f1e2;
  --ink: #3a2e22;
  --ink-soft: #66543f;
  --ink-gold: #8a5f0f;
  --wax: #8f2a2a;
  --ab-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --ab-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 4vw, 3.2rem);
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(1.6rem, 4vw, 3rem);
  border-radius: 8px;
  border: 1px solid rgba(120, 90, 40, 0.3);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(140% 100% at 80% 100%, rgba(150, 110, 50, 0.16), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .34 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--paper);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), inset 0 0 70px rgba(160, 120, 60, 0.16);
  color: var(--ink);
}

/* ---- cover pinned like a print ---- */
.about-image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
}

.about-print {
  position: relative;
  width: min(100%, 360px);
  margin: 0;
  padding: 12px 12px 0;
  background: #fffdf7;
  box-shadow: 0 18px 40px rgba(60, 40, 10, 0.4), 0 2px 6px rgba(60, 40, 10, 0.25);
  transform: rotate(-2.2deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.about-card:hover .about-print { transform: rotate(-0.8deg) translateY(-3px); }

.about-print img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(120, 90, 40, 0.35);
}

.about-print figcaption {
  padding: 8px 4px 10px;
  text-align: center;
  font-family: var(--ab-hand);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink-gold);
}

.about-tape {
  position: absolute;
  top: -14px;
  left: 50%;
  z-index: 2;
  width: 96px;
  height: 28px;
  transform: translateX(-50%) rotate(3deg);
  background: linear-gradient(90deg, rgba(223, 194, 120, 0.55), rgba(240, 215, 150, 0.7), rgba(223, 194, 120, 0.55));
  box-shadow: 0 1px 3px rgba(60, 40, 10, 0.25);
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 16% 10%, 20% 0, 24% 10%, 28% 0, 32% 10%, 36% 0, 40% 10%, 44% 0, 48% 10%, 52% 0, 56% 10%, 60% 0, 64% 10%, 68% 0, 72% 10%, 76% 0, 80% 10%, 84% 0, 88% 10%, 92% 0, 96% 10%, 100% 0, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 84% 90%, 80% 100%, 76% 90%, 72% 100%, 68% 90%, 64% 100%, 60% 90%, 56% 100%, 52% 90%, 48% 100%, 44% 90%, 40% 100%, 36% 90%, 32% 100%, 28% 90%, 24% 100%, 20% 90%, 16% 100%, 12% 90%, 8% 100%, 4% 90%, 0 92%);
}

/* ---- the note ---- */
.about-content {
  font-family: var(--ab-serif);
  text-align: left;
}

.about-content h3 {
  margin: 0;
  font-family: var(--ab-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-gold);
}

.about-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0.8rem 0 1.1rem;
  color: var(--ink-gold);
  font-size: 0.66rem;
}

.about-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(138, 95, 15, 0.55), transparent);
}

.about-rule span:first-child { flex: 0 0 38px; }

.about-content p {
  margin: 0 0 0.95rem;
  font-size: 0.96rem;
  line-height: 1.85;
  color: var(--ink);
}

.about-lead { font-size: 1.04rem; }
.about-lead strong { color: var(--ink-gold); font-weight: 600; }

.about-lead::first-letter {
  float: left;
  margin: 0.05em 0.5rem 0 0;
  font-size: 3.2rem;
  line-height: 0.85;
  font-weight: 500;
  color: var(--ink-gold);
}

.about-content .about-blessing {
  margin: 1.2rem 0 0.4rem;
  padding-left: 14px;
  border-left: 2px solid var(--ink-gold);
  font-family: var(--ab-hand);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-gold);
}

.about-content .about-sign {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0.5rem 0 0;
}

.about-sign::before {
  content: '';
  width: 38px;
  height: 1px;
  background: rgba(102, 84, 63, 0.5);
}

.about-sign span {
  font-family: var(--ab-hand);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  transform: rotate(-2deg);
}

/* ---- stats as stamps ---- */
.about-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 360px);
}

.about-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 10px;
  background: #fcf7ea;
  border: 2px dashed #bfa57a;
  box-shadow: inset 0 0 0 4px #fcf7ea, inset 0 0 0 5px rgba(138, 95, 15, 0.4);
  text-align: center;
}

.about-stat:nth-child(1) { transform: rotate(-1.6deg); }
.about-stat:nth-child(2) { transform: rotate(1.4deg); }

.about-stat-number {
  font-family: var(--ab-serif);
  font-size: 2rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink-gold);
}

.about-stat-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 820px) {
  .about-card { grid-template-columns: 1fr; gap: 2rem; padding: 1.8rem 1.3rem 1.5rem; }
  .about-print { width: min(78%, 300px); }
  .about-content p { font-size: 0.92rem; }
  .about-lead { font-size: 0.98rem; }
  .about-content .about-blessing { font-size: 1.45rem; }
  .about-sign span { font-size: 2.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .about-print { transition: none; }
}

/* ==========================================================================
   iPhone / notch: viewport-fit=cover + the black-translucent status bar let the page run under the
   status bar and the home indicator, so fixed bars and modals keep clear of them (env() is 0 elsewhere).
   ========================================================================== */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); }

  .navbar {
    height: calc(72px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(2rem, env(safe-area-inset-left));
    padding-right: max(2rem, env(safe-area-inset-right));
  }

  .music-player-bar {
    height: calc(var(--player-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }

  .site-footer.has-player { padding-bottom: calc(124px + env(safe-area-inset-bottom)); }

  .toast-container {
    top: calc(90px + env(safe-area-inset-top));
    right: max(24px, env(safe-area-inset-right));
  }

  .modal-backdrop {
    padding-top: max(1.5rem, env(safe-area-inset-top));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  .songbook-close-btn {
    top: max(18px, calc(env(safe-area-inset-top) + 8px));
    right: max(22px, env(safe-area-inset-right));
  }

  @media (max-width: 768px) {
    .navbar {
      height: calc(58px + env(safe-area-inset-top));
      padding-left: max(0.85rem, env(safe-area-inset-left));
      padding-right: max(0.85rem, env(safe-area-inset-right));
    }

    .music-player-bar {
      height: calc(70px + env(safe-area-inset-bottom));
      padding-left: max(0.85rem, env(safe-area-inset-left));
      padding-right: max(0.85rem, env(safe-area-inset-right));
    }

    .toast-container { top: calc(70px + env(safe-area-inset-top)); }
  }

  /* Landscape phones: keep the page content out from under the notch */
  @media (orientation: landscape) and (max-height: 520px) {
    .container {
      padding-left: max(1.5rem, env(safe-area-inset-left));
      padding-right: max(1.5rem, env(safe-area-inset-right));
    }
  }
}

/* ==========================================================================
   Version tabs: smaller, lighter lettering
   ========================================================================== */
.switcher-opt-title { font-weight: 500; font-size: 0.68rem; letter-spacing: 0.12em; }
.switcher-option-btn.active .switcher-opt-title { font-weight: 600; }
@media (max-width: 768px) {
  .switcher-opt-title { font-size: clamp(0.44rem, 1.85vw, 0.52rem); letter-spacing: 0.08em; font-weight: 500; }
  .switcher-option-btn.active .switcher-opt-title { font-weight: 600; }
}

/* ==========================================================================
   Phone hero whisper: a quiet couplet between the dock and the version tabs
   ========================================================================== */
.hero-whisper { display: none; }

@media (max-width: 768px) {
  .hero-whisper {
    display: block;
    max-width: 330px;
    margin: 2px auto 20px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.8s ease;
  }
  .hero-whisper.ready { opacity: 1; }

  /* hairline with a small diamond in the middle */
  .hw-orn {
    position: relative;
    display: block;
    width: 150px;
    height: 1px;
    margin: 0 auto 16px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dyn-1, #dfc278) 70%, transparent), transparent);
  }
  .hw-orn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    background: var(--dyn-1, #dfc278);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 10px color-mix(in srgb, var(--dyn-1, #dfc278) 70%, transparent);
  }

  .hw-quote {
    display: block;
    width: 100%;
    padding: 4px 10px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hw-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.7em;
    font-family: 'Cormorant Garamond', 'Lora', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.28rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.9);
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
    transition: opacity 0.65s ease, filter 0.65s ease, transform 0.65s ease;
  }
  .hw-by {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--dyn-1, #dfc278);
    opacity: 0.85;
    transition: opacity 0.65s ease;
  }
  .hw-by i { font-size: 0.55rem; transition: transform 0.25s ease; }
  .hw-quote:active .hw-by i { transform: translateX(3px); }

  .hero-whisper.is-out .hw-text { opacity: 0; filter: blur(5px); transform: translateY(6px); }
  .hero-whisper.is-out .hw-by { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-text, .hw-by, .hero-whisper { transition: none !important; }
}

/* ==========================================================================
   Desktop hero whisper: one centred lyric couplet where the subtitle used to be, above the dock
   (initHeroWhisper in app.js builds it; the phone version sits between dock and albums)
   ========================================================================== */
.hero-whisper-side { display: none; }

@media (min-width: 769px) {
  .hero-whisper-side {
    display: block;
    max-width: 560px;
    min-height: 92px;
    margin: 6px auto 22px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.9s ease;
  }
  .hero-whisper-side.ready { opacity: 1; }

  .hws-quote {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hws-text {
    display: block;
    font-family: 'Cormorant Garamond', 'Lora', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.55rem;
    line-height: 1.38;
    color: rgba(255, 255, 255, 0.82);
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
    transition: opacity 0.65s ease, filter 0.65s ease, transform 0.65s ease, color 0.3s ease;
  }
  .hws-by {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--dyn-1, #dfc278);
    opacity: 0.85;
    transition: opacity 0.65s ease;
  }
  .hws-by i { font-size: 0.55rem; transition: transform 0.25s ease; }
  .hws-quote:hover .hws-text { color: #fff; }
  .hws-quote:hover .hws-by i { transform: translateX(3px); }
  .hws-quote:focus-visible { outline: 2px solid var(--dyn-1, #dfc278); outline-offset: 4px; border-radius: 8px; }

  .hero-whisper-side.is-out .hws-text { opacity: 0; filter: blur(5px); transform: translateY(6px); }
  .hero-whisper-side.is-out .hws-by { opacity: 0; }
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
  .hero-whisper-side, .hws-text, .hws-by { transition: none !important; }
}

/* ==========================================================================
   Softer name note: lighter paper, dusty-rose badge instead of the heavy wax seal, a quiet field and a warm button
   ========================================================================== */
.welcome-modal-card {
  --paper: #f7f1e6;
  --ink: #4a3d30;
  --ink-soft: #7d6b57;
  --ink-gold: #a0803f;
  border-radius: 22px;
  border-color: rgba(160, 128, 63, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 40px rgba(190, 160, 110, 0.1);
  transform: translateY(24px) scale(0.98);
}
.wlc-seal {
  width: 48px;
  height: 48px;
  top: -24px;
  border-radius: 50%;
  font-size: 1.05rem;
  color: #fff6ee;
  background: linear-gradient(150deg, #d9a39a, #b9736e);
  box-shadow: 0 6px 16px rgba(120, 60, 55, 0.28), inset 0 0 0 3px rgba(255, 255, 255, 0.14);
  transform: translateX(-50%);
}
.wlc-seal::after { inset: 6px; border-color: rgba(255, 246, 238, 0.28); }
@keyframes wlcSeal {
  from { opacity: 0; transform: translateX(-50%) scale(1.35); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
.welcome-modal-body { padding: 2.2rem 1.9rem 1.6rem; }
.wlc-letterhead { opacity: 0.75; }
.wlc-title { font-weight: 400; font-size: 1.5rem; }
.wlc-rule span { background: linear-gradient(90deg, transparent, rgba(160, 128, 63, 0.35), transparent); }
.wlc-text { font-size: 0.92rem; color: var(--ink-soft); }
.wlc-prompt { font-size: 1.4rem; font-weight: 500; color: var(--ink-gold); }
.wlc-line {
  margin-top: 0.8rem;
  padding: 6px 14px;
  border: 1px solid rgba(160, 128, 63, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}
.wlc-line:focus-within { background: #fff; border-color: rgba(160, 128, 63, 0.5); box-shadow: 0 0 0 4px rgba(160, 128, 63, 0.1); }
.wlc-input { font-size: 1.7rem; font-weight: 600; }
.wlc-input::placeholder { font-size: 1.4rem; font-weight: 400; color: rgba(125, 107, 87, 0.5); }
.wlc-ps { color: rgba(125, 107, 87, 0.9); }
.wlc-ps b { color: #b9736e; font-weight: 600; }
.btn-welcome-submit {
  border: 0;
  background: linear-gradient(160deg, #ecdcae, #dcc38c);
  color: #5a4520;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(150, 120, 60, 0.22);
}
.btn-welcome-submit:hover { box-shadow: 0 9px 20px rgba(150, 120, 60, 0.3); }
.welcome-modal-close { background: rgba(74, 61, 48, 0.05); border-color: transparent; }
@media (max-width: 480px) {
  .welcome-modal-body { padding: 2.1rem 1.3rem 1.3rem; }
  .wlc-input { font-size: 1.55rem; }
}

/* ==========================================================================
   Name note, refined: inner gold frame, serif letterhead/title, glowing seal, quiet field, button with a sheen
   ========================================================================== */
.welcome-modal-card {
  max-width: 420px;
  border-radius: 26px;
  border-color: rgba(160, 128, 63, 0.28);
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(120% 80% at 50% 110%, rgba(190, 150, 80, 0.18), transparent 60%),
    var(--paper);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 60px rgba(223, 194, 120, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* thin inner frame like a stationery border */
.welcome-modal-card::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(160, 128, 63, 0.3);
  border-radius: 19px;
  pointer-events: none;
}
.wlc-seal {
  width: 54px;
  height: 54px;
  top: -27px;
  background: radial-gradient(circle at 35% 30%, #e6b8ae, #c07d76 70%);
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px rgba(160, 128, 63, 0.35), 0 10px 24px rgba(120, 60, 55, 0.3);
}
.welcome-modal-body { padding: 2.6rem 2.2rem 1.9rem; }
.wlc-letterhead {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  opacity: 0.85;
  color: var(--ink-gold);
}
.wlc-title {
  margin-top: 0.55rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.12;
  letter-spacing: 0.005em;
}
.wlc-rule { margin: 0.9rem 0 1rem; opacity: 0.9; }
.wlc-text { font-size: 0.9rem; line-height: 1.8; }
.wlc-form { margin-top: 1.3rem; }
.wlc-prompt { font-size: 1.32rem; }
.wlc-line {
  margin-top: 0.9rem;
  padding: 8px 16px;
  border-radius: 999px;
  border-color: rgba(160, 128, 63, 0.3);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 3px rgba(120, 90, 40, 0.08);
}
.wlc-line:focus-within {
  border-color: var(--ink-gold);
  box-shadow: 0 0 0 4px rgba(160, 128, 63, 0.14), 0 6px 18px rgba(160, 128, 63, 0.15);
}
.wlc-input::selection { background: rgba(160, 128, 63, 0.22); }
.wlc-ps { margin-top: 1.1rem; font-size: 0.74rem; text-align: center; }
.btn-welcome-submit {
  position: relative;
  overflow: hidden;
  margin-top: 1.2rem;
  padding: 14px 18px;
  background: linear-gradient(160deg, #f0dfae 0%, #d8b968 100%);
  color: #4b3a14;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 20px rgba(160, 120, 40, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn-welcome-submit::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}
.btn-welcome-submit:hover::after { left: 130%; }
.welcome-modal-close { top: 16px; right: 16px; }
@media (max-width: 480px) {
  .welcome-modal-body { padding: 2.4rem 1.5rem 1.5rem; }
  .wlc-title { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-welcome-submit::after { transition: none; }
}

/* ==========================================================================
   Name note, alive: cream paper with a foil edge, drifting gold dust, a stamped seal with a soft ripple,
   rules that draw outward, a prompt that "writes" itself, a shimmering title and a breathing button.
   ========================================================================== */
.welcome-modal-card {
  transform: translateY(36px) rotate(-1.6deg) scale(0.95);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(110% 70% at 50% 115%, rgba(214, 170, 90, 0.26), transparent 60%),
    var(--paper);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.55),
    0 0 70px rgba(223, 194, 120, 0.12),
    inset 0 0 0 6px var(--paper),
    inset 0 0 0 7px rgba(176, 138, 62, 0.4),
    inset 0 0 0 10px rgba(176, 138, 62, 0.1);
}
/* the old inner frame is replaced by the double foil line above */
.welcome-modal-card::before { display: none; }
/* seal: stamped on, then floats while a ripple spreads from it */
.welcome-modal-backdrop.active .wlc-seal {
  animation: wlcStamp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both, wlcFloat 4.5s ease-in-out 1.4s infinite;
}
@keyframes wlcStamp {
  from { opacity: 0; transform: translateX(-50%) scale(2.1) rotate(-18deg); }
  to { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); }
}
@keyframes wlcFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}
/* deeper, richer red for the seal */
.wlc-seal {
  color: #fff4ee;
  background: radial-gradient(circle at 35% 28%, #e8685e 0%, #c23a35 55%, #8f2121 100%);
  box-shadow: 0 8px 20px rgba(143, 33, 33, 0.5), inset 0 0 0 3px rgba(255, 255, 255, 0.16), inset 0 -3px 6px rgba(80, 10, 10, 0.3);
}
.wlc-seal::after {
  inset: -3px;
  border: 1.5px solid rgba(210, 70, 62, 0.65);
  border-radius: 50%;
  opacity: 0;
}
.welcome-modal-backdrop.active .wlc-seal::after { animation: wlcRipple 3.2s ease-out 1.2s infinite; }
@keyframes wlcRipple {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.9); opacity: 0; }
}
.wlc-seal i { animation: wlcPray 4.5s ease-in-out 1.4s infinite; }
@keyframes wlcPray {
  0%, 85%, 100% { transform: scale(1); }
  92% { transform: scale(1.18); }
}

/* title: a band of light passes across the ink now and then */
.wlc-title {
  font-size: 2.1rem;
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 42%, #c79a3a 50%, var(--ink) 58%, var(--ink) 100%) 100% 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.welcome-modal-backdrop.active .wlc-title { animation: letterFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both, wlcShine 7s ease-in-out 1.6s infinite; }
@keyframes wlcShine {
  0% { background-position: 100% 0; }
  35%, 100% { background-position: 0 0; }
}

/* rules draw outward from the cross; the cross twinkles */
.wlc-rule span { transform: scaleX(0); }
.wlc-rule span:first-child { transform-origin: right center; }
.wlc-rule span:last-child { transform-origin: left center; }
.welcome-modal-backdrop.active .wlc-rule span { animation: wlcDraw 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards; }
@keyframes wlcDraw { to { transform: scaleX(1); } }
.welcome-modal-backdrop.active .wlc-rule i { animation: wlcTwinkle 3s ease-in-out 1.2s infinite; }
@keyframes wlcTwinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

/* the prompt is "written" left to right */
.welcome-modal-backdrop.active .wlc-prompt {
  animation: wlcWrite 1.5s steps(34, end) 1s both;
}
@keyframes wlcWrite {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 -4px 0 0); }
}

/* name field: pen wiggles and the field lifts on focus */
.wlc-line { transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.wlc-line:focus-within { transform: translateY(-2px); }
.wlc-line:focus-within i { animation: wlcPen 0.7s ease; }
@keyframes wlcPen {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-18deg) translateY(-2px); }
  60% { transform: rotate(12deg); }
}

/* button breathes softly, the note dances on hover */
.welcome-modal-backdrop.active .btn-welcome-submit { animation: letterFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.62s both, wlcBreath 3.6s ease-in-out 1.6s infinite; }
@keyframes wlcBreath {
  0%, 100% { box-shadow: 0 8px 20px rgba(160, 120, 40, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
  50% { box-shadow: 0 10px 30px rgba(200, 150, 50, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
}
.btn-welcome-submit:hover i { animation: wlcNote 0.7s ease; }
@keyframes wlcNote {
  0%, 100% { transform: rotate(0); }
  30% { transform: translateY(-4px) rotate(-14deg); }
  60% { transform: translateY(1px) rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-modal-card { transform: none; }
  .wlc-seal::after { display: none; }
  .wlc-rule span { transform: none; }
  .wlc-title { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
  .welcome-modal-backdrop.active .wlc-seal,
  .welcome-modal-backdrop.active .wlc-seal i,
  .welcome-modal-backdrop.active .wlc-title,
  .welcome-modal-backdrop.active .wlc-rule span,
  .welcome-modal-backdrop.active .wlc-rule i,
  .welcome-modal-backdrop.active .wlc-prompt,
  .welcome-modal-backdrop.active .btn-welcome-submit { animation: none; }
}

/* ==========================================================================
   Header, take 3: a floating glass capsule with a solid gold emblem and a short gold glow underneath.
   The fixed strip keeps its height (page offsets unchanged); only the inner container is drawn.
   ========================================================================== */
.navbar {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  pointer-events: none;
}
.navbar::after { display: none; }
.nav-container {
  position: relative;
  max-width: 1180px;
  height: 54px;
  padding: 0 8px 0 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(20, 28, 52, 0.72), rgba(10, 15, 32, 0.66));
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  pointer-events: auto;
}
.nav-container::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 38%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  opacity: 0.65;
  filter: drop-shadow(0 0 6px var(--gold-primary));
  pointer-events: none;
}
.brand-logo { gap: 12px; }
.brand-icon {
  width: 36px;
  height: 36px;
  color: #0a0f20;
  font-size: 0.82rem;
  background: var(--gold-gradient);
  border: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 0 20px var(--border-highlight);
}
.brand-logo:hover .brand-icon { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1), 0 0 28px var(--gold-primary); transform: scale(1.05); }
.brand-title { font-size: 1.3rem; letter-spacing: 0.14em; }
.brand-sub { font-size: 0.56rem; letter-spacing: 0.36em; }
.user-greeting-pill { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); }
.user-greeting-pill:hover { background: rgba(255, 255, 255, 0.11); border-color: var(--border-highlight); }
@media (max-width: 768px) {
  .nav-container { height: 44px; padding: 0 5px 0 6px; }
  .nav-container::after { width: 50%; }
  .brand-logo { gap: 9px; }
  .brand-icon { width: 32px; height: 32px; font-size: 0.72rem; }
  .brand-title { font-size: 1.02rem; letter-spacing: 0.09em; }
  .brand-sub { font-size: 0.5rem; letter-spacing: 0.26em; }
  .user-greeting-pill { padding: 2px 11px 2px 2px; }
  .greeting-avatar { width: 26px; height: 26px; }
}

/* ==========================================================================
   Header type + resting state
   ========================================================================== */
.brand-title {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 0.95;
}
.brand-title em {
  margin-left: 0.1em;
  font-style: italic;
  font-weight: 500;
  color: var(--gold-light);
}
.brand-sub {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  opacity: 0.8;
}
.greeting-hello {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 500;
}
.greeting-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
@media (max-width: 768px) {
  .brand-title { font-size: 1.22rem; letter-spacing: 0.015em; }
  .brand-sub { font-size: 0.5rem; letter-spacing: 0.3em; }
  .greeting-hello { font-size: 0.98rem; }
  .greeting-name { font-size: 1.02rem; }
}

/* idle / mouse away: the capsule disappears completely (JS toggles .is-faded, see experience.js) */
.nav-container { transition: opacity 0.9s ease, transform 0.9s ease, box-shadow 0.9s ease; }
.navbar.is-faded .nav-container {
  opacity: 0;
  transform: translateY(-6px);
  box-shadow: none;
  pointer-events: none; /* invisible, so it must not catch stray taps */
}
.navbar:not(.is-faded) .nav-container { transition-duration: 0.35s; }
@media (prefers-reduced-motion: reduce) {
  .navbar.is-faded .nav-container { transform: none; }
}

/* ==========================================================================
   Bottom player: full-width frosted glass (always visible)
   ========================================================================== */
.music-player-bar {
  background: linear-gradient(180deg, rgba(24, 33, 62, 0.58) 0%, rgba(9, 14, 30, 0.72) 100%);
  backdrop-filter: blur(26px) saturate(165%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* soft sheen across the top half, like light on glass */
.music-player-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%),
    radial-gradient(40% 120% at 50% 130%, color-mix(in srgb, var(--dyn-1, var(--gold-primary)) 22%, transparent), transparent 70%);
  pointer-events: none;
}

/* ==========================================================================
   Tinted night glass (header capsule + bottom player): deep dark glass with a colour wash from the
   active album (--dyn-1), a crisp hairline edge and a bright top highlight. No milky/grey tint.
   ========================================================================== */
.nav-container,
.music-player-bar {
  --glass-accent: var(--dyn-1, var(--gold-primary, #BA9A42));
  background:
    radial-gradient(120% 220% at 0% 0%, color-mix(in srgb, var(--glass-accent) 26%, transparent) 0%, transparent 55%),
    radial-gradient(90% 200% at 100% 100%, color-mix(in srgb, var(--glass-accent) 14%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, rgba(14, 20, 40, 0.6), rgba(6, 10, 22, 0.74));
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  border: 1px solid color-mix(in srgb, var(--glass-accent) 30%, rgba(255, 255, 255, 0.06));
}
.nav-container {
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.42),
    0 0 40px color-mix(in srgb, var(--glass-accent) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.music-player-bar {
  border-width: 1px 0 0;
  box-shadow:
    0 -14px 40px rgba(0, 0, 0, 0.4),
    0 -1px 30px color-mix(in srgb, var(--glass-accent) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.music-player-bar::after {
  background: radial-gradient(45% 140% at 50% 140%, color-mix(in srgb, var(--glass-accent) 20%, transparent), transparent 70%);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav-container, .music-player-bar { background: rgba(12, 18, 36, 0.95); }
}

/* ==========================================================================
   Glass, take 6: the header is two floating glass pills (brand / greeting) instead of one wide bar,
   each with a gradient "refraction" edge; the player gets the same edge on its top line.
   ========================================================================== */
.nav-container {
  max-width: 1240px;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
.nav-container::after { display: none; }
.nav-container > * { pointer-events: auto; }
.navbar.is-faded .nav-container > * { pointer-events: none; }

.brand-logo,
.user-greeting-pill {
  --glass-accent: var(--dyn-1, var(--gold-primary, #BA9A42));
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.07) 100%),
    radial-gradient(140% 220% at 0% 0%, color-mix(in srgb, var(--glass-accent) 22%, transparent), transparent 60%),
    rgba(9, 14, 30, 0.5);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 28px color-mix(in srgb, var(--glass-accent) 10%, transparent);
}
/* gradient edge: bright where light hits (top-left), tinted by the album, fading out in the middle */
.brand-logo::before,
.user-greeting-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.6) 0%, color-mix(in srgb, var(--glass-accent) 45%, transparent) 30%, rgba(255, 255, 255, 0.05) 60%, color-mix(in srgb, var(--glass-accent) 50%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.brand-logo { padding: 7px 22px 7px 7px; }
.brand-logo:hover .brand-icon { transform: none; }
.user-greeting-pill { padding: 6px 18px 6px 6px; }
.user-greeting-pill:hover { background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.1) 100%),
    radial-gradient(140% 220% at 0% 0%, color-mix(in srgb, var(--glass-accent) 30%, transparent), transparent 60%),
    rgba(9, 14, 30, 0.5); border: 0; }

/* old-style Cormorant digits jump up and down ("123"): use lining figures */
.brand-title, .brand-title em, .greeting-name, .greeting-hello {
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}

/* player: same glass edge on the top line, slightly more visible glass */
.music-player-bar {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 18%, color-mix(in srgb, var(--dyn-1, var(--gold-primary)) 70%, white) 50%, rgba(255, 255, 255, 0.35) 82%, transparent 100%) 1;
  background:
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.045) 46%, transparent 62%),
    radial-gradient(70% 220% at 0% 0%, color-mix(in srgb, var(--dyn-1, var(--gold-primary)) 22%, transparent), transparent 60%),
    radial-gradient(60% 200% at 100% 100%, color-mix(in srgb, var(--dyn-1, var(--gold-primary)) 14%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(18, 26, 50, 0.56), rgba(7, 11, 24, 0.72));
}

@media (max-width: 768px) {
  .brand-logo { padding: 5px 16px 5px 5px; gap: 9px; }
  .user-greeting-pill { padding: 4px 13px 4px 4px; }
}

/* ==========================================================================
   Header, take 7: a full-width bar with the same tinted night glass as the player bar (edge on the bottom line),
   that disappears completely when idle. Title in Playfair Display. Replaces the two-pill version above.
   ========================================================================== */
.navbar {
  --glass-accent: var(--dyn-1, var(--gold-primary, #BA9A42));
  pointer-events: auto;
  background:
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.045) 46%, transparent 62%),
    radial-gradient(70% 260% at 0% 0%, color-mix(in srgb, var(--glass-accent) 22%, transparent), transparent 60%),
    radial-gradient(60% 240% at 100% 100%, color-mix(in srgb, var(--glass-accent) 14%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(18, 26, 50, 0.56), rgba(7, 11, 24, 0.72));
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  border-width: 0 0 1px;
  border-style: solid;
  border-color: transparent;
  border-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 18%, color-mix(in srgb, var(--glass-accent) 70%, white) 50%, rgba(255, 255, 255, 0.35) 82%, transparent 100%) 1;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), 0 1px 30px color-mix(in srgb, var(--glass-accent) 12%, transparent), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.navbar:not(.is-faded) { transition-duration: 0.35s; }
.navbar.is-faded {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}
/* the old capsule/pill states no longer apply */
.nav-container,
.navbar.is-faded .nav-container {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  max-width: 1240px;
}
.nav-container > *,
.navbar.is-faded .nav-container > * { pointer-events: inherit; }

.brand-logo {
  padding: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.brand-logo::before,
.user-greeting-pill::before { display: none; }
.user-greeting-pill {
  padding: 4px 16px 4px 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.user-greeting-pill:hover {
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid var(--border-highlight);
}

/* title + greeting type */
.brand-title,
.greeting-name,
.greeting-hello {
  font-family: 'Playfair Display', Georgia, serif;
}
.brand-title {
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}
.brand-title em { font-weight: 500; letter-spacing: 0.02em; }
.greeting-hello { font-size: 0.88rem; font-weight: 500; }
.greeting-name { font-size: 0.92rem; font-weight: 600; letter-spacing: 0; }

@media (max-width: 768px) {
  .brand-logo { padding: 0; gap: 9px; }
  .user-greeting-pill { padding: 3px 12px 3px 3px; }
  .brand-title { font-size: 1.02rem; }
  .greeting-hello { font-size: 0.8rem; }
  .greeting-name { font-size: 0.84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .navbar.is-faded { transform: none; }
}

/* ==========================================================================
   Header, take 8: Cinzel title + Cormorant italic byline, a fine SVG cross in a double-ringed emblem,
   an initial in the greeting avatar, and a small glowing diamond on the bottom edge.
   ========================================================================== */
.brand-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
}
.brand-name { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
.brand-year {
  position: relative;
  padding-left: 12px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--gold-light);
}
.brand-year::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 0.95em;
  transform: translateY(-50%);
  background: linear-gradient(180deg, transparent, var(--gold-light), transparent);
  opacity: 0.8;
}
.brand-info { gap: 5px; }
.brand-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--gold-light);
  opacity: 0.85;
  line-height: 1;
}

/* emblem: gold disc, hairline inner ring, slim cross */
.brand-icon { position: relative; width: 38px; height: 38px; }
.brand-icon::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(10, 15, 32, 0.38);
  pointer-events: none;
}
.brand-cross { width: 18px; height: 18px; display: block; }

/* greeting pill */
.user-greeting-pill { gap: 9px; padding: 4px 16px 4px 4px; }
.greeting-avatar { font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.78rem; }
.greeting-initial { font-weight: 700; line-height: 1; }
.greeting-hello,
.greeting-name { font-family: 'Cormorant Garamond', Georgia, serif; }
.greeting-hello { font-size: 1.05rem; font-style: italic; font-weight: 500; color: var(--gold-light); }
.greeting-name { font-size: 1.12rem; font-weight: 700; letter-spacing: 0.01em; }
.greeting-edit-icon { font-size: 0.72rem; }

/* diamond ornament on the bottom edge */
.navbar::after {
  display: block;
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 5px;
  height: 5px;
  background: var(--gold-light);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 10px 1px var(--gold-primary);
  opacity: 0.85;
  pointer-events: none;
}

@media (max-width: 768px) {
  .brand-title { font-size: 0.86rem; letter-spacing: 0.12em; gap: 8px; }
  .brand-year { font-size: 0.68rem; padding-left: 8px; letter-spacing: 0.14em; }
  .brand-sub { font-size: 0.78rem; letter-spacing: 0.04em; }
  .brand-icon { width: 34px; height: 34px; }
  .brand-cross { width: 16px; height: 16px; }
  .user-greeting-pill { padding: 3px 12px 3px 3px; gap: 7px; }
  .greeting-hello { font-size: 0.95rem; }
  .greeting-name { font-size: 1rem; }
}
@media (max-width: 400px) {
  .brand-year { display: none; }
}
.greeting-avatar [hidden] { display: none !important; }

/* ==========================================================================
   Header type, take 9: one clean family (Outfit, the same as the site's buttons) instead of serifs.
   ========================================================================== */
.brand-title,
.brand-sub,
.greeting-hello,
.greeting-name,
.greeting-avatar {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-variant-numeric: normal;
  font-feature-settings: normal;
}
.brand-title {
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.brand-year {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.28em;
}
.brand-info { gap: 6px; }
.brand-sub {
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.8;
}
.greeting-hello {
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}
.greeting-name {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.greeting-avatar { font-size: 0.74rem; font-weight: 600; }
@media (max-width: 768px) {
  .brand-title { font-size: 0.82rem; letter-spacing: 0.15em; }
  .brand-year { font-size: 0.64rem; letter-spacing: 0.18em; }
  .brand-sub { font-size: 0.5rem; letter-spacing: 0.3em; }
  .greeting-hello { font-size: 0.76rem; }
  .greeting-name { font-size: 0.8rem; }
}

/* "2026": no divider line, just a little air */
.brand-year { padding-left: 0; }
.brand-year::before { display: none; }

/* ==========================================================================
   Hero aura, no visible edges: every glow/smoke uses an eased multi-stop falloff (instead of a single
   "transparent 70%" stop that reads as the rim of an ellipse) and a long, soft mask at the bottom.
   ========================================================================== */
.hero-section::before,
.hero-section::after {
  inset: 0 0 6% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, rgba(0, 0, 0, 0.7) 46%, rgba(0, 0, 0, 0.38) 62%, rgba(0, 0, 0, 0.16) 78%, rgba(0, 0, 0, 0.05) 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 28%, rgba(0, 0, 0, 0.7) 46%, rgba(0, 0, 0, 0.38) 62%, rgba(0, 0, 0, 0.16) 78%, rgba(0, 0, 0, 0.05) 90%, transparent 100%);
}
.hero-section::before {
  background:
    radial-gradient(ellipse 42% 50% at 22% 30%, color-mix(in srgb, var(--dyn-1) 20%, transparent) 0%, color-mix(in srgb, var(--dyn-1) 13%, transparent) 28%, color-mix(in srgb, var(--dyn-1) 6%, transparent) 55%, color-mix(in srgb, var(--dyn-1) 2%, transparent) 75%, transparent 100%),
    radial-gradient(ellipse 38% 46% at 80% 24%, color-mix(in srgb, var(--dyn-2) 22%, transparent) 0%, color-mix(in srgb, var(--dyn-2) 14%, transparent) 28%, color-mix(in srgb, var(--dyn-2) 6%, transparent) 55%, color-mix(in srgb, var(--dyn-2) 2%, transparent) 75%, transparent 100%),
    radial-gradient(ellipse 56% 30% at 50% 58%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.025) 45%, transparent 100%);
}
body:has(.music-player-bar.is-playing) .hero-section::before {
  background:
    radial-gradient(ellipse 44% 52% at 22% 30%, color-mix(in srgb, var(--dyn-1) 32%, transparent) 0%, color-mix(in srgb, var(--dyn-1) 21%, transparent) 28%, color-mix(in srgb, var(--dyn-1) 9%, transparent) 55%, color-mix(in srgb, var(--dyn-1) 3%, transparent) 75%, transparent 100%),
    radial-gradient(ellipse 40% 48% at 80% 24%, color-mix(in srgb, var(--dyn-2) 34%, transparent) 0%, color-mix(in srgb, var(--dyn-2) 22%, transparent) 28%, color-mix(in srgb, var(--dyn-2) 9%, transparent) 55%, color-mix(in srgb, var(--dyn-2) 3%, transparent) 75%, transparent 100%),
    radial-gradient(ellipse 56% 26% at 50% 38%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.035) 45%, transparent 100%);
}

/* the rising smoke: ellipses sit higher inside a box that fades out gradually, with a wider blur to melt the shapes */
.hero-section .hero-content-relative::after {
  inset: 0 -14% 44% -14%;
  background:
    radial-gradient(ellipse 32% 36% at 14% 52%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0.05) 58%, transparent 100%),
    radial-gradient(ellipse 38% 40% at 48% 44%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.09) 30%, rgba(255, 255, 255, 0.035) 58%, transparent 100%),
    radial-gradient(ellipse 30% 34% at 86% 50%, color-mix(in srgb, var(--dyn-1) 34%, transparent) 0%, color-mix(in srgb, var(--dyn-1) 18%, transparent) 35%, color-mix(in srgb, var(--dyn-1) 6%, transparent) 62%, transparent 100%),
    radial-gradient(ellipse 26% 30% at 30% 26%, color-mix(in srgb, var(--dyn-2) 28%, transparent) 0%, color-mix(in srgb, var(--dyn-2) 14%, transparent) 35%, color-mix(in srgb, var(--dyn-2) 5%, transparent) 62%, transparent 100%),
    radial-gradient(ellipse 28% 30% at 70% 22%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 35%, transparent 100%);
  filter: blur(22px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 14%, #000 28%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0.08) 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 14%, #000 28%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0.08) 86%, transparent 100%);
}

/* ==========================================================================
   Animations & Effects OFF (Settings > App; html.reduce-motion is set by the script in includes/header.php,
   from the saved choice or an automatic guess for the device, same idea as prefers-reduced-motion).
   Animations and transitions collapse to their end state instead of being removed, so animationend /
   transitionend still fire and nothing waits forever. Infinite loops (glow, shimmer, discs, stars) rest.
   ========================================================================== */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
/* The settings switches keep their small slide so the toggle still feels like it works */
html.reduce-motion .eq-switch-ui,
html.reduce-motion .eq-switch-ui::after {
  transition-duration: 0.2s !important;
}
html.reduce-motion .hero-section::after { opacity: 0.45; }
html.reduce-motion .hero-section .hero-content-relative::after,
html.reduce-motion #celestialCanvas { display: none; }
html.reduce-motion .welcome-modal-card { transform: none; }
html.reduce-motion .wlc-title { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }