html, body { background: #0A0A0F; color: #E6E6EF; font-family: Manrope, system-ui, sans-serif; }
  html.light, html.light body { background: #F7F7FB; color: #13131C; }
  * { -webkit-font-smoothing: antialiased; }
  /* Selection */
  ::selection { background: rgba(124,92,255,0.35); color: #fff; }
  /* Scrollbar */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: #2A2A3A; border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover { background: #3A3A4D; }
  html.light ::-webkit-scrollbar-thumb { background: #d6d6e2; }

  /* Animated waveform: pure CSS bars */
  .wave-bars { display: inline-flex; align-items: end; gap: 3px; height: 100%; }
  .wave-bars > i {
    display: block; width: 3px; border-radius: 2px;
    background: linear-gradient(180deg, #A89AFF, #7C5CFF);
    animation: wave 1.4s ease-in-out infinite;
  }
  .wave-bars > i:nth-child(1){ animation-delay: -0.10s; }
  .wave-bars > i:nth-child(2){ animation-delay: -0.30s; }
  .wave-bars > i:nth-child(3){ animation-delay: -0.50s; }
  .wave-bars > i:nth-child(4){ animation-delay: -0.70s; }
  .wave-bars > i:nth-child(5){ animation-delay: -0.90s; }
  .wave-bars > i:nth-child(6){ animation-delay: -1.10s; }
  .wave-bars > i:nth-child(7){ animation-delay: -1.30s; }
  @keyframes wave {
    0%, 100% { height: 18%; opacity: 0.55; }
    50% { height: 100%; opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .wave-bars > i { animation: none; height: 60%; }
  }

  /* Hero ambient waveform (SVG path stroke pulse) */
  .ambient-wave path {
    stroke-dasharray: 6 6;
    animation: drift 14s linear infinite;
    opacity: 0.45;
  }
  @keyframes drift {
    to { stroke-dashoffset: -240; }
  }

  /* Gentle pulse for accent dot */
  .pulse-dot::after {
    content: ''; position: absolute; inset: -6px; border-radius: 9999px;
    box-shadow: 0 0 0 0 rgba(124,92,255,0.55);
    animation: pulse 2.2s cubic-bezier(0.4,0,0.6,1) infinite;
  }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(124,92,255,0.55); }
    100% { box-shadow: 0 0 0 14px rgba(124,92,255,0); }
  }

  /* Lyric line interactions */
  .lyric-line {
    transition: color .25s ease, background .25s ease, padding .25s ease, transform .25s ease;
    border-radius: 8px;
  }
  .lyric-line:hover { background: rgba(124,92,255,0.06); }
  .lyric-line.is-active {
    background: linear-gradient(90deg, rgba(124,92,255,0.18), rgba(124,92,255,0.03));
    color: #fff;
    box-shadow: inset 3px 0 0 0 #7C5CFF;
    padding-left: 14px;
  }
  html.light .lyric-line.is-active { color: #181824; background: linear-gradient(90deg, rgba(124,92,255,0.16), rgba(124,92,255,0.02)); }

  /* Meaning card entrance */
  .meaning-enter {
    animation: meaningIn .35s cubic-bezier(.2,.7,.2,1);
  }
  @keyframes meaningIn {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Hide native focus ring, use custom */
  :focus { outline: none; }
  :focus-visible { outline: 2px solid #7C5CFF; outline-offset: 2px; border-radius: 6px; }

  /* For sticky bottom CTA spacer */
  body.has-sticky-cta { padding-bottom: 112px; }
  @media (min-width: 768px) { body.has-sticky-cta { padding-bottom: 96px; } }

  /* Marquee for multilingual strip */
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Light-mode tweaks */
  html.light .text-ink-100 { color:#13131C !important; }
  html.light .text-ink-200 { color:#2A2A3A !important; }
  html.light .text-ink-300 { color:#5B5B73 !important; }
  html.light .text-ink-400 { color:#6c6c85 !important; }
  html.light .text-ink-500 { color:#7e7e94 !important; }
  html.light .text-ink-600 { color:#a6a6b8 !important; }
  html.light .bg-ink-900 { background:#F7F7FB !important; }
  html.light .bg-ink-850 { background:#FFFFFF !important; }
  html.light .bg-ink-800 { background:#F0F0F6 !important; }
  html.light .bg-ink-750 { background:#FFFFFF !important; }
  html.light .border-ink-700 { border-color:#E2E2EC !important; }
  html.light .border-ink-800 { border-color:#EAEAF2 !important; }
  html.light .border-ink-600 { border-color:#D2D2E0 !important; }

  /* Light-mode: handle bg-ink-*/opacity variants generically */
  html.light [class*="bg-ink-950/"]   { background-color: rgba(240,240,246, 0.85) !important; }
  html.light [class*="bg-ink-900/"]   { background-color: rgba(247,247,251, 0.85) !important; }
  html.light [class*="bg-ink-850/"]   { background-color: rgba(255,255,255, 0.92) !important; }
  html.light [class*="bg-ink-800/"]   { background-color: rgba(240,240,246, 0.85) !important; }
  html.light [class*="bg-ink-750/"]   { background-color: rgba(255,255,255, 0.85) !important; }
  /* Gradient stops we use */
  html.light .from-ink-850            { --tw-gradient-from: #FFFFFF !important; --tw-gradient-to: rgba(255,255,255,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
  html.light .to-ink-900              { --tw-gradient-to: #F7F7FB !important; }
  html.light .divide-ink-800 > * + *  { border-color:#EAEAF2 !important; }
  /* Borders w/ opacity */
  html.light [class*="border-ink-800/"], html.light [class*="border-ink-700/"] { border-color: rgba(226,226,236,0.7) !important; }
  /* Shadow tweak for light */
  html.light .shadow-soft             { box-shadow: 0 1px 0 0 rgba(0,0,0,0.02) inset, 0 18px 40px -24px rgba(20,20,40,0.18) !important; }
  /* Kbd in light */
  html.light kbd                       { background:#F7F7FB; }
  /* Dotted/dashed bg-ink-850/40 cards */
  html.light .bg-ink-850\/40          { background-color: rgba(247,247,251,0.6) !important; }
  /* Selection in light */
  html.light ::selection              { background: rgba(124,92,255,0.22); color: #181824; }
  html.light .ambient-wave path       { opacity: 0.35; }
  /* Active lyric line in light */
  html.light .lyric-line:hover        { background: rgba(124,92,255,0.07); }
  /* Accent text contrast in light mode (was too pale on light bg) */
  html.light .text-accent-200         { color: #5634D6 !important; }
  html.light .text-accent-300         { color: #5634D6 !important; }
  html.light .text-accent-400         { color: #3F25A8 !important; }