/* base.css — 第一帧课程公开站共享样式系统（设计令牌 + 基础排版 + 布局 + 组件 + 响应式）
   抽自各课内联 <style> 的现代基线（L3/L4），作为全站单一样式源。各页用 <link> 引入，
   页面只保留自身特有的少量覆盖。改配色/间距/字号在此一处改即可，不再逐页复制。
   注意：本文件服务于公开学生站，切勿写入教师答案或内部写作规范。 */

:root {

  color-scheme:light;
   --ground:#F4F6FB;
   --panel:#FFFFFF;
   --panel-2:#EEF1F8;

  --ink:#1B2436;
   --ink-soft:#536078;
   --line:#DCE2EE;

  --accent:#2F6BFF;
   --accent-ink:#204FCC;
   --red:#B72E38;
   --green:#187B49;
   --gold:#886000;

  --radius:16px;
   --disp:"ZCOOL KuaiLe",system-ui,sans-serif;

  --body:"Noto Sans SC",system-ui,sans-serif;
   --mono:"JetBrains Mono",ui-monospace,monospace;
}

@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {

  color-scheme:dark;
   --ground:#0E1420;
   --panel:#161F2E;
   --panel-2:#1E2A3D;

  --ink:#E7ECF5;
   --ink-soft:#ADB9CE;
   --line:#35445E;
   --accent-ink:#9CBAFF;

  --red:#FF8A8E;
   --green:#78DCAA;
   --gold:#FFD16B;
}
}

:root[data-theme="dark"] {

  color-scheme:dark;
   --ground:#0E1420;
   --panel:#161F2E;
   --panel-2:#1E2A3D;

  --ink:#E7ECF5;
   --ink-soft:#ADB9CE;
   --line:#35445E;
   --accent-ink:#9CBAFF;

  --red:#FF8A8E;
   --green:#78DCAA;
   --gold:#FFD16B;
}

* {
  box-sizing:border-box}

html {
  scroll-behavior:smooth;
   scroll-padding-top:24px}

body {
  margin:0;
   background:var(--ground);
   color:var(--ink);
   font:16px/1.85 var(--body);
   -webkit-font-smoothing:antialiased}

a {
  color:var(--accent-ink);
   text-decoration:underline;
   text-underline-offset:4px;
   text-decoration-thickness:1px}

a:hover {
  text-decoration-thickness:2px}

button,input,summary,a {
  -webkit-tap-highlight-color:transparent}

button {
  font:inherit;
   cursor:pointer}

:focus-visible {
  outline:3px solid var(--accent-ink);
   outline-offset:4px;
   border-radius:4px}

[hidden] {
  display:none!important}

.skip-link {
  position:fixed;
   top:12px;
   left:12px;
   z-index:10;
   padding:10px 18px;
   background:var(--panel);
   color:var(--accent-ink);
   border:2px solid;
   border-radius:10px;
   transform:translateY(-160%)}

.skip-link:focus {
  transform:translateY(0)}

.sr-only {
  position:absolute;
   width:1px;
   height:1px;
   padding:0;
   margin:-1px;
   overflow:hidden;
   clip-path:inset(50%);
   white-space:nowrap}

.themebtn,.motionbtn {
  min-height:44px;
   padding:8px 12px;
   border:1px solid var(--line);
   background:var(--panel);
   color:var(--ink);
   border-radius:10px;
   font-size:14px}

.themebtn:hover,.motionbtn:hover {
  border-color:var(--accent-ink);
   background:var(--panel-2)}

.eyebrow {
  color:var(--accent-ink);
   font:600 12px/1.5 var(--mono);
   letter-spacing:.12em;
   margin:0 0 16px}

.hero {
  padding:clamp(32px,6vw,64px) 0 40px;
   border-bottom:1px solid var(--line)}

.hero h1 {
  font:400 clamp(34px,4.6vw,52px)/1.22 var(--disp);
   margin:0 0 18px;
   text-wrap:balance;
   letter-spacing:-.02em}

.hero p {
  font-size:17px;
   color:var(--ink-soft);
   margin:0 0 22px;
   max-width:38em}

.hero .eyebrow {
  font-size:12px;
   color:var(--accent-ink);
   margin-bottom:16px}

.actions {
  display:flex;
   gap:12px;
   flex-wrap:wrap;
   align-items:center}

