/* ============ 像素字体 ============
 * FusionPixel12 — 12×12 点阵，全站统一字体。
 * 像素字体按整数倍缩放最清晰。
 * ================================== */
@font-face {
  font-family: 'FusionPixel12';
  src: url('../fonts/FusionPixel12.ttf') format('truetype');
  font-display: swap;
}

/* ============ 主题变量（纸底 Neo-Brutalist） ============ */
:root {
  --bg: #d8d1bf;
  --bg-soft: #ece4d2;
  --paper: #f4ecd9;
  --panel: #f8f1df;
  --panel-2: #ded6c4;
  --card-back: #2a2924;
  --ink: #050505;
  --line: #050505;
  --line-hi: #111;
  --text: #161512;
  --text-dim: #655f52;
  --accent: #d8b84d;
  --accent-dim: #77aaa2;
  --accent-2: #77aaa2;
  --accent-3: #c88492;
  --accent-4: #8072a6;
  --danger: #b95f55;
  --shadow-press: 5px 5px 0 rgba(5, 5, 5, .95);
  --shadow-hard: 8px 8px 0 rgba(5, 5, 5, .95);
  --surface-shadow: 5px 5px 0 rgba(5, 5, 5, .88);
  --cursor-default: url("../assets/cursors/cursor-default.svg") 5 3, auto;
  --cursor-pointer: url("../assets/cursors/cursor-pointer.svg?v=20260725-pointer-flipped") 12 1, pointer;
  --cursor-text: url("../assets/cursors/cursor-text.svg") 5 22, text;
  --pixel-surface:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(43, 41, 36, .075) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(43, 41, 36, .075) 23px 24px);
  --font-head: 'FusionPixel12';
  --font-body: 'FusionPixel12';
  --font-mono: 'FusionPixel12';
  --font-title: "Arial Black", "Microsoft YaHei UI", "Microsoft YaHei", "SimHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --fs-sm: 12px;
  --fs-base: 18px;
  --fs-lg: 28px;
  --fs-xl: 44px;
  --sidebar-w: 248px;
  --sidebar-mini-w: 86px;
  --panel-radius: 18px;
  --control-radius: 12px;
}

@property --tilt-x {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@property --tilt-y {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(43, 41, 36, .07) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(43, 41, 36, .07) 23px 24px),
    linear-gradient(135deg, rgba(216, 184, 77, .18), transparent 44%, rgba(119, 170, 162, .16));
  background-size: 24px 24px, 24px 24px, auto;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-synthesis: none;
  line-height: 1.7;
  min-height: 100vh;
  padding-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  cursor: var(--cursor-default);
  transition: padding-left .18s ease;
}

body.sidebar-mini {
  --sidebar-w: var(--sidebar-mini-w);
}

:where(a, button, select, summary, label, [role="button"], [tabindex]:not([tabindex="-1"])) {
  cursor: var(--cursor-pointer);
}

:where(input, textarea, [contenteditable="true"]) {
  cursor: var(--cursor-text);
}

body.font-normal {
  --font-head: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  --font-mono: Consolas, "SFMono-Regular", "Liberation Mono", Menlo, monospace;
  --font-title: "Arial Black", "Microsoft YaHei UI", "Microsoft YaHei", "SimHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --fs-sm: 13px;
  --fs-base: 16px;
  --fs-lg: 26px;
  --fs-xl: 48px;
  line-height: 1.65;
}

button,
input,
textarea,
select,
code,
pre {
  font-family: var(--font-body);
  font-synthesis: none;
}

body.font-normal,
body.font-normal button,
body.font-normal input,
body.font-normal textarea,
body.font-normal select,
body.font-normal code,
body.font-normal pre {
  font-synthesis: weight style;
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-family: var(--font-title);
  font-weight: 900;
  letter-spacing: 0;
}

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 4px solid var(--accent-dim); outline-offset: 3px; }

::selection { background: var(--accent); color: var(--ink); }

/* 像素风滚动条 */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--panel-2); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 2px solid var(--panel-2); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-4); }

.hidden { display: none !important; }

#view:focus { outline: none; }

/* ============ 跳到主内容（键盘可达） ============ */
.skip-link {
  position: fixed;
  top: -60px;
  left: calc(var(--sidebar-w) + 16px);
  z-index: 300;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--control-radius);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  transition: top .12s;
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ============ 回到顶部 ============ */
.back-top {
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 90;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--control-radius);
  font-family: var(--font-head);
  font-size: var(--fs-base);
  cursor: var(--cursor-pointer);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .15s, transform .15s, visibility .15s, border-color .12s, color .12s;
}
.back-top.show { opacity: 1; visibility: visible; transform: none; }
.back-top:hover { color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-press); }

/* ============ 左侧导航 ============ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 18px;
  padding: 18px 16px;
  background-color: var(--paper);
  background-image: var(--pixel-surface);
  border-right: 3px solid var(--ink);
  box-shadow: 5px 0 0 rgba(43, 41, 36, .82);
  overflow-y: auto;
  overflow-x: visible;
  transition: width .18s ease, padding .18s ease, gap .18s ease;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  padding-bottom: 18px;
  border-bottom: 3px solid var(--ink);
  text-decoration: none;
}
.logo:hover { text-decoration: none; }

.logo-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--accent);
  color: var(--ink);
  font-size: var(--fs-lg);
  border: 3px solid var(--ink);
  border-radius: var(--control-radius);
  box-shadow: 4px 4px 0 var(--accent-3), 7px 7px 0 var(--ink);
  image-rendering: pixelated;
}

.logo-text { display: flex; flex-direction: column; line-height: 1.15; font-family: var(--font-head); font-size: var(--fs-lg); }
.logo-text small {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  color: var(--ink);
  letter-spacing: 0;
}

.sidebar-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 18px;
  padding: 5px 8px;
  background: var(--accent-4);
  border: 2px solid var(--ink);
  color: #fff;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  box-shadow: 3px 3px 0 var(--ink);
}

.sidebar-clock {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 0 2px;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: var(--cursor-pointer);
  text-align: center;
}

.sidebar-clock-face {
  position: relative;
  width: 112px;
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--bg-soft);
  box-shadow: 3px 3px 0 rgba(43, 41, 36, .85);
  --clock-hour: 0deg;
  --clock-minute: 0deg;
  --clock-second: 0deg;
  transition: transform .12s ease, box-shadow .12s ease;
}

.sidebar-clock:hover .sidebar-clock-face {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(43, 41, 36, .85);
}

.clock-mark,
.clock-hand,
.clock-pin {
  position: absolute;
  left: 50%;
  top: 50%;
}

.clock-mark {
  width: 5px;
  height: 12px;
  background: var(--ink);
  border-radius: 4px;
  transform-origin: 50% 0;
}

.clock-mark-12 { transform: translate(-50%, -51px); }
.clock-mark-3 { transform: translate(45px, -50%) rotate(90deg); }
.clock-mark-6 { transform: translate(-50%, 39px); }
.clock-mark-9 { transform: translate(-50px, -50%) rotate(90deg); }

.clock-hand {
  bottom: 50%;
  top: auto;
  width: 4px;
  border-radius: 4px;
  background: var(--ink);
  transform-origin: 50% 100%;
}

.clock-hour {
  height: 31px;
  transform: translateX(-50%) rotate(var(--clock-hour));
}

.clock-minute {
  height: 42px;
  width: 3px;
  transform: translateX(-50%) rotate(var(--clock-minute));
}

.clock-second {
  height: 46px;
  width: 2px;
  background: var(--accent-3);
  transform: translateX(-50%) rotate(var(--clock-second));
}

.clock-pin {
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}

.sidebar-digital-clock {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 112px;
  padding-top: 0;
  color: var(--paper);
  font-family: var(--font-head);
  line-height: 1;
}

.sidebar-clock.is-digital .sidebar-clock-face {
  display: none;
}

.sidebar-clock.is-digital .sidebar-digital-clock {
  display: flex;
}

.flip-digit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 42px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 45%),
    #080807;
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: none;
  color: var(--paper);
  font-size: 28px;
  font-weight: 900;
}

.flip-digit::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 2;
  height: 1px;
  background: var(--ink);
  transform: translateY(-50%);
}

.flip-digit::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-top: 1px solid rgba(244, 236, 217, .22);
  border-radius: 5px;
  pointer-events: none;
}

.flip-digit-value {
  position: relative;
  z-index: 1;
  display: block;
  transform-origin: 50% 50%;
}

.flip-digit.is-flipping .flip-digit-value {
  animation: flipDigitTick .28s cubic-bezier(.2, .8, .2, 1);
}

.flip-colon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 4px;
  padding: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  transform: translateY(-2px);
}

.sidebar-clock-date {
  color: var(--text-dim);
  font-family: var(--font-head);
  font-size: calc(var(--fs-sm) + 1px);
  line-height: 1.1;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0;
}
.main-nav a {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 12px;
  color: var(--ink);
  font-size: var(--fs-base);
  border: 2px solid var(--ink);
  border-radius: var(--control-radius);
  background: var(--panel);
  box-shadow: 3px 3px 0 var(--ink);
  transition: all .12s;
  text-decoration: none;
}

.nav-icon {
  grid-column: 1;
  width: 22px;
  height: 22px;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-icon-solid {
  fill: currentColor;
  stroke: none;
}

.main-nav a span {
  grid-column: 2;
  min-width: 0;
}

.main-nav a:hover {
  transform: translate(-2px, -2px);
  color: var(--ink);
  background: var(--accent-dim);
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--ink);
}
.main-nav a.active {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--ink);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.header-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 3px solid var(--ink);
}

.sidebar-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: stretch;
  gap: 8px;
}

.sidebar-collapse-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 38px;
  padding: 6px;
  color: var(--ink);
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: var(--control-radius);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: var(--cursor-pointer);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}

.sidebar-collapse-btn:hover {
  background: var(--accent-dim);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
}

.sidebar-collapse-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
  transition: transform .18s ease;
}

.sidebar-collapse-btn.is-collapsed svg {
  transform: rotate(180deg);
}

.btn.font-toggle {
  min-width: 100%;
  justify-content: center;
  background: var(--panel);
  color: var(--ink);
}
.btn.font-toggle:not(.is-pixel):hover {
  background: var(--ink);
  color: #fff;
}
.btn.font-toggle.is-pixel {
  background: var(--accent);
  border-color: var(--ink);
  color: var(--ink);
}
.btn.font-toggle.is-pixel:hover { background: #e3c863; border-color: var(--ink); }

body.sidebar-mini .site-header {
  padding: 16px 12px;
  gap: 14px;
  align-items: center;
}

body.sidebar-mini .logo {
  justify-content: center;
  width: 100%;
  padding-bottom: 14px;
}

body.sidebar-mini .logo-text,
body.sidebar-mini .main-nav a span,
body.sidebar-mini .sidebar-kicker,
body.sidebar-mini .sidebar-clock {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body.sidebar-mini .logo-block {
  width: 52px;
  height: 52px;
  font-size: var(--fs-base);
  box-shadow: 3px 3px 0 var(--accent-3), 6px 6px 0 var(--ink);
}

body.sidebar-mini .main-nav {
  width: 100%;
  align-items: center;
}

body.sidebar-mini .main-nav a {
  width: 54px;
  min-height: 54px;
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 10px;
}

body.sidebar-mini .nav-icon {
  grid-column: 1;
  width: 25px;
  height: 25px;
}

body.sidebar-mini .header-actions {
  width: 100%;
  align-items: center;
  padding-top: 14px;
}

body.sidebar-mini .sidebar-action-row {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 10px;
}

body.sidebar-mini .btn.font-toggle {
  width: 54px;
  min-width: 54px;
  height: 38px;
  padding: 6px;
  font-size: 0;
}

body.sidebar-mini .btn.font-toggle::before {
  content: '字';
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 900;
}

body.sidebar-mini .sidebar-collapse-btn {
  width: 54px;
}

.nav-toggle {
  display: none;
  background: var(--accent-2);
  border: 3px solid var(--ink);
  border-radius: var(--control-radius);
  color: var(--ink);
  font-size: var(--fs-base);
  padding: 6px 10px;
  cursor: var(--cursor-pointer);
}

/* ============ 管理条 ============ */
.admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 28px;
  background: var(--accent);
  background-image: repeating-linear-gradient(90deg, transparent 0 15px, rgba(7, 7, 7, .14) 15px 16px);
  border-bottom: 3px solid var(--ink);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
}
.admin-bar-label { color: var(--ink); }
.admin-bar-status {
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--control-radius);
  padding: 3px 8px;
  background: var(--paper);
}
.admin-bar-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ============ 按钮（硬阴影像素按钮：右下实阴影，按下位移收起） ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 3px solid var(--ink);
  border-radius: var(--control-radius);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  cursor: var(--cursor-pointer);
  white-space: nowrap;
  box-shadow: var(--shadow-press);
  transition: transform .08s steps(2, end), box-shadow .08s steps(2, end), border-color .12s, background .12s;
}
.btn:hover { border-color: var(--accent-dim); }
.btn:active {
  transform: translate(6px, 6px);
  background: var(--panel-2);
  box-shadow: none;
}

