:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;background:#101514;color:#f1f2e9}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:flex;flex-direction:column}header{display:flex;align-items:center;gap:10px;padding:24px 5vw}.brand{color:inherit;text-decoration:none;font-size:24px;letter-spacing:-1px;font-weight:750;margin-right:auto}.brand span{color:#c7ec8c;margin-left:3px}button{font:inherit;color:inherit;background:#202825;border:1px solid #3a453f;border-radius:30px;padding:11px 17px;cursor:pointer}button:hover{border-color:#c7ec8c}button:disabled{opacity:.5;cursor:wait}.primary{background:#c7ec8c;color:#152015;border:0;font-weight:650}main{width:min(850px,90vw);margin:3vh auto 0;flex:1;min-height:0}.eyebrow{font-size:10px;letter-spacing:2px;color:#9aaa98}h1{font-size:clamp(23px,4vw,38px);letter-spacing:-1px;margin-bottom:4px}#artist{color:#a4b0a5;margin-top:0}#lyrics{height:40dvh;overflow:auto;scrollbar-width:none;mask-image:linear-gradient(transparent,#000 10%,#000 85%,transparent);padding:30px 0}#lyrics p{font-size:clamp(23px,4vw,38px);font-weight:600;line-height:1.5;color:#718075;margin:16px 0;transition:color .15s}#lyrics p.active{color:#d7f5a3}#lyrics .intro{font-size:clamp(22px,4vw,34px);color:#c9d0c5;font-weight:400}footer{width:min(850px,90vw);margin:0 auto;padding:12px 0 max(20px,env(safe-area-inset-bottom))}#status{font-size:13px;color:#abb8a9;min-height:20px}.controls{display:flex;gap:10px;flex-wrap:wrap}#syncControl{margin-top:18px;text-align:center}output{font-size:12px;color:#c7ec8c}#wheel{position:relative;touch-action:none;height:44px;overflow:hidden;cursor:ew-resize;user-select:none;margin:8px auto;width:min(100%,390px);border-radius:8px;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}.ticks{height:100%;background:repeating-linear-gradient(90deg,transparent 0 11px,#657362 11px 12px);opacity:.65}.marker{position:absolute;top:0;left:50%;height:100%;width:2px;background:#d7f5a3}small{font-size:10px;color:#879483}dialog{width:min(94vw,550px);border:1px solid #42503d;border-radius:20px;background:#17201b;color:inherit;padding:26px;max-height:85dvh}dialog::backdrop{background:#000a}label{display:block;margin:18px 0}input,select{display:block;width:100%;padding:12px;margin-top:8px;background:#101514;color:inherit;border:1px solid #52604e;border-radius:8px;font:inherit}dialog p{font-size:13px;line-height:1.6;color:#acb8a8}pre{white-space:pre-wrap;font-size:11px}details{margin-top:20px}.entry{padding:15px 0;border-bottom:1px solid #3a453f}.entry a{color:#c7ec8c;margin-right:14px;font-size:13px}.entry p{margin:5px 0}button:focus-visible,#wheel:focus-visible{outline:2px solid #c7ec8c;outline-offset:3px}[hidden]{display:none!important}@media(max-width:500px){header{padding-top:18px}.brand{font-size:21px}header button{font-size:12px;padding:8px 10px}.eyebrow{font-size:8px}main{margin-top:1vh}#lyrics{height:38dvh}}

