:root{--bg: #15131f;--panel: #1f1c2e;--panel2: #272338;--ink: #ece9f5;--muted: #9a93b8;--accent: #7a6fd0;--accent2: #a99ef0;--good: #57c98a;--bad: #e2667a;--line: #36314d}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(120% 120% at 50% 0%,#221d33 0%,var(--bg) 60%);color:var(--ink);font-family:Iowan Old Style,Palatino Linotype,Palatino,Georgia,serif;-webkit-font-smoothing:antialiased}#app{max-width:760px;margin:0 auto;padding:18px 16px 40px}header{text-align:center;margin-bottom:14px}h1{font-size:clamp(26px,6vw,40px);letter-spacing:.14em;margin:4px 0 2px;color:var(--accent2)}.sub{color:var(--muted);margin:0;font-size:14px}.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:12px 0}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{background:transparent;color:var(--muted);border:0;padding:8px 12px;font:inherit;font-size:14px;cursor:pointer}.seg button.active{background:var(--accent);color:#fff}.btn{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:9px 16px;font:inherit;font-size:15px;cursor:pointer}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.scoreboard{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}.readout{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-variant-numeric:tabular-nums;font-size:16px}.readout span{display:block;font-size:10px;letter-spacing:.18em;color:var(--muted)}.readout em{color:var(--accent2);font-style:normal}.stage{position:relative}.target{display:flex;gap:6px;align-items:flex-end;justify-content:center;min-height:40px;padding:10px;margin-bottom:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.beat{width:16px;border-radius:4px 4px 2px 2px;background:var(--line)}.beat.weak{height:12px;background:#4a4564}.beat.strong{height:30px;background:var(--accent)}.line{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;align-items:flex-end;padding:26px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;min-height:90px}.word{display:inline-flex;gap:2px;align-items:flex-end}.syl{display:inline-block;padding:8px 9px;background:var(--panel2);border:1px solid var(--line);border-bottom:3px solid var(--line);border-radius:7px;font-size:clamp(16px,3.6vw,22px);cursor:pointer;user-select:none;transition:transform .08s,background .12s,color .12s}.syl:hover{border-color:var(--accent)}.syl.stressed{background:var(--accent);color:#fff;font-weight:700;transform:translateY(-10px);border-bottom-color:var(--accent2);text-transform:uppercase}.syl.bad{border-color:var(--bad);border-bottom-color:var(--bad);background:#3a2330}.pad{display:flex;gap:10px;justify-content:center;margin:16px 0}.hint{color:var(--muted);font-size:13px;text-align:center;line-height:1.5;max-width:560px;margin:0 auto}.hint b{color:var(--accent2)}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0f0d18d1;border-radius:12px}.overlay.hidden{display:none}.card{background:var(--panel);border:1px solid var(--accent);border-radius:14px;padding:24px 28px;text-align:center;max-width:320px}.card h2{margin:0 0 8px;color:var(--good)}.card p{color:var(--muted);margin:6px 0}.card .score{color:var(--ink);font-size:18px}.card .score b{color:var(--accent2)}.card .row{margin-top:16px}