.btn-sm {
  padding: 6px 12px;
  font-size: var(--fs-sm);
  font-family: var(--font-head);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn-sm:active { transform: translate(4px, 4px); }

.btn-primary {
  background: var(--accent);
  border-color: var(--ink);
  color: var(--ink);
}
.btn-primary:hover { background: #e3c863; border-color: var(--ink); }
.btn-primary:active { background: var(--accent); }

.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { box-shadow: none; }
.btn-ghost:active { transform: translate(2px, 2px); background: var(--panel-2); }
.btn-danger { border-color: rgba(207, 93, 79, .55); color: var(--danger); background: transparent; box-shadow: none; }
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--ink); }
.btn-danger:active { transform: translate(2px, 2px); }

/* ============ 主视图容器 ============ */
.view {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 34px clamp(28px, 4.2vw, 64px) 76px;
}

.route-home .view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding-top: 18px;
  padding-bottom: 36px;
}

.page-head { margin-bottom: 24px; }
.page-head h1 {
  font-size: clamp(28px, 4vw, var(--fs-xl));
  display: flex;
  align-items: center;
  gap: 14px;
  line-height: 1.05;
  text-shadow: none;
  text-transform: uppercase;
}
.page-head h1 .pix { font-family: var(--font-head); font-size: var(--fs-sm); color: var(--ink); letter-spacing: 0; padding: 5px 9px; border: 2px solid var(--ink); border-radius: var(--control-radius); background: var(--accent-dim); box-shadow: 3px 3px 0 var(--ink); text-transform: none; }
.page-head p { color: var(--text-dim); margin-top: 8px; font-size: var(--fs-base); }

.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.head-row .page-head { margin-bottom: 0; }

/* ============ 首页 Hero ============ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 44px 42px;
  background-color: var(--paper);
  background-image: var(--pixel-surface);
  border: 3px solid var(--ink);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
  margin-bottom: 36px;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 58%, rgba(200, 132, 146, .82) 58% 100%),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(43, 41, 36, .08) 47px 48px),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(43, 41, 36, .08) 47px 48px);
  pointer-events: none;
  z-index: 0;
}

/* 像素放大镜插画（box-shadow 像素画，10px 一格） */
.hero-art {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 150px;
  height: 140px;
  filter: drop-shadow(7px 7px 0 var(--ink));
}
.hero-panel .hero-art { margin: 38px auto 58px; }
.hero-art i {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: transparent;
  box-shadow:
    /* 镜圈（琥珀） */
    40px 0 var(--accent), 50px 0 var(--accent), 60px 0 var(--accent), 70px 0 var(--accent),
    20px 10px var(--accent), 30px 10px var(--accent), 80px 10px var(--accent), 90px 10px var(--accent),
    10px 20px var(--accent), 100px 20px var(--accent),
    10px 30px var(--accent), 100px 30px var(--accent),
    0 40px var(--accent), 110px 40px var(--accent),
    0 50px var(--accent), 110px 50px var(--accent),
    0 60px var(--accent), 110px 60px var(--accent),
    0 70px var(--accent), 110px 70px var(--accent),
    10px 80px var(--accent), 100px 80px var(--accent),
    10px 90px var(--accent), 100px 90px var(--accent),
    20px 100px var(--accent), 30px 100px var(--accent), 80px 100px var(--accent), 90px 100px var(--accent),
    40px 110px var(--accent), 50px 110px var(--accent), 60px 110px var(--accent), 70px 110px var(--accent),
    /* 高光（米白） */
    40px 20px var(--paper), 30px 30px var(--paper),
    /* 镜芯（青绿） */
    50px 50px var(--accent-2), 60px 50px var(--accent-2),
    50px 60px var(--accent-2), 60px 60px var(--accent-2),
    /* 手柄（砖红） */
    100px 100px var(--accent-3), 110px 100px var(--accent-3),
    100px 110px var(--accent-3), 110px 110px var(--accent-3), 120px 110px var(--accent-3),
    110px 120px var(--accent-3), 120px 120px var(--accent-3), 130px 120px var(--accent-3),
    120px 130px var(--accent-3), 130px 130px var(--accent-3), 140px 130px var(--accent-3);
}

.hero-info h1 { font-size: var(--fs-lg); line-height: 1.25; }
.hero-info { position: relative; z-index: 1; max-width: 650px; }
.hero-eyebrow {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 7px 10px;
  background: var(--accent-2);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  box-shadow: 3px 3px 0 var(--ink);
}
.hero-info h1 {
  max-width: 760px;
  font-size: clamp(44px, 7vw, 92px);
  line-height: .92;
  letter-spacing: 0;
  text-transform: uppercase;
}
.hero-info .hero-title {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 12px;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  color: #fff;
  background: #746996;
  border: 2px solid var(--ink);
  border-radius: var(--control-radius);
  box-shadow: 3px 3px 0 var(--ink);
}
.hero-copy {
  max-width: 680px;
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(255, 249, 232, .82);
  border-left: 6px solid var(--ink);
  color: var(--text);
  font-size: var(--fs-base);
}
.hero-links { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }

.hero-panel {
  position: relative;
  z-index: 1;
  flex: 0 0 300px;
  align-self: stretch;
  min-height: 320px;
  padding: 22px;
  display: grid;
  place-items: center;
  background: #c99aa1;
  background-image: var(--pixel-surface);
  border: 3px solid var(--ink);
  box-shadow: var(--surface-shadow);
}
.hero-panel-tag {
  position: absolute;
  left: 18px;
  top: 18px;
  padding: 5px 8px;
  color: #fff;
  background: #746996;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
}
.hero-code {
  position: absolute;
  right: 18px;
  bottom: 18px;
  max-width: 248px;
  padding: 12px;
  background: #746996;
  border: 3px solid var(--ink);
  color: #fff;
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* 关于我模态框内容 */
.about-body { font-size: var(--fs-base); }
.about-body .about-bio { color: var(--text); margin-bottom: 18px; }
.about-body .about-links { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============ 统计块 ============ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 44px;
}
.stat-card {
  padding: 18px 18px;
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: var(--panel-radius);
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
  transition: all .12s;
  text-decoration: none;
  box-shadow: var(--surface-shadow);
}
.stat-card:nth-child(1), .stat-card:nth-child(4) { background: #d6bd68; }
.stat-card:nth-child(2) { background: #8fb7af; }
.stat-card:nth-child(3) { background: #f4ecd9; }
.stat-card:nth-child(5) { background: #c99aa1; }
.stat-card:hover { transform: translate(-3px, -3px); border-color: var(--ink); box-shadow: var(--shadow-hard); text-decoration: none; }
.stat-card .stat-icon { font-size: var(--fs-lg); color: var(--ink); }
.stat-card .stat-num { font-family: var(--font-head); font-size: var(--fs-lg); color: var(--ink); }
.stat-card .stat-label { font-family: var(--font-head); font-size: var(--fs-sm); color: var(--text-dim); }

/* ============ 分区标题 ============ */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 50px 0 18px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--ink);
}
.section-head-actions { display: flex; align-items: center; gap: 14px; }
.section-head h2 { font-size: var(--fs-lg); display: flex; align-items: center; gap: 10px; }
.section-head h2::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--accent-dim);
  flex-shrink: 0;
}
.section-head a { font-family: var(--font-head); font-size: var(--fs-sm); color: var(--text-dim); }
.section-head a:hover { color: var(--ink); background: var(--accent); }

/* ============ 卡片网格（工具） ============ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: var(--panel-radius);
  transition: all .12s;
  box-shadow: var(--surface-shadow);
}
.tool-card:hover {
  transform: translate(-3px, -3px);
  border-color: var(--ink);
  box-shadow: var(--shadow-hard);
}
.tool-card.is-link { cursor: var(--cursor-pointer); }
.tool-card:nth-child(3n + 1) { background: #f8f1df; }
.tool-card:nth-child(3n + 2) { background: #efe3b6; }
.tool-card:nth-child(3n) { background: #dfecea; }
.tool-card .tool-top { display: flex; align-items: center; gap: 10px; }
.tool-card .tool-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-lg);
  font-family: var(--font-head);
  color: var(--ink);
  background: var(--accent-dim);
  border: 2px solid var(--ink);
  border-radius: var(--control-radius);
  flex-shrink: 0;
  box-shadow: 3px 3px 0 var(--ink);
}
.tool-card .tool-cat {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.tool-card h3 { font-size: var(--fs-base); font-family: var(--font-body); font-weight: 400; }
.tool-card h3 a { color: var(--text); text-decoration: none; }
.tool-card h3 a:hover { color: var(--ink); background: var(--accent); text-decoration: none; }
.tool-card .tool-desc { font-size: var(--fs-base); color: var(--text-dim); flex: 1; }
.tool-card .tool-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

.badge {
  display: inline-block;
  padding: 3px 8px 4px;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  background: var(--panel-2);
  border: 2px solid var(--ink);
  border-radius: var(--control-radius);
  color: var(--ink);
}
.badge.b-green { color: var(--ink); border-color: var(--ink); background: var(--accent-dim); }
.badge.b-purple { color: var(--ink); border-color: var(--ink); background: var(--accent); }

/* 标签：纯文字 #tag，替代彩色边框徽章，降低卡片噪音 */
.tag {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  letter-spacing: .5px;
}

/* 管理操作角标 */
.item-admin {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .15s;
}
.tool-card:hover .item-admin,
.doc-item:hover .item-admin,
.term-entry:hover .item-admin,
.kcard:hover .item-admin { opacity: 1; }
.icon-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid var(--ink);
  border-radius: var(--control-radius);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-sm);
  cursor: var(--cursor-pointer);
  box-shadow: none;
  transition: all .12s;
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink); background: var(--accent); }
.icon-btn:active { transform: none; box-shadow: none; background: var(--panel-2); }
.icon-btn.danger:hover { color: #fff; border-color: var(--ink); background: var(--danger); }

/* ============ 筛选栏 ============ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding: 14px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: var(--surface-shadow);
}
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 6px 14px;
  font-size: var(--fs-base);
  border: 2px solid var(--ink);
  border-radius: var(--control-radius);
  background: var(--panel);
  color: var(--ink);
  cursor: var(--cursor-pointer);
  font-family: var(--font-body);
  transition: all .12s;
}
.chip:hover { color: var(--ink); border-color: var(--ink); background: var(--accent-dim); }
.chip:active { transform: translate(2px, 2px); }
.chip.active {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--ink);
}

.search-input {
  flex: 1;
  min-width: 200px;
  max-width: 340px;
  padding: 8px 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--control-radius);
  color: var(--text);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  outline: none;
  transition: border-color .12s;
}
.search-input:focus { border-color: var(--ink); box-shadow: 4px 4px 0 var(--accent-dim); }
.search-input::placeholder { color: var(--text-dim); }
.search-input::-webkit-search-cancel-button { cursor: var(--cursor-pointer); }

.filter-count {
  margin-left: auto;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  white-space: nowrap;
}

/* ============ 知识库列表 ============ */
.doc-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* 文件夹树外壳：桌面端始终展开，移动端可折叠 */
.doc-tree-wrap { min-width: 0; align-self: stretch; }
.doc-tree-toggle { display: none; }

.doc-tree {
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--panel);
  background-image: var(--pixel-surface);
  border: 3px solid var(--ink);
  border-radius: var(--panel-radius);
  box-shadow: var(--surface-shadow);
}

