/* ============================================================
   fangshoufanji · 个人作品集与工具
   遵循 ui-research 苹果官网级现代设计与工程规范 (high-end-visual-design)
   - 双层硬件嵌套架构 (Doppelrand Architecture)
   - 按钮嵌套独立圆形反白容器 (Button-in-Button)
   - 微型胶囊眉标 (Eyebrow Tag) + 1px 晶体镜面高光 (Specular Rim Light)
   - 探照灯光标追踪 (Spotlight Card)
   - 苹果发布会式「单品旗舰展台 + 家族 Bento 矩阵」
   ============================================================ */

:root {
  /* ---- 字体栈 ---- */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* ---- 几何尺寸与同心圆角 ---- */
  --wrap-max: 1160px;
  --wrap-pad: clamp(1.25rem, 3.8vw, 2.75rem);
  --r-outer: 1.5rem;             /* 24px */
  --r-inner: calc(1.5rem - 2px); /* 22px 同心圆角公式 */
  --r-pill: 9999px;

  /* ---- 「永远深色的一块」内部墨色（不跟主题走） ----
     灵动岛胶囊底恒为 #000：内部强调色若跟主题，浅色主题的 #059669
     压在 12% 白罩的黑底上只有 4.39:1（合成算法实测，差 4.5 一线）。 */
  --accent-on-dark: #10b981;

  /* ---- 物理过渡曲线 ---- */
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
}

/* ============================================================
   深色模式 (默认 · OLED 阶梯深色体系)
   ============================================================ */
html[data-theme="dark"] {
  --bg-canvas: #08090a;         /* 底层画布 */
  --bg-shell: #0e1014;          /* Doppelrand 外层边框基底 */
  --bg-surface: #12151b;        /* Doppelrand 内层核心底板 */
  --bg-elevated: #181c24;       /* 二级控件 / 悬浮底色 */
  --bg-inset: #0a0c10;          /* 凹陷微组件 / 舞台底色 */

  --text-primary: #f4f4f6;      /* 96% 纯净高对比白 */
  --text-secondary: #a1a1aa;    /* 苹果副标题中灰 */
  --text-muted: #8e8e99;        /* 辅助与标尺等宽灰（深底上 ≥5.2:1，原 #71717a 仅 3.8） */

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-rim: rgba(255, 255, 255, 0.16);
  --border-active: rgba(255, 255, 255, 0.28);

  --accent: #10b981;            /* 翠绿 (饱和度 <80%) */
  --accent-ink: #10b981;        /* 小号强调文字（深底上本就达标） */
  --accent-soft: rgba(16, 185, 129, 0.12);
  --accent-soft-strong: rgba(16, 185, 129, 0.2);
  --accent-border: rgba(16, 185, 129, 0.28);

  --specular-line: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  --spotlight-outer: rgba(255, 255, 255, 0.06);

  --shadow-stage: 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

/* ============================================================
   浅色模式 (暖钛白阶梯体系)
   ============================================================ */
html[data-theme="light"] {
  --bg-canvas: #f9fafb;
  --bg-shell: #f1f3f7;
  --bg-surface: #ffffff;
  --bg-elevated: #f4f5f8;
  --bg-inset: #e8ecf2;

  --text-primary: #09090b;
  --text-secondary: #52525b;
  --text-muted: #5b5b64;        /* 白底 ≥6.3:1（原 #71717a 在卡面仅 4.0–4.3） */

  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-rim: rgba(0, 0, 0, 0.14);
  --border-active: rgba(0, 0, 0, 0.24);

  --accent: #059669;
  --accent-ink: #047857;        /* 小号强调文字压深档（白底 5.5:1，#059669 仅 3.8） */
  --accent-soft: rgba(5, 150, 105, 0.1);
  --accent-soft-strong: rgba(5, 150, 105, 0.18);
  --accent-border: rgba(5, 150, 105, 0.25);

  --specular-line: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12), transparent);
  --spotlight-outer: rgba(0, 0, 0, 0.04);

  --shadow-stage: 0 24px 48px -15px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 16px 32px -10px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.03);

  color-scheme: light;
}

/* ============================================================
   基础重置与无障碍
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a,
button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-canvas);
  scrollbar-width: thin;
  scrollbar-color: var(--border-active) transparent;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background-color: var(--bg-canvas);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* ---- 品牌文本拖选高亮 (深色 / 浅色自适应) ---- */
::selection {
  background: rgba(16, 185, 129, 0.28);
  color: inherit;
}

html[data-theme="light"] ::selection {
  background: rgba(5, 150, 105, 0.24);
  color: inherit;
}

/* ---- 桌面端原生级微型细槽滚动条 ---- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-active);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* 模态弹窗打开时锁背景滚动（原生 <dialog> 不锁，实测滚轮仍能滚 600px）。
   视口滚动条消失会腾出 15px：用 body 内边距补回内容宽度，
   固定顶栏同步补位——内容与导航都零位移（scrollbar-gutter 在
   overflow:hidden 下不保留槽位，实测无效，故用补位法）。 */
html.is-dialog-open,
html.is-dialog-open body {
  overflow: hidden;
}

html.is-dialog-open body {
  padding-right: var(--scrollbar-w, 0px);
}

html.is-dialog-open .island-nav-header {
  padding-right: calc(1rem + var(--scrollbar-w, 0px));
}

.skip-link {
  position: fixed;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  left: calc(1rem + env(safe-area-inset-left, 0px));
  z-index: 1000;
  padding: 0.6rem 1.2rem;
  border-radius: var(--r-pill);
  background: var(--text-primary);
  color: var(--bg-canvas);
  font-weight: 700;
  font-size: 0.85rem;
  transform: translateY(-200%);
  transition: transform var(--dur-fast);
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================
   物理材质：SVG 胶片微噪点与顶部光照 (ui-research/creatives/06)
   ============================================================ */
.film-grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.ambient-glow {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: min(960px, 100%);
  height: 520px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

html[data-theme="light"] .ambient-glow {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.025) 0%, transparent 70%);
}

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
  position: relative;
  z-index: 1;
}

/* ============================================================
   高奢微观组件：Button-in-Button 极奢药丸按钮
   (来自 ui-research/skills-matrix/web.md high-end-visual-design)
   ============================================================ */