.cta {
  display:inline-flex;
   align-items:center;
   justify-content:center;
   min-height:48px;
   padding:10px 20px;
   background:var(--accent);
   color:#fff;
   border-radius:11px;
   font-weight:500;
   text-decoration:none;
   transition:transform .18s ease}

.cta:hover {
  background:#2458DA;
   text-decoration:none;
   transform:translateY(-2px)}

.secondary {
  display:inline-flex;
   align-items:center;
   min-height:48px;
   padding:8px 4px}

.preview {
  margin:0;
   min-width:0}

#stage {
  display:block;
   width:100%;
   height:auto;
   aspect-ratio:12/5;
   background:var(--panel);
   border:1px solid var(--line);
   border-radius:var(--radius);
   image-rendering:pixelated}

.preview figcaption {
  display:flex;
   justify-content:space-between;
   gap:8px;
   align-items:center;
   padding-top:10px;
   font-size:13px;
   color:var(--ink-soft)}

.motionbtn {
  font-size:13px;
   padding:6px 10px;
   flex-shrink:0}

section {
  padding:40px 0;
   border-bottom:1px solid var(--line);
   scroll-margin-top:20px}

section h2 {
  font:400 clamp(25px,3.5vw,30px)/1.4 var(--disp);
   margin:0 0 12px;
   display:flex;
   align-items:center;
   gap:12px;
   text-wrap:balance}

.lead {
  color:var(--ink-soft);
   border-left:3px solid var(--accent);
   padding:2px 0 2px 14px;
   margin:8px 0 24px;
   font-size:15px}

h3 {
  font-size:17px;
   line-height:1.5;
   margin:28px 0 12px}

p {
  margin:12px 0}

ul,ol {
  padding-left:24px;
   margin:14px 0}

li {
  margin:8px 0}

code {
  font-family:var(--mono);
   font-size:.88em;
   overflow-wrap:anywhere;
   background:var(--panel-2);
   padding:2px 5px;
   border-radius:5px}

pre {
  background:#111B2C;
   color:#E7ECF5;
   padding:18px 20px;
   border:1px solid var(--line);
   border-radius:12px;
   overflow-x:auto;
   font:13.5px/1.8 var(--mono);
   margin:16px 0;
   tab-size:2}

