*,:before,:after{box-sizing:border-box;margin:0;padding:0}strong{color:#fff;font-weight:700}body{background:#080e1a;justify-content:center;align-items:center;min-height:100vh;padding:2.5rem 2rem;font-family:Inter,Roboto,PingFang SC,Microsoft YaHei,Noto Sans SC,sans-serif;display:flex;overflow:hidden scroll}.app{justify-content:center;align-items:flex-start;width:100%;min-height:100vh;padding-top:6vh;display:flex;position:relative}.background-gradient{pointer-events:none;z-index:0;background:radial-gradient(70% 55% at 15% 40%,#6366f133 0%,#0000 65%),radial-gradient(55% 45% at 85% 15%,#a855f72e 0%,#0000 65%),radial-gradient(45% 60% at 55% 88%,#38bdf81f 0%,#0000 65%);position:fixed;inset:0}.container{z-index:1;width:100%;max-width:68rem;padding:0 5rem;position:relative}.header{text-align:center;margin-bottom:2.25rem;transition:opacity .3s}.header .icon{justify-content:center;margin-bottom:.5rem;animation:3.2s ease-in-out infinite float;display:flex}.header .icon .coffee-icon{color:#818cf8;filter:drop-shadow(0 0 28px #6366f1f2);width:5.5rem;height:5.5rem}.header .logo-link{transition:transform .2s;display:block}.header .logo-link:hover{transform:scale(1.1)}@keyframes steam-rise{0%{opacity:0;transform:translateY(0)scaleX(1)}20%{opacity:.6}to{opacity:0;transform:translateY(-20px)scaleX(1.5)}}.steam-1{animation:3s infinite steam-rise}.steam-2{animation:4s .5s infinite steam-rise}.header h1{color:#fff;letter-spacing:.05em;text-shadow:0 2px 48px #6366f1bf;font-size:2.6rem;font-weight:900;line-height:1.4}.header h2{color:#a5b4fc;letter-spacing:.05em;text-shadow:0 2px 48px #6366f1bf;margin-top:.8rem;font-size:2.6rem;font-weight:900}.card{-webkit-backdrop-filter:blur(28px);background:#ffffff0a;border:1px solid #ffffff17;border-radius:2rem;width:100%;padding:2.8rem 4.5rem;position:relative;box-shadow:0 32px 64px #000000a6,inset 0 1px #ffffff17}.start-screen{animation:.5s ease-out slideIn}.welcome-text{color:#f1f5f9;text-align:center;margin-bottom:2rem;font-size:1.6rem;font-weight:500;line-height:1.85}.rules-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:1.5rem;margin-bottom:2.5rem;padding:1.75rem;box-shadow:inset 0 0 20px #0003}.rules-card h3{color:#a5b4fc;align-items:center;gap:.5rem;margin-bottom:1.25rem;font-size:1.3rem;display:flex}.rules-card ul{margin-bottom:0;padding-left:0;list-style:none}.rules-card ul li{color:#cbd5e1;align-items:flex-start;gap:.75rem;margin-bottom:1rem;font-size:1.2rem;line-height:1.6;display:flex}.rules-card ul li:last-child{margin-bottom:0}.rules-card ul li span{flex-shrink:0;font-size:1.4rem}.btn-start{background:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);padding:1.4rem;font-size:1.7rem}.btn{color:#fff;cursor:pointer;letter-spacing:.03em;background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#a855f7 100%);border:none;border-radius:1.1rem;width:100%;padding:1.35rem 1.6rem;font-family:inherit;font-size:1.55rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;position:relative;overflow:hidden;box-shadow:0 8px 32px #4f46e580,inset 0 0 0 1px #ffffff1a}.btn:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:left .6s;position:absolute;top:0;left:-100%}.btn:hover:before{left:100%}.btn:hover{transform:translateY(-4px);box-shadow:0 16px 48px #4f46e5a6,inset 0 0 0 1px #ffffff26}.btn:active{transform:translateY(-1px)}.btn-primary{flex:2}.btn-secondary{box-shadow:none;background:#ffffff14;border:1px solid #ffffff1a;flex:1}.btn-secondary:hover{background:#ffffff26;box-shadow:0 8px 24px #0003}.quiz-footer-actions{gap:1.25rem;margin-top:1.75rem;animation:.4s backwards fadeInUp;display:flex}.hidden{display:none!important}.flex-row{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}#q-counter{color:#94a3b8;font-size:1.3rem;font-weight:600}.tag{color:#c7d2fe;background:#6366f140;border:1px solid #6366f180;border-radius:9999px;padding:.4rem 1rem;font-size:1.1rem;font-weight:600}.progress-wrap{background:#ffffff1a;border-radius:9999px;width:100%;height:8px;margin-bottom:1.8rem;overflow:hidden}.progress-bar{background:linear-gradient(90deg,#6366f1,#a78bfa,#38bdf8);border-radius:9999px;width:0%;height:100%;transition:width .7s cubic-bezier(.4,0,.2,1);box-shadow:0 0 14px #6366f1e6}.q-text{color:#f8fafc;text-shadow:0 2px 8px #0009;letter-spacing:.01em;margin-bottom:2rem;font-size:1.65rem;font-weight:600;line-height:1.75}.q-text p{margin-bottom:0}.options{flex-direction:column;gap:1.15rem;display:flex}.opt-btn{text-align:left;color:#e2e8f0;cursor:pointer;background:#ffffff0f;border:2px solid #ffffff2e;border-radius:1rem;width:100%;padding:1.25rem 1.6rem;font-family:inherit;font-size:1.35rem;font-weight:500;line-height:1.65;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.opt-btn:before{content:"";background:linear-gradient(90deg,#0000,#6366f11a,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.opt-btn:hover:not(:disabled):before{left:100%}.opt-btn:hover:not(:disabled){color:#fff;background:#6366f12e;border-color:#6366f199;transform:translate(4px)scale(1.01);box-shadow:-4px 0 #6366f1b3,0 8px 28px #6366f140,inset 0 1px #ffffff1a}.opt-btn:disabled{cursor:default}.opt-btn .letter{color:#818cf8;flex-shrink:0;margin-right:1rem;font-size:1.5rem;font-weight:800}.opt-correct{font-weight:600;color:#fff!important;background:linear-gradient(135deg,#22c55e33,#22c55e1a)!important;border-color:#4ade80!important;transform:none!important;box-shadow:0 0 30px #22c55e4d,inset 0 1px #4ade8033!important}.opt-correct .letter{color:#86efac!important}.opt-wrong{font-weight:600;color:#fff!important;background:linear-gradient(135deg,#ef444433,#ef44441a)!important;border-color:#f87171!important;transform:none!important;box-shadow:0 0 30px #ef44444d,inset 0 1px #f8717133!important}.opt-wrong .letter{color:#fca5a5!important}.opt-reveal{font-weight:600;box-shadow:0 4px 16px #22c55e26;color:#fff!important;background:linear-gradient(135deg,#22c55e1f,#22c55e0f)!important;border-color:#4ade8099!important}.opt-reveal .letter{color:#86efac!important}.explanation{color:#fef3c7;word-break:break-word;overflow-wrap:break-word;background:linear-gradient(135deg,#fbbf241a,#fbbf240d);border:1px solid #fbbf244d;border-left:4px solid #fbbf2499;border-radius:1rem;margin-top:1.75rem;padding:1.6rem 2rem;font-size:1.2rem;font-weight:500;line-height:1.9;box-shadow:0 8px 32px #fbbf241f,inset 0 1px #fbbf241a}.explanation .katex-display{max-width:100%;margin:1rem 0;overflow:auto hidden}.explanation .katex{font-size:1.1em}.explanation p{margin-bottom:1rem;line-height:1.85}.explanation p:last-child{margin-bottom:0}.explanation strong,.explanation h1,.explanation h2,.explanation h3{color:#fff;font-weight:800}.explanation ul,.explanation ol{margin-bottom:1rem;margin-left:1.5rem}.explanation li{margin-bottom:.5rem;line-height:1.75}.explanation code{color:#fde68a;background:#0000004d;border-radius:.3rem;padding:.2rem .5rem;font-size:.95em}.explanation pre{background:#0006;border-radius:.8rem;margin:1rem 0;padding:1rem;overflow-x:auto}.result{text-align:center}.result-emoji{margin-bottom:.75rem;font-size:6.5rem;display:block}.result h2{color:#fff;margin-bottom:.5rem;font-size:2.6rem;font-weight:900}.score{background:linear-gradient(135deg,#818cf8,#c084fc,#38bdf8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:1rem 0;font-size:5rem;font-weight:900;display:block}.msg{color:#cbd5e1;margin-bottom:2.25rem;font-size:1.5rem}.detail{text-align:left;max-height:22rem;margin-bottom:2rem;padding-right:.3rem;overflow-y:auto}.detail::-webkit-scrollbar{width:6px}.detail::-webkit-scrollbar-track{background:#ffffff0a;border-radius:9999px}.detail::-webkit-scrollbar-thumb{background:#6366f173;border-radius:9999px}.detail .row{border-radius:.8rem;margin-bottom:.6rem;padding:.8rem 1.2rem;font-size:1.25rem;font-weight:500}.row-ok{color:#bbf7d0;background:#22c55e26;border:1px solid #22c55e59}.row-err{color:#fecaca;background:#ef444426;border:1px solid #ef444459}.row.clickable{transition:all .2s}.row.clickable:hover{background:#ef444440;transform:translate(4px);box-shadow:-4px 0 #ef4444}.footer{text-align:center;color:#475569;margin-top:1.75rem;font-size:1.05rem}#confetti-canvas{pointer-events:none;z-index:999;width:100%;height:100%;position:fixed;top:0;left:0}#btn-next{margin-top:1.6rem}.quiz-container{width:100%;position:relative}.nav-btn{color:#a5b4fc;cursor:pointer;z-index:1000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172ad9;border:2px solid #6366f180;border-radius:50%;justify-content:center;align-items:center;width:3.5rem;height:3.5rem;font-size:1.8rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:50%;transform:translateY(-50%);box-shadow:0 8px 32px #0006,0 0 20px #6366f133}.nav-btn:hover:not(:disabled):not(.disabled){color:#fff;background:#6366f140;border-color:#6366f199;transform:scale(1.1);box-shadow:0 0 24px #6366f166}.nav-btn:active:not(:disabled):not(.disabled){transform:scale(.95)}.nav-btn:disabled,.nav-btn.disabled{opacity:.15;cursor:not-allowed}.nav-prev{left:1.5rem}.nav-next{right:1.5rem}@media (width<=1200px){.nav-btn{width:3rem;height:3rem;font-size:1.5rem}.nav-prev{left:1rem}.nav-next{right:1rem}}@media (width<=1024px){.container{max-width:90%}.nav-btn{width:2.8rem;height:2.8rem;font-size:1.4rem}}@media (width<=768px){body{padding:1.5rem 1rem}.app{padding-top:2vh}.header{margin-bottom:1.5rem}.header .icon .coffee-icon{width:4rem;height:4rem}.header h1,.header h2{font-size:1.75rem}.card{border-radius:1.5rem;padding:1.75rem 1.25rem}.nav-btn{display:none}.q-text{margin-bottom:1.25rem;font-size:1.35rem;line-height:1.65}.opt-btn{padding:.95rem 1.2rem;font-size:1.15rem}.btn{padding:1rem 1.2rem;font-size:1.3rem}#screen-start p{font-size:1.25rem}#screen-start ul{font-size:1.15rem}.explanation{padding:1.2rem 1.3rem;font-size:1.1rem;line-height:1.75}.score{font-size:3.5rem}}@media (width<=480px){.quiz-footer-actions{flex-direction:column;gap:.75rem}.btn-primary,.btn-secondary{width:100%}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-10px)}35%{transform:translate(10px)}55%{transform:translate(-6px)}75%{transform:translate(6px)}90%{transform:translate(-3px)}}@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes slideIn{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes scoreReveal{0%{opacity:0;transform:scale(.35)rotate(-12deg)}to{opacity:1;transform:scale(1)rotate(0)}}.pop{animation:.32s pop}.shake-anim{animation:.48s shake}.slide-in{animation:.4s slideIn}.score-reveal{animation:.75s cubic-bezier(.34,1.56,.64,1) scoreReveal}