:root {
  --c-bg: #f4f4f4;
  --c-panel: #ffffff;
  --c-panel-2: #ebebeb;
  --c-border: #e2e2e2;
  --c-accent: #1f1f1f;
  --c-accent-dark: #0b0b0b;
  --c-text: #1a1a1a;
  --c-muted: #6b6b6b;
  --c-success: #2f6b4f;
  --c-warn: #8a6a1f;
  --c-error: #a8322d;
  --c-faint: #9b9b9b;
  --c-mark: #cdcdcd;
  --c-line-soft: #efefef;
  --c-gutter: #fafafa;
  --c-on-accent: #ffffff;
  --c-on-accent-muted: rgba(255, 255, 255, 0.75);
  --c-on-accent-chip: rgba(255, 255, 255, 0.14);
  --c-on-accent-hi: rgba(255, 255, 255, 0.10);
  --c-shadow-near: rgba(17, 17, 17, 0.06);
  --c-shadow-far: rgba(17, 17, 17, 0.07);
  --c-shadow-faint: rgba(17, 17, 17, 0.035);
  --c-veil: rgba(17, 17, 17, 0.22);

  --shadow-panel: 0 1px 2px var(--c-shadow-faint);
  --shadow-card: 0 1px 2px var(--c-shadow-near), 0 12px 32px var(--c-shadow-far);
  --shadow-ghost: 0 1px 2px var(--c-shadow-faint);
  --shadow-raise: 0 1px 2px var(--c-shadow-near), 0 0 0 1px var(--c-border);
  --shadow-btn: 0 1px 2px var(--c-shadow-near);

  --r-panel: 8px;
  --r-card: 6px;
  --r-ctl: 8px;
  --r-seg: 7px;
  --r-seg-in: 5px;
  --r-sm: 4px;
  --r-pill: 999px;
  --r-shot: 10px;

  --f-display: "Inter", "Noto Sans SC", "PingFang SC", "PingFang TC", "Hiragino Sans", "Apple SD Gothic Neo", system-ui, sans-serif;
  --f-body: "Inter", "Noto Sans SC", "PingFang SC", "PingFang TC", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-body: 15px;
  --fs-small: 13px;
  --fs-h1: clamp(34px, 3.3vw, 46px);
  --fs-h2: clamp(24px, 2.5vw, 30px);
  --fs-h3: 20px;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 800;
  --leading-body: 1.6;
  --leading-prose: 1.85;
  --leading-title: 1.1;
  --tracking-display: -0.035em;
  --tracking-cjk: -0.01em;

  --gutter: 24px;
  --frame: min(1200px, calc(100% - 48px));
  --reading-width: 820px;
  --header-width: 1280px;
  --header-height: 72px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --duration-fast: 150ms;
  --duration-reveal: 450ms;
  --ease-standard: cubic-bezier(.2, .65, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
html.nav-open { overflow: hidden; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-normal);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[hidden] { display: none !important; }
img { max-width: 100%; }
svg { flex-shrink: 0; vertical-align: middle; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: var(--c-on-accent-hi); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }
::selection { background: var(--c-accent); color: var(--c-on-accent); }
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: var(--weight-display);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); line-height: var(--leading-title); letter-spacing: var(--tracking-cjk); }
h2 { font-size: var(--fs-h2); line-height: 1.25; letter-spacing: var(--tracking-cjk); }
h3 { font-size: var(--fs-h3); line-height: 1.4; }
p, li, dd { overflow-wrap: break-word; }
code, pre, kbd { font-family: var(--f-mono); }
code { overflow-wrap: anywhere; font-size: .9em; }
pre {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding: var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-gutter);
  color: var(--c-text);
  line-height: 1.75;
  tab-size: 2;
}
pre code { font-size: 12.5px; overflow-wrap: normal; word-break: normal; white-space: pre; }
hr { border: 0; border-top: 1px solid var(--c-border); }
figure { margin: 0; }
.grid > *, .split > *, .hero-panel > *, .footer-grid > * { min-width: 0; }
.nowrap { white-space: nowrap; }
.muted { color: var(--c-muted); }
.mono { font-family: var(--f-mono); }
.small { font-size: var(--fs-small); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--gutter);
  transform: translateY(-200%);
  padding: var(--space-3) var(--space-4);
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-radius: var(--r-ctl);
  z-index: 100;
}
.skip-link:focus { transform: none; }

