:root{--bg:#f5f3ee;--card:#fff;--text:#24262b;--sub:#6b6f78;--accent:#2f6fd6;--done:#b4b8c0;--good:#3a9b5c;--mid:#d9a33a;--bad:#d4534a;--line:#e3e1db}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#17181b;--card:#222429;--text:#e8e9ec;--sub:#9a9ea8;--accent:#6a9ef0;--done:#5a5e68;--line:#34363d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#17181b;--card:#222429;--text:#e8e9ec;--sub:#9a9ea8;--accent:#6a9ef0;--done:#5a5e68;--line:#34363d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Hiragino Sans,Yu Gothic UI,Meiryo,system-ui,sans-serif;line-height:1.6}#app{max-width:820px;padding-block:24px 48px;padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));margin:0 auto}.datafield{background:var(--bg);width:100%;min-height:6em;color:var(--text);border:1px solid var(--line);border-radius:8px;margin-top:8px;font:.8rem ui-monospace,Consolas,monospace}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.card{background:var(--card);border-radius:16px;padding:24px 28px;box-shadow:0 2px 12px #0000000f}h1{margin:0 0 4px;font-size:1.6rem}h1 small{color:var(--sub);font-size:.8rem;font-weight:400}h2{border-bottom:1px solid var(--line);margin:28px 0 8px;padding-bottom:4px;font-size:1.05rem}.lead{color:var(--sub);margin-top:0}.note{color:var(--sub);font-size:.88rem}.buttons{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}button,.file{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;border-radius:10px;padding:10px 18px}button:hover,.file:hover{border-color:var(--accent)}button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}button.small{padding:2px 10px;font-size:.85rem}button.danger{color:var(--bad)}.file input{display:none}.bars{gap:6px;display:grid}.bar-row{grid-template-columns:13em 1fr 8em auto;align-items:center;gap:10px;font-size:.92rem;display:grid}.bar{background:var(--line);border-radius:5px;height:10px;overflow:hidden}.bar-fill{height:100%;display:block}.bar-fill.good{background:var(--good)}.bar-fill.mid{background:var(--mid)}.bar-fill.bad{background:var(--bad)}.bar-val{color:var(--sub);font-size:.85rem}.chip{background:var(--line);border-radius:999px;margin:2px;padding:2px 10px;display:inline-block}.chip small{color:var(--sub)}.settings{flex-wrap:wrap;gap:20px;display:flex}.data{margin-top:20px}.data button,.data .file{margin:4px 6px 4px 0;display:inline-block}.play{text-align:center}.play-head{color:var(--sub);justify-content:space-between;font-size:.9rem;display:flex}.progress{background:var(--line);border-radius:3px;height:6px;margin:8px 0 32px;overflow:hidden}.progress span{background:var(--accent);height:100%;display:block}.word{margin-bottom:4px;font-size:2.6rem;font-weight:700}.kana{letter-spacing:.08em;font-size:1.6rem}.roman{letter-spacing:.06em;margin-top:4px;font-family:ui-monospace,Consolas,monospace;font-size:1.5rem}.done{color:var(--done)}.hint{min-height:3.2em;color:var(--bad);margin-top:24px;font-size:1rem}.shake{color:var(--bad);animation:.25s shake}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}.stats{gap:16px;display:flex}.stats div{background:var(--bg);border-radius:12px;flex-direction:column;flex:1;padding:12px 16px;display:flex}.stats span{color:var(--sub);font-size:.85rem}.stats b{font-size:1.8rem}.stats small{color:var(--sub)}table{border-collapse:collapse;width:100%;font-size:.92rem}th,td{text-align:left;border-bottom:1px solid var(--line);padding:6px 8px}td.up{color:var(--good)}td.down{color:var(--bad)}.missed{padding-left:1.2em}.missed small{color:var(--sub)}@media (width<=600px){.bar-row{grid-template-columns:1fr auto}.bar{grid-column:1/-1}.card{padding:18px 16px}}