:root{
  color-scheme:light dark;
  --bg:#f6efe8;
  --fg:#3b2a20;
  --card:#ffffff;
  --accent:#8b4b3a;
  --accent-soft:#efe6dc;
  --highlight:#fff3c4;
  --highlight-border:#f0d48a;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--fg);
}
main{
  max-width:960px;
  margin:0 auto;
  padding:12px 12px 32px;
}
h1{
  font-size:1.5rem;
  text-align:center;
  margin:10px 0 12px;
}
.toolbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  padding:8px 8px 6px;
  margin:0 -8px 6px;
  background:rgba(246,239,232,0.96);
  backdrop-filter:blur(4px);
  border-bottom:1px solid #e0d4c8;
}
button,select{
  font:inherit;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid #d0c0b0;
  background:#fff;
  color:var(--fg);
  cursor:pointer;
}
button:hover,select:hover{
  border-color:var(--accent);
}
button:disabled{
  opacity:0.6;
  cursor:default;
}
.donate-btn {
  display:inline-block;
  padding:6px 14px;
  margin-top:12px;
  background:#fff;
  border:1px solid #d0c0b0;
  border-radius:999px;
  color:#6a5548;
  text-decoration:none;
  font-size:0.9rem;
  opacity:0.85;
  transition:0.2s;
}
.donate-btn:hover {
  opacity:1;
  background:#f7eee6;
  border-color:#b89a82;
}

.info{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  margin:6px 0 10px;
}
.pill{
  display:inline-block;
  background:var(--accent-soft);
  color:var(--fg);
  border-radius:999px;
  padding:3px 10px;
  margin:2px 4px;
  font-size:.9rem;
}
.card{
  background:var(--card);
  border-radius:14px;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  padding:16px;
  margin:12px 0;
}
.title{
  font-weight:bold;
  margin:0 0 6px;
}
.divider{
  height:1px;
  background:#e9dfd5;
  margin:14px 0;
}
.decade{scroll-margin-top:72px;}
.footer{
  text-align:center;
  font-size:.9rem;
  color:#6a5548;
  margin:16px 0 6px;
}
.active-block > .card,
.card.active-block{
  background:var(--highlight) !important;
  box-shadow:0 0 0 3px var(--highlight-border) inset;
  transition:background-color 0.25s ease;
}

/* SVG-Control-Styles */
.audio-toolbar-center{
  top:44px;
  margin-top:-4px;
  border-top:0;
  padding-top:6px;
  justify-content:center;
  gap:12px;
}
.svgGroup{
  display:flex;
  align-items:center;
  gap:4px;
}
.svgIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  border-radius:999px;
  border:1px solid #d0c0b0;
  background:#fff;
}
.svgIcon svg{
  display:block;
}
.svgIcon:hover{
  background:#f7eee6;
  border-color:var(--accent);
}

.mystContainer{
  display:flex;
  align-items:center;
  gap:4px;
  margin:0 8px;
}
.mystBtn{
  border:1px solid #d0c0b0;
  background:#fff;
  border-radius:50%;
  padding:2px;
  width:32px;
  height:32px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.mystBtn svg{
  display:block;
}
.mystBtn:hover{
  background:#f7eee6;
  border-color:var(--accent);
}