:root{--ink:#153e56;--blue:#007caa;--yellow:#ffcb39;--sea:#dcf8fb}*{box-sizing:border-box}body{margin:0;font-family:ui-rounded,'Trebuchet MS',Arial,sans-serif;background:#eefbff;color:var(--ink);font-size:18px;line-height:1.6}button,select,textarea{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer;border:0;border-radius:14px;padding:12px 19px;font-weight:700;color:var(--ink);background:#eaf6fa;min-height:48px}button:hover{filter:brightness(.96);transform:translateY(-1px)}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b54800;outline-offset:4px}button:disabled{cursor:default;transform:none;opacity:.9}header{max-width:1200px;margin:auto;padding:22px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{font-size:24px;text-decoration:none;font-weight:900;color:var(--ink)}.brand small{display:block;font-size:12px;letter-spacing:2px;margin-left:34px}.teacher{border:2px solid #bce4ef;background:white;border-radius:100px;padding:9px 22px;font-size:20px;font-weight:900;white-space:nowrap}main{max-width:1144px;margin:auto;padding:0 24px}.intro{display:grid;grid-template-columns:1fr 1.05fr;gap:25px;align-items:center;padding:18px 0 30px}.intro img{width:100%;height:310px;object-fit:cover;border-radius:30px;border:6px solid white;box-shadow:0 10px 0 #c4ebf5}h1{font-size:clamp(44px,6vw,76px);line-height:1.06;margin:15px 0}h1 em{font-style:normal;color:var(--blue);display:block}h2{font-size:30px;line-height:1.25;margin:8px 0 12px}h3{font-size:24px;margin:12px 0}.eyebrow{font-size:13px;font-weight:900;letter-spacing:1.7px;color:#25647e}.chips{display:flex;gap:8px;flex-wrap:wrap}.chips span{background:white;border-radius:30px;padding:6px 13px;font-size:14px;font-weight:bold}nav{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}nav button{flex:1;background:white;border:2px solid #cbe8f0;white-space:nowrap}nav button.active{background:var(--yellow);border-color:#edb61c;box-shadow:0 4px 0 #dda718}.panel{background:white;border-radius:28px;padding:30px;box-shadow:0 8px 0 #d3edf4;min-height:350px}.section-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.stamp{background:var(--sea);padding:8px 16px;border-radius:24px;font-weight:bold;white-space:nowrap}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.vocab{padding:22px 14px;background:#ecfaff;border:2px solid #cfeff7;display:flex;align-items:center;flex-direction:column;gap:7px}.vocab:nth-child(2n){background:#fff6d6;border-color:#ffe6a2}.vocab .emoji{font-size:45px;line-height:1.2}.vocab small{font-size:14px;font-weight:normal}.tip{background:#fff6d6;border-radius:15px;padding:16px 20px;margin-top:25px}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.note{border-radius:20px;padding:22px}.positive{background:#e8f9e9}.negative{background:#fff1e8}.example{font-size:23px;font-weight:bold;line-height:1.6}.audio{background:#e1f4fb}.but-note{background:#eff8ff;border-radius:20px;padding:24px;margin-top:20px}mark,.but-word{background:var(--yellow);color:var(--ink);border-radius:7px;padding:2px 9px}p{margin:10px 0 20px}.builder{display:flex;gap:18px;align-items:center;background:#effaff;padding:20px;border-radius:18px;flex-wrap:wrap}.builder label{flex:1;min-width:200px;font-weight:bold}select{display:block;width:100%;padding:12px;border:2px solid #bedee9;border-radius:12px;background:white;color:var(--ink);margin-top:8px}.writing-label{display:block;font-weight:bold;margin:18px 0}textarea{display:block;width:100%;padding:15px;border:2px solid #c0dfe9;border-radius:14px;color:var(--ink);margin-top:8px}.primary{background:var(--blue);color:white}.secondary{border:2px solid #abd2e0;background:white;margin-top:20px}.progress{background:#e3f3f8;height:10px;border-radius:20px;margin:22px 0;overflow:hidden}#progress-fill{height:100%;background:#00a0b5;transition:width .3s}.question-number{font-weight:bold;color:var(--blue)}.options{display:grid;gap:10px;margin:20px 0}.option{text-align:left;border:2px solid #c8e5ee;background:#f5fcff}.option.correct{background:#def4dc;border-color:#348d42}.option.wrong{background:#ffebe3;border-color:#c66642}.feedback{padding:16px;border-radius:12px;background:#eaf7ed;margin:16px 0}.listen-card{padding:20px;background:#f0faff;border-radius:18px;margin:18px 0}.listen-card details{margin-top:14px}.listen-card summary{cursor:pointer;font-size:16px}.listen-card .options{grid-template-columns:repeat(3,1fr)}.speech-status{font-size:15px;text-align:center;margin-top:20px}footer{text-align:center;padding:30px;color:#456f83;font-size:15px}footer small{font-size:13px}[hidden]{display:none!important}@media(max-width:750px){header{padding:16px}.brand{font-size:18px}.teacher{font-size:17px;padding:7px 13px}main{padding:0 14px}.intro{grid-template-columns:1fr;gap:15px}.intro img{height:240px}.intro h1 em{display:inline}.intro h1{font-size:48px}.panel{padding:22px 16px}.grid{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}nav{gap:8px}nav button{flex:1 1 40%;font-size:16px;padding:10px}.section-top{align-items:flex-start;flex-wrap:wrap}.listen-card .options{grid-template-columns:1fr}h2{font-size:27px}.example{font-size:21px}}