/* Spatial Field — dual-color day and night fields */
@font-face {
  font-family: SmileySans;
  src: url("fonts/smiley-sans.woff2") format("woff2");
  font-display: swap;
}
:root {
  /* DAY: 主色 CA462F 珊瑚红（6 成）+ 邻近色（3 成）+ 强调 1E3B7A 蓝系（1 成，亮化为 A7C0F4 保证深底可读） */
  --ocean: #ca462f;
  --ocean-deep: #8e2b1c;
  --ink: #fff1ec;
  --signal: #9db7f0;
  --cyan: #9db7f0;
  --cyan-soft: #cbd9f8;
  --mist: #fff1ec;
  --muted: #f2c0b0;
  --line: rgba(255, 241, 236, 0.3);
  --read-bg: var(--ocean-deep);
  --read-ink: var(--mist);
  --read-muted: var(--muted);
  --read-line: var(--line);
  --read-link: #9db7f0;
  --code-bg: #2a0f06;
  --code-ink: #ffe9df;
  --display: SmileySans, "Microsoft YaHei UI", sans-serif;
  --sans: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --mono: "SFMono-Regular", Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.9, 0.18, 1);
  color-scheme: dark;
}
html[data-site-theme="night"] {
  /* NIGHT: 主色 1E3B7A 深蓝（6 成）+ 邻近色（3 成）+ 强调 CA462F 红系（1 成，亮化为 F9705A 保证深底可读） */
  --ocean: #1e3b7a;
  --ocean-deep: #12244a;
  --ink: #edf1fb;
  --signal: #f9705a;
  --cyan: #f9705a;
  --cyan-soft: #f7a594;
  --mist: #edf1fb;
  --muted: #a9b8e0;
  --line: rgba(237, 241, 251, 0.26);
  --code-bg: #0c1730;
  --code-ink: #e8eefb;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--ocean-deep);
  color: var(--mist);
  font: 400 16px/1.7 var(--sans);
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
button,
input,
textarea {
  font: inherit;
}
.skip-link {
  position: fixed;
  z-index: 100;
  left: 1rem;
  top: -5rem;
  padding: 0.65rem 0.9rem;
  background: var(--ocean-deep);
  color: var(--mist);
}
.skip-link:focus {
  top: 1rem;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Scroll reveal: list entries fade up into view (added by JS only when
   IntersectionObserver is available and motion is not reduced). */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Circular theme reveal via View Transitions API: the new theme expands from
   the toggle button while the old theme stays fully rendered outside the
   circle. Snapshots are real browser renders, so nothing is static. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}