*,*: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: #5a5a88;--knew: #27ae60;--knew-bright: #2ecc71}html,body,#root{height:100%}body{background:var(--night);color:var(--text);font-family:Noto Sans JP,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit;cursor:pointer}.app{min-height:100vh;display:flex;flex-direction:column;position:relative}.app:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.013) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.013) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;z-index:0}.app:after{content:"";position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--torii) 25%,var(--torii) 75%,transparent 100%);z-index:100}.header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.75rem;background:var(--surface);border-bottom:1px solid var(--border)}.brand{display:flex;flex-direction:column;gap:.1rem}.brand-jp{font-family:"Noto Serif JP",serif;font-size:1.05rem;color:var(--gold);letter-spacing:.06em;line-height:1}.brand-en{font-size:.6rem;color:var(--muted);letter-spacing:.2em;text-transform:uppercase}.difficulty{display:flex;border:1px solid var(--border);border-radius:4px;overflow:hidden}.diff-btn{padding:.4rem 1.2rem;background:transparent;color:var(--muted);border:none;font-size:.8rem;letter-spacing:.05em;transition:background .15s,color .15s}.diff-btn:not(.diff-active):hover{background:var(--surface-2);color:var(--text)}.diff-btn.diff-active{background:var(--torii);color:#fff}.stats{min-width:100px;text-align:right}.stats-accuracy{display:block;font-size:1.6rem;font-weight:700;color:var(--gold);line-height:1}.stats-count{display:block;font-size:.75rem;color:var(--muted);margin-top:.15rem}.stats-hint{font-size:.7rem;color:var(--muted);font-style:italic;letter-spacing:.05em}.drill{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;padding:3rem 2rem 5rem}.number-wrap{display:flex;flex-direction:column;align-items:center;gap:.6rem}.number{font-size:clamp(5rem,18vw,8rem);font-weight:700;color:var(--gold);line-height:1;letter-spacing:-.02em;text-shadow:0 0 40px rgba(212,160,23,.25),0 0 80px rgba(212,160,23,.1);animation:numberIn .4s cubic-bezier(.16,1,.3,1) both}.number-label{font-size:.7rem;color:var(--muted);letter-spacing:.2em;text-transform:uppercase;opacity:.8;font-family:Noto Sans JP,sans-serif}.btn-reveal{display:flex;align-items:center;gap:.9rem;background:var(--torii);color:#fff;border:none;padding:.9rem 2.5rem;border-radius:4px;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;transition:background .15s,transform .15s,box-shadow .15s;position:relative;overflow:hidden}.btn-reveal:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,rgba(255,255,255,.07),transparent);pointer-events:none}.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{font-family:"Noto Serif JP",serif;font-size:1.1rem;opacity:.9}.btn-reveal-hint{font-size:.62rem;opacity:.55;border:1px solid rgba(255,255,255,.25);padding:.1em .45em;border-radius:3px;font-family:monospace}.answer{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;animation:revealIn .4s cubic-bezier(.16,1,.3,1) both}.kana{font-family:"Noto Serif JP",serif;font-size:clamp(.9rem,5vw,2rem);color:var(--text);letter-spacing:.05em;white-space:nowrap}.answer-divider{color:var(--torii);font-size:.8rem;opacity:.65;letter-spacing:.35em;margin:.1rem 0}.kanji{font-family:"Noto Serif JP",serif;font-size:clamp(2.5rem,8vw,3.75rem);font-weight:700;color:var(--gold);letter-spacing:.05em;line-height:1.1}.assess-row{display:flex;gap:1rem;animation:fadeUp .3s ease-out .05s both}.btn-assess{display:flex;align-items:center;gap:.6rem;padding:.75rem 1.6rem;border:1.5px solid;border-radius:4px;font-size:.88rem;letter-spacing:.04em;background:transparent;min-width:132px;justify-content:center;transition:background .15s,transform .15s,opacity .2s}.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{background:#27ae602e;border-color:var(--knew-bright);color:var(--knew-bright)}.btn-missed{color:var(--torii-bright);border-color:var(--torii-bright)}.btn-missed:hover:not(:disabled){background:#e74c3c1f}.btn-missed.selected{background:#e74c3c2e;border-color:var(--torii-bright)}.btn-assess.dimmed{opacity:.25}.assess-icon{font-size:1rem;font-weight:700}kbd{font-size:.6rem;padding:.1em .45em;border:1px solid rgba(255,255,255,.12);border-radius:3px;font-family:monospace;color:var(--muted);background:var(--surface-2)}@keyframes numberIn{0%{opacity:0;transform:translateY(-10px) scale(.96);filter:blur(6px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes revealIn{0%{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 520px){.header{padding:.85rem 1rem;flex-wrap:wrap;gap:.6rem}.brand-en{display:none}.difficulty{order:3;width:100%}.diff-btn{flex:1}.stats{min-width:0}.drill{gap:2rem;padding:2rem 1.25rem 3rem}.assess-row{flex-direction:column;width:100%;max-width:300px}.btn-assess{width:100%}}