:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#ffffffde;background-color:#f2f3f4;background-image:radial-gradient(rgb(202,222,237) 10%,transparent 10%);background-position:8px 8px;background-size:16px 16px;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:700;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--primary: #2151a1;--primary-dark: #174080;--primary-light: #e0e7ff;--accent: #38a169;--accent-dark: #276749;--success-bg: #e2ffeb;--success-border: #38a169;--success-text: #21512a;--error: #e53e3e;--error-bg: #fed7d7;--error-border: #e53e3e;--error-text: #a12b21;--warning-bg: #ffeaea;--info-bg: #e3f0fa;--info-border: #1976d2;--info-text: #174080;--tip-bg: #e3f0fa;--tip-border: #1976d2;--tip-text: #21512a;--background: var(--background);--card-bg: #fff;--card-shadow: 0 2px 16px rgba(33, 81, 161, .13);--card-shadow-light: 0 2px 8px rgba(33, 81, 161, .1);--card-shadow-hover: 0 4px 16px rgba(33, 81, 161, .14);--text-main: #222;--text-dark: #1a202c;--text-muted: #444;--text-secondary: #1e293b;--border: #b6c2d6;--border-light: #e5e7eb;--disabled-bg: #f6f7fa;--disabled-text: #b0b7c3;--progress-bg: #e0e7ff;--progress-gradient: linear-gradient(90deg, #2151a1 40%, #38a169 100%);--button-gradient: linear-gradient(90deg, #2151a1 60%, #38a169 100%);--button-gradient-hover: linear-gradient(90deg, #174080 60%, #276749 100%)}html,body{min-height:100vh;height:100%;margin:0;padding:0;font-family:Segoe UI,Arial,sans-serif;color:var(--text-main);background:var(--background);box-sizing:border-box}body{width:100vw;overflow-x:auto}#root{min-height:0;display:flex;align-items:flex-start;justify-content:center;padding:0;width:100vw}footer{width:100vw;background:var(--primary);color:var(--card-bg);text-align:center;padding:.7rem .5rem;font-size:.98rem;letter-spacing:.01em;margin-top:.5rem}.landing-container,.quiz-container{max-width:940px;width:100%;margin:2.2rem auto;background:var(--card-bg);border-radius:18px;box-shadow:var(--card-shadow);padding:2.2rem 1.2rem 1.7rem;box-sizing:border-box;overflow-wrap:anywhere;position:relative}@media (max-width: 600px){.landing-container,.quiz-container{margin:.7rem auto;padding:1.1rem .3rem;border-radius:10px}footer{font-size:.92rem;padding:.5rem .2rem}}#root{width:100vw;display:flex;align-items:flex-start;justify-content:center;padding:0}.landing-container,.quiz-container{background:var(--card-bg);border-radius:18px;box-shadow:var(--card-shadow);padding:2.5rem 2.2rem 2.2rem;text-align:center;max-width:940px;width:100%;margin:2.2rem auto;max-height:100vh;overflow-y:auto;overflow-x:hidden}.landing-container h1{font-size:2.1rem;color:var(--primary);margin-bottom:.75rem}.quiz-container h2{font-size:2rem;margin-bottom:1.1rem}.landing-container .subtitle{color:var(--text-muted);font-size:1.15rem;margin-top:.5rem;margin-bottom:1.25rem}.landing-features{list-style:none;padding:0;margin:1.25rem 0 1.5rem;text-align:left;max-width:450px;margin-left:auto;margin-right:auto}.landing-features li{background:var(--primary-light);border-left:4px solid var(--primary);padding:.75rem 1rem;margin-bottom:.75rem;border-radius:6px;font-size:1rem;color:var(--text-secondary)}.learn-section{background:var(--card-bg);border-radius:14px;box-shadow:var(--card-shadow);padding:.1rem 1.5rem 1.5rem;margin:2.2rem auto 2.5rem;max-width:900px}.learn-title{font-size:1.5rem;font-weight:700;margin-bottom:1.3rem;color:var(--text-dark);text-align:left}.learn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.2rem 2.5rem}.learn-item{display:flex;align-items:flex-start;gap:1rem;background:none;padding:.2rem 0}.learn-heading{font-size:1.1rem;font-weight:600;margin-bottom:.2rem;color:var(--text-dark);text-align:left}.learn-desc{font-size:1rem;color:var(--text-muted);line-height:1.5;text-align:left}.landing-footer{color:var(--text-muted);font-size:.8rem;padding:0;margin:0}.start-quiz-btn{outline:none;display:inline-flex;margin-left:auto;margin-right:auto;background:linear-gradient(270deg,var(--primary) 0%,var(--accent) 50%,var(--primary) 100%);background-size:400% 400%;color:var(--card-bg);border:none;font-size:1.1rem;border-radius:8px;padding:.9rem 2.2rem;margin-top:1.5rem;cursor:pointer;font-weight:600;letter-spacing:.01em;box-shadow:var(--card-shadow-light);transition:background .2s,box-shadow .2s;animation:quiz-gradient-move 6.5s ease-in-out infinite}@keyframes quiz-gradient-move{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.start-quiz-btn:hover,.start-quiz-btn:focus,.start-quiz-btn:focus-visible{outline:3px solid var(--primary);outline-offset:2px;background:linear-gradient(270deg,var(--accent) 0%,var(--primary) 50%,var(--accent) 100%);background-size:400% 400%;animation:quiz-gradient-move 2.5s linear infinite;box-shadow:var(--card-shadow-hover)}.main-app header{margin-bottom:2rem}.main-app h1{font-size:2.2rem;color:var(--primary)}.subtitle{color:var(--text-muted);font-size:1.15rem;margin-top:.5rem}.category{color:var(--accent-dark);font-size:1.1rem;margin-bottom:.5rem;font-weight:700;letter-spacing:.01em}.question{font-size:1.22rem;margin:1rem 0 1.5rem;font-weight:700;color:var(--text-dark);letter-spacing:.01em}.options{list-style:none;padding:0;margin:0 0 1.5rem}.options li{margin-bottom:.75rem}.options button{width:100%;padding:.75rem 1rem;font-size:1rem;border:2px solid var(--border);border-radius:8px;background:var(--card-bg);color:var(--text-dark);cursor:pointer;transition:background .2s,border .2s,color .2s;text-align:left;font-weight:500;box-shadow:0 1px 4px #2151a108}.options button:hover:not(:disabled),.options button:focus:not(:disabled){background:var(--progress-bg);border-color:var(--primary)}.options button.correct{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}.options button.incorrect{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.options button:disabled{opacity:.6;cursor:not-allowed;background:var(--disabled-bg);color:var(--disabled-text);border-color:var(--border-light)}.explanation{padding:1rem;margin-bottom:1.2rem;border-radius:8px;text-align:left}.explanation-correct{background:var(--success-bg);border-left:5px solid var(--success-border);color:var(--success-text)}.explanation-incorrect{background:var(--warning-bg);border-left:5px solid var(--error-border);color:var(--error-text)}.explanation button{background:var(--card-bg)}.scenario-box{background:var(--info-bg);border-left:5px solid var(--info-border);color:var(--info-text);padding:.85rem 1rem;border-radius:8px;margin-bottom:1.1rem;font-size:1.05rem;display:flex;align-items:flex-start;gap:.5em}.scenario-label{font-weight:700;color:var(--info-text);margin-right:.3em;white-space:nowrap;flex-shrink:0}@media (max-width: 600px){.scenario-box,.scenario-box span{display:block}}.security-tip-label{font-weight:700;color:var(--info-text);margin-right:.3em;white-space:nowrap;flex-shrink:0}.security-tip-box{background:var(--info-bg);border-left:5px solid var(--info-border);color:var(--success-text);padding:.75rem 1rem;border-radius:8px;margin:.7rem 0;font-size:1.02rem;display:flex;align-items:flex-start;gap:.5em;text-align:left}@media (max-width: 600px){.security-tip-box,.security-tip-box span{display:block}}.explanation strong{display:block;margin-bottom:.5rem}.progress-bar-wrapper{margin:0 0 1.5rem;background:var(--progress-bg);border-radius:8px;height:24px;position:relative;overflow:hidden}.progress-bar{background:var(--progress-gradient);height:100%;transition:width .4s ease}.progress-label{position:absolute;left:50%;top:0;transform:translate(-50%);font-size:.95rem;color:var(--text-secondary);font-weight:600;line-height:24px}.category-progress-grid{margin-top:1.5rem;text-align:center}.category-progress-grid h4,.category-progress-grid h3{margin-bottom:1rem;color:var(--primary);font-size:1.2rem;text-align:center}.donut-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:1.2rem 1.2rem;justify-items:center;align-items:center;margin-top:.5rem}@media (max-width: 600px){.donut-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:1rem .8rem}}button{outline:none}.CircularProgressbar{width:100%;vertical-align:middle}.CircularProgressbar .CircularProgressbar-path{stroke:#3e98c7;stroke-linecap:round;-webkit-transition:stroke-dashoffset .5s ease 0s;transition:stroke-dashoffset .5s ease 0s}.CircularProgressbar .CircularProgressbar-trail{stroke:#d6d6d6;stroke-linecap:round}.CircularProgressbar .CircularProgressbar-text{fill:#3e98c7;font-size:20px;dominant-baseline:middle;text-anchor:middle}.CircularProgressbar .CircularProgressbar-background{fill:#d6d6d6}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background{fill:#3e98c7}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text{fill:#fff}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path{stroke:#fff}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail{stroke:transparent}