/* ==========================================================================
   学鹏的知识小站 — 界面设计系统
   --------------------------------------------------------------------------
   架构：移动优先（base 为手机样式，逐级用 min-width 增强）
   调性：技术极客感（等宽点缀 / 克制的网格 / 终端元素）
   配色：深色为默认，浅色为可选；对比度全部按 WCAG 2.1 AA 核算
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌
   ========================================================================== */

:root {
  /* --- 色彩 · 深色（默认） --- */
  --c-bg:           #090c11;
  --c-bg-subtle:    #0c1017;
  --c-surface:      #11161e;
  --c-surface-hi:   #18202b;
  --c-border:       #1e2733;
  --c-border-hi:    #2a3646;

  --c-text:         #dce4ee;   /* 15.3:1 on bg / 14.2:1 on surface */
  --c-text-dim:     #9aa8b8;   /*  8.1:1 on bg /  7.5:1 on surface */
  --c-text-faint:   #7b8a9d;   /*  5.6:1 on bg /  5.2:1 on surface */

  --c-accent:       #4ec9b0;   /*  9.6:1 on bg /  8.9:1 on surface */
  --c-accent-hi:    #6adcc5;
  --c-accent-soft:  rgba(78, 201, 176, .13);

  --c-topic:        #a392e8;   /* 主题轴标签 */
  --c-form:         #d9a05b;   /* 形态轴标签 */
  --c-doing:        #4ec9b0;
  --c-done:         #6aa6e0;
  --c-drop:         #d9736b;

  --tint-topic-bg:  rgba(163, 146, 232, .10);
  --tint-topic-bd:  rgba(163, 146, 232, .36);
  --tint-form-bg:   rgba(217, 160, 91, .10);
  --tint-form-bd:   rgba(217, 160, 91, .36);
  --tint-doing-bg:  rgba(78, 201, 176, .12);
  --tint-doing-bd:  rgba(78, 201, 176, .42);
  --tint-done-bg:   rgba(106, 166, 224, .12);
  --tint-done-bd:   rgba(106, 166, 224, .38);
  --tint-drop-bg:   rgba(217, 115, 107, .12);
  --tint-drop-bd:   rgba(217, 115, 107, .38);

  --grid-line:      rgba(78, 201, 176, .05);
  --shadow:         0 1px 2px rgba(0, 0, 0, .4);

  /* 首屏粒子字标（WebGL 画布取色用，必须是纯 hex，JS 无法解析 color-mix()） */
  --hero-fx-base:   #4ec9b0;   /* 粒子基础色 */
  --hero-fx-hot:    #a8f0df;   /* 光标附近的增亮色 */
  --hero-fx-alpha:  .30;       /* 粒子基础透明度（加性混合，靠叠加出辉光）*/

  color-scheme: dark;

  /* --- 字体 --- */
  --font-sans:
    system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
    "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC",
    "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei",
    "Hiragino Sans GB", sans-serif;

  --font-mono:
    ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
    "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* 字号阶梯：移动端为下限，随视口流体增长，不需要媒体查询改字号 */
  --fs-display: clamp(1.75rem, 1.20rem + 3.20vw, 2.5rem);      /* 28 → 40 */
  --fs-h1:      clamp(1.5rem,  1.15rem + 1.90vw, 2rem);        /* 24 → 32 */
  --fs-h2:      clamp(1.1875rem, 1.05rem + .80vw, 1.4375rem);  /* 19 → 23 */
  --fs-h3:      clamp(1.0625rem, 1rem + .35vw, 1.15625rem);    /* 17 → 18.5 */
  --fs-lead:    clamp(1rem, .94rem + .32vw, 1.0625rem);        /* 16 → 17 */
  --fs-body:    clamp(.96875rem, .94rem + .16vw, 1rem);        /* 15.5 → 16 */
  --fs-sm:      .90625rem;   /* 14.5 */
  --fs-meta:    .78125rem;   /* 12.5  等宽标签 */
  --fs-micro:   .71875rem;   /* 11.5  等宽微标签 */

  /* 行高：中文正文比英文需要更松 */
  --lh-display: 1.2;
  --lh-heading: 1.34;
  --lh-body:    1.78;
  --lh-tight:   1.5;

  /* 字距 */
  --ls-cjk:     .01em;    /* 中文标题，轻微正值，避免方块字粘连 */
  --ls-latin:  -.02em;    /* 拉丁标题，收紧 */
  --ls-mono:    .02em;    /* 等宽标签，小字号下提升辨识 */

  /* --- 间距 --- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;

  --gutter: 1.25rem;        /* 移动端页边距，≥640px 提升到 1.5rem */
  --maxw:   68.75rem;       /* 1100px 内容宽度 */
  --readw:  45rem;          /* 720px  文章阅读栏 */

  /* --- 形状 --- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* --- 交互 --- */
  --tap: 2.75rem;           /* 44px 最小触摸目标 */
  --topbar-h: 3.25rem;      /* 52px 移动端顶栏 */
  --tabbar-h: 3.5rem;       /* 56px 移动端底部标签栏 */
  --ease: .16s ease;
}