.page { position: relative; min-height: 100vh; overflow-x: clip; }
.page::before, .page::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--c-border);
  pointer-events: none;
  z-index: 0;
}
.page::before { left: calc(50% - var(--frame) / 2); }
.page::after { left: calc(50% + var(--frame) / 2 - 1px); }
.frame { position: relative; width: var(--frame); margin-inline: auto; }
.wrap {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-width: 0;
}
.reading { max-width: var(--reading-width); }
.section { position: relative; padding-top: var(--space-8); padding-bottom: var(--space-8); }
.section-head { margin-bottom: var(--space-6); }
.section-head h2 { margin: var(--space-4) 0 var(--space-2); }
.section-head p { max-width: 60ch; margin: 0; color: var(--c-muted); }
.hr { position: relative; height: 1px; background: var(--c-border); z-index: 2; }
.cross {
  position: absolute;
  top: 0;
  width: 23px;
  height: 23px;
  margin: -11px 0 0 -11px;
  background: var(--c-bg);
  pointer-events: none;
}
.cross::before, .cross::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--c-mark); }
.cross::before { width: 13px; height: 1px; margin-left: -6.5px; }
.cross::after { width: 1px; height: 13px; margin-top: -6.5px; }
.cross-l { left: calc(50% - var(--frame) / 2 + .5px); }
.cross-r { left: calc(50% + var(--frame) / 2 - .5px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-ctl);
  background: var(--c-panel);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-btn);
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--shadow-btn), inset 0 1px 0 var(--c-on-accent-hi); }
.btn-primary:hover, .btn-primary.is-hover { background: var(--c-accent-dark); color: var(--c-on-accent); border-color: var(--c-accent-dark); }
.btn-secondary:hover, .btn-secondary.is-hover { background: var(--c-gutter); color: var(--c-text); }
.btn:active, .btn.is-active { box-shadow: inset 0 1px 2px var(--c-shadow-near); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--c-panel-2); color: var(--c-muted); border-color: var(--c-border); box-shadow: none; }
.btn.is-focus { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.btn-arrow { color: var(--c-muted); }
.btn-primary .btn-arrow { color: var(--c-on-accent-muted); }
.cta { display: grid; gap: 10px; margin-top: 28px; }
.cta .btn { display: flex; width: 100%; }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }

.topbar, #site-header { position: relative; z-index: 30; }
.topbar-in, .header-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-height); }
.topbar-in { height: 72px; padding-inline: 36px; }
.header-in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(100%, calc(var(--header-width) + var(--gutter) * 2));
  padding-inline: var(--gutter);
  margin-inline: auto;
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--c-text); flex-shrink: 0; }
.brand-logo, .brand-mark { width: 30px; height: 30px; border-radius: var(--r-ctl); flex-shrink: 0; }
.brand-logo { display: block; }
.brand-mark { position: relative; background: linear-gradient(180deg, var(--c-panel), var(--c-panel-2)); color: var(--c-text); box-shadow: var(--shadow-raise); }
.brand-mark::after { content: ""; position: absolute; inset: 8px; border-radius: var(--r-sm); border: 1px solid var(--c-mark); }
.brand-name { font-family: var(--f-display); font-weight: var(--weight-bold); font-size: 16px; letter-spacing: -.015em; white-space: nowrap; }
.topnav { display: flex; align-items: center; gap: 30px; min-width: 0; margin-left: auto; }
.topnav-list { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.topnav-list a { display: block; padding-block: 12px; font-size: 14.5px; font-weight: var(--weight-medium); color: var(--c-muted); text-decoration: none; white-space: nowrap; }
.topnav-list a:hover { color: var(--c-text); }
.topnav-list a[aria-current="page"] { color: var(--c-text); font-weight: var(--weight-bold); }
.header-tools { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; margin-left: auto; }
.language-picker { position: relative; }
.lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-panel);
  color: var(--c-text);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  box-shadow: var(--shadow-btn);
}
.lang-caret { font-size: 10px; color: var(--c-muted); }
.lang-short { display: none; }
.language-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  border: 1px solid var(--c-border);
  border-radius: var(--r-ctl);
  background: var(--c-panel);
  color: var(--c-text);
  box-shadow: var(--shadow-card);
  z-index: 5;
}
.language-menu a { display: block; min-height: 44px; padding: 10px 12px; text-decoration: none; border-radius: var(--r-sm); }
.language-menu a:hover, .language-menu a[aria-current] { background: var(--c-panel-2); color: var(--c-text); }
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-ctl);
  background: var(--c-panel);
  color: var(--c-text);
}
.menu-toggle svg { width: 20px; height: 20px; }
.menu-veil { position: fixed; inset: var(--header-height) 0 0; background: var(--c-veil); color: var(--c-text); border: 0; z-index: 1; }
.mobile-drawer {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  padding: var(--space-4) var(--gutter) var(--space-5);
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-panel);
  color: var(--c-text);
  box-shadow: var(--shadow-card);
  z-index: 3;
}
.mobile-drawer ul { list-style: none; margin: 0; padding: 0; }
.mobile-drawer a { display: block; width: 100%; min-height: 44px; padding: 11px 12px; text-decoration: none; border-radius: var(--r-sm); }
.mobile-drawer a:hover, .mobile-drawer a[aria-current] { background: var(--c-panel-2); color: var(--c-text); font-weight: var(--weight-bold); }
.drawer-languages { border-top: 1px solid var(--c-border); margin-top: var(--space-3) !important; padding-top: var(--space-3) !important; }

