/* wzedc.tech 首页 · 2026-10-19 重构
   设计体系：1440 设计单位等比缩放，四栏 356 栅格（x = 16 / 372 / 728 / 1084）
   所有尺寸走 --px，文字层 mix-blend-mode: difference 压在 3D 画布之上 */

/* ---------- 字体：思源黑 / 思源宋 / JetBrains Mono，按页面用字子集化 ---------- */
@font-face {
  font-family: 'Han';
  src: url('../fonts/han-bold.woff2?v=20261019e') format('woff2');
  font-weight: 700; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Song';
  src: url('../fonts/song-regular.woff2?v=20261019e') format('woff2');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Song';
  src: url('../fonts/song-light.woff2?v=20261019e') format('woff2');
  font-weight: 300; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Mono';
  src: url('../fonts/mono-medium.woff2?v=20261019e') format('woff2');
  font-weight: 500; font-style: normal; font-display: block;
}

:root {
  --design-width: 1440;
  --container: clamp(1440px, 100vw, 2560px);
  --px: calc(var(--container) / var(--design-width));

  --black: #0b0b0b;
  --green: #cee49f;
  --green-12: rgba(206, 228, 159, 0.12);
  --green-40: rgba(206, 228, 159, 0.4);
  --brand: #01946a;
  --bad: #ff6b6b;

  --cap-bold: 0.0215em;
  --cap-mono: 0.143em;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sweep: cubic-bezier(0.625, 0.05, 0, 1);
}

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

html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--black);
  color: var(--green);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

html, body { height: auto; overflow-x: hidden; }

body {
  font-family: 'Han', 'Noto Sans CJK SC', sans-serif;
  font-weight: 700;
}

p, h1, h2, ul, li { margin: 0; padding: 0; font-weight: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ---------- 画布 ---------- */
.p-y {
  --y-w: 560;
  --y-h: 540;
  position: fixed;
  left: calc((712.064 - var(--y-w) / 2) * var(--px));
  top: calc((312 - var(--y-h) / 2) * var(--px));
  width: calc(var(--y-w) * var(--px));
  height: calc(var(--y-h) * var(--px));
  display: block;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: difference;
}

/* ---------- 文字层 ---------- */
.page {
  /* 用原生滚动承载页面层（不做 transform 位移），避免混色层被合成器缓存成半暗 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--page-h, 3300) * var(--px));
  margin: 0;
  color: var(--green);
  visibility: hidden;
  z-index: 1;
}
.page.is-ready { visibility: visible; }

.page > *:not(.f-group),
.page .f-group > *:not(.f-cols),
.page .f-cols > .f-sub > * {
  position: absolute;
  left: calc(var(--x, 16) * var(--px));
  top: calc(var(--y, 0) * var(--px));
}

/* ---------- 字级 ---------- */
.p-big {
  font-family: 'Han', sans-serif;
  font-weight: 700;
  font-size: calc(76 * var(--px));
  line-height: 1;
  letter-spacing: calc(-1.6 * var(--px));
  --cap: 0.115em;
  white-space: nowrap;
}

.p-h3 {
  font-family: 'Han', sans-serif;
  font-weight: 700;
  font-size: calc(14 * var(--px));
  line-height: 1.05;
  letter-spacing: calc(-0.14 * var(--px));
  --cap: 0.02em;
  --ext: calc(2 * var(--px));
  white-space: nowrap;
}

.p-mono {
  font-family: 'Mono', 'Han', monospace;
  font-weight: 500;
  font-size: calc(11.5 * var(--px));
  line-height: 1.25;
  letter-spacing: 0.02em;
  --cap: 0;
  --ext: calc(2 * var(--px));
  white-space: nowrap;
}

.p-list { line-height: 1.6; }
.p-para { line-height: 1.55; }

.p-center { width: calc(var(--w) * var(--px)); text-align: center; }
.p-side {
  margin-top: 0;
  transform-origin: 0 0;
  transform: rotate(90deg) translateY(calc(-1 * var(--cap)));
}

/* 宋体 accent：只影响字形，不撑高行盒 */
.ph {
  font-family: 'Song', serif;
  font-weight: 400;
  line-height: 0;
}
.ph--light { font-weight: 300; }
.page .ph { letter-spacing: calc(-2 * var(--px)); }

/* ---------- 键值块 ---------- */
.p-key { width: calc(48 * var(--px)); }
.p-val { white-space: nowrap; }

/* ---------- 行内链接：下划线左扫入 ---------- */
.p-uline { position: relative; }
.p-uline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-2 * var(--px));
  height: calc(1.5 * var(--px));
  background: var(--green);
  transform: scaleX(0) rotate(0.001deg);
  transform-origin: right;
  transition: transform 0.735s var(--ease-sweep);
}
.p-uline:hover::after {
  transform: scaleX(1) rotate(0.001deg);
  transform-origin: left;
}

