:root {
  --bg: #08090c;
  --bg-elev: #11131a;
  --ink: #f3f0e8;
  /* WCAG AAA: #9399a6 was only 6.14:1 against the lightest surface (#161922),
     just short of the 7:1 AAA threshold for normal text. Raised to #a0a6b3,
     which holds >=7.0:1 on every background used on the site. */
  --muted: #a0a6b3;
  --line: rgba(243, 240, 232, 0.11);
  --accent: #e89b3c;
  --accent-ink: #1a1208;
  --accent-glow: rgba(232, 155, 60, 0.35);
  --radius: 14px;
  /* System font stacks only: no third-party font CDN, so first paint is not
     blocked on fonts.googleapis.com (unreachable from mainland China). */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans CJK SC", sans-serif;
  --display: "Segoe UI", system-ui, -apple-system, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  background: var(--bg);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100dvh;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

/* ---------- 键盘可达性 ----------
   Every interactive element needs a visible focus indicator. Inputs already
   had a box-shadow ring, but buttons and links had none, so keyboard users
   could not tell where they were. :focus-visible keeps the ring off for
   mouse/touch users while always showing it for keyboard navigation. */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link: lets keyboard and screen-reader users jump past the nav.
   It must stay off-screen until focused, and getting that right needs three
   things working together:

   1. position: fixed, not absolute. `.stage` on the landing page sets
      `isolation: isolate`, which opens a new stacking context and contains
      any negative z-index descendant. An absolutely positioned link with
      `top: -60px` still painted, sitting in that context above the
      z-index:-1 orbs. Fixed positioning takes the link out of the page flow
      entirely, so no ancestor stacking context can affect it.
   2. A transform, not a negative `top`. Hiding the link with `top: -60px`
      leaves it partly dependent on layout; `transform: translateY(-100% - 16px)`
      reliably parks it above the viewport regardless of the link's own height
      (which changes with font size and zoom), and transform is the property we
      can animate on the compositor.
   3. Reveal on :focus, not :focus-visible. ":focus-visible" is the right
      choice for ordinary controls, but a skip link is only ever reachable by
      keyboard, and some browsers decline to match :focus-visible on a link
      focused via anchor jump. :focus is the safe, predictable choice here. */
.skip-link {
  position: fixed;
  left: 12px;
  top: 0;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
  transition: transform 0.16s ease;
}

.skip-link:focus {
  transform: translateY(12px);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
    transform: translateY(calc(-100% - 16px));
  }

  .skip-link:focus {
    transform: translateY(12px);
  }
}

img {
  max-width: 100%;
  display: block;
}

code,
pre,
.mono {
  font-family: var(--mono);
}

.wrap {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 64px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(14px);
  background: rgba(8, 9, 12, 0.9);
  border-bottom: 1px solid var(--line);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1440px, calc(100% - 48px));
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
}

.mark-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
}

.mark span {
  color: var(--accent);
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.9rem;
}

.top-nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.top-nav a:hover,
.top-nav a.is-active {
  color: var(--ink);
}

.top-nav .nav-cta {
  color: var(--accent-ink);
  background: var(--accent);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .top-nav a:not(.nav-cta) {
    display: none;
  }
}

.page-hero {
  padding: 56px 0 28px;
  border-bottom: 1px solid var(--line);
}

.page-hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.04em;
  margin: 0 0 12px;
}

.page-hero p {
  margin: 0;
  color: var(--muted);
  max-width: 40rem;
  font-size: 1.05rem;
}

.crumb {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 16px;
}

.crumb a {
  color: var(--muted);
  text-decoration: none;
}

.crumb a:hover {
  color: var(--accent);
}

.page-body {
  padding: 36px 0 80px;
}

.tools-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.tools-toolbar input {
  flex: 1;
  min-width: 220px;
  max-width: 460px;
  border: 1px solid var(--line);
  background: rgba(17, 19, 26, 0.9);
  color: var(--ink);
  border-radius: 999px;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 0.92rem;
  outline: none;
}

.tools-toolbar input:focus {
  border-color: rgba(232, 155, 60, 0.55);
}

.tools-toolbar .count {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.tool-group + .tool-group {
  margin-top: 36px;
}

.tool-group h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tool-group h2::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elev);
}

.tool-list li + li {
  border-top: 1px solid var(--line);
}

.tool-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 24px;
  align-items: start;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}

.tool-list a:hover {
  background: rgba(232, 155, 60, 0.06);
}

.tool-list .title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.tool-list .id {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
}

.tool-list .desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.tool-list .arrow {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
  padding-top: 4px;
  white-space: nowrap;
}

.tool-list a:hover .arrow {
  color: var(--accent);
}

.tools-empty {
  display: none;
  color: var(--muted);
  padding: 28px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

.detail-main,
.detail-side {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
}

.detail-main {
  padding: 28px;
}

.detail-side {
  padding: 22px;
}

.detail-main h2,
.detail-side h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.detail-main p,
.detail-side p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.detail-main .block + .block {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.example-box {
  margin-top: 12px;
  padding: 16px 18px;
  border-left: 3px solid var(--accent);
  background: rgba(8, 9, 12, 0.45);
  border-radius: 0 10px 10px 0;
  color: var(--ink);
  font-size: 1.02rem;
}

.block-note {
  margin: 0 0 4px !important;
  font-size: 0.94rem !important;
}

.nl-examples {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.nl-examples li {
  margin: 0;
}

.nl-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}

.example-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.copy-mini {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: var(--sans);
  font-size: 0.75rem;
  cursor: pointer;
}

.copy-mini:hover {
  color: var(--accent);
  border-color: rgba(232, 155, 60, 0.45);
}

.nl-examples .example-box {
  margin-top: 8px;
}

.sample-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

@media (max-width: 720px) {
  .sample-pair {
    grid-template-columns: 1fr;
  }
}

.sample-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.sample-pre {
  margin: 0;
  padding: 14px 16px;
  background: #050608;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #d7dce6;
  font-size: 0.82rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow: auto;
}

.meta-row {
  display: grid;
  gap: 14px;
}

.meta-row div span {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.meta-row div strong {
  font-weight: 600;
  color: var(--ink);
  word-break: break-all;
}

.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.site-footer {
  padding: 28px 0 56px;
  color: var(--muted);
  font-size: 0.88rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
}

.site-footer .logo {
  font-family: var(--display);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.site-footer .footer-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 0.82rem;
}

.site-footer .footer-meta a,
.site-footer .footer-links a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer .footer-meta a:hover,
.site-footer .footer-links a:hover {
  color: var(--accent);
}

.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}

/* ---------- 动效偏好 ----------
   Respect the OS "reduce motion" setting: vestibular disorder users can be made
   ill by smooth scrolling and transitions. Durations collapse to ~0 instead of
   being removed so animationend/transitionend listeners still fire. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}