/* =========================================================
   HNYZ · 风格层（Default / Minimal / Hacker）
   ---------------------------------------------------------
   1. 顶栏「风格方块」与风格面板（竖向卡片轮播）
   2. 黑客风的涂鸦背景、扫描线、滚动进度
   3. 极简风 / 黑客风两套皮肤变量
   这个文件最后加载，用来覆盖前面三套样式。
   ========================================================= */

/* ---------------------------------------------------------
   1. 顶栏风格方块
   --------------------------------------------------------- */
.style-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease,
    transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.style-toggle:hover,
.style-toggle[aria-expanded="true"] {
  color: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-soft);
}

.style-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.style-toggle__grid {
  display: grid;
  grid-template-columns: repeat(2, 5px);
  grid-template-rows: repeat(2, 5px);
  gap: 3px;
}

.style-toggle__grid i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.72;
  transition: background 0.25s ease, opacity 0.25s ease;
}

.style-toggle:hover .style-toggle__grid i,
.style-toggle[aria-expanded="true"] .style-toggle__grid i {
  opacity: 1;
}

html[data-style="minimal"] .style-toggle {
  border-radius: 2px;
}

html[data-style="minimal"] .style-toggle__grid i {
  border-radius: 0;
  background: var(--text);
}

html[data-style="hacker"] .style-toggle {
  border-radius: 2px;
  border-color: rgba(57, 255, 136, 0.42);
  background: #061009;
  color: #39ff88;
  box-shadow: 0 0 0 1px rgba(57, 255, 136, 0.08), 0 0 18px rgba(57, 255, 136, 0.12);
}

html[data-style="hacker"] .style-toggle:hover,
html[data-style="hacker"] .style-toggle[aria-expanded="true"] {
  border-color: #39ff88;
  box-shadow: 0 0 0 1px #39ff88, 0 0 26px rgba(57, 255, 136, 0.32);
}

html[data-style="hacker"] .style-toggle__grid i {
  border-radius: 0;
  background: #39ff88;
}

/* ---------------------------------------------------------
   2. 黑客风的背景层
   ---------------------------------------------------------
   背景只剩两样：js/matrix.js 画的代码雨，和这里的一层气泡。
   气泡用 CSS 动画跑 transform，不占画布、不跟数字雨抢帧。
   --------------------------------------------------------- */
.skin-bubbles {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}

html[data-style="hacker"] .skin-bubbles {
  display: block;
  opacity: 1;
}

.skin-bubbles i {
  position: absolute;
  left: var(--x);
  bottom: -14vh;
  width: var(--r);
  height: var(--r);
  border: 1px solid rgba(118, 255, 172, 0.5);
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 26%,
    rgba(198, 255, 222, 0.1) 0 14%,
    rgba(57, 255, 136, 0.05) 40%,
    transparent 66%
  );
  box-shadow:
    inset 0 0 18px rgba(57, 255, 136, 0.12),
    inset -2px -4px 10px rgba(57, 255, 136, 0.06),
    0 0 18px rgba(57, 255, 136, 0.06);
  opacity: 0;
  animation: skinBubbleRise var(--dur) linear infinite;
  animation-delay: var(--delay);
  will-change: transform, opacity;
}

/* 左上角的一点高光：有它才像一颗玻璃泡，而不是一块灰斑 */
.skin-bubbles i::after {
  content: "";
  position: absolute;
  left: 20%;
  top: 16%;
  width: 30%;
  height: 22%;
  border-radius: 50%;
  background: rgba(224, 255, 238, 0.4);
  filter: blur(1px);
}

html[data-style="hacker"][data-theme="light"] .skin-bubbles i {
  border-color: rgba(10, 143, 74, 0.32);
  background: radial-gradient(
    circle at 34% 26%,
    rgba(10, 143, 74, 0.1) 0 14%,
    rgba(10, 143, 74, 0.04) 40%,
    transparent 66%
  );
  box-shadow: inset 0 0 18px rgba(10, 143, 74, 0.08);
}

html[data-style="hacker"][data-theme="light"] .skin-bubbles i::after {
  background: rgba(255, 255, 255, 0.75);
}

@keyframes skinBubbleRise {
  0% {
    transform: translate3d(0, 0, 0) scale(0.86);
    opacity: 0;
  }
  10% {
    opacity: var(--a);
  }
  50% {
    transform: translate3d(calc(var(--dx) * 0.55), -62vh, 0) scale(1);
  }
  88% {
    opacity: calc(var(--a) * 0.55);
  }
  100% {
    transform: translate3d(var(--dx), -122vh, 0) scale(1.1);
    opacity: 0;
  }
}