.doc-tree-head {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  color: #fff;
  padding: 6px 8px;
  width: fit-content;
  background: var(--accent-4);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

.doc-folder {
  border: 2px solid var(--ink);
  border-radius: var(--control-radius);
  background: var(--paper);
}

.doc-folder summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  color: var(--ink);
  cursor: var(--cursor-pointer);
  list-style: none;
}

.doc-folder summary::-webkit-details-marker { display: none; }
.doc-folder summary em,
.doc-folder-btn em,
.doc-count {
  font-style: normal;
  color: var(--text-dim);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
}

.doc-folder-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 6px 7px;
}

.doc-folder-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 5px 8px;
  border: 2px solid transparent;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  text-align: left;
  cursor: var(--cursor-pointer);
}

.doc-folder-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--accent-dim);
}

.doc-folder-btn.active {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--ink);
}

.doc-folder-btn.active em { color: var(--ink); }
.doc-tree-all { margin-bottom: 2px; }

.doc-main { min-width: 0; }
.doc-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 0 2px;
}
.doc-path {
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  background: var(--accent);
  border: 2px solid var(--ink);
  padding: 5px 8px;
}

.doc-list { display: flex; flex-direction: column; gap: 12px; }
.doc-item {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 22px;
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: var(--panel-radius);
  transition: all .12s;
  cursor: var(--cursor-pointer);
  box-shadow: var(--surface-shadow);
}
.doc-item:nth-child(even) { background: #efe3b6; }
.doc-item:hover { transform: translate(-3px, -3px); border-color: var(--ink); box-shadow: var(--shadow-hard); }
.doc-item .doc-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-lg);
  font-family: var(--font-head);
  color: var(--ink);
  background: #c99aa1;
  border: 2px solid var(--ink);
  border-radius: var(--control-radius);
  box-shadow: 3px 3px 0 var(--ink);
}
.doc-item h3 { font-size: var(--fs-base); font-family: var(--font-body); font-weight: 400; color: var(--text); }
.doc-item .doc-sub { font-size: var(--fs-base); color: var(--text-dim); margin-top: 4px; }
.doc-item .doc-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.doc-foot {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* ============ 文档阅读页 ============ */
.doc-reader {
  max-width: 900px;
  margin: 0;
  padding: 28px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-hard);
}
.doc-reader .doc-back { font-family: var(--font-head); font-size: var(--fs-sm); color: var(--text-dim); }
.doc-reader .doc-head { margin: 14px 0 8px; }
.doc-reader .doc-head h1 { font-size: clamp(32px, 5vw, 58px); line-height: 1.08; text-transform: uppercase; }
.doc-reader .doc-info { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 26px; color: var(--text-dim); font-family: var(--font-head); font-size: var(--fs-sm); }

.md-body { font-size: var(--fs-base); }
.md-body h1, .md-body h2, .md-body h3, .md-body h4 { margin: 28px 0 12px; line-height: 1.5; }
.md-body h1 { font-size: var(--fs-lg); }
.md-body h2 { font-size: var(--fs-lg); padding-bottom: 8px; border-bottom: 3px solid var(--line); }
.md-body h3 { font-size: var(--fs-base); font-family: var(--font-body); font-weight: 400; color: var(--ink); background: var(--accent); width: fit-content; padding: 1px 6px; }
.md-body p { margin: 12px 0; }
.md-body ul, .md-body ol { margin: 12px 0; padding-left: 26px; }
.md-body li { margin: 5px 0; }
.md-body code {
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: var(--panel-2);
  border: 2px solid var(--line-hi);
  border-radius: var(--control-radius);
  color: var(--accent);
}
.md-body pre {
  margin: 16px 0;
  padding: 16px 18px;
  background: #2b2924;
  border: 3px solid var(--line);
  border-left: 10px solid var(--accent-dim);
  border-radius: var(--panel-radius);
  overflow-x: auto;
}
.md-body pre code {
  padding: 0;
  background: none;
  border: none;
  color: #d9cbb7;
  font-size: var(--fs-sm);
  line-height: 1.9;
}
.md-body blockquote {
  margin: 14px 0;
  padding: 10px 18px;
  border: 2px solid var(--ink);
  border-left: 10px solid var(--accent);
  border-radius: var(--control-radius);
  background: #efe3b6;
  color: var(--text-dim);
}
.md-body hr { border: none; border-top: 3px dashed var(--line); margin: 24px 0; }
.md-body img { max-width: 100%; }
.md-body table { border-collapse: collapse; margin: 14px 0; width: 100%; }
.md-body th, .md-body td { border: 2px solid var(--line); padding: 8px 12px; font-size: var(--fs-base); text-align: left; }
.md-body th { background: var(--accent); font-family: var(--font-head); font-size: var(--fs-sm); }

/* 文档上一篇 / 下一篇 */
.doc-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 3px dashed var(--line);
}
.doc-pager-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--panel-radius);
  color: var(--text);
  transition: all .12s;
}
.doc-pager-link:hover { border-color: var(--ink); background: var(--accent-dim); box-shadow: var(--shadow-press); text-decoration: none; }
.doc-pager-link em {
  font-style: normal;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.doc-pager-link.next { align-items: flex-end; text-align: right; }

/* ============ 文档编辑器（增强） ============ */
.doc-toolbar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px;
  background: var(--bg-soft);
  border: 3px solid var(--line);
  border-bottom: none;
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
}
.doc-toolbar button {
  padding: 4px 10px;
  font-size: var(--fs-sm);
  font-family: var(--font-head);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  color: var(--text-dim);
  cursor: var(--cursor-pointer);
  transition: all .1s;
}
.doc-toolbar button:hover { color: var(--accent); background: var(--panel-2); border-color: var(--line-hi); }
.doc-toolbar .tb-sep { width: 3px; background: var(--line); margin: 2px 4px; }

.editor-split { display: grid; grid-template-columns: 1fr; gap: 0; }
.editor-split.preview-on { grid-template-columns: 1fr 1fr; gap: 12px; }
.editor-split textarea.md-edit { min-height: 340px; }
.md-preview {
  min-height: 340px;
  max-height: 480px;
  overflow-y: auto;
  padding: 14px 18px;
  background: var(--bg-soft);
  border: 3px solid var(--line);
  border-radius: var(--panel-radius);
}
.md-preview .md-body { font-size: var(--fs-base); }
.editor-status {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin-top: 6px;
}

/* ============ 透镜卡 ============ */
.daily-lens-page {
  min-height: calc(100vh - 170px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.route-home .daily-lens-page {
  width: 100%;
  min-height: 0;
}

.kcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 370px), 1fr));
  gap: 24px;
}

.daily-lens-head {
  width: min(860px, 100%);
  margin-bottom: 26px;
  text-align: center;
}

.daily-lens-head h1 {
  justify-content: center;
  flex-wrap: wrap;
}

.daily-lens-graph {
  position: relative;
  --lens-origin-y: 52%;
  width: min(var(--lens-graph-w, 1180px), 100%);
  height: var(--lens-graph-h, clamp(680px, calc(100vh - 155px), 800px));
  min-height: 680px;
  overflow: visible;
}

.route-home .daily-lens-graph {
  --lens-origin-y: 54.5%;
  height: var(--lens-graph-h, clamp(560px, calc(100vh - 165px), 735px));
  min-height: 0;
}

.daily-lens-center {
  position: absolute;
  left: 50%;
  top: var(--lens-origin-y);
  z-index: 3;
  width: var(--lens-center-w, min(540px, 50%));
  transform: translate(-50%, -50%);
}

.kcard-grid.daily-lens-card {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  justify-items: stretch;
}

