:root { --ink:#13242b; --muted:#68767b; --paper:#f4f1e8; --panel:#fbfaf5; --line:#c9cbc4; --amber:#e2a12e; --cyan:#2d9ab7; --green:#3f8d61; --violet:#785194; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:76px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Microsoft YaHei","PingFang SC",sans-serif; }
button,a,input { font:inherit; }
button,a { cursor:pointer; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:"Songti SC","STSong","SimSun","Microsoft YaHei",serif; }
.topbar { position:sticky; top:0; z-index:20; height:70px; padding:0 max(4vw,30px); display:flex; align-items:center; gap:32px; border-bottom:1px solid rgb(19 36 43 / 16%); background:rgb(244 241 232 / 94%); backdrop-filter:blur(12px); }
.topbar .brand img { display:block; width:auto; height:35px; }
.topbar>span { margin-left:auto; color:var(--muted); font-size:12px; }
main,footer { width:min(1220px,calc(100% - 64px)); margin:0 auto; }
.eyebrow { margin-bottom:8px; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.15em; }
.primary,.learning-links a { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--ink); padding:12px 17px; background:var(--ink); color:#fff; font-weight:700; }
.primary:hover,.learning-links a:hover { background:#294049; }
.primary:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid var(--amber); outline-offset:3px; }
.hero { min-height:620px; display:grid; grid-template-columns:1.35fr .65fr; gap:70px; align-items:center; padding:70px 0; }
.hero h1 { margin:17px 0; font-size:78px; line-height:1.14; }
.subtitle { font-size:24px; font-weight:600; }
.intro { max-width:680px; color:var(--muted); font-size:17px; line-height:1.75; }
.today-card { position:relative; padding:33px; border:1px solid var(--ink); border-top:8px solid var(--amber); background:var(--panel); }
.today-card .status-dot { position:absolute; top:25px; right:25px; width:12px; height:12px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 8px rgb(226 161 46 / 15%); }
.today-card h2 { margin:20px 0 9px; font-size:42px; }
.today-card>p:not(.eyebrow) { margin-bottom:23px; color:var(--muted); line-height:1.65; }
.journey { padding:62px 0 92px; border-top:1px solid var(--ink); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; }
.section-heading h2 { margin:10px 0 0; font-size:46px; }
.section-heading>p { max-width:440px; margin:0; color:var(--muted); line-height:1.65; }
.route-map { position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:65px; }
.route-line { position:absolute; top:30px; right:8%; left:8%; border-top:3px solid #b9bcb7; }
.map-point { position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.map-point i { position:relative; z-index:2; width:60px; height:60px; display:grid; place-items:center; border:3px solid #aeb3b0; border-radius:50%; background:var(--paper); color:#7a8588; font-style:normal; font-weight:700; }
.map-point b { margin:14px 0 2px; font-family:"Songti SC","STSong","SimSun",serif; font-size:23px; }
.map-point small { color:var(--muted); font-size:12px; }
.map-status { margin-top:10px; padding:4px 9px; border-radius:5px; background:#e7e8e4; color:#7a8588; font-size:11px; font-weight:700; letter-spacing:.04em; }
.map-point.amber,.chapter.amber { --tone:var(--amber); }
.map-point.cyan,.chapter.cyan { --tone:var(--cyan); }
.map-point.green,.chapter.green { --tone:var(--green); }
.map-point.violet,.chapter.violet { --tone:var(--violet); }
.map-point.finish { --tone:var(--ink); }
.map-point.completed i { border-color:var(--tone); background:var(--tone); color:#fff; }
.map-point.completed b { color:var(--tone); }
.map-point.completed .map-status { background:color-mix(in srgb,var(--tone) 15%,var(--paper)); color:var(--tone); }
.map-point.current i { width:74px; height:74px; margin-top:-7px; border:5px solid var(--tone,var(--amber)); background:var(--ink); color:#fff; box-shadow:0 0 0 10px color-mix(in srgb,var(--tone,var(--amber)) 18%,transparent); }
.map-point.current b { color:var(--tone); }
.map-point.current .map-status { background:color-mix(in srgb,var(--tone) 15%,var(--paper)); color:var(--tone); }
.map-point.pending b,.map-point.pending small { color:#8a9598; }
.map-point.pretest { --tone:#b85d49; }
.map-point.pretest i { border-color:var(--tone); color:var(--tone); }
.map-point.pretest b { color:var(--tone); }
.map-point.pretest .map-status { background:color-mix(in srgb,var(--tone) 13%,var(--paper)); color:var(--tone); }
.chapter { position:relative; padding:88px 0 110px; border-top:1px solid var(--ink); }
.chapter-marker { position:absolute; top:94px; left:-74px; display:flex; flex-direction:column; align-items:center; }
.chapter-marker span { color:var(--muted); font-size:9px; letter-spacing:.18em; writing-mode:vertical-rl; }
.chapter-marker b { margin:10px 0; color:var(--tone); font-size:26px; }
.chapter-heading { display:grid; grid-template-columns:.76fr 1.24fr; gap:75px; }
.chapter-date { color:var(--tone); font-size:13px; font-weight:700; }
.chapter-heading h2 { margin:18px 0 5px; font-size:70px; }
.chapter-heading>div:first-child p { color:var(--muted); font-size:22px; }
.chapter-focus { padding:28px 0; border-top:5px solid var(--tone); }
.chapter-focus span { font-weight:700; }
.chapter-focus ul { margin:12px 0 0; padding-left:19px; line-height:1.8; }
.chapter-promise { margin:38px 0 52px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-family:"Songti SC","STSong","SimSun",serif; font-size:24px; }
.task-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.task-step { min-width:0; padding:27px; border-right:1px solid var(--line); }
.task-step:last-child { border-right:0; }
.step-no { color:var(--tone); font-size:17px; font-weight:700; }
.task-step h3 { margin:22px 0 12px; font-size:30px; }
.task-step>p { min-height:78px; color:var(--muted); line-height:1.65; }
.task-step:nth-child(3)>p { min-height:0; margin-bottom:0; }
.task-step>strong { min-height:62px; display:block; font-size:14px; line-height:1.55; }
.task-step>.primary { margin-top:18px; }
.learning-links { display:grid; gap:8px; }
.learning-links a { background:transparent; color:var(--ink); }
.skill-assets { display:grid; gap:12px; }
.skill-assets strong { font-size:14px; line-height:1.55; }
.closing { padding:110px 0 120px; border-top:1px solid var(--ink); text-align:center; }
.closing h2 { margin:18px 0 10px; font-size:54px; }
.closing>p:not(.eyebrow) { color:var(--muted); font-size:18px; }
.text-link { display:inline-block; padding:0 0 3px; border-bottom:1px solid currentColor; font-weight:700; }
footer { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:25px 0 38px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.wechat-contact { display:grid; justify-items:center; gap:7px; margin-left:auto; color:var(--ink); font-weight:700; letter-spacing:.04em; }
.wechat-contact img { display:block; width:104px; height:104px; object-fit:contain; border:1px solid var(--line); background:#fff; }
.access-dialog { width:min(520px,calc(100% - 32px)); padding:0; border:1px solid var(--ink); background:var(--paper); color:var(--ink); }
.access-dialog::backdrop,.exam-dialog::backdrop,.practice-dialog::backdrop { background:rgb(10 23 29 / 72%); backdrop-filter:blur(3px); }
.access-dialog form { position:relative; padding:38px; }
.access-dialog h2 { margin:12px 0; font-size:34px; }
.access-dialog form>p:not(.eyebrow,.form-error) { color:var(--muted); line-height:1.65; }
.access-dialog label { display:block; margin:25px 0 8px; font-weight:700; }
.access-dialog input { width:100%; padding:13px; border:1px solid var(--ink); background:var(--panel); font-size:18px; letter-spacing:.08em; }
.access-dialog .primary { width:100%; margin-top:10px; }
.dialog-close { position:absolute; top:20px; right:20px; width:38px; height:38px; border:1px solid var(--line); background:transparent; font-size:26px; line-height:1; }
.form-error { min-height:22px; margin:8px 0; color:#9d4038; font-size:13px; }
.notice { position:fixed; right:24px; bottom:24px; z-index:30; max-width:380px; padding:15px 18px; transform:translateY(20px); background:var(--ink); color:#fff; opacity:0; pointer-events:none; transition:.2s ease; }
.notice.visible { transform:translateY(0); opacity:1; }
.pretest-dialog { width:calc(100vw - 24px); max-width:none; height:calc(100vh - 24px); max-height:none; padding:0; overflow:hidden; border:1px solid var(--ink); background:var(--paper); }
.pretest-dialog::backdrop { background:rgb(10 23 29 / 78%); backdrop-filter:blur(3px); }
.pretest-dialog .pretest-close { z-index:2; border-color:rgb(255 255 255 / 65%); background:rgb(19 36 43 / 88%); color:#fff; }
.pretest-dialog iframe { display:block; width:100%; height:100%; border:0; background:var(--paper); }
.exam-dialog { width:min(980px,calc(100% - 32px)); max-height:calc(100vh - 32px); padding:0; border:1px solid var(--ink); background:var(--paper); color:var(--ink); }
.exam-shell { position:relative; min-height:620px; padding:38px 42px 34px; }
.exam-close { z-index:2; }
.exam-head { padding-right:55px; }
.exam-head h2 { margin:10px 0 6px; font-size:36px; }
.exam-meta { display:flex; flex-wrap:wrap; gap:9px 18px; color:var(--muted); font-size:13px; }
.exam-progress { height:5px; margin:22px 0 18px; background:#dfe0dc; }
.exam-progress span { display:block; height:100%; background:var(--ink); transition:width .2s ease; }
.question-nav { display:grid; grid-template-columns:repeat(12,1fr); gap:5px; margin-bottom:26px; }
.question-nav button { min-width:0; padding:7px 2px; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:12px; }
.question-nav button.answered { border-color:var(--ink); background:var(--panel); color:var(--ink); }
.question-nav button.current { background:var(--ink); color:#fff; }
.question-card { min-height:320px; }
.question-label { display:inline-flex; margin-bottom:15px; padding:5px 9px; background:#e5e6e1; font-size:12px; font-weight:700; }
.question-card h3 { max-width:820px; margin-bottom:24px; font-family:"Microsoft YaHei","PingFang SC",sans-serif; font-size:20px; line-height:1.7; white-space:pre-line; }
.option-list { display:grid; gap:10px; }
.exam-option { position:relative; display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; padding:14px 16px; border:1px solid var(--line); background:var(--panel); line-height:1.6; }
.exam-option:hover,.exam-option.selected { border-color:var(--ink); }
.exam-option input { position:absolute; opacity:0; }
.exam-option b { width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; }
.exam-option.selected b { border-color:var(--ink); background:var(--ink); color:#fff; }
.exam-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.exam-actions>div { display:flex; gap:10px; margin-left:auto; }
.quiet { padding:11px 16px; border:1px solid var(--ink); background:transparent; color:var(--ink); font-weight:700; }
.quiet:disabled,.primary:disabled { cursor:not-allowed; opacity:.45; }
.exam-error { min-height:20px; margin:10px 0 0; color:#9d4038; font-size:13px; text-align:right; }
.exam-loading { display:grid; min-height:520px; place-items:center; color:var(--muted); }
.name-entry-form { max-width:520px; margin:90px auto 0; }
.name-entry-form h2 { margin:12px 0; font-size:36px; }
.name-entry-form>p:not(.eyebrow,.exam-error) { color:var(--muted); line-height:1.65; }
.name-entry-form label,.student-name-field label { display:block; margin:24px 0 8px; font-weight:700; }
.name-entry-form input,.student-name-field input { width:100%; padding:13px; border:1px solid var(--ink); background:var(--panel); color:var(--ink); font:inherit; }
.name-entry-form .primary { width:100%; margin-top:8px; }
.result-student-name { margin:8px 0 0; font-weight:700; }
.score-line { margin:8px 0 18px; font-family:"Songti SC","STSong","SimSun",serif; font-size:70px; font-weight:700; }
.score-line small { color:var(--muted); font-size:22px; }
.result-message { margin:0 0 28px; padding:24px; border-left:6px solid var(--green); background:color-mix(in srgb,var(--green) 10%,var(--panel)); }
.result-message.retry { border-left-color:#a95243; background:#f5e9e5; }
.result-message h3 { margin-bottom:10px; font-size:27px; }
.result-message p { margin:0; line-height:1.8; }
.review-list { display:grid; gap:9px; }
.review-list details { border:1px solid var(--line); background:var(--panel); }
.review-list summary { display:grid; grid-template-columns:42px auto 1fr; gap:12px; align-items:start; padding:15px; cursor:pointer; }
.review-list summary span { color:var(--muted); font-weight:700; }
.review-list summary b { white-space:nowrap; }
.review-list summary b.ok { color:var(--green); }
.review-list summary b.bad { color:#a95243; }
.review-list summary em { font-style:normal; line-height:1.55; }
.review-copy { padding:0 18px 18px 69px; color:var(--muted); line-height:1.7; white-space:pre-line; }
.review-copy strong { color:var(--ink); }
.practice-dialog { width:min(940px,calc(100% - 32px)); max-height:calc(100vh - 32px); padding:0; border:1px solid var(--ink); background:var(--paper); color:var(--ink); }
.practice-shell { position:relative; min-height:650px; padding:42px; }
.practice-intro { max-width:780px; margin:0 auto; padding:28px 0; }
.practice-intro h2,.practice-chat h2 { margin:12px 55px 20px 0; font-size:38px; }
.practice-brief { display:grid; grid-template-columns:repeat(2,1fr); margin:35px 0 22px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.practice-brief article { padding:22px 20px; border-right:1px solid var(--line); }
.practice-brief article:last-child { border-right:0; }
.practice-brief span { color:var(--green); font-size:13px; font-weight:700; }
.practice-brief p { margin:12px 0 0; color:var(--muted); line-height:1.7; }
.practice-mode,.practice-chat-head>p:last-child { color:var(--muted); }
.practice-exercises { display:grid; gap:10px; margin:26px 0 20px; padding:0; border:0; }
.practice-exercises legend { margin-bottom:12px; font-weight:700; }
.practice-exercises label { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:14px 16px; border:1px solid var(--line); background:var(--panel); cursor:pointer; }
.practice-exercises label:has(input:checked) { border-color:var(--green); background:#e6eee8; box-shadow:inset 4px 0 var(--green); }
.practice-exercises input { margin-top:4px; accent-color:var(--green); }
.practice-exercises span { display:grid; gap:5px; }
.practice-exercises b { color:var(--ink); }
.practice-exercises small { color:var(--muted); font-size:13px; line-height:1.55; }
.practice-intro>.primary { margin-top:18px; }
.student-name-field { max-width:420px; margin:22px 0 4px; }
.practice-start-error,.practice-error { color:#9d4038; font-size:13px; }
.practice-chat { display:grid; grid-template-rows:auto minmax(220px,1fr) auto; min-height:565px; }
.practice-chat-head { padding-right:45px; }
.practice-chat-head h2 { margin-bottom:8px; }
.practice-messages { display:grid; align-content:start; gap:16px; max-height:390px; margin:25px 0; padding:20px; overflow-y:auto; border:1px solid var(--line); background:#eeece4; }
.practice-message { max-width:82%; padding:16px 18px; border:1px solid var(--line); background:var(--panel); }
.practice-message.has-table { width:100%; max-width:100%; }
.practice-message.student { justify-self:end; border-color:var(--ink); background:var(--ink); color:#fff; }
.practice-message-label { display:block; margin-bottom:8px; color:var(--green); font-size:12px; }
.practice-message.student .practice-message-label { color:#d6ab45; }
.practice-message-content { line-height:1.75; overflow-wrap:anywhere; }
.practice-message.student .practice-message-content { white-space:pre-wrap; }
.practice-message-content p { margin:0 0 12px; }
.practice-message-content p:last-child { margin-bottom:0; }
.practice-message-content h3,.practice-message-content h4,.practice-message-content h5,.practice-message-content h6 { margin:16px 0 8px; font-family:"Microsoft YaHei","PingFang SC",sans-serif; font-size:1em; line-height:1.6; }
.practice-message-content ul,.practice-message-content ol { margin:8px 0 14px; padding-left:24px; }
.practice-message-content li { margin:5px 0; }
.practice-message-content strong { color:inherit; }
.practice-message-content code { padding:2px 5px; background:#e7e5dc; font-family:Consolas,monospace; font-size:.92em; }
.practice-message-content pre { overflow-x:auto; margin:12px 0; padding:12px; background:#e7e5dc; }
.practice-message-content pre code { padding:0; }
.practice-message-content blockquote { margin:12px 0; padding:8px 14px; border-left:4px solid var(--amber); background:#f4efe1; color:var(--muted); }
.practice-message-content hr { margin:16px 0; border:0; border-top:1px solid var(--line); }
.markdown-table-wrap { width:100%; margin:12px 0; overflow-x:auto; }
.practice-message-content table { width:100%; min-width:520px; border-collapse:collapse; background:#fff; font-size:14px; }
.practice-message-content th,.practice-message-content td { padding:10px 12px; border:1px solid #aeb4b1; text-align:left; vertical-align:top; }
.practice-message-content th { background:#e3ebe5; color:#244d38; font-weight:700; }
.practice-message-content tbody tr:nth-child(even) { background:#f3f2ec; }
.practice-composer label { display:block; margin-bottom:8px; font-weight:700; }
.practice-composer textarea { width:100%; resize:vertical; padding:14px; border:1px solid var(--ink); background:var(--panel); color:var(--ink); font:inherit; line-height:1.6; }
.practice-error { min-height:20px; margin:5px 0; }
.practice-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.practice-submit-actions { display:flex; gap:10px; margin-left:auto; }
.practice-finish,.practice-export,.practice-send { min-height:46px; padding:11px 17px; font-weight:700; }
.practice-finish { border:1px solid #a95243; background:#f3ded7; color:#7f332d; }
.practice-export { border:1px solid #b77b14; background:#f3e1ad; color:#5d410d; }
.practice-send { min-width:112px; border:1px solid var(--green); background:var(--green); color:#fff; }
.practice-finish:hover { background:#ebc9bf; }
.practice-export:hover { background:#ead18b; }
.practice-send:hover { background:#33774f; }
.practice-finish:disabled,.practice-export:disabled,.practice-send:disabled { cursor:not-allowed; opacity:.45; }

@media (max-width:820px) {
  html { scroll-padding-top:60px; }
  .topbar { height:60px; padding:0 16px; }
  .topbar .brand img { height:31px; }
  .topbar>span { display:none; }
  main,footer { width:calc(100% - 34px); }
  .hero { min-height:0; display:block; padding:55px 0 70px; }
  .hero h1 { font-size:50px; }
  .subtitle { font-size:20px; }
  .today-card { margin-top:38px; }
  .journey { padding:50px 0 74px; }
  .section-heading { display:block; }
  .section-heading h2 { font-size:38px; }
  .section-heading>p { margin-top:18px; }
  .route-map { grid-template-columns:1fr; gap:0; margin-top:44px; padding-left:22px; }
  .route-line { top:30px; bottom:30px; left:52px; right:auto; border-top:0; border-left:3px solid #b9bcb7; }
  .map-point { min-height:105px; align-items:flex-start; padding-left:82px; text-align:left; }
  .map-point i { position:absolute; left:0; }
  .map-point.current i { left:-7px; }
  .map-point b { margin:5px 0 2px; }
  .map-status { position:absolute; top:17px; right:10px; margin:0; }
  .chapter { padding:70px 0 85px; }
  .chapter-marker { display:none; }
  .chapter-heading { grid-template-columns:1fr; gap:28px; }
  .chapter-heading h2 { font-size:54px; }
  .chapter-promise { font-size:21px; }
  .task-grid { grid-template-columns:1fr; }
  .task-step { padding:25px 8px; border-right:0; border-bottom:1px solid var(--line); }
  .task-step:last-child { border-bottom:0; }
  .task-step>p,.task-step>strong { min-height:0; }
  .closing { padding:80px 0; }
  .closing h2 { font-size:40px; }
  footer { display:flex; align-items:flex-start; flex-wrap:wrap; }
  footer span { display:block; margin:5px 0; }
  .wechat-contact { width:100%; justify-items:end; margin-top:12px; }
  .access-dialog form { padding:30px 22px 24px; }
  .exam-dialog { width:calc(100% - 16px); max-height:calc(100vh - 16px); }
  .exam-shell { min-height:calc(100vh - 18px); padding:28px 18px 24px; }
  .exam-head h2 { font-size:28px; }
  .question-nav { grid-template-columns:repeat(6,1fr); }
  .question-card { min-height:0; }
  .question-card h3 { font-size:17px; }
  .exam-actions { align-items:stretch; flex-direction:column; }
  .exam-actions>div { display:grid; width:100%; margin-left:0; grid-template-columns:1fr 1fr; }
  .exam-actions .primary,.exam-actions .quiet { width:100%; }
  .exam-error { text-align:left; }
  .score-line { font-size:54px; }
  .review-list summary { grid-template-columns:34px 1fr; }
  .review-list summary em { grid-column:1 / -1; }
  .review-copy { padding-left:16px; }
  .notice { right:17px; bottom:17px; left:17px; max-width:none; }
  .practice-dialog { width:calc(100% - 16px); max-height:calc(100vh - 16px); }
  .pretest-dialog { width:calc(100vw - 8px); height:calc(100vh - 8px); }
  .practice-shell { min-height:calc(100vh - 18px); padding:30px 18px 22px; }
  .practice-intro h2,.practice-chat h2 { font-size:29px; }
  .practice-brief { grid-template-columns:1fr; }
  .practice-brief article { border-right:0; border-bottom:1px solid var(--line); }
  .practice-brief article:last-child { border-bottom:0; }
  .practice-message { max-width:94%; }
  .practice-actions { display:grid; grid-template-columns:1fr; }
  .practice-finish { width:100%; }
  .practice-submit-actions { display:grid; width:100%; margin-left:0; grid-template-columns:1fr 1fr; }
  .practice-export,.practice-send { width:100%; min-width:0; }
}