:root[data-theme="slate"] {
  --bg: #101922;
  --sidebar: #131e28;
  --panel: #182632;
  --card: #213240;
  --line: #344c5e;
  --text: #eff5fa;
  --muted: #b2c2cf;
  --lime: #7edbd0;
  --violet: #b2d8f7;
  --peach: #f4cba9;
  --danger: #ffb7b9;
  --tint: #2b3e50;
  --hover: #304756;
  --hero-bg: linear-gradient(112deg, #192735, #233a4d);
  --flash-bg: linear-gradient(165deg, #233746, var(--panel) 56%);
  --radius: 11px;
}

:root:is([data-theme="pink"], [data-theme="bright"]) {
  --success-ink: #176134;
  --success-bg: #e4f5e9;
  --success-line: #74ac83;
}

:root[data-theme="pink"] {
  color-scheme: light;
  --bg: #fff4fa;
  --sidebar: #fff9fc;
  --panel: #fffcfe;
  --card: #fff2f8;
  --line: #e9cadc;
  --text: #431d39;
  --muted: #79546c;
  --lime: #a91b60;
  --violet: #704296;
  --peach: #984334;
  --danger: #ac2840;
  --accent-ink: #fff;
  --tint: #f3e3fb;
  --hover: #fce1ef;
  --hero-bg: radial-gradient(ellipse at 87% 33%, #f1d7fc, transparent 58%), linear-gradient(105deg, #ffdeed, #ffedfa);
  --flash-bg: radial-gradient(ellipse at 50% 0%, #f7deff, var(--panel) 74%);
  --radius: 21px;
  font-family: Nunito, ui-rounded, Inter, system-ui, sans-serif;
}

:root[data-theme="bright"] {
  color-scheme: light;
  --bg: #fff8e8;
  --sidebar: #fffdf4;
  --panel: #fffdf8;
  --card: #f8f2e3;
  --line: #decfaf;
  --text: #242c45;
  --muted: #565f71;
  --lime: #0056a6;
  --violet: #6541a5;
  --peach: #9d4527;
  --danger: #a62d36;
  --accent-ink: #fff;
  --tint: #e7edff;
  --hover: #f1e5cc;
  --hero-bg: radial-gradient(ellipse at 88% 34%, #ffd36f, transparent 60%), linear-gradient(108deg, #fff3c2, #ffe7a6);
  --flash-bg: radial-gradient(ellipse at 50% 0%, #fff0ba, var(--panel) 74%);
  --radius: 19px;
  font-family: Nunito, ui-rounded, Inter, system-ui, sans-serif;
}

:root:not([data-theme="classic"])[data-theme] .sidebar-label { color: var(--muted); }
:root:not([data-theme="classic"])[data-theme] .nav a:hover,
:root:not([data-theme="classic"])[data-theme] .nav a[aria-current] { background: var(--tint); }
:root:not([data-theme="classic"])[data-theme] .avatar { color: var(--violet); background: var(--tint); }
:root:not([data-theme="classic"])[data-theme] .btn-primary,
:root:not([data-theme="classic"])[data-theme] .activity i.active { color: var(--accent-ink, #112723); }
:root:not([data-theme="classic"])[data-theme] .btn-primary:hover { background: color-mix(in srgb, var(--lime) 90%, var(--text)); }
:root:not([data-theme="classic"])[data-theme] .btn-secondary:hover,
:root:not([data-theme="classic"])[data-theme] .icon-btn:hover { background: var(--hover); }
:root:not([data-theme="classic"])[data-theme] .hero { border-color: var(--line); background: var(--hero-bg); }
:root:not([data-theme="classic"])[data-theme] .hero p { color: var(--muted); }
:root:not([data-theme="classic"])[data-theme] .goal-ring { background: conic-gradient(var(--lime) var(--fill), var(--line) 0); }
:root:not([data-theme="classic"])[data-theme] .activity i:not(.active) { background: var(--card); }
:root:not([data-theme="classic"])[data-theme] .deck-art,
:root:not([data-theme="classic"])[data-theme] .square-icon {
  --wash: color-mix(in srgb, var(--tone, var(--violet)) 12%, var(--panel));
  background: var(--wash);
}
:root:not([data-theme="classic"])[data-theme] .square-icon.lime { --tone: var(--lime); }
:root:not([data-theme="classic"])[data-theme] .level { background: color-mix(in srgb, var(--tone, var(--violet)) 10%, var(--panel)); }
:root:not([data-theme="classic"])[data-theme] .bar { background: var(--line); }
:root:not([data-theme="classic"])[data-theme] .flash-face { --flash-line: var(--line); }
:root:not([data-theme="classic"])[data-theme] .grades .btn:nth-child(3) { border-color: var(--lime); }
:root:not([data-theme="classic"])[data-theme] .feedback.wrong { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); }
:root:not([data-theme="classic"])[data-theme] .feedback p { color: var(--text); }
:root:not([data-theme="classic"])[data-theme] #notice { background: var(--panel); border-color: var(--violet); color: var(--text); }

[data-theme="slate"] .hero-content { max-width: 95%; padding-right: 28px; }
[data-theme="pink"] .hero,
[data-theme="bright"] .hero { min-height: 302px; border-radius: 25px; }
[data-theme="pink"] .hero img,
[data-theme="bright"] .hero img { width: 44%; height: 92%; top: 4%; right: 2%; }

.theme-settings { margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.theme-settings legend { padding: 0 5px; font-size: .85rem; font-weight: 700; }
.theme-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.theme-option { min-width: 0; display: grid; gap: 5px; position: relative; padding: 5px; border: 1px solid var(--line); border-radius: 8px; font-size: .76rem; text-align: center; cursor: pointer; }
.theme-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.theme-option:has(:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }
.theme-option:has(:checked) { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.theme-swatch { height: 29px; border-radius: 5px; border: 1px solid var(--line); background: linear-gradient(115deg, var(--swatch-bg) 46%, var(--swatch-fg) 47% 72%, var(--swatch-accent) 73%); }
.voice-samples { max-width: 740px; margin-inline: auto; }
.voice-samples > a { justify-self: start; }
.voice-sample-list { display: grid; gap: 10px; }
.voice-sample { display: grid; gap: 12px; }
.voice-sample h2 { font-size: 1.16rem; }
.voice-sample-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.voice-sample-button { justify-content: flex-start; text-align: left; }
.voice-sample-button span { display: grid; gap: 2px; }
.voice-sample-button small { color: var(--muted); font-weight: 500; }
.voice-sample-button strong { font-size: 1rem; }

@media (max-width: 550px) {
  [data-theme="pink"] .hero, [data-theme="bright"] .hero { min-height: 240px; }
  [data-theme="pink"] .hero-content, [data-theme="bright"] .hero-content { max-width: 65%; }
  [data-theme="pink"] .hero img, [data-theme="bright"] .hero img {
    width: 34%;
    max-height: 56%;
    opacity: 1;
    right: 1%;
    top: 21%;
  }
}
@media (max-width: 345px) {
  .theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-theme="pink"] .hero img, [data-theme="bright"] .hero img { top: 36%; }
}