* { box-sizing: border-box; }
/* 1rem = 16px en 1920 de ancho; crece con la pantalla (32px en un televisor 4k) */
html { font-size: clamp(14px, .8334vw, 64px); }
html, body { margin: 0; height: 100%; background: #010102; color: #dfe3f5; font-family: system-ui, sans-serif; overflow: hidden; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
header { position: fixed; top: 0; left: 0; right: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: .625rem 1.25rem; background: linear-gradient(rgba(1,1,2,.85), rgba(1,1,2,0)); transition: opacity .4s; opacity: .35; }
header:hover { opacity: 1; }
header.hide, header.hide:hover { opacity: 0; pointer-events: none; }
.controls { margin-left: auto; }
.controls { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; font-size: .85rem; }
button, select { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: .375rem; padding: .45rem .875rem; font-size: .9rem; cursor: pointer; backdrop-filter: blur(6px); }
select option { color: #000; }
button:hover { background: rgba(255,255,255,.25); }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; vertical-align: middle; accent-color: #ff9ad0; cursor: pointer; }
label { cursor: pointer; }
input[type=range] { vertical-align: middle; accent-color: #ff9ad0; width: 8rem; height: 1.2rem; }
#lyrics { position: fixed; left: 0; right: 0; bottom: 7vh; z-index: 2; text-align: center; padding: 0 5vw; pointer-events: none;
  font: italic 600 clamp(22px, 2.1vw, 120px) Georgia, "Times New Roman", serif; letter-spacing: .01em; opacity: 0; transition: opacity .5s;
  text-shadow: 0 2px 18px rgba(0,0,0,.85), 0 0 30px rgba(255,120,170,.35); }
#lyrics.on { opacity: 1; }
#lyrics .old { color: rgba(240,230,240,.62); }
#lyrics .cur { color: #ffb3cf; text-shadow: 0 0 14px rgba(255,140,185,.95), 0 2px 18px rgba(0,0,0,.85); }