/* ==========================================================================
   时雨镇 RCT — Rainy Craft Town
   设计系统 / Design System  ·  v2  Neo Frutiger Aero
   主题：阴天小雨 · 滨海小镇 · 路灯下的樱花
   主色：水青 Aero Aqua (#23a9c9)   点色：路灯暖黄 (#f5b34a) / 樱花粉 (#ef86ad)
   底色：青白天光玻璃（浅色主题，不再是墨夜）
   ========================================================================== */

/* ------------------------------------------------------------------ 字体
   刻意不引用任何远程字体：全站零外部请求，断网/被墙环境下也不会阻塞渲染。
   字体族按「现代系统 UI 无衬线」优先，兼顾 macOS 与 Windows 的圆润观感。 */

/* ------------------------------------------------------------------ 变量 */
:root {
  /* 天光（页面底色用的天空 → 近地绿 → 暖白） */
  --sky-1: #d6edfb;
  --sky-2: #e9f7fd;
  --sky-3: #f2fbf3;
  --sky-4: #fdf7ee;

  /* 水青主色阶 */
  --aqua-900: #06303f;
  --aqua-800: #0b4a61;
  --aqua-700: #126883;
  --aqua-600: #1a8aaa;
  --aqua-500: #23a9c9;
  --aqua-400: #4cc4de;
  --aqua-300: #8adcef;
  --aqua-200: #c3eef9;
  --aqua-100: #e4f7fd;

  /* 樱花粉 */
  --sakura-700: #c2517c;
  --sakura-600: #d9628f;
  --sakura-500: #ef86ad;
  --sakura-400: #f9aec9;
  --sakura-200: #fcdfea;

  /* 草木绿 */
  --leaf-700: #2f7c4d;
  --leaf-600: #3f9c62;
  --leaf-500: #5cba7c;
  --leaf-400: #94d9a9;

  /* 路灯暖黄 */
  --sun-700: #b7761a;
  --sun-600: #dd9527;
  --sun-500: #f5b34a;
  --sun-400: #ffcf7a;
  --sun-200: #fff0cd;

  /* 文字（深水青，浅底上保证对比度） */
  --t-hi: #0b3b4c;
  --t: #17566b;
  --t-dim: #48798c;
  --t-faint: #7aa1b1;

  /* 玻璃 */
  --glass-1: rgba(255, 255, 255, 0.88);
  --glass-2: rgba(255, 255, 255, 0.62);
  --glass-3: rgba(255, 255, 255, 0.42);
  --glass-brd: rgba(255, 255, 255, 0.94);
  --glass-blur: blur(18px) saturate(170%);

  /* 描边（浅底上的水青线） */
  --line: rgba(18, 104, 131, 0.13);
  --line-2: rgba(18, 104, 131, 0.22);
  --line-3: rgba(18, 104, 131, 0.36);

  /* 主色别名（组件里大量使用） */
  --jade: var(--aqua-600);
  --jade-lt: var(--aqua-500);
  --jade-dk: var(--aqua-800);
  --jade-a08: rgba(35, 169, 201, 0.08);
  --jade-a14: rgba(35, 169, 201, 0.14);
  --jade-a24: rgba(35, 169, 201, 0.26);
  --jade-a40: rgba(35, 169, 201, 0.42);
  --lantern: var(--sun-500);
  --lantern-lt: var(--sun-400);
  --lantern-a12: rgba(245, 179, 74, 0.14);
  --lantern-a28: rgba(245, 179, 74, 0.32);

  /* 字体族 */
  --f-display: "Segoe UI Variable Display", "Segoe UI", "SF Pro Display",
    -apple-system, "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
    "Microsoft YaHei", system-ui, sans-serif;
  --f-sans: "Segoe UI Variable Text", "Segoe UI", -apple-system,
    "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Microsoft YaHei",
    system-ui, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* 尺寸 */
  --wrap: 1240px;
  --wrap-narrow: 900px;
  --gutter: clamp(20px, 4.4vw, 54px);
  --header-h: 78px;
  --sec-y: clamp(72px, 9vw, 132px);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 26px;

  /* 投影：带水青色的柔和投影，不用纯黑 */
  --sh-1: 0 6px 16px -10px rgba(9, 74, 100, 0.5);
  --sh-2: 0 20px 44px -26px rgba(9, 74, 100, 0.55);
  --sh-3: 0 40px 80px -44px rgba(9, 74, 100, 0.6);
  --sh-in: 0 1px 0 rgba(255, 255, 255, 0.92) inset;
  --sh-gloss: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -3px 8px rgba(18, 104, 131, 0.1) inset;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  color: var(--t);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.85;
  font-weight: 400;
  letter-spacing: 0.008em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background-color: var(--sky-2);
  background-image:
    radial-gradient(60% 42% at 14% 4%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(52% 40% at 88% 2%, rgba(180, 236, 255, 0.8), rgba(180, 236, 255, 0) 72%),
    radial-gradient(70% 46% at 78% 96%, rgba(186, 240, 200, 0.5), rgba(186, 240, 200, 0) 70%),
    radial-gradient(60% 40% at 6% 88%, rgba(255, 236, 206, 0.5), rgba(255, 236, 206, 0) 72%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 30%, var(--sky-3) 68%, var(--sky-4) 100%);
  background-attachment: fixed;
}

body.is-locked {
  overflow: hidden;
}

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

img {
  height: auto;
}

a {
  color: var(--aqua-700);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

a:hover {
  color: var(--aqua-500);
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
  color: var(--t-hi);
}

p {
  margin: 0;
}

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

::selection {
  background: var(--aqua-300);
  color: var(--aqua-900);
}

:focus-visible {
  outline: 3px solid var(--aqua-500);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--aqua-600);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--sh-2);
}

.skip:focus {
  left: 14px;
  top: 14px;
}

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

/* ------------------------------------------------------------------ 布局 */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: var(--wrap-narrow);
}

.section {
  padding-block: var(--sec-y);
  position: relative;
}

.section--tight {
  padding-block: clamp(48px, 6vw, 82px);
}

.section--alt {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.3));
  border-block: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 20px 44px -40px rgba(9, 74, 100, 0.7) inset,
    0 -20px 44px -40px rgba(9, 74, 100, 0.7) inset;
}

