/* ============ GLSL 着色器小书 · 章节页共享样式 ============ */

:root {
  --bg: #ffffff; --bg-subtle: #f6f7fb; --bg-sidebar: #fbfbfe;
  --text: #1e2130; --text-muted: #5a6072; --text-faint: #868da1;
  --border: #e4e6ef; --border-strong: #d3d7e4;
  --p0: #2563eb; --p0-soft: #eef4ff;
  --p1: #7c3aed; --p1-soft: #f4efff;
  --p2: #db2777; --p2-soft: #fdeff5;
  --p3: #18794e; --p3-soft: #ecfaf2;
  --p4: #b7791f; --p4-soft: #fdf6e7;
  --accent: var(--p1); --accent-soft: var(--p1-soft);
  --code-bg: #1e2130; --code-text: #d6deeb;
  --code-comment: #6b7a99; --code-keyword: #c792ea; --code-string: #addb67;
  --code-number: #f78c6c; --code-func: #82aaff; --code-type: #ffd580; --code-pp: #f07898;
  --shadow: 0 1px 3px rgba(30,33,48,0.06), 0 1px 2px rgba(30,33,48,0.04);
  --shadow-lg: 0 8px 24px rgba(30,33,48,0.10);
  --co-info: #2563eb; --co-info-bg: #eef4ff;
  --co-warn: #b7791f; --co-warn-bg: #fff8e9;
  --co-tip: #7c3aed; --co-tip-bg: #f4efff;
  --co-android: #18794e; --co-android-bg: #ecfaf2; --co-android-edge: #bfe8d2;
}
[data-theme="dark"] {
  --bg: #14151c; --bg-subtle: #1a1c26; --bg-sidebar: #12131a;
  --text: #e5e8f0; --text-muted: #9aa2b6; --text-faint: #6d7488;
  --border: #282b3a; --border-strong: #363a4d;
  --p0: #60a5fa; --p0-soft: #16243a;
  --p1: #a78bfa; --p1-soft: #241d3d;
  --p2: #f472b6; --p2-soft: #331c29;
  --p3: #4ade80; --p3-soft: #14291d;
  --p4: #e0b252; --p4-soft: #2c2516;
  --code-bg: #0e0f16; --code-text: #d6deeb;
  --shadow: 0 1px 3px rgba(0,0,0,0.3); --shadow-lg: 0 8px 28px rgba(0,0,0,0.45);
  --co-info: #60a5fa; --co-info-bg: #16243a;
  --co-warn: #e0b252; --co-warn-bg: #2c2516;
  --co-tip: #a78bfa; --co-tip-bg: #241d3d;
  --co-android: #4ade80; --co-android-bg: #14291d; --co-android-edge: #24513a;
}
body[data-phase="p0"] { --accent: var(--p0); --accent-soft: var(--p0-soft); }
body[data-phase="p1"] { --accent: var(--p1); --accent-soft: var(--p1-soft); }
body[data-phase="p2"] { --accent: var(--p2); --accent-soft: var(--p2-soft); }
body[data-phase="p3"] { --accent: var(--p3); --accent-soft: var(--p3-soft); }
body[data-phase="p4"] { --accent: var(--p4); --accent-soft: var(--p4-soft); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Noto Sans SC", "Inter", -apple-system, system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.78; font-size: 16px; -webkit-font-smoothing: antialiased; transition: background .25s ease, color .25s ease; }

/* ============ 侧栏 ============ */
.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 272px; background: var(--bg-sidebar); border-right: 1px solid var(--border); padding: 28px 0 28px 26px; overflow-y: auto; z-index: 40; transition: transform .28s ease, background .25s ease; }
.sidebar-head { padding-right: 26px; margin-bottom: 24px; }
.brand { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; display: block; text-decoration: none; }
.brand:hover { color: var(--accent); }
.chap-badge { display: inline-flex; align-items: baseline; gap: 8px; }
.chap-badge .num { font-family: "Inter", sans-serif; font-weight: 700; font-size: 30px; color: var(--accent); letter-spacing: -.02em; }
.chap-badge .lab { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.toc-title { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 10px; }
.toc { display: flex; flex-direction: column; gap: 1px; padding-right: 16px; }
.toc a { position: relative; font-size: 14px; color: var(--text-muted); text-decoration: none; padding: 7px 12px; border-radius: 7px; border-left: 2px solid transparent; transition: color .15s, background .15s, border-color .15s; line-height: 1.45; }
.toc a:hover { color: var(--text); background: var(--bg-subtle); }
.toc a.active { color: var(--accent); background: var(--accent-soft); border-left-color: var(--accent); font-weight: 500; }

main { margin-left: 272px; padding: 0 clamp(20px, 6vw, 96px) 120px; transition: margin .28s ease; }
.wrap { max-width: 780px; margin: 0 auto; }

/* ============ 浮动按钮 ============ */
.float-btns { position: fixed; top: 18px; right: 22px; display: flex; gap: 10px; z-index: 60; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text-muted); cursor: pointer; box-shadow: var(--shadow); transition: color .15s, border-color .15s, transform .15s; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; }
.menu-btn { display: none; }
[data-theme="light"] .moon { display: block; } [data-theme="light"] .sun { display: none; }
[data-theme="dark"] .moon { display: none; } [data-theme="dark"] .sun { display: block; }

