:root {
  color-scheme: dark;
  --void: #050505;
  --void-2: #0a0a0a;
  --bone: #ebe7df;
  --bone-dim: rgba(235, 231, 223, 0.74);
  --bone-faint: rgba(235, 231, 223, 0.5);
  --hairline: rgba(235, 231, 223, 0.2);
  --hairline-soft: rgba(235, 231, 223, 0.07);
  --topic-accent: #e0566a;
  --topic-accent-soft: rgba(224, 86, 106, 0.2);
  --font-serif: "Playfair Display", "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", monospace;
  --radius: 0px;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-curtain: cubic-bezier(0.76, 0, 0.24, 1);
  --spring-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-pop: cubic-bezier(0.2, 1.4, 0.35, 1);
  --spring-flip: cubic-bezier(0.34, 1.56, 0.64, 1);
  --safe-top: 0px;
  --safe-top: min(env(safe-area-inset-top, 0px), 44px);
  --safe-bottom: 0px;
  --safe-bottom: min(env(safe-area-inset-bottom, 0px), 34px);
  font-family: var(--font-mono);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: #000;
  color: var(--bone);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

::selection {
  color: var(--void);
  background: var(--topic-accent);
}

:focus-visible {
  outline: 1px solid var(--topic-accent);
  outline-offset: 2px;
}

.grain {
  position: fixed;
  inset: -40px;
  z-index: 80;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grainShift 1.4s steps(4) infinite;
}

@keyframes grainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-12px, 8px); }
  50% { transform: translate(10px, -10px); }
  75% { transform: translate(-8px, -6px); }
  100% { transform: translate(0, 0); }
}

.cursor {
  display: none;
}

@media (pointer: fine) {
  body:not(.reduced-motion),
  body:not(.reduced-motion) a,
  body:not(.reduced-motion) button,
  body:not(.reduced-motion) textarea,
  body:not(.reduced-motion) input {
    cursor: none;
  }

  .cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: block;
    pointer-events: none;
    mix-blend-mode: difference;
  }

  .cursor-dot,
  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
  }

  .cursor-dot {
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    background: #fff;
  }

  .cursor-ring {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    transition: width 320ms var(--ease-out), height 320ms var(--ease-out),
      margin 320ms var(--ease-out), opacity 320ms ease;
  }

  .cursor.is-hover .cursor-ring {
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
  }
}

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