/* ══════════════════════════════════════════════════════════════
   兔牙小课堂 · 教程共用壳（2026-09-28 Opus 分身，安可 15:46「把教程网站写成一种模板」）
   小课堂首页和每一张教程页都只引这一份：门厅同款 RibbonDoll 皮（--hp-* 色板、格纹底、
   白纸细线框、hb-bar 标题条、像素字只给招牌字），日夜只认 skin.js 挂的 html[data-night]。
   返回钮 / 面包屑 / 标题条 / 页脚由 class.js 按页内 meta 生成，挂在 <main> 外面
   （class-edit.js「改一改」只会把 <main> 存回去，所以壳永远不会被存进正文里）。
   写新教程：拷 /hello/class/_template.html。
   ⚠ 公开页：这里引的字体、贴纸都住在 /hello/ 里。
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "TT Hello Pixel";
  src: url("/hello/assets/fonts/tt-hello-pixel-2.woff2?v=20260927") format("woff2");
  font-display: swap;
}

:root {
  /* 门厅色板（照抄 /hello/ 的 --hp-*，两边一起改） */
  --hp-page:  #fdf7fb;
  --hp-dot:   #fbe4ee;
  --hp-box:   #ffffff;
  --hp-line:  #f3c8db;
  --hp-inner: #fce8f0;
  --hp-title: #fff5f9;
  --hp-note:  #fbd0e1;
  --hp-ink:   #a97699;
  --hp-deep:  #6b3a4e;
  --hp-shadow: #fbe4ee;
  --hp-check: rgba(246, 205, 222, .30);
  --hp-pill:  #fde6ef;
  --hp-pixel: "TT Hello Pixel", ui-monospace, monospace;
  --hp-sans: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --hp-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* 教程要长读：正文比门厅的藕棕深一档 */
  --cl-text:   #6b4a55;
  --cl-soft:   #8e6b7c;
  --cl-accent: #c2708a;
  --cl-code:   #fcf0f5;
  --cl-code-ink: #984e68;
  --cl-tip:    #fff5f9;
  --cl-blue:   #5f6f96;
  --cl-blue-bg:#f2f4fb;
  --cl-ok:     #4f8a68;
  --cl-no:     #b5546e;
}
html[data-night="1"] {
  --hp-page:  #2a1c29;
  --hp-dot:   #3a2637;
  --hp-box:   #33222f;
  --hp-line:  #6e4a62;
  --hp-inner: #45303f;
  --hp-title: #3b2836;
  --hp-note:  #5a3a50;
  --hp-ink:   #d6b3c4;
  --hp-deep:  #fbe6ef;
  --hp-shadow: rgba(8, 3, 10, .35);
  --hp-check: rgba(110, 74, 98, .17);
  --hp-pill:  #4a3044;

  --cl-text:   #ecd6e1;
  --cl-soft:   #c7a6b6;
  --cl-accent: #f0a8c2;
  --cl-code:   #3d2a38;
  --cl-code-ink: #f6c9da;
  --cl-tip:    #3b2836;
  --cl-blue:   #b3bfdf;
  --cl-blue-bg:#2f2a3c;
  --cl-ok:     #8fd0ac;
  --cl-no:     #f09aae;
}

/* ── 页底：门厅同款粉格纹 ── */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  min-height: 100vh;
  padding: 12px 16px 40px;
  font: 15px/1.85 var(--hp-sans);
  color: var(--cl-text);
  background-color: var(--hp-page);
  background-image:
    linear-gradient(90deg, var(--hp-check) 50%, transparent 50%),
    linear-gradient(var(--hp-check) 50%, transparent 50%);
  background-size: 28px 28px;
  overflow-x: hidden;
}

