:root{
  --bg: linear-gradient(180deg,#c9e9ff,#ffd6f4);
  --bg-dark: linear-gradient(180deg,#1a1b3a,#3b157a);

  --card:rgba(255,255,255,.7);
  --card-dark:rgba(0,0,0,.35);

  --accent:#4a79ff;
  --accent-dark:#9d79ff;

  --text:#2a2a2a;
  --text-dark:#e8e8ff;
}

body{
  margin:0;
  font-family:Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  background-size:200% 200%;
  animation:bgmove 12s ease infinite;
}

body.dark{
  background:var(--bg-dark);
  color:var(--text-dark);
}

@keyframes bgmove{
  0%{background-position:0% 0%}
  50%{background-position:100% 100%}
  100%{background-position:0% 0%}
}

.container{
  max-width:900px;
  margin:auto;
  padding:20px;
}

.card{
  background:var(--card);
  backdrop-filter:blur(12px);
  border-radius:18px;
  padding:20px;
  margin-bottom:18px;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
}

body.dark .card{
  background:var(--card-dark);
}

h1,h2{
  text-align:center;
  color:var(--accent);
}

body.dark h1,
body.dark h2{
  color:var(--accent-dark);
}

.button{
  display:block;
  text-align:center;
  padding:14px;
  border-radius:14px;
  background:var(--accent);
  color:white;
  text-decoration:none;
  font-weight:bold;
  margin-top:10px;
}

.button.secondary{
  background:none;
  border:2px solid var(--accent);
  color:var(--accent);
}

body.dark .button.secondary{
  border-color:var(--accent-dark);
  color:var(--accent-dark);
}

.toggle{
  position:fixed;
  bottom:20px;
  right:20px;
  border:none;
  padding:14px 18px;
  border-radius:999px;
  background:var(--accent);
  color:white;
  cursor:pointer;
}

.audio-bar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.audio-bar button{
  padding:10px 16px;
  border-radius:12px;
  border:2px solid var(--accent);
  background:white;
  color:var(--accent);
  font-weight:600;
  cursor:pointer;
}

.audio-bar button:hover{
  background:var(--accent);
  color:white;
}

body.dark .audio-bar button{
  border-color:var(--accent-dark);
  color:var(--accent-dark);
  background:transparent;
}

body.dark .audio-bar button:hover{
  background:var(--accent-dark);
  color:white;
}

.audio-label{
  font-size:.85em;
  opacity:.7;
}

.small{
  font-size:.9em;
  opacity:.8;
}

ul{
  line-height:1.7;
}

@media(max-width:600px){
  h1{font-size:1.7em}
  h2{font-size:1.3em}
}