/* History actions share one baseline, independent of generic control wrapping. */
#history .history-actions{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(80px,1fr);gap:10px;margin:18px 0 0;padding:12px 0 0;border-top:1px solid #3a453f;align-items:stretch}
#history .history-actions button{margin:0;min-height:44px;padding:10px 8px;font-size:13px;line-height:1.3;border-radius:22px;width:100%}
:root[data-theme="light"]{color-scheme:light;background:#f5f6f0;color:#18251e}
[data-theme="light"] button{background:#e7ece2;border-color:#a0b09b}
[data-theme="light"] .primary{background:#315f36;color:#fff}
[data-theme="light"] .brand span,[data-theme="light"] output{color:#315f36}
[data-theme="light"] #artist,[data-theme="light"] #status,[data-theme="light"] small,[data-theme="light"] .eyebrow{color:#52614f}
[data-theme="light"] #lyrics p{color:#6b7867}
[data-theme="light"] #lyrics p.active{color:#214e27}
[data-theme="light"] #lyrics .intro{color:#374b37}
[data-theme="light"] dialog{background:#f5f6f0;border-color:#a0b09b}
[data-theme="light"] dialog p{color:#485c47}
[data-theme="light"] input,[data-theme="light"] select{background:#fff;color:#18251e;border-color:#a0b09b}
[data-theme="light"] .entry a,[data-theme="light"] #sampleDownload{color:#24582c}
[data-theme="light"] .entry,[data-theme="light"] #history .history-actions{border-color:#c5cec0}
[data-theme="light"] .marker{background:#315f36}
.listening-animation{width:160px;height:160px;position:relative;margin:20px auto;color:#c7ec8c}
.listening-animation span{position:absolute;inset:28px;border:3px solid currentColor;border-radius:50%;animation:listening-wave 1.8s linear infinite;will-change:transform,opacity}
.listening-animation span:nth-child(2){animation-delay:-.6s}
.listening-animation span:nth-child(3){animation-delay:-1.2s}
.listening-animation b{position:absolute;inset:0;display:grid;place-items:center;font-size:34px}
[data-theme="light"] .listening-animation{color:#315f36}
main:has(.listening-animation:not([hidden])) #lyrics{display:none}
@keyframes listening-wave{0%{transform:scale(.35);opacity:0}15%{opacity:.9}75%{opacity:.45}100%{transform:scale(1.5);opacity:0}}
@keyframes listening-gentle{0%,100%{opacity:.25}50%{opacity:.85}}
@media(prefers-reduced-motion:reduce){.listening-animation span{animation:listening-gentle 2.4s ease-in-out infinite;transform:scale(.75)}.listening-animation span:nth-child(2){animation-delay:-.8s;transform:scale(1)}.listening-animation span:nth-child(3){animation-delay:-1.6s;transform:scale(1.25)}}

#lyrics.plain{mask-image:none;scrollbar-width:thin}
#lyrics.plain p{font-size:clamp(20px,3vw,28px);font-weight:400;color:#c9d0c5;margin:8px 0}
[data-theme="light"] #lyrics.plain p{color:#374b37}

/* Let the reading pane fill the actual viewport instead of a fixed vh slice. */
html{height:100%}
body{height:100vh;height:100dvh;min-height:0;overflow:hidden}
body>main{display:flex;flex-direction:column;flex:1 1 0;min-height:0;width:var(--content-width);margin:0 auto;overflow:hidden}
.track-heading>h1{flex-shrink:0;font-size:clamp(21px,3.4vw,32px);line-height:1.15;margin:3px 0;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
main>#artist{flex-shrink:0;font-size:14px;line-height:1.25;margin:0 0 5px}
main>#lyrics{flex:1 1 0;min-height:0;height:auto;padding:12px 0;overscroll-behavior:contain;mask-image:linear-gradient(transparent,#000 18px,#000 calc(100% - 18px),transparent)}
main>#lyrics.plain{mask-image:none}
body>footer{flex:0 0 auto;width:var(--content-width);margin:0 auto;padding:6px 0 calc(14px + env(safe-area-inset-bottom))}
footer>#status{font-size:12px;line-height:1.3;min-height:0;margin:0 0 6px}
footer>#status:empty{display:none}
footer>#syncControl{margin-top:8px}
#syncControl>#wheel{height:36px;margin:4px auto}
#syncControl>small{display:block;line-height:1.25}
main>.listening-animation{flex-shrink:0;margin:auto}
@media(max-width:500px){main>#artist{font-size:13px}}
@media(max-height:450px){#syncControl>small{display:none}.track-heading>h1{font-size:20px;-webkit-line-clamp:1}footer>#syncControl{margin-top:4px}}

/* The start control and first-capture rings share the center of the reading area. */
body>main{position:relative}
main>.listening-animation{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(218px,45dvh);
  height:min(218px,45dvh);
  margin:0;
}
main>.listening-animation span{inset:18%;pointer-events:none}
main>.listening-animation b{font-size:clamp(32px,7dvh,52px);pointer-events:none}
main>.start-orb{
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#c7ec8c;
}
[data-theme="light"] main>.start-orb{color:#315f36}
.start-orb strong{
  position:absolute;
  top:82%;
  left:0;
  right:0;
  font-size:14px;
  text-align:center;
}
main:has(.start-orb:not([hidden])) #lyrics{display:none}
footer>#creditNotice{margin:5px 0 0;font-size:11px;color:#abb8a9}
[data-theme="light"] footer>#creditNotice{color:#52614f}


.recognition-popup {
  position:fixed;
  inset-inline:5px;
  top:50%;
  transform:translateY(-50%);
  z-index:1;
  max-block-size:66dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(20px,5vw,48px) clamp(16px,6vw,96px);
  text-align:center;
  background:#17201b;
  color:#f1f2e9;
  border:1px solid #42503d;
  border-radius:18px;
  box-shadow:0 16px 48px #0006;
}
.vocal-tip-category {
  display:grid;
  justify-items:center;
  gap:6px;
  margin:0 0 12px;
  color:#c7ec8c;
  font-size:14px;
  font-weight:650;
}
#vocalTipIcon {font-size:38px;line-height:1}
.vocal-tip-intro {margin:0 0 14px;font-size:clamp(17px,3vw,23px);opacity:.9}
.vocal-tip-text {
  max-width:1050px;
  margin:0 auto;
  font-size:clamp(23px,4vw,38px);
  font-weight:600;
  line-height:1.35;
  overflow-wrap:anywhere;
}
[data-theme="light"] .recognition-popup {
  background:#f5f6f0;
  color:#18251e;
  border-color:#a0b09b;
}
[data-theme="light"] .vocal-tip-category {color:#315f36}
body:has(.recognition-popup:not([hidden])) #listeningAnimation {visibility:hidden}
body:has(.recognition-popup:not([hidden]))>footer {position:relative;z-index:2}


#accountDialog .account-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:8px;
}
#accountEmail {overflow-wrap:anywhere}
#accountStatus:empty {display:none}

body {
  --side-margin: max(clamp(16px,5vw,32px),env(safe-area-inset-left),env(safe-area-inset-right));
  --content-width: min(850px,calc(100% - 2 * var(--side-margin)));
}
body>header {
  flex:none;
  width:var(--content-width);
  margin:0 auto;
  padding:calc(8px + env(safe-area-inset-top)) 0 10px;
  gap:4px;
}
.header-actions {
  display:flex;
  align-items:center;
  flex:none;
  gap:4px;
}
.header-actions button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:44px;
  min-height:44px;
  padding:0 9px;
  background:transparent;
  border-color:transparent;
  font-size:13px;
}
.header-actions button:hover {border-color:currentColor}
.header-actions svg {
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.header-actions .theme-toggle {font-size:21px}
footer .controls {
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
}
footer .controls button {
  flex:1 1 0;
  min-width:0;
  min-height:44px;
  padding:8px;
  font-size:clamp(13px,3.7vw,16px);
}
footer .controls #rescan {flex-grow:2}
main:has(#instrumental:not([hidden])) #lyrics {display:none}
#instrumental {
  flex:1;
  display:grid;
  place-items:center;
  margin:0;
  text-align:center;
  color:#a4b0a5;
  font-size:clamp(16px,4vw,22px);
}
[data-theme="light"] #instrumental {color:#52614f}
@media(max-width:500px) {
  .header-actions {gap:0}
  .header-actions button {padding:0}
  .header-actions button span {display:none}
  body>header .brand {font-size:clamp(19px,5.2vw,24px)}
}

#adContent {width:min(100%,560px);margin:auto}
.ad-label {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin:0 0 8px;
}
.ad-card {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  overflow:hidden;
  isolation:isolate;
  border-radius:12px;
  background:#141721;
  color:#fff;
  text-align:left;
}
.ad-card > * {grid-area:1/1}
.ad-card img {width:100%;height:100%;min-height:150px;object-fit:cover}
.ad-card > div {
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:end;
  padding:16px;
  background:linear-gradient(90deg,#0a1023f0,#0a102340),linear-gradient(0deg,#090b16c9,transparent);
}
.ad-card[data-ad="refrain"] img {filter:hue-rotate(52deg)}
.ad-card[data-ad="pulse"] img {filter:hue-rotate(102deg)}
.ad-card[data-ad="face-b"] img {filter:hue-rotate(190deg)}
.ad-card[data-ad="tempo"] img {filter:hue-rotate(265deg)}
#adBrand {font-size:14px;font-weight:700;margin:0 0 4px}
#adSlogan {font-size:clamp(19px,4vw,30px);line-height:1.15;font-weight:750;margin:0;max-width:22ch}
#walletBalance {font-weight:750;font-size:18px}
#walletHistory {
  margin:0 0 16px;
  padding:0 12px;
  border:1px solid currentColor;
  border-radius:10px;
}
#walletHistory summary {
  padding:12px 0;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
}
.wallet-history-scroll {
  max-height:min(200px,28dvh);
  overflow:auto;
  overscroll-behavior:contain;
}
#walletMovements {
  margin:0;
  padding:0 8px 12px 20px;
  font-size:13px;
  line-height:1.45;
}
#walletMovements li+li {margin-top:6px}
#accountSessionActions {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,112px),1fr));
  gap:8px;
  margin-top:12px;
}
#accountSessionActions button {
  min-height:44px;
  padding:8px;
  font-size:clamp(13px,3.6vw,15px);
}

.signup-ad {
  padding:clamp(12px,4vw,24px);
  border:1px solid currentColor;
  border-radius:12px;
}
.signup-ad h2 {margin:0;font-size:clamp(20px,5vw,29px)}
.signup-ad p {margin:8px auto 14px;max-width:32ch;line-height:1.4}

.signup-ad-note {display:block;margin-top:8px;color:inherit;font-size:12px}

#lyrics p {text-align:left}
.lyric-translation {
  display:block;
  text-align:right;
  font-size:.68em;
  font-style:italic;
  font-weight:400;
  line-height:1.3;
  margin-top:.2em;
}


.track-heading {
  display:flex;
  flex:none;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.track-heading>h1 {min-width:0;flex:1}
#translationToggle {
  flex:none;
  min-height:36px;
  padding:5px 8px;
  border-radius:8px;
  font-size:11px;
  line-height:1.2;
  white-space:nowrap;
  background:transparent;
}