/* New playing surface; styles.css retains the separate-keyboard baseline. */
:root{--ink:#262b29;--muted:#666f6a;--line:#dcded5;--accent:#a7432e;background:#f2f0e8;font-family:Arial,"Segoe UI",sans-serif}
.band-backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#efede4}
.band-backdrop img,.band-backdrop video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.55}
.band-backdrop video{opacity:.65}body[data-background="still"] .band-backdrop video{display:none}body[data-background="off"] .band-backdrop{display:none}
body[data-layout="unified"] main{max-width:1040px;padding:28px 40px 20px;gap:18px}
body[data-layout="unified"] header h1{font-size:26px;letter-spacing:-.7px}body[data-layout="unified"] header p{letter-spacing:.06em;font-size:10px;text-transform:uppercase;margin-top:7px}
body[data-layout="unified"] .levels,body[data-layout="unified"] .pulse-band,body[data-layout="unified"] #wave,body[data-layout="unified"] #note-highway,body[data-layout="unified"] .input-label{display:none!important}
body[data-layout="unified"] .performance{background:rgba(250,249,244,.94);border:1px solid #d7d9ce;border-radius:4px;box-shadow:0 24px 80px #353a2a0a;max-height:740px;margin:auto 0;flex:1}
body[data-layout="unified"] .stage-top{padding:19px 25px 15px;font-size:10px;letter-spacing:.04em;gap:8px}
body[data-layout="unified"] #mode-indicator{font-size:0}body[data-layout="unified"] #mode-indicator:after{content:'CHALLENGE';font-size:9px;letter-spacing:.16em}
body[data-layout="unified"]:not([data-response="challenge"]) #mode-indicator{font-size:9px}body[data-layout="unified"]:not([data-response="challenge"]) #mode-indicator:after{content:none}
body[data-layout="unified"] .challenge-hud{padding:0 25px 8px;gap:18px;font-size:10px}body[data-layout="unified"] #judgment{max-width:45%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lyric-surface{min-height:0;flex:1;position:relative;display:flex;flex-direction:column}
body[data-layout="unified"] .lyric-surface:focus-within{box-shadow:inset 0 0 0 1px #a7432e40}
body[data-layout="unified"] .lyric-area{padding:30px 40px 52px;scrollbar-width:thin;scrollbar-color:#d0d1c6 transparent;scroll-padding:24px}
body[data-layout="unified"] .lyrics{font-size:clamp(32px,4vw,47px);font-weight:400;line-height:2.05;color:#8b9088;max-width:660px}
body[data-layout="unified"] .lyric-word{margin-inline:5px}
body[data-layout="unified"] .letter.typed{color:#334e42}body[data-layout="unified"] .letter.next{color:#9c3928;background:#f1dacf;box-shadow:0 2px 0 #a7432e;border-radius:1px}
body[data-layout="unified"] .letter.missed{color:#a1776b;text-decoration-thickness:1px}
body[data-layout="unified"] .lyric-word.singing{background:linear-gradient(to left,#e3e7d8 var(--sung,0%),transparent 0);text-decoration-color:#7f8c6f;text-underline-offset:9px;text-decoration-thickness:2px}
body[data-layout="unified"] .lyric-word.sustaining{box-shadow:none}
body[data-layout="unified"] .mistyped{color:#a7432e;background:#f4e3da}
body[data-layout="unified"] #typing-input{border:none!important;box-shadow:none;outline:none;min-height:36px;height:36px;padding:7px 0;color:var(--ink);background:transparent;font-size:18px;caret-color:var(--accent);border-radius:0}
body[data-layout="unified"] #typing-input::placeholder{font-size:11px;color:#7d857d;text-align:center}
body[data-layout="unified"] .keyboard-inline{position:absolute;bottom:0;inset-inline:25px;z-index:2;background:linear-gradient(transparent,#faf9f4 25%);padding-top:9px}
body[data-layout="unified"] .stage-bottom{padding:11px 25px;font-size:10px;font-variant-numeric:tabular-nums}
body[data-layout="unified"] .typing-bar{padding:12px 25px 14px;background:transparent}body[data-layout="unified"] .play-actions{margin:0;gap:18px}
body[data-layout="unified"] #typing-status{margin-top:8px;color:#697267;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-layout="unified"] .button{border-radius:3px;min-height:39px}body[data-layout="unified"] .button.primary{background:#293e33;border-color:#293e33}
body[data-layout="unified"] .progress{height:2px;background:#e5e6dd}body[data-layout="unified"] #audio-progress{background:#b2bcaa;height:2px}body[data-layout="unified"] #type-progress{height:1px;background:#a7432e}
body[data-layout="unified"] .overlay{background:rgba(250,249,244,.98);gap:14px}body[data-layout="unified"] .overlay h2{font-size:27px;font-weight:400;letter-spacing:-.6px}body[data-layout="unified"] .overlay p{font-size:13px;line-height:1.7;max-width:360px}
body[data-layout="unified"] .ghost span{background:#eef0e7;color:#a7432e;border-color:#d4d7c8;border-radius:3px}
body[data-layout="unified"] .count-in{top:0;background:#f6f4eaf0;padding:12px;color:#67715f}body[data-layout="unified"] .count-in strong{color:#a7432e;font-size:38px}
.intro-guide{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;padding:35px;background:#f9f8f0f5;font-size:18px;line-height:1.7;color:#53634f;margin:0;pointer-events:none}
body[data-layout="previous"] .lyric-surface{display:contents}body[data-layout="previous"] .keyboard-inline{display:none}
body[data-layout="unified"] #reference{font-size:11px}body[data-layout="unified"] #replay{border:none;background:none;padding:4px 0;font-weight:400;text-decoration:underline;color:var(--muted)}
@media(max-width:600px){
 body[data-layout="unified"] main{padding:14px 12px 10px;gap:12px;min-height:270px}
 body[data-layout="unified"] header h1{font-size:22px}body[data-layout="unified"] header p{font-size:9px}
 body[data-layout="unified"] .stage-top{padding:12px 15px 8px;font-size:9px}
 body[data-layout="unified"] .challenge-hud{padding:0 15px 5px;font-size:9px;gap:10px}
 body[data-layout="unified"] .lyric-area{padding:14px 18px 45px}body[data-layout="unified"] .lyrics{font-size:33px;line-height:1.85}
 body[data-layout="unified"] .stage-bottom{padding:8px 15px;font-size:9px}body[data-layout="unified"] .typing-bar{padding:9px 15px}
 body[data-layout="unified"] .keyboard-inline{inset-inline:15px}body[data-layout="unified"] .play-actions{gap:13px}
 body[data-layout="unified"] #reference{font-size:10px}body[data-layout="unified"] .play-actions .button{font-size:11px;min-height:36px}
 body[data-layout="unified"] .overlay h2{font-size:22px}body[data-layout="unified"] .overlay p{font-size:12px}
 .band-backdrop img,.band-backdrop video{object-fit:cover;object-position:center}
 .intro-guide{font-size:15px;padding:20px}
}
@media(max-height:520px){body[data-layout="unified"] main{gap:5px;padding-top:6px}body[data-layout="unified"] header{min-height:27px}body[data-layout="unified"] header p{display:none}body[data-layout="unified"] .challenge-hud{display:none}body[data-layout="unified"] .stage-top{padding-block:5px}body[data-layout="unified"] .lyrics{font-size:29px;line-height:1.65}body[data-layout="unified"] .lyric-area{padding-top:4px}body[data-layout="unified"] .typing-bar{padding-block:5px}body[data-layout="unified"] #typing-status{font-size:9px;margin-top:3px}}
@media(prefers-reduced-motion:reduce){.band-backdrop video{display:none}}