:root {  color-scheme: light;  --bg: #fbfbfc;  --bg-elev: #ffffff;  --bg-elev-2: #f3f4f6;  --ink-1: #0a0a0c;  --ink-2: #5b6068;  --ink-3: #8a8f97;  --line: rgba(0, 0, 0, 0.08);  --line-strong: rgba(0, 0, 0, 0.18);  --link: #0066cc;  --structure-line: rgba(10, 10, 12, 0.045);  --structure-line-strong: rgba(10, 10, 12, 0.1);  --structure-accent-hot: rgba(255, 106, 0, 0.12);  --structure-accent-cool: rgba(0, 191, 165, 0.1);  --logo-chip-bg: #ffffff;  --logo-chip-line: rgba(0, 0, 0, 0.08);  --logo-image-filter: none;  --logo-chip-shadow: 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 0 0 1px rgba(0, 0, 0, 0.04);  --theme-toggle-bg: #101116;  --theme-toggle-ink: #ffffff;  --radius: 8px;  --radius-sm: 7px;} @media (prefers-color-scheme: dark) {  :root:not([data-theme]) {    --bg: #0a0a0c;    --bg-elev: #131418;    --bg-elev-2: #1c1d22;    --ink-1: #f0f0f3;    --ink-2: #97a0aa;    --ink-3: #6b7280;    --line: rgba(255, 255, 255, 0.09);    --line-strong: rgba(255, 255, 255, 0.2);    --link: #6ea8ff;    --structure-line: rgba(255, 255, 255, 0.035);    --structure-line-strong: rgba(255, 255, 255, 0.095);    --structure-accent-hot: rgba(255, 106, 0, 0.14);    --structure-accent-cool: rgba(0, 191, 165, 0.12);    --logo-chip-bg: #101116;    --logo-chip-line: rgba(255, 255, 255, 0.14);    --logo-image-filter: brightness(0) invert(1) saturate(0.86) contrast(1.12);    --logo-chip-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.08);    --theme-toggle-bg: #ffffff;    --theme-toggle-ink: #0a0a0c;  }} :root[data-theme="dark"] {  color-scheme: dark;  --bg: #0a0a0c;  --bg-elev: #131418;  --bg-elev-2: #1c1d22;  --ink-1: #f0f0f3;  --ink-2: #97a0aa;  --ink-3: #6b7280;  --line: rgba(255, 255, 255, 0.09);  --line-strong: rgba(255, 255, 255, 0.2);  --link: #6ea8ff;  --structure-line: rgba(255, 255, 255, 0.035);  --structure-line-strong: rgba(255, 255, 255, 0.095);  --structure-accent-hot: rgba(255, 106, 0, 0.14);  --structure-accent-cool: rgba(0, 191, 165, 0.12);  --logo-chip-bg: #101116;  --logo-chip-line: rgba(255, 255, 255, 0.14);  --logo-image-filter: brightness(0) invert(1) saturate(0.86) contrast(1.12);  --logo-chip-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.08);  --theme-toggle-bg: #ffffff;  --theme-toggle-ink: #0a0a0c;} :root[data-theme="light"] {  color-scheme: light;} * {  box-sizing: border-box;} html,body {  min-height: 100%;} html {  background: var(--bg);} body {  margin: 0;  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif;  font-size: 16px;  line-height: 1.5;  color: var(--ink-1);  background: var(--bg);  -webkit-font-smoothing: antialiased;  text-rendering: optimizeLegibility;  position: relative;  overflow-x: hidden;} h1,h2,h3,p {  overflow-wrap: break-word;} .backdrop {  position: fixed;  inset: 0;  z-index: 0;  overflow: hidden;  pointer-events: none;  contain: strict;} .backdrop::before {  content: "";  position: absolute;  inset: -20% -10%;  background:    linear-gradient(115deg, transparent 0 42%, var(--structure-accent-hot) 42% 42.35%, transparent 42.35% 100%),    linear-gradient(115deg, transparent 0 58%, var(--structure-accent-cool) 58% 58.3%, transparent 58.3% 100%);  opacity: 0.42;  transform: skewY(-4deg);} .backdrop .plane,.backdrop .trace {  position: absolute;  display: block;} .backdrop .plane {  border: 1px solid var(--structure-line-strong);  border-radius: 18px;  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);  opacity: 0.32;} .backdrop .p1 {  width: 780px;  height: 300px;  left: max(24px, calc(50% - 720px));  top: 128px;  transform: rotate(-2deg);} .backdrop .p2 {  width: 580px;  height: 360px;  right: max(24px, calc(50% - 760px));  top: 460px;  transform: rotate(3deg);} .backdrop .trace {  height: 1px;  background: linear-gradient(90deg, transparent, var(--structure-line-strong), transparent);  opacity: 0.36;} .backdrop .trace::before,.backdrop .trace::after {  content: "";  position: absolute;  top: -3px;  width: 7px;  height: 7px;  border: 1px solid var(--structure-line-strong);  border-radius: 2px;  background: var(--bg);} .backdrop .trace::before {  left: 18%;} .backdrop .trace::after {  right: 12%;} .backdrop .t1 {  width: 58vw;  left: -6vw;  top: 260px;  transform: rotate(-12deg);} .backdrop .t2 {  width: 44vw;  right: -4vw;  top: 210px;  transform: rotate(14deg);} .backdrop .t3 {  width: 52vw;  left: 10vw;  top: 660px;  transform: rotate(7deg);} .backdrop .t4 {  width: 38vw;  right: 10vw;  top: 910px;  transform: rotate(-9deg);} body::before {  content: "";  position: fixed;  inset: 0;  z-index: 0;  pointer-events: none;  background-image:    linear-gradient(var(--structure-line) 1px, transparent 1px),    linear-gradient(90deg, var(--structure-line) 1px, transparent 1px),    linear-gradient(var(--structure-line-strong) 1px, transparent 1px),    linear-gradient(90deg, var(--structure-line-strong) 1px, transparent 1px);  background-size: 32px 32px, 32px 32px, 128px 128px, 128px 128px;  background-position: 50% 0, 50% 0, 50% 0, 50% 0;  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0.45));          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0.45));} body::after {  content: "";  position: fixed;  inset: 0;  z-index: 0;  pointer-events: none;  background-image:    repeating-linear-gradient(135deg, transparent 0 56px, var(--structure-line) 56px 57px, transparent 57px 112px),    radial-gradient(circle at center, var(--structure-line-strong) 1px, transparent 1.6px);  background-size: auto, 96px 96px;  background-position: 0 0, 50% 0;  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.24) 78%, transparent);          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.24) 78%, transparent);} a {  color: inherit;  text-decoration: none;} a:hover {  text-decoration: underline;  text-decoration-thickness: 1px;  text-underline-offset: 3px;} code {  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;  font-size: 0.92em;} .masthead,.lede,.providers,.showcase,.detail,.foot {  position: relative;  z-index: 1;  width: 100%;  max-width: 1080px;  margin-left: auto;  margin-right: auto;  padding-left: 24px;  padding-right: 24px;} .masthead {  display: flex;  align-items: center;  justify-content: space-between;  padding-top: 22px;  padding-bottom: 22px;} .brand {  display: inline-flex;  align-items: center;  gap: 10px;  font-weight: 600;  font-size: 16px;  letter-spacing: 0;} .brand:hover {  text-decoration: none;} .mark {  width: 28px;  height: 28px;  border-radius: 7px;} .nav {  display: flex;  align-items: center;  gap: 22px;  font-size: 14px;} .nav a {  color: var(--ink-2);} .nav a:hover {  color: var(--ink-1);  text-decoration: none;} .theme-toggle {  width: 36px;  height: 36px;  padding: 0;  border: 1px solid var(--line-strong);  border-radius: 999px;  display: inline-grid;  place-items: center;  color: var(--theme-toggle-ink);  background: var(--theme-toggle-bg);  cursor: pointer;  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;} .theme-toggle:hover {  transform: translateY(-1px);  border-color: var(--ink-2);} .theme-toggle .sun,.theme-toggle .moon {  grid-area: 1 / 1;  transition: opacity 140ms ease, transform 140ms ease;} .theme-toggle .sun {  opacity: 1;  transform: scale(1);} .theme-toggle .moon {  opacity: 0;  transform: scale(0.72) rotate(-12deg);} :root[data-theme="dark"] .theme-toggle .sun,:root:not([data-theme]) .theme-toggle[aria-pressed="true"] .sun {  opacity: 0;  transform: scale(0.72) rotate(12deg);} :root[data-theme="dark"] .theme-toggle .moon,:root:not([data-theme]) .theme-toggle[aria-pressed="true"] .moon {  opacity: 1;  transform: scale(1);} .btn {  display: inline-flex;  align-items: center;  justify-content: center;  gap: 8px;  padding: 8px 14px;  border-radius: 999px;  border: 1px solid var(--line-strong);  background: var(--bg-elev);  font-size: 14px;  font-weight: 500;  color: var(--ink-1);  white-space: nowrap;  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, color 140ms ease;} .btn:hover {  background: var(--bg-elev-2);  border-color: var(--ink-2);  text-decoration: none;} .btn.primary {  background: var(--ink-1);  color: var(--bg);  border-color: var(--ink-1);} .btn.primary:hover {  background: color-mix(in srgb, var(--ink-1) 86%, transparent);  border-color: var(--ink-1);  color: var(--bg);} .btn.lg {  padding: 11px 20px;  font-size: 15px;} .lede {  padding-top: 56px;  padding-bottom: 64px;} .lede h1 {  margin: 0 0 18px;  font-size: 60px;  line-height: 1.04;  letter-spacing: -0.01em;  font-weight: 600;  max-width: 18ch;} .lede h1 .grad {  background-image: linear-gradient(100deg, #ff6a00 0%, #ff3399 32%, #6e5aff 62%, #00bfa5 100%);  -webkit-background-clip: text;  background-clip: text;  color: transparent;  background-size: 200% 100%;  animation: hue-slide 14s ease-in-out infinite;} @keyframes hue-slide {  0%, 100% { background-position: 0% 50%; }  50% { background-position: 100% 50%; }} .lede .dek {  margin: 0;  font-size: 19px;  line-height: 1.5;  color: var(--ink-2);  max-width: 60ch;} .lede .actions {  display: flex;  flex-wrap: wrap;  gap: 12px;  margin: 28px 0 14px;  align-items: center;} .brew {  display: inline-flex;  align-items: center;  gap: 4px;  padding: 6px 6px 6px 14px;  border: 1px solid var(--line-strong);  border-radius: 999px;  background: var(--bg-elev);  font-size: 13.5px;  max-width: 100%;  overflow: hidden;} .brew code {  background: none;  padding: 0;  min-width: 0;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;} .brew-copy {  display: inline-flex;  align-items: center;  justify-content: center;  width: 28px;  height: 28px;  padding: 0;  margin: 0;  border: 0;  background: transparent;  border-radius: 999px;  color: var(--ink-2);  cursor: pointer;  flex-shrink: 0;  transition: background 140ms ease, color 140ms ease;} .brew-copy:hover {  background: var(--bg-elev-2);  color: var(--ink-1);} .brew-copy .ok {  display: none;} .brew-copy.copied .ic {  display: none;}

Lines 1–500 of 890. Load more