*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f8ff;color:#172033;line-height:1.55}.topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #dce5f3;padding:12px 5%;display:flex;justify-content:space-between;align-items:center;box-shadow:0 3px 16px #00000010}.nav-left{display:flex;gap:10px;align-items:center;font-weight:700;flex-wrap:wrap}.brand{font-size:20px;text-decoration:none;color:#165dcc}.home-link{font-weight:800;text-decoration:none;color:#165dcc}.hero{position:relative;overflow:hidden;display:flex;gap:24px;align-items:center;padding:32px 6%;background:linear-gradient(135deg,#e8f1ff,#fff5d9);border-bottom:1px solid #dae5f4}.hero h1{font-size:clamp(26px,4vw,46px);line-height:1.1;margin:10px 0}.hero p{font-size:18px}.hero-art{min-width:150px;height:130px;position:relative}.book{font-size:75px;position:absolute;left:20px;top:35px;animation:bob 2.4s infinite}.cap{font-size:52px;position:absolute;right:5px;top:0;animation:float 3s infinite}.spark{font-size:35px;position:absolute;right:0;bottom:5px;animation:spin 4s linear infinite}.badge,.hero-chips span{display:inline-block;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;background:#fff;border:1px solid #dbe6f5}.hero-chips{display:flex;gap:8px;flex-wrap:wrap}.container{max-width:1200px;margin:auto;padding:20px}.control-card,.guide,.result,.empty{background:#fff;border-radius:20px;padding:22px;margin-bottom:20px;box-shadow:0 8px 30px #17345b12;border:1px solid #dfe8f5}.topic-title{font-size:22px;font-weight:900;margin-bottom:12px}.notice{background:#eef6ff;border-left:5px solid #2b78e4;padding:12px;border-radius:10px}.controls{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}.controls label{font-weight:800;display:flex;flex-direction:column;gap:5px}.controls select,.answer-input{padding:11px 12px;border:1px solid #c9d7eb;border-radius:10px;font-size:16px;background:#fff}.controls button{align-self:end}.primary,.secondary,.check,.show{border:0;border-radius:11px;padding:12px 16px;font-weight:800;cursor:pointer;transition:.2s;box-shadow:0 4px 12px #00000012}.primary{background:#1769d2;color:white}.secondary{background:#fff0bd;color:#4c3a00}.check{background:#18263d;color:white}.show{background:#eaf7ed;color:#176b2c}.primary:hover,.secondary:hover,.check:hover,.show:hover{transform:translateY(-2px)}.status-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.progress{height:14px;background:#e5edf8;border-radius:999px;overflow:hidden;margin-top:10px}.progress div{height:100%;width:0;background:linear-gradient(90deg,#1769d2,#50b8ff);transition:.35s}.empty{text-align:center;padding:45px}.mascot,.trophy{font-size:70px;animation:bob 2s infinite}.hidden{display:none!important}.result{text-align:center;background:linear-gradient(135deg,#fff,#effaf1)}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.result-grid div{background:#fff;border:1px solid #dfe8f5;border-radius:14px;padding:15px}.result-grid b{font-size:28px;display:block}.result-grid small{color:#64748b}.question{position:relative;background:#fff;border:1px solid #dbe5f2;border-radius:18px;padding:20px;margin-bottom:16px;box-shadow:0 6px 20px #17345b0b;animation:slideIn .35s both}.qtop{display:flex;justify-content:space-between;gap:10px;align-items:center}.qnum{font-weight:900;color:#165dcc}.qtopic{font-size:12px;font-weight:800;background:#f0f5ff;padding:5px 9px;border-radius:999px}.qtext{font-size:18px;font-weight:700;margin:14px 0}.options{display:grid;gap:9px}.option{padding:12px;border:1px solid #cdd9ea;border-radius:10px;cursor:pointer;background:#fbfdff}.option input{margin-right:8px}.answer-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px}.answer-input{flex:1;min-width:190px}.feedback{font-weight:900;margin-top:10px;min-height:24px}.correct{border-color:#2eaf55!important;background:#edfff1!important;color:#176b2c!important}.wrong{border-color:#e04444!important;background:#fff0f0!important;color:#a51e1e!important}.answer-box{margin-top:10px;padding:12px;border-radius:10px;background:#f7fafc;border-left:4px solid #1769d2;display:none}.tab{width:100%;border-collapse:collapse;margin:12px 0;overflow:hidden}.tab th,.tab td{border:1px solid #cfdbea;padding:9px;text-align:center}.tab th{background:#edf4ff}.subparts{display:grid;gap:12px}.subpart{padding:12px;border:1px dashed #b7c7dc;border-radius:12px}.guide h2{font-size:30px;background:linear-gradient(90deg,#165dcc,#7c3aed);color:white;padding:12px 16px;border-radius:12px}.guide h3{color:#165dcc;margin-top:28px;border-left:5px solid #ffc928;padding-left:10px}.guide p{font-size:16px}.share-row{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}.tiny{font-size:12px;color:#64748b}.floating-shape{position:fixed;z-index:0;pointer-events:none;opacity:.12;font-size:48px}.s1{right:3%;top:25%;animation:float 5s infinite}.s2{left:2%;top:60%;animation:float 6s infinite}.s3{right:6%;bottom:8%;animation:spin 8s linear infinite}footer{text-align:center;padding:25px;background:#14243a;color:#dbeafe}footer a{color:#fff}.flash{animation:pop .45s}.shake{animation:shake .4s}.celebrate{animation:celebrate .7s}@keyframes bob{50%{transform:translateY(-9px) rotate(2deg)}}@keyframes float{50%{transform:translateY(-14px) rotate(4deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes pop{50%{transform:scale(1.04)}}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}@keyframes celebrate{25%{transform:rotate(-2deg) scale(1.03)}75%{transform:rotate(2deg) scale(1.03)}}@media(max-width:700px){.topbar{padding:10px 14px}.hero{padding:24px 18px;display:block;text-align:center}.hero-art{margin:auto;height:105px}.hero-chips{justify-content:center}.container{padding:12px}.control-card,.guide,.result,.empty{padding:15px;border-radius:15px}.controls>*{width:100%}.controls button{width:100%}.controls select{width:100%}.result-grid{grid-template-columns:repeat(2,1fr)}.qtext{font-size:16px}.question{padding:15px}.answer-input{width:100%;min-width:100%}.answer-row button{width:100%}.tab{font-size:13px;display:block;overflow-x:auto}.nav-left{font-size:13px}.brand{font-size:17px}.home-link{font-size:13px}}@media print{.topbar,.controls,.status-row,.progress,.hero-art,.floating-shape,.share-row,.guide,footer,#empty,#result{display:none!important}.hero{padding:10px;background:white}.question{break-inside:avoid;box-shadow:none}.worksheet{display:block!important}}