: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;} .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;} 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;} .language-control { position: relative; display: inline-flex; align-items: center; color: var(--ink-2);} .language-control svg { position: absolute; right: 10px; pointer-events: none;} .language-select { max-width: 136px; height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-1); background: var(--bg-elev); font: inherit; font-size: 13px; cursor: pointer; appearance: none; transition: border-color 140ms ease, background 140ms ease;} .language-select:hover,.language-select:focus-visible { border-color: var(--ink-2); outline: none;} [dir="rtl"] .language-control svg { right: auto; left: 10px;} [dir="rtl"] .language-select { padding-right: 12px; padding-left: 30px;} .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;Lines 1–500 of 983. Load more
: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; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } 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; } .language-control { position: relative; display: inline-flex; align-items: center; color: var(--ink-2); } .language-control svg { position: absolute; right: 10px; pointer-events: none; } .language-select { max-width: 136px; height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-1); background: var(--bg-elev); font: inherit; font-size: 13px; cursor: pointer; appearance: none; transition: border-color 140ms ease, background 140ms ease; } .language-select:hover, .language-select:focus-visible { border-color: var(--ink-2); outline: none; } [dir="rtl"] .language-control svg { right: auto; left: 10px; } [dir="rtl"] .language-select { padding-right: 12px; padding-left: 30px; } .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;