:root {
  --primary: #6C63FF;
  --secondary: #EC4899;
  --bg: #07070f;
  --text: #ffffff;
  --text-muted: rgba(255,255,255,0.5);
  --font: 'Space Grotesk', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: none;
}

.hidden { display: none !important; }

/* Login & Event selection */
#proj-login, #proj-event-screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.proj-login-box {
  text-align: center;
  max-width: 400px;
  width: 100%;
  padding: 0 20px;
}

/* ── Step presentation titles ── */
.proj-step-title {
  font-size: min(4vw, 5vh);
  font-weight: 700;
  text-align: center;
  margin-bottom: 2vh;
  color: #fff;
  flex-shrink: 1;
}

.proj-lang-grid {
  display: flex;
  justify-content: center;
  gap: 4vw;
  flex: 1;
  min-height: 0;
  align-items: center;
}

.proj-lang-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: min(3vw, 3vh);
  padding: min(4vh, 4vw) min(5vw, 5vh);
  overflow: hidden;
}

.proj-lang-flag {
  font-size: min(10vw, 12vh);
}

.proj-lang-name {
  font-size: min(3vw, 4vh);
  font-weight: 700;
  color: #fff;
}

.proj-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5vw;
  width: 70vw;
  flex: 1;
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
}

.proj-theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5vh;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: min(2vw, 2vh);
  padding: 1vh 1vw;
  overflow: hidden;
  min-height: 0;
}

.proj-theme-icon {
  font-size: min(5vw, 6vh);
}

.proj-theme-name {
  font-size: min(2vw, 3vh);
  font-weight: 600;
  color: #fff;
}

.proj-word-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5vw;
  width: 75vw;
  margin: 0 auto;
}

.proj-word-chip {
  font-weight: 700;
  opacity: 0;
  animation: wordFadeIn 0.5s ease forwards;
}

.proj-word-chip:nth-child(1) { animation-delay: 0.1s; }
.proj-word-chip:nth-child(2) { animation-delay: 0.2s; }
.proj-word-chip:nth-child(3) { animation-delay: 0.3s; }
.proj-word-chip:nth-child(4) { animation-delay: 0.4s; }
.proj-word-chip:nth-child(5) { animation-delay: 0.5s; }
.proj-word-chip:nth-child(6) { animation-delay: 0.6s; }
.proj-word-chip:nth-child(7) { animation-delay: 0.7s; }
.proj-word-chip:nth-child(8) { animation-delay: 0.8s; }
.proj-word-chip:nth-child(9) { animation-delay: 0.9s; }
.proj-word-chip:nth-child(10) { animation-delay: 1.0s; }
.proj-word-chip:nth-child(11) { animation-delay: 1.1s; }
.proj-word-chip:nth-child(12) { animation-delay: 1.2s; }
.proj-word-chip:nth-child(13) { animation-delay: 1.3s; }

@keyframes wordFadeIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

/* ── Word badges (presentation step 4) ── */
.proj-word-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5vw;
  padding: 2vh 4vw;
  margin-top: 4vh;
}

.proj-word-badge {
  display: inline-block;
  padding: 1.2vh 2.5vw;
  border-radius: 50px;
  font-size: min(2.5vw, 3.5vh);
  font-weight: 700;
  color: #fff;
  background: var(--badge-color);
  box-shadow: 0 0 20px color-mix(in srgb, var(--badge-color) 40%, transparent);
  animation: badgePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation-delay: calc(var(--i, 0) * 0.06s);
}

@keyframes badgePop {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Vote cards ── */
.proj-vote-grid {
  display: grid;
  gap: 1.5vw;
  width: 80vw;
  flex: 1;
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
}

.proj-vote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5vh;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: min(2vw, 2vh);
  padding: 1vh 1vw;
  overflow: hidden;
  min-height: 0;
  max-height: 30vh;
}

.proj-vote-card-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(108,99,255,0.3), rgba(108,99,255,0.1));
  transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 0;
  border-radius: 0 0 2vw 2vw;
}

.proj-vote-card-icon {
  font-size: min(4vw, 5vh);
  z-index: 1;
}

.proj-vote-card-name {
  font-size: min(2.2vw, 3vh);
  font-weight: 600;
  color: #fff;
  z-index: 1;
  text-align: center;
}

.proj-vote-card-pct {
  font-size: min(4vw, 5vh);
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 1;
}

.proj-lyrics-preview {
  font-size: clamp(0.6rem, 1.1vw, 1.2rem);
  line-height: 1.4;
  color: rgba(255,255,255,0.7);
  z-index: 1;
  text-align: center;
  margin: 0.5vw 0;
  overflow: hidden;
}

