:root { color-scheme:light; --ink:#182331; --muted:#647080; --line:#dce1e7; --accent:#2563eb; --view-height:100svh; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; color:var(--ink); background:#f8f9fb; }
* { box-sizing:border-box; } body { margin:0; } button,input,select { font:inherit; } button { color:inherit; } button,label[for] { cursor:pointer; } button:disabled { opacity:.45; cursor:default; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:3px solid #8ab3ff; outline-offset:3px; } [hidden] { display:none!important; }
main { max-width:1040px; margin:auto; padding:18px 28px; height:var(--view-height); min-height:350px; display:flex; flex-direction:column; gap:12px; }
header,.stage-top,.stage-bottom,.play-actions,.options-heading,.option-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
header { flex:0 0 auto; min-height:46px; } h1 { font-size:24px; margin:0; text-align:left; } header p { font-size:12px; margin:3px 0 0; color:var(--muted); }
.button { display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; min-height:38px; border:1px solid var(--line); border-radius:6px; background:white; font-weight:600; font-size:12px; white-space:nowrap; text-decoration:none; }
.button.primary { background:var(--ink); color:white; border-color:var(--ink); } .button:hover:enabled { filter:brightness(.96); }
.text-button { border:0; padding:8px 2px; min-height:36px; background:none; color:var(--muted); text-decoration:underline; text-underline-offset:3px; font-size:12px; }
.levels { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; flex:0 0 auto; }
.levels button { display:flex; align-items:center; gap:9px; padding:10px 12px; background:white; border:1px solid var(--line); border-radius:6px; text-align:left; font-size:12px; }
.levels button[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.levels b { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#edf2fc; color:var(--accent); font-size:11px; }
.levels small { display:block; margin-top:4px; font-size:10px; color:var(--muted); }
.performance { flex:1; min-height:0; display:flex; flex-direction:column; background:white; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.stage { flex:1; min-height:0; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.stage-top,.stage-bottom { position:relative; z-index:1; flex:0 0 auto; padding:11px 18px; font-size:10px; color:var(--muted); }
.stage-top>span:first-child::before { content:""; display:inline-block; height:6px; width:6px; background:#aeb9c8; border-radius:50%; margin-right:6px; }
.stage[data-state="playing"] .stage-top>span:first-child::before,.stage[data-state="fading"] .stage-top>span:first-child::before { background:var(--accent); }
.pulse-band { flex:0 0 auto; display:flex; align-items:center; gap:12px; justify-content:center; padding:8px 20px; color:var(--muted); font-size:10px; }
.pulse-orb { height:13px; width:13px; border:2px solid #b7c9ec; background:#eef3ff; border-radius:50%; transform:scale(var(--pulse-scale,1)); }
.pulse-track { display:flex; align-items:center; justify-content:space-between; width:120px; height:12px; position:relative; }
.pulse-track span { width:3px; height:8px; background:#cad4e5; border-radius:2px; z-index:1; }
.pulse-track::before { content:""; position:absolute; height:1px; background:var(--line); width:100%; }
.pulse-track i { position:absolute; width:6px; height:6px; background:var(--accent); border-radius:50%; left:calc(var(--phase,0) * (100% - 6px)); z-index:2; }
.lyric-area { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:20px 30px 28px; position:relative; z-index:1; }
.lyrics { max-width:720px; margin:auto; font-size:clamp(32px,4.5vw,46px); font-weight:500; line-height:1.9; color:#b7bdc6; text-align:start; }
.lyric-line { min-height:1.9em; }.lyric-word { display:inline-block; white-space:nowrap; margin-inline:6px; }
.letter { border-radius:3px; }.letter.typed { color:var(--ink); }.letter.next { color:var(--accent); background:#eaf0ff; box-shadow:0 3px 0 var(--accent); }
.letter.missed { color:#be625b; text-decoration:line-through; text-decoration-thickness:1px; }
.challenge-hud { display:flex; align-items:center; gap:14px; flex:0 0 auto; padding:2px 18px 7px; font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.challenge-hud b { color:var(--ink); margin-left:3px; }.challenge-hud #judgment { margin-left:auto; text-align:right; color:var(--accent); }
#judgment[data-grade="miss"],#judgment[data-grade="wrong"],#judgment[data-grade="early"] { color:#b3261e; }
.note-highway { height:58px; flex:0 0 auto; position:relative; margin:0 18px 7px; overflow:hidden; border-block:1px solid var(--line); background:#f8faff; }
.hit-line { position:absolute; left:70%; top:4px; bottom:4px; width:2px; background:var(--accent); }.hit-label { position:absolute; left:70%; top:1px; transform:translateX(-50%); font-size:8px; color:var(--accent); background:#f8faff; padding:0 3px; }
.rhythm-note { position:absolute; top:20px; width:26px; height:28px; display:grid; place-items:center; transform:translateX(-50%); color:#8b97a7; font-size:22px; border-radius:4px; }
.rhythm-note.due { color:var(--accent); background:#eaf0ff; }.rhythm-note.hit { color:#237b51; }.rhythm-note.missed { color:#be625b; text-decoration:line-through; }
.rhythm-phrase { position:absolute; top:19px; display:inline-block; white-space:nowrap; transform:translateX(-100%); font-size:21px; line-height:1.3; padding:0 3px 7px; color:#8b97a7; }
.rhythm-glyph.hit { color:#237b51; }.rhythm-glyph.missed { color:#be625b; text-decoration:line-through; }.rhythm-glyph.due { color:var(--accent); background:#eaf0ff; }
.rhythm-sustain { position:absolute; bottom:2px; inset-inline:3px; height:3px; background:linear-gradient(to left,#2563eb calc(var(--sustain,0)*100%),#dce5f8 0); }
.rhythm-phrase.active { background:#f0f5ff; border-radius:4px; }.rhythm-phrase.sustaining,.lyric-word.sustaining { box-shadow:0 3px 0 #237b51; }
body[data-response="challenge"] .pulse-band,body[data-response="challenge"] #wave { display:none; }
.lyric-word.singing { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:9px; background:linear-gradient(to left,#eaf0ff var(--sung,0%),transparent 0); }
.mistyped { display:inline-block; font-size:.78em; margin-inline:2px; color:#b3261e; background:#fff0ed; text-decoration:line-through; text-decoration-thickness:2px; }
body[data-level="title"] .lyric-area { display:flex; align-items:center; }.lyrics { width:100%; }
body[data-view="compact"] .lyric-area { display:flex; align-items:center; }
#wave { position:absolute; bottom:25px; left:0; width:100%; height:56px; opacity:.3; pointer-events:none; }
.progress { position:absolute; bottom:0; width:100%; height:3px; background:#f0f2f5; }#audio-progress { height:3px; width:0; background:#b7c9ec; }#type-progress { position:absolute; top:0; height:2px; width:0; background:var(--accent); }
.typing-bar { flex:0 0 auto; border-top:1px solid var(--line); padding:10px 18px 12px; background:white; }
.play-actions { justify-content:flex-start; flex-wrap:wrap; margin-bottom:8px; }.play-actions #reference { margin-left:auto; }
.input-label { display:flex; justify-content:space-between; gap:8px; font-size:10px; color:var(--muted); margin-bottom:6px; }.input-label span { font-size:9px; text-align:right; }
#typing-input { width:100%; border:1px solid var(--line); border-radius:6px; min-height:49px; padding:10px 13px; font-size:22px; background:white; color:var(--ink); }#typing-input::placeholder { font-size:13px; color:#89929f; }#typing-input:focus { border-color:var(--accent); outline:2px solid #dae6ff; }
.small { font-size:11px; line-height:1.6; color:var(--muted); }#typing-status { font-size:10px; margin:6px 0 0; min-height:16px; }
.overlay { position:absolute; inset:0; z-index:3; background:rgba(255,255,255,.98); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:18px; text-align:center; overflow:auto; }
.overlay h2 { font-size:21px; margin:0; }.overlay p { margin:0; max-width:430px; font-size:12px; line-height:1.5; }.overlay .small { font-size:10px; }
.ghost { display:flex; gap:6px; margin-bottom:4px; }.ghost span { height:28px; width:28px; display:grid; place-items:center; border:1px solid #dce5f8; border-radius:4px; color:var(--accent); background:#edf2fc; animation:key-pulse 2.6s infinite; }.ghost span:nth-child(2){animation-delay:.22s}.ghost span:nth-child(3){animation-delay:.44s}.ghost span:nth-child(4){animation-delay:.66s}.ghost span:nth-child(5){animation-delay:.88s}
@keyframes key-pulse { 0%,100% {opacity:.45;transform:translateY(0)} 25%,60% {opacity:1;transform:translateY(2px)} }
.count-in { position:absolute; top:30px; left:12px; right:12px; z-index:2; background:rgba(255,255,255,.97); display:flex; justify-content:center; align-items:center; gap:12px; padding:6px; font-size:10px; color:var(--muted); pointer-events:none; }.count-in strong { font-size:32px; color:var(--accent); font-variant-numeric:tabular-nums; }
.notice:not(.error) { position:absolute; height:1px; width:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; margin:0; }.notice.error { color:#a32929; font-size:12px; margin:0; }
.file-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
dialog { width:min(540px,calc(100vw - 24px)); max-height:calc(var(--view-height) - 24px); padding:20px; background:#f8f9fb; color:var(--ink); border:1px solid var(--line); border-radius:10px; }dialog::backdrop { background:rgba(24,35,49,.3); }.options-heading { position:sticky; top:-20px; background:#f8f9fb; padding:6px 0 12px; z-index:4; }.options-heading h2 { font-size:18px; margin:0; }
dialog>label { display:grid; gap:6px; font-size:12px; margin:14px 0; }select { width:100%; padding:10px; border:1px solid var(--line); border-radius:5px; font-size:12px; background:white; color:var(--ink); }input[type="range"] { width:100%; accent-color:var(--accent); }.option-actions { flex-wrap:wrap; justify-content:flex-start; }a { color:var(--accent); }
.diagnostics { display:block; max-width:760px; height:auto; }.diagnostics h1 { font-size:25px; margin:20px 0; }.diagnostics pre { white-space:pre-wrap; padding:20px; background:white; border:1px solid var(--line); font-size:12px; line-height:1.8; }
@media(max-width:600px) {
 main { padding:10px 12px; gap:9px; }header { min-height:38px; }h1 { font-size:20px; }header p { font-size:10px; }.levels { gap:6px; }.levels button { padding:8px 7px; gap:5px; font-size:10px; }.levels b { width:18px; height:18px; flex-shrink:0; font-size:9px; }.levels small { font-size:8px; line-height:1.4; }
 .stage-top,.stage-bottom { padding:8px 12px; font-size:9px; }.pulse-band { padding:5px 10px; gap:9px; font-size:9px; }.pulse-track { width:80px; }.lyric-area { padding:12px 16px 18px; }.lyrics { font-size:30px; }.lyric-word { margin-inline:4px; }
 .typing-bar { padding:7px 12px 9px; }.play-actions { gap:9px; margin-bottom:5px; }.play-actions .button { min-height:33px; padding:6px 10px; font-size:11px; }.play-actions .text-button { font-size:10px; min-height:33px; }.input-label { font-size:9px; }.input-label span { font-size:8px; }#typing-status { font-size:9px; min-height:14px; margin-top:5px; }
 .overlay { padding:12px; gap:8px; }.overlay h2 { font-size:17px; }.overlay p { font-size:11px; }.overlay .small { font-size:9px; }.overlay .button { min-height:34px; padding:7px 12px; }.count-in { gap:9px; font-size:9px; }
}
@media(max-height:570px) { .ghost,#intro-status { display:none; }.overlay { gap:7px; padding:9px; }.overlay h2 { font-size:17px; }.overlay p { font-size:10px; }.overlay .small { font-size:9px; } }
@media(max-width:600px) and (max-height:570px) {
 main { padding:8px 10px; gap:7px; }header { min-height:34px; }.levels button { padding:7px 6px; }.levels small { font-size:7.5px; line-height:1.3; }
 .stage-top,.stage-bottom { padding:7px 10px; }.pulse-band { padding:4px 10px; }.lyric-area { padding:2px 12px 4px; }.lyrics { font-size:28px; line-height:1.7; }
 .typing-bar { padding:7px 10px; }.play-actions .button { min-height:32px; }.input-label { margin-bottom:4px; }#typing-input { min-height:44px; padding:8px 12px; font-size:21px; }#typing-status { margin-top:4px; line-height:1.4; }
 .challenge-hud { gap:9px; font-size:8px; padding:0 10px 4px; }.note-highway { height:45px; margin:0 10px 3px; }.rhythm-note { top:14px; font-size:20px; }
 .rhythm-phrase { top:13px; font-size:19px; padding-bottom:5px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after {animation:none!important;scroll-behavior:auto!important;} }