@font-face {
  font-family: Inter;
  src: url("/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: Sora;
  src: url("/sora-latin.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}
:root {
  --graphite: #0e0f13;
  --aubergine: #5a1e68;
  --mint: #4ff2a2;
  --bone: #ede7e1;
  --mist: #b6acbb;
  --surface: #19161e;
  --sunken: #141219;
  --raised: #231b29;
  --line: #493951;
  --control-line: #796482;
  --hover: #34253b;
  --disabled: #27222d;
  --mint-wash: #17392d;
  --lilac: #dbc2e6;
  --mint-rgb: 79, 242, 162;
  --aubergine-rgb: 90, 30, 104;
  --gutter: max(clamp(12px, 4vw, 40px), calc((100% - 1120px) / 2));
  color-scheme: dark;
  background: var(--graphite);
  color: var(--bone);
  font: 16px/1.5 Inter, system-ui, sans-serif;
  accent-color: var(--mint);
}
body { min-height: 100vh; margin: 0; }
header, body.practising header {
  padding: 10px var(--gutter);
  background: linear-gradient(110deg, var(--graphite) 15%, #24182b 100%);
  border-color: var(--line);
}
.brand-lockup, .brand-lockup h1 { display: flex; align-items: center; min-width: 0; gap: 8px; }
.brand-lockup h1, body.practising .brand-lockup h1 { margin: 0; font: 600 .85rem Sora, system-ui, sans-serif; }
.brand-lockup h1 span { color: var(--mist); }
.brand-mark { width: clamp(32px, 8vw, 48px); height: auto; }
.brand-wordmark { width: clamp(81px, 24vw, 146px); height: auto; }
h2, h3, h4 { font-family: Sora, system-ui, sans-serif; font-weight: 650; line-height: 1.25; }
h2 { font-size: clamp(1.25rem, 2.8vw, 1.75rem); }
h3 { font-size: 1rem; }
.muted, #identity, #revision, #mapping p { color: var(--mist); }
a { color: var(--mint); text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--mint);
  border-radius: 10px;
  background: var(--mint);
  color: var(--graphite);
  font-weight: 650;
  line-height: 1.25;
}
button.secondary, #home-help, #account-open, #home-app nav button {
  background: var(--raised);
  border-color: var(--control-line);
  color: var(--bone);
}
#home-app nav button { border-color: transparent; font-size: clamp(.75rem, 3.1vw, .95rem); }
#home-app nav button[aria-pressed="true"] {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--graphite);
}
button:disabled { opacity: 1; background: var(--disabled); color: var(--mist); border-color: var(--line); }
:is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 2px;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea,
.review-columns textarea {
  background: var(--graphite);
  color: var(--bone);
  border: 1px solid var(--control-line);
  border-radius: 8px;
  min-height: 44px;
}
#home-app nav, body.practising #home-app nav {
  padding-inline: var(--gutter);
  background: var(--graphite);
  border-color: var(--line);
}
main, body.practising main { padding-inline: var(--gutter); }
.heading { gap: 12px; }
.library-tools label { display: grid; gap: 5px; margin: 0; font-size: .875rem; color: var(--mist); }
.library-tools :is(input, select) { min-width: 0; }
.heading p { color: var(--mist); }
article, .song-card, #following, #local-transport,
#personal-groups, #song-details, #song-progress, #account-panel section, #account-entry {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
#local-transport, #following { background: var(--raised); }
:is(#personal-groups, #song-details, #song-progress, #account-panel section) { padding: 10px 14px; }
.song-card.selected, #sections button.current { border-color: var(--mint); }
#sections button { background: var(--raised); border-color: var(--control-line); color: var(--bone); }
#sections button.current, .words .current-word { background: var(--mint-wash); color: var(--bone); }
:where(details) summary { cursor: pointer; color: var(--bone); }
#recording-setup summary, .review-columns summary { color: var(--bone); }
#playlist-songs li, #mapping, .progress-row, .review-library-song, .review-columns details {
  border-color: var(--line);
}
#update-indicator { color: var(--mint); }
#sync-status, #status { margin-inline: var(--gutter); color: var(--mist); }
#status.error { color: #ffb9ca; }
#storage-notice, .active-transfer, #transfer-notice { margin-inline: var(--gutter); }
.active-transfer {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised);
  padding: 8px 12px;
}
progress { accent-color: var(--mint); }
dialog {
  background: var(--surface);
  border-color: var(--control-line);
  border-radius: 16px;
  box-shadow: 0 18px 60px #0009;
}
dialog::backdrop { background: #07060bd9; }
#account-panel section { margin-bottom: 10px; }
#account-entry {
  max-width: 38rem;
  margin: clamp(20px, 8vh, 88px) auto;
  width: calc(100% - 24px);
  padding: clamp(16px, 4vw, 32px);
}
.recovery main { max-width: 50rem; margin: auto; padding-block: 40px; }
@media (max-width: 420px) {
  .brand-lockup, .brand-lockup h1 { gap: 4px; }
  .brand-lockup h1, body.practising .brand-lockup h1 { font-size: .7rem; }
  .library-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #page-songs .library-tools label:has(#library-search) { grid-column: 1 / -1; }
  #home-app nav { gap: 4px; }
}