...
...
2. We need to avoid the anchor link wrapping onto a new line by itself like this because it looks
broken:
Some heading text
⛓
3. To achieve this we add an area of padding to the end of the heading and move the link over this
padding using negative margin:
padding-inline-end creates space at the end of the line
↓
Some heading text[ ]⛓
margin-inline-start then pulls the anchor link into that space
↓
Some heading text[ ⛓ ]
This ensures that when the anchor link wraps, the final word in the heading will wrap with it.
*/
@layer starlight.content {
/* ======================================================
WRAPPER
====================================================== */
.sl-markdown-content .sl-heading-wrapper {
/* The size of the SVG icon. */
--sl-anchor-icon-size: 0.8275em;
/* The horizontal space between the SVG icon and the end of the heading text. */
--sl-anchor-icon-gap: 0.25em;
/* The end of line space required to accommodate the anchor link. */
--sl-anchor-icon-space: calc(var(--sl-anchor-icon-size) + var(--sl-anchor-icon-gap));
line-height: var(--sl-line-height-headings);
}
/* We need to apply the same rule we use for heading spacing to the parent wrapper. */
.sl-markdown-content
:not(h1, h2, h3, h4, h5, h6, .sl-heading-wrapper)
+ :is(.sl-heading-wrapper) {
margin-top: 1.5em;
}
/* These font sizes are set in `markdown.css` for heading elements, but we need them one level higher on the wrapper. */
.sl-markdown-content .sl-heading-wrapper.level-h1 {
font-size: var(--sl-text-h1);
}
.sl-markdown-content .sl-heading-wrapper.level-h2 {
font-size: var(--sl-text-h2);
}
.sl-markdown-content .sl-heading-wrapper.level-h3 {
font-size: var(--sl-text-h3);
}
.sl-markdown-content .sl-heading-wrapper.level-h4 {
font-size: var(--sl-text-h4);
}
.sl-markdown-content .sl-heading-wrapper.level-h5 {
font-size: var(--sl-text-h5);
}
.sl-markdown-content .sl-heading-wrapper.level-h6 {
font-size: var(--sl-text-h6);
}
/* ======================================================
HEADING
====================================================== */
.sl-markdown-content .sl-heading-wrapper > :first-child {
display: inline;
/* Apply end-of-line padding to the heading element. */
padding-inline-end: var(--sl-anchor-icon-space);
}
/* ======================================================
LINK
====================================================== */
.sl-markdown-content .sl-anchor-link {
position: relative;
/* Move the anchor link over the heading element’s end-of-line padding. */
margin-inline-start: calc(-1 * var(--sl-anchor-icon-size));
/* Prevent double or triple clicks from potentially selecting the anchor link a11y text. */
-webkit-user-select: none;
user-select: none;
/* Prevent double clicks on the last word (or single word) of a heading to include an extra new
line in Chrome and Safari. */
display: inline-flex;
}
/* Increase clickable area for anchor links with a pseudo element that doesn’t impact layout. */
.sl-markdown-content .sl-anchor-link::after {
content: '';
position: absolute;
/* While most icon spacing is done with `em` to be relative to the heading font-size, increasing
the touch area is most important for smaller headings like h5/h6, so we use absolute units,
which have a diminishing impact at larger font-sizes. */
inset: -0.25rem -0.5rem;
}
/* Size and position the SVG icon inside the link. */
.sl-markdown-content .sl-anchor-icon > svg {
display: inline;
width: var(--sl-anchor-icon-size);
/* Center the link icon SVG vertically in the line. */
vertical-align: top;
transform: translateY(
calc((var(--sl-line-height-headings) * 1em - var(--sl-anchor-icon-size)) / 2)
);
}
/* On devices with hover capability, hide the anchor link icons and show only show them when focused
or when the heading is hovered. */
@media (hover: hover) {
.sl-markdown-content .sl-anchor-link {
opacity: 0;
}
.sl-markdown-content .sl-anchor-link:focus,
.sl-markdown-content .sl-heading-wrapper:hover .sl-anchor-link {
opacity: 1;
}
}
}
@layer starlight.core {
.sl-banner:where(.astro-y5d7njgm) {
--__sl-banner-text: var(--sl-color-banner-text, var(--sl-color-text-invert));
padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
background-color: var(--sl-color-banner-bg, var(--sl-color-bg-accent));
color: var(--__sl-banner-text);
line-height: var(--sl-line-height-headings);
text-align: center;
text-wrap: balance;
box-shadow: var(--sl-shadow-sm);
}
.sl-banner:where(.astro-y5d7njgm) a {
color: var(--__sl-banner-text);
}
}
@layer starlight.core {
.content-panel:where(.astro-oil7k7jf) {
padding: 1.5rem var(--sl-content-pad-x);
}
.content-panel:where(.astro-oil7k7jf) + .content-panel:where(.astro-oil7k7jf) {
border-top: 1px solid var(--sl-color-hairline);
}
.sl-container:where(.astro-oil7k7jf) {
max-width: var(--sl-content-width);
}
.sl-container:where(.astro-oil7k7jf) > * + * {
margin-top: 1.5rem;
}
@media (width >= 72rem) {
.sl-container:where(.astro-oil7k7jf) {
margin-inline: var(--sl-content-margin-inline, auto);
}
}
}
@layer starlight.core {
p:where(.astro-3rf4otau) {
border: 1px solid var(--sl-color-orange);
padding: .75em 1em;
background-color: var(--sl-color-orange-low);
color: var(--sl-color-orange-high);
width: max-content;
max-width: 100%;
align-items: center;
gap: .75em;
font-size: var(--sl-text-body-sm);
line-height: var(--sl-line-height-headings);
text-align: start;
}
}
@layer starlight.components {
.sl-link-button:where(.astro-hlbqph7b) {
align-items: center;
border: 1px solid #0000;
border-radius: 999rem;
display: inline-flex;
font-size: var(--sl-text-sm);
gap: .5em;
line-height: 1.1875;
outline-offset: .25rem;
padding: .4375rem 1.125rem;
text-decoration: none;
}
.sl-link-button:where(.astro-hlbqph7b).primary {
background: var(--sl-color-text-accent);
border-color: var(--sl-color-text-accent);
color: var(--sl-color-black);
}
.sl-link-button:where(.astro-hlbqph7b).primary:hover {
color: var(--sl-color-black);
}
.sl-link-button:where(.astro-hlbqph7b).secondary {
border-color: inherit;
color: var(--sl-color-white);
}
.sl-link-button:where(.astro-hlbqph7b).minimal {
color: var(--sl-color-white);
padding-inline: 0;
}
.sl-link-button:where(.astro-hlbqph7b) svg {
flex-shrink: 0;
}
@media (width >= 50rem) {
.sl-link-button:where(.astro-hlbqph7b) {
font-size: var(--sl-text-base);
padding: .9375rem 1.25rem;
}
}
.sl-markdown-content .sl-link-button:where(.astro-hlbqph7b) {
margin-inline-end: 1rem;
}
.sl-markdown-content .sl-link-button:where(.astro-hlbqph7b):not(:where(p *)) {
margin-block: 1rem;
}
}
@layer starlight.core {
.hero:where(.astro-q2ezz3gc) {
display: grid;
grid-template-columns: 100%;
align-items: center;
gap: 1rem;
padding-bottom: 1rem;
}
.hero:where(.astro-q2ezz3gc) > img:where(.astro-q2ezz3gc), .hero:where(.astro-q2ezz3gc) > .hero-html:where(.astro-q2ezz3gc) {
object-fit: contain;
width: min(70%, 20rem);
height: auto;
margin-inline: auto;
}
.stack:where(.astro-q2ezz3gc) {
flex-direction: column;
gap: clamp(1.5rem, 1.5rem + 1vw, 2rem);
text-align: center;
}
.copy:where(.astro-q2ezz3gc) {
flex-direction: column;
gap: 1rem;
align-items: center;
}
.copy:where(.astro-q2ezz3gc) > :where(.astro-q2ezz3gc) {
max-width: 50ch;
}
h1:where(.astro-q2ezz3gc) {
font-size: clamp(var(--sl-text-3xl), calc(.25rem + 5vw), var(--sl-text-6xl));
line-height: var(--sl-line-height-headings);
font-weight: 600;
color: var(--sl-color-white);
}
.tagline:where(.astro-q2ezz3gc) {
font-size: clamp(var(--sl-text-base), calc(.0625rem + 2vw), var(--sl-text-xl));
color: var(--sl-color-gray-2);
}
.actions:where(.astro-q2ezz3gc) {
gap: 1rem 2rem;
flex-wrap: wrap;
justify-content: center;
}
@media (width >= 50rem) {
.hero:where(.astro-q2ezz3gc) {
grid-template-columns: 7fr 4fr;
gap: 3%;
padding-block: clamp(2.5rem, 1rem + 10vmin, 10rem);
}
.hero:where(.astro-q2ezz3gc) > img:where(.astro-q2ezz3gc), .hero:where(.astro-q2ezz3gc) > .hero-html:where(.astro-q2ezz3gc) {
order: 2;
width: min(100%, 25rem);
}
.stack:where(.astro-q2ezz3gc) {
text-align: start;
}
.copy:where(.astro-q2ezz3gc) {
align-items: flex-start;
}
.actions:where(.astro-q2ezz3gc) {
justify-content: flex-start;
}
}
}
@layer starlight.content {
.sl-markdown-content
:not(a, strong, em, del, span, input, code, br)
+ :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
margin-top: var(--sl-content-gap-y);
}
/* Vertical spacing between Markdown content blocks and UI Framework components using client directives. */
.sl-markdown-content
:not(a, strong, em, del, span, input, code, br)
+ :is(astro-island, astro-slot)
> :not(a, strong, em, del, span, input, code, br, :where(.not-content *)):first-child {
margin-top: var(--sl-content-gap-y);
}
/* Headings after non-headings have more spacing. */
.sl-markdown-content
:not(h1, h2, h3, h4, h5, h6)
+ :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
margin-top: 1.5em;
}
.sl-markdown-content li + li:not(:where(.not-content *)),
.sl-markdown-content dt + dt:not(:where(.not-content *)),
.sl-markdown-content dt + dd:not(:where(.not-content *)),
.sl-markdown-content dd + dd:not(:where(.not-content *)) {
margin-top: 0.25rem;
}
.sl-markdown-content li:not(:where(.not-content *)) {
overflow-wrap: anywhere;
}
/*
* This complex selector manages spacing inside lists.
*
* - Finds all lists containing items with non-inline direct children (e.g.
* ul > li > p)
* - Applies a bottom margin to the last non-inline child of each list item
* in this list
*
* This ensures that even if only one list item contains a block element
* (most commonly a paragraph), siblings of that list item are spaced
* consistently.
*/
.sl-markdown-content
:is(ol, ul):has(> li > :not(a, strong, em, del, span, input, code, br, script, ol, ul))
> li
> :is(
:last-child:not(a, strong, em, del, span, input, code, br, script, :where(.not-content *)),
/*
* For list items ending with 1 or multiple script elements (`:has(~
* script:last-child)`), we need to style the last non-script
* element (`:not(script)`) that doesn't have a subsequent sibling
* that is not a script (`:not(:has(~ :not(script)))`).
*/
:not(script):has(~ script:last-child):not(:has(~ :not(script)))
) {
margin-bottom: 1.25rem;
}
.sl-markdown-content dt:not(:where(.not-content *)) {
font-weight: 700;
}
.sl-markdown-content dd:not(:where(.not-content *)) {
padding-inline-start: 1rem;
}
.sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
color: var(--sl-color-white);
line-height: var(--sl-line-height-headings);
font-weight: 600;
}
.sl-markdown-content :is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *)) {
display: block;
max-width: 100%;
height: auto;
}
.sl-markdown-content h1:not(:where(.not-content *)) {
font-size: var(--sl-text-h1);
}
.sl-markdown-content h2:not(:where(.not-content *)) {
font-size: var(--sl-text-h2);
}
.sl-markdown-content h3:not(:where(.not-content *)) {
font-size: var(--sl-text-h3);
}
.sl-markdown-content h4:not(:where(.not-content *)) {
font-size: var(--sl-text-h4);
}
.sl-markdown-content h5:not(:where(.not-content *)) {
font-size: var(--sl-text-h5);
}
.sl-markdown-content h6:not(:where(.not-content *)) {
font-size: var(--sl-text-h6);
}
.sl-markdown-content a:not(:where(.not-content *)) {
color: var(--sl-color-text-accent);
}
.sl-markdown-content a:hover:not(:where(.not-content *)) {
color: var(--sl-color-white);
}
.sl-markdown-content code:not(:where(.not-content *)) {
background-color: var(--sl-color-bg-inline-code);
margin-block: -0.125rem;
padding: 0.125rem 0.375rem;
font-size: var(--sl-text-code-sm);
}
.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) code {
font-size: inherit;
}
.sl-markdown-content pre:not(:where(.not-content *)) {
border: 1px solid var(--sl-color-gray-5);
padding: 0.75rem 1rem;
font-size: var(--sl-text-code);
tab-size: 2;
}
.sl-markdown-content pre code:not(:where(.not-content *)) {
all: unset;
font-family: var(--__sl-font-mono);
}
.sl-markdown-content blockquote:not(:where(.not-content *)) {
border-inline-start: 1px solid var(--sl-color-gray-5);
padding-inline-start: 1rem;
}
/* Table styling */
.sl-markdown-content table:not(:where(.not-content *)) {
display: block;
overflow: auto;
border-spacing: 0;
}
.sl-markdown-content :is(th, td):not(:where(.not-content *)) {
border-bottom: 1px solid var(--sl-color-gray-5);
padding: 0.5rem 1rem;
/* Align text to the top of the row in multiline tables. */
vertical-align: baseline;
}
.sl-markdown-content :is(th:first-child, td:first-child):not(:where(.not-content *)) {
padding-inline-start: 0;
}
.sl-markdown-content :is(th:last-child, td:last-child):not(:where(.not-content *)) {
padding-inline-end: 0;
}
.sl-markdown-content th:not(:where(.not-content *)) {
color: var(--sl-color-white);
font-weight: 600;
}
/* Align headings to the start of the line unless set by the `align` attribute. */
.sl-markdown-content th:not([align]):not(:where(.not-content *)) {
text-align: start;
}
/*
s,
s, and s inside asides */
.sl-markdown-content .starlight-aside :is(th, td, hr, blockquote):not(:where(.not-content *)) {
border-color: var(--sl-color-gray-4);
}
@supports (
border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent)
) {
.sl-markdown-content .starlight-aside :is(th, td, hr, blockquote):not(:where(.not-content *)) {
border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent);
}
}
/* inside asides */
@supports (
border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent)
) {
.sl-markdown-content .starlight-aside code:not(:where(.not-content *)) {
background-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent);
}
}
.sl-markdown-content hr:not(:where(.not-content *)) {
border: 0;
border-bottom: 1px solid var(--sl-color-hairline);
}
/* and styles */
.sl-markdown-content details:not(:where(.not-content *)) {
--sl-details-border-color: var(--sl-color-gray-5);
--sl-details-border-color--hover: var(--sl-color-text-accent);
border-inline-start: 2px solid var(--sl-details-border-color);
padding-inline-start: 1rem;
}
.sl-markdown-content details:not([open]):hover:not(:where(.not-content *)),
.sl-markdown-content details:has(> summary:hover):not(:where(.not-content *)) {
border-color: var(--sl-details-border-color--hover);
}
.sl-markdown-content summary:not(:where(.not-content *)) {
color: var(--sl-color-white);
cursor: pointer;
display: block; /* Needed to hide the default marker in some browsers. */
font-weight: 600;
/* Expand the outline so that the marker cannot distort it. */
margin-inline-start: -0.5rem;
padding-inline-start: 0.5rem;
}
.sl-markdown-content details[open] > summary:not(:where(.not-content *)) {
margin-bottom: 1rem;
}
/* marker styles */
.sl-markdown-content summary:not(:where(.not-content *))::marker,
.sl-markdown-content summary:not(:where(.not-content *))::-webkit-details-marker {
display: none;
}
.sl-markdown-content summary:not(:where(.not-content *))::before {
--sl-details-marker-size: 1.25rem;
background-color: currentColor;
content: '';
display: inline-block;
height: var(--sl-details-marker-size);
width: var(--sl-details-marker-size);
margin-inline: calc((var(--sl-details-marker-size) / 4) * -1) 0.25rem;
vertical-align: middle;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
.sl-markdown-content summary:not(:where(.not-content *))::before {
transition: transform 0.2s ease-in-out;
}
}
.sl-markdown-content details[open] > summary:not(:where(.not-content *))::before {
transform: rotateZ(90deg);
}
[dir='rtl'] .sl-markdown-content summary:not(:where(.not-content *))::before,
.sl-markdown-content [dir='rtl'] summary:not(:where(.not-content *))::before {
transform: rotateZ(180deg);
}
/* with only a paragraph automatically added when using MDX */
.sl-markdown-content summary:not(:where(.not-content *)) p:only-child {
display: inline;
}
/* styles inside asides */
.sl-markdown-content .starlight-aside details:not(:where(.not-content *)) {
--sl-details-border-color: var(--sl-color-asides-border);
--sl-details-border-color--hover: var(--sl-color-asides-text-accent);
}
}
@layer starlight.core {
button:where(.astro-vvx7mffu) {
position: fixed;
top: calc((var(--sl-nav-height) - var(--sl-menu-button-size)) / 2);
inset-inline-end: var(--sl-nav-pad-x);
z-index: var(--sl-z-index-navbar);
border: 0;
border-radius: 50%;
width: var(--sl-menu-button-size);
height: var(--sl-menu-button-size);
padding: .5rem;
background-color: var(--sl-color-white);
color: var(--sl-color-black);
box-shadow: var(--sl-shadow-md);
cursor: pointer;
}
:where(.astro-vvx7mffu)[aria-expanded="true"] button:where(.astro-vvx7mffu) {
background-color: var(--sl-color-gray-2);
box-shadow: none;
}
:where(.astro-vvx7mffu)[aria-expanded="true"] button:where(.astro-vvx7mffu) .open-menu:where(.astro-vvx7mffu) {
display: none;
}
:where(.astro-vvx7mffu):not([aria-expanded="true"]) button:where(.astro-vvx7mffu) .close-menu:where(.astro-vvx7mffu) {
display: none;
}
[data-theme="light"] button:where(.astro-vvx7mffu) {
background-color: var(--sl-color-black);
color: var(--sl-color-white);
}
[data-theme="light"] :where(.astro-vvx7mffu)[aria-expanded="true"] button:where(.astro-vvx7mffu) {
background-color: var(--sl-color-gray-5);
}
}
@layer starlight.core {
[data-mobile-menu-expanded] {
overflow: hidden;
}
@media (min-width: 50rem) {
[data-mobile-menu-expanded] {
overflow: auto;
}
}
}@layer starlight.core {
.page:where(.astro-gqpr5s5a) {
flex-direction: column;
min-height: 100vh;
}
.header:where(.astro-gqpr5s5a) {
z-index: var(--sl-z-index-navbar);
position: fixed;
inset-inline-start: 0;
inset-block-start: 0;
width: 100%;
height: var(--sl-nav-height);
border-bottom: 1px solid var(--sl-color-hairline-shade);
padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
padding-inline-end: var(--sl-nav-pad-x);
background-color: var(--sl-color-bg-nav);
}
[data-has-sidebar] .header:where(.astro-gqpr5s5a) {
padding-inline-end: calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size));
}
.sidebar-pane:where(.astro-gqpr5s5a) {
visibility: var(--sl-sidebar-visibility, hidden);
position: fixed;
z-index: var(--sl-z-index-menu);
inset-block: var(--sl-nav-height) 0;
inset-inline-start: 0;
width: 100%;
background-color: var(--sl-color-black);
overflow-y: auto;
scrollbar-gutter: stable;
}
[aria-expanded="true"] ~ .sidebar-pane:where(.astro-gqpr5s5a) {
--sl-sidebar-visibility: visible;
}
.sidebar-content:where(.astro-gqpr5s5a) {
height: 100%;
min-height: max-content;
padding: 1rem var(--sl-sidebar-pad-x) 0;
flex-direction: column;
gap: 1rem;
}
@media (width >= 50rem) {
.sidebar-content:where(.astro-gqpr5s5a):after {
content: "";
padding-bottom: 1px;
}
}
.main-frame:where(.astro-gqpr5s5a) {
padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
padding-inline-start: var(--sl-content-inline-start);
}
@media (width >= 50rem) {
[data-has-sidebar] .header:where(.astro-gqpr5s5a) {
padding-inline-end: var(--sl-nav-pad-x);
}
.sidebar-pane:where(.astro-gqpr5s5a) {
--sl-sidebar-visibility: visible;
width: var(--sl-sidebar-width);
background-color: var(--sl-color-bg-sidebar);
border-inline-end: 1px solid var(--sl-color-hairline-shade);
}
}
}
@layer starlight.core {
ul:where(.astro-cxyftcne) {
padding: 0;
list-style: none;
}
a:where(.astro-cxyftcne) {
--pad-inline: .5rem;
display: block;
border-radius: .25rem;
padding-block: .25rem;
padding-inline: calc(1rem * var(--depth) + var(--pad-inline)) var(--pad-inline);
line-height: 1.25;
}
a:where(.astro-cxyftcne)[aria-current="true"] {
color: var(--sl-color-text-accent);
}
.isMobile:where(.astro-cxyftcne) a:where(.astro-cxyftcne) {
--pad-inline: 1rem;
display: flex;
justify-content: space-between;
gap: var(--pad-inline);
border-top: 1px solid var(--sl-color-gray-6);
border-radius: 0;
padding-block: .5rem;
color: var(--sl-color-text);
font-size: var(--sl-text-sm);
text-decoration: none;
outline-offset: var(--sl-outline-offset-inside);
}
.isMobile:where(.astro-cxyftcne):first-child > li:where(.astro-cxyftcne):first-child > a:where(.astro-cxyftcne) {
border-top: 0;
}
.isMobile:where(.astro-cxyftcne) a:where(.astro-cxyftcne)[aria-current="true"], .isMobile:where(.astro-cxyftcne) a:where(.astro-cxyftcne)[aria-current="true"]:hover, .isMobile:where(.astro-cxyftcne) a:where(.astro-cxyftcne)[aria-current="true"]:focus {
color: var(--sl-color-white);
background-color: unset;
}
.isMobile:where(.astro-cxyftcne) a:where(.astro-cxyftcne)[aria-current="true"]:after {
content: "";
width: 1rem;
background-color: var(--sl-color-text-accent);
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==");
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
flex-shrink: 0;
}
}
@layer starlight.core {
.right-sidebar-panel:where(.astro-q5mffni3) {
padding: 1rem var(--sl-sidebar-pad-x);
}
.sl-container:where(.astro-q5mffni3) {
width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x));
}
.right-sidebar-panel:where(.astro-q5mffni3) h2 {
color: var(--sl-color-white);
font-size: var(--sl-text-h5);
font-weight: 600;
line-height: var(--sl-line-height-headings);
margin-bottom: .5rem;
}
.right-sidebar-panel:where(.astro-q5mffni3) :where(a) {
display: block;
font-size: var(--sl-text-xs);
text-decoration: none;
color: var(--sl-color-gray-3);
overflow-wrap: anywhere;
}
.right-sidebar-panel:where(.astro-q5mffni3) :where(a):hover {
color: var(--sl-color-white);
}
@media (width >= 72rem) {
.sl-container:where(.astro-q5mffni3) {
max-width: calc((
(
100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 *
var(--sl-sidebar-pad-x)
) * .25 /* MAGIC NUMBER 🥲 */
));
}
}
}
@layer starlight.core {
h1:where(.astro-2sm4b3ln) {
margin-top: 1rem;
font-size: var(--sl-text-h1);
line-height: var(--sl-line-height-headings);
font-weight: 600;
color: var(--sl-color-white);
}
}
.document-views:where(.astro-wuv23ryy) {
display: inline-flex;
align-items: center;
gap: .375rem;
margin-top: .75rem;
color: var(--sl-color-gray-2);
font-size: .875rem;
line-height: 1.5;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.document-views:where(.astro-wuv23ryy)[hidden] {
display: none;
}
.document-views:where(.astro-wuv23ryy) svg:where(.astro-wuv23ryy) {
flex: none;
}
@media print {
.document-views:where(.astro-wuv23ryy) {
display: none;
}
}
@layer starlight.core {
label:where(.astro-r2p65idu) {
--sl-label-icon-size: .875rem;
--sl-caret-size: 1.25rem;
--sl-inline-padding: .5rem;
position: relative;
display: flex;
align-items: center;
gap: .25rem;
color: var(--sl-color-gray-2);
}
label:where(.astro-r2p65idu):hover {
color: var(--sl-color-white);
}
.icon:where(.astro-r2p65idu) {
position: absolute;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
select:where(.astro-r2p65idu) {
border: 0;
padding-block: .625rem;
padding-inline: calc(var(--sl-label-icon-size) + var(--sl-inline-padding) + .25rem)
calc(var(--sl-caret-size) + var(--sl-inline-padding) + .25rem);
margin-inline: calc(var(--sl-inline-padding) * -1);
width: calc(var(--sl-select-width) + var(--sl-inline-padding) * 2);
background-color: #0000;
text-overflow: ellipsis;
color: inherit;
cursor: pointer;
appearance: none;
}
option:where(.astro-r2p65idu) {
background-color: var(--sl-color-bg-nav);
color: var(--sl-color-gray-1);
}
@media (width >= 50rem) {
select:where(.astro-r2p65idu) {
font-size: var(--sl-text-sm);
}
}
}
@layer starlight.components {
.label-icon:where(.astro-r2p65idu) {
font-size: var(--sl-label-icon-size);
inset-inline-start: 0;
}
.caret:where(.astro-r2p65idu) {
font-size: var(--sl-caret-size);
inset-inline-end: 0;
}
}
@layer starlight.core {
a:where(.astro-cg55etiy) {
color: var(--sl-color-text-accent);
padding: .5em;
margin: -.5em;
}
a:where(.astro-cg55etiy):hover {
color: var(--sl-color-white);
}
}
@layer starlight.core {
.social-icons:where(.astro-b5gddk54) {
display: flex;
margin-inline-end: auto;
gap: 1rem;
align-items: center;
padding-block: 1rem;
}
.social-icons:where(.astro-b5gddk54):empty {
display: none;
}
.mobile-preferences:where(.astro-b5gddk54) {
justify-content: space-between;
flex-wrap: wrap;
border-top: 1px solid var(--sl-color-gray-6);
column-gap: 1rem;
padding: .5rem 0;
}
}
@layer starlight.core {
sl-sidebar-state-persist:where(.astro-f5yvicm7) {
display: contents;
}
}
@layer starlight.components {
:root {
--sl-badge-default-border: var(--sl-color-accent);
--sl-badge-default-bg: var(--sl-color-accent-low);
--sl-badge-default-text: #fff;
--sl-badge-note-border: var(--sl-color-blue);
--sl-badge-note-bg: var(--sl-color-blue-low);
--sl-badge-note-text: #fff;
--sl-badge-danger-border: var(--sl-color-red);
--sl-badge-danger-bg: var(--sl-color-red-low);
--sl-badge-danger-text: #fff;
--sl-badge-success-border: var(--sl-color-green);
--sl-badge-success-bg: var(--sl-color-green-low);
--sl-badge-success-text: #fff;
--sl-badge-caution-border: var(--sl-color-orange);
--sl-badge-caution-bg: var(--sl-color-orange-low);
--sl-badge-caution-text: #fff;
--sl-badge-tip-border: var(--sl-color-purple);
--sl-badge-tip-bg: var(--sl-color-purple-low);
--sl-badge-tip-text: #fff;
}
[data-theme="light"]:root {
--sl-badge-default-bg: var(--sl-color-accent-high);
--sl-badge-note-bg: var(--sl-color-blue-high);
--sl-badge-danger-bg: var(--sl-color-red-high);
--sl-badge-success-bg: var(--sl-color-green-high);
--sl-badge-caution-bg: var(--sl-color-orange-high);
--sl-badge-tip-bg: var(--sl-color-purple-high);
}
.sl-badge:where(.astro-7hkzaclv) {
display: inline-block;
border: 1px solid var(--sl-color-border-badge);
border-radius: .25rem;
font-family: var(--sl-font-system-mono);
line-height: normal;
color: var(--sl-color-text-badge);
background-color: var(--sl-color-bg-badge);
overflow-wrap: anywhere;
}
.sidebar-content .sl-badge:where(.astro-7hkzaclv) {
line-height: 1;
font-size: var(--sl-text-xs);
padding: .125rem .375rem;
}
.sidebar-content a[aria-current="page"] > .sl-badge:where(.astro-7hkzaclv) {
--sl-color-bg-badge: transparent;
--sl-color-border-badge: currentColor;
color: inherit;
}
.default:where(.astro-7hkzaclv) {
--sl-color-bg-badge: var(--sl-badge-default-bg);
--sl-color-border-badge: var(--sl-badge-default-border);
--sl-color-text-badge: var(--sl-badge-default-text);
}
.note:where(.astro-7hkzaclv) {
--sl-color-bg-badge: var(--sl-badge-note-bg);
--sl-color-border-badge: var(--sl-badge-note-border);
--sl-color-text-badge: var(--sl-badge-note-text);
}
.danger:where(.astro-7hkzaclv) {
--sl-color-bg-badge: var(--sl-badge-danger-bg);
--sl-color-border-badge: var(--sl-badge-danger-border);
--sl-color-text-badge: var(--sl-badge-danger-text);
}
.success:where(.astro-7hkzaclv) {
--sl-color-bg-badge: var(--sl-badge-success-bg);
--sl-color-border-badge: var(--sl-badge-success-border);
--sl-color-text-badge: var(--sl-badge-success-text);
}
.tip:where(.astro-7hkzaclv) {
--sl-color-bg-badge: var(--sl-badge-tip-bg);
--sl-color-border-badge: var(--sl-badge-tip-border);
--sl-color-text-badge: var(--sl-badge-tip-text);
}
.caution:where(.astro-7hkzaclv) {
--sl-color-bg-badge: var(--sl-badge-caution-bg);
--sl-color-border-badge: var(--sl-badge-caution-border);
--sl-color-text-badge: var(--sl-badge-caution-text);
}
.small:where(.astro-7hkzaclv) {
font-size: var(--sl-text-xs);
padding: .125rem .25rem;
}
.medium:where(.astro-7hkzaclv) {
font-size: var(--sl-text-sm);
padding: .175rem .35rem;
}
.large:where(.astro-7hkzaclv) {
font-size: var(--sl-text-base);
padding: .225rem .45rem;
}
.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) .sl-badge:where(.astro-7hkzaclv) {
vertical-align: middle;
}
}
@layer starlight.core {
ul:where(.astro-ojxuodky) {
--sl-sidebar-item-padding-inline: .5rem;
list-style: none;
padding: 0;
}
li:where(.astro-ojxuodky) {
overflow-wrap: anywhere;
}
ul:where(.astro-ojxuodky) ul:where(.astro-ojxuodky) li:where(.astro-ojxuodky) {
margin-inline-start: var(--sl-sidebar-item-padding-inline);
border-inline-start: 1px solid var(--sl-color-hairline-light);
padding-inline-start: var(--sl-sidebar-item-padding-inline);
}
.large:where(.astro-ojxuodky) {
font-size: var(--sl-text-lg);
font-weight: 600;
color: var(--sl-color-white);
}
.top-level:where(.astro-ojxuodky) > li:where(.astro-ojxuodky) + li:where(.astro-ojxuodky) {
margin-top: .75rem;
}
summary:where(.astro-ojxuodky) {
display: flex;
align-items: center;
justify-content: space-between;
padding: .2em var(--sl-sidebar-item-padding-inline);
line-height: 1.4;
cursor: pointer;
user-select: none;
}
summary:where(.astro-ojxuodky)::marker, summary:where(.astro-ojxuodky)::-webkit-details-marker {
display: none;
}
.caret:where(.astro-ojxuodky) {
transition: transform .2s ease-in-out;
flex-shrink: 0;
}
[dir="rtl"] .caret:where(.astro-ojxuodky) {
transform: rotateZ(180deg);
}
:where(.astro-ojxuodky)[open] > summary:where(.astro-ojxuodky) .caret:where(.astro-ojxuodky) {
transform: rotateZ(90deg);
}
a:where(.astro-ojxuodky) {
display: block;
border-radius: .25rem;
text-decoration: none;
color: var(--sl-color-gray-2);
padding: .3em var(--sl-sidebar-item-padding-inline);
line-height: 1.4;
}
a:where(.astro-ojxuodky):hover, a:where(.astro-ojxuodky):focus {
color: var(--sl-color-white);
}
:where(.astro-ojxuodky)[aria-current="page"], :where(.astro-ojxuodky)[aria-current="page"]:hover, :where(.astro-ojxuodky)[aria-current="page"]:focus {
font-weight: 600;
color: var(--sl-color-text-invert);
background-color: var(--sl-color-text-accent);
}
a:where(.astro-ojxuodky) > :where(.astro-ojxuodky):not(:last-child), .group-label:where(.astro-ojxuodky) > :where(.astro-ojxuodky):not(:last-child) {
margin-inline-end: .25em;
}
@media (width >= 50rem) {
.top-level:where(.astro-ojxuodky) > li:where(.astro-ojxuodky) + li:where(.astro-ojxuodky) {
margin-top: .5rem;
}
.large:where(.astro-ojxuodky) {
font-size: var(--sl-text-base);
}
a:where(.astro-ojxuodky) {
font-size: var(--sl-text-sm);
}
}
}
@layer starlight.core {
a:where(.astro-vxeigawq) {
clip: rect(0, 0, 0, 0);
position: fixed;
top: .75rem;
inset-inline-start: .75rem;
}
a:where(.astro-vxeigawq):focus {
clip: unset;
z-index: var(--sl-z-index-skiplink);
display: block;
padding: .5rem 1rem;
text-decoration: none;
color: var(--sl-color-text-invert);
background-color: var(--sl-color-text-accent);
box-shadow: var(--sl-shadow-lg);
}
}
@layer starlight.core {
.main-pane:where(.astro-abfeecmu) {
isolation: isolate;
}
@media (width >= 72rem) {
.right-sidebar-container:where(.astro-abfeecmu) {
order: 2;
position: relative;
width: max(var(--sl-sidebar-width),
calc(var(--sl-sidebar-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2));
}
.right-sidebar:where(.astro-abfeecmu) {
position: fixed;
top: 0;
border-inline-start: 1px solid var(--sl-color-hairline);
padding-top: var(--sl-nav-height);
width: 100%;
height: 100vh;
overflow-y: auto;
scrollbar-width: none;
}
.main-pane:where(.astro-abfeecmu) {
width: 100%;
}
[data-has-sidebar][data-has-toc] .main-pane:where(.astro-abfeecmu) {
--sl-content-margin-inline: auto 0;
order: 1;
width: min(calc(100% - var(--sl-sidebar-width)),
calc(var(--sl-content-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2));
}
}
}
html:not([data-has-toc]) {
--sl-mobile-toc-height: 0rem;
}
html:not([data-has-sidebar]) {
--sl-content-width: 67.5rem;
}
html {
scroll-padding-top: calc(1.5rem + var(--sl-nav-height) + var(--sl-mobile-toc-height));
}
main:where(.astro-vdxcvpsm) {
padding: var(--sl-main-pad);
}
@media (width >= 50em) {
:where(.astro-vdxcvpsm)[data-has-sidebar] {
--sl-content-inline-start: var(--sl-sidebar-width);
}
}
@media (width >= 72em) {
html {
scroll-padding-top: calc(1.5rem + var(--sl-nav-height));
}
}