.proj-card-winner {
  border-color: var(--primary) !important;
  background: rgba(108,99,255,0.08) !important;
  transform: scale(1.05);
  transition: all 0.5s;
}

.proj-card-loser {
  opacity: 0.3;
  transition: all 0.5s;
}

.proj-variant-card { aspect-ratio: 1; }

.variant-result-lyrics {
  display: flex;
  gap: 3vw;
  justify-content: center;
  align-items: center;
  margin-top: 2vh;
  width: 90vw;
  flex: 1;
  min-height: 0;
}

.vrl-col {
  flex: 1;
  max-width: 28vw;
}

.vrl-title {
  font-size: min(1.8vw, 2.5vh);
  font-weight: 700;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.1vw;
  margin-bottom: 0.8vh;
}

.vrl-text {
  font-size: min(1.6vw, 2.2vh);
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
}

.pre-session-text {
  font-size: 3vw;
  color: var(--text-muted);
  margin-top: 4vh;
}

/* ── Intro ── */
.intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 6vh;
}

.intro-title {
  font-size: 3.5vw;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.intro-layout {
  display: flex;
  align-items: center;
  gap: 5vw;
  margin-top: 4vh;
}

#intro-qr-container {
  background: white;
  border-radius: 16px;
  padding: 2vw;
  flex-shrink: 0;
}

#intro-qr {
  width: 20vw;
  height: 20vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

#intro-qr img, #intro-qr canvas { width: 100%; height: 100%; }

.intro-steps {
  display: flex;
  flex-direction: column;
  gap: 3vh;
}

.intro-step {
  display: flex;
  align-items: center;
  gap: 2vw;
  font-size: 3vw;
  opacity: 0;
  animation: introFadeIn 0.6s ease forwards;
}

.intro-step:nth-child(1) { animation-delay: 0.3s; }
.intro-step:nth-child(2) { animation-delay: 0.8s; }
.intro-step:nth-child(3) { animation-delay: 1.3s; }
.intro-step:nth-child(4) { animation-delay: 1.8s; }

.intro-icon { font-size: 4vw; }
.intro-text { color: rgba(255,255,255,0.9); }

@keyframes introFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.proj-login-title {
  font-size: 3vw;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5vh;
}

.proj-login-sub {
  color: var(--text-muted);
  margin-bottom: 3vh;
  font-size: 1.5vw;
}

#proj-login input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 1.2rem;
  margin-bottom: 12px;
  text-align: center;
}

#proj-login button, #proj-event-screen button {
  padding: 12px 28px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
}

#proj-login-error {
  color: #e74c3c;
  font-size: 0.9rem;
  min-height: 20px;
  margin-top: 8px;
}

#proj-event-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.proj-event-card {
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.proj-event-card:hover {
  border-color: var(--primary);
  background: rgba(108,99,255,0.08);
}

.proj-event-card-name { font-size: 1.3rem; font-weight: 600; }
.proj-event-card-date { font-size: 0.9rem; color: var(--text-muted); margin-top: 4px; }

.proj-btn-logout {
  background: none !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: var(--text-muted) !important;
  padding: 8px 20px !important;
  font-size: 0.9rem !important;
  cursor: pointer;
}

#proj-back-btn {
  position: fixed;
  top: 1vh;
  left: 1vw;
  font-size: 1vw;
  color: rgba(255,255,255,0.2);
  cursor: pointer;
  z-index: 200;
  font-weight: 600;
}

#proj-back-btn:hover { color: rgba(255,255,255,0.5); cursor: pointer !important; }

/* Screens — general containment: nothing escapes the viewport */
.screen {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  padding: 2vh 2vw;
  opacity: 0;
  transition: opacity 0.6s ease;
  overflow: hidden;
}

.screen.active {
  display: flex;
  opacity: 1;
}

/* All direct children shrink to fit, never overflow */
.screen > * {
  max-width: 100%;
  flex-shrink: 1;
  min-height: 0;
  min-width: 0;
}


h2 {
  font-size: 2.5vw;
  margin-bottom: 1vh;
  text-align: center;
}

.subtitle { color: #fff; font-size: 2.5vw; font-weight: 600; margin-top: 3vh; }

/* Logo */
.logo-big {
  font-size: 6vw;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin-bottom: 3vh;
}

/* Waiting / QR */
#qr-container {
  background: white;
  border-radius: 24px;
  padding: min(3vw, 4vh);
  margin: 2vh 0;
}

