/* 课程中心 · 设计语言见 design/设计语言.md，数值见 design/页面规格.md */
/* 中文里的弯引号用中文字体画成全角，不让 Inter 画成窄的西文引号 */
@font-face { font-family: "CJK Quotes"; src: local("PingFang SC"), local("Microsoft YaHei"), local("Noto Sans SC"), local("Noto Sans CJK SC"); unicode-range: U+2018-2019, U+201C-201D; }
:root {
  --paper: #FAF8F3;
  --paper-2: #F4F1EA;
  --card: #FFFFFF;
  --ink: #1C1D21;
  --ink-2: #4A4D55;
  --ink-3: #767A84;
  --line: #E7E3DA;
  --line-2: #F0EDE6;
  --shadow-1: 0 1px 2px rgba(28,29,33,.04), 0 6px 20px rgba(28,29,33,.05);
  --shadow-2: 0 2px 4px rgba(28,29,33,.05), 0 16px 40px rgba(28,29,33,.08);

  --accent: #D9622B; --accent-ink: #A8481C; --accent-soft: #FBEEE6;

  --say-bg: #1C1D21; --say-fg: #F5F3EE;
  --reply-label: #767A84;
  --pitfall: #B7791F; --pitfall-bg: #FBF4E6;
  --tip: #2E6FB7; --tip-bg: #EDF3FB;
  --done: #2F8F5B; --done-bg: #E8F4EC;
  --wrong: #B5452F; --wrong-bg: #FBEDE9;

  --r-card: 14px; --r-sm: 8px; --r-img: 10px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 96px;
  --w-text: 700px; --w-wide: 1080px; --w-rail: 288px; --w-note: 220px; --g-note: 48px;

  --f-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --f-sans: "CJK Quotes", "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", "PingFang SC", "Microsoft YaHei", ui-monospace, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
}
[data-accent="career"] { --accent: #0F7A74; --accent-ink: #0B5E59; --accent-soft: #E3F2F1; }
[data-accent="opc"]    { --accent: #5B4BC4; --accent-ink: #4637A6; --accent-soft: #EEEBFA; }
[data-accent="starter"]{ --accent: #D9622B; --accent-ink: #A8481C; --accent-soft: #FBEEE6; }
[data-accent="prompt"] { --accent: #2E63E6; --accent-ink: #1F4BB8; --accent-soft: #E9EFFD; }
[data-accent="aigc"]   { --accent: #C23B6B; --accent-ink: #9A2C54; --accent-soft: #FBE9F0; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.8 var(--f-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.ic { width: 1em; height: 1em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
strong, b { font-weight: 600; }
code { font: 400 .88em/1 var(--f-mono); background: var(--line-2); padding: .15em .4em; border-radius: 5px; }

/* ---------- 顶栏 ---------- */
.site-bar { height: 64px; display: flex; align-items: center; padding: 0 clamp(20px, 5vw, 64px); border-bottom: 1px solid var(--line); background: rgba(250,248,243,.9); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; }
.site-name { font: 700 18px/1 var(--f-serif); letter-spacing: .02em; color: var(--ink); text-decoration: none; }
.topbar { display: none; }

/* ---------- 课文页骨架 ---------- */
.shell { display: grid; grid-template-columns: var(--w-rail) minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--paper-2); border-right: 1px solid var(--line); padding: 28px 18px 48px 22px; scrollbar-width: thin; }
.rail-course { display: block; text-decoration: none; color: var(--ink); padding: 4px 8px 20px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.rail-kicker { display: block; font-size: 12px; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }
.rail-title { display: block; font: 700 20px/1.35 var(--f-serif); margin-top: 6px; }
.rail-list { list-style: none; margin: 0; padding: 0; }
.rc { margin: 0 0 14px; }
.rc-t { font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--ink-2); padding: 6px 8px; }
.rc-t span { color: var(--accent-ink); margin-right: 6px; font-weight: 600; }
.rc ul { list-style: none; margin: 2px 0 0; padding: 0; }
.rc-soon { font-size: 12.5px; color: var(--ink-3); padding: 0 8px 4px 8px; }
.rl { display: grid; grid-template-columns: 26px 1fr auto; gap: 6px; align-items: start; padding: 7px 8px; border-radius: 8px; font-size: 14px; line-height: 1.5; color: var(--ink); text-decoration: none; transition: background .15s; }
a.rl:hover { background: rgba(28,29,33,.045); }
.rl-n { font: 600 12px/1.9 var(--f-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rl.is-active { background: var(--card); box-shadow: var(--shadow-1); }
.rl.is-active .rl-n { color: var(--accent); }
.rl.is-active .rl-t { font-weight: 600; }
.rl.is-soon { color: var(--ink-3); }
.rl-soon { font-size: 11.5px; color: var(--ink-3); line-height: 1.9; white-space: nowrap; }
.rl-done { color: var(--done); opacity: 0; font-size: 14px; line-height: 1.6; }
.rl.is-done .rl-done { opacity: 1; }

.main { min-width: 0; padding: 72px clamp(24px, 4vw, 56px) 120px; }

/* 文章栅格：文字栏居中，讲解块可出栏；≥1440 右侧出现旁注栏 */
.article {
  --side: calc((var(--w-wide) - var(--w-text)) / 2);
  display: grid;
  grid-template-columns: [full-start] minmax(0, 1fr) [wide-start] minmax(0, var(--side)) [text-start] min(var(--w-text), 100%) [text-end] minmax(0, var(--side)) [wide-end] minmax(0, 1fr) [full-end];
}
.article > * { grid-column: text; min-width: 0; }
.article > .wide { grid-column: text; }  /* 图和讲解块与正文同一条栏线，不出栏 */
@media (min-width: 1440px) {
  .article {
    grid-template-columns: [full-start] minmax(0, 1fr) [wide-start text-start] var(--w-text) [text-end] var(--g-note) [note-start] var(--w-note) [note-end wide-end] minmax(0, 1fr) [full-end];
  }
}

/* ---------- 课文页头 ---------- */
.lesson-head { margin-bottom: var(--s7); }
.lh-kicker { display: flex; align-items: baseline; gap: 14px; }
.lh-num { font: 700 64px/1 var(--f-serif); color: var(--accent); letter-spacing: -.02em; }
.lh-meta { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.lesson-head h1 { font: 700 44px/1.25 var(--f-serif); margin: 18px 0 14px; letter-spacing: .01em; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.lh-benefit { font-size: 20px; line-height: 1.6; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.lh-can { margin-top: var(--s6); padding: 20px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.lh-can-label { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--accent-ink); margin-bottom: 8px; }
.lh-can ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lh-can li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.65; }
.lh-can li .ic { color: var(--accent); margin-top: .28em; }

/* 附加页：属于本节，但不进入学习进度 */
.extra-head { margin-bottom: var(--s7); }
.extra-kind { margin-top: var(--s6); color: var(--accent-ink); font-size: 14px; font-weight: 600; letter-spacing: .08em; }
.extra-head h1 { font: 700 44px/1.25 var(--f-serif); margin: var(--s2) 0 0; text-wrap: balance; overflow-wrap: anywhere; }
.extra-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font-size: 15px; text-decoration: none; }
.extra-back:hover { color: var(--accent-ink); text-decoration: underline; }
.extra-foot { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); }

/* ---------- 正文 ---------- */
.article p { margin: 0 0 1.05em; }
.article > p:last-child { margin-bottom: 0; }
.article ul, .article ol { padding-left: 1.3em; margin: 0 0 1.05em; }
.article li { margin: .2em 0; }
h2.sec { font: 700 27px/1.4 var(--f-serif); margin: var(--s8) 0 var(--s4); letter-spacing: .01em; text-wrap: balance; }
h2.sec::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--accent); margin-bottom: 18px; }
.article h3 { font: 600 19px/1.5 var(--f-sans); margin: var(--s6) 0 var(--s3); }
.with-note { position: relative; }
.with-note > p { margin-bottom: 1.05em; }
.margin-notes { display: grid; gap: 10px; margin: -.3em 0 1.2em; }
.margin-note { font-size: 14px; line-height: 1.7; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; margin: 0; }
.margin-note b { display: block; font-size: 13px; color: var(--accent-ink); margin-bottom: 2px; }
.term { background: none; border: 0; padding: 0; font: inherit; color: inherit; font-weight: 600; text-decoration: underline dotted var(--accent) 1.5px; text-underline-offset: 5px; cursor: help; }
@media (min-width: 1440px) {
  .article > .with-note { grid-column: wide; display: grid; grid-template-columns: subgrid; align-items: start; }
  .with-note > p { grid-column: text-start / text-end; grid-row: 1; }
  .margin-notes { grid-column: note-start / note-end; grid-row: 1; margin: .25em 0 0; gap: 14px; }
  .margin-note { background: transparent; border: 0; border-left: 2px solid var(--line); border-radius: 0; padding: 0 0 0 14px; }
  .term.is-lit + * , .margin-note.is-lit { border-left-color: var(--accent); }
}

/* 讲解块通用 */
.blk { margin: var(--s6) 0 var(--s6); }
.blk.tight { margin: var(--s4) 0; }
.blk + .blk { margin-top: var(--s5); }
.extra-card { display: grid; gap: var(--s1); width: 100%; min-width: 0; padding: var(--s5); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.extra-card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.extra-label { color: var(--accent-ink); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.extra-title { font: 700 20px/1.45 var(--f-serif); overflow-wrap: anywhere; }
.extra-desc { color: var(--ink-2); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.extra-go { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s2); color: var(--accent-ink); font-size: 14px; font-weight: 600; }
[data-reveal] { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) { .js [data-reveal]:not(.is-in) { opacity: 1; transform: none; } [data-reveal] { transition: none; } }

/* 成品展台 */
.showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.show-card { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-1); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.show-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.show-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: top center; background: var(--line-2); border-bottom: 1px solid var(--line); }
.show-card figcaption { padding: 14px 16px 16px; display: grid; gap: 4px; }
.show-card figcaption b { font-size: 16px; line-height: 1.45; }
.show-card figcaption span { font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* 大图 */
.fig { margin: 0; }
.fig img { width: 100%; border-radius: var(--r-img); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-1); }
.fig.is-portrait { background: var(--paper-2); border-radius: var(--r-img); padding: 32px 24px 20px; }
.fig.is-portrait img { display: block; width: min(420px, 100%); margin: 0 auto; }
.fig.is-portrait figcaption { width: min(420px, 100%); margin-inline: auto; }
.fig figcaption, .step-body figcaption { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--accent); }

/* 视频 */
.video-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video-grid.is-1 { grid-template-columns: minmax(0, 1fr); }
.video-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.video-item { min-width: 0; margin: 0; }
.video-item video { display: block; width: 100%; height: auto; aspect-ratio: var(--video-ratio); object-fit: contain; border-radius: var(--r-img); background: #17171B; }
.video-item figcaption { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
@media (max-width: 767px) { .video-grid { grid-template-columns: minmax(0, 1fr); } .video-grid.is-3 { grid-template-columns: minmax(0, 1fr); } }

/* 对比 */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cmp-side { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 24px; box-shadow: var(--shadow-1); }
.cmp-side.is-better { border: 1.5px solid var(--accent); }
.cmp-tag { position: absolute; top: -11px; right: 18px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 10px; line-height: 20px; }
.cmp-head { font-weight: 600; font-size: 16px; color: var(--ink-2); margin-bottom: 10px; letter-spacing: .02em; }
.cmp-body { font-size: 16px; line-height: 1.75; }
.cmp-body p:first-child { font-weight: 500; color: var(--ink); background: var(--paper); border-radius: var(--r-sm); padding: 12px 14px; font-size: 15px; }
.cmp-body p:last-child { margin-bottom: 0; color: var(--ink-2); font-size: 15px; }

/* 步骤 */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 18px; padding: 0 0 var(--s6); }
.step:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 58px; bottom: 6px; width: 1.5px; background: var(--line); }
.step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--line); display: grid; place-items: center; font: 700 26px/1 var(--f-serif); color: var(--accent); box-shadow: var(--shadow-1); transition: border-color .2s, color .2s, background .2s; }
.step-body { padding-top: 12px; padding-right: 44px; }
.step-title { font-size: 18px; font-weight: 600; line-height: 1.5; margin-bottom: 4px; }
.step-body p { margin: 0 0 .8em; }
.step-body img { border-radius: var(--r-img); border: 1px solid var(--line); box-shadow: var(--shadow-1); background: var(--card); margin-top: 6px; }
.step-done { position: absolute; right: 0; top: 14px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); display: grid; place-items: center; color: transparent; transition: all .2s; }
.step-done:hover { border-color: var(--done); color: var(--done); }
.step-done[aria-pressed="true"] { background: var(--done); border-color: var(--done); color: #fff; }
.step.is-done .step-num { border-color: var(--done); color: var(--done); background: var(--done-bg); }

/* 流程 */
.flow { display: flex; align-items: stretch; gap: 10px; }
.flow.is-long { flex-direction: column; gap: 6px; }
.flow.is-long .flow-arrow .h { display: none; }
.flow.is-long .flow-arrow .v { display: block; }
.flow-node { flex: 1 1 0; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 6px; }
.flow-node.is-edge { background: var(--accent-soft); border-color: transparent; }
.flow-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--accent-ink); }
.flow-text { font-size: 15.5px; font-weight: 600; line-height: 1.55; }
.flow-arrow { display: grid; place-items: center; color: var(--ink-3); font-size: 18px; }
.flow-arrow .v { display: none; }