.lens-stack-board {
  --stack-peek-h: 54px;
  --stack-card-h: clamp(260px, 19vw, 310px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 34px 28px;
  align-items: start;
}

.lens-stack-backdrop {
  position: fixed;
  left: var(--sidebar-w);
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 18;
  opacity: 0;
  pointer-events: none;
  background: rgba(42, 41, 36, .46);
  backdrop-filter: blur(7px) saturate(.76);
  -webkit-backdrop-filter: blur(7px) saturate(.76);
  transition: opacity .18s ease;
}

body.route-cards.lens-stack-focused .lens-stack-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.route-cards.lens-stack-returning .lens-stack-backdrop {
  opacity: 0;
  pointer-events: none;
}

.lens-stack-column {
  position: relative;
  min-width: 0;
}

.lens-stack-column:hover {
  z-index: 12;
}

.lens-stack-column:has(.lens-stack-item.is-active) {
  z-index: auto;
}

body.lens-stack-focused .lens-stack-column:hover {
  z-index: auto;
}

.lens-stack-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  margin: 0 0 14px;
  padding: 6px 12px;
  color: var(--ink);
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: var(--control-radius);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-title);
  font-size: var(--fs-base);
  font-weight: 900;
}

.lens-stack-title em {
  flex-shrink: 0;
  min-width: 28px;
  padding: 1px 7px;
  color: var(--paper);
  background: var(--ink);
  border-radius: 99px;
  font-style: normal;
  font-size: var(--fs-sm);
  text-align: center;
}

.lens-stack {
  position: relative;
  padding-bottom: calc(var(--stack-card-h) - var(--stack-peek-h) + 10px);
}

.lens-stack-item {
  position: relative;
  z-index: calc(var(--stack-index) + 1);
  height: var(--stack-peek-h);
}

.lens-stack-item:hover,
.lens-stack-item:focus-within,
.lens-stack-item.is-active {
  z-index: 100;
}

.lens-stack-item .lens-stack-kcard {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--stack-card-h);
  transform: translate3d(0, 0, 0);
  transform-origin: top center;
  transition: transform .18s ease, filter .18s ease, --tilt-x .16s ease-out, --tilt-y .16s ease-out;
  will-change: transform;
}

.lens-stack-item:hover .lens-stack-kcard,
.lens-stack-item:focus-within .lens-stack-kcard,
.lens-stack-item.is-active .lens-stack-kcard {
  transform: translate3d(-7px, -14px, 0) scale(1.025);
}

.lens-stack-item.is-active .lens-stack-kcard {
  position: fixed;
  left: var(--lens-focus-x, 50vw);
  top: var(--lens-focus-y, 50vh);
  right: auto;
  bottom: auto;
  z-index: 40;
  width: var(--lens-focus-w, min(560px, calc(100vw - var(--sidebar-w) - 72px)));
  max-width: calc(100vw - 36px);
  height: var(--lens-focus-h, clamp(340px, 58vh, 460px));
  filter: saturate(1.06);
  transform-origin: center center;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition:
    left .36s cubic-bezier(.16, 1, .3, 1),
    top .36s cubic-bezier(.16, 1, .3, 1),
    width .36s cubic-bezier(.16, 1, .3, 1),
    height .36s cubic-bezier(.16, 1, .3, 1),
    transform .36s cubic-bezier(.16, 1, .3, 1),
    filter .18s ease,
    --tilt-x .16s ease-out,
    --tilt-y .16s ease-out;
}

.lens-stack-item.is-returning-under {
  z-index: calc(var(--stack-index) + 1);
}

.lens-stack-item.is-returning-under .lens-stack-kcard {
  z-index: auto;
}

.lens-stack-item.is-active.is-activating .lens-stack-kcard {
  transition: none;
}

.lens-stack-kcard.is-resetting,
.lens-stack-kcard.is-resetting .kcard-inner {
  transition: none !important;
}

.lens-stack-item.is-returning .kcard-inner {
  transition-duration: .28s;
}

.lens-stack-item.is-active .lens-stack-kcard :is(.kcard-cat, .kcard-name, .kcard-desc, .kcard-question, .kcard-flip-mark) {
  transition: opacity .16s ease;
}

.lens-stack-item.is-active.is-focusing .lens-stack-kcard :is(.kcard-cat, .kcard-name, .kcard-desc, .kcard-question, .kcard-flip-mark),
.lens-stack-item.is-active.is-returning .lens-stack-kcard :is(.kcard-cat, .kcard-name, .kcard-desc, .kcard-question, .kcard-flip-mark) {
  opacity: .72;
}

.lens-stack-kcard .kcard-cat {
  min-height: var(--stack-peek-h);
}

.lens-stack-item:not(.is-active) .lens-stack-kcard .kcard-cat {
  font-family: var(--font-body);
  font-weight: 400;
}

.lens-stack-kcard .kcard-cat span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lens-stack-kcard .kcard-face {
  --kcard-bar-h: var(--stack-peek-h);
  padding-top: calc(var(--stack-peek-h) + clamp(10px, 3cqh, 16px));
}

.lens-stack-kcard {
  --kcard-cat-fs: clamp(10px, min(2.4cqw, 3.4cqh), 13px);
  --kcard-name-fs: clamp(24px, min(6.9cqw, 10cqh), 36px);
  --kcard-body-fs: clamp(13px, min(3.25cqw, 4.5cqh), 18px);
  --kcard-question-fs: clamp(13px, min(3.3cqw, 4.6cqh), 18px);
  --kcard-desc-lines: 4;
  --kcard-stack-line: 1.45;
}

.lens-stack-item:not(:hover):not(:focus-within):not(.is-active) .lens-stack-kcard {
  --shadow-x: 3px;
  --shadow-y: 3px;
}

.lens-stack-item:not(.is-active) .lens-stack-kcard .kcard-name {
  margin: clamp(10px, 4cqh, 22px) 0 clamp(6px, 2cqh, 10px);
}

.lens-stack-item:not(.is-active) .lens-stack-kcard .kcard-desc {
  flex: 0 1 auto;
  min-height: 0;
}

.daily-lens-card .kcard {
  width: 100%;
  height: var(--lens-center-card-h, clamp(270px, 31vh, 320px));
  transform-origin: center center;
  transition: transform .18s ease;
}

.daily-lens-card .kcard:hover,
.daily-lens-center:hover .kcard {
  transform: translateZ(0) scale(1.055);
}

.lens-connections,
.lens-link {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lens-link {
  left: 50%;
  top: var(--lens-origin-y);
  right: auto;
  bottom: auto;
  width: var(--len);
  height: 3px;
  background: rgba(43, 41, 36, .58);
  border-radius: 99px;
  transform: rotate(var(--angle));
  transform-origin: 0 50%;
}

.lens-link-1 { --angle: 206deg; --len: clamp(365px, 51%, 516px); }
.lens-link-2 { --angle: -90deg; --len: clamp(270px, 34%, 322px); }
.lens-link-3 { --angle: -26deg; --len: clamp(365px, 51%, 516px); }
.lens-link-4 { --angle: 20deg; --len: clamp(350px, 49%, 500px); }
.lens-link-5 { --angle: 66deg; --len: clamp(285px, 35%, 342px); }
.lens-link-6 { --angle: 160deg; --len: clamp(350px, 49%, 500px); }

.lens-node {
  position: absolute;
  left: calc(50% + var(--x));
  top: calc(var(--lens-origin-y) + var(--y));
  z-index: 2;
  width: var(--lens-node-w, clamp(154px, 16vw, 190px));
  height: var(--lens-node-h, 118px);
  transform: translate(-50%, -50%);
}

.lens-node-1 { --x: clamp(-455px, -43%, -260px); --y: -245px; }
.lens-node-2 { --x: 0px; --y: -325px; }
.lens-node-3 { --x: clamp(260px, 43%, 455px); --y: -245px; }
.lens-node-4 { --x: clamp(265px, 44%, 470px); --y: 195px; }
.lens-node-5 { --x: clamp(105px, 15%, 150px); --y: 325px; }
.lens-node-6 { --x: clamp(-470px, -44%, -265px); --y: 195px; }

.lens-node:hover,
.lens-node:focus-within,
.lens-node.is-previewed,
.lens-node.is-expanded {
  z-index: 12;
  height: var(--lens-node-open-h, 230px);
}

.lens-node .lens-node-kcard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: var(--lens-node-h, 118px);
  transform: translate3d(-50%, -50%, 0);
  transition: width .16s ease, height .16s ease, transform .16s ease;
  will-change: width, height, transform;
  backface-visibility: hidden;
}

.lens-node:hover .lens-node-kcard,
.lens-node:focus-within .lens-node-kcard,
.lens-node.is-previewed .lens-node-kcard,
.lens-node .lens-node-kcard.flipped {
  --kcard-name-fs: clamp(22px, min(8.2cqw, 13cqh), 32px);
  --kcard-body-fs: clamp(14px, min(4.3cqw, 6.6cqh), 18px);
  --kcard-question-fs: clamp(14px, min(4.1cqw, 6.2cqh), 18px);
  width: min(var(--lens-node-open-w, 340px), calc(100vw - var(--sidebar-w) - 56px));
  height: var(--lens-node-open-h, 230px);
  transform: translate3d(calc(-50% + var(--expand-dx, 0px)), calc(-50% + var(--expand-dy, 0px)), 0);
}

.lens-node .lens-node-kcard .kcard-face {
  --kcard-bar-h: 30px;
  padding: 34px 12px 12px;
  border-width: 2px;
}

.lens-node:hover .lens-node-kcard .kcard-face,
.lens-node:focus-within .lens-node-kcard .kcard-face,
.lens-node.is-previewed .lens-node-kcard .kcard-face,
.lens-node .lens-node-kcard.flipped .kcard-face {
  --kcard-bar-h: 36px;
  padding: 48px 20px 20px;
  border-width: 3px;
}

.lens-node .lens-node-kcard .kcard-face::after {
  height: var(--kcard-bar-h);
}

.lens-node:hover .lens-node-kcard .kcard-face::after,
.lens-node:focus-within .lens-node-kcard .kcard-face::after,
.lens-node.is-previewed .lens-node-kcard .kcard-face::after,
.lens-node .lens-node-kcard.flipped .kcard-face::after {
  height: var(--kcard-bar-h);
}

.lens-node .lens-node-kcard .kcard-name,
.lens-node .lens-node-kcard .kcard-desc,
.lens-node .lens-node-kcard .kcard-question {
  display: none;
}

.lens-node .lens-node-kcard .kcard-mini-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0 10px;
  color: var(--ink);
  font-family: var(--font-title);
  font-size: var(--lens-node-title-font, clamp(22px, 2.2vw, 30px));
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.lens-node:hover .lens-node-kcard .kcard-mini-title,
.lens-node:focus-within .lens-node-kcard .kcard-mini-title,
.lens-node.is-previewed .lens-node-kcard .kcard-mini-title,
.lens-node .lens-node-kcard.flipped .kcard-mini-title {
  display: none;
}

