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

@keyframes astroFadeIn {
	from {
		opacity: 0;
		mix-blend-mode: plus-lighter;
	}
	to {
		opacity: 1;
		mix-blend-mode: plus-lighter;
	}
}

@keyframes astroFadeOut {
	from {
		opacity: 1;
		mix-blend-mode: plus-lighter;
	}
	to {
		opacity: 0;
		mix-blend-mode: plus-lighter;
	}
}

@keyframes astroSlideFromRight {
	from {
		transform: translateX(100%);
	}
}

@keyframes astroSlideFromLeft {
	from {
		transform: translateX(-100%);
	}
}

@keyframes astroSlideToRight {
	to {
		transform: translateX(100%);
	}
}

@keyframes astroSlideToLeft {
	to {
		transform: translateX(-100%);
	}
}

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}

	[data-astro-transition-scope] {
		animation: none !important;
	}
}
/* Route announcer */
	.astro-route-announcer {
		position: absolute;
		left: 0;
		top: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
		white-space: nowrap;
		width: 1px;
		height: 1px;
	}/*
 * Watcha Wiki design tokens — paper editorial system.
 * 唯一事实源：色票、字体、字号阶梯与表面层级都从这里出。
 * 阅读壳、正文组件与 Landing 只引用这里的 token，不各自发明颜色。
 */

@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://watcha.tos-cn-beijing.volces.com/prod/wiki/fonts/74d7d9ab0970a7ba/noto-sans-sc-site.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("https://watcha.tos-cn-beijing.volces.com/prod/wiki/fonts/74d7d9ab0970a7ba/noto-serif-sc-site.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("https://watcha.tos-cn-beijing.volces.com/prod/wiki/fonts/74d7d9ab0970a7ba/eb-garamond-site.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("https://watcha.tos-cn-beijing.volces.com/prod/wiki/fonts/74d7d9ab0970a7ba/eb-garamond-italic-site.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://watcha.tos-cn-beijing.volces.com/prod/wiki/fonts/74d7d9ab0970a7ba/ibm-plex-mono-400-site.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://watcha.tos-cn-beijing.volces.com/prod/wiki/fonts/74d7d9ab0970a7ba/ibm-plex-mono-500-site.woff2") format("woff2");
}

:root {
  /* 纸张表面 */
  --paper: #faf8f3;
  --paper-2: #fffdf8;
  --card: #fcfaf5;

  /* 墨色文字 */
  --ink: #1a1611;
  --ink-2: #4a443b;
  --mut: #8b8172;

  /* 纸线边框 */
  --line: #e4dcc9;
  --line-2: #d6ccb3;

  /* 朱色：编辑感强调，少量使用 */
  --red: #bf3a26;
  --red-deep: #9c2d1d;
  --red-soft: #d9755a;

  /* 观猹绿：选中、通过、品牌动作 */
  --watcha: #5cb53f;
  --watcha-deep: #3a7d24;
  --watcha-soft: #ecf4e2;
  --watcha-line: #cfe4ba;

  /* 深色区块 */
  --ink-surface: #16130f;
  --ink-surface-text: #eae4d6;

  /* 字体 */
  --font-serif: "Noto Serif SC", "EB Garamond", serif;
  --font-gara: "EB Garamond", "Noto Serif SC", serif;
  --font-sans: "Noto Sans SC", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, "Noto Sans Mono CJK SC", monospace;

  /*
   * 九级字号阶梯：页面与组件只能从这里取字号。
   * Landing 的超大编辑标题、印章和装饰数字属于展示性例外。
   */
  --t-display: 36px;
  --t-h2: 22px;
  --t-h3: 18px;
  --t-lead: 17px;
  --t-cardtitle: 16px;
  --t-body: 15px;
  --t-comp: 14px;
  --t-ui: 13px;
  --t-mono: 11px;

  --lh-title: 1.45;
  --lh-lead: 2;
  --lh-body: 2;
  --lh-comp: 1.9;
  --lh-ui: 1.6;

  /* 阅读壳几何 */
  --head-h: 64px;
  --shell-max: 1360px;
  --side-w: 248px;
  --rail-w: 218px;
  --article-measure: 716px;

  /* 兼容别名：保留给未挂载的主站 Vue 岛与 vendor 适配层 */
  --watcha-primary: var(--watcha);
  --watcha-primary-deep: var(--watcha-deep);
  --watcha-primary-soft: var(--watcha-soft);
  --watcha-primary-line: var(--watcha-line);
  --wiki-accent-ink: var(--watcha-deep);
  --wiki-accent-soft: var(--watcha-soft);
  --wiki-accent-line: var(--watcha-line);
  --watcha-background: var(--paper);
  --watcha-surface: var(--paper-2);
  --watcha-hover: var(--card);
  --watcha-text: var(--ink);
  --watcha-text-secondary: var(--ink-2);
  --watcha-text-muted: var(--mut);
  --watcha-border: var(--line);
  --wiki-font-sans: var(--font-sans);
  --wiki-font-mono: var(--font-mono);
  --wiki-ink: var(--ink);
  --wiki-body: var(--ink-2);
  --wiki-secondary: var(--ink-2);
  --wiki-muted: var(--mut);
  --wiki-border: var(--line);
  --wiki-divider: var(--line);
  --wiki-surface: var(--paper-2);
  --wiki-surface-subtle: var(--card);
  --wiki-surface-muted: var(--card);
  --wiki-radius-sm: 5px;
  --wiki-radius-md: 9px;
  --wiki-radius-lg: 12px;
  --wiki-radius-xl: 14px;

  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 150px;
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (max-width: 720px) {
  :root {
    --t-display: 28px;
  }
}

/* 纸面噪点：整站统一的一层薄纹理 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/*
 * 固定全屏的 blend layer 会让视频的每一帧带动整页重新合成。播放器请求后
 * 暂时关闭纸张噪点；静态阅读页仍保留原有质感。
 */
html[data-wiki-video-active] body::after {
  display: none;
}

::selection {
  background: var(--watcha-soft);
  color: var(--ink);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--paper);
}

::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border: 1px solid var(--paper);
  border-radius: 999px;
}

a {
  color: inherit;
  text-decoration: none;
}

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

input {
  font-family: inherit;
  border: none;
  outline: none;
  background: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--watcha-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}