@font-face {
  font-family: "Aurora Moon Serif";
  src: url("/assets/aurora/fonts/letters/NotoSerifSC-letter-title.ttf") format("truetype");
  font-display: swap;
}
:root {
  color-scheme: light;
  --moon-paper: #f8fafc;
  --moon-ink: #303b3b;
  --moon-muted: #586768;
  --moon-accent: #426f70;
  --moon-line: #bdcccc;
  --wind-paper: var(--moon-paper);
  --wind-ink: var(--moon-ink);
  --wind-muted: var(--moon-muted);
  --wind-line: var(--moon-line);
  --wind-accent: var(--moon-accent);
}
body { background: var(--moon-paper); scrollbar-color: #a9b9b7 var(--moon-paper); }
::selection { background: #d5e5e1; color: var(--moon-ink); }
.moon-paper { position: fixed; inset: 0; z-index: -5; background: var(--moon-texture) repeat; background-size: 384px; pointer-events: none; }
.ink-landscape { position: fixed; inset: 0; z-index: -4; overflow: hidden; pointer-events: none; }
.ink-range { position: absolute; bottom: -6vh; width: max(65vw, 700px); height: clamp(300px, 51vh, 610px); opacity: .64; }
.ink-range--left { left: -22vw; mask-image: linear-gradient(to right, #000 55%, transparent); }
.ink-range--right { right: -21vw; bottom: -1vh; mask-image: linear-gradient(to left, #000 55%, transparent); }
.ink-ridge { position: absolute; inset: 0; will-change: transform; }
.ink-ridge > span { position: absolute; inset: 0; mask: var(--ridge-mask) center / 100% 100% no-repeat; }
.ink-ridge__silhouette, .ink-ridge__mist { background: var(--moon-paper); }
.ink-ridge__wash { background: #78928b; }
.ink-ridge--ink .ink-ridge__wash { background: #4d6863; }
.ink-ridge__line { background: #465954; }
.window-light { z-index: -3; opacity: calc(var(--climate-sun, .5) * .35); }
#wind-shadow { opacity: .2; }
.cinematic-snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cinematic-snow--back { z-index: -1; }
.cinematic-snow--mid { z-index: -1; }
.cinematic-snow--front { z-index: 1; filter: blur(2px); }
.wind-controls { font-family: "Aurora Moon Serif", "Microsoft YaHei", sans-serif; gap: 16px; }
.wind-options[hidden] { display: none; }
.climate-picker summary { gap: 12px; border-radius: 3px; }
#climate-term { letter-spacing: .15em; }
#climate-panel { border-radius: 5px; background: var(--moon-paper); box-shadow: 0 12px 40px #31494620; }
#climate-panel button { border-radius: 3px; }
#climate-panel button[aria-pressed="true"] { background: #e1ebe7; color: var(--moon-ink); }
.climate-picker summary:hover, .wind-controls button:hover { background: #e8efec; color: var(--moon-ink); }
.wind-caption { font-family: "Aurora Moon Serif", "Microsoft YaHei", sans-serif; letter-spacing: .04em; }
@media (max-width: 600px) {
  .ink-range { width: 115vw; height: 35vh; opacity: .5; }
  .ink-range--left { left: -65vw; }
  .ink-range--right { right: -65vw; }
  .wind-controls { justify-content: flex-end; left: auto; }
  .climate-picker { margin: 0; }
  #climate-panel { left: auto; right: 0; }
}
@media (prefers-reduced-motion: reduce) { .ink-ridge { will-change: auto; } }