.divide > * + * {
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------------ 氛围层
   Aero 时期这里有四层：散景气泡、颗粒、玻璃水珠、斜向高光。
   v3 改为全透明的玻璃边框之后，气泡与水珠会把画面重新拉回「塑料玩具」的
   观感，已连同 keyframes 一并移除，只保留 .grain —— 它负责抵消渐变色带，
   在任何风格下都有用。
   ------------------------------------------------------------------ */
.grain {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ 排版 */
.display {
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--t-hi);
  line-height: 1.18;
  letter-spacing: 0.01em;
}

/* 小标签：Aero 玻璃药丸 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px 6px 12px;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aqua-700);
  background: linear-gradient(180deg, #f2fcff, #d5f0fc);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 8px 18px -14px rgba(9, 74, 100, 0.9);
  margin: 0 0 18px;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, var(--aqua-400) 62%, var(--aqua-600));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(9, 74, 100, 0.4);
}

.eyebrow--amber {
  color: var(--sun-700);
  background: linear-gradient(180deg, #fffaf0, #ffedcb);
}

.eyebrow--amber::before {
  background: radial-gradient(circle at 34% 30%, #fff, var(--sun-400) 62%, var(--sun-600));
}

.eyebrow--dim {
  color: var(--t-dim);
  background: linear-gradient(180deg, #fbfeff, #eaf4f8);
}

.eyebrow--dim::before {
  background: radial-gradient(circle at 34% 30%, #fff, var(--aqua-200) 62%, var(--aqua-300));
}

.lede {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.95;
  color: var(--t);
  max-width: 62ch;
}

.muted {
  color: var(--t-dim);
}

.mono {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.slash::before {
  content: "//";
  font-family: var(--f-mono);
  color: var(--aqua-600);
  margin-right: 8px;
  letter-spacing: 0;
}

/* 区块标题 */
.sec-head {
  margin-bottom: clamp(38px, 5vw, 62px);
  max-width: 800px;
}

.sec-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  max-width: none;
  align-items: end;
}

.sec-title {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.24;
}

.sec-title em {
  font-style: normal;
  color: var(--aqua-600);
}

.sec-rule {
  display: block;
  width: 68px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--aqua-400), var(--aqua-600) 60%, rgba(255, 255, 255, 0));
  box-shadow: var(--sh-gloss);
  margin-top: 22px;
}

/* ------------------------------------------------------------------ 按钮 */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  color: var(--aqua-800);
  background: linear-gradient(180deg, #ffffff, #e7f5fb);
  border: 1px solid rgba(255, 255, 255, 0.98);
  box-shadow: var(--sh-gloss), 0 14px 26px -20px rgba(9, 74, 100, 0.95);
  transition: transform 0.22s var(--ease), box-shadow 0.25s var(--ease),
    background 0.25s var(--ease), color 0.25s var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 5%;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.btn > * {
  position: relative;
  z-index: 1;
}

.btn:hover {
  color: var(--aqua-900);
  background: linear-gradient(180deg, #ffffff, #d7eefb);
  box-shadow: var(--sh-gloss), 0 20px 34px -20px rgba(9, 74, 100, 0.9);
}

.btn:active {
  transform: scale(0.975);
}

.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #7fdcf1 0%, #33b6d6 46%, #1787ac 100%);
  border-color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px rgba(4, 48, 66, 0.4);
  box-shadow: var(--sh-gloss), 0 16px 30px -18px rgba(9, 74, 100, 1);
}

.btn--primary:hover {
  color: #fff;
  background: linear-gradient(180deg, #96e6f8 0%, #45c2e0 46%, #1d95bb 100%);
}

.btn--amber {
  color: #5a3608;
  background: linear-gradient(180deg, #ffe9b8 0%, #ffc766 46%, #e39c2a 100%);
  border-color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
}

.btn--amber:hover {
  color: #4a2c06;
  background: linear-gradient(180deg, #fff1cd 0%, #ffd180 46%, #ebaa3c 100%);
}

.btn--ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.45));
  backdrop-filter: blur(12px) saturate(150%);
}

.btn--sm {
  padding: 9px 18px;
  font-size: 13px;
}

.btn__ico {
  flex: none;
  opacity: 0.9;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--aqua-700);
}

.tlink svg {
  transition: transform 0.3s var(--ease);
}

.tlink:hover svg {
  transform: translateX(4px);
}

/* ------------------------------------------------------------------ 页头导航 */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 300;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86),
      rgba(246, 252, 254, 0.6));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 34px -30px rgba(9, 74, 100, 0.85);
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease),
    height 0.35s var(--ease);
}

.header.is-scrolled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95),
      rgba(240, 250, 253, 0.82));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 18px 40px -28px rgba(9, 74, 100, 0.95);
  height: 68px;
}

.header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  color: var(--t-hi);
}

.brand:hover {
  color: var(--t-hi);
}

.brand__mark {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 8px 16px -12px rgba(9, 74, 100, 1);
}

.brand__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand__cn {
  font-family: var(--f-display);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.brand__en {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--t-faint);
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.8vw, 10px);
  margin-left: auto;
}

.nav__link {
  position: relative;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--t-dim);
  white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.nav__link:hover {
  color: var(--aqua-800);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: var(--sh-gloss);
}

.nav__link.is-active {
  color: var(--aqua-800);
  background: linear-gradient(180deg, #ffffff, #d9f1fc);
  box-shadow: var(--sh-gloss), 0 10px 20px -16px rgba(9, 74, 100, 1);
}

.header__cta {
  flex: none;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: linear-gradient(180deg, #ffffff, #e6f4fb);
  box-shadow: var(--sh-gloss);
  align-items: center;
  justify-content: center;
}

.burger span {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--aqua-800);
  position: relative;
}

.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--aqua-800);
  transition: transform 0.3s var(--ease);
}

.burger span::before {
  top: -6px;
}

.burger span::after {
  top: 6px;
}

/* 移动端抽屉 */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: linear-gradient(180deg, rgba(233, 247, 253, 0.97),
      rgba(245, 252, 247, 0.98));
  backdrop-filter: blur(16px) saturate(160%);
  padding: calc(var(--header-h) + 26px) var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -14px, 0);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease),
    visibility 0.32s;
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.drawer__link {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--t-hi);
  padding: 17px 20px;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 14px 26px -22px rgba(9, 74, 100, 0.95);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  letter-spacing: 0.04em;
}

.drawer__link small {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--t-faint);
  text-transform: uppercase;
}

.drawer__foot {
  margin-top: auto;
  padding-top: 28px;
  display: grid;
  gap: 12px;
}

.drawer__close {
  position: absolute;
  top: 18px;
  right: var(--gutter);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: linear-gradient(180deg, #ffffff, #e6f4fb);
  box-shadow: var(--sh-gloss);
  font-size: 18px;
  color: var(--aqua-800);
}

/* 阅读进度 */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--aqua-400), var(--aqua-600) 55%, var(--sun-400));
  box-shadow: 0 0 12px rgba(35, 169, 201, 0.7);
  z-index: 340;
}

/* ------------------------------------------------------------------ 首页 Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--header-h) + 48px) 0 clamp(56px, 9vh, 96px);
}

@supports (min-height: 100dvh) {
  .hero {
    min-height: 100dvh;
  }
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -4;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  filter: saturate(1.16) brightness(1.0) contrast(1.03);
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(74% 50% at 50% 40%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, rgba(238, 249, 254, 0.5) 0%, rgba(255, 255, 255, 0.12) 26%,
      rgba(240, 250, 253, 0.2) 58%, rgba(246, 252, 248, 0.86) 92%,
      var(--sky-3) 100%);
}

/* 全站天气层：一整块固定画布承担雨与花瓣。
   大远征板块靠 body 上的 data-fx 关掉雨，只留花瓣。
   层叠位置夹在内容（z-index <= 2）与进度条 / 页头 / 抽屉（>= 250）之间，
   这样天气压得住正文，又不会盖在导航上。 */