.card, .panel {
  min-width: 0;
  padding: var(--space-5);
  background: var(--c-panel);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-panel);
}
.panel { border-radius: var(--r-panel); }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.grid { display: grid; gap: var(--space-5); }
.grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prose { min-width: 0; line-height: var(--leading-prose); }
.prose h2 { margin-top: var(--space-8); margin-bottom: var(--space-5); scroll-margin-top: 24px; }
.prose h3 { margin-top: var(--space-6); }
.prose p, .prose ul, .prose ol { margin-block: var(--space-4); }
.prose li + li { margin-top: var(--space-2); }
.prose :not(pre) > code { background: var(--c-panel-2); color: var(--c-text); padding: 2px 4px; border-radius: var(--r-sm); }
.prose > :first-child { margin-top: 0; }
.line-section { position: relative; padding-left: 52px; }
.line-section::before { content: attr(data-line); position: absolute; left: 0; top: 0; width: 34px; font-family: var(--f-mono); font-size: 12px; color: var(--c-muted); border-right: 1px solid var(--c-border); }

.hero { position: relative; z-index: 1; padding-top: 20px; padding-bottom: 20px; overflow-x: clip; }
.hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 432px) minmax(0, 1fr);
  column-gap: 44px;
  align-items: center;
  margin-inline: 12px;
  padding: 64px 0 60px 56px;
  background: var(--c-panel);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.hero-copy { min-width: 0; }
.tag, .eyebrow, .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  padding: 4px 11px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-panel);
  color: var(--c-text);
  box-shadow: var(--shadow-btn);
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.tag { min-height: 28px; padding-left: 10px; padding-right: 12px; }
.tag-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--c-accent); flex-shrink: 0; }
.tag-sep { color: var(--c-muted); }
.eyebrow { min-height: 26px; font-family: var(--f-mono); font-size: 12px; font-weight: var(--weight-semibold); }
.badge { box-shadow: none; background: var(--c-panel-2); color: var(--c-text); }
.hero-title { margin: 22px 0 0; font-family: var(--f-display); font-weight: var(--weight-display); font-size: var(--fs-h1); line-height: 1.1; letter-spacing: var(--tracking-display); color: var(--c-text); }
.hero-title-en { display: block; }
.hero-title-zh { display: block; letter-spacing: var(--tracking-cjk); }
.hero-desc { margin: 24px 0 0; font-size: 15px; line-height: 1.75; color: var(--c-muted); }
.hero-desc strong { color: var(--c-text); font-weight: var(--weight-semibold); }
.devices { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--c-line-soft); list-style: none; }
.device { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--weight-medium); color: var(--c-text); text-decoration: none; }
.device svg { width: 16px; height: 16px; color: var(--c-muted); flex-shrink: 0; }
.devices-sep { width: 1px; height: 14px; background: var(--c-border); flex-shrink: 0; }
.store-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 10px; border: 1px solid var(--c-border); border-radius: var(--r-pill); background: var(--c-gutter); color: var(--c-text); font-size: 12px; font-weight: var(--weight-semibold); text-decoration: none; }
.store-pill svg { width: 11px; height: 11px; }

