:root {
  --qc-bg: #f8f9fb;
  --qc-text: #242933;
  --qc-sub: #3d424d;
  --qc-muted: #676b73;
  --qc-faint: #8b909a;
  --qc-line: rgba(36, 41, 51, .10);
  --qc-line-strong: rgba(36, 41, 51, .16);
  --qc-blue: #3778e5;
  --qc-blue-hover: #2c67cf;
  --qc-primary: #4ea1d9;
  --qc-deep: #0e1116;
  --qc-ease: cubic-bezier(.22, .68, .24, 1);
  --qc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

html { scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }

body {
  background:
    radial-gradient(120% 52% at 50% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #fbfcfe 0%, #f8f9fb 36%, #f7f8fb 100%);
  background-color: var(--qc-bg);
  color: var(--qc-text);
  font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0;
}


body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(60, 100, 160, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 100, 160, .05) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 1) 24%, rgba(0, 0, 0, .88) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 1) 24%, rgba(0, 0, 0, .88) 100%);
}

::selection { background: rgba(78, 161, 217, .22); color: #1b1f27; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, .site-card:focus-visible {
  outline: 2px solid rgba(55, 120, 229, .5);
  outline-offset: 2px;
}


header {
  background: rgba(248, 249, 251, .82);
  border-bottom: 1px solid rgba(36, 41, 51, .07);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1),
              background .3s ease, box-shadow .3s ease;
  will-change: transform;
}
header.qc-nav-solid {
  background: rgba(248, 249, 251, .94);
  box-shadow: 0 1px 0 rgba(36, 41, 51, .04), 0 12px 32px rgba(36, 41, 51, .05);
}
header.qc-nav-hide { transform: translateY(-101%); }
.nav-menu a { font-size: 12px; letter-spacing: .06em; opacity: .64; }
.nav-menu a:hover, .nav-menu a.active { opacity: 1; }
.nav-menu a.active::after { background: var(--qc-primary); height: 2px; }
.logo-suffix { color: var(--qc-muted); }


.wrap { max-width: 1120px; }
main.wrap { padding-bottom: 72px; }


main .hero-title {
  margin: 0;
  font-size: clamp(27px, 3.05vw, 44px);
  line-height: 1.46;
  font-weight: 200;
  letter-spacing: .1em;
  color: var(--qc-text);
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
  padding-bottom: .06em;
}
main .hero-sub {
  font-size: 14.17px;
  line-height: 26px;
  letter-spacing: .012em;
  color: var(--qc-muted);
}


.btn-primary, .btn-ghost2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .25s ease, color .25s ease,
              transform .35s var(--qc-ease), box-shadow .25s ease, border-color .25s ease;
}
.btn-primary {
  background: linear-gradient(135deg, #4ea1d9 0%, #3778e5 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(55, 120, 229, .20);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(55, 120, 229, .26); }
.btn-ghost2 {
  background: #fff;
  color: #1d222b;
  border: 1px solid rgba(36, 41, 51, .26);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-ghost2:hover { background: #fff; border-color: rgba(55, 120, 229, .38); transform: translateY(-2px); }

.mini-btn {
  border-radius: 999px;
  font-size: 12.5px;
  padding: 7px 16px;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .3s var(--qc-ease);
}
.mini-btn.solid { background: var(--qc-blue); border-color: var(--qc-blue); color: #fff; }
.mini-btn.solid:hover { background: var(--qc-blue-hover); border-color: var(--qc-blue-hover); }
.mini-btn:hover { transform: translateY(-1px); }


.card, .post, .site-card {
  box-sizing: border-box;
  min-width: 0;
}


html.qc-anim .qc-rv {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  will-change: opacity, transform;
}
html.qc-anim .qc-rv.qc-in {
  animation: qcRise 1s var(--qc-ease) var(--d, 0s) forwards;
  will-change: auto;
}
@keyframes qcRise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}


.home-hero.rise, .home-actions.rise, .home-search.rise, .site-grid.rise {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.qc-anim .qc-rv { opacity: 1; transform: none; }
  html.qc-anim .qc-rv.qc-in { animation: none; }
  * { transition-duration: .01ms !important; }
}

@media (max-width: 640px) {
  body::before { background-size: 16px 16px, 16px 16px; }
  main.wrap { padding-bottom: 48px; }
}

/* 2026-11-02 修复：body 为 flex-column 时 main.wrap 的 margin:auto 导致宽度塌缩 */
body > main { width: 100%; }