.fx {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
  justify-items: center;
}

/* 主玻璃面板：像一扇蒙着水汽的窗 */
.hero__panel {
  position: relative;
  width: min(800px, 100%);
  padding: clamp(28px, 4.2vw, 52px) clamp(24px, 4vw, 56px);
  border-radius: 32px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76),
      rgba(255, 255, 255, 0.5));
  backdrop-filter: blur(24px) saturate(175%);
  -webkit-backdrop-filter: blur(24px) saturate(175%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 50px 100px -54px rgba(8, 66, 90, 0.85),
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 -14px 40px -30px rgba(18, 104, 131, 0.5) inset;
}

.hero__panel > * {
  position: relative;
  z-index: 1;
}

.hero__panel::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  top: -46%;
  height: 74%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0));
  pointer-events: none;
}

.hero__sub {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px 6px 13px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sun-700);
  background: linear-gradient(180deg, #fffaf0, #ffe9c2);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 10px 20px -16px rgba(9, 74, 100, 0.9);
  margin-bottom: 20px;
}

.hero__sub::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, var(--sun-400) 60%, var(--sun-600));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 6.6vw, 4.2rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--aqua-900);
  margin: 0 0 16px;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}

.hero__title .lt {
  color: var(--aqua-500);
}

.hero__copy {
  min-width: 0;
}

.hero__lede {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.9;
  color: var(--aqua-800);
  max-width: 46ch;
  margin: 0 auto 28px;
}

.hero__panel .btn-row {
  justify-content: center;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  width: min(800px, 100%);
}

.hero__stat {
  padding: 16px 18px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86),
      rgba(255, 255, 255, 0.58));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: var(--sh-gloss), 0 20px 40px -32px rgba(8, 66, 90, 0.9);
}

.hero__stat b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  color: var(--aqua-700);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.hero__stat span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-faint);
}

.hero__est {
  position: absolute;
  left: var(--gutter);
  top: calc(var(--header-h) + 34px);
  writing-mode: vertical-rl;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(11, 74, 97, 0.5);
  z-index: 2;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(11, 74, 97, 0.55);
  z-index: 2;
}

.hero__scroll i {
  width: 3px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--aqua-500), rgba(35, 169, 201, 0));
  animation: drip 2.4s var(--ease) infinite;
}

@keyframes drip {
  0% {
    transform: scaleY(0.2);
    opacity: 0;
    transform-origin: top;
  }
  40% {
    transform: scaleY(1);
    opacity: 1;
    transform-origin: top;
  }
  70%,
  100% {
    transform: scaleY(1);
    opacity: 0;
    transform-origin: bottom;
  }
}

/* ------------------------------------------------------------------ 跑马灯 */
.marquee {
  border-block: 1px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78),
      rgba(255, 255, 255, 0.45));
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 36px -34px rgba(9, 74, 100, 0.9);
  overflow: hidden;
  padding-block: 15px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 44s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__seq {
  display: flex;
  flex: none;
}

.marquee__seq span {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--aqua-800);
  padding-inline: 24px;
  white-space: nowrap;
}

.marquee__seq span::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, var(--sakura-400) 60%, var(--sakura-600));
  vertical-align: middle;
}

@keyframes marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ------------------------------------------------------------------ 数据条 */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.stats__item {
  padding: clamp(22px, 2.8vw, 34px) clamp(18px, 2vw, 26px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0.58));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 24px 46px -38px rgba(9, 74, 100, 0.95);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.stats__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-gloss), 0 30px 52px -36px rgba(9, 74, 100, 1);
}

.stats__num {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800;
  color: var(--aqua-700);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 5px;
  letter-spacing: 0.01em;
}

.stats__num i {
  font-style: normal;
  font-size: 0.46em;
  color: var(--sun-600);
  font-weight: 700;
}

.stats__lbl {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--t-dim);
}

/* ------------------------------------------------------------------ 简介区块 */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.intro__aside {
  position: sticky;
  top: calc(var(--header-h) + 40px);
}

.intro__body .display {
  font-size: clamp(1.4rem, 2.7vw, 2.15rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin-bottom: 26px;
}

.intro__body p + p {
  margin-top: 20px;
}

.intro__body p {
  max-width: 62ch;
}

.pullquote {
  position: relative;
  margin: 34px 0 0;
  padding: 24px 28px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92),
      rgba(228, 247, 253, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 24px 46px -38px rgba(9, 74, 100, 0.95);
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
  color: var(--aqua-900);
  line-height: 1.75;
}

.pullquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sakura-400), var(--aqua-400));
}

.pullquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.1em;
  color: var(--t-faint);
}

/* ------------------------------------------------------------------ 特色编号区块 */
.fblocks {
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
}

.fblock {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 108px;
  gap: clamp(18px, 3.2vw, 46px);
  align-items: start;
  padding: clamp(26px, 3.2vw, 40px) clamp(22px, 2.6vw, 36px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0.56));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 26px 50px -42px rgba(9, 74, 100, 0.95);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.fblock:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-gloss), 0 34px 60px -40px rgba(9, 74, 100, 1);
}

.fblock::after {
  content: "";
  position: absolute;
  left: -25%;
  right: -25%;
  top: -60%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0));
  pointer-events: none;
}

.fblock__no {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--sun-600);
  padding-top: 6px;
}

.fblock__no::before {
  content: "// ";
  color: var(--t-faint);
}

.fblock__title {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.1vw, 1.65rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.fblock__body {
  position: relative;
  z-index: 1;
}

.fblock__body p {
  max-width: 60ch;
}

.fblock__quote {
  margin-top: 16px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--aqua-700);
  letter-spacing: 0.02em;
}

.fblock__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-dim);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  padding: 5px 12px;
  background: linear-gradient(180deg, #ffffff, #edf7fb);
  box-shadow: var(--sh-gloss);
}

.tag--jade {
  color: var(--aqua-800);
  border-color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(180deg, #f2fdff, #d6f0fc);
}

.tag--amber {
  color: var(--sun-700);
  border-color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(180deg, #fffbf2, #ffeacb);
}

.tag--sakura {
  color: var(--sakura-700);
  border-color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(180deg, #fff6fa, #fcdce8);
}

.fblock__icon {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: radial-gradient(120% 100% at 30% 0%, #ffffff, #d8f0fb 60%, #bfe6f8);
  box-shadow: var(--sh-gloss), 0 16px 30px -22px rgba(9, 74, 100, 1);
  display: grid;
  place-items: center;
  color: var(--aqua-700);
}

.fblock__icon svg {
  width: 40px;
  height: 40px;
}

/* ------------------------------------------------------------------ 动态列表 */
.news {
  display: grid;
  gap: 10px;
}

.news__row {
  display: grid;
  grid-template-columns: 128px 92px minmax(0, 1fr) 30px;
  gap: clamp(12px, 2.2vw, 30px);
  align-items: center;
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 24px);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86),
      rgba(255, 255, 255, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: var(--sh-gloss), 0 18px 36px -34px rgba(9, 74, 100, 0.95);
  color: var(--t);
  position: relative;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    background 0.3s var(--ease);
}

.news__row:hover {
  transform: translateX(4px);
  background: linear-gradient(180deg, #ffffff, #e9f6fd);
  box-shadow: var(--sh-gloss), 0 26px 44px -34px rgba(9, 74, 100, 1);
  color: var(--t-hi);
}

.news__date {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--t-dim);
}

.news__title {
  font-size: clamp(0.95rem, 1.4vw, 1.06rem);
  font-weight: 700;
  color: var(--t-hi);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.news__arrow {
  color: var(--aqua-500);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  justify-self: end;
}

.news__row:hover .news__arrow {
  opacity: 1;
  transform: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffbf2, #ffeacb);
  color: var(--sun-700);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss);
  flex: none;
}

.badge--jade {
  background: linear-gradient(180deg, #f2fdff, #d6f0fc);
  color: var(--aqua-800);
}

.badge--sakura {
  background: linear-gradient(180deg, #fff6fa, #fcdce8);
  color: var(--sakura-700);
}

.badge--plain {
  background: linear-gradient(180deg, #ffffff, #eef6f9);
  color: var(--t-dim);
}

.badge--scrap {
  background: linear-gradient(180deg, #ffffff, #e8eef2);
  color: var(--t-faint);
}

/* ------------------------------------------------------------------ 画廊 */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: #eaf6fc;
  box-shadow: var(--sh-gloss), 0 26px 50px -40px rgba(9, 74, 100, 0.95);
  aspect-ratio: 16 / 10;
}

.shot--wide {
  grid-column: span 2;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
  filter: saturate(1.02);
}

.shot:hover img {
  transform: scale(1.04);
  filter: saturate(1.08);
}

.shot__cap {
  position: absolute;
  inset: auto 10px 10px 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0.66));
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 16px 30px -24px rgba(9, 74, 100, 1);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.shot__name {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--aqua-900);
  letter-spacing: 0.03em;
  /* v11：图注是压在实机截图上的，而 .shot__cap 按 v3 的原则是全透明的 ——
     换成实机截图之后，遇到中调子画面（浅色石路、草地）这行字会糊掉。
     不给面板加填充，只给字加一圈白色光晕，让字形自己把底衬出来。 */
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.95), 0 0 7px rgba(255, 255, 255, 0.8),
      0 1px 0 rgba(255, 255, 255, 0.9);
}

.shot__by {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--t-dim);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.95), 0 0 6px rgba(255, 255, 255, 0.75);
}

.shot__idx {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--aqua-800);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94),
      rgba(255, 255, 255, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss);
  padding: 3px 9px;
  border-radius: 999px;
}

.gallery__note {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--t-faint);
}

/* ------------------------------------------------------------------ 键值表 */
.kv {
  display: grid;
}

.kv__row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
  gap: clamp(12px, 3vw, 40px);
  padding: 14px 0;
  border-bottom: 1px dashed var(--line-2);
  align-items: baseline;
}

.kv__row:last-child {
  border-bottom: 0;
}

.kv__k {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-faint);
}

.kv__v {
  color: var(--t-hi);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.kv__v small {
  display: block;
  color: var(--t-dim);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.kv-grid {
  display: grid;
  /* min(460px,100%)：窄视口下轨道最小值退化为容器宽度，避免把页面撑到 480px */
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: clamp(20px, 2.6vw, 32px);
}

.panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0.56));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--sh-gloss), 0 28px 54px -44px rgba(9, 74, 100, 0.95);
  padding: clamp(22px, 2.8vw, 34px);
}

.panel::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: -46%;
  height: 66%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65),
      rgba(255, 255, 255, 0));
  pointer-events: none;
}

.panel__t {
  position: relative;
  z-index: 1;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aqua-700);
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line-2);
}

/* ------------------------------------------------------------------ 周目档案 */
.cycles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(12px, 1.5vw, 18px);
}

.cycle {
  position: relative;
  overflow: hidden;
  padding: 20px 22px;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92),
      rgba(255, 255, 255, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 20px 38px -34px rgba(9, 74, 100, 0.95);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.cycle:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-gloss), 0 28px 46px -34px rgba(9, 74, 100, 1);
}

.cycle__no {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 11px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6fd3ea, #1f9cc0);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--sh-gloss);
  text-shadow: 0 1px 1px rgba(4, 48, 66, 0.35);
}

.cycle__d {
  display: block;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--t-dim);
  letter-spacing: 0.06em;
}

.cycle__t {
  margin-top: 6px;
  font-family: var(--f-display);
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--t-hi);
  letter-spacing: 0.02em;
}

.cycle p {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--t-dim);
  line-height: 1.75;
}

.cycle--now {
  background: linear-gradient(180deg, #ffffff, #e6f7fe);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 24px 44px -30px rgba(9, 74, 100, 1);
}

.cycle--now .cycle__no {
  background: linear-gradient(180deg, #ffd98a, #e59c22);
}

.cycle--scrap {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7),
      rgba(238, 244, 247, 0.6));
}

.cycle--scrap .cycle__no {
  background: linear-gradient(180deg, #dfe8ee, #a9bcc7);
  color: var(--t-dim);
  text-shadow: none;
}

.cycle--side .cycle__no {
  background: linear-gradient(180deg, #fbc7dc, #dd6b98);
}

/* ------------------------------------------------------------------ IP 复制条 */
.ipband {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3.4vw, 42px);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, #f4fdff, #d9f1fc 60%, #c9ecfb);
  box-shadow: var(--sh-gloss), 0 32px 60px -44px rgba(9, 74, 100, 1);
}

.ipband__label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--aqua-700);
  margin-bottom: 10px;
}

.ipband__addr {
  font-family: var(--f-mono);
  font-size: clamp(1.15rem, 3.2vw, 2rem);
  font-weight: 500;
  color: var(--aqua-900);
  letter-spacing: 0.01em;
  word-break: break-all;
  line-height: 1.3;
}

.ipband__addr span {
  color: var(--sakura-600);
}

.copy {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, #7fdcf1 0%, #33b6d6 46%, #1787ac 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px rgba(4, 48, 66, 0.4);
  box-shadow: var(--sh-gloss), 0 18px 32px -20px rgba(9, 74, 100, 1);
  transition: transform 0.22s var(--ease), box-shadow 0.25s var(--ease);
}

.copy::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 5%;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}

.copy > * {
  position: relative;
  z-index: 1;
}

.copy:active {
  transform: scale(0.975);
}

.copy.is-done {
  background: linear-gradient(180deg, #ffe1a3, #e0a032 52%, #c4841f);
  color: #4a2c06;
  text-shadow: none;
}

/* ------------------------------------------------------------------ 页头（内页） */
.pagehead {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(56px, 11vh, 116px));
  padding-bottom: clamp(48px, 8vh, 92px);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.pagehead__bg {
  position: absolute;
  inset: 0;
  z-index: -4;
}

.pagehead__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(1.04);
}

.pagehead__veil {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(180deg, rgba(238, 249, 254, 0.6) 0%,
      rgba(247, 252, 253, 0.62) 46%, rgba(246, 252, 248, 0.9) 88%, var(--sky-3) 100%);
}

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-dim);
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92),
      rgba(255, 255, 255, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss);
  margin-bottom: 20px;
}

.crumb a {
  color: var(--t-dim);
}

.crumb a:hover {
  color: var(--aqua-600);
}

.pagehead__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.16;
  color: var(--aqua-900);
  margin-bottom: 16px;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}

.pagehead__lede {
  max-width: 58ch;
  color: var(--t);
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
}

/* ------------------------------------------------------------------ 时间线 */
.timeline {
  position: relative;
  padding-left: 34px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--aqua-300), var(--aqua-100));
}

.tl-item {
  position: relative;
  padding-bottom: clamp(24px, 3.2vw, 36px);
}

.tl-item:last-child {
  padding-bottom: 0;
}

.tl-item::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 8px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, var(--aqua-300) 55%, var(--aqua-500));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 12px -6px rgba(9, 74, 100, 0.9), var(--sh-gloss);
}

.tl-item--now::before {
  background: radial-gradient(circle at 34% 30%, #fff, var(--sun-400) 55%, var(--sun-600));
}

.tl-item--side::before {
  background: radial-gradient(circle at 34% 30%, #fff, var(--sakura-400) 55%, var(--sakura-600));
}

.tl-item__date {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--aqua-700);
  margin-bottom: 8px;
}

.tl-item__t {
  font-family: var(--f-display);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--t-hi);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.tl-item p {
  color: var(--t-dim);
  font-size: 14.5px;
  max-width: 60ch;
}

/* ------------------------------------------------------------------ 卡片网格 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}

.card {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 2.8vw, 34px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92),
      rgba(255, 255, 255, 0.58));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 26px 50px -42px rgba(9, 74, 100, 0.95);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.card::after {
  content: "";
  position: absolute;
  left: -25%;
  right: -25%;
  top: -58%;
  height: 78%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72),
      rgba(255, 255, 255, 0));
  pointer-events: none;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-gloss), 0 34px 60px -40px rgba(9, 74, 100, 1);
}

.card > * {
  position: relative;
  z-index: 1;
}

.card__ico {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: radial-gradient(120% 100% at 30% 0%, #ffffff, #d6effb 62%, #bde4f6);
  box-shadow: var(--sh-gloss), 0 14px 26px -20px rgba(9, 74, 100, 1);
  display: grid;
  place-items: center;
  color: var(--aqua-700);
  margin-bottom: 20px;
}

.card__ico svg {
  width: 23px;
  height: 23px;
}

.card__t {
  font-family: var(--f-display);
  font-size: 1.16rem;
  font-weight: 800;
  color: var(--t-hi);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.card p {
  font-size: 14.5px;
  color: var(--t-dim);
  line-height: 1.85;
}

.card__meta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-2);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-faint);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* 玩法展示（大图 + 文字交替） */
.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 72px);
  align-items: center;
}

.feature-row + .feature-row {
  margin-top: clamp(52px, 7vw, 104px);
}

.feature-row:nth-child(even) .feature-row__media {
  order: 2;
}

.feature-row__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 30px 58px -44px rgba(9, 74, 100, 1);
  aspect-ratio: 16 / 10;
}

.feature-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04);
}

.feature-row__t {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

.feature-row__list {
  margin-top: 22px;
  display: grid;
  gap: 10px;
}

.feature-row__list li {
  position: relative;
  padding-left: 24px;
  color: var(--t-dim);
  font-size: 14.5px;
}

.feature-row__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: radial-gradient(circle at 34% 30%, #fff, var(--aqua-300) 60%, var(--aqua-500));
  box-shadow: 0 2px 5px -1px rgba(9, 74, 100, 0.55);
}

/* ------------------------------------------------------------------ 筛选 */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 30px;
}

.chip {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--t-dim);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86),
      rgba(255, 255, 255, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease),
    box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}

.chip:hover {
  color: var(--aqua-800);
  transform: translateY(-2px);
}

.chip[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(180deg, #7fdcf1, #2aabcc 48%, #1787ac);
  border-color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px rgba(4, 48, 66, 0.35);
  box-shadow: var(--sh-gloss), 0 14px 26px -18px rgba(9, 74, 100, 1);
}

.news__row.is-hidden {
  display: none;
}

/* 动态日志变体：多一列摘要 */
.news--log .news__row {
  grid-template-columns: 128px 92px minmax(0, 1fr);
  align-items: start;
}

.news--log .news__title {
  display: block;
}

.news__sum {
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--t-dim);
  max-width: 76ch;
}

.empty {
  padding: 48px 0;
  text-align: center;
  color: var(--t-faint);
  font-size: 14px;
}

/* ------------------------------------------------------------------ 步骤 */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  counter-reset: step;
}

.step {
  position: relative;
  overflow: hidden;
  padding: 26px 24px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92),
      rgba(255, 255, 255, 0.58));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 24px 46px -40px rgba(9, 74, 100, 0.95);
}

.step__no {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6fd3ea, #1f9cc0);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--sh-gloss);
  text-shadow: 0 1px 1px rgba(4, 48, 66, 0.35);
  margin-bottom: 16px;
}

.step__t {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--t-hi);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.step p {
  font-size: 14.5px;
  color: var(--t-dim);
}

.code {
  display: block;
  margin-top: 14px;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #f4fdff, #dff2fb);
  box-shadow: var(--sh-gloss);
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--aqua-800);
  letter-spacing: 0.02em;
  overflow-x: auto;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ 手风琴 */
.faq {
  display: grid;
  gap: 10px;
}

.faq details {
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88),
      rgba(255, 255, 255, 0.52));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 18px 36px -34px rgba(9, 74, 100, 0.95);
  overflow: hidden;
}

.faq summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 19px 22px;
  cursor: pointer;
  list-style: none;
  color: var(--t-hi);
  font-size: 1.01rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: color 0.25s var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--aqua-700);
}

.faq summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--aqua-800);
  background: radial-gradient(120% 100% at 30% 0%, #ffffff, #d6effb 65%, #bde4f6);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss);
  transition: transform 0.3s var(--ease);
}

.faq details[open] summary::before {
  transform: rotate(45deg);
}

.faq__a {
  padding: 0 22px 22px 62px;
  color: var(--t-dim);
  font-size: 14.5px;
  max-width: 74ch;
}

.faq__a p + p {
  margin-top: 12px;
}

/* ------------------------------------------------------------------ 团队 */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}

.member {
  position: relative;
  overflow: hidden;
  padding: 26px 22px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92),
      rgba(255, 255, 255, 0.58));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 24px 46px -40px rgba(9, 74, 100, 0.95);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.member:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-gloss), 0 32px 56px -38px rgba(9, 74, 100, 1);
}

.member__role {
  display: inline-flex;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aqua-800);
  padding: 4px 11px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f2fdff, #d6f0fc);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss);
  margin-bottom: 12px;
}

.member__name {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--t-hi);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.member__alias {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--sakura-600);
  margin-top: -6px;
  margin-bottom: 8px;
}

.member p {
  font-size: 13.5px;
  color: var(--t-dim);
}

/* ------------------------------------------------------------------ 守则 */
.rules {
  display: grid;
  gap: 10px;
}

.rule {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 22px;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86),
      rgba(255, 255, 255, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--sh-gloss), 0 18px 36px -34px rgba(9, 74, 100, 0.95);
}

.rule__n {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--sun-700);
  letter-spacing: 0.08em;
}

.rule__t {
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--t-hi);
  margin-bottom: 6px;
}

.rule p {
  color: var(--t-dim);
  font-size: 14px;
  max-width: 68ch;
}

/* ------------------------------------------------------------------ CTA 尾部 */
.cta {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  background:
    radial-gradient(70% 120% at 50% 100%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgba(233, 247, 253, 0.7), rgba(255, 255, 255, 0.5));
  text-align: center;
  padding-block: clamp(72px, 10vw, 132px);
}

.cta::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: -50%;
  height: 90%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0));
  pointer-events: none;
}

.cta > .wrap {
  position: relative;
  z-index: 1;
}

.cta__t {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 4.4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.cta__p {
  color: var(--t-dim);
  max-width: 52ch;
  margin: 0 auto 34px;
}

.cta .btn-row {
  justify-content: center;
}

/* ------------------------------------------------------------------ 页脚 */
.footer {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6),
      rgba(228, 245, 251, 0.72));
  backdrop-filter: blur(14px) saturate(150%);
  padding-top: clamp(48px, 6vw, 76px);
  padding-bottom: 34px;
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 56px);
  padding-bottom: clamp(34px, 4.4vw, 56px);
  border-bottom: 1px solid var(--line);
}

.footer__brand p {
  margin-top: 16px;
  color: var(--t-dim);
  font-size: 13.5px;
  max-width: 34ch;
}

.footer__h {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-faint);
  margin-bottom: 16px;
}

.footer__list {
  display: grid;
  gap: 10px;
}

.footer__list a,
.footer__list span {
  font-size: 14px;
  color: var(--t-dim);
}

.footer__list a:hover {
  color: var(--aqua-600);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  font-size: 12px;
  color: var(--t-faint);
}

.footer__bottom .mono {
  letter-spacing: 0.1em;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leaf-700);
}

.status i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #eaffef, var(--leaf-500) 60%, var(--leaf-700));
  box-shadow: 0 0 0 3px rgba(92, 186, 124, 0.22);
  animation: breathe 2.6s var(--ease) infinite;
}

@keyframes breathe {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.72);
  }
}

/* 回到顶部 */
.totop {
  position: fixed;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 34px);
  z-index: 250;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94),
      rgba(226, 244, 251, 0.82));
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--sh-gloss), 0 20px 38px -26px rgba(9, 74, 100, 1);
  color: var(--aqua-800);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s, color 0.25s var(--ease);
}

.totop.is-show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.totop:hover {
  color: var(--aqua-500);
}

/* ------------------------------------------------------------------ 入场动画 */
.has-js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.has-js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------ 响应式 */
@media (max-width: 1080px) {
  .fblock {
    grid-template-columns: 68px minmax(0, 1fr);
  }
  .fblock__icon {
    display: none;
  }
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 70px;
  }
  .nav,
  .header__cta {
    display: none;
  }
  .burger {
    display: flex;
    margin-left: auto;
  }
  .intro {
    grid-template-columns: minmax(0, 1fr);
  }
  .intro__aside {
    position: static;
  }
  .sec-head--split {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-row,
  .feature-row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature-row:nth-child(even) .feature-row__media {
    order: 0;
  }
  .ipband {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__est {
    display: none;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 15.5px;
  }
  :root {
    --header-h: 64px;
  }
  .hero__panel {
    border-radius: 26px;
  }
  .hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .hero__stat {
    padding: 13px 10px;
    border-radius: 16px;
  }
  .news__row,
  .news--log .news__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 18px;
  }
  .news__row:hover {
    transform: none;
  }
  .news__arrow {
    display: none;
  }
  .gallery {
    grid-template-columns: minmax(0, 1fr);
  }
  .shot--wide {
    grid-column: span 1;
  }
  .kv__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .faq__a {
    padding-left: 22px;
  }
  .rule {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 18px;
  }
}

@media (max-width: 480px) {
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .btn {
    padding: 12px 20px;
    font-size: 13.5px;
  }
}

/* ------------------------------------------------------------------ 无障碍 / 打印 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .has-js [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .fx {
    display: none;
  }
}

@media print {
  .header,
  .drawer,
  .totop,
  .progress,
  .grain,
  .fx {
    display: none !important;
  }
  body {
    background: #fff;
    color: #111;
  }
}

/* ==========================================================================
   v3 · 玻璃边框（Glass Edge）
   ---------------------------------------------------------------------------
   视窗一律「全透明」，通体不填色，只在边缘做折射：
     1px 渐变环（152°：左上受光 → 中段折出水青 → 右下回亮）+ 内侧高光/暗边，
     做出玻璃被光切过时的厚度感。
   除固定页头与移动端抽屉（两者必须压住下方内容才可读）之外全站取消
   backdrop-filter —— 磨砂会把浅色天光糊成一片灰；通透感来自「什么都没有」，
   不是「糊了一层」。环用 mask 抠出，不改动任何 HTML 结构。
   ========================================================================== */
:root {
  /* 边缘折射（v4 加强）
     1px 边框带上是两层叠着的：底色序列 + 镜面弧。
       --rim      152° 受光序列，中途折出水青，并掺一层极淡的粉（微色散）
       --rim-spec 锥形镜面弧，把高光聚到左上与右下两段，模拟光被玻璃边聚起来
     厚度与焦散由多层内阴影 --edge-in 表达；外圈再补一道极细亮边 --edge-out。 */
  --rim: linear-gradient(
    152deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.66) 6%,
    rgba(198, 240, 255, 0.80) 15%,
    rgba(35, 169, 201, 0.48) 30%,
    rgba(255, 255, 255, 0.99) 44%,
    rgba(255, 231, 243, 0.66) 56%,
    rgba(35, 169, 201, 0.26) 68%,
    rgba(255, 255, 255, 0.56) 84%,
    rgba(255, 255, 255, 1) 100%);

  --rim-spec: conic-gradient(
    from 196deg at 50% 50%,
    rgba(255, 255, 255, 1) 0deg,
    rgba(255, 255, 255, 0.12) 30deg,
    rgba(255, 255, 255, 0) 58deg,
    rgba(255, 255, 255, 0) 250deg,
    rgba(255, 255, 255, 0.36) 298deg,
    rgba(255, 255, 255, 0.94) 360deg);

  --rim-soft: linear-gradient(
    152deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(214, 244, 255, 0.44) 18%,
    rgba(35, 169, 201, 0.30) 40%,
    rgba(255, 255, 255, 0.86) 62%,
    rgba(255, 255, 255, 0.40) 100%);

  --rim-aqua: linear-gradient(
    152deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(138, 224, 246, 0.72) 16%,
    rgba(35, 169, 201, 0.68) 36%,
    rgba(255, 255, 255, 0.96) 58%,
    rgba(35, 169, 201, 0.52) 100%);

  --rim-amber: linear-gradient(
    152deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 220, 154, 0.74) 18%,
    rgba(245, 179, 74, 0.70) 38%,
    rgba(255, 255, 255, 0.94) 60%,
    rgba(245, 179, 74, 0.54) 100%);

  --edge-in:
    inset 0 1px 0 rgba(255, 255, 255, 0.99),
    inset 1px 0 0 rgba(255, 255, 255, 0.74),
    inset 0 -1px 0 rgba(9, 58, 78, 0.17),
    inset -1px 0 0 rgba(9, 58, 78, 0.12),
    inset 0 3px 4px -3px rgba(255, 255, 255, 0.96),
    inset 3px 0 5px -4px rgba(255, 255, 255, 0.82),
    inset 0 -3px 6px -4px rgba(9, 58, 78, 0.24),
    inset -3px -1px 7px -5px rgba(9, 58, 78, 0.20);

  --edge-in-sm:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 1px 0 0 rgba(255, 255, 255, 0.46),
    inset 0 -1px 0 rgba(9, 58, 78, 0.13),
    inset -1px 0 0 rgba(9, 58, 78, 0.08),
    inset 0 2px 3px -2px rgba(255, 255, 255, 0.80);

  /* 外圈亮边：玻璃把天光折出去的那一线 */
  --edge-out:
    0 0 0 0.5px rgba(255, 255, 255, 0.58),
    0 1px 1px -0.5px rgba(255, 255, 255, 0.42),
    0 0 26px -16px rgba(255, 255, 255, 0.92);

  --sh-glass: 0 22px 48px -38px rgba(9, 74, 100, 0.60);
  --sh-glass-lg: 0 48px 104px -66px rgba(9, 74, 100, 0.66);
  --sh-glass-sm: 0 10px 22px -20px rgba(9, 74, 100, 0.52);
}

/* ------------------------------------------------------------------ 基座
   全透明 + 去模糊。border-color 置透明而非删边框，以免改变既有盒模型尺寸。 */
.panel,
.card,
.shot,
.fblock,
.news__row,
.cycle,
.member,
.rule,
.step,
.chip,
.stats__item,
.kv__row,
.hero__stat,
.hero__panel,
.marquee,
.ipband,
.badge,
.code,
.btn,
.eyebrow,
.cta,
.tl-item,
.faq details {
  position: relative;
  background: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--edge-in-sm);
}

/* .totop 是 fixed、.shot__cap 是 absolute —— 只换皮，不动它们的定位 */
.totop,
.shot__cap {
  background: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--edge-in-sm);
}

/* ------------------------------------------------------------------ 描边环
   .tl-item / .faq details 的 ::before 另有用途（时间线圆点、展开指示），故走 ::after。 */
.panel::before,
.card::before,
.shot::before,
.shot__cap::before,
.fblock::before,
.news__row::before,
.cycle::before,
.member::before,
.rule::before,
.step::before,
.chip::before,
.stats__item::before,
.kv__row::before,
.hero__stat::before,
.hero__panel::before,
.marquee::before,
.ipband::before,
.totop::before,
.badge::before,
.code::before,
.btn::before,
.eyebrow::before,
.cta::before,
.tl-item::after,
.faq details::after {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1px;
  border: 0;
  border-radius: inherit;
  background: var(--rim-spec), var(--rim);
  box-shadow: none;
  opacity: 1;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  z-index: 2;
}

/* 小尺寸元素换更淡的环，避免细碎发亮 */
.chip,
.badge,
.eyebrow,
.btn,
.totop,
.step,
.rule,
.code,
.tl-item,
.faq details,
.stats__item,
.kv__row,
.hero__stat,
.member,
.cycle,
.news__row {
  --rim: var(--rim-soft);
  --rim-spec: none;
}

/* ------------------------------------------------------------------ 大面板
   透明玻璃板也要有落影才不会悬空：用极淡的水青投影替代原来的实体阴影。 */
.panel,
.hero__panel,
.cta,
.marquee,
.ipband {
  box-shadow: var(--edge-in), var(--edge-out), var(--sh-glass);
}

.panel,
.cta,
.hero__panel {
  border-radius: var(--r-lg);
}

.hero__panel {
  box-shadow: var(--edge-in), var(--edge-out), var(--sh-glass-lg);
}

.marquee,
.ipband {
  border-radius: var(--r);
}

/* 贴在面板顶部的大片高光在透明底上没有意义 */
.hero__panel::after,
.panel::after,
.card::after,
.fblock::after {
  display: none;
}

/* ------------------------------------------------------------------ 卡片 / 图版 */
.card,
.shot,
.cycle {
  border-radius: var(--r);
  box-shadow: var(--edge-in), var(--sh-glass-sm);
}

.card:hover,
.shot:hover {
  box-shadow: var(--edge-in), 0 30px 58px -42px rgba(9, 74, 100, 0.6);
}

.shot img {
  border-radius: calc(var(--r) - 3px);
}

.shot__cap {
  border-radius: var(--r-sm);
}

/* ------------------------------------------------------------------ 列表行 */
.news__row,
.kv__row,
.tl-item,
.rule {
  border-radius: var(--r-sm);
}

.news__row:hover {
  background: rgba(255, 255, 255, 0.42);
}

/* ------------------------------------------------------------------ 数据 / 成员 / 步骤 */
.stats__item,
.hero__stat,
.step,
.member {
  border-radius: var(--r);
}

.step__no,
.member__role {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ------------------------------------------------------------------ 周目档案 */
.cycle--now {
  box-shadow: var(--edge-in), 0 22px 46px -34px rgba(183, 118, 26, 0.5);
}

.cycle--now::before {
  background: var(--rim-amber);
}

/* ------------------------------------------------------------------ 标签 / 药丸 */
.chip,
.badge,
.eyebrow,
.totop {
  border-radius: 999px;
}

.chip.is-active,
.chip[aria-pressed="true"] {
  background: rgba(35, 169, 201, 0.1);
  color: var(--aqua-800);
  --rim: var(--rim-aqua);
}

.badge {
  padding: 4px 11px;
}

.eyebrow {
  padding: 6px 15px;
  border-radius: 999px;
  color: var(--aqua-700);
}

.eyebrow--amber {
  color: var(--sun-700);
  --rim: var(--rim-amber);
}

.eyebrow--dim {
  color: var(--t-dim);
}

/* ------------------------------------------------------------------ 按钮
   去掉糖果渐变，改成「玻璃片」：透明底 + 折射边，悬停时浮出一层极淡的白。 */
.btn {
  border-radius: 999px;
  background: transparent;
  color: var(--t-hi);
  text-shadow: none;
  box-shadow: var(--edge-in-sm), var(--sh-glass-sm);
}

.btn:hover,
.btn:focus-visible {
  background: rgba(255, 255, 255, 0.52);
  color: var(--aqua-900);
  box-shadow: var(--edge-in), 0 16px 30px -24px rgba(9, 74, 100, 0.6);
}

.btn--primary {
  color: var(--aqua-800);
  background: linear-gradient(rgba(255, 255, 255, 0.72),
    rgba(228, 247, 253, 0.58));
  text-shadow: none;
  --rim: var(--rim-aqua);
  box-shadow: var(--edge-in), 0 18px 36px -26px rgba(9, 74, 100, 0.6);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  color: var(--aqua-900);
  background: rgba(255, 255, 255, 0.68);
}

.btn--amber {
  color: var(--sun-700);
  background: rgba(255, 250, 240, 0.4);
  text-shadow: none;
  --rim: var(--rim-amber);
}

.btn--amber:hover,
.btn--amber:focus-visible {
  color: var(--sun-700);
  background: rgba(255, 252, 245, 0.72);
}

.btn--ghost {
  background: transparent;
  color: var(--t);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.4);
  color: var(--t-hi);
}

/* ------------------------------------------------------------------ 页头
   全站第一处必要模糊：固定页头要压得住滚过去的正文。
   未滚动时完全透明，滚动后才浮出一层极淡的磨砂。 */
.header {
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.header.is-scrolled {
  background: rgba(250, 253, 254, 0.42);
  -webkit-backdrop-filter: blur(10px) saturate(145%);
  backdrop-filter: blur(10px) saturate(145%);
  border-bottom-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 30px -28px rgba(9, 74, 100, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.nav__link {
  border-radius: 999px;
}

.nav__link.is-active {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: var(--edge-in-sm);
}

/* ------------------------------------------------------------------ 抽屉
   覆盖全屏的菜单必须糊住底下的内容，是第二处必要模糊。 */
.drawer {
  background: rgba(247, 252, 253, 0.84);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

.drawer__link {
  border-radius: var(--r-sm);
}

/* ------------------------------------------------------------------ 手风琴 */
.faq details {
  border-radius: var(--r-sm);
}

.faq details[open] {
  box-shadow: var(--edge-in), var(--sh-glass-sm);
}

/* ------------------------------------------------------------------ 代码块 */
.code {
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.34);
}

/* ------------------------------------------------------------------ 回到顶部 */
.totop {
  background: rgba(255, 255, 255, 0.42);
}

.totop:hover {
  background: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------------------------------ 页脚 */
.footer {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.footer__bottom {
  border-top-color: rgba(11, 59, 76, 0.12);
}

/* ------------------------------------------------------------------ 场景对光
   面板全透明后，Hero 与内页页头的文字要靠场景层自己给出对光：
   在文案一侧加一团柔和天光，而不是给玻璃板填色。 */
.hero__veil {
  background:
    radial-gradient(76% 60% at 50% 52%, rgba(255, 255, 255, 0.86) 0%,
      rgba(255, 255, 255, 0.46) 44%, rgba(255, 255, 255, 0) 78%),
    linear-gradient(180deg, rgba(238, 249, 254, 0.5) 0%,
      rgba(255, 255, 255, 0.1) 26%, rgba(240, 250, 253, 0.24) 60%,
      rgba(246, 252, 248, 0.9) 94%, var(--sky-3) 100%);
}

.pagehead__veil {
  background:
    radial-gradient(58% 62% at 22% 42%, rgba(255, 255, 255, 0.62) 0%,
      rgba(255, 255, 255, 0) 74%),
    linear-gradient(180deg, rgba(238, 249, 254, 0.6) 0%,
      rgba(247, 252, 253, 0.66) 46%, rgba(246, 252, 248, 0.92) 88%,
      var(--sky-3) 100%);
}

/* 段落标题下的细线改用折射边同色系 */
.sec-rule {
  background: linear-gradient(90deg, rgba(35, 169, 201, 0.5),
    rgba(35, 169, 201, 0.06));
}

/* ==========================================================================
   v10 —— 实机截图进场
   ---------------------------------------------------------------------------
   图片从「程序化生成的概念图」换成「服务器实机截图」，配套三件事：
     · 去掉像素画专用的 image-rendering（实机截图放大时要平滑）；
     · 周目档案卡片顶部加一张出血缩略图；
     · 介绍页 / 特色页的独立插图统一成 .media-figure。
   ========================================================================== */

/* 周目档案：卡片顶部的实机缩略图。
   .cycle 的 padding 是 20px 22px，负 margin 让图片出血到卡片边缘，
   圆角与描边环由 .cycle 自己的 overflow / ::before 收掉。 */
.cycle__shot {
  display: block;
  width: calc(100% + 44px);
  margin: -20px -22px 14px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #e4f2f9;
}

/* 独立插图：介绍页的合影、周目之外的单张实机图 */
.media-figure {
  position: relative;
  margin: clamp(20px, 3vw, 32px) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: #eaf6fc;
  box-shadow: var(--edge-in), 0 34px 62px -48px rgba(9, 74, 100, 1);
}

.media-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.media-figure figcaption {
  padding: 13px 18px 15px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--t-dim);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94),
      rgba(255, 255, 255, 0.7));
  border-top: 1px solid rgba(255, 255, 255, 0.9);
}

.media-figure figcaption b {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--aqua-800);
  margin-right: 8px;
}

/* ==========================================================================
   v5 —— 首屏主标题居左 · 社群入口
   ========================================================================== */

/* ------------------------------------------------------------------ 首屏居左
   整块 hero 内容（玻璃面板 + 下方数据条）不再居中，直接靠到版面内容区的左边缘，
   与全站其它栏目的左边界对齐。文案本身也一并左对齐：标题、提要、按钮贴面板左内边。 */
.hero__inner {
  justify-items: start;
}

.hero__panel {
  text-align: left;
}

.hero__lede {
  margin-left: 0;
  margin-right: auto;
}

.hero__panel .btn-row {
  justify-content: flex-start;
}

/* ------------------------------------------------------------------ 社群入口
   加入方式不再直接公示服务器地址，改走 QQ 群与 Discord。 */
.contact__lnk {
  color: var(--aqua-700);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.contact__lnk:hover {
  color: var(--aqua-500);
}

/* 群号与链接排在同一行时的分隔小标 */
.ipband__addr {
  letter-spacing: 0.02em;
}