@font-face {
  font-family: "QXB Brush";
  src: url("/assets/ZhiMangXing-home.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #fafafa;
  --surface: #f0f0f0;
  --surface-hover: #e9e9e9;
  --ink: #111111;
  --muted: #4b5563;
  --faint: #6b7280;
  --line: #eeeeee;
  --line-strong: #cccccc;
  --accent: #111111;
  --selection: #dedede;
  --display: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --literary: "QXB Brush", "Xingkai SC", "STXingkai", "Kaiti SC", serif;
  --body: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, monospace;
  --fast: 150ms;
  --normal: 220ms;
  --ease: cubic-bezier(.22, .75, .25, 1);
  --reading: 600px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input { font: inherit; }
::selection { background: var(--selection); }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.bgm-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--normal) var(--ease), border-color var(--normal) var(--ease);
}
.bgm-toggle[hidden] { display: none; }
.bgm-toggle:hover { background: var(--surface); border-color: var(--ink); }
.bgm-toggle::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.bgm-toggle svg { width: 22px; height: 22px; }
.bgm-toggle[data-state="playing"] svg { animation: bgm-rhythm 1.2s ease-in-out infinite; }
.bgm-toggle[data-state="playing"]::before { animation: bgm-ripple 1.2s ease-out infinite; }
.bgm-toggle[data-state="playing"] .sound-off { display: none; }
@keyframes bgm-rhythm {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.12); }
  60% { transform: scale(1.03); }
}
@keyframes bgm-ripple {
  0% { opacity: .38; transform: scale(1); }
  85%, 100% { opacity: 0; transform: scale(1.38); }
}

@media (max-width: 560px) {
  .bgm-toggle { right: 16px; bottom: 14px; }
}

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