:root{--color-bg-page:#f4f4f6;--color-bg-card:#fff;--color-bg-input:#fff;--color-bg-cancel-btn:#fff;--color-bg-cancel-hover:#f5f5f5;--color-border:#0000001a;--color-border-input:#ddd;--color-text-primary:#1a1a1a;--color-text-secondary:#555;--color-text-muted:#888;--color-text-label:#999;--color-text-cancel:#555;--color-hint-bg:#e6f0ff;--color-hint-text:#1a4faa;--color-btn-hint-bg:#e9d3b1;--color-btn-hint-text:#7a4500;--color-btn-hint-hover:#b38136;--color-btn-answer-bg:#4483b1;--color-btn-answer-text:#021c35;--color-btn-answer-hover:#035699;--color-btn-next-bg:#94e09a;--color-btn-next-text:#1b5e20;--color-btn-next-hover:#4cbd50;--color-btn-reset-bg:#c56b6b;--color-btn-reset-text:#580505;--color-btn-reset-hover:#c55b5b;--color-progress-track:#3a86ff33;--color-accent:#3a86ff;--color-accent-hover:#2970e0;--color-accent-subtle:#e6f0ff;--color-accent-text:#1a4faa;--color-radio-text:#444;--color-warning-bg:#e53935;--color-warning-text:#fff}[data-theme=dark]{--color-bg-page:#0f0f11;--color-bg-card:#1c1c1f;--color-bg-input:#2a2a2e;--color-bg-cancel-btn:#2a2a2e;--color-bg-cancel-hover:#333337;--color-border:#ffffff17;--color-border-input:#ffffff1f;--color-text-primary:#f0f0f0;--color-text-secondary:#aaa;--color-text-muted:#777;--color-text-label:#666;--color-text-cancel:#aaa;--color-hint-bg:#1a2a44;--color-hint-text:#7eb3ff;--color-btn-hint-bg:#2a1f0e;--color-btn-hint-text:#ffb74d;--color-btn-hint-hover:#3a2a14;--color-btn-answer-bg:#0d1f33;--color-btn-answer-text:#7eb3ff;--color-btn-answer-hover:#132a44;--color-btn-next-bg:#0d1f12;--color-btn-next-text:#81c784;--color-btn-next-hover:#12301a;--color-btn-reset-bg:#2c1512;--color-btn-reset-text:#c52216;--color-btn-reset-hover:#492a26;--color-progress-track:#3a86ff26;--color-accent:#3a86ff;--color-accent-hover:#5a9eff;--color-accent-subtle:#1a2a44;--color-accent-text:#7eb3ff;--color-radio-text:#aaa;--color-warning-bg:#7f1d1d;--color-warning-text:#fecaca}*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}body{background:var(--color-bg-page);min-height:100dvh}.header{color:#fff;background-color:#3a86ff;justify-content:space-between;align-items:center;padding:.875rem 1rem;display:flex}.header h1{margin:0;font-size:1rem;font-weight:500}.header-right{align-items:center;gap:12px;display:flex}.clickable-icon{cursor:pointer;filter:invert();width:auto;height:1.5rem;transition:transform .2s}.clickable-icon:hover{transform:scale(1.1)}.progress-row{justify-content:center;align-items:center;gap:8px;display:flex}.progress-counter{color:var(--color-text-muted);white-space:nowrap;font-size:13px}.progress-bar{background:var(--color-progress-track);border-radius:100px;flex:1;height:6px;overflow:hidden}.progress-fill{background:var(--color-accent);border-radius:99px;width:0%;height:100%;transition:width .4s}.setup-area{justify-content:center;align-items:center;padding:3rem 1rem;display:flex}.setup-card{background:var(--color-bg-card);border:.5px solid var(--color-border);text-align:center;border-radius:16px;flex-direction:column;gap:1.25rem;width:100%;max-width:360px;padding:2rem;display:flex}.setup-tagline{color:var(--color-text-secondary);font-size:15px;line-height:1.6}.main{flex-direction:column;gap:12px;max-width:800px;margin:0 auto;padding:16px;display:flex}.hint-card{background:var(--color-bg-card);border:.5px solid var(--color-border);border-radius:16px;flex-direction:column;gap:10px;padding:16px;display:flex}.hint-card-header{justify-content:space-between;align-items:center;display:flex}.vocab-char{color:var(--color-text-primary);font-size:1.75rem;font-weight:500}.part-of-speech-badge{background:var(--color-hint-bg);color:var(--color-hint-text);white-space:nowrap;text-align:center;border-radius:20px;padding:3px 10px;font-size:11px}#hint-types{flex-wrap:wrap;justify-content:center;align-items:center;gap:.2rem;display:flex}.hint-row{align-items:baseline;gap:10px;display:flex}.hint-label{color:var(--color-text-label);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;min-width:60px;font-size:11px}.hint-value{color:var(--color-text-secondary);font-size:14px;transition:filter .3s}.hint-value.blurred{transition:none}.sentence-card{background:var(--color-bg-card);border:.5px solid var(--color-border);text-align:center;border-radius:16px;flex-direction:column;gap:14px;padding:28px 20px;display:flex}.sentence-jp{color:var(--color-text-primary);font-size:2rem;line-height:1.5}.answer{flex-direction:column;gap:4px;transition:filter .3s;display:flex}.answer.blurred{transition:none}.sentence-kana{color:var(--color-text-secondary);font-size:15px}.sentence-en{color:var(--color-text-muted);font-size:14px}.blurred{filter:blur(6px);-webkit-user-select:none;user-select:none}.btn-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.btn-grid button{cursor:pointer;border:none;border-radius:12px;padding:13px;font-size:14px;font-weight:500;transition:background .15s,color .15s,transform .1s,box-shadow .1s,opacity .15s}.btn-grid button:active{opacity:.85;transform:scale(.98)}.btn-hint{background:var(--color-btn-hint-bg);color:var(--color-btn-hint-text)}.btn-hint:hover{background:var(--color-btn-hint-hover)}.btn-answer{background:var(--color-btn-answer-bg);color:var(--color-btn-answer-text)}.btn-answer:hover{background:var(--color-btn-answer-hover)}.btn-next{background:var(--color-btn-next-bg);color:var(--color-btn-next-text);grid-column:span 2}.btn-next:hover{background:var(--color-btn-next-hover)}.btn-reset{background:var(--color-btn-reset-bg);color:var(--color-btn-reset-text);border:.5px solid var(--color-border)!important}.btn-reset:hover{background:var(--color-btn-reset-hover);color:#7a1c15}.btn-primary{background:var(--color-accent);color:#fff;cursor:pointer;border:none;border-radius:10px;width:100%;padding:12px;font-size:15px;font-weight:500;transition:background .2s}.btn-primary:hover{background:var(--color-accent-hover)}.modal-overlay{z-index:1000;background:#00000073;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal{background:var(--color-bg-card);border-radius:16px;flex-direction:column;gap:16px;width:100%;max-width:400px;padding:24px;animation:.2s fadeUp;display:flex}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.modal h3{text-align:center;color:var(--color-text-primary);font-size:17px;font-weight:500}.setting-item{flex-direction:column;gap:6px;display:flex}.setting-item label{color:var(--color-text-label);font-size:13px}.setting-item input,.setting-item select{border:1px solid var(--color-border-input);color:var(--color-text-primary);background:var(--color-bg-input);border-radius:8px;padding:10px;font-size:14px}.setting-item input:focus,.setting-item select:focus{border-color:var(--color-accent);outline:none}.modal-actions{justify-content:flex-end;gap:8px;display:flex}.btn-cancel{border:1px solid var(--color-border-input);background:var(--color-bg-cancel-btn);color:var(--color-text-cancel);cursor:pointer;border-radius:8px;padding:9px 16px;font-size:14px;transition:background .15s}.btn-cancel:hover{background:var(--color-bg-cancel-hover)}.btn-save{background:var(--color-accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:9px 16px;font-size:14px;font-weight:500;transition:background .2s}.btn-save:hover{background:var(--color-accent-hover)}.radio-group{gap:6px;display:flex}.radio-label{border:1px solid var(--color-border-input);color:var(--color-radio-text);cursor:pointer;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:6px;padding:9px 6px;font-size:14px;transition:border-color .15s,background .15s;display:flex}.radio-label:has(input:checked){border-color:var(--color-accent);background:var(--color-accent-subtle);color:var(--color-accent-text)}.radio-label input{display:none}.levels-range,.days-range{flex-direction:column;gap:12px;display:flex}.input-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.input-row label{color:var(--color-text-secondary);font-size:14px}.input-row input{border:1px solid var(--color-border-input);width:100px;color:var(--color-text-primary);background:var(--color-bg-input);border-radius:8px;padding:8px 10px;font-size:14px}.input-row input[type=date]{width:125px}.input-row input:focus{border-color:var(--color-accent);outline:none}.warning{color:var(--color-warning-text);background:var(--color-warning-bg);border-radius:8px;padding:8px 12px;font-size:13px}.hidden{display:none!important}.font-kosugi-maru{font-family:Kosugi Maru,serif}.font-m-plus-1p{font-family:"M PLUS 1p",serif}.font-noto-sans-jp{font-family:Noto Sans JP,serif}.font-noto-serif-jp{font-family:Noto Serif JP,serif}.font-shippori-mincho{font-family:Shippori Mincho B1,serif}.font-yuji-syuku{font-family:Yuji Syuku,serif}.font-zen-antique{font-family:Zen Antique,serif}.font-zen-maru-gothic{font-family:Zen Maru Gothic,serif}.font-georgia{font-family:Georgia,serif}.font-times{font-family:Times New Roman,serif}.font-serif{font-family:serif}