/* ---------- 四个入口（p-97） ---------- */
.p-97 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: 'Han', sans-serif;
  font-weight: 700;
  font-size: calc(44 * var(--px));
  line-height: 1;
  letter-spacing: calc(-0.9 * var(--px));
  white-space: nowrap;
  --cap: 0.12em;
}
.p-97 > li { display: block; }
.p-97-a {
  position: relative;
  display: flex;
  gap: calc(34 * var(--px));
  height: calc(62 * var(--px));
  padding: calc(9 * var(--px) - var(--cap)) calc(6 * var(--px)) 0;
  margin-left: calc(-6 * var(--px));
}
.p-97-a, .p-97-a::before {
  transition: color 0.15s cubic-bezier(0, 0.5, 0.5, 1), opacity 0.15s cubic-bezier(0, 0.5, 0.5, 1);
}
.p-97-a::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--green);
  opacity: 0;
  pointer-events: none;
}
.p-97-tx { position: relative; display: block; }
.p-97-meta {
  position: relative;
  font-family: 'Mono', 'Han', monospace;
  font-weight: 500;
  font-size: calc(10 * var(--px));
  letter-spacing: 0.02em;
  opacity: 0.55;
  margin-top: calc(24 * var(--px));   /* 固定偏移，不靠 baseline 对齐（各条目字形不同会飘） */
  transition: opacity 0.15s cubic-bezier(0, 0.5, 0.5, 1);
}
.p-97-a:hover { color: var(--black); }
.p-97-a:hover::before { opacity: 1; }
.p-97-a:hover .p-97-meta { opacity: 0.65; }

/* ---------- 页脚分组容器 ---------- */
/* 桌面端用 display:contents：容器不生成盒子，子元素的 --x/--y 仍然相对 .page 定位 */
.f-group,
.f-cols,
.f-sub { display: contents; }

/* ---------- 逐行遮罩 ---------- */
.page .line {
  display: block;              /* 必须是块级：行内元素的负 margin / overflow 都不生效 */
  position: relative;
  overflow: hidden;
  margin-bottom: calc(-1 * var(--ext, 0.12em));
}
.page .line.is-in { overflow: visible; }
.page .line-inner {
  display: block;
  padding-bottom: var(--ext, 0.12em);
  white-space: nowrap;
}

/* ---------- 固定角标层 ---------- */
.blend {
  position: fixed;
  mix-blend-mode: difference;
  color: var(--green);
  z-index: 5;
}
.corner {
  font-family: 'Mono', 'Han', monospace;
  font-weight: 500;
  font-size: calc(10 * var(--px));
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-top: calc(-1 * var(--cap-mono));
}
.corner--tl { top: calc(16 * var(--px)); left: calc(16 * var(--px)); }
.corner--tr { top: calc(16 * var(--px)); right: calc(16 * var(--px)); text-align: right; }
.corner--bl { top: calc(100% - 26 * var(--px)); left: calc(16 * var(--px)); }
.corner--br { top: calc(100% - 26 * var(--px)); right: calc(16 * var(--px)); text-align: right; }

/* 导航胶囊：两个服务的实时状态 */
.menu {
  top: calc(10 * var(--px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: calc(4 * var(--px));
  z-index: 6;
}
.pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--px));
  height: calc(21 * var(--px));
  padding: 0 calc(9 * var(--px));
  border-radius: calc(2.4 * var(--px));
  background-color: var(--green-12);
  font-family: 'Mono', 'Han', monospace;
  font-weight: 500;
  font-size: calc(10 * var(--px));
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.pill:hover { background-color: var(--green); color: var(--black); }
.pill-name { display: flex; align-items: baseline; gap: calc(3 * var(--px)); }
.pill-state {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  opacity: 0.75;
}
.pill:hover .pill-state { opacity: 0.72; }
.pill-dot {
  width: calc(4 * var(--px));
  height: calc(4 * var(--px));
  border-radius: 50%;
  background: var(--green-40);
  flex: 0 0 auto;
  transition: background-color 0.2s ease-in-out;
}
.pill.is-on .pill-dot { background: var(--green); }
.pill.is-off .pill-dot { background: var(--bad); }
.pill.is-off { color: #ffd7d7; }
.pill.is-off:hover { color: var(--black); }

/* 出站/入站遮罩 */
.veil {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--black);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.42s var(--ease-out);
}
.veil.is-in { opacity: 1; pointer-events: all; }