.lens-node:hover .lens-node-kcard .kcard-desc,
.lens-node:focus-within .lens-node-kcard .kcard-desc,
.lens-node.is-previewed .lens-node-kcard .kcard-desc,
.lens-node .lens-node-kcard.flipped .kcard-desc {
  display: flex;
}

.lens-node:hover .lens-node-kcard .kcard-question,
.lens-node:focus-within .lens-node-kcard .kcard-question,
.lens-node.is-previewed .lens-node-kcard .kcard-question,
.lens-node .lens-node-kcard.flipped .kcard-question {
  display: block;
}

.lens-node:hover .lens-node-kcard .kcard-name,
.lens-node:focus-within .lens-node-kcard .kcard-name,
.lens-node.is-previewed .lens-node-kcard .kcard-name,
.lens-node .lens-node-kcard.flipped .kcard-name {
  flex: 0 auto;
  display: block;
  margin: 12px 0 10px;
  padding: 0;
  font-size: var(--kcard-name-fs);
}
.kcard {
  position: relative;
  --card-rotation: 0deg;
  --shadow-x: 4px;
  --shadow-y: 4px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --kcard-cat-fs: clamp(10px, min(2.8cqw, 4.2cqh), 13px);
  --kcard-name-fs: clamp(24px, min(7.8cqw, 12.5cqh), 40px);
  --kcard-body-fs: clamp(15px, min(4.45cqw, 7cqh), 23px);
  --kcard-question-fs: clamp(15px, min(4.55cqw, 6.8cqh), 24px);
  --kcard-content-pad-x: clamp(16px, 4.1cqw, 24px);
  perspective: 900px;
  container-type: size;
  height: clamp(292px, 18vw, 330px);
  cursor: var(--cursor-pointer);
  border-radius: var(--panel-radius);
  isolation: isolate;
  transform: translateZ(0);
  transition: --tilt-x .16s ease-out, --tilt-y .16s ease-out;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.kcard * {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.kcard.flipped { --card-rotation: 180deg; }
.kcard:hover {
  --shadow-x: 6px;
  --shadow-y: 6px;
}

.kcard-stage {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--panel-radius);
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotateZ(0deg);
  transform-origin: center center;
  will-change: transform;
}

.daily-lens-page .kcard-stage {
  animation: lensCardDrift var(--drift-duration, 9s) ease-in-out infinite;
  animation-delay: var(--drift-delay, 0s);
}

.daily-lens-page .kcard.is-tilting {
  transition-duration: .05s;
}

.daily-lens-center .kcard-stage {
  --drift-duration: 10.5s;
  --drift-delay: -2.6s;
  --drift-y-a: -4px;
  --drift-y-b: 4px;
  --drift-x-a: -2.2deg;
  --drift-x-b: 2.6deg;
  --drift-y-rot-a: 3.2deg;
  --drift-y-rot-b: -2.8deg;
  --drift-r-a: -1.35deg;
  --drift-r-b: 1.1deg;
}

.lens-stack-item.is-active:not(.is-returning) .lens-stack-kcard .kcard-stage {
  --drift-duration: 10.5s;
  --drift-delay: -2.6s;
  --drift-y-a: -4px;
  --drift-y-b: 4px;
  --drift-x-a: -2.2deg;
  --drift-x-b: 2.6deg;
  --drift-y-rot-a: 3.2deg;
  --drift-y-rot-b: -2.8deg;
  --drift-r-a: -1.35deg;
  --drift-r-b: 1.1deg;
  animation: lensCardDrift var(--drift-duration) ease-in-out infinite;
  animation-delay: var(--drift-delay);
}

.lens-stack-item.is-active.is-focusing .lens-stack-kcard .kcard-stage,
.lens-stack-item.is-active.is-returning .lens-stack-kcard .kcard-stage {
  animation: none;
}

.lens-stack-item.is-active:not(.is-returning) .lens-stack-kcard.is-tilting {
  transition-duration: .05s;
}

.lens-node-1 .kcard-stage { --drift-duration: 7.8s; --drift-delay: -1.1s; --drift-y-a: -2.5px; --drift-y-b: 3px; --drift-x-a: -3.2deg; --drift-x-b: 2.5deg; --drift-y-rot-a: 4.3deg; --drift-y-rot-b: -3.5deg; --drift-r-a: -1.55deg; --drift-r-b: 1.25deg; }
.lens-node-2 .kcard-stage { --drift-duration: 8.6s; --drift-delay: -3.2s; --drift-y-a: 2.5px; --drift-y-b: -3px; --drift-x-a: 2.8deg; --drift-x-b: -3.4deg; --drift-y-rot-a: -4deg; --drift-y-rot-b: 3.2deg; --drift-r-a: 1.35deg; --drift-r-b: -1.25deg; }
.lens-node-3 .kcard-stage { --drift-duration: 7.4s; --drift-delay: -4.4s; --drift-y-a: -3px; --drift-y-b: 2.5px; --drift-x-a: -2.8deg; --drift-x-b: 3.5deg; --drift-y-rot-a: -3.6deg; --drift-y-rot-b: 4.2deg; --drift-r-a: 1.3deg; --drift-r-b: -1.55deg; }
.lens-node-4 .kcard-stage { --drift-duration: 8.2s; --drift-delay: -2s; --drift-y-a: 3px; --drift-y-b: -2.5px; --drift-x-a: 3.4deg; --drift-x-b: -2.7deg; --drift-y-rot-a: 3.8deg; --drift-y-rot-b: -4.1deg; --drift-r-a: -1.25deg; --drift-r-b: 1.45deg; }
.lens-node-5 .kcard-stage { --drift-duration: 9s; --drift-delay: -5s; --drift-y-a: -2.5px; --drift-y-b: 2.5px; --drift-x-a: -3deg; --drift-x-b: 2.7deg; --drift-y-rot-a: -4.2deg; --drift-y-rot-b: 3.5deg; --drift-r-a: 1.25deg; --drift-r-b: -1.35deg; }
.lens-node-6 .kcard-stage { --drift-duration: 7.7s; --drift-delay: -3.8s; --drift-y-a: 2.5px; --drift-y-b: -3px; --drift-x-a: 2.9deg; --drift-x-b: -3.3deg; --drift-y-rot-a: 4.1deg; --drift-y-rot-b: -3.4deg; --drift-r-a: -1.45deg; --drift-r-b: 1.25deg; }

@keyframes lensCardDrift {
  0%, 100% {
    transform: translate3d(0, var(--drift-y-a, -1px), 0)
      rotateX(calc(var(--tilt-x) + var(--drift-x-a, -2deg)))
      rotateY(calc(var(--tilt-y) + var(--drift-y-rot-a, 2deg)))
      rotateZ(var(--drift-r-a, -.5deg));
  }
  50% {
    transform: translate3d(0, var(--drift-y-b, 1px), 0)
      rotateX(calc(var(--tilt-x) + var(--drift-x-b, 2deg)))
      rotateY(calc(var(--tilt-y) + var(--drift-y-rot-b, -2deg)))
      rotateZ(var(--drift-r-b, .5deg));
  }
}

@keyframes flipDigitTick {
  0% { transform: translateY(-9px) scaleY(.45); opacity: .15; }
  52% { transform: translateY(1px) scaleY(1.08); opacity: 1; }
  100% { transform: translateY(0) scaleY(1); opacity: 1; }
}

.kcard-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: var(--panel-radius);
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(var(--card-rotation));
  transform-origin: center center;
  transition: transform .42s cubic-bezier(.22, .78, .22, 1);
  will-change: transform;
}

.kcard-face {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  --kcard-bar-h: 38px;
  padding: 58px 22px 28px;
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: var(--panel-radius);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transform: translateZ(.1px);
  will-change: transform;
  box-shadow: var(--shadow-x) var(--shadow-y) 0 rgba(43, 41, 36, .78);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.kcard-face::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--kcard-bar-h);
  background: var(--card-hue, var(--accent));
  border-radius: calc(var(--panel-radius) - 3px) calc(var(--panel-radius) - 3px) 0 0;
  pointer-events: none;
}

.kcard-face.front {
  background: var(--card-hue, var(--accent));
  color: var(--ink);
}

.kcard-face.front::after {
  background: var(--card-back);
}

.kcard-face.front .kcard-cat {
  color: var(--paper);
}

.route-cards .kcard-face.front::after {
  background: var(--card-hue, var(--accent));
}

.route-cards .kcard-face.front .kcard-cat {
  color: var(--ink);
}

.kcard-face.front .kcard-name,
.kcard-face.front .kcard-desc {
  color: var(--ink);
}

