@font-face {
    font-family: 'Google Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'Google Sans Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/mono.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

:root {
    font-family: 'Google Sans', Roboto, system-ui;
    --md-ref-typeface-plain: 'Google Sans', Roboto, system-ui;
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    --catalog-display-xl-font-size: 88px;
    --catalog-display-m-font-size: 45px;
    --catalog-title-l-font-size: 22px;
    --catalog-title-m-font-size: 16px;
    --catalog-title-s-font-size: 14px;
    --catalog-body-l-font-size: 16px;
    --catalog-body-m-font-size: 14px;
    --catalog-headline-s-font-size: 24px;
    --catalog-label-s-font-size: 11px;
    --catalog-shape-xl: 28px;
    --catalog-shape-l: 16px;
    --catalog-shape-m: 12px;
    --catalog-shape-s: 8px;
    --catalog-shape-xs: 4px;
    --catalog-spacing-xl: 28px;
    --catalog-spacing-l: 16px;
    --catalog-spacing-m: 12px;
    --catalog-spacing-s: 8px;
    --catalog-top-app-bar-height: calc(48px + 2 * var(--catalog-spacing-m));
    scroll-padding-block-start: calc(var(--catalog-top-app-bar-height) + var(--catalog-top-app-bar-padding-block) * 2)
}

@media screen and (max-width:600px) {
    :root {
        --catalog-display-xl-font-size: 55px;
        --catalog-title-l-font-size: 16px;
        --catalog-body-l-font-size: 14px;
        --catalog-body-m-font-size: 12px;
        --catalog-spacing-xl: 16px;
        --catalog-spacing-l: 12px
    }
}

strong {
    -webkit-font-smoothing: antialiased
}

body {
    margin: 0;
    font-size: var(--catalog-body-l-font-size)
}

a {
    color: var(--md-sys-color-primary);
    text-decoration: none
}

a:focus-visible,
a:hover {
    text-decoration: underline
}

nav-drawer md-list.nav md-list-item[href][selected] {
    background-color: var(--md-sys-color-surface-container-highest)
}

nav-drawer md-list.nav md-list-item::part(focus-ring) {
    --md-focus-ring-shape: var(--catalog-shape-xl)
}

@media (forced-colors:active) {
    nav-drawer md-list.nav md-list-item[href][selected] {
        border: 4px double CanvasText
    }

    nav-drawer md-list.nav md-list-item[href] {
        border-radius: var(--catalog-shape-xl);
        border: 1px solid CanvasText
    }
}

nav-drawer md-list.nav {
    --md-list-container-color: transparent;
    display: block;
    margin-inline: var(--catalog-spacing-m);
    min-width: unset
}

nav-drawer md-list.nav md-list-item[href] {
    margin-block: var(--catalog-spacing-m);
    display: block;
    --md-focus-ring-shape: var(--catalog-shape-xl);
    border-radius: var(--catalog-shape-xl)
}

nav-drawer md-list.nav md-item [slot=headline] {
    padding: block 2px
}

nav-drawer md-list.nav md-item:first-of-type {
    padding-block: 0
}

nav-drawer md-list.nav md-item {
    font-size: var(--catalog-headline-s-font-size);
    padding-block-end: 0
}

nav-drawer md-list.nav md-item+md-list-item[href] {
    margin-block-start: 0
}

h1 {
    font-size: var(--catalog-display-xl-font-size)
}

.toc ol {
    list-style-type: none;
    font-size: var(--catalog-body-m-font-size)
}

.toc>ol {
    padding: 0
}

.toc>ol ol {
    list-style-type: circle;
    padding-inline-start: var(--catalog-spacing-xl)
}

.toc ol li {
    margin-block: var(--catalog-spacing-m)
}