.clay-card{background:var(--surface);color:var(--text);border-radius:var(--clay-radius);box-shadow:var(--clay-shadow);padding:var(--space-5)}.clay-card--sunken{background:var(--canvas-deep);box-shadow:var(--clay-shadow-sunken)}.clay-button{appearance:none;min-height:var(--tap-min);min-width:var(--tap-min);padding:var(--space-3) var(--space-5);border-radius:var(--clay-radius-button);font:inherit;cursor:pointer;box-shadow:var(--clay-shadow);transition:transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;border:0;font-weight:800}.clay-button--primary{background:var(--accent);color:var(--on-accent)}.clay-button--secondary{background:var(--surface);color:var(--accent-green)}.clay-button--danger{background:var(--surface);color:var(--danger-text)}.clay-button:active:not(:disabled){box-shadow:var(--clay-shadow-pressed);transform:translateY(2px)}.clay-button:disabled{cursor:not-allowed;opacity:.55;box-shadow:var(--clay-shadow-sunken)}.level-chip{align-items:center;gap:var(--space-2);min-height:28px;padding:0 var(--space-3);border-radius:var(--clay-radius-pill);font-size:var(--text-small);letter-spacing:.02em;box-shadow:var(--clay-shadow-pressed);background:var(--surface);color:var(--text);font-weight:800;display:inline-flex}.level-chip:before{content:"";background:var(--chip-dot);border-radius:50%;width:10px;height:10px}.level-chip--kana{--chip-dot:var(--lv-kana)}.level-chip--n5{--chip-dot:var(--lv-n5)}.level-chip--n4{--chip-dot:var(--lv-n4)}.level-chip--n3{--chip-dot:var(--lv-n3)}.level-chip--n2{--chip-dot:var(--lv-n2)}.level-chip--n1{--chip-dot:var(--lv-n1)}.unit-tile{align-items:center;gap:var(--space-4);width:100%;min-height:72px;padding:var(--space-4) var(--space-5);border-radius:var(--clay-radius);background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--clay-shadow);transition:transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;border:0;display:flex}.unit-tile:active:not(:disabled){box-shadow:var(--clay-shadow-pressed);transform:translateY(2px)}.unit-tile:disabled{cursor:not-allowed;background:var(--canvas-deep);box-shadow:var(--clay-shadow-sunken)}.unit-tile__body{flex:1;min-width:0}.unit-tile__title{font-weight:800}.unit-tile__meta{color:var(--text-soft);font-size:var(--text-small)}.unit-tile__state{font-size:var(--text-small);color:var(--accent-green);flex:none;font-weight:800}.unit-tile:disabled .unit-tile__state{color:var(--text-soft)}.progress-bar{border-radius:var(--clay-radius-pill);background:var(--canvas-deep);height:16px;box-shadow:var(--clay-shadow-sunken);overflow:hidden}.progress-bar__fill{border-radius:var(--clay-radius-pill);background:var(--accent-green);height:100%;box-shadow:var(--clay-shadow-pressed);transition:width var(--motion-base) ease}.streak-badge{align-items:center;gap:var(--space-2);min-height:36px;padding:0 var(--space-4);border-radius:var(--clay-radius-pill);background:var(--surface);color:var(--text);box-shadow:var(--clay-shadow);font-weight:800;display:inline-flex}.quiz-option{align-items:center;gap:var(--space-3);width:100%;min-height:56px;padding:var(--space-3) var(--space-5);border-radius:var(--clay-radius-button);background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--clay-shadow);transition:transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;border:0;font-weight:700;display:flex}.quiz-option:active:not(:disabled){box-shadow:var(--clay-shadow-pressed);transform:translateY(2px)}.quiz-option__mark{margin-left:auto;font-weight:800}.quiz-option--correct{box-shadow:var(--clay-shadow), 0 0 0 3px var(--success)}.quiz-option--correct .quiz-option__mark{color:var(--success)}.quiz-option--wrong{box-shadow:var(--clay-shadow), 0 0 0 3px var(--danger)}.quiz-option--wrong .quiz-option__mark{color:var(--danger)}.locked-notice{gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--clay-radius);background:var(--canvas-deep);color:var(--text);box-shadow:var(--clay-shadow-sunken);align-items:flex-start;display:flex}.locked-notice__title{font-weight:800}.locked-notice__text{color:var(--text-soft);font-size:var(--text-small)}.empty-state{justify-items:center;gap:var(--space-3);padding:var(--space-6) var(--space-5);text-align:center;display:grid}.empty-state__art{object-fit:contain;width:96px;height:96px}.empty-state__title{font-size:var(--text-title);font-weight:800}.empty-state__text{max-width:32ch;color:var(--text-soft);margin:0}@font-face{font-family:Nunito;font-weight:400;font-display:swap;src:url(/assets/nunito-latin-400-BP4muIFr.woff2)format("woff2")}@font-face{font-family:Nunito;font-weight:700;font-display:swap;src:url(/assets/nunito-latin-700-WnKGJCIy.woff2)format("woff2")}@font-face{font-family:Nunito;font-weight:800;font-display:swap;src:url(/assets/nunito-latin-800-fkO1Nhs7.woff2)format("woff2")}@font-face{font-family:Zen Maru Gothic;font-weight:400;font-display:swap;src:url(/assets/zen-maru-dasar-400-DN4haHKx.woff2)format("woff2")}@font-face{font-family:Zen Maru Gothic;font-weight:500;font-display:swap;src:url(/assets/zen-maru-dasar-500-Bt1I_rwf.woff2)format("woff2")}@font-face{font-family:Zen Maru Gothic;font-weight:700;font-display:swap;src:url(/assets/zen-maru-dasar-700-CAE4ra0n.woff2)format("woff2")}:root{--orange-500:#f98322;--orange-400:#ff9830;--orange-700:#b84a00;--vermilion-500:#e8402a;--vermilion-600:#d93a25;--yellow-500:#ffc21a;--green-700:#006060;--green-600:#087f72;--green-500:#0a9188;--ink:#183840;--ink-soft:#3f5a5e;--white:#fff;--lv-kana:#ffc21a;--lv-kana-text:var(--ink);--lv-n5:#38b887;--lv-n5-text:var(--ink);--lv-n4:#087f72;--lv-n4-text:var(--white);--lv-n3:#f98322;--lv-n3-text:var(--ink);--lv-n2:#d93a25;--lv-n2-text:var(--white);--lv-n1:#183840;--lv-n1-text:var(--white);--clay-radius:28px;--clay-radius-button:18px;--clay-radius-pill:999px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--tap-min:44px;--motion-fast:.15s;--motion-base:.22s;--font-latin:"Nunito", system-ui, sans-serif;--font-jp:"Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;--text-body:1rem;--text-small:.875rem;--text-title:1.5rem;--text-jp-sentence:1.125rem;--text-jp-card:2.5rem;--furigana-scale:.52}:root,:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--canvas:#fff8ef;--canvas-deep:#f6e7d6;--surface:#fff;--text:#183840;--text-soft:#3f5a5e;--accent:#f98322;--accent-text:var(--orange-700);--accent-green:#087f72;--on-accent:var(--ink);--on-green:var(--white);--on-danger:var(--white);--danger:var(--vermilion-600);--danger-text:#b3321f;--success:#087f72;--focus-ring:#006060;--clay-shadow:0 10px 22px #18384024, inset 4px 4px 8px #ffffffd9, inset -5px -6px 10px #18384014;--clay-shadow-pressed:0 3px 8px #18384029, inset 3px 3px 7px #1838401f, inset -3px -3px 7px #ffffffb3;--clay-shadow-sunken:inset 4px 4px 9px #18384021, inset -4px -4px 8px #fffc}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--canvas:#10201f;--canvas-deep:#0b1817;--surface:#1a2e2d;--text:#fff3e6;--text-soft:#b8ccc9;--accent:#ff9830;--accent-text:var(--orange-400);--accent-green:#4fd1c0;--on-accent:var(--ink);--on-green:var(--ink);--danger:#ff7a66;--danger-text:#ff8a78;--on-danger:var(--ink);--success:#4fd1c0;--focus-ring:#ffc21a;--lv-n1:#9cc4cc;--lv-n1-text:var(--ink);--clay-shadow:0 12px 24px #00000073, inset 3px 3px 7px #fff3e612, inset -5px -6px 10px #00000059;--clay-shadow-pressed:0 3px 8px #00000080, inset 3px 3px 7px #0006, inset -3px -3px 7px #fff3e60d;--clay-shadow-sunken:inset 4px 4px 9px #00000073, inset -3px -3px 7px #fff3e60d}@media (prefers-color-scheme:dark){:root:not([data-theme]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--canvas:#10201f;--canvas-deep:#0b1817;--surface:#1a2e2d;--text:#fff3e6;--text-soft:#b8ccc9;--accent:#ff9830;--accent-text:var(--orange-400);--accent-green:#4fd1c0;--on-green:var(--ink);--danger:#ff7a66;--danger-text:#ff8a78;--on-danger:var(--ink);--success:#4fd1c0;--focus-ring:#ffc21a;--lv-n1:#9cc4cc;--lv-n1-text:var(--ink);--clay-shadow:0 12px 24px #00000073, inset 3px 3px 7px #fff3e612, inset -5px -6px 10px #00000059;--clay-shadow-pressed:0 3px 8px #00000080, inset 3px 3px 7px #0006, inset -3px -3px 7px #fff3e60d;--clay-shadow-sunken:inset 4px 4px 9px #00000073, inset -3px -3px 7px #fff3e60d}}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--canvas);color:var(--text);font-family:var(--font-latin), var(--font-jp);font-size:var(--text-body);margin:0;line-height:1.55}:lang(ja){font-family:var(--font-jp), var(--font-latin)}h1,h2,h3{margin:0;line-height:1.25}:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.demo{gap:var(--space-5);max-width:640px;padding:var(--space-5) var(--space-4) var(--space-6);margin:0 auto;display:grid}.demo__bar{justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.demo h1{font-size:var(--text-title);color:var(--accent-green)}.demo h2{margin-bottom:var(--space-3);font-size:1.125rem}.demo__jp{font-size:var(--text-jp-card);margin:0 0 var(--space-3)}.demo__row{gap:var(--space-3);flex-wrap:wrap;display:flex}.demo__stack{gap:var(--space-3);justify-items:start;display:grid}.demo__stack>*{width:100%}.demo__stack>.streak-badge{width:auto}