.skin-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 96;
  height: 2px;
  background: linear-gradient(90deg, #39ff88, #00e5ff 70%, transparent);
  transform: scaleX(var(--skin-progress, 0));
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

html[data-style="hacker"] .skin-progress {
  opacity: 0.9;
}

/* ---------------------------------------------------------
   3. 极简风
   --------------------------------------------------------- */
html[data-style="minimal"] {
  --bg: #fbfbf8;
  --bg-deep: #f3f3ef;
  --panel: #ffffff;
  --panel-2: #f7f7f3;
  --panel-3: #f0f0eb;
  --border: #e3e3dd;
  --border-strong: #c8c8bf;
  --text: #161614;
  --text-soft: #3c3c38;
  --muted: #67675f;
  /* 原来是 #7d7d74，对 #fbfbf8 只有 4.01:1 —— 只够大字号。
     这个变量全站 20 处用在 12~14px 的标签、面包屑、元信息上，
     小字必须过 4.5。提到 #72726a（4.68 / 对白卡 4.85），
     仍然比 --muted 淡一档，层级没丢。 */
  --dim: #72726a;
  --blue: #111110;
  --blue-bright: #000000;
  --green: #4d4d47;
  --green-bright: #2c2c28;
  --orange: #6d5a3e;
  --red: #a33a30;
  --purple: #5b5b55;
  --blue-soft: rgba(17, 17, 16, 0.05);
  --green-soft: rgba(17, 17, 16, 0.05);
  --radius-sm: 2px;
  --radius: 2px;
  --radius-lg: 3px;
  --glow-blue: none;
  --glow-green: none;
  --shadow-card: none;
  color-scheme: light;
}

html[data-style="minimal"][data-theme="dark"] {
  --bg: #0d0d0c;
  --bg-deep: #080807;
  --panel: #141413;
  --panel-2: #191918;
  --panel-3: #1e1e1c;
  --border: #2b2b28;
  --border-strong: #44443f;
  --text: #f3f3ee;
  --text-soft: #d4d4cd;
  --muted: #a3a39a;
  --dim: #85857c;
  --blue: #f3f3ee;
  --blue-bright: #ffffff;
  --green: #c9c9c1;
  --green-bright: #e8e8e1;
  --orange: #d8c7a6;
  --red: #ff8f82;
  --purple: #c9c9c1;
  --blue-soft: rgba(255, 255, 255, 0.06);
  --green-soft: rgba(255, 255, 255, 0.06);
  color-scheme: dark;
}

html[data-style="minimal"] body {
  background: var(--bg);
  background-image: none;
}

html[data-style="minimal"] .bg-orbs,
html[data-style="minimal"] .bg-orbs__dots,
html[data-style="minimal"] .bg-icons,
html[data-style="minimal"] .hnyz-glow,
html[data-style="minimal"] .hnyz-pet,
html[data-style="minimal"] .hnyz-avatar,
html[data-style="minimal"] .pet-summon,
html[data-style="minimal"] .pet-tomb-veil,
html[data-style="minimal"] .click-fx,
html[data-style="minimal"] .skin-bubbles,
html[data-style="minimal"] .hero-tags,
html[data-style="minimal"] .eyebrow-dot,
html[data-style="minimal"] .hero-rotator,
html[data-style="minimal"] .gallery-entry__index {
  display: none !important;
}

html[data-style="minimal"] .site-header,
html[data-style="minimal"] .site-header.is-scrolled {
  background: var(--bg);
  border-bottom-color: var(--border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

html[data-style="minimal"] .site-footer {
  background: var(--bg);
  border-top-color: var(--border);
}

html[data-style="minimal"] .section--soft {
  background: var(--bg-deep);
}

html[data-style="minimal"] .brand-mark,
html[data-style="minimal"] .nav-toggle,
html[data-style="minimal"] .theme-toggle,
html[data-style="minimal"] .sound-toggle,
html[data-style="minimal"] .style-toggle {
  box-shadow: none;
  background: transparent;
}

html[data-style="minimal"] .nav-cta {
  border-color: var(--text);
  background: transparent;
  color: var(--text);
}

html[data-style="minimal"] .nav-cta:hover {
  background: var(--text);
  color: var(--bg);
  box-shadow: none;
}

html[data-style="minimal"] .accent-text {
  color: var(--text);
  text-shadow: none;
}

html[data-style="minimal"] .hero h1,
html[data-style="minimal"] .section-head h2,
html[data-style="minimal"] .archive-head h1 {
  font-weight: 620;
  letter-spacing: -0.03em;
}

html[data-style="minimal"] .quick-card,
html[data-style="minimal"] .do-card,
html[data-style="minimal"] .project-card,
html[data-style="minimal"] .agenda-card,
html[data-style="minimal"] .wall-card,
html[data-style="minimal"] .join-panel,
html[data-style="minimal"] .join-contact,
html[data-style="minimal"] .faq-item,
html[data-style="minimal"] .member-profile,
html[data-style="minimal"] .archive-group,
html[data-style="minimal"] .gallery-card,
html[data-style="minimal"] .project-group {
  background: var(--panel);
  background-image: none;
  border-color: var(--border);
  box-shadow: none;
}

html[data-style="minimal"] .project-card:hover,
html[data-style="minimal"] .quick-card:hover,
html[data-style="minimal"] .do-card:hover {
  transform: none;
  border-color: var(--text);
  box-shadow: none;
}

html[data-style="minimal"] .button--primary {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  box-shadow: none;
}

html[data-style="minimal"] .button--primary:hover {
  background: var(--text-soft);
  border-color: var(--text-soft);
  transform: none;
  box-shadow: none;
}

html[data-style="minimal"] .button--secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-soft);
}

html[data-style="minimal"] .button--secondary:hover {
  border-color: var(--text);
  color: var(--text);
  box-shadow: none;
  transform: none;
}

html[data-style="minimal"] .quick-path {
  background: var(--panel-2);
}

html[data-style="minimal"] .cover-placeholder {
  background: var(--panel-2);
}

html[data-style="minimal"] .cover-placeholder::before {
  opacity: 0.35;
}

html[data-style="minimal"] .site-footer {
  padding-bottom: 24px;
}

/* 极简风：小恐龙也走黑白 */
html[data-style="minimal"] .dino-run {
  --dino-ink: #171715;
  --dino-accent: #6f6f66;
  --dino-dim: #b9b9b0;
  --dino-ground: rgba(23, 23, 21, 0.28);
  background: #f7f7f3;
  background-image: none;
  border-top-color: #e3e3dd;
}

html[data-style="minimal"][data-theme="dark"] .dino-run {
  --dino-ink: #f0f0e9;
  --dino-accent: #b9b9b0;
  --dino-dim: #4c4c46;
  --dino-ground: rgba(240, 240, 233, 0.24);
  background: #10100f;
  border-top-color: #2b2b28;
}

/* ---------------------------------------------------------
   4. 黑客风
   --------------------------------------------------------- */
html[data-style="hacker"] {
  --bg: #030705;
  --bg-deep: #010302;
  --panel: #071009;
  --panel-2: #0a140d;
  --panel-3: #0d1a11;
  --border: rgba(92, 255, 150, 0.18);
  --border-strong: rgba(92, 255, 150, 0.42);
  --text: #d9ffe5;
  --text-soft: #a9e9be;
  --muted: #7bbd92;
  --dim: #5d9b73;
  --blue: #39ff88;
  --blue-bright: #8bffb4;
  --green: #39ff88;
  --green-bright: #7dffab;
  --orange: #ffd166;
  --red: #ff6b6b;
  --purple: #c084fc;
  --blue-soft: rgba(57, 255, 136, 0.1);
  --green-soft: rgba(57, 255, 136, 0.12);
  --radius-sm: 2px;
  --radius: 2px;
  --radius-lg: 4px;
  --glow-blue: 0 0 0 1px rgba(57, 255, 136, 0.16), 0 0 26px rgba(57, 255, 136, 0.16);
  --glow-green: 0 0 26px rgba(57, 255, 136, 0.2);
  --shadow-card: 0 0 0 1px rgba(57, 255, 136, 0.05), 0 24px 56px rgba(0, 0, 0, 0.66);
  color-scheme: dark;
}

html[data-style="hacker"][data-theme="light"] {
  --bg: #eef7f0;
  --bg-deep: #e4f1e8;
  --panel: #f9fffb;
  --panel-2: #f0faf3;
  --panel-3: #e7f6ec;
  --border: rgba(9, 110, 52, 0.2);
  --border-strong: rgba(9, 110, 52, 0.45);
  --text: #082414;
  --text-soft: #14472a;
  --muted: #3d6d50;
  --dim: #5b846a;
  --blue: #0a8f4a;
  --blue-bright: #067a3d;
  --green: #0a8f4a;
  --green-bright: #067a3d;
  --blue-soft: rgba(10, 143, 74, 0.1);
  --green-soft: rgba(10, 143, 74, 0.12);
  --glow-blue: 0 0 0 1px rgba(10, 143, 74, 0.16), 0 0 24px rgba(10, 143, 74, 0.1);
  --glow-green: 0 0 22px rgba(10, 143, 74, 0.14);
  --shadow-card: 0 0 0 1px rgba(10, 143, 74, 0.05), 0 18px 42px rgba(10, 60, 30, 0.1);
  color-scheme: light;
}

html[data-style="hacker"] body {
  /* 纯黑底，只留一点顶部冷光。没有网格、没有贴图 */
  background-color: #010403;
  background-image: radial-gradient(
    ellipse 120% 70% at 50% -18%,
    rgba(24, 92, 52, 0.38),
    transparent 68%
  );
  background-size: auto;
  background-attachment: fixed;
}

html[data-style="hacker"][data-theme="light"] body {
  background-color: #f3faf5;
  background-image: radial-gradient(
    ellipse 120% 70% at 50% -18%,
    rgba(10, 143, 74, 0.14),
    transparent 68%
  );
}

/* 背景里只留代码雨和气泡：光斑和图标阵列都不出现在黑客风 */
html[data-style="hacker"] .bg-orbs,
html[data-style="hacker"] .bg-icons {
  display: none !important;
}

/* 右下角校徽的浅蓝底板在黑客风里改成暗绿终端 */
html[data-style="hacker"] .hnyz-pet__board {
  border-color: rgba(57, 255, 136, 0.45);
  background: radial-gradient(circle at 50% 38%, #07160e 0%, #04100a 58%, #020a06 100%);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.6),
    inset 0 0 24px rgba(57, 255, 136, 0.14);
  opacity: 0.94;
}

html[data-style="hacker"] .hnyz-pet__board::before {
  background-image:
    linear-gradient(rgba(57, 255, 136, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 255, 136, 0.09) 1px, transparent 1px);
}

html[data-style="hacker"] .hnyz-pet__board::after {
  border-color: rgba(57, 255, 136, 0.24);
}

html[data-style="hacker"] .hnyz-pet__speech {
  background: rgba(3, 14, 8, 0.92);
  border-color: rgba(57, 255, 136, 0.35);
  color: #baffd0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

html[data-style="hacker"] .site-header,
html[data-style="hacker"] .site-header.is-scrolled {
  background: rgba(3, 8, 5, 0.88);
  border-bottom-color: rgba(57, 255, 136, 0.18);
  box-shadow: 0 1px 0 rgba(57, 255, 136, 0.04), 0 18px 40px rgba(0, 0, 0, 0.35);
}

html[data-style="hacker"][data-theme="light"] .site-header,
html[data-style="hacker"][data-theme="light"] .site-header.is-scrolled {
  background: rgba(238, 247, 240, 0.9);
}

html[data-style="hacker"] .brand-mark {
  border-radius: 2px;
  border-color: rgba(57, 255, 136, 0.4);
  background: #061009;
  color: #39ff88;
  box-shadow: inset 0 0 18px rgba(57, 255, 136, 0.1);
}

html[data-style="hacker"] .brand-copy strong,
html[data-style="hacker"] .section-head h2::before,
html[data-style="hacker"] .eyebrow,
html[data-style="hacker"] .card-label,
html[data-style="hacker"] .quick-path {
  font-family: var(--mono);
}

html[data-style="hacker"] .brand-copy strong {
  letter-spacing: 0.22em;
  color: #8bffb4;
}

html[data-style="hacker"] .section-head h2::before {
  content: "// ";
  color: rgba(57, 255, 136, 0.7);
  font-weight: 500;
}

html[data-style="hacker"] .accent-text {
  color: var(--blue);
  text-shadow: 0 0 34px rgba(57, 255, 136, 0.3);
}

html[data-style="hacker"] .site-footer {
  background: rgba(2, 6, 4, 0.86);
  border-top-color: rgba(57, 255, 136, 0.18);
}

html[data-style="hacker"] .section--soft {
  background: rgba(4, 10, 6, 0.72);
  border-top-color: rgba(57, 255, 136, 0.1);
  border-bottom-color: rgba(57, 255, 136, 0.1);
}

html[data-style="hacker"] .quick-card,
html[data-style="hacker"] .do-card,
html[data-style="hacker"] .project-card,
html[data-style="hacker"] .agenda-card,
html[data-style="hacker"] .wall-card,
html[data-style="hacker"] .join-panel,
html[data-style="hacker"] .join-contact,
html[data-style="hacker"] .faq-item,
html[data-style="hacker"] .member-profile,
html[data-style="hacker"] .archive-group,
html[data-style="hacker"] .gallery-card,
html[data-style="hacker"] .project-group {
  background: linear-gradient(180deg, rgba(9, 17, 11, 0.96), rgba(4, 9, 6, 0.94));
  background-image: linear-gradient(180deg, rgba(9, 17, 11, 0.96), rgba(4, 9, 6, 0.94));
  border-color: rgba(57, 255, 136, 0.16);
  box-shadow: 0 0 0 1px rgba(57, 255, 136, 0.03), 0 22px 50px rgba(0, 0, 0, 0.55);
}

html[data-style="hacker"][data-theme="light"] .quick-card,
html[data-style="hacker"][data-theme="light"] .do-card,
html[data-style="hacker"][data-theme="light"] .project-card,
html[data-style="hacker"][data-theme="light"] .agenda-card,
html[data-style="hacker"][data-theme="light"] .wall-card,
html[data-style="hacker"][data-theme="light"] .join-panel,
html[data-style="hacker"][data-theme="light"] .join-contact,
html[data-style="hacker"][data-theme="light"] .faq-item,
html[data-style="hacker"][data-theme="light"] .member-profile,
html[data-style="hacker"][data-theme="light"] .archive-group,
html[data-style="hacker"][data-theme="light"] .gallery-card,
html[data-style="hacker"][data-theme="light"] .project-group {
  background: rgba(249, 255, 251, 0.88);
  background-image: none;
  border-color: rgba(10, 143, 74, 0.18);
  box-shadow: 0 0 0 1px rgba(10, 143, 74, 0.03), 0 18px 40px rgba(10, 60, 30, 0.08);
}

html[data-style="hacker"] .project-card:hover,
html[data-style="hacker"] .quick-card:hover,
html[data-style="hacker"] .do-card:hover {
  border-color: rgba(57, 255, 136, 0.55);
  box-shadow: 0 0 0 1px rgba(57, 255, 136, 0.18), 0 0 34px rgba(57, 255, 136, 0.12),
    0 26px 56px rgba(0, 0, 0, 0.6);
}

html[data-style="hacker"] .quick-path {
  background: rgba(57, 255, 136, 0.04);
  border-bottom-color: rgba(57, 255, 136, 0.14);
  color: #7dffab;
}

html[data-style="hacker"] .cover-placeholder {
  background:
    radial-gradient(circle at 78% 24%, rgba(57, 255, 136, 0.14), transparent 44%),
    linear-gradient(135deg, #061009 0%, #081a0e 55%, #030805 100%);
}

html[data-style="hacker"] .cover-placeholder::before {
  background-image:
    linear-gradient(rgba(57, 255, 136, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 255, 136, 0.12) 1px, transparent 1px);
}

html[data-style="hacker"] .button--primary {
  border-color: #39ff88;
  background: #39ff88;
  color: #02130a;
  box-shadow: 0 0 0 1px rgba(57, 255, 136, 0.4), 0 10px 26px rgba(57, 255, 136, 0.22);
}

html[data-style="hacker"] .button--primary:hover {
  background: #8bffb4;
  border-color: #8bffb4;
  color: #02130a;
  box-shadow: 0 0 0 1px rgba(57, 255, 136, 0.6), 0 12px 34px rgba(57, 255, 136, 0.32);
}

html[data-style="hacker"] .button--secondary {
  border-color: rgba(57, 255, 136, 0.36);
  background: rgba(57, 255, 136, 0.04);
  color: #a9e9be;
}

html[data-style="hacker"] .button--secondary:hover {
  border-color: #39ff88;
  color: #8bffb4;
  box-shadow: 0 0 24px rgba(57, 255, 136, 0.16);
}

html[data-style="hacker"] .nav-cta {
  border-color: rgba(57, 255, 136, 0.4);
  background: rgba(57, 255, 136, 0.06);
  color: #8bffb4;
}

html[data-style="hacker"] .nav-cta:hover {
  background: rgba(57, 255, 136, 0.12);
  border-color: #39ff88;
  color: #baffd0;
}

html[data-style="hacker"] .theme-toggle,
html[data-style="hacker"] .sound-toggle {
  border-radius: 2px;
  border-color: rgba(57, 255, 136, 0.28);
  background: #061009;
  color: #7dffab;
}

html[data-style="hacker"] .theme-toggle:hover,
html[data-style="hacker"] .sound-toggle:hover {
  border-color: #39ff88;
  color: #d9ffe5;
  box-shadow: 0 0 0 4px rgba(57, 255, 136, 0.08);
}

html[data-style="hacker"] .nav-toggle {
  border-radius: 2px;
  border-color: rgba(57, 255, 136, 0.28);
  background: #061009;
}

html[data-style="hacker"] .nav-toggle span {
  background: #7dffab;
}

html[data-style="hacker"] .quick-line,
html[data-style="hacker"] .join-qr {
  background: rgba(6, 16, 9, 0.8);
}

/* 亮色终端里，这两行不能还是黑的，否则字和底一样深 */
html[data-style="hacker"][data-theme="light"] .quick-line,
html[data-style="hacker"][data-theme="light"] .join-qr {
  background: rgba(255, 255, 255, 0.66);
}

html[data-style="hacker"] .dino-run {
  --dino-ink: #baffd0;
  --dino-accent: #39ff88;
  --dino-dim: #2f6b46;
  --dino-ground: rgba(57, 255, 136, 0.35);
  background-color: #020604;
  background-image:
    radial-gradient(ellipse 70% 120% at 50% 110%, rgba(57, 255, 136, 0.12), transparent 70%),
    linear-gradient(rgba(57, 255, 136, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 255, 136, 0.05) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  border-top-color: rgba(57, 255, 136, 0.22);
}

html[data-style="hacker"][data-theme="light"] .dino-run {
  --dino-ink: #0a3a1d;
  --dino-accent: #0a8f4a;
  --dino-dim: #79a98b;
  --dino-ground: rgba(10, 143, 74, 0.28);
  background-color: #f2fbf4;
  background-image:
    radial-gradient(ellipse 70% 120% at 50% 110%, rgba(10, 143, 74, 0.1), transparent 70%),
    linear-gradient(rgba(10, 143, 74, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 143, 74, 0.06) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  border-top-color: rgba(10, 143, 74, 0.2);
}

/* ---------------------------------------------------------
   5. 风格面板（dialog + 竖向卡片）
   --------------------------------------------------------- */
html.is-style-deck-open,
html.is-style-deck-open body {
  overflow: hidden;
}

/* 小恐龙进到视口时，右下角校徽先让位，避免挡住跑道 */
body.is-dino-visible .hnyz-pet {
  opacity: 0 !important;
  pointer-events: none;
}

.hnyz-pet {
  transition: opacity 0.3s ease;
}

.style-deck {
  width: 100%;
  inset: 0;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: rgba(3, 7, 5, 0.9);
  color: #f2f7f4;
  overflow: hidden;
  transition: background-color 0.08s ease;
}

.style-deck::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 52% at 50% 50%, rgba(0, 0, 0, 0.62), transparent 72%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.5));
}

/* 面板自己的背景已经够黑（0.9），backdrop 再压一层反而坏事：
   关闭时 dialog 的 opacity 淡出到 0，露出来的却是这块 backdrop，
   于是「面板淡出 → 整屏一黑 → 幕布升起」中间夹一帧死黑。
   把 backdrop 交还给 dialog 自己，关闭就是一次干净的淡出。 */
.style-deck::backdrop {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.style-deck__shell {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(430px, 100%);
  height: 100%;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom));
}

.style-deck__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 22px 10px;
}

.style-deck__kicker {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
}

.style-deck__title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.76);
}

