/* ul-css — built from sources a1ab64406df7. Edit src/, not this file. */ /* The site's sheet re-rooted under .site-shell (scripts/shell.py); edit src/, not this file. */ @layer tokens, reset, typography, layout, components, themes, site; @layer tokens { :root { color-scheme: light dark; --font-text: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace; --text-80: 80px/1.05; --track-80: -0.015em; --text-64: 64px/1.0625; --track-64: -0.009em; --text-56: 56px/1.07143; --track-56: -0.005em; --text-48: 48px/1.08349; --track-48: -0.003em; --text-40: 40px/1.1; --track-40: 0; --text-32: 32px/1.125; --track-32: 0.004em; --text-28: 28px/1.14286; --track-28: 0.007em; --text-24: 24px/1.16667; --track-24: 0.009em; --text-21: 21px/1.19048; --track-21: 0.011em; --text-21-loose: 21px/1.381; --text-19: 19px/1.21053; --track-19: 0.012em; --text-19-loose: 19px/1.4211; --text-17: 17px/1.47059; --track-17: -0.022em; --text-17-tight: 17px/1.23536; --text-14: 14px/1.42859; --track-14: -0.016em; --text-14-tight: 14px/1.28577; --text-12: 12px/1.33337; --track-12: -0.01em; --text-hero: var(--text-80); --track-hero: var(--track-80); --text-headline: var(--text-48); --track-headline: var(--track-48); --text-headline-reduced: var(--text-40); --track-headline-reduced: var(--track-40); --text-title: var(--text-32); --track-title: var(--track-32); --text-eyebrow: var(--text-28); --track-eyebrow: var(--track-28); --text-intro: var(--text-21-loose); --track-intro: var(--track-21); --color-text: light-dark(#1d1d1f, #f5f5f7); --color-text-secondary: light-dark(#6e6e73, #86868b); --color-text-tertiary: light-dark(#86868b, #6e6e73); --color-bg: light-dark(#ffffff, #000000); --color-bg-alt: light-dark(#f5f5f7, #1d1d1f); --color-fill-tertiary: light-dark(#e8e8ed, #333336); --color-code-bg: light-dark(#f5f5f7, #333336); --surface-elevated: var(--color-bg); --overlay: rgba(0, 0, 0, 0.4); --color-link: light-dark(#0066cc, #2997ff); --color-accent: #0071e3; --color-accent-hover: #0076df; --color-accent-active: #006edb; --color-accent-contrast: #fff; --color-accent-fill: light-dark(var(--color-accent), oklch(from var(--color-accent) calc(l * 0.9) calc(c * 1.15) h)); --color-accent-fill-hover: light-dark(var(--color-accent-hover), oklch(from var(--color-accent) calc(l * 0.95) calc(c * 1.15) h)); --color-accent-fill-active: light-dark(var(--color-accent-active), oklch(from var(--color-accent) calc(l * 0.85) calc(c * 1.15) h)); --color-separator: light-dark(#d2d2d7, #424245); --color-hairline: light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.24)); --color-selection: light-dark(#b3d7ff, #3f638b); --color-success: light-dark(#008009, #03a10e); --color-error: light-dark(#e30000, #ff3037); --color-error-bg: light-dark(#fff2f4, #330000); --color-warning: light-dark(#bf4800, #f56300); --color-warning-bg: light-dark(#fff9f4, #290d00); --color-caution: light-dark(#9e6700, #ffb50f); --color-caution-bg: light-dark(#fffbf2, #2b1e00); --color-tip: light-dark(#3d777d, #7dffe4); --color-tip-bg: light-dark(#faffff, #002d2b); --color-experiment: light-dark(#8c28c2, #a95ed2); --color-experiment-bg: light-dark(#fcf8ff, #190325); --width-content: 980px; --width-content-medium: 692px; --width-prose: 653px; --gutter: 22px; --sidebar-width: max(400px, 31vw); --filter-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1h14M3 5h10M5 9h6' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); --chevron-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4.8 13.1c.2 0 .4-.1.6-.2l5.3-5.2c.2-.2.3-.4.3-.6s-.1-.5-.3-.6L5.4 1.3C5.2 1.1 5 1 4.8 1c-.5 0-.8.4-.8.8 0 .2.1.4.3.6l4.7 4.6-4.7 4.6c-.2.2-.3.4-.3.6 0 .5.4.9.8.9z'/%3E%3C/svg%3E"); --radius-xs: 4px; --radius-row: 6px; --radius-s: 8px; --radius-figure: 10px; --radius-m: 12px; --radius-block: 15px; --radius-l: 18px; --radius-xl: 28px; --radius-pill: 980px; --space-section: 68px; --space-section-tight: 51px; --space-section-product: 160px; --space-block: 0.8em; --space-component: 44px; --nav-height: 52px; --nav-bg: light-dark(rgba(250, 250, 252, 0.8), rgba(22, 22, 23, 0.8)); --app-nav-bg: light-dark(#f1f1f1, #1d1d1f); --field-bg: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.04)); --field-border: light-dark(#86868b, #6e6e73); --field-radius: 12px; --field-height: 56px; --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-accent); --field-focus-halo: light-dark(#c1dffe, rgba(41, 151, 255, 0.35)); --field-error-bg: light-dark(#fdeced, #330000); --field-error-border: light-dark(#de071c, #ff3037); --btn-disabled-bg: light-dark(#d1d1d6, #2c2c2e); --btn-disabled-text: light-dark(#ffffff, #6e6e73); --toggle-on: var(--color-accent-fill); --toggle-off: light-dark(#86868b, #6e6e73); --toggle-border: var(--color-bg); --toggle-knob-color: #ffffff; --row-hover: light-dark(color-mix(in srgb, var(--color-accent) 5%, transparent), color-mix(in srgb, var(--color-link) 10%, transparent)); --row-active: var(--color-fill-tertiary); --navigator-hover: light-dark(color-mix(in srgb, var(--color-accent) 20%, transparent), color-mix(in srgb, var(--color-accent) 60%, transparent)); --footer-bg: light-dark(#f5f5f7, #1d1d1f); --footer-text: light-dark(rgba(0, 0, 0, 0.56), rgba(255, 255, 255, 0.56)); --footer-link: light-dark(rgba(0, 0, 0, 0.72), rgba(255, 255, 255, 0.8)); --footer-title: light-dark(rgba(0, 0, 0, 0.88), rgba(255, 255, 255, 0.92)); --footer-pipe: light-dark(rgba(0, 0, 0, 0.48), rgba(255, 255, 255, 0.4)); --note-bg: light-dark(#f5f5f7, #323232); --note-border: light-dark(#696969, #9a9a9e); --badge-bg: light-dark(rgba(29, 29, 31, 0.07), rgba(245, 245, 247, 0.12)); --badge-text: light-dark(#424245, #d2d2d7); } @media (max-width: 1068px) { :root { --text-hero: var(--text-64); --track-hero: var(--track-64); --text-headline: var(--text-40); --track-headline: var(--track-40); --text-headline-reduced: var(--text-32); --track-headline-reduced: var(--track-32); --text-title: var(--text-28); --track-title: var(--track-28); --text-eyebrow: var(--text-24); --track-eyebrow: var(--track-24); --space-section-product: 128px; --space-component: 36px; } } @media (max-width: 734px) { :root { --text-hero: var(--text-48); --track-hero: var(--track-48); --text-headline: var(--text-32); --track-headline: var(--track-32); --text-headline-reduced: var(--text-28); --track-headline-reduced: var(--track-28); --text-title: var(--text-24); --track-title: var(--track-24); --text-eyebrow: var(--text-21); --track-eyebrow: var(--track-21); --text-intro: var(--text-19-loose); --track-intro: var(--track-19); --space-section-product: 96px; --space-component: 32px; --nav-height: 48px; } } } @layer reset { :where(.site-shell) *, :where(.site-shell) *::before, :where(.site-shell) *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } :where(.site-shell) { margin: 0; font-family: var(--font-text); font-size: 17px; line-height: 1.47059; font-weight: 400; letter-spacing: -0.022em; color: var(--color-text); background: var(--color-bg); font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :where(.site-shell) img, :where(.site-shell) svg, :where(.site-shell) video { max-width: 100%; height: auto; display: block; } :where(.site-shell) button, :where(.site-shell) input, :where(.site-shell) select, :where(.site-shell) textarea { font: inherit; color: inherit; } :where(.site-shell) :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; } :where(.site-shell) ::selection { background: var(--color-selection); } } @layer typography { :where(.site-shell) .typo-hero { font: 600 var(--text-hero) var(--font-display); letter-spacing: var(--track-hero); } :where(.site-shell) .typo-headline { font: 600 var(--text-headline) var(--font-display); letter-spacing: var(--track-headline); } :where(.site-shell) .typo-headline-reduced { font: 600 var(--text-headline-reduced) var(--font-display); letter-spacing: var(--track-headline-reduced); } :where(.site-shell) .typo-eyebrow { font: 600 var(--text-eyebrow) var(--font-display); letter-spacing: var(--track-eyebrow); } :where(.site-shell) .typo-intro { font: 400 var(--text-intro) var(--font-display); letter-spacing: var(--track-intro); } :where(.site-shell) .typo-body { font: 400 var(--text-17) var(--font-text); letter-spacing: var(--track-17); } :where(.site-shell) .typo-body-reduced { font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); } :where(.site-shell) .typo-caption { font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-tertiary); } :where(.site-shell) h1 { font: 600 var(--text-headline) var(--font-display); letter-spacing: var(--track-headline); margin: 0 0 0.667em; } :where(.site-shell) h2 { font: 600 var(--text-title) var(--font-display); letter-spacing: var(--track-title); margin: 1.6em 0 0.45em; } :where(.site-shell) h3 { font: 600 var(--text-24) var(--font-display); letter-spacing: var(--track-24); margin: 1.6em 0 0.6em; } :where(.site-shell) h4 { font: 600 var(--text-21) var(--font-display); letter-spacing: var(--track-21); margin: 1.6em 0 0.67em; } :where(.site-shell) h5 { font: 600 var(--text-17) var(--font-text); letter-spacing: var(--track-17); margin: 1.6em 0 0.8em; } :where(.site-shell) h6 { font: 600 var(--text-14) var(--font-text); letter-spacing: var(--track-14); margin: 1.6em 0 1em; } @media (max-width: 734px) { :where(.site-shell) h3 { font-size: 21px; line-height: 1.19048; letter-spacing: var(--track-21); } } :where(.site-shell) p { margin: 0 0 var(--space-block); } :where(.site-shell) ul, :where(.site-shell) ol { margin: 0 0 var(--space-block); margin-inline-start: 1.17647em; padding: 0; } :where(.site-shell) li + li { margin-top: var(--space-block); } :where(.site-shell) li > ul, :where(.site-shell) li > ol { margin-top: var(--space-block); margin-bottom: 0; } :where(.site-shell) strong, :where(.site-shell) b { font-weight: 600; } :where(.site-shell) small { font-size: 14px; letter-spacing: var(--track-14); } :where(.site-shell) hr { border: none; border-top: 1px solid var(--color-separator); margin: calc(var(--space-block) * 2) 0; } } @layer typography { :where(.site-shell) .prose { max-width: var(--width-prose); margin-left: auto; margin-right: auto; } :where(.site-shell) .prose > :first-child { margin-top: 0; } :where(.site-shell) .prose > :last-child { margin-bottom: 0; } :where(.site-shell) .prose .intro { font: 400 var(--text-intro) var(--font-display); letter-spacing: var(--track-intro); color: var(--color-text-secondary); margin-bottom: 1.6em; } :where(.site-shell) .prose blockquote { margin: var(--space-block) 0; padding-left: 1.2em; border-left: 3px solid var(--color-separator); color: var(--color-text-secondary); } :where(.site-shell) .prose blockquote p:last-child { margin-bottom: 0; } :where(.site-shell) .prose figure { margin: calc(var(--space-block) * 2) 0; } :where(.site-shell) .prose figcaption { font-size: 14px; line-height: 1.5; letter-spacing: var(--track-14); margin-top: 0.8em; } :where(.site-shell) .prose img { border-radius: var(--radius-m); } } @layer layout { :where(.site-shell) .container { max-width: calc(var(--width-content) + var(--gutter) * 2); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); } :where(.site-shell) .container-prose { max-width: calc(var(--width-prose) + var(--gutter) * 2); } @media (max-width: 1068px) { :where(.site-shell) .container { max-width: calc(var(--width-content-medium) + var(--gutter) * 2); } } @media (max-width: 734px) { :where(.site-shell) .container, :where(.site-shell) .container-prose { max-width: none; padding-left: 6.25%; padding-right: 6.25%; } } :where(.site-shell) .section { padding-top: var(--space-section); padding-bottom: var(--space-section); } :where(.site-shell) .section-alt { background: var(--color-bg-alt); } :where(.site-shell) .section-tight { padding-top: var(--space-section-tight); padding-bottom: var(--space-section-tight); } :where(.site-shell) .section-product { padding-top: var(--space-section-product); padding-bottom: var(--space-section-product); } :where(.site-shell) .grid { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 735px) { :where(.site-shell) .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1069px) { :where(.site-shell) .grid-3 { grid-template-columns: repeat(3, 1fr); } :where(.site-shell) .grid-4 { grid-template-columns: repeat(4, 1fr); } } :where(.site-shell) .stack-center { display: flex; flex-direction: column; align-items: center; text-align: center; } :where(.site-shell) .stack-center > * { max-width: var(--width-prose); } } @layer components { :where(.site-shell) .navbar, :where(.site-shell) .app-nav { position: sticky; top: 0; z-index: 100; height: var(--nav-height); border-bottom: 1px solid var(--color-hairline); } :where(.site-shell) .navbar { background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } :where(.site-shell) .navbar-inner { max-width: calc(var(--width-content) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); height: 100%; display: flex; align-items: center; gap: 32px; } :where(.site-shell) .navbar-brand { font: 600 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); color: var(--color-text); text-decoration: none; } :where(.site-shell) .navbar-links { display: flex; align-items: center; gap: 24px; margin: 0 0 0 auto; list-style: none; padding: 0; } :where(.site-shell) .navbar-links li { margin: 0; display: flex; align-items: center; } :where(.site-shell) .navbar-links a { font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text); text-decoration: none; white-space: nowrap; transition: color 0.2s; } :where(.site-shell) .navbar-links a:hover { color: var(--color-link); text-decoration: none; } :where(.site-shell) .navbar-links a.btn { color: var(--btn-fg); } :where(.site-shell) .navbar-menu-toggle, :where(.site-shell) .navigator-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } :where(.site-shell) .navbar-menucta, :where(.site-shell) .navbar-sidenav-toggle { display: none; } @media (max-width: 833px) { :where(.site-shell) .navbar { height: auto; min-height: var(--nav-height); } :where(.site-shell) .navbar-inner { flex-wrap: wrap; height: auto; min-height: calc(var(--nav-height) - 1px); } :where(.site-shell) .navbar-menucta { display: flex; align-items: center; justify-content: center; width: 20px; height: calc(var(--nav-height) - 1px); margin-left: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; } :where(.site-shell) .navbar-menucta::before { content: ""; width: 10px; height: 10px; border-right: 1.5px solid var(--color-text); border-bottom: 1.5px solid var(--color-text); transform: translateY(-3px) rotate(45deg); transition: transform 0.3s ease; } :where(.site-shell) .navbar-menu-toggle:checked ~ .navbar-menucta::before { transform: translateY(3px) rotate(225deg); } :where(.site-shell) .navbar-menu-toggle:focus-visible ~ .navbar-menucta { outline: 2px solid var(--color-accent); outline-offset: -4px; } :where(.site-shell) .navbar-links { display: none; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; max-height: calc(100vh - var(--nav-height)); overflow-y: auto; } :where(.site-shell) .navbar-menu-toggle:checked ~ .navbar-links { display: flex; } :where(.site-shell) .navbar-links li { display: block; min-height: 42px; border-top: 1px solid var(--color-separator); } :where(.site-shell) .navbar-links li:first-child { border-top: none; } :where(.site-shell) .navbar-links a { display: flex; align-items: center; min-height: 42px; font: 400 14px/42px var(--font-text); letter-spacing: var(--track-14); } :where(.site-shell) .navbar-links a.btn { display: inline-block; min-height: 0; margin: 8px 0; } } @media (max-width: 1023px) { :where(.site-shell) .navbar-sidenav-toggle { display: flex; align-items: center; gap: 22px; margin-right: -10px; cursor: pointer; -webkit-tap-highlight-color: transparent; } :where(.site-shell) .navbar-sidenav-toggle::before { content: ""; box-sizing: border-box; width: 17px; height: 13px; border: 1.5px solid var(--color-text); border-radius: 3px; background: linear-gradient(var(--color-text), var(--color-text)) 4px 0 / 1.5px 100% no-repeat; box-shadow: 0 0 0 6px transparent; transition: box-shadow 0.15s ease; } :where(.site-shell) .navbar-sidenav-toggle:hover::before { box-shadow: 0 0 0 6px var(--color-fill-tertiary); background-color: var(--color-fill-tertiary); } :where(.site-shell) .navbar-sidenav-toggle::after { content: ""; width: 1px; height: 0.8em; background: var(--color-text); opacity: 0.3; } } } @layer components { :where(.site-shell) a { color: var(--color-link); text-decoration: none; letter-spacing: inherit; } :where(.site-shell) a:hover { text-decoration: underline; } :where(.site-shell) .link-chevron::after { content: "\203A"; display: inline-block; margin-left: 0.3em; transition: transform 0.2s ease; } :where(.site-shell) .link-chevron:hover { text-decoration: underline; } :where(.site-shell) .link-chevron:hover::after { transform: translateX(2px); } :where(.site-shell) .btn { --btn-bg: var(--color-accent-fill); --btn-fg: var(--color-accent-contrast); --btn-border: transparent; --btn-bg-hover: var(--color-accent-fill-hover); --btn-bg-active: var(--color-accent-fill-active); --btn-radius: var(--radius-pill); display: inline-block; font: 400 17px/1.17648 var(--font-text); letter-spacing: var(--track-17); padding: 8px 15px; border: 1px solid var(--btn-border); border-radius: var(--btn-radius); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } :where(.site-shell) .btn:hover { background: var(--btn-bg-hover); text-decoration: none; } :where(.site-shell) .btn:active { background: var(--btn-bg-active); } :where(.site-shell) .btn:disabled, :where(.site-shell) .btn.is-disabled { --btn-bg: var(--btn-disabled-bg); --btn-fg: var(--btn-disabled-text); --btn-border: transparent; cursor: default; pointer-events: none; } :where(.site-shell) .btn-secondary { --btn-bg: transparent; --btn-fg: var(--color-link); --btn-border: var(--color-link); } :where(.site-shell) .btn-secondary:hover { --btn-fg: var(--color-accent-contrast); --btn-border: transparent; } :where(.site-shell) .btn-neutral { --btn-bg: var(--color-text); --btn-fg: var(--color-bg); --btn-bg-hover: light-dark(#272729, #fff); --btn-bg-active: light-dark(#18181a, #ededf2); } :where(.site-shell) .btn-small { font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); padding: 3px 10px; } :where(.site-shell) .btn-large { padding: 11px 21px; } :where(.site-shell) .btn-dialog { --btn-radius: var(--radius-row); font: 400 15px/1.2 var(--font-text); letter-spacing: var(--track-14); padding: 7px 15px; } :where(.site-shell) .btn-rect { --btn-radius: var(--radius-s); } :where(.site-shell) .btn-block { --btn-radius: var(--radius-s); display: block; width: 100%; text-align: center; } } @layer components { :where(.site-shell) .card { background: var(--color-bg); border-radius: var(--radius-l); padding: 60px 8.3333%; } :where(.site-shell) .card h3, :where(.site-shell) .card-title { font: 600 var(--text-19) var(--font-display); letter-spacing: var(--track-19); margin: 0 0 0.8em; } :where(.site-shell) .card-icon { display: block; width: 40px; height: 40px; margin-bottom: 24px; color: var(--color-link); } :where(.site-shell) .section-alt .card { background: var(--color-bg); } :where(.site-shell) .section:not(.section-alt) .card { background: var(--color-bg-alt); } :where(.site-shell) .card-hero { border-radius: var(--radius-xl); padding: 48px; } :where(.site-shell) .card h3:first-child, :where(.site-shell) .card h4:first-child { margin-top: 0; } :where(.site-shell) .card > :last-child { margin-bottom: 0; } @media (max-width: 734px) { :where(.site-shell) .card { padding: 40px 8.3333%; } :where(.site-shell) .card-hero { padding: 32px; } } } @layer components { :where(.site-shell) .table-wrap { overflow-x: auto; margin: calc(var(--space-block) * 2) 0; } :where(.site-shell) table { width: 100%; border-collapse: collapse; border-style: hidden; margin: 0 0 calc(var(--space-block) * 2); } :where(.site-shell) .table-wrap > table { margin: 0; } :where(.site-shell) th, :where(.site-shell) td { text-align: left; padding: 10px; border: 1px solid var(--color-separator); vertical-align: middle; } :where(.site-shell) th { font-weight: 600; } :where(.site-shell) td > p:last-child, :where(.site-shell) th > p:last-child { margin-bottom: 0; } @media (max-width: 734px) { :where(.site-shell) .table-compact th, :where(.site-shell) .table-compact td { font-size: 14px; line-height: 1.28577; letter-spacing: var(--track-14); padding: 8px; } :where(.site-shell) .table-compact th:first-child, :where(.site-shell) .table-compact td:first-child { position: sticky; left: 0; background: var(--color-bg); box-shadow: 1px 0 0 var(--color-separator); } :where(.site-shell) .section-alt .table-compact th:first-child, :where(.site-shell) .section-alt .table-compact td:first-child { background: var(--color-bg-alt); } } } @layer components { :where(.site-shell) code, :where(.site-shell) kbd, :where(.site-shell) samp { font-family: var(--font-mono); font-size: 1em; letter-spacing: 0; } :where(.site-shell) pre { background: var(--color-code-bg); border-radius: var(--radius-block); padding: 22px 14px; overflow-x: auto; margin: calc(var(--space-block) * 2) 0; font-size: 15px; line-height: 1.66667; letter-spacing: -0.027em; tab-size: 4; } :where(.site-shell) pre code { background: none; padding: 0; font-size: inherit; letter-spacing: inherit; } :where(.site-shell) kbd { font-size: 0.88em; background: var(--color-fill-tertiary); border-radius: var(--radius-xs); padding: 0.15em 0.5em; box-shadow: inset 0 -1px 0 var(--color-separator); } } @layer components { :where(.site-shell) .note { border: 1px solid var(--note-border); box-shadow: 0 0 1px 0 var(--note-border) inset, 0 0 1px 0 var(--note-border); background: var(--note-bg); color: var(--color-text); border-radius: var(--radius-block); padding: 16px; margin: calc(var(--space-block) * 2) 0; line-height: 1.52944; } :where(.site-shell) .note > :last-child { margin-bottom: 0; } :where(.site-shell) .note p { margin: 0 0 var(--space-block); } :where(.site-shell) .note a { color: var(--color-link); } :where(.site-shell) .note-title { display: block; font-weight: 600; color: var(--note-border); margin-bottom: 0.4em; } :where(.site-shell) .note-tip { --note-border: var(--color-tip); --note-bg: var(--color-tip-bg); } :where(.site-shell) .note-experiment { --note-border: var(--color-experiment); --note-bg: var(--color-experiment-bg); } :where(.site-shell) .note-important { --note-border: var(--color-caution); --note-bg: var(--color-caution-bg); } :where(.site-shell) .note-warning, :where(.site-shell) .note-error { --note-border: var(--color-error); --note-bg: var(--color-error-bg); } :where(.site-shell) .note-deprecated { --note-border: var(--color-warning); --note-bg: var(--color-warning-bg); } } @layer components { :where(.site-shell) .footnotes { font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-tertiary); } :where(.site-shell) .footnotes ol { margin-inline-start: 1.4em; padding: 0; } :where(.site-shell) .footer { background: var(--footer-bg); font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--footer-text); } :where(.site-shell) .footer a { color: var(--footer-link); } :where(.site-shell) .footer strong, :where(.site-shell) .footer h2, :where(.site-shell) .footer h3 { color: var(--footer-title); } :where(.site-shell) .footer hr { border-top-color: var(--color-hairline); margin: 17px 0 11px; } :where(.site-shell) .footer p { margin: 0; } :where(.site-shell) .footer-inner { max-width: calc(var(--width-content) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); } :where(.site-shell) .footer > .container { padding-top: 17px; padding-bottom: 11px; } :where(.site-shell) .footer-sosumi { padding: 17px 0 11px; border-bottom: 1px solid var(--color-hairline); } :where(.site-shell) .footer-sosumi p, :where(.site-shell) .footer-sosumi li { margin: 0; padding-bottom: 0.8em; } :where(.site-shell) .footer-sosumi li + li { margin-top: 0; } :where(.site-shell) .footer-sosumi ol { margin: 0; margin-inline-start: 1.3333em; padding: 0; } :where(.site-shell) .footer-breadcrumbs { padding: 15px 0 0; line-height: 2; } :where(.site-shell) .footer-breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } :where(.site-shell) .footer-breadcrumbs li { margin: 0; } :where(.site-shell) .footer-breadcrumbs li:first-child a { font-weight: 600; color: var(--footer-title); } :where(.site-shell) .footer-breadcrumbs li + li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 7px; background: var(--footer-pipe); -webkit-mask: var(--chevron-mask) center / 8px 8px no-repeat; mask: var(--chevron-mask) center / 8px 8px no-repeat; } :where(.site-shell) .footer-breadcrumbs a { text-decoration: none; } :where(.site-shell) .footer-breadcrumbs a:hover { text-decoration: underline; } :where(.site-shell) .footer-breadcrumbs + .footer-directory { padding-top: 17px; } :where(.site-shell) .footer-directory { display: grid; grid-template-columns: repeat(5, 1fr); padding-top: 20px; } :where(.site-shell) .footer-directory-4 { grid-template-columns: repeat(4, 1fr); } :where(.site-shell) .footer-column { padding-right: 20px; } :where(.site-shell) .footer-section { margin-bottom: 24px; } :where(.site-shell) .footer-section-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } :where(.site-shell) .footer-section-title { display: block; font-weight: 600; color: var(--footer-title); margin-bottom: 0.8em; } :where(.site-shell) .footer-section-toggle:focus-visible + .footer-section-title { outline: 2px solid var(--color-accent); outline-offset: 1px; } :where(.site-shell) .footer-section ul { list-style: none; margin: 0; padding: 0; } :where(.site-shell) .footer-section li { margin: 0 0 0.8em; } :where(.site-shell) .footer-section li + li { margin-top: 0; } :where(.site-shell) .footer-section a { text-decoration: none; } :where(.site-shell) .footer-section a:hover { text-decoration: underline; } :where(.site-shell) .footer-legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 30px; padding: 37px 0 11px; } :where(.site-shell) .footer-directory + .footer-legal { padding-top: 37px; } :where(.site-shell) .footer-sosumi + .footer-legal, :where(.site-shell) .footer-inner > .footer-legal:first-child { border-top: none; padding-top: 17px; } :where(.site-shell) .footer-legal-links { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } :where(.site-shell) .footer-legal-links li { margin: 0; padding: 0 10px; border-left: 1px solid var(--footer-pipe); } :where(.site-shell) .footer-legal-links li + li { margin-top: 0; } :where(.site-shell) .footer-legal-links li:first-child { padding-left: 0; border-left: none; } :where(.site-shell) .footer-legal-links li:last-child { padding-right: 0; } :where(.site-shell) .footer-locale { margin-left: auto; } :where(.site-shell) .footer-feedback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 26px 0 8px; border-bottom: 1px solid var(--color-hairline); } :where(.site-shell) .footer-feedback a { color: var(--color-link); } :where(.site-shell) .footer-feedback + .footer-legal { padding-top: 11px; } :where(.site-shell) .footer-scheme { display: inline-flex; padding: 1px; margin: 0; border: 1px solid var(--color-link); border-radius: 12px; font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-link); } :where(.site-shell) .footer-scheme label { position: relative; cursor: pointer; } :where(.site-shell) .footer-scheme input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } :where(.site-shell) .footer-scheme span { display: block; padding: 2px 8px; border-radius: 10px; } :where(.site-shell) .footer-scheme input:checked + span { background: var(--color-accent-fill); color: var(--color-accent-contrast); } :where(.site-shell) .footer-scheme input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; } :where(.site-shell) .footer-language { color: var(--color-link); font-weight: 600; text-decoration: none; } :where(.site-shell) .footer-language::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; vertical-align: 0; background: var(--color-text-tertiary); -webkit-mask: var(--chevron-mask) center / 8px 8px no-repeat; mask: var(--chevron-mask) center / 8px 8px no-repeat; transform: rotate(90deg); } @media (max-width: 833px) { :where(.site-shell) .footer-inner { padding: 0 16px; } :where(.site-shell) .footer-directory { display: block; padding-top: 0; } :where(.site-shell) .footer-column { padding-right: 0; } :where(.site-shell) .footer-section { margin: 0; } :where(.site-shell) .footer-section-title { cursor: pointer; position: relative; padding: 10px 0; margin: 0; border-bottom: 1px solid var(--color-hairline); } :where(.site-shell) .footer-section-title::after { content: "+"; position: absolute; right: 0; top: 10px; font-size: 14px; line-height: 1; transition: transform 0.2s ease; } :where(.site-shell) .footer-section ul { display: none; padding: 5px 0 16px; border-bottom: 1px solid var(--color-hairline); } :where(.site-shell) .footer-section-toggle:checked ~ ul { display: block; } :where(.site-shell) .footer-section-toggle:checked + .footer-section-title::after { transform: rotate(45deg); } :where(.site-shell) .footer-section li { margin: 0; } :where(.site-shell) .footer-section a { display: block; padding: 6px 14px; } :where(.site-shell) .footer-legal { display: block; padding: 17px 0 9px; } :where(.site-shell) .footer-legal > * { margin-top: 5px; } :where(.site-shell) .footer-legal-links { gap: 8px 0; } :where(.site-shell) .footer-locale { margin: 5px 0 0; } :where(.site-shell) .footer-sosumi + .footer-legal { padding-top: 17px; } } } @layer components { :where(.site-shell) .form { max-width: var(--width-prose); } :where(.site-shell) .field { margin-bottom: 20px; } :where(.site-shell) .field > label:not(.check) { display: block; font: 600 var(--text-14) var(--font-text); letter-spacing: var(--track-14); margin-bottom: 8px; } :where(.site-shell) .input, :where(.site-shell) .form input[type="text"], :where(.site-shell) .form input[type="email"], :where(.site-shell) .form input[type="password"], :where(.site-shell) .form input[type="search"], :where(.site-shell) .form input[type="tel"], :where(.site-shell) .form input[type="url"], :where(.site-shell) .form input[type="number"], :where(.site-shell) .form input[type="date"], :where(.site-shell) .form select, :where(.site-shell) .form textarea { display: block; width: 100%; min-height: var(--field-height); font: 400 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); color: var(--color-text); background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--field-radius); padding: 0 16px; transition: border-color 0.15s ease, box-shadow 0.15s ease; appearance: none; -webkit-appearance: none; } :where(.site-shell) .input::placeholder, :where(.site-shell) .form input::placeholder, :where(.site-shell) .form textarea::placeholder { color: var(--color-text-secondary); } :where(.site-shell) .input:focus, :where(.site-shell) .form input:focus, :where(.site-shell) .form select:focus, :where(.site-shell) .form textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); } :where(.site-shell) .input:focus-visible, :where(.site-shell) .form input:focus-visible, :where(.site-shell) .form select:focus-visible, :where(.site-shell) .form textarea:focus-visible { outline: none; } :where(.site-shell) .form textarea, :where(.site-shell) textarea.input { min-height: 120px; padding: 16px; resize: vertical; line-height: 1.47059; } :where(.site-shell) .form select, :where(.site-shell) select.input { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M4 7l6 6 6-6' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } :where(.site-shell) .select { position: relative; display: block; } :where(.site-shell) .select select { background-image: none; } :where(.site-shell) .select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: currentColor; pointer-events: none; -webkit-mask: var(--chevron-mask) center / 12px 12px no-repeat; mask: var(--chevron-mask) center / 12px 12px no-repeat; transform: rotate(90deg); } :where(.site-shell) .field-help { font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-tertiary); margin: 8px 0 0; } :where(.site-shell) .field.is-invalid .input, :where(.site-shell) .field.is-invalid input, :where(.site-shell) .field.is-invalid select, :where(.site-shell) .field.is-invalid textarea { border-color: var(--color-error); background-color: var(--color-error-bg); } :where(.site-shell) .field.is-invalid .input:focus, :where(.site-shell) .field.is-invalid input:focus { box-shadow: inset 0 0 0 1px var(--color-error); } :where(.site-shell) .field.is-invalid > label:not(.check) { color: var(--color-error); } :where(.site-shell) .field-error { font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-error); margin: 8px 0 12px; } :where(.site-shell) .field-floating { position: relative; } :where(.site-shell) .field.field-floating > label { position: absolute; left: 17px; top: 18px; margin: 0; font: 400 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); color: var(--color-text-secondary); pointer-events: none; transform-origin: left top; will-change: transform; transition: transform 0.125s ease-in, color 0.125s ease-in; } :where(.site-shell) .field-floating > .input { padding-top: 18px; } :where(.site-shell) .field.field-floating > .input:focus ~ label, :where(.site-shell) .field.field-floating > .input:not(:placeholder-shown) ~ label { transform: translateY(-8px) scale(0.70588); } :where(.site-shell) .field.field-floating > .input:focus ~ label { transform: translate(-1px, -8px) scale(0.70588); } :where(.site-shell) .field-row { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 735px) { :where(.site-shell) .field-row { grid-template-columns: 1fr 1fr; } :where(.site-shell) .field-row .field { margin-bottom: 0; } :where(.site-shell) .field-row { margin-bottom: 20px; } } :where(.site-shell) .form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 28px; } :where(.site-shell) .form-compact { max-width: none; } :where(.site-shell) .form-compact .field { margin-bottom: 22px; } :where(.site-shell) .form-compact .field > label:not(.check) { display: flex; align-items: center; gap: 6px; font: 600 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); margin-bottom: 6px; } :where(.site-shell) .help-bubble { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--color-fill-tertiary); color: var(--color-text-secondary); font-size: 10px; font-weight: 600; cursor: help; } :where(.site-shell) .form-compact .input, :where(.site-shell) .form-compact input[type="text"], :where(.site-shell) .form-compact input[type="email"], :where(.site-shell) .form-compact input[type="password"], :where(.site-shell) .form-compact input[type="search"], :where(.site-shell) .form-compact input[type="tel"], :where(.site-shell) .form-compact input[type="url"], :where(.site-shell) .form-compact input[type="number"], :where(.site-shell) .form-compact select, :where(.site-shell) .form-compact textarea { min-height: 30px; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); padding: 0 10px; border: 1px solid var(--color-separator); border-radius: var(--radius-xs); background-color: var(--field-bg); } :where(.site-shell) .form-compact select { background-position: right 10px center; padding-right: 30px; background-size: 15px; } :where(.site-shell) .form-compact textarea { padding: 8px 10px; min-height: 90px; line-height: 1.42859; } :where(.site-shell) .form-compact .input:focus, :where(.site-shell) .form-compact input:focus, :where(.site-shell) .form-compact select:focus, :where(.site-shell) .form-compact textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--field-focus-halo); } :where(.site-shell) .form-compact .field.is-invalid .input, :where(.site-shell) .form-compact .field.is-invalid input, :where(.site-shell) .form-compact .field.is-invalid select { border-color: var(--field-error-border); background-color: var(--field-error-bg); } :where(.site-shell) .form-compact .field.is-invalid > label:not(.check) { color: var(--color-text); } :where(.site-shell) .form-compact .field-meta { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 0; } :where(.site-shell) .form-compact .field-error, :where(.site-shell) .form-compact .field-help { margin: 0; font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); } :where(.site-shell) .form-compact .field-error { color: var(--field-error-border); } :where(.site-shell) .form-compact .field-count { font-size: 14px; line-height: 1.33337; color: var(--color-text-tertiary); margin: 0; } :where(.site-shell) .form-compact .check { font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); gap: 8px; margin-bottom: 0; min-height: 20px; } :where(.site-shell) .form-compact .check input[type="checkbox"], :where(.site-shell) .form-compact .check input[type="radio"] { margin-top: 2px; } :where(.site-shell) .form-compact .check + .check { margin-top: 0; } :where(.site-shell) .check-row { display: flex; flex-wrap: wrap; gap: 4px 16px; } :where(.site-shell) .check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } :where(.site-shell) .check-grid .check-sub { padding-left: 21px; } :where(.site-shell) .form-compact .field-row { gap: 20px; } @media (max-width: 734px) { :where(.site-shell) .form-compact .field > label:not(.check) { font: 600 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); margin-bottom: 8px; } :where(.site-shell) .form-compact .input, :where(.site-shell) .form-compact input[type="text"], :where(.site-shell) .form-compact input[type="email"], :where(.site-shell) .form-compact input[type="password"], :where(.site-shell) .form-compact input[type="search"], :where(.site-shell) .form-compact input[type="tel"], :where(.site-shell) .form-compact input[type="url"], :where(.site-shell) .form-compact input[type="number"], :where(.site-shell) .form-compact select { min-height: 40px; font: 400 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); padding: 0 12px; } :where(.site-shell) .form-compact .field-error { font-size: 14px; } :where(.site-shell) .form-compact .check { font-size: 17px; letter-spacing: var(--track-17); min-height: 21px; } :where(.site-shell) .form-compact .check input[type="checkbox"], :where(.site-shell) .form-compact .check input[type="radio"] { margin-top: 2px; } :where(.site-shell) .check-grid { grid-template-columns: 1fr; } } :where(.site-shell) .code-field { display: flex; gap: 20px; } :where(.site-shell) .code-field input { width: 56px; height: 56px; padding: 0; font-family: var(--font-display); font-size: 24px; line-height: 1; text-align: center; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--field-border); border-radius: 10px; appearance: none; -webkit-appearance: none; } :where(.site-shell) .code-field input:focus { outline: none; border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); } @media (max-width: 734px) { :where(.site-shell) .code-field { gap: 10px; } :where(.site-shell) .code-field input { width: 42px; height: 42px; border-radius: 8px; } } :where(.site-shell.id-page) { min-height: 100vh; display: flex; flex-direction: column; } :where(.site-shell) .id-logo { padding: 16px 20px; font-size: 22px; line-height: 1; } :where(.site-shell) .id-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 6.25% 80px; text-align: center; } :where(.site-shell) .id-title { font: 400 var(--text-21) var(--font-display); letter-spacing: var(--track-21); margin: 0 0 24px; } :where(.site-shell) .id-copy { font: 400 var(--text-17) var(--font-text); letter-spacing: var(--track-17); margin: 0 0 32px; max-width: 32em; } :where(.site-shell) .id-links { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 32px; } :where(.site-shell) .id-links a { font-size: 17px; letter-spacing: var(--track-17); } :where(.site-shell) .id-actions { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; width: 100%; max-width: 480px; margin-top: 8px; } :where(.site-shell) .id-actions-right { display: flex; gap: 20px; margin-left: auto; } :where(.site-shell) .id-footer { background: var(--footer-bg); border-top: 1px solid var(--color-hairline); color: var(--footer-text); font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); } :where(.site-shell) .id-footer-inner { max-width: 980px; margin: 0 auto; padding: 24px 22px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; } :where(.site-shell) .id-footer a { color: var(--footer-link); } :where(.site-shell) .id-footer-links { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; } :where(.site-shell) .id-footer-links li { margin: 0; padding: 0 12px; border-left: 1px solid var(--footer-pipe); } :where(.site-shell) .id-footer-links li + li { margin-top: 0; } :where(.site-shell) .id-footer-links li:first-child { padding-left: 0; border-left: none; } @media (max-width: 734px) { :where(.site-shell) .id-main { text-align: center; } :where(.site-shell) .id-links { align-items: flex-start; align-self: stretch; } :where(.site-shell) .id-footer-inner { display: block; padding: 24px 16px; } :where(.site-shell) .id-footer-links { margin-top: 8px; } } :where(.site-shell) .login { width: 460px; max-width: 100%; text-align: left; } :where(.site-shell) .login-title { font: 400 var(--text-21) var(--font-display); letter-spacing: var(--track-21); text-align: center; margin: 0 0 40px; } :where(.site-shell) .login .field { margin: 0; } :where(.site-shell) .login .field + .field { margin-top: 12px; } :where(.site-shell) .login-link { display: inline-block; margin: 16px 0 0; font-size: 17px; letter-spacing: var(--track-17); } :where(.site-shell) .login-link::after { content: " \2197"; } :where(.site-shell) .login-note { margin: 32px 0 0; font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); } :where(.site-shell) .login-note p { margin: 0; } :where(.site-shell) .login-note-glyph { display: block; width: 40px; height: 36px; margin: 0 0 16px; background: var(--color-accent-fill); -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Ccircle cx='13' cy='9' r='7'/%3E%3Cpath d='M0 36c0-9 5-14 13-14s13 5 13 14z'/%3E%3Ccircle cx='30' cy='11' r='5.5' opacity='.45'/%3E%3Cpath d='M22 36c0-7 3-11 8-11s10 4 10 11z' opacity='.45'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Ccircle cx='13' cy='9' r='7'/%3E%3Cpath d='M0 36c0-9 5-14 13-14s13 5 13 14z'/%3E%3Ccircle cx='30' cy='11' r='5.5' opacity='.45'/%3E%3Cpath d='M22 36c0-7 3-11 8-11s10 4 10 11z' opacity='.45'/%3E%3C/svg%3E") center / contain no-repeat; } :where(.site-shell) .login-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; } :where(.site-shell) .login-actions .btn { text-align: center; } :where(.site-shell) .login-caption { font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); text-align: right; margin: 12px 0 0; } @media (max-width: 734px) { :where(.site-shell) .login-actions { grid-template-columns: 1fr; } :where(.site-shell) .login-caption { text-align: center; } } } @layer components { :where(.site-shell) .toggle { --toggle-w: 34px; --toggle-h: 18px; --toggle-knob: 14px; position: relative; display: inline-block; vertical-align: middle; width: var(--toggle-w); height: var(--toggle-h); flex-shrink: 0; cursor: pointer; } :where(.site-shell) .toggle input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } :where(.site-shell) .toggle-track { position: absolute; inset: 0; background: var(--toggle-off); border: 1px solid var(--toggle-border); border-radius: var(--radius-pill); transition: background 0.2s ease, border-color 0.2s ease; } :where(.site-shell) .toggle-track::after { content: ""; position: absolute; top: 1px; left: 1px; width: var(--toggle-knob); height: var(--toggle-knob); background: var(--toggle-knob-color); border-radius: 50%; transition: transform 0.2s ease; } :where(.site-shell) .toggle input:checked + .toggle-track { background: var(--toggle-on); border-color: var(--toggle-on); } :where(.site-shell) .toggle input:checked + .toggle-track::after { transform: translateX(calc(var(--toggle-w) - var(--toggle-knob) - 4px)); } :where(.site-shell) .toggle input:focus-visible + .toggle-track { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); } :where(.site-shell) .toggle input:disabled + .toggle-track { opacity: 0.42; } :where(.site-shell) .toggle-large { --toggle-w: 51px; --toggle-h: 31px; --toggle-knob: 27px; } :where(.site-shell) .toggle-large .toggle-track::after { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16); } :where(.site-shell) .check { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.47059; letter-spacing: var(--track-17); cursor: pointer; margin-bottom: 12px; } :where(.site-shell) .check input[type="checkbox"], :where(.site-shell) .check input[type="radio"] { appearance: none; -webkit-appearance: none; flex: none; width: 14px; height: 14px; margin: 5px 0 0; background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 3px; cursor: pointer; display: grid; place-content: center; transition: background 0.15s ease, border-color 0.15s ease; } :where(.site-shell) .check input[type="radio"] { border-radius: 50%; } :where(.site-shell) .check input:checked { background: var(--color-accent-fill); border-color: var(--color-accent-fill); } :where(.site-shell) .check input[type="checkbox"]:checked::before { content: ""; width: 10px; height: 10px; background: var(--color-accent-contrast); -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.4 2.4 4.6-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.4 2.4 4.6-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } :where(.site-shell) .check input[type="radio"]:checked::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-contrast); } :where(.site-shell) .check input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } :where(.site-shell) .check input:disabled { background: rgba(0, 0, 0, 0.01); border-color: rgba(134, 134, 139, 0.42); cursor: default; } :where(.site-shell) .check input:disabled + *, :where(.site-shell) .check:has(input:disabled) { color: var(--color-text-secondary); } :where(.site-shell) .field.is-invalid .check input { background: var(--color-error-bg); border-color: var(--color-error); } :where(.site-shell) .segmented { --seg-h: 44px; --seg-pad: 4px; --seg-font: 14px/1.28577; --seg-track: -0.016em; --seg-x: 16px; --seg-n: 2; --seg-i: 0; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; vertical-align: middle; max-width: 100%; height: var(--seg-h); padding: var(--seg-pad); background: var(--color-fill-tertiary); border-radius: var(--radius-pill); -webkit-user-select: none; user-select: none; } :where(.site-shell) .segmented::before { content: ""; position: absolute; top: var(--seg-pad); bottom: var(--seg-pad); left: calc(var(--seg-pad) + var(--seg-i) * (100% - 2 * var(--seg-pad)) / var(--seg-n)); width: calc((100% - 2 * var(--seg-pad)) / var(--seg-n)); background: var(--color-text); border-radius: var(--radius-pill); transition: left 0.32s ease-out, width 0.32s ease-out; } :where(.site-shell) .segmented label { position: relative; display: grid; min-width: 0; cursor: pointer; } :where(.site-shell) .segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } :where(.site-shell) .segmented span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; font: 400 var(--seg-font) var(--font-text); letter-spacing: var(--seg-track); padding: 0 var(--seg-x); border-radius: var(--radius-pill); color: var(--color-text); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.16s ease-out, opacity 0.1s ease-in-out; } :where(.site-shell) .segmented span:hover { opacity: 1; } :where(.site-shell) .segmented input:checked + span { color: var(--color-bg); opacity: 1; transition-delay: 0.08s; } :where(.site-shell) .segmented input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; } :where(.site-shell) .segmented:has(> label:nth-child(3):last-child) { --seg-n: 3; } :where(.site-shell) .segmented:has(> label:nth-child(4):last-child) { --seg-n: 4; } :where(.site-shell) .segmented:has(> label:nth-child(5):last-child) { --seg-n: 5; } :where(.site-shell) .segmented:has(> label:nth-child(6):last-child) { --seg-n: 6; } :where(.site-shell) .segmented:has(> label:nth-child(2) > input:checked) { --seg-i: 1; } :where(.site-shell) .segmented:has(> label:nth-child(3) > input:checked) { --seg-i: 2; } :where(.site-shell) .segmented:has(> label:nth-child(4) > input:checked) { --seg-i: 3; } :where(.site-shell) .segmented:has(> label:nth-child(5) > input:checked) { --seg-i: 4; } :where(.site-shell) .segmented:has(> label:nth-child(6) > input:checked) { --seg-i: 5; } :where(.site-shell) .segmented:not(:has(input:checked))::before { opacity: 0; } :where(.site-shell) .segmented-large { --seg-h: 56px; --seg-pad: 6px; --seg-font: 17px/1.17648; --seg-track: -0.022em; --seg-x: 22px; } :where(.site-shell) .segmented-small { --seg-h: 30px; --seg-pad: 2px; --seg-font: 14px/1.28577; --seg-x: 12px; } :where(.site-shell) .segmented-full { display: grid; width: 100%; } :where(.site-shell) .form .segmented { --seg-h: 56px; --seg-pad: 6px; --seg-font: 17px/1.17648; --seg-track: -0.022em; --seg-x: 22px; } :where(.site-shell) .form-compact .segmented, :where(.site-shell) .toolbar .segmented { --seg-h: 30px; --seg-pad: 2px; --seg-font: 14px/1.28577; --seg-track: -0.016em; --seg-x: 12px; } } @layer components { :where(.site-shell) .badge { display: inline-block; font: 600 var(--text-12) var(--font-text); letter-spacing: var(--track-12); padding: 4px 6px; border-radius: 5px; background: var(--badge-bg); color: var(--badge-text); } :where(.site-shell) .badge-success, :where(.site-shell) .badge-error, :where(.site-shell) .badge-warning, :where(.site-shell) .badge-accent, :where(.site-shell) .badge-tip { font-weight: 500; padding: 1px 5px; border: 1px solid currentColor; border-radius: 3px; background: transparent; } :where(.site-shell) .badge-success { color: var(--color-success); } :where(.site-shell) .badge-error { color: var(--color-error); } :where(.site-shell) .badge-warning { color: var(--color-warning); } :where(.site-shell) .badge-tip { color: var(--color-tip); } :where(.site-shell) .badge-accent { color: var(--color-link); } } @layer components { :where(.site-shell) .breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); } :where(.site-shell) .breadcrumbs li { display: flex; align-items: center; gap: 8px; margin: 0; } :where(.site-shell) .breadcrumbs li + li::before { content: "\203A"; color: var(--color-text-tertiary); } :where(.site-shell) .breadcrumbs a { color: var(--color-text-secondary); } :where(.site-shell) .breadcrumbs [aria-current] { color: var(--color-text); font-weight: 500; } :where(.site-shell) .docs { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); margin: 0 auto; padding-bottom: var(--space-section); } :where(.site-shell) .docs-main { min-width: 0; padding: 0 80px; } :where(.site-shell) .docs-article { min-width: 0; max-width: 660px; margin: 0 auto; } :where(.site-shell) .docs-article > h1 { margin-top: 0; } :where(.site-shell) .docs-hero { background: color-mix(in srgb, var(--color-text-tertiary) 15%, var(--color-bg)); padding: 40px 80px; margin: 0 -80px 40px; } :where(.site-shell) .docs-hero-inner { max-width: 660px; margin: 0 auto; } :where(.site-shell) .docs-hero .breadcrumbs { margin-bottom: 24px; font: 400 var(--text-17) var(--font-text); letter-spacing: var(--track-17); } :where(.site-shell) .docs-hero .breadcrumbs a { color: var(--color-text); text-decoration: underline; } :where(.site-shell) .docs-hero-eyebrow { display: block; font: 500 var(--text-21) var(--font-display); letter-spacing: var(--track-21); color: var(--color-text-secondary); margin: 0 0 15px; } :where(.site-shell) .docs-hero h1 { font: 700 var(--text-40) var(--font-display); letter-spacing: var(--track-40); margin: 0 0 12px; } :where(.site-shell) .docs-hero-abstract { font: 500 var(--text-21-loose) var(--font-display); letter-spacing: var(--track-21); margin: 0; } :where(.site-shell) .docs-availability { display: flex; flex-wrap: wrap; gap: 0 12px; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); margin: 16px 0 0; padding: 0; list-style: none; } :where(.site-shell) .docs-availability li { margin: 0; } :where(.site-shell) .docs-availability li + li { padding-left: 12px; border-left: 1px solid var(--color-separator); } :where(.site-shell) .docs-declaration { margin-top: 24px; } :where(.site-shell) .docs-declaration pre { margin: 0; } :where(.site-shell) .docs-article h3 { font: 600 var(--text-28) var(--font-display); letter-spacing: var(--track-28); } :where(.site-shell) .docs-article h4 { font: 600 var(--text-24) var(--font-display); letter-spacing: var(--track-24); } :where(.site-shell) .docs-see-also { border-top: 1px solid var(--color-separator); margin-top: 40px; padding-top: 40px; } :where(.site-shell) .docs-see-also h2 { margin-top: 0; } :where(.site-shell) .docs-link-list, :where(.site-shell) .docs-see-also ul { list-style: none; margin: 0; padding: 0; } :where(.site-shell) .docs-link-list li, :where(.site-shell) .docs-see-also li { margin: 0 0 20px; } :where(.site-shell) .docs-link-list li + li, :where(.site-shell) .docs-see-also li + li { margin-top: 0; } :where(.site-shell) .docs-link-list li a, :where(.site-shell) .docs-see-also li a { display: block; margin-bottom: 4px; } :where(.site-shell) .docs-nav { position: sticky; top: var(--nav-height); align-self: start; height: calc(100vh - var(--nav-height)); display: flex; flex-direction: column; border-right: 1px solid var(--color-separator); } :where(.site-shell) .docs-nav-inner { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 0 24px; } :where(.site-shell) .docs-nav-back { display: block; font: 600 14px/21px var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); text-decoration: none; padding: 0 20px; margin: 0; } :where(.site-shell) .docs-nav-back::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; vertical-align: -1px; background: currentColor; -webkit-mask: var(--chevron-mask) center / 10px 10px no-repeat; mask: var(--chevron-mask) center / 10px 10px no-repeat; transform: scaleX(-1); } :where(.site-shell) .docs-nav-back:hover { text-decoration: none; color: var(--color-link); } :where(.site-shell) .docs-nav-tech { font: 600 17px/23px var(--font-text); letter-spacing: var(--track-17); margin: 0; padding: 8px 20px 8px 40px; } :where(.site-shell) .docs-nav-group { margin: 0; } :where(.site-shell) .docs-nav ul { list-style: none; margin: 0; padding: 0; } :where(.site-shell) .docs-nav li { margin: 0; } :where(.site-shell) .docs-nav li + li { margin-top: 0; } :where(.site-shell) .docs-nav ul a, :where(.site-shell) .docs-nav summary { display: block; min-height: 35px; font: 400 var(--text-17) var(--font-text); letter-spacing: var(--track-17); color: var(--color-text); text-decoration: none; padding: 5px 20px 5px 0; margin: 0 20px; border-radius: var(--radius-row); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(.site-shell) .docs-nav ul a:hover, :where(.site-shell) .docs-nav summary:hover { background: var(--navigator-hover); text-decoration: none; } :where(.site-shell) .docs-nav ul a.is-active, :where(.site-shell) .docs-nav details.is-active > summary { background: var(--row-active); font-weight: 600; } :where(.site-shell) .docs-nav summary { list-style: none; } :where(.site-shell) .docs-nav summary::-webkit-details-marker { display: none; } :where(.site-shell) .docs-nav ul a::before, :where(.site-shell) .docs-nav summary::before { content: ""; display: inline-block; vertical-align: top; margin-top: 2.5px; width: 20px; height: 20px; background: no-repeat center / 10px 10px; } :where(.site-shell) .docs-nav summary::before { background: currentColor; -webkit-mask: var(--chevron-mask) center / 10px 10px no-repeat; mask: var(--chevron-mask) center / 10px 10px no-repeat; transition: transform 0.15s ease; } :where(.site-shell) .docs-nav details[open] > summary::before { transform: rotate(90deg); } :where(.site-shell) .docs-nav ul ul :is(a, summary) { padding-left: 15px; } :where(.site-shell) .docs-nav ul ul ul :is(a, summary) { padding-left: 30px; } :where(.site-shell) .docs-nav ul ul ul ul :is(a, summary) { padding-left: 45px; } :where(.site-shell) .docs-nav .docs-tree-label, :where(.site-shell) .docs-nav-title { min-height: 35px; display: block; font: 600 var(--text-17) var(--font-text); letter-spacing: var(--track-17); color: var(--color-text-tertiary); padding: 5px 20px 5px 20px; margin: 0 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(.site-shell) .docs-nav ul ul .docs-tree-label { padding-left: 35px; } :where(.site-shell) .docs-nav ul ul ul .docs-tree-label { padding-left: 50px; } :where(.site-shell) .docs-icon { width: 17px; height: 17px; margin-right: 7px; color: var(--color-text-tertiary); display: inline-flex; align-items: center; justify-content: center; vertical-align: top; margin-top: 4px; font-style: normal; } :where(.site-shell) .docs-icon-badge { border: 1px solid currentColor; border-radius: 3px; font-size: 9px; line-height: 1; font-weight: 600; letter-spacing: 0; } :where(.site-shell) .docs-icon-badge::before { content: attr(data-kind); } :where(.site-shell) .docs-icon[class*="docs-icon-"], :where(.site-shell) .docs-icon[style*="--icon"] { background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } :where(.site-shell) .docs-icon.docs-icon-badge { -webkit-mask: none; mask: none; background: none; } :where(.site-shell) svg.docs-icon { fill: currentColor; } :where(.site-shell) .docs-icon-list { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M6 3.5h9M6 8.5h9M6 13.5h9'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='2.5' cy='3.5' r='1.2'/%3E%3Ccircle cx='2.5' cy='8.5' r='1.2'/%3E%3Ccircle cx='2.5' cy='13.5' r='1.2'/%3E%3C/g%3E%3C/svg%3E"); } :where(.site-shell) .docs-icon-doc { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M3.5 1.5h6l4 4v10h-10z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M9.5 1.5v4h4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); } :where(.site-shell) .docs-icon-grid { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Crect x='1.5' y='1.5' width='6' height='6' rx='1.2'/%3E%3Crect x='9.5' y='1.5' width='6' height='6' rx='1.2'/%3E%3Crect x='1.5' y='9.5' width='6' height='6' rx='1.2'/%3E%3Crect x='9.5' y='9.5' width='6' height='6' rx='1.2'/%3E%3C/g%3E%3C/svg%3E"); } :where(.site-shell) .docs-icon-text { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2 3.5h13M2 7.5h13M2 11.5h8'/%3E%3C/g%3E%3C/svg%3E"); } :where(.site-shell) .docs-icon-window { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Crect x='1.5' y='2.5' width='14' height='12' rx='2' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M1.5 6h14' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E"); } :where(.site-shell) .docs-icon-menu { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Crect x='1.5' y='2.5' width='14' height='12' rx='2' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M4.5 6.5h8M4.5 9.5h8M4.5 12.5h5' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); } :where(.site-shell) .docs-icon-nav { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M8.5 1.5l6.5 14-6.5-3-6.5 3z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); } :where(.site-shell) .docs-icon-toggle { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Crect x='1.5' y='4.5' width='14' height='8' rx='4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Ccircle cx='11.5' cy='8.5' r='2.5' fill='%23000'/%3E%3C/svg%3E"); } :where(.site-shell) .docs-icon-status { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Ccircle cx='8.5' cy='8.5' r='6.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M5.5 8.5l2 2 4-4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } :where(.site-shell) .docs-icon-gear { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Ccircle cx='8.5' cy='8.5' r='2.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M8.5 1.5v2.2M8.5 13.3v2.2M1.5 8.5h2.2M13.3 8.5h2.2M3.55 3.55l1.55 1.55M11.9 11.9l1.55 1.55M3.55 13.45l1.55-1.55M11.9 5.1l1.55-1.55' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); } :where(.site-shell) .docs-nav-filter { flex: none; background: var(--color-bg); border-top: 1px solid var(--color-separator); padding: 15px 20px; } :where(.site-shell) .docs-nav-filter input, :where(.site-shell) .guide-filter input { display: block; width: 100%; height: 40px; font: inherit; font-size: 17px; color: var(--color-text); padding: 0 14px 0 42px; border: 1px solid var(--color-separator); border-radius: 13px; background: var(--color-bg); } :where(.site-shell) .docs-nav-filter, :where(.site-shell) .guide-filter { position: relative; display: block; } :where(.site-shell) .docs-nav-filter::before, :where(.site-shell) .guide-filter::before { content: ""; position: absolute; left: 13px; top: 50%; width: 16px; height: 10px; margin-top: -5px; background: var(--color-text-tertiary); pointer-events: none; -webkit-mask: var(--filter-mask) center / 16px 10px no-repeat; mask: var(--filter-mask) center / 16px 10px no-repeat; } :where(.site-shell) .docs-nav-filter::before { left: 33px; } :where(.site-shell) .toc { align-self: start; } :where(.site-shell) .toc-title { font-size: 12px; letter-spacing: var(--track-12); font-weight: 600; margin: 0 0 8px; } :where(.site-shell) .toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--color-separator); } :where(.site-shell) .toc li { margin: 0; } :where(.site-shell) .toc li + li { margin-top: 0; } :where(.site-shell) .toc a { display: block; font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-secondary); text-decoration: none; padding: 2.5px 0 2.5px 10px; border-left: 1px solid transparent; margin-left: -1px; transition: color 0.15s ease-in, border-color 0.15s ease-in; } :where(.site-shell) .toc a:hover { color: var(--color-text); text-decoration: none; } :where(.site-shell) .toc a.is-active { color: var(--color-text); border-left-color: var(--color-text-secondary); } :where(.site-shell) .toc .toc-sub a { padding-left: 20px; } @media (min-width: 1251px) { :where(.site-shell) .docs-article, :where(.site-shell) .docs-hero-inner { max-width: 820px; } } @media (min-width: 1500px) { :where(.site-shell) .docs-article, :where(.site-shell) .docs-hero-inner { max-width: 920px; } } :where(.site-shell) .navigator-head { display: none; } @media (max-width: 1023px) { :where(.site-shell) .docs { grid-template-columns: 1fr; } :where(.site-shell) .docs-nav, :where(.site-shell) .guide-nav { display: none; } :where(.site-shell) .navigator-toggle:checked ~ .docs .docs-nav, :where(.site-shell) .navigator-toggle:checked ~ .guide .guide-nav { display: flex; flex-direction: column; align-self: stretch; position: fixed; inset: 0; z-index: 110; height: auto; max-height: none; margin: 0; border: none; background: var(--color-bg); overflow: hidden; } :where(.site-shell:has(.navigator-toggle:checked)) { overflow: hidden; } :where(.site-shell) .navigator-head { display: flex; align-items: center; justify-content: space-between; flex: none; height: 48px; padding: 0 22px; font: 600 17px/1 var(--font-text); letter-spacing: var(--track-17); } :where(.site-shell) .navigator-close { width: 19px; height: 19px; cursor: pointer; -webkit-tap-highlight-color: transparent; background: linear-gradient(var(--color-text), var(--color-text)) center / 100% 1.5px no-repeat, linear-gradient(var(--color-text), var(--color-text)) center / 1.5px 100% no-repeat; transform: rotate(45deg); } :where(.site-shell) .docs-nav-filter { border-top: none; padding: 10px 20px; } :where(.site-shell) .docs-nav-inner { order: 1; padding-top: 10px; } :where(.site-shell) .docs-main { padding: 0 34px; } :where(.site-shell) .docs-hero { padding: 40px 34px; margin: 0 -34px 32px; } } @media (max-width: 734px) { :where(.site-shell) .docs-main { padding: 0 6.25%; } :where(.site-shell) .docs-hero { padding: 24px 6.25%; margin: 0 -7.1429% 24px; } :where(.site-shell) .docs-hero h1 { font: 700 var(--text-28) var(--font-display); letter-spacing: var(--track-28); } :where(.site-shell) .docs-hero-eyebrow, :where(.site-shell) .docs-hero-abstract { font-size: 19px; } :where(.site-shell) .docs-article h3 { font: 600 var(--text-21) var(--font-display); letter-spacing: var(--track-21); } :where(.site-shell) .docs-article h4 { font: 600 var(--text-21) var(--font-display); letter-spacing: var(--track-21); } } :where(.site-shell) .docs-pager { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--color-separator); margin-top: 56px; padding-top: 24px; } :where(.site-shell) .docs-pager a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; } :where(.site-shell) .docs-pager a:hover .docs-pager-title { text-decoration: underline; } :where(.site-shell) .docs-pager-label { font-size: 12px; letter-spacing: var(--track-12); color: var(--color-text-tertiary); } :where(.site-shell) .docs-pager-title { font-size: 14px; letter-spacing: var(--track-14); color: var(--color-link); } :where(.site-shell) .docs-pager-next { text-align: right; margin-left: auto; } :where(.site-shell) .guide { display: grid; grid-template-columns: 200px 40px minmax(0, 1fr) 32px 169px; width: var(--width-content); max-width: 100%; margin: 0 auto; padding: 40px 0 var(--space-section); } :where(.site-shell) .guide-nav { grid-column: 1; align-self: start; position: sticky; top: var(--nav-height); display: flex; flex-direction: column; max-height: calc(100vh - var(--nav-height)); margin-top: -15px; padding-top: 20px; } :where(.site-shell) .guide-nav > ul { flex: 1 1 auto; min-height: 0; overflow-y: auto; } :where(.site-shell) .guide-main { grid-column: 3; min-width: 0; } :where(.site-shell) .guide-aside { grid-column: 5; align-self: start; position: sticky; top: calc(var(--nav-height) + 20px); margin-top: 90px; } :where(.site-shell) .guide-filter { flex: none; margin-bottom: 11px; } :where(.site-shell) .docs-nav-filter input:focus, :where(.site-shell) .guide-filter input:focus { outline: none; border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); } :where(.site-shell) .guide-nav ul { list-style: none; margin: 0; padding: 0; } :where(.site-shell) .guide-nav li { margin: 0; } :where(.site-shell) .guide-nav li + li { margin-top: 0; } :where(.site-shell) .guide-nav a, :where(.site-shell) .guide-nav summary { display: block; position: relative; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text-secondary); text-decoration: none; padding: 7px 0 7px 15px; cursor: pointer; transition: color 0.15s ease-in; } :where(.site-shell) .guide-nav a:hover, :where(.site-shell) .guide-nav summary:hover { color: var(--color-text); text-decoration: none; } :where(.site-shell) .guide-nav a.is-active, :where(.site-shell) .guide-nav .is-open > summary { color: var(--color-text); font-weight: 600; } :where(.site-shell) .guide-nav summary { list-style: none; position: relative; } :where(.site-shell) .guide-nav summary::-webkit-details-marker { display: none; } :where(.site-shell) .guide-nav summary::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -5px; width: 10px; height: 10px; background: var(--color-text-secondary); -webkit-mask: var(--chevron-mask) center / 10px 10px no-repeat; mask: var(--chevron-mask) center / 10px 10px no-repeat; transition: transform 0.15s ease; } :where(.site-shell) .guide-nav .docs-icon { position: absolute; left: 15px; top: 50%; margin: -8.5px 0 0; color: var(--color-text-secondary); } :where(.site-shell) .guide-nav ul ul .docs-icon { left: 30px; } :where(.site-shell) .guide-nav ul ul ul .docs-icon { left: 45px; } :where(.site-shell) .guide-nav :is(a, summary):has(> .docs-icon) { padding-left: 39px; } :where(.site-shell) .guide-nav ul ul :is(a, summary):has(> .docs-icon) { padding-left: 54px; } :where(.site-shell) .guide-nav ul ul ul :is(a, summary):has(> .docs-icon) { padding-left: 69px; } :where(.site-shell) .guide-nav details[open] > summary::before { transform: rotate(90deg); } :where(.site-shell) .guide-nav ul ul a, :where(.site-shell) .guide-nav ul ul summary { padding-left: 54px; } :where(.site-shell) .guide-nav ul ul summary::before { left: 15px; } :where(.site-shell) .guide-nav ul ul ul a { padding-left: 55px; } :where(.site-shell) .guide-title { font: 700 var(--text-48) var(--font-display); letter-spacing: var(--track-48); margin: 0 0 32px; } :where(.site-shell) .guide-abstract { font: 400 var(--text-28) var(--font-display); letter-spacing: var(--track-28); margin: 0 0 32px; } :where(.site-shell) .guide-main h2 { font-weight: 700; } :where(.site-shell) .guide-main h3 { font: 600 var(--text-28) var(--font-display); letter-spacing: var(--track-28); } :where(.site-shell) .guide-main figure { margin: calc(var(--space-block) * 2) 0; } :where(.site-shell) .guide-main figure .media-placeholder { border-radius: 20px; } :where(.site-shell) .guide-main figcaption { font-size: 14px; line-height: 1.5; letter-spacing: var(--track-14); margin-top: 0.8em; } :where(.site-shell) .guide-main table { font-size: 14px; line-height: 1.42859; letter-spacing: var(--track-14); } :where(.site-shell) .guide-main th, :where(.site-shell) .guide-main td { border-width: 1px 0; min-width: 100px; } :where(.site-shell) .guide-main th { border-color: var(--color-text); } :where(.site-shell) .guide-main td { color: var(--color-text-secondary); } @media (min-width: 1380px) { :where(.site-shell) .guide { grid-template-columns: 200px 40px minmax(0, 1fr) 0; } :where(.site-shell) .guide-aside { grid-column: 4; width: 169px; margin-left: 32px; } } @media (max-width: 1023px) { :where(.site-shell) .guide { width: var(--width-content-medium); grid-template-columns: minmax(0, 1fr) 32px 169px; } :where(.site-shell) .guide-main { grid-column: 1; } :where(.site-shell) .guide-aside { grid-column: 3; } :where(.site-shell) .guide-nav { display: none; } :where(.site-shell) .navigator-toggle:checked ~ .guide .guide-nav { display: block; overflow-y: auto; padding: 0 0 24px; } :where(.site-shell) .guide-nav .navigator-head { position: sticky; top: 0; background: var(--color-bg); } :where(.site-shell) .guide-nav .guide-filter { width: calc(100% - 40px); margin: 10px 20px 20px; } :where(.site-shell) .guide-nav a, :where(.site-shell) .guide-nav summary { font: 400 var(--text-17) var(--font-text); letter-spacing: var(--track-17); color: var(--color-text); min-height: 35px; padding: 5px 20px 5px 40px; margin: 0 20px; border-radius: var(--radius-row); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(.site-shell) .guide-nav a.is-active { background: var(--row-active); } :where(.site-shell) .guide-nav summary::before { left: 5px; background: var(--color-text); } :where(.site-shell) .guide-nav ul ul a, :where(.site-shell) .guide-nav ul ul summary { padding-left: 60px; } :where(.site-shell) .guide-nav ul ul summary::before { left: 25px; } :where(.site-shell) .guide-nav ul ul ul a { padding-left: 80px; } :where(.site-shell) .guide-nav .docs-icon { left: 20px; } :where(.site-shell) .guide-nav ul ul .docs-icon { left: 40px; } :where(.site-shell) .guide-nav ul ul ul .docs-icon { left: 60px; } :where(.site-shell) .guide-nav :is(a, summary):has(> .docs-icon) { padding-left: 44px; } :where(.site-shell) .guide-nav ul ul :is(a, summary):has(> .docs-icon) { padding-left: 64px; } :where(.site-shell) .guide-nav ul ul ul :is(a, summary):has(> .docs-icon) { padding-left: 84px; } } @media (max-width: 767px) { :where(.site-shell) .guide { grid-template-columns: 1fr; } :where(.site-shell) .guide-aside { display: none; } } @media (max-width: 734px) { :where(.site-shell) .guide { width: 87.5%; padding-top: 24px; } :where(.site-shell) .guide-title { font: 700 var(--text-32) var(--font-display); letter-spacing: var(--track-32); margin-bottom: 20px; } :where(.site-shell) .guide-abstract { font: 400 var(--text-21) var(--font-display); letter-spacing: var(--track-21); } :where(.site-shell) .guide-main h3 { font: 600 var(--text-21) var(--font-display); letter-spacing: var(--track-21); } } } @layer components { :where(.site-shell) .eyebrow { display: block; font: 600 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); color: var(--color-text-secondary); margin: 0 0 10px; } :where(.site-shell) .eyebrow-muted { color: var(--color-text-secondary); } :where(.site-shell) .eyebrow-strong { color: var(--color-text); } :where(.site-shell) .price-card { background: var(--color-bg); border-radius: var(--radius-l); padding: 32px 28px; display: flex; flex-direction: column; } :where(.site-shell) .price-card.is-featured { box-shadow: 0 0 0 2px var(--color-accent) inset; } :where(.site-shell) .price-name { font: 600 var(--text-21) var(--font-display); letter-spacing: var(--track-21); margin: 0; } :where(.site-shell) .price-value { font: 600 var(--text-40) var(--font-display); letter-spacing: var(--track-40); margin: 14px 0 2px; } :where(.site-shell) .price-period { font-size: 12px; letter-spacing: var(--track-12); color: var(--color-text-tertiary); margin: 0 0 20px; } :where(.site-shell) .price-desc { font-size: 14px; letter-spacing: var(--track-14); color: var(--color-text-secondary); margin: 0 0 20px; } :where(.site-shell) .price-features { list-style: none; margin: 0 0 28px; padding: 0; } :where(.site-shell) .price-features li { position: relative; font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); padding-left: 24px; margin-bottom: 10px; } :where(.site-shell) .price-features li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-accent); font-weight: 600; } :where(.site-shell) .price-card .btn { margin-top: auto; text-align: center; } :where(.site-shell) .faq details { border-bottom: 1px solid var(--color-separator); } :where(.site-shell) .faq details:first-child { border-top: 1px solid var(--color-separator); } :where(.site-shell) .faq summary { font-size: 17px; letter-spacing: var(--track-17); font-weight: 600; padding: 18px 32px 18px 0; cursor: pointer; list-style: none; position: relative; } :where(.site-shell) .faq summary::-webkit-details-marker { display: none; } :where(.site-shell) .faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 21px; font-weight: 400; color: var(--color-text-tertiary); transition: transform 0.2s ease; } :where(.site-shell) .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); } :where(.site-shell) .faq details > p { margin: 0 0 20px; color: var(--color-text-secondary); max-width: 60ch; } :where(.site-shell) .media-placeholder { border-radius: var(--radius-l); background: linear-gradient(135deg, light-dark(#dbe4ee, #2c2c2e) 0%, light-dark(#c3d0e0, #242426) 50%, light-dark(#aebfd4, #1c1c1e) 100%); aspect-ratio: 16 / 9; } :where(.site-shell) .feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--color-bg-alt); border-bottom: 12px solid var(--color-bg); padding: 0 68px; } :where(.site-shell) .feature > * { padding: 16% 0; } :where(.site-shell) .feature-copy { max-width: 452px; margin: 0 auto; } :where(.site-shell) .feature-copy h2, :where(.site-shell) .feature-copy .feature-title { font: 600 var(--text-40) var(--font-display); letter-spacing: var(--track-40); margin: 0 0 0.4em; } :where(.site-shell) .feature-copy p { margin: 0 0 1em; } :where(.site-shell) .feature-media { display: flex; align-items: center; justify-content: center; } :where(.site-shell) .feature-media > * { width: 87%; max-width: 498px; } :where(.site-shell) .feature-reverse .feature-copy { order: -1; } :where(.site-shell) .feature-pair { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 12px solid var(--color-bg); } :where(.site-shell) .feature-pair > * { background: var(--color-bg-alt); padding: 51px; } :where(.site-shell) .feature-pair > :first-child { border-right: 6px solid var(--color-bg); } :where(.site-shell) .feature-pair > :last-child { border-left: 6px solid var(--color-bg); } :where(.site-shell) .feature-pair-copy { width: 452px; max-width: 100%; margin: 0 auto; } :where(.site-shell) .feature-pair h2 { font: 600 var(--text-40) var(--font-display); letter-spacing: var(--track-40); margin: 12px 0 0; } :where(.site-shell) .feature-pair p { margin: 17px 0 0; } :where(.site-shell) .feature-pair p + a, :where(.site-shell) .feature-pair p + .link-chevron { display: inline-block; margin-top: 13.6px; } :where(.site-shell) .feature-icon { display: block; width: 96px; height: 96px; border-radius: 22px; margin-bottom: 17px; } @media (max-width: 1068px) { :where(.site-shell) .feature { padding: 0 34px; } :where(.site-shell) .feature-copy { max-width: none; } :where(.site-shell) .feature-copy h2, :where(.site-shell) .feature-pair h2 { font: 600 var(--text-32) var(--font-display); letter-spacing: var(--track-32); } :where(.site-shell) .feature-pair { padding: 0 34px; } :where(.site-shell) .feature-pair-copy { width: auto; } :where(.site-shell) .feature-pair h2 { margin-top: 9.6px; } } @media (max-width: 734px) { :where(.site-shell) .feature { grid-template-columns: 1fr; padding: 0 6.25%; } :where(.site-shell) .feature > * { padding: 12% 0; } :where(.site-shell) .feature > :first-child { padding-bottom: 0; } :where(.site-shell) .feature-reverse .feature-copy { order: 0; } :where(.site-shell) .feature-copy h2, :where(.site-shell) .feature-pair h2 { font: 600 var(--text-28) var(--font-display); letter-spacing: var(--track-28); } :where(.site-shell) .feature-pair { grid-template-columns: 1fr; padding: 0; } :where(.site-shell) .feature-pair > * { padding: 12% 17px; border-bottom: 12px solid var(--color-bg); } :where(.site-shell) .feature-pair > :first-child, :where(.site-shell) .feature-pair > :last-child { border-left: none; border-right: none; } :where(.site-shell) .feature-pair > :last-child { border-bottom: none; } :where(.site-shell) .feature-pair-copy { width: 90%; text-align: center; } :where(.site-shell) .feature-pair .feature-icon { margin-left: auto; margin-right: auto; } :where(.site-shell) .feature-pair h2 { margin-top: 8.4px; } } :where(.site-shell) .section-dark { background: var(--color-bg); color: var(--color-text); } } @layer components { :where(.site-shell) .article { width: var(--width-content); max-width: 100%; margin: 0 auto; padding-top: 52px; } :where(.site-shell) .article > * { width: var(--width-prose); max-width: 100%; margin-left: auto; margin-right: auto; } :where(.site-shell) .article-header { margin-bottom: 32px; } :where(.site-shell) .article-eyebrow { display: flex; flex-direction: column; gap: 4px; margin: 0 0 24px; } :where(.site-shell) .article-category { font: 700 var(--text-12) var(--font-text); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--color-text-secondary); } :where(.site-shell) .article-date { font: 600 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text-secondary); } :where(.site-shell) .article-header h1 { font: 700 var(--text-48) var(--font-display); letter-spacing: var(--track-48); margin: 0; } :where(.site-shell) .article-subhead { font: 500 var(--text-24) var(--font-display); letter-spacing: var(--track-24); margin: 20px 0 0; } :where(.site-shell) .article-body { font: 400 var(--text-19-loose) var(--font-display); letter-spacing: var(--track-19); } :where(.site-shell) .article-body p { margin: 0 0 1.4211em; } :where(.site-shell) .article-body > :last-child { margin-bottom: 0; } :where(.site-shell) .article-body h2 { font: 700 var(--text-24) var(--font-display); letter-spacing: var(--track-24); margin: 52px 0 16px; } :where(.site-shell) .article-body h2:first-child { margin-top: 8px; } :where(.site-shell) .article-dateline { font: 700 var(--text-14) var(--font-text); letter-spacing: var(--track-14); text-transform: uppercase; } :where(.site-shell) .article-body a { text-decoration: underline; } :where(.site-shell) .article-body ul, :where(.site-shell) .article-body ol { margin: 0 0 1.4211em; } :where(.site-shell) .article-figure { margin: var(--space-component) auto; } :where(.site-shell) .article-figure-wide { width: var(--width-content); } :where(.site-shell) .article-figure img, :where(.site-shell) .article-figure video, :where(.site-shell) .article-figure .media-placeholder { display: block; width: 100%; border-radius: var(--radius-figure); } :where(.site-shell) .article-figure figcaption { font: 600 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-secondary); margin: 16px 16px 0; } :where(.site-shell) .article-figure-wide figcaption { width: var(--width-prose); max-width: 100%; margin-left: auto; margin-right: auto; } :where(.site-shell) .article-legal { font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-secondary); margin-top: var(--space-component); } :where(.site-shell) .article-legal ol { margin: 0; margin-inline-start: 1em; padding: 0; } :where(.site-shell) .article-legal li, :where(.site-shell) .article-legal p { margin: 0; padding-bottom: 0.4167em; } :where(.site-shell) .article-legal a { color: var(--color-text); } :where(.site-shell) .article-contacts { border-top: 1px solid var(--color-separator); margin-top: 52px; padding-top: 52px; } :where(.site-shell) .article-contacts h2 { font: 700 var(--text-24) var(--font-display); letter-spacing: var(--track-24); margin: 0 0 24px; } :where(.site-shell) .article-contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; } :where(.site-shell) .article-contact { font: 500 var(--text-14) var(--font-text); letter-spacing: var(--track-14); } :where(.site-shell) .article-contact-name { display: block; font: 700 var(--text-19) var(--font-display); letter-spacing: var(--track-19); margin-bottom: 4px; } :where(.site-shell) .article-contact a { text-decoration: underline; } :where(.site-shell) .article-related { border-top: 1px solid var(--color-separator); margin-top: 52px; padding-top: 52px; } :where(.site-shell) .article-related h2 { font: 700 var(--text-24) var(--font-display); letter-spacing: var(--track-24); margin: 0 0 8px; } :where(.site-shell) .article-related-item { display: grid; grid-template-columns: 171px 1fr; gap: 24px; align-items: center; padding: 32px 0; border-bottom: 1px solid var(--color-separator); color: var(--color-text); text-decoration: none; } :where(.site-shell) .article-related-item:hover { text-decoration: none; } :where(.site-shell) .article-related-item:hover .article-related-title { text-decoration: underline; } :where(.site-shell) .article-related-thumb { aspect-ratio: 16 / 9; background: var(--color-bg-alt); border-radius: var(--radius-s); } :where(.site-shell) .article-related-category { display: block; font: 600 var(--text-12) var(--font-text); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 4px; } :where(.site-shell) .article-related-title { display: block; font: 700 var(--text-19) var(--font-display); letter-spacing: var(--track-19); margin-bottom: 8px; } :where(.site-shell) .article-related-date { font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text-secondary); } @media (max-width: 1068px) { :where(.site-shell) .article { width: var(--width-content-medium); } :where(.site-shell) .article > * { width: 576px; } :where(.site-shell) .article-figure-wide { width: var(--width-content-medium); } :where(.site-shell) .article-figure-wide figcaption { width: 576px; } :where(.site-shell) .article-header h1 { font: 700 var(--text-40) var(--font-display); letter-spacing: var(--track-40); } :where(.site-shell) .article-subhead { font: 500 var(--text-21) var(--font-display); letter-spacing: var(--track-21); margin-top: 16px; } :where(.site-shell) .article-body { font: 400 var(--text-17) var(--font-text); letter-spacing: var(--track-17); } :where(.site-shell) .article-body h2 { font: 700 var(--text-21) var(--font-display); letter-spacing: var(--track-21); margin-top: 48px; } :where(.site-shell) .article-figure figcaption { margin-top: 12px; } } @media (max-width: 734px) { :where(.site-shell) .article { width: 87.5%; padding-top: 32px; } :where(.site-shell) .article > *, :where(.site-shell) .article-figure-wide, :where(.site-shell) .article-figure-wide figcaption { width: 100%; } :where(.site-shell) .article-figure figcaption { margin-left: 0; margin-right: 0; } :where(.site-shell) .article-header h1 { font: 700 var(--text-32) var(--font-display); letter-spacing: var(--track-32); } :where(.site-shell) .article-body h2 { margin-top: 44px; } :where(.site-shell) .article-contacts-grid { grid-template-columns: 1fr; } :where(.site-shell) .article-related-item { grid-template-columns: 1fr; gap: 12px; } } } @layer components { :where(.site-shell) .app-nav { background: var(--app-nav-bg); } :where(.site-shell) .app-nav-inner { display: flex; align-items: center; gap: 40px; height: 100%; padding: 0 40px; } :where(.site-shell) .app-nav-brand { display: flex; align-items: center; gap: 8px; font: 600 var(--text-21) var(--font-display); letter-spacing: var(--track-21); color: var(--color-text); text-decoration: none; white-space: nowrap; } :where(.site-shell) .app-nav-links { display: flex; align-items: center; gap: 40px; margin: 0 auto; padding: 0; list-style: none; } :where(.site-shell) .app-nav-links li { margin: 0; } :where(.site-shell) .app-nav-links li + li { margin-top: 0; } :where(.site-shell) .app-nav-links a { font: 400 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); color: var(--color-text); text-decoration: none; white-space: nowrap; } :where(.site-shell) .app-nav-links a:hover { text-decoration: none; color: var(--color-link); } :where(.site-shell) .app-nav-links a.is-current { font-weight: 600; } :where(.site-shell) .app-nav-user { text-align: right; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); white-space: nowrap; } :where(.site-shell) .app-nav-user small { display: block; font-size: 12px; color: var(--color-text-secondary); } :where(.site-shell) .app-page { padding: 0 40px 80px; } :where(.site-shell) .app-header { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 30px; padding: 36px 0 0; border-bottom: 1px solid var(--color-separator); } :where(.site-shell) .app-title { font-family: var(--font-display); font-size: 34px; line-height: 1.17647; letter-spacing: 0.007em; font-weight: 700; margin: 0; padding-bottom: 14px; } :where(.site-shell) .tabs { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; } :where(.site-shell) .tabs li { margin: 0; } :where(.site-shell) .tabs li + li { margin-top: 0; } :where(.site-shell) .tabs a { display: block; font: 400 var(--text-21) var(--font-display); letter-spacing: var(--track-21); color: var(--color-link); text-decoration: none; padding-bottom: 17px; margin-bottom: -1px; border-bottom: 2px solid transparent; } :where(.site-shell) .tabs a:hover { text-decoration: none; } :where(.site-shell) .tabs a.is-active { border-bottom-color: var(--color-accent); } :where(.site-shell) .app-layout { display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: 30px; padding-top: 30px; } :where(.site-shell) .filter-list { margin: 0; padding: 0; list-style: none; } :where(.site-shell) .filter-list li { margin: 0; } :where(.site-shell) .filter-list li + li { margin-top: 0; } :where(.site-shell) .filter-list-title { font: 600 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); margin: 0 0 6px; } :where(.site-shell) .filter-list a { display: block; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); text-decoration: none; padding: 6px 14px; border-radius: var(--radius-row); } :where(.site-shell) .filter-list a:hover { background: var(--row-hover); text-decoration: none; } :where(.site-shell) .filter-list a.is-active { background: var(--row-active); } :where(.site-shell) .toolbar { display: flex; align-items: center; gap: 20px; padding: 0 0 14px; } :where(.site-shell) .toolbar-spacer { flex: 1; } :where(.site-shell) .btn-icon-add { display: inline-block; width: 24px; height: 24px; border-radius: 50%; background-color: var(--color-accent-fill); background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 12px 2px, 2px 12px; background-position: center; background-repeat: no-repeat; color: transparent; font-size: 0; text-decoration: none; } :where(.site-shell) .btn-icon-add:hover { text-decoration: none; background-color: var(--color-accent-fill-hover); } :where(.site-shell) .btn-toolbar { font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); padding: 4px 11px; border-radius: var(--radius-row); border: 1px solid var(--color-accent); color: var(--color-link); background: transparent; text-decoration: none; cursor: pointer; } :where(.site-shell) .btn-toolbar:hover { text-decoration: none; background: var(--row-hover); } :where(.site-shell) .toolbar-select { font-size: 14px; letter-spacing: var(--track-14); color: var(--color-link); background: none; border: none; padding: 0; cursor: pointer; text-decoration: none; } :where(.site-shell) .toolbar-select::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); } :where(.site-shell) .data-table { width: 100%; border-collapse: collapse; border-style: none; margin: 0; } :where(.site-shell) .data-table th, :where(.site-shell) .data-table td { border: none; border-bottom: 1px solid var(--color-separator); padding: 0 10px; vertical-align: middle; text-align: left; } :where(.site-shell) .data-table th { height: 35px; font-size: 12px; line-height: 1.33337; letter-spacing: 0.05em; font-weight: 400; text-transform: uppercase; color: var(--color-text-secondary); border-top: 1px solid var(--color-separator); } :where(.site-shell) .data-table td { height: 54px; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); } :where(.site-shell) .data-table th:first-child, :where(.site-shell) .data-table td:first-child { padding-left: 0; } :where(.site-shell) .data-table a { color: var(--color-link); } :where(.site-shell) .modal-overlay { position: fixed; inset: 0; z-index: 200; background: var(--overlay); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; align-items: flex-start; justify-content: center; padding: 36px 20px; overflow-y: auto; } :where(.site-shell) .modal { width: 100%; max-width: 700px; max-height: calc(100vh - 72px); display: flex; flex-direction: column; background: var(--surface-elevated); border: 1px solid var(--color-hairline); border-radius: var(--radius-m); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); } :where(.site-shell) .modal-body { padding: 35px; overflow-y: auto; } :where(.site-shell) .modal-body > :last-child { margin-bottom: 0; } :where(.site-shell) .modal-title { font: 700 var(--text-24) var(--font-display); letter-spacing: var(--track-24); margin: 0 0 24px; } :where(.site-shell) .modal-section-title { font: 700 var(--text-21) var(--font-display); letter-spacing: var(--track-21); margin: 0 0 16px; } :where(.site-shell) .modal hr { margin: 28px 0; } :where(.site-shell) .modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 10px 35px; border-top: 1px solid var(--color-separator); } :where(.site-shell) .app-section-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; border-bottom: 1px solid var(--color-separator); } :where(.site-shell) .app-section-header h2 { font-size: 18px; line-height: 1.2; letter-spacing: -0.022em; font-weight: 600; margin: 0; } :where(.site-shell) .app-band { height: 20px; background: var(--row-active); } :where(.site-shell) .def-list { display: grid; grid-template-columns: max-content 1fr; gap: 0 16px; margin: 0; } :where(.site-shell) .def-list dt, :where(.site-shell) .def-list dd { margin: 0; padding: 9px 0; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); } :where(.site-shell) .def-list dd { color: var(--color-text-secondary); } :where(.site-shell) .app-list-cards, :where(.site-shell) .app-section-header, :where(.site-shell) .app-subtitle { display: none; } :where(.site-shell) .app-subtitle { font: 700 var(--text-24) var(--font-display); letter-spacing: var(--track-24); margin: 0; padding: 24px 28px 20px; } :where(.site-shell) .app-subtitle a { color: inherit; text-decoration: none; } :where(.site-shell) .app-section-header a { color: var(--color-link); text-decoration: none; font-size: 17px; letter-spacing: var(--track-17); } @media (max-width: 1250px) { :where(.site-shell) .app-nav-inner, :where(.site-shell) .app-nav-links { gap: 24px; } } @media (max-width: 1023px) { :where(.site-shell) .app-nav-inner { padding: 0 28px; gap: 24px; } :where(.site-shell) .app-nav-links { gap: 24px; } :where(.site-shell) .app-page { padding: 0 28px 60px; } :where(.site-shell) .app-layout { grid-template-columns: 1fr; gap: 20px; } :where(.site-shell) .filter-list { display: flex; flex-wrap: wrap; gap: 4px; } } @media (max-width: 734px) { :where(.site-shell) .app-nav-inner { padding: 0 20px; } :where(.site-shell) .app-nav-links, :where(.site-shell) .app-nav-user, :where(.site-shell) .app-nav-brand-text { display: none; } :where(.site-shell) .app-nav-brand { margin: 0 auto; font-size: 28px; } :where(.site-shell) .app-page { padding: 0 0 40px; } :where(.site-shell) .app-header { padding: 0; border-bottom: none; display: block; } :where(.site-shell) .app-title, :where(.site-shell) .tabs { display: none; } :where(.site-shell) .app-section-header { display: flex; } :where(.site-shell) .app-subtitle { display: block; } :where(.site-shell) .app-layout { display: block; } :where(.site-shell) .filter-list, :where(.site-shell) .filter-list-title { display: none; } :where(.site-shell) .toolbar { padding: 0 28px 20px; } :where(.site-shell) .data-table { display: none; } :where(.site-shell) .app-list-cards { display: block; } :where(.site-shell) .app-card { padding: 20px 28px; } :where(.site-shell) .app-card-title { display: block; font: 600 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--color-separator); } :where(.site-shell) .modal-overlay { padding: 20px 0 0; align-items: stretch; } :where(.site-shell) .modal { max-width: none; max-height: none; border-radius: 12px 12px 0 0; } :where(.site-shell) .modal-body { padding: 20px; } :where(.site-shell) .modal-title { font: 700 var(--text-21) var(--font-display); letter-spacing: var(--track-21); } :where(.site-shell) .modal-footer { padding: 10px 20px; } } :where(.site-shell) .app-title-actions { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-left: -18px; } :where(.site-shell) .btn-icon-more { display: inline-block; width: 24px; height: 24px; border-radius: 50%; background-color: var(--color-fill-tertiary); background-image: radial-gradient(circle, var(--color-text-secondary) 1.5px, transparent 1.6px), radial-gradient(circle, var(--color-text-secondary) 1.5px, transparent 1.6px), radial-gradient(circle, var(--color-text-secondary) 1.5px, transparent 1.6px); background-size: 4px 4px; background-repeat: no-repeat; background-position: 5px center, 10px center, 15px center; color: transparent; font-size: 0; text-decoration: none; } :where(.site-shell) .btn-icon-more:hover { background-color: var(--color-separator); text-decoration: none; } :where(.site-shell) .app-banner { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; margin: 24px 0 0; border: 1px solid var(--color-separator); border-radius: var(--radius-s); font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); } :where(.site-shell) .app-banner > p { margin: 0; flex: 1; } :where(.site-shell) .app-banner strong { display: block; font: 600 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); margin-bottom: 4px; } :where(.site-shell) .app-banner-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 15px/1 var(--font-text); color: var(--color-bg); background: var(--color-text); } :where(.site-shell) .app-banner-info { background: color-mix(in oklch, var(--color-accent) 8%, var(--color-bg)); border-color: color-mix(in oklch, var(--color-accent) 45%, var(--color-bg)); } :where(.site-shell) .app-banner-info .app-banner-icon { background: var(--color-accent-fill); color: var(--color-accent-contrast); font-family: var(--font-display); font-style: italic; } :where(.site-shell) .app-banner-warning { background: var(--color-caution-bg); border-color: color-mix(in oklch, var(--color-caution) 50%, var(--color-bg)); } :where(.site-shell) .app-banner-warning .app-banner-icon { background: var(--color-caution); } :where(.site-shell) .app-banner-close { flex: none; width: 19px; height: 19px; margin: 3px 0 0 4px; cursor: pointer; border: 0; padding: 0; background: linear-gradient(var(--color-text-secondary), var(--color-text-secondary)) center / 100% 1.5px no-repeat, linear-gradient(var(--color-text-secondary), var(--color-text-secondary)) center / 1.5px 100% no-repeat; transform: rotate(45deg) scale(0.7); color: transparent; font-size: 0; } :where(.site-shell) .toolbar-search, :where(.site-shell) input.toolbar-search[type="search"] { width: 240px; max-width: 100%; height: 30px; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); padding: 0 10px 0 30px; border: 1px solid var(--color-separator); border-radius: var(--radius-row); background: var(--field-bg); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%2386868b' stroke-width='1.5'/%3E%3Cpath d='M9.5 9.5l3 3' stroke='%2386868b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 9px center; background-size: 14px 14px; appearance: none; -webkit-appearance: none; } :where(.site-shell) .toolbar-search:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--field-focus-halo); } :where(.site-shell) .btn-toolbar-destructive, :where(.site-shell) .data-table a.btn-toolbar-destructive { border-color: var(--color-error); color: var(--color-error); } :where(.site-shell) .btn-toolbar-destructive:hover { background: color-mix(in srgb, var(--color-error) 6%, transparent); } :where(.site-shell) .btn-toolbar-primary { background: var(--color-accent-fill); color: var(--color-accent-contrast); border-color: var(--color-accent-fill); } :where(.site-shell) .btn-toolbar-primary:hover { background: var(--color-accent-fill-hover); } :where(.site-shell) .data-table .badge { vertical-align: middle; } :where(.site-shell) .data-table td.is-numeric, :where(.site-shell) .data-table th.is-numeric { text-align: right; font-variant-numeric: tabular-nums; } :where(.site-shell) .data-table .toggle { vertical-align: middle; } :where(.site-shell) .app-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; padding-top: 30px; align-items: start; } :where(.site-shell) .app-detail-aside { position: sticky; top: calc(var(--nav-height) + 30px); } :where(.site-shell) .app-section { padding: 0 0 30px; margin: 0 0 30px; border-bottom: 1px solid var(--color-separator); } :where(.site-shell) .app-section:last-child { border-bottom: none; margin-bottom: 0; } :where(.site-shell) .app-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 16px; } :where(.site-shell) .app-section-heading h2 { font: 700 var(--text-21) var(--font-display); letter-spacing: var(--track-21); margin: 0; } :where(.site-shell) .app-section-heading p { margin: 0; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text-secondary); } :where(.site-shell) .app-summary { border: 1px solid var(--color-separator); border-radius: var(--radius-m); padding: 20px; } :where(.site-shell) .app-summary h3 { font: 600 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); margin: 0 0 12px; } :where(.site-shell) .app-summary .def-list { grid-template-columns: 1fr; gap: 0; } :where(.site-shell) .app-summary .def-list dt { padding-bottom: 0; color: var(--color-text-secondary); font-size: 12px; } :where(.site-shell) .app-summary .def-list dd { padding-top: 2px; color: var(--color-text); } :where(.site-shell) .app-summary + .app-summary { margin-top: 20px; } :where(.site-shell) .token-field { display: flex; align-items: stretch; gap: 0; } :where(.site-shell) .token-field code { flex: 1; min-width: 0; display: block; padding: 8px 12px; font-size: 14px; line-height: 1.28577; background: var(--color-code-bg); border: 1px solid var(--color-separator); border-right: none; border-radius: var(--radius-row) 0 0 var(--radius-row); overflow-x: auto; white-space: nowrap; } :where(.site-shell) .token-field .btn-toolbar { border-radius: 0 var(--radius-row) var(--radius-row) 0; } :where(.site-shell) .field-toggle { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid var(--color-separator); } :where(.site-shell) .field-toggle:last-child { border-bottom: 1px solid var(--color-separator); } :where(.site-shell) .field-toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } :where(.site-shell) .field-toggle-text strong { font: 600 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); } :where(.site-shell) .field-toggle-text span { font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-secondary); } @media (max-width: 1023px) { :where(.site-shell) .app-detail { grid-template-columns: minmax(0, 1fr); gap: 24px; } :where(.site-shell) .app-detail-aside { position: static; } } @media (max-width: 734px) { :where(.site-shell) .app-title-actions { display: none; } :where(.site-shell) .app-banner { margin: 20px 28px 0; } :where(.site-shell) .toolbar { flex-wrap: wrap; } :where(.site-shell) .toolbar-search { width: 100%; } :where(.site-shell) .app-detail { padding: 20px 28px 0; } :where(.site-shell) .app-section-heading { flex-direction: column; gap: 4px; } } } @layer themes { :where(.site-shell) .theme-light { color-scheme: light; } :where(.site-shell) .theme-dark, :where(.site-shell) .section-dark { color-scheme: dark; } } @layer themes { :where(.site-shell) .accent-indigo, :where(.site-shell) .accent-green, :where(.site-shell) .accent-orange, :where(.site-shell) .accent-purple, :where(.site-shell) .accent-graphite { --color-accent-hover: color-mix(in oklch, var(--color-accent) 92%, #fff); --color-accent-active: color-mix(in oklch, var(--color-accent) 90%, #000); --field-focus-halo: color-mix(in oklch, var(--color-accent) 25%, transparent); --color-selection: color-mix(in oklch, var(--color-accent) 30%, var(--color-bg)); } :where(.site-shell) .accent-indigo, :where(.site-shell) .accent-green, :where(.site-shell) .accent-orange, :where(.site-shell) .accent-purple { --accent-tint: 12%; --accent-tint-surface: calc(var(--accent-tint) * 0.8); --color-text-secondary: color-mix(in oklch, var(--color-accent) var(--accent-tint), light-dark(#6e6e73, #86868b)); --color-text-tertiary: color-mix(in oklch, var(--color-accent) var(--accent-tint), light-dark(#86868b, #6e6e73)); --color-separator: color-mix(in oklch, var(--color-accent) var(--accent-tint), light-dark(#d2d2d7, #424245)); --field-border: color-mix(in oklch, var(--color-accent) var(--accent-tint), light-dark(#86868b, #6e6e73)); --color-fill-tertiary: color-mix(in oklch, var(--color-accent) var(--accent-tint-surface), light-dark(#e8e8ed, #333336)); --color-bg-alt: color-mix(in oklch, var(--color-accent) var(--accent-tint-surface), light-dark(#f5f5f7, #1d1d1f)); --note-bg: color-mix(in oklch, var(--color-accent) var(--accent-tint-surface), light-dark(#f5f5f7, #323232)); --footer-bg: color-mix(in oklch, var(--color-accent) var(--accent-tint-surface), light-dark(#f5f5f7, #1d1d1f)); --app-nav-bg: color-mix(in oklch, var(--color-accent) var(--accent-tint-surface), light-dark(#f1f1f1, #1d1d1f)); } :where(.site-shell) .accent-indigo { --color-accent: light-dark(#5856d6, #5e5ce6); --color-link: light-dark(#4f4dc2, #8482ff); } :where(.site-shell) .accent-green { --color-accent: light-dark(#1f8f45, #30d158); --color-link: light-dark(#1b7a3c, #5ee27f); } :where(.site-shell) .accent-orange { --color-accent: light-dark(#f56300, #ff7d1a); --color-link: light-dark(#bf4800, #ff9f0a); } :where(.site-shell) .accent-purple { --color-accent: light-dark(#6d2bff, #8f5bff); --color-link: light-dark(#5b1fe6, #a988ff); } :where(.site-shell) .accent-graphite { --color-accent: var(--color-text); --color-accent-contrast: var(--color-bg); --color-link: var(--color-text); --color-accent-hover: light-dark(#272729, #fff); --color-accent-active: light-dark(#18181a, #ededf2); --color-accent-fill: var(--color-accent); --color-accent-fill-hover: var(--color-accent-hover); --color-accent-fill-active: var(--color-accent-active); } :where(.site-shell) .frosted, :where(.site-shell) .frosted-light { --frost-blur: 20px; --frost-saturate: 180%; --frost-brightness: 1; background: var(--frost-veil); -webkit-backdrop-filter: saturate(var(--frost-saturate)) brightness(var(--frost-brightness)) blur(var(--frost-blur)); backdrop-filter: saturate(var(--frost-saturate)) brightness(var(--frost-brightness)) blur(var(--frost-blur)); } :where(.site-shell) .frosted { --frost-veil: color-mix(in srgb, var(--color-bg) 72%, transparent); } :where(.site-shell) .app-nav.frosted { --app-nav-bg: transparent; } :where(.site-shell) .card.frosted, :where(.site-shell) .app-summary.frosted, :where(.site-shell) .modal.frosted { border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } :where(.site-shell) .frosted-light { --frost-veil: light-dark(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04)); --frost-brightness: 1.03; --frost-edge: light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.07)); --color-text-secondary: light-dark(#6e6e73, #a1a1a6); border-color: transparent; box-shadow: inset 0 0 0 1px var(--frost-edge), inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.10)), inset 0 0 24px light-dark(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)); } :where(.site-shell) .app-nav.frosted-light { --app-nav-bg: transparent; } :where(.site-shell) .frosted .app-banner-info, :where(.site-shell) .frosted-light .app-banner-info { background: color-mix(in oklch, var(--color-accent) 10%, transparent); border-color: color-mix(in oklch, var(--color-accent) 45%, transparent); } :where(.site-shell) .tint-accent { background: light-dark(color-mix(in oklch, var(--color-accent) 8%, #fff), color-mix(in oklch, var(--color-accent) 16%, #000)); border-color: light-dark(color-mix(in oklch, var(--color-accent) 45%, #fff), color-mix(in oklch, var(--color-accent) 65%, #000)); } :where(.site-shell) .wash-accent { background: radial-gradient(120% 70% at 50% 0%, light-dark(color-mix(in oklch, var(--color-accent) 18%, #fff), color-mix(in oklch, var(--color-accent) 26%, #000)), transparent 70%), var(--color-bg); } :where(.site-shell) .gradient-accent { color-scheme: dark; background: linear-gradient(135deg in oklch, var(--color-accent), color-mix(in oklch, var(--color-accent) 60%, #000)); color: #fff; } :where(.site-shell) .gradient-accent .btn { --btn-bg: #fff; --btn-fg: color-mix(in oklch, var(--color-accent) 80%, #000); --btn-bg-hover: #f5f5f7; --btn-bg-active: #ededf2; } :where(.site-shell) .gradient-accent a:not(.btn) { color: #fff; } } @layer themes { @media (prefers-reduced-motion: reduce) { :where(.site-shell) *, :where(.site-shell) *::before, :where(.site-shell) *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; scroll-behavior: auto; } } } @layer site { :root { --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "SF Mono", SFMono-Regular, "IBM Plex Mono", ui-monospace, Menlo, Monaco, Consolas, monospace; --chrome-height: 68px; --chrome-height-phone: 59px; --chrome-offset: 68px; --color-bg: light-dark(#ffffff, #0a0b1c); --color-bg-alt: light-dark(#f5f5f9, #12132a); --color-code-bg: light-dark(#f5f5f9, #14152c); --color-text: light-dark(#1d1d1f, #f2f1fb); --color-text-secondary: light-dark(#6e6e73, #9d9bbf); --color-text-tertiary: light-dark(#86868b, #7a789e); --color-separator: light-dark(#d9d9e3, #2a2747); --color-hairline: light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.2)); --color-fill-tertiary: light-dark(#ececf3, #1f1e3a); --field-border: light-dark(#86868b, #56537c); --field-bg: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.05)); --note-bg: light-dark(#f5f5f9, rgba(255, 255, 255, 0.04)); --footer-bg: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.1)); --app-nav-bg: light-dark(#f1f1f5, #0a0b1c); --surface-elevated: light-dark(#ffffff, rgba(16, 17, 42, 0.86)); --overlay: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.55)); --accent-rgb: 109, 43, 255; --accent-list-rgb: 125, 50, 255; --color-accent: light-dark(#6d2bff, #ffffff); --color-accent-hover: light-dark(#7a3fff, #f2f2f7); --color-accent-active: light-dark(#6227e6, #e3e3ec); --color-accent-contrast: light-dark(#ffffff, #0a0b1c); --color-accent-fill: light-dark(#6d2bff, #ffffff); --color-accent-fill-hover: light-dark(#7a3fff, #f2f2f7); --color-accent-fill-active: light-dark(#6227e6, #e3e3ec); --color-link: light-dark(#5b1fe6, #ffffff); --color-selection: light-dark(#e4d8ff, #3d3776); --field-focus-halo: light-dark(rgba(var(--accent-rgb), 0.25), rgba(255, 255, 255, 0.28)); --row-hover: light-dark(rgba(var(--accent-rgb), 0.05), rgba(255, 255, 255, 0.07)); --row-active: light-dark(#ececf3, #1f1e3a); --navigator-hover: light-dark(rgba(var(--accent-rgb), 0.16), rgba(255, 255, 255, 0.14)); --toggle-off: light-dark(#86868b, #4a4870); --toggle-on: light-dark(#6d2bff, #ffffff); --btn-disabled-bg: light-dark(#d1d1d6, #2a2947); --btn-disabled-text: light-dark(#ffffff, #6b6990); --nav-bg: light-dark(rgba(250, 250, 252, 0.8), rgba(10, 11, 28, 0.8)); --color-success: light-dark(#0b9a5f, #5cf5a6); --color-error: light-dark(#d9142b, #ff4757); --color-error-bg: light-dark(#fff1f2, rgba(255, 71, 87, 0.10)); --color-warning: light-dark(#c25e00, #ffa14d); --color-warning-bg: light-dark(#fff7f0, rgba(255, 161, 77, 0.09)); --color-caution: light-dark(#9a6b00, #ffe08a); --color-caution-bg: light-dark(rgba(255, 241, 184, 0.62), rgba(255, 224, 138, 0.07)); --color-tip: light-dark(#0e8aa8, #5ce5ff); --color-tip-bg: light-dark(#f0fbff, rgba(92, 229, 255, 0.08)); --color-experiment: light-dark(#8a2be2, #c084fc); --color-experiment-bg: light-dark(#faf5ff, rgba(192, 132, 252, 0.09)); --field-error-bg: light-dark(#fff1f2, rgba(255, 71, 87, 0.11)); --field-error-border: light-dark(#d9142b, #ff4757); --leak-opacity: 0.4; --leak-filter: none; --column-frost: saturate(160%) brightness(1.03) blur(24px); --pane-veil: light-dark(rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.035)); --pane-frost: saturate(140%) brightness(1.03) blur(24px); --pane-fade: rgba(255, 255, 255, 0.10); --pane-gap: 12px; --pane-edge: 0 0 0 1px rgba(60, 45, 130, 0.11), 0 2px 12px rgba(40, 30, 90, 0.05); --pane-sub-veil: light-dark(rgba(76, 58, 140, 0.05), rgba(255, 255, 255, 0.028)); --band-lift: none; --glass-lift: none; --glass-lift-hover: none; --glass-lift-secondary: none; --glass-lift-secondary-hover: none; --field-lift: none; --head-blend: color-burn; --wordmark-filter: invert(0.92); --panel-veil: none; --icon-moon: block; --icon-sun: none; } @media (prefers-color-scheme: dark) { html:not(.theme-light) { --leak-opacity: 0.45; --pane-frost: saturate(120%) brightness(1.1) blur(24px); --pane-fade: rgba(255, 255, 255, 0); --leak-filter: saturate(0.82); --column-frost: saturate(140%) brightness(1.03) blur(24px); --band-lift: brightness(1.4) saturate(1.25); --glass-lift: brightness(1.5) saturate(1.5); --glass-lift-hover: brightness(1.8) saturate(1.7); --glass-lift-secondary: brightness(1.2) saturate(1.1); --glass-lift-secondary-hover: brightness(1.45) saturate(1.3); --field-lift: brightness(1.3) saturate(1.1); --head-blend: color-dodge; --wordmark-filter: none; --panel-veil: linear-gradient(180deg, #a184f71e, #32206902); --icon-moon: none; --icon-sun: block; --pane-edge: none; } } html.theme-dark { --leak-opacity: 0.45; --pane-frost: saturate(120%) brightness(1.1) blur(24px); --pane-fade: rgba(255, 255, 255, 0); --leak-filter: saturate(0.82); --column-frost: saturate(140%) brightness(1.03) blur(24px); --band-lift: brightness(1.4) saturate(1.25); --glass-lift: brightness(1.5) saturate(1.5); --glass-lift-hover: brightness(1.8) saturate(1.7); --glass-lift-secondary: brightness(1.2) saturate(1.1); --glass-lift-secondary-hover: brightness(1.45) saturate(1.3); --field-lift: brightness(1.3) saturate(1.1); --head-blend: color-dodge; --wordmark-filter: none; --panel-veil: linear-gradient(180deg, #a184f71e, #32206902); --icon-moon: none; --icon-sun: block; --pane-edge: none; } @media (max-width: 899px) { :root { --chrome-height: var(--chrome-height-phone); } } } @layer site { :where(.site-shell.has-backdrop) { position: relative; background: radial-gradient(circle at 50% -373px, light-dark(rgba(var(--accent-rgb), 0.07), hsl(253.76deg 20.65% 59.95% / 22%)), transparent 934px), var(--color-bg); background-repeat: no-repeat; } :where(.site-shell) .light-bar { position: absolute; top: calc(var(--chrome-height) - 15px); left: 0; right: 0; z-index: -1; height: 1px; max-width: 950px; width: 80%; margin: 0 auto; pointer-events: none; clip-path: polygon(-50px 0, calc(100% + 50px) 0, calc(100% + 50px) 500px, -50px 500px); background: light-dark(rgba(var(--accent-rgb), 0.18), #edeaff57); box-shadow: 0px 0px 50px 5px light-dark(rgba(var(--accent-rgb), 0.18), #af9efbba); } @media (max-width: 899px) { :where(.site-shell) .light-bar { top: calc(var(--chrome-height-phone) - 15px); } } :where(.site-shell:is(.page-blog, .page-blog-post, .page-pricing)) .light-bar { background: light-dark(rgba(var(--accent-rgb), 0.18), #d4c5ff57); box-shadow: 0px 0px 50px 5px light-dark(rgba(var(--accent-rgb), 0.18), #8f72f6c8); } :where(.site-shell) .backdrop { position: fixed; inset: 0; z-index: -1; isolation: isolate; pointer-events: none; overflow: hidden; } :where(.site-shell) .backdrop.is-subtle { background: light-dark(transparent, rgba(4, 6, 16, 0.32)); } :where(.site-shell) .backdrop.is-subtle span { opacity: var(--leak-opacity); filter: var(--leak-filter); } :where(.site-shell) .backdrop span { position: absolute; inset: -320px; mix-blend-mode: screen; background: radial-gradient(circle var(--r) at var(--at), var(--c) 0%, color-mix(in srgb, var(--c) 72%, transparent) 30%, color-mix(in srgb, var(--c) 32%, transparent) 55%, color-mix(in srgb, var(--c) 8%, transparent) 80%, transparent 100%); animation: var(--drift) infinite alternate; } :where(.site-shell) .backdrop span:nth-child(1) { --r: min(640px, 70vw); --at: calc(14% + 230.4px) calc(18% + 204.8px); --c: light-dark(rgba(168, 60, 235, 0.30), rgba(150, 70, 235, 0.28)); --drift: drift-a 26s -7s steps(260, jump-none); } :where(.site-shell) .backdrop span:nth-child(2) { --r: min(420px, 48vw); --at: calc(30% + 128.0px) calc(40% + 64.0px); --c: light-dark(rgba(64, 92, 228, 0.20), rgba(84, 84, 235, 0.16)); --drift: drift-b 31s -19s steps(310, jump-none); } :where(.site-shell) .backdrop span:nth-child(3) { --r: min(560px, 62vw); --at: calc(84% + -217.6px) calc(26% + 153.6px); --c: light-dark(rgba(58, 120, 240, 0.26), rgba(70, 110, 240, 0.22)); --drift: drift-c 29s -11s steps(290, jump-none); } :where(.site-shell) .backdrop span:nth-child(4) { --r: min(760px, 80vw); --at: calc(58% + -51.2px) calc(96% + -294.4px); --c: light-dark(rgba(60, 60, 220, 0.24), rgba(72, 60, 225, 0.20)); --drift: drift-d 34s -31s steps(340, jump-none); } :where(.site-shell) .backdrop span:nth-child(5) { --r: min(300px, 36vw); --at: calc(72% + -140.8px) calc(70% + -128.0px); --c: light-dark(rgba(80, 200, 210, 0.16), rgba(70, 150, 220, 0.12)); --drift: drift-e 22s -5s steps(220, jump-none); } @keyframes drift-a { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(9%, -7%) scale(1.14); } 100% { transform: translate(-6%, 6%) scale(0.92); } } @keyframes drift-b { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-10%, 6%) scale(1.18); } 100% { transform: translate(6%, 9%) scale(0.9); } } @keyframes drift-c { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-8%, 9%) scale(0.88); } 100% { transform: translate(6%, -6%) scale(1.16); } } @keyframes drift-d { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, -9%) scale(1.12); } 100% { transform: translate(-9%, 3%) scale(1.05); } } @keyframes drift-e { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(12%, 9%) scale(1.25); } 100% { transform: translate(-9%, -6%) scale(0.85); } } @media (prefers-reduced-motion: reduce) { :where(.site-shell) .backdrop span { animation: none; } } :where(.site-shell.has-backdrop)::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.12; mix-blend-mode: soft-light; } } @layer site { :where(.site-shell) { padding-top: var(--chrome-offset); } :where(.site-shell) .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--chrome-height); background: light-dark(rgba(250, 250, 253, 0.72), transparent); border-bottom: 1px solid light-dark(#d9d9e3, #241f39); } :where(.site-shell) .topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(30px) saturate(120%); backdrop-filter: blur(30px) saturate(120%); } :where(.site-shell) .topbar-docs { background: transparent; border-bottom-color: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08)); } :where(.site-shell) .topbar-docs::before { background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } :where(.site-shell) .topbar-docs .topbar-panel { background: var(--color-bg-alt); border-color: var(--color-separator); box-shadow: 0 10px 30px rgba(10, 10, 25, 0.15); } :where(.site-shell) .topbar-docs .topbar-panel::before { display: none; } :where(.site-shell) .topbar-docs .topbar-inner { font-size: 16px; line-height: 22px; letter-spacing: normal; color: light-dark(var(--color-text), rgba(236, 234, 255, 0.86)); } :where(.site-shell) .topbar-docs .topbar-brand { gap: 9px; } :where(.site-shell) .topbar-docs .topbar-links { margin-left: 12px; gap: 2px; } :where(.site-shell) .topbar-docs .topbar-links > li > a { padding: 5px 9px; border-radius: 6px; line-height: 1.4; letter-spacing: 0; opacity: 1; color: light-dark(var(--color-text), rgba(236, 234, 255, 0.86)); transition: background-color 0.08s ease, color 0.08s ease; } :where(.site-shell) .topbar-docs .topbar-links > li > a:hover { background: light-dark(rgba(var(--accent-rgb), 0.07), rgba(38, 43, 79, 0.65)); color: var(--color-text); } :where(.site-shell) .topbar-docs .topbar-links > li > a.is-current { color: var(--color-text); } :where(.site-shell) .topbar-docs .topbar-search { color: light-dark(#6e6e73, rgba(148, 149, 176, 0.91)); line-height: 1.4; letter-spacing: 0; gap: 12px; justify-content: space-between; flex: none; } :where(.site-shell) .topbar-docs .topbar-drop.topbar-version > button { background: transparent; color: light-dark(var(--color-text), rgba(236, 234, 255, 0.86)); letter-spacing: 0; line-height: 1.4; display: flex; flex: none; } :where(.site-shell) .topbar-docs .topbar-theme, :where(.site-shell) .topbar-docs .topbar-menu-button { flex: none; } :where(.site-shell) .topbar-docs .topbar-version > button::after { content: ""; box-sizing: content-box; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.6; } :where(.site-shell) .topbar-inner { height: 100%; display: flex; align-items: center; gap: 28px; padding: 0 40px; } :where(.site-shell) .topbar-nav { display: contents; } :where(.site-shell) .topbar-menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } :where(.site-shell) .topbar-menu-button { display: none; } @media (min-width: 900px) { :where(.site-shell) .topbar-menu-toggle { display: none; } } @media (min-width: 1024px) { :where(.site-shell) .navigator-toggle { display: none; } } :where(.site-shell) .topbar-menu-toggle:focus-visible ~ .topbar .topbar-menu-button, :where(.site-shell) .navigator-toggle:focus-visible ~ .topbar-docs .topbar-menu-button { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 10px; } :where(.site-shell) .topbar-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; text-shadow: none; } :where(.site-shell) .topbar-brand-mark { display: block; width: 104px; height: 25px; background-color: var(--color-text); -webkit-mask: var(--topbar-wordmark) no-repeat left center / contain; mask: var(--topbar-wordmark) no-repeat left center / contain; } :where(.site-shell) .topbar-brand:hover .topbar-brand-mark { background-color: var(--color-accent); } :where(.site-shell) .topbar { --topbar-wordmark: url("data:image/png;base64,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"); } :where(.site-shell) .topbar-badge { font: 600 11px/1 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; color: light-dark(#5b1fe6, #ffffff); background: light-dark(rgba(var(--accent-rgb), 0.1), rgba(255, 255, 255, 0.12)); } :where(.site-shell) .topbar-links { order: 1; display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; } :where(.site-shell) .topbar-links li { margin: 0; display: flex; align-items: center; } :where(.site-shell) .topbar-links > li > a, :where(.site-shell) .topbar-drop > button:not(.topbar-auth) { font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); text-decoration: none; text-shadow: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; height: auto; line-height: inherit; text-transform: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; opacity: 0.85; transition: opacity 0.08s ease; } :where(.site-shell) .topbar-links > li > a.is-current { font-weight: 600; opacity: 1; } :where(.site-shell) .topbar-links > li > a:hover, :where(.site-shell) .topbar-drop:hover > :is(a, button), :where(.site-shell) .topbar-drop:focus-within > :is(a, button) { opacity: 1; } :where(.site-shell) .topbar-drop { position: relative; } :where(.site-shell) .topbar-drop > :is(a, button) svg { width: 10px; height: 10px; opacity: 0.6; transition: transform 0.15s ease; } :where(.site-shell) .topbar-drop:hover > :is(a, button) svg, :where(.site-shell) .topbar-drop:focus-within > :is(a, button) svg { transform: translateY(1px); } :where(.site-shell) .topbar-drop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } :where(.site-shell) .topbar-panel, :where(.site-shell) .menu-panel { display: none; position: absolute; top: calc(100% + 10px); left: -12px; min-width: 150px; z-index: 1; padding: 6px; border-radius: 10px; background-color: light-dark(#ffffff, transparent); background-image: var(--panel-veil); border: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgb(203 190 255 / 32%)); box-shadow: 0 3px 16px light-dark(rgba(30, 20, 70, 0.16), #140e3563); } :where(.site-shell) .topbar-panel::before, :where(.site-shell) .menu-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; -webkit-backdrop-filter: blur(30px) saturate(130%); backdrop-filter: blur(30px) saturate(130%); } :where(.site-shell) .topbar-drop:hover .topbar-panel, :where(.site-shell) .topbar-drop:focus-within .topbar-panel { display: block; } :where(.site-shell) .topbar-drop.is-dismissed .topbar-panel { display: none; } :where(.site-shell) .topbar-panel a, :where(.site-shell) .topbar-panel button, :where(.site-shell) .menu-panel a, :where(.site-shell) .menu-panel button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 6px; white-space: nowrap; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); text-decoration: none; text-shadow: none; } :where(.site-shell) .topbar-panel button, :where(.site-shell) .menu-panel button { appearance: none; width: 100%; margin: 0; border: 0; background: none; text-align: left; cursor: pointer; } :where(.site-shell) .topbar-panel a:hover, :where(.site-shell) .topbar-panel button:hover, :where(.site-shell) .menu-panel a:hover, :where(.site-shell) .menu-panel button:hover { background: light-dark(rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0.08)); box-shadow: light-dark(none, inset 0 0 2px rgb(195 181 255 / 38%)); } :where(.site-shell) .topbar-panel a.is-current, :where(.site-shell) .menu-panel a.is-current { font-weight: 600; } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-panel a, :where(.site-shell) .topbar:not(.topbar-docs) .topbar-panel button { justify-content: flex-start; gap: 10px; } :where(.site-shell) .topbar-panel :is(a, button) > svg { flex: none; width: 18px; height: 18px; color: var(--color-text-secondary); transition: color 0.08s ease; } :where(.site-shell) .topbar-panel :is(a, button):hover > svg { color: var(--color-text); } :where(.site-shell) .topbar-panel .docs-version-tag { margin-left: auto; font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: light-dark(#6e6e73, #9495b0e8); } :where(.site-shell) .topbar-spacer { order: 2; flex: 1; } :where(.site-shell) .topbar-search, :where(.site-shell) .topbar-version > button, :where(.site-shell) .topbar-theme, :where(.site-shell) .topbar-auth { height: 36px; border-radius: 10px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--color-text); text-shadow: none; box-shadow: none; margin: 0; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } :where(.site-shell) .topbar-search { order: 3; display: inline-flex; align-items: center; gap: 10px; width: 260px; padding: 0 10px 0 12px; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); text-transform: none; line-height: inherit; text-align: left; color: var(--color-text-secondary); } :where(.site-shell) .topbar-search:hover { border-color: var(--color-accent); } :where(.site-shell) .topbar-search svg { width: 16px; height: 16px; flex: none; } :where(.site-shell) .topbar-search span { flex: 1; } :where(.site-shell) .topbar-search kbd { font: 500 11px/1 var(--font-text); letter-spacing: 0.02em; padding: 4px 6px; border-radius: 5px; color: var(--color-text-tertiary); background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.08)); box-shadow: none; } :where(.site-shell) .topbar-version { order: 4; } :where(.site-shell) .topbar-drop.topbar-version > button { height: 36px; padding: 0 12px; border: 1px solid var(--field-border); background: var(--field-bg); font-family: var(--font-mono); font-size: 13px; opacity: 1; } :where(.site-shell) .topbar-version .topbar-panel { left: auto; right: 0; } :where(.site-shell) .topbar-version-tag { font: 600 10px/1 var(--font-text); letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 6px; border-radius: 5px; color: var(--color-accent-contrast); background: var(--color-accent-fill); } :where(.site-shell) .topbar-theme { order: 5; width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; } :where(.site-shell) .topbar-theme:hover { border-color: var(--color-accent); } :where(.site-shell) .topbar-theme svg { width: 18px; height: 18px; } :where(.site-shell) .topbar-theme .topbar-icon-moon { display: var(--icon-moon); } :where(.site-shell) .topbar-theme .topbar-icon-sun { display: var(--icon-sun); } :where(.site-shell) .topbar-auth-slot { order: 6; display: flex; align-items: center; } :where(.site-shell) .topbar-auth { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; text-decoration: none; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); text-transform: none; line-height: inherit; white-space: nowrap; color: light-dark(#6d2bff, #ffffff); border-color: light-dark(#6d2bff, rgba(255, 255, 255, 0.55)); background: light-dark(rgba(var(--accent-rgb), 0.04), rgba(255, 255, 255, 0.06)); } :where(.site-shell) .topbar-auth:hover { color: light-dark(#ffffff, #0a0b1c); border-color: light-dark(#6d2bff, #ffffff); background: light-dark(#6d2bff, #ffffff); } :where(.site-shell) .topbar-account > .topbar-auth { padding: 0 10px 0 14px; color: var(--color-text); border-color: var(--field-border); background: var(--field-bg); } :where(.site-shell) .topbar-account > .topbar-auth svg { width: 10px; height: 10px; opacity: 0.6; transition: transform 0.15s ease; } :where(.site-shell) .topbar-account:hover > .topbar-auth, :where(.site-shell) .topbar-account:focus-within > .topbar-auth { color: light-dark(#6d2bff, #ffffff); border-color: light-dark(#6d2bff, #ffffff); background: var(--field-bg); } :where(.site-shell) .topbar-account:hover > .topbar-auth svg, :where(.site-shell) .topbar-account:focus-within > .topbar-auth svg { transform: translateY(1px); } :where(.site-shell) .topbar-account .topbar-panel { left: auto; right: 0; top: calc(100% + 8px); } :where(.site-shell) .topbar-account::after { height: 10px; } html[data-ul-nav] :where(.site-shell) .topbar-auth-anon, html:not([data-ul-nav]) :where(.site-shell) .topbar-auth-user { display: none; } @media (min-width: 900px) { :where(.site-shell) .topbar:not(.topbar-docs) .topbar-auth-slot { margin-left: -16px; } } @media (max-width: 899px) { :where(.site-shell) .topbar:not(.topbar-docs) { height: var(--chrome-height-phone); } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-inner { gap: 14px; padding: 0 20px; } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-theme { margin-left: auto; width: 34px; height: 34px; } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-menu-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: -6px; cursor: pointer; color: var(--color-text); -webkit-tap-highlight-color: transparent; } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-menu-button { order: 6; } :where(.site-shell) .topbar:not(.topbar-docs) { height: auto; } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-inner { flex-wrap: wrap; height: auto; min-height: var(--chrome-height-phone); } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-brand { height: var(--chrome-height-phone); } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-nav { display: none; flex: 1 0 100%; order: 7; margin: 0 -20px; padding: 4px 20px 32px; max-height: calc(100vh - var(--chrome-height-phone)); max-height: calc(100dvh - var(--chrome-height-phone)); overflow-y: auto; overscroll-behavior: contain; } :where(.site-shell) .topbar-menu-toggle:checked ~ .topbar .topbar-nav { display: block; } :where(.site-shell) .topbar-menu-toggle:checked ~ .topbar:not(.topbar-docs)::before { background: light-dark(rgba(250, 250, 253, 0.96), rgba(10, 11, 28, 0.96)); } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-links { display: block; } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-links li { display: block; } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-links > li > a { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 2px; opacity: 1; border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08)); font: 400 var(--text-17) var(--font-text); letter-spacing: var(--track-17); } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-drop > a svg { width: 12px; height: 12px; transform: rotate(-90deg); } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-drop::after { display: none; } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-panel { display: block; position: static; min-width: 0; padding: 2px 0 6px 16px; background: none; border: 0; border-radius: 0; box-shadow: none; } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-panel::before { display: none; } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-panel a, :where(.site-shell) .topbar:not(.topbar-docs) .topbar-panel button { display: flex; justify-content: flex-start; gap: 10px; min-height: 40px; padding: 0 2px; border-radius: 0; font-size: 15px; color: var(--color-text-secondary); } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-panel a:hover, :where(.site-shell) .topbar:not(.topbar-docs) .topbar-panel button:hover { background: none; color: var(--color-text); } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-spacer { display: none; } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-auth-slot { display: block; margin-top: 16px; } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-auth { font-size: 15px; } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-account > .topbar-auth svg { transform: none; } :where(.site-shell) .topbar:not(.topbar-docs) .topbar-account .topbar-panel { padding: 8px 0 0 16px; } } :where(.site-shell) .topbar-menu-glyph { width: 16px; height: 12px; background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 5px / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 10px / 100% 2px no-repeat; } :where(.site-shell) .topbar-menu-toggle:checked ~ .topbar .topbar-menu-glyph, :where(.site-shell) .navigator-toggle:checked ~ .topbar .topbar-menu-glyph { height: 16px; width: 16px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transform: rotate(45deg); } @media (max-width: 1023px) { :where(.site-shell) .topbar-docs .topbar-inner { gap: 16px; padding: 0 20px; } :where(.site-shell) .topbar-docs .topbar-menu-button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; cursor: pointer; color: var(--color-text); border: 1px solid var(--field-border); border-radius: 10px; -webkit-tap-highlight-color: transparent; } :where(.site-shell) .topbar-docs .topbar-menu-button svg { width: 18px; height: 18px; } :where(.site-shell) .navigator-toggle:checked ~ .topbar-docs .topbar-menu-button svg { display: none; } :where(.site-shell) .navigator-toggle:checked ~ .topbar-docs .topbar-menu-button::before { content: ""; width: 16px; height: 16px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transform: rotate(45deg); } :where(.site-shell) .topbar-docs .topbar-links, :where(.site-shell) .topbar-docs .topbar-version { display: none; } :where(.site-shell) .topbar-docs .topbar-search { width: auto; padding: 7px; border: 0; background: transparent; } :where(.site-shell) .topbar-docs .topbar-search span, :where(.site-shell) .topbar-docs .topbar-search kbd { display: none; } } @media (max-width: 400px) { :where(.site-shell) .topbar-docs .topbar-inner { gap: 8px; padding: 0 12px; } :where(.site-shell) .topbar-docs .topbar-brand { gap: 6px; } :where(.site-shell) .topbar-docs .topbar-brand-mark { width: 88px; height: 22px; } :where(.site-shell) .topbar-docs .topbar-badge { font-size: 10.5px; padding: 1px 6px; } :where(.site-shell) .topbar-docs .topbar-menu-button { width: 34px; height: 34px; } :where(.site-shell) .topbar-docs .topbar-theme { width: 32px; height: 32px; } } } @layer site { :where(.site-shell) :where(a:not(.btn, .btn-toolbar, .btn-icon-add, .btn-icon-more, .tabs a, .filter-list a, .guide-nav a, .toc a, .app-card-title, .toolbar-select)) { text-shadow: 0 0 7px light-dark(transparent, rgba(255, 255, 255, 0.45)); } :where(.site-shell) .toggle input:checked + .toggle-track::after { background: light-dark(#ffffff, #0a0b1c); } :where(.site-shell) .card:not(.login-card), :where(.site-shell) .account-nav, :where(.site-shell) .app-hero, :where(.site-shell) .price-card::before, :where(.site-shell) .login-card::before, :where(.site-shell) .frosted-sheet::before, :where(.site-shell) .home-panel::before { --frost-veil: light-dark(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.05)); --frost-filter: saturate(160%) brightness(1.03) blur(24px); --frost-edge: light-dark(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.10)); --frost-catch: light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.14)); --frost-glow: light-dark(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03)); --frost-glow-size: 28px; background: var(--frost-veil); -webkit-backdrop-filter: var(--frost-filter); backdrop-filter: var(--frost-filter); border-color: transparent; box-shadow: inset 0 0 0 1px var(--frost-edge), inset 0 1px 0 var(--frost-catch), inset 0 0 var(--frost-glow-size) var(--frost-glow); } :where(.site-shell) .price-card::before, :where(.site-shell) .login-card::before, :where(.site-shell) .frosted-sheet::before, :where(.site-shell) .home-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; } :where(.site-shell) .price-card, :where(.site-shell) .login-card, :where(.site-shell) .frosted-sheet { position: relative; isolation: isolate; background: transparent; } :where(.site-shell) .account-nav { --frost-filter: var(--column-frost); } :where(.site-shell) .app-summary .def-list dd { color: var(--color-text); } :where(.site-shell) .app-layout { padding-top: 28px; } :where(.site-shell) .app-layout > aside { align-self: start; position: sticky; top: calc(var(--chrome-height) + 28px); display: flex; flex-direction: column; max-height: calc(100vh - var(--chrome-height) - 48px); } :where(.site-shell) .app-layout > aside .app-title { font: 700 var(--text-28) var(--font-display); letter-spacing: var(--track-28); margin: 0 0 16px; padding: 0 0 0 4px; flex: none; } :where(.site-shell) .account-nav { -webkit-backdrop-filter: var(--column-frost); backdrop-filter: var(--column-frost); padding: 10px; border-radius: 14px; flex: 1 1 auto; min-height: 420px; overflow-y: auto; overscroll-behavior: contain; } :where(.site-shell) .app-layout > aside .filter-list-title { display: none; } :where(.site-shell) .app-layout > section { padding-top: 3px; } :where(.site-shell) .app-pane-title { font: 500 var(--text-24) var(--font-display); letter-spacing: var(--track-24); margin: 0 0 22px; } :where(.site-shell) .app-pane-title + .app-banner { margin: 0 0 24px; } :where(.site-shell) .filter-list a { display: flex; align-items: center; gap: 10px; transition: background-color 0.08s ease, box-shadow 0.08s ease, color 0.08s ease; } :where(.site-shell) .filter-list svg { flex: none; width: 16px; height: 16px; opacity: 0.85; transition: opacity 0.08s ease; } :where(.site-shell) .filter-list a:hover, :where(.site-shell) .filter-list a.is-active { color: light-dark(#5f1fe6, #ffffff); } :where(.site-shell) .filter-list a:hover svg, :where(.site-shell) .filter-list a.is-active svg { opacity: 1; } :where(.site-shell) .filter-list a.is-active { background: light-dark(rgba(var(--accent-list-rgb), 0.16), rgba(255, 255, 255, 0.16)); font-weight: 600; box-shadow: inset 0 0 0 1px light-dark(rgba(var(--accent-list-rgb), 0.28), rgba(255, 255, 255, 0.18)), 0 0 18px light-dark(rgba(var(--accent-list-rgb), 0.12), rgba(255, 255, 255, 0.10)); } :where(.site-shell) .filter-list a:not(.is-active):hover { background: light-dark(rgba(var(--accent-list-rgb), 0.08), rgba(255, 255, 255, 0.08)); } :where(.site-shell) .filter-list form { margin: 0; } :where(.site-shell) .filter-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 14px; margin: 0; border: 0; border-radius: var(--radius-row); background: none; text-align: left; cursor: pointer; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); transition: background-color 0.08s ease, color 0.08s ease; } :where(.site-shell) .filter-list button:hover { color: light-dark(#5f1fe6, #ffffff); background: light-dark(rgba(var(--accent-list-rgb), 0.08), rgba(255, 255, 255, 0.08)); } :where(.site-shell) .filter-list button:hover svg { opacity: 1; } @media (max-width: 1023px) { :where(.site-shell) .app-layout { grid-template-columns: minmax(0, 1fr); } :where(.site-shell) .app-layout > aside { position: static; max-height: none; } :where(.site-shell) .account-nav { min-height: 0; overflow: visible; overscroll-behavior: auto; } :where(.site-shell) .app-layout > section { padding-top: 0; } } @media (max-width: 734px) { :where(.site-shell) .app-page:has(.app-layout > aside) .app-subtitle { display: none; } :where(.site-shell) .app-layout > aside .app-title, :where(.site-shell) .app-pane-title { display: none; } :where(.site-shell) .app-layout { padding-top: 0; } :where(.site-shell) .app-pane-title + .app-banner { margin: 0 28px 20px; } :where(.site-shell) .app-layout > section > .app-section { margin-left: 28px; margin-right: 28px; } :where(.site-shell) .account-nav { border-radius: 0; padding: 12px 0; margin: 0 0 20px; box-shadow: inset 0 -1px 0 var(--frost-edge); } :where(.site-shell) .app-layout .filter-list-title { display: none; } :where(.site-shell) .app-layout .filter-list { display: flex; flex-wrap: nowrap; gap: 6px; padding: 0 28px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding: 28px; -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); } :where(.site-shell) .app-layout .filter-list::-webkit-scrollbar { display: none; } :where(.site-shell) .app-layout .filter-list li { flex: none; } :where(.site-shell) .app-layout .filter-list a, :where(.site-shell) .app-layout .filter-list button { padding: 7px 14px; border-radius: 980px; white-space: nowrap; border: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.12)); } :where(.site-shell) .app-layout .filter-list button { width: auto; } :where(.site-shell) .app-layout .filter-list a.is-active { border-color: transparent; } } @media (min-width: 1024px) and (max-width: 1199px) { :where(.site-shell) .app-layout .app-detail { grid-template-columns: minmax(0, 1fr); } :where(.site-shell) .app-layout .app-detail-aside { position: static; } } :where(.site-shell) .app-section:has(> .data-table), :where(.site-shell) .app-layout > section > .data-table { overflow-x: auto; } :where(.site-shell) .app-page { max-width: 1400px; margin: 0 auto; } @media (max-width: 734px) { :where(.site-shell) .app-list-cards { border-top: 1px solid var(--color-separator); } :where(.site-shell) .app-band { display: none; } :where(.site-shell) .app-card { padding: 16px 28px 18px; border-bottom: 1px solid var(--color-separator); } :where(.site-shell) .app-card-title { padding-bottom: 10px; margin-bottom: 2px; border-bottom: none; } :where(.site-shell) .app-card .def-list dt, :where(.site-shell) .app-card .def-list dd { padding: 6px 0; } } :where(.site-shell) .badge-success, :where(.site-shell) .badge-error, :where(.site-shell) .badge-warning, :where(.site-shell) .badge-tip, :where(.site-shell) .badge-accent { background: color-mix(in oklch, currentColor 11%, transparent); border-color: color-mix(in oklch, currentColor 55%, transparent); text-shadow: 0 0 6px light-dark(transparent, color-mix(in oklch, currentColor 45%, transparent)); } :where(.site-shell) .note { border-color: color-mix(in oklch, var(--note-border) 50%, transparent); box-shadow: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } :where(.site-shell) .app-banner { background: color-mix(in oklch, var(--color-text) 3%, transparent); border-color: color-mix(in oklch, var(--color-text) 14%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } :where(.site-shell) .app-banner-info { background: color-mix(in oklch, var(--color-accent) 8%, transparent); border-color: color-mix(in oklch, var(--color-accent) 40%, transparent); } :where(.site-shell) .app-banner-warning { background: var(--color-caution-bg); border-color: light-dark(rgba(214, 170, 0, 0.4), rgba(255, 224, 138, 0.32)); } :where(.site-shell) .app-banner-warning .app-banner-icon { background: light-dark(#f7c948, #ffe08a); color: #0a0b1c; } :where(.site-shell) .app-summary > p:not([class]) { font-size: 14px; letter-spacing: var(--track-14); margin: 0; } :where(.site-shell) .app-summary > .def-list + .field-help { margin-top: 12px; } :where(.site-shell) .app-section-heading + .note { margin-top: 0; } :where(.site-shell) .note .toolbar { padding: 8px 0 0; } :where(.site-shell) .form-compact .input[type="file"] { padding: 4px 10px; } :where(.site-shell) .page-title { margin: 0 0 0.4em; } :where(.site-shell) .page-lead { color: var(--color-text-secondary); margin-bottom: 0; } :where(.site-shell) .section-flush { padding-top: 0; } :where(.site-shell) .id-actions-center { justify-content: center; } :where(.site-shell) .id-main .id-actions + .id-copy, :where(.site-shell) .id-main form:has(> .id-actions:last-child) + .id-copy { margin-top: 28px; } :where(.site-shell) .form-actions-start { justify-content: flex-start; } :where(.site-shell) .form-actions-flush { margin-top: 0; } :where(.site-shell) form.row-action { display: inline-block; } :where(.site-shell) .row-action + .row-action { margin-left: 8px; } :where(.site-shell) .data-table td:has(> .row-action) { white-space: nowrap; } :where(.site-shell) .btn-toolbar:disabled { opacity: 0.5; cursor: default; } :where(.site-shell) .app-band { background: light-dark(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.035)); } :where(.site-shell) .section-alt { background: light-dark(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.04)); border-top: 1px solid light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.08)); border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.08)); -webkit-backdrop-filter: var(--band-lift); backdrop-filter: var(--band-lift); } :where(.site-shell) .section-alt + .section-alt { border-top: none; } :where(.site-shell) .visually-hidden { display: inline-block; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; vertical-align: top; } :where(.site-shell) .form-trap { position: absolute; left: -9999px; } :where(.site-shell) .segmented { background: light-dark(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 0 0 1px light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.06)); } :where(.site-shell) .check input[type="checkbox"], :where(.site-shell) .check input[type="radio"] { width: 18px; height: 18px; margin-top: 3px; } :where(.site-shell) .check input[type="checkbox"] { border-radius: 4px; } :where(.site-shell) .check input[type="checkbox"]:checked::before { width: 13px; height: 13px; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M2 6.9l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M2 6.9l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } :where(.site-shell) .check input[type="radio"]:checked::before { width: 8px; height: 8px; } :where(.site-shell) .form-compact .check { line-height: 1.42859; min-height: 20px; } :where(.site-shell) .form-compact .check input[type="checkbox"], :where(.site-shell) .form-compact .check input[type="radio"] { margin-top: 1px; } @media (max-width: 734px) { :where(.site-shell) .form-compact .check { min-height: 24px; } :where(.site-shell) .form-compact .check input[type="checkbox"], :where(.site-shell) .form-compact .check input[type="radio"] { margin-top: 3px; } } :where(.site-shell) .check { padding-inline: 5px; } :where(.site-shell) .check-grid .check-sub { padding-left: 26px; } @media (max-width: 734px) { :where(.site-shell) .token-field code { white-space: pre-wrap; overflow-wrap: anywhere; } } :where(.site-shell) .choice-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 6px; -webkit-user-select: none; user-select: none; } :where(.site-shell) .choice-group label { position: relative; display: grid; min-width: 0; cursor: pointer; } :where(.site-shell) .choice-group input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } :where(.site-shell) .choice-group span { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 14px; pointer-events: none; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); text-align: center; color: var(--color-text); opacity: 0.8; background: light-dark(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 0 0 1px light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.06)); border-radius: var(--radius-pill); transition: color 0.16s ease-out, background-color 0.16s ease-out, opacity 0.1s ease-in-out; } :where(.site-shell) .choice-group label:hover span { opacity: 1; } :where(.site-shell) .choice-group input:checked + span { background: var(--color-text); color: var(--color-bg); opacity: 1; box-shadow: none; } :where(.site-shell) .choice-group input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; } :where(.site-shell) .field.is-invalid .choice-group span { background: var(--field-error-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--field-error-border) 35%, transparent); } @media (max-width: 734px) { :where(.site-shell) .choice-group { grid-template-columns: 1fr 1fr; } :where(.site-shell) .choice-group span { min-height: 44px; font: 400 15px/1.26667 var(--font-text); letter-spacing: var(--track-14); } } :where(.site-shell) .choice-multi { grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); } :where(.site-shell) .choice-multi span { gap: 8px; justify-content: flex-start; text-align: left; } :where(.site-shell) .choice-multi span::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px light-dark(rgba(0, 0, 0, 0.32), rgba(255, 255, 255, 0.38)); transition: background-color 0.16s ease-out, box-shadow 0.16s ease-out; } :where(.site-shell) .choice-multi input:checked + span::before { background-color: currentColor; box-shadow: none; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M2 6.9l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M2 6.9l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } :where(.site-shell) .field.is-invalid .choice-multi span::before { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--field-error-border) 55%, transparent); } :where(.site-shell) .footer { border-top: 1px solid var(--color-hairline); } :where(.site-shell) .footer-main { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px 48px; padding: 36px 0 8px; } :where(.site-shell) .footer-brand { display: flex; flex-direction: column; gap: 10px; } :where(.site-shell) .footer-wordmark { display: block; height: 24px; width: auto; filter: var(--wordmark-filter); } :where(.site-shell) .footer-brand p { color: var(--footer-text); max-width: 22ch; } :where(.site-shell) .footer-main .footer-directory { padding-top: 4px; } @media (min-width: 834px) { :where(.site-shell) .footer-main .footer-directory { grid-template-columns: repeat(4, max-content); justify-content: space-between; } :where(.site-shell) .footer-main .footer-column { padding-right: 0; } } @media (max-width: 833px) { :where(.site-shell) .footer-main { grid-template-columns: 1fr; gap: 20px; padding-top: 28px; } } @media (min-width: 834px) { :where(.site-shell) .footer-section-toggle { display: none; } } @media (max-width: 1068px) { :where(.site-shell.has-backdrop) .footer-inner { max-width: calc(var(--width-content-medium) + var(--gutter) * 2); padding: 0 var(--gutter); } } @media (max-width: 734px) { :where(.site-shell.has-backdrop) .footer-inner { max-width: none; padding: 0 6.25%; } } :where(.site-shell) .app-page ~ .footer .footer-inner { max-width: 1400px; padding: 0 40px; } @media (max-width: 1023px) { :where(.site-shell) .app-page ~ .footer .footer-inner { max-width: none; padding: 0 28px; } } @media (max-width: 734px) { :where(.site-shell) .app-page:has(> .app-layout) ~ .footer .footer-inner { padding: 0 16px; } } :where(.site-shell) .modal-overlay { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } :where(.site-shell) .modal { background-image: var(--panel-veil); --color-text: light-dark(#1d1d1f, #ffffff); --color-bg: light-dark(#ffffff, #000000); --color-accent-contrast: light-dark(#ffffff, #000000); --color-link: light-dark(#5b1fe6, #ffffff); --color-accent: light-dark(#6d2bff, #ffffff); --color-accent-fill: light-dark(#6d2bff, #ffffff); --color-text-secondary: light-dark(#6e6e73, rgba(255, 255, 255, 0.62)); --color-text-tertiary: light-dark(#86868b, rgba(255, 255, 255, 0.45)); --color-separator: light-dark(#d9d9e3, rgba(255, 255, 255, 0.16)); --color-hairline: light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.22)); --field-border: light-dark(#86868b, rgba(255, 255, 255, 0.3)); --field-bg: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.06)); --field-focus-halo: light-dark(rgba(var(--accent-rgb), 0.25), rgba(255, 255, 255, 0.28)); --color-fill-tertiary: light-dark(#ececf3, rgba(255, 255, 255, 0.12)); --color-code-bg: light-dark(#f5f5f9, rgba(255, 255, 255, 0.06)); --row-hover: light-dark(rgba(var(--accent-rgb), 0.05), rgba(255, 255, 255, 0.08)); --row-active: light-dark(#ececf3, rgba(255, 255, 255, 0.12)); } :where(.site-shell) .frosted-sheet { border-radius: var(--radius-l); } :where(.site-shell) .frosted-sheet::before { --frost-veil: light-dark(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.06)); } @media (max-width: 734px) { :where(.site-shell) .frosted-sheet { border-radius: 0; } } :where(.site-shell) .app-footnote { overflow-wrap: anywhere; margin: 16px 0 0; font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-tertiary); } @media (max-width: 734px) { :where(.site-shell) .app-footnote { padding: 0 28px; } } :where(.site-shell) .app-copy { font-size: 14px; letter-spacing: var(--track-14); } :where(.site-shell) .btn-icon-add { background-image: linear-gradient(var(--color-accent-contrast), var(--color-accent-contrast)), linear-gradient(var(--color-accent-contrast), var(--color-accent-contrast)); } :where(.site-shell) .data-table .is-nowrap { white-space: nowrap; } :where(.site-shell) .data-table:has(td.is-truncate) :is(th, td) { padding-left: 8px; padding-right: 8px; } :where(.site-shell) .data-table:has(td.is-truncate) :is(th, td):first-child { padding-left: 0; } :where(.site-shell) .data-table:has(td.is-truncate) :is(th, td):last-child { padding-right: 0; } :where(.site-shell) .data-table td.is-truncate { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where(.site-shell.has-backdrop:not(.site-shell)) { min-height: 100vh; min-height: 100dvh; } :where(.site-shell.has-backdrop:not(.site-shell)) > .footer { position: sticky; top: 100vh; top: 100dvh; } :where(.site-shell.id-page) { min-height: 100vh; } :where(.site-shell.id-page) .id-footer { background: transparent; border-top-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.12)); } :where(.site-shell.id-page) .id-footer a { text-shadow: none; } :where(.site-shell) .login-card { width: 540px; max-width: 100%; padding: 48px 40px 40px; border-radius: var(--radius-xl); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; --color-text-secondary: light-dark(#6e6e73, #b5b3d6); } :where(.site-shell) .login-card .field-error { color: light-dark(var(--color-error), #ff9aa2); } :where(.site-shell) .login-card::before { --frost-veil: light-dark(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07)); --frost-filter: saturate(180%) brightness(1.03) blur(20px); --frost-edge: light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.11)); --frost-catch: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.16)); --frost-glow: light-dark(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)); --frost-glow-size: 32px; } :where(.site-shell) .btn-glass:not(.btn-secondary) { --btn-bg: light-dark(var(--color-accent-fill), rgba(255, 255, 255, 0.16)); --btn-fg: light-dark(var(--color-accent-contrast), #fff); --btn-bg-hover: light-dark(var(--color-accent-fill-hover), rgba(255, 255, 255, 0.18)); --btn-bg-active: light-dark(var(--color-accent-fill-active), rgba(255, 255, 255, 0.12)); --btn-border: light-dark(transparent, rgba(255, 255, 255, 0.35)); box-shadow: inset 0 1px 0 light-dark(transparent, rgba(255, 255, 255, 0.28)); -webkit-backdrop-filter: var(--glass-lift); backdrop-filter: var(--glass-lift); transition: box-shadow 0.15s ease, background-color 0.15s ease; } :where(.site-shell) .btn-glass:not(.btn-secondary):hover { --btn-border: light-dark(transparent, rgba(255, 255, 255, 0.5)); box-shadow: inset 0 1px 0 light-dark(transparent, rgba(255, 255, 255, 0.36)), 0 0 18px light-dark(transparent, rgba(255, 255, 255, 0.16)); -webkit-backdrop-filter: var(--glass-lift-hover); backdrop-filter: var(--glass-lift-hover); } :where(.site-shell) .btn-glass.btn-secondary { --btn-fg: light-dark(var(--color-link), rgba(255, 255, 255, 0.9)); --btn-border: light-dark(var(--color-link), rgba(255, 255, 255, 0.45)); --btn-bg-hover: light-dark(var(--color-accent-fill-hover), rgba(255, 255, 255, 0.08)); --btn-bg-active: light-dark(var(--color-accent-fill-active), rgba(255, 255, 255, 0.06)); -webkit-backdrop-filter: var(--glass-lift-secondary); backdrop-filter: var(--glass-lift-secondary); transition: box-shadow 0.15s ease, background-color 0.15s ease; } :where(.site-shell) .btn-glass.btn-secondary:hover { --btn-fg: light-dark(var(--color-accent-contrast), #fff); --btn-border: light-dark(transparent, rgba(255, 255, 255, 0.7)); box-shadow: 0 0 18px light-dark(transparent, rgba(255, 255, 255, 0.12)); -webkit-backdrop-filter: var(--glass-lift-secondary-hover); backdrop-filter: var(--glass-lift-secondary-hover); } :where(.site-shell) .login .input:focus, :where(.site-shell) .login .code-field input:focus { border-color: light-dark(var(--color-accent), rgba(255, 255, 255, 0.7)); box-shadow: inset 0 0 0 1px light-dark(var(--color-accent), transparent), 0 0 14px light-dark(transparent, rgba(255, 255, 255, 0.18)); -webkit-backdrop-filter: var(--field-lift); backdrop-filter: var(--field-lift); } :where(.site-shell) .login .field-floating > .input:focus ~ label { color: light-dark(var(--color-text-secondary), rgba(255, 255, 255, 0.85)); } :where(.site-shell) .login-card .login-caption { text-align: center; color: var(--color-text-secondary); } :where(.site-shell) .login .code-field { justify-content: center; margin: 8px 0 28px; } :where(.site-shell) .login .code-field input { background: var(--field-bg); } :where(.site-shell) .login-card .login-title:has(+ .id-copy) { margin-bottom: 12px; } :where(.site-shell) .login-card .id-copy { margin: 0 auto 24px; text-align: center; } :where(.site-shell) .login-card .note { margin: 0 0 24px; } :where(.site-shell) .login-card .login-actions { grid-template-columns: 1fr; } :where(.site-shell) .login-card .login-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--field-height); border-radius: var(--field-radius); } :where(.site-shell) .login-card .login { margin: 0 auto; } :where(.site-shell) .login-card .login-checks { margin-top: 20px; } :where(.site-shell) .link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--color-link); cursor: pointer; text-shadow: 0 0 7px light-dark(transparent, rgba(255, 255, 255, 0.45)); } :where(.site-shell) .link-button:hover { text-decoration: underline; } :where(.site-shell) .code-fallback.is-upgraded { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } :where(.site-shell) .code-field input.is-invalid { border-color: var(--color-error); } @media (max-width: 734px) { :where(.site-shell) .login-card { padding: 32px 20px 24px; } } :where(.site-shell) .btn-toolbar-sm { padding: 2px 9px; } :where(.site-shell) .app-pane-title + .app-detail, :where(.site-shell) .app-pane-title + .app-banner + .app-detail, :where(.site-shell) .app-pane-title + .form > .app-detail:first-child { padding-top: 0; } :where(.site-shell) .app-action-row { margin: 12px 0 0; } :where(.site-shell) .glyph-tile { flex: none; width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent); background: light-dark(rgba(var(--accent-rgb), 0.09), rgba(255, 255, 255, 0.08)); } :where(.site-shell) .glyph-tile svg { width: 30px; height: 30px; stroke-width: 1.1; } :where(.site-shell) .glyph-tile-large { width: 72px; height: 72px; border-radius: 18px; } :where(.site-shell) .glyph-tile-large svg { width: 40px; height: 40px; stroke-width: 1; } :where(.site-shell) .app-hero { display: flex; align-items: center; gap: 20px; padding: 22px 24px; border-radius: var(--radius-l); } :where(.site-shell) .app-hero-text { flex: 1 1 auto; min-width: 0; } :where(.site-shell) .app-hero-eyebrow { margin: 0 0 2px; font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-secondary); } :where(.site-shell) .app-hero-title { margin: 0; font: 500 var(--text-28) var(--font-display); letter-spacing: var(--track-28); color: var(--color-text); overflow-wrap: anywhere; } :where(.site-shell) .app-hero-facts { margin: 4px 0 0; font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text-secondary); } :where(.site-shell) .app-pane-title + .app-hero, :where(.site-shell) .app-pane-title + .app-banner + .app-hero { margin-bottom: 6px; } :where(.site-shell) .app-hero + .app-detail { padding-top: 24px; } :where(.site-shell) .app-hero-actions { display: flex; align-items: center; gap: 8px; flex: none; } :where(.site-shell) .app-hero .menu-panel { background-color: light-dark(#ffffff, var(--color-bg-alt)); } :where(.site-shell) .app-hero:has(.row-menu[open]) { position: relative; z-index: 5; } @media (max-width: 734px) { :where(.site-shell) .app-hero { flex-wrap: wrap; gap: 14px 16px; margin: 20px 28px 0; padding: 18px; } :where(.site-shell) .app-hero .glyph-tile-large { width: 56px; height: 56px; border-radius: 14px; } :where(.site-shell) .app-hero .glyph-tile-large svg { width: 32px; height: 32px; } :where(.site-shell) .app-hero-title { font: 500 var(--text-21) var(--font-display); letter-spacing: var(--track-21); } :where(.site-shell) .app-hero-text { flex-basis: 0; } :where(.site-shell) .app-hero > .btn-toolbar { flex: 1 0 100%; text-align: center; } :where(.site-shell) .app-hero-actions { flex: 1 0 100%; } :where(.site-shell) .app-hero-actions > * { flex: 1 1 auto; } :where(.site-shell) .app-hero-actions .btn-toolbar { display: block; text-align: center; white-space: nowrap; } :where(.site-shell) .app-hero-actions .row-menu[open] > .menu-panel { left: 0; right: auto; } } :where(.site-shell) .app-crumb { margin: 0 0 6px; font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); } :where(.site-shell) .app-crumb a { color: var(--color-text-secondary); text-decoration: none; } :where(.site-shell) .app-crumb a:hover { color: var(--color-link); } @media (max-width: 1023px) { :where(.site-shell) .app-crumb { display: none; } } :where(.site-shell) .person { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); } :where(.site-shell) .app-card-title .person { font: inherit; letter-spacing: inherit; } :where(.site-shell) .person-text { display: flex; flex-direction: column; min-width: 0; } :where(.site-shell) .person-text small { font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-secondary); } :where(.site-shell) .avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 11px/1 var(--font-text); letter-spacing: 0.02em; text-transform: uppercase; color: light-dark(var(--color-accent), #ffffff); background: light-dark(rgba(var(--accent-rgb), 0.12), rgba(255, 255, 255, 0.14)); } :where(.site-shell) .row-menu { position: relative; display: inline-block; vertical-align: middle; } :where(.site-shell) .row-menu > summary { display: block; list-style: none; cursor: pointer; } :where(.site-shell) .row-menu > summary::-webkit-details-marker { display: none; } :where(.site-shell) .row-menu > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } :where(.site-shell) .row-menu[open] > .menu-panel { display: block; left: auto; right: 0; top: calc(100% + 6px); z-index: 5; } :where(.site-shell) .menu-panel form { margin: 0; } :where(.site-shell) .app-section:has(.row-menu[open]) { overflow: visible; } :where(.site-shell) .app-card:has(> .app-card-corner) { position: relative; } :where(.site-shell) .app-card-corner { position: absolute; top: 14px; right: 28px; } :where(.site-shell) .app-card:has(> .app-card-corner) > .app-card-title { padding-right: 36px; } :where(.site-shell) .menu-panel .is-destructive { color: var(--color-error); } :where(.site-shell) .chip-list > li { margin: 0; } :where(.site-shell) .chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } :where(.site-shell) .chip { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 10px; border-radius: 13px; border: 1px solid var(--color-separator); font: 400 13px/1.2 var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); } :where(.site-shell) .chip form { display: inline-flex; margin: 0 -6px 0 0; } :where(.site-shell) .chip button { appearance: none; width: 18px; height: 18px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-text-secondary); font: 400 15px/1 var(--font-text); cursor: pointer; } :where(.site-shell) .chip button:hover { background: var(--color-fill-tertiary); color: var(--color-text); } :where(.site-shell) .summary-rows { list-style: none; margin: 0; padding: 0; } :where(.site-shell) .summary-rows > li { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin: 0; padding: 10px 0; border-top: 1px solid var(--color-separator); } :where(.site-shell) .summary-rows > li:first-child { border-top: 0; padding-top: 0; } :where(.site-shell) .summary-rows > li:last-child { padding-bottom: 0; } :where(.site-shell) .summary-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); overflow-wrap: anywhere; } :where(.site-shell) .summary-row-text small { font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-secondary); } :where(.site-shell) .app-card-title .summary-row-text { font-weight: 600; } :where(.site-shell) .summary-row-note { flex: none; font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-secondary); } :where(.site-shell) .summary-row-actions { display: flex; flex-wrap: wrap; gap: 6px; } :where(.site-shell) .app-summary .summary-rows + .form, :where(.site-shell) .app-summary .summary-rows + .field-help { margin-top: 16px; } :where(.site-shell) .app-summary .note { margin: 0; padding: 12px 14px; } :where(.site-shell) .app-summary .note p, :where(.site-shell) .app-summary .note-title { font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); } :where(.site-shell) .app-summary .note-title { font-weight: 600; } :where(.site-shell) .app-empty { display: flex; flex-direction: column; align-items: center; padding: 56px 24px; text-align: center; } :where(.site-shell) .app-empty h3 { margin: 20px 0 0; font: 500 var(--text-21) var(--font-display); letter-spacing: var(--track-21); color: var(--color-text); } :where(.site-shell) .app-empty p { margin: 10px 0 0; max-width: 44ch; font: 400 var(--text-17) var(--font-text); letter-spacing: var(--track-17); color: var(--color-text-secondary); } :where(.site-shell) .app-empty .btn-toolbar { margin-top: 24px; } :where(.site-shell) .app-empty .btn-toolbar ~ .btn-toolbar { margin-top: 10px; } :where(.site-shell) .app-empty-small { padding: 44px 24px; } @media (max-width: 734px) { :where(.site-shell) .app-empty { padding: 40px 20px; } :where(.site-shell) .app-empty-small { padding: 34px 20px; } } :where(.site-shell) dialog.modal-overlay { width: auto; height: auto; max-width: none; max-height: none; margin: 0; border: 0; color: inherit; } :where(.site-shell) dialog.modal-overlay:not([open]) { display: none; } :where(.site-shell) dialog.modal-overlay::backdrop { background: transparent; } :where(.site-shell) .modal-copy { margin: 0 0 20px; font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); } :where(.site-shell) .modal-lead { margin: -16px 0 24px; font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text-secondary); } :where(.site-shell) .btn-destructive { --btn-bg: var(--color-error); --btn-fg: light-dark(#ffffff, #0a0b1c); --btn-bg-hover: color-mix(in srgb, var(--color-error) 86%, light-dark(#000000, #ffffff)); --btn-bg-active: color-mix(in srgb, var(--color-error) 76%, light-dark(#000000, #ffffff)); } :where(.site-shell) .app-link-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } :where(.site-shell) .app-link-rows > li { margin: 0; display: flex; } :where(.site-shell) .app-link-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } :where(.site-shell) .app-link-row { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-m); border: 1px solid var(--color-separator); color: var(--color-text); text-decoration: none; text-shadow: none; transition: background-color 0.08s ease, border-color 0.08s ease; } :where(.site-shell) .app-link-row:hover { text-decoration: none; background: var(--row-hover); border-color: light-dark(rgba(var(--accent-rgb), 0.35), rgba(255, 255, 255, 0.3)); } :where(.site-shell) .app-link-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font: 600 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); } :where(.site-shell) .app-link-row-text small { font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-secondary); } :where(.site-shell) .app-link-row::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 1.5px solid var(--color-text-tertiary); border-top: 1.5px solid var(--color-text-tertiary); transform: rotate(45deg); margin-right: 4px; } @media (max-width: 1399px) { :where(.site-shell) .app-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 734px) { :where(.site-shell) .app-link-grid { grid-template-columns: minmax(0, 1fr); } } :where(.site-shell) .app-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; } :where(.site-shell) .app-stats > li { margin: 0; display: flex; } :where(.site-shell) .app-stats + .app-section { margin-top: 28px; } :where(.site-shell) span.app-link-row::after { display: none; } :where(.site-shell) span.app-link-row:hover { background: none; border-color: var(--color-separator); } :where(.site-shell) .app-stat { flex: 1 1 auto; min-width: 0; } :where(.site-shell) .app-stat .app-link-row-text { gap: 3px; font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-secondary); } :where(.site-shell) .app-stat-value { order: -1; font: 500 var(--text-24) var(--font-display); letter-spacing: var(--track-24); line-height: 1; color: var(--color-text); font-variant-numeric: tabular-nums; } @media (max-width: 734px) { :where(.site-shell) .app-stats { margin: 16px 28px 0; gap: 8px; } :where(.site-shell) .app-stat { padding: 10px 12px; align-items: flex-start; } :where(.site-shell) .app-section > .app-action-row { padding: 0 28px; } :where(.site-shell) .app-stat .glyph-tile, :where(.site-shell) .app-stat::after { display: none; } :where(.site-shell) .app-stat-value { font: 500 var(--text-24) var(--font-display); letter-spacing: var(--track-24); line-height: 1; } :where(.site-shell) .app-stat .app-link-row-text { gap: 5px; } } @media (min-width: 735px) { :where(.site-shell) .app-layout > section .app-section, :where(.site-shell) .app-layout > section .app-summary, :where(.site-shell) .app-hero, :where(.site-shell) .app-layout > section .app-link-row, :where(.site-shell) .app-layout > section > .app-empty { border: 0; border-radius: var(--radius-m); box-shadow: none; background: linear-gradient(to bottom, var(--pane-fade), transparent 32px), var(--pane-veil); -webkit-backdrop-filter: var(--pane-frost); backdrop-filter: var(--pane-frost); } :where(.site-shell) .app-hero { padding: 24px; margin: 0; } :where(.site-shell) .app-pane-title + .app-hero, :where(.site-shell) .app-pane-title + .app-banner + .app-hero { margin-bottom: 0; } :where(.site-shell) .app-layout > section .app-section { padding: 24px; margin: 0 0 var(--pane-gap); } :where(.site-shell) .app-layout > section .app-section:last-child { margin-bottom: 0; } :where(.site-shell) .app-layout > section .app-summary { padding: 24px; } :where(.site-shell) .app-layout > section .app-summary + .app-summary { margin-top: var(--pane-gap); } :where(.site-shell) .app-layout > section .app-detail { gap: var(--pane-gap); padding-top: var(--pane-gap); } :where(.site-shell) .app-layout > section .app-stats { margin: var(--pane-gap) 0 0; gap: var(--pane-gap); } :where(.site-shell) .app-layout > section .app-stats + .app-section, :where(.site-shell) .app-layout > section .app-stats + .app-detail { margin-top: 0; } :where(.site-shell) .app-layout > section .app-link-rows { gap: var(--pane-gap); } :where(.site-shell) .app-layout > section .app-link-row { padding: 16px 24px; gap: 20px; } :where(.site-shell) .app-layout > section .app-pane-title { margin-bottom: 16px; } :where(.site-shell) .app-layout > section a.app-link-row:hover { background: linear-gradient(to bottom, var(--pane-fade), transparent 32px), var(--row-hover); } :where(.site-shell) .app-layout > section span.app-link-row:hover { background: linear-gradient(to bottom, var(--pane-fade), transparent 32px), var(--pane-veil); } :where(.site-shell) .app-layout > section .app-section .menu-panel { background-color: light-dark(#ffffff, var(--color-bg-alt)); } :where(.site-shell) .app-layout > section .app-section:has(.row-menu[open]) { position: relative; z-index: 5; } :where(.site-shell) .app-layout > section .app-section { position: relative; } :where(.site-shell) .app-layout > section .app-section-heading { flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 20px; } :where(.site-shell) .app-layout > section .app-section:has(.app-section-heading + .toolbar > .btn-toolbar:last-child) .app-section-heading { padding-right: 200px; } :where(.site-shell) .app-layout > section .app-section-heading + .toolbar > .btn-toolbar:last-child { position: absolute; top: 24px; right: 24px; } :where(.site-shell) .app-layout > section .app-section-heading + .toolbar:not(:has(> :not(.toolbar-spacer, .btn-toolbar))) { padding: 0; } :where(.site-shell) .app-layout > section .btn-toolbar { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); padding: 8px 16px; border-radius: var(--radius-s); } :where(.site-shell) .app-layout > section .app-action-row .btn-toolbar { min-width: 200px; } } @media (min-width: 1200px) { :where(.site-shell) .app-layout > section .app-detail { grid-template-columns: repeat(3, minmax(0, 1fr)); } :where(.site-shell) .app-layout > section .app-detail > :first-child { grid-column: span 2; } } @media (min-width: 735px) { :where(.site-shell) .app-layout > section .app-section .data-table { margin: 8px 0 24px; } :where(.site-shell) .app-layout > section .app-action-row { margin-top: 20px; } :where(.site-shell) .app-layout > section .app-section .def-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 32px; margin: 0; } :where(.site-shell) .app-layout > section .app-section .def-list dt, :where(.site-shell) .app-layout > section .app-section .def-list dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--color-separator); font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); } :where(.site-shell) .app-layout > section .app-section .def-list dt { color: var(--color-text-secondary); } :where(.site-shell) .app-layout > section .app-section .def-list dd { color: var(--color-text); } :where(.site-shell) .app-layout > section .app-section .def-list dt:nth-last-of-type(1), :where(.site-shell) .app-layout > section .app-section .def-list dd:nth-last-of-type(1) { border-bottom: 0; } :where(.site-shell) .app-layout > section .app-summary .app-action-row { margin-top: 16px; } :where(.site-shell) .app-layout > section .app-summary .app-action-row + .app-action-row { margin-top: 10px; } :where(.site-shell) .app-layout > section .app-summary .summary-row-actions { margin-top: 14px; } :where(.site-shell) .app-layout > section .app-summary .app-action-row + .field-help, :where(.site-shell) .app-layout > section .app-summary .app-action-row + .app-footnote { margin-top: 12px; } } :where(.site-shell) .btn-toolbar:has(> svg) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; } :where(.site-shell) .btn-toolbar svg { display: block; flex: none; width: 16px; height: 16px; margin: 0 0 0 -2px; } :where(.site-shell) .app-layout > section .app-section .app-link-row { background: var(--pane-sub-veil); -webkit-backdrop-filter: none; backdrop-filter: none; } :where(.site-shell) .app-summary h3:has(+ .app-summary-sub) { margin-bottom: 4px; } :where(.site-shell) .app-summary > .app-summary-sub { margin: 0 0 16px; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text-secondary); } :where(.site-shell) .app-layout > section .field-row .field { margin-bottom: 0; } :where(.site-shell) .app-layout > section .app-section > .field:last-child, :where(.site-shell) .app-layout > section .app-section > .field:has(+ .form-actions), :where(.site-shell) .app-layout > section .app-section > .field-row:has(+ .form-actions) { margin-bottom: 0; } :where(.site-shell) .app-layout > section .app-section .form-actions { margin-top: 20px; } :where(.site-shell) .app-layout > section .app-section .seat-list:last-child .seat:last-child { padding-bottom: 0; } @media (min-width: 735px) { :where(.site-shell) .app-layout > section .app-pane-title { margin-bottom: 17px; } :where(.site-shell) .app-layout > section .app-stats + .app-section { margin-top: var(--pane-gap); } :where(.site-shell) .app-layout > section .app-detail .app-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } :where(.site-shell) .app-layout > section .app-pane-title + .app-detail, :where(.site-shell) .app-layout > section .app-pane-title + .app-banner + .app-detail, :where(.site-shell) .app-layout > section > .form > .app-detail { padding-top: 0; } :where(.site-shell) .app-layout > section .app-section > .def-list { gap: 0; } :where(.site-shell) .app-layout > section .app-section > .def-list dt { padding-right: 32px; } :where(.site-shell) .app-layout > section .app-section > .data-table:has(+ .app-list-cards:last-child) { margin-bottom: 0; } :where(.site-shell) .app-layout > section .data-table .btn-toolbar { font: 400 var(--text-14-tight) var(--font-text); padding: 5px 12px; border-radius: var(--radius-row); } :where(.site-shell) .app-layout > section .token-field .btn-toolbar { border-radius: 0 var(--radius-row) var(--radius-row) 0; } :where(.site-shell) .app-layout > section .app-section .form-actions .btn { min-width: 200px; font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); padding: 8px 16px; border-radius: var(--radius-s); } } @media (max-width: 734px) { :where(.site-shell) .app-layout { --pane-gap: 10px; } :where(.site-shell) .app-layout > section { padding: 6px 16px 0; } :where(.site-shell) .account-nav { margin-bottom: 0; } :where(.site-shell) .app-layout > section .app-section, :where(.site-shell) .app-layout > section .app-summary, :where(.site-shell) .app-layout > section .app-hero, :where(.site-shell) .app-layout > section .app-link-row, :where(.site-shell) .app-layout > section > .app-empty { border: 0; border-radius: var(--radius-m); box-shadow: none; background: linear-gradient(to bottom, var(--pane-fade), transparent 32px), var(--pane-veil); -webkit-backdrop-filter: var(--pane-frost); backdrop-filter: var(--pane-frost); } :where(.site-shell) .app-layout > section .app-hero { margin: var(--pane-gap) 0 0; padding: 20px; } :where(.site-shell) .app-layout > section > .app-empty { margin-top: var(--pane-gap); } :where(.site-shell) .app-layout > section .app-stats { margin: var(--pane-gap) 0 0; gap: var(--pane-gap); } :where(.site-shell) .app-layout > section .app-stat { padding: 12px; } :where(.site-shell) .app-layout > section .app-detail { padding: var(--pane-gap) 0 0; gap: var(--pane-gap); } :where(.site-shell) .app-layout > section > .app-pane-title + .form > .app-detail:first-child, :where(.site-shell) .app-layout > section > .form > .app-detail { padding-top: var(--pane-gap); } :where(.site-shell) .app-layout > section .app-section { position: relative; margin: 0 0 var(--pane-gap); padding: 20px; } :where(.site-shell) .app-layout > section > .app-section, :where(.site-shell) .app-layout > section > form > .app-section { margin: var(--pane-gap) 0 0; } :where(.site-shell) .app-layout > section .app-section:last-child { margin-bottom: 0; } :where(.site-shell) .app-layout > section .app-section:has(.row-menu[open]) { z-index: 5; } :where(.site-shell) .app-layout > section .app-section .menu-panel { background-color: light-dark(#ffffff, var(--color-bg-alt)); } :where(.site-shell) .app-layout > section .app-summary { padding: 20px; } :where(.site-shell) .app-layout > section .app-summary + .app-summary { margin-top: var(--pane-gap); } :where(.site-shell) .app-layout > section .app-pane-title + .app-banner, :where(.site-shell) .app-layout > section .app-banner { margin: var(--pane-gap) 0 0; } :where(.site-shell) .app-layout > section .app-section-heading { margin: 0 0 16px; gap: 4px; } :where(.site-shell) .app-layout > section .app-section .toolbar { padding: 0 0 16px; } :where(.site-shell) .app-layout > section .app-section .app-card { padding: 14px 0; } :where(.site-shell) .app-layout > section .app-section .app-card-corner { right: 0; } :where(.site-shell) .app-layout > section .field-row { margin-bottom: 22px; } :where(.site-shell) .app-layout > section .app-section .app-list-cards:last-child .app-card:nth-last-child(2) { border-bottom: 0; padding-bottom: 0; } :where(.site-shell) .app-layout > section .app-section > .app-action-row { padding: 0; margin-top: 16px; } :where(.site-shell) .app-layout > section .app-section .app-footnote, :where(.site-shell) .app-layout > section > .app-footnote { padding: 0; } :where(.site-shell) .app-layout > section .app-link-rows { gap: var(--pane-gap); } :where(.site-shell) .app-layout > section .app-link-row { padding: 14px 16px; } :where(.site-shell) .app-layout > section .app-stats .app-link-row { padding: 12px; } :where(.site-shell) .app-layout > section .app-section > .def-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 0; } :where(.site-shell) .app-layout > section .app-section > .def-list dt, :where(.site-shell) .app-layout > section .app-section > .def-list dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--color-separator); font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); } :where(.site-shell) .app-layout > section .app-section > .def-list dt { padding-right: 20px; color: var(--color-text-secondary); } :where(.site-shell) .app-layout > section .app-section > .def-list dd { color: var(--color-text); overflow-wrap: anywhere; } :where(.site-shell) .app-layout > section .app-section > .def-list dt:nth-last-of-type(1), :where(.site-shell) .app-layout > section .app-section > .def-list dd:nth-last-of-type(1) { border-bottom: 0; padding-bottom: 0; } :where(.site-shell) .app-layout > section .btn-toolbar { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 400 15px/1.33337 var(--font-text); letter-spacing: var(--track-14); padding: 10px 16px; border-radius: var(--radius-s); } :where(.site-shell) .app-layout > section .app-card .btn-toolbar, :where(.site-shell) .app-layout > section .summary-row-actions .btn-toolbar, :where(.site-shell) .app-layout > section .seat .btn-toolbar { font: 400 var(--text-14-tight) var(--font-text); padding: 7px 14px; } :where(.site-shell) .app-layout > section .app-action-row .btn-toolbar, :where(.site-shell) .app-layout > section .app-section-heading + .toolbar > .btn-toolbar:last-child, :where(.site-shell) .app-layout > section .app-section .form-actions .btn { width: 100%; } :where(.site-shell) .app-layout > section .app-section-heading + .toolbar:not(:has(> :not(.toolbar-spacer, .btn-toolbar))) > .toolbar-spacer { display: none; } :where(.site-shell) .app-layout > section .app-summary .app-action-row { margin-top: 14px; } :where(.site-shell) .app-layout > section .app-summary .app-action-row + .app-action-row { margin-top: 10px; } :where(.site-shell) .app-layout > section .app-summary .summary-row-actions { margin-top: 12px; } :where(.site-shell) .app-layout > section .app-summary .app-action-row + .field-help, :where(.site-shell) .app-layout > section .app-summary .app-action-row + .app-footnote { margin-top: 12px; } :where(.site-shell) .app-layout > section .token-field { flex-direction: column; } :where(.site-shell) .app-layout > section .token-field code { border-right: 1px solid var(--color-separator); border-bottom: 0; border-radius: var(--radius-row) var(--radius-row) 0 0; padding: 12px; } :where(.site-shell) .app-layout > section .token-field .btn-toolbar { width: 100%; border-radius: 0 0 var(--radius-row) var(--radius-row); padding: 10px 14px; } :where(.site-shell) .app-layout > section .app-section > .def-list.api-syntax { display: block; margin-top: 8px; } :where(.site-shell) .app-layout > section .app-section > .def-list.api-syntax dt { border: 0; padding: 14px 0 6px; font: 500 var(--text-12) var(--font-text); letter-spacing: var(--track-12); } :where(.site-shell) .app-layout > section .app-section > .def-list.api-syntax dd { padding: 0 0 14px; } :where(.site-shell) .app-layout > section .app-section > .def-list.api-syntax dd:nth-last-of-type(1) { padding-bottom: 0; } :where(.site-shell) .app-layout > section .api-syntax .api-host { display: none; } :where(.site-shell) .app-layout > section .api-syntax dd > code:only-child { display: block; padding: 9px 12px; background: var(--color-code-bg); border: 1px solid var(--color-separator); border-radius: var(--radius-row); white-space: nowrap; overflow-x: auto; } :where(.site-shell) .app-layout > section .app-section .form-actions .btn { font: 400 15px/1.33337 var(--font-text); padding: 11px 16px; border-radius: var(--radius-s); } } @media (max-width: 1023px) { :where(.site-shell) .app-layout > section .app-section, :where(.site-shell) .app-layout > section .app-summary, :where(.site-shell) .app-layout > section .app-hero, :where(.site-shell) .app-layout > section .app-link-row, :where(.site-shell) .app-layout > section > .app-empty { box-shadow: var(--pane-edge); } :where(.site-shell) .app-layout > section .app-section .app-link-row { box-shadow: none; } } @media (min-width: 735px) and (max-width: 1023px) { :where(.site-shell) .app-layout > section .app-stat { align-items: flex-start; } } @media (min-width: 735px) { :where(.site-shell) .app-hero > .btn-toolbar { flex: none; white-space: nowrap; } } :where(.site-shell) .app-section-heading h2, :where(.site-shell) .app-summary h3 { font-weight: 500; } @media (min-width: 735px) { :where(.site-shell) .app-layout > section .app-hero + .app-section { margin-top: var(--pane-gap); } :where(.site-shell) .app-layout > section .app-section-heading + .toolbar > .btn-toolbar:last-child { max-width: 176px; } } :where(.site-shell) .form-compact select.input { padding-right: 30px; } :where(.site-shell) .app-hero-facts, :where(.site-shell) .app-pane-title, :where(.site-shell) .app-section-header h2, :where(.site-shell) .app-subtitle, :where(.site-shell) .modal-lead, :where(.site-shell) .seat-title, :where(.site-shell) .person-text, :where(.site-shell) .app-layout > section .def-list dd, :where(.site-shell) .app-layout > section .app-section-heading + .toolbar > .btn-toolbar:last-child, :where(.site-shell) .app-layout > section .app-action-row .btn-toolbar { overflow-wrap: anywhere; } :where(.site-shell) .data-table .person-text { overflow-wrap: normal; } @media (max-width: 734px) { :where(.site-shell) dialog.modal-overlay > .modal { margin-top: auto; } :where(.site-shell) .app-layout > section .app-hero-actions .row-menu > .btn-toolbar { width: 100%; } } :where(.site-shell) .select-panel { position: fixed; inset: auto; margin: 0; box-sizing: border-box; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 10px; color: var(--color-text); background-color: light-dark(#ffffff, var(--color-bg-alt)); background-image: var(--panel-veil); border: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgb(203 190 255 / 32%)); box-shadow: 0 3px 16px light-dark(rgba(30, 20, 70, 0.16), #140e3563); font: 400 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); } :where(.site-shell) .select-panel[popover]:not(:popover-open) { display: none; } :where(.site-shell) .select-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 10px; border-radius: 6px; cursor: default; -webkit-user-select: none; user-select: none; } :where(.site-shell) .select-option > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } :where(.site-shell) .select-option.is-active { background: light-dark(rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0.08)); box-shadow: light-dark(none, inset 0 0 2px rgb(195 181 255 / 38%)); } :where(.site-shell) .select-option[aria-selected="true"] { font-weight: 600; } :where(.site-shell) .select-option[aria-selected="true"]::after { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.4 2.4 4.6-5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.4 2.4 4.6-5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } :where(.site-shell) .select-option[aria-disabled="true"] { color: var(--color-text-tertiary); } :where(.site-shell) .select-group { padding: 10px 10px 4px; font: 600 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-secondary); } :where(.site-shell) .form-compact .select-panel { padding: 4px; border-radius: 8px; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); } :where(.site-shell) .form-compact .select-option { padding: 6px 6px 6px 6px; border-radius: 5px; } :where(.site-shell) .form-compact .select-option[aria-selected="true"]::after { width: 12px; height: 12px; } :where(.site-shell) .sales-intake .form-compact .select-panel { padding: 6px; border-radius: 10px; font: 400 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); } :where(.site-shell) .sales-intake .form-compact .select-option { padding: 8px 12px 8px 10px; border-radius: 6px; } :where(.site-shell) .sales-intake .form-compact .select-option[aria-selected="true"]::after { width: 14px; height: 14px; } } @layer site { :where(.site-shell.page-docs) { --color-text-secondary: light-dark(#6e6e73, #eceaffdb); --color-text-tertiary: light-dark(#86868b, #c6cbdeeb); } :where(.site-shell.page-docs) .guide-main { color: light-dark(var(--color-text), #d3d4e6d6); } :where(.site-shell.page-docs) .guide-main :is(h1, h2, h3, h4, h5, h6), :where(.site-shell.page-docs) .guide-abstract { color: light-dark(var(--color-text), #cbcad6); } :where(.site-shell.page-docs) .docs-article a { color: light-dark(var(--color-link), #ffffff); } :where(.site-shell.page-docs) .backdrop { background: light-dark(transparent, #040b10d1); } :where(.site-shell.page-docs) .backdrop span:nth-child(1) { --c: light-dark(rgba(128, 72, 235, 0.30), rgba(112, 82, 235, 0.28)); } :where(.site-shell.page-docs) .backdrop span:nth-child(2) { --c: light-dark(rgba(58, 100, 230, 0.20), rgba(72, 92, 235, 0.16)); } :where(.site-shell.page-docs) .docs-shell { padding-bottom: 96px; } :where(.site-shell) .docs-shell::after { content: ""; position: fixed; inset: var(--chrome-height) 0 0; z-index: -1; pointer-events: none; background: light-dark(rgba(255, 255, 255, 0.72), rgba(10, 11, 28, 0.52)); } :where(.site-shell.page-docs) .docs-article { margin-left: 0; width: 100%; max-width: none; } @media (min-width: 1280px) and (max-width: 1379px) { :where(.site-shell.page-docs) .guide { width: min(1181px, calc(100vw - 164px)); } } @media (min-width: 1380px) { :where(.site-shell.page-docs) .guide { width: 1181px; grid-template-columns: 200px 40px minmax(0, 1fr) 32px 169px; } :where(.site-shell.page-docs) .guide-aside { grid-column: 5; width: auto; margin-left: 0; } } @media (max-width: 1279px) { :where(.site-shell.page-docs) .guide { grid-template-columns: 200px 40px minmax(0, 1fr); } :where(.site-shell) .docs-toc { display: none; } } @media (max-width: 1023px) { :where(.site-shell.page-docs) .guide { grid-template-columns: minmax(0, 1fr); } } :where(.site-shell) .docs-shell ~ .footer .footer-inner { width: var(--width-content); max-width: 100%; padding: 0; } @media (min-width: 1280px) and (max-width: 1379px) { :where(.site-shell) .docs-shell ~ .footer .footer-inner { width: min(1181px, calc(100vw - 164px)); } } @media (min-width: 1380px) { :where(.site-shell) .docs-shell ~ .footer .footer-inner { width: 1181px; } } @media (max-width: 1023px) { :where(.site-shell) .docs-shell ~ .footer .footer-inner { width: var(--width-content-medium); } } @media (max-width: 734px) { :where(.site-shell) .docs-shell ~ .footer .footer-inner { width: 87.5%; } } :where(.site-shell) .docs-shell .guide-nav { top: var(--chrome-height); max-height: calc(100vh - var(--chrome-height)); } :where(.site-shell) .docs-shell .guide-aside { top: calc(var(--chrome-height) + 20px); } :where(.site-shell) .docs-navigator > ul { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } @media (min-width: 1024px) { :where(.site-shell) .docs-navigator ul ul :is(a, summary) { padding-left: 30px; } :where(.site-shell) .docs-navigator ul ul summary::before { left: 15px; } :where(.site-shell) .docs-navigator ul ul ul a { padding-left: 30px; } } :where(.site-shell) .docs-navigator a, :where(.site-shell) .docs-navigator summary { transition: color 0.08s ease; color: light-dark(var(--color-text-secondary), var(--color-text-tertiary)); } :where(.site-shell) .docs-navigator .is-open > summary { color: light-dark(var(--color-text), #ffffff); } :where(.site-shell) .docs-navigator a.is-active, :where(.site-shell) .docs-navigator a:hover, :where(.site-shell) .docs-navigator summary:hover { color: light-dark(#5f1fe6, #ffffff); } :where(.site-shell) .docs-article h2, :where(.site-shell) .docs-article h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; scroll-margin-top: calc(var(--chrome-height) + 22px); } :where(.site-shell) .heading-permalink { order: 2; flex: none; width: 18px; height: 18px; font-size: 0; background: var(--color-text-secondary); -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / 18px 18px no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / 18px 18px no-repeat; text-shadow: none; opacity: 0; transition: opacity 0.15s ease; } :where(.site-shell) .docs-article h2:hover .heading-permalink, :where(.site-shell) .docs-article h3:hover .heading-permalink, :where(.site-shell) .heading-permalink:focus-visible { opacity: 1; } :where(.site-shell) .heading-permalink:hover { background: var(--color-text); } @media (hover: none) { :where(.site-shell) .heading-permalink { opacity: 0.55; } } :where(.site-shell) .docs-article { overflow-wrap: anywhere; } :where(.site-shell) .docs-article :not(pre) > code { font-size: 0.88em; padding: 0.12em 0.42em; border-radius: 6px; white-space: normal; background: light-dark(rgba(var(--accent-rgb), 0.07), rgba(38, 43, 79, 0.65)); color: light-dark(#3b2a72, #eae5f2); -webkit-box-decoration-break: clone; box-decoration-break: clone; } :where(.site-shell) .docs-article a > code { color: inherit; } :where(.site-shell) .docs-article th, :where(.site-shell) .docs-article td { overflow-wrap: normal; vertical-align: top; border-color: light-dark(var(--color-separator), #737593); } :where(.site-shell) .docs-article th { border-color: var(--color-text); } :where(.site-shell) .docs-article td > code, :where(.site-shell) .docs-article th > code { white-space: nowrap; } :where(.site-shell) .docs-callout { --note-border: var(--color-accent); --note-bg: color-mix(in oklch, var(--color-accent) 8%, transparent); margin: calc(var(--space-block) * 2) 0; padding: 16px 18px; border: 1px solid color-mix(in oklch, var(--note-border) 50%, transparent); border-radius: var(--radius-block); background: var(--note-bg); color: var(--color-text); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); line-height: 1.52944; } :where(.site-shell) .docs-callout-tip { --note-border: var(--color-tip); --note-bg: var(--color-tip-bg); } :where(.site-shell) .docs-callout-warning { --note-border: var(--color-caution); --note-bg: var(--color-caution-bg); } :where(.site-shell) .docs-callout-danger { --note-border: var(--color-error); --note-bg: var(--color-error-bg); } :where(.site-shell) .docs-callout > p { margin: 0 0 var(--space-block); } :where(.site-shell) .docs-callout > :last-child { margin-bottom: 0; } :where(.site-shell) .docs-callout:not(.docs-callout-untitled) > p:first-child { font-weight: 600; color: var(--note-border); margin-bottom: 0.4em; } :where(.site-shell) .docs-callout a { color: var(--color-link); } :where(.site-shell) .docs-callout :not(pre) > code { background: color-mix(in oklch, var(--note-border) 12%, transparent); color: inherit; } :where(.site-shell.page-docs) .docs-article :is(ul, ol):not(nav *, .docs-toc-mobile *) { margin-inline-start: 0; padding-inline-start: 28px; } :where(.site-shell.page-docs) .docs-article li:not(nav *, .docs-toc-mobile *) + li { margin-top: 6px; } :where(.site-shell.page-docs) .docs-article li:not(nav *, .docs-toc-mobile *) > p { margin: 0; } :where(.site-shell.page-docs) .docs-article li:not(nav *, .docs-toc-mobile *) > :is(p + p, ul, ol, pre, .docs-callout, .docs-tabs) { margin-top: 6px; margin-bottom: 0; } :where(.site-shell) .docs-article pre { padding: 18px 16px; font-size: 14px; line-height: 1.6; background: light-dark(#f5f5f9, rgba(0, 0, 0, 0.3)); box-shadow: inset 0 0 0 1px light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.07)); } :where(.site-shell) .docs-article pre.phiki { color: light-dark(#2f4153, #efeffb); } :where(.site-shell) .docs-article .phiki .token[style] { color: light-dark(var(--phiki-light-color), var(--phiki-dark-color)); } :where(.site-shell) .docs-article .phiki .line { display: block; } :where(.site-shell) .docs-tabs { display: flex; flex-wrap: wrap; margin: calc(var(--space-block) * 2) 0; border-radius: var(--radius-block); overflow: hidden; contain: inline-size; background: light-dark(#f5f5f9, rgba(0, 0, 0, 0.3)); box-shadow: inset 0 0 0 1px light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.07)); } :where(.site-shell) .docs-tab-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :where(.site-shell) .docs-tab { margin: 0; padding: 10px 16px 9px; cursor: pointer; font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-separator); transition: color 0.08s ease, box-shadow 0.08s ease; } :where(.site-shell) .docs-tab:hover { color: var(--color-text); } :where(.site-shell) .docs-tab-input:checked + .docs-tab { color: var(--color-accent); box-shadow: inset 0 -2px 0 var(--color-accent); } :where(.site-shell) .docs-tab-input:focus-visible + .docs-tab { outline: 2px solid var(--color-accent); outline-offset: -2px; } :where(.site-shell) .docs-tab-fill { flex: 1; border-bottom: 1px solid var(--color-separator); } :where(.site-shell) .docs-tab-panel { display: none; flex-basis: 100%; min-width: 0; } :where(.site-shell) .docs-tab-input:nth-of-type(1):checked ~ .docs-tab-panel:nth-of-type(1), :where(.site-shell) .docs-tab-input:nth-of-type(2):checked ~ .docs-tab-panel:nth-of-type(2), :where(.site-shell) .docs-tab-input:nth-of-type(3):checked ~ .docs-tab-panel:nth-of-type(3), :where(.site-shell) .docs-tab-input:nth-of-type(4):checked ~ .docs-tab-panel:nth-of-type(4), :where(.site-shell) .docs-tab-input:nth-of-type(5):checked ~ .docs-tab-panel:nth-of-type(5), :where(.site-shell) .docs-tab-input:nth-of-type(6):checked ~ .docs-tab-panel:nth-of-type(6), :where(.site-shell) .docs-tab-input:nth-of-type(7):checked ~ .docs-tab-panel:nth-of-type(7), :where(.site-shell) .docs-tab-input:nth-of-type(8):checked ~ .docs-tab-panel:nth-of-type(8) { display: block; } :where(.site-shell) .docs-article .docs-tab-panel > pre { margin: 0; border-radius: 0; box-shadow: none; background: transparent; } :where(.site-shell) .docs-article .docs-pager { margin-top: 56px; } :where(.site-shell) .docs-toc { max-height: calc(100vh - var(--chrome-height) - 40px); overflow-y: auto; } :where(.site-shell) .docs-toc .toc a { text-shadow: none; color: light-dark(var(--color-text-secondary), var(--color-text-tertiary)); } :where(.site-shell) .docs-toc .toc a:hover { color: light-dark(var(--color-text), #ffffff); } :where(.site-shell) .docs-toc .toc a.is-active { color: light-dark(var(--color-text), #ffffff); border-left-color: var(--color-accent); } :where(.site-shell) .docs-toc-meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-separator); display: grid; gap: 6px; font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-tertiary); } :where(.site-shell) .docs-toc-meta a { color: inherit; text-shadow: none; } :where(.site-shell) .docs-toc-mobile { display: none; } @media (max-width: 1279px) { :where(.site-shell) .docs-toc-mobile { display: block; margin: 24px 0 32px; padding: 12px 16px; border-radius: 12px; background: light-dark(rgba(var(--accent-rgb), 0.05), rgba(255, 255, 255, 0.05)); } :where(.site-shell) .docs-toc-mobile summary { cursor: pointer; font: 600 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); } :where(.site-shell) .docs-toc-mobile ul { list-style: none; margin: 10px 0 0; padding: 0; } :where(.site-shell) .docs-toc-mobile li { margin: 0; } :where(.site-shell) .docs-toc-mobile li + li { margin-top: 0; } :where(.site-shell) .docs-toc-mobile a { display: block; padding: 5px 0; font-size: 14px; letter-spacing: var(--track-14); color: var(--color-text-secondary); text-decoration: none; text-shadow: none; } } :where(.site-shell) .docs-drawer-version { display: none; } @media (max-width: 1023px) { :where(.site-shell) .docs-drawer-head { display: block; height: auto; padding: 14px 20px 4px; } :where(.site-shell) .docs-drawer-sections { display: flex; height: 40px; padding: 3px; border-radius: 999px; background: light-dark(rgba(var(--accent-rgb), 0.06), rgba(255, 255, 255, 0.07)); box-shadow: inset 0 0 0 1px var(--color-hairline); } :where(.site-shell) .docs-drawer-sections a { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 999px; min-height: 0; margin: 0; padding: 0; overflow: visible; font: 500 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); text-decoration: none; text-shadow: none; white-space: nowrap; } :where(.site-shell) .docs-drawer-sections a.is-current { background: var(--color-text); color: var(--color-bg); } :where(.site-shell) .docs-drawer-version { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 20px 6px; padding: 8px 4px 14px; border-bottom: 1px solid var(--color-hairline); font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text-secondary); } :where(.site-shell) .docs-version-disclosure { position: relative; } :where(.site-shell) .docs-version-disclosure > summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; height: 36px; min-height: 0; margin: 0; padding: 0 12px; overflow: visible; border: 1px solid var(--field-border); border-radius: 10px; font: 400 13px/1 var(--font-mono); letter-spacing: 0; color: var(--color-text); cursor: pointer; -webkit-tap-highlight-color: transparent; } :where(.site-shell) .docs-version-disclosure > summary::-webkit-details-marker, :where(.site-shell) .docs-version-disclosure > summary::marker { display: none; content: ""; } :where(.site-shell) .docs-version-disclosure > summary::before { display: none; content: none; } :where(.site-shell) .docs-drawer-version .topbar-panel a { min-height: 0; margin: 0; padding: 7px 10px; overflow: visible; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); } :where(.site-shell) .docs-drawer-version .topbar-panel a.is-current { font-weight: 600; } :where(.site-shell) .docs-version-disclosure > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.6; transition: transform 0.15s ease; } :where(.site-shell) .docs-version-disclosure[open] > summary::after { transform: translateY(2px) rotate(225deg); } :where(.site-shell) .docs-version-disclosure[open] > .topbar-panel { display: block; left: auto; right: 0; top: calc(100% + 6px); z-index: 2; } :where(.site-shell) .navigator-toggle:checked ~ .docs-shell .docs-navigator { display: flex; flex-direction: column; } :where(.site-shell) .navigator-toggle:checked ~ .docs-shell .docs-navigator > ul { padding-bottom: 24px; } } @media (max-width: 734px) { :where(.site-shell) .docs-article pre { padding: 14px 16px; font-size: 13px; } :where(.site-shell) .docs-article table { display: block; max-width: 100%; overflow-x: auto; } } :where(.site-shell) .docs-article .heading-permalink { scroll-margin-top: calc(var(--chrome-height) + 22px); } :where(.site-shell) .docs-search-overlay { position: fixed; inset: 0; z-index: 40; padding: 10vh 20px 0; background: light-dark(rgba(10, 11, 28, 0.35), rgba(0, 0, 0, 0.55)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } :where(.site-shell) .docs-search-overlay[hidden] { display: none; } :where(.site-shell) .docs-search-modal { display: flex; flex-direction: column; max-width: 600px; max-height: 60vh; margin: 0 auto; background: var(--color-bg); border: 1px solid var(--color-separator); border-radius: var(--radius-block); box-shadow: 0 20px 50px rgba(10, 10, 25, 0.25); } :where(.site-shell) .docs-search-input-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--color-separator); } :where(.site-shell) .docs-search-input-row:focus-within { border-bottom-color: var(--color-accent); box-shadow: inset 0 -1px 0 var(--color-accent); } :where(.site-shell) .docs-search-input-row input { flex: 1; margin: 0; padding: 0; border: 0; outline: none; background: transparent; font: 400 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); color: var(--color-text); } :where(.site-shell) .docs-search-input-row kbd, :where(.site-shell) .docs-search-foot kbd { font: 500 11px/1 var(--font-mono); padding: 3px 5px; border: 1px solid var(--color-separator); border-radius: 4px; color: var(--color-text-secondary); } :where(.site-shell) .docs-search-results { overflow-y: auto; padding: 8px 0; } :where(.site-shell) .docs-search-section { padding: 10px 16px 4px; font: 600 var(--text-12) var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); } :where(.site-shell) .docs-search-result { display: block; padding: 7px 16px; text-decoration: none; text-shadow: none; } :where(.site-shell) .docs-search-result.active, :where(.site-shell) .docs-search-result:hover { background: color-mix(in oklch, var(--color-accent) 10%, transparent); } :where(.site-shell) .docs-search-result-title { display: block; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); } :where(.site-shell) .docs-search-result-sub { display: block; font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where(.site-shell) .docs-search-empty { padding: 30px 16px; text-align: center; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text-secondary); } :where(.site-shell) .docs-search-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--color-separator); font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-tertiary); } } @layer site { :where(.site-shell.page-download) .app-page { max-width: 1060px; } :where(.site-shell.page-download) .app-page ~ .footer .footer-inner, :where(.site-shell.page-checkout) .app-page ~ .footer .footer-inner { max-width: 1060px; } :where(.site-shell.page-download) .app-detail { padding-top: 36px; } :where(.site-shell.page-download) .form { max-width: none; } :where(.site-shell.page-download) .form .btn-block { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--field-height); border-radius: var(--field-radius); margin-top: 8px; } :where(.site-shell.page-download) .form .btn-block svg { flex: none; width: 22px; height: 22px; } :where(.site-shell.page-download) .app-detail-aside { position: static; } :where(.site-shell.page-download) .app-summary code { overflow-wrap: anywhere; } :where(.site-shell.page-download) .app-summary > p + p:not(.app-action-row), :where(.site-shell.page-download) .app-summary > p + .form { margin-top: 10px; } :where(.site-shell.page-download) .app-summary-wide { grid-column: 1 / -1; } :where(.site-shell.page-download) .app-disclosure { padding: 0; } :where(.site-shell.page-download) .app-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; list-style: none; cursor: pointer; font: 500 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); color: var(--color-text); } :where(.site-shell.page-download) .app-disclosure > summary::before { content: "Show the command and syntax"; order: 1; margin-left: auto; font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text-secondary); } :where(.site-shell.page-download) .app-disclosure[open] > summary::before { content: "Hide"; } :where(.site-shell.page-download) .app-disclosure > summary::-webkit-details-marker, :where(.site-shell.page-download) .app-disclosure > summary::marker { display: none; content: ""; } :where(.site-shell.page-download) .app-disclosure > summary::after { content: ""; flex: none; width: 12px; height: 12px; background: var(--color-text-tertiary); -webkit-mask: var(--chevron-mask) center / 12px 12px no-repeat; mask: var(--chevron-mask) center / 12px 12px no-repeat; order: 2; transform: rotate(90deg); transition: transform 0.2s ease; } :where(.site-shell.page-download) .app-disclosure[open] > summary::after { transform: rotate(-90deg); } :where(.site-shell.page-download) .app-disclosure > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-m); } :where(.site-shell.page-download) .app-disclosure-body { padding: 16px 20px 20px; border-top: 1px solid var(--color-separator); } :where(.site-shell.page-download) .app-disclosure-body > p { font-size: 14px; letter-spacing: var(--track-14); margin: 0; } @media (max-width: 734px) { :where(.site-shell.page-download) .app-disclosure > summary::before { display: none; } :where(.site-shell.page-download) .token-field { flex-direction: column; } :where(.site-shell.page-download) .token-field code { border-right: 1px solid var(--color-separator); border-bottom: 0; border-radius: var(--radius-row) var(--radius-row) 0 0; padding: 12px; } :where(.site-shell.page-download) .token-field .btn-toolbar { width: 100%; border-radius: 0 0 var(--radius-row) var(--radius-row); padding: 10px 14px; font: 400 15px/1.33337 var(--font-text); letter-spacing: var(--track-14); } :where(.site-shell.page-download) .token-field code { white-space: pre; overflow-wrap: normal; } :where(.site-shell.page-download) .app-summary .form-compact .field > label:not(.check) { font: 600 var(--text-14) var(--font-text); letter-spacing: var(--track-14); } } :where(.site-shell.page-download) .api-ref-heading { margin: 24px 0 6px; font: 600 var(--text-14) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); } :where(.site-shell.page-download) .api-params { margin: 0; border-bottom: 1px solid var(--color-separator); } :where(.site-shell.page-download) .api-param { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-top: 1px solid var(--color-separator); } :where(.site-shell.page-download) .api-param dt { display: flex; align-items: center; gap: 10px; margin: 0; } :where(.site-shell.page-download) .api-param dt code { font: 500 14px/1.43 var(--font-mono); color: var(--color-text); } :where(.site-shell.page-download) .api-param-tag { font: 600 10.5px/1 var(--font-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-tertiary); } :where(.site-shell.page-download) .api-param-tag.is-required { color: var(--color-link); } :where(.site-shell.page-download) .api-param dd { margin: 0; font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text-secondary); } :where(.site-shell.page-download) .app-disclosure-body :is(dd, p) code { padding: 1px 6px; border-radius: 5px; background: light-dark(rgba(var(--accent-rgb), 0.07), rgba(255, 255, 255, 0.08)); font-size: 13px; color: var(--color-text); overflow-wrap: anywhere; } :where(.site-shell.page-download) .app-disclosure-body > p + p { margin-top: 18px; } :where(.site-shell.page-download) .app-disclosure-body > .api-ref-endpoint { margin-top: 2px; } :where(.site-shell.page-download) .app-disclosure-body > .api-ref-endpoint + p { margin-top: 6px; color: var(--color-text-secondary); } @media (max-width: 734px) { :where(.site-shell.page-download) .api-param { grid-template-columns: minmax(0, 1fr); } } :where(.site-shell.page-checkout) .app-page { max-width: 1060px; } :where(.site-shell.page-checkout) .form { max-width: none; } :where(.site-shell.page-checkout) .form > .field-help + .field { margin-top: 20px; } :where(.site-shell.page-checkout) .form .btn-block + .field-help { margin-top: 12px; } :where(.site-shell.page-checkout) .form .btn-block { display: inline-flex; align-items: center; justify-content: center; min-height: var(--field-height); border-radius: var(--field-radius); } :where(.site-shell.page-checkout) .form .segmented { max-width: 340px; } :where(.site-shell.page-checkout) .checkout-product { display: flex; flex-direction: column; gap: 3px; margin: 0 0 14px; font: 600 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); color: var(--color-text); } :where(.site-shell.page-checkout) .checkout-product small { font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-secondary); } :where(.site-shell.page-checkout) .app-summary .summary-rows > li { align-items: baseline; flex-wrap: nowrap; padding: 11px 0; } :where(.site-shell.page-checkout) .app-summary .summary-rows > li > .summary-row-text { flex: none; } :where(.site-shell.page-checkout) .app-summary .summary-rows > li:first-child { padding-top: 11px; border-top: 1px solid var(--color-separator); } :where(.site-shell.page-checkout) .summary-row-note { flex: 1 1 auto; min-width: 0; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); text-align: right; } :where(.site-shell.page-checkout) .app-summary .summary-rows + .field-help { margin-top: 10px; } :where(.site-shell.page-checkout) .checkout-total { display: flex; align-items: center; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; margin: 18px -20px -20px; padding: 16px 20px; border-top: 1px solid var(--color-separator); border-radius: 0 0 11px 11px; background: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.04)); } :where(.site-shell.page-checkout) .checkout-total-value { font: 600 var(--text-32) var(--font-display); letter-spacing: var(--track-32); color: var(--color-text); } :where(.site-shell) .app-action-stack { display: grid; width: fit-content; max-width: 100%; } :where(.site-shell) .app-action-stack .btn-toolbar { width: 100%; } :where(.site-shell) .app-summary .app-action-stack + .field-help { margin-top: 12px; } @media (max-width: 734px) { :where(.site-shell) .app-action-stack { width: auto; } } :where(.site-shell) .price-card { --frost-veil: light-dark(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.05)); --frost-edge: light-dark(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.10)); } :where(.site-shell) .price-card::before { --frost-veil: light-dark(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.07)); --frost-filter: saturate(180%) brightness(1.03) blur(20px); --frost-edge: light-dark(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.11)); --frost-catch: light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.16)); --frost-glow: light-dark(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05)); --frost-glow-size: 32px; } :where(.site-shell) .price-card.is-featured::before { --frost-veil: light-dark(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.09)); box-shadow: inset 0 0 0 1px light-dark(var(--color-accent), rgba(255, 255, 255, 0.5)), inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.2)), inset 0 0 32px light-dark(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05)), 0 0 40px light-dark(rgba(var(--accent-rgb), 0.16), rgba(255, 255, 255, 0.07)); } :where(.site-shell) .price-card-wide { flex-direction: row; align-items: center; gap: 40px 64px; margin-top: 24px; padding: 36px 40px; } :where(.site-shell) .price-lead { flex: 0 0 320px; display: flex; flex-direction: column; } :where(.site-shell) .price-lead .price-desc { margin-bottom: 24px; } :where(.site-shell) .price-lead .btn { margin-top: 0; } :where(.site-shell) .price-perks { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 1fr; gap: 20px; list-style: none; margin: 0; padding: 0; } :where(.site-shell) .price-perks li { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 16px; align-content: start; margin: 0; } :where(.site-shell) .price-perks li + li { margin-top: 0; } :where(.site-shell) .price-perk-icon { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent); background: light-dark(rgba(var(--accent-rgb), 0.09), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 0 0 1px light-dark(rgba(var(--accent-rgb), 0.16), rgba(255, 255, 255, 0.12)); } :where(.site-shell) .price-perk-icon svg { width: 22px; height: 22px; } :where(.site-shell) .price-perks strong { align-self: end; font: 600 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); color: var(--color-text); } :where(.site-shell) .price-perks strong:last-child { grid-row: 1 / 3; align-self: center; } :where(.site-shell) .price-perks span:not(.price-perk-icon) { font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text-secondary); } @media (max-width: 1199px) { :where(.site-shell) .price-card-wide { flex-direction: column; align-items: stretch; gap: 32px; } :where(.site-shell) .price-perks { grid-template-columns: 1fr 1fr; gap: 28px 40px; } :where(.site-shell) .price-lead { flex-basis: auto; } :where(.site-shell) .price-lead .price-desc { max-width: 56ch; } :where(.site-shell) .price-lead .btn { align-self: flex-start; min-width: 260px; } } @media (max-width: 734px) { :where(.site-shell) .price-card-wide { padding: 32px 28px; } :where(.site-shell) .price-perks { grid-template-columns: 1fr; gap: 22px; } :where(.site-shell) .price-lead .btn { align-self: stretch; } } :where(.site-shell.page-pricing) { --color-text-tertiary: light-dark(#86868b, #a4a2c8); } :where(.site-shell.page-pricing) .footnotes { color: light-dark(#5c5c63, var(--color-text-tertiary)); } :where(.site-shell.page-pricing) .price-features strong { font-weight: 600; color: var(--color-text); } :where(.site-shell.page-pricing) .price-card.is-featured { box-shadow: none; } @media (min-width: 735px) and (max-width: 1068px) { :where(.site-shell.page-pricing) .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } :where(.site-shell) .compare th, :where(.site-shell) .compare td { border-width: 1px 0; padding: 13px 12px; } :where(.site-shell) .compare thead th { vertical-align: bottom; padding: 14px 12px; border-top: none; border-bottom-color: var(--color-text); } :where(.site-shell) .compare thead th:first-child { width: 28%; } :where(.site-shell) .compare thead th span { display: block; font: 600 var(--text-17-tight) var(--font-display); letter-spacing: var(--track-17); } :where(.site-shell) .compare thead th small { display: block; margin-top: 3px; font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-tertiary); } :where(.site-shell) .compare tbody td:first-child { color: var(--color-text); padding-left: 0; } :where(.site-shell) .compare th:not(:first-child), :where(.site-shell) .compare td:not(:first-child) { text-align: center; } :where(.site-shell) .compare tbody td:not(:first-child) { color: var(--color-text-secondary); } :where(.site-shell) .compare .compare-group th { text-align: left; padding: 34px 0 8px; font: 600 var(--text-12) var(--font-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-tertiary); border-top: none; } :where(.site-shell) .compare .is-featured { background: light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.045)); } :where(.site-shell) .compare tbody td.is-featured { color: light-dark(#3a3a46, #d8d6ee); } :where(.site-shell) .compare thead th.is-featured { border-radius: 10px 10px 0 0; } :where(.site-shell) .compare .no { color: var(--color-text-tertiary); } :where(.site-shell) .compare .yes::before { content: ""; display: inline-block; width: 16px; height: 16px; vertical-align: -3px; background: var(--color-accent); -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } @media (max-width: 734px) { :where(.site-shell) .compare th:first-child, :where(.site-shell) .compare td:first-child { position: static; background: transparent; box-shadow: none; } :where(.site-shell.page-pricing) .table-wrap { margin-left: -7.1429%; margin-right: -7.1429%; padding: 0 0 0 6.25vw; scroll-padding-left: 6.25vw; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); } :where(.site-shell) .compare { min-width: 640px; } :where(.site-shell) .compare thead th:first-child { width: 132px; } :where(.site-shell) .compare tbody td:last-child, :where(.site-shell) .compare thead th:last-child { padding-right: calc(6.25vw + 40px); } :where(.site-shell) .compare th, :where(.site-shell) .compare td { padding: 12px 10px; } :where(.site-shell) .compare tbody td:first-child { padding-left: 8px; } :where(.site-shell) .compare thead th:first-child { width: auto; } :where(.site-shell) .compare .compare-group th { padding: 26px 8px 6px; } } :where(.site-shell.page-blog), :where(.site-shell.page-blog-post) { --color-text-secondary: light-dark(#6f6987, #aaa3ea); --color-separator: light-dark(#d9d9e3, rgba(255, 255, 255, 0.16)); } :where(.site-shell.page-blog) .blog, :where(.site-shell.page-blog-post) .article { width: 765px; max-width: 100%; margin: 0 auto; padding: 52px 0 96px; } :where(.site-shell.page-blog) .blog > *, :where(.site-shell.page-blog-post) .article > * { width: 100%; } :where(.site-shell.page-blog) .footer-inner, :where(.site-shell.page-blog-post) .footer-inner { width: 765px; max-width: 100%; padding: 0; } :where(.site-shell) .blog-sheet, :where(.site-shell) .article-sheet { padding: 48px 56px 52px; } :where(.site-shell) .blog-head { margin-bottom: 28px; } :where(.site-shell) .blog-head h1 { font: 700 var(--text-48) var(--font-display); letter-spacing: var(--track-48); margin: 0 0 8px; } :where(.site-shell) .blog-lede { font: 400 var(--text-21) var(--font-display); letter-spacing: var(--track-21); color: var(--color-text-secondary); margin: 0; } :where(.site-shell) .blog-head h1, :where(.site-shell) .blog-lede { position: relative; color: light-dark(rgb(12 12 12 / 20%), rgba(255, 255, 255, 0.3)); } :where(.site-shell) .blog-head h1::before, :where(.site-shell) .blog-lede::before { content: attr(data-text); position: absolute; inset: 0; z-index: -1; pointer-events: none; color: light-dark(#606060, #aaaaaa); mix-blend-mode: var(--head-blend); } :where(.site-shell) .blog-featured { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 8px; padding-bottom: 32px; color: var(--color-text); text-decoration: none; text-shadow: none; border-bottom: 1px solid var(--color-separator); } :where(.site-shell) .blog-featured-media .media-placeholder { aspect-ratio: 16 / 9; border-radius: var(--radius-figure); } :where(.site-shell) .blog-featured-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-figure); } :where(.site-shell) .article-related-thumb { overflow: hidden; } :where(.site-shell) .article-related-item:not(:has(> .article-related-thumb)) { grid-template-columns: minmax(0, 1fr); } :where(.site-shell) .article-related-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } :where(.site-shell) .blog-featured-title { display: block; font: 700 var(--text-28) var(--font-display); letter-spacing: var(--track-28); margin: 0 0 10px; } :where(.site-shell) .blog-featured:hover .blog-featured-title { text-decoration: underline; } :where(.site-shell) .blog-featured-desc { font: 400 var(--text-17) var(--font-text); letter-spacing: var(--track-17); color: var(--color-text-secondary); margin: 0 0 12px; } :where(.site-shell) .blog-item-desc { font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text-secondary); margin: 0 0 8px; } :where(.site-shell.page-blog) .article-related-item:last-child { border-bottom: none; } :where(.site-shell) .blog-feed { margin: 24px 0 0; font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text-secondary); } :where(.site-shell.page-blog-post) .article-figure-wide { width: calc(100% + 64px); margin-left: -32px; margin-right: -32px; } :where(.site-shell.page-blog-post) .article-figure-wide figcaption { width: auto; padding: 0 32px; } :where(.site-shell.page-blog-post) .article-category a { color: inherit; text-decoration: none; text-shadow: none; } :where(.site-shell.page-blog-post) .article-header h1 { font: 600 var(--text-40) var(--font-display); letter-spacing: var(--track-40); } :where(.site-shell.page-blog-post) .article-subhead { font: 400 var(--text-21-loose) var(--font-display); letter-spacing: var(--track-21); margin-top: 16px; } :where(.site-shell.page-blog-post) .article-body { font: 400 var(--text-17) var(--font-text); letter-spacing: var(--track-17); } :where(.site-shell.page-blog-post) :is(.article-body, .article-subhead) { color: light-dark(var(--color-text), rgba(255, 255, 255, 0.9)); } :where(.site-shell.page-blog-post) .article-body :is(h2, h3, h4) { color: var(--color-text); } :where(.site-shell.page-blog-post) .article-body h2 { font: 600 var(--text-24) var(--font-display); letter-spacing: var(--track-24); margin: 48px 0 14px; } :where(.site-shell.page-blog-post) .article-body h2:first-child { margin-top: 8px; } :where(.site-shell.page-blog-post) .article-body h3 { font: 600 var(--text-19) var(--font-display); letter-spacing: var(--track-19); margin: 32px 0 10px; } :where(.site-shell.page-blog-post) .article-body h4 { font: 600 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); margin: 24px 0 8px; } :where(.site-shell.page-blog-post) .article-body :is(ul, ol) { margin: 16px 0 1.4706em; padding-inline-start: 28px; } :where(.site-shell.page-blog-post) .article-body li + li { margin-top: 6px; } :where(.site-shell.page-blog-post) .article-body li > p { margin: 0; } :where(.site-shell.page-blog-post) .article-body li > :is(ul, ol) { margin: 6px 0 0; } :where(.site-shell.page-blog-post) .article-body img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-figure); } :where(.site-shell.page-blog-post) .article-body > img, :where(.site-shell.page-blog-post) .article-body > p:has(> img:only-child) { margin: var(--space-component) 0; } :where(.site-shell.page-blog-post) .article-body > img:first-child, :where(.site-shell.page-blog-post) .article-body > p:first-child:has(> img:only-child) { margin-top: 0; } :where(.site-shell.page-blog-post) .article-body hr { margin: 48px 0; } :where(.site-shell.page-blog-post) .article-related h2 { font-weight: 600; } :where(.site-shell.page-blog-post) .article-body :not(pre) > code { font-size: 0.88em; padding: 0.12em 0.42em; border-radius: 6px; white-space: normal; background: light-dark(rgb(117 105 171 / 8%), rgb(109 104 177 / 23%)); color: light-dark(#321e7d, #ffffff); -webkit-box-decoration-break: clone; box-decoration-break: clone; } :where(.site-shell.page-blog-post) .article-body pre { font-size: 14px; line-height: 1.6; padding: 18px 16px; margin: 0 0 1.4211em; background: light-dark(#f5f5f9, rgba(0, 0, 0, 0.3)); box-shadow: inset 0 0 0 1px light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.07)); } :where(.site-shell.page-blog-post) .article-figure .media-placeholder { aspect-ratio: 16 / 9; } :where(.site-shell) .section-heading { margin-top: 0; } :where(.site-shell) .price-head { display: flex; align-items: center; justify-content: space-between; } :where(.site-shell.page-blog) .article-related-item, :where(.site-shell.page-blog-post) .article-related-item { text-shadow: none; } @media (max-width: 1068px) { :where(.site-shell.page-blog) .blog, :where(.site-shell.page-blog-post) .article, :where(.site-shell.page-blog) .footer-inner, :where(.site-shell.page-blog-post) .footer-inner { width: var(--width-content-medium); } :where(.site-shell) .blog-sheet, :where(.site-shell) .article-sheet { padding: 40px 44px 44px; } :where(.site-shell.page-blog-post) .article-figure-wide { width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; } :where(.site-shell.page-blog-post) .article-figure-wide figcaption { padding: 0 20px; } } @media (max-width: 734px) { :where(.site-shell.page-blog) .blog, :where(.site-shell.page-blog-post) .article { width: 100%; padding: 32px 0 64px; } :where(.site-shell.page-blog) .footer-inner, :where(.site-shell.page-blog-post) .footer-inner { width: auto; padding: 0 28px; } :where(.site-shell) .blog-head { padding: 0 28px; margin-bottom: 24px; } :where(.site-shell) .blog-head h1 { font: 700 var(--text-32) var(--font-display); letter-spacing: var(--track-32); } :where(.site-shell) .blog-sheet, :where(.site-shell) .article-sheet { padding: 32px 28px 40px; } :where(.site-shell.page-blog-post) .article-figure-wide { width: 100%; margin-left: 0; margin-right: 0; } :where(.site-shell.page-blog-post) .article-figure-wide figcaption { padding: 0; } :where(.site-shell.page-blog) .article-related-item, :where(.site-shell.page-blog-post) .article-related-item { grid-template-columns: 1fr; gap: 12px; } :where(.site-shell.page-blog-post) .article-header h1 { font-size: 32px; line-height: 1.125; letter-spacing: var(--track-32); } :where(.site-shell.page-blog-post) .article-body h2 { font: 600 var(--text-21) var(--font-display); letter-spacing: var(--track-21); margin-top: 40px; } :where(.site-shell.page-blog-post) .article-body :is(ul, ol) { padding-inline-start: 22px; } :where(.site-shell.page-blog-post) .article-body hr { margin: 40px 0; } } :where(.site-shell) .styleguide { max-width: 864px; margin: 0 auto; padding: 48px 22px 80px; } :where(.site-shell) .styleguide .docs-article, :where(.site-shell) .styleguide-head { max-width: none; margin: 0; } :where(.site-shell) .styleguide-head { margin-bottom: 40px; } :where(.site-shell) .styleguide-head h1 { font: 700 var(--text-headline) var(--font-display); letter-spacing: var(--track-headline); margin: 8px 0 12px; } :where(.site-shell) .error-numeral { font: 700 160px/1 var(--font-display); letter-spacing: -0.03em; margin: 0 0 8px; color: var(--color-text); opacity: 0.08; } @media (max-width: 734px) { :where(.site-shell) .error-numeral { font-size: 112px; } } :where(.site-shell.page-login) .login-card .id-copy { font-style: italic; color: var(--color-text-secondary); } :where(.site-shell.page-login) .login-note { margin-top: 20px; font: 400 var(--text-14) var(--font-text); letter-spacing: var(--track-14); } :where(.site-shell.page-login) .login-turnstile, :where(.site-shell.page-contact-sales) .login-turnstile { width: 100%; margin: 20px 0 0; } :where(.site-shell.page-code) .login { text-align: center; } :where(.site-shell.page-code) .check { justify-content: center; margin: 0 0 20px; } :where(.site-shell) .seat-list { display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(0, 2.4fr); column-gap: 16px; list-style: none; margin: 0; padding: 0; } :where(.site-shell) .seat { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 12px 16px; align-items: start; margin: 0; padding: 16px 0; border-top: 1px solid var(--color-separator); } :where(.site-shell) .seat-title { display: flex; flex-direction: column; gap: 2px; font: 600 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text); } :where(.site-shell) .seat-title small { font: 400 var(--text-12) var(--font-text); letter-spacing: var(--track-12); color: var(--color-text-secondary); } :where(.site-shell) .seat-count { padding-top: 1px; font: 400 var(--text-14-tight) var(--font-text); letter-spacing: var(--track-14); color: var(--color-text-secondary); white-space: nowrap; } :where(.site-shell) .seat-holders { display: flex; flex-direction: column; gap: 10px; min-width: 0; } :where(.site-shell) .seat-assign { display: flex; gap: 8px; margin: 0; } :where(.site-shell) .seat-assign .input { flex: 1 1 auto; min-width: 0; max-width: 260px; } :where(.site-shell) .seat-holders .app-footnote { margin: 0; padding: 0; } @media (max-width: 734px) { :where(.site-shell) .seat-list { display: block; } :where(.site-shell) .seat { grid-template-columns: minmax(0, 1fr) auto; } :where(.site-shell) .seat-holders { grid-column: 1 / -1; } } :where(.site-shell.page-license) .app-section .toolbar.toolbar-under { padding: 16px 0 0; } :where(.site-shell.page-license) .toolbar-snug { gap: 12px; } :where(.site-shell.page-license) .app-copy { margin: 0 0 12px; } :where(.site-shell.page-overview) .access-level { color: var(--color-text); } :where(.site-shell.page-organizations) .owners-row { min-height: 30px; align-items: center; } :where(.site-shell.page-api-keys) .app-copy { margin: 0 0 8px; } :where(.site-shell.page-api-keys) .key-once { margin-top: 12px; font-size: 14px; color: var(--color-text-tertiary); } :where(.site-shell) .api-syntax dd { overflow-wrap: anywhere; } @media (max-width: 734px) { :where(.site-shell) .api-syntax { grid-template-columns: minmax(0, 1fr); } :where(.site-shell) .api-syntax dt { padding-bottom: 0; } :where(.site-shell) .api-syntax dd { padding-top: 2px; } } :where(.site-shell.page-contact-sales) .app-page { max-width: 760px; } :where(.site-shell) .sales-intake { padding: 36px 0 0; } :where(.site-shell) .sales-intake .app-title { padding-bottom: 8px; } :where(.site-shell) .sales-intake .page-lead { margin: 0; } :where(.site-shell) .sales-intake .form { padding-top: 32px; } :where(.site-shell) .sales-required { text-align: right; margin: 0 0 24px; } :where(.site-shell) .sales-intake .req { color: var(--color-error); } :where(.site-shell) .sales-intake .form-compact .field > label:not(.check) { display: block; } :where(.site-shell) .sales-intake .form-compact .input, :where(.site-shell) .sales-intake .form-compact input[type="text"], :where(.site-shell) .sales-intake .form-compact input[type="email"], :where(.site-shell) .sales-intake .form-compact input[type="url"], :where(.site-shell) .sales-intake .form-compact select, :where(.site-shell) .sales-intake .form-compact textarea { min-height: var(--field-height); font: 400 var(--text-17-tight) var(--font-text); letter-spacing: var(--track-17); padding: 0 16px; border-radius: var(--field-radius); } :where(.site-shell) .sales-intake .form-compact select { background-position: right 16px center; background-size: 20px; padding-right: 40px; } :where(.site-shell) .sales-intake .form-compact textarea { min-height: 148px; padding: 16px; line-height: 1.47059; } :where(.site-shell) .sales-static { display: flex; align-items: center; margin: 0; color: var(--color-text-secondary); } :where(.site-shell) .sales-reply-note { margin: 0 auto 0 0; } :where(.site-shell) .sales-link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; color: var(--color-link); text-shadow: 0 0 7px light-dark(transparent, rgba(255, 255, 255, 0.45)); } :where(.site-shell) .sales-link:hover { text-decoration: underline; } :where(.site-shell.page-contact-sales) .form-actions[hidden] { display: none; } :where(.site-shell.page-contact-sales) .code-entry ~ .field-error { text-align: center; } :where(.site-shell.page-contact-sales) .login-note { margin-top: 20px; } :where(.site-shell.page-contact-sales) .login-card .id-copy, :where(.site-shell.page-contact-sales) .login-card .login-caption { text-wrap: balance; } @media (max-width: 734px) { :where(.site-shell) .sales-intake { padding: 20px 28px 0; } } :where(.site-shell.page-support) main > .container + .container { margin-top: var(--space-section-tight); } } @layer site { :where(.site-shell.page-home) { color-scheme: dark; --leak-opacity: 0.45; --pane-frost: saturate(120%) brightness(1.1) blur(24px); --pane-fade: rgba(255, 255, 255, 0); --leak-filter: saturate(0.82); --column-frost: saturate(140%) brightness(1.03) blur(24px); --band-lift: brightness(1.4) saturate(1.25); --glass-lift: brightness(1.5) saturate(1.5); --glass-lift-hover: brightness(1.8) saturate(1.7); --glass-lift-secondary: brightness(1.2) saturate(1.1); --glass-lift-secondary-hover: brightness(1.45) saturate(1.3); --field-lift: brightness(1.3) saturate(1.1); --head-blend: color-dodge; --wordmark-filter: none; --panel-veil: linear-gradient(180deg, #a184f71e, #32206902); --icon-moon: none; --icon-sun: block; --pane-edge: none; --home-copy-face: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --home-head-face: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --home-head-ink: #eae9ff; --home-copy-ink: #d6d4ff; --home-feature-ink: rgb(205, 202, 233); --home-eyebrow-ink: #a587ff; --home-frost-veil: rgba(255, 255, 255, 0.045); --home-frost-filter: saturate(195%) brightness(0.86) blur(20px); --home-frost-deep: saturate(195%) brightness(0.72) blur(20px); --home-frost-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 32px rgba(255, 255, 255, 0.025); } :where(.site-shell.page-home.has-backdrop) { background: radial-gradient(circle at 50% -373px, hsl(253.76deg 20.65% 59.95% / 7%), transparent 934px), var(--color-bg); background-repeat: no-repeat; } :where(.site-shell.page-home) .backdrop, :where(.site-shell.page-home) .light-bar { display: none; } :where(.site-shell.page-home) .topbar-theme { display: none; } @media (max-width: 899px) { :where(.site-shell.page-home) .topbar-menu-button { margin-left: auto; } } :where(.site-shell) .btn-aurora { --btn-radius: var(--radius-m); --btn-fg: light-dark(#ffffff, #ffffff); --btn-bg: linear-gradient(100deg, light-dark(#4a6ff0, rgba(98, 158, 254, 0.62)), light-dark(#6d2bff, rgba(96, 47, 255, 0.7)) 52%, light-dark(#a63fe2, rgba(179, 106, 255, 0.66))); --btn-bg-hover: linear-gradient(100deg, light-dark(#5a80ff, #629efe), light-dark(#7a3fff, #6a3cff) 52%, light-dark(#b552f0, #b36aff)); --btn-bg-active: var(--btn-bg-hover); --btn-ring: linear-gradient(100deg, light-dark(rgba(255, 255, 255, 0.35), #9fd0ff), light-dark(rgba(255, 255, 255, 0.2), rgba(170, 150, 255, 0.8)) 52%, light-dark(rgba(255, 255, 255, 0.35), #e6b3ff)); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 8px 28px -8px light-dark(rgba(92, 45, 230, 0.55), rgba(122, 77, 255, 0.7)), 0 0 22px light-dark(transparent, rgba(122, 90, 255, 0.28)), inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.25)); text-shadow: 0 0 10px light-dark(transparent, rgba(255, 255, 255, 0.35)); transition: box-shadow 0.2s ease, background 0.2s ease; } :where(.site-shell) .btn-aurora::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--btn-ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } :where(.site-shell) .btn-aurora:hover { box-shadow: 0 10px 34px -8px light-dark(rgba(92, 45, 230, 0.7), rgba(130, 90, 255, 0.85)), 0 0 34px light-dark(rgba(140, 90, 255, 0.25), rgba(140, 110, 255, 0.5)), inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.4)); } :where(.site-shell.page-home) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; font-family: var(--home-head-face); font-weight: 700; letter-spacing: 0; } :where(.site-shell.page-home) .btn-chevron { width: 0.8em; height: 0.8em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-right: -0.2em; transition: transform 0.2s ease; } :where(.site-shell.page-home) .btn:hover .btn-chevron { transform: translateX(2px); } :where(.site-shell.page-home) .btn:hover { text-decoration: none; } :where(.site-shell.page-home) .home-glass-button { --btn-bg: var(--home-frost-veil); --btn-bg-hover: rgba(255, 255, 255, 0.08); --btn-bg-active: rgba(255, 255, 255, 0.06); --btn-fg: #ffffff; --btn-border: transparent; -webkit-backdrop-filter: var(--home-frost-filter); backdrop-filter: var(--home-frost-filter); box-shadow: var(--home-frost-edge); } :where(.site-shell.page-home) .home-glass-button:hover { --btn-fg: #ffffff; --btn-border: transparent; -webkit-backdrop-filter: var(--home-frost-filter); backdrop-filter: var(--home-frost-filter); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 32px rgba(255, 255, 255, 0.04); } :where(.site-shell.page-home) .home-hero, :where(.site-shell.page-home) .home-after-hero { overflow-x: clip; font: 300 15px/1.6 var(--home-copy-face); color: var(--home-copy-ink); letter-spacing: normal; text-rendering: geometricPrecision; } :where(.site-shell.page-home) .home-hero h1, :where(.site-shell.page-home) .home-after-hero h2, :where(.site-shell.page-home) .home-after-hero h3, :where(.site-shell.page-home) .home-after-hero h4 { font-family: var(--home-head-face); font-weight: 700; color: var(--home-head-ink); } :where(.site-shell.page-home) .home-after-hero h2 { font-size: 27px; line-height: 1.25; letter-spacing: -1px; margin: 0 0 20px; } :where(.site-shell.page-home) .home-after-hero p { margin: 0; } :where(.site-shell.page-home) .home-eyebrow, :where(.site-shell.page-home) .home-hero-eyebrow, :where(.site-shell.page-home) .home-step-num { font: 500 12.75px/1.6 var(--home-copy-face); letter-spacing: 0.18em; color: var(--home-eyebrow-ink); opacity: 0.6; } :where(.site-shell.page-home) .home-eyebrow { text-transform: uppercase; margin: 0 0 15.3px; } :where(.site-shell.page-home) .home-nowrap { white-space: nowrap; } :where(.site-shell.page-home) .home-title-glyph { display: inline-block; width: 0.82em; height: 0.82em; vertical-align: -0.08em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } :where(.site-shell.page-home) .home-wrap, :where(.site-shell.page-home) .footer-inner { width: calc(100% - 30px); max-width: 1120px; margin: 0 auto; } @media (min-width: 550px) { :where(.site-shell.page-home) .home-wrap, :where(.site-shell.page-home) .footer-inner { width: 80%; } } :where(.site-shell.page-home) .footer-inner { padding: 0; } :where(.site-shell.page-home) .home-panel { position: relative; isolation: isolate; border-radius: var(--radius-l); } :where(.site-shell.page-home) .home-panel::before { --frost-veil: var(--home-frost-veil); --frost-filter: var(--home-frost-filter); --frost-edge: rgba(255, 255, 255, 0.11); --frost-catch: rgba(255, 255, 255, 0.16); --frost-glow: rgba(255, 255, 255, 0.025); --frost-glow-size: 32px; } :where(.site-shell.page-home) .home-hero-split { display: flex; align-items: flex-start; gap: 20px; padding: 83px 0 70px; } :where(.site-shell.page-home) .home-hero-left { position: relative; z-index: 1; flex: 0 0 583px; max-width: 583px; margin-top: 116px; } :where(.site-shell.page-home) .home-hero-eyebrow { margin: 0 0 1.6em; } :where(.site-shell.page-home) .home-hero-headline { font-size: calc(2.1114vw + 28.1px); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 0.45em; white-space: nowrap; } :where(.site-shell.page-home) .home-hero-headline span { background: linear-gradient(90deg, #d1dbff, #ffffff 25%, #e0caff 50%, #ffffff 75%, #d1dbff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 6px rgba(160, 140, 255, 0.65)) drop-shadow(0 0 22px rgba(120, 90, 255, 0.45)); animation: home-light-sweep 3.8s linear infinite; } @keyframes home-light-sweep { from { background-position: 0% 0; } to { background-position: 200% 0; } } :where(.site-shell.page-home) .home-hero-lede { font-size: 1.4em; line-height: 1.6; margin: 0 0 1.8em; } :where(.site-shell.page-home) .home-hero-lede b { font-weight: 600; } :where(.site-shell.page-home) .home-hero-buttons { display: flex; gap: 1em; max-width: 522px; margin: 0 0 1.8em; } :where(.site-shell.page-home) .home-hero-buttons .btn { --btn-radius: var(--radius-m); min-height: var(--field-height); font-size: 1.2em; line-height: 1.2; padding: 0 2em; } :where(.site-shell.page-home) .home-hero-buttons .btn-aurora { flex: 1.5; } :where(.site-shell.page-home) .home-hero-buttons .btn-secondary { flex: 1; } :where(.site-shell.page-home) .home-hero-chips { display: flex; flex-wrap: wrap; gap: 0.7em; } :where(.site-shell.page-home) .home-chip { font-size: 0.8em; letter-spacing: 0.02em; color: #9f97d4; border: 1px solid rgba(155, 131, 245, 0.35); border-radius: 999px; padding: 0.25em 0.9em; white-space: nowrap; } :where(.site-shell.page-home) .home-hero-right { position: relative; flex: 1 1 auto; height: 565px; display: flex; justify-content: center; } :where(.site-shell.page-home) .home-logo { position: relative; left: 20px; top: 13px; } :where(.site-shell.page-home) .home-logo img { display: block; width: 533px; max-width: none; animation: home-logo-zoom 7s ease-in-out infinite; } :where(.site-shell.page-home) .home-logo::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 1200px; height: 1200px; pointer-events: none; transform: translate(-50%, -50%); background: radial-gradient(circle, #33246f 0%, rgba(51, 36, 111, 0.7) 24%, rgba(51, 36, 111, 0) 58%); animation: home-glow-pulse 7s ease-in-out -0.6s infinite; } @keyframes home-logo-zoom { 0%, 100% { scale: 1; } 50% { scale: 1.06; } } @keyframes home-glow-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.72; } 50% { transform: translate(-50%, -50%) scale(1.16); opacity: 1; } } @media (prefers-reduced-motion: reduce) { :where(.site-shell.page-home) .home-hero-headline span, :where(.site-shell.page-home) .home-logo img, :where(.site-shell.page-home) .home-logo::before { animation: none; } } :where(.site-shell.page-home) .home-feature, :where(.site-shell.page-home) .home-router, :where(.site-shell.page-home) .home-customers, :where(.site-shell.page-home) .home-faq, :where(.site-shell.page-home) .home-cta { position: relative; } :where(.site-shell.page-home) .home-fast::after, :where(.site-shell.page-home) .home-photon::after, :where(.site-shell.page-home) .home-light::after, :where(.site-shell.page-home) .home-portable::after, :where(.site-shell.page-home) .home-media::after, :where(.site-shell.page-home) .home-router::after, :where(.site-shell.page-home) .home-customers::after, :where(.site-shell.page-home) .home-faq::after, :where(.site-shell.page-home) .home-cta::after { content: ""; position: absolute; z-index: -1; pointer-events: none; left: calc(var(--x) - var(--r)); top: calc(var(--y) - var(--r)); width: calc(var(--r) * 2); height: calc(var(--r) * 2); mix-blend-mode: screen; background: radial-gradient(circle closest-side, var(--c) 0%, color-mix(in srgb, var(--c) 72%, transparent) 30%, color-mix(in srgb, var(--c) 32%, transparent) 55%, color-mix(in srgb, var(--c) 8%, transparent) 80%, transparent 100%); animation: var(--drift) infinite alternate; } :where(.site-shell.page-home) .home-fast::after { --r: min(440px, 70vw); --x: 76%; --y: 58%; --c: rgba(112, 88, 240, 0.34); --drift: drift-a 26s -7s steps(260, jump-none); } :where(.site-shell.page-home) .home-photon::after { --r: min(460px, 80vw); --x: 50%; --y: 60%; --c: rgba(84, 84, 235, 0.2); --drift: drift-d 34s -31s steps(340, jump-none); } :where(.site-shell.page-home) .home-light::after { --r: min(420px, 70vw); --x: 94%; --y: 50%; --c: rgba(160, 70, 235, 0.24); --drift: drift-c 29s -11s steps(290, jump-none); } :where(.site-shell.page-home) .home-portable::after { --r: min(400px, 60vw); --x: -6%; --y: 55%; --c: rgba(70, 110, 240, 0.26); --drift: drift-b 31s -19s steps(310, jump-none); } :where(.site-shell.page-home) .home-media::after { --r: min(420px, 70vw); --x: 82%; --y: 40%; --c: rgba(175, 70, 225, 0.28); --drift: drift-e 22s -5s steps(220, jump-none); } :where(.site-shell.page-home) .home-router::after { --r: min(520px, 80vw); --x: 50%; --y: 104%; --c: rgba(70, 100, 240, 0.22); --drift: drift-d 34s -12s steps(340, jump-none); } :where(.site-shell.page-home) .home-customers::after { --r: min(420px, 70vw); --x: 8%; --y: 62%; --c: rgba(130, 70, 235, 0.26); --drift: drift-a 26s -17s steps(260, jump-none); } :where(.site-shell.page-home) .home-faq::after { --r: min(440px, 70vw); --x: 104%; --y: 45%; --c: rgba(70, 120, 240, 0.24); --drift: drift-c 29s -3s steps(290, jump-none); } :where(.site-shell.page-home) .home-cta::after { --r: min(460px, 80vw); --x: 50%; --y: 42%; --c: rgba(100, 90, 240, 0.26); --drift: drift-b 31s -9s steps(310, jump-none); } @media (prefers-reduced-motion: reduce) { :where(.site-shell.page-home) .home-feature::after, :where(.site-shell.page-home) .home-router::after, :where(.site-shell.page-home) .home-customers::after, :where(.site-shell.page-home) .home-faq::after, :where(.site-shell.page-home) .home-cta::after { animation: none; } } :where(.site-shell.page-home) .home-feature > p, :where(.site-shell.page-home) .home-half > p { font-size: 18px; line-height: 1.5; color: var(--home-feature-ink); max-width: 500px; margin-bottom: 18px; } :where(.site-shell.page-home) .home-feature > p:last-child, :where(.site-shell.page-home) .home-half > p:last-child { margin-bottom: 0; } :where(.site-shell.page-home) .home-how { padding: 15px 0 69px; } :where(.site-shell.page-home) .home-steps { display: flex; gap: 21px; } :where(.site-shell.page-home) .home-step { flex: 1; padding: 21px 24px; } :where(.site-shell.page-home) .home-step-num { margin: 0 0 0.6em; } :where(.site-shell.page-home) .home-after-hero .home-step h3 { font-size: 18px; line-height: 1.3; letter-spacing: -1px; margin: 0 0 7.2px; } :where(.site-shell.page-home) .home-step p { font-size: 15.75px; line-height: 1.5; color: var(--home-feature-ink); } :where(.site-shell.page-home) .home-fast { padding: 75px 0 33px; } :where(.site-shell.page-home) .home-fast-row { display: flex; align-items: center; gap: 30px; margin: 0 0 21px; } :where(.site-shell.page-home) .home-path-card { flex: 0 0 55.3%; padding: 16.5px 21px; } :where(.site-shell.page-home) .home-after-hero .home-path-card h3 { font: 500 12.75px/1.3 var(--home-copy-face); letter-spacing: 0.18em; text-transform: uppercase; color: var(--home-eyebrow-ink); margin: 0 0 5.1px; } :where(.site-shell.page-home) .home-path-card p { font-size: 16.5px; line-height: 1.5; color: var(--home-feature-ink); max-width: 500px; } :where(.site-shell.page-home) .home-diagram { flex: 1 1 auto; aspect-ratio: 1226 / 430; overflow: hidden; } :where(.site-shell.page-home) .home-diagram img { display: block; width: 100%; height: 100%; object-fit: cover; } :where(.site-shell.page-home) .home-diagram.is-gpu img { object-position: center 6.9%; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); } :where(.site-shell.page-home) .home-diagram.is-cpu img { object-position: center 94.6%; -webkit-mask-image: linear-gradient(0deg, #000 78%, transparent 100%); mask-image: linear-gradient(0deg, #000 78%, transparent 100%); } :where(.site-shell.page-home) .home-photon, :where(.site-shell.page-home) .home-native { text-align: center; } :where(.site-shell.page-home) .home-photon { padding: 75px 0 67.5px; } :where(.site-shell.page-home) .home-photon .home-eyebrow, :where(.site-shell.page-home) .home-native .home-eyebrow { margin-bottom: 1em; } :where(.site-shell.page-home) .home-photon h2, :where(.site-shell.page-home) .home-native h2, :where(.site-shell.page-home) .home-router h2, :where(.site-shell.page-home) .home-customers h2, :where(.site-shell.page-home) .home-cta h2 { font-size: 42px; line-height: 1.25; } :where(.site-shell.page-home) .home-feature > .home-photon-lede { color: var(--home-head-ink); max-width: 34em; margin: 0 auto 18px; } :where(.site-shell.page-home) .home-photon-showpiece { position: relative; isolation: isolate; margin-top: 37.5px; height: 400px; border-radius: var(--radius-xl); overflow: hidden; text-align: left; background: rgba(6, 7, 20, 0.45); box-shadow: inset 0 0 0 1px rgba(121, 114, 187, 0.44), inset 0 0 9px rgba(187, 187, 255, 0.05); } :where(.site-shell.page-home) .home-photon-showpiece canvas { position: absolute; inset: 0; width: 100%; height: 100%; } :where(.site-shell.page-home) .home-photon-showpiece .photon-bloom { filter: blur(11px); mix-blend-mode: screen; opacity: 0.75; } :where(.site-shell.page-home) .home-native { padding: 75px 0 75px; } :where(.site-shell.page-home) .home-feature > .home-native-tagline { color: var(--home-head-ink); max-width: none; margin: 0 0 28.8px; } :where(.site-shell.page-home) .native-radio { position: absolute; opacity: 0; pointer-events: none; } :where(.site-shell.page-home) .native-tabs { display: inline-flex; gap: 6px; padding: 4.5px; margin: 0 0 21px; border-radius: 999px; background: var(--home-frost-veil); -webkit-backdrop-filter: var(--home-frost-deep); backdrop-filter: var(--home-frost-deep); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.16); } :where(.site-shell.page-home) .native-tab { font: 500 14.25px/1.6 var(--home-copy-face); letter-spacing: 0.02em; color: #b9b3e6; border-radius: 999px; padding: 7.84px 18.5px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } :where(.site-shell.page-home) .native-tab:hover { color: #ffffff; } :where(.site-shell) #native-tab-html:checked ~ .native-tabs label[for="native-tab-html"], :where(.site-shell) #native-tab-data:checked ~ .native-tabs label[for="native-tab-data"], :where(.site-shell) #native-tab-js:checked ~ .native-tabs label[for="native-tab-js"] { background: var(--color-accent-fill); color: var(--color-accent-contrast); } :where(.site-shell) #native-tab-html:focus-visible ~ .native-tabs label[for="native-tab-html"], :where(.site-shell) #native-tab-data:focus-visible ~ .native-tabs label[for="native-tab-data"], :where(.site-shell) #native-tab-js:focus-visible ~ .native-tabs label[for="native-tab-js"] { outline: 2px solid var(--color-accent); outline-offset: 2px; } :where(.site-shell.page-home) .home-native-body { display: grid; grid-template-columns: minmax(0, 1fr); } :where(.site-shell.page-home) .native-tabs { justify-self: center; } :where(.site-shell.page-home) .native-view { grid-area: 2 / 1; display: flex; flex-direction: column; visibility: hidden; } :where(.site-shell.page-home) .native-view .native-caption { width: 100%; } :where(.site-shell.page-home) .native-view .native-panel { flex: 1 0 auto; } :where(.site-shell) #native-tab-html:checked ~ .native-view[data-view="dom"], :where(.site-shell) #native-tab-data:checked ~ .native-view[data-view="data"], :where(.site-shell) #native-tab-js:checked ~ .native-view[data-view="js"] { visibility: visible; } :where(.site-shell.page-home) .home-after-hero .native-caption { max-width: 52em; margin: 0 auto 26.4px; font-size: 16.5px; line-height: 1.5; color: rgba(206, 200, 240, 0.78); text-wrap: balance; } :where(.site-shell.page-home) .native-panel.home-panel::before { --frost-filter: var(--home-frost-deep); } :where(.site-shell.page-home) .native-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); text-align: left; overflow: hidden; } :where(.site-shell.page-home) .native-code { margin: 0; padding: 15.4px 16.8px 16.8px 14px; overflow-x: auto; white-space: pre; background: transparent; border: 0; border-radius: 0; font: 300 14px/1.65 "IBM Plex Mono", Consolas, Menlo, monospace; color: #cfd3ec; } :where(.site-shell.page-home) .native-code.cpp { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.1); } :where(.site-shell.page-home) .native-code .lbl { display: block; margin: 0 0 0.6em 2.2em; font-size: 0.75em; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(165, 135, 255, 0.7); } :where(.site-shell.page-home) .native-code .ln { display: inline-block; width: 2.2em; color: rgba(207, 211, 236, 0.26); user-select: none; } :where(.site-shell.page-home) .native-code .k, :where(.site-shell.page-home) .native-code .attr { color: #c9a4ff; } :where(.site-shell.page-home) .native-code .t { color: #9ec5ff; } :where(.site-shell.page-home) .native-code .f { color: #82aaff; } :where(.site-shell.page-home) .native-code .s { color: #8fe3e0; } :where(.site-shell.page-home) .native-code .n { color: #f8a77a; } :where(.site-shell.page-home) .native-code .c { color: rgba(207, 211, 236, 0.42); } :where(.site-shell.page-home) .native-code .p { color: #b8a6f2; } :where(.site-shell.page-home) .native-code .tag { color: #f0a6b6; } :where(.site-shell.page-home) .native-code .txt { color: #e8e6f5; } :where(.site-shell.page-home) .home-halves { display: flex; align-items: center; gap: 44px; } :where(.site-shell.page-home) .home-half { flex: 1 1 0; min-width: 0; } :where(.site-shell.page-home) .home-light { padding: 48px 0 33px; } :where(.site-shell.page-home) .home-portable { padding: 105px 0 75px; } :where(.site-shell.page-home) .home-half > .home-portable-tagline { color: var(--home-head-ink); } :where(.site-shell.page-home) .home-media { padding: 60px 0 135px; } :where(.site-shell.page-home) .home-after-hero .home-media h2 { font-size: 24px; line-height: 1.25; } :where(.site-shell.page-home) .home-chart { margin: 0; padding: 26px 30px 24px; } :where(.site-shell.page-home) .home-chart-title { font: 700 21px/1.3 var(--home-head-face); color: var(--home-head-ink); text-align: center; margin: 0 0 20px; } :where(.site-shell.page-home) .home-chart-rows { display: grid; gap: 20px; } :where(.site-shell.page-home) .home-chart-row { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; } :where(.site-shell.page-home) .home-chart-label { font-size: 16.5px; color: #e4e0ff; } :where(.site-shell.page-home) .home-chart-bars { container-type: inline-size; display: grid; row-gap: 5px; padding: 2px 0; box-shadow: inset 1px 0 0 rgba(170, 150, 255, 0.4); } :where(.site-shell.page-home) .home-chart-line { display: flex; align-items: center; gap: 8px; } :where(.site-shell.page-home) .home-bar { display: block; height: 18px; border-radius: 0 4px 4px 0; width: calc(var(--mb) / 136 * (100cqw - 70px)); } :where(.site-shell.page-home) .home-bar[data-mb="9"] { --mb: 9; } :where(.site-shell.page-home) .home-bar[data-mb="17"] { --mb: 17; } :where(.site-shell.page-home) .home-bar[data-mb="15"] { --mb: 15; } :where(.site-shell.page-home) .home-bar[data-mb="72"] { --mb: 72; } :where(.site-shell.page-home) .home-bar[data-mb="97"] { --mb: 97; } :where(.site-shell.page-home) .home-bar[data-mb="136"] { --mb: 136; } :where(.site-shell.page-home) .home-bar.is-ul, :where(.site-shell.page-home) .home-key.is-ul { background: linear-gradient(100deg, #72a8ff, #7d4fff 52%, #c27dff); box-shadow: 0 0 14px rgba(150, 110, 255, 0.55); } :where(.site-shell.page-home) .home-bar.is-cr, :where(.site-shell.page-home) .home-key.is-cr { background: rgba(60, 45, 150, 0.28); box-shadow: inset 0 0 0 1px rgba(140, 115, 255, 0.75); } :where(.site-shell.page-home) .home-bar-value { font-size: 14px; color: #d6d4ff; font-variant-numeric: tabular-nums; } :where(.site-shell.page-home) .home-chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; list-style: none; margin: 22px 0 0; padding: 0; font-size: 15.75px; color: #e4e0ff; } :where(.site-shell.page-home) .home-chart-legend li { display: flex; align-items: center; gap: 9px; margin: 0; } :where(.site-shell.page-home) .home-key { width: 14px; height: 14px; border-radius: 3px; } :where(.site-shell.page-home) .home-platforms { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: -45px 0 0; padding: 0; } :where(.site-shell.page-home) .home-platforms li { width: 130px; height: 130px; margin: 15px; display: grid; place-items: center; border-radius: var(--radius-l); } :where(.site-shell.page-home) .home-platforms .visually-hidden { position: absolute; } :where(.site-shell.page-home) .home-platform { display: grid; place-items: center; width: 46%; height: 46%; color: #cbc3ff; } :where(.site-shell.page-home) .home-platform svg :not([fill="none"]) { fill: url(#home-platform-ink); } :where(.site-shell.page-home) .home-platform-defs { position: absolute; width: 0; height: 0; } :where(.site-shell.page-home) .home-platform-defs stop:first-child { stop-color: #ebe6ff; } :where(.site-shell.page-home) .home-platform-defs stop:last-child { stop-color: #7163e6; } :where(.site-shell.page-home) .home-platform.is-linux svg :not([fill="none"]) { fill: url(#home-platform-ink-flipped); } :where(.site-shell.page-home) .home-platform svg { width: 100%; height: 100%; } :where(.site-shell.page-home) .home-platform.is-windows { width: 38%; height: 38%; } :where(.site-shell.page-home) .home-platform.is-arm { width: 50%; } :where(.site-shell.page-home) .home-media-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-l); background: #0a0b1c; container-type: inline-size; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); } :where(.site-shell.page-home) .home-media-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22); } :where(.site-shell.page-home) .home-media-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } :where(.site-shell.page-home) .home-media-ui { position: absolute; inset: 0; font-family: "Sora", var(--home-copy-face); -webkit-font-smoothing: antialiased; background: linear-gradient(90deg, rgba(10, 11, 28, 0.5), rgba(10, 11, 28, 0) 65%); } :where(.site-shell.page-home) .home-media-menu { position: absolute; top: 6%; left: 5%; display: flex; gap: 1.1em; font-weight: 300; font-size: clamp(9px, 3.1cqw, 17px); letter-spacing: 0.02em; } :where(.site-shell.page-home) .home-media-menu span { position: relative; padding-bottom: 0.45em; color: rgba(205, 192, 255, 0.62); mix-blend-mode: plus-lighter; } :where(.site-shell.page-home) .home-media-menu .is-active { color: #ffffff; text-shadow: 0 0 16px rgba(190, 160, 255, 0.7); } :where(.site-shell.page-home) .home-media-menu .is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: #efeaff; box-shadow: 0 0 8px rgba(200, 180, 255, 0.95), 0 0 20px rgba(150, 120, 255, 0.7); } :where(.site-shell.page-home) .home-media-badge { position: absolute; right: 5%; bottom: 8%; padding: 0.45em 1em; border-radius: 2em; font-weight: 200; font-size: clamp(7px, 2.25cqw, 12px); letter-spacing: 0.2em; color: rgba(235, 230, 255, 0.72); background: rgba(8, 9, 20, 0.35); border: 1px solid rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } :where(.site-shell.page-home) .home-band { position: relative; } :where(.site-shell.page-home) .home-router { padding: 93px 0 100px; text-align: center; } :where(.site-shell.page-home) .home-router-cards { display: flex; gap: 21px; margin-top: 30px; text-align: left; } :where(.site-shell.page-home) .home-router-card { flex: 1; display: flex; flex-direction: column; padding: 24px; } :where(.site-shell.page-home) .home-router-band { background: rgba(255, 255, 255, 0.02); -webkit-backdrop-filter: brightness(1.15) saturate(1.15); backdrop-filter: brightness(1.15) saturate(1.15); } :where(.site-shell.page-home) .home-band .home-panel::before { background: var(--pane-sub-veil); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.13); } :where(.site-shell.page-home) .home-after-hero .home-router-card h3 { font-size: 18.75px; line-height: 1.3; letter-spacing: -1px; margin: 0 0 9.375px; } :where(.site-shell.page-home) .home-route-glyph { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.16em; margin-right: 0.2em; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; } :where(.site-shell.page-home) .home-router-card p { font-size: 15.75px; line-height: 1.5; color: rgba(255, 255, 255, 0.83); margin: 0 0 18px; } :where(.site-shell.page-home) .home-router-card .btn { margin-top: auto; align-self: flex-start; font-size: 15px; line-height: 1.4; padding: 8px 20px; } :where(.site-shell.page-home) .home-customers { padding: 91px 0 60px; text-align: center; } :where(.site-shell.page-home) .home-logos { padding-top: 30px; } :where(.site-shell.page-home) .home-logos img { display: inline-block; height: 100px; width: auto; margin: 15px; vertical-align: middle; } :where(.site-shell.page-home) .home-cta-band { position: relative; background: rgba(20, 22, 34, 0.42); } :where(.site-shell.page-home) .home-faq-band { --faq-tint: rgba(20, 22, 34, 0.42); position: relative; background: linear-gradient(to bottom, rgba(20, 22, 34, 0), var(--faq-tint) 240px); } :where(.site-shell.page-home) .home-faq { padding: 94px 75px 76px; } :where(.site-shell.page-home) .home-after-hero .home-faq h4 { font-size: 27px; line-height: 1.35; letter-spacing: -0.8px; margin: 0 0 20px; } :where(.site-shell.page-home) .home-faq-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } :where(.site-shell.page-home) .home-faq-toggle:focus-visible + .home-faq-label { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: 10px; } :where(.site-shell.page-home) .home-faq-label { display: block; margin: 0 0 5px; padding: 10px 10px 10px calc(15px + 1em); text-indent: calc(-5px - 1em); cursor: pointer; font: 300 19.5px/1.6 var(--home-copy-face); color: var(--home-head-ink); transition: all 0.25s ease-out; } :where(.site-shell.page-home) .home-faq-label::before { content: " "; display: inline-block; vertical-align: middle; margin-right: 1em; text-indent: 0; transform: translateY(-2px); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; transition: transform 0.2s ease-out; } :where(.site-shell.page-home) .home-faq-content { max-height: 0; overflow: hidden; transition: max-height 0.25s ease-in-out; } :where(.site-shell.page-home) .home-faq-toggle:checked + .home-faq-label + .home-faq-content { max-height: 100vh; } :where(.site-shell.page-home) .home-faq-toggle:checked + .home-faq-label::before { transform: rotate(90deg) translateX(-3px); } :where(.site-shell.page-home) .home-faq-inner { margin: 5px 5px 30px; padding: 30px 45px; border-radius: 15px; background: rgba(236, 230, 255, 0.04); border: 1px solid rgba(121, 114, 187, 0.44); box-shadow: inset 0 0 9px rgba(187, 187, 255, 0.08); } :where(.site-shell.page-home) .home-after-hero .home-faq-inner p { font-size: 18px; line-height: 1.5; color: var(--home-head-ink); margin: 0 0 18px; } :where(.site-shell.page-home) .home-after-hero .home-faq-inner p:last-child { margin-bottom: 0; } :where(.site-shell.page-home) .home-faq-inner ul { list-style: circle inside; margin: 0 0 25px; padding: 0; } :where(.site-shell.page-home) .home-faq-inner li { margin: 0 0 10px; } :where(.site-shell.page-home) .home-faq-inner a { color: #ffffffdd; text-shadow: 0 0 2px #ffffffaa; } :where(.site-shell.page-home) .home-faq-inner a:hover { color: #ffffff; text-shadow: 0 0 4px #ffffff; } :where(.site-shell.page-home) .home-cta { padding: 61px 0 39px; } :where(.site-shell.page-home) .home-cta-header { margin: 30px 0 60px; text-align: center; } :where(.site-shell.page-home) .home-after-hero .home-cta h2 { font-size: 42px; line-height: 1.25; letter-spacing: -1px; margin: 0 0 20px; color: #ece7ff; background: radial-gradient(#ffffff 10%, rgba(101, 91, 206, 0.51) 100%); background-position: 75% 100%; background-size: 150% 140%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :where(.site-shell.page-home) .home-after-hero .home-cta-header p { font-size: 20.25px; line-height: 1.5; color: var(--home-head-ink); margin: 0 0 18px; } :where(.site-shell.page-home) .home-cta-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 22.5px; margin-top: 45px; } :where(.site-shell.page-home) .home-cta-buttons .btn { --btn-radius: var(--radius-m); width: 40vw; max-width: 320px; min-height: var(--field-height); padding: 0 2em; font-size: 18px; line-height: 1.2; } @media (max-width: 899px) { :where(.site-shell.page-home) .home-hero-split { flex-direction: column-reverse; align-items: stretch; gap: 7.5px; padding: 0 0 27px; } :where(.site-shell.page-home) .home-hero-left { flex: none; max-width: none; margin: 0; font-size: 13.5px; text-align: center; } :where(.site-shell.page-home) .home-hero-headline { white-space: normal; } :where(.site-shell.page-home) .home-hero-lede { font-size: 1.25em; } :where(.site-shell.page-home) .home-hero-buttons { justify-content: center; max-width: none; } :where(.site-shell.page-home) .home-hero-buttons .btn-aurora, :where(.site-shell.page-home) .home-hero-buttons .btn-secondary { flex: none; } :where(.site-shell.page-home) .home-hero-chips { justify-content: center; } :where(.site-shell.page-home) .home-hero-right { height: 300px; align-items: center; } :where(.site-shell.page-home) .home-logo { left: 0; top: -10px; } :where(.site-shell.page-home) .home-logo img { width: clamp(220px, 80vw, 300px); } :where(.site-shell.page-home) .home-logo::before { width: 800px; height: 800px; } :where(.site-shell.page-home) .home-how { padding: 78.75px 0 52.5px; } :where(.site-shell.page-home) .home-steps { flex-direction: column; gap: 15px; } :where(.site-shell.page-home) .home-step p { font-size: 15px; line-height: 1.6; } :where(.site-shell.page-home) .home-feature > p, :where(.site-shell.page-home) .home-half > p { line-height: 1.6; margin-bottom: 25px; max-width: none; } :where(.site-shell.page-home) .home-fast { padding: 52.5px 0 24px; } :where(.site-shell.page-home) .home-fast-row { flex-direction: column; align-items: stretch; gap: 7.5px; margin-bottom: 18px; } :where(.site-shell.page-home) .home-path-card { flex: none; } :where(.site-shell.page-home) .home-path-card p { font-size: 15px; line-height: 1.6; } :where(.site-shell.page-home) .home-diagram { margin: 0 -15px; } :where(.site-shell.page-home) .home-photon { padding: 52.5px 0 53.55px; } :where(.site-shell.page-home) .home-photon h2, :where(.site-shell.page-home) .home-native h2, :where(.site-shell.page-home) .home-router h2, :where(.site-shell.page-home) .home-customers h2 { font-size: 30px; } :where(.site-shell.page-home) .home-photon-showpiece { height: 322px; margin: 37.5px -15px 0; border-radius: 0; } :where(.site-shell.page-home) .home-native { padding: 52.5px 0; } :where(.site-shell.page-home) .native-tabs { gap: 2px; padding: 3px; } :where(.site-shell.page-home) .native-tab { font-size: 12.3px; padding: 6.15px 10.45px; } :where(.site-shell.page-home) .home-after-hero .native-caption { line-height: 1.6; margin-bottom: 23.1px; } :where(.site-shell.page-home) .native-panel { grid-template-columns: minmax(0, 1fr); margin: 0 -15px; border-radius: 0; } :where(.site-shell.page-home) .native-code { font-size: 11px; padding: 11px 11px 11px 6.6px; } :where(.site-shell.page-home) .native-code.cpp { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } :where(.site-shell.page-home) .home-halves { flex-direction: column; align-items: stretch; gap: 45px; } :where(.site-shell.page-home) .home-light { padding: 52.5px 0 20.25px; } :where(.site-shell.page-home) .home-portable { padding: 52.5px 0 60px; } :where(.site-shell.page-home) .home-platforms { margin-top: 0; } :where(.site-shell.page-home) .home-platforms li { width: 100px; height: 100px; margin: 7.5px; } :where(.site-shell.page-home) .home-media { padding: 15px 0 105px; } :where(.site-shell.page-home) .home-media .home-half:last-child { margin: 0 -15px; } :where(.site-shell.page-home) .home-media-frame { border-radius: 0; } :where(.site-shell.page-home) .home-chart { padding: 22px 18px 20px; } :where(.site-shell.page-home) .home-chart-row { grid-template-columns: 70px minmax(0, 1fr); } :where(.site-shell.page-home) .home-chart-label { font-size: 15px; } :where(.site-shell.page-home) .home-router { padding: 70px 0 74px; } :where(.site-shell.page-home) .home-router-cards { flex-direction: column; gap: 15px; } :where(.site-shell.page-home) .home-router-card p { font-size: 15px; line-height: 1.6; margin-bottom: 25px; } :where(.site-shell.page-home) .home-customers { padding: 68px 0 46px; } :where(.site-shell.page-home) .home-logos img { height: 80px; margin: 3px; } :where(.site-shell.page-home) .home-faq { padding: 69px 0 52px; } :where(.site-shell.page-home) .home-faq-label { font-size: 16.5px; } :where(.site-shell.page-home) .home-cta { padding: 29.4px 0 32.55px; } :where(.site-shell.page-home) .home-cta-header { margin: 27px 0 40.5px; padding-top: 13.5px; } :where(.site-shell.page-home) .home-after-hero .home-cta h2 { font-size: 27px; } :where(.site-shell.page-home) .home-after-hero .home-cta-header p { line-height: 1.6; margin-bottom: 25px; } :where(.site-shell.page-home) .home-cta-buttons { flex-direction: column; align-items: center; gap: 14px; margin-top: 40.5px; } :where(.site-shell.page-home) .home-cta-buttons .btn { width: 75vw; max-width: 360px; } :where(.site-shell.page-home) .home-light::after { --x: 90%; --y: 78%; } :where(.site-shell.page-home) .home-media::after { --x: 80%; --y: 80%; } :where(.site-shell.page-home) .home-fast::after { --y: 75%; } } @media (max-width: 519px) { :where(.site-shell.page-home) .home-hero-buttons { flex-direction: column; align-items: center; } :where(.site-shell.page-home) .home-hero-buttons .btn { width: 88vw; max-width: 360px; } } }