/* --- 色彩 · 浅色 --- */
:root[data-theme="light"] {
  --c-bg:           #fbfcfd;
  --c-bg-subtle:    #f4f7fa;
  --c-surface:      #ffffff;
  --c-surface-hi:   #f4f6f9;
  --c-border:       #e4e9f0;
  --c-border-hi:    #cdd6e1;

  --c-text:         #12181f;   /* 17.4:1 on bg / 17.9:1 on surface */
  --c-text-dim:     #4c5967;   /*  7.0:1 on bg /  7.2:1 on surface */
  --c-text-faint:   #64707f;   /*  4.9:1 on bg /  5.0:1 on surface */

  --c-accent:       #0f766e;   /*  5.3:1 on bg /  5.5:1 on surface */
  --c-accent-hi:    #0b5d56;
  --c-accent-soft:  rgba(15, 118, 110, .09);

  --c-topic:        #6242b5;
  --c-form:         #8a5a0b;
  --c-doing:        #0f766e;
  --c-done:         #17529b;
  --c-drop:         #b3261e;

  --tint-topic-bg:  #f2effc;  --tint-topic-bd:  #dcd4f6;
  --tint-form-bg:   #fdf4e6;  --tint-form-bd:   #f5e2c2;
  --tint-doing-bg:  #e6f5f1;  --tint-doing-bd:  #bfe4db;
  --tint-done-bg:   #e9f1fb;  --tint-done-bd:   #c4daf4;
  --tint-drop-bg:   #fbeceb;  --tint-drop-bd:   #f3cdc9;

  --grid-line:      rgba(15, 118, 110, .07);
  --shadow:         0 1px 2px rgba(16, 24, 40, .06);

  /* 浅色主题下粒子改用 over 合成，白底会吃掉大量对比，透明度要比深色高一档 */
  --hero-fx-base:   #0f766e;
  --hero-fx-hot:    #06403b;
  --hero-fx-alpha:  .5;

  color-scheme: light;
}

/* ==========================================================================
   2. 基础与重置
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--sp-3));
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 中文标点挤压与中西文自动间距：渐进增强，不支持则忽略 */
  text-spacing-trim: space-first;
  text-autospace: normal;
  overflow-x: hidden;
}

/* 移动优先：默认（手机）为底部标签栏留出空间，≥640px 再在下方取消。
   全站禁止使用 max-width 查询——断点只有「从窄到宽」一个方向。 */
body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-10) 0; }

::selection { background: var(--c-accent-soft); }

/* 键盘焦点：全站统一，对比度 ≥3:1 */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   3. 布局骨架（移动优先）
   ========================================================================== */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px));
}
/* 用右侧同样的安全区内边距，避免刘海屏偏移 */
.wrap { padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }

.wrap--read { max-width: calc(var(--readw) + var(--gutter) * 2); }

/* 区块：移动端 40px，逐级放宽 */
.section {
  padding-block: var(--sp-10);
  border-top: 1px solid var(--c-border);
}
.section--flush { border-top: 0; }

@media (min-width: 40rem) {
  :root { --gutter: 1.5rem; }
  .section { padding-block: var(--sp-12); }
}
@media (min-width: 56.25rem) {
  .section { padding-block: var(--sp-16); }
}