.style-deck__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.style-deck__close:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.style-deck__viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 92%, transparent 100%);
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.style-deck__viewport::-webkit-scrollbar {
  display: none;
}

/* 末尾补一段空白，最后一张卡也能滚到正中间 */
.style-deck__viewport::after {
  content: "";
  display: block;
  height: max(0px, calc((100% - 555px) / 2));
}

.style-card {
  --card-accent: rgba(96, 165, 250, 0.55);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: min(360px, calc(100% - 52px));
  height: min(540px, calc(100% - 30px));
  margin: 15px auto;
  padding: 58px 26px 30px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255, 255, 255, 0.055), transparent 70%),
    linear-gradient(180deg, rgba(15, 20, 18, 0.95), rgba(6, 9, 7, 0.97));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 34px 80px rgba(0, 0, 0, 0.55);
  opacity: 0.38;
  transform: scale(0.94);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s ease, box-shadow 0.4s ease;
}

.style-card[data-style-option="default"] { --card-accent: rgba(96, 165, 250, 0.55); }
.style-card[data-style-option="minimal"] { --card-accent: rgba(255, 255, 255, 0.4); }
.style-card[data-style-option="hacker"] { --card-accent: rgba(57, 255, 136, 0.55); }

.style-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--card-accent);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.style-card.is-active::after {
  opacity: 0.55;
}

