*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--torii:#c0392b;--torii-bright:#e74c3c;--gold:#d4a017;--night:#09090f;--surface:#111119;--surface-2:#191928;--border:#222235;--text:#eeeef5;--muted:#8282ab;--muted-link:#8989bd;--knew:#27ae60;--knew-bright:#2ecc71}html,body,#root{height:100%}body{background:var(--night);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Noto Sans JP,system-ui,-apple-system,sans-serif}button{cursor:pointer;font-family:inherit}.app{flex-direction:column;min-height:100vh;display:flex;position:relative}.app:before{content:"";pointer-events:none;z-index:0;background-image:linear-gradient(#ffffff03 1px,#0000 1px),linear-gradient(90deg,#ffffff03 1px,#0000 1px);background-size:48px 48px;position:fixed;inset:0}.app:after{content:"";background:linear-gradient(90deg, transparent 0%, var(--torii) 25%, var(--torii) 75%, transparent 100%);z-index:100;height:2px;position:fixed;top:0;left:0;right:0}.site-footer{text-align:center;border-top:1px solid var(--border);color:var(--muted);letter-spacing:.05em;padding:1.5rem;font-size:.7rem}.site-footer a{color:var(--muted);text-decoration:none}.site-footer a:hover{color:var(--text)}.header{z-index:1;background:var(--surface);border-bottom:1px solid var(--border);grid-template-columns:1fr auto 1fr;align-items:center;padding:1rem 1.75rem;display:grid;position:relative}.brand{flex-direction:column;justify-self:start;gap:.1rem;display:flex}.brand-jp{color:var(--gold);letter-spacing:.06em;font-family:Noto Serif JP,serif;font-size:1.05rem;line-height:1}.brand-en{color:var(--muted);letter-spacing:.2em;text-transform:uppercase;font-size:.6rem}.brand-about{color:var(--muted-link);letter-spacing:.2em;text-transform:uppercase;font-size:.6rem;text-decoration:none;transition:color .15s}.brand-about:hover{color:var(--text)}.mode-difficulty{flex-direction:column;align-items:center;gap:.45rem;display:flex}.mode-toggle{border:1px solid var(--border);border-radius:999px;display:flex;overflow:hidden}.mode-btn{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;background:0 0;border:none;padding:.28rem .9rem;font-size:.62rem;transition:background .15s,color .15s}.mode-btn:not(.mode-active):hover{background:var(--surface-2);color:var(--text)}.mode-btn.mode-active{color:var(--gold);background:#d4a0171f}.difficulty{border:1px solid var(--border);border-radius:4px;display:flex;overflow:hidden}.diff-btn{color:var(--muted);letter-spacing:.05em;background:0 0;border:none;flex-direction:column;align-items:center;padding:.4rem 1.2rem;font-size:.8rem;transition:background .15s,color .15s;display:flex}.diff-jp{font-family:Noto Serif JP,serif;font-size:.85rem;line-height:1.2}.diff-en{letter-spacing:.07em;text-transform:uppercase;font-size:.65rem;line-height:1.2}.diff-btn:not(.diff-active):hover{background:var(--surface-2);color:var(--text)}.diff-btn.diff-active{background:var(--torii);color:#fff}.diff-btn-hard{border-left:1px solid var(--border)}.diff-btn-hard.diff-active{background:var(--gold);color:#1a1008}.stats{justify-self:end;align-items:center;gap:1.25rem;display:flex}.stats-numbers{text-align:right;min-width:56px}.stats-accuracy{color:var(--gold);font-size:1.6rem;font-weight:700;line-height:1;display:block}.stats-count{color:var(--muted);margin-top:.15rem;font-size:.75rem;display:block}.stats-hint{color:var(--muted);letter-spacing:.05em;font-size:.7rem;font-style:italic}.stats-actions{border-left:1px solid var(--border);flex-direction:column;align-items:center;gap:0;padding-left:1.25rem;display:flex}.auth-header-btn{border:1px solid var(--border);color:var(--muted-link);letter-spacing:.12em;text-transform:uppercase;background:0 0;border-radius:3px;margin-top:.35rem;padding:.2rem .5rem;font-size:.62rem;transition:color .15s,border-color .15s;display:block}.auth-header-btn:hover{color:var(--text);border-color:var(--muted)}.btn-premium{background:var(--torii);color:#fff;letter-spacing:.12em;text-transform:uppercase;border:none;border-radius:3px;margin-top:.35rem;padding:.2rem .6rem;font-size:.62rem;font-weight:600;transition:opacity .15s;display:block}.btn-premium:hover{opacity:.85}.btn-terms{color:var(--muted);letter-spacing:.08em;text-align:center;text-underline-offset:2px;margin-top:.1rem;font-size:.55rem;text-decoration:underline;display:block}.btn-terms:hover{opacity:1;color:var(--text)}@media (width<=520px){.header{flex-wrap:wrap;justify-content:space-between;gap:.6rem;padding:.85rem 1rem;display:flex}.brand-en{display:none}.mode-difficulty{order:3;width:100%}.difficulty{width:100%}.diff-btn{flex:1}.stats{gap:.75rem;min-width:0}.stats-actions{padding-left:.75rem}}.drill{z-index:1;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2.5rem;padding:3rem 2rem 5rem;display:flex;position:relative}.number-wrap{flex-direction:column;align-items:center;gap:.6rem;display:flex}.number{color:var(--gold);letter-spacing:-.02em;text-shadow:0 0 40px #d4a01740,0 0 80px #d4a0171a;font-size:clamp(5rem,18vw,8rem);font-weight:700;line-height:1;animation:.4s cubic-bezier(.16,1,.3,1) both numberIn}.number-wide{font-size:clamp(3rem,18vw,8rem)}.number-counter{margin-left:.06em;font-family:Noto Serif JP,serif;font-size:.82em;font-weight:700}.number-label{color:var(--muted);letter-spacing:.2em;text-transform:uppercase;font-family:Noto Sans JP,sans-serif;font-size:.7rem}.btn-reveal{background:var(--torii);color:#fff;letter-spacing:.1em;text-transform:uppercase;border:none;border-radius:4px;align-items:center;gap:.9rem;padding:.9rem 2.5rem;font-size:.85rem;transition:background .15s,transform .15s,box-shadow .15s;display:flex;position:relative;overflow:hidden}.btn-reveal:before{content:"";pointer-events:none;background:linear-gradient(#ffffff12,#0000);position:absolute;inset:0}.btn-reveal:hover{background:var(--torii-bright);transform:translateY(-2px);box-shadow:0 8px 28px #c0392b73}.btn-reveal:active{transform:translateY(0)}.btn-reveal-jp{opacity:.9;font-family:Noto Serif JP,serif;font-size:1.1rem}.btn-reveal-hint{opacity:.9;border:1px solid #ffffff40;border-radius:3px;padding:.1em .45em;font-family:monospace;font-size:.62rem}.answer{text-align:center;flex-direction:column;align-items:center;gap:.5rem;width:100%;animation:.4s cubic-bezier(.16,1,.3,1) both revealIn;display:flex}.kana{color:var(--text);letter-spacing:.05em;word-break:keep-all;font-family:Noto Serif JP,serif;font-size:clamp(.9rem,4.5vw,1.75rem);line-height:1.8}.answer-divider{color:var(--torii);opacity:.65;letter-spacing:.35em;margin:.1rem 0;font-size:.8rem}.kanji{color:var(--gold);letter-spacing:.05em;font-family:Noto Serif JP,serif;font-size:clamp(2.5rem,8vw,3.75rem);font-weight:700;line-height:1.3}.counter-description{color:var(--muted);letter-spacing:.06em;margin-top:.35rem;font-size:.78rem}.assess-row{gap:1rem;animation:.3s ease-out 50ms both fadeUp;display:flex}.btn-assess{letter-spacing:.04em;background:0 0;border:1.5px solid;border-radius:4px;justify-content:center;align-items:center;gap:.6rem;min-width:132px;padding:.75rem 1.6rem;font-size:.88rem;transition:background .15s,transform .15s,opacity .2s;display:flex}.btn-assess:hover:not(:disabled){transform:translateY(-1px)}.btn-assess:disabled{cursor:default}.btn-knew{color:var(--knew);border-color:var(--knew)}.btn-knew:hover:not(:disabled){background:#27ae601f}.btn-knew.selected{border-color:var(--knew-bright);color:var(--knew-bright);background:#27ae602e}.btn-missed{color:var(--torii-bright);border-color:var(--torii-bright)}.btn-missed:hover:not(:disabled){background:#e74c3c1f}.btn-missed.selected{border-color:var(--torii-bright);background:#e74c3c2e}.btn-assess.dimmed{opacity:.25}.assess-icon{font-size:1rem;font-weight:700}kbd{color:var(--muted);background:var(--surface-2);border:1px solid #ffffff1f;border-radius:3px;padding:.1em .45em;font-family:monospace;font-size:.6rem}@keyframes numberIn{0%{opacity:0;filter:blur(6px);transform:translateY(-10px)scale(.96)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}@keyframes revealIn{0%{opacity:0;filter:blur(4px);transform:translateY(12px)}to{opacity:1;filter:blur();transform:translateY(0)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (width<=520px){kbd,.btn-reveal-hint{display:none}.drill{gap:2rem;padding:2rem 1.25rem 3rem}.assess-row{flex-direction:column;width:100%;max-width:300px}.btn-assess{width:100%}}.gate-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:200;background:#0a0806d1;justify-content:center;align-items:center;animation:.2s ease-out both fadeIn;display:flex;position:fixed;inset:0}.gate-modal{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:8px;flex-direction:column;align-items:center;gap:1rem;width:calc(100% - 2rem);max-width:360px;padding:2.5rem 2rem;animation:.25s cubic-bezier(.16,1,.3,1) both slideUp;display:flex}.gate-badge{color:var(--gold);letter-spacing:.06em;background:#d4a0171a;border:1px solid #d4a01740;border-radius:4px;padding:.25rem .8rem;font-family:Noto Serif JP,serif;font-size:1.4rem}.gate-title{color:var(--text);letter-spacing:.03em;margin:0;font-size:1.15rem;font-weight:600}.gate-body{color:var(--text);opacity:.85;margin:0;font-size:.88rem;line-height:1.6}.gate-terms{color:var(--muted);text-align:center;margin-top:.5rem;font-size:.7rem;line-height:1.5}.gate-terms a{color:var(--muted);text-underline-offset:2px;text-decoration:underline}.gate-terms a:hover{color:var(--text)}.btn-gate{background:var(--torii);color:#fff;letter-spacing:.07em;text-transform:uppercase;border:none;border-radius:4px;margin-top:.5rem;padding:.75rem 1.75rem;font-size:.85rem;transition:background .15s,transform .15s}.btn-gate:hover{background:var(--torii-bright);transform:translateY(-1px)}.btn-gate-secondary{color:var(--muted);letter-spacing:.05em;background:0 0;border:none;padding:.25rem .5rem;font-size:.78rem;transition:color .15s}.btn-gate-secondary:hover{color:var(--text)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.auth-modal{gap:.85rem;max-width:380px;position:relative}.auth-close{color:var(--muted);background:0 0;border:none;border-radius:3px;padding:.25rem .4rem;font-size:.85rem;transition:color .15s,background .15s;position:absolute;top:.85rem;right:.85rem}.auth-close:hover{color:var(--text);background:var(--surface-2)}.auth-form{flex-direction:column;gap:.75rem;width:100%;margin-top:.25rem;display:flex}.auth-field{text-align:left;flex-direction:column;gap:.35rem;display:flex}.auth-label{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-size:.72rem}.auth-input{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:4px;width:100%;padding:.6rem .8rem;font-family:inherit;font-size:.9rem;transition:border-color .15s}.auth-input-wrap{align-items:center;display:flex;position:relative}.auth-input-wrap .auth-input{padding-right:2.4rem}.auth-eye{color:var(--muted);cursor:pointer;opacity:.75;background:0 0;border:none;padding:0;font-size:1rem;line-height:1;transition:opacity .15s;position:absolute;right:.6rem}.auth-eye:hover{opacity:1}.auth-input::placeholder{color:var(--muted);opacity:1}.auth-input:focus{border-color:var(--gold);outline:none}.auth-input-code{letter-spacing:.35em;text-align:center;font-family:monospace;font-size:1.4rem}.auth-error{color:var(--torii-bright);text-align:center;font-size:.78rem;line-height:1.4}.auth-success{color:var(--knew-bright);text-align:center;font-size:.78rem;line-height:1.4}.auth-submit{width:100%;margin-top:.25rem}.auth-submit:disabled{opacity:.5;cursor:default;transform:none}.auth-toggle{color:var(--muted);margin:0;font-size:.78rem}.auth-link{color:var(--gold);font-size:inherit;text-underline-offset:2px;background:0 0;border:none;padding:0;text-decoration:underline;transition:opacity .15s}.auth-link:hover{opacity:.75}.auth-terms-label{color:var(--muted);cursor:pointer;align-items:flex-start;gap:.6rem;margin-top:.5rem;font-size:.8rem;line-height:1.55;display:flex}.auth-terms-label input[type=checkbox]{accent-color:var(--torii);cursor:pointer;flex-shrink:0;margin-top:.2rem}.auth-terms-label a{color:var(--gold);text-underline-offset:2px;text-decoration:underline}.auth-terms-label a:hover{color:var(--text)}.profile-modal{min-width:300px}.profile-email{color:var(--muted);text-align:center;word-break:break-all;margin-bottom:.75rem;font-size:.85rem}.profile-tier{text-align:center;margin-bottom:1.5rem}.profile-tier-badge{letter-spacing:.12em;text-transform:uppercase;border-radius:99px;padding:.2rem .6rem;font-size:.65rem;font-weight:600}.profile-tier-premium{background:var(--gold);color:#0e0e0e}.profile-tier-free{background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}.profile-coming-soon{border:1px solid var(--border);text-align:center;color:var(--muted);background:#ffffff0a;border-radius:6px;margin-bottom:1.5rem;padding:.85rem 1rem;font-size:.78rem;line-height:1.5}.profile-delete-hint{text-align:center;color:var(--muted);margin-top:1rem;font-size:.72rem}.profile-delete-link{color:var(--muted);text-underline-offset:2px;font-size:inherit;background:0 0;border:none;padding:0;text-decoration:underline}.profile-delete-link:hover{color:var(--torii-bright)}.profile-delete-warning{color:var(--muted);text-align:center;margin-bottom:1.25rem;font-size:.78rem;line-height:1.5}.premium-banner{z-index:50;border-radius:6px;align-items:center;gap:1rem;width:calc(100% - 2rem);max-width:480px;padding:.75rem 1.25rem;font-size:.85rem;display:flex;position:fixed;bottom:5rem;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0006}.premium-banner-success{color:#a3d4a3;background:#1a3a1a;border:1px solid #2e6e2e}.premium-banner-cancel{background:var(--surface);border:1px solid var(--border);color:var(--muted)}.premium-banner-close{color:inherit;opacity:.7;background:0 0;border:none;flex-shrink:0;margin-left:auto;padding:0;font-size:.8rem;transition:opacity .15s}.premium-banner-close:hover{opacity:1}.cookie-banner{z-index:200;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);border-radius:6px;flex-wrap:wrap;align-items:center;gap:1rem;width:calc(100% - 2rem);max-width:520px;padding:.75rem 1.25rem;font-size:.82rem;display:flex;position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #00000080}.cookie-banner-text{flex:1;min-width:180px;margin:0}.cookie-banner-text a{color:var(--gold);text-decoration:none}.cookie-banner-text a:hover{text-decoration:underline}.cookie-banner-actions{flex-shrink:0;gap:.5rem;display:flex}.cookie-btn-accept{background:var(--torii);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:.35rem .9rem;font-size:.82rem;transition:background .15s}.cookie-btn-accept:hover{background:var(--torii-bright)}.cookie-btn-decline{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:4px;padding:.35rem .9rem;font-size:.82rem;transition:border-color .15s,color .15s}.cookie-btn-decline:hover{border-color:var(--muted);color:var(--text)}