.btn-button-in-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.55rem 0.55rem 1.25rem;
  border-radius: var(--r-pill);
  background: var(--text-primary);
  color: var(--bg-canvas);
  font-size: 0.825rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur-fast) var(--ease-apple), opacity var(--dur-fast);
}

.btn-button-in-button:hover {
  opacity: 0.92;
}

.btn-button-in-button:active {
  transform: scale(0.96);
}

.btn-inner-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.18);
  color: var(--bg-canvas);
  font-size: 0.75rem;
  font-weight: 800;
}

html[data-theme="dark"] .btn-inner-circle {
  background: rgba(0, 0, 0, 0.25);
  color: #08090a;
}

/* 浅色主题的 CTA 底已改为深翡翠 #047857；
   内圆若继续用「半透明白」，白字压白只剩 3.41:1。
   改半透明黑，白字回到 8.26:1。 */
html[data-theme="light"] .btn-inner-circle {
  background: rgba(0, 0, 0, 0.28);
  color: #ffffff;
}

.btn-button-in-button-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.45rem 0.4rem 0.95rem;
  border-radius: var(--r-pill);
  background: var(--text-primary);
  color: var(--bg-canvas);
  font-size: 0.75rem;
  font-weight: 700;
  transition: transform var(--dur-fast) var(--ease-apple), opacity var(--dur-fast);
}

.btn-button-in-button-sm:hover {
  opacity: 0.92;
}

.btn-button-in-button-sm:active {
  transform: scale(0.96);
}

.btn-inner-circle-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.2);
  color: var(--bg-canvas);
  font-size: 0.65rem;
  font-weight: 800;
}

html[data-theme="dark"] .btn-inner-circle-sm {
  background: rgba(0, 0, 0, 0.25);
  color: #08090a;
}

html[data-theme="light"] .btn-inner-circle-sm {
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
}

.btn-ghost-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.825rem;
  font-weight: 600;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

.btn-ghost-pill:hover {
  color: var(--text-primary);
  border-color: var(--border-rim);
}

.btn-ghost-pill-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

.btn-ghost-pill-sm:hover {
  color: var(--text-primary);
  border-color: var(--border-rim);
}

.pill-circle-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

/* ============================================================
   高奢微观组件：微型胶囊眉标 (Eyebrow Tag)
   ============================================================ */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 0.675rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

.eyebrow-pill-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.65rem;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.eyebrow-dot-green {
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

/* ---- 锚点跳转滚动留白：预留浮动顶栏高度 + 安全区，避免标题被顶栏遮盖 ---- */
section[id],
footer[id],
header[id] {
  scroll-margin-top: calc(4.75rem + env(safe-area-inset-top, 0px));
}

@media (max-width: 600px) {
  section[id],
  footer[id],
  header[id] {
    scroll-margin-top: calc(5.75rem + env(safe-area-inset-top, 0px));
  }
}

/* ============================================================
   悬浮流体玻璃导航栏 (ui-research/platforms/web/DESIGN-GUIDE.md)
   ============================================================ */
.island-nav-header {
  position: fixed;
  top: calc(1.25rem + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding-left: calc(1rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1rem + env(safe-area-inset-right, 0px));
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-apple), opacity var(--dur-base);
}

/* 向下滚让位、向上滚回归；焦点进入顶栏或回到页顶即刻显示（JS 挂类） */
html.nav-hidden .island-nav-header {
  transform: translateY(-140%);
  opacity: 0;
}

.island-nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.55rem 1.25rem;
  border-radius: var(--r-pill);
  background: rgba(18, 21, 27, 0.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.12);
  transition: border-color var(--dur-fast);
}

html[data-theme="light"] .island-nav {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.nav-brand {
  display: flex;
  align-items: center;
  min-width: 24px;
  min-height: 24px;
  gap: 0.35rem;
  padding: 0.4rem 0.2rem;
  margin: -0.4rem -0.2rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-glyph {
  font-family: var(--font-mono);
  color: var(--accent-ink);
}

.brand-text {
  color: var(--text-primary);
}

.nav-divider {
  width: 1px;
  height: 14px;
  background-color: var(--border-subtle);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 0.825rem;
  font-weight: 500;
  padding: 0.4rem 0.2rem;
  margin: -0.4rem -0.2rem;
  color: var(--text-secondary);
  transition: color var(--dur-fast);
}

.nav-link:hover {
  color: var(--text-primary);
}

/* 品牌字标、速链与页脚回顶：与 .nav-link 同曲线的悬停过渡 */
.nav-brand,
.developer-gh,
.link-more-gh,
.footer-top-link {
  transition: color var(--dur-fast);
}

/* 滚动高亮：JS 写 aria-current（CJK 无字宽变化，加字重不引起重排） */
.nav-link[aria-current="true"] {
  color: var(--text-primary);
  font-weight: 600;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-gh-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  transition: background var(--dur-fast), transform var(--dur-fast);
}

html[data-theme="light"] .nav-gh-pill {
  background: rgba(0, 0, 0, 0.06);
}

.nav-gh-pill:hover {
  background: rgba(255, 255, 255, 0.14);
}

.nav-gh-pill:active {
  transform: scale(0.97);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.34rem;
  min-height: 28px;
  min-width: 28px;
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}

.theme-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-active);
}

.theme-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 16px;
  height: 16px;
}

/* ---- 灯泡本体 ---- */
.bulb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.bulb-glass {
  position: relative;
  z-index: 2;
  display: inline-flex;
  /* 主题切换时灯泡颜色平滑渐变（与 glow 的 JS 动画同曲线） */
  transition: color 340ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* 光晕：点亮时从灯泡背后散开 */
.bulb-glow {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%) scale(0.4);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 205, 110, 0.55) 0%,
    rgba(255, 190, 90, 0.22) 42%,
    transparent 72%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* 深色：灯泡亮 */
html[data-theme="dark"] .theme-toggle .bulb-glass {
  color: #ffc46b;
}
html[data-theme="dark"] .theme-toggle .bulb-glow {
  opacity: 0.55;
  transform: translate(-50%, -50%) scale(1);
}