/* 正面幽灵菱形水印（分类色） */
.kcard-face.front .kcard-desc::after {
  content: '';
  position: absolute;
  right: -26px;
  bottom: -26px;
  width: 90px;
  height: 90px;
  border: 2px solid var(--paper);
  opacity: .18;
  transform: rotate(45deg);
  pointer-events: none;
}
.kcard-face.back {
  transform: rotateY(180deg) translateZ(.1px);
  background: var(--panel);
  color: var(--ink);
  justify-content: center;
}
.kcard-face.back .kcard-cat {
  color: var(--ink);
}
.kcard-face.back .kcard-question {
  color: var(--ink);
}
.kcard-cat {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: var(--kcard-bar-h);
  padding: 0 var(--kcard-content-pad-x);
  font-family: var(--font-title);
  font-size: var(--kcard-cat-fs);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0;
  pointer-events: none;
}
.kcard-cat span { display: block; overflow-wrap: anywhere; }
.kcard-cat i { font-style: normal; color: var(--card-hue, var(--accent)); }
.kcard-no { font-style: normal; color: var(--text-dim); opacity: .7; }
.kcard-flip-mark {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 16px;
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  color: rgba(5, 5, 5, .32);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.kcard-flip-mark svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}
.lens-node .lens-node-kcard .kcard-flip-mark {
  opacity: 0;
  transform: translateY(4px) scale(.9);
}
.lens-node:hover .lens-node-kcard .kcard-flip-mark,
.lens-node:focus-within .lens-node-kcard .kcard-flip-mark,
.lens-node.is-previewed .lens-node-kcard .kcard-flip-mark {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.lens-stack-item:not(.is-active) .lens-stack-kcard .kcard-flip-mark {
  opacity: 0;
  transform: translateY(4px) scale(.9);
}
.lens-stack-item.is-active .lens-stack-kcard .kcard-flip-mark {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.kcard-mini-title { display: none; }
.kcard-name {
  margin: 30px 0 14px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--kcard-name-fs);
  font-weight: 400;
  line-height: 1.08;
  text-align: center;
}
.kcard-desc {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  white-space: pre-line;
  font-size: var(--kcard-body-fs);
  font-weight: 400;
  line-height: 1.7;
}
.kcard-desc span {
  display: block;
  width: fit-content;
  max-width: min(100%, 24em);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.lens-node:hover .lens-node-kcard .kcard-desc span,
.lens-node:focus-within .lens-node-kcard .kcard-desc span,
.lens-node.is-previewed .lens-node-kcard .kcard-desc span,
.lens-node .lens-node-kcard.flipped .kcard-desc span {
  max-width: min(100%, 16em);
}
.kcard-question {
  flex: 1;
  overflow-y: auto;
  white-space: pre-line;
  font-size: var(--kcard-question-fs);
  color: var(--text);
  line-height: 1.75;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.kcard-face.back .kcard-question {
  flex: 0 auto;
  width: min(100%, 27em);
  max-height: 100%;
  margin: auto;
  color: var(--ink);
}
.lens-stack-kcard .kcard-desc,
.lens-stack-kcard .kcard-question {
  line-height: var(--kcard-stack-line, 1.5);
}
.daily-lens-center .kcard-desc {
  line-height: var(--lens-center-desc-line, 1.58);
}
.lens-stack-kcard .kcard-desc span {
  max-width: min(100%, 25em);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--kcard-desc-lines, 4);
  overflow: hidden;
}
.daily-lens-center .kcard-desc span {
  max-width: min(100%, 25em);
}
.daily-lens-center .kcard-face {
  --kcard-bar-h: var(--lens-center-bar-h, 38px);
  padding: var(--lens-center-pad-top, 58px) var(--lens-center-pad-x, 22px) var(--lens-center-pad-bottom, 28px);
}
.daily-lens-center .kcard {
  --kcard-name-fs: var(--lens-center-name-font, clamp(28px, min(7.6cqw, 12cqh), 40px));
  --kcard-body-fs: var(--lens-center-desc-font, clamp(16px, min(4.1cqw, 6.5cqh), 23px));
  --kcard-question-fs: clamp(17px, min(4.2cqw, 6.7cqh), 24px);
}
.daily-lens-center .kcard-name {
  margin: var(--lens-center-name-margin-top, 30px) 0 var(--lens-center-name-margin-bottom, 14px);
}
.daily-lens-center .kcard-face.back {
  justify-content: flex-start;
}
.daily-lens-center .kcard-face.back .kcard-question {
  width: min(100%, 28em);
  max-height: calc(100% - 30px);
  margin: 30px auto 0;
  line-height: 1.62;
}
.lens-stack-item.is-active .lens-stack-kcard {
  --kcard-name-fs: clamp(30px, min(7.4cqw, 10cqh), 42px);
  --kcard-body-fs: clamp(18px, min(4.7cqw, 5.6cqh), 26px);
  --kcard-question-fs: clamp(18px, min(4.8cqw, 5.6cqh), 26px);
  --kcard-cat-fs: clamp(12px, min(2.5cqw, 3.6cqh), 15px);
  --kcard-desc-lines: unset;
  --kcard-stack-line: 1.58;
}
.lens-stack-item.is-active .lens-stack-kcard .kcard-desc span {
  display: block;
  -webkit-line-clamp: initial;
  overflow: visible;
}
.lens-stack-item.is-active .lens-stack-kcard .kcard-face.back {
  justify-content: flex-start;
}
.lens-stack-item.is-active .lens-stack-kcard .kcard-question {
  width: min(100%, 28em);
  max-height: calc(100% - 30px);
  margin: 30px auto 0;
  transform: none;
}
.kcard-face.back .kcard-question::-webkit-scrollbar-track { background: rgba(5, 5, 5, .12); }
.kcard-face.back .kcard-question::-webkit-scrollbar-thumb {
  background: var(--ink);
  border-color: var(--panel);
}
.kcard:hover .kcard-face {
  border-color: var(--ink);
  box-shadow: var(--shadow-x) var(--shadow-y) 0 rgba(43, 41, 36, .9);
}

/* 抽卡 / 换卡出场动画 */
.kcard.dealt { animation: cardDeal .22s ease-out; }
@keyframes cardDeal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* 透镜卡页说明 */
.draw-zone {
  margin-bottom: 32px;
  padding: 24px;
  background-color: var(--accent);
  background-image: var(--pixel-surface);
  border: 3px solid var(--ink);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-hard);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.draw-zone .draw-text { flex: 1; min-width: 220px; }
.draw-zone h3 { font-size: var(--fs-base); font-family: var(--font-body); font-weight: 400; }
.draw-zone p { font-size: var(--fs-base); color: var(--ink); margin-top: 3px; }

@media (max-height: 820px) and (min-width: 901px) {
  body.route-cards .view {
    padding-top: clamp(16px, 2.5vh, 28px);
    padding-bottom: 44px;
  }

  body.route-cards .page-head {
    margin-bottom: 14px;
  }

  body.route-cards .page-head h1 {
    font-size: clamp(34px, 4vw, 54px);
  }

  body.route-cards .draw-zone {
    margin-bottom: 22px;
    padding: 15px 22px;
  }

  body.route-cards .draw-zone p {
    font-size: clamp(14px, 1.55vw, 17px);
    line-height: 1.5;
  }

  body.route-cards .lens-stack-board {
    --stack-peek-h: 46px;
    --stack-card-h: clamp(250px, min(25vw, 42vh), 330px);
    gap: 24px 24px;
  }

  body.route-cards .lens-stack-title {
    min-height: 38px;
    margin-bottom: 10px;
    padding: 5px 12px;
    font-size: clamp(16px, 1.65vw, 18px);
  }

  body.route-cards .lens-stack-kcard {
    --kcard-name-fs: clamp(22px, min(6.2cqw, 8.8cqh), 32px);
    --kcard-body-fs: clamp(12px, min(3.05cqw, 4.05cqh), 16px);
    --kcard-question-fs: clamp(12px, min(3.1cqw, 4.1cqh), 16px);
    --kcard-stack-line: 1.36;
  }

  body.route-cards .lens-stack-kcard .kcard-face {
    padding: calc(var(--stack-peek-h) + 14px) clamp(16px, 3.3cqw, 22px) clamp(16px, 4cqh, 24px);
  }

  body.route-cards .lens-stack-kcard .kcard-name {
    margin: clamp(12px, 4cqh, 22px) 0 clamp(5px, 2cqh, 9px);
  }
}

@media (max-height: 680px) and (min-width: 901px) {
  body.route-cards .view {
    padding-top: 12px;
  }

  body.route-cards .draw-zone {
    margin-bottom: 18px;
    padding: 12px 18px;
  }

  body.route-cards .lens-stack-board {
    --stack-card-h: clamp(230px, min(24vw, 39vh), 300px);
  }

  body.route-cards .lens-stack-kcard {
    --kcard-name-fs: clamp(20px, min(5.7cqw, 8cqh), 30px);
    --kcard-body-fs: clamp(11px, min(2.75cqw, 3.7cqh), 15px);
    --kcard-stack-line: 1.32;
    --kcard-desc-lines: 4;
  }
}

/* ============ 术语表（词典式双栏） ============ */
.term-list {
  columns: 2;
  column-gap: 48px;
  border-top: 3px solid var(--line);
  background: var(--paper);
  border-left: 3px solid var(--line);
  border-right: 3px solid var(--line);
  border-radius: var(--panel-radius);
  overflow: hidden;
  box-shadow: var(--surface-shadow);
}
.term-entry {
  position: relative;
  break-inside: avoid;
  padding: 16px 18px;
  border-bottom: 3px solid var(--line);
}
.term-entry .term-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.term-entry h3 { font-size: var(--fs-base); font-family: var(--font-body); font-weight: 400; transition: color .12s; }
.term-entry:hover h3 { color: var(--ink); background: var(--accent); }
.term-entry .term-en { font-family: var(--font-head); font-size: var(--fs-sm); color: var(--accent-2); letter-spacing: .5px; }
.term-entry .term-cat {
  margin-left: auto;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.term-entry .term-def { font-size: var(--fs-base); color: var(--text-dim); margin-top: 4px; }

/* ============ 工具箱 ============ */
.lab-tabs {
  width: min(960px, 100%);
  margin: 0 auto 22px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lab-tab {
  padding: 9px 18px;
  font-size: var(--fs-base);
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--control-radius);
  color: var(--text-dim);
  cursor: var(--cursor-pointer);
  font-family: var(--font-body);
  box-shadow: none;
  transition: all .12s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lab-tab:hover { color: var(--ink); border-color: var(--ink); background: var(--accent-dim); }
.lab-tab:active { transform: translate(2px, 2px); }
.lab-tab.active { color: var(--ink); border-color: var(--ink); background: var(--accent); box-shadow: 3px 3px 0 var(--ink); }

.lab-panel {
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 24px;
  background: var(--panel);
  border: 3px solid var(--line);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-hard);
}
.lab-panel h3 { font-size: var(--fs-lg); margin-bottom: 4px; }
.lab-panel .lab-desc { font-size: var(--fs-base); color: var(--text-dim); margin-bottom: 20px; }

.lab-controls {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 20px;
}
.lab-field { display: flex; flex-direction: column; gap: 5px; }
.lab-field label { font-family: var(--font-head); font-size: var(--fs-sm); color: var(--text-dim); }
.lab-field input[type="number"], .lab-field select, .lab-field input[type="text"] {
  padding: 7px 10px;
  background: var(--bg-soft);
  border: 2px solid var(--line);
  border-radius: var(--control-radius);
  color: var(--text);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  outline: none;
  min-width: 90px;
}
.lab-field input:focus, .lab-field select:focus { border-color: var(--accent); }
.lab-field input[type="color"] {
  width: 52px; height: 38px;
  padding: 2px;
  background: var(--bg-soft);
  border: 2px solid var(--line);
  border-radius: var(--control-radius);
  cursor: var(--cursor-pointer);
}
.lab-field input[type="range"] { accent-color: var(--accent); min-width: 140px; }

canvas.lab-canvas {
  display: block;
  background: #2b2924;
  border: 3px solid var(--line);
  border-radius: var(--panel-radius);
  image-rendering: pixelated;
  max-width: 100%;
}

.easing-canvas-wrap {
  width: 100%;
  padding: 18px;
  background: var(--bg-soft);
  border: 3px solid var(--line);
  border-radius: var(--panel-radius);
  overflow: hidden;
}

.easing-canvas-wrap .lab-canvas {
  width: 100%;
  border: 0;
}

.button-ease-preview {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, .8fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
  padding: 18px;
  background: var(--bg-soft);
  border: 3px solid var(--line);
  border-radius: var(--panel-radius);
}

.button-stage {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  border: 3px dashed var(--line-hi);
  border-radius: var(--panel-radius);
  background:
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(227, 168, 78, .08) 23px 24px),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(227, 168, 78, .08) 23px 24px),
    repeating-linear-gradient(0deg, transparent 0 95px, rgba(57, 183, 164, .08) 95px 96px),
    #2b2924;
  background-size: 24px 24px;
}

.preview-button-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 62px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.preview-game-button {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 62px;
  padding: 0 26px;
  border: 3px solid var(--ink);
  border-radius: var(--control-radius);
  color: var(--ink);
  background: var(--accent);
  font-family: var(--font-head);
  font-size: var(--fs-base);
  letter-spacing: 1px;
  line-height: 1;
  cursor: var(--cursor-pointer);
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter, box-shadow;
  pointer-events: auto;
  box-shadow: none;
}

.preview-game-button::before,
.preview-game-button::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #2b2924;
}