/* ==========================================================================
   4. 顶栏
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--c-bg) 84%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
  padding-top: env(safe-area-inset-top, 0px);
}

.topbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: var(--ls-mono);
  color: var(--c-text);
  white-space: nowrap;
  flex: none;
}
.brand:hover { text-decoration: none; }
.brand__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-accent); flex: none;
}
/* 移动端只显示短名，给导航腾出空间 */
.brand__short { display: inline; }
.brand__name  { display: none; font-weight: 500; }

/* 桌面 / 平板：导航回到顶栏 */
.nav { display: none; }

.theme-toggle {
  margin-left: auto;
  flex: none;
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--c-border-hi);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-text-dim);
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease);
}
.theme-toggle:hover { color: var(--c-accent); border-color: var(--c-accent); }
/* 用 CSS 画图标，不用字符/表情 */
.theme-toggle__icon {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

@media (min-width: 40rem) {
  :root { --topbar-h: 3.625rem; }
  .brand__short { display: none; }
  .brand__name  { display: inline; }
  .brand { font-size: .875rem; }

  .nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-left: auto;
  }
  .nav a {
    font-family: var(--font-mono);
    font-size: .8125rem;
    letter-spacing: var(--ls-mono);
    color: var(--c-text-dim);
    padding: .4375rem .6875rem;
    border-radius: var(--r-sm);
    white-space: nowrap;
    transition: color var(--ease), background var(--ease);
  }
  .nav a:hover { color: var(--c-text); background: var(--c-surface); text-decoration: none; }
  .nav a.is-active { color: var(--c-accent); background: var(--c-accent-soft); }
  .theme-toggle { margin-left: var(--sp-2); }
}

/* --- 移动端底部标签栏（≥640px 隐藏） --- */
.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: flex;
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tabbar a {
  flex: 1 1 0;
  min-width: 0;
  height: var(--tabbar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: var(--ls-mono);
  color: var(--c-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 2px;
}
.tabbar a:hover { text-decoration: none; }
.tabbar a.is-active { color: var(--c-accent); }
/* 顶部指示条：像终端里的活动页签 */
.tabbar a.is-active::before {
  content: '';
  position: absolute;
  top: 0; left: 22%; right: 22%;
  height: 2px; border-radius: 0 0 2px 2px;
  background: var(--c-accent);
}

@media (min-width: 40rem) {
  .tabbar { display: none; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   5. 首屏
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  /* 给粒子字标留出纵向空间，字标太扁会看不出是字 */
  min-height: 25rem;
  display: flex;
  align-items: center;
  padding-block: var(--sp-10) var(--sp-8);
}
.hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 78% 65% at 50% 0%, #000 15%, transparent 72%);
          mask-image: radial-gradient(ellipse 78% 65% at 50% 0%, #000 15%, transparent 72%);
}

/* 粒子字标画布：铺满首屏，纯装饰，不吃指针事件 */
.hero__fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 2; width: 100%; display: grid; gap: var(--sp-8); }

.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  color: var(--c-accent);
  margin: 0 0 var(--sp-3);
}
.kicker::before { content: '$ '; color: var(--c-text-faint); }

h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 600;
  letter-spacing: var(--ls-cjk);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

.hero__lead {
  font-size: var(--fs-lead);
  color: var(--c-text-dim);
  margin: 0 0 var(--sp-5);
  max-width: 34em;
  text-wrap: pretty;
}

.hero__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  color: var(--c-text-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.hero__meta b { color: var(--c-text-dim); font-weight: 400; }

@media (min-width: 56.25rem) {
  .hero { padding-block: var(--sp-16) var(--sp-12); }
  .hero__inner { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: var(--sp-12); align-items: start; }
}

/* ==========================================================================
   6. 终端面板
   ========================================================================== */

.panel {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  overflow: hidden;
}
.panel__bar {
  display: flex; align-items: center; gap: 7px;
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-hi);
}
.panel__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--c-border-hi); }
.panel__bar em {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  font-style: normal; color: var(--c-text-faint);
  margin-left: var(--sp-1); letter-spacing: var(--ls-mono);
}
.panel__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.panel__more { margin: var(--sp-3) 0 0; font-family: var(--font-mono); font-size: var(--fs-meta); }