/* 浅色：灯泡灭 */
html[data-theme="light"] .theme-toggle .bulb-glass {
  color: var(--text-muted);
}
html[data-theme="light"] .theme-toggle .bulb-glow {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .bulb-glass,
  .bulb-glow {
    transition: none !important;
  }
}

/* 内容默认可读。进场仅播放一次，不以透明度或观察比例控制内容可见性。 */
@keyframes section-enter {
  from { transform: translateY(10px); }
  to { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  main > section.is-entering {
    animation: section-enter 360ms var(--ease-apple) both;
  }
}

/* ---- 窄触控热区扩展：伪元素扩到 44px，纯视觉尺寸不变 ---- */
.nav-link,
.lang-btn,
.theme-toggle {
  position: relative;
}

@media (pointer: coarse) {
  .nav-link::after,
  .lang-btn::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    /* 只扩展垂直热区，横向保持各按钮边界，避免中/EN 相互覆盖。 */
    width: 100%;
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  /* 独立按钮直接加高，触屏下视觉与热区同步 */
  .theme-toggle,
  .dialog-close,
  .filter-tab,
  .btn-stage-tab {
    min-height: 44px;
  }

  .btn-temp-step {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ------------------------------------------------------------
   小屏顶栏动态收纳阶梯 (实测数据标定，杜绝任何视口下的元素裁切)
   - 完整未收纳态 (~630px)：需 >=680px 视口方能舒适容纳；
   - 阶梯一 (<=680px)：藏 brand 文本与分隔线，收纳内衬，降至 ~430px；
   - 阶梯二 (<=500px，涵盖 iPhone 375~480px)：隐藏 GitHub 药丸，降至 ~340px；
   - 阶梯三 (<=350px，涵盖 320px 超窄视口)：收紧间隙与内衬，降至 ~285px，完美居中。
   ------------------------------------------------------------ */
.nav-link,
.brand-text {
  white-space: nowrap;
}

@media (max-width: 680px) {
  .island-nav {
    gap: 0.75rem;
    padding: 0.45rem 0.85rem;
  }

  .nav-links {
    gap: 0.65rem;
  }

  .nav-divider,
  .brand-text {
    display: none;
  }

  .nav-actions {
    gap: 0.45rem;
  }

  .nav-gh-pill {
    padding: 0.3rem 0.65rem;
  }
}

@media (max-width: 500px) {
  .nav-gh-pill {
    display: none;
  }

  .island-nav {
    gap: 0.6rem;
    padding: 0.4rem 0.75rem;
  }
}

@media (max-width: 350px) {
  .island-nav {
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
  }

  .nav-links {
    gap: 0.3rem;
  }

  .nav-link {
    font-size: 0.72rem;
    padding: 0.15rem 0.3rem;
  }

  .lang-btn {
    padding: 0.1rem 0.35rem;
    font-size: 0.64rem;
  }
}

/* 英文导航文案更长：平板提前收纳，手机分两行保留全部入口。 */
@media (min-width: 681px) and (max-width: 860px) {
  html[lang="en"] .island-nav {
    gap: 0.75rem;
    padding: 0.45rem 0.85rem;
  }

  html[lang="en"] .brand-text,
  html[lang="en"] .nav-divider {
    display: none;
  }

  html[lang="en"] .nav-links {
    gap: 0.65rem;
  }
}

@media (max-width: 600px) {
  html[lang="en"] .island-nav {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.75rem;
    width: 100%;
    max-width: 28rem;
    min-width: 0;
    padding: 0.55rem 0.75rem;
  }

  html[lang="en"] .nav-brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin: 0;
    padding: 0;
  }

  html[lang="en"] .nav-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  html[lang="en"] .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: space-between;
    gap: 0.5rem;
  }

  html[lang="en"] .nav-link {
    margin: 0;
    padding: 0;
    font-size: 0.72rem;
  }

  html[lang="en"] .hero-section {
    padding-top: calc(7rem + env(safe-area-inset-top, 0px));
  }
}

/* ============================================================
   语言切换微型双态胶囊开关 (中 / EN)
   ============================================================ */
.lang-switch-capsule {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: var(--r-pill);
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  gap: 2px;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.5rem;
  min-height: 24px;
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}

.lang-btn:hover {
  color: var(--text-primary);
}

.lang-btn.is-active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .lang-btn.is-active {
  background: #ffffff;
  color: #08090a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   首屏：画报级排版与真实开发者印章
   ============================================================ */
.hero-section {
  /* 浮动导航下缘 73px；留 20px 呼吸 → 顶部至少 93px */
  padding-top: clamp(5.75rem, 7vw, 6.5rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}


.status-indicator {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse-dot 2.4s ease-in-out infinite;
}

/* 雷达波纹：圆点只做呼吸（不缩放），扩散交给外环，两层互不打架 */
.status-indicator::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: var(--r-pill);
  border: 1px solid var(--accent);
  animation: radar-ripple 2.4s ease-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes radar-ripple {
  0% { transform: scale(0.6); opacity: 0.8; }
  70%, 100% { transform: scale(2); opacity: 0; }
}

/* 开发者印章：Doppelrand 嵌套结构 */
.developer-profile-shell {
  display: inline-block;
  padding: 2px;
  border-radius: var(--r-pill);
  background: var(--border-subtle);
  margin-bottom: 0;
}

.developer-profile-core {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.4rem 1.15rem 0.4rem 0.4rem;
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}

.developer-avatar {
  border-radius: var(--r-pill);
  border: 1px solid var(--border-rim);
  object-fit: cover;
  background-color: var(--bg-surface);
  aspect-ratio: 1 / 1;
}

.developer-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.developer-name-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.developer-handle {
  font-size: 0.925rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.developer-gh {
  font-family: var(--font-mono);
  padding: 0.3rem 0.1rem;
  margin: -0.3rem -0.1rem;
  font-size: 0.725rem;
  color: var(--accent-ink);
}

.developer-gh:hover {
  text-decoration: underline;
}

.developer-role {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* 画报级大标题 (8:1 视觉悬殊对比) */
.hero-heading-block {
  margin-bottom: 1.125rem;
}

.hero-title {
  font-size: clamp(2.4rem, 6.2vw, 5.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

.hero-title-accent {
  color: var(--text-secondary);
}

.hero-manifesto {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 44rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.hero-manifesto strong {
  color: var(--text-primary);
  font-weight: 600;
  /* 三个关键词是一个整体，避免「可验」/「证」被拆到两行 */
  white-space: nowrap;
}

.manifesto-term {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 520px) {
  /* 允许在词组之间换行，每个完整关键词保持在同一行。 */
  .hero-manifesto strong {
    white-space: normal;
  }
}

.mono-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}

.hero-action-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* 按钮不参与收缩：窄处宁可整颗换行，也不把文案压成两行 */
.hero-action-cell > a {
  flex: none;
}

.hero-lead .hero-action-cell {
  margin-top: 1.5rem;
}

@media (max-width: 979px) {
  .hero-main { gap: 1.5rem; }
  .hero-work-item {
    grid-template-areas: "name tag" "note note";
  }
}


/* ---- 身份行：印章 + 运行状态合并（替代原标尺行 + 印章两行） ---- */
.hero-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding-bottom: 0.85rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

@media (max-width: 620px) {
  .hero-identity {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.6rem;
  }
}

/* ---- 首屏双栏：左主张 / 右精选作品（真实项目，不用虚构截图） ---- */
.hero-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: end;
}

@media (min-width: 980px) {
  .hero-main {
    grid-template-columns: minmax(0, 1.12fr) minmax(21rem, 0.78fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

/* 980–1180：右栏偏窄时把技术标签移到名称行右侧，
   让描述独占整行，避免英文描述在此区间折行 */
@media (min-width: 980px) and (max-width: 1180px) {
  .hero-work-item {
    grid-template-areas:
      "name tag"
      "note note";
    gap: 0.1rem 0.75rem;
  }
}

.hero-work {
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.9rem;
}

.hero-work-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.hero-work-head .mono-label {
  margin-bottom: 0;
}

.hero-work-all {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 0.25rem 0.1rem;
  margin: -0.25rem -0.1rem;
  transition: color var(--dur-fast);
}

.hero-work-all:hover {
  color: var(--accent-ink);
}

.hero-work-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.hero-work-list li + li {
  border-top: 1px solid var(--border-subtle);
}

.hero-work-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  grid-template-areas:
    "name tag"
    "note tag";
  gap: 0.15rem 1rem;
  padding: 0.7rem 0.35rem 0.7rem 0.1rem;
  border-radius: 8px;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-apple);
}

.hero-work-name {
  grid-area: name;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.hero-work-note {
  grid-area: note;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.hero-work-tag {
  grid-area: tag;
  align-self: center;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (hover: hover) {
  .hero-work-item:hover {
    background: var(--bg-inset);
    transform: translateX(3px);
  }

  .hero-work-item:hover .hero-work-name {
    color: var(--accent-ink);
  }
}

/* ============================================================
   Doppelrand 核心与探照灯系统 (ui-research/creatives/01)
   ============================================================ */
.spotlight-card {
  position: relative;
  padding: 2px;
  border-radius: var(--r-outer);
  background: var(--bg-shell);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: background var(--dur-base);
}

/* 边框探照灯层 (在 2px 缝隙透出) */
.spotlight-border {
  pointer-events: none;
  position: absolute;
  inset: -1px;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    420px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
    rgba(255, 255, 255, 0.42),
    transparent 80%
  );
}

html[data-theme="light"] .spotlight-border {
  background: radial-gradient(
    420px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
    rgba(0, 0, 0, 0.24),
    transparent 80%
  );
}

.spotlight-card:hover .spotlight-border {
  opacity: 1;
}

/* 卡片内芯 (同心圆角) */
.spotlight-core {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: var(--r-inner);
  background: var(--bg-surface);
  overflow: hidden;
}

/* 表面微环境光 */
.spotlight-surface {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    460px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
    rgba(255, 255, 255, 0.05),
    transparent 70%
  );
}

.spotlight-card:hover .spotlight-surface {
  opacity: 1;
}

/* 顶部 1px 晶体镜面高光线 (Specular Rim Light) */
.specular-rim {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--specular-line);
}

/* ============================================================
   Tier 1: 苹果发布会式单品旗舰展台 (AgentIsland Showcase)
   ============================================================ */
.section-flagship {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.showcase-shell {
  box-shadow: var(--shadow-stage);
}

.flagship-card-body {
  position: relative;
  z-index: 2;
  padding: clamp(1.75rem, 4vw, 3.25rem);
}

.flagship-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.flagship-badge-active {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
}

/* 痛点 -> 解法 -> 规格 三段叙事 */
.flagship-narrative-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-subtle);
}

@media (min-width: 860px) {
  .flagship-narrative-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.narrative-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.675rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
  margin-bottom: 0.4rem;
}

.narrative-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.flagship-headline-box {
  margin-bottom: 2rem;
}

.flagship-title {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 0.45rem;
}

.flagship-slogan {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: var(--text-secondary);
  font-weight: 600;
}

/* 拟真 16 寸 MacBook Pro 刘海屏舞台 */
.macbook-stage {
  border-radius: 1.25rem;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  margin-bottom: 2rem;
}

.notch-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.notch-hardware-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.notch-sensor-core {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 160px;
  height: 22px;
  background: #000000;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
}

.camera-lens {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: #1c1c1e;
  border: 1px solid #3a3a3c;
}

/* 拟真硬件指示灯：与灵动岛三态联动（执行=翠绿 / 审批=警示暖橙 / 待机=熄灭）。
   色值硬编码 iOS 系统色，不跟主题走——它所在的黑底恒为 #000。 */
.green-indicator {
  width: 4px;
  height: 4px;
  border-radius: var(--r-pill);
  background: #34c759;
  box-shadow: 0 0 4px #34c759;
  transition: background-color var(--dur-base), box-shadow var(--dur-base);
}

.green-indicator.led-waiting {
  background: #ff9500;
  box-shadow: 0 0 4px #ff9500;
}

.green-indicator.led-idle {
  background: #48484a;
  box-shadow: none;
}

/* 动态灵动岛展开胶囊 */
.island-expanded-pill {
  width: min(580px, 100%);
  margin-top: 0.75rem;
  border-radius: 1.25rem;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
  padding: 1rem 1.25rem;
  transition: background-color var(--dur-base) var(--ease-apple),
    border-color var(--dur-base) var(--ease-apple),
    box-shadow var(--dur-base) var(--ease-apple);
}

.island-pill-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.island-agent-info {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.75rem;
}

.island-agent-info > div { min-width: 0; }
.island-symbol { flex-shrink: 0; }
.island-task-desc { overflow-wrap: anywhere; }

.island-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  color: var(--accent-on-dark);
  font-weight: 800;
  font-size: 1rem;
}

.island-active-agent {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
}

.island-task-desc {
  display: block;
  font-size: 0.725rem;
  color: #8e8e93;
}

.island-status-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}

.island-token-pill {
  font-family: var(--font-mono);
  font-size: 0.725rem;
  color: #aeaeb2;
}

.island-token-pill b {
  color: #ffffff;
}

.island-state-tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.tag-running {
  background: rgba(52, 199, 89, 0.2);
  color: #34c759;
}

.tag-waiting {
  background: rgba(255, 149, 0, 0.25);
  color: #ff9500;
}

.tag-idle {
  background: rgba(142, 142, 147, 0.2);
  color: #8e8e93;
}

/* 审批操作互动子栏 */
.island-action-subbar {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* 作者样式里的 display:flex 会盖过 UA 的 [hidden]{display:none}，
   导致「任务执行态」也一直露出审批子栏（实测 hidden=true 但高度 40.5px）。
   显式补回：隐藏态一律不显示。 */
.island-action-subbar[hidden] {
  display: none;
}

.subbar-warn {
  font-size: 0.725rem;
  color: #ff9f0a;
  font-weight: 600;
}

.subbar-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-subbar-secondary {
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
}

.btn-subbar-primary {
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  background: #d92c2a;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
}

/* 状态切换控制器 */
.stage-control-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

@media (min-width: 640px) {
  .stage-control-bar {
    flex-direction: row;
    justify-content: center;
  }
}

.stage-ctrl-label {
  font-size: 0.725rem;
  color: var(--text-muted);
}

.stage-toggle-group {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .stage-toggle-group {
  background: rgba(255, 255, 255, 0.6);
}

.btn-stage-tab {
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-pill);
  font-size: 0.725rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color var(--dur-fast), background-color var(--dur-fast);
}

.btn-stage-tab.is-active {
  background: var(--text-primary);
  color: var(--bg-canvas);
  font-weight: 700;
}

/* 遥测指标坞 */
.telemetry-dock {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-subtle);
}

@media (min-width: 768px) {
  .telemetry-dock {
    grid-template-columns: repeat(4, 1fr);
  }
}

.dock-metric {
  display: flex;
  flex-direction: column;
}

.dock-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
}

.dock-val {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
}

.val-emerald {
  color: var(--accent-ink);
}

/* 旗舰卡片操作区 */
.flagship-footer-row {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

@media (min-width: 860px) {
  .flagship-footer-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.flagship-tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.flagship-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
}

@media (max-width: 520px) {
  .macbook-stage { padding: 1rem; }

  .island-expanded-pill { padding: 0.9rem 0.75rem; }

  .island-pill-main {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .island-agent-info {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0.4rem 0.75rem;
  }

  .island-agent-info > div { display: contents; }
  .island-active-agent { align-self: center; }
  .island-task-desc { grid-column: 1 / -1; }

  .island-status-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .island-token-pill { white-space: nowrap; }

  .island-action-subbar {
    flex-direction: column;
    align-items: stretch;
  }

  .subbar-buttons {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .subbar-buttons > button { min-height: 36px; }

  .stage-control-bar,
  .stage-toggle-group { width: 100%; }

  .stage-toggle-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .btn-stage-tab {
    min-width: 0;
    padding-inline: 0.3rem;
    white-space: nowrap;
  }

  .flagship-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .flagship-actions > * {
    width: 100%;
    justify-content: space-between;
    white-space: nowrap;
  }
}

/* ============================================================
   Tier 2: 原生自研工具家族矩阵 (Apple-Tier Bento Suite)
   ============================================================ */
.section-suite {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.section-header-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 860px) {
  .section-header-row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.725rem;
  color: var(--accent-ink);
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
}

.mono-prefix {
  font-weight: 700;
}

.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: 0.35rem;
}

.section-subtitle {
  font-size: 0.925rem;
  color: var(--text-muted);
}

.filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  font-size: 0.775rem;
  font-weight: 500;
  color: var(--text-secondary);
  /* 标签文案整体不折行：英文比中文长，折行会让控件高度跳变 */
  white-space: nowrap;
  transition: color var(--dur-fast), background-color var(--dur-fast),
    border-color var(--dur-fast);
}

.filter-tab.is-empty {
  border-style: dashed;
  cursor: not-allowed;
}

.filter-tab:hover {
  color: var(--text-primary);
  border-color: var(--border-rim);
}

.filter-tab.is-active {
  background: var(--text-primary);
  color: var(--bg-canvas);
  border-color: var(--text-primary);
  font-weight: 700;
}

.filter-pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.1rem 0.35rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
}

.filter-tab.is-active .filter-pill {
  background: rgba(0, 0, 0, 0.15);
  color: var(--bg-canvas);
}

html[data-theme="light"] .filter-tab.is-active .filter-pill {
  background: rgba(255, 255, 255, 0.25);
  color: var(--bg-canvas);
}

/* 12 栅格 Bento 网格 */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}

.bento-col-6,
.bento-col-12 {
  grid-column: span 12;
}

@media (min-width: 860px) {
  .bento-col-6 {
    grid-column: span 6;
  }
  .bento-col-12 {
    grid-column: span 12;
  }
}

/* ---- 宽幅 Bento 卡 (2+1 闭环栅格) ---- */
.bento-wide-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 860px) {
  .bento-wide-body {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 340px);
    grid-template-rows: auto auto;
    grid-template-areas:
      "content widget"
      "footer  widget";
    gap: 1.25rem 2.5rem;
    align-items: center;
  }

  .bento-wide-content {
    grid-area: content;
  }

  .bento-card-wide .card-bottom-group {
    grid-area: footer;
    margin-top: 0;
  }

  .bento-card-wide .widget-ac-box {
    grid-area: widget;
    margin-bottom: 0;
    width: 100%;
    padding: 1.5rem 1.6rem;
  }
}