.preview-game-button::before {
  left: 8px;
  top: 8px;
}

.preview-game-button::after {
  right: 8px;
  bottom: 8px;
}

.button-preview-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.button-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.button-preview-info h4 {
  font-size: var(--fs-lg);
  color: var(--accent);
}

.button-mode-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
}

.button-mode-field select {
  min-height: 36px;
  padding: 5px 10px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--control-radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
}

.button-preview-info p {
  color: var(--text-dim);
  font-size: var(--fs-base);
}

/* 调色板 */
.palette-out { display: flex; flex-direction: column; gap: 10px; }
.palette-ramp { display: flex; overflow: hidden; border: 3px solid var(--line); border-radius: var(--panel-radius); }
.palette-swatch {
  flex: 1;
  height: 52px;
  cursor: var(--cursor-pointer);
  position: relative;
  transition: transform .1s;
}
.palette-swatch:hover { transform: scale(1.08); z-index: 2; outline: 2px solid #fff; }
.palette-swatch span {
  position: absolute;
  bottom: 3px; left: 0; right: 0;
  text-align: center;
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, .9);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .9);
  opacity: 0;
}
.palette-swatch:hover span { opacity: 1; }

/* 像素画板 */
.pixel-wrap { display: flex; gap: 22px; flex-wrap: wrap; }
.pixel-side { display: flex; flex-direction: column; gap: 12px; min-width: 170px; }
.pixel-palette { display: grid; grid-template-columns: repeat(6, 28px); gap: 5px; }
.pixel-color {
  width: 28px; height: 28px;
  border: 3px solid rgba(0, 0, 0, .85);
  border-radius: var(--control-radius);
  cursor: var(--cursor-pointer);
}
.pixel-color.active { border-color: #fff; transform: scale(1.12); }
.pixel-toolrow { display: flex; gap: 6px; flex-wrap: wrap; }
.pixel-toolrow .btn.active { border-color: var(--accent); color: var(--accent); }

.easing-code-panel {
  margin-top: 14px;
  background: #2b2924;
  border: 3px solid var(--line);
  border-left: 10px solid var(--accent-dim);
  border-radius: var(--panel-radius);
  overflow: hidden;
}

.easing-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 3px solid var(--line);
  background: #2b2924;
  color: #fff9e8;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
}

.easing-code-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.code-lang-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.code-lang-btn {
  min-height: 32px;
  padding: 4px 10px;
  border: 2px solid var(--line);
  border-radius: var(--control-radius);
  color: var(--text-dim);
  background: var(--bg-soft);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  cursor: var(--cursor-pointer);
}

.code-lang-btn:hover,
.code-lang-btn.active {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--accent);
}

.code-copy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  margin-left: 4px;
  border: 2px solid var(--line);
  border-radius: var(--control-radius);
  color: var(--text);
  background: var(--bg-soft);
  font-family: var(--font-head);
  font-size: var(--fs-base);
  line-height: 1;
  cursor: var(--cursor-pointer);
}

.code-copy-icon:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--accent);
}

.easing-code {
  margin: 0;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: #d9cbb7;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ============ 模态框 ============ */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(7, 7, 7, .58);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px 40px;
  overflow-y: auto;
}
.modal {
  width: 100%;
  max-width: 620px;
  background: var(--panel);
  border: 3px solid var(--line-hi);
  border-radius: var(--panel-radius);
  overflow: hidden;
  box-shadow: var(--shadow-hard);
  animation: modalIn .15s ease-out;
}
.modal.wide { max-width: 1000px; }
@keyframes modalIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 3px solid var(--line);
  background: var(--accent);
}
.modal-head h3 { font-size: var(--fs-lg); }
.modal-close {
  background: none;
  border: 2px solid transparent;
  border-radius: var(--control-radius);
  color: var(--text-dim);
  font-size: var(--fs-base);
  cursor: var(--cursor-pointer);
  padding: 4px 8px;
}
.modal-close:hover { color: var(--ink); background: var(--paper); border-color: var(--line); }
.modal-body { padding: 24px; }

/* ============ 表单 ============ */
.form-grid { display: flex; flex-direction: column; gap: 15px; }
.form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-family: var(--font-head); font-size: var(--fs-sm); color: var(--text-dim); }
.form-field label .req { color: var(--danger); }
.form-field input, .form-field select, .form-field textarea {
  padding: 9px 12px;
  background: var(--bg-soft);
  border: 2px solid var(--line);
  border-radius: var(--control-radius);
  color: var(--text);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  outline: none;
  transition: border-color .12s;
}
.form-field textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.form-field textarea.md-edit { min-height: 260px; font-size: var(--fs-base); }
.form-field textarea.lens-md-edit {
  min-height: min(62vh, 620px);
  font-family: var(--font-mono);
  line-height: 1.75;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--ink); box-shadow: 4px 4px 0 var(--accent-dim); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.form-hint { font-family: var(--font-head); font-size: var(--fs-sm); color: var(--text-dim); }
.form-error { font-size: var(--fs-base); color: var(--danger); min-height: 18px; }

