:root{--bg: #1a1726;--panel: #241f36;--accent: #7a6fd0;--accent-dim: #4a4470;--ink: #e8e4f5;--muted: #9a93b8;--good: #5fd08a;--bad: #e0635f;--guide: #3a3556}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none}#app{max-width:720px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:12px;align-items:stretch}.title{display:flex;align-items:baseline;gap:10px}.title h1{font-size:22px;margin:0;letter-spacing:1px;color:var(--accent)}.title .sub{font-size:12px;color:var(--muted)}.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.seg{display:inline-flex;border:1px solid var(--accent-dim);border-radius:8px;overflow:hidden}.seg button{background:transparent;color:var(--muted);border:none;padding:6px 12px;font-size:13px;cursor:pointer}.seg button.active{background:var(--accent);color:#fff}.btn{background:var(--panel);color:var(--ink);border:1px solid var(--accent-dim);border-radius:8px;padding:6px 14px;font-size:13px;cursor:pointer}.btn:hover{border-color:var(--accent)}#cv{width:100%;height:auto;aspect-ratio:3 / 2;background:var(--panel);border-radius:12px;border:1px solid var(--accent-dim);touch-action:none;display:block}#status{font-size:14px;color:var(--ink);min-height:20px}#status .hl{color:var(--accent);font-weight:600}#status .ok{color:var(--good)}#status .warn{color:var(--bad)}.word-line{font-size:28px;letter-spacing:8px;font-weight:700;text-align:center}.word-line .cur{color:var(--accent)}.word-line .did{color:var(--good)}.word-line .todo{color:var(--muted)}.hint{font-size:12px;color:var(--muted);text-align:center}