.bento-inner-body {
  position: relative;
  z-index: 2;
  padding: 1.35rem;
  height: 100%;
}

.flex-col-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

.card-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.card-index-mono {
  font-family: var(--font-mono);
  font-size: 0.725rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.bento-app-title {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.bento-app-slogan {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-ink);
  margin-bottom: 0.75rem;
}

.bento-app-story {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.tech-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}

.tech-tag {
  font-family: var(--font-mono);
  font-size: 0.675rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.card-bottom-group {
  margin-top: auto;
}

.card-actions-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* ============================================================
   家族微组件 (Living Micro-Widgets)
   ============================================================ */

/* 1. KnowFlick 学习进度微组件 */
.widget-learning-box {
  padding: 1.1rem;
  border-radius: 1rem;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  margin-bottom: 1.25rem;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}

.widget-learning-box:hover {
  border-color: var(--border-active);
}

.widget-learning-box:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.learning-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.learning-title {
  color: var(--text-secondary);
}

.learning-rate {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-ink);
}

.learning-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: 0.5rem;
}

html[data-theme="light"] .learning-track {
  background: rgba(0, 0, 0, 0.06);
}

.learning-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width var(--dur-base) var(--ease-apple), filter var(--dur-fast);
}

.learning-fill.is-pulsing {
  filter: brightness(1.35);
}

