:root[data-ui='v2']:not(:has([data-ui='v1'])) {
--ui-chevron: url("data:image/svg+xml,%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='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--ui-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
.ui-docs {
gap: 24px;
@media (min-width: 1024px) {
display: grid;
grid-template-columns: 260px minmax(0, var(--site-container-prose));
column-gap: 48px;
justify-content: center;
align-items: start;
}
}
.ui-docs .ui-prose { max-width: var(--site-container-prose); }
.ui-docnav__toggle > span > svg, aside.ui-docnav nav > div:first-child > svg { width: var(--site-icon-md); height: var(--site-icon-md); color: var(--site-accent); }
.ui-docnav__toggle > span > span:first-of-type, aside.ui-docnav nav > div:first-child > span { color: var(--site-text); font: var(--site-w-strong) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font); letter-spacing: 0; text-transform: none; }
.ui-docnav__toggle > span > span + span { color: var(--site-muted); font: var(--site-w-body) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font); }
.ui-docnav__item > span:empty { display: none; }
.ui-docnav__item {
min-height: 44px;
box-sizing: border-box;
padding: 0 12px;
border-radius: var(--site-r-tile);
color: var(--site-muted);
font: var(--site-w-body) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font);
transition-duration: var(--site-dur-fast);
& > span { padding-left: 0; }
@media (hover: hover) { &:hover { background: var(--site-chip); color: var(--site-text); } }
&:active { box-shadow: var(--site-pressed-shadow); }
&:focus-visible { outline-offset: -2px; }
}
.ui-docnav__item--on, .ui-docnav__item--on:hover { background: var(--site-accent-tint); color: var(--site-text); font-weight: var(--site-w-strong); }
div.ui-docnav {
overflow: hidden;
border: 0;
border-radius: var(--site-r-field);
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--site-outline);
}
.ui-docnav__toggle {
min-height: 52px;
padding: 0 16px;
cursor: pointer;
@media (hover: hover) { &:hover { background: var(--site-chip); } }
&:focus-visible { outline-offset: -2px; border-radius: var(--site-r-field); }
}
.ui-docnav__toggle > svg { width: var(--site-icon-md); height: var(--site-icon-md); color: var(--site-muted); transition-duration: var(--site-dur-fast); transition-timing-function: var(--site-ease); }
div.ui-docnav > div { padding: 6px; border-top: 1px solid var(--site-border); }
aside.ui-docnav { width: auto; }
aside.ui-docnav > div { top: calc(var(--site-nav-h) + 32px); padding: 0; border: 0; border-radius: 0; background: none; }
aside.ui-docnav nav > div:first-child { gap: 10px; margin: 0 0 12px; padding: 0 12px; min-height: 28px; }
.ui-page, main:has(> .ui-nav) { background: transparent !important; }
:is(.ui-page, main:has(> .ui-nav)) > div[aria-hidden]:first-child { display: none; }
:is(.ui-page, main:has(> .ui-nav)) > :not(.ui-nav, .ui-footer), .ui-band {
--color-white: var(--site-text);
--color-slate-200: var(--site-text);
--color-slate-300: var(--site-text);
--color-slate-400: var(--site-muted);
--color-slate-500: var(--site-muted);
--color-purple-200: var(--site-text);
--color-purple-300: var(--site-link);
--color-purple-400: var(--site-link);
--color-amber-100: var(--site-text);
--color-amber-200: var(--site-text);
--color-amber-300: var(--site-warn);
--color-amber-400: var(--site-warn);
--color-amber-500: var(--site-warn);
--color-orange-100: var(--site-text);
--color-orange-200: var(--site-text);
--color-orange-300: var(--site-warn);
--color-orange-400: var(--site-warn);
--color-orange-500: var(--site-warn);
--color-green-100: var(--site-text);
--color-green-400: var(--site-success);
--color-green-500: var(--site-success);
--color-emerald-400: var(--site-success);
--color-emerald-500: var(--site-success);
--color-red-400: var(--site-danger);
--color-red-500: var(--site-danger);
--color-blue-100: var(--site-text);
--color-blue-500: var(--site-info);
--font-weight-medium: var(--site-w-strong);
--font-weight-semibold: var(--site-w-strong);
--font-weight-bold: var(--site-w-heavy);
}
:is(.ui-page, main:has(> .ui-nav)) h1 {
margin: 0 0 16px;
color: var(--site-text);
font: var(--site-w-heavy) var(--site-t-h1-size) / var(--site-t-h1-lh) var(--site-font);
letter-spacing: var(--site-t-h1-ls);
text-wrap: balance;
overflow-wrap: break-word;
}
:is(.ui-prose > article, article.ui-prose, .ui-pagehead, .ui-section--inner, main:has(> .ui-nav) > div) > :is(h1 + p, div:has(> h1) + p) {
margin: 0 0 var(--site-stack);
color: var(--site-muted);
font: var(--site-w-body) var(--site-t-lead-size) / var(--site-t-lead-lh) var(--site-font);
letter-spacing: var(--site-t-lead-ls);
}
.ui-prose {
color: var(--site-text);
& :is(p, li, summary, blockquote) { font-size: var(--site-t-body-size); line-height: var(--site-t-body-lh); }
& :is(h2, h3) { color: var(--site-text); overflow-wrap: break-word; }
& h2 { margin: 0 0 16px; font: var(--site-w-heavy) var(--site-t-h3-size) / var(--site-t-h3-lh) var(--site-font); letter-spacing: var(--site-t-h3-ls); }
& h3 { margin: 0 0 12px; font: var(--site-w-heavy) var(--site-t-h4-size) / var(--site-t-h4-lh) var(--site-font); letter-spacing: var(--site-t-h4-ls); }
& > :is(h2, h3):not(:first-child) { margin-top: 40px; }
& > p, & > section > p { margin-block: 0 16px; }
& strong { font-weight: var(--site-w-strong); }
& a:not([class*='ui-']) { color: var(--site-link); text-decoration-color: currentColor; }
@media (hover: hover) { & a:not([class*='ui-']):hover { color: var(--site-link-hover); } }
& :is(li, td) > a:not([class*='ui-']) { text-decoration: underline 1px; text-underline-offset: 3px; }
& :is(.ui-prose__link, td) > a:not([class*='ui-']) { display: inline-block; margin-block: -12.5px; padding-block: 12.5px; }
& :is(section > a, details a), & > article > p > a:only-child, &:is(article) > p > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
& .anchor-link { color: var(--site-muted); }
& [id] { scroll-margin-top: 0; }
& hr { margin: 40px 0; border: 0; border-top: 1px solid var(--site-border); }
& blockquote { margin: 24px 0; padding: 0 0 0 16px; border-left: 3px solid var(--site-accent-tint); color: var(--site-muted); font-style: normal; }
& img { border-radius: var(--site-r-card); }
}
:is(.ui-post, .ui-legal) .ui-prose :is(ul, ol) {
margin: 16px 0;
padding-inline-start: 1.375em;
list-style-position: outside;
& > li { margin: 0; padding-inline-start: 4px; }
& > li + li { margin-top: 8px; }
& > li::marker { color: var(--site-muted); }
}
.ui-prose pre {
box-sizing: border-box;
max-width: 100%;
margin: 16px 0;
padding: 16px;
overflow-x: auto;
border: 1px solid var(--site-border);
border-radius: var(--site-r-field);
background: var(--site-input-bg) !important;
color: var(--site-text) !important;
font: var(--site-w-body) var(--site-t-mono-size) / var(--site-t-mono-lh) var(--site-mono);
& * { color: inherit !important; background: none !important; font: inherit; }
}
.ui-prose :not(pre) > code {
padding: 2px 6px;
border-radius: 6px;
background: var(--site-chip);
color: var(--site-text);
font: var(--site-w-body) 0.92em / inherit var(--site-mono);
}
.ui-prose figure { margin: 16px 0; }
.ui-prose div:has(> table) {
margin: 24px 0;
overflow-x: auto;
overscroll-behavior-x: contain;
border: 1px solid var(--site-border);
border-radius: var(--site-r-card);
background: var(--site-glass);
}
.ui-prose table {
width: 100%;
border-collapse: collapse;
& td { font: var(--site-w-body) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font); }
& :is(td, th) { padding: 12px 16px; border: 0; border-top: 1px solid var(--site-border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
& th { background: var(--site-chip); color: var(--site-muted); font: var(--site-w-strong) var(--site-t-label-size) / var(--site-t-label-lh) var(--site-font); overflow-wrap: normal; }
& tr { border: 0; }
& :is(thead tr:first-child, tbody:first-child tr:first-child) > * { border-top: 0; }
}
.ui-post .ui-prose > table { margin: 24px 0; overflow: hidden; border: 1px solid var(--site-border); border-collapse: separate; border-spacing: 0; border-radius: var(--site-r-card); }
.ui-docs .ui-prose td:first-child { width: 1%; white-space: nowrap; color: var(--site-text); font-weight: var(--site-w-strong); }
.ui-prose details {
padding: 0;
overflow: clip;
border: 1px solid var(--site-border);
border-radius: var(--site-r-row);
background: var(--site-glass);
box-shadow: none;
backdrop-filter: none;
& > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 56px;
padding: 14px 20px;
box-sizing: border-box;
list-style: none;
color: var(--site-text);
font-weight: var(--site-w-strong);
cursor: pointer;
transition: background-color var(--site-dur-fast) var(--site-ease);
&::-webkit-details-marker { display: none; }
& > span:last-child { display: none; }
&::after {
content: '';
flex: none;
width: var(--site-icon-md);
height: var(--site-icon-md);
background: var(--site-muted);
-webkit-mask: var(--ui-chevron) center / contain no-repeat;
mask: var(--ui-chevron) center / contain no-repeat;
transition: rotate var(--site-dur-sheet) var(--site-ease);
}
@media (hover: hover) { &:hover { background: var(--site-chip); } }
&:focus-visible { outline-offset: -2px; border-radius: var(--site-r-row); }
}
&[open] > summary::after { rotate: 180deg; }
& > :not(summary) { margin: 0; padding: 0 20px 20px; color: var(--site-muted); }
}
aside.ui-docnav { align-self: stretch; }
.ui-docs .ui-prose {
& ol > li > span:first-child:not(:last-child) {
display: grid;
place-items: center;
width: 24px;
height: 24px;
margin-top: calc((var(--site-t-body-lh) - 24px) / 2);
border: 0;
border-radius: var(--site-r-pill);
background: var(--site-accent-tint);
color: var(--site-text);
font: var(--site-w-strong) var(--site-t-micro-size) / 1 var(--site-font);
}
& section { margin: 0 0 var(--site-stack); }
& h1:not(:has(+ p)) { margin-bottom: var(--site-stack); }
}
.ui-prose .ui-card {
margin-block: 16px 0;
& :is(p, li) { font-size: var(--site-t-body-sm-size); line-height: var(--site-t-body-sm-lh); }
& h3 { margin: 0 0 4px; }
& > p:first-child:not(:only-child) { color: var(--site-text); font-weight: var(--site-w-strong); }
}
.ui-prose section.ui-card { margin-top: var(--site-stack); & > h2 { font: var(--site-w-heavy) var(--site-t-h4-size) / var(--site-t-h4-lh) var(--site-font); } }
.ui-prose .ui-card div:has(> .ui-btn) { flex-direction: column; gap: 12px; & > .ui-btn { min-height: 54px; padding-block: 12px; white-space: normal; text-wrap: balance; line-height: 1.25; } }
.ui-callout {
--color-amber-300: var(--site-text);
--color-orange-300: var(--site-text);
margin-block: 16px;
& > span:first-child { grid-column: 1; grid-row: 1 / span 9; color: var(--ui-c); line-height: 20px; text-align: center; }
&:not(:has(> span:first-child))::before {
content: '';
grid-column: 1;
grid-row: 1 / span 9;
width: 20px;
height: 20px;
background: var(--ui-c);
-webkit-mask: var(--ui-alert-icon) center / contain no-repeat;
mask: var(--ui-alert-icon) center / contain no-repeat;
}
& :is(p, li) { font-size: var(--site-t-body-sm-size); line-height: var(--site-t-body-sm-lh); }
& > :is(p, div > p):first-child:not(:only-child) { color: var(--ui-c); font-weight: var(--site-w-strong); }
& a { color: var(--site-text); }
}
.ui-callout:is(.ui-callout--info, .ui-callout--success)::before { -webkit-mask-image: var(--ui-info-icon); mask-image: var(--ui-info-icon); }
article.ui-prose, .ui-legal > main, main:has(> .ui-nav) > div:not([aria-hidden]) {
box-sizing: border-box;
max-width: calc(var(--site-container-prose) + 2 * var(--site-gutter));
padding-inline: var(--site-gutter);
}
main:has(> .ui-nav) > div:not([aria-hidden]) { padding-block: calc(var(--site-nav-h) + var(--site-section-y-inner)) var(--site-section-y); }
article.ui-prose {
& > section { margin: 0 0 var(--site-section-y-inner); }
& .ui-grid, & section > div:has(> .ui-card) { gap: 12px; }
}
.ui-prose .ui-card { & h3 { color: var(--site-text); font: var(--site-w-heavy) var(--site-t-h4-size) / var(--site-t-h4-lh) var(--site-font); } & span { font-weight: var(--site-w-strong); } }
.ui-cta {
display: grid;
justify-items: start;
gap: 16px 32px;
margin-top: var(--site-section-y-inner);
padding: 32px 24px;
border: 1px solid var(--site-border) !important;
border-radius: var(--site-r-hero);
background: var(--site-bg-gradient) !important;
box-shadow: var(--site-shadow-card);
backdrop-filter: none;
color: var(--site-text);
text-align: left;
& > * { margin: 0; max-width: none; }
& > p { color: var(--site-muted); font: var(--site-w-body) var(--site-t-body-size) / var(--site-t-body-lh) var(--site-font); }
@media (min-width: 768px) {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
padding: 40px;
& > :last-child { grid-column: 2; grid-row: 1 / span 2; }
}
}
.ui-cta__title { color: var(--site-text); font: var(--site-w-heavy) var(--site-t-h2-size) / var(--site-t-h2-lh) var(--site-font); letter-spacing: var(--site-t-h2-ls); text-wrap: balance; }
.ui-cta__actions { display: flex; flex-direction: column; gap: 12px; width: 100%; @media (min-width: 640px) { flex-direction: row; width: auto; } }
.ui-cta .ui-btn--primary { background: var(--site-primary-fill) !important; }
@media (max-width: 639.98px) { .ui-cta .ui-btn { width: 100%; } }
main:has(> .ui-nav) > div:not([aria-hidden]) {
& > h1:not(:has(+ p)) { margin-bottom: var(--site-stack); }
& > h1 + div { gap: 8px 16px; padding: 16px 20px; border-radius: var(--site-r-field); }
& > h1 + div + div { border: 1px solid var(--site-border); border-radius: var(--site-r-card); background: var(--site-glass); }
& p + div > span { padding: 2px 8px; border: 0; background: var(--site-chip); color: var(--site-muted); font: var(--site-w-strong) var(--site-t-micro-size) / var(--site-t-micro-lh) var(--site-font); }
& > p:last-child { color: var(--site-muted); font: var(--site-w-body) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font); }
& .ui-card > div:first-child > span { color: var(--site-text); font: var(--site-w-strong) var(--site-t-micro-size) / var(--site-t-micro-lh) var(--site-font); letter-spacing: 0.06em; }
& .ui-card > p { margin: 0; color: var(--site-text); font: var(--site-w-strong) var(--site-t-body-size) / var(--site-t-body-lh) var(--site-font); overflow-wrap: anywhere; }
& .ui-card__icon svg { color: inherit; }
}
main .connected-dot { animation: none; }
.ui-legal {
color: var(--site-text);
& > div:first-child { border-bottom-color: var(--site-border); }
& > div:first-child > div {
box-sizing: border-box;
max-width: calc(var(--site-container) + 2 * var(--site-gutter));
min-height: var(--site-nav-h);
padding: 0 var(--site-gutter);
gap: 8px;
}
& .ui-logo { margin-left: auto; }
& .ui-btn--ghost:first-child { margin-left: -12px; padding: 0 12px; }
& > main { padding-block: var(--site-section-y-inner) var(--site-section-y); }
& h1 + p { margin: 0 0 var(--site-stack); color: var(--site-muted); font: var(--site-w-body) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font); }
& section > h2 { margin-bottom: 12px; }
}
.ui-pagehead {
padding: calc(var(--site-nav-h) + var(--site-section-y-inner)) 0 var(--site-stack);
& > div:last-child > div:first-child { gap: 8px; margin-bottom: 12px; }
& h1 { margin: 0; }
& h1 + a { margin: 0 0 16px; }
& p { margin: 0 auto; max-width: 36em; color: var(--site-muted); font: var(--site-w-body) var(--site-t-lead-size) / var(--site-t-lead-lh) var(--site-font); }
}
.ui-pagehead ~ .ui-container { margin-bottom: var(--site-stack); }
.ui-pagehead ~ .ui-container:last-child { padding-bottom: var(--site-section-y); }
.ui-tabs {
flex-wrap: nowrap;
gap: 4px;
margin-inline: calc(-1 * var(--site-gutter));
padding-inline: var(--site-gutter);
overflow-x: auto;
scrollbar-width: none;
-webkit-mask: linear-gradient(to right, #000 calc(100% - 24px), transparent);
mask: linear-gradient(to right, #000 calc(100% - 24px), transparent);
&::-webkit-scrollbar { display: none; }
}
.ui-tabs__item {
display: inline-flex;
flex: none;
align-items: center;
min-height: 44px;
padding: 0 16px;
border: 0;
border-radius: var(--site-r-pill);
background: transparent;
color: var(--site-muted);
font: var(--site-w-strong) var(--site-t-label-size) / 1 var(--site-font);
white-space: nowrap;
@media (hover: hover) { &:hover { background: var(--site-chip); color: var(--site-text); } }
&:focus-visible { outline-offset: -2px; }
}
.ui-tabs__item--on, .ui-tabs__item--on:hover { background: var(--site-accent-tint); color: var(--site-text); }
.ui-empty p { color: var(--site-muted); }
.ui-grid { gap: 16px; @media (min-width: 1024px) { gap: 24px; } }
.ui-card:has(> .ui-card__media) {
height: 100%;
padding: 0;
overflow: hidden;
& > div:last-child { padding: var(--site-pad-card); }
& .ui-card__title { margin: 0 0 8px; }
& .ui-card__text { display: block; margin: 0 0 16px; overflow: visible; -webkit-line-clamp: none; }
}
.ui-card__media .ui-badge { --ui-c: var(--site-text); --ui-c-tint: var(--site-surface-strong); }
.ui-card .ui-post__meta { color: var(--site-muted); font: var(--site-w-body) var(--site-t-micro-size) / var(--site-t-micro-lh) var(--site-font); }
.ui-post {
box-sizing: border-box;
max-width: calc(1024px + 2 * var(--site-gutter));
padding: calc(var(--site-nav-h) + var(--site-section-y-inner)) var(--site-gutter) var(--site-section-y);
& > :is(nav, .ui-post__cover, div:has(> h1), .ui-post__meta, a, .ui-toc) { max-width: var(--site-container-prose); }
& > nav { gap: 0 8px; margin: 0 0 16px; color: var(--site-muted); font: var(--site-w-body) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font); }
& > nav > a { display: inline-flex; align-items: center; min-height: 44px; margin-inline: -8px; padding-inline: 8px; color: var(--site-muted); }
& > nav > a:hover { color: var(--site-text); }
& > div:has(> h1) { margin: 0 0 12px; }
& > div:has(> h1) .ui-badge { margin: 0 0 12px; }
& > div:has(> article) { max-width: none; }
& article { max-width: var(--site-container-prose); padding-inline: 0; }
& > a.ui-callout { display: flex; gap: 12px; align-items: center; min-height: 44px; margin: 0 0 var(--site-stack); padding: 12px 16px; color: var(--site-text); }
& > a.ui-callout::before { flex: none; }
& > div:has(> .ui-grid) { margin-top: var(--site-section-y); & > h2 { margin: 0 0 var(--site-stack); color: var(--site-text); font: var(--site-w-heavy) var(--site-t-h3-size) / var(--site-t-h3-lh) var(--site-font); letter-spacing: var(--site-t-h3-ls); } }
}
.ui-post__cover { margin: 0 0 32px; border-radius: var(--site-r-card); }
.ui-post > .ui-post__meta {
gap: 8px 12px;
margin: 0 0 var(--site-stack);
color: var(--site-muted);
font: var(--site-w-body) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font);
& > div:first-child { background: var(--site-accent-tint); color: var(--site-text); }
& > span:nth-child(2) { color: var(--site-text); font-weight: var(--site-w-strong); }
}
.ui-post__tags {
gap: 8px;
margin-top: var(--site-section-y-inner);
padding-top: 24px;
border-top-color: var(--site-border);
& > span { color: var(--site-muted); font: var(--site-w-body) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font); }
}
.ui-toc {
top: calc(var(--site-nav-h) + 16px);
&:is(aside) { max-height: calc(100dvh - var(--site-nav-h) - 32px); overflow-y: auto; overscroll-behavior: contain; }
& > p { margin: 0 0 12px; color: var(--site-muted); font: var(--site-w-strong) var(--site-t-micro-size) / var(--site-t-micro-lh) var(--site-font); letter-spacing: 0.06em; }
& ul { margin: 0; border-left: 1px solid var(--site-border); }
& ul > li { margin: 0; }
& a {
display: flex;
align-items: center;
min-height: 36px;
margin-left: -1px;
padding: 6px 0 6px 14px;
border-left: 2px solid transparent;
color: var(--site-muted);
font: var(--site-w-body) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font);
@media (hover: hover) { &:hover { color: var(--site-text); } }
}
& .ui-toc__item--on { border-left-color: var(--site-accent); color: var(--site-text); font-weight: var(--site-w-strong); }
& > div {
overflow: hidden;
border: 0;
border-radius: var(--site-r-field);
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--site-outline);
& > button { min-height: 52px; padding: 0 16px; color: var(--site-text); font: var(--site-w-strong) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font); cursor: pointer; }
& > button > svg { width: var(--site-icon-md); height: var(--site-icon-md); color: var(--site-muted); }
& > div { padding: 4px 16px 12px; border-top: 1px solid var(--site-border); }
& a { min-height: 44px; }
}
}
}