.plist { font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 2.1; margin: 0; }
.plist div { display: flex; gap: var(--sp-3); }
.plist dt { color: var(--c-text-faint); flex: none; width: 3.875rem; }
.plist dd { margin: 0; color: var(--c-text-dim); }
.plist dd.is-hi { color: var(--c-accent); }

/* ==========================================================================
   7. 区块标题
   ========================================================================== */

.sec-head { margin-bottom: var(--sp-6); }
.sec-head--row { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }

.sec-label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  color: var(--c-text-faint);
  margin: 0 0 var(--sp-2);
}
.sec-label::before { content: '// '; }

.sec-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  font-weight: 600;
  letter-spacing: var(--ls-cjk);
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}

.sec-desc {
  color: var(--c-text-dim);
  margin: 0;
  max-width: 40em;
  font-size: var(--fs-sm);
  text-wrap: pretty;
}

.more { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-mono); }

@media (min-width: 40rem) {
  .sec-head--row { flex-direction: row; align-items: flex-end; gap: var(--sp-5); }
  .sec-head--row .sec-title { margin-bottom: 0; }
  .sec-head--row .more { margin-left: auto; }
}

/* ==========================================================================
   8. 网格与卡片（移动端一律单列）
   ========================================================================== */

.grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }

@media (min-width: 40rem) {
  .grid--2, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 56.25rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .grid { gap: var(--sp-5); }
}

.card {
  display: block;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  padding: var(--sp-5);
  color: inherit;
  transition: border-color var(--ease), background var(--ease), transform var(--ease);
}
a.card:hover {
  border-color: var(--c-border-hi);
  background: var(--c-surface-hi);
  text-decoration: none;
  transform: translateY(-2px);
}
a.card:active { transform: translateY(0); }

.card__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  color: var(--c-text-faint);
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  margin: 0 0 var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.card__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  font-weight: 600;
  letter-spacing: var(--ls-cjk);
  margin: 0 0 var(--sp-2);
  text-wrap: pretty;
}
.card__desc { color: var(--c-text-dim); font-size: var(--fs-sm); margin: 0; text-wrap: pretty; }

.card--tall { display: flex; flex-direction: column; height: 100%; }
.card--tall .card__foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--c-text-faint);
}
.card--accent { border-color: var(--c-border-hi); }
.card--accent::after {
  content: ''; display: block; height: 2px;
  margin: var(--sp-4) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
  background: var(--c-accent); opacity: .55;
}

.featured-slot { display: flex; flex-direction: column; }
.featured-slot > .sec-label { margin-bottom: var(--sp-2); }
.featured-slot .card { flex: 1; }

/* ==========================================================================
   9. 徽章与标签
   ========================================================================== */

.badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  line-height: 1;
  padding: .34375rem .5rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border-hi);
  color: var(--c-text-dim);
  background: var(--c-surface-hi);
  white-space: nowrap;
}

.badge--topic { color: var(--c-topic); background: var(--tint-topic-bg); border-color: var(--tint-topic-bd); }
.badge--form  { color: var(--c-form);  background: var(--tint-form-bg);  border-color: var(--tint-form-bd); }
.badge--doing { color: var(--c-doing); background: var(--tint-doing-bg); border-color: var(--tint-doing-bd); }
.badge--done  { color: var(--c-done);  background: var(--tint-done-bg);  border-color: var(--tint-done-bd); }
.badge--drop  { color: var(--c-drop);  background: var(--tint-drop-bg);  border-color: var(--tint-drop-bd); }

.tagrow { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ==========================================================================
   10. 时间线
   ========================================================================== */

.tl { position: relative; margin: 0; padding: 0 0 0 var(--sp-6); list-style: none; }
.tl::before {
  content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(var(--c-border-hi), transparent);
}
.tl li { position: relative; padding-bottom: var(--sp-5); }
.tl li:last-child { padding-bottom: 0; }
.tl li::before {
  content: ''; position: absolute; left: calc(var(--sp-6) * -1); top: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--c-border-hi); background: var(--c-bg);
}
.tl li[data-kind="受训"]::before { border-color: var(--c-form); }
.tl li[data-kind="练习"]::before { border-color: var(--c-accent); }
.tl li[data-kind="读书"]::before { border-color: var(--c-topic); }
.tl li[data-kind="反思"]::before { border-color: var(--c-done); }

