*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(135deg,#f8fbff,#eef2ff 48%,#f0fdf4);color:#172033}.topbar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:12px clamp(14px,4vw,50px);background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 3px 18px rgba(30,41,59,.09)}.nav-left,.nav-actions{display:flex;gap:12px;align-items:center;font-weight:700;font-size:.92rem}.brand-link{display:flex;align-items:center;gap:8px;color:#3730a3;text-decoration:none}.brand-logo{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:white;font-weight:900;box-shadow:0 6px 16px #4f46e540}.divider{color:#cbd5e1}.nav-actions a{color:#475569;text-decoration:none}.nav-actions a:hover{color:#4f46e5}.hero{max-width:1200px;margin:30px auto 22px;padding:38px clamp(20px,5vw,65px);display:grid;grid-template-columns:1.45fr .75fr;gap:25px;align-items:center;border-radius:32px;background:linear-gradient(135deg,#312e81,#4f46e5 55%,#7c3aed);color:#fff;box-shadow:0 25px 60px rgba(79,70,229,.24);overflow:hidden;position:relative}.hero:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-100px;top:-130px;background:#ffffff18}.badge{display:inline-block;padding:8px 13px;border-radius:999px;background:#ffffff18;border:1px solid #ffffff30;font-size:.82rem}.hero h1{font-size:clamp(1.8rem,4vw,3.35rem);line-height:1.1;margin:18px 0 8px}.hero h1 span{color:#fde68a}.hero-sub{font-size:1.15rem;font-weight:800;margin:0 0 8px}.hero-text{max-width:720px;color:#e0e7ff;line-height:1.7}.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.hero-pills span{background:#ffffff14;border:1px solid #ffffff22;border-radius:999px;padding:7px 10px;font-size:.78rem}.hero-art{min-height:240px;display:grid;place-items:center;position:relative}.book{font-size:8rem;filter:drop-shadow(0 15px 12px #11182750);animation:float 3s ease-in-out infinite}.pencil{position:absolute;font-size:4rem;right:8%;bottom:12%;animation:bob 2.2s ease-in-out infinite}.coin{position:absolute;background:#fde68a;color:#92400e;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-weight:900;box-shadow:0 7px 18px #11182745}.coin1{left:8%;top:18%;animation:spinfloat 3s infinite}.coin2{right:15%;top:9%;animation:spinfloat 4s infinite reverse}.formula{position:absolute;bottom:2%;left:8%;right:8%;text-align:center;padding:9px;background:#11182730;border-radius:12px;font-weight:800}.control-card,.tools-card,.content-card,.result-card{max-width:1200px;margin:18px auto;padding:24px clamp(16px,3vw,30px);background:#fff;border-radius:24px;box-shadow:0 12px 35px rgba(15,23,42,.08);border:1px solid #e2e8f0}.control-grid{display:grid;grid-template-columns:repeat(3,1fr) 1.35fr;gap:14px;align-items:end}.control-grid label{display:block;font-size:.82rem;font-weight:800;color:#475569;margin-bottom:6px}.control-grid select{width:100%;padding:13px;border:1px solid #cbd5e1;border-radius:12px;background:#f8fafc;font-size:.95rem}.button-stack{display:flex;gap:8px}.btn{border:0;border-radius:12px;padding:12px 15px;font-weight:800;cursor:pointer;transition:.2s;box-shadow:0 5px 14px rgba(15,23,42,.08)}.btn:hover:not(:disabled){transform:translateY(-2px)}.btn:disabled{opacity:.45;cursor:not-allowed}.primary{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:white}.secondary{background:#eef2ff;color:#3730a3}.ghost{background:#f8fafc;color:#475569;border:1px solid #cbd5e1}.start-note{margin-top:15px;padding:12px 14px;border-radius:13px;background:#fffbeb;border:1px solid #fde68a;color:#92400e}.status-row{display:grid;grid-template-columns:auto auto 1fr;gap:16px;align-items:center;margin-top:18px}.timer-box,.score-mini{padding:10px 13px;border-radius:12px;background:#f1f5f9;font-weight:800}.progress-wrap{min-width:180px}.progress-label{display:flex;justify-content:space-between;font-size:.78rem;font-weight:800;color:#475569;margin-bottom:5px}.progress{height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}.progress div{height:100%;width:0;background:linear-gradient(90deg,#4f46e5,#22c55e);transition:width .35s ease}.question-header{max-width:1200px;margin:28px auto 10px;padding:0 8px;display:flex;justify-content:space-between;align-items:end}.eyebrow{font-size:.72rem;color:#6366f1;font-weight:900;letter-spacing:.12em}.question-header h2{margin:4px 0;font-size:1.55rem}.topic-chip{padding:9px 12px;border-radius:999px;background:#eef2ff;color:#4338ca;font-weight:800;font-size:.8rem}.questions-area{max-width:1200px;margin:0 auto}.empty-state{text-align:center;padding:55px 20px}.mascot{font-size:5rem;animation:float 3s infinite}.question-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:20px;margin:15px 0;box-shadow:0 10px 25px rgba(15,23,42,.06);animation:rise .35s ease both;position:relative}.q-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.q-number{font-weight:900;color:#4338ca}.difficulty-tag{font-size:.7rem;padding:5px 8px;border-radius:99px;background:#f1f5f9;color:#475569}.q-text{font-size:1rem;line-height:1.6;font-weight:750;margin:13px 0}.options{display:grid;gap:9px}.option{padding:11px 12px;border:1px solid #cbd5e1;border-radius:12px;cursor:pointer;display:flex;gap:8px;align-items:flex-start;transition:.18s;background:#fff}.option:hover{background:#f8fafc;border-color:#818cf8}.option input{margin-top:4px}.answer-row{display:flex;gap:9px;align-items:center;margin-top:14px;flex-wrap:wrap}.answer-input{flex:1;min-width:170px;padding:12px;border:2px solid #cbd5e1;border-radius:12px;font-size:1rem;font-weight:800}.answer-input.correct{border-color:#22c55e;background:#f0fdf4;color:#166534;animation:correctPop .35s}.answer-input.wrong{border-color:#ef4444;background:#fef2f2;color:#991b1b;animation:shake .35s}.check-btn,.show-btn{padding:10px 13px;border:0;border-radius:11px;font-weight:800;cursor:pointer}.check-btn{background:#111827;color:white}.show-btn{background:#ecfeff;color:#0e7490;display:none}.feedback{min-height:24px;margin-top:9px;font-weight:800}.feedback.correct{color:#15803d}.feedback.wrong{color:#dc2626}.locked{opacity:.72}.result-card{text-align:center;background:linear-gradient(135deg,#eef2ff,#f0fdf4)}.hidden{display:none}.trophy{font-size:4rem;animation:bob 1.8s infinite}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.result-grid div{background:#fff;border-radius:15px;padding:15px}.result-grid span{display:block;color:#64748b;font-size:.78rem}.result-grid strong{display:block;font-size:1.45rem;color:#3730a3}.tool-buttons{display:flex;flex-wrap:wrap;gap:10px}.small-note{font-size:.8rem;color:#64748b}.content-card{line-height:1.8}.content-card h2{color:#312e81;font-size:1.7rem}.content-card h3{color:#4338ca;margin-top:25px}.content-card p{color:#334155}.content-card li{margin:6px 0}.seo-paragraph{background:#f8fafc;padding:16px;border-radius:14px;border-left:5px solid #4f46e5}.toast{position:fixed;right:18px;bottom:18px;background:#111827;color:#fff;padding:12px 16px;border-radius:12px;opacity:0;transform:translateY(20px);pointer-events:none;transition:.25s;z-index:100}.toast.show{opacity:1;transform:translateY(0)}footer{margin-top:30px;padding:25px;text-align:center;background:#111827;color:#cbd5e1;font-size:.82rem}footer a{color:#a5b4fc;text-decoration:none}@keyframes float{50%{transform:translateY(-10px)}}@keyframes bob{50%{transform:translateY(-8px) rotate(4deg)}}@keyframes spinfloat{50%{transform:translateY(-12px) rotate(180deg)}}@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes correctPop{50%{transform:scale(1.03)}}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@media(max-width:850px){.hero{grid-template-columns:1fr}.hero-art{min-height:170px}.control-grid{grid-template-columns:1fr 1fr}.button-stack{grid-column:1/-1}.status-row{grid-template-columns:1fr 1fr}.progress-wrap{grid-column:1/-1}.result-grid{grid-template-columns:1fr 1fr}.nav-actions{display:none}}@media(max-width:560px){.topbar{padding:9px 12px}.nav-left{font-size:.76rem}.brand-logo{width:32px;height:32px}.hero{margin:12px 8px;padding:25px 18px;border-radius:24px}.hero h1{font-size:1.75rem}.hero-art{min-height:130px}.book{font-size:5rem}.control-card,.tools-card,.content-card,.result-card{margin:12px 8px;padding:17px;border-radius:18px}.control-grid{grid-template-columns:1fr}.button-stack{grid-column:auto;flex-direction:column}.status-row{grid-template-columns:1fr}.progress-wrap{grid-column:auto}.question-header{padding:0 14px}.question-header h2{font-size:1.2rem}.topic-chip{display:none}.question-card{margin:10px 8px;padding:16px}.answer-row{align-items:stretch}.answer-input{min-width:100%;flex-basis:100%}.check-btn,.show-btn{flex:1}.result-grid{grid-template-columns:1fr 1fr}.tool-buttons .btn{width:100%}.content-card h2{font-size:1.35rem}.content-card{font-size:.93rem}}