*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--blue:#0ea5e9;--blue-dark:#0369a1;--green:#22c55e;--red:#ef4444;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-400:#94a3b8;--gray-600:#475569;--gray-800:#1e293b;--orange:#f97316;--purple:#a855f7;font-family:Segoe UI,Helvetica Neue,Arial,sans-serif}body{min-height:100vh;color:var(--gray-800);background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%)}#root{max-width:680px;margin:0 auto;padding:24px 16px 64px}.home-header{text-align:center;padding:40px 0 32px}.docker-logo{margin-bottom:12px;font-size:64px;line-height:1}.home-header h1{color:#fff;letter-spacing:-.5px;font-size:2rem;font-weight:800}.home-subtitle{color:var(--gray-400);margin-top:8px;font-size:.95rem}.mode-cards{flex-direction:column;gap:16px;margin-bottom:32px;display:flex}.mode-card{cursor:pointer;text-align:left;border:none;border-radius:16px;align-items:center;gap:20px;padding:24px 28px;transition:transform .15s,box-shadow .15s;display:flex}.mode-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px #0000004d}.mode-card:active{transform:translateY(0)}.mode-basic{color:#fff;background:linear-gradient(135deg,#0ea5e9 0%,#0369a1 100%)}.mode-advanced{color:#fff;background:linear-gradient(135deg,#a855f7 0%,#7c3aed 100%)}.mode-network-basic{color:#fff;background:linear-gradient(135deg,#f97316 0%,#c2410c 100%)}.mode-network-advanced{color:#fff;background:linear-gradient(135deg,#22c55e 0%,#15803d 100%)}.mode-icon{text-align:center;background:#fff3;border-radius:12px;min-width:56px;padding:10px;font-size:1.6rem;font-weight:900}.mode-info{flex:1}.mode-info h2{font-size:1.25rem;font-weight:700}.mode-info p{opacity:.85;margin-top:2px;font-size:.875rem}.mode-count{opacity:.7;font-size:.8rem}.mode-arrow{opacity:.7;font-size:1.4rem}.mode-section{margin-bottom:24px}.mode-section-title{color:var(--gray-400);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;padding-left:4px;font-size:.75rem;font-weight:600}.home-topics{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:14px;padding:20px 24px}.home-topics h3{color:var(--gray-400);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;font-size:.8rem}.home-topics ul{flex-direction:column;gap:8px;list-style:none;display:flex}.home-topics li{color:#fffc;font-size:.9rem}.quiz-page{padding-top:8px}.quiz-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.back-btn{color:var(--gray-400);cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:8px;padding:6px 14px;font-size:.875rem;transition:background .1s}.back-btn:hover{background:#ffffff14}.progress-label{color:var(--gray-400);font-size:.875rem}.progress-bar{background:#ffffff1a;border-radius:9999px;height:4px;margin-bottom:24px;overflow:hidden}.progress-fill{background:var(--blue);border-radius:9999px;height:100%;transition:width .4s}.page-title{color:#fff;align-items:center;gap:10px;margin-bottom:20px;font-size:1.3rem;font-weight:700;display:flex}.badge{letter-spacing:.04em;border-radius:9999px;padding:3px 10px;font-size:.7rem;font-weight:600}.badge-basic{color:#38bdf8;background:#0ea5e940}.badge-advanced{color:#c084fc;background:#a855f740}.badge-network{color:#fb923c;background:#f9731640}.quiz-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;margin-bottom:20px;padding:28px 24px}.question-text{color:#ffffffeb;margin-bottom:24px;font-size:1.05rem;line-height:1.7}.choices.two-choice{gap:16px;display:flex}.choice-btn{color:#ffffffd9;cursor:pointer;background:#ffffff0a;border:2px solid #ffffff26;border-radius:12px;flex:1;padding:16px;font-size:1.5rem;font-weight:700;transition:background .12s,border-color .12s,transform .1s}.choice-btn:hover:not(:disabled){background:#ffffff1a;border-color:#ffffff59;transform:translateY(-1px)}.choice-btn.correct{color:#86efac;background:#22c55e33;border-color:#22c55e}.choice-btn.wrong{color:#fca5a5;background:#ef444433;border-color:#ef4444}.choice-btn.dimmed{opacity:.4;cursor:default}.choices.four-choice{flex-direction:column;gap:10px;display:flex}.choice-btn.choice-text{text-align:left;align-items:center;gap:12px;padding:14px 18px;font-size:.9rem;font-weight:500;display:flex}.choice-label{background:#ffffff1a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:.8rem;font-weight:700;display:inline-flex}.feedback{border-radius:12px;margin-top:20px;padding:16px 20px}.feedback-correct{background:#22c55e1f;border:1px solid #22c55e4d}.feedback-wrong{background:#ef44441f;border:1px solid #ef44444d}.feedback-icon{margin-bottom:8px;font-size:.95rem;font-weight:700;display:block}.feedback-correct .feedback-icon{color:#86efac}.feedback-wrong .feedback-icon{color:#fca5a5}.explanation{color:#ffffffbf;font-size:.875rem;line-height:1.7}.btn{cursor:pointer;border:none;border-radius:12px;padding:14px 28px;font-size:1rem;font-weight:600;transition:transform .1s,opacity .1s}.btn:hover{opacity:.9;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--blue);color:#fff}.btn-secondary{color:#fffc;background:#ffffff14;border:1px solid #ffffff26}.next-btn{width:100%;font-size:1rem}.result-screen{text-align:center;padding:60px 24px}.result-screen h2{color:#fff;margin-bottom:40px;font-size:1.6rem;font-weight:800}.score-circle{background:linear-gradient(135deg,#0ea5e9,#7c3aed);border-radius:50%;justify-content:center;align-items:center;gap:4px;width:140px;height:140px;margin-bottom:20px;display:inline-flex}.score-num{color:#fff;font-size:3rem;font-weight:900}.score-total{color:#ffffffb3;font-size:1.2rem}.score-pct{color:#fff;margin-bottom:12px;font-size:1.4rem;font-weight:700}.score-comment{color:var(--gray-400);margin-bottom:40px;font-size:.95rem;line-height:1.6}.result-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}@media (width<=480px){.quiz-card{padding:20px 16px}.mode-card{gap:14px;padding:18px 16px}.mode-icon{min-width:48px;font-size:1.2rem}}