#qr-code {
  width: min(35vw, 50vh);
  height: min(35vw, 50vh);
  display: flex;
  align-items: center;
  justify-content: center;
}

#qr-code img, #qr-code canvas { width: 100%; height: 100%; }

#qr-url {
  color: #333;
  font-size: 1.4vw;
  text-align: center;
  margin-top: 1vh;
  font-weight: bold;
}

/* Static/centered screens */
#waiting, #intro, #generating, #final, #result { justify-content: center; }
#waiting { cursor: default; }

#waiting-count {
  font-size: 2.5vw;
  margin-top: 3vh;
  color: var(--text-muted);
}

#waiting-count span { color: var(--primary); font-weight: bold; }

/* Step indicators */
#step-indicators {
  display: flex;
  gap: 1.5vw;
  margin-bottom: 2vh;
}

.step-pip {
  width: 1.8vw;
  height: 1.8vw;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  transition: all 0.4s;
}

.step-pip.active {
  background: var(--primary);
  box-shadow: 0 0 20px var(--primary);
  transform: scale(1.3);
}

.step-pip.done {
  background: var(--secondary);
}

/* Vote */
.screen-header { text-align: center; width: 100%; }

#vote-timer {
  font-size: clamp(4rem, 10vw, 12rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin: 1vh 0;
  text-align: center;
  flex-shrink: 1;
}

#vote-bars {
  width: 95vw;
  margin-top: 1vh;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bar-row {
  display: flex;
  align-items: center;
  margin: 0.8vh 0;
  animation: slideIn 0.3s ease forwards;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

.bar-label {
  width: 22vw;
  text-align: right;
  padding-right: 2vw;
  font-size: 2.2vw;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  flex: 1;
  height: 5vh;
  background: rgba(255,255,255,0.06);
  border-radius: 0.8vh;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 0.8vh;
  transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  min-width: 3px;
}

.bar-row.winner .bar-label {
  color: #2ecc71;
}

.bar-row.winner .bar-fill {
  background: linear-gradient(90deg, #2ecc71, #27ae60);
}

.bar-row.winner .bar-count {
  color: #2ecc71;
  font-weight: 700;
}

.bar-count {
  width: 10vw;
  text-align: left;
  padding-left: 1.5vw;
  font-size: 2vw;
  color: var(--text-muted);
}

/* Result */
#result-winner-anim {
  margin-top: 2vh;
}

#result-winner {
  font-size: 8vw;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Word cloud */
#cloud-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1vw;
  flex: 1;
  min-height: 0;
  max-width: 80vw;
  padding: 3vh 0;
}

.cloud-word {
  display: inline-block;
  font-weight: 700;
  transition: all 0.4s;
  animation: floatIn 0.6s ease forwards;
  opacity: 0;
}

@keyframes floatIn {
  from { opacity: 0; transform: translateY(20px) scale(0.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Lyrics */
#lyrics {
  display: flex;
  align-items: stretch;
  padding: 8vh 0;
}

#lyrics-columns {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90vw;
  gap: 3vw;
  flex: 1;
  min-height: 0;
}

.lyrics-col {
  flex: 1;
  max-width: 42vw;
}

.lyrics-section-title {
  font-size: 1.8vw;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 1vh;
  text-transform: uppercase;
  letter-spacing: 0.2vw;
}

.lyrics-section-text {
  font-size: 2.2vw;
  white-space: pre-wrap;
  line-height: 1.7;
  font-family: var(--font);
}

.lyrics-client-word {
  color: var(--primary);
  font-weight: 700;
}

.lyrics-thumbs-col {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  align-items: center;
  justify-content: center;
  margin-left: 3vw;
}

.lyrics-pill {
  padding: 1vh 2vw;
  border-radius: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(2vw, 2.5vh);
  font-weight: 700;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.15);
  color: var(--text-muted);
  transition: all 0.3s;
}

.lyrics-pill-active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-color: var(--primary);
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(108,99,255,0.4);
}

.lyrics-left-title {
  font-size: 2vw;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 1vh;
}

