body{margin:0}#root{min-height:100vh}:root{--slate:#1f3a2e;--slate-dark:#162a21;--chalk:#f5f1e6;--chalk-dim:#d9d4c3;--gold:#d4a017;--gold-text:#f0c040;--red:#c0392b;--red-text:#ff8a7a;--font-display:"Chalkboard SE", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;--font-body:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}::selection{background:var(--gold);color:var(--slate)}html,body,#root{height:100%;margin:0}body{font-family:var(--font-body);color:var(--chalk);background:var(--slate)}.board{background:radial-gradient(ellipse at 20% 10%, #ffffff0d, transparent 50%), radial-gradient(ellipse at 80% 90%, #00000040, transparent 60%), var(--slate);background-image:radial-gradient(1px 1px at 12% 18%, #f5f1e62e, transparent), radial-gradient(1px 1px at 73% 42%, #f5f1e61f, transparent), radial-gradient(1px 1px at 38% 77%, #f5f1e626, transparent), radial-gradient(ellipse at 20% 10%, #ffffff0d, transparent 50%), radial-gradient(ellipse at 80% 90%, #00000040, transparent 60%), var(--slate);min-height:100vh;padding:1.5rem clamp(1.25rem,4vw,3rem) 3rem;position:relative}.board:before{content:"";pointer-events:none;z-index:1;position:fixed;inset:0;box-shadow:inset 0 0 0 10px #3a2414,inset 0 0 0 14px #5a3a22}.fx-layer{pointer-events:none;z-index:0;position:fixed;inset:0}.fx-layer canvas{display:block}.nav{z-index:2;border-bottom:2px solid #f5f1e659;justify-content:space-between;align-items:center;margin-bottom:2.5rem;padding-bottom:.75rem;display:flex;position:relative}.logo{font-family:var(--font-display);color:var(--chalk);letter-spacing:.02em;font-size:1.6rem;text-decoration:none}.nav-link{font-family:var(--font-display);color:var(--chalk-dim);font-size:1.1rem;text-decoration:none}.nav-link:hover{color:var(--gold)}.nav-right{align-items:center;gap:1.25rem;display:flex}.lang-toggle{font-family:var(--font-display);color:var(--slate);background:var(--chalk);border:2px solid var(--chalk);cursor:pointer;box-shadow:2px 2px 0 var(--gold);border-radius:2px;padding:.25rem .7rem;font-size:1rem}.lang-toggle:hover{transform:translate(-1px,-1px)}.lang-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.main{z-index:2;grid-template-columns:1.2fr 1fr;align-items:start;gap:clamp(1.5rem,4vw,3rem);display:grid;position:relative}.title-block{max-width:34rem}.title{font-family:var(--font-display);color:var(--chalk);text-shadow:0 2px #00000040;margin:0 0 1rem;font-size:clamp(3rem,9vw,6.5rem);line-height:.95}.sub{color:var(--chalk-dim);max-width:28rem;margin:0 0 1.75rem;font-size:1.15rem;line-height:1.5}.start{font-family:var(--font-display);color:var(--slate);background:var(--chalk);border:3px solid var(--chalk);cursor:pointer;box-shadow:3px 3px 0 var(--gold);border-radius:2px;padding:.6rem 1.4rem;font-size:1.4rem;transition:transform .1s,box-shadow .1s}.start:hover{box-shadow:4px 4px 0 var(--gold);transform:translate(-1px,-1px)}.start:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.note{color:var(--chalk-dim);margin-top:.75rem;font-size:.9rem;font-style:italic}.sample{background:#0000002e;border:2px dashed #f5f1e666;border-radius:2px;max-width:26rem;padding:1.25rem 1.5rem}.sample-label{font-family:var(--font-display);color:var(--gold-text);text-transform:lowercase;margin:0 0 .5rem;font-size:.9rem}.sample-q{font-family:var(--font-display);color:var(--chalk);margin:0 0 1rem;font-size:2.2rem}.choices{grid-template-columns:repeat(2,1fr);gap:.6rem;display:grid}.choice{font-family:var(--font-display);color:var(--chalk);cursor:pointer;background:0 0;border:2px solid #f5f1e680;border-radius:2px;min-height:44px;padding:.5rem;font-size:1.3rem;transition:background .1s,border-color .1s}.choice:hover{background:#f5f1e61a}.choice:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.choice.picked{border-color:var(--gold)}.choice.correct{border-color:var(--gold);background:#d4a01740}.sample-feedback{color:var(--chalk-dim);margin-top:.75rem;font-size:.95rem}.how{z-index:2;border-top:2px solid #f5f1e659;max-width:36rem;margin-top:4rem;padding-top:1.5rem;position:relative}.how h2{font-family:var(--font-display);color:var(--chalk);margin:0 0 .75rem;font-size:1.8rem}.how ol{color:var(--chalk-dim);padding-left:1.25rem;line-height:1.7}.how li{margin-bottom:.4rem}.footer{z-index:2;color:var(--chalk-dim);font-size:.85rem;font-family:var(--font-display);border-top:1px solid #f5f1e633;margin-top:3rem;padding-top:1rem;position:relative}.quiz-board{padding-top:0}.score-mark{font-family:var(--font-display);color:var(--chalk-dim);font-variant-numeric:tabular-nums;font-size:1rem;transition:transform .2s cubic-bezier(.16,1,.3,1)}.score-mark.score-bump{animation:.24s cubic-bezier(.16,1,.3,1) both score-bump}.timer-bar{z-index:2;background:#f5f1e626;height:6px;position:relative}.timer-fill{background:var(--gold);height:100%;transition:width .9s linear}.quiz-main{z-index:2;text-align:center;max-width:48rem;margin:2rem auto;padding:0 1.25rem;position:relative}.q-meta{font-family:var(--font-display);color:var(--chalk-dim);margin:0 0 1.5rem;font-size:1rem}.q-text{font-family:var(--font-display);color:var(--chalk);margin:0 0 2rem;font-size:clamp(2rem,6vw,3.5rem)}.choices.row4{grid-template-columns:repeat(4,1fr);gap:.75rem;display:grid}.choice.wrong{border-color:var(--chalk-dim);background:#c0392b26}.choice.correct,.choice.wrong{animation:.16s cubic-bezier(.16,1,.3,1) both choice-pop}.choice-key{text-align:center;opacity:.7;border:1px solid;border-radius:2px;width:1.4rem;height:1.4rem;margin-right:.4rem;font-size:.85rem;line-height:1.4rem;display:inline-block}.type-row{justify-content:center;gap:.6rem;margin-top:.25rem;display:flex}.type-input{font-family:var(--font-display);color:var(--slate);background:var(--chalk);border:2px solid var(--chalk);text-align:center;border-radius:2px;width:9rem;min-height:44px;padding:.4rem .8rem;font-size:1.6rem}.type-input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.type-input:disabled{opacity:.7}.type-submit{font-family:var(--font-display);color:var(--chalk);border:2px solid var(--chalk);cursor:pointer;background:0 0;border-radius:2px;min-height:44px;padding:.4rem 1rem;font-size:1.2rem}.type-submit:disabled{opacity:.4;cursor:default}.type-submit:hover:not(:disabled){background:#f5f1e61a}.type-submit:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.feedback-line{font-family:var(--font-display);color:var(--gold-text);margin-top:1.25rem;font-size:1.3rem}.feedback-line.bad{color:var(--red-text)}.progress-dots{flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:2rem;display:flex}.dot{background:#f5f1e640;border-radius:50%;width:10px;height:10px}.dot.done{background:var(--gold)}.dot.current{background:var(--chalk)}.results-main{text-align:center;z-index:2;max-width:36rem;margin:3rem auto;padding:0 1.25rem;position:relative}.score-big{font-family:var(--font-display);color:var(--gold);font-variant-numeric:tabular-nums;margin:.5rem 0;font-size:clamp(4rem,12vw,7rem);line-height:1}.new-best{font-family:var(--font-display);color:var(--gold);margin:.5rem 0 1.5rem;font-size:1.3rem}.results-actions{flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1.5rem;display:flex}.ghost-btn{font-family:var(--font-display);color:var(--chalk);border:2px solid var(--chalk);cursor:pointer;background:0 0;border-radius:2px;padding:.5rem 1.2rem;font-size:1.2rem}.ghost-btn:hover{background:#f5f1e61a}.ghost-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.level-picker{flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1.25rem;display:flex}.level-label{font-family:var(--font-display);color:var(--chalk-dim);font-size:1rem}.level-select{font-family:var(--font-display);color:var(--slate);background:var(--chalk);border:2px solid var(--chalk);cursor:pointer;border-radius:2px;min-width:4rem;min-height:44px;padding:.4rem .6rem;font-size:1.1rem}.level-select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.practice-toggle{font-family:var(--font-display);color:var(--chalk);cursor:pointer;background:0 0;border:2px solid #f5f1e666;border-radius:2px;min-height:44px;padding:.4rem .8rem;font-size:1rem;transition:background-color .15s,border-color .15s,color .15s}.practice-toggle.active{border-color:var(--gold);color:#f0c040;background:#d4a01740}.practice-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.level-label{font-family:var(--font-display);color:var(--chalk-dim);margin-right:.25rem;font-size:1rem}.level-btn{display:none}.level-btn:hover{border-color:var(--gold)}.level-btn.active{background:var(--gold);color:var(--slate);border-color:var(--gold)}.level-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}@media (width<=720px){.main{grid-template-columns:1fr}.sample{max-width:100%}.board:before{box-shadow:inset 0 0 0 6px #3a2414,inset 0 0 0 9px #5a3a22}.choices.row4{grid-template-columns:repeat(2,1fr)}}@keyframes rise-in{0%{opacity:.7;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes timer-pulse{0%,to{opacity:1}50%{opacity:.55}}@keyframes new-best-pulse{0%{transform:scale(1)}40%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes score-bump{0%{transform:scale(1)}40%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes dot-in{0%{opacity:.4;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes choice-pop{0%{transform:scale(.98)}50%{transform:scale(1.03)}to{transform:scale(1)}}.q-text{animation:.18s cubic-bezier(.16,1,.3,1) both rise-in}.feedback-line,.sample-feedback{animation:.15s both fade-in}.title-block .title{animation:.32s cubic-bezier(.16,1,.3,1) both rise-in}.title-block .sub{animation:.32s 80ms both fade-in}.sample{animation:.32s cubic-bezier(.16,1,.3,1) .16s both rise-in}.results-main .title{animation:.26s cubic-bezier(.16,1,.3,1) both rise-in}.dot.current{animation:.24s cubic-bezier(.16,1,.3,1) both dot-in}.score-big{animation:.32s cubic-bezier(.16,1,.3,1) 80ms both rise-in}.new-best{animation:.6s cubic-bezier(.16,1,.3,1) both new-best-pulse}.timer-fill.low{animation:.8s ease-in-out infinite timer-pulse}.start:active{box-shadow:2px 2px 0 var(--gold);transform:translate(1px,1px)}.ghost-btn:active,.choice:active{transform:scale(.98)}.level-btn:active{transform:scale(.96)}.lang-toggle:active{box-shadow:1px 1px 0 var(--gold);transform:translate(1px,1px)}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important}*{transition:opacity .1s,color .1s,background-color .1s,border-color .1s,box-shadow .1s!important}.timer-fill{transition:none}}