.learning-footer-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.675rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* 2. MacClean 存储分段微组件 */
.widget-storage-box {
  padding: 1.1rem;
  border-radius: 1rem;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  margin-bottom: 1.25rem;
}

.storage-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.storage-label {
  color: var(--text-secondary);
}

.storage-size {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-primary);
}

.storage-segment-bar {
  display: flex;
  gap: 2px;
  height: 6px;
  border-radius: var(--r-pill);
  overflow: visible;
  margin-bottom: 0.5rem;
}

.segment {
  height: 100%;
  border-radius: 2px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-apple), filter var(--dur-fast);
}

.segment.is-hovered {
  transform: scaleY(1.6);
  filter: brightness(1.25);
}

.seg-cache { background: #38bdf8; }
.seg-residue { background: #eab308; }
.seg-dup { background: #ef4444; }

.storage-legend {
  display: flex;
  justify-content: space-between;
  font-size: 0.675rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.storage-legend span {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: color var(--dur-fast);
}

.storage-legend span.is-hovered {
  color: var(--text-primary);
}

.storage-legend span.is-hovered i {
  transform: scale(1.35);
}

.storage-legend i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  margin-right: 4px;
  transition: transform var(--dur-fast);
}

.dot-cache { background: #38bdf8; }
.dot-residue { background: #eab308; }
.dot-dup { background: #ef4444; }

/* 4. haier-ac-mac 空调微组件 */
.widget-ac-box {
  padding: 1.1rem;
  border-radius: 1rem;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  margin-bottom: 1.25rem;
}

.ac-display-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.ac-temp-stat {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
}

.ac-deg {
  font-family: var(--font-mono);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.ac-unit {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ac-controls-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.btn-temp-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: background var(--dur-fast);
}

.btn-temp-step:hover {
  background: rgba(255, 255, 255, 0.12);
}


.btn-temp-step:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-temp-step:active {
  transform: scale(0.92);
}

.ac-substatus {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.675rem;
}

.ac-mode-badge {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: #38bdf8;
  font-weight: 600;
  transition: color var(--dur-fast), transform var(--dur-fast), filter var(--dur-fast);
}

.ac-mode-badge:hover {
  filter: brightness(1.2);
}

.ac-mode-badge:active {
  transform: scale(0.95);
}

.ac-mode-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ac-mode-badge.is-heat {
  color: #f97316;
}

.ac-fan-badge {
  color: var(--text-muted);
}

/* 浅色下徽章文字压深（原 #38bdf8/#eab308 在浅底仅 1.9–2.1:1，压深满足 WCAG AA >=4.5:1） */
html[data-theme="light"] .lang-ts { color: #0369a1; }
html[data-theme="light"] .lang-js { color: #854d0e; }
html[data-theme="light"] .ac-mode-badge { color: #0369a1; }
html[data-theme="light"] .ac-mode-badge.is-heat { color: #ad3c08; } /* 实测 5.17:1（#c2410c 仅 4.37） */

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ============================================================
   Tier 3: 做事方式与工程规格 (8+4 不对称布局)
   ============================================================ */
.section-about {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.about-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.about-col-8 {
  grid-column: span 12;
}

.about-col-4 {
  grid-column: span 12;
}

@media (min-width: 860px) {
  .about-col-8 {
    grid-column: span 8;
  }
  .about-col-4 {
    grid-column: span 4;
  }
}

.meta-tag-clean {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.about-card-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.philosophy-steps {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  /* 与右侧「技术栈」卡等高时，本卡内容较短会留出约 174px 空洞；
     让步骤区吃掉剩余高度并均匀分布，视觉上成为有意的宽松节奏 */
  flex: 1;
  justify-content: space-evenly;
}

.step-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.step-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent-ink);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  transition: box-shadow var(--dur-fast), background-color var(--dur-fast);
}

/* 指针手势：仅在 JS 可用时呈现（无 JS 时这些控件不工作，不该装作可点） */
html.js .ac-mode-badge,
html.js .widget-learning-box {
  cursor: pointer;
}

/* 悬停推进：整行右移 + 序号亮起。位移用 transform，不产生布局位移；
   仅指针设备生效，避免触屏留下「粘住」的高亮态。 */
@media (hover: hover) {
  .step-row {
    transition: transform var(--dur-fast) var(--ease-apple);
  }

  .step-row:hover {
    transform: translateX(4px);
  }

  .step-row:hover .step-num {
    background: var(--accent-soft-strong, var(--accent-soft));
    box-shadow: 0 0 0 1px var(--accent), 0 4px 14px -6px var(--accent);
  }
}

.step-content strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.step-content p {
  font-size: 0.825rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 左卡底部锚定条：镜像右卡「12+」统计块的收底结构，
   margin-top:auto 把卡内剩余高度吸收掉，不再留 175px 死区 */
.about-col-8 .bento-inner-body {
  display: flex;
  flex-direction: column;
}

.about-card-foot {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.about-card-foot .foot-dot {
  color: var(--accent-ink);
}

.about-card-desc {
  font-size: 0.825rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.tech-spec-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.tech-spec-list li {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.spec-name {
  font-family: var(--font-mono);
  font-size: 0.775rem;
  font-weight: 700;
  color: var(--text-primary);
}

.spec-role {
  font-size: 0.725rem;
  color: var(--text-muted);
}

.open-source-fact-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  margin-top: 1.5rem;
}

.fact-num {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent);
}

.fact-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
}


/* ============================================================
   Tier 3.5: 手记 (FIELD NOTES)
   ============================================================ */
.section-notes {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.notes-grid {
  display: grid;
  /* 固定两列：auto-fit 在篇数不是列数整数倍时会留空洞（4 篇时曾排成 3+1）；
     当前 6 篇 = 3 行 × 2 列，正好填满。窄屏（≤640px）回落单列。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

@media (max-width: 640px) {
  .notes-grid {
    grid-template-columns: 1fr;
  }
}

.note-card {
  height: 100%;
}


.note-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
}

.note-date {
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.note-title {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text-primary);
  text-wrap: balance;
}

.note-body {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.note-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  word-break: break-word;
}

.note-body strong {
  color: var(--text-primary);
  font-weight: 700;
}

.note-tag {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}


/* ---- 手记改为编辑式列表：去掉 6 张重复卡片外壳，靠分隔线与留白建立层级 ---- */
.notes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
}

.note-card {
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border-subtle);
  /* 卡片外壳已剥离，探照灯装饰层不再有裁切容器，必须隐藏否则 inset:-1px 会外溢 */
  overflow: visible;
}

.note-card .spotlight-border,
.note-card .spotlight-surface,
.note-card .specular-rim,
.repo-row-card .spotlight-border,
.repo-row-card .spotlight-surface,
.repo-row-card .specular-rim,
.footer-card .spotlight-border,
.footer-card .spotlight-surface,
.footer-card .specular-rim {
  display: none;
}


.note-card {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-areas:
    "meta title"
    "meta body"
    "meta tag";
  gap: 0.35rem 1rem;
  padding: 1.35rem 0.25rem;
  height: auto;
}

.note-meta {
  grid-area: meta;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.2rem;
  font-size: 0.7rem;
}

.note-title {
  grid-area: title;
  font-size: 1.05rem;
  line-height: 1.4;
}

.note-body {
  grid-area: body;
  max-width: 68ch;
}

.note-tag {
  grid-area: tag;
  margin-top: 0.15rem;
  padding-top: 0;
}

@media (min-width: 900px) {
  .note-card {
    grid-template-columns: 3.25rem minmax(0, 1fr) 9.5rem;
    grid-template-areas:
      "meta title tag"
      "meta body  tag";
    gap: 0.3rem 1.5rem;
    padding: 1.5rem 0.25rem;
  }

  .note-tag {
    justify-self: end;
    text-align: right;
    align-self: start;
    margin-top: 0.2rem;
  }
}

/* ============================================================
   Tier 4: GitHub 开源仓库 (High Density Row Cards)
   ============================================================ */
.section-repos {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.link-more-gh {
  display: inline-flex;
  padding: 0.3rem 0.1rem;
  margin: -0.3rem -0.1rem;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--accent-ink);
}

.link-more-gh:hover {
  text-decoration: underline;
}

.repos-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.repo-row-card {
  display: block;
  border-radius: var(--r-outer);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-rim);
}

.repo-row-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  gap: 1rem;
}

.repo-name-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.repo-name {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.badge-lang {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-pill);
  /* 内缘高光：暗环境下铭牌上沿一道极细反光，做出金属铭牌的厚度感。
     只加 box-shadow，不动底色与字色——对比度不受影响。 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .badge-lang {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.lang-ts {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.lang-js {
  background: rgba(234, 179, 8, 0.12);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.25);
}

.repo-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.repo-circle-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: color var(--dur-fast), background-color var(--dur-fast),
    border-color var(--dur-fast), transform var(--dur-fast);
}

.repo-row-card:hover .repo-circle-arrow {
  background: var(--text-primary);
  color: var(--bg-canvas);
  transform: translate(2px, -2px);
}

/* ============================================================
   页脚与联系
   ============================================================ */
.site-footer {
  padding-top: clamp(2rem, 4vw, 3.25rem);
  padding-bottom: calc(clamp(2rem, 4vw, 3.25rem) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-subtle);
  margin-top: 2.25rem;
}

.footer-card {
  padding: 2px;
  border-radius: var(--r-outer);
  background: var(--border-subtle);
}

.footer-card-inner {
  position: relative;
  z-index: 2;
  padding: clamp(1.4rem, 3.5vw, 2.25rem);
  border-radius: calc(var(--r-outer) - 2px);
  background: var(--bg-surface);
  border: 1px solid var(--border-rim);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 860px) {
  .footer-card-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-title {
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 0.45rem;
}

.footer-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  max-width: 32rem;
  line-height: 1.6;
}

.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.footer-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.footer-left > span:first-child,
.footer-top-link {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .footer-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .footer-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .footer-sep { display: none; }
}

.footer-top-link {
  padding: 0.45rem 0.2rem;
  margin: -0.45rem -0.2rem;
}

.footer-top-link:hover {
  color: var(--text-primary);
}

/* ============================================================
   原生语义弹窗 (<dialog>)
   ============================================================ */
.project-dialog {
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  max-width: min(580px, 92vw);
  max-height: calc(100dvh - 2.5rem);
  border-radius: var(--r-outer);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.project-dialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dialog-shell {
  position: relative;
  padding: 2.25rem;
  border-radius: var(--r-outer);
  background: var(--bg-surface);
  border: 1px solid var(--border-rim);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.85);
}

.dialog-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  transition: color var(--dur-fast), background var(--dur-fast);
}

.dialog-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.12);
}

.dialog-header {
  margin-bottom: 1.25rem;
}

.dialog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.dialog-title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.dialog-subtitle {
  font-size: 0.875rem;
  color: var(--accent-ink);
  font-weight: 600;
}

.dialog-body {
  margin-bottom: 2rem;
}

.dialog-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.dialog-private-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ============================================================
   响应式降级与减弱动效
   ============================================================ */
@media (hover: none) {
  .spotlight-border { display: none; }
  .spotlight-surface { display: none; }
  .spotlight-card { border: 1px solid var(--border-subtle); }
}

@media (prefers-reduced-transparency: reduce) {
  /* 需要与 html[data-theme=...] .island-nav 同级的特异性，否则被主题规则盖回半透明 */
  html[data-theme="dark"] .island-nav,
  html[data-theme="light"] .island-nav {
    background: var(--bg-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .project-dialog::backdrop {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---- 主题切换 View Transitions 动效配置 ---- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* 缩短时长只是「变快」，位移与平滑滚动仍是动。
     减弱动效要做的是去掉前庭刺激源本身（旧档：保留状态变更、去掉位移与缩放）。 */
  html {
    scroll-behavior: auto !important;
  }

  .step-row:hover {
    transform: none;
  }

  .status-indicator::after {
    display: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ============================================================
   系统件：无 JS 兜底 / 键盘焦点环 / 高对比度 / 强制色彩 / 打印
   （10-04/10-05 两次重设计中丢失，本轮补回）
   ============================================================ */

/* ---- 无 JS：点了没反应的控件不装作可点（页内锚点与全部静态内容仍可用） ---- */
html:not(.js) [data-theme-toggle],
html:not(.js) .filter-tab,
html:not(.js) [data-open-project],
html:not(.js) .stage-control-bar,
html:not(.js) .btn-temp-step {
  display: none;
}

/* 无 JS 时「可点的样子」也要一并撤掉：指针手势与可点语义（role/tabindex）都改由 JS 注入，
   否则键盘仍能聚焦到一个点了没反应的控件上。 */
html:not(.js) .ac-mode-badge,
html:not(.js) .widget-learning-box {
  cursor: default;
}

/* ---- 键盘焦点环：探照灯卡片 overflow:hidden 会裁掉外扩环，内缩画在自身框内 ---- */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.spotlight-card :where(a, button, [tabindex]):focus-visible {
  outline-offset: -4px;
}

/* ---- prefers-contrast: more：抬升次级/辅助文字与描边 ---- */
@media (prefers-contrast: more) {
  html[data-theme="dark"] {
    --text-secondary: #d4d4d8;
    --text-muted: #a1a1aa;
    --border-subtle: rgba(255, 255, 255, 0.24);
    --border-rim: rgba(255, 255, 255, 0.44);
  }

  html[data-theme="light"] {
    --text-secondary: #3f3f46;
    --text-muted: #52525b;
    --border-subtle: rgba(0, 0, 0, 0.24);
    --border-rim: rgba(0, 0, 0, 0.44);
  }
}

/* ---- forced-colors: active：形状靠描边，选中态用系统高亮色，状态彩点保留 ---- */
@media (forced-colors: active) {
  .spotlight-card,
  .repo-row-inner,
  .filter-tab,
  .filter-tab,
  .btn-ghost-pill,
  .nav-gh-pill,
  .island-nav,
  .developer-profile-shell,
  .stage-toggle-group,
  .hero-identity {
    border: 1px solid CanvasText;
  }

  .btn-button-in-button,
  .btn-button-in-button-sm {
    border: 1px solid ButtonText;
    forced-color-adjust: none;
  }

  .filter-tab.is-active,
  .btn-stage-tab.is-active {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }

  /* 计数药丸：半透明白底在系统色下被压成"浅底浅字"，实测仅 1.86:1。
     改用系统画布色 + 描边，与卡片底明确区分且达到 4.5:1。
     选中标签内的药丸改用透明底继承 HighlightText，避免与高亮底打架。 */
  .filter-pill {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    forced-color-adjust: none;
  }

  .filter-tab.is-active .filter-pill {
    background: transparent;
    color: inherit;
    border-color: currentColor;
  }

  /* 只保「状态球」的颜色；文字（.island-state-tag 等）交还系统色——
     保色文字在系统画布上实测仅 2.22:1（旧档原话：状态用系统色、保留状态球颜色） */
  .eyebrow-dot,
  .eyebrow-dot-green,
  .status-indicator,
  .green-indicator {
    forced-color-adjust: none;
  }
}

/* ---- 打印：纸墨互换（深色主题也印成白底黑字）、撤固定导航与装饰、
        不可点控件不上纸、开源仓库行印出真实 URL ---- */
@media print {
  @page {
    margin: 14mm;
  }

  *, *::before, *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: none !important;
    transition: none !important;
    animation: none !important;
  }

  html {
    scroll-behavior: auto;
  }

  /* 深色主题强制回浅色纸墨；浅色主题本就是这套值 */
  html[data-theme="dark"] {
    --bg-canvas: #ffffff;
    --bg-shell: #ffffff;
    --bg-surface: #ffffff;
    --bg-elevated: #f4f4f5;
    --bg-inset: #f4f4f5;
    --text-primary: #111111;
    --text-secondary: #3f3f46;
    --text-muted: #52525b;
    --border-subtle: rgba(0, 0, 0, 0.16);
    --border-rim: rgba(0, 0, 0, 0.32);
    --border-active: rgba(0, 0, 0, 0.45);
  }

  .island-nav-header,
  .skip-link,
  .ambient-glow,
  .film-grain-overlay,
  .spotlight-border,
  .spotlight-surface,
  .specular-rim,
  .stage-toggle-group,
  .island-action-subbar,
  .filter-tab,
  .theme-toggle {
    display: none !important;
  }

  section .spotlight-card,
  .repo-row-card,
  .site-footer {
    break-inside: avoid;
  }

  /* 仓库行整卡即 <a>，链接 URL 印在卡片末尾 */
  a.repo-row-card[href^="http"]::after,
  .site-footer a[href^="http"]::after {
    content: " (" attr(href) ")";
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7em;
    color: #52525b;
    word-break: break-all;
  }
}

/* 浅色 CTA 使用深翡翠；打印和强制色彩保留各自的系统配色。 */
@media screen and (forced-colors: none) {
  html[data-theme="light"] .btn-button-in-button,
  html[data-theme="light"] .btn-button-in-button-sm {
    background: var(--accent-ink);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(4, 120, 87, 0.28);
  }
}