.lyrics-full-text {
  flex: 1;
  overflow: hidden;
  padding: 0 3vw;
  font-size: min(1.8vw, 3vh);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lyrics-full-text .lyrics-section-title {
  font-size: min(1.5vw, 2.5vh);
  margin-bottom: 0.5vh;
}

.lyrics-full-text .lyrics-section-text {
  font-size: min(1.8vw, 3vh);
  white-space: pre-wrap;
  font-family: var(--font);
}

/* Generating */
.generating-content { text-align: center; }

.loader-ring {
  display: inline-block;
  position: relative;
  width: 12vw;
  height: 12vw;
  margin-bottom: 3vh;
}

.loader-ring div {
  position: absolute;
  inset: 0;
  border: 0.6vw solid transparent;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.loader-ring div:nth-child(1) { animation-delay: -0.45s; border-top-color: var(--secondary); }
.loader-ring div:nth-child(2) { animation-delay: -0.3s; }
.loader-ring div:nth-child(3) { animation-delay: -0.15s; border-top-color: var(--secondary); }

@keyframes spin { to { transform: rotate(360deg); } }

/* Variants */
#variant-indicators {
  display: flex;
  gap: 2vw;
  margin-bottom: 3vh;
}

.variant-pip {
  width: 4vw;
  height: 4vw;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2vw;
  font-weight: bold;
  transition: all 0.3s;
}

.variant-pip.playing {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  transform: scale(1.2);
  box-shadow: 0 0 30px rgba(108, 99, 255, 0.5);
}

.variant-pip.winner {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  transform: scale(1.2);
}

/* Audio visualizer */
#audio-viz, #final-viz {
  width: 70vw;
  height: 25vh;
  margin: 2vh 0;
}

#viz-canvas, #final-canvas {
  width: 100%;
  height: 100%;
}

/* Variant vote bars */
#variant-vote-timer {
  font-size: clamp(4rem, 10vw, 12rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin: 1vh 0;
  text-align: center;
  flex-shrink: 1;
}

#variant-vote-bars {
  width: 60vw;
  margin-top: 3vh;
  flex: 1;
  min-height: 0;
}

/* Final */
.final-content {
  text-align: center;
  width: 100%;
}

#final-lyrics {
  font-size: 2vw;
  white-space: pre-wrap;
  line-height: 1.8;
  text-align: center;
  font-family: var(--font);
  max-width: 70vw;
  margin: 2vh auto 0;
  color: var(--text-muted);
}

/* Presentation items */
.proj-present-grid {
  display: grid;
  gap: 1vw;
  width: 95vw;
  flex: 1;
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
}

.proj-present-grid > .proj-present-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.proj-present-item {
  background: color-mix(in srgb, var(--card-color, #6C63FF) 15%, transparent);
  border: 2px solid color-mix(in srgb, var(--card-color, #6C63FF) 40%, transparent);
  border-radius: 1.5vh;
  padding: 1vh 1vw;
  transition: all 0.4s;
  cursor: default;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 0 15px color-mix(in srgb, var(--card-color, #6C63FF) 20%, transparent);
}

.proj-present-item.playing {
  border-color: var(--primary);
  background: rgba(108,99,255,0.12);
  box-shadow: 0 0 20px rgba(108,99,255,0.25);
  transform: scale(1.03);
}

.proj-present-name {
  font-size: min(2vw, 3vh);
  font-weight: 700;
  text-align: center;
}

.proj-present-vibes {
  font-size: min(1.6vw, 2.2vh);
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.4vh;
  line-height: 1.3;
}

/* Hide default audio controls — we use canvas viz */
audio { display: none; }

/* Recap bar */
#recap-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.8vw;
  padding: 0.8vh 2vw;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  z-index: 100;
}

#recap-bar:empty { display: none; }

.recap-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3vw;
  padding: 0.3vh 0.8vw;
  border-radius: 1vh;
  background: rgba(108, 99, 255, 0.2);
  font-size: 1vw;
}

.recap-pill .pill-label {
  color: var(--text-muted);
}

.recap-pill .pill-value {
  color: var(--primary);
  font-weight: 700;
}

#proj-variants-recap {
  display: flex;
  justify-content: center;
  gap: 1vw;
  margin-bottom: 1vh;
}

#proj-variants-recap:empty { display: none; }

#variants {
  justify-content: flex-start;
  padding-top: 4vh;
}

#variants h2 {
  margin-bottom: 2vh;
}

#variants-lyrics {
  display: flex;
  gap: 4vw;
  justify-content: center;
  margin-top: 2vh;
  flex: 1;
  overflow-y: auto;
}

#variants-lyrics:empty { display: none; }

.vl-col {
  flex: 1;
  max-width: 40vw;
}

.vl-title {
  font-size: 1.4vw;
  font-weight: 700;
  color: var(--secondary);
  margin-top: 1.5vh;
  margin-bottom: 0.3vh;
}

.vl-text {
  font-size: 1.2vw;
  color: rgba(255,255,255,0.8);
  white-space: pre-wrap;
  line-height: 1.6;
}