.style-card.is-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 0 1px var(--card-accent), 0 34px 90px rgba(0, 0, 0, 0.62);
}

.style-card__top {
  position: absolute;
  top: 12px;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.36);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
}

.style-card__current {
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.style-card[data-current="true"] .style-card__current {
  opacity: 1;
}

.style-card__glyph {
  display: grid;
  place-items: center;
  width: clamp(82px, 22vw, 106px);
  height: clamp(82px, 22vw, 106px);
  margin-bottom: 4px;
  border-radius: 26%;
  font-family: var(--mono);
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.style-card.is-active .style-card__glyph {
  transform: translateY(-2px);
}

.style-card__glyph--default {
  background: linear-gradient(145deg, #3b82f6, #0ea5e9);
  color: #ffffff;
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.35);
}

.style-card__glyph--minimal {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: #fbfbf8;
  color: #141414;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.style-card__glyph--minimal span {
  display: block;
  width: 34%;
  height: 2px;
  background: #141414;
}

.style-card__glyph--hacker {
  border: 1px solid rgba(57, 255, 136, 0.55);
  background: #020805;
  color: #39ff88;
  box-shadow: 0 0 0 1px rgba(57, 255, 136, 0.12), 0 0 40px rgba(57, 255, 136, 0.18),
    inset 0 0 28px rgba(57, 255, 136, 0.08);
}

.style-card__kicker {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
}

.style-card__title {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #f4f8f5;
}

.style-card__desc {
  max-width: 30ch;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.78rem;
  line-height: 1.75;
}

.style-card__swatches {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.style-card__swatches i {
  display: block;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: var(--c);
}

.style-card__apply {
  margin-top: auto;
  padding: 12px 38px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, #38bdf8);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.style-card[data-style-option="minimal"] .style-card__apply {
  background: #fbfbf8;
  color: #141414;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
}

.style-card[data-style-option="hacker"] .style-card__apply {
  background: linear-gradient(90deg, #39ff88, #00e5b0);
  color: #031108;
  box-shadow: 0 12px 30px rgba(57, 255, 136, 0.24);
}

/* 棍木这张卡没有简介，内容整体居中，空出来的地方正好是它要说的 */
.style-card[data-style-option="bare"] {
  --card-accent: rgba(255, 255, 255, 0.36);
  justify-content: center;
  gap: 12px;
}

.style-card[data-style-option="bare"] .style-card__apply {
  margin-top: 24px;
  background: #f7f7f3;
  color: #1a1a18;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
}

.style-card__apply:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.34);
}

.style-card__apply:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.style-card__apply:disabled {
  cursor: default;
  opacity: 0.44;
  filter: none;
  transform: none;
  box-shadow: none;
}

.style-deck__dots {
  position: absolute;
  top: 50%;
  right: max(12px, calc(50% - 214px));
  display: flex;
  flex-direction: column;
  gap: 9px;
  transform: translateY(-50%);
  z-index: 3;
}

.style-deck__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.style-deck__dot[aria-current="true"] {
  background: #ffffff;
  transform: scale(1.5);
}

.style-deck__hint {
  padding: 10px 22px 0;
  color: rgba(255, 255, 255, 0.28);
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-align: center;
}

.style-deck.is-opening .style-card.is-active {
  animation: skinCardIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.style-deck[open] {
  animation: skinDeckIn 0.26s ease both;
}

@keyframes skinDeckIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.style-deck.is-closing {
  animation: skinDeckOut 0.22s ease forwards;
}

/* 转场期间关掉点击涟漪，别让它浮在幕布上 */
html.is-style-switching .click-fx {
  opacity: 0;
  transition: opacity 0.12s ease;
}

/* 换肤专用退场：不是原地淡出，而是整块向上抽走。
   幕布在同一刻从下面顶上来，速度和曲线完全一样，
   面板底边与幕布顶边始终贴着——中间不会漏出旧页面那一下。
   底色同时收到不透明：0.9 的黑幕在上移时会透出下面 10% 的旧页面，
   看起来像一块脏玻璃，收成实心才对得起「幕布」这个比喻。 */
html[data-style] .style-deck.is-handoff {
  background: #050807;
  animation: skinDeckHandoff var(--wipe-in) var(--wipe-ease-in) var(--wipe-handoff) forwards;
}

.style-deck.is-handoff .style-deck__shell {
  opacity: 0;
  transition: opacity 0.14s ease;
}

@keyframes skinDeckHandoff {
  to { transform: translateY(-100%); }
}

@keyframes skinCardIn {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes skinDeckOut {
  to { opacity: 0; transform: scale(0.985); }
}

/* ---------------------------------------------------------
   6. 风格切换的竖向擦除
   ---------------------------------------------------------
   两层幕布：主体 + 晚 90ms 的薄纱，扫入时边缘错开一条带，
   比单块纯色平面有厚度。时长写在自定义属性里，JS 读同一份，
   免得再出现「CSS 还在走、下面已经换完」的半拍。
   --------------------------------------------------------- */
/* 换肤这一段的时间轴只在这里定义一次：
   面板上移、幕布上升、揭幕都从这几个值取，
   三者的速度本来就是同一条曲线，接缝才对得上。 */
:root {
  --wipe-in: 0.44s;
  --wipe-out: 0.44s;
  --wipe-handoff: 0.1s;
  --wipe-ease-in: cubic-bezier(0.33, 1, 0.68, 1);
  --wipe-ease-out: cubic-bezier(0.45, 0, 0.2, 1);
}

.style-wipe {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #050807;
  color: #baffd0;
  transform: translateY(100%);
  transition: transform var(--wipe-in) var(--wipe-ease-in) var(--wipe-delay, 0s);
  pointer-events: none;
}

/* 作者样式里的 display:grid 会盖掉 [hidden] 的 display:none，
   补一条，隐藏时真的不渲染（棍木的空页里也不该留它的文字） */
.style-wipe[hidden] {
  display: none;
}

.style-wipe.is-in {
  transform: translateY(0);
}

.style-wipe.is-out {
  transform: translateY(-101%);
  transition-duration: var(--wipe-out);
  transition-delay: 0s;
  transition-timing-function: var(--wipe-ease-out);
}

/* 幕布前缘的一道光。它不单独动，只是贴着上沿，
   把那条生硬的直线化成一小段渐隐——扫过时像布的前缘被灯打亮。 */
.style-wipe__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 8%),
    linear-gradient(180deg, color-mix(in srgb, currentColor 7%, transparent), transparent 6%);
}

/* 幕布不能和落地页同色：极简风底色就是 #fbfbf8，
   幕布也是它的话，揭开时整块白在白色上滑走，等于没有转场。
   压低半档色阶，留一条看得见的边。 */
.style-wipe[data-next="minimal"] {
  background: #f2f1eb;
  color: #141414;
}

.style-wipe[data-next="default"] {
  background: #eaf2ff;
  color: #1d4ed8;
}

/* 棍木是纯白空页，用黑幕切过去会在收尾时闪一下 */
.style-wipe[data-next="bare"] {
  background: #f6f5f0;
  color: #1a1a1a;
}

.style-wipe__label {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: clamp(2rem, 8vw, 4.4rem);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.32s ease 0.1s,
    transform 0.62s var(--wipe-ease-in) 0.1s,
    letter-spacing 0.72s var(--wipe-ease-in) 0.1s;
}

.style-wipe.is-in .style-wipe__label {
  opacity: 1;
  transform: translateY(0);
  letter-spacing: 0.18em;
}

/* 揭幕时字不淡出，跟着幕布一起滑出去。
   之前让它 0.22s 就散掉，幕布还是白的、页面也是白的，
   字一没就分不清是「还在揭幕」还是「已经切完了」。 */
.style-wipe.is-out .style-wipe__label {
  opacity: 1;
  transform: none;
  transition: none;
}

.style-wipe__bar {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 16%;
  width: min(240px, 56vw);
  height: 2px;
  transform: translateX(-50%);
  background: currentColor;
  opacity: 0.35;
  overflow: hidden;
}

.style-wipe__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.52s var(--wipe-ease-in) 0.14s;
}

.style-wipe.is-in .style-wipe__bar::after {
  transform: scaleX(1);
}

.style-wipe.is-out .style-wipe__bar::after {
  transform: scaleX(1);
  transition: none;
}
}

