:root{--bg:#f6f7f9;--surface:#fff;--surface-2:#eef1f5;--border:#d8dde5;--text:#1b2029;--muted:#5d6674;--accent:#2f6df6;--accent-soft:#2f6df61f;--ok:#1c9c60;--danger:#d64545;--radius:12px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=dark]{--bg:#12151c;--surface:#1a1f29;--surface-2:#222836;--border:#2e3644;--text:#e7ebf2;--muted:#98a2b3;--accent:#6f9bff;--accent-soft:#6f9bff29;--ok:#4ad295;--danger:#ff6b6b}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#12151c;--surface:#1a1f29;--surface-2:#222836;--border:#2e3644;--text:#e7ebf2;--muted:#98a2b3;--accent:#6f9bff;--accent-soft:#6f9bff29;--ok:#4ad295;--danger:#ff6b6b}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic,system-ui,-apple-system,sans-serif;line-height:1.7}.app{flex-direction:column;max-width:960px;min-height:100vh;margin:0 auto;padding:0 16px;display:flex}.app-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;display:flex}.brand{color:inherit;cursor:pointer;text-align:left;font:inherit;background:0 0;border:none;align-items:center;gap:10px;padding:0;display:flex}.brand-mark{background:var(--accent);color:#fff;letter-spacing:.5px;border-radius:10px;place-items:center;width:38px;height:38px;font-weight:700;display:grid}.brand small{color:var(--muted);font-size:12px;line-height:1.2;display:block}.app-nav{gap:6px;display:flex}.nav-item{color:var(--muted);cursor:pointer;font:inherit;background:0 0;border:1px solid #0000;border-radius:999px;padding:6px 14px}.nav-item:hover{color:var(--text);background:var(--surface-2)}.nav-item.is-active{color:var(--text);background:var(--accent-soft);border-color:var(--accent)}.app-main{flex:1;padding:8px 0 40px}.app-footer{border-top:1px solid var(--border);color:var(--muted);padding:14px 0 24px;font-size:12px}.stack-lg>*+*{margin-top:28px}.hero h1{margin:0 0 8px;font-size:26px}.hero p{color:var(--muted);margin:0}.section-title{margin:0 0 12px;font-size:18px}.section-subtitle{color:var(--muted);margin:24px 0 10px;font-size:15px}.muted{color:var(--muted)}.hint{font-size:13px}.alert,.notice{border-radius:var(--radius);margin:0;padding:10px 14px}.alert{color:var(--danger);background:#d645451f}.notice{background:var(--accent-soft);color:var(--text)}.row{flex-wrap:wrap;gap:8px;display:flex}.btn{font:inherit;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:999px;padding:8px 16px}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-ghost{background:0 0}.btn-danger{color:var(--danger);border-color:var(--danger);background:0 0}.dict-grid,.chapter-grid,.metric-grid,.setting-list,.custom-dict-list,.progress-list,.bar-chart{margin:0;padding:0;list-style:none}.dict-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;display:grid}.dict-card{text-align:left;width:100%;height:100%;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;flex-direction:column;gap:4px;padding:14px;display:flex}.dict-card.is-active{border-color:var(--accent);background:var(--accent-soft)}.dict-category{color:var(--muted);font-size:11px}.dict-name{font-size:16px;font-weight:700}.dict-desc{color:var(--muted);font-size:13px}.dict-meta{color:var(--muted);margin-top:6px;font-size:12px}.tag{background:var(--surface-2);border-radius:999px;margin-left:6px;padding:1px 8px;font-size:11px;font-style:normal;display:inline-block}.tag-grammar{background:var(--accent);color:#fff}.level-row{flex-wrap:wrap}.level-chip{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);cursor:pointer;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 14px;font-size:14px;display:flex}.level-chip small{color:var(--muted);font-size:11px}.level-chip.is-active{border-color:var(--accent);background:var(--surface-2)}.level-chip.is-active small{color:var(--text)}.chapter-grid{flex-wrap:wrap;gap:8px;display:flex}.chapter-chip{font:inherit;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:8px;padding:5px 12px;font-size:13px}.chapter-chip:hover{border-color:var(--accent)}.practice-bar{color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;display:flex}.practice-title{color:var(--text);font-weight:700}.practice-metrics{gap:14px;display:flex}.progress-track{background:var(--surface-2);border-radius:999px;height:6px;display:block;overflow:hidden}.progress-fill{background:var(--accent);height:100%;transition:width .2s;display:block}.word-board{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:48px 20px}.word-letters{letter-spacing:4px;word-break:break-all;font-family:SF Mono,Consolas,Menlo,monospace;font-size:clamp(30px,7vw,52px)}.word-chunk{white-space:pre;display:inline-block}.word-letters.is-shaking{animation:.2s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.letter{transition:color .1s}.letter.is-todo{color:var(--muted)}.letter.is-done{color:var(--ok)}.letter.is-current{color:var(--text);border-bottom:3px solid var(--accent)}.word-board.is-sentence{padding:32px 20px}.word-board.is-sentence .word-letters{letter-spacing:2px;word-break:normal;overflow-wrap:break-word;font-size:clamp(18px,3.2vw,28px);line-height:1.6}.word-tags{margin:0 0 14px}.word-note{max-width:46em;color:var(--muted);text-align:left;margin:12px auto 0;font-size:14px;line-height:1.7}.word-example{border-top:1px solid var(--border);text-align:left;max-width:46em;margin:16px auto 0;padding-top:14px}.word-example-en{margin:0;font-size:15px}.word-example-ja{color:var(--muted);margin:4px 0 0;font-size:13px}.word-phone{color:var(--muted);margin:12px 0 0;font-size:14px}.word-trans{margin:14px 0 0;font-size:17px}.word-trans.is-hidden{color:var(--muted);font-size:14px}.metric-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;display:grid}.metric-grid li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:14px}.metric-value{font-size:22px;font-weight:700;display:block}.metric-label{color:var(--muted);font-size:12px;display:block}.bar-chart{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);align-items:flex-end;gap:6px;height:160px;padding:10px;display:flex}.bar-chart li{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:6px;height:100%;display:flex}.bar{background:var(--accent);border-radius:4px 4px 0 0;width:100%;min-height:2px}.bar-label{color:var(--muted);white-space:nowrap;font-size:10px}.table-scroll{overflow-x:auto}.table{border-collapse:collapse;width:100%;font-size:14px}.table th,.table td{border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;padding:8px 10px}.table th{color:var(--muted);font-weight:600}.mono{font-family:SF Mono,Consolas,Menlo,monospace}.progress-list li{grid-template-columns:minmax(120px,1fr) 2fr auto;align-items:center;gap:12px;padding:6px 0;font-size:13px;display:grid}.progress-note{color:var(--muted);white-space:nowrap}.setting-list li{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;padding:12px 0;display:flex}.setting-list label{flex-direction:column;display:flex}.setting-list small{color:var(--muted);font-size:12px}.setting-list input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}.setting-list input[type=number],.setting-list select{font:inherit;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;min-width:120px;padding:6px 10px}.custom-dict-list li{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:8px 0;font-size:14px;display:flex}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (max-width:600px){.practice-metrics{gap:10px}.progress-list li{grid-template-columns:1fr;gap:4px}}