.tl__date {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  color: var(--c-text-faint);
  display: block; margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.tl__title { font-size: var(--fs-body); font-weight: 500; margin: 0 0 var(--sp-1); }
.tl__note { color: var(--c-text-dim); font-size: var(--fs-sm); margin: 0; text-wrap: pretty; }

/* ==========================================================================
   11. 筛选条
   ========================================================================== */

.filters {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  margin-bottom: var(--sp-6);
}
.filter-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.filter-row__label {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  color: var(--c-text-faint);
  flex: none; width: 100%;
}

.chip {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  min-height: 2.25rem;               /* 触摸友好 */
  padding: .5rem .75rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border-hi);
  background: transparent;
  color: var(--c-text-dim);
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.chip:hover { color: var(--c-text); border-color: var(--c-text-faint); }
.chip.is-on { color: var(--c-accent); border-color: var(--c-accent); background: var(--c-accent-soft); }

@media (min-width: 40rem) {
  .filter-row__label { width: 4.625rem; }
  .filters { padding: var(--sp-5); }
}

/* ==========================================================================
   12. 专题块与条目列表
   ========================================================================== */

.series {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.series__head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.series__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--ls-cjk); margin: 0; }
.series__desc { color: var(--c-text-dim); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); text-wrap: pretty; }

.plist-items { list-style: none; margin: 0; padding: 0; }
.plist-items li { border-top: 1px solid var(--c-border); }
.plist-items li:first-child { border-top: 0; }

.plist-items a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-1);
  padding: var(--sp-4) 2px;
  min-height: var(--tap);
  color: inherit;
  align-items: baseline;
}
.plist-items a:hover { text-decoration: none; }
.plist-items a:hover .plist-items__t { color: var(--c-accent); }

.plist-items__t { font-size: var(--fs-body); font-weight: 500; }
.plist-items__idx {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  color: var(--c-text-faint); margin-right: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.plist-items__d {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  color: var(--c-text-faint); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.plist-items__s { color: var(--c-text-dim); font-size: var(--fs-sm); }

@media (min-width: 40rem) {
  .plist-items a { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-5); }
  .plist-items__s { grid-column: 1 / -1; }
  .series { padding: var(--sp-6); }
}

/* ==========================================================================
   13. 文章阅读栏
   ========================================================================== */

/* 全站统一的阅读宽度，保证标题/正文/提示/翻页左对齐 */
.prose, .notice, .pager, .fields, .sandbox { max-width: var(--readw); }

.prose { font-size: var(--fs-body); }
.prose > *:first-child { margin-top: 0; }

.prose h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  font-weight: 600;
  letter-spacing: var(--ls-cjk);
  margin: var(--sp-10) 0 var(--sp-3);
  text-wrap: balance;
}
.prose h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  font-weight: 600;
  letter-spacing: var(--ls-cjk);
  margin: var(--sp-8) 0 var(--sp-2);
}
.prose p { margin: 0 0 1.1em; text-wrap: pretty; }
.prose li { margin-bottom: var(--sp-2); }
.prose ul, .prose ol { padding-left: 1.375rem; margin: 0 0 1.1em; }

.prose blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
  border-left: 2px solid var(--c-border-hi);
  color: var(--c-text-dim);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose code {
  font-family: var(--font-mono);
  font-size: .875em;
  background: var(--c-surface-hi);
  border: 1px solid var(--c-border);
  padding: .125rem .375rem;
  border-radius: var(--r-sm);
  color: var(--c-accent);
}
.prose pre {
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: var(--sp-4);
  overflow-x: auto;
  margin: 0 0 var(--sp-6);
  line-height: 1.65;
  -webkit-overflow-scrolling: touch;
}
.prose pre code { background: none; border: 0; padding: 0; color: var(--c-text); }

.article-head { padding-top: var(--sp-10); }
.article-head h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-4); }

