:root {
  --dark: #2c2744;
  --blue: #3f4f96;
  --green: #1b7a76;
  --orange: #2f8a62;
  --gold: #efe6ff;
  --coral: #c24b73;
  --violet: #6a4aa0;
  --amber: #2f8a62;
  --sky: #2f78a4;
  --text: #2c2744;
  --muted: #6b6274;
  --bg: #f5f3f8;
  --line: #e4deea;
  --shadow: 0 10px 24px rgba(44, 39, 68, .08);
  --indigo-soft: #e7ebf8;
  --teal-soft: #e3f4f1;
  --berry-soft: #fde8ef;
  --violet-soft: #f0e8f8;
  --sky-soft: #e5f2fa;
  --leaf-soft: #e5f6ee;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button, input { font-family: inherit; }
code, .en { font-family: Consolas, "PingFang SC", monospace; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--dark);
}
.topbar:after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: #c24b73;
}
.bar { height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; min-width: 0; }
.logo {
  width: 42px; height: 42px; border-radius: 14px; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 900; color: var(--dark);
  background: #efe6ff;
}
.brand b { display: block; font-size: 15px; white-space: nowrap; }
.brand small { display: block; color: #a9b7c5; font-size: 12px; }
.nav { display: flex; gap: 8px; }
.nav a {
  font-size: 13px; color: #efeaf6;
  padding: 7px 12px; border-radius: 18px;
  background: #3a3458; border: 0;
}
.nav a.n-home { background: #4a3d62; color: #efe6ff; }
.nav a.n-lesson { background: #343d68; color: #e7ebf8; }
.nav a.n-book { background: #234e52; color: #e3f4f1; }
.nav a.n-word { background: #4a3450; color: #fde8ef; }
.nav a.n-print { background: #3d3a62; color: #f0e8f8; }
.nav a.primary, .nav a.on { color: #2c2744; font-weight: 800; }
.nav a.n-home.primary, .nav a.n-home.on { background: #efe6ff; }
.nav a.n-lesson.on { background: #e7ebf8; }
.nav a.n-book.on { background: #e3f4f1; }
.nav a.n-word.on { background: #fde8ef; }
.nav a.n-print.on { background: #f0e8f8; }

.hero {
  position: relative; overflow: hidden; color: #241838;
  background: linear-gradient(180deg, #fff6fb 0%, #f3f0ff 48%, #eef7ff 100%);
}
.hero-inner { position: relative; text-align: center; padding: 48px 0 40px; }
.kicker {
  display: inline-flex; gap: 8px; align-items: center;
  border: 0; background: #fff; color: #6d28d9;
  box-shadow: 0 6px 16px rgba(109, 40, 217, .12);
  border-radius: 22px; padding: 7px 14px; font-weight: 800; font-size: 13px;
}
.hero h1 { font-size: 40px; line-height: 1.28; margin-top: 16px; font-weight: 900; color: #241838; }
.hero h1 span { color: #e2186a; }
.sub { max-width: 740px; margin: 14px auto 0; color: #5c5470; font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 46px; padding: 0 20px; border-radius: 23px; border: 0; cursor: pointer;
  font-weight: 800; font-size: 14px;
}
.btn.gold { background: #c24b73; color: #fff; }
.hero .btn.gold { background: linear-gradient(180deg, #ff6b96, #ff2f78); color: #fff; }
.btn.line { background: #343f7a; color: #fff; border: 0; }
.hero .btn.line { background: #fff; color: #5b35e8; box-shadow: inset 0 0 0 2px #ddd6ff; }
.btn.blue { background: var(--blue); color: #fff; }
.btn.green { background: var(--green); color: #fff; }
.btn.orange { background: var(--orange); color: #fff; }
.btn.coral { background: var(--coral); color: #fff; width: 100%; }
.btn.dark { background: var(--dark); color: #fff; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 800px; margin: 32px auto 0; }
.stat { padding: 16px 10px; border-radius: 18px; background: #343f7a; border: 0; }
.stat.s1 { background: linear-gradient(180deg, #5b8cff, #2f5bff); }
.stat.s2 { background: linear-gradient(180deg, #2ee6a6, #00b36b); }
.stat.s3 { background: linear-gradient(180deg, #ff8a3d, #ff3d78); }
.stat b { display: block; color: #fff; font-size: 28px; font-weight: 900; }
.stat.s1 b, .stat.s2 b, .stat.s3 b { color: #fff; }
.stat span { display: block; margin-top: 4px; color: rgba(255,255,255,.95); font-size: 13px; font-weight: 700; }

.guidebar { background: #f0e8f8; border-bottom: 1px solid #e4deea; }
.guidebar .wrap { padding: 12px 24px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; color: #5c463f; font-size: 14px; }
.guidebar strong { color: #6d3b4a; }
.band { background: #eef1fa; border-bottom: 1px solid #e4deea; padding: 34px 0; }
.center { text-align: center; max-width: 760px; margin: 0 auto; }
.eyebrow { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: #f3e4ea; color: #7a3450; font-size: 12px; font-weight: 800; }
.band h2, .section-title { font-size: 26px; margin: 10px 0; }
.lead { color: #607080; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.step, .panel, .quick, .module, .paper, .word-card, .lesson-card {
  background: #fff; border: 1.5px solid var(--line); border-radius: 18px;
}
.step { padding: 18px; text-align: left; border-top: 4px solid var(--violet); }
.step.c2 { border-top-color: var(--green); }
.step.c3 { border-top-color: var(--orange); }
.num {
  width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--violet); color: #fff; font-weight: 800; font-size: 13px;
}
.step.c2 .num { background: var(--green); }
.step.c3 .num { background: var(--orange); }
.step b { display: block; margin-top: 8px; }
.muted { color: #657686; font-size: 13px; line-height: 1.7; }
.main { padding: 34px 0 64px; }
.section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pill { background: #fff; border: 1.5px solid var(--line); border-radius: 24px; padding: 8px 16px; font-weight: 800; }
.section-head hr { flex: 1; border: 0; border-top: 2px dashed #d7e1ea; }
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.module { min-height: 340px; display: flex; flex-direction: column; overflow: hidden; transition: transform .16s, box-shadow .16s; }
.module:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.mod-top { color: #fff; padding: 22px; min-height: 132px; }
.mod-top h3 { font-size: 24px; line-height: 1.3; }
.mod-top p { margin-top: 8px; color: rgba(255,255,255,.78); font-size: 13px; }
.lesson .mod-top { background: #3f4f96; }
.practice .mod-top { background: #1b7a76; }
.words .mod-top { background: #c24b73; }
.lesson .mod-body { background: #f4f6fc; }
.practice .mod-body { background: #f3faf8; }
.words .mod-body { background: #fdf5f8; }
.mod-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.chip { font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 12px; background: rgba(255,255,255,.18); color: #fff; }
.lesson .mod-body .chip { background: #eceef8; color: #2c3d86; }
.practice .mod-body .chip { background: #e5f3f3; color: #0d5c60; }
.words .mod-body .chip { background: #f8e8ee; color: #8a314c; }
.mod-body .btn { margin-top: auto; }
.print-banner {
  margin-top: 16px; display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; border-radius: 18px; border: 1px solid #e4c4d8;
  background: #f0e8f8;
}
.print-banner h3 { font-size: 20px; }
.print-banner p { color: #5c4a42; font-size: 14px; }
.footer { background: #2c2744; color: #efeaf6; text-align: center; padding: 22px; font-size: 13px; }
.footer a { color: var(--gold); }
.dock { display: none; }

.page { padding: 28px 0 64px; }
.lesson-card {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 12px;
  padding: 16px; margin-bottom: 12px; align-items: center;
}
.lesson-card { border-left: 6px solid #3f4f96; background: #e7ebf8; }
.lesson-card:nth-child(5n+2) { border-left-color: #1b7a76; background: #e3f4f1; }
.lesson-card:nth-child(5n+3) { border-left-color: #2f8a62; background: #e5f6ee; }
.lesson-card:nth-child(5n+4) { border-left-color: #c24b73; background: #fde8ef; }
.lesson-card:nth-child(5n+5) { border-left-color: #2f78a4; background: #e5f2fa; }
.lesson-card:hover { border-color: #9cc7ff; border-left-width: 5px; }
.lnum { font-weight: 900; color: var(--blue); font-size: 22px; }
.lesson-card:nth-child(5n+2) .lnum { color: #1b7a76; }
.lesson-card:nth-child(5n+3) .lnum { color: #2f8a62; }
.lesson-card:nth-child(5n+4) .lnum { color: #c24b73; }
.lesson-card:nth-child(5n+5) .lnum { color: #2f78a4; }
.lesson-card h3 { font-size: 18px; }
.meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; color: #7c8995; font-size: 12px; }
.stage-label { margin: 22px 0 10px; font-weight: 900; color: #243e86; display: inline-block; background: #e4e9ff; border-radius: 12px; padding: 4px 10px; }
.stage-label:nth-of-type(3n+2) { color: #0f6f73; }
.stage-label:nth-of-type(3n) { color: #9a3d55; }
.word-unit { margin: 14px 0; padding: 12px 12px 14px; border-radius: 22px; }
.word-unit:nth-child(6n+1) { background: #e7ebf8; }
.word-unit:nth-child(6n+2) { background: #e3f4f1; }
.word-unit:nth-child(6n+3) { background: #e5f6ee; }
.word-unit:nth-child(6n+4) { background: #fde8ef; }
.word-unit:nth-child(6n+5) { background: #e5f2fa; }
.word-unit:nth-child(6n) { background: #f0e8f8; }
.word-unit:nth-child(6n+1) .stage-label { color: #243e86; background: #fff; }
.word-unit:nth-child(6n+2) .stage-label { color: #0c5c5f; background: #fff; }
.word-unit:nth-child(6n+3) .stage-label { color: #1d6a42; background: #fff; }
.word-unit:nth-child(6n+4) .stage-label { color: #8a3054; background: #fff; }
.word-unit:nth-child(6n+5) .stage-label { color: #1d5f8a; background: #fff; }
.word-unit:nth-child(6n) .stage-label { color: #5b3d86; background: #fff; }
.sheet { max-width: 860px; margin: 0 auto; }
.lesson-hero { background: #c24b73; color: #fff; border-radius: 22px; padding: 28px; }
.lesson-hero.tone-sea { background: #1b7a76; }
.lesson-hero.tone-amber { background: #2f8a62; }
.lesson-hero.tone-violet { background: #6a4aa0; }
.lesson-hero.tone-sky { background: #2f78a4; }
.lesson-hero.tone-plum { background: #8d5a8a; }
.lesson-hero h1 { font-size: 32px; line-height: 1.3; margin-top: 8px; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pills span { background: rgba(255,255,255,.16); border-radius: 14px; padding: 4px 10px; font-size: 12px; }
.block { background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 20px; margin-top: 14px; }
.block h2 { font-size: 20px; margin-bottom: 8px; }
.block:nth-of-type(6n+1) { background: #f3f6ff; border-top: 5px solid #6d7fd6; }
.block:nth-of-type(6n+2) { background: #eefaf7; border-top: 5px solid #0f6f73; }
.block:nth-of-type(6n+3) { background: #e5f6ee; border-top: 5px solid #2f8a62; }
.block:nth-of-type(6n+4) { background: #fde8ef; border-top: 5px solid #c24b73; }
.block:nth-of-type(6n+5) { background: #e5f2fa; border-top: 5px solid #2f78a4; }
.block:nth-of-type(6n) { background: #f6f0ff; border-top: 5px solid #6d4ea8; }
.rule { padding: 12px 14px; border-radius: 14px; margin-top: 8px; }
.rule:nth-of-type(4n+1) { background: #eef1ff; border-left: 4px solid #3c4f9a; }
.rule:nth-of-type(4n+2) { background: #e7f7f4; border-left: 4px solid #0f6f73; }
.rule:nth-of-type(4n+3) { background: #e5f6ee; border-left: 4px solid #2f8a62; }
.rule:nth-of-type(4n) { background: #f8e9f6; border-left: 4px solid #6d4ea8; }
.talk { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; padding: 12px 14px; margin-top: 8px; line-height: 1.75; }
.talk b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.talk.t0 { background: #e5f6ee; } .talk.t0 b { background: #2f8a62; }
.talk.t1 { background: #e7f6f8; } .talk.t1 b { background: #0f6f73; }
.talk.t2 { background: #eef1ff; } .talk.t2 b { background: #3c4f9a; }
.talk.t3 { background: #f8e9f6; } .talk.t3 b { background: #6d4ea8; }
.talk.t4 { background: #fde8ef; } .talk.t4 b { background: #c24b73; }
.examples { list-style: none; }
.examples li { background: #f7f9fc; border-radius: 14px; padding: 12px 14px; margin-top: 8px; border-left: 4px solid #3c4f9a; }
.examples li:nth-child(3n+2) { background: #e5f6ee; border-left-color: #2f8a62; }
.examples li:nth-child(3n) { background: #f4eefe; border-left-color: #6d4ea8; }
.en { font-size: 18px; color: #2a2030; }
.trap { background: #fde8ef; color: #8a3054; border-radius: 14px; padding: 12px 14px; margin-top: 8px; border-left: 4px solid #c24b73; }
.trap:nth-of-type(2n) { background: #f0e8f8; color: #553888; border-left-color: #6a4aa0; }
.hold { margin-top: 14px; background: #e3f4f1; color: #0e5c58; border-radius: 14px; padding: 14px 16px; font-weight: 700; }
.pager { display: flex; gap: 10px; margin-top: 16px; }
.pager a { background: #e7ecff; border: 1.5px solid #c9d4ff; border-radius: 14px; padding: 12px 14px; flex: 1; color: #243e86; }
.pager a:last-child { background: #d9f6f2; border-color: #b7e4df; color: #0c5c5f; }
.pager a strong { display: block; }

.paper { max-width: 820px; margin: 0 auto; padding: 28px 28px 40px; }
.paper h1 { font-size: 28px; text-align: center; }
.center-note { text-align: center; color: #667789; }
.score-table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.score-table th, .score-table td { border: 1px solid #d5deea; padding: 8px; text-align: center; }
.score-table th { background: var(--dark); color: #fff; }
.lines { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.line { border-bottom: 1px solid #c5d0dc; height: 28px; color: #95a3b2; font-size: 13px; }
.q { padding: 10px 0; border-bottom: 1px dashed #e5edf5; }
.options { margin: 6px 0 0 22px; }
.answer-page { margin-top: 28px; }
.why { color: #146b46; font-size: 14px; }

.tools { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; align-items: center; }
.search {
  flex: 1; min-width: 220px; height: 46px; border-radius: 23px; border: 1.5px solid var(--line);
  padding: 0 16px; background: #fff;
}
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters button {
  height: 40px; border-radius: 20px; border: 1.5px solid transparent; background: #fff; padding: 0 14px; cursor: pointer; font-weight: 800;
}
.filters button.f-all { color: #4a3560; background: #f3e8f6; }
.filters button.f-family { color: #243e86; background: #e6ebff; }
.filters button.f-core { color: #8a2450; background: #fdecef; }
.filters button.f-write { color: #1d6a42; background: #e5f6ee; }
.filters button.f-derive { color: #0c5c5f; background: #dff5f3; }
.filters button.f-all.on { background: #6d4ea8; color: #fff; }
.filters button.f-family.on { background: #3c4f9a; color: #fff; }
.filters button.f-core.on { background: #c43b62; color: #fff; }
.filters button.f-write.on { background: #2f8a62; color: #fff; }
.filters button.f-derive.on { background: #0f6f73; color: #fff; }
details.word-unit { margin-bottom: 8px; }
details.word-unit > summary { cursor: pointer; list-style: none; }
details.word-unit > summary::-webkit-details-marker { display: none; }
details.word-unit > summary::before { content: "▸ "; }
details.word-unit[open] > summary::before { content: "▾ "; }
details.word-unit > .word-grid { margin-top: 8px; }
.word-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.word-card { padding: 14px 16px; display: block; border-top: 6px solid #3f4f96; background: #e7ebf8; }
.word-card:nth-child(6n+2) { border-top-color: #1b7a76; background: #e3f4f1; }
.word-card:nth-child(6n+3) { border-top-color: #2f8a62; background: #e5f6ee; }
.word-card:nth-child(6n+4) { border-top-color: #c24b73; background: #fde8ef; }
.word-card:nth-child(6n+5) { border-top-color: #2f78a4; background: #e5f2fa; }
.word-card:nth-child(6n) { border-top-color: #6a4aa0; background: #f0e8f8; }
.word-card[hidden], .word-unit[hidden], [data-word-empty][hidden] { display: none !important; }
.empty-note { margin: 18px 0; padding: 16px; border-radius: 14px; background: #e5f2fa; color: #1d5f8a; font-weight: 700; }
.word-card:hover { border-color: #6a4aa0; }
.word-card.learned { border-color: #0f6f73; box-shadow: inset 4px 0 0 #0f6f73; }
.word-card .root { color: #8a314c; font-size: 12px; font-weight: 800; }
.word-card h3 { font-size: 20px; }
.forms { color: #667789; font-size: 13px; margin-top: 4px; }
.tag { display: inline-block; margin: 6px 6px 0 0; background: #f3e8f6; color: #6d4ea8; border-radius: 10px; padding: 2px 8px; font-size: 12px; font-weight: 800; }
.tag-class { background: #e6ebff; color: #243e86; }
.tag-write { background: #e5f6ee; color: #1d6a42; }
.tag-derive { background: #dff5f3; color: #0c5c5f; }
.tag-core { background: #fdecef; color: #8a2450; }
.tag-family { background: #e6ebff; color: #243e86; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.tabs button {
  min-height: 84px; border-radius: 18px; border: 1.5px solid transparent; background: #fff;
  text-align: left; padding: 14px; cursor: pointer; font-weight: 800; font-size: 16px;
}
.tabs button:nth-child(1) { background: #e7ecff; color: #243e86; }
.tabs button:nth-child(2) { background: #d9f6f2; color: #0c5c5f; }
.tabs button:nth-child(3) { background: #fde8ef; color: #8a3054; }
.tabs button.on { box-shadow: 0 8px 20px rgba(36, 23, 51, .12); outline: 2px solid #241733; }
.print-block { background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 16px 18px; margin-bottom: 12px; }
.print-block:nth-of-type(6n+1) { background: #f3f6ff; border-color: #c9d4ff; }
.print-block:nth-of-type(6n+2) { background: #eefaf7; border-color: #b7e4df; }
.print-block:nth-of-type(6n+3) { background: #e5f6ee; border-color: #b7dfc8; }
.print-block:nth-of-type(6n+4) { background: #fde8ef; border-color: #f0b8c8; }
.print-block:nth-of-type(6n+5) { background: #e5f2fa; border-color: #b7d4ea; }
.print-block:nth-of-type(6n) { background: #f6f0ff; border-color: #ddcff5; }
.print-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.print-links a, .mini {
  border-radius: 14px; padding: 6px 10px; background: #eef6ff; color: #1d5ea8; font-weight: 800; font-size: 13px;
}
.flag { display: inline-block; margin-left: 8px; background: #6d4ea8; color: #fff; border-radius: 10px; padding: 2px 8px; font-size: 12px; font-style: normal; }
.flag[hidden] { display: none !important; }

.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #e9eef3; }
.card {
  width: min(440px, 100%); background: #fff; border-radius: 22px;
  box-shadow: var(--shadow); padding: 28px 24px 18px; text-align: center;
}
.card h1 { font-size: 22px; margin: 8px 0; }
.card p { color: #667789; font-size: 14px; }
.card input[name="code"], .card input[type="password"] {
  width: 100%; height: 48px; margin: 16px 0 10px; border-radius: 12px;
  border: 1.5px solid #d5deea; text-align: center; font-size: 16px;
}
.shop {
  margin-top: 14px; text-align: left; border: 1.5px dashed #f0b8c8; background: #fde8ef;
  border-radius: 14px; padding: 12px; color: #8a3054; font-size: 13px;
}
.err { color: var(--coral); font-weight: 800; margin-top: 8px; }
.fine { color: #95a3b2; font-size: 12px; margin-top: 12px; }
.admin { max-width: 880px; margin: 28px auto; background: #fff; border-radius: 18px; padding: 22px; border: 1.5px solid var(--line); }
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #edf2f6; font-size: 14px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.row input { height: 40px; border-radius: 10px; border: 1.5px solid var(--line); padding: 0 10px; }

@media (max-width: 860px) {
  .modules, .grid-3, .stats, .word-grid, .tabs { grid-template-columns: 1fr; }
  .hero h1 { font-size: 32px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .nav { display: none; }
  .hero-inner { padding: 42px 0 28px; }
  .hero h1 { font-size: 28px; }
  .lesson-card { grid-template-columns: 56px 1fr; }
  .print-banner { flex-direction: column; align-items: flex-start; }
  .lines { grid-template-columns: 1fr; }
  .dock {
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 30;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    padding: 8px; border-radius: 18px; background: #2c2744;
  }
  .dock a { height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
  .dock .d1 { background: linear-gradient(180deg, #5b8cff, #2f5bff); }
  .dock .d2 { background: linear-gradient(180deg, #2ee6a6, #00b36b); }
  .dock .d3 { background: linear-gradient(180deg, #ff8a3d, #ff3d78); }
  .dock { display: none; }
}
body:has(.wb-toolbar) { background: #e8edf3; padding-bottom: 0; }
body:has(.wb-toolbar) .topbar,
body:has(.wb-toolbar) .footer,
body:has(.wb-toolbar) .dock { display: none; }
.wb-toolbar { background: var(--dark); color: #fff; position: sticky; top: 0; z-index: 20; }
.wb-toolbar-inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wb-toolbar a { color: #efe6ff; font-weight: 800; }
.wb-crumb { text-align: center; }
.wb-crumb span { display: block; color: #a9b7c5; font-size: 12px; }
.wb-crumb strong { font-size: 15px; }
.wb-actions { display: flex; gap: 8px; }
.wb-actions .btn { width: auto; height: 36px; }
.wb-stage { padding: 28px 16px 64px; }
.wb { max-width: 820px; padding: 36px 40px 28px; box-shadow: var(--shadow); text-align: center; }
.wb-mark {
  width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--dark); color: var(--gold); display: grid; place-items: center;
  font-weight: 900; font-size: 22px;
}
.wb-series { color: #8b97a6; font-size: 13px; }
.wb h1 { font-size: 34px; margin-top: 4px; text-align: center; }
.wb-focus { color: var(--coral); font-size: 22px; font-weight: 900; margin-top: 2px; }
.wb-lead { color: #667789; margin: 8px 0 14px; }
.wb-pills { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.wb-pills span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; color: #4d5d6e; }
.wb-pills .hot { border-color: #f3b4ae; color: var(--coral); background: #fff6f5; }
.wb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 22px 0 8px; text-align: left; }
.wb-fields label { color: #8b97a6; font-size: 13px; }
.wb-fields i { display: block; border-bottom: 1px solid #c5d0dc; height: 26px; }
.wb .score-table { margin-top: 16px; }
.wb-note {
  margin: 14px 0 8px; text-align: left; background: #e5f2fa; border: 1.5px dashed #b7d4ea;
  border-radius: 12px; padding: 12px 14px; color: #1d5f8a; font-size: 14px;
}
.wb-part { text-align: left; margin-top: 18px; border-radius: 16px; padding: 12px 14px 4px; }
.wb-part:nth-of-type(5n+1) { background: #e7ebf8; }
.wb-part:nth-of-type(5n+2) { background: #e3f4f1; }
.wb-part:nth-of-type(5n+3) { background: #e5f6ee; }
.wb-part:nth-of-type(5n+4) { background: #f0e8f8; }
.wb-part:nth-of-type(5n) { background: #fde8ef; }
.ans-say { margin-top: 8px; background: #fff; border-radius: 10px; padding: 8px 10px; }
.ans-say b { display: inline-block; margin-right: 6px; color: #6d4ea8; }
.wd-say { margin-top: 6px; color: #5c4a62; font-size: 13px; line-height: 1.65; }
.part-head { display: flex; align-items: center; gap: 10px; }
.part-badge { background: var(--dark); color: #fff; border-radius: 16px; padding: 6px 12px; font-weight: 800; font-size: 13px; }
.part-badge.tone-a { background: #3c4f9a; }
.part-badge.tone-b { background: #0f6f73; }
.part-badge.tone-c { background: #2f8a62; }
.part-badge.tone-d { background: #6d4ea8; }
.part-badge.tone-e { background: #c43b62; }
.part-head h2 { font-size: 18px; flex: 1; }
.score-pill { border: 1.5px solid #f3b4ae; color: var(--coral); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.part-note { color: #8b97a6; font-size: 12px; margin: 6px 0 8px; }
.q-item { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid #edf2f6; }
.q-no { width: 28px; height: 28px; border-radius: 50%; background: #f3ece6; display: grid; place-items: center; font-weight: 900; color: var(--dark); }
.choices { margin-top: 8px; }
.choice { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; }
.choice:nth-child(odd) { background: #f7f4f8; }
.choice:nth-child(even) { background: #f8f3ee; }
.choice b { width: 22px; color: #1d5ea8; }
.write-line { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; color: #8b97a6; font-size: 13px; }
.write-line i { flex: 1; border-bottom: 1px solid #c5d0dc; height: 22px; }
.wb-foot { margin-top: 28px; color: #95a3b2; font-size: 12px; text-align: center; }
.answer-page { text-align: center; }
.answer-page .wb-focus { margin-bottom: 18px; }
.ans-card {
  text-align: left; margin: 0 0 14px; padding: 14px 16px 12px;
  border: 1.5px solid var(--line); border-radius: 16px; border-left: 6px solid #3c4f9a;
  background: #fff; break-inside: avoid;
}
.ans-card.tone-b { border-left-color: #0f6f73; }
.ans-card.tone-c { border-left-color: #2f8a62; }
.ans-card.tone-d { border-left-color: #6d4ea8; }
.ans-card.tone-e { border-left-color: #c43b62; }
.ans-top { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; }
.ans-top b {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: #eef1ff; color: #3c4f9a; font-size: 13px;
}
.ans-card.tone-b .ans-top b { background: #e5f6f5; color: #0f6f73; }
.ans-card.tone-c .ans-top b { background: #e5f6ee; color: #2f8a62; }
.ans-card.tone-d .ans-top b { background: #f4eefe; color: #6d4ea8; }
.ans-card.tone-e .ans-top b { background: #fdecef; color: #c43b62; }
.ans-top p { font-weight: 700; }
.ans-key { margin: 10px 0; display: flex; gap: 8px; align-items: flex-start; font-weight: 800; }
.ans-key span {
  flex: 0 0 auto; background: #e8f7ef; color: #0d6b45; border-radius: 999px;
  padding: 2px 8px; font-size: 12px;
}
.ans-why { background: #f7f8fc; border-radius: 12px; padding: 10px 12px; }
.ans-why b { display: block; color: #3c4f9a; font-size: 13px; margin-bottom: 4px; }
.ans-why p + p { margin-top: 6px; color: #3d4654; }
.ans-opts { list-style: none; margin-top: 10px; }
.ans-opts li {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 8px; color: #66707c; font-size: 14px;
}
.ans-opts li.hit { background: #e8f7ef; color: #145c3a; font-weight: 800; }
.ans-opts em { font-style: normal; font-size: 12px; font-weight: 800; }
.ans-opts li.hit em { color: #0d6b45; }
@media (max-width: 720px) {
  .wb-toolbar-inner { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .wb-crumb { display: none; }
  .wb { padding: 24px 16px; }
  .wb-fields { grid-template-columns: 1fr; }
}
.stage-board { margin-top: 22px; padding: 16px; border-radius: 24px; }
.stage-board.sb0 { background: #e7ebf8; }
.stage-board.sb1 { background: #e3f4f1; }
.stage-board.sb2 { background: #fde8ef; }
.stage-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; margin-bottom: 14px; }
.stage-no { display: inline-block; font-size: 12px; font-weight: 800; color: #fff; background: #3c4f9a; border-radius: 999px; padding: 3px 10px; }
.sb1 .stage-no { background: #0f6f73; }
.sb2 .stage-no { background: #c24b73; }
.stage-head h2 { font-size: 26px; margin-top: 6px; }
.stage-head p { color: #5c5460; font-size: 14px; max-width: 640px; }
.stage-head > b { font-size: 22px; color: #3c4f9a; white-space: nowrap; }
.sb1 .stage-head > b { color: #0f6f73; }
.sb2 .stage-head > b { color: #c24b73; }
.lesson-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lesson-grid .lesson-card { margin: 0; border: 0; box-shadow: 0 8px 20px rgba(36, 23, 51, .08); }
.lesson-grid .lesson-card:nth-child(6n+1) { background: #e7ebf8; border-top: 5px solid #3f4f96; }
.lesson-grid .lesson-card:nth-child(6n+2) { background: #e3f4f1; border-top: 5px solid #1b7a76; }
.lesson-grid .lesson-card:nth-child(6n+3) { background: #e5f6ee; border-top: 5px solid #2f8a62; }
.lesson-grid .lesson-card:nth-child(6n+4) { background: #fde8ef; border-top: 5px solid #c24b73; }
.lesson-grid .lesson-card:nth-child(6n+5) { background: #e5f2fa; border-top: 5px solid #2f78a4; }
.lesson-grid .lesson-card:nth-child(6n) { background: #f0e8f8; border-top: 5px solid #6a4aa0; }
.mini-tag { background: rgba(255,255,255,.72); border-radius: 999px; padding: 2px 8px; color: #5c5460; }
.crumb { color: #6d6272; font-size: 13px; margin-bottom: 10px; }
.crumb a { color: #3c4f9a; font-weight: 800; }
.crumb span { margin: 0 4px; }
.sheet { max-width: 920px; }
.lesson-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lesson-toc a { background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; border: 1px solid transparent; }
.lesson-toc a:nth-child(6n+1) { background: #e7ecff; color: #243e86; }
.lesson-toc a:nth-child(6n+2) { background: #d9f6f2; color: #0c5c5f; }
.lesson-toc a:nth-child(6n+3) { background: #e5f6ee; color: #1d6a42; }
.lesson-toc a:nth-child(6n+4) { background: #fde8ef; color: #8a3054; }
.lesson-toc a:nth-child(6n+5) { background: #e5f2fa; color: #1d5f8a; }
.lesson-toc a:nth-child(6n) { background: #f0e8f8; color: #553888; }
.why-box, .can-box, .flow, .teach-mod, .quiz, .recap-box { margin-top: 14px; border-radius: 22px; padding: 18px; }
.why-box { background: #e7ebf8; border-left: 6px solid #3f4f96; }
.sec-kicker, .mod-banner span, .recap-box span { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.why-box p { margin-top: 8px; font-size: 16px; }
.can-box { background: #fde8ef; border-top: 6px solid #c24b73; }
.can-box h2, .flow h2, .quiz h2 { font-size: 22px; margin-bottom: 10px; }
.can-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.can-list li, .flow-card, .ex-card { background: #fff; border-radius: 16px; padding: 12px; }
.can-list li { display: flex; gap: 10px; align-items: flex-start; }
.can-list li:nth-child(1) { background: #fde8ef; }
.can-list li:nth-child(2) { background: #e3f4f1; }
.can-list li:nth-child(3) { background: #e7ebf8; }
.can-list li:nth-child(4) { background: #f0e8f8; }
.can-list b, .quiz-item summary b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #c24b73; flex: 0 0 auto; }
.can-list li:nth-child(2) b { background: #0f6f73; }
.can-list li:nth-child(3) b { background: #3c4f9a; }
.can-list li:nth-child(4) b { background: #c43b62; }
.flow { background: #f0e8f8; }
.flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flow-card { border-top: 5px solid #6a4aa0; background: #f7f2fc; }
.flow-card.f1 { border-top-color: #1b7a76; background: #e3f4f1; }
.flow-card.f2 { border-top-color: #2f8a62; background: #e5f6ee; }
.flow-card.f3 { border-top-color: #2f78a4; background: #e5f2fa; }
.flow-card b { display: block; font-size: 12px; color: #6d4ea8; }
.flow-card strong { display: block; margin: 4px 0; }
.teach-mod.tone-sea { background: #e3f4f1; border: 2px solid #b7dfd6; }
.teach-mod.tone-coral { background: #fde8ef; border: 2px solid #f0b8c8; }
.teach-mod.tone-violet { background: #f0e8f8; border: 2px solid #d4c2ee; }
.teach-mod.tone-amber { background: #e5f6ee; border: 2px solid #b7dfc8; }
.teach-mod.tone-sky { background: #e5f2fa; border: 2px solid #b7d4ea; }
.teach-mod.tone-plum { background: #f7eef4; border: 2px solid #e0c4d4; }
.mod-banner { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mod-banner span { background: #0f6f73; color: #fff; border-radius: 999px; padding: 3px 10px; }
.tone-coral .mod-banner span { background: #c43b62; }
.tone-violet .mod-banner span { background: #6d4ea8; }
.tone-amber .mod-banner span { background: #2f8a62; }
.tone-sky .mod-banner span { background: #2f7ea8; }
.tone-plum .mod-banner span { background: #6d3b78; }
.mod-banner h2 { font-size: 22px; }
.teach-lead { margin: 8px 0 12px; }
.pieces { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.piece { min-width: 110px; background: #fff; border-radius: 16px; padding: 12px; text-align: center; border-bottom: 5px solid #6d4ea8; }
.piece:nth-child(3) { border-bottom-color: #0f6f73; }
.piece:nth-child(5) { border-bottom-color: #2f8a62; }
.piece b { display: block; font-size: 22px; }
.piece span, .pieces i { color: #6d6272; font-style: normal; font-weight: 800; }
.formula { margin: 8px 0 12px; font-weight: 800; color: #3c4f9a; }
.teach-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 14px; background: #fff; margin-top: 8px; }
.teach-table th { background: #241733; color: #fff; text-align: left; }
.tone-sea .teach-table th { background: #0f6f73; }
.tone-coral .teach-table th { background: #c43b62; }
.tone-violet .teach-table th { background: #6d4ea8; }
.tone-amber .teach-table th { background: #2f8a62; }
.tone-sky .teach-table th { background: #2f7ea8; }
.tone-plum .teach-table th { background: #6d3b78; }
.teach-table td { border-top: 1px solid #efe8df; vertical-align: top; }
.ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ex-card { border-left: 5px solid #3f4f96; background: #e7ebf8; }
.ex-card:nth-child(2n) { border-left-color: #2f8a62; background: #e5f6ee; }
.ex-card:nth-child(3n) { border-left-color: #1b7a76; background: #e3f4f1; }
.ex-card:nth-child(4n) { border-left-color: #6a4aa0; background: #f0e8f8; }
.ex-note { margin-top: 6px; color: #6d6272; font-size: 14px; }
.warn-box { margin-top: 12px; background: #fff; border-radius: 14px; padding: 12px 14px; border-left: 5px solid #c24b73; color: #8a3054; }
.teach-more { margin-top: 8px; background: rgba(255,255,255,.78); border-radius: 14px; padding: 10px 12px; border-left: 5px solid #6d4ea8; }
.teach-more:nth-of-type(2) { border-left-color: #0f6f73; }
.teach-more:nth-of-type(3) { border-left-color: #2f8a62; }
.walk-box { margin-top: 12px; background: #eef1ff; border-radius: 16px; padding: 12px 14px; border: 2px solid #c9d2f5; }
.walk-box ol { list-style: none; margin-top: 8px; }
.walk-box li { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.walk-box li b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #3c4f9a; color: #fff; flex: 0 0 auto; font-size: 12px; }
.wrong-list { display: grid; gap: 8px; margin-top: 12px; }
.wrong-row { background: #fff; border-radius: 16px; padding: 10px 12px; border: 2px solid #f0d8c8; }
.wrong-row .bad, .wrong-row .good { display: grid; grid-template-columns: 72px 1fr; gap: 8px; margin-top: 4px; border-radius: 12px; padding: 6px 8px; }
.wrong-row .bad { background: #fde8ef; }
.wrong-row .good { background: #d7f6ee; }
.wrong-row .bad b { color: #c43b62; }
.wrong-row .good b { color: #0f6f73; }
.wrong-row .why { margin-top: 6px; color: #6d6272; font-size: 14px; }
.quiz { background: #e3f4f1; }
.quiz-item { background: #fff; border-radius: 16px; padding: 12px 14px; margin-top: 8px; border-left: 5px solid #0f6f73; }
.quiz-item:nth-child(3n+2) { border-left-color: #6d4ea8; background: #f6f0ff; }
.quiz-item:nth-child(3n) { border-left-color: #2f8a62; background: #e5f6ee; }
.quiz-item summary { cursor: pointer; display: flex; gap: 8px; align-items: flex-start; font-weight: 700; }
.quiz-item summary b { background: #0f6f73; }
.quiz-a { margin-top: 8px; color: #0c5c5f; font-weight: 800; }
.recap-box { background: #3f4f96; color: #fff; }
.recap-box span { color: #e7ebf8; }
.recap-box p { font-size: 20px; font-weight: 800; margin-top: 6px; }
@media (max-width: 800px) {
  .lesson-grid, .can-list, .flow-grid, .ex-grid { grid-template-columns: 1fr; }
  .stage-head { flex-direction: column; align-items: flex-start; }
}
@media print {
  .topbar, .dock, .no-print, .hero-actions, .pager, .wb-toolbar, .lesson-toc { display: none !important; }
  body { background: #fff; padding: 0; }
  .wb { box-shadow: none; }
  .answer-page { break-before: page; }
  details, details > * { display: block !important; }
}
.wd-wrap { max-width: 980px; }
.wd-hero {
  color: #fff; border-radius: 24px; padding: 28px 26px; margin-top: 12px;
  background: #c24b73;
}
.wd-hero.tone-sea { background: #1b7a76; }
.wd-hero.tone-amber { background: #2f8a62; }
.wd-hero.tone-violet { background: #6a4aa0; }
.wd-hero.tone-sky { background: #2f78a4; }
.wd-hero.tone-plum { background: #8d5a8a; }
.wd-hero h1 { font-size: 48px; line-height: 1.1; margin-top: 8px; }
.wd-hero .btn.line { color: #fff; }
.wd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.wd-actions .btn { width: auto; }
.wd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.wd-step { background: #e4e9ff; border-radius: 16px; padding: 12px; border-top: 4px solid #6d7fd6; }
.wd-step.s2 { border-top-color: #0f6f73; background: #d7f6f1; }
.wd-step.s3 { border-top-color: #2f8a62; background: #e5f6ee; }
.wd-step.s4 { border-top-color: #c24b73; background: #fde8ef; }
.wd-step b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #6d7fd6; }
.wd-step.s2 b { background: #0f6f73; }
.wd-step.s3 b { background: #2f8a62; }
.wd-step.s4 b { background: #c43b62; }
.wd-step strong { display: block; margin-top: 6px; }
.wd-step p { color: #66707c; font-size: 13px; }
.wd-panel { background: #fff; border-radius: 18px; padding: 16px; margin-top: 14px; border: 1.5px solid var(--line); }
.wd-panel h2 { font-size: 20px; margin-bottom: 10px; }
.wd-panel.sea { background: #e3f4f1; border-color: #b7dfd6; }
.wd-panel.amber { background: #e5f6ee; border-color: #b7dfc8; }
.wd-panel.violet { background: #f0e8f8; border-color: #d4c2ee; }
.wd-quick, .wd-wheres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wd-mini, .wd-where, .wd-member {
  border-radius: 16px; padding: 12px 14px; background: #fff; border: 1.5px solid var(--line); text-align: left;
}
.wd-mini { position: relative; }
.wd-mini b, .wd-member header b, .wd-where b { font-size: 22px; }
.wd-mini span, .wd-member header span, .wd-where span { display: block; font-size: 12px; font-weight: 800; margin: 2px 0 6px; }
.wd-mini button, .wd-member header button, .wd-line button {
  border: 0; border-radius: 999px; padding: 4px 10px; font-weight: 800; cursor: pointer; background: #241733; color: #fff;
}
.wd-mini button { position: absolute; top: 12px; right: 12px; }
.pos-noun { border-color: #b7dfc8; background: #e5f6ee; }
.pos-verb { border-color: #8ec4e4; background: #d9f0fb; }
.pos-adj { border-color: #f0b8c8; background: #fde8ef; }
.pos-adv { border-color: #7dcec4; background: #d7f6f1; }
.pos-other { border-color: #c4a6ef; background: #efe4ff; }
.wd-note { margin-top: 10px; background: #e5f2fa; border-radius: 12px; padding: 10px 12px; }
.wd-contrast { margin-top: 10px; background: #f3e8ff; border-radius: 12px; padding: 10px 12px; }
.wd-members { display: grid; gap: 12px; }
.wd-member header { display: flex; align-items: center; gap: 10px; }
.wd-member header b { flex: 1; }
.wd-member header span { margin: 0; }
.wd-mean { font-weight: 800; margin: 6px 0; }
.wd-place { color: #3d4654; font-size: 14px; }
.wd-bits { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.wd-bits i { font-style: normal; background: #fff; border-radius: 10px; padding: 4px 8px; font-weight: 800; border: 1px solid #e4d4ea; }
.wd-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.wd-col { margin: 8px 0; font-weight: 800; color: #1d5f8a; background: #e5f2fa; border-radius: 10px; padding: 6px 10px; }
.wd-explain { margin: 8px 0; line-height: 1.7; color: #3d3150; }
.wd-tip { margin: 8px 0; font-weight: 700; color: #8a2450; background: #fff0f4; border-radius: 10px; padding: 6px 10px; }
.wd-changes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wd-changes span { background: #fff; border: 1.5px solid #e4d4ea; border-radius: 14px; padding: 8px 10px; }
.wd-changes b { display: block; font-size: 18px; }
.wd-changes small { color: #6b5b78; }
.wd-changes i { font-style: normal; font-weight: 800; color: #c24b73; }
.wd-panel.rose { background: #fde8ef; border-color: #f0b8c8; }
.wd-ok { font-weight: 800; color: #0f6f73; }
.wd-bad { margin-top: 6px; font-weight: 800; color: #c43b62; }
.wd-rel { margin-top: 8px; color: #5b3d86; font-weight: 700; }
.wd-line { margin-top: 8px; background: rgba(255,255,255,.72); border-radius: 12px; padding: 8px 10px; }
.wd-three .wd-line { margin-top: 0; }
.wd-line span { display: inline-block; font-size: 12px; font-weight: 800; color: #6d4ea8; background: #f3e8ff; border-radius: 999px; padding: 1px 8px; }
.wd-line.basic span { color: #1d5f8a; background: #e7f3fb; }
.wd-line.exam span { color: #1d6a42; background: #e5f6ee; }
.wd-line.write span { color: #6d3b78; background: #f8e8f4; }
.wd-mini .en { font-size: 15px; margin-top: 6px; }
.wd-line.hit span { color: #0f6f73; background: #e5f7f4; }
.wd-line .en { font-size: 16px; margin-top: 4px; }
.wd-read { margin-top: 14px; background: #f0e8f8; border-radius: 18px; padding: 16px; }
.wd-read h2 { margin-bottom: 8px; }
.wd-read .btn { width: auto; margin: 8px 8px 0 0; }
.footer { background: #2c2744; }
@media (max-width: 800px) {
  .wd-steps, .wd-quick, .wd-wheres, .wd-three { grid-template-columns: 1fr; }
  .wd-hero h1 { font-size: 36px; }
}
@media (max-width: 980px) {
  .bar { height: auto; min-height: 64px; padding: 10px 0 12px; flex-wrap: wrap; align-items: center; }
  .nav { width: 100%; flex-wrap: wrap; }
  .brand b { white-space: normal; }
  .hero h1 { font-size: 34px; }
  .hero-inner { padding: 42px 0 32px; }
  .module { min-height: 0; }
  .lesson-grid { grid-template-columns: 1fr; }
  .stage-head { flex-direction: column; align-items: flex-start; }
  .stage-head h2 { font-size: 22px; }
}
@media (max-width: 640px) {
  .en, code, .teach-lead, .ex-card, .teach-table td, .teach-table th, .wrong-row, .wd-line .en, .q-item, .choice {
    overflow-wrap: anywhere;
  }
  .wd-hero { padding: 22px 16px; }
  .wd-hero h1 { font-size: 32px; }
  .wd-actions .btn, .hero-actions .btn { min-height: 44px; }
  .hero h1 { font-size: 30px; line-height: 1.3; }
  .sub { font-size: 15px; }
  .kicker { font-size: 12px; }
  body.feature .topbar { display: none; }
  .topbar {
    background: linear-gradient(100deg, #4c6fff 0%, #7a4dff 46%, #ff4f93 100%);
    padding-top: env(safe-area-inset-top);
  }
  .topbar:after {
    height: 3px;
    background: linear-gradient(90deg, #ffe14a, #3dffc5 52%, #5ce1ff);
  }
  .bar { height: 46px; min-height: 0; padding: 0; flex-wrap: nowrap; }
  .brand { gap: 8px; }
  .logo { width: 28px; height: 28px; border-radius: 9px; font-size: 14px; background: #fff; color: #5a35e6; }
  .brand b { font-size: 15px; line-height: 1.1; white-space: nowrap; }
  .brand small { display: none; }
  .dock {
    bottom: calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 10px 28px rgba(90, 40, 160, .22);
    padding: 6px;
  }
  .dock { display: none; }
  .card { padding: 22px 16px 16px; }
  .admin { margin: 12px; padding: 16px; }
}