.hero-stage { min-width: 0; margin-right: 0; padding-top: 12px; }
.hero-screenshot { display: block; width: min(100%, 270px); height: auto; margin-inline: auto; border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.rc-wrap { position: relative; }
.rc-ghost { position: absolute; inset: 0; transform: translate(-12px, -12px); background: var(--c-panel); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: var(--shadow-ghost); }
.rulecard { position: relative; display: grid; grid-template-columns: 280px minmax(0, 1fr); min-width: 720px; background: var(--c-panel); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.rc-side { min-width: 0; padding: 22px 18px; border-right: 1px solid var(--c-border); }
.rc-file { font-family: var(--f-mono); font-size: 11px; color: var(--c-muted); }
.rc-title { margin: 10px 0 6px; font-family: var(--f-display); font-size: 17px; font-weight: var(--weight-bold); letter-spacing: -.015em; line-height: 1.3; }
.rc-desc { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--c-muted); }
.seg { display: flex; gap: 2px; margin-top: 18px; padding: 3px; background: var(--c-panel-2); color: var(--c-text); border-radius: var(--r-seg); }
.seg span { flex: 1 1 auto; padding: 5px 3px; border-radius: var(--r-seg-in); font-family: var(--f-mono); font-size: 10px; letter-spacing: -.02em; line-height: 1.3; text-align: center; color: var(--c-muted); white-space: nowrap; }
.seg .is-on { background: var(--c-panel); color: var(--c-text); font-weight: var(--weight-bold); box-shadow: var(--shadow-raise); }
.rc-group { margin: 18px 0 0; padding: 0; list-style: none; border: 1px solid var(--c-border); border-radius: var(--r-card); background: var(--c-panel); color: var(--c-text); }
.rc-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; font-size: 12.5px; font-weight: var(--weight-medium); }
.rc-row + .rc-row { border-top: 1px solid var(--c-line-soft); }
.rc-row svg { width: 15px; height: 15px; color: var(--c-muted); }
.rc-row-label { flex: 1 1 auto; }
.rc-row-val { font-family: var(--f-mono); font-size: 11px; color: var(--c-muted); }
.rc-chev { color: var(--c-muted); }
.rc-main { min-width: 0; padding-top: 18px; padding-bottom: 16px; }
.rc-head { display: flex; align-items: center; gap: 10px; padding: 0 18px 14px; }
.rc-sect { padding: 2px 7px; border: 1px solid var(--c-border); border-radius: var(--r-sm); font-family: var(--f-mono); font-size: 11px; font-weight: var(--weight-bold); }
.rc-count { font-size: 12px; color: var(--c-muted); }
.rules-scroll { overflow-x: auto; max-width: 100%; }
.rules { margin: 0; padding: 0; min-width: 436px; list-style: none; border-bottom: 1px solid var(--c-line-soft); }
.rule { display: grid; grid-template-columns: 34px 122px 144px 72px minmax(0, 1fr); align-items: center; min-height: 34px; border-top: 1px solid var(--c-line-soft); font-family: var(--f-mono); font-size: 11px; line-height: 1.2; color: var(--c-text); white-space: nowrap; }
.rule-colhead { min-height: 26px; font-family: var(--f-body); font-size: 10.5px; font-weight: var(--weight-medium); color: var(--c-muted); }
.ln { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; background: var(--c-gutter); color: var(--c-muted); border-right: 1px solid var(--c-line-soft); font-family: var(--f-mono); font-size: 10.5px; }
.r-type { padding-left: 14px; font-weight: var(--weight-semibold); }
.r-val { color: var(--c-text); }
.comma { color: var(--c-muted); }
.pol { display: inline-block; padding: 2px 6px; border-radius: var(--r-sm); background: var(--c-panel-2); color: var(--c-text); font-size: 10.5px; font-weight: var(--weight-bold); letter-spacing: .02em; }
.rule.is-final { background: var(--c-accent); color: var(--c-on-accent); border-top-color: var(--c-accent); }
.rule.is-final .ln { background: var(--c-accent); color: var(--c-on-accent-muted); border-right-color: var(--c-on-accent-chip); }
.rule.is-final .r-val, .rule.is-final .comma { color: var(--c-on-accent-muted); }
.rule.is-final .pol { background: var(--c-on-accent-chip); color: var(--c-on-accent); }
.r-note { font-family: var(--f-body); font-size: 11px; font-weight: var(--weight-medium); }
.hero-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 26px 0 0; padding: 0; list-style: none; font-family: var(--f-mono); font-size: 11.5px; color: var(--c-muted); }
.fact-k { margin-right: 6px; font-family: var(--f-body); font-size: 11.5px; color: var(--c-muted); }
.facts-sep { width: 1px; height: 12px; background: var(--c-border); }
.peek { position: relative; z-index: 1; }
.peek-in { padding: 100px 68px 80px; }
.peek-title { margin: 16px 0 8px; font-size: 30px; font-weight: var(--weight-display); letter-spacing: -.02em; line-height: 1.2; }
.peek-sub { margin: 0; max-width: 560px; font-size: 15px; color: var(--c-muted); }

