:root{--bg:#f7f4ee;--surface:#fffdf8;--fg:#1e1d1b;--muted:#6d6a64;--line:#e2ddd3;--grid:#d9a9a4;--accent:#c73e3a;--accent-fg:#fff;--hira:#2a7d74;--kata:#b5651d;--ok:#2e8540;--bad:#d23a32;--ink:#1e1d1b;--ref:#1e1d1b21;--ghost:#2f6fd6;--lv1:#f1d9a6;--lv2:#c9e1a1;--lv3:#8fca8a;--lv4:#4fa66a;--radius:14px;--shadow:0 1px 2px #0000000f, 0 4px 14px #0000000d;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#16171b;--surface:#202127;--fg:#ecebe8;--muted:#9b9a96;--line:#34353d;--grid:#6b3b39;--accent:#e0605a;--hira:#4fbfb2;--kata:#e59a52;--ok:#5cc46f;--bad:#ff6159;--ink:#f2f0ea;--ref:#f2f0ea29;--ghost:#6ea1ff;--lv1:#6b5a2e;--lv2:#4f6a2e;--lv3:#2f7a45;--lv4:#2ea35a;--shadow:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#16171b;--surface:#202127;--fg:#ecebe8;--muted:#9b9a96;--line:#34353d;--grid:#6b3b39;--accent:#e0605a;--hira:#4fbfb2;--kata:#e59a52;--ok:#5cc46f;--bad:#ff6159;--ink:#f2f0ea;--ref:#f2f0ea29;--ghost:#6ea1ff;--lv1:#6b5a2e;--lv2:#4f6a2e;--lv3:#2f7a45;--lv4:#2ea35a;--shadow:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--fg);margin:0}body{-webkit-tap-highlight-color:transparent;overscroll-behavior:none;font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Noto Sans JP,sans-serif}a{color:var(--accent)}h1,h2,h3{margin:.6em 0 .4em;line-height:1.2}h2{font-size:1.15rem}h3{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:1.4em;font-size:1rem}.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:.85rem}.spacer{flex:1}.page{max-width:820px;padding:max(12px, env(safe-area-inset-top)) 16px 48px;margin:0 auto}.btn{border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);min-height:52px;color:var(--fg);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;box-shadow:var(--shadow);justify-content:center;align-items:center;gap:6px;padding:0 18px;font-weight:600;text-decoration:none;display:inline-flex}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:3px solid var(--ghost);outline-offset:2px}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}.btn.danger{color:var(--bad);border-color:var(--bad)}.btn.ghost{box-shadow:none;background:0 0;border-color:#0000;padding:0 10px}.btn.small{min-height:38px;padding:0 12px;font-size:.9rem}.btn.huge{flex-direction:column;flex:1;gap:0;min-height:72px;font-size:1.3rem}.btn.huge small{opacity:.85;font-size:.85rem;font-weight:400}.btn.disabled{opacity:.5;pointer-events:none}.tools{flex-wrap:wrap;gap:8px;display:flex}.tools>.btn{flex:1 1 0;min-width:90px}.tools.column{flex-direction:column;max-width:360px}.topbar{align-items:center;gap:8px;min-height:52px;display:flex}.topbar h2{margin:0}.counter{color:var(--muted);margin-left:auto;padding-right:8px;font-size:.9rem}.toast{left:50%;bottom:calc(24px + env(safe-area-inset-bottom));background:var(--fg);color:var(--bg);z-index:100;border-radius:999px;max-width:90vw;padding:10px 18px;transition:opacity .3s;position:fixed;transform:translate(-50%)}.toast.out{opacity:0}.brand{flex-wrap:wrap;align-items:center;gap:8px 16px;display:flex}.brand h1{align-items:center;gap:10px;margin:.3em 0;font-size:1.5rem;display:flex}.logo{background:var(--accent);color:#fff;border-radius:10px;place-items:center;width:40px;height:40px;font-size:1.4rem;display:inline-grid}.brand nav{flex-wrap:wrap;gap:4px;margin-left:auto;display:flex}.brand nav a{color:var(--fg);border-radius:10px;padding:10px;text-decoration:none}.brand nav a:hover{background:var(--surface)}.stats{grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0;display:grid}.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);padding:12px}.stat b{font-size:1.8rem;line-height:1.1;display:block}.stat span{color:var(--muted);font-size:.85rem}.cta{flex-wrap:wrap;gap:10px;margin:16px 0;display:flex}.cta>.btn:not(.huge){min-height:72px}.set-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;display:grid}.set-tile{border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;text-align:left;cursor:pointer;border-radius:12px;grid-template-columns:1fr auto;align-items:baseline;gap:2px 8px;padding:10px 12px;text-decoration:none;display:grid}.set-name{font-weight:700}.set-prog{color:var(--muted);font-size:.8rem}.set-chars{letter-spacing:.08em;grid-column:1/-1;font-size:1.15rem}.set-tile.locked,.set-tile.dim{opacity:.45}.set-tile.lv1,.sw.lv1{background:var(--lv1)}.set-tile.lv2,.sw.lv2{background:var(--lv2)}.set-tile.lv3,.sw.lv3{background:var(--lv3)}.set-tile.lv4,.sw.lv4{background:var(--lv4);color:#fff}.set-tile.lv4 .set-prog{color:#fff}.set-tile.pick.on{outline:3px solid var(--accent);outline-offset:-1px;opacity:1}.legend{flex-wrap:wrap;align-items:center;gap:6px;margin-top:20px;display:flex}.sw{border:1px solid var(--line);border-radius:4px;width:14px;height:14px;display:inline-block}.row-block{border-top:1px solid var(--line);padding:10px 0}.row-block.locked .char-row{opacity:.45}.row-head{align-items:center;gap:10px;margin-bottom:8px;display:flex}.char-row{flex-wrap:wrap;gap:8px;display:flex}.char-tile{border:1px solid var(--line);background:var(--surface);width:64px;height:70px;color:var(--fg);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;text-decoration:none;display:flex}.char-tile .ch{font-size:1.8rem;line-height:1.1}.char-tile small{color:var(--muted)}.char-tile.learned{border-color:var(--ok)}.detail-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:20px;display:grid}@media (width<=640px){.detail-grid{grid-template-columns:1fr}}.stats-table{border-collapse:collapse;width:100%;margin-bottom:12px}.stats-table th{text-align:left;color:var(--muted);padding:6px 12px 6px 0;font-weight:500}.stats-table td{padding:6px 0}.stats-table tr+tr{border-top:1px solid var(--line)}.form{flex-direction:column;gap:4px;display:flex}.field{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 0;display:flex}.field>span{flex-direction:column;display:flex}.field small{color:var(--muted);font-size:.8rem}.field select,.field input[type=number]{font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:10px;min-width:110px;padding:10px}.field input[type=checkbox]{width:26px;height:26px;accent-color:var(--accent)}.kana-svg{aspect-ratio:1;width:100%;height:auto;display:block}.kana-svg .stroke,.pad svg .stroke{fill:none;stroke:var(--ink);stroke-width:3.2px;stroke-linecap:round;stroke-linejoin:round}.kana-svg .stroke.bad{stroke:var(--bad)}.kana-svg.anim .ghost-all .stroke{stroke:var(--ref)}.marker .num{fill:var(--accent);paint-order:stroke;stroke:var(--bg);stroke-width:1.4px;font-size:5.5px;font-weight:700}.marker .arrow{fill:var(--accent)}.marker.hidden{visibility:hidden}.demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);width:100%;max-width:100%;padding:4%}.pad{width:var(--pad);height:var(--pad);background:var(--surface);border-radius:var(--radius);border:1px solid var(--line);max-width:100%;box-shadow:var(--shadow);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:relative;overflow:hidden}.pad>*{width:100%;height:100%;position:absolute;inset:0}.pad canvas{touch-action:none;cursor:crosshair}.pad svg{pointer-events:none}.pad .grid .frame{fill:none;stroke:var(--grid);stroke-width:.6px}.pad .grid .mid{stroke:var(--grid);stroke-width:.4px;stroke-dasharray:2 2}.pad .ref .stroke{stroke:var(--ref);stroke-width:5px}.pad .ghost .stroke{stroke:var(--ghost);stroke-width:4px;opacity:.75}.pad .ghost .num,.pad .ghost .arrow{fill:var(--ghost)}.pad .ghost{transition:opacity .25s}.pad .ghost.out{opacity:0}.pad .debug .dref{fill:var(--ghost);opacity:.6}.pad .debug .ddrawn{fill:var(--bad);opacity:.8}.pad .debug .dtext{fill:var(--muted);font:3.2px ui-monospace,monospace}.study{--pad:min(calc(100vw - 24px), calc(100dvh - 330px), 640px);min-height:100dvh;padding:env(safe-area-inset-top) 12px calc(12px + env(safe-area-inset-bottom));grid-template-columns:1fr;grid-template-areas:"top""stage""side";align-content:start;justify-items:center;gap:10px;display:grid}.study .topbar{grid-area:top;width:100%}.study .stage{width:var(--pad);grid-area:stage;justify-content:center;display:flex}.study .side{flex-direction:column;grid-area:side;gap:10px;width:100%;max-width:640px;display:flex}.study .stage .demo{width:var(--pad)}@media (aspect-ratio>=1) and (width>=700px){.study{--pad:min(calc(100dvh - 84px), calc(62vw - 24px));grid-template-columns:auto minmax(260px,1fr);grid-template-areas:"top top""stage side";justify-items:start;column-gap:20px}.study.lefty{grid-template-columns:minmax(260px,1fr) auto;grid-template-areas:"top top""side stage"}.study.lefty .stage{justify-self:end}.study .side{max-width:460px}}.study.lefty .tools{flex-direction:row-reverse}@media not ((aspect-ratio>=1) and (width>=700px)){.study.result-mode .stage{display:none}}.prompt{flex-wrap:wrap;align-items:baseline;gap:12px;display:flex}.prompt .romaji{font-size:2.6rem;font-weight:700;line-height:1}.prompt .romaji small{color:var(--muted);font-size:1rem;font-weight:500}.prompt.audio{align-items:center}.prompt.audio .romaji:empty{display:none}.btn.play{min-height:64px;padding:0 22px;font-size:1.15rem}.btn.play .icon{flex:none}.big-char{font-size:3.2rem;line-height:1}.script-tag{color:#fff;border-radius:999px;padding:3px 10px;font-size:.85rem;font-weight:600}.script-tag.hira{background:var(--hira)}.script-tag.kata{background:var(--kata)}.new-badge{background:var(--accent);color:#fff;border-radius:6px;align-self:flex-start;padding:2px 8px;font-size:.8rem;font-weight:700}.status{min-height:1.6em;font-weight:600}.status.ok{color:var(--ok)}.status.bad{color:var(--bad)}.status.info{color:var(--muted)}.result{flex-direction:column;gap:8px;display:flex}.score-line .score{font-size:2rem;font-weight:800}.compare{grid-template-columns:1fr 1fr;gap:10px;max-width:360px;display:grid}.compare figure{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:0;padding:6px}.compare figcaption{text-align:center;color:var(--muted);font-size:.8rem}.kana-svg.drawn .stroke{stroke-width:3.4px}.issues{color:var(--bad);margin:0;padding-left:1.2em}.perfect{color:var(--ok);margin:0;font-weight:600}.ratings{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.study.lefty .ratings{direction:rtl}.study.lefty .ratings>*{direction:ltr}.btn.rate{flex-direction:column;gap:0;min-height:64px;padding:0 6px}.btn.rate small{color:var(--muted);font-size:.8rem;font-weight:400}.btn.rate.again{border-bottom:4px solid var(--bad)}.btn.rate.hard{border-bottom:4px solid var(--kata)}.btn.rate.good{border-bottom:4px solid var(--ok)}.btn.rate.easy{border-bottom:4px solid var(--ghost)}.btn.rate.suggested{outline:3px solid var(--fg);outline-offset:1px}.finished{text-align:center;padding:40px 0}