/* 你说 / 它交回 */
.say { background: var(--say-bg); color: var(--say-fg); border-radius: var(--r-card); padding: 16px 20px 20px 22px; position: relative; box-shadow: var(--shadow-2); overflow: hidden; }
.say::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.say-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.say-label { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: rgba(245,243,238,.6); }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); color: var(--say-fg); border-radius: 999px; padding: 4px 12px; transition: background .15s; }
.copy-btn:hover { background: rgba(255,255,255,.18); }
.copy-btn.is-copied { background: var(--done); border-color: var(--done); }
.say-text { margin: 0; font: 400 16px/1.8 var(--f-sans); white-space: pre-wrap; word-break: break-word; }
.say.is-example { background: var(--paper-2); color: var(--ink); border: 1px dashed var(--line); box-shadow: none; }
.say.is-example .say-label { color: var(--ink-2); }
.say.is-example .copy-btn { background: var(--card); border-color: var(--line); color: var(--ink-2); }
.say.is-example .copy-btn:hover { background: var(--line-2); }
.say + .reply, .blk-say + .blk-reply { margin-top: 14px; }
.reply { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 22px 18px; box-shadow: var(--shadow-1); position: relative; }
.reply-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--reply-label); margin-bottom: 8px; }
.reply-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--done); }
.reply-body { font-size: 16px; line-height: 1.8; }
.reply-body p:last-child { margin-bottom: 0; }
.reply.is-clamped .reply-body { max-height: 22em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.reply-more { margin-top: 10px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; font-size: 13px; color: var(--ink-2); }
.reply-more:hover { border-color: var(--ink-3); }

/* 地图 */
.map { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; position: relative; }
.map::before { content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 1.5px; background: var(--line); }
.map-stage { position: relative; display: grid; gap: 6px; padding: 0 12px 0 0; }
.map-n { width: 46px; height: 46px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--line); display: grid; place-items: center; font: 700 16px/1 var(--f-sans); color: var(--ink-2); position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
.map-name { font: 700 17px/1.45 var(--f-serif); margin-top: 8px; }
.map-desc { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.map-stage.is-current .map-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.map-stage.is-current .map-name { color: var(--accent-ink); }

/* 地图：阶段多时排成卡片网格 */
.map.is-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.map.is-grid::before { display: none; }
.map.is-grid .map-stage { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; grid-template-columns: 38px 1fr; gap: 2px 12px; align-items: start; box-shadow: var(--shadow-1); }
.map.is-grid .map-n { width: 38px; height: 38px; font-size: 14px; grid-row: span 2; background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.map.is-grid .map-name { margin-top: 4px; font-size: 16.5px; }
.map.is-grid .map-stage.is-current { border-color: var(--accent); background: var(--accent-soft); position: relative; }
.map.is-grid .map-stage.is-current .map-n { background: var(--accent); color: #fff; }
.map-stage.is-current::after { content: "你在这里"; position: absolute; top: -10px; right: 14px; font-size: 12px; font-weight: 600; line-height: 20px; padding: 0 9px; border-radius: 999px; color: #fff; background: var(--accent); }

/* 动手做 */
.practice { background: var(--accent-soft); border-radius: 18px; padding: 24px 28px 22px; }
.practice-head { display: flex; align-items: center; gap: 10px; font: 700 19px/1.4 var(--f-serif); color: var(--accent-ink); margin-bottom: 10px; }
.practice-head .ic { font-size: 22px; }
.practice p { margin: 0 0 .8em; }
.practice ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.task { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.7); border-radius: 10px; padding: 10px 14px; margin: 0 !important; }
.task-box { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--accent); background: var(--card); color: transparent; display: grid; place-items: center; padding: 0; font-size: 14px; transition: all .15s; }
.task-box[aria-pressed="true"] { background: var(--accent); color: #fff; }
.task.is-done { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(28,29,33,.25); }

/* 小测 */
.quiz { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 24px; box-shadow: var(--shadow-1); }
.quiz-q { font-weight: 600; font-size: 17px; line-height: 1.6; margin-bottom: 14px; }
.quiz-opts { display: grid; gap: 10px; }
.quiz-opt { text-align: left; background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 16px; font-size: 16px; line-height: 1.6; transition: border-color .15s, background .15s; }
.quiz-opt:hover { border-color: var(--ink-3); }
.quiz-opt.is-right { border-color: var(--done); background: var(--done-bg); }
.quiz-opt.is-wrong { border-color: var(--wrong); background: var(--wrong-bg); }
.quiz-why { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--ink-2); border-top: 1px dashed var(--line); padding-top: 12px; }
.quiz-why b { display: block; color: var(--done); margin-bottom: 2px; }
.quiz-why.is-wrong b { color: var(--wrong); }

/* 提示 / 坑 */
.callout { display: flex; gap: 12px; align-items: flex-start; border-radius: 10px; padding: 14px 18px; font-size: 15.5px; line-height: 1.75; }
.callout .ic { font-size: 20px; margin-top: .2em; }
.callout p { margin: 0; }
.callout.tip { background: var(--tip-bg); border-left: 3px solid var(--tip); }
.callout.tip .ic { color: var(--tip); }
.callout.pitfall { background: var(--pitfall-bg); border-left: 3px solid var(--pitfall); }
.callout.pitfall .ic { color: var(--pitfall); }

/* 表格 */
.table-wrap { overflow-x: auto; margin: var(--s5) 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-1); }
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.65; }
th { text-align: left; font-weight: 600; background: var(--paper-2); color: var(--ink-2); font-size: 14px; }
th, td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; white-space: nowrap; }