/* ---------- 移动端：绝对定位改流式 ---------- */
@media (max-width: 600px) {
  /* 移动端不用 1440 设计单位，改用 375 设计稿的 --m 缩放 */
  :root { --m: calc(min(100vw, 600px) / 375); }

  .p-y {
    left: 0;
    top: 0;
    width: 100vw;
    height: calc(100vw * 0.66);
  }
  .page {
    display: grid;
    grid-template-columns: calc(22 * var(--m)) minmax(0, 1fr);
    align-content: start;
    height: auto;
    padding: calc(53vw) calc(16 * var(--m)) calc(88 * var(--m));
  }
  .page .f-group > .p-mono,
  .page .f-cols > .f-sub > p {
    position: relative;
    left: auto;
    top: auto;
  }
  .page > *:not(.f-group) {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    justify-self: stretch;
    min-width: 0;
    margin-top: calc(var(--mg, 0) * var(--m) - var(--cap, 0px));
  }
  .page > .p-key { grid-column: 1 / 2; }
  .page > .p-val { grid-column: 2 / -1; width: auto; }
  .page > [data-hide-mobile] { display: none; }

  .p-big {
    font-size: calc(30 * var(--m));
    line-height: 1.14;
    letter-spacing: calc(-0.6 * var(--m));
    white-space: normal;
  }
  .p-big br { display: none; }
  .p-97 {
    font-size: calc(26 * var(--m));
    letter-spacing: calc(-0.5 * var(--m));
    white-space: normal;
  }
  .p-h3 { font-size: calc(13 * var(--m)); line-height: 1.5; white-space: normal; }
  .p-mono { font-size: calc(11 * var(--m)); line-height: 1.7; white-space: normal; }
  .p-list { line-height: 1.75; }
  .p-key { width: calc(22 * var(--m)); }
  .page .line-inner { white-space: normal; }
  .page .ph { letter-spacing: 0; }

  .p-97 { gap: calc(2 * var(--m)); }
  .p-97-a {
    height: auto;
    padding: calc(12 * var(--m)) calc(8 * var(--m));
    margin-left: calc(-8 * var(--m));
    border-radius: calc(2 * var(--m));
    flex-direction: column;
    align-items: flex-start;
    gap: calc(3 * var(--m));
  }
  .p-97-tx { line-height: 1.1; }
  .p-97-meta { font-size: calc(10 * var(--m)); transform: none; }

  /* 页脚：标签一行 + 内容两栏排（复刻参考站） */
  .page > .f-group { display: block; margin-top: 0; grid-column: 1 / -1; }
  .f-group > .p-mono:first-child { margin-top: calc(50 * var(--m)); }
  .f-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: calc(16 * var(--m));
    row-gap: calc(22 * var(--m));
    margin-top: calc(12 * var(--m));
  }
  .f-sub { display: block; }
  .f-sub > p { margin-top: 0; }
  .f-sub > p + p { margin-top: calc(6 * var(--m)); }
  .f-sub--wide { grid-column: 1 / -1; }

  .corner { font-size: calc(10 * var(--m)); }
  .corner--tl { top: calc(14 * var(--m)); left: calc(14 * var(--m)); }
  .corner--tr { top: calc(14 * var(--m)); right: calc(14 * var(--m)); }
  .corner--bl { top: calc(100% - 74 * var(--m)); left: calc(14 * var(--m)); }
  .corner--br { top: calc(100% - 74 * var(--m)); right: calc(14 * var(--m)); }

  .menu {
    top: auto;
    bottom: calc(14 * var(--m));
    left: calc(12 * var(--m));
    right: calc(12 * var(--m));
    transform: none;
    gap: calc(8 * var(--m));
  }
  .pill {
    flex: 1 1 0;
    height: calc(38 * var(--m));
    font-size: calc(12 * var(--m));
    padding: 0 calc(10 * var(--m));
    border-radius: calc(3 * var(--m));
    gap: calc(6 * var(--m));
  }
  .pill-dot { width: calc(5 * var(--m)); height: calc(5 * var(--m)); }
  .veil { transition-duration: 0.3s; }
}

@media (prefers-reduced-motion: reduce) {
  .veil { transition: none; }
  .p-uline::after { transition: none; }
}