.site-footer { position: relative; border-top: 1px solid var(--c-border); padding-top: var(--space-8); padding-bottom: var(--space-6); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr .7fr; gap: var(--space-6); }
.footer-intro { max-width: 36ch; color: var(--c-muted); }
.footer-title { margin: 0 0 var(--space-4); font-size: 14px; font-weight: var(--weight-bold); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a { display: block; padding-block: 6px; color: var(--c-muted); font-size: 13px; text-decoration: none; }
.footer-links a:hover { color: var(--c-text); text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-5); border-top: 1px solid var(--c-border); margin-top: var(--space-7); padding-top: var(--space-5); color: var(--c-muted); font-size: 12px; }
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.reveal { opacity: 1; transform: none; }
.reveal-ready .reveal:not(.shown) { opacity: 0; transform: translateY(12px); }
.reveal-ready .reveal { transition: opacity var(--duration-reveal) var(--ease-standard), transform var(--duration-reveal) var(--ease-standard); }
.reveal-ready .reveal.shown { opacity: 1; transform: none; }

@media (max-width: 1279px) {
  .header-in > .topnav { display: none; }
  .header-in .menu-toggle { display: inline-flex; }
  .header-tools { margin-left: auto; }
}
@media (max-width: 1100px) {
  .topbar-in .topnav, .topbar-in .topnav-list { gap: 22px; }
  .hero-panel { grid-template-columns: minmax(0, 1fr); row-gap: 48px; padding: 52px 0 48px 40px; }
  .hero-copy { padding-right: 40px; max-width: 560px; }
  .peek-in { padding: 88px 52px 72px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  :root { --fs-h1: clamp(24px, 7.4vw, 30px); --gutter: 20px; }
  .grid-three { grid-template-columns: minmax(0, 1fr); }
  .topbar-in { flex-wrap: wrap; height: auto; padding: 14px 20px; row-gap: 10px; }
  .topbar-in .topnav { width: 100%; overflow-x: auto; gap: 18px; }
  .topbar-in .topnav-list { gap: 18px; }
  .hero-panel { padding: 36px 0 36px 22px; margin-inline: 8px; }
  .hero-copy { padding-right: 22px; }
  .hero-stage { margin-right: 22px; }
  .rulecard { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .rc-side { border-right: 0; border-bottom: 1px solid var(--c-border); }
  .rc-main { overflow: hidden; }
  .seg { flex-wrap: wrap; }
  .hero-facts { padding-right: var(--space-2); }
  .peek-in { padding: 64px 28px 56px; }
  .peek-title { font-size: 24px; }
  .section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; --frame: calc(100% - 32px); }
  .wrap { padding-inline: var(--gutter); }
  .header-in { gap: var(--space-2); }
  .header-tools { gap: var(--space-2); margin-left: auto; }
  .brand-name { font-size: 13px; }
  .brand-logo, .brand-mark { width: 26px; height: 26px; }
  .brand { gap: 7px; }
  .header-in .lang { min-height: 44px; padding-inline: 10px; }
  .lang-full { display: none; }
  .lang-short { display: inline; }
  .grid-two, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .card, .panel { padding: var(--space-4); }
  .tilt, [data-tilt] { transform: none !important; }
  .hero-title { letter-spacing: var(--tracking-cjk); }
  .hero-title-en { letter-spacing: var(--tracking-display); }
  .hero-title-zh .nowrap { white-space: normal; }
  .devices { gap: 8px; }
  .devices-sep { display: none; }
  .hero-facts { gap: 8px 12px; }
  .hero-facts .facts-sep { display: none; }
  .line-section { padding-left: 38px; }
  .line-section::before { width: 26px; }
  .footer-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal-ready .reveal:not(.shown) { opacity: 1; transform: none; }
}