/* ── 顶部一行：返回钮（门厅顶栏药丸同款）＋ 面包屑 ── */
.cls-top {
  max-width: 860px;
  margin: 0 auto 14px;
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.cls-back {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px 0 10px;
  background: var(--hp-box);
  border: 1px solid var(--hp-line);
  border-radius: 999px;
  color: var(--hp-deep); text-decoration: none; white-space: nowrap;
  font: 12px/1 var(--hp-pixel); letter-spacing: .5px;
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color .15s ease, transform .15s ease;
}
.cls-back svg { width: 16px; height: 16px; flex: none; }
.cls-back:focus-visible { outline: 1px dotted var(--hp-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cls-back:hover { background: var(--hp-pill); transform: translateY(-1px); } }
.cls-back:active { transform: translateY(1px); background: var(--hp-pill); }
.cls-crumb {
  min-width: 0; flex: 1;
  font-size: 12px; line-height: 1.5; color: var(--hp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cls-crumb a { color: var(--hp-ink); text-decoration: none; border-bottom: 1px dotted var(--hp-line); }
.cls-crumb i { font-style: normal; margin: 0 5px; color: var(--hp-line); }

/* ── 纸：白纸细线框＋内一圈淡描边＋上下扇贝蕾丝（照门厅 .paper） ── */
.cls-paper, body > main {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  background: var(--hp-box);
  border: 1px solid var(--hp-line);
  outline: 1px solid var(--hp-inner);
  outline-offset: -5px;
  box-shadow: 3px 3px 0 var(--hp-shadow);
}
.cls-paper { padding: 8px; }
body > main { padding: 22px 18px; }              /* class.js 没跑时的兜底：main 自己当纸 */
.cls-paper::before, .cls-paper::after {
  content: "";
  position: absolute; left: -1px; right: -1px; height: 9px;
  pointer-events: none;
  background: radial-gradient(circle at 7px 9px, var(--hp-box) 5.6px, var(--hp-line) 6px 6.8px, transparent 7.2px) 0 0 / 14px 9px repeat-x;
}
.cls-paper::before { top: -9px; }
.cls-paper::after { bottom: -9px; transform: scaleY(-1); }
.cls-stk {
  position: absolute; z-index: 2; width: 44px; height: auto; left: -14px; top: -18px;
  transform: rotate(-12deg); pointer-events: none; user-select: none; -webkit-user-select: none;
}

/* 标题条（门厅 .hb-bar 同款：极淡竖条纹＋像素字＋右上三颗装饰窗钮） */
.cls-bar {
  display: flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 4px 0 7px;
  background: repeating-linear-gradient(90deg, var(--hp-title) 0 6px, var(--hp-box) 6px 12px);
  border: 1px solid var(--hp-inner);
  color: var(--hp-deep);
  font: 12px/1 var(--hp-pixel); letter-spacing: .5px;
  -webkit-font-smoothing: none;
}
.cls-bar svg { width: 12px; height: 12px; flex: none; color: var(--hp-line); }
.cls-bar-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cls-bar-t small { font-size: 12px; color: var(--hp-ink); margin-left: 6px; }
.cls-win { display: flex; gap: 2px; flex: none; }
.cls-win i {
  width: 13px; height: 12px; display: block;
  border: 1px solid var(--hp-line); background: var(--hp-box);
  box-shadow: inset -1px -1px 0 var(--hp-inner);
}
.cls-win i:last-child {
  background:
    linear-gradient(45deg, transparent 44%, var(--hp-line) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--hp-line) 44% 56%, transparent 56%),
    var(--hp-box);
}

/* 标签 chip（教程页标题上方一行 / 小课堂卡片里一行，同一种） */
.cls-chips { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 0; padding: 0; }
.cls-chip {
  display: inline-block;
  padding: 0 8px;
  font-size: 11px; line-height: 20px; letter-spacing: .3px;
  color: var(--hp-deep);
  background: var(--hp-title);
  border: 1px solid var(--hp-line);
  border-radius: 999px;
  white-space: nowrap;
}
.cls-tagrow { padding: 14px 14px 0; }

/* ── 正文排版（只管 <main> 里面） ── */
.cls-paper > main { padding: 16px 14px 8px; }
main { display: block; min-width: 0; }
main > :first-child { margin-top: 0; }
main h1 {
  margin: 0 0 10px;
  font-size: clamp(22px, 5.6vw, 30px); line-height: 1.35; font-weight: 700; letter-spacing: .5px;
  color: var(--hp-deep); text-wrap: balance;
}
main h1 .dot { color: var(--hp-line); }
main h2 {
  margin: 34px 0 10px;
  font-size: 19px; line-height: 1.45; font-weight: 700; letter-spacing: .5px;
  color: var(--hp-deep); text-wrap: balance;
}
main h2 small { font-size: 12px; font-weight: 400; color: var(--hp-ink); letter-spacing: .5px; margin-left: 8px; }
main h3 { margin: 24px 0 6px; font-size: 16px; line-height: 1.5; color: var(--hp-deep); }
main p { margin: 10px 0 0; }
main ul, main ol { margin: 10px 0 0 1.4em; padding: 0; }
main li { margin-top: 4px; padding-left: 2px; }
main a { color: var(--hp-deep); text-decoration: underline; text-decoration-color: var(--hp-line); text-underline-offset: 3px; }
main b, main strong { color: var(--hp-deep); }
main hr { border: 0; border-top: 1px dashed var(--hp-line); margin: 28px 0; }
main img { max-width: 100%; height: auto; }
.lead, .lede { font-size: 15px; color: var(--cl-soft); }
.kicker, .stamp { margin: 0 0 6px; font-size: 12px; letter-spacing: .12em; color: var(--cl-accent); }

main code {
  font-family: var(--hp-mono); font-size: .9em;
  background: var(--cl-code); color: var(--cl-code-ink);
  padding: 1px 6px; border-radius: 6px;
  overflow-wrap: anywhere;
}
main pre {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--cl-code); color: var(--cl-text);
  border: 1px solid var(--hp-inner);
  border-radius: 8px;
  overflow-x: auto;
  font: 13px/1.7 var(--hp-mono);
}
main pre code { background: none; padding: 0; color: inherit; overflow-wrap: normal; font-size: inherit; }
main pre b { color: var(--cl-code-ink); }

main blockquote {
  margin: 14px 0 0; padding: 6px 14px;
  border-left: 2px solid var(--hp-line);
  background: var(--hp-title); color: var(--cl-soft);
}
main blockquote > :first-child { margin-top: 0; }

main figure { margin: 16px 0 0; }
main figure img { display: block; width: 100%; border: 1px solid var(--hp-inner); background: var(--hp-box); }
main figcaption { margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--hp-ink); text-align: center; }

/* 提示框：.tip（粉）/ .tip.blue（雾蓝） */
main .tip {
  margin-top: 14px; padding: 8px 14px;
  font-size: 14px;
  background: var(--cl-tip);
  border: 1px solid var(--hp-inner);
  border-left: 2px solid var(--hp-line);
}
main .tip.blue { background: var(--cl-blue-bg); border-left-color: var(--cl-blue); }

/* 步骤：<ol class="steps">，每条 <li> 前面自动编号 */
main ol.steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
main ol.steps > li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 0; }
main ol.steps > li::before {
  content: counter(s);
  width: 26px; height: 26px; margin-top: 2px;
  display: grid; place-items: center;
  border: 1px solid var(--hp-line); border-radius: 50%;
  background: var(--hp-title); color: var(--hp-deep);
  font: 12px/1 var(--hp-pixel); -webkit-font-smoothing: none;
}
main ol.steps > li > :first-child, main ol.steps > li > div > :first-child { margin-top: 0; }

/* 表格：外面包一层 .table-wrap 手机上能横滑 */
main table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--hp-box); border: 1px solid var(--hp-inner); }
main th, main td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hp-inner); }
main th { font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--hp-ink); background: var(--hp-title); }
main tr:last-child td { border-bottom: 0; }
main .table-wrap, main .tw { margin-top: 12px; overflow-x: auto; }

/* ── 页脚（class.js 生成）：署名 · 日期 · 许可证 ／ 返回 ── */
.cls-foot {
  margin: 26px 6px 4px; padding-top: 12px;
  border-top: 1px dashed var(--hp-line);
  text-align: center; font-size: 12px; line-height: 1.9; color: var(--hp-ink);
}
.cls-foot p { margin: 0; }
.cls-foot a { color: var(--hp-deep); text-decoration: none; border-bottom: 1px dotted var(--hp-line); }
.cls-foot .cls-foot-nav { margin-top: 4px; font: 12px/1.9 var(--hp-pixel); -webkit-font-smoothing: none; }
.cls-foot .cls-foot-nav i { font-style: normal; margin: 0 6px; color: var(--hp-line); }

/* ── 小课堂首页的卡片架（class.js 从 index.json 生成） ── */
.cls-shelf {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  margin: 12px 6px 0; padding: 0; list-style: none;
}
.cls-shelf > li { display: flex; min-width: 0; }
/* 小课堂首页的标题和导语比教程页收一档，手机一屏要看得到三张卡 */
.cls-index main h1 { font-size: clamp(22px, 5.6vw, 28px); margin-bottom: 6px; }
.cls-index main .lead { font-size: 14px; line-height: 1.75; margin-top: 0; }
@media (max-width: 719px) {
  .cls-index .cls-paper > main { padding: 12px 14px 4px; }
  .cls-index .cls-shelf { margin-top: 10px; }
}
@media (min-width: 640px) { .cls-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cls-card {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
  padding: 9px 13px 8px;
  background: var(--hp-box);
  border: 1px solid var(--hp-line);
  outline: 1px dashed var(--hp-inner);
  outline-offset: -4px;
  color: inherit; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, transform .15s ease;
}
.cls-card:focus-visible { outline: 1px dotted var(--hp-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cls-card:hover { background: var(--hp-title); transform: translateY(-1px); } }
.cls-card:active { background: var(--hp-title); }
.cls-card-t {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 15px; line-height: 1.45; font-weight: 700; color: var(--hp-deep);
}
.cls-card-t span { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.3; }   /* 9-28 小雾：标题给两行，别把「长按哪里，就贴在哪里」截成省略号 */
.cls-card-t svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--hp-line); }
.cls-card-b {
  margin: 0; font-size: 13px; line-height: 1.65; color: var(--cl-text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.cls-card .cls-chip { line-height: 18px; }
.cls-card-d { margin-top: auto; font-size: 11.5px; line-height: 1.5; color: var(--hp-ink); letter-spacing: .3px; }
.cls-shelf-empty { font-size: 13px; color: var(--hp-ink); padding: 6px 0; }

@media (min-width: 720px) {
  body { padding-top: 26px; }
  .cls-paper { padding: 10px; }
  .cls-paper > main { padding: 26px 30px 10px; }
  .cls-tagrow { padding: 18px 30px 0; }
  .cls-foot { margin: 30px 20px 6px; }
  .cls-shelf { margin: 18px 30px 0; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cls-back, .cls-card { transition: none; }
}