:root{
  --accent: #7dd3fc;
  --bg1: #0f172a;
  --bg2: #020617;
  --glass: rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background: linear-gradient(135deg,var(--bg1) 0%, #071032 50%, var(--bg2) 100%);
  color:#e6eef8;
  overflow:hidden;
}
canvas#bg{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  display:block;
  z-index:0;
}
.overlay{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
  padding:32px;
}
.overlay h1{
  font-size: clamp(32px, 6vw, 64px);
  margin:0;
  letter-spacing: -0.02em;
  text-shadow: 0 6px 30px rgba(7,12,34,0.6);
}
.lead{opacity:0.85; margin:0 0 8px 0}

.image{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
  padding:32px;
}

/* subtle glass panel for readability on small screens */
.overlay::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: radial-gradient(600px 400px at 10% 10%, rgba(125,211,252,0.04), transparent 10%), radial-gradient(600px 400px at 90% 80%, rgba(96,165,250,0.03), transparent 12%);
  z-index:1;
}

@media (prefers-reduced-motion: reduce){
  canvas#bg{display:none}
}

/* Audio controls (fixed on right side) */
.audio-controls{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:8px;
  background:rgba(3,6,20,0.32);
  border:1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(6px) saturate(120%);
  border-radius:12px;
  min-width:48px;
}
.audio-btn{
  position: relative;
  background:transparent;
  border:0;
  color:var(--accent);
  font-size:18px;
  cursor:pointer;
}
.audio-btn:focus{outline:2px solid rgba(125,211,252,0.18); border-radius:8px}
.audio-controls{
  min-width:64px;
}
.audio-controls input[type=range]{
  width:110px;
  height:6px;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  margin-top:6px;
  display:block;
}
.audio-controls input[type=range]::-webkit-slider-runnable-track{height:6px; background:linear-gradient(90deg,var(--accent),#60a5fa); border-radius:6px}
.audio-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; background:#fff; border-radius:50%; margin-top:-4px}
.audio-controls input[type=range]::-moz-range-track{height:6px; background:linear-gradient(90deg,var(--accent),#60a5fa); border-radius:6px}
.audio-controls input[type=range]::-moz-range-thumb{width:14px; height:14px; background:#fff; border-radius:50%; border:0}
.audio-controls input[type=range]:focus{outline:none}