@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;600;700&display=swap");

:root {
  --rq-home-bg: #000;
  --rq-read-bg: #08090b;
  --rq-surface: #111317;
  --rq-surface-strong: #171a20;
  --rq-surface-soft: rgba(255, 255, 255, 0.045);
  --rq-text: #f2f4f7;
  --rq-text-2: #d5dae2;
  --rq-text-3: #9ca5b1;
  --rq-dim: #66707c;
  --rq-line: rgba(255, 255, 255, 0.18);
  --rq-line-strong: rgba(255, 255, 255, 0.36);
  --rq-glass-bg: rgba(8, 10, 13, 0.62);
  --rq-glass-bg-deep: rgba(9, 11, 14, 0.82);
  --rq-glass-bg-solid: #111317;
  --rq-glass-border: rgba(255, 255, 255, 0.18);
  --rq-glass-highlight: rgba(255, 255, 255, 0.16);
  --rq-glass-noise: rgba(255, 255, 255, 0.035);
  --rq-blur: 16px;
  --rq-blur-strong: 22px;
  --rq-radius-xs: 3px;
  --rq-radius-sm: 6px;
  --rq-radius-md: 8px;
  --rq-space-1: 0.25rem;
  --rq-space-2: 0.5rem;
  --rq-space-3: 0.75rem;
  --rq-space-4: 1rem;
  --rq-space-5: 1.5rem;
  --rq-space-6: 2rem;
  --rq-space-7: 3rem;
  --rq-space-8: 4rem;
  --rq-max: 1280px;
  --rq-wide: 1440px;
  --rq-reading: 760px;
  --rq-pixel: "Press Start 2P", "Share Tech Mono", monospace;
  --rq-mono: "Share Tech Mono", "Courier New", monospace;
  --rq-cjk-code: "ZCOOL QingKe HuangYou", "Maple Mono NF CN", "Maple Mono CN", "LXGW WenKai Mono", "Sarasa Mono SC", "Noto Sans Mono CJK SC", "Source Han Mono SC", "Microsoft YaHei Mono", "SimSun", "Share Tech Mono", monospace;
  --rq-cockpit-right: -1vw;
  --rq-sans: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --rq-duration-fast: 160ms;
  --rq-duration: 260ms;
  --rq-duration-slow: 720ms;
  --rq-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --rq-z-nav: 90;
  --rq-z-overlay: 100;
}

html {
  display: block !important;
  background: var(--rq-read-bg);
  color: var(--rq-text);
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--rq-read-bg);
  color: var(--rq-text);
  font-family: var(--rq-sans);
  letter-spacing: 0;
}

body.rq-home-page {
  background: var(--rq-home-bg);
  font-family: var(--rq-mono);
}

body.rq-inner-page {
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.055), transparent 24rem),
    linear-gradient(180deg, #050607, var(--rq-read-bg) 22rem);
}

body.rq-home-page::before,
body.rq-inner-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body.rq-home-page::before {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.08), transparent 0.11rem) 0 0 / 1rem 1rem,
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
    #000;
}

a {
  color: inherit;
}

::selection {
  color: #000;
  background: #f4f4f4;
}

:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --rq-glass-bg: var(--rq-glass-bg-solid);
    --rq-glass-bg-deep: #0f1115;
  }
}

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

/* Shared orbital brand mark: transparent SVG, optimized for dark navigation. */
.rq-brand {
  gap: 0.72rem !important;
}

.rq-brand-mark {
  display: block !important;
  flex: 0 0 auto !important;
  width: 2.45rem !important;
  height: 2.45rem !important;
  border-radius: 0 !important;
  background: url("/images/runnerquan-logo.svg?v=2") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 0.55rem rgba(255, 255, 255, 0.2));
}

@media (max-width: 640px) {
  .rq-brand-mark {
    width: 2.15rem !important;
    height: 2.15rem !important;
  }
}