@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700;800&display=swap');
:root{--ink:#172b3a;--muted:#71818b;--cream:#fffaf1;--orange:#f2764b;--blue:#75b8d8;--green:#82b79c;--line:#e8e1d6;--white:#fff}*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans','Noto Sans SC',sans-serif}a{color:inherit;text-decoration:none}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;max-width:1000px;margin:auto;padding:0 28px}.brand{display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--orange);color:#fff;font-size:21px;font-weight:800;transform:rotate(-5deg)}.brand strong,.brand small{display:block}.brand strong{font-size:15px}.brand small{font-size:10px;color:var(--muted);letter-spacing:1.1px;margin-top:2px}.level-switch{border:1px solid var(--line);background:transparent;border-radius:22px;padding:10px 15px;color:var(--ink);font-weight:700;font-size:13px;cursor:pointer}.level-switch span{margin-left:12px;color:var(--orange)}main{max-width:1000px;margin:auto;padding:0 28px}.banner{padding:56px 0 30px}.eyebrow{text-transform:uppercase;color:var(--orange);font-size:10px;font-weight:700;letter-spacing:2px;margin:0 0 14px}.banner h1{font-size:40px;line-height:1.2;letter-spacing:-1px;margin:0 0 12px}.intro{color:var(--muted);font-size:14px;margin:0}.section-tabs{display:flex;gap:9px;margin-top:22px}.section-tab{border:1px solid var(--line);background:#fff;border-radius:22px;padding:9px 17px;color:var(--muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer}.section-tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}.practice-layout{display:grid;grid-template-columns:1fr 260px;gap:22px;align-items:start}.quiz-card{background:#fff;border-radius:14px;box-shadow:0 12px 35px #44505c0d;overflow:hidden}.quiz-top{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #f0ede8;font-size:11px;color:var(--muted)}.quiz-top span:first-child{color:var(--orange);font-weight:700;font-size:12px}.live-stats{display:flex;gap:22px;padding:12px 24px;border-bottom:1px solid #f0ede8;font-size:12px;color:var(--muted)}.live-stats strong{font-size:15px;color:var(--ink);margin-left:4px}.stat-correct strong{color:#43875e}.stat-wrong strong{color:#d0604c}.stat-rate strong{color:var(--orange)}.quiz-body{padding:26px 24px}.passage{background:#faf7f1;border:1px solid #efe9df;border-left:3px solid var(--blue);border-radius:9px;padding:17px 18px;font-size:15px;line-height:2;color:#35444f;margin-bottom:18px;white-space:pre-line}.question-text{font-family:'Noto Sans SC',sans-serif;font-size:16px;font-weight:700;line-height:1.7;margin:0 0 16px;white-space:pre-line}.options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.options.order-options{grid-template-columns:1fr}.options.single-col{grid-template-columns:1fr}.option{border:1px solid var(--line);border-radius:8px;background:#fff;text-align:left;padding:13px 15px;cursor:pointer;font:inherit;font-size:14px;color:var(--ink);line-height:1.5}.option:hover{border-color:var(--orange);background:#fffaf5}.option.correct{border-color:#6fb28a;background:#edfaef;color:#3a8056}.option.wrong{border-color:#e58a76;background:#fff1ed}.feedback{font-size:13px;min-height:20px;margin-top:14px}.feedback.good{color:#43875e}.feedback.bad{color:#d0604c}.sentence-builder{margin-top:4px}.sb-label{font-size:11px;color:var(--muted);margin:0 0 9px}.answer-slots{min-height:58px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border:2px dashed var(--line);border-radius:10px;padding:12px;background:#faf7f1;margin-bottom:20px}.slot-chip{border:1px solid var(--blue);background:#eef7fa;color:#35677b;border-radius:8px;padding:9px 13px;cursor:pointer;font:inherit;font-size:14px;font-weight:600}.slot-chip.done{border-color:#6fb28a;background:#edfaef;color:#3a8056;cursor:default}.slot-empty{color:#b3ada2;font-size:13px}.word-bank{display:flex;flex-wrap:wrap;gap:9px}.word-chip{border:1px solid var(--line);background:#fff;border-radius:8px;padding:10px 14px;cursor:pointer;font:inherit;font-size:14px;color:var(--ink)}.word-chip:hover{border-color:var(--orange);background:#fffaf5}.quiz-bottom{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-top:1px solid #f0ede8}.progress-track{flex:1;height:6px;border-radius:6px;background:#edf0ea;margin-right:18px}.progress-track i{display:block;height:100%;width:0;background:var(--orange);border-radius:6px;transition:width .3s}.button{border:0;cursor:pointer;font:inherit;font-weight:700;border-radius:8px;padding:12px 16px;display:inline-flex;gap:14px;align-items:center}.button span{font-size:16px}.dark{background:var(--ink);color:#fff;font-size:13px}.primary{background:var(--ink);color:#fff;box-shadow:0 7px 18px #172b3a20}.side-note{background:#f7e7d8;border-radius:14px;padding:28px 26px;position:sticky;top:20px}.note-star{color:var(--orange);font-size:28px}.side-note h3{margin:20px 0 12px;font-size:17px}.side-note p{font-size:13px;line-height:1.9;color:#806f64}.note-line{height:1px;background:#d9bd9f;margin-top:30px}.note-caption{display:block;color:#c38a67;font-size:10px;letter-spacing:2px;margin-top:12px}.modal-overlay{position:fixed;inset:0;background:#172b3a66;display:grid;place-items:center;padding:20px;z-index:50;backdrop-filter:blur(3px)}.result-card{background:#fff;border-radius:16px;padding:34px 30px;box-shadow:0 24px 60px #172b3a40;text-align:center;width:min(100%,560px);max-height:88vh;overflow:auto;position:relative}.modal-close{position:absolute;top:14px;right:16px;border:0;background:transparent;font-size:26px;color:var(--muted);cursor:pointer;line-height:1}.modal-close:hover{color:var(--orange)}.result-card h2{font-size:26px;margin:0 0 18px}.result-stats{display:flex;justify-content:center;gap:14px;margin-bottom:20px}.rs{flex:1;max-width:130px;background:#faf7f1;border-radius:12px;padding:14px 10px}.rs strong{display:block;font-size:26px}.rs span{font-size:12px;color:var(--muted)}.rs.correct strong{color:#43875e}.rs.wrong strong{color:#d0604c}.rs.rate strong{color:var(--orange)}.result-sub{font-size:13px;color:var(--muted);text-align:left;margin:22px 0 12px;font-weight:700}.result-list{text-align:left}.wrong-item{border:1px solid var(--line);border-radius:9px;padding:13px 16px;margin-bottom:9px}.wrong-no{display:inline-block;font-size:11px;color:#fff;background:var(--orange);border-radius:20px;padding:4px 10px;margin-bottom:8px}.wrong-item p{font-size:13px;line-height:1.6;margin:0 0 4px}.wrong-answer{color:#3a8056;font-weight:700}.section{margin:70px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.section-heading h2{font-size:24px;margin:0;letter-spacing:-1px}.muted{font-size:12px;color:var(--muted);margin:0}.material-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.material-card{background:#fff;border-radius:12px;padding:19px 22px;display:flex;align-items:center;gap:15px;transition:transform .2s}.material-card:hover{transform:translateY(-3px)}.pdf-badge{font-size:10px;background:#fff0e8;color:var(--orange);font-weight:800;border-radius:7px;padding:12px 8px}.pdf-badge.purple{background:#f0ecfb;color:#8a72c4}.material-card h3{margin:0 0 5px;font-size:14px}.material-card p{margin:0;color:var(--muted);font-size:11px}.arrow{margin-left:auto;color:var(--orange);font-size:20px}footer{border-top:1px solid var(--line);max-width:1000px;margin:auto;padding:25px 28px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}footer span:first-child{color:var(--ink);font-weight:700}@media(max-width:760px){.topbar{height:66px;padding:0 18px}main{padding:0 18px}.banner{padding:38px 0 24px}.banner h1{font-size:30px}.practice-layout{grid-template-columns:1fr}.side-note{display:none}.quiz-body{padding:20px 16px}.options{grid-template-columns:1fr}.options.order-options{grid-template-columns:1fr}.quiz-bottom{gap:12px}.passage{font-size:14px}.result-card{padding:28px 18px}.material-grid{grid-template-columns:1fr}footer{padding:22px 18px;gap:15px;flex-direction:column}}