:root {
  --font-logo: "Daybook Fraunces", serif;
  --font-ui: "LXGW WenKai Screen", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "LXGW WenKai Screen", "PingFang SC", "Microsoft YaHei", serif;
  --font-serif: "Noto Serif SC Variable", "Songti SC", "STSong", serif;
  --font-mono: "Maple Mono CN", "Maple Mono", "SFMono-Regular", "Cascadia Code", "JetBrains Mono", ui-monospace, monospace;
  --font-icon: "Material Symbols Rounded";
  --font-meta: "Cormorant Garamond Meta", var(--font-serif);
  --font-signature-cn: var(--font-ui);
  --font-signature-en: "Daybook Allura", cursive;
  --side-rail-width: 220px;
  --persistent-logo-left: 40px;
  --persistent-logo-top: 23px;
  --side-rail-top: calc(var(--persistent-logo-top) + 4.5rem);
  --hero-avatar-size: clamp(190px, 22vw, 260px);
  --hero-avatar-size-mobile: clamp(148px, 44vw, 178px);
  --home-hero-top: clamp(8rem, 20vh, 13rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-page: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-golden: cubic-bezier(0.146, 0.854, 0.382, 1);
  --article-enter-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --motion-expressive-fast-spatial-duration: 350ms;
  --motion-expressive-fast-spatial-easing: cubic-bezier(0.42, 1.67, 0.21, 0.9);
  --motion-expressive-effects-duration: 200ms;
  --motion-expressive-effects-easing: cubic-bezier(0.34, 0.8, 0.34, 1);
  --duration-fast: 240ms;
  --duration-normal: 420ms;
  --duration-shared: 720ms;
  --duration-article-enter: 500ms;
  --post-enter-duration: 500ms;
  --post-enter-y: 3rem;
  --post-stagger-step: 45ms;
  --transition-exit-delay: 320ms;
  --transition-cleanup-delay: 1120ms;
  --notes-content-width: 44rem;
  --notes-aside-width: 300px;
  --notes-page-gap: clamp(72px, 9vw, 132px);
  --note-body-width: 44rem;
  --note-toc-width: clamp(11rem, 14vw, 13rem);
  --note-toc-top: clamp(2.25rem, 5vh, 4rem);
  --note-toc-hide-y: 1.75rem;
  --toc-collapse-duration: 280ms;
  --reading-toc-rail-eligible: 0;
  --reading-toc-rail-direction: -1;
  --reading-toc-rail-controls-reserve: 9rem;
  --reading-toc-rail-height: min(70vh, calc(100dvh - var(--note-toc-top) - var(--reading-toc-rail-controls-reserve)));
  --reading-toc-rail-line-width: 1.2px;
  --reading-toc-rail-accent-line-width: 1.6px;
  --reading-toc-rail-line-inset: 188px;
  --reading-toc-rail-dot-size: 4px;
  --reading-toc-rail-dot-hit-size: 24px;
  --reading-toc-rail-idle-amplitude: 10.4px;
  --reading-toc-rail-max-extra-amplitude: 14px;
  --reading-toc-rail-bulge-half-height: 56px;
  --reading-toc-rail-label-gap: 12px;
  --reading-toc-rail-label-edge-inset: 26px;
  --reading-toc-rail-title-max-width: 9.5rem;
  --reading-toc-activation-line: 96px;
  --reading-toc-bottom-inset: 96px;
  --reading-toc-rail-state-duration: 360ms;
  --reading-toc-rail-label-duration: 180ms;
  --reading-toc-rail-state-ease: var(--ease-out);
  --reading-toc-rail-label-ease: var(--ease-out);
  --reading-toc-rail-label-shift: 6px;
  --reading-toc-rail-collapse-shift: 10px;
  --note-title-size: clamp(1.55rem, 2vw, 1.625rem);
  --note-text-size: 15px;
  --color-page: oklch(96% 0.005 298);
  --color-text: oklch(25% 0.005 298);
  --color-muted: oklch(40% 0.005 298);
  --color-line: oklch(25% 0.005 298 / 0.16);
  --color-accent: #6750a4;
  --color-hover-text: var(--color-accent);
  --graph-node-attachment: #c7b34b;
  --color-paper: oklch(98% 0.004 298);
  --color-faint: oklch(40% 0.005 298 / 0.36);
  --color-accent-soft: rgba(103, 80, 164, 0.1);
  --color-accent-soft-strong: rgba(103, 80, 164, 0.18);
  --color-tooltip-bg: oklch(25% 0.005 298);
  --color-tooltip-text: oklch(96% 0.005 298);
  --color-code-bg: oklch(40% 0.005 298 / 0.05);
  --color-code-border: oklch(40% 0.005 298 / 0.15);
  --color-code-inline-bg: oklch(40% 0.005 298 / 0.05);
  --color-golden-rect: oklch(25% 0.005 298 / 0.16);
  --color-golden-diagonal: oklch(25% 0.005 298 / 0.12);
  --color-golden-curve: oklch(25% 0.005 298 / 0.28);
  --shadow-code: inset 0 1px 0 oklch(100% 0 0 / 0.52);
  --syntax-text: #24292f;
  --syntax-comment: #6e7781;
  --syntax-keyword: #cf222e;
  --syntax-string: #0a3069;
  --syntax-number: #0550ae;
  --syntax-function: #8250df;
  --syntax-tag: #116329;
  --syntax-attr: #0550ae;
  --syntax-operator: #24292f;
  --syntax-error: #82071e;
  --syntax-inserted: #116329;
  --syntax-deleted: #82071e;
  --image-icon-filter: none;
  --shadow-avatar:
    0 18px 48px oklch(25% 0.005 298 / 0.12),
    0 4px 16px oklch(25% 0.005 298 / 0.07);
  --shadow-avatar-small:
    0 10px 28px oklch(25% 0.005 298 / 0.1),
    0 3px 10px oklch(25% 0.005 298 / 0.07);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --color-page: oklch(22% 0.005 298);
  --color-text: oklch(92% 0.005 298);
  --color-muted: oklch(77% 0.005 298);
  --color-line: oklch(92% 0.005 298 / 0.14);
  --color-accent: #d0bcff;
  --color-hover-text: var(--color-accent);
  --graph-node-attachment: #d6c776;
  --color-paper: oklch(25% 0.005 298);
  --color-faint: oklch(77% 0.005 298 / 0.34);
  --color-accent-soft: rgba(208, 188, 255, 0.12);
  --color-accent-soft-strong: rgba(208, 188, 255, 0.22);
  --color-tooltip-bg: oklch(92% 0.005 298);
  --color-tooltip-text: oklch(22% 0.005 298);
  --color-code-bg: oklch(77% 0.005 298 / 0.05);
  --color-code-border: oklch(77% 0.005 298 / 0.15);
  --color-code-inline-bg: oklch(77% 0.005 298 / 0.05);
  --color-golden-rect: oklch(0.93 0.195089 103.2532 / 0.18);
  --color-golden-diagonal: oklch(92% 0.005 298 / 0.12);
  --color-golden-curve: oklch(92% 0.005 298 / 0.28);
  --shadow-code: inset 0 1px 0 oklch(100% 0 0 / 0.035);
  --syntax-text: #c9d1d9;
  --syntax-comment: #8b949e;
  --syntax-keyword: #ff7b72;
  --syntax-string: #a5d6ff;
  --syntax-number: #79c0ff;
  --syntax-function: #d2a8ff;
  --syntax-tag: #7ee787;
  --syntax-attr: #79c0ff;
  --syntax-operator: #c9d1d9;
  --syntax-error: #ffdcd7;
  --syntax-inserted: #aff5b4;
  --syntax-deleted: #ffdcd7;
  --image-icon-filter: invert(96%) sepia(6%) saturate(80%) hue-rotate(210deg) brightness(96%) contrast(92%);
  --shadow-avatar:
    0 18px 48px oklch(0% 0 0 / 0.32),
    0 4px 16px oklch(0% 0 0 / 0.22);
  --shadow-avatar-small:
    0 10px 28px oklch(0% 0 0 / 0.28),
    0 3px 10px oklch(0% 0 0 / 0.18);
  color-scheme: dark;
}

:root[data-palette="warm"] {
  --color-page: #f6f1e6;
  --color-text: #25201b;
  --color-muted: #4a4239;
  --color-line: #d9cfb9;
  --color-accent: #8a4423;
  --color-hover-text: var(--color-accent);
  --graph-node-attachment: #d4b856;
  --color-paper: #fbf6ec;
  --color-faint: #b8ad9b;
  --color-accent-soft: rgba(138, 68, 35, 0.1);
  --color-accent-soft-strong: rgba(138, 68, 35, 0.18);
  --color-tooltip-bg: #25201b;
  --color-tooltip-text: #fbf6ec;
  --color-code-bg: #f0e9d6;
  --color-code-border: #d9cfb9;
  --color-code-inline-bg: #ebe3cd;
  --color-golden-rect: rgba(138, 68, 35, 0.18);
  --color-golden-diagonal: rgba(138, 68, 35, 0.11);
  --color-golden-curve: rgba(37, 32, 27, 0.32);
  --shadow-code: inset 0 1px 0 rgba(255, 255, 255, 0.48);
  --syntax-text: #25201b;
  --syntax-comment: #7d7165;
  --syntax-keyword: #a54a3e;
  --syntax-string: #7d6028;
  --syntax-number: #aa5c2b;
  --syntax-function: #7b5982;
  --syntax-tag: #557243;
  --syntax-attr: #3a7575;
  --syntax-operator: #5f554c;
  --syntax-error: #9b392f;
  --syntax-inserted: #4f6c3f;
  --syntax-deleted: #9b392f;
  --image-icon-filter: none;
  --shadow-avatar:
    0 18px 48px rgba(38, 35, 31, 0.14),
    0 4px 16px rgba(38, 35, 31, 0.08);
  --shadow-avatar-small:
    0 10px 28px rgba(38, 35, 31, 0.12),
    0 3px 10px rgba(38, 35, 31, 0.08);
  color-scheme: light;
}

:root[data-palette="warm"][data-theme="dark"] {
  --color-page: #131110;
  --color-text: #f4f0e3;
  --color-muted: #c8c1ae;
  --color-line: #2a2622;
  --color-accent: #c89761;
  --color-hover-text: var(--color-accent);
  --graph-node-attachment: #d6c776;
  --color-paper: #1a1715;
  --color-faint: #4f4a42;
  --color-accent-soft: rgba(200, 151, 97, 0.12);
  --color-accent-soft-strong: rgba(200, 151, 97, 0.22);
  --color-tooltip-bg: #f4f0e3;
  --color-tooltip-text: #131110;
  --color-code-bg: #1a1715;
  --color-code-border: #2a2622;
  --color-code-inline-bg: #201c19;
  --color-golden-rect: rgba(200, 151, 97, 0.22);
  --color-golden-diagonal: rgba(200, 151, 97, 0.14);
  --color-golden-curve: rgba(244, 240, 227, 0.3);
  --shadow-code: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --syntax-text: #f4f0e3;
  --syntax-comment: #9d9484;
  --syntax-keyword: #d47b71;
  --syntax-string: #dcb378;
  --syntax-number: #df9862;
  --syntax-function: #bba1c9;
  --syntax-tag: #96af87;
  --syntax-attr: #81a3a3;
  --syntax-operator: #c8c1ae;
  --syntax-error: #ee8f7a;
  --syntax-inserted: #9bb978;
  --syntax-deleted: #ee8f7a;
  --image-icon-filter: invert(94%) sepia(8%) saturate(530%) hue-rotate(333deg) brightness(96%) contrast(88%);
  --shadow-avatar:
    0 18px 48px rgba(0, 0, 0, 0.32),
    0 4px 16px rgba(0, 0, 0, 0.22);
  --shadow-avatar-small:
    0 10px 28px rgba(0, 0, 0, 0.28),
    0 3px 10px rgba(0, 0, 0, 0.18);
  color-scheme: dark;
}