*,: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:82rem;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.5rem 4.5rem;position:relative;box-shadow:0 32px 64px #000000a6,inset 0 1px #ffffff17}#screen-start p{color:#f1f5f9;margin-bottom:1.5rem;font-size:1.6rem;font-weight:500;line-height:1.85}#screen-start strong{color:#fff;font-weight:700}#screen-start ul{color:#cbd5e1;margin-bottom:2.25rem;padding-left:1.5rem;font-size:1.4rem}#screen-start ul li{margin-bottom:.8rem}.btn{color:#fff;cursor:pointer;letter-spacing:.05em;background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);border:none;border-radius:1.1rem;width:100%;padding:1.3rem 1.5rem;font-family:inherit;font-size:1.6rem;font-weight:700;transition:transform .18s,box-shadow .18s;display:block;box-shadow:0 6px 28px #4f46e58c}.btn:hover{transform:translateY(-3px);box-shadow:0 12px 36px #4f46e5bf}.btn:active{transform:translateY(0)}.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:#fff;text-shadow:0 2px 6px #000c;margin-bottom:1.8rem;font-size:1.8rem;font-weight:700;line-height:1.65}.options{flex-direction:column;gap:1rem;display:flex}.opt-btn{text-align:left;color:#fff;cursor:pointer;background:#ffffff1a;border:3px solid #ffffff40;border-radius:1.1rem;width:100%;padding:1.1rem 1.4rem;font-family:inherit;font-size:1.45rem;font-weight:500;line-height:1.55;transition:all .22s}.opt-btn:hover:not(:disabled){color:#fff;background:#6366f140;border-color:#6366f1cc;transform:translate(7px);box-shadow:-6px 0 #6366f1,0 6px 24px #6366f166}.opt-btn:disabled{cursor:default}.opt-btn .letter{color:#a5b4fc;margin-right:.85rem;font-size:1.6rem;font-weight:900}.opt-correct{font-weight:700;color:#fff!important;background:#22c55e40!important;border-color:#4ade80!important;transform:none!important;box-shadow:0 0 28px #22c55e66!important}.opt-correct .letter{color:#86efac!important}.opt-wrong{font-weight:700;color:#fff!important;background:#ef444440!important;border-color:#f87171!important;transform:none!important;box-shadow:0 0 28px #ef444466!important}.opt-wrong .letter{color:#fca5a5!important}.opt-reveal{font-weight:700;color:#fff!important;background:#22c55e26!important;border-color:#4ade80cc!important}.opt-reveal .letter{color:#86efac!important}.explanation{color:#fffbeb;word-break:break-word;overflow-wrap:break-word;background:#fbbf2426;border:2px solid #fbbf2466;border-radius:1.1rem;margin-top:1.5rem;padding:1.25rem 1.6rem;font-size:1.3rem;font-weight:500;line-height:1.8;animation:.38s fadeInUp}.explanation .katex-display{max-width:100%;overflow:auto hidden}.explanation p{margin-bottom:.75rem;line-height:1.85}.explanation p:last-child{margin-bottom:0}.explanation strong,.explanation h1,.explanation h2,.explanation h3{color:#fff;font-weight:800}.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}.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}.nav-btn{color:#a5b4fc;cursor:pointer;z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff14;border:2px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;width:4rem;height:4rem;font-size:2rem;font-weight:700;transition:all .25s;display:flex;position:absolute;top:14rem}.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.8rem}.nav-next{right:1.8rem}@media (width<=950px){.card{padding:2rem 1.5rem}.nav-btn{display:none}.header h1,.header h2{font-size:2rem}.q-text{font-size:1.6rem}.opt-btn{padding:1rem 1.2rem;font-size:1.3rem}}@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}