:root{--bg:#f7f5f0;--fg:#1d1d1f;--muted:#6b6b70;--card:#fff;--line:#e2dfd8;--accent:#c2410c;--good:#15803d;--bad:#dc2626;--pending:#ca8a04;--unseen:#c9c6bf;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;background:var(--bg);color:var(--fg);font-family:system-ui,Hiragino Sans,Noto Sans JP,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#17171a;--fg:#ececef;--muted:#9a9aa2;--card:#222227;--line:#34343b;--accent:#fb923c;--good:#4ade80;--bad:#f87171;--pending:#facc15;--unseen:#44444c}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}html,body{overflow-x:hidden}body{margin:0}#app{flex-direction:column;max-width:560px;min-height:100dvh;margin:0 auto;display:flex}button{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);cursor:pointer;border-radius:10px;padding:.5rem .9rem}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.danger{color:var(--bad);margin-top:2rem}button.link,button.back{background:0 0;border:none;padding:.25rem .5rem}button.back{font-size:1.8rem;line-height:1}.bar{border-bottom:1px solid var(--line);background:var(--bg);z-index:1;align-items:center;gap:.5rem;padding:.6rem .8rem;display:flex;position:sticky;top:0}.bar .title{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:600;overflow:hidden}.bar .counters{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.85rem}.home,.stats,.summary{padding:1rem}.intro{color:var(--muted);margin-top:0;line-height:1.5}.modes{gap:.6rem;display:grid}.mode{text-align:left;flex-direction:column;gap:.2rem;padding:.8rem 1rem;display:flex}.mode small,.best{color:var(--muted)}h3{margin:1.5rem 0 .6rem;font-size:.95rem}.chips{flex-wrap:wrap;gap:.4rem;display:flex}.chip{border-radius:999px;padding:.3rem .7rem;font-size:.9rem}.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}label{flex-direction:column;gap:.3rem;margin-bottom:.8rem;font-size:.9rem;display:flex}label.check{flex-direction:row;align-items:center}select{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:8px;padding:.4rem}.drill{flex-direction:column;flex:1;align-items:center;gap:.4rem;padding:.8rem 1rem;transition:background .3s;display:flex}.target{letter-spacing:.05em;text-align:center;cursor:pointer;word-break:break-all;font-size:clamp(2.4rem,12vw,4rem);font-weight:600;line-height:1.2}.sub{color:var(--muted);min-height:1.2em}.typed{letter-spacing:.05em;overflow-wrap:anywhere;max-width:100%;min-height:2.4rem;font-size:1.8rem}.typed .good{color:var(--good)}.typed .bad{color:var(--bad);-webkit-text-decoration:underline wavy;text-decoration:underline wavy}.typed .pending{color:var(--pending)}.ime{border:2px solid var(--line);background:var(--card);width:100%;color:var(--fg);text-align:center;border-radius:10px;padding:.5rem .7rem;font-size:1.2rem}.ime:focus{border-color:var(--accent);outline:none}.ime{color:#0000;caret-color:var(--accent)}.ime::selection{color:#0000;background:0 0}.ime::placeholder{color:var(--muted)}.drill.is-wrong .ime{border-color:var(--bad)}.drill.ok{animation:.35s ok}.drill.ok-late{animation:.35s oklate}@keyframes ok{0%{background:color-mix(in srgb, var(--good) 25%, transparent)}}@keyframes oklate{0%{background:color-mix(in srgb, var(--pending) 25%, transparent)}}.debug{background:var(--card);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;width:100%;max-height:8rem;margin:0;padding:.4rem;font-size:.7rem;overflow:auto}.hint{flex-direction:column;align-items:center;gap:.3rem;display:flex}.pad{grid-template-columns:repeat(3,3.6rem);gap:.25rem;display:grid}.key{background:var(--card);border:1px solid var(--line);border-radius:8px;height:3rem;font-size:1rem;position:relative}.key.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);z-index:1}.key.mod{border-color:var(--pending);box-shadow:0 0 0 2px var(--pending)}.petal{line-height:1;position:absolute;transform:translate(-50%,-50%)}.petal.p-c{top:50%;left:50%}.petal.p-l{color:var(--muted);font-size:.75rem;top:50%;left:16%}.petal.p-r{color:var(--muted);font-size:.75rem;top:50%;left:84%}.petal.p-u{color:var(--muted);font-size:.75rem;top:18%;left:50%}.petal.p-d{color:var(--muted);font-size:.75rem;top:82%;left:50%}.petal.hit{color:#fff;background:var(--accent);border-radius:4px;padding:2px 3px;font-size:.95rem;font-weight:700}.small-label{color:var(--muted);font-size:.7rem}.hint-text{color:var(--muted);font-size:.9rem}.hint-text b{color:var(--fg);font-size:1.1rem}.summary{flex-direction:column;align-items:center;gap:1rem;padding-top:2rem;display:flex}.big{flex-direction:column;align-items:center;display:flex}.big b{font-size:2.6rem}.big small{color:var(--muted)}.row{gap:.6rem;display:flex}.heat{grid-template-columns:repeat(auto-fill,minmax(2.2rem,1fr));gap:3px;display:grid}.heat span{aspect-ratio:1;color:#fff;border-radius:6px;place-items:center;font-size:1rem;display:grid}.legend{color:var(--muted);align-items:center;gap:.3rem;font-size:.8rem;display:flex}.legend span{border-radius:3px;width:.8rem;height:.8rem;margin-left:.5rem;display:inline-block}.bars{border-bottom:1px solid var(--line);align-items:flex-end;gap:3px;height:8rem;display:flex}.bars div{background:var(--accent);border-radius:3px 3px 0 0;flex:1;min-height:2px;position:relative}.bars small{color:var(--muted);font-size:.65rem;position:absolute;top:-1.1rem;left:50%;transform:translate(-50%)}table{border-collapse:collapse;width:100%;font-size:.85rem}th,td{text-align:left;border-bottom:1px solid var(--line);padding:.35rem .25rem}