body {
  background:
    linear-gradient(rgba(13, 17, 23, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 17, 23, 0.07) 1px, transparent 1px),
    linear-gradient(135deg, #dff3ff 0%, #f7fcff 46%, #fffaf0 100%) !important;
  background-size: 96px 96px, 96px 96px, auto !important;
}

.nav {
  border-bottom-color: rgba(13, 17, 23, 0.13) !important;
  background: rgba(222, 243, 252, 0.78) !important;
}

.brand {
  gap: 11px !important;
  text-transform: uppercase;
  line-height: 1.05;
}

.brand img {
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.16);
}

.nav-links,
.back,
.eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0 !important;
}

main {
  min-height: calc(100svh - 129px);
  position: relative;
  overflow: hidden;
}

main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(112deg, rgba(47, 111, 235, 0.075) 0 1px, transparent 1px 42px),
    radial-gradient(circle at 82% 8%, rgba(126, 214, 255, 0.24), transparent 28rem);
  opacity: 0.78;
  mask-image: linear-gradient(180deg, #000, transparent 72%);
}

main > * {
  position: relative;
  z-index: 1;
}

.hero {
  position: relative;
  margin-bottom: clamp(22px, 4vw, 38px) !important;
  padding: clamp(28px, 6vw, 62px) 0 clamp(18px, 4vw, 34px);
  border-bottom: 1px solid rgba(13, 17, 23, 0.13);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, #111111, transparent 42%);
  opacity: 0.28;
}

.eyebrow {
  color: #0d1117 !important;
  font-size: 12px !important;
}

h1 {
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

.lead {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #29333d !important;
  font-size: clamp(14px, 1.8vw, 17px) !important;
  line-height: 1.72;
}

.toc a,
.soft-card,
.callout,
article {
  backdrop-filter: blur(18px);
}

.toc a {
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  border-color: rgba(13, 17, 23, 0.14) !important;
}

article {
  border-color: rgba(13, 17, 23, 0.14) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(rgba(13, 17, 23, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 17, 23, 0.035) 1px, transparent 1px),
    rgba(255, 255, 255, 0.70) !important;
  background-size: 48px 48px, 48px 48px, auto !important;
  box-shadow: none !important;
}

article + article {
  margin-top: clamp(16px, 3vw, 24px) !important;
}

h2 {
  letter-spacing: 0 !important;
}

p,
li {
  color: #52606c !important;
}

.section-intro,
article p:nth-of-type(1) {
  color: #0d1117 !important;
}

.callout {
  border-color: rgba(47, 111, 235, 0.20) !important;
  background:
    radial-gradient(circle at 85% 0%, rgba(137, 220, 255, 0.24), transparent 34%),
    rgba(232, 246, 255, 0.56) !important;
}

.soft-card {
  border-color: rgba(13, 17, 23, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.58) !important;
}

.footer {
  border-top-color: rgba(13, 17, 23, 0.13) !important;
  background: rgba(250, 250, 250, 0.52);
}

@media (max-width: 640px) {
  body {
    background-size: 56px 56px, 56px 56px, auto !important;
  }

  .nav-inner {
    gap: 10px !important;
  }

  .hero {
    padding-top: 22px;
  }

  article {
    padding: 20px !important;
  }
}