/* 页尾 */
.lesson-foot { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line); display: grid; gap: 18px; }
.lesson-done { justify-self: start; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 18px; font-size: 15px; font-weight: 600; color: var(--ink-2); transition: all .15s; }
.lesson-done .ic { color: var(--ink-3); }
.lesson-done:hover { border-color: var(--done); }
.lesson-done[aria-pressed="true"] { background: var(--done); border-color: var(--done); color: #fff; }
.lesson-done[aria-pressed="true"] .ic { color: #fff; }
.next-card { position: relative; display: grid; gap: 4px; background: var(--say-bg); color: var(--say-fg); border-radius: 18px; padding: 24px 64px 26px 28px; text-decoration: none; box-shadow: var(--shadow-2); transition: transform .2s var(--ease); }
.next-card:hover { transform: translateY(-2px); }
.next-label { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: rgba(245,243,238,.6); }
.next-title { font: 700 24px/1.4 var(--f-serif); }
.next-benefit { font-size: 15px; color: rgba(245,243,238,.75); }
.next-arrow { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); font-size: 26px; color: var(--accent); }
.next-card.is-soon { background: var(--paper-2); color: var(--ink-3); box-shadow: none; }
.next-card.is-soon .next-label { color: var(--ink-3); }
.back-link { font-size: 14px; color: var(--ink-3); justify-self: start; }

/* ---------- 课程页 ---------- */
.course-hero { background: linear-gradient(180deg, var(--accent-soft), var(--paper)); border-bottom: 1px solid var(--line); padding: 88px 0 72px; }
.ch-wrap { width: min(960px, calc(100% - 40px)); margin: 0 auto; }
.course-kicker { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--ink-2); }
.course-kicker span { display: inline-flex; align-items: center; gap: 6px; }
.course-kicker .ic { color: var(--accent); }
.course-hero h1 { font: 700 clamp(36px, 5vw, 56px)/1.2 var(--f-serif); margin: 18px 0 14px; letter-spacing: .01em; }
.course-tagline { font-size: 20px; line-height: 1.65; color: var(--ink-2); max-width: 720px; margin: 0 0 28px; }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; padding: 12px 24px; border-radius: 999px; box-shadow: var(--shadow-2); transition: transform .2s var(--ease), background .2s; }
.btn:hover { transform: translateY(-1px); background: #000; }
.btn .ic { color: var(--accent); }
.course h2 { font: 700 26px/1.4 var(--f-serif); margin: 0 0 22px; }
.course-promise, .course-toc, .course-how { padding: 64px 0 0; }
.promise-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.promise-grid li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.7; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.promise-grid .ic { color: var(--accent); margin-top: .3em; }
.chapter { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1); margin-bottom: 16px; overflow: hidden; }
.ch-head { display: grid; grid-template-columns: 76px 1fr; gap: 2px 14px; padding: 20px 24px; align-items: baseline; }
.ch-n { grid-row: span 2; font: 700 14px/1.9 var(--f-sans); color: var(--accent-ink); letter-spacing: .04em; }
.ch-head h3 { margin: 0; font: 700 20px/1.5 var(--f-serif); }
.ch-head p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.ch-lessons { list-style: none; margin: 0; padding: 0 12px 12px; border-top: 1px solid var(--line-2); }
.cl { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 10px; text-decoration: none; color: var(--ink); transition: background .15s; }
a.cl:hover { background: var(--paper); }
.cl-n { font: 700 20px/1 var(--f-serif); color: var(--accent); text-align: center; }
.cl-main { display: grid; gap: 2px; }
.cl-t { font-size: 16.5px; font-weight: 600; line-height: 1.5; }
.cl-b { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.cl-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.cl.is-soon { color: var(--ink-3); }
.cl.is-soon .cl-n { color: var(--ink-3); }
.cl.is-soon .cl-t { font-weight: 500; }
.ch-soon { margin: 0; padding: 0 24px 20px 114px; font-size: 13.5px; color: var(--ink-3); }
.pill { font-size: 12px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; color: var(--ink-3); }
.course-how { padding-bottom: 96px; }
.course-how p { font-size: 17px; color: var(--ink-2); margin: 0; }

/* ---------- 首页 ---------- */


/* ---------- 看得见的成品：对话、表格、文档、文件夹 ---------- */
mark { background: linear-gradient(transparent 45%, color-mix(in srgb, var(--accent) 26%, transparent) 45%); color: inherit; padding: 0 1px; }
.fi { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 5px; font: 700 10.5px/1 var(--f-sans); color: #fff; letter-spacing: 0; }
.fi-x { background: #1F7A4D; } .fi-w { background: #2B5FB4; } .fi-p { background: #C8502A; } .fi-pdf { background: #B83A3A; font-size: 8px; }
.fi-img { background: #7A5AB8; } .fi-vid { background: #3C3F46; font-size: 9px; } .fi-txt { background: #8A8E97; } .fi-web { background: #0F7A74; }
.fi-dir { background: #E5B443; border-radius: 3px 6px 5px 5px; width: 24px; height: 19px; }

/* 对话实录 */
.chat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-2); overflow: hidden; }
.chat-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-3); font-weight: 600; }
.chat-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.chat-bar span { margin-left: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-body { padding: 22px 22px 24px; display: grid; gap: 14px; }
.ct p { margin: 0 0 .6em; } .ct p:last-child { margin-bottom: 0; }
.ct ul, .ct ol { margin: .2em 0 .6em; padding-left: 1.3em; }
.ct-me { display: flex; justify-content: flex-end; }
.ct-bubble { max-width: 86%; background: var(--say-bg); color: var(--say-fg); padding: 12px 16px; border-radius: 16px 16px 4px 16px; font-size: 15.5px; line-height: 1.75; }
.ct-bubble code { background: rgba(255,255,255,.12); color: inherit; }
.ct-ai { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.ct-avatar { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; font: 700 14px/1 var(--f-sans); }
.ct-msg { font-size: 15.5px; line-height: 1.8; padding-top: 3px; min-width: 0; }
.ct-msg .table-wrap { font-size: 14px; }
.ct-steps { margin-left: 42px; border-left: 2px solid var(--line); padding: 2px 0 2px 14px; font-size: 13.5px; color: var(--ink-3); }
.ct-steps summary { cursor: pointer; font-weight: 600; color: var(--ink-2); list-style: none; }
.ct-steps summary::-webkit-details-marker { display: none; }
.ct-steps summary::before { content: "▸"; display: inline-block; margin-right: 6px; transition: transform .15s; }
.ct-steps[open] summary::before { transform: rotate(90deg); }
.ct-steps ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; line-height: 1.6; }
.ct-steps li { margin: 0; }
.ct-steps li::before { content: "✓"; color: var(--done); margin-right: 8px; font-weight: 700; }
.ct-file { margin-left: 42px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); max-width: 460px; }
.ct-fname { font-weight: 600; font-size: 14.5px; }
.ct-fdesc { font-size: 13px; color: var(--ink-3); margin-left: auto; text-align: right; }
.ct-note { display: flex; gap: 10px; align-items: baseline; margin: 2px 0; padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-size: 14.5px; line-height: 1.7; border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.ct-note > span { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .06em; background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 9px; }

/* 表格文件 */
.sheet { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow: hidden; }
.sheet-bar, .doc-bar, .files-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.sheet-scroll { overflow-x: auto; scrollbar-width: thin; }
.sheet table { border-collapse: collapse; font: 400 13.5px/1.5 var(--f-sans); min-width: 100%; font-variant-numeric: tabular-nums; }
.sheet th, .sheet td { border: 1px solid #E3E6E1; padding: 6px 10px; text-align: left; white-space: nowrap; vertical-align: top; }
.sheet thead th { background: #F3F4F1; color: var(--ink-3); font-weight: 500; font-size: 12px; text-align: center; padding: 3px 10px; }
.sheet th.rn { background: #F3F4F1; color: var(--ink-3); font-weight: 500; font-size: 12px; text-align: center; width: 34px; min-width: 34px; padding: 6px 4px; }
.sheet tr.hdr td { background: #EEF5F0; font-weight: 600; color: var(--ink); }
.sheet td.num { text-align: right; }
.sheet td.c-bad { background: #FBE3DE; color: #9E2F1E; font-weight: 600; }
.sheet td.c-good { background: #E1F2E7; color: #1F6B41; font-weight: 600; }
.sheet td.c-warn { background: #FDF1D2; color: #8A5A07; font-weight: 600; }
.callout .co-title { font-weight: 700; margin: 0 0 4px; }
.sheet .m-bad, .sheet .m-good, .sheet .m-warn { font-weight: 600; padding: 0 3px; border-radius: 4px; }
.sheet .m-bad { background: #FBE3DE; color: #9E2F1E; }
.sheet .m-good { background: #E1F2E7; color: #1F6B41; }
.sheet .m-warn { background: #FDF1D2; color: #8A5A07; }
.sheet-tabs { border-top: 1px solid var(--line); background: #F3F4F1; padding: 0 12px; }
.sheet-tabs span { display: inline-block; background: var(--card); border: 1px solid var(--line); border-top: 0; padding: 4px 14px; font-size: 12.5px; font-weight: 600; color: #1F7A4D; border-bottom: 2px solid #1F7A4D; }
.sheet figcaption, .files figcaption { font-size: 14px; line-height: 1.7; color: var(--ink-2); padding: 12px 16px 14px; border-top: 1px solid var(--line-2); }

/* 文档 */
.doc { margin: 0; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.doc-page { background: var(--card); margin: 20px clamp(12px, 4vw, 40px) 24px; padding: clamp(22px, 4vw, 40px) clamp(20px, 5vw, 52px); box-shadow: 0 1px 3px rgba(28,29,33,.08), 0 8px 24px rgba(28,29,33,.06); font-size: 15px; line-height: 1.85; }
.doc-page h1, .doc-page h2, .doc-page h3, .doc-page h4 { font-family: var(--f-serif); margin: 1.2em 0 .5em; line-height: 1.4; }
.doc-page h1 { font-size: 22px; text-align: center; margin-top: 0; }
.doc-page h2, .doc-page h2.sec { font-size: 18px; margin: 1.3em 0 .5em; }
.doc-page h2.sec::before { display: none; }
.doc-page h3, .doc-page h4 { font-size: 16px; }
.doc-page > :first-child { margin-top: 0; }
.doc-page > :last-child { margin-bottom: 0; }
.doc-page .table-wrap { font-size: 13.5px; }
.article > blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); font: 600 20px/1.7 var(--f-serif); color: var(--ink); }
.article > blockquote p { margin: 0; }
.doc-page blockquote { margin: .8em 0; padding: 6px 14px; border-left: 3px solid var(--line); color: var(--ink-2); }

/* 文件夹 */
.files { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow: hidden; }
.files ul { list-style: none; margin: 0; padding: 6px 0; max-height: 420px; overflow-y: auto; }
.files li { display: flex; align-items: center; gap: 12px; padding: 7px 16px; font-size: 14.5px; line-height: 1.5; margin: 0; }
.files li:nth-child(even) { background: #FBFAF7; }
.fl-name { min-width: 0; overflow-wrap: anywhere; }
.fl-meta { margin-left: auto; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }

/* 拆开看指令 */
.anat { background: var(--say-bg); color: var(--say-fg); border-radius: var(--r-card); padding: 16px 20px 18px; box-shadow: var(--shadow-2); }
.anat ol { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.anat li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: baseline; margin: 0; }
.an-tag { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; border-radius: 6px; padding: 3px 8px; text-align: center; color: #1C1D21; }
.an-text { font-size: 16px; line-height: 1.75; }
.an-0 .an-tag { background: #F2A27E; } .an-1 .an-tag { background: #9CC7E8; } .an-2 .an-tag { background: #B6DDA2; }
.an-3 .an-tag { background: #F2D27E; } .an-4 .an-tag { background: #CDB6EC; } .an-5 .an-tag { background: #E8B0C4; }

/* 分情况看 */
.tab-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tab { flex: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px 10px; font-size: 15px; font-weight: 600; color: var(--ink-3); margin-bottom: -1px; }
.tab[aria-selected="true"] { color: var(--accent-ink); border-bottom-color: var(--accent); }
.tab:hover { color: var(--ink); }
.tab-panel > .blk:first-child { margin-top: 0; }
.tab-panel > .blk:last-child { margin-bottom: 0; }

/* 真实案例 */
.case { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: var(--r-card); padding: 22px 26px 22px; box-shadow: var(--shadow-1); }
.case-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); }
.case-title { font: 700 21px/1.45 var(--f-serif); margin: 6px 0 12px; }
.case-body > p:last-child { margin-bottom: 0; }
.case-body .blk { margin: var(--s5) 0; }

/* 收起来的内容 */
.more { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.more summary { cursor: pointer; padding: 14px 20px; font-weight: 600; font-size: 15.5px; color: var(--accent-ink); list-style: none; display: flex; align-items: center; gap: 10px; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); font-weight: 700; }
.more[open] summary::before { content: "−"; }
.more-body { padding: 0 20px 20px; }
.more-body > .blk:first-child { margin-top: 4px; }

@media (max-width: 767px) {
  .chat-body { padding: 16px 14px 18px; }
  .ct-bubble { max-width: 94%; }
  .ct-steps, .ct-file { margin-left: 0; }
  .ct-file { flex-wrap: wrap; }
  .ct-fdesc { margin-left: 32px; text-align: left; }
  .anat li { grid-template-columns: 1fr; gap: 4px; }
  .an-tag { justify-self: start; }
  .case { padding: 18px 18px; }
  .doc-page { margin: 12px 10px 14px; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1279px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .topbar { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgba(250,248,243,.92); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 30; }
  .rail-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
  .topbar-title { font: 700 16px/1 var(--f-serif); color: var(--ink); text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .topbar-home { margin-left: auto; font-size: 13px; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
  .rail { position: fixed; left: 0; top: 0; bottom: 0; width: min(320px, 86vw); height: auto; z-index: 50; transform: translateX(-102%); transition: transform .3s var(--ease); box-shadow: var(--shadow-2); }
  .rail.is-open { transform: none; }
  .scrim { position: fixed; inset: 0; background: rgba(28,29,33,.32); z-index: 40; }
  .main { padding-top: 48px; }
}
@media (max-width: 1024px) {
}
@media (max-width: 767px) {
  .table-wrap.is-cards { overflow: visible; }
  .table-wrap.is-cards thead { display: none; }
  .table-wrap.is-cards table, .table-wrap.is-cards tbody, .table-wrap.is-cards tr, .table-wrap.is-cards td { display: block; width: auto; }
  .table-wrap.is-cards tr { padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .table-wrap.is-cards tr:last-child { border-bottom: 0; }
  .table-wrap.is-cards td { padding: 0; border: 0; }
  .table-wrap.is-cards td + td { margin-top: 8px; }
  .table-wrap.is-cards td:first-child { font-size: 16.5px; margin-bottom: 4px; }
  .table-wrap.is-cards td + td::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 2px; }
  body { font-size: 16px; }
  .main { padding: 32px 20px 96px; }
  .lh-num { font-size: 48px; }
  .lesson-head h1 { font-size: 30px; }
  .extra-head h1 { font-size: 30px; }
  .extra-card { padding: var(--s4); }
  .lh-benefit { font-size: 17px; }
  h2.sec { font-size: 22px; margin-top: var(--s7); }
  .showcase { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; gap: 14px; margin: 0 -20px; padding: 2px 20px 10px; scrollbar-width: none; }
  .show-card { flex: 0 0 80%; scroll-snap-align: start; }
  .compare { grid-template-columns: 1fr; gap: 22px; }
  .step { grid-template-columns: 42px minmax(0, 1fr); gap: 0 12px; }
  .step-num { width: 42px; height: 42px; font-size: 20px; }
  .step:not(:last-child)::before { left: 20px; top: 44px; }
  .step-body { padding-top: 6px; padding-right: 0; }
  .step-done { left: 6px; right: auto; top: 50px; width: 30px; height: 30px; background: var(--paper); }
  .step:not(:last-child)::before { top: 86px; }
  .flow { flex-direction: column; gap: 6px; }
  .flow-arrow .h { display: none; }
  .flow-arrow .v { display: block; }
  .map { grid-auto-flow: row; gap: 18px; }
  .map.is-grid { grid-template-columns: 1fr; gap: 10px; }
  .map::before { left: 22px; right: auto; top: 20px; bottom: 20px; width: 1.5px; height: auto; }
  .map-stage { grid-template-columns: 46px 1fr; gap: 0 14px; padding: 0; }
  .map-n { grid-row: span 2; }
  .map-name { margin-top: 2px; }
  .practice { padding: 20px 18px; }
  .next-card { padding: 20px 52px 22px 22px; }
  .next-title { font-size: 20px; }
  .promise-grid { grid-template-columns: 1fr; }
  .course-hero { padding: 56px 0 48px; }
  .course-tagline { font-size: 17px; }
  .ch-head { grid-template-columns: 1fr; padding: 18px; }
  .ch-n { grid-row: auto; }
  .ch-soon { padding: 0 18px 18px; }
  .cl { grid-template-columns: 36px minmax(0, 1fr); }
  .cl-meta { grid-column: 2; }
}
.article .map, .article .steps, .article .quiz-opts, .article .showcase { padding-left: 0; }

/* 看大图 */
.zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(20,20,24,.88); overflow: auto; display: grid; place-items: center; padding: 24px; cursor: zoom-out; animation: fade-in .2s var(--ease); }
.lightbox img { max-width: min(100%, 1600px); height: auto; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
@media (max-width: 767px) { .lightbox { place-items: start; padding: 16px 0; } .lightbox img { max-width: none; width: 200vw; border-radius: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- 首页：课程中心 ---------- */
.home-bar { height: 56px; justify-content: space-between; }
.home-bar .site-name { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.site-mark { width: 18px; height: 18px; border-radius: 6px; background: conic-gradient(from 210deg, #D9622B, #2E63E6, #0F7A74, #5B4BC4, #D9622B); box-shadow: inset 0 0 0 4px var(--paper); outline: 1px solid var(--line); }
.home-nav { display: flex; gap: 22px; font-size: 14.5px; }
.home-nav a { color: var(--ink-2); text-decoration: none; }
.home-nav a:hover { color: var(--ink); }
.home { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding-bottom: 32px; }
.home-intro { padding: 40px 0 30px; display: grid; gap: 10px; }
.home-intro h1 { font: 700 clamp(24px, 2.7vw, 34px)/1.35 var(--f-serif); margin: 0; letter-spacing: .01em; text-wrap: balance; }
.home-intro h1 span { display: inline-block; }
.home-intro p { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); margin: 0; max-width: 46em; }
.shelf { margin-top: 12px; }
.shelf + .shelf { margin-top: 64px; }
.shelf-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.shelf-head h2 { font: 700 22px/1.4 var(--f-serif); margin: 0; }
.shelf-head span { font-size: 14px; color: var(--ink-3); }

.fc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 28px; }
.fc { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-1); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.fc:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.fc-cover { position: relative; min-height: 260px; padding: 30px 32px 28px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; color: #fff; text-decoration: none;
  background:
    radial-gradient(60% 85% at 95% 110%, color-mix(in srgb, var(--accent) 62%, transparent), transparent 62%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 1px, transparent 1px 15px),
    linear-gradient(180deg, #16171C, #101114); }
.fc-num { position: absolute; right: 14px; top: -26px; font: 800 210px/1 var(--f-sans); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.13); pointer-events: none; }
.fc-kicker { position: absolute; top: 26px; left: 32px; display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.72); }
.fc-kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); }
.fc-title { position: relative; font: 700 36px/1.25 var(--f-serif); letter-spacing: .01em; }
.fc-tagline { position: relative; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.8); max-width: 30em; }
.fc-facts { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fc-facts span { font-size: 12.5px; line-height: 22px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.86); }
.fc-body { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 24px 32px 28px; }
.fc-for { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.fc-for .ic { color: var(--accent); margin-top: .25em; flex: none; }
.fc-promise { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fc-promise li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.6; }
.fc-promise .ic { color: var(--accent); margin-top: .3em; flex: none; }
.fc-toc { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.fc-toc-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--ink-3); }
.fc-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fc-toc li { font-size: 13px; line-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.fc-actions { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.fc-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; transition: background .18s var(--ease); }
.fc-btn:hover { background: var(--accent-ink); }
.fc-link { font-size: 14.5px; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.fc-link:hover { color: var(--ink); border-color: var(--ink-3); }

.ac-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 24px; }
.ac { display: grid; grid-template-columns: 210px 1fr; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.ac-cover { position: relative; padding: 22px 22px 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; color: #fff;
  background: radial-gradient(90% 70% at 100% 110%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 65%), repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 13px), #17181D; }
.ac-tag { position: absolute; top: 18px; left: 22px; font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 70%, #fff); color: rgba(255,255,255,.9); }
.ac-title { font: 700 21px/1.35 var(--f-serif); }
.ac-tagline { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.72); }
.ac-body { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 22px; }
.ac-body .fc-promise li { font-size: 14.5px; }
.ac-note { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); padding: 10px 12px; border-radius: 10px; background: var(--paper-2); }
.ac-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; color: var(--accent-ink); text-decoration: none; }
.ac-go:hover { text-decoration: underline; }

.home-path { margin-top: 72px; }
.home-path h2 { font: 700 22px/1.4 var(--f-serif); margin: 0 0 18px; }
.home-path ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 10px; }
.home-path li:not(.hp-arrow) { flex: 1; display: grid; align-content: start; gap: 6px; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; border-top: 3px solid var(--accent); }
.home-path .hp-arrow { flex: none; display: grid; place-items: center; color: var(--ink-3); }
.hp-n { font: 600 12px/1 var(--f-sans); letter-spacing: .08em; color: var(--accent-ink); }
.home-path li a, .hp-t { font: 700 18px/1.45 var(--f-serif); color: var(--ink); text-decoration: none; }
.home-path li a:hover { color: var(--accent-ink); }
.hp-note { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.home-foot { margin-top: 72px; padding: 24px 0 8px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }

@media (max-width: 760px) {
  .home { width: calc(100% - 32px); }
  .home-intro { padding: 24px 0 20px; }
  .home-intro p { font-size: 15.5px; }
  .home-nav { gap: 16px; font-size: 14px; }
  .fc-cover { min-height: 220px; padding: 26px 22px 22px; }
  .fc-kicker { left: 22px; top: 22px; }
  .fc-num { font-size: 150px; top: -14px; }
  .fc-title { font-size: 30px; }
  .fc-body { padding: 20px 22px 24px; }
  .ac { grid-template-columns: 1fr; }
  .ac-cover { min-height: 130px; }
  .home-path ol { flex-direction: column; }
  .home-path .hp-arrow { transform: rotate(90deg); padding: 2px 0; }
}
@media (prefers-reduced-motion: reduce) { .fc, .fc:hover { transition: none; transform: none; } }

/* ================= v2 · 编程课先行：白底、无衬线、以成品和步骤图为主（老板认可后推到全站） ================= */
html[data-accent="opc"] {
  --paper: #FFFFFF; --paper-2: #F5F5F8; --card: #FFFFFF;
  --ink: #15151C; --ink-2: #4A4A57; --ink-3: #8B8B98;
  --line: #E9E9EF; --line-2: #F2F2F6;
  --shadow-1: 0 1px 2px rgba(20,20,40,.04), 0 8px 24px rgba(20,20,40,.06);
  --shadow-2: 0 2px 6px rgba(20,20,40,.06), 0 24px 60px rgba(40,30,120,.12);
  --r-card: 20px; --r-img: 16px;
  --w-text: 760px; --w-wide: 760px;
  --grad: linear-gradient(135deg, #6C5CE7 0%, #8E6CF6 55%, #C77DDB 100%);
  --glow: radial-gradient(60% 80% at 80% 20%, rgba(142,108,246,.18), transparent 70%), radial-gradient(50% 70% at 10% 90%, rgba(255,170,120,.14), transparent 70%);
}
html[data-accent="opc"] body { background: #fff; }
/* 宽块左右对称出栏，不再只往右伸 */
@media (min-width: 1440px) {
  html[data-accent="opc"] .article { grid-template-columns: [full-start] minmax(0, 1fr) [wide-start] minmax(0, var(--side)) [text-start] min(var(--w-text), 100%) [text-end] minmax(0, var(--side)) [wide-end] minmax(0, 1fr) [full-end]; }
}
html[data-accent="opc"] .lh-num { font: 700 15px/1 var(--f-sans); color: #fff; background: var(--grad); border-radius: 999px; padding: 7px 12px; letter-spacing: .02em; }
html[data-accent="opc"] .lh-kicker { align-items: center; gap: 10px; }
html[data-accent="opc"] .lesson-head h1 { font: 800 46px/1.18 var(--f-sans); letter-spacing: -.02em; margin: 20px 0 14px; }
html[data-accent="opc"] .lh-benefit { font-size: 19px; color: var(--ink-2); }
html[data-accent="opc"] .lh-can { background: none; border: 0; box-shadow: none; padding: 0; margin-top: 22px; }
html[data-accent="opc"] .lh-can-label { display: none; }
html[data-accent="opc"] .lh-can ul { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-accent="opc"] .lh-can li { font-size: 14.5px; line-height: 1.4; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); align-items: center; }
html[data-accent="opc"] .lh-can li .ic { margin-top: 0; }
html[data-accent="opc"] h2.sec { font: 800 28px/1.3 var(--f-sans); letter-spacing: -.01em; margin: 88px 0 20px; }
html[data-accent="opc"] h2.sec::before { width: 36px; height: 4px; background: var(--grad); }
html[data-accent="opc"] .article h3 { font-weight: 700; }
html[data-accent="opc"] .fig img, html[data-accent="opc"] .stp-main img { border-radius: var(--r-img); border: 1px solid var(--line); box-shadow: var(--shadow-1); }

/* 能点的成品 */
.demo { position: relative; display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: center; padding: 40px 40px; border-radius: 28px; background: var(--glow), linear-gradient(180deg, #FAF9FF, #F4F2FD); border: 1px solid #ECE9FB; overflow: hidden; }
.demo-copy p:first-child { font-size: 21px; line-height: 1.65; color: var(--ink); font-weight: 500; }
.demo-copy ul { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 10px; }
.demo-copy li { position: relative; padding-left: 28px; font-size: 16px; color: var(--ink-2); }
.demo-copy li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 14px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px rgba(142,108,246,.15); }
.demo-open { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; }
.demo-open:hover { background: #2B2B3A; }
.demo-phone { justify-self: center; width: 300px; padding: 12px; border-radius: 48px; background: #16161C; box-shadow: 0 30px 80px rgba(40,30,120,.28), inset 0 0 0 2px #2E2E38; }
.demo-screen { position: relative; height: 640px; border-radius: 36px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.demo-screen iframe { flex: 1; width: 100%; border: 0; display: block; }
.demo-nav { position: absolute; top: 10px; right: 10px; z-index: 2; pointer-events: none; }
.demo-capsule { display: inline-flex; gap: 10px; align-items: center; height: 28px; padding: 0 11px; border-radius: 14px; border: 1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.7); }
.demo-capsule i { width: 18px; height: 4px; border-radius: 2px; background: #222; }
.demo-capsule i + i { width: 14px; height: 14px; border-radius: 50%; background: none; border: 2px solid #222; }

/* 准备 */
.need { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.need li { margin: 0; padding: 20px 22px; border-radius: var(--r-card); background: var(--paper-2); display: grid; gap: 4px; }
.need b { font-size: 16px; }
.need span { font-size: 15px; color: var(--ink-2); line-height: 1.65; }

/* 一步 */
.stp { display: grid; grid-template-columns: 44px 1fr; gap: 20px; position: relative; padding-bottom: 8px; }
.stp-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grad, var(--accent)); color: #fff; font: 700 18px/1 var(--f-sans); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); position: relative; z-index: 1; }
.article .stp-title { font: 700 22px/1.4 var(--f-sans); margin: 8px 0 8px; letter-spacing: -.01em; }
.stp-main p { color: var(--ink-2); }
.stp-main img { margin: 18px 0 14px; width: 100%; }
.article > .blk-step + .blk-prompt, .article > .blk-step + .blk-say { margin-left: 64px; margin-top: 4px; }
.article > .blk-step { margin-bottom: 12px; }
.blk-say + .blk-say { margin-top: 10px; margin-left: 64px; }

/* 复制发给 WorkBuddy */
.prompt { border-radius: var(--r-card); background: #fff; border: 1.5px solid color-mix(in srgb, var(--accent) 28%, #fff); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 10%, transparent); overflow: hidden; }
.prompt-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 0; }
.prompt-label { font-size: 13px; font-weight: 600; color: var(--accent-ink); letter-spacing: .02em; }
.prompt-att { font-size: 13px; padding: 4px 10px; border-radius: 8px; background: var(--paper-2); color: var(--ink-2); }
.prompt .say-text { margin: 0; padding: 10px 22px 4px; font: 400 16px/1.8 var(--f-sans); white-space: pre-wrap; color: var(--ink); background: none; }
.prompt-foot { display: flex; justify-content: flex-end; padding: 8px 14px 14px; }
.prompt .copy-btn, html[data-accent="opc"] .say .copy-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--grad, var(--accent)); color: #fff; font: 600 14px/1 var(--f-sans); cursor: pointer; }
.prompt .copy-btn.is-copied, html[data-accent="opc"] .say .copy-btn.is-copied { background: var(--done); }

/* 短原话：一句一行的气泡 */
html[data-accent="opc"] .say { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 20px; border-radius: 18px; background: var(--paper-2); color: var(--ink); border: 0 !important; box-shadow: none; }
html[data-accent="opc"] .say::before { display: none; }
html[data-accent="opc"] .say-top { order: 2; margin: 0; padding: 0; background: none; border: 0; }
html[data-accent="opc"] .say-label { display: none; }
html[data-accent="opc"] .say-text { order: 1; flex: 1; margin: 0; padding: 0; background: none; color: var(--ink); font: 500 16px/1.7 var(--f-sans); white-space: pre-wrap; }
html[data-accent="opc"] .say .copy-btn { min-height: 34px; padding: 0 14px; font-size: 13px; }

/* 方法四格 */
.method { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.method li { margin: 0; position: relative; padding: 22px 20px 20px; border-radius: var(--r-card); background: var(--paper-2); display: grid; gap: 6px; align-content: start; }
.method.is-seq li:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); display: grid; place-items: center; font-size: 12px; color: var(--accent); z-index: 1; }
.m-n { font: 700 13px/1 var(--f-sans); color: var(--accent); }
.method b { font-size: 17px; }
.method span:last-child { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
.article > .blk-method, .article > .blk-demo { grid-column: text; }

@media (max-width: 900px) {
  .demo { grid-template-columns: 1fr; padding: 28px 20px; gap: 28px; border-radius: 22px; }
  .demo-phone { width: min(320px, 100%); }
  .demo-screen { height: 600px; }
  .method { grid-template-columns: 1fr 1fr; }
  .method li::after { display: none !important; }
}
@media (max-width: 767px) {
  html[data-accent="opc"] .lesson-head h1 { font-size: 32px; }
  .need { grid-template-columns: 1fr; }
  .stp { grid-template-columns: 36px 1fr; gap: 14px; }
  .stp-n { width: 36px; height: 36px; font-size: 16px; }
  .article > .blk-step + .blk-prompt, .article > .blk-step + .blk-say, .blk-say + .blk-say { margin-left: 0; }
  .demo-copy p:first-child { font-size: 18px; }
}

/* 并排能点的手机 */
.duo { display: flex; justify-content: center; gap: 40px; padding: 40px 24px 32px; border-radius: 28px; background: var(--glow), linear-gradient(180deg, #FAF9FF, #F4F2FD); border: 1px solid #ECE9FB; }
.duo-item { margin: 0; display: grid; justify-items: center; gap: 18px; }
.duo-item figcaption { text-align: center; display: grid; gap: 2px; }
.duo-item figcaption b { font-size: 17px; }
.duo-item figcaption span { font-size: 14.5px; color: var(--ink-2); }
.duo .demo-phone { width: 290px; }
.duo .demo-screen { height: 600px; }
.article > .blk-duo { grid-column: text; }
.duo:has(> .duo-item:nth-child(3)) { gap: 18px; padding-left: 12px; padding-right: 12px; }
.duo:has(> .duo-item:nth-child(3)) .demo-phone { zoom: .76; }
@media (max-width: 900px) {
  .duo { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; padding: 24px 20px; margin: 0 -20px; border-radius: 0; border-width: 1px 0; }
  .duo-item { scroll-snap-align: center; flex: none; }
  .duo .demo-phone { width: 270px; }
  .duo .demo-screen { height: 540px; }
  .duo:has(> .duo-item:nth-child(3)) .demo-phone { zoom: 1; }
}
html[data-accent="opc"] .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 767px) { html[data-accent="opc"] .showcase { display: flex; } }

/* ---------- 编程课 v2 收敛：主色只留给节号、序号、链接和一处重点；一种字体；图只一层细线 ---------- */
.article .lh-can ul { padding-left: 0; margin-bottom: 0; }
html[data-accent="opc"] :is(.lesson-head h1, h2.sec, .article .stp-title) { letter-spacing: 0; }
html[data-accent="opc"] :is(.practice-head, .next-title, .extra-title, .extra-head h1, .case-title, .map-name, .rail-title, .topbar-title, .site-name) { font-family: var(--f-sans); font-weight: 700; letter-spacing: 0; }
html[data-accent="opc"] .extra-head h1 { font-weight: 800; }
.need:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .need:has(> li:nth-child(3):last-child) { grid-template-columns: 1fr; } }
.need li { align-content: start; }
html[data-accent="opc"] h2.sec::before { width: 28px; height: 3px; background: var(--accent); }
html[data-accent="opc"] :is(.fig img, .stp-main img, .article p > img, .tab-panel p > img) { border-radius: var(--r-img); border: 1px solid var(--line); box-shadow: none; background: #fff; }
html[data-accent="opc"] .fig figcaption { border-left: 0; padding-left: 0; margin-top: 10px; font-size: 14px; color: var(--ink-3); }
html[data-accent="opc"] .prompt { border: 1px solid var(--line); box-shadow: var(--shadow-1); }
html[data-accent="opc"] .prompt-label { color: var(--ink-3); }
html[data-accent="opc"] .prompt .copy-btn { background: var(--ink); }
html[data-accent="opc"] .say .copy-btn { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
html[data-accent="opc"] .practice { background: var(--paper-2); }
html[data-accent="opc"] .practice-head { color: var(--ink); font-size: 18px; }
html[data-accent="opc"] .practice-head .ic { color: var(--accent); }
html[data-accent="opc"] .ct-bubble { background: #EFEEF6; color: var(--ink); }
html[data-accent="opc"] .ct-note { margin-left: 42px; background: none; border: 0; border-left: 2px solid var(--accent); border-radius: 0; padding: 0 0 0 12px; color: var(--ink-2); font-size: 14px; }
html[data-accent="opc"] .ct-note > span { background: none; color: var(--accent-ink); padding: 0; font-size: 12.5px; }
@media (max-width: 767px) { html[data-accent="opc"] .ct-note { margin-left: 0; } }
td:first-child { white-space: normal; min-width: 6em; }
.sheet td { white-space: normal; min-width: 4.5em; }
html[data-accent="opc"] .extra-card { border-left: 1px solid var(--line); }
@media (max-width: 1279px) {
  .rail:not(.is-open) { box-shadow: none; }
  html[data-accent="opc"] .topbar { background: rgba(255,255,255,.9); }
}
@media (max-width: 767px) { .tab-list { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); } }

@media (max-width: 767px) {
  .sheet td { white-space: nowrap; min-width: 0; }
  .prompt-top { flex-wrap: wrap; row-gap: 6px; }
  .prompt-att { white-space: nowrap; }
}

/* 第三章评审（09-26）：方法卡按条数排、并列的不画箭头；文件夹块手机上换行；标题正常断行；"制作中"的下一节说明看得见 */
.method:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .method:not(.is-seq), .method:not(.is-seq):has(> li:nth-child(3):last-child) { grid-template-columns: 1fr; } }
.fl-meta { min-width: 0; text-align: right; }
@media (max-width: 767px) {
  .files li { flex-wrap: wrap; row-gap: 2px; }
  .fl-meta { white-space: normal; margin-left: 34px; flex-basis: 100%; text-align: left; }
}
html[data-accent="opc"] .files li:nth-child(even) { background: var(--line-2); }
html[data-accent="opc"] .lesson-head h1 { word-break: normal; }
.next-card.is-soon .next-benefit { color: var(--ink-3); }

/* 分页标签要一眼看得出能点（老板 09-27："很多人不知道有这个标签可以切换"）：做成一排按钮 */
.tab-list { border-bottom: 0; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.tab { border: 1px solid var(--line); border-radius: 999px; background: var(--card); padding: 8px 16px; margin: 0; color: var(--ink-2); cursor: pointer; }
.tab:hover { border-color: var(--accent); color: var(--accent-ink); }
.tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 767px) { .tab-list { -webkit-mask-image: none; mask-image: none; } }
/* 分页块加外框：标签和内容是一个整体（老板 09-27："带标签切换的你好歹加个外框架啊"） */
.tabs { border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 22px 8px; background: var(--card); }
.tabs .tab-list { margin: 0 -22px 18px; padding: 0 22px 14px; border-bottom: 1px solid var(--line-2); }
@media (max-width: 767px) { .tabs { padding: 14px 14px 4px; } .tabs .tab-list { margin: 0 -14px 14px; padding: 0 14px 12px; } }

.prompt.is-clamped .say-text { max-height: 7.4em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.prompt-foot { gap: 10px; align-items: center; }
.prompt-more { margin: 0 auto 0 8px; }

/* 就业课：手机上三列以上的表改成一行一张卡（宽表左右划看不全，是学员读课时最烦的一处） */
@media (max-width: 767px) {
  html[data-accent="career"] .sheet-wide table, html[data-accent="career"] .sheet-wide tbody, html[data-accent="career"] .sheet-wide tr, html[data-accent="career"] .sheet-wide td { display: block; width: auto; min-width: 0; }
  html[data-accent="career"] .sheet-wide thead, html[data-accent="career"] .sheet-wide th.rn, html[data-accent="career"] .sheet-wide tr.hdr { display: none; }
  html[data-accent="career"] .sheet-wide tr { padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
  html[data-accent="career"] .sheet-wide td { border: 0; padding: 2px 0; white-space: normal; font-size: 14.5px; }
  html[data-accent="career"] .sheet-wide td:first-of-type { font-weight: 600; font-size: 15.5px; padding-bottom: 4px; }
  html[data-accent="career"] .sheet-wide td:not(:first-of-type)::before { content: attr(data-label) "："; color: var(--ink-3); }
  html[data-accent="career"] .sheet-wide td.c-bad, html[data-accent="career"] .sheet-wide td.c-good, html[data-accent="career"] .sheet-wide td.c-warn { padding: 3px 8px; border-radius: 6px; margin: 2px 0; }
  html[data-accent="career"] .sheet-wide td.num { text-align: left; }
}

/* 就业课：岗位选择条 */
.role-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 28px; }
.role-label { font-size: 13px; color: var(--ink-3); margin-right: 4px; }
.role-jump { margin-left: auto; background: none; border: 0; padding: 4px 2px; font: 600 13.5px/1.4 var(--f-sans); color: var(--accent-ink); cursor: pointer; }
.role-chip { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 999px; padding: 5px 12px; font: 500 13.5px/1.2 var(--f-sans); cursor: pointer; }
.role-chip:hover { border-color: var(--ink-3); }
.role-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.new-course { box-sizing: border-box; margin: 32px auto 40px; width: calc(100% - 40px); max-width: var(--w-wide); padding: 28px 24px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.new-course-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 14px; font-weight: 600; }
.new-course h1 { margin: 20px 0 12px; color: var(--ink); font: 700 clamp(28px, 4.5vw, 46px)/1.35 var(--f-serif); text-wrap: balance; }
.new-course-tagline { max-width: 40em; margin: 0; color: var(--ink-2); font-size: 18px; line-height: 1.8; }
.new-course-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 24px; }
.new-course-status { margin: 0; color: var(--ink-2); font-size: 15px; }
.new-course .btn { min-height: 44px; }
.new-course-description { max-width: 42em; color: var(--ink-2); line-height: 1.9; margin: 28px 0; }
.new-course-detail { margin-top: 48px; }
@media (min-width: 768px) { .new-course { margin-top: 48px; padding: 40px 44px; } .new-course-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }