/* ==========================================================================
   Nostalgia | 追忆 — Shared Blue / White Liquid Glass Design System
   Liquid Glass ≠ Glassmorphism:
   - Glassmorphism = 均匀毛玻璃模糊 + 半透明白底。
   - Liquid Glass = 透镜材质系统：背景模糊/提饱和 + 镜面高光描边 +
     内外倒角阴影 + 蓝白同源染色 + 克制的厚度与动态光感。
   This file deliberately implements the three-layer CSS fallback of the
   Liquid Glass material. Real per-pixel refraction is Chromium-only and is
   intentionally avoided for site-wide surfaces because it is expensive and
   unavailable in Safari/Firefox.
   ========================================================================== */

/* ------------------------------ Tokens ---------------------------------- */
:root{
  color-scheme: light;

  --page-paper: #f4f1ec;
  --mist: #d3dce2;
  --blue-gray: #94abc0;
  --ice: #dcecf8;
  --sky: #9cc1e7;
  --brand: #315d97;
  --brand-deep: #234775;
  --ink: #17263a;
  --ink-soft: #4b5d70;
  --ink-muted: #6d7c8d;
  --line-pale: rgba(255,255,255,.72);

  --glass-fill:
    radial-gradient(116% 94% at 14% -12%, rgba(255,255,255,.54), transparent 46%),
    linear-gradient(144deg, rgba(220,237,251,.56) 0%, rgba(190,218,240,.34) 50%, rgba(248,252,255,.39) 100%);
  --glass-fill-strong:
    radial-gradient(120% 95% at 12% -12%, rgba(255,255,255,.66), transparent 48%),
    linear-gradient(145deg, rgba(214,235,250,.62) 0%, rgba(180,211,237,.40) 50%, rgba(248,252,255,.44) 100%);
  --glass-border: rgba(255,255,255,.70);
  --glass-rim: rgba(255,255,255,.92);
  --glass-sheen: rgba(255,255,255,.32);
  --glass-bevel: rgba(35,71,109,.13);
  --glass-shadow:
    0 2px 4px rgba(28,53,81,.035),
    0 18px 38px rgba(53,87,124,.09),
    0 48px 96px -48px rgba(21,45,74,.42);
  --glass-shadow-hover:
    0 3px 7px rgba(28,53,81,.05),
    0 26px 54px rgba(53,87,124,.12),
    0 58px 112px -50px rgba(21,45,74,.46);
  --glass-blur: 16px;
  --glass-blur-mobile: 12px;
  --glass-saturate: 172%;

  --focus: rgba(49,93,151,.78);
  --radius-card: 26px;
  --radius-panel: 18px;
  --radius-control: 14px;
  --radius-pill: 999px;

  --nav-height: 62px;
  --content-width: 1080px;
  --narrow-width: 920px;
  --ease-apple: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --slider-ease: cubic-bezier(.2,1.04,.32,1);
  --duration-fast: 160ms;
  --duration-base: 320ms;

  --font-body: "Avenir Next", "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}

/* ------------------------------- Reset ---------------------------------- */
*,*::before,*::after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html{
  min-width: 320px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body{
  min-height: 100vh;
  overflow-x: hidden;
  isolation: isolate;
  background: var(--page-paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.is-slider-dragging{
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
img{
  display: block;
  max-width: 100%;
}
a{
  color: inherit;
  text-decoration: none;
}
button{
  border: 0;
  font: inherit;
  color: inherit;
}
button:not(:disabled),
a{
  -webkit-tap-highlight-color: transparent;
}
h1,h2,h3{
  font-weight: 550;
  text-wrap: balance;
}
p{
  text-wrap: pretty;
}
::selection{
  background: rgba(74,119,171,.18);
  color: var(--ink);
}

/* ------------------------------ i18n ------------------------------------ */
.lang-en{ display: none; }
html[data-lang="en"] .lang-en{ display: inline; }
html[data-lang="en"] .lang-zh,
html[data-lang="en"] .lang-sep{ display: none !important; }

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

/* --------------------------- Atmosphere --------------------------------- */
.site-backdrop,
.site-ambient,
.site-dots{
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.site-backdrop{
  z-index: 0;
  overflow: hidden;
  background-color: var(--page-paper);
  background-image:
    radial-gradient(ellipse 68% 48% at 8% -8%, rgba(128,175,219,.58) 0%, rgba(151,191,225,.22) 46%, transparent 75%),
    radial-gradient(ellipse 54% 42% at 96% -4%, rgba(178,212,238,.52) 0%, rgba(204,224,240,.14) 45%, transparent 74%),
    radial-gradient(ellipse 63% 34% at 48% 8%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.14) 58%, transparent 78%),
    radial-gradient(ellipse 92% 60% at 50% 58%, rgba(248,250,250,.46) 0%, transparent 82%),
    linear-gradient(180deg, #d4dde2 0%, #e7eff5 20%, #f7f8f7 50%, #f8f4ee 80%, #f3efe9 100%);
}
.site-backdrop::before{
  content: "";
  position: absolute;
  inset: -24% -12%;
  background:
    conic-gradient(from 222deg at 24% 4%, transparent 0deg, rgba(144,188,226,.28) 64deg, rgba(255,255,255,.06) 112deg, transparent 172deg),
    conic-gradient(from 26deg at 82% -4%, transparent 0deg, rgba(231,242,251,.34) 58deg, transparent 130deg);
  filter: blur(56px) saturate(1.04);
  opacity: .92;
  animation: field-breathe 24s ease-in-out infinite alternate;
}
.site-backdrop::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(116deg, transparent 14%, rgba(255,255,255,.36) 38%, rgba(255,255,255,.05) 58%, transparent 72%),
    radial-gradient(ellipse 72% 38% at 50% 110%, rgba(250,242,232,.82), transparent 74%);
  mix-blend-mode: soft-light;
  opacity: .72;
}
.site-ambient{
  z-index: 0;
  overflow: hidden;
  opacity: .34;
  filter: blur(36px);
  background:
    radial-gradient(ellipse 32% 23% at 26% 30%, rgba(137,181,221,.32), transparent 72%),
    radial-gradient(ellipse 27% 22% at 72% 16%, rgba(203,227,246,.48), transparent 72%),
    radial-gradient(ellipse 35% 23% at 62% 78%, rgba(184,211,234,.22), transparent 76%);
  transform: translate3d(-1%,0,0) scale(1.03);
  animation: ambient-drift 30s ease-in-out infinite alternate;
}
.site-dots{
  z-index: 0;
  background-image: radial-gradient(circle, rgba(62,104,151,.15) 1px, transparent 1.2px);
  background-size: 92px 92px;
  opacity: .42;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.58), rgba(0,0,0,.18) 48%, transparent 88%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.58), rgba(0,0,0,.18) 48%, transparent 88%);
}
html.is-page-hidden .site-backdrop::before,
html.is-page-hidden .site-ambient{
  animation-play-state: paused;
}
@keyframes field-breathe{
  from{ transform: translate3d(-1.2%,-.8%,0) scale(1); }
  to{ transform: translate3d(1.8%,.8%,0) scale(1.035); }
}
@keyframes ambient-drift{
  from{ transform: translate3d(-2%,-1%,0) scale(1.03); }
  to{ transform: translate3d(2%,1.4%,0) scale(1.065); }
}

/* ----------------------------- Primitive -------------------------------- */
.page-shell{
  position: relative;
  z-index: 1;
}
.container{
  width: min(var(--content-width), calc(100% - 48px));
  margin: 0 auto;
}
.container-narrow{
  width: min(var(--content-width), calc(100% - 48px));
  margin: 0 auto;
}
.page-main{
  position: relative;
  z-index: 1;
  padding-top: calc(var(--nav-height) + 46px);
  padding-bottom: 64px;
}
.site-footer{
  position: relative;
  z-index: 1;
  padding: 16px 24px 36px;
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: .045em;
  text-align: center;
}
.site-footer__inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.site-footer__dot{
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

/* Liquid Glass 的 CSS 基线：模糊、染色、镜面高光、倒角阴影四层缺一不可。
   这里不是普通 Glassmorphism：有明确的 1px 高阶镜面描边和上下倒角。 */
.glass-card{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow:
    0 1px 0 rgba(255,255,255,.98) inset,
    1px 0 0 rgba(255,255,255,.40) inset,
    -1px 0 0 rgba(255,255,255,.40) inset,
    0 -1px 0 rgba(255,255,255,.32) inset,
    0 -22px 36px -32px var(--glass-bevel) inset,
    var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  transition:
    transform 380ms var(--ease-out),
    border-color var(--duration-base) ease,
    box-shadow var(--duration-base) ease;
}
.glass-card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(104% 80% at 14% -16%, rgba(255,255,255,.74) 0%, rgba(255,255,255,.12) 46%, transparent 68%),
    radial-gradient(54% 46% at 102% 0%, rgba(158,202,239,.16) 0%, transparent 72%),
    linear-gradient(128deg, rgba(255,255,255,.20), transparent 36%, rgba(255,255,255,.05) 74%, rgba(255,255,255,.18));
  transition: transform 420ms var(--ease-out), opacity var(--duration-base) ease;
}
.glass-card::after{
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  z-index: 3;
  height: 1px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.94) 18%, #fff 50%, rgba(255,255,255,.88) 82%, transparent);
  opacity: .92;
}
.glass-card > *{
  position: relative;
  z-index: 1;
}
@media (hover:hover){
  .glass-card:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.90);
    box-shadow:
      0 1px 0 rgba(255,255,255,1) inset,
      1px 0 0 rgba(255,255,255,.48) inset,
      -1px 0 0 rgba(255,255,255,.48) inset,
      0 -1px 0 rgba(255,255,255,.38) inset,
      0 -24px 40px -32px var(--glass-bevel) inset,
      var(--glass-shadow-hover);
  }
  .glass-card:hover::before{
    transform: translate3d(1.0%,-.8%,0) scale(1.012);
  }
}

/* ------------------------------ Navigation ------------------------------- */
/* 此处为 Liquid Glass，包含镜面高光描边和倒角内阴影，不是单纯的 Glassmorphism 模糊条。 */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background:
    linear-gradient(180deg, rgba(249,253,255,.66) 0%, rgba(230,243,253,.38) 52%, rgba(216,234,248,.28) 100%);
  border-bottom: 1px solid rgba(255,255,255,.63);
  box-shadow:
    0 1px 0 rgba(255,255,255,.86) inset,
    0 -1px 0 rgba(39,76,113,.07) inset,
    0 8px 26px -20px rgba(37,69,102,.34),
    0 22px 44px -38px rgba(37,69,102,.30);
  -webkit-backdrop-filter: blur(20px) saturate(176%);
  backdrop-filter: blur(20px) saturate(176%);
  transition: box-shadow var(--duration-base) ease;
}
.site-header::before{
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.96) 28%, #fff 52%, rgba(255,255,255,.82) 74%, transparent);
}
.site-header::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 160% at 22% 0%, rgba(255,255,255,.18), transparent 66%),
    linear-gradient(180deg, transparent, rgba(207,228,244,.12));
  opacity: 0;
  transition: opacity 260ms ease;
}
.site-header.is-scrolled{
  box-shadow:
    0 1px 0 rgba(255,255,255,.90) inset,
    0 -1px 0 rgba(39,76,113,.08) inset,
    0 12px 34px -22px rgba(31,60,94,.42),
    0 28px 52px -38px rgba(31,60,94,.32);
}
.site-header.is-scrolled::after{
  opacity: 1;
}
.nav-shell{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: min(var(--content-width), calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
  gap: 18px;
}
.nav-brand{
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  gap: 10px;
  color: var(--ink);
}
.nav-logo{
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 10px;
  object-fit: cover;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 4px 10px rgba(37,71,108,.12);
}
.nav-brand-name{
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .035em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nav-tools{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}
.nav-links{
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav-link,
.nav-current{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .025em;
  white-space: nowrap;
}
a.nav-link{
  transition:
    color var(--duration-fast) ease,
    background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    transform var(--duration-fast) ease;
}
a.nav-link:hover{
  color: var(--ink);
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.42);
  transform: translateY(-1px);
}
.nav-current{
  color: var(--ink);
  font-weight: 600;
  background:
    linear-gradient(145deg, rgba(249,253,255,.52), rgba(204,229,248,.28));
  border-color: rgba(255,255,255,.70);
  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 -1px 0 rgba(39,76,113,.06) inset,
    0 5px 14px -10px rgba(38,73,108,.36);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}

/* Language switch: 同样使用 Liquid Glass 滑块，而不是纯白胶囊。 */
.lang-switch{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  flex: 0 0 auto;
  width: 74px;
  height: 36px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.70);
  border-radius: var(--radius-pill);
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.45), transparent 52%),
    linear-gradient(145deg, rgba(226,241,252,.40), rgba(188,216,239,.22));
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 -1px 0 rgba(38,72,105,.08) inset,
    0 6px 18px -14px rgba(38,73,108,.44);
  -webkit-backdrop-filter: blur(12px) saturate(165%);
  backdrop-filter: blur(12px) saturate(165%);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.lang-glider{
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.91);
  border-radius: var(--radius-pill);
  background:
    radial-gradient(100% 120% at 24% -35%, rgba(255,255,255,.92), transparent 62%),
    linear-gradient(180deg, rgba(245,252,255,.66), rgba(200,226,245,.42) 58%, rgba(235,247,253,.47));
  box-shadow:
    0 1px 1px rgba(255,255,255,.96) inset,
    0 -1px 1px rgba(32,70,108,.12) inset,
    0 5px 12px -8px rgba(34,68,103,.48);
  opacity: 0;
  transform: translate3d(0,0,0);
  transition:
    transform 360ms var(--slider-ease),
    width 300ms var(--slider-ease),
    opacity 160ms ease;
}
.lang-switch.is-ready .lang-glider{
  opacity: 1;
}
.lang-switch.is-dragging{
  cursor: grabbing;
}
.lang-switch.is-dragging .lang-glider,
.lang-switch.is-repositioning .lang-glider{
  transition: none;
}
.lang-option{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 28px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: .01em;
  cursor: pointer;
}
.lang-option[aria-pressed="true"]{
  color: var(--ink);
  font-weight: 700;
}

/* ------------------------------ Buttons --------------------------------- */
.glass-button{
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 17px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: var(--radius-control);
  background:
    radial-gradient(120% 140% at 20% -34%, rgba(255,255,255,.78), transparent 58%),
    linear-gradient(135deg, rgba(239,248,254,.54), rgba(196,223,243,.32) 58%, rgba(255,255,255,.44));
  background-size: 100% 100%;
  color: var(--button-ink,var(--brand-deep));
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .015em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.98) inset,
    0 -1px 0 rgba(36,73,109,.12) inset,
    0 0 0 1px var(--button-edge,transparent) inset,
    0 2px 4px rgba(35,69,103,.035),
    0 10px 22px -16px rgba(35,69,103,.42);
  -webkit-backdrop-filter: blur(10px) saturate(170%);
  backdrop-filter: blur(10px) saturate(170%);
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-apple),
    box-shadow var(--duration-fast) ease,
    background-color var(--duration-fast) ease,
    filter var(--duration-fast) ease;
}
.glass-button::before{
  content: "";
  position: absolute;
  top: 0;
  left: 9%;
  right: 9%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.94), transparent);
}
.glass-button::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 20%, rgba(255,255,255,.24) 48%, transparent 68%);
  transform: translateX(-24%);
  transition: transform 600ms var(--ease-out);
}
.glass-button:hover{
  transform: translateY(-1px);
  filter: brightness(1.025);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -1px 0 rgba(36,73,109,.14) inset,
    0 0 0 1px var(--button-edge,transparent) inset,
    0 3px 7px rgba(35,69,103,.05),
    0 16px 30px -18px rgba(35,69,103,.48);
}
.glass-button:hover::after{
  transform: translateX(24%);
}
.glass-button:active{
  transform: translateY(1px) scale(.995);
}
.glass-button:focus-visible,
.lang-option:focus-visible,
.nav-link:focus-visible,
.tab:focus-visible,
a:focus-visible,
button:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.glass-button .button-arrow{
  font-size: 14px;
  line-height: 1;
  opacity: .8;
  transform: translateY(-.5px);
  transition: transform 180ms var(--ease-out);
}
.glass-button:hover .button-arrow{
  transform: translate3d(2px,-2px,0);
}
.button-tone-primary{
  --button-ink: var(--brand-deep);
  --button-edge: rgba(49,93,151,.20);
}
.button-tone-alternative{
  --button-ink: #7e440b;
  --button-edge: rgba(155,91,22,.19);
}
.button-tone-overseas{
  --button-ink: #81213e;
  --button-edge: rgba(137,43,70,.18);
}

/* ------------------------------- Utility -------------------------------- */
.eyebrow{
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.section-title{
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 550;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.section-title .lang-sep{
  color: rgba(49,93,151,.52);
  font-weight: 450;
}
.section-lead{
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.9;
}
.placeholder-note{
  color: var(--ink-muted);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: .015em;
}
.placeholder-note .lang-sep{
  opacity: .5;
}

/* Hero 入场：Apple 风格 ease-out，600ms，60ms 阶梯，总时长约 780ms。 */
[data-hero]{
  will-change: opacity, transform;
}
.hero-step-1{ animation-delay: 60ms; }
.hero-step-2{ animation-delay: 120ms; }
.hero-step-3{ animation-delay: 180ms; }
@keyframes hero-rise{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Scroll Reveal：Stripe 式克制 fade-up，threshold .12，rootMargin 底部 -40px。 */
html.js .reveal{
  opacity: 0;
  transform: translateY(16px);
}
html.js .reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 620ms var(--ease-apple),
    transform 620ms var(--ease-apple);
  transition-delay: var(--reveal-delay, 0ms);
}
@media (scripting:none){
  .reveal{ opacity: 1 !important; transform: none !important; }
}

/* -------------------------------- Home ---------------------------------- */
.home-main{
  padding-top: calc(var(--nav-height) + 34px);
  padding-bottom: 44px;
}
.home-hero{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: min(640px, calc(100svh - var(--nav-height) - 34px));
  padding: 54px 0 38px;
  text-align: center;
}
.hero-avatar{
  width: 88px;
  height: 88px;
  border: 1px solid rgba(255,255,255,.90);
  border-radius: 28px;
  object-fit: cover;
  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 18px 38px -18px rgba(29,57,88,.42),
    0 42px 70px -48px rgba(29,57,88,.34);
}
.home-title{
  margin-top: 24px;
  color: var(--ink);
  font-size: clamp(42px, 6.2vw, 68px);
  font-weight: 520;
  line-height: 1.08;
  letter-spacing: -.035em;
}
.home-title .lang-zh{
  color: var(--brand-deep);
  font-weight: 480;
}
.home-bio{
  max-width: 620px;
  margin-top: 17px;
  color: var(--ink-soft);
  font-size: clamp(14px,1.45vw,16px);
  line-height: 1.9;
  letter-spacing: .02em;
}
.social-panel{
  width: min(780px, 100%);
  margin-top: 42px;
  padding: 22px 26px 20px;
  border-radius: 24px;
}
.social-head{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 17px;
}
.social-head .section-title{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.social-head .section-title .lang-sep{
  font-size: 13px;
}
.social-grid{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 9px;
}
.social-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 7px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
  transition:
    background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-out);
}
.social-link:hover{
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.54);
  transform: translateY(-2px);
}
.social-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 15px;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.72), transparent 58%),
    rgba(228,242,252,.38);
  box-shadow:
    0 1px 0 rgba(255,255,255,.86) inset,
    0 -1px 0 rgba(37,72,105,.06) inset,
    0 8px 18px -14px rgba(37,72,105,.35);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
}
.social-icon img{
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: contain;
}
.social-panel .placeholder-note{
  margin-top: 14px;
}
.home-content{
  width: min(var(--content-width), calc(100% - 48px));
  margin: 0 auto;
}
.content-section{
  margin-top: 64px;
}
.section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  padding: 0 4px;
}
.section-head__copy{
  display: grid;
  gap: 8px;
}
.section-index{
  color: rgba(74,105,136,.64);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
}
.content-card{
  padding: clamp(24px, 4vw, 40px);
}
.welcome-card{
  position: relative;
}
.welcome-card::before{
  background:
    radial-gradient(100% 80% at 10% -20%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.14) 44%, transparent 68%),
    radial-gradient(46% 40% at 100% 8%, rgba(142,190,229,.17), transparent 72%),
    linear-gradient(128deg, rgba(255,255,255,.18), transparent 36%, rgba(255,255,255,.05) 74%, rgba(255,255,255,.15));
}
.welcome-copy{
  max-width: 76ch;
  font-size: clamp(17px,2.2vw,23px);
  line-height: 1.85;
  letter-spacing: -.012em;
  color: var(--ink);
}
.welcome-foot{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.35);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
}
.welcome-foot::before{
  content: "";
  width: 30px;
  height: 1px;
  background: rgba(49,93,151,.28);
}
.project-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(22px,4vw,48px);
  padding: clamp(24px, 4vw, 38px);
}
.project-copy{
  min-width: 0;
}
.project-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.project-label::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(49,93,151,.52);
  box-shadow: 0 0 0 4px rgba(49,93,151,.07);
}
.project-title{
  color: var(--ink);
  font-size: clamp(25px,3.4vw,34px);
  font-weight: 550;
  line-height: 1.28;
  letter-spacing: -.026em;
}
.project-copy p:not(.project-label):not(.placeholder-note){
  max-width: 58ch;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.85;
}
.project-copy .placeholder-note{
  margin-top: 15px;
}
.project-card .glass-button{
  flex: 0 0 auto;
}
.share-card{
  display: grid;
  grid-template-columns: minmax(0,.82fr) minmax(320px,1.18fr);
  align-items: center;
  gap: clamp(24px,4vw,44px);
  padding: clamp(24px,3.6vw,38px);
}
.share-copy p:not(.eyebrow){
  max-width: 44ch;
  margin-top: 13px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.85;
}
.share-meta{
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
}
.share-meta::before{
  content: "";
  width: 6px;
  height: 6px;
  border: 1px solid rgba(49,93,151,.46);
  border-radius: 50%;
}
.share-stage{
  min-width: 0;
}

/* Social share artwork — 与 og:image 的数据 SVG 使用同一构图。 */
.og-art{
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.80);
  border-radius: clamp(16px, 3vw, 34px);
  background-color: #eef3f6;
  background-image:
    radial-gradient(ellipse 60% 68% at 10% -8%, rgba(125,172,216,.55), transparent 74%),
    radial-gradient(ellipse 50% 54% at 97% 7%, rgba(183,216,241,.48), transparent 74%),
    linear-gradient(180deg, #d4dfe6 0%, #f0f5f8 48%, #f5f0e9 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.96) inset,
    -1px 0 0 rgba(255,255,255,.48) inset,
    0 -1px 0 rgba(255,255,255,.36) inset,
    0 2px 5px rgba(33,63,94,.045),
    0 22px 50px -30px rgba(33,63,94,.36);
  container-type: inline-size;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}
.og-art::before{
  content: "";
  position: absolute;
  inset: 3.1cqw;
  z-index: 0;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 3.4cqw;
  background:
    radial-gradient(100% 110% at 12% -20%, rgba(255,255,255,.48), transparent 44%),
    linear-gradient(145deg, rgba(239,248,254,.22), rgba(194,220,239,.10) 62%, rgba(255,255,255,.18));
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 -1px 0 rgba(47,80,112,.06) inset,
    0 20px 50px -34px rgba(31,62,92,.34) inset;
  pointer-events: none;
}
.og-art::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .36;
  background-image: radial-gradient(circle, rgba(68,110,151,.34) .82px, transparent 1px);
  background-size: 3.45cqw 3.45cqw;
  -webkit-mask-image: radial-gradient(ellipse 68% 88% at 55% 52%, #000 0%, transparent 74%);
  mask-image: radial-gradient(ellipse 68% 88% at 55% 52%, #000 0%, transparent 74%);
}
.og-art-avatar{
  position: absolute;
  top: 24.5%;
  left: 9.75%;
  z-index: 2;
  width: 26.7%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 5.1cqw;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 5px 14px rgba(35,67,99,.12),
    0 20px 40px -28px rgba(35,67,99,.36);
}
.og-art-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.og-art-wordmark{
  position: absolute;
  top: 50%;
  left: 42%;
  z-index: 2;
  transform: translateY(-50%);
  color: #1b2d46;
  font-size: clamp(20px, 4cqw, 48px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .005em;
}
.og-art-rule{
  position: absolute;
  top: 59.5%;
  left: 42.2%;
  z-index: 2;
  width: 16.6%;
  height: 1px;
  background: linear-gradient(90deg, rgba(48,83,120,.38), rgba(48,83,120,.06));
}
.og-art-escape{
  position: absolute;
  right: 6.8%;
  bottom: 8.6%;
  z-index: 2;
  color: rgba(41,72,105,.52);
  font-family: var(--font-mono);
  font-size: clamp(6px, 1.1cqw, 13px);
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* ------------------------------- Download -------------------------------- */
.download-main{
  padding-top: calc(var(--nav-height) + 44px);
}
.download-hero{
  width: min(var(--content-width), calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}
.download-eyebrow{
  margin-bottom: 16px;
}
.download-title{
  color: var(--ink);
  font-size: clamp(38px,5.7vw,58px);
  font-weight: 520;
  line-height: 1.12;
  letter-spacing: -.032em;
}
.download-title .lang-zh{
  color: var(--brand-deep);
  font-weight: 480;
}
.download-subtitle-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  min-height: 26px;
  margin-top: 18px;
}
.subtitle-rule{
  flex: 1;
  max-width: 164px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(49,93,151,.25), rgba(49,93,151,.06));
}
.subtitle-rule:last-child{
  transform: scaleX(-1);
}
.subtitle-text{
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: .035em;
  white-space: nowrap;
}
.subtitle-item{
  display: none;
}
.subtitle-item.is-active{
  display: inline;
}
.tab-nav-wrap{
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.tabs{
  position: relative;
  isolation: isolate;
  display: flex;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(217,235,248,.20));
  box-shadow:
    0 1px 0 rgba(255,255,255,.86) inset,
    0 -1px 0 rgba(44,80,114,.07) inset,
    0 2px 6px rgba(30,58,91,.04),
    0 16px 36px -27px rgba(44,80,114,.42);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.tab-glider{
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  z-index: 0;
  width: 0;
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: var(--radius-pill);
  background:
    radial-gradient(115% 110% at 20% -28%, rgba(255,255,255,.95), transparent 58%),
    linear-gradient(180deg, rgba(241,251,255,.72) 0%, rgba(192,221,243,.40) 58%, rgba(237,249,255,.52) 100%);
  box-shadow:
    0 1px 1px rgba(255,255,255,.98) inset,
    0 -1px 1px rgba(37,75,109,.12) inset,
    0 -10px 16px -14px rgba(37,75,109,.26) inset,
    0 1px 0 rgba(255,255,255,.60),
    0 8px 18px -12px rgba(37,75,109,.47);
  transform: translate3d(4px,0,0);
  transition:
    transform 420ms var(--slider-ease),
    width 320ms var(--slider-ease),
    opacity 160ms ease;
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
}
.tabs.is-ready .tab-glider{
  opacity: 1;
}
.tabs.is-dragging .tab-glider{
  transition: none;
  box-shadow:
    0 1px 1px rgba(255,255,255,.98) inset,
    0 -1px 1px rgba(37,75,109,.14) inset,
    0 -10px 16px -14px rgba(37,75,109,.28) inset,
    0 1px 0 rgba(255,255,255,.60),
    0 12px 22px -12px rgba(37,75,109,.48);
}
.tabs.is-repositioning .tab-glider{
  transition: none;
}
.tabs.is-dragging{
  cursor: grabbing;
}
.tab{
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 21px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--duration-fast) ease,
    background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}
.tab.is-active{
  color: var(--ink);
  font-weight: 600;
}
.tabs:not(.is-ready) .tab.is-active{
  background:
    radial-gradient(100% 100% at 20% 0%, rgba(255,255,255,.9), transparent 64%),
    rgba(224,240,251,.52);
  border-color: rgba(255,255,255,.82);
}
.tab:hover:not(.is-active){
  color: var(--ink-soft);
}
.tab-label{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .22em;
}
.tab-line-en,
.tab-line-zh{
  display: inline;
}
.tab .lang-sep{
  color: rgba(49,93,151,.55);
  font-weight: 400;
}

.download-panels{
  width: min(var(--content-width), calc(100% - 48px));
  margin: 23px auto 0;
}
.tab-panel{
  animation: none;
}
.tab-panel[hidden]{
  display: none;
}
.tab-panel.is-switching{
  animation: panel-in 320ms var(--ease-apple) both;
}
@keyframes panel-in{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}
.download-card{
  margin-bottom: 17px;
  padding: 26px 27px 15px;
}
.download-card-head{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  min-height: 36px;
  margin-bottom: 11px;
  padding: 0 3px;
}
.tag{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 12px;
  border: 1px solid rgba(255,255,255,.67);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: .035em;
  white-space: nowrap;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 4px 12px -10px rgba(37,71,103,.28);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
}
.tag-primary{
  color: var(--brand-deep);
  background: rgba(224,239,252,.43);
}
.tag-alternative{
  color: #7e440b;
  background: rgba(248,235,211,.44);
}
.tag-overseas{
  color: #81213e;
  background: rgba(248,225,232,.42);
}
.tag-formal{
  color: #506071;
  background: rgba(234,240,246,.42);
}
.download-card-title{
  justify-self: center;
  max-width: 100%;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.006em;
  text-align: center;
}
.download-card-title .lang-sep{
  color: rgba(49,93,151,.50);
  font-weight: 400;
}
.download-list{
  display: flex;
  flex-direction: column;
}
.download-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 68px;
  margin: 0 -11px;
  padding: 13px 12px;
  border: 1px solid transparent;
  border-radius: 15px;
  transition:
    background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}
.download-row + .download-row{
  border-top-color: rgba(255,255,255,.29);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.download-row:hover{
  background: rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.46);
}
.download-info{
  min-width: 0;
}
.download-info h3{
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.004em;
  overflow-wrap: anywhere;
}
.download-info p{
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.65;
}
.download-action{
  flex: 0 0 auto;
  min-width: 114px;
}
.wait-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 108px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px dashed rgba(55,78,101,.23);
  border-radius: var(--radius-control);
  background: rgba(247,249,250,.22);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.wait-chip::before{
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(55,78,101,.32);
}
.formal-card .download-row{
  min-height: 64px;
}

/* -------------------------------- OG ------------------------------------ */
.og-main{
  padding-top: calc(var(--nav-height) + 34px);
  padding-bottom: 64px;
}
.og-page{
  width: min(var(--content-width), calc(100% - 48px));
  margin: 0 auto;
}
.og-head{
  max-width: 760px;
  margin: 0 auto 18px;
  text-align: center;
}
.og-title{
  margin-top: 12px;
  color: var(--ink);
  font-size: clamp(30px,4.2vw,44px);
  font-weight: 540;
  line-height: 1.2;
  letter-spacing: -.028em;
}
.og-title .lang-sep{
  color: rgba(49,93,151,.50);
  font-weight: 400;
}
.og-description{
  max-width: 60ch;
  margin: 12px auto 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.8;
}
.og-stage{
  width: min(1200px, calc(100vw - 48px));
  margin-left: calc((100% - min(1200px, calc(100vw - 48px))) / 2);
  margin-right: 0;
  padding: 0;
}
.og-note{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 840px;
  margin: 24px auto 0;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 16px;
  background: rgba(243,249,253,.22);
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.8;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}
.og-note::before{
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: .6em;
  border-radius: 50%;
  background: rgba(49,93,151,.4);
}

/* ---------------------------- Interaction/fallback ---------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-header{ background: rgba(245,250,254,.94); }
  .glass-card{ background: rgba(244,250,255,.94); }
  .glass-button{
    background: rgba(238,248,254,.95);
  }
  .lang-switch{ background: rgba(239,248,254,.95); }
  .lang-glider{ background: rgba(235,247,254,.98); }
  .tabs{ background: rgba(240,249,254,.95); }
  .tab-glider{ background: rgba(231,245,253,.98); }
  .social-icon{ background: rgba(238,248,254,.96); }
  .og-note{ background: rgba(243,249,253,.9); }
}
@media (prefers-contrast: more){
  .glass-card{ background: rgba(247,251,254,.92); }
  .download-info p,
  .home-bio,
  .section-lead{ color: #3c4c5d; }
}
@media (prefers-reduced-transparency: reduce){
  .site-header,
  .glass-card,
  .glass-button,
  .lang-switch,
  .tabs,
  .og-note{
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(246,250,253,.96);
  }
  .tab-glider,
  .lang-glider{ background: rgba(228,242,252,.98); }
}

@media (hover:none){
  .glass-card:hover,
  .glass-button:hover,
  .social-link:hover,
  a.nav-link:hover{
    transform: none;
  }
  .glass-card:hover::before{
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference){
  [data-hero]{
    animation: hero-rise 600ms var(--ease-apple) both;
  }
}
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior: auto;
  }
  *,*::before,*::after{
    animation: none !important;
    transition: none !important;
  }
  .site-backdrop::before,
  .site-ambient{
    animation: none !important;
  }
  html.js .reveal,
  html.js .reveal.is-visible{
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 900px){
  :root{
    --nav-height: 58px;
    --content-width: 760px;
    --narrow-width: 720px;
    --radius-card: 22px;
  }
  .nav-shell{
    width: min(var(--content-width), calc(100% - 48px));
    gap: 10px;
  }
  .nav-brand-name{
    font-size: 12px;
  }
  .nav-logo{
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }
  .nav-link,
  .nav-current{
    min-height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }
  .lang-switch{
    width: 68px;
    height: 34px;
  }
  .home-hero{
    padding-top: 44px;
  }
  .home-title{
    font-size: clamp(38px,8vw,54px);
  }
  .section-head{
    gap: 16px;
  }
  .project-card{
    align-items: flex-start;
    flex-direction: column;
  }
  .project-card .glass-button{
    width: 100%;
  }
  .share-card{
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .share-copy p:not(.eyebrow){
    max-width: 60ch;
  }
}

@media (max-width: 640px){
  :root{
    --nav-height: 56px;
    --content-width: 100%;
    --narrow-width: 100%;
    --glass-blur: 12px;
    --glass-blur-mobile: 12px;
    --radius-card: 20px;
    --radius-panel: 16px;
    --radius-control: 13px;
  }
  .container,
  .container-narrow,
  .download-hero,
  .download-panels,
  .home-content,
  .og-page{
    width: calc(100% - 28px);
  }
  .site-header{
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    backdrop-filter: blur(16px) saturate(165%);
  }
  .nav-shell{
    width: calc(100% - 28px);
    gap: 6px;
  }
  .nav-brand{
    gap: 6px;
  }
  .nav-logo{
    width: 24px;
    height: 24px;
    border-radius: 8px;
  }
  .nav-brand-name{
    max-width: 110px;
    font-size: 12px;
    letter-spacing: .01em;
  }
  .nav-tools{
    gap: 4px;
  }
  .nav-links{
    gap: 0;
  }
  .nav-link,
  .nav-current{
    min-height: 36px;
    padding: 0 7px;
    font-size: 11.5px;
  }
  .lang-switch{
    width: 62px;
    height: 32px;
    padding: 3px;
  }
  .lang-option{
    min-height: 24px;
    font-size: 10px;
  }
  .page-main,
  .download-main{
    padding-top: calc(var(--nav-height) + 31px);
  }
  .home-main{
    padding-top: calc(var(--nav-height) + 16px);
  }
  .home-hero{
    min-height: auto;
    padding: 35px 0 12px;
  }
  .hero-avatar{
    width: 76px;
    height: 76px;
    border-radius: 23px;
  }
  .home-title{
    margin-top: 20px;
    font-size: clamp(35px,10.5vw,46px);
    line-height: 1.12;
  }
  .home-bio{
    margin-top: 14px;
    padding: 0 10px;
    font-size: 14px;
    line-height: 1.85;
  }
  .social-panel{
    margin-top: 30px;
    padding: 18px 14px 15px;
    border-radius: 20px;
  }
  .social-head{
    margin-bottom: 12px;
  }
  .social-head .section-title{
    font-size: 14px;
  }
  .social-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 5px;
  }
  .social-link{
    padding: 9px 4px;
  }
  .social-icon{
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
  .social-icon img{
    width: 25px;
    height: 25px;
  }
  .section-title{
    font-size: clamp(22px,6.4vw,28px);
  }
  .content-section{
    margin-top: 46px;
  }
  .section-head{
    margin-bottom: 16px;
    padding: 0 2px;
  }
  .content-card{
    padding: 22px 18px;
  }
  .welcome-copy{
    font-size: 17px;
    line-height: 1.9;
  }
  .welcome-foot{
    margin-top: 20px;
    padding-top: 15px;
    font-size: 9.5px;
  }
  .project-card{
    padding: 22px 18px;
    gap: 22px;
  }
  .project-title{
    font-size: 27px;
  }
  .share-card{
    padding: 22px 18px;
  }
  .share-copy p:not(.eyebrow){
    font-size: 13px;
  }
  .download-hero{
    padding-top: 8px;
  }
  .download-title{
    font-size: clamp(34px,10vw,44px);
  }
  .download-subtitle-row{
    gap: 10px;
    margin-top: 14px;
  }
  .subtitle-rule{
    max-width: 45px;
  }
  .subtitle-text{
    max-width: 68%;
    font-size: 11.5px;
    letter-spacing: .015em;
    white-space: normal;
  }
  .tab-nav-wrap{
    margin-top: 23px;
  }
  .tabs{
    width: 100%;
    padding: 4px;
    border-radius: 20px;
  }
  .tab{
    flex: 1 1 0;
    min-height: 54px;
    padding: 6px 4px;
    border-radius: 16px;
    font-size: 10.5px;
    white-space: normal;
  }
  .tab-glider{
    top: 4px;
    bottom: 4px;
    border-radius: 16px;
  }
  .tab-label{
    flex-direction: column;
    gap: 1px;
    line-height: 1.35;
  }
  .tab-line-en,
  .tab-line-zh{
    display: block;
    max-width: 100%;
  }
  .tab-line-en{
    font-size: 10.5px;
    letter-spacing: .005em;
  }
  .tab-line-zh{
    font-size: 11.5px;
    font-weight: 600;
  }
  .download-panels{
    margin-top: 17px;
  }
  .download-card{
    padding: 20px 16px 12px;
    margin-bottom: 14px;
  }
  .download-card-head{
    grid-template-columns: 1fr;
    grid-template-areas:
      "tag"
      "title";
    gap: 8px;
    margin-bottom: 11px;
  }
  .download-card-head .tag{
    grid-area: tag;
    min-height: 26px;
    padding-inline: 10px;
    font-size: 10.5px;
  }
  .download-card-title{
    grid-area: title;
    font-size: 14.5px;
  }
  .download-row{
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    margin: 0 -5px;
    padding: 14px 9px;
    border-radius: 14px;
  }
  .download-row:hover{
    background: transparent;
    border-color: transparent;
  }
  .download-info h3{
    font-size: 13.5px;
  }
  .download-info p{
    font-size: 12px;
  }
  .download-action,
  .wait-chip{
    width: 100%;
    min-height: 44px;
  }
  .og-main{
    padding-top: calc(var(--nav-height) + 34px);
  }
  .og-head{
    margin-bottom: 20px;
  }
  .og-title{
    font-size: clamp(28px,7.4vw,36px);
  }
  .og-description{
    font-size: 13px;
  }
  .og-stage{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .og-art{
    border-radius: 17px;
  }
  .og-art::before{
    inset: 10px;
    border-radius: 12px;
  }
  .og-note{
    margin-top: 18px;
    padding: 13px 14px;
    font-size: 11px;
  }
  .site-footer{
    padding-bottom: 26px;
  }
  .site-footer__inner{
    gap: 7px;
  }
}

@media (max-width: 360px){
  .nav-brand-name{
    max-width: 78px;
    font-size: 10px;
  }
  .nav-link,
  .nav-current{
    padding-inline: 5px;
    font-size: 10px;
  }
  .lang-switch{
    width: 58px;
  }
  .social-grid{
    gap: 3px;
  }
}