:root{--primary-h: 245;--primary-s: 85%;--primary-l: 65%;--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));--primary-hover: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 10%));--secondary: hsla(330, 80%, 60%, 1);--accent: hsla(160, 85%, 45%, 1);--bg-color: hsl(220, 33%, 98%);--card-bg: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .3);--text-primary: hsl(220, 40%, 15%);--text-secondary: hsl(220, 20%, 45%);--transition: all .4s cubic-bezier(.23, 1, .32, 1);--shadow-premium: 0 20px 40px -15px rgba(0, 0, 0, .1);--font-main: "Plus Jakarta Sans", system-ui, sans-serif;--font-heading: "Outfit", system-ui, sans-serif}[data-theme=dark]{--bg-color: hsl(222, 47%, 7%);--card-bg: rgba(30, 41, 59, .7);--glass-border: rgba(255, 255, 255, .05);--text-primary: hsl(210, 40%, 98%);--text-secondary: hsl(215, 25%, 70%)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-main);background:var(--bg-color);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden;transition:background-color .5s ease}.background-mesh{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:radial-gradient(circle at 0% 0%,hsla(var(--primary-h),80%,70%,.15) 0%,transparent 50%),radial-gradient(circle at 100% 100%,hsla(330,80%,70%,.15) 0%,transparent 50%),radial-gradient(circle at 50% 50%,hsla(160,80%,70%,.05) 0%,transparent 50%);filter:blur(80px);animation:mesh-move 20s infinite alternate linear}@keyframes mesh-move{0%{transform:scale(1) translate(0)}50%{transform:scale(1.1) translate(20px,-20px)}to{transform:scale(1) translate(-20px,20px)}}#app{max-width:1000px;margin:0 auto;padding:2rem;position:relative}.glass{background:var(--card-bg)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border)!important;box-shadow:var(--shadow-premium)!important}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4rem;padding:1.5rem 0}.logo{display:flex;align-items:center;gap:.75rem}.logo .icon{font-size:1.8rem;filter:drop-shadow(0 0 10px hsla(var(--primary-h),80%,60%,.5))}.logo h1{font-family:var(--font-heading);font-size:1.75rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.nav-controls{display:flex;gap:1rem;align-items:center}.primary-btn{background:linear-gradient(135deg,var(--primary),var(--primary-hover));color:#fff;border:none;padding:1rem 2rem;border-radius:12px;font-weight:700;font-family:var(--font-heading);cursor:pointer;transition:var(--transition);box-shadow:0 10px 20px -5px hsla(var(--primary-h),80%,60%,.4)}.primary-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 15px 30px -8px hsla(var(--primary-h),80%,60%,.5)}.primary-btn:active{transform:translateY(0)}.secondary-btn{background:rgba(var(--primary-h),20%,50%,.05);border:1px solid var(--glass-border);color:var(--text-secondary);padding:.6rem 1.2rem;border-radius:10px;font-weight:600;cursor:pointer;transition:var(--transition)}.secondary-btn:hover{background:rgba(var(--primary-h),20%,50%,.1);color:var(--text-primary)}.hero{text-align:center;max-width:700px;margin:0 auto 3rem}.hero h2{font-family:var(--font-heading);font-size:3rem;margin-bottom:1rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}.hero p{color:var(--text-secondary);font-size:1.25rem;font-weight:400}.stats-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:2rem;border-radius:20px;margin-bottom:2rem}.stat{display:flex;flex-direction:column;align-items:center;gap:.25rem}.stat .label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);font-weight:700}.stat .value{font-size:2rem;font-weight:800;font-family:var(--font-heading);color:var(--primary);text-shadow:0 5px 15px hsla(var(--primary-h),var(--primary-s),var(--primary-l),.2);transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.stat .value.scoring{transform:scale(1.3);color:var(--accent)}.stat .value.deducting{transform:scale(.9);color:#ef4444}.multiplier-badge{position:absolute;top:-10px;right:-10px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;padding:.25rem .5rem;border-radius:8px;font-size:.75rem;font-weight:800;box-shadow:0 4px 10px #ef44444d;animation:pulse-fire 2s infinite;display:none}@keyframes pulse-fire{0%{transform:scale(1);box-shadow:0 0 #ef444466}70%{transform:scale(1.1);box-shadow:0 0 0 10px #ef444400}to{transform:scale(1);box-shadow:0 0 #ef444400}}.floating-points{position:absolute;pointer-events:none;font-weight:800;font-family:var(--font-heading);font-size:1.5rem;z-index:100;animation:float-up .8s ease-out forwards}@keyframes float-up{0%{opacity:0;transform:translateY(0)}20%{opacity:1}to{opacity:0;transform:translateY(-50px)}}.quiz-card{padding:3.5rem;border-radius:32px;position:relative;overflow:hidden;margin-bottom:3rem}.progress-indicator{position:absolute;top:0;left:0;width:100%;height:6px;background:rgba(var(--primary-h),50%,50%,.05)}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));box-shadow:0 0 20px var(--primary);width:0%;transition:width .8s cubic-bezier(.34,1.56,.64,1)}.question-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:3rem}.category{padding:.4rem 1rem;background:hsla(var(--primary-h),80%,60%,.1);color:var(--primary);border-radius:50px;font-size:.9rem;font-weight:700}.badge{font-size:.85rem;color:var(--text-secondary);font-weight:600;opacity:.7}.sentence{font-size:2.25rem;font-weight:700;color:var(--text-primary);line-height:1.3;margin-bottom:3rem}.blank{color:var(--primary);border-bottom:3px solid var(--primary);padding:0 .5rem;min-width:80px;display:inline-block;text-align:center}.inline-input{display:inline-block;width:auto;min-width:160px;background:hsla(var(--primary-h),80%,90%,.1);border:none;border-bottom:3px solid var(--primary);color:var(--primary);font-family:inherit;font-size:inherit;font-weight:800;text-align:center;padding:2px 10px;border-radius:4px 4px 0 0;transition:var(--transition)}.inline-input:focus{outline:none;background:hsla(var(--primary-h),80%,60%,.15);border-bottom-width:5px}.input-area{margin-top:2rem;display:flex;gap:1rem}#answer-input{flex:1;padding:1.25rem 1.5rem;border-radius:16px;background:#8080800d;border:2px solid var(--glass-border);font-family:inherit;font-size:1.1rem;color:var(--text-primary);transition:var(--transition)}#answer-input:focus{outline:none;border-color:var(--primary);background:var(--card-bg);box-shadow:0 0 0 4px hsla(var(--primary-h),80%,60%,.1)}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:2.5rem}.choice-btn{padding:1.25rem;background:#ffffff0d;border:2px solid var(--glass-border);border-radius:16px;color:var(--text-primary);font-size:1.1rem;font-weight:700;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:1rem}.choice-key{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--bg-color);border:1px solid var(--glass-border);border-radius:6px;font-size:.8rem;color:var(--text-secondary);box-shadow:0 2px 4px #0000001a}.choice-btn:hover .choice-key{border-color:var(--primary);color:var(--primary)}.choice-btn:hover:not(:disabled){background:var(--card-bg);border-color:var(--primary);transform:translateY(-4px);box-shadow:0 10px 20px -5px #0000001a}.choice-btn:active:not(:disabled){transform:translateY(0)}.feedback{margin-top:2rem;padding:1.5rem;border-radius:16px;font-weight:700;font-size:1.1rem;display:flex;align-items:center;gap:1rem;animation:slide-up .4s ease-out}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.feedback.correct{background:#10b9811a;color:#059669;border:1px solid rgba(16,185,129,.2)}.feedback.incorrect{background:#ef44441a;color:#dc2626;border:1px solid rgba(239,68,68,.2)}.filter-wrapper{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.filter-label{font-size:.8rem;font-weight:700;text-transform:uppercase;color:var(--text-secondary);letter-spacing:.1em}.filter-group{display:flex;padding:.5rem;border-radius:16px;flex-wrap:wrap;justify-content:center;gap:.25rem}.filter-btn{padding:.6rem 1.25rem;border-radius:12px;border:none;background:transparent;color:var(--text-secondary);font-weight:700;font-size:.9rem;cursor:pointer;transition:var(--transition)}.filter-btn:hover{background:#0000000d;color:var(--text-primary)}.filter-btn.active{background:var(--primary);color:#fff;box-shadow:0 8px 16px -4px hsla(var(--primary-h),80%,60%,.4)}.theme-toggle{width:48px;height:48px;border-radius:14px;border:1px solid var(--glass-border);background:var(--card-bg);cursor:pointer;font-size:1.4rem;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.theme-toggle:hover{transform:rotate(15deg) scale(1.1);background:var(--bg-color)}footer{text-align:center;padding:5rem 0;color:var(--text-secondary);font-size:.9rem;font-weight:500}.hidden{display:none!important}@media(max-width:768px){#app{padding:1.5rem}.hero h2{font-size:2.25rem}.sentence{font-size:1.5rem}.stats-bar{grid-template-columns:1fr;gap:1rem}.quiz-card{padding:2rem}.filter-group{width:100%}.filter-btn{flex:1;min-width:140px}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-10px)}80%{transform:translate(10px)}}.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}