:root {
  --chalk: #edefea; --ink: #1a1d26; --cobalt: #2b3cd6; --mist: #cbd0e4; --alarm: #b8322a; --muted: #555b6e;
  --display: "Bricolage Grotesque", "Noto Sans Devanagari", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Noto Sans Devanagari", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--chalk); color: var(--ink); font: 400 16px/1.55 var(--body); }
.top { max-width: 1040px; margin: 0 auto; padding: 24px 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { font: 700 26px/1 var(--display); letter-spacing: -0.01em; }
.wordmark .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt); margin-left: 4px; }
.account { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--muted); min-width: 0; }
.account #who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.link { font: inherit; background: none; border: 0; padding: 4px 0; color: var(--cobalt); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
button.link.danger { color: var(--alarm); }
main { max-width: 1040px; margin: 0 auto; padding: 32px 20px 80px; }
.studio { display: grid; gap: 48px; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
@media (max-width: 820px) { .studio { grid-template-columns: 1fr; } }
.auth { max-width: 420px; }
h1 { font: 700 28px/1.15 var(--display); margin: 0 0 24px; }
h2 { font: 700 20px/1.2 var(--display); margin: 0 0 16px; }
label, legend { display: block; font-weight: 500; margin-bottom: 6px; padding: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.field { margin-bottom: 24px; }
textarea, input[type=text], input[type=email], input[type=password], select {
  width: 100%; font: inherit; color: inherit; background: #fff; border: 1.5px solid var(--mist); border-radius: 6px; padding: 10px 12px;
}
textarea { min-height: 96px; resize: vertical; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.tabs { display: inline-flex; border: 1.5px solid var(--mist); border-radius: 8px; overflow: hidden; margin-bottom: 24px; background: #fff; }
.tabs button { font: 500 15px var(--body); padding: 9px 18px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; margin: 0; font-weight: 400; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: block; padding: 6px 14px; border: 1.5px solid var(--mist); border-radius: 999px; background: #fff; }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.chip input:disabled + span { opacity: .45; }
.tempo { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; }
.tempo output { font: 700 72px/1 var(--display); font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.tempo .unit { font-weight: 500; }
.beat { width: 14px; height: 14px; border-radius: 50%; background: var(--cobalt); align-self: center; margin-left: auto;
  animation: beat var(--period, .6s) steps(1, end) infinite; }
@keyframes beat { 0% { opacity: 1; } 18% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .beat { animation: none; } }
input[type=range] { width: 100%; accent-color: var(--cobalt); }
.scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.hint { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
button.primary { font: 500 16px var(--body); background: var(--cobalt); color: #fff; border: 0; border-radius: 6px; padding: 12px 22px; cursor: pointer; width: 100%; }
button.primary:disabled { opacity: .55; cursor: progress; }
.form-error { color: var(--alarm); margin: 12px 0 0; min-height: 1.5em; }
ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
li { background: #fff; border: 1.5px solid var(--mist); border-radius: 8px; padding: 16px; }
li .meta { font-size: 14px; color: var(--muted); margin: 2px 0 10px; }
li p { margin: 0; }
.take { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.take audio { flex: 1; min-width: 0; }
.take a { white-space: nowrap; color: var(--cobalt); }
.actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; min-height: 28px; }
li details { margin: 12px 0 0; }
li summary { cursor: pointer; font-weight: 500; }
.lyrics { white-space: pre-wrap; margin: 8px 0 0; font-size: 15px; line-height: 1.7; }
.status-failed { color: var(--alarm); }
.empty { color: var(--muted); }