*,: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:2rem 1.5rem;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 2rem;position:relative}.header{text-align:center;margin-bottom:2.25rem;transition:opacity .3s}.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}.sound-toggle-btn{color:#a5b4fc;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#ffffff14;border:2px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;width:3rem;height:3rem;font-size:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:1rem;right:1rem}.sound-toggle-btn:hover{color:#fff;background:#6366f140;border-color:#6366f180;transform:scale(1.1);box-shadow:0 0 20px #6366f14d}.sound-toggle-btn:active{transform:scale(.95)}.card{-webkit-backdrop-filter:blur(28px);background:#ffffff0a;border:1px solid #ffffff17;border-radius:2rem;width:100%;padding:2.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:1.75rem;font-size:1.5rem;font-weight:500;line-height:1.75}.rules-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:1.5rem;margin-bottom:2.25rem;padding:1.6rem;box-shadow:inset 0 0 20px #0003}.rules-card h3{color:#a5b4fc;align-items:center;gap:.5rem;margin-bottom:1.15rem;font-size:1.25rem;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:.7rem;margin-bottom:.9rem;font-size:1.15rem;line-height:1.55;display:flex}.rules-card ul li:last-child{margin-bottom:0}.rules-card ul li span{flex-shrink:0;font-size:1.3rem}.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;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;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:hover{transform:translateY(-2px);box-shadow:0 12px 32px #4f46e580,inset 0 0 0 1px #ffffff1a}.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 .4s 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;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#ffffff0f;border:2px solid #ffffff2e;border-radius:1rem;width:100%;min-height:48px;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:hover:not(:disabled){color:#fff;background:#6366f12e;border-color:#6366f199;box-shadow:0 6px 20px #6366f133,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:.85rem .6rem}.app{padding-top:1.5vh}.container{padding:0 .35rem}.header{margin-bottom:1rem}.header h1,.header h2{letter-spacing:.02em;font-size:1.35rem;line-height:1.35}.header h2{margin-top:.5rem}.card{border-radius:1.15rem;padding:1.25rem .9rem}.nav-btn{display:none}.q-text{margin-bottom:1rem;font-size:1.18rem;line-height:1.55}.opt-btn{border-radius:.85rem;padding:.85rem .95rem;font-size:1.05rem}.btn{border-radius:.95rem;padding:.9rem 1rem;font-size:1.15rem}#screen-start p{margin-bottom:1.5rem;font-size:1.08rem;line-height:1.65}#screen-start ul{font-size:1rem}.explanation{padding:1rem 1.05rem;font-size:1rem;line-height:1.65}.score{font-size:2.75rem}}@media (width<=600px){body{padding:.75rem .5rem}.container{padding:0 .25rem}.header h1,.header h2{font-size:1.28rem;line-height:1.32}.card{padding:1.18rem .82rem}.welcome-text{margin-bottom:1.35rem;font-size:1.05rem;line-height:1.62}.rules-card{margin-bottom:1.75rem;padding:1.15rem}}@media (width<=480px){body{padding:.65rem .4rem}.container{padding:0 .15rem}.card{border-radius:.95rem;padding:1.1rem .75rem}.header h1,.header h2{letter-spacing:.01em;font-size:1.2rem;line-height:1.3}.header h2{margin-top:.4rem}.q-text{margin-bottom:.9rem;font-size:1.08rem;line-height:1.5}.opt-btn{border-radius:.75rem;padding:.75rem .85rem;font-size:1rem}.opt-btn .letter{margin-right:.65rem;font-size:1.2rem}.btn{border-radius:.85rem;padding:.8rem .95rem;font-size:1.1rem}.btn-start{padding:1.1rem;font-size:1.3rem}.welcome-text{margin-bottom:1.25rem;font-size:1.02rem;line-height:1.6}.rules-card{border-radius:1rem;margin-bottom:1.5rem;padding:1.05rem}.rules-card h3{margin-bottom:1rem;font-size:1.08rem}.rules-card ul li{gap:.6rem;margin-bottom:.75rem;font-size:.96rem;line-height:1.5}.rules-card ul li span{font-size:1.2rem}.explanation{border-radius:.8rem;padding:.9rem .95rem;font-size:.96rem;line-height:1.6}.score{font-size:2.35rem}.result h2{font-size:1.75rem}.msg{margin-bottom:1.5rem;font-size:1.18rem}.detail{max-height:18rem;margin-bottom:1.5rem}.detail .row{border-radius:.7rem;margin-bottom:.5rem;padding:.65rem .9rem;font-size:1.02rem}.tag{padding:.3rem .75rem;font-size:.92rem}#q-counter{font-size:1.05rem}.progress-wrap{height:6px;margin-bottom:1.4rem}.quiz-footer-actions{flex-direction:column;gap:.65rem;margin-top:1.4rem}.btn-primary,.btn-secondary{width:100%}.sound-toggle-btn{width:2.3rem;height:2.3rem;font-size:1.15rem;top:.6rem;right:.6rem}.footer{margin-top:1.25rem;font-size:.9rem}}@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:.25s pop}.shake-anim{animation:.35s shake}.slide-in{animation:.4s slideIn}.score-reveal{animation:.5s cubic-bezier(.34,1.56,.64,1) scoreReveal}@supports (padding:env(safe-area-inset-bottom)){body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}.card{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))}@media (width<=768px){.card{padding-bottom:calc(1rem + env(safe-area-inset-bottom))}}}@media (hover:none) and (pointer:coarse){.btn:hover,.opt-btn:hover:not(:disabled),.nav-btn:hover:not(:disabled):not(.disabled),.sound-toggle-btn:hover{transform:none}.opt-btn,.btn{min-height:48px}}@media screen and (width<=768px){*{touch-action:manipulation}}