/* ---------------------------------------------------------
   7. 小屏 / 减弱动效
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .style-toggle {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .style-deck__shell {
    width: 100%;
  }

  .style-deck__dots {
    right: 10px;
  }

  .style-card {
    padding: 20px 26px 24px;
  }
}

@media (max-width: 380px) {
  .style-deck__dots {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skin-bubbles i,
  .style-card,
  .style-card__glyph,
  .style-wipe,
  .style-wipe__veil,
  .style-wipe__label,
  .style-wipe__bar::after {
    animation: none !important;
    transition: none !important;
  }

  /* 动效全关时幕布要么整块不透明、要么整块透明，不留半截 */
  .style-wipe__label { opacity: 1; transform: none; letter-spacing: 0.18em; }

  /* 关掉动效后气泡直接不画，免得定在半空 */
  .skin-bubbles {
    display: none !important;
  }

  .style-wipe {
    transform: translateY(0);
    opacity: 0;
    visibility: hidden;
  }

  .style-wipe.is-in {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .style-wipe.is-out {
    transform: translateY(0);
    opacity: 0;
    visibility: hidden;
  }
}

/* =========================================================
   黑客风 · 终端化增强
   ---------------------------------------------------------
   1. 背景数字雨（js/matrix.js 画在 #matrix-rain 画布上）
   2. 标题改成 `>` 提示符，按钮加方括号，链接带光标
   3. 卡片左上角切一个小角标，像终端里的分屏
   ========================================================= */

