:root{--blue:#1659f5;--blue-2:#3776ff;--navy:#071d63;--teal:#09c7a4;--ink:#13213b;--muted:#6e7890;--line:#e8edf6;--paper:#fff;--soft:#f6f9ff;--mint:#effcf8;--shadow:0 16px 50px rgba(18,53,112,.09);--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:radial-gradient(circle at 10% 0%,rgba(22,89,245,.06),transparent 30%),radial-gradient(circle at 100% 25%,rgba(9,199,164,.06),transparent 28%),#fbfdff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}button{font:inherit;cursor:pointer}.app{min-height:100vh;min-height:100dvh;padding-bottom:calc(110px + env(safe-area-inset-bottom))}.topbar{position:sticky;top:0;z-index:20;padding:12px 16px 10px;background:rgba(251,253,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(232,237,246,.8)}.topbar-inner{max-width:1040px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none}.brand img{width:88px;height:auto;display:block}.brand-copy{min-width:0}.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:850}.brand-title{font-size:14px;font-weight:900;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lesson-tag{font-size:12px;color:var(--navy);font-weight:800;background:#eef3ff;border:1px solid #dfe8ff;padding:8px 10px;border-radius:999px;white-space:nowrap;text-decoration:none}
main{max-width:1040px;margin:0 auto;padding:20px 16px 0}.progress{display:flex;gap:7px;margin:2px 0 18px}.progress button{border:0;background:transparent;padding:0;flex:1}.progress span{display:block;height:5px;border-radius:999px;background:#e8edf7;transition:.25s}.progress button.active span,.progress button.done span{background:linear-gradient(90deg,var(--blue),var(--teal))}.screen{display:none;animation:fade .28s ease}.screen.active{display:block}@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.hero{margin:4px 0 18px}.kicker{font-size:12px;color:var(--teal);font-weight:850;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}.hero h1{font-size:36px;line-height:1.08;margin:0;color:var(--navy);letter-spacing:-.04em}.word-title{font-size:clamp(42px,9vw,72px)!important;letter-spacing:-.055em!important}.subtitle{font-size:14px;line-height:1.65;color:var(--muted);margin:10px 0 0}.pronunciation{display:flex;align-items:center;gap:9px;margin-top:13px}.pronunciation-copy{font-size:12px;color:var(--muted)}
.card{background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.stack{display:grid;gap:14px}.learning-block{border:1px solid var(--line);border-radius:22px;background:#fff;padding:18px}.learning-block.soft{background:#f8faff}.learning-block.mint{background:var(--mint);border-color:#d8f1ea}.block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.block-label{display:flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:900;color:#596981}.block-icon{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:#edf3ff;color:var(--blue)}.block-icon.teal{background:#eafbf6;color:#087966}.block-icon svg,.btn svg,.visual-badge svg{width:18px;height:18px}.round-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#f8faff;color:var(--blue);display:grid;place-items:center;font-weight:900;flex:none}.round-btn.playing,.btn.playing{background:#eefcf8;border-color:#bde9dd;color:#087966;box-shadow:0 0 0 3px rgba(9,199,164,.1)}.definition{font-size:23px;line-height:1.38;font-weight:900;color:var(--navy);letter-spacing:-.02em}.key-zh{font-size:14px;color:#45526a;line-height:1.65;margin-top:10px}.tone{display:inline-flex;margin-top:10px;border-radius:999px;background:#fff;border:1px solid #dce6f7;color:#59708f;padding:6px 9px;font-size:11px;font-weight:850}.contrast-title{font-size:18px;font-weight:900;color:var(--navy);line-height:1.45;margin-top:14px}.contrast-copy{font-size:14px;line-height:1.68;color:#34445f;margin-top:7px}.contrast-zh{font-size:13px;line-height:1.6;color:var(--muted);margin-top:6px}.example{font-size:21px;line-height:1.5;color:var(--navy);font-weight:850}.example strong{color:#078a74}.example-zh{font-size:13px;color:var(--muted);line-height:1.6;margin-top:8px}.related{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:2px}.related-item{padding:11px;border-radius:15px;background:#f7f9fd}.related-item span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:#8190a6;margin-bottom:4px}.related-item strong{font-size:13px;color:var(--navy)}
.toolbar{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.btn{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:14px;padding:11px 14px;font-weight:850;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px}.btn.primary{border-color:transparent;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;box-shadow:0 10px 24px rgba(22,89,245,.2)}.btn.teal{border-color:transparent;background:linear-gradient(135deg,var(--teal),#13b697);color:#fff}.btn.ghost{background:#f7f9fd}.dark-ghost{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.18)!important;color:#fff!important}.dark-play{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}.mini-audio{margin-top:8px;border:0;background:transparent;color:var(--blue);font-size:12px;font-weight:850;padding:0}
.intro-card{padding:22px}.intro-path{display:grid;gap:9px;margin-top:18px}.intro-row{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}.intro-no{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:#eef3ff;color:var(--blue);font-size:11px;font-weight:950}.intro-row strong{display:block;color:var(--navy);font-size:14px}.intro-row span{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:2px}.word-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}.word-chip{border:1px solid #dce6f8;background:#f8faff;border-radius:999px;padding:8px 10px;color:#31518d;font-weight:850;font-size:12px}
.visual-and-copy{display:grid;grid-template-columns:minmax(280px,1.05fr) minmax(260px,.95fr);gap:18px;align-items:center}.visual-window{position:relative;display:block;width:100%;height:300px;padding:0;border:0;border-radius:20px;overflow:hidden;background:#eaf3f5;text-align:left}.visual-window img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}.visual-window:hover img{transform:scale(1.015)}.visual-badge{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(7,29,99,.88);color:#fff;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:850;backdrop-filter:blur(8px)}.meaning-points{display:grid;gap:7px;margin-top:14px}.meaning-point{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:13px;background:rgba(255,255,255,.78);font-size:13px;color:#31516b;font-weight:750}.meaning-point span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#e9fbf6;color:#058269;font-size:11px;font-weight:950}.meaning-point.last span{background:#fff0ec;color:#d4522d}.mini-scene{border-radius:20px;background:#fff;border:1px solid #d9efe8;min-height:250px;padding:18px}.smart-saving-scene{display:grid;grid-template-columns:54px 26px 1fr;gap:10px;align-items:center}.scene-icon{width:54px;height:54px;border-radius:18px;background:#eefbf7;display:grid;place-items:center;font-size:29px}.scene-arrow{color:var(--teal);font-weight:950;text-align:center}.scene-copy strong{display:block;color:var(--navy);font-size:14px}.scene-copy span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.scene-divider{grid-column:1/-1;height:1px;background:#edf0f6}
.contrast-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch}.compare-card{border:1px solid var(--line);border-radius:18px;padding:15px;background:#fff}.compare-card span{display:block;font-size:11px;font-weight:950;letter-spacing:.08em;color:#6c7d94}.compare-card strong{display:block;color:var(--navy);font-size:17px;margin-top:7px;line-height:1.35}.compare-card small{display:block;color:var(--muted);font-size:12px;margin-top:6px}.compare-card.positive{border-color:#c8ece3;background:#f4fdfb}.compare-card.negative{border-color:#ffdccc;background:#fff8f4}.compare-card.neutral{border-color:#dbe7ff;background:#f7faff}.vs{display:grid;place-items:center;color:#97a4b7;font-size:11px;font-weight:950}.example-layout{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(300px,1.15fr);gap:18px;align-items:center}.example-layout .visual-window{height:220px}.example-mini-visual{height:180px;border-radius:20px;background:linear-gradient(145deg,#effcf8,#f7faff);border:1px solid #d9efe8;display:flex;align-items:center;justify-content:center;gap:14px}.example-mini-visual>span{font-size:42px}.example-mini-visual strong{display:block;color:var(--navy)}.example-mini-visual small{display:block;color:var(--muted);margin-top:4px}.why-box{margin-top:14px;padding:12px 13px;border-radius:15px;background:#f7f9fd}.why-box>span{display:block;color:var(--teal);font-size:10px;font-weight:950;letter-spacing:.1em}.why-box p{margin:5px 0 0;color:#40506b;font-size:13px;line-height:1.58}
.map-image-card{padding:12px}.full-map{border:0;padding:0;background:transparent;width:100%;position:relative;border-radius:18px;overflow:hidden}.full-map img{display:block;width:100%;height:auto;border-radius:18px}.full-map>span{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(7,29,99,.88);color:#fff;padding:8px 10px;border-radius:999px;font-size:10px;font-weight:850}.full-map svg{width:16px;height:16px}.quick-checks{display:grid;gap:9px;margin-top:14px}.quick-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:950;color:var(--teal);margin:4px 2px}.quick-check{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);background:#fff;border-radius:17px;padding:14px 15px;text-align:left}.quick-check span{font-size:13px;color:#40506b}.quick-check strong{font-size:12px;color:var(--blue);white-space:nowrap}.quick-check.revealed{border-color:#bde9dd;background:#f2fcf9}.quick-check.revealed strong{color:#07836e;font-size:15px}
.question-card{border-radius:22px;padding:18px;background:linear-gradient(145deg,#071d63,#12367f);color:#fff;margin-bottom:14px}.question-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.question-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#9eead8;font-weight:900}.question-count{font-size:11px;color:#c5d4ff;font-weight:850}.question-text{font-size:20px;line-height:1.5;font-weight:850}.question-with-icon{display:grid;grid-template-columns:68px 1fr;gap:14px;align-items:center}.practice-visual{width:66px;height:66px;border-radius:20px;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);font-size:34px}.options{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.option{border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--navy);padding:14px 12px;text-align:left;font-weight:900;font-size:14px;min-height:50px}.option.correct{border-color:#a6dfd0;background:#effcf8;color:#087966}.option.wrong{border-color:#ffd1d1;background:#fff7f7;color:#a63838}.option:disabled{cursor:default}.feedback{display:none;margin-top:12px;border-radius:18px;padding:14px;background:#f7faff;border:1px solid #dce7fb}.feedback.show{display:block}.feedback strong{color:var(--navy)}.feedback p{font-size:13px;color:#4d5e7a;line-height:1.62;margin:5px 0 0}.revealed-sentence{margin-top:11px;padding:11px 12px;border-radius:13px;background:#fff;border:1px solid #e3eaf7;color:var(--navy);font-size:13px;line-height:1.55;font-weight:750}.clue-reveal-wrap{margin:14px 0}.clue-list{display:grid;gap:8px;margin-bottom:9px}.clue{display:grid;grid-template-columns:68px 1fr;gap:8px;align-items:start;padding:11px 12px;border-radius:15px;background:#f7f9fd;animation:fade .2s ease}.clue>span{font-size:10px;color:var(--teal);font-weight:950;letter-spacing:.08em}.clue p{margin:0;font-size:13px;line-height:1.55;color:#42516a}.logic-formula{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:7px;align-items:center;margin-top:16px;padding:14px;border-radius:18px;background:var(--mint);border:1px solid #d6f4eb}.logic-step{text-align:center}.logic-step strong{display:block;color:var(--navy);font-size:12px}.logic-step span{display:block;color:#668078;font-size:10px;margin-top:2px}.logic-arrow{color:var(--teal);font-weight:950}
.recall-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.recall-card{border:1px solid var(--line);background:#fff;border-radius:20px;padding:0;overflow:hidden}.recall-toggle{border:0;background:#fff;width:100%;padding:16px;text-align:left;min-height:128px}.recall-card .word{font-size:19px;color:var(--navy);font-weight:950}.recall-card .hint{font-size:11px;color:var(--muted);margin-top:5px}.recall-card .answer{display:none;margin-top:16px;font-size:13px;line-height:1.55;color:#3f526d}.recall-card .answer span{color:#7a8799}.recall-card.revealed .answer{display:block}.recall-card.revealed .hint{display:none}.confidence{display:none;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}.recall-card.revealed .confidence{display:grid}.confidence button{border:0;background:#fbfcff;padding:10px 4px;font-size:10px;color:#718099;font-weight:850}.confidence button.selected{background:#effcf8;color:#087966}.summary-note{margin-top:14px;padding:15px;border-radius:18px;background:#f7faff;border:1px solid #dce7fb;color:#42516c;font-size:13px;line-height:1.65}.summary-note strong{color:var(--navy)}.confusion-summary{margin-top:14px}.confusion-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:14px;background:#fff;border:1px solid var(--line);margin-top:7px}.confusion-row strong{color:var(--navy);font-size:13px}.confusion-row span{font-size:11px;color:var(--muted)}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-top:1px solid rgba(232,237,246,.95)}.bottom-inner{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}.step-copy{text-align:center;min-width:84px}.step-copy strong{display:block;color:var(--navy);font-size:13px}.step-copy span{font-size:11px;color:var(--muted)}.bottom-inner .btn:first-child{justify-self:start}.bottom-inner .btn:last-child{justify-self:end}.toast{position:fixed;left:50%;bottom:calc(98px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(10px);background:#0f1d39;color:#fff;padding:10px 14px;border-radius:999px;font-size:12px;font-weight:800;opacity:0;pointer-events:none;transition:.2s;z-index:80;white-space:nowrap}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.image-modal{position:fixed;inset:0;z-index:70;background:rgba(5,15,44,.82);display:none;align-items:center;justify-content:center;padding:22px}.image-modal.open{display:flex}.image-modal-inner{position:relative;width:min(92vw,760px);max-height:92vh;display:flex;justify-content:center}.image-modal img{display:block;max-width:100%;max-height:92vh;width:auto;height:auto;border-radius:18px;box-shadow:0 28px 90px rgba(0,0,0,.35)}.modal-close{position:absolute;right:-10px;top:-10px;width:42px;height:42px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(7,29,99,.92);color:#fff;display:grid;place-items:center;z-index:2}.modal-close svg{width:20px;height:20px}
@media(max-width:760px){main{max-width:760px}.visual-and-copy,.example-layout{grid-template-columns:1fr}.visual-window{height:285px}.example-layout .visual-window{height:220px}.related{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.topbar{padding-left:12px;padding-right:12px}.topbar-inner{gap:8px}.brand img{width:80px}.brand-copy .eyebrow{font-size:9px}.brand-title{font-size:12px}.lesson-tag{font-size:10px;padding:7px 8px}.hero h1{font-size:30px}.word-title{font-size:clamp(38px,12vw,50px)!important;overflow-wrap:anywhere}.definition{font-size:19px}.example{font-size:18px}.learning-block{padding:14px;border-radius:19px}.visual-window{height:245px}.example-layout .visual-window{height:190px}.contrast-grid{grid-template-columns:1fr}.vs{min-height:20px}.question-with-icon{grid-template-columns:50px 1fr}.practice-visual{width:48px;height:48px;border-radius:15px;font-size:25px}.question-text{font-size:17px}.options{grid-template-columns:1fr}.recall-grid{grid-template-columns:1fr}.logic-formula{padding:12px 8px}.quick-check{align-items:flex-start;flex-direction:column}.quick-check strong{white-space:normal}.pronunciation{align-items:flex-start;flex-direction:column}.pronunciation-copy{margin-left:2px}}