/* The public sample keeps the approved desktop geometry and color system. */
.source-credit{display:flex;justify-content:center;align-items:center;gap:20px;font-size:11px;color:var(--muted-readable,var(--muted))}
.invitation{max-width:650px;margin:0 auto;padding:12px 20px;border:1px solid var(--accent);border-radius:18px;background:var(--surface);text-align:center;font-size:13px;line-height:1.5}
body[data-design="saved"] header h1{max-width:650px;font-size:30px}
body[data-design="saved"] .lyrics{direction:ltr;text-align:center}
.lyric-word.singing,body[data-layout="unified"] .lyric-word.singing{background:linear-gradient(to right,#eaf0ff var(--sung,0%),transparent 0)}
.rhythm-sustain{background:linear-gradient(to right,var(--accent) calc(var(--sustain,0)*100%),var(--line) 0)}
.rhythm-phrase,body[data-design="saved"] .rhythm-phrase{direction:ltr;transform:none;padding-inline:0}
.hit-line,.hit-label{left:30%}
#share-fallback{display:block;max-width:560px;margin:12px auto}
#share-link{display:block;width:100%;padding:10px;margin-top:8px;border:1px solid var(--line);border-radius:8px;font-size:12px}
#notice:empty{display:none}
#notice{max-width:650px;margin:0 auto;text-align:center}
body[data-design="saved"] .keyboard-inline{background:linear-gradient(transparent,var(--surface) 30%)}
body[data-design="saved"][data-response="challenge"] #note-highway{display:block!important}
body:not([data-design="saved"]) .performance{min-height:570px}
body[data-response="smooth"] #challenge-hud,body[data-response="strict"] #challenge-hud,body[data-response="beat"] #challenge-hud{display:none}
.letter.sung{color:var(--text,var(--ink))}
.letter.upcoming,body[data-layout="unified"] .letter.upcoming,body[data-design="saved"] .letter.upcoming{color:var(--muted-readable,var(--muted));background:transparent;box-shadow:none;text-decoration:underline dotted;text-underline-offset:.16em}
@media(max-height:850px){
  body[data-design="saved"] main,body[data-design="saved"][data-layout="unified"] main{gap:10px;padding-top:16px;padding-bottom:12px}
  body[data-design="saved"] .lyric-surface,body[data-design="saved"][data-layout="unified"] .lyric-surface{min-height:210px;padding-top:20px;padding-bottom:14px}
  body[data-design="saved"][data-layout="unified"][data-view="full"] .lyric-area{height:clamp(100px,calc(100svh - 620px),240px);max-height:none}
}