.matrix-rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.matrix-rain.is-on {
  opacity: 1;
}

html[data-style="hacker"] main,
html[data-style="hacker"] .site-footer {
  position: relative;
  z-index: 1;
}

/* 标题前的提示符：从 // 换成 > */
html[data-style="hacker"] .section-head h2::before {
  content: "> ";
  color: rgba(57, 255, 136, 0.75);
}

html[data-style="hacker"] .eyebrow::before {
  content: "$ ";
  color: rgba(57, 255, 136, 0.62);
}

/* 主按钮做成一条命令，末尾跟一个会闪的光标 */
html[data-style="hacker"] .button--primary::before {
  content: "> ";
  opacity: 0.72;
}

html[data-style="hacker"] .button--primary::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.12em;
  animation: hackerCaret 1.15s steps(1, end) infinite;
}

@keyframes hackerCaret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* 卡片左上角切一个角，像终端分屏的边框 */
html[data-style="hacker"] .quick-card,
html[data-style="hacker"] .do-card,
html[data-style="hacker"] .faq-item,
html[data-style="hacker"] .join-panel {
  position: relative;
}

html[data-style="hacker"] .quick-card::before,
html[data-style="hacker"] .do-card::before,
html[data-style="hacker"] .faq-item::before,
html[data-style="hacker"] .join-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-top: 1px solid rgba(57, 255, 136, 0.55);
  border-left: 1px solid rgba(57, 255, 136, 0.55);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .matrix-rain {
    display: none;
  }

  html[data-style="hacker"] .button--primary::after {
    animation: none;
  }
}

/* =========================================================
   棍木 · 空白
   ---------------------------------------------------------
   一个什么都不做的风格：不留内容、不留颜色、不留任何链接。
   只保留两样东西——右上角的风格按钮（skins.js 会把它从
   顶栏挪到 body 下，否则父级 display:none 会连它一起藏掉），
   以及正中间一句灰字。
   ========================================================= */

html[data-style="bare"] {
  height: 100%;
  overflow: hidden;
  /* 深色主题的底色在这里一律作废 */
  background: #ffffff !important;
}

html[data-style="bare"] body {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #ffffff !important;
  filter: none !important;
}

/* 除按钮、风格面板、换肤擦除层、灰字之外，其余节点一律不渲染 */
html[data-style="bare"] body > *:not(.style-toggle):not(.style-deck):not(.style-wipe):not(.bare-note) {
  display: none !important;
}

html[data-style="bare"] .style-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 70;
  width: 38px;
  height: 38px;
  border: 1px solid #ecece7;
  border-radius: 3px;
  background: #ffffff;
  color: #c6c6c1;
  box-shadow: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

