:root {

  --bg-void: #010206;
  --bg-deep: #04060d;

  --sf-1: linear-gradient(168deg, rgba(26, 32, 56, .92) 0%, rgba(8, 11, 22, .97) 100%);
  --sf-2: linear-gradient(168deg, rgba(34, 41, 70, .95) 0%, rgba(11, 14, 28, .98) 100%);
  --sf-glass: rgba(10, 14, 28, .62);
  --sf-inset:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset 0 0 40px rgba(0, 240, 255, .02);

  --c-cyan: #00f0ff;
  --c-ice: #8df6ff;
  --c-teal: #14e0c8;
  --c-pink: #ff2d95;
  --c-purple: #b44dff;
  --c-amber: #ffb020;
  --c-yellow: #ffea00;
  --c-green: #00ff88;
  --c-red: #ff3b4e;

  --t1: #f2f6ff;
  --t2: #aeb8d0;
  --t3: #7b849c;
  --t4: #4a5266;

  --ln-1: rgba(0, 240, 255, .26);
  --ln-2: rgba(140, 180, 220, .11);
  --ln-3: rgba(255, 255, 255, .07);
  --ln-pink: rgba(255, 45, 149, .3);
  --ln-purple: rgba(180, 77, 255, .3);

  --r-xs: 3px;
  --r-sm: 7px;
  --r-md: 11px;
  --r-pill: 999px;
  --notch: 14px;
  --notch-lg: 22px;

  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --f-display: 'FS Display', 'FS Text', system-ui, sans-serif;
  --f-body: 'FS Text', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --f-mono: 'Consolas', 'SFMono-Regular', 'Menlo', 'DejaVu Sans Mono', monospace;

  --fs-h1: clamp(1.9rem, 4.4vw, 2.6rem);
  --fs-h2: clamp(1.3rem, 2.4vw, 1.65rem);
  --fs-h3: clamp(1.08rem, 2.1vw, 1.25rem);
  --fs-body: 1.02rem;
  --fs-sm: .88rem;
  --fs-xs: .76rem;
  --fs-hud: .72rem;

  --lh-body: 1.9;
  --lh-tight: 1.25;
  --ls-tight: -.01em;
  --ls-hud: .16em;

  --sh-1: 0 2px 10px rgba(0, 0, 0, .45);
  --sh-2: 0 12px 34px rgba(0, 0, 0, .55);
  --sh-3: 0 28px 70px rgba(0, 0, 0, .65);
  --glow-cyan: 0 0 12px rgba(0, 240, 255, .38), 0 0 34px rgba(0, 240, 255, .16);
  --glow-pink: 0 0 12px rgba(255, 45, 149, .38), 0 0 34px rgba(255, 45, 149, .16);
  --glow-amber: 0 0 12px rgba(255, 176, 32, .38), 0 0 34px rgba(255, 176, 32, .16);

  --glow-dual:
    0 0 0 1px rgba(0, 240, 255, .22),
    0 10px 40px rgba(0, 0, 0, .55),
    0 0 40px rgba(0, 240, 255, .12);

  --tx-brushed:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 4px);

  --tx-grid:
    linear-gradient(rgba(0, 240, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, .04) 1px, transparent 1px);

  --tx-scan: repeating-linear-gradient(0deg,
      rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px);

  --tx-hazard: repeating-linear-gradient(45deg,
      rgba(255, 176, 32, .5) 0 6px, transparent 6px 12px);

  --tx-rivets:
    radial-gradient(circle at 7px 7px, rgba(180, 200, 230, .5) 0 1.4px, rgba(0, 0, 0, .5) 1.4px 2.6px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 7px) 7px, rgba(180, 200, 230, .5) 0 1.4px, rgba(0, 0, 0, .5) 1.4px 2.6px, transparent 2.6px),
    radial-gradient(circle at 7px calc(100% - 7px), rgba(180, 200, 230, .5) 0 1.4px, rgba(0, 0, 0, .5) 1.4px 2.6px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), rgba(180, 200, 230, .5) 0 1.4px, rgba(0, 0, 0, .5) 1.4px 2.6px, transparent 2.6px);

  --grad-title: linear-gradient(100deg, #ffffff 0%, var(--c-ice) 42%, #7fb6ff 72%, #c9a6ff 100%);

  --grad-accent: linear-gradient(120deg, var(--c-cyan), #4f8dff 55%, var(--c-purple));

  --e-out: cubic-bezier(.22, .68, .32, 1);
  --e-in-out: cubic-bezier(.55, .06, .28, 1);
  --e-spring: cubic-bezier(.34, 1.42, .44, 1);
  --e-mech: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .6s;
  --dur-reveal: .78s;

  --h-topbar: 58px;
  --w-rail: 268px;
  --w-toc: 208px;
  --w-shell-max: 1560px;
  --z-bg: 0;
  --z-content: 1;
  --z-topbar: 900;
  --z-fab: 950;
  --z-drawer: 1000;
  --z-modal: 1100;
  --z-splash: 9999;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-topbar) + var(--s-5));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--t1);
  background: var(--bg-void);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (hover: hover) and (pointer: fine) {

  :root {
    --cursor-arrow: url('../images/Cursor-32.png') 5 5, auto;
    --cursor-arrow-hd: image-set(url('../images/Cursor-32.png') 1x,
        url('../images/Cursor-64.png') 2x) 5 5, auto;
  }

  html,
  body {
    cursor: url('../images/Cursor-32.png') 5 5, auto;
  }

  @supports (cursor: image-set(url('../images/Cursor-32.png') 1x)) {

    html,
    body {
      cursor: var(--cursor-arrow-hd);
    }
  }

  a,
  button,
  summary,
  label,
  select,
  .btn,
  .icon-btn,
  .dock__btn,
  .chip,
  .rail__link,
  .rail__sub,
  .topnav__link,
  .nav-row,
  .card,
  .gcard,
  .toc__link,
  .cmdk__item,
  .lang-switch__btn,
  .lang-switch__item,
  .related__card,
  .pager__item,
  .copy-btn,
  .back-button,
  .error-code,
  .acc>summary {
    cursor: url('../images/Cursor-32.png') 5 5, auto;
  }

  @supports (cursor: image-set(url('../images/Cursor-32.png') 1x)) {

    a,
    button,
    summary,
    label,
    select,
    .btn,
    .icon-btn,
    .dock__btn,
    .chip,
    .rail__link,
    .rail__sub,
    .topnav__link,
    .nav-row,
    .card,
    .gcard,
    .toc__link,
    .cmdk__item,
    .lang-switch__btn,
    .lang-switch__item,
    .related__card,
    .pager__item,
    .copy-btn,
    .back-button,
    .error-code,
    .acc>summary {
      cursor: var(--cursor-arrow-hd);
    }
  }
}