/* ============ 页头 ============ */
.page-head { padding-top: 72px; margin-bottom: 36px; }
.eyebrow { display: inline-block; font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--accent); background: var(--accent-soft); padding: 5px 11px; border-radius: 999px; margin-bottom: 18px; }
h1 { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: clamp(30px, 5vw, 42px); line-height: 1.18; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
h1 .h-num { color: var(--accent); font-weight: 700; margin-right: .35em; }
.subtitle { font-size: 18px; color: var(--text-muted); margin: 0; font-weight: 400; }

/* ============ 正文 ============ */
article h2 { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 23px; font-weight: 700; letter-spacing: -.01em; margin: 52px 0 4px; padding-top: 8px; scroll-margin-top: 86px; }
article h2 .sec-no { font-family: "Inter", sans-serif; color: var(--text-faint); font-weight: 600; margin-right: .5em; font-size: 18px; }
article h3 { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 17px; font-weight: 600; margin: 30px 0 2px; }
article p { margin: 14px 0; }
article strong { font-weight: 600; }
.lead { font-size: 17.5px; color: var(--text); margin: 0 0 8px; }
code.inline { font-family: "JetBrains Mono", monospace; font-size: .86em; background: var(--bg-subtle); border: 1px solid var(--border); padding: 1.5px 6px; border-radius: 5px; color: var(--text); white-space: nowrap; }
.accent-term { color: var(--accent); font-weight: 500; }
ul, ol { margin: 14px 0; padding-left: 24px; }
li { margin: 7px 0; }
li::marker { color: var(--text-faint); }
a { color: var(--accent); }
article a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ============ 代码块 ============ */
.code-block { margin: 22px 0; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.code-head { display: flex; align-items: center; justify-content: space-between; background: #171927; padding: 8px 12px 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
[data-theme="dark"] .code-head { background: #090a10; }
.code-lang { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #8b97ad; letter-spacing: .03em; }
.copy-btn { font-family: "Inter", sans-serif; font-size: 12px; color: #aeb8ca; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09); padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: all .15s; }
.copy-btn:hover { color: #fff; background: rgba(255,255,255,0.12); }
.copy-btn.copied { color: #7fdbca; border-color: rgba(127,219,202,0.4); }
pre { margin: 0; background: var(--code-bg); padding: 16px; overflow-x: auto; }
pre code { font-family: "JetBrains Mono", monospace; font-size: 13.5px; line-height: 1.65; color: var(--code-text); background: none; }
.tok-cm { color: var(--code-comment); font-style: italic; }
.tok-kw { color: var(--code-keyword); }
.tok-st { color: var(--code-string); }
.tok-nu { color: var(--code-number); }
.tok-fn { color: var(--code-func); }
.tok-ty { color: var(--code-type); }
.tok-pp { color: var(--code-pp); }

/* ============ Callout ============ */
.callout { display: flex; gap: 13px; margin: 22px 0; padding: 15px 18px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-subtle); border-left-width: 3px; }
.callout .ico { flex-shrink: 0; margin-top: 2px; }
.callout .ico svg { width: 19px; height: 19px; display: block; }
.callout .c-body { min-width: 0; }
.callout .c-title { font-family: "Inter", "Noto Sans SC", sans-serif; font-weight: 600; font-size: 14px; margin-bottom: 3px; letter-spacing: .01em; }
.callout .c-body p { margin: 4px 0 0; font-size: 14.5px; color: var(--text); line-height: 1.7; }
.callout .c-body p:first-child { margin-top: 0; }
.callout-info { border-left-color: var(--co-info); background: var(--co-info-bg); }
.callout-info .ico, .callout-info .c-title { color: var(--co-info); }
.callout-warn { border-left-color: var(--co-warn); background: var(--co-warn-bg); }
.callout-warn .ico, .callout-warn .c-title { color: var(--co-warn); }
.callout-tip { border-left-color: var(--co-tip); background: var(--co-tip-bg); }
.callout-tip .ico, .callout-tip .c-title { color: var(--co-tip); }
.callout-android { border: 1px solid var(--co-android-edge); border-left: 3px solid var(--co-android); background: linear-gradient(180deg, var(--co-android-bg), transparent 140%); }
.callout-android .ico, .callout-android .c-title { color: var(--co-android); }
.callout-android .c-title { display: flex; align-items: center; gap: 8px; }
.callout-android .tag { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--co-android); border: 1px solid var(--co-android-edge); padding: 1px 6px; border-radius: 4px; }

/* ============ 表格 ============ */
.ref-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13.5px; }
.ref-table th, .ref-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.ref-table th { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.ref-table td { color: var(--text); }
.ref-table .mono { font-family: "JetBrains Mono", monospace; font-size: 12.5px; }
.ref-table .old { color: var(--text-faint); text-decoration: line-through; }
.ref-table .new { color: var(--accent); }
.ref-table tr:last-child td { border-bottom: none; }
.ref-table tbody tr:hover { background: var(--bg-subtle); }

/* ============ 管线示意 ============ */
.pipeline { display: flex; align-items: center; margin: 20px 0 24px; overflow-x: auto; padding: 8px 0; }
.pipe-stage { padding: 10px 16px; border-radius: 9px; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-align: center; min-width: 90px; font-family: "Inter", "Noto Sans SC", sans-serif; }
.pipe-stage.hi { background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.pipe-stage.dim { background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--border); }
.pipe-arrow { color: var(--text-faint); font-size: 17px; margin: 0 7px; flex-shrink: 0; }

/* ============ 卡片网格 ============ */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 18px 0 22px; }
.card { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 11px; padding: 15px 16px; transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--accent); transform: translateY(-1px); }
.card .card-icon { font-size: 21px; margin-bottom: 7px; display: block; line-height: 1; }
.card h4 { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 14.5px; font-weight: 600; margin: 0 0 4px; }
.card p { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.6; }
.card a { text-decoration: none; font-weight: 500; }

/* ============ Shader Demo 组件 ============ */
.shader-demo { margin: 24px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); background: #0b0c12; }
.demo-head { display: flex; align-items: center; gap: 8px; background: #171927; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }
[data-theme="dark"] .demo-head { background: #090a10; }
.demo-title { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 12.5px; font-weight: 500; color: #aeb8ca; margin-right: auto; display: flex; align-items: center; gap: 7px; }
.demo-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7fdbca; box-shadow: 0 0 6px #7fdbca; }
.demo-btn { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 12px; color: #aeb8ca; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09); padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.demo-btn:hover { color: #fff; background: rgba(255,255,255,0.12); }
.demo-btn.on { color: #7fdbca; border-color: rgba(127,219,202,0.4); }
.shader-demo canvas.demo-canvas { display: block; width: 100%; }
.demo-error { display: none; font-family: "JetBrains Mono", monospace; font-size: 12.5px; line-height: 1.6; color: #ff8896; background: #2a1218; padding: 10px 14px; white-space: pre-wrap; border-top: 1px solid rgba(255,136,150,0.25); }
.demo-error.show { display: block; }
.demo-editor { display: none; border-top: 1px solid rgba(255,255,255,0.08); }
.demo-editor.show { display: block; }
.demo-editor textarea { display: block; width: 100%; min-height: 240px; resize: vertical; border: none; outline: none; background: var(--code-bg); color: var(--code-text); font-family: "JetBrains Mono", monospace; font-size: 13px; line-height: 1.6; padding: 14px 16px; tab-size: 4; }
.demo-editor .editor-bar { display: flex; gap: 8px; padding: 8px 12px; background: #171927; border-top: 1px solid rgba(255,255,255,0.06); }
[data-theme="dark"] .demo-editor .editor-bar { background: #090a10; }
.demo-caption { font-size: 13px; color: var(--text-faint); background: var(--bg); padding: 9px 14px; border-top: 1px solid var(--border); line-height: 1.6; }
.demo-range { display: flex; align-items: center; gap: 12px; background: var(--bg); padding: 10px 14px; border-top: 1px solid var(--border); }
.demo-range label { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.demo-range input[type=range] { flex: 1; accent-color: var(--accent); }
.demo-range .val { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--accent); min-width: 44px; text-align: right; }

/* ============ 函数曲线 ============ */
.fn-plot { display: block; width: 100%; height: 180px; margin: 18px 0 22px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-subtle); }

/* ============ 小结 / 练习 ============ */
.summary { margin-top: 56px; padding: 24px 26px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-subtle); }
.summary h2 { margin: 0 0 12px; padding-top: 0; font-size: 19px; scroll-margin-top: 86px; font-family: "Inter", "Noto Sans SC", sans-serif; }
.summary ul { margin: 0; }
.summary li { font-size: 14.5px; color: var(--text); }
.exercise { margin-top: 32px; }
.exercise h2 { font-size: 19px; scroll-margin-top: 86px; font-family: "Inter", "Noto Sans SC", sans-serif; margin: 0 0 12px; }
.exercise ol { counter-reset: ex; list-style: none; padding-left: 0; }
.exercise ol li { position: relative; padding: 12px 14px 12px 48px; margin: 10px 0; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 10px; font-size: 14.5px; }
.exercise ol li::before { counter-increment: ex; content: counter(ex); position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; display: grid; place-items: center; background: var(--accent); color: #fff; border-radius: 6px; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; }
[data-theme="dark"] .exercise ol li::before { color: #14151c; }

/* ============ 章节导航 ============ */
.chap-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); }
.chap-nav a, .chap-nav span.disabled { flex: 1; display: flex; flex-direction: column; padding: 14px 18px; border: 1px solid var(--border); border-radius: 11px; text-decoration: none; transition: border-color .15s, transform .15s; }
.chap-nav a:hover { border-color: var(--accent); transform: translateY(-1px); }
.chap-nav .dir { font-family: "Inter", "Noto Sans SC", sans-serif; font-size: 12px; color: var(--text-faint); margin-bottom: 3px; }
.chap-nav .ttl { font-size: 15px; font-weight: 500; color: var(--text); }
.chap-nav a:hover .ttl { color: var(--accent); }
.chap-nav .nxt { text-align: right; }
.chap-nav span.disabled { opacity: .45; }
.page-foot { margin-top: 40px; font-size: 13.5px; color: var(--text-faint); }
.page-foot a { text-decoration: none; }

.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 35; }
.overlay.show { display: block; }

@media (max-width: 880px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  main { margin-left: 0; }
  .menu-btn { display: grid; }
  .float-btns { top: 14px; right: 16px; }
  .page-head { padding-top: 66px; }
  .chap-nav { flex-direction: column; }
  .chap-nav .nxt { text-align: left; }
}