html[data-style="bare"] .style-toggle:hover,
html[data-style="bare"] .style-toggle[aria-expanded="true"] {
  color: #8f8f89;
  border-color: #d8d8d2;
  box-shadow: none;
}

html[data-style="bare"] .style-toggle:focus-visible {
  outline: 1px solid #cfcfc9;
  outline-offset: 3px;
}

html[data-style="bare"] .style-toggle__grid i {
  border-radius: 0;
}

.bare-note {
  display: none;
}

html[data-style="bare"] .bare-note {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 24px;
  color: #adada8;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.18em;
  text-align: center;
  text-shadow: none;
  user-select: text;
}

/* 风格面板里那张卡：一块白，一条灰线 */
.style-card__glyph--bare {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}

.style-card__glyph--bare span {
  display: block;
  width: 26%;
  height: 1px;
  background: #c9c9c3;
}

/* =========================================================
   黑客风 · 质感层
   ---------------------------------------------------------
   背景清空之后，剩下的高级感只能靠“准”：
   0.5px 的高光、等比的字距、只在需要时亮起来的一点点绿。
   这一段落写在最后，专门覆盖前面黑客风的分支。
   ========================================================= */

html[data-style="hacker"] {
  /* 所有的圆角都只留 2px，像终端窗口 */
  --radius-sm: 1px;
  --radius: 2px;
  --radius-lg: 2px;
}

html[data-style="hacker"] ::selection {
  background: rgba(57, 255, 136, 0.26);
  color: #f2fff7;
}

html[data-style="hacker"] .site-header,
html[data-style="hacker"] .site-header.is-scrolled {
  background: rgba(2, 6, 4, 0.72);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: rgba(57, 255, 136, 0.14);
  box-shadow: none;
}

html[data-style="hacker"][data-theme="light"] .site-header,
html[data-style="hacker"][data-theme="light"] .site-header.is-scrolled {
  background: rgba(243, 250, 245, 0.78);
  border-bottom-color: rgba(10, 143, 74, 0.16);
}

