*,:before,:after{box-sizing:border-box}:root{--primary:#487dff;--primary-dark:#376cf5;--bg:#fff;--text:#1a1a2e;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:16px;line-height:1.5}body{background:#f8f9ff;margin:0}#root{width:100%;min-height:100vh}h1,h2,h3,h4{margin:0;line-height:1.2}p{margin:0}button{font-family:inherit}a{color:inherit;text-decoration:none}.home-screen{opacity:0;justify-content:center;align-items:center;min-height:100vh;transition:opacity .6s,transform .6s;display:flex;position:relative;overflow:hidden;transform:translateY(20px)}.home-screen.visible{opacity:1;transform:translateY(0)}.home-bg-circles{pointer-events:none;position:absolute;inset:0}.circle{opacity:.08;background:#487dff;border-radius:50%;position:absolute}.circle-1{width:500px;height:500px;animation:8s ease-in-out infinite floatCircle;top:-150px;right:-150px}.circle-2{width:350px;height:350px;animation:10s ease-in-out infinite reverse floatCircle;bottom:-100px;left:-100px}.circle-3{width:200px;height:200px;animation:6s ease-in-out infinite floatCircle;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes floatCircle{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-30px)scale(1.05)}}.circle-3{animation:6s ease-in-out infinite floatCircle3}@keyframes floatCircle3{0%,to{transform:translate(-50%,-50%)scale(1)}50%{transform:translate(-50%,-60%)scale(1.05)}}.home-content{text-align:center;z-index:1;max-width:680px;padding:2rem;position:relative}.badge-row{margin-bottom:1.5rem}.ftc-badge{color:#487dff;letter-spacing:.03em;background:#487dff1f;border:1.5px solid #487dff4d;border-radius:100px;padding:.4rem 1.2rem;font-size:.9rem;font-weight:600;animation:3s ease-in-out infinite badgePulse;display:inline-block}@keyframes badgePulse{0%,to{box-shadow:0 0 #487dff4d}50%{box-shadow:0 0 0 8px #487dff00}}.home-title{color:#1a1a2e;margin-bottom:1.2rem;font-size:clamp(2.5rem,6vw,4rem);font-weight:900;line-height:1.1}.title-frp{color:#487dff;animation:2s ease-in-out infinite titleBounce;display:inline-block}@keyframes titleBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.title-sub{color:#1a1a2e}.home-description{color:#555;margin-bottom:2rem;font-size:1.15rem;line-height:1.7}.home-description strong{color:#487dff}.home-categories-preview{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-bottom:2.5rem;display:flex}.preview-chip{color:#444;background:#fff;border:2px solid #487dff33;border-radius:50px;padding:.5rem 1.1rem;font-size:.9rem;font-weight:600;transition:transform .2s,box-shadow .2s,border-color .2s;animation:.5s both chipFadeIn;box-shadow:0 2px 8px #487dff1a}.preview-chip:first-child{animation-delay:.2s}.preview-chip:nth-child(2){animation-delay:.35s}.preview-chip:nth-child(3){animation-delay:.5s}@keyframes chipFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.preview-chip:hover{border-color:#487dff80;transform:translateY(-3px);box-shadow:0 6px 16px #487dff33}.start-button{color:#fff;cursor:pointer;letter-spacing:.02em;background:#487dff;border:none;border-radius:60px;align-items:center;gap:.75rem;padding:1rem 2.5rem;font-size:1.1rem;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 8px 24px #487dff66}.start-button:before{content:"";border-radius:inherit;background:linear-gradient(135deg,#fff3 0%,#0000 60%);position:absolute;inset:0}.start-button:hover{background:#376cf5;transform:translateY(-3px)scale(1.03);box-shadow:0 12px 32px #487dff80}.start-button:active{transform:translateY(-1px)scale(1.01)}.btn-arrow{font-size:1.3rem;transition:transform .2s}.start-button:hover .btn-arrow{transform:translate(4px)}.home-footer{color:#aaa;margin-top:1.5rem;font-size:.85rem}.cat-screen{opacity:0;flex-direction:column;align-items:center;min-height:100vh;padding:3rem 1.5rem;transition:opacity .5s,transform .5s;display:flex;transform:translateY(16px)}.cat-screen.visible{opacity:1;transform:translateY(0)}.cat-header{text-align:center;max-width:600px;margin-bottom:2.5rem}.cat-title{color:#1a1a2e;margin-bottom:.5rem;font-size:2.2rem;font-weight:900}.cat-subtitle{color:#666;font-size:1rem;line-height:1.6}.progress-bar-wrap{margin-top:1rem;background:#e8eaf6;border-radius:100px;width:300px;height:8px;margin-inline:auto;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg,#487dff,#00c6ff);border-radius:100px;height:100%;transition:width .6s}.cat-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;width:100%;max-width:960px;display:grid}.cat-card{cursor:pointer;text-align:left;background:#fff;border:2px solid #00000012;border-radius:20px;flex-direction:column;gap:.75rem;padding:2rem 1.75rem;transition:transform .25s,box-shadow .25s,border-color .25s;animation:.5s both cardSlideIn;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 16px #0000000f}@keyframes cardSlideIn{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.cat-card:hover{border-color:var(--cat-color);transform:translateY(-6px);box-shadow:0 16px 40px #0000001f}.cat-card.done{border-color:var(--cat-color);background:color-mix(in srgb, var(--cat-color) 4%, white)}.cat-card-glow{background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--cat-color) 12%, transparent), transparent 70%);opacity:0;border-radius:inherit;pointer-events:none;transition:opacity .3s;position:absolute;inset:0}.cat-card:hover .cat-card-glow{opacity:1}.cat-icon{filter:drop-shadow(0 4px 8px #0000001a);font-size:2.5rem;line-height:1}.cat-card-text h3{color:#1a1a2e;margin:0;font-size:1.3rem;font-weight:800}.cat-card-text p{color:#777;margin:.25rem 0 0;font-size:.9rem}.cat-arrow{color:var(--cat-color);align-self:flex-end;font-size:1.4rem;font-weight:700;transition:transform .2s}.cat-card:hover .cat-arrow{transform:translate(5px)}.cat-score-badge{background:var(--cat-color);color:#fff;border-radius:100px;align-self:flex-start;align-items:center;gap:.4rem;padding:.3rem .9rem;font-size:.9rem;font-weight:700;display:flex}.cat-score-badge .check{font-size:1rem}.quiz-screen{flex-direction:column;min-height:100vh;padding:0 0 4rem;display:flex}.quiz-header{z-index:10;background:#fff;border-bottom:1px solid #00000012;justify-content:space-between;align-items:center;padding:1.25rem 2rem;display:flex;position:sticky;top:0;box-shadow:0 2px 12px #0000000f}.back-btn{color:#555;cursor:pointer;background:0 0;border:1.5px solid #0000001f;border-radius:8px;padding:.45rem 1rem;font-size:.9rem;font-weight:600;transition:all .2s}.back-btn:hover{background:#f4f4f4;border-color:#0003}.quiz-meta{align-items:center;gap:.75rem;display:flex}.quiz-category-chip{background:color-mix(in srgb, var(--cat-color) 12%, white);color:var(--cat-color);border-radius:100px;padding:.3rem .9rem;font-size:.85rem;font-weight:700}.quiz-count{color:#888;font-size:.9rem;font-weight:600}.quiz-score-display{color:#555;font-size:.9rem}.quiz-score-display strong{color:#487dff;font-size:1.1rem}.quiz-progress-wrap{background:#eee;height:5px;overflow:hidden}.quiz-progress-fill{background:var(--cat-color);border-radius:0 100px 100px 0;height:100%;transition:width .5s}.quiz-card-wrap{flex:1;justify-content:center;align-items:flex-start;padding:2.5rem 1.5rem;animation:.4s cardEnter;display:flex}@keyframes cardEnter{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.quiz-card-wrap.correct .quiz-question-card{animation:.5s correctPulse}@keyframes correctPulse{0%{box-shadow:0 4px 24px #00000014}30%{box-shadow:0 4px 36px #27ae6059}to{box-shadow:0 4px 24px #00000014}}.quiz-card-wrap.wrong .quiz-question-card{animation:.4s wrongShake}@keyframes wrongShake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.quiz-question-card{background:#fff;border:1.5px solid #0000000f;border-radius:24px;width:100%;max-width:720px;padding:2.5rem;box-shadow:0 4px 24px #00000014}.q-number{text-transform:uppercase;letter-spacing:.1em;color:#aaa;margin-bottom:.6rem;font-size:.8rem;font-weight:700}.q-text{color:#1a1a2e;margin-bottom:1.5rem;font-size:1.35rem;font-weight:700;line-height:1.5}.code-snippet{color:#cdd6f4;background:#1e1e2e;border:1px solid #ffffff0d;border-radius:12px;margin-bottom:1.5rem;padding:1rem 1.25rem;font-family:Fira Code,Cascadia Code,Courier New,monospace;font-size:.9rem;overflow-x:auto}.options-list{flex-direction:column;gap:.75rem;margin-bottom:1.5rem;display:flex}.option-btn{cursor:pointer;text-align:left;background:#f8f9ff;border:2px solid #00000014;border-radius:12px;align-items:center;gap:.75rem;width:100%;padding:.9rem 1.1rem;transition:all .2s;display:flex;position:relative}.option-btn:not(:disabled):hover{border-color:var(--cat-color);background:color-mix(in srgb, var(--cat-color) 6%, white);transform:translate(4px)}.option-btn:disabled{cursor:default}.option-btn.correct{background:#27ae601a;border-color:#27ae60;animation:.5s correctOption}@keyframes correctOption{0%{transform:scale(1)}30%{transform:scale(1.02)}to{transform:scale(1)}}.option-btn.wrong{background:#e74c3c1a;border-color:#e74c3c}.option-btn.dimmed{opacity:.45}.option-letter{color:#555;background:#00000012;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:.85rem;font-weight:800;transition:background .2s;display:inline-flex}.option-btn.correct .option-letter{color:#fff;background:#27ae60}.option-btn.wrong .option-letter{color:#fff;background:#e74c3c}.option-btn:not(:disabled):hover .option-letter{background:var(--cat-color);color:#fff}.option-text{color:#333;flex:1;font-size:1rem;font-weight:500}.option-icon{margin-left:auto;font-size:1.1rem;font-weight:800}.correct-icon{color:#27ae60}.wrong-icon{color:#e74c3c}.explanation{border-radius:14px;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;padding:1.1rem 1.2rem;animation:.4s explainFade;display:flex}@keyframes explainFade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.explanation.correct{background:#27ae601a;border:1.5px solid #27ae604d}.explanation.wrong{background:#e74c3c14;border:1.5px solid #e74c3c40}.exp-emoji{flex-shrink:0;font-size:1.5rem;line-height:1}.exp-label{color:#1a1a2e;margin-bottom:.25rem;font-size:1rem;font-weight:800}.exp-text{color:#444;font-size:.92rem;line-height:1.6}.next-btn{background:var(--cat-color);color:#fff;cursor:pointer;width:100%;box-shadow:0 4px 16px color-mix(in srgb, var(--cat-color) 40%, transparent);border:none;border-radius:12px;padding:.95rem;font-size:1rem;font-weight:700;transition:transform .2s,box-shadow .2s,filter .2s;animation:.3s nextBtnAppear;display:block}@keyframes nextBtnAppear{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.next-btn:hover{box-shadow:0 8px 24px color-mix(in srgb, var(--cat-color) 50%, transparent);filter:brightness(1.08);transform:translateY(-2px)}@media (width<=600px){.quiz-question-card{padding:1.5rem 1.25rem}.q-text{font-size:1.1rem}.quiz-header{padding:1rem}}.results-screen{opacity:0;justify-content:center;align-items:center;min-height:100vh;padding:2rem 1.5rem;transition:opacity .5s,transform .5s;display:flex;position:relative;transform:scale(.97)}.results-screen.visible{opacity:1;transform:scale(1)}.confetti-canvas{pointer-events:none;z-index:100;position:fixed;inset:0}.results-card{text-align:center;background:#fff;border:1.5px solid #00000012;border-radius:28px;width:100%;max-width:520px;padding:2.5rem 2.5rem 2rem;animation:.5s cubic-bezier(.175,.885,.32,1.275) cardPop;box-shadow:0 8px 40px #0000001a}@keyframes cardPop{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.results-cat-badge{background:color-mix(in srgb, var(--cat-color) 12%, white);color:var(--cat-color);border-radius:100px;margin-bottom:1.5rem;padding:.35rem 1rem;font-size:.9rem;font-weight:700;display:inline-block}.results-score-ring-wrap{width:150px;height:150px;margin:0 auto 1.5rem;position:relative}.score-ring{width:150px;height:150px;transform:rotate(-90deg)}.ring-track{fill:none;stroke:#eee;stroke-width:10px}.ring-fill{fill:none;stroke-width:10px;stroke-linecap:round;stroke-dasharray:calc(var(--pct) * 3.14159) 314.159;animation:1s forwards ringDraw}@keyframes ringDraw{0%{stroke-dasharray:0 314.159}to{stroke-dasharray:calc(var(--pct) * 3.14159) 314.159}}.score-ring-text{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.score-num{color:#1a1a2e;font-size:2.8rem;font-weight:900;line-height:1}.score-denom{color:#aaa;font-size:.9rem;font-weight:600}.results-msg{color:#1a1a2e;margin-bottom:.4rem;font-size:1.8rem;font-weight:900}.results-sub{color:#777;margin-bottom:1.5rem;font-size:1rem}.all-done-banner{text-align:left;background:#487dff14;border:1.5px solid #487dff33;border-radius:14px;align-items:center;gap:.75rem;margin-bottom:1.5rem;padding:1rem 1.25rem;animation:.5s bannerIn;display:flex}@keyframes bannerIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.all-done-banner>span{font-size:2rem}.adb-label{color:#487dff;margin-bottom:.15rem;font-weight:700}.adb-score{color:#555;font-size:.9rem}.adb-score strong{color:#1a1a2e;font-weight:800}.results-actions{gap:.75rem;display:flex}.res-btn{cursor:pointer;border:none;border-radius:12px;flex:1;padding:.9rem 1rem;font-size:1rem;font-weight:700;transition:all .2s}.res-btn.secondary{color:#555;background:#f4f4f4;border:1.5px solid #0000001a}.res-btn.secondary:hover{background:#e8e8e8;transform:translateY(-2px)}.res-btn.primary{background:var(--cat-color);color:#fff;box-shadow:0 4px 14px color-mix(in srgb, var(--cat-color) 40%, transparent)}.res-btn.primary:hover{box-shadow:0 8px 20px color-mix(in srgb, var(--cat-color) 50%, transparent);filter:brightness(1.08);transform:translateY(-2px)}.app{width:100%;min-height:100vh}