pre .d {
  color:#A8B7CE}

pre .g {
  color:#7EE0A6}

pre .r {
  color:#FF8A8E}

.callout {
  padding:16px 18px;
   margin:18px 0;
   font-size:14.5px;
   border:1px solid var(--line);
   border-left:3px solid var(--accent);
   border-radius:0 12px 12px 0;
   background:var(--panel);
   overflow-wrap:anywhere}

.callout .k {
  font-weight:700;
   margin-right:6px}

.callout.warn {
  border-left-color:var(--red)}

.warn .k {
  color:var(--red)}

.storage-note {
  font-size:13px;
   color:var(--ink-soft);
   margin:12px 0}

@media(max-width:540px) {

  body {
  font-size:15px}
.hero p {
  font-size:16px}
section {
  padding:32px 0}
pre {
  padding:14px;
   font-size:13px}
.callout {
  padding:14px}
.lead {
  font-size:15px}
}

@media(prefers-reduced-motion:reduce) {

  html {
  scroll-behavior:auto}
*,*::before,*::after {
  animation:none!important;
   transition:none!important}
.cta:hover {
  transform:none}
}

.wrap {
  display:grid;
   grid-template-columns:250px minmax(0,1fr);
   max-width:1200px;
   margin:0 auto}

.side {
  position:sticky;
   top:0;
   align-self:start;
   height:100vh;
   height:100dvh;
   overflow-y:auto;
   padding:28px 18px;
   border-right:1px solid var(--line);
   background:var(--panel)}

.side-title {
  font:400 25px/1.3 var(--disp);
   margin:0 8px 8px}

.side .tag {
  font-size:13px;
   color:var(--ink-soft);
   margin:0 8px 20px}

.nav {
  list-style:none;
   margin:0;
   padding:0;
   display:flex;
   flex-direction:column;
   gap:4px}

.nav li {
  margin:0}

.nav a {
  display:flex;
   align-items:center;
   gap:10px;
   min-height:44px;
   padding:8px 10px;
   border-radius:9px;
   color:var(--ink);
   font-size:14px;
   text-decoration:none}

.nav a:hover {
  background:var(--panel-2)}

.nav a.active {
  background:var(--panel-2);
   color:var(--accent-ink);
   box-shadow:inset 3px 0 var(--accent);
   font-weight:500}

.dot {
  width:20px;
   height:20px;
   flex:0 0 20px;
   border-radius:5px;
   border:1px solid var(--ink-soft);
   display:grid;
   place-items:center;
   font:12px var(--mono)}

.dot.star {
  border:0;
   color:var(--gold);
   font-size:18px}

.prog {
  margin:24px 8px 12px;
   padding-top:18px;
   border-top:1px solid var(--line)}

.prog .lbl {
  font-size:13px;
   color:var(--ink-soft);
   display:flex;
   justify-content:space-between;
   margin-bottom:10px}

.prog .bar {
  height:8px;
   border-radius:99px;
   background:var(--panel-2);
   overflow:hidden}

.prog .fill {
  height:100%;
   width:100%;
   transform:scaleX(0);
   transform-origin:left;
   background:var(--accent);
   transition:transform .2s ease}

.side .themebtn {
  margin:12px 8px 0;
   width:calc(100% - 16px)}

.side .storage-note {
  margin:12px 8px;
   line-height:1.6}

.main {
  min-width:0;
   padding:0 clamp(20px,4vw,56px) 100px}

.col {
  max-width:720px;
   margin:0 auto}

.hero .preview {
  max-width:400px;
   margin:24px 0 0}

.lvnum {
  font:600 15px var(--mono);
   color:#fff;
   background:var(--accent);
   width:36px;
   height:36px;
   flex:0 0 36px;
   border-radius:10px;
   display:grid;
   place-items:center}

.lvnum.star {
  background:var(--gold)}

.meta {
  display:flex;
   flex-wrap:wrap;
   gap:6px 18px;
   font-size:13px;
   color:var(--ink-soft);
   margin:0 0 24px}

.meta b {
  color:var(--ink);
   font-weight:500}

table {
  width:100%;
   border-collapse:collapse;
   margin:18px 0;
   font-size:14px;
   table-layout:fixed;
   overflow-wrap:anywhere}

th,td {
  text-align:left;
   padding:12px;
   border-bottom:1px solid var(--line);
   vertical-align:top}

th {
  background:var(--panel-2);
   color:var(--ink);
   font-size:13px}

th:first-child {
  width:34%}

details {
  border:1px solid var(--line);
   border-radius:12px;
   margin:18px 0;
   background:var(--panel)}

details>summary {
  cursor:pointer;
   list-style:none;
   min-height:48px;
   padding:14px 16px;
   font-weight:500;
   display:flex;
   align-items:center;
   gap:8px;
   flex-wrap:wrap;
   border-radius:12px}

details>summary::-webkit-details-marker {
  display:none}

details>summary:hover {
  background:var(--panel-2)}

details>summary .chev {
  color:var(--accent-ink);
   transition:transform .2s;
   margin-left:auto}

details[open]>summary .chev {
  transform:rotate(90deg)}

details>summary .hint {
  font-size:12px;
   color:var(--ink-soft);
   font-weight:400}

.dbody {
  padding:0 16px 14px}

.check {
  display:flex;
   align-items:flex-start;
   gap:12px;
   margin:24px 0 4px;
   padding:16px;
   border:1px solid var(--line);
   border-radius:12px;
   background:var(--panel);
   font-size:15px}

.check.eye {
  border-color:var(--gold)}

.check .badge {
  display:inline-block;
   font-size:12px;
   padding:2px 8px;
   border-radius:5px;
   background:var(--panel-2);
   color:var(--ink-soft);
   margin-top:4px}

.back-nav {
  display:none}

@media(max-width:820px) {

  .wrap {
  grid-template-columns:1fr}
.side {
  position:static;
   height:auto;
   padding:22px 20px;
   border-right:0;
   border-bottom:1px solid var(--line)}
.side .nav {
  display:grid;
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:4px 8px}
.side .tag {
  margin-bottom:14px}
.prog {
  margin-top:18px}
.side .themebtn {
  width:auto;
   min-width:160px}
.main {
  padding-bottom:100px}
.hero {
  padding-top:32px}
.back-nav {
  display:block;
   position:fixed;
   bottom:calc(16px + env(safe-area-inset-bottom));
   right:18px;
   z-index:2;
   min-height:44px;
   padding:8px 16px;
   background:var(--panel);
   border:1px solid var(--line);
   border-radius:99px;
   box-shadow:0 4px 18px #0002;
   text-decoration:none;
   font-size:14px}
}

@media(max-width:380px) {
  .side {
  padding:18px 12px}
.nav a {
  font-size:13px;
   padding:8px 6px;
   gap:6px}
th,td {
  padding:10px 8px}
}

.layout {
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  max-width:1200px;
  margin:auto}

.layout>nav {
  position:sticky;
  top:0;
  align-self:start;
  max-height:100vh;
  overflow:auto;
  padding:28px 18px;
  background:var(--panel);
  border-right:1px solid var(--line)}

.layout>nav>strong {
  font:25px/1.4 var(--disp)}

.layout main {
  min-width:0;
  padding:32px clamp(20px,4vw,56px) 80px;
  max-width:880px}

.layout header h1 {
  font:clamp(34px,4.6vw,52px)/1.3 var(--disp)}

.links a {
  display:flex;
  gap:8px;
  align-items:center;
  min-height:44px;
  padding:8px 10px;
  border-radius:9px;
  text-decoration:none;
  font-size:14px;
  color:var(--ink)}

.links a:hover {
  background:var(--panel-2)}

.muted,footer {
  color:var(--ink-soft)}

dl {
  display:grid;
  grid-template-columns:6em minmax(0,1fr);
  gap:12px}

dt {
  font-weight:700}

dd {
  margin:0;
  min-width:0}

button[data-copy] {
  min-height:44px;
  padding:6px 12px;
  margin:6px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--ink)}

details p {
  padding-inline:16px}

.stop {
  padding:20px;
  background:var(--panel-2);
  border-radius:12px;
  margin-block:24px}

.check input {
  margin-top:8px}

.manual {
  color:var(--gold);
  white-space:nowrap;
  flex:0 0 auto}

@media(max-width:820px) {
  .layout {
  display:block}
.layout>nav {
  position:static;
  max-height:none;
  border-right:0;
  border-bottom:1px solid var(--line);
  padding:22px 20px}
.links {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px}
.layout main {
  padding-inline:20px}
dl {
  display:block}
dd {
  margin-block:8px 20px}
}


/* 阶段分组（课程通用）：正文分隔 + 侧栏小标题，用于把若干任务归到一个学习阶段 */
.phase-label{display:flex;align-items:center;gap:12px;margin:48px 0 6px;padding:10px 18px;font:700 clamp(16px,2.2vw,19px)/1.3 var(--disp);letter-spacing:.01em;color:var(--accent-ink);background:var(--panel-2);border-left:4px solid var(--accent);border-radius:0 12px 12px 0}
.phase-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.nav-phase{display:block;margin:16px 0 4px;padding-left:2px;font:700 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}

/* 任务卡片（课程通用）：把每个 task-NN 收进独立面板，强化可扫读的边界与层级。
   仅样式，不改任何 data-* 钩子、id、结构。字段标签 dt 做成胶囊 chip，一眼区分目标/检查/位置。 */
section[id^="task-"]{border-bottom:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 28px;margin:22px 0;box-shadow:0 1px 2px rgba(16,27,44,.04)}
section[id^="task-"]>h2{margin-top:0}
section[id^="task-"] dt{justify-self:start;align-self:start;font:600 12px/1.6 var(--mono);letter-spacing:.02em;color:var(--accent-ink);background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:1px 11px;white-space:nowrap}
section[id^="task-"] dd{padding-top:1px}
section[id^="task-"] details{background:var(--panel-2)}
@media(max-width:820px){section[id^="task-"]{padding:20px 18px}section[id^="task-"] dt{display:inline-block;margin-bottom:2px}}

/* 内嵌示意图（课程通用）：极简 SVG，用设计令牌着色，自动适配亮/暗。无脚本、无外链、不改语义。 */
.diagram{display:block;width:100%;max-width:560px;height:auto;margin:18px 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.diagram + .diagram{margin-top:10px}
.diagram .d-box{fill:none;stroke:var(--ink-soft);stroke-width:1.5}
.diagram .d-view{fill:var(--accent);fill-opacity:.1;stroke:var(--accent);stroke-width:2}
.diagram .d-axis{fill:none;stroke:var(--ink-soft);stroke-width:1}
.diagram .d-pt{fill:var(--accent)}
.diagram .d-arrow{fill:none;stroke:var(--accent-ink);stroke-width:1.75}
.diagram .d-head{fill:var(--accent-ink)}
.diagram text{fill:var(--ink);font:12px/1.2 var(--mono)}
.diagram .d-dim{fill:var(--ink-soft);font-size:11px}
.diagram .d-cap{fill:var(--accent-ink);font-weight:600}