:root{--bg:#f6f3ee;--surface:#ffffff;--surface-2:#efeae2;--text:#1d1b19;--muted:#6b655d;--line:#ddd5c9;--accent:#c8102e;--accent-ink:#ffffff;--ok:#1f7a4d;--ok-bg:#e3f3ea;--ng:#b3261e;--ng-bg:#fbe5e3;--warn:#8a5a00;--warn-bg:#fff2d6;--hl:#fff0a8;--ink:#1d1b19;--canvas:#fffdf8;--radius:14px;--shadow:0 1px 2px rgb(0 0 0/6%),0 4px 14px rgb(0 0 0/6%);color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#141312;--surface:#1f1d1b;--surface-2:#2a2724;--text:#f1ece4;--muted:#a59d92;--line:#3a3632;--accent:#ff4d5e;--accent-ink:#1a0004;--ok:#6fd39c;--ok-bg:#173325;--ng:#ff8a80;--ng-bg:#3a1a18;--warn:#ffcf6e;--warn-bg:#3a2c10;--hl:#5b4b00;--ink:#f1ece4;--canvas:#1a1917;--shadow:none;color-scheme:dark}}:root[data-theme=dark]{--bg:#141312;--surface:#1f1d1b;--surface-2:#2a2724;--text:#f1ece4;--muted:#a59d92;--line:#3a3632;--accent:#ff4d5e;--accent-ink:#1a0004;--ok:#6fd39c;--ok-bg:#173325;--ng:#ff8a80;--ng-bg:#3a1a18;--warn:#ffcf6e;--warn-bg:#3a2c10;--hl:#5b4b00;--ink:#f1ece4;--canvas:#1a1917;--shadow:none;color-scheme:dark}*{box-sizing:border-box}body,html{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic UI,Meiryo,system-ui,sans-serif;line-height:1.6;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}a{color:inherit}main{max-width:640px;margin:0 auto;padding:16px 16px calc(84px + env(safe-area-inset-bottom))}h1{font-size:1.4rem;margin:8px 0 16px}h2{font-size:1.1rem;margin:24px 0 8px}.muted{color:var(--muted)}.small{font-size:.85rem}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.stack>*+*{margin-top:12px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.grid2{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}.btn,button{font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;padding:10px 16px;min-height:44px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}button:disabled{opacity:.5;cursor:default}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}.btn-ok{background:var(--ok);border-color:var(--ok)}.btn-ng,.btn-ok{color:var(--surface);font-weight:700}.btn-ng{background:var(--ng);border-color:var(--ng)}.btn-block{width:100%}input[type=search],input[type=text],select{font:inherit;font-size:1.15rem;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);min-height:48px}.levels{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:6px;gap:6px}.levels button{padding:8px 0;font-weight:700}.levels button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.mode-card{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.mode-card .title{font-size:1.25rem;font-weight:800}.mode-card .count{color:var(--muted);font-size:.85rem}.nav{position:fixed;left:0;right:0;bottom:0;justify-content:space-around;background:var(--surface);border-top:1px solid var(--line);padding:6px 0 calc(6px + env(safe-area-inset-bottom));z-index:10}.nav,.nav a{display:flex}.nav a{text-decoration:none;font-size:.75rem;flex-direction:column;align-items:center;padding:4px 10px;color:var(--muted);min-width:56px}.nav a[aria-current=page]{color:var(--accent);font-weight:700}.nav .glyph{font-size:1.3rem;line-height:1.2}.q-surface{font-size:clamp(2.4rem,12vw,4rem);text-align:center;letter-spacing:.05em;margin:12px 0;font-weight:600;word-break:keep-all}.q-surface .hl{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px;background:var(--hl);border-radius:4px}.q-prompt{text-align:center;color:var(--muted)}.q-reading{text-align:center;font-size:1.8rem;font-weight:700}.kyokasho{font-family:UD デジタル 教科書体 N-R,UD Digi Kyokasho N-R,YuKyokasho,Yu Kyokasho,教科書体,Klee One,serif}.feedback{border-radius:var(--radius);padding:12px 16px}.feedback.ok{background:var(--ok-bg);color:var(--ok)}.feedback.ng{background:var(--ng-bg);color:var(--ng)}.feedback .answer{font-size:1.6rem;font-weight:800;color:var(--text)}.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));grid-gap:8px;gap:8px}.choices button{font-size:1.5rem;min-height:64px}.choices button:disabled{opacity:1;color:var(--muted)}.choices button.correct,.choices button.wrong{color:var(--text);font-weight:700}.choices button.correct{background:var(--ok-bg);border-color:var(--ok)}.choices button.wrong{background:var(--ng-bg);border-color:var(--ng)}.badge{display:inline-block;font-size:.75rem;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn);font-weight:700}.source{font-size:.75rem;color:var(--muted);word-break:break-all}.progressbar{height:10px;background:var(--surface-2);border-radius:999px;overflow:hidden}.progressbar>div{height:100%;background:var(--accent)}.canvas-wrap{position:relative;border:2px solid var(--line);border-radius:var(--radius);background:var(--canvas);overflow:hidden;touch-action:none}.canvas-wrap canvas{display:block;width:100%;touch-action:none}.canvas-model{white-space:nowrap;line-height:1;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--accent);opacity:.35}.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));grid-gap:4px;gap:4px}.kgrid a{text-decoration:none;font-size:1.5rem;text-align:center;padding:4px 0;border-radius:8px;background:var(--surface);border:1px solid var(--line)}table{width:100%;border-collapse:collapse;font-size:.9rem}td,th{text-align:left;padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--muted);font-weight:600}.big-kanji{font-size:6rem;line-height:1.1;text-align:center}.toggle{display:flex;align-items:center;gap:8px;min-height:44px}.toggle input{width:22px;height:22px}