.article-head__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  color: var(--c-text-faint);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  font-variant-numeric: tabular-nums;
}
.article-head__meta .tagrow { margin-left: auto; }

.notice {
  margin: var(--sp-6) 0;
  padding: var(--sp-4);
  border-radius: var(--r);
  border: 1px solid var(--tint-form-bd);
  background: var(--tint-form-bg);
  color: var(--c-text-dim);
  font-size: var(--fs-sm);
}
.notice b { color: var(--c-form); font-weight: 500; }

.pager { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-10); }
.pager a {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  padding: var(--sp-4);
  color: inherit;
  min-height: var(--tap);
}
.pager a:hover { border-color: var(--c-border-hi); text-decoration: none; }
.pager__k {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono); color: var(--c-text-faint);
  display: block; margin-bottom: var(--sp-1);
}
.pager__t { font-size: var(--fs-sm); font-weight: 500; }

@media (min-width: 40rem) {
  .pager { flex-direction: row; flex-wrap: wrap; }
  .pager a { flex: 1 1 15rem; }
}

/* ==========================================================================
   14. 字段表（实验详情）
   ========================================================================== */

.fields { margin: 0 0 var(--sp-8); border-top: 1px solid var(--c-border); }
.fields > div {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3) 2px;
  border-bottom: 1px solid var(--c-border);
}
.fields dt {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono); color: var(--c-text-faint);
}
.fields dd { margin: 0; font-size: var(--fs-body); }

@media (min-width: 40rem) {
  .fields > div { grid-template-columns: 5.75rem minmax(0, 1fr); gap: var(--sp-4); }
}

/* ==========================================================================
   15. 演示沙盒与图表
   ========================================================================== */

.sandbox {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
  margin: 0 0 var(--sp-8);
}
.sandbox__body { padding: var(--sp-4); }

.chart { display: flex; gap: .375rem; margin: var(--sp-1) 0 var(--sp-4); }
@media (min-width: 40rem) { .chart { gap: .625rem; } }

.bar {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .4375rem;
  background: none; border: 0; padding: 0;
  cursor: pointer; color: inherit;
  font-family: var(--font-mono); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bar__val { font-size: var(--fs-micro); color: var(--c-text-faint); }
.bar__track { height: 8.125rem; width: 100%; display: flex; align-items: flex-end; }
.bar__fill {
  width: 100%; min-height: 3px;
  background: color-mix(in srgb, var(--c-accent) 26%, transparent);
  border-radius: 4px 4px 0 0;
  transition: background var(--ease);
}
.bar:hover .bar__fill { background: color-mix(in srgb, var(--c-accent) 50%, transparent); }
.bar.is-on .bar__fill { background: var(--c-accent); }
.bar.is-on .bar__val,
.bar.is-on .bar__lab { color: var(--c-accent); }
.bar__lab { font-size: var(--fs-micro); color: var(--c-text-faint); }

.chart-hint {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--c-text-faint); margin: calc(var(--sp-2) * -1) 0 var(--sp-4);
}

.chart-detail {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-bg-subtle);
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}
.chart-detail strong { font-family: var(--font-mono); color: var(--c-accent); font-weight: 400; }

.quiz__q { font-size: var(--fs-lead); margin: 0 0 var(--sp-4); }
.quiz__q::first-letter { color: var(--c-accent); }
.quiz__opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.quiz__fb {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  color: var(--c-text-faint); margin: var(--sp-4) 0 0;
}

.btn {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  min-height: var(--tap);            /* 触摸友好 */
  padding: .625rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border-hi);
  background: var(--c-surface-hi);
  color: var(--c-text);
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn--on { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-soft); }

/* ==========================================================================
   16. 页脚
   ========================================================================== */

.foot {
  border-top: 1px solid var(--c-border);
  margin-top: var(--sp-5);
  padding-block: var(--sp-8) var(--sp-10);
  font-size: var(--fs-sm);
  color: var(--c-text-faint);
}
.foot__inner { display: flex; flex-direction: column; gap: var(--sp-2); }
.foot a { color: var(--c-text-dim); }
.foot__beian {
  margin: var(--sp-4) 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
}
.foot__beian .muted { color: var(--c-text-faint); }