/* ============ Toast ============ */
.toast-wrap {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.toast {
  padding: 9px 22px;
  background: var(--panel-2);
  border: 3px solid var(--ink);
  border-radius: var(--panel-radius);
  color: var(--text);
  font-size: var(--fs-base);
  box-shadow: var(--shadow-hard);
  animation: toastIn .18s ease-out;
}
.toast.err { border-color: var(--danger); }
.toast.out { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ============ 空状态 ============ */
.empty-tip {
  padding: 50px 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: var(--fs-base);
  border: 3px dashed var(--line);
  border-radius: var(--panel-radius);
  background: var(--paper);
  box-shadow: var(--surface-shadow);
}
.empty-tip .empty-icon { font-size: var(--fs-lg); display: block; margin-bottom: 10px; }
.empty-tip .empty-action { margin-top: 14px; }

/* 像素面板质感 */
:is(
  .stat-card,
  .tool-card,
  .doc-item,
  .lab-panel,
  .easing-canvas-wrap,
  .button-ease-preview,
  .easing-code-panel,
  .md-preview,
  .empty-tip,
  .modal
) {
  background-image: var(--pixel-surface);
}

:is(
  .stat-card,
  .tool-card,
  .doc-item,
  .kcard-face,
  .lab-panel,
  .easing-canvas-wrap,
  .button-ease-preview,
  .easing-code-panel,
  .md-preview,
  .empty-tip
) {
  box-shadow: var(--surface-shadow);
}

:where(.tool-card, .doc-item, .lab-panel, .button-ease-preview, .easing-code-panel)::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 4px;
  height: 4px;
  background: rgba(227, 168, 78, .35);
  box-shadow: -8px 0 0 rgba(57, 183, 164, .28);
  pointer-events: none;
}

:where(.tool-card, .doc-item, .lab-panel, .button-ease-preview, .easing-code-panel) {
  position: relative;
}

.kcard .kcard-face {
  position: absolute;
  inset: 0;
  background-image: none;
  box-shadow: var(--shadow-x) var(--shadow-y) 0 rgba(43, 41, 36, .78);
}

/* ============ 重线 Neo-Brutalist 增强 ============ */
.site-header {
  border-right-width: 3px;
  box-shadow: 7px 0 0 var(--ink);
}

.logo {
  border-bottom-width: 3px;
}

.logo-block,
.sidebar-kicker,
.sidebar-clock-face,
.main-nav a,
.btn,
.nav-toggle,
.admin-bar,
.hero,
.stat-card,
.tool-card,
.filter-bar,
.search-input,
.doc-tree,
.doc-item,
.doc-reader,
.doc-tree-toggle,
.doc-pager-link,
.md-body blockquote,
.md-body pre,
.md-body table,
.lab-tabs,
.lab-panel,
.lab-field input,
.lab-field textarea,
.lab-field select,
.palette-ramp,
.pixel-canvas,
.easing-canvas-wrap,
.button-ease-preview,
.easing-code-panel,
.code-lang-btn,
.code-copy-icon,
.modal,
.modal-close,
.form-field input,
.form-field select,
.form-field textarea,
.drop-zone,
.empty-tip,
.kcard-face,
.term-entry,
.site-footer {
  border-width: 3px;
  border-color: var(--ink);
}

.sidebar-kicker,
.main-nav a,
.btn-sm,
.tool-card .tool-icon,
.doc-item .doc-icon,
.badge,
.chip.active,
.lab-tab.active,
.code-lang-btn.active,
.code-copy-icon,
.icon-btn {
  box-shadow: 4px 4px 0 var(--ink);
}

:where(.hero, .stat-card, .tool-card, .doc-item, .doc-reader, .doc-tree, .lab-panel, .easing-canvas-wrap, .button-ease-preview, .easing-code-panel, .md-preview, .empty-tip, .modal) {
  box-shadow: var(--shadow-hard);
}

.kcard {
  --shadow-x: 6px;
  --shadow-y: 6px;
}

.kcard:hover {
  --shadow-x: 8px;
  --shadow-y: 8px;
}

.kcard .kcard-face {
  box-shadow: var(--shadow-x) var(--shadow-y) 0 var(--ink);
}

.lens-node .lens-node-kcard .kcard-face,
.lens-node:hover .lens-node-kcard .kcard-face,
.lens-node:focus-within .lens-node-kcard .kcard-face,
.lens-node.is-previewed .lens-node-kcard .kcard-face,
.lens-node .lens-node-kcard.flipped .kcard-face {
  border-width: 3px;
}

.lens-link {
  height: 4px;
  background: rgba(5, 5, 5, .62);
}

.nav-icon {
  stroke-width: 2.8;
}

.page-head h1,
.section-head h2,
.hero-info h1,
.tool-card h3,
.doc-item h3,
.doc-reader .doc-head h1,
.md-body h1,
.md-body h2,
.md-body h3,
.term-entry h3,
.lab-panel h3,
.draw-zone h3,
.modal-head h3,
.kcard-name,
.kcard-mini-title {
  color: var(--ink);
  font-family: var(--font-title);
  font-weight: 900;
}

.logo-text,
.main-nav a,
.btn,
.chip,
.badge,
.filter-count,
.sidebar-digital-clock,
.sidebar-clock-date {
  color: var(--ink);
  font-family: var(--font-title);
  font-weight: 900;
}

.tool-card .tool-icon,
.doc-item .doc-icon,
.stat-card .stat-icon,
.empty-tip .empty-icon {
  color: var(--ink);
  background: var(--paper);
  filter: grayscale(1) contrast(1.8);
}

.page-head h1 .pix,
.sidebar-kicker {
  background: var(--ink);
  color: var(--paper);
}

/* ============ 页脚 ============ */
.site-footer {
  padding: 24px 32px;
  text-align: center;
  border-top: 3px solid var(--line);
  color: var(--text-dim);
  background: var(--paper);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
}
.footer-sub { margin-top: 6px; }
.footer-sub a { color: var(--text-dim); }
.footer-sub a:hover { color: var(--accent); }

/* ============ 响应式 ============ */
@media (max-width: 1180px) and (min-width: 901px) {
  .daily-lens-center {
    width: min(520px, 50%);
  }
  .lens-node {
    width: 160px;
  }
  .lens-node-1 { --x: clamp(-375px, -41%, -250px); --y: -235px; }
  .lens-node-2 { --x: 0px; --y: -320px; }
  .lens-node-3 { --x: clamp(250px, 41%, 375px); --y: -235px; }
  .lens-node-4 { --x: clamp(255px, 42%, 385px); --y: 200px; }
  .lens-node-5 { --x: clamp(90px, 14%, 118px); --y: 318px; }
  .lens-node-6 { --x: clamp(-385px, -42%, -255px); --y: 195px; }
  .lens-link-1,
  .lens-link-3,
  .lens-link-4,
  .lens-link-6 { --len: clamp(340px, 50%, 430px); }
  .lens-link-2 { --len: 320px; }
  .lens-link-5 { --len: 336px; }
}

@media (max-width: 900px) {
  body {
    padding-left: 0;
    padding-top: 78px;
  }
  .skip-link { left: 16px; }
  .site-header {
    right: 0;
    bottom: auto;
    width: 100%;
    min-height: 72px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 3px solid var(--ink);
    box-shadow: 0 5px 0 rgba(43, 41, 36, .82);
    overflow: visible;
  }
  .logo {
    min-width: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .logo-block {
    width: 44px;
    height: 44px;
    border-width: 3px;
    box-shadow: 3px 3px 0 var(--accent-3), 6px 6px 0 var(--ink);
  }
  .logo-text {
    font-size: var(--fs-base);
    white-space: nowrap;
  }
  .logo-text small { display: none; }
  .sidebar-kicker { display: none; }
  .sidebar-clock { display: none; }
  .main-nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 12px;
    width: min(330px, calc(100vw - 24px));
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    padding: 12px;
    background: var(--paper);
    background-image: var(--pixel-surface);
    border: 3px solid var(--ink);
    box-shadow: var(--shadow-hard);
  }
  .main-nav.open { display: flex; }
  .header-actions {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    margin-left: auto;
    padding-top: 0;
    border-top: 0;
  }
  .header-actions .btn-sm {
    padding: 6px 9px;
  }
  .btn.font-toggle {
    min-width: 86px;
  }
  .nav-toggle { display: block; }
  .sidebar-collapse-btn { display: none; }
  .lens-stack-backdrop {
    left: 0;
    top: 78px;
  }
  .lens-stack-item.is-active .lens-stack-kcard {
    left: 50vw;
    top: calc(50vh + 39px);
    width: calc(100vw - 28px);
    height: min(58vh, 430px);
  }
  body.route-cards .view {
    padding-top: 18px;
    padding-inline: 14px;
  }
  body.route-cards .lens-stack-board {
    --stack-peek-h: 48px;
    --stack-card-h: clamp(252px, min(58vw, 42vh), 330px);
    gap: 30px;
  }
  body.route-cards .lens-stack {
    padding-bottom: calc(var(--stack-card-h) - var(--stack-peek-h) + 16px);
  }
  body.route-cards .lens-stack-title {
    min-height: 40px;
    margin-bottom: 12px;
  }
  body.route-cards .lens-stack-kcard {
    --kcard-cat-fs: clamp(10px, min(2.35cqw, 3cqh), 12px);
    --kcard-name-fs: clamp(26px, min(7.5cqw, 9.5cqh), 38px);
    --kcard-body-fs: clamp(14px, min(3.9cqw, 4.65cqh), 18px);
    --kcard-question-fs: clamp(14px, min(4cqw, 4.8cqh), 18px);
    --kcard-desc-lines: 5;
    --kcard-stack-line: 1.38;
  }
  body.route-cards .lens-stack-item:not(.is-active) .lens-stack-kcard .kcard-face {
    padding: calc(var(--stack-peek-h) + 10px) clamp(18px, 5vw, 28px) clamp(18px, 4vw, 24px);
  }
  body.route-cards .lens-stack-item:not(.is-active) .lens-stack-kcard .kcard-name {
    margin: clamp(7px, 3cqh, 14px) 0 clamp(7px, 2.2cqh, 10px);
  }
  body.route-cards .lens-stack-item:not(.is-active) .lens-stack-kcard .kcard-desc span {
    max-width: min(100%, 22em);
  }
  body.route-cards .lens-stack-item.is-active .lens-stack-kcard {
    top: calc(50vh + 39px);
    width: min(calc(100vw - 28px), 620px);
    height: min(62vh, 430px);
  }
  body.route-cards .lens-stack-item.is-active .lens-stack-kcard .kcard-face {
    padding: calc(var(--stack-peek-h) + 14px) clamp(18px, 5vw, 28px) clamp(18px, 4vw, 26px);
  }
  body.route-cards .lens-stack-item.is-active .lens-stack-kcard .kcard-name {
    margin: clamp(12px, 4cqh, 22px) 0 clamp(8px, 2cqh, 12px);
  }
  body.route-cards .lens-stack-item.is-active .lens-stack-kcard .kcard-desc span {
    max-width: min(100%, 22em);
  }
  body.sidebar-mini {
    --sidebar-w: 248px;
  }
  body.sidebar-mini .site-header {
    width: 100%;
    min-height: 72px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
  }
  body.sidebar-mini .logo {
    justify-content: flex-start;
    width: auto;
    padding-bottom: 0;
  }
  body.sidebar-mini .logo-text,
  body.sidebar-mini .main-nav a span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: nowrap;
  }
  body.sidebar-mini .main-nav {
    align-items: stretch;
  }
  body.sidebar-mini .main-nav a {
    width: auto;
    min-height: 42px;
    grid-template-columns: 24px minmax(0, 1fr);
    justify-items: stretch;
    padding: 8px 12px;
  }
  body.sidebar-mini .btn.font-toggle {
    width: auto;
    min-width: 86px;
    height: auto;
    padding: 6px 9px;
    font-size: var(--fs-sm);
  }
  body.sidebar-mini .btn.font-toggle::before {
    content: none;
  }
  .daily-lens-page {
    min-height: auto;
    justify-content: flex-start;
  }
  .daily-lens-graph {
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
  }
  .lens-connections {
    display: none;
  }
  .lens-link {
    display: none;
  }
  .daily-lens-center,
  .lens-node {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 520px);
    max-width: calc(100vw - 44px);
    transform: none;
  }
  .daily-lens-card .kcard {
    height: clamp(286px, 44vh, 360px);
  }
  .daily-lens-center .kcard-desc {
    font-size: clamp(16px, min(4.8cqw, 6.2cqh), 20px);
  }
  .daily-lens-center .kcard-desc span {
    width: 100%;
    max-width: 18em;
  }
  .daily-lens-center .kcard-name {
    font-size: clamp(26px, min(8cqw, 10cqh), 34px);
  }
  .lens-node {
    height: 118px;
  }
  .lens-node:hover,
  .lens-node:focus-within,
  .lens-node.is-previewed,
  .lens-node.is-expanded {
    height: 260px;
  }
  .lens-node:hover .lens-node-kcard,
  .lens-node:focus-within .lens-node-kcard,
  .lens-node.is-previewed .lens-node-kcard,
  .lens-node .lens-node-kcard.flipped {
    width: 100%;
    height: 260px;
    transform: translate(-50%, -50%);
  }
  .hero { flex-direction: column; text-align: left; padding: 30px 22px; }
  .hero-info h1 { font-size: clamp(38px, 14vw, 64px); }
  .hero-links { justify-content: flex-start; }
  .hero-panel {
    width: 100%;
    min-height: 280px;
    align-self: auto;
  }
  .hero-panel .hero-art { margin: 34px auto 50px; transform: scale(.75); transform-origin: center; }
  .term-list { columns: 1; }
  .page-head h1 { font-size: var(--fs-lg); }
  .view { width: 100%; padding: 22px 16px 50px; }
  .route-home .view { display: block; }
  .doc-layout { grid-template-columns: 1fr; }
  .doc-tree { position: static; }
  .doc-tree-wrap { align-self: auto; }
  .doc-tree-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--panel);
    border: 3px solid var(--line);
    border-radius: var(--control-radius);
    color: var(--ink);
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    cursor: var(--cursor-pointer);
    list-style: none;
    box-shadow: var(--surface-shadow);
  }
  .doc-tree-toggle::-webkit-details-marker { display: none; }
  .doc-tree-toggle::after { content: '▾'; margin-left: auto; color: var(--text-dim); }
  .doc-tree-wrap:not([open]) .doc-tree-toggle::after { content: '▸'; }
  .doc-tree-wrap[open] .doc-tree-toggle { margin-bottom: 10px; }
  .doc-pager { grid-template-columns: 1fr; }
  .doc-pager-link.next { align-items: flex-start; text-align: left; }
  .back-top { right: 14px; bottom: 18px; }
  .form-row2 { grid-template-columns: 1fr; }
  .admin-bar { padding: 8px 16px; }
  .editor-split.preview-on { grid-template-columns: 1fr; }
  .button-ease-preview { grid-template-columns: 1fr; }
  .easing-canvas-wrap,
  .button-ease-preview { padding: 12px; }
  .easing-code-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .easing-code-actions {
    justify-content: flex-start;
    gap: 10px;
  }
  .preview-button-anchor,
  .preview-game-button { width: 180px; height: 58px; }
  .preview-game-button { font-size: var(--fs-sm); }
}

/* ============ 减少动态效果偏好 ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}