/* 顶栏里的字，全部往等宽和字距那边靠 */
html[data-style="hacker"] .brand-copy span,
html[data-style="hacker"] .nav-links a,
html[data-style="hacker"] .nav-cta {
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

html[data-style="hacker"] .nav-links a {
  position: relative;
}

/* 导航悬停：一条从左边长出来的下划线，而不是换颜色 */
html[data-style="hacker"] .nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: #39ff88;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-style="hacker"] .nav-links a:hover::after,
html[data-style="hacker"] .nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* 卡片：一条 1px 的顶部高光，比加一圈发光更干净 */
html[data-style="hacker"] .quick-card,
html[data-style="hacker"] .do-card,
html[data-style="hacker"] .project-card,
html[data-style="hacker"] .agenda-card,
html[data-style="hacker"] .wall-card,
html[data-style="hacker"] .join-panel,
html[data-style="hacker"] .join-contact,
html[data-style="hacker"] .faq-item,
html[data-style="hacker"] .member-profile,
html[data-style="hacker"] .archive-group,
html[data-style="hacker"] .gallery-card,
html[data-style="hacker"] .project-group {
  border-color: rgba(57, 255, 136, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(57, 255, 136, 0.07),
    0 18px 44px rgba(0, 0, 0, 0.5);
}

html[data-style="hacker"] .quick-card:hover,
html[data-style="hacker"] .do-card:hover,
html[data-style="hacker"] .project-card:hover {
  border-color: rgba(57, 255, 136, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(57, 255, 136, 0.14),
    0 0 0 1px rgba(57, 255, 136, 0.1),
    0 24px 54px rgba(0, 0, 0, 0.55);
}

/* 小标签：`$ 名称` 的终端注释口吻，字距拉开。
   eyebrow 里可能是一条命令，所以不强制大写 */
html[data-style="hacker"] .eyebrow,
html[data-style="hacker"] .card-label,
html[data-style="hacker"] .section-label {
  letter-spacing: 0.22em;
  font-size: 0.66rem;
}

html[data-style="hacker"] .eyebrow {
  text-transform: none;
  font-weight: 400;
}

html[data-style="hacker"] .card-label,
html[data-style="hacker"] .section-label {
  text-transform: uppercase;
}

html[data-style="hacker"] .section-head h2::before,
html[data-style="hacker"] .eyebrow::before {
  font-weight: 400;
}

/* 正文里的链接：一条虚线，像 man page 里的交叉引用 */
html[data-style="hacker"] main a:not(.button):not(.nav-cta):not(.project-card):not(.gallery-card):not(.wall-card) {
  text-decoration: underline;
  text-decoration-color: rgba(57, 255, 136, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

html[data-style="hacker"] main a:not(.button):not(.nav-cta):hover {
  text-decoration-color: #39ff88;
}

/* 分隔线：短划线，不是整条实线 */
html[data-style="hacker"] .quick-line,
html[data-style="hacker"] hr {
  border-color: rgba(57, 255, 136, 0.16);
  border-style: dashed;
}

/* 风格面板在黑客风里也换成终端窗口：直角、细边、一点点内发光 */
html[data-style="hacker"] .style-deck {
  background: rgba(2, 6, 4, 0.94);
}

html[data-style="hacker"] .style-card {
  border-radius: 2px;
  background:
    radial-gradient(ellipse 90% 46% at 50% 0%, rgba(57, 255, 136, 0.06), transparent 70%),
    linear-gradient(180deg, rgba(8, 15, 10, 0.97), rgba(3, 7, 5, 0.98));
}

html[data-style="hacker"] .style-card.is-active {
  box-shadow: 0 0 0 1px rgba(57, 255, 136, 0.55), 0 30px 70px rgba(0, 0, 0, 0.6);
}

html[data-style="hacker"] .style-card__glyph--hacker {
  border-radius: 2px;
}

/* 小屏上列更密，雨会压到正文上：整体压低一档，字还是看得清 */
@media (max-width: 760px) {
  html[data-style="hacker"] .matrix-rain.is-on {
    opacity: 0.62;
  }
}

/* 日间的黑客风：荧光绿放在白底上会糊掉，按钮全部换成深绿 */
html[data-style="hacker"][data-theme="light"] .button--primary {
  border-color: #0a8f4a;
  background: #0a8f4a;
  color: #f4fff8;
  box-shadow: 0 10px 24px rgba(10, 143, 74, 0.22);
}

html[data-style="hacker"][data-theme="light"] .button--primary:hover {
  border-color: #08753d;
  background: #08753d;
  color: #ffffff;
}

html[data-style="hacker"][data-theme="light"] .button--secondary {
  border-color: rgba(10, 143, 74, 0.42);
  background: rgba(255, 255, 255, 0.72);
  color: #0a6b3a;
}

html[data-style="hacker"][data-theme="light"] .button--secondary:hover {
  border-color: #0a8f4a;
  background: rgba(10, 143, 74, 0.08);
  color: #064f2b;
}

html[data-style="hacker"][data-theme="light"] .nav-cta {
  border-color: rgba(10, 143, 74, 0.45);
  background: rgba(10, 143, 74, 0.08);
  color: #0a6b3a;
}

html[data-style="hacker"][data-theme="light"] .nav-cta:hover {
  border-color: #0a8f4a;
  background: rgba(10, 143, 74, 0.16);
  color: #054427;
}

html[data-style="hacker"][data-theme="light"] .nav-toggle {
  border-color: rgba(10, 143, 74, 0.35);
  background: #ffffff;
}

html[data-style="hacker"][data-theme="light"] .nav-toggle span {
  background: #0a6b3a;
}

html[data-style="hacker"][data-theme="light"] .theme-toggle,
html[data-style="hacker"][data-theme="light"] .sound-toggle {
  border-color: rgba(10, 143, 74, 0.3);
  background: #ffffff;
  color: #0a6b3a;
}

/* =========================================================
   黑客风 · 日间修正
   ---------------------------------------------------------
   深色皮肤里那些「近黑底 + 荧光字」的段落，在日间不能原样保留：
   深字压在深底上，正文直接消失。这里把浅色段落和页脚翻回纸面，
   只留下细绿边、等宽字和代码雨，作为黑客风的识别度。
   ========================================================= */

html[data-style="hacker"][data-theme="light"] .section--soft {
  background: rgba(230, 245, 235, 0.78);
  border-top-color: rgba(10, 143, 74, 0.12);
  border-bottom-color: rgba(10, 143, 74, 0.12);
}

html[data-style="hacker"][data-theme="light"] .site-footer {
  background: rgba(238, 248, 241, 0.92);
  border-top-color: rgba(10, 143, 74, 0.18);
}

html[data-style="hacker"][data-theme="light"] .site-footer .brand-copy strong,
html[data-style="hacker"][data-theme="light"] .footer-brand .brand-copy strong {
  color: #0a6b3a;
}

html[data-style="hacker"][data-theme="light"] .quick-path {
  background: rgba(10, 143, 74, 0.06);
  border-bottom-color: rgba(10, 143, 74, 0.16);
  color: #0a6b3a;
}

/* 卡片在纸面上用浅阴影，不要沿用深色皮肤的 0 0 44px 黑 */
html[data-style="hacker"][data-theme="light"] .quick-card,
html[data-style="hacker"][data-theme="light"] .do-card,
html[data-style="hacker"][data-theme="light"] .project-card,
html[data-style="hacker"][data-theme="light"] .agenda-card,
html[data-style="hacker"][data-theme="light"] .wall-card,
html[data-style="hacker"][data-theme="light"] .join-panel,
html[data-style="hacker"][data-theme="light"] .join-contact,
html[data-style="hacker"][data-theme="light"] .faq-item,
html[data-style="hacker"][data-theme="light"] .member-profile,
html[data-style="hacker"][data-theme="light"] .archive-group,
html[data-style="hacker"][data-theme="light"] .gallery-card,
html[data-style="hacker"][data-theme="light"] .project-group {
  border-color: rgba(10, 143, 74, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 34px rgba(10, 60, 30, 0.08);
}

html[data-style="hacker"][data-theme="light"] .quick-card:hover,
html[data-style="hacker"][data-theme="light"] .do-card:hover,
html[data-style="hacker"][data-theme="light"] .project-card:hover {
  border-color: rgba(10, 143, 74, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(10, 143, 74, 0.1),
    0 20px 44px rgba(10, 60, 30, 0.12);
}

/* 代码雨在白底上会抢正文，压一档，但仍然看得见 */
html[data-style="hacker"][data-theme="light"] .matrix-rain.is-on {
  opacity: 0.82;
}

/* 顶栏品牌字：日间不能再用荧光绿，否则白底上几乎是白的 */
html[data-style="hacker"][data-theme="light"] .site-header .brand-copy strong {
  color: #0a6b3a;
}

/* =========================================================
   黑客风 · 拒绝日间的终端弹窗
   ---------------------------------------------------------
   在黑客风里点主题按钮，弹出的那个窗口。
   外观对齐真实终端：标题栏三色圆点 + 路径标题，
   近黑底、等宽字、荧光绿命令行，报错行偏红。
   ========================================================= */

.hacker-term-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(1, 4, 2, 0.68);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.hacker-term-overlay.is-open {
  opacity: 1;
}

.hacker-term {
  width: min(720px, 94vw);
  max-height: min(80vh, 660px);
  display: flex;
  flex-direction: column;
  background: #040705;
  border: 1px solid rgba(57, 255, 136, 0.42);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.65),
    0 44px 120px rgba(0, 0, 0, 0.72),
    0 0 48px rgba(57, 255, 136, 0.1);
  overflow: hidden;
  font-family: var(--mono, "JetBrains Mono", Consolas, monospace);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hacker-term-overlay.is-open .hacker-term {
  transform: none;
}

.hacker-term__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: rgba(57, 255, 136, 0.06);
  border-bottom: 1px solid rgba(57, 255, 136, 0.16);
  flex: none;
}

.hacker-term__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
}

.hacker-term__title {
  margin-left: 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(178, 255, 206, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hacker-term__body {
  flex: 1;
  min-height: 0;
  padding: 16px 18px 20px;
  font-size: 12.5px;
  line-height: 1.9;
  color: #b9ffd6;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  cursor: default;
}

.hacker-term__line {
  display: block;
}

.hacker-term__line--cmd {
  color: #39ff88;
}

.hacker-term__line--err {
  color: #ff7d7d;
}

.hacker-term__line--dim {
  color: rgba(185, 255, 214, 0.5);
}

.hacker-term__line--final {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #39ff88;
}

.hacker-term__cursor {
  display: inline-block;
  width: 0.58em;
  height: 1.05em;
  margin-left: 2px;
  background: #39ff88;
  vertical-align: -0.18em;
  animation: hackerTermBlink 1s steps(1, end) infinite;
}

@keyframes hackerTermBlink {
  50% {
    opacity: 0;
  }
}

@media (max-width: 560px) {
  .hacker-term__body {
    font-size: 11px;
    line-height: 1.8;
    padding: 14px 14px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hacker-term-overlay,
  .hacker-term,
  .hacker-term__cursor {
    transition: none;
    animation: none;
  }
}