/* ==========================================================================
   漂流瓶入口 · 支持模块正下方的醒目大按钮
   --------------------------------------------------------------------------
   群岛页的引言请访客「去每个页面的底部扔一个漂流瓶」—— 所以每一页都得真有这一个入口。

   ⚠️ 2026-09-27 挪过一次位置，别再挪回去：最早它只是备案号底下的一行文字链，
      压在页脚最末、和「个人非经营性网站」挤在一起，看着像页脚的附属品，没人会点。
      现在移到支持模块的正下方，做成整块可点的大按钮 —— 左侧一个轻轻浮动的玻璃瓶，
      右侧是大字标题 + 一句说明，整块可点，比一行灰字醒目得多。
   ⚠️ 首页（home.html）不用这条：它的漂流瓶在底部四按钮里（.navbtn.bottlebtn），
      本来就是一个按钮，别再叠一个。
   ========================================================================== */
.bottle-cta { margin-top: var(--sp-8); }

.bottle-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-8);
  border: 1px solid var(--tint-doing-bd);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 150% at 10% 0%, var(--tint-doing-bg), transparent 62%),
    var(--c-surface);
  color: var(--c-text);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.bottle-btn:hover,
.bottle-btn:focus-visible {
  transform: translateY(-2px);
  border-color: var(--c-accent);
  box-shadow: 0 10px 30px var(--c-accent-soft), 0 2px 6px rgba(0, 0, 0, .35);
  outline: none;
}

.bottle-btn__art { flex: 0 0 auto; width: 66px; height: 92px; }
.bottle-btn__art svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 14px var(--c-accent-soft));
  animation: bottleFloat 3.8s ease-in-out infinite;
}
@keyframes bottleFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}

.bottle-btn__text { min-width: 0; }
.bottle-btn__title {
  display: block;
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-cjk);
}
.bottle-btn__sub {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-dim);
}
.bottle-btn__arrow {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-accent);
  transition: transform .18s ease;
}
.bottle-btn:hover .bottle-btn__arrow,
.bottle-btn:focus-visible .bottle-btn__arrow { transform: translateX(5px); }

@media (max-width: 40rem) {
  .bottle-btn {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-4);
    padding: var(--sp-6);
  }
  .bottle-btn__art { width: 58px; height: 80px; }
  .bottle-btn__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bottle-btn { transition: none; }
  .bottle-btn__art svg { animation: none; }
}

/* 备案行：ICP 号 · 警徽 + 公安联网备案号（内容由 assets/js/beian.js 填）。
   ⚠️ 这两条样式在 home.css 里还有一份 —— 首页是独立的 3D 页面，只加载 home.css。
      改图标高度记得两处一起改 */
.beian__icp, .beian__ga { color: inherit; }
.beian__icp:hover, .beian__ga:hover { color: var(--c-accent); text-decoration: underline; }
.beian__sep { opacity: .5; }
.beian__logo {
  /* ⚠️ 必须显式写 inline-block：本文件第 188 行有一条 `img, svg, video { display: block }`
     （图片默认铺满一行的通用重置）。不覆盖它，徽标就会独占一行、把编号挤到下面去 ——
     在页脚里看到的正是「徽标飘在最左边、编号另起一行」。2026-10-19 修的就是这个。
     这条别删，删了不报错，只是排版悄悄坏掉。 */
  display: inline-block;
  /* ⚠️ 高度用 1em，跟同一个 <a> 里的字号一样大。
     原来写死 17px：首页字号 11px、岛屿页 12.5px，徽标都比字还高，看着突兀。
     用 em 的另一个好处是「每一页各自多大字，徽标就多大」，不用逐页调。
     宽度交给 auto：徽标不是正圆，写死宽高会把它压扁一点。 */
  height: 1em; width: auto;
  /* 不贴基线，而是让徽标中心对上汉字的视觉中心；贴基线会显得整体偏高 */
  vertical-align: -.12em;
  /* 和后面的「鲁公网安备」拉开一点，否则图标边缘会碰到「鲁」字 */
  margin-right: .25em;
}