input,
textarea,
[contenteditable='true'] {
  cursor: text;
}

:disabled,
[aria-disabled='true'],
.not-allowed {
  cursor: not-allowed;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(0, 240, 255, .09), transparent 62%),
    radial-gradient(ellipse 60% 40% at 6% 30%, rgba(79, 141, 255, .06), transparent 60%),
    radial-gradient(ellipse 55% 45% at 96% 62%, rgba(180, 77, 255, .05), transparent 60%),
    radial-gradient(ellipse 120% 60% at 50% 112%, rgba(255, 45, 149, .035), transparent 65%);
  opacity: .9;
}

/* 注：原为 ambPulse 16s 无限透明度呼吸。该层位于 .topbar 的 backdrop-filter 之后，
   只要它每帧变化，Chrome 就会每帧重算一次全宽高斯模糊（GPU 占用主要来源）。
   静止后背景只在滚动时重算，视觉差异极小。 */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%),
    linear-gradient(rgba(0, 240, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, .035) 1px, transparent 1px);
  background-size: 100% 100%, 60px 60px, 60px 60px;
  opacity: .55;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

p,
li,
dd {
  letter-spacing: .012em;
}

code,
kbd,
samp,
pre,
.hud-label,
.tag,
.badge,
.page-head__meta,
.crumbs,
.legal-bar,
.nav-row__meta,
.rail__count,
.toc__title,
.term__bar,
.vnav__keys,
.stat__label {
  font-family: var(--f-mono);
  letter-spacing: var(--ls-hud);
}

a {
  color: var(--c-cyan);
  text-decoration: none;
  transition: color var(--dur) var(--e-out);
}

a:hover {
  color: #fff;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

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

::selection {
  background: rgba(0, 240, 255, .28);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(6, 7, 16, .9);
  border-left: 1px solid var(--ln-2);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-cyan), var(--c-purple));
  border-radius: 0;
  border: 2px solid var(--bg-void);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--c-pink), var(--c-cyan));
}

html {
  scrollbar-color: var(--c-cyan) rgba(6, 7, 16, .9);
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}