@media (min-width: 40rem) {
  .foot__inner { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
}

/* ==========================================================================
   17. 空状态
   ========================================================================== */

.empty {
  padding: var(--sp-10) var(--sp-4);
  text-align: center;
  color: var(--c-text-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  border: 1px dashed var(--c-border-hi);
  border-radius: var(--r-lg);
}

/* ==========================================================================
   18. 动效降级
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  a.card:hover { transform: none; }
}

/* ==========================================================================
   19. 打印
   ========================================================================== */

@media print {
  .topbar, .tabbar, .theme-toggle, .filters, .pager, .foot__inner { display: none; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .prose, .notice, .fields, .sandbox { max-width: none; }
}

/* ==========================================================================
   20. 工具类（放在最后，用于覆盖上面的结构性规则）
   ========================================================================== */

/* 子页 h1 比首页低一档，避免每个内页都用展示级字号 */
h1.is-sub { font-size: var(--fs-h1); }

.hero--sub { padding-block: var(--sp-8) var(--sp-6); }
@media (min-width: 56.25rem) {
  .hero--sub { padding-block: var(--sp-10) var(--sp-8); }
}

.section--tight { padding-top: 0; }

.muted { color: var(--c-text-faint); }

.fineprint {
  color: var(--c-text-faint);
  font-size: var(--fs-meta);
  margin-top: var(--sp-3);
}

.panel--narrow { max-width: 32.5rem; }

.mt-4 { margin-top: var(--sp-4); }

/* ==========================================================================
   21. 设计规范页（design.html）专用
   ========================================================================== */

.spec-block { margin-bottom: var(--sp-10); }

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--sp-3);
}
.swatch {
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--c-surface);
}
.swatch__chip { height: 3.25rem; }
.swatch__meta {
  padding: .5rem .625rem .625rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  line-height: 1.6;
}
.swatch__name { color: var(--c-text); display: block; }
.swatch__hex  { color: var(--c-text-faint); display: block; text-transform: uppercase; }
.swatch__cr   { color: var(--c-text-faint); display: block; }

.spec-note {
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  margin: 0 0 var(--sp-4);
  max-width: 46em;
}

.typerow {
  border-top: 1px solid var(--c-border);
  padding: var(--sp-4) 0;
  display: grid;
  gap: var(--sp-2);
}
.typerow:first-of-type { border-top: 0; }
.typerow__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--c-text-faint);
}
.typerow__specimen { margin: 0; }

.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec-table th, .spec-table td {
  text-align: left;
  padding: .625rem .5rem;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.spec-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--c-text-faint);
  font-weight: 400;
}
.spec-table code {
  font-family: var(--font-mono);
  font-size: .8125em;
  color: var(--c-accent);
}

.tokenscale { display: flex; flex-direction: column; gap: var(--sp-2); }
.tokenbar { display: flex; align-items: center; gap: var(--sp-3); }
.tokenbar__box {
  height: 1.25rem;
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent);
  border-radius: 3px;
  flex: none;
}
.tokenbar__lab {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--c-text-faint);
}

/* 字号阶梯样张用类（规范页专用，避免内联样式） */
.fs-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 600; letter-spacing: var(--ls-cjk); }
.fs-h1      { font-size: var(--fs-h1);      line-height: var(--lh-heading); font-weight: 600; letter-spacing: var(--ls-cjk); }
.fs-h2      { font-size: var(--fs-h2);      line-height: var(--lh-heading); font-weight: 600; letter-spacing: var(--ls-cjk); }
.fs-h3      { font-size: var(--fs-h3);      line-height: var(--lh-heading); font-weight: 600; letter-spacing: var(--ls-cjk); }
.fs-lead    { font-size: var(--fs-lead);    line-height: var(--lh-body); }
.fs-body    { font-size: var(--fs-body);    line-height: var(--lh-body); }
.fs-sm      { font-size: var(--fs-sm);      line-height: var(--lh-body); }
.fs-meta    { font-size: var(--fs-meta);    line-height: var(--lh-tight); font-family: var(--font-mono); letter-spacing: var(--ls-mono); }
.fs-micro   { font-size: var(--fs-micro);   line-height: var(--lh-tight); font-family: var(--font-mono); letter-spacing: var(--ls-mono); }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }