@font-face {
    font-family: "Roboto";
    src: url("/fonts/Roboto-Latin-VariableFont_wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("/fonts/Roboto-Italic-Latin-VariableFont_wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@layer normalize {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html {
        font-family: system-ui, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
    }

    body {
        margin: 0;
    }

    b, strong {
        font-weight: bolder;
    }

    code, kbd, samp, pre {
        font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
        font-size: 1em;
    }

    small {
        font-size: 80%;
    }

    sub, sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    table {
        border-color: currentColor;
    }

    button, input, optgroup, select, textarea {
        font-family: inherit;
        font-size: 100%;
        line-height: 1.15;
        margin: 0;
    }

    button, *[type="button"], *[type="reset"], *[type="submit"] {
        appearance: button;
    }

    legend {
        padding: 0;
    }

    progress {
        vertical-align: baseline;
    }

    *::-webkit-inner-spin-button, *::-webkit-outer-spin-button {
        height: auto;
    }

    *[type="search"] {
        appearance: textfield;
        outline-offset: -2px;
    }

    *::-webkit-search-decoration {
        appearance: none;
    }

    *::file-selector-button {
        appearance: button;
        font: inherit;
    }

    summary {
        display: list-item;
    }
}

@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
        margin-block-end: 0;
    }

    ul[role="list"], ol[role="list"] {
        list-style: none;
    }

    body {
        min-height: 100vh;
        line-height: 1.5;
    }

    h1, h2, h3, h4, button, input, label {
        line-height: 1.1;
    }

    h1, h2, h3, h4 {
        text-wrap: balance;
    }

    a:not(*[class]) {
        text-decoration-skip-ink: auto;
        color: currentColor;
    }

    img, picture {
        max-width: 100%;
        display: block;
    }

    input, button, textarea, select {
        font-family: inherit;
        font-size: inherit;
    }

    textarea:not(*[rows]) {
        min-height: 10em;
    }
}

@layer global {
    html {
        --space-half: 0.25rem;
        --space-base: 0.5rem;
        --space-base-and-half: 0.75rem;
        --space-double: 1rem;
        --space-triple: 1.5rem;
        --space-quadruple: 2rem;
        --space-three-doubles: 3rem;
        --space-four-doubles: 4rem;
        --space-seven-doubles: 7rem;
        --border-thin: 1px;
        --border-thick: 2px;
        --border-focus: 4px;
        --border-focus-gap: 2px;
        --border-heavy: 8px;
        --font-size-small: 0.875rem;
        --font-size-body: 1.125rem;
        --font-size-label: 1rem;
        --font-size-code: 1rem;
        --font-size-bullet: 1.25rem;
        --font-size-title: 1.125rem;
        --font-size-subtitle: 1.5rem;
        --font-size-hero: 3rem;
        --font-size-display: 4.5rem;
        --font-size-numeral: 6.25rem;
        --font-size-small-title: 0.875rem;
        --font-size-small-label: 0.875rem;
        --font-size-label-title: 1rem;
        --font-size-tiny: 0.75rem;
        --line-height-small: 1.375rem;
        --line-height-body: 1.75rem;
        --line-height-label: 1.5rem;
        --line-height-code: 1.75rem;
        --line-height-bullet: 1.75rem;
        --line-height-title: 1.75rem;
        --line-height-subtitle: 2.5rem;
        --line-height-hero: 4rem;
        --line-height-display: 5.25rem;
        --line-height-numeral: 4.4375rem;
        --line-height-small-title: 1.25rem;
        --line-height-small-label: 1rem;
        --line-height-label-title: 1.5rem;
        --line-height-tiny: 1rem;
        --font-weight-small: normal;
        --font-weight-body: normal;
        --font-weight-label: normal;
        --font-weight-code: normal;
        --font-weight-bullet: normal;
        --font-weight-title: 600;
        --font-weight-subtitle: 600;
        --font-weight-hero: 900;
        --font-weight-display: 900;
        --font-weight-numeral: 900;
        --font-weight-small-title: 600;
        --font-weight-small-label: normal;
        --font-weight-label-title: 600;
        --font-weight-tiny: normal;
        --color-primary: rgb(115 44 2);
        --color-primary-light: rgb(173 92 50);
        --color-secondary: rgb(251 227 206);
        --color-secondary-dark: rgb(240 161 93);
        --color-secondary-light: rgb(253 242 233);
        --color-text: rgb(30 30 30);
        --color-text-muted: rgb(110 110 110);
        --color-text-muted-on-peach: rgb(98 98 98);
        --color-white: white;
        --color-link: rgb(26 115 232);
        --color-link-visited: rgb(128 0 128);
        --color-focus: rgb(13 110 253);
        --color-youtube: rgb(196 55 52);
        --color-attention: rgb(255 221 0);
        --color-black: rgb(0 0 0);
        --color-grey-tint: rgb(250 250 250);
        --color-canvas: rgb(244 244 245);
        --color-border: rgb(228 228 228);
        --color-separator: rgb(240 240 241);
        --color-info: rgb(25 113 194);
        --color-info-light: rgb(231 245 255);
        --color-info-border: rgb(165 216 255);
        --color-error: rgb(204 0 0);
        --color-error-light: rgb(255 245 245);
        --color-error-border: rgb(255 201 201);
        --color-success: rgb(47 158 68);
        --width-content: 75rem;
        --width-reading: 37.5rem;
        --width-gutter: 2rem;
        --width-rail: 20rem;
        --width-button: 11rem;
        --width-reel: 23.75rem;
        --width-table-column: 6rem;
        --width-target: 1.5rem;
        --width-control: 3rem;
        --width-bar: 4rem;
        --round-half: 0.25rem;
        --round-base: 0.5rem;
        --layer-top: 10;
        --layer-bar: 5;
        --layer-raised: 1;
        --shadow-raised: 0 2px 1px -1px rgb(0 0 0 / 0.14), 0 1px 1px 0px rgb(0 0 0 / 0.1), 0 1px 3px 0px rgb(0 0 0 / 0.08);
        --shadow-raised-hover: 0 2px 3px -1px rgb(0 0 0 / 0.12), 0 3px 4px 0px rgb(0 0 0 / 0.08), 0 1px 8px 0px rgb(0 0 0 / 0.06);
        --shadow-overlay: 0 -8px 28px 0px rgb(0 0 0 / 0.24), 0 -2px 6px 0px rgb(0 0 0 / 0.12);
        --shadow-edge: 0 1px 2px 0px rgb(0 0 0 / 0.06), 0 4px 12px 0px rgb(0 0 0 / 0.08);
        --motion-hover: 200ms;
        --motion-press: 90ms;
        --motion-enter: 500ms;
        --motion-slide: 250ms;
        --motion-pulse: 1200ms;
    }

    *, *::before, *::after {
        margin: 0;
    }

    *:focus-visible:where(*:not(.focus-target)) {
        outline: var(--border-focus) solid var(--color-focus);
        outline-offset: var(--border-focus-gap);
        box-shadow: 0 0 0 var(--border-focus-gap) var(--color-white);
    }

    html {
        color-scheme: light;
        scrollbar-gutter: stable;
    }

    body {
        font-family: "Roboto", sans-serif;
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
        font-weight: var(--font-weight-body);
        background: var(--color-white);
        color: var(--color-text);
        --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
        --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
        --link-color: var(--color-link);
        --link-visited-color: var(--color-link-visited);
        --muted-color: var(--color-text-muted);
        overflow-wrap: anywhere;
    }

    svg, video, canvas, iframe {
        display: block;
    }

    video, canvas {
        max-width: 100%;
    }

    img, video {
        height: auto;
    }

    ul[role="list"], ol[role="list"] {
        padding: 0;
    }

    strong {
        font-weight: 600;
    }

    a {
        text-decoration-line: none;
    }

    button, input, textarea {
        background: none;
        border: none;
        padding: 0;
        color: inherit;
    }

    button, th {
        text-align: start;
    }

    iframe {
        border: none;
    }

    dialog {
        border: none;
        padding: 0;
        max-width: none;
        max-height: none;
        background: none;
        color: inherit;

        &::backdrop {
            background: none;
        }
    }

    html:has(dialog:modal) {
        overflow: hidden;
    }

    button:enabled:not(*[aria-disabled="true"]) {
        cursor: pointer;
    }

    button {
        touch-action: manipulation;
    }

    *[id="elm-pages-announcer"] {
        display: none;
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            transition-property: none !important;
            animation-name: none !important;
        }
    }
}

@keyframes scrolled-under {
    100% {
        box-shadow: var(--shadow-edge);
    }
}

.frame {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.frame-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.focus-target:focus {
    outline-style: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.header {
    position: sticky;
    top: 0;
    display: flex;
    z-index: var(--layer-bar);
    background: var(--color-white);
    color: var(--color-text);
    --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
    --link-color: var(--color-link);
    --link-visited-color: var(--color-link-visited);
    --muted-color: var(--color-text-muted);
    padding-top: env(safe-area-inset-top, 0px);
    box-shadow: 0 var(--border-thin) var(--color-border);
    transition: translate var(--motion-slide) ease;
    animation: linear both scrolled-under;
    animation-timeline: scroll(nearest);
    animation-range: 0 var(--space-triple);

    html:not(*:has(&:focus-within)) {
        scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--space-four-doubles) + var(--space-double));
    }
}

.header-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--width-rail);
    flex-shrink: 0;
    padding-inline-start: var(--space-double);
    padding-inline-end: var(--space-base);
    border-inline-end: var(--border-thin) solid var(--color-border);
}

.header-bar {
    margin-inline: auto;
    width: 100%;
    padding-left: max(var(--space-double), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-double), env(safe-area-inset-right, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--width-bar);

    &.content {
        max-width: var(--width-content);
    }
}

.header-end {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    translate: var(--space-double);
    margin-inline-start: auto;
}

@media (width < 37.5rem) {
    .header {
        &[data-away]:not(*:has(*:focus-visible)) {
            translate: 0 -100%;
        }
    }
}

.tile-nav-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-double);
    background-image: linear-gradient(transparent calc(50% - var(--border-thick) * 0.5), var(--color-border) calc(50% - var(--border-thick) * 0.5) calc(calc(50% - var(--border-thick) * 0.5) + var(--border-thick)), transparent calc(calc(50% - var(--border-thick) * 0.5) + var(--border-thick)));
}

.tile-nav-item {
    display: flex;
    align-items: center;
    min-width: 0;
}

.tile-nav-link {
    color: inherit;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
}

.tile-nav-card {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-base);
    padding: var(--space-base);
    background: var(--color-canvas);
    color: var(--color-text);
    --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
    --link-color: var(--color-info);
    --link-visited-color: var(--color-link-visited);
    --muted-color: var(--color-text-muted);
    border-radius: var(--round-base);
    border: var(--border-thin) solid var(--color-border);
    box-shadow: inset 0 0 0 100vmax transparent;
    transition: box-shadow var(--motion-hover) ease-out;

    *:has(> &) {
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        *:not(*[aria-disabled="true"]):hover > & {
            box-shadow: inset 0 0 0 100vmax var(--state-hover);
        }
    }

    *:not(*[aria-disabled="true"]):active > & {
        box-shadow: inset 0 0 0 100vmax var(--state-pressed);
        transition-duration: var(--motion-press);
    }

    *[aria-current] > & {
        background: var(--color-secondary);
        color: var(--color-text);
        --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
        --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
        --link-color: var(--color-text);
        --link-visited-color: var(--color-text);
        --muted-color: var(--color-text-muted-on-peach);
    }
}

.tile-nav-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-text);
    --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
    --link-color: var(--color-link);
    --link-visited-color: var(--color-link-visited);
    --muted-color: var(--color-text-muted);
    color: var(--muted-color);
    border: var(--border-thick) solid var(--color-border);
    flex-shrink: 0;
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-small);

    *[aria-current] > .tile-nav-card > & {
        background: var(--color-primary);
        color: var(--color-white);
        --state-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
        --state-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
        --state-raised-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
        --state-raised-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
        --link-color: var(--color-white);
        --link-visited-color: var(--color-white);
        --muted-color: var(--color-white);
        border: var(--border-thick) solid var(--color-primary);
    }
}

.tile-nav-label {
    font-size: var(--font-size-label);
    line-height: var(--line-height-label);
    font-weight: var(--font-weight-label);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-nav-links-list {
    display: flex;
    align-items: center;
}

.site-nav-links-item {
    display: flex;
    align-items: center;
    padding-inline-end: var(--space-triple);
}

.site-nav-link {
    color: inherit;
    display: flex;
    align-items: center;
}

.site-nav-sheet {
    display: flex;
    align-items: center;
}

.site-nav-sheet-more {
    position: relative;

    &:not(*:first-child)::before {
        content: "";
        position: absolute;
        top: 0;
        inset-inline-start: calc(var(--space-double) + 1.5rem + var(--space-double));
        inset-inline-end: 0;
        border-top: var(--border-thin) solid var(--color-separator);
    }
}

.site-nav-sheet-follow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-quadruple);
    padding-block-start: var(--space-base);
}

.site-nav-sheet-support {
    padding-inline: var(--space-double);
    padding-block-start: var(--space-triple);
    padding-block-end: var(--space-double);
}

.screen {
    display: contents;

    &.phone {
        @media (width >= 37.5rem) {
            & {
                display: none;
            }
        }
    }

    &.tablet {
        @media (width < 37.5rem) {
            & {
                display: none;
            }
        }

        @media (width >= 75rem) {
            & {
                display: none;
            }
        }
    }

    &.desktop {
        @media (width < 75rem) {
            & {
                display: none;
            }
        }
    }

    &.phone-and-tablet {
        @media (width >= 75rem) {
            & {
                display: none;
            }
        }
    }

    &.tablet-and-desktop {
        @media (width < 37.5rem) {
            & {
                display: none;
            }
        }
    }

    &.narrow-desktop {
        @media (width < 75rem) {
            & {
                display: none;
            }
        }

        @media (width >= 100rem) {
            & {
                display: none;
            }
        }
    }

    &.tablet-and-wide-desktop {
        @media (width < 37.5rem) {
            & {
                display: none;
            }
        }

        @media (75rem <= width < 100rem) {
            & {
                display: none;
            }
        }
    }
}

.footer {
    background: var(--color-primary);
    color: var(--color-white);
    --state-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
    --link-color: var(--color-white);
    --link-visited-color: var(--color-white);
    --muted-color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: start;
}

.footer-nav {
    margin-inline: auto;
    width: 100%;
    max-width: var(--width-content);
    padding-left: max(var(--space-double), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-double), env(safe-area-inset-right, 0px));
    padding-block: var(--space-four-doubles);
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: var(--space-quadruple);
}

.footer-group {
    flex: 1 1 9rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-quadruple);
}

.footer-heading {
    font-size: var(--font-size-subtitle);
    line-height: var(--line-height-subtitle);
    font-weight: var(--font-weight-subtitle);
}

.footer-links {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-double);
}

.footer-links-item {
    display: flex;
    min-height: var(--width-target);
}

.footer-icons {
    display: flex;
    align-items: center;
    gap: var(--space-quadruple);
}

.footer-buttons {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-double);
}

.footer-bar {
    width: 100%;
    border-top: var(--border-thin) solid var(--color-secondary-dark);
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-block: var(--space-double);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-small);
}

.footer-copyright {
    margin-inline: auto;
    width: 100%;
    max-width: var(--width-content);
    padding-left: max(var(--space-double), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-double), env(safe-area-inset-right, 0px));
}

@media (width < 37.5rem) {
    .footer-group {
        &.icons {
            flex-basis: 100%;
        }
    }

    .footer-icons {
        display: flex;
        flex-wrap: wrap;
        align-items: start;
        gap: var(--space-double);
    }

    .footer-copyright {
        text-align: center;
    }
}

.link-text {
    color: var(--link-color);
    text-decoration-line: underline;

    &:visited {
        color: var(--link-visited-color);
    }
}

.link-text-new-tab {
    position: relative;
    padding-inline-end: calc(var(--space-half) + 1rem);
}

.link-text-new-tab-icon {
    position: absolute;
    left: var(--space-half);
    top: 50%;
    translate: 0 -50%;
    display: flex;
    align-items: center;
}

.link-icon {
    display: flex;
    align-items: center;

    &:focus-visible {
        outline-offset: calc(var(--border-focus) * -1);
        box-shadow: inset 0 0 0 calc(var(--border-focus) + var(--border-focus-gap)) var(--color-white);
    }
}

.link-logo {
    color: inherit;
    display: flex;
    align-items: center;
}

.link-logo-look {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--width-target);
    min-height: var(--width-target);
}

.link-button {
    display: flex;
    align-items: center;
}

.row-rail-section {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-base-and-half);
    min-height: var(--width-control);
    padding-block: var(--space-base);
    padding-inline-start: var(--space-double);
    padding-inline-end: var(--space-three-doubles);
    box-shadow: inset 0 0 0 100vmax transparent;
    transition: box-shadow var(--motion-hover) ease-out;

    *:has(> &) {
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        *:not(*[aria-disabled="true"]):hover > & {
            box-shadow: inset 0 0 0 100vmax var(--state-hover);
        }
    }

    *:not(*[aria-disabled="true"]):active > & {
        box-shadow: inset 0 0 0 100vmax var(--state-pressed);
        transition-duration: var(--motion-press);
    }

    &.here {
        position: relative;
        background: var(--color-secondary-light);
        color: var(--color-text);
        --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
        --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
        --link-color: var(--color-text);
        --link-visited-color: var(--color-text);
        --muted-color: var(--color-text-muted-on-peach);
    }
}

.row-rail-section-bar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--border-heavy);
    background-color: var(--color-secondary-dark);
}

.row-rail-section-number {
    width: 1.625rem;
    font-size: var(--font-size-label);
    line-height: var(--line-height-label);
    font-weight: var(--font-weight-label);
    color: var(--muted-color);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.row-rail-section-title {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--font-size-label-title);
    line-height: var(--line-height-label-title);
    font-weight: var(--font-weight-label-title);
}

.row-rail-sub {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    padding-block: var(--space-half);
    padding-inline-start: calc(var(--space-double) + 1.625rem + var(--space-base-and-half));
    padding-inline-end: var(--space-double);
    font-size: var(--font-size-label);
    line-height: var(--line-height-label);
    font-weight: var(--font-weight-label);
    color: var(--muted-color);
    box-shadow: inset 0 0 0 100vmax transparent;
    transition: box-shadow var(--motion-hover) ease-out;

    *:has(> &) {
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        *:not(*[aria-disabled="true"]):hover > & {
            box-shadow: inset 0 0 0 100vmax var(--state-hover);
        }
    }

    *:not(*[aria-disabled="true"]):active > & {
        box-shadow: inset 0 0 0 100vmax var(--state-pressed);
        transition-duration: var(--motion-press);
    }

    &.here {
        position: relative;
        background: var(--color-secondary-light);
        color: var(--color-text);
        --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
        --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
        --link-color: var(--color-text);
        --link-visited-color: var(--color-text);
        --muted-color: var(--color-text-muted-on-peach);
    }
}

.row-rail-sub-bar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--border-heavy);
    background-color: var(--color-secondary-dark);
}

.row-section {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-base);
    padding-block: var(--space-double);
    padding-inline-start: var(--space-double);
    box-shadow: inset 0 0 0 100vmax transparent;
    transition: box-shadow var(--motion-hover) ease-out;

    *:has(> &) {
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        *:not(*[aria-disabled="true"]):hover > & {
            box-shadow: inset 0 0 0 100vmax var(--state-hover);
        }
    }

    *:not(*[aria-disabled="true"]):active > & {
        box-shadow: inset 0 0 0 100vmax var(--state-pressed);
        transition-duration: var(--motion-press);
    }

    &.toggle {
        padding-inline-end: var(--space-base-and-half);
    }

    &.arrow {
        padding-inline-end: var(--space-base);
    }
}

.row-section-text {
    flex: 1 1 0;
    min-width: 0;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-half);
}

.row-section-title {
    font-size: var(--font-size-title);
    line-height: var(--line-height-title);
    font-weight: var(--font-weight-title);

    @container (width < 6rem) {
        & {
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

.row-section-tagline {
    font-size: var(--font-size-small-label);
    line-height: var(--line-height-small-label);
    font-weight: var(--font-weight-small-label);
    color: var(--muted-color);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-section-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    background: var(--color-grey-tint);
    color: var(--color-text);
    --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
    --link-color: var(--color-info);
    --link-visited-color: var(--color-link-visited);
    --muted-color: var(--color-text-muted);
    color: var(--muted-color);
    transition: rotate var(--motion-slide) ease;

    *[aria-expanded="true"] & {
        rotate: 180deg;
    }
}

.row-sub {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-base-and-half);
    padding-block: var(--space-base);
    padding-inline-start: var(--space-double);
    box-shadow: inset 0 0 0 100vmax transparent;
    transition: box-shadow var(--motion-hover) ease-out;

    *:has(> &) {
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        *:not(*[aria-disabled="true"]):hover > & {
            box-shadow: inset 0 0 0 100vmax var(--state-hover);
        }
    }

    *:not(*[aria-disabled="true"]):active > & {
        box-shadow: inset 0 0 0 100vmax var(--state-pressed);
        transition-duration: var(--motion-press);
    }

    &.arrow {
        padding-inline-end: var(--space-base);
    }
}

.row-sub-picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--round-base);
    overflow: clip;

    &.placeholder {
        background: var(--color-secondary);
        color: var(--color-text);
        --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
        --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
        --link-color: var(--color-text);
        --link-visited-color: var(--color-text);
        --muted-color: var(--color-text-muted-on-peach);
        color: var(--color-primary);
    }
}

.row-sub-text {
    flex: 1 1 0;
    min-width: 0;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.row-sub-label {
    font-size: var(--font-size-label);
    line-height: var(--line-height-label);
    font-weight: var(--font-weight-label);

    @container (width < 6rem) {
        & {
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

.chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--width-control);
    height: 2.125rem;
    color: var(--muted-color);
}

.row-menu {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-double);
    padding-inline-start: var(--space-double);
    padding-inline-end: var(--space-triple);
    box-shadow: inset 0 0 0 100vmax transparent;
    transition: box-shadow var(--motion-hover) ease-out;

    &.base {
        padding-block: var(--space-base-and-half);
    }

    &.small {
        padding-block: var(--space-base);
    }

    *:has(> &) {
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        *:not(*[aria-disabled="true"]):hover > & {
            box-shadow: inset 0 0 0 100vmax var(--state-hover);
        }
    }

    *:not(*[aria-disabled="true"]):active > & {
        box-shadow: inset 0 0 0 100vmax var(--state-pressed);
        transition-duration: var(--motion-press);
    }
}

.row-menu-icon {
    display: flex;
    align-items: center;
    color: var(--muted-color);
}

.row-menu-label {
    display: flex;
    align-items: center;
    gap: var(--space-base);
}

.row-menu-new-tab {
    display: flex;
    align-items: center;
}

.here {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 100%;
}

.here-dot {
    position: absolute;
    left: calc(100% + 0.375rem);
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    --state-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
    --link-color: var(--color-white);
    --link-visited-color: var(--color-white);
    --muted-color: var(--color-white);
}

.badge {
    background: var(--color-info-light);
    color: var(--color-text);
    --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
    --link-color: var(--color-info);
    --link-visited-color: var(--color-link-visited);
    --muted-color: var(--color-text-muted);
    color: var(--color-info);
    font-size: var(--font-size-small-label);
    line-height: var(--line-height-small-label);
    font-weight: var(--font-weight-small-label);
    padding-inline: var(--space-base);
    padding-block: var(--space-half);
    border-radius: var(--round-half);
}

.link-row {
    color: inherit;
    width: 100%;
    display: flex;
    align-items: center;

    &:focus-visible {
        outline-offset: calc(var(--border-focus) * -1);
        box-shadow: inset 0 0 0 calc(var(--border-focus) + var(--border-focus-gap)) var(--color-white);
    }
}

.link-menu {
    color: inherit;
    width: 100%;
    display: flex;
    align-items: center;

    &:focus-visible {
        outline-offset: calc(var(--border-focus) * -1);
        box-shadow: inset 0 0 0 calc(var(--border-focus) + var(--border-focus-gap)) var(--color-white);
    }
}

.button-menu {
    width: 100%;
    display: flex;
    align-items: center;

    &:focus-visible {
        outline-offset: calc(var(--border-focus) * -1);
        box-shadow: inset 0 0 0 calc(var(--border-focus) + var(--border-focus-gap)) var(--color-white);
    }
}

.link-pager {
    color: inherit;
    display: flex;
    width: 100%;
}

.link-pager-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-double);
    padding-inline: var(--space-triple);
    padding-block: var(--space-double);
    border-radius: var(--round-base);
    border: var(--border-thin) solid var(--color-border);
    box-shadow: inset 0 0 0 100vmax transparent;
    transition: box-shadow var(--motion-hover) ease-out;

    *:has(> &) {
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        *:not(*[aria-disabled="true"]):hover > & {
            box-shadow: inset 0 0 0 100vmax var(--state-hover);
        }
    }

    *:not(*[aria-disabled="true"]):active > & {
        box-shadow: inset 0 0 0 100vmax var(--state-pressed);
        transition-duration: var(--motion-press);
    }
}

.link-pager-arrow {
    display: flex;
    align-items: center;
}

.link-pager-text {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-half);

    &.next {
        align-items: end;
        text-align: end;
    }
}

.link-pager-label {
    font-size: var(--font-size-small-label);
    line-height: var(--line-height-small-label);
    font-weight: var(--font-weight-small-label);
    color: var(--muted-color);
}

.link-pager-title {
    font-size: var(--font-size-title);
    line-height: var(--line-height-title);
    font-weight: var(--font-weight-title);
}

.link-skip {
    position: absolute;
    top: var(--space-double);
    left: var(--space-double);
    z-index: var(--layer-top);
    background: var(--color-attention);
    color: var(--color-text);
    --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
    --link-color: var(--color-text);
    --link-visited-color: var(--color-text);
    --muted-color: var(--color-text);
    padding: var(--space-double);
    color: var(--link-color);
    text-decoration-line: underline;

    &:visited {
        color: var(--link-visited-color);
    }

    &:not(*:focus) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.button-look {
    border-radius: var(--round-base);
    min-width: var(--width-button);
    display: flex;
    align-items: center;
    gap: var(--space-double);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-body);
    box-shadow: inset 0 0 0 100vmax transparent, var(--shadow-raised);
    transition: box-shadow var(--motion-hover) ease-out;

    &.centred {
        justify-content: center;
    }

    *:has(> &) {
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        *:not(*[aria-disabled="true"]):hover > & {
            box-shadow: inset 0 0 0 100vmax var(--state-raised-hover), var(--shadow-raised-hover);
        }
    }

    *:not(*[aria-disabled="true"]):active > & {
        box-shadow: inset 0 0 0 100vmax var(--state-raised-pressed), var(--shadow-raised);
        transition-duration: var(--motion-press);
    }

    &.primary {
        background: linear-gradient(to top, var(--color-primary-light), var(--color-primary)) var(--color-primary);
        color: var(--color-white);
        --state-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
        --state-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
        --state-raised-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
        --state-raised-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
        --link-color: var(--color-white);
        --link-visited-color: var(--color-white);
        --muted-color: var(--color-white);

        &.busy {
            background: var(--color-primary);
            color: var(--color-white);
            --state-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
            --state-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
            --state-raised-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
            --state-raised-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
            --link-color: var(--color-white);
            --link-visited-color: var(--color-white);
            --muted-color: var(--color-white);
        }
    }

    &.busy {
        position: relative;
    }

    &.secondary {
        background: var(--color-secondary);
        color: var(--color-text);
        --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
        --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
        --link-color: var(--color-text);
        --link-visited-color: var(--color-text);
        --muted-color: var(--color-text-muted-on-peach);
    }

    &.base {
        padding: var(--space-double);
    }

    &.full {
        width: 100%;
    }

    &.hero {
        padding-inline: var(--space-three-doubles);
        padding-block: var(--space-triple);
    }
}

.button-look-label {
    display: flex;
    align-items: center;
    gap: var(--space-double);
    visibility: hidden;
}

.button-look-dots {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-base);
}

.button-look-dot {
    width: var(--space-base);
    height: var(--space-base);
    border-radius: 50%;
    background-color: currentColor;
    animation: var(--motion-pulse) ease-in-out infinite backwards button-look-pulse;

    &:nth-child(2) {
        animation-delay: 200ms;
    }

    &:nth-child(3) {
        animation-delay: 400ms;
    }
}

@keyframes button-look-pulse {
    0% {
        scale: 0.6;
        opacity: 0.4;
    }

    40% {
        scale: 1;
        opacity: 1;
    }

    80% {
        scale: 0.6;
        opacity: 0.4;
    }

    100% {
        scale: 0.6;
        opacity: 0.4;
    }
}

@media (width < 37.5rem) {
    .button-look {
        min-width: min(var(--width-button), 100%);

        &.hero {
            padding: var(--space-double);
        }
    }
}

.button-icon-look {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--width-control);
    min-height: var(--width-control);
    border-radius: 50%;
    color: var(--muted-color);
    box-shadow: inset 0 0 0 100vmax transparent;
    transition: box-shadow var(--motion-hover) ease-out;

    *:has(> &) {
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        *:not(*[aria-disabled="true"]):hover > & {
            box-shadow: inset 0 0 0 100vmax var(--state-hover);
        }
    }

    *:not(*[aria-disabled="true"]):active > & {
        box-shadow: inset 0 0 0 100vmax var(--state-pressed);
        transition-duration: var(--motion-press);
    }
}

.button-icon {
    display: flex;
    align-items: center;

    &:focus-visible {
        outline-offset: calc(var(--border-focus) * -1);
        box-shadow: inset 0 0 0 calc(var(--border-focus) + var(--border-focus-gap)) var(--color-white);
    }
}

.button-image {
    display: flex;
    align-items: center;
}

.button-tool {
    display: flex;
    align-items: center;

    &:focus-visible {
        outline-offset: calc(var(--border-focus) * -1);
        box-shadow: inset 0 0 0 calc(var(--border-focus) + var(--border-focus-gap)) var(--color-white);
    }
}

.button-tool-look {
    display: flex;
    align-items: center;
    gap: var(--space-base);
    min-height: var(--width-control);
    border-radius: var(--round-base);
    box-shadow: inset 0 0 0 100vmax transparent;
    transition: box-shadow var(--motion-hover) ease-out;

    *:has(> &) {
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        *:not(*[aria-disabled="true"]):hover > & {
            box-shadow: inset 0 0 0 100vmax var(--state-hover);
        }
    }

    *:not(*[aria-disabled="true"]):active > & {
        box-shadow: inset 0 0 0 100vmax var(--state-pressed);
        transition-duration: var(--motion-press);
    }

    &.base {
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
        font-weight: var(--font-weight-body);
    }

    &.small {
        font-size: var(--font-size-small-label);
        line-height: var(--line-height-small-label);
        font-weight: var(--font-weight-small-label);
    }

    &.icon-and-label {
        padding-inline: var(--space-double);
        padding-block: var(--space-base);
    }

    &.icon-only {
        justify-content: center;
        padding: var(--space-base);
        min-width: var(--width-control);
    }

    *[aria-expanded="true"] & {
        box-shadow: inset 0 0 0 100vmax var(--state-pressed);
    }
}

.form-stacked {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    gap: var(--space-double);
}

.form-stacked-form {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    gap: var(--space-double);
}

.form-stacked-fields {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    gap: var(--space-double);
    padding-block-end: var(--space-base);
}

.form-stacked-submit {
    display: flex;
    align-items: center;
    width: 100%;
}

.form-stacked-failure {
    width: 100%;
}

.form-stacked-field {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
}

.form-stacked-label {
    font-size: var(--font-size-label-title);
    line-height: var(--line-height-label-title);
    font-weight: var(--font-weight-label-title);
}

.form-stacked-input-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: var(--round-base);
    background: var(--color-white);
    color: var(--color-text);
    --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
    --link-color: var(--color-link);
    --link-visited-color: var(--color-link-visited);
    --muted-color: var(--color-text-muted);
    outline: var(--border-thin) solid var(--color-secondary-dark);
    outline-offset: calc(var(--border-thin) * -1);

    &.invalid {
        outline: var(--border-thin) solid var(--color-error);
        outline-offset: calc(var(--border-thin) * -1);
    }
}

.form-stacked-input {
    width: 100%;
    padding: var(--space-double);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-body);

    &.with-icon {
        padding-inline-start: calc(var(--space-double) + var(--space-triple) + var(--space-base-and-half));
    }

    &[aria-invalid="true"] {
        padding-inline-end: calc(var(--space-double) + var(--space-triple) + var(--space-base));
    }

    &::placeholder {
        color: var(--color-text-muted);
    }
}

.form-stacked-text-area {
    width: 100%;
    padding: var(--space-double);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-body);
    field-sizing: content;
    min-block-size: 11lh;
    max-block-size: 16lh;
    resize: block;

    &::placeholder {
        color: var(--color-text-muted);
    }
}

.form-stacked-input-icon {
    position: absolute;
    inset-block: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    inset-inline-start: var(--space-double);
    color: var(--color-text-muted);

    &.invalid {
        color: var(--color-error);
    }
}

.form-stacked-input-error-icon {
    position: absolute;
    inset-block: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    inset-inline-end: var(--space-double);
    color: var(--color-error);
}

.form-stacked-notice {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-small);
}

.form-stacked-checkbox-field {
    display: flex;
    gap: var(--space-base-and-half);
}

.form-stacked-checkbox-box {
    position: relative;
    display: flex;
    align-items: center;
    width: var(--space-triple);
    height: var(--space-triple);
    flex: 0 0 var(--space-triple);
    margin-block-start: calc((var(--line-height-body) - var(--space-triple)) / 2);
}

.form-stacked-checkbox {
    appearance: none;
    width: var(--space-triple);
    height: var(--space-triple);
    cursor: pointer;

    @media (forced-colors: active) {
        & {
            appearance: auto;
        }
    }
}

.form-stacked-checkbox-mark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: var(--round-half);
    background: var(--color-white);
    color: var(--color-text);
    --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
    --link-color: var(--color-link);
    --link-visited-color: var(--color-link-visited);
    --muted-color: var(--color-text-muted);
    border: var(--border-thin) solid var(--color-secondary-dark);
    box-shadow: inset 0 0 0 100vmax transparent;
    transition: box-shadow var(--motion-hover) ease-out;

    *:has(> &) {
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        *:not(*[aria-disabled="true"]):hover > & {
            box-shadow: inset 0 0 0 100vmax var(--state-hover);
        }
    }

    *:not(*[aria-disabled="true"]):active > & {
        box-shadow: inset 0 0 0 100vmax var(--state-pressed);
        transition-duration: var(--motion-press);
    }

    *:checked + & {
        background-color: var(--color-primary);
        border: var(--border-thin) solid var(--color-primary);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 32 32' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
        background-size: contain;
    }

    @media (forced-colors: active) {
        & {
            display: none;
        }
    }
}

.form-stacked-checkbox-text {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-base);
}

.form-stacked-checkbox-label {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-body);
    cursor: pointer;
}

.form-stacked-checkbox-description {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-small);
}

.form-stacked-error {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-small);
    color: var(--color-error);
}

.dialog-drawer {
    width: 100%;
    height: 100dvh;
    flex-direction: column;
    justify-content: flex-end;
    overflow: clip;

    &:modal {
        display: flex;
    }

    &::backdrop {
        background-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
        backdrop-filter: blur(4px);
        transition: opacity var(--motion-enter) cubic-bezier(0.32, 0.72, 0, 1);
    }
}

@starting-style {
    .dialog-drawer {
        &::backdrop {
            opacity: 0;
        }
    }

    .dialog-drawer-panel {
        translate: 0 calc(100% + 3rem);
    }
}

.dialog-drawer-panel {
    background: var(--color-white);
    color: var(--color-text);
    --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
    --link-color: var(--color-link);
    --link-visited-color: var(--color-link-visited);
    --muted-color: var(--color-text-muted);
    width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    box-shadow: var(--shadow-overlay);
    border-top: var(--border-thin) solid transparent;
    transition: translate var(--motion-enter) cubic-bezier(0.32, 0.72, 0, 1);

    &.full {
        height: 100%;
    }
}

.dialog-drawer-header {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: end;
    gap: var(--space-base);
    padding-left: max(var(--space-double), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-double), env(safe-area-inset-right, 0px));
}

.dialog-drawer-title {
    flex: 1 1 10rem;
    font-size: var(--font-size-small-title);
    line-height: var(--line-height-small-title);
    font-weight: var(--font-weight-small-title);
}

.dialog-drawer-close {
    translate: var(--space-double);
}

.dialog-drawer-body {
    width: 100%;
    flex-grow: 1;
    overflow-y: auto;
    overscroll-behavior-y: none;
}

.dialog-drawer-quick-return {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-shadow: 0 var(--border-thin) var(--color-border);
}

.dialog-drawer-content {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: max(var(--space-double), env(safe-area-inset-bottom, 0px));
}

@media (height >= 32rem) {
    .dialog-drawer {
        padding-block-start: var(--space-double);
    }

    .dialog-drawer-panel {
        max-height: 80%;

        &.full {
            height: 80%;
        }
    }
}

.disclosure-popup {
    position: relative;
}

.disclosure-popup-panel {
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    width: max-content;
    min-width: var(--width-button);
    padding-block: var(--space-base);
    background: var(--color-white);
    color: var(--color-text);
    --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
    --link-color: var(--color-link);
    --link-visited-color: var(--color-link-visited);
    --muted-color: var(--color-text-muted);
    border-radius: var(--round-base);
    border: var(--border-thin) solid var(--color-border);
    box-shadow: var(--shadow-edge);
    z-index: var(--layer-bar);
}

.dialog-sheet {
    background: var(--color-white);
    color: var(--color-text);
    --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
    --link-color: var(--color-link);
    --link-visited-color: var(--color-link-visited);
    --muted-color: var(--color-text-muted);
    width: 100%;
    height: 100dvh;
    flex-direction: column;

    &:modal {
        display: flex;
    }
}

.dialog-sheet-bar {
    padding-top: env(safe-area-inset-top, 0px);
    box-shadow: 0 var(--border-thin) var(--color-border);
}

.dialog-sheet-bar-content {
    margin-inline: auto;
    width: 100%;
    max-width: var(--width-content);
    padding-left: max(var(--space-double), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-double), env(safe-area-inset-right, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--width-bar);
}

.dialog-sheet-close {
    translate: var(--space-double);
}

.dialog-sheet-body {
    width: 100%;
    flex-grow: 1;
    overflow-y: auto;
    overscroll-behavior-y: none;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: max(var(--space-double), env(safe-area-inset-bottom, 0px));
}

.dialog-sheet-content {
    transition: opacity var(--motion-enter) cubic-bezier(0.32, 0.72, 0, 1), translate var(--motion-enter) cubic-bezier(0.32, 0.72, 0, 1);
}

@starting-style {
    .dialog-sheet-content {
        opacity: 0;
        translate: 0 calc(var(--space-base) * -1);
    }
}

.quick-return-bar {
    display: block;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: var(--layer-raised);
    background: var(--color-white);
    color: var(--color-text);
    --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
    --link-color: var(--color-link);
    --link-visited-color: var(--color-link-visited);
    --muted-color: var(--color-text-muted);
    transition: translate var(--motion-slide) ease;
    animation: linear both scrolled-under;
    animation-timeline: scroll(nearest);
    animation-range: 0 var(--space-triple);

    &[data-away]:not(*:has(*:focus-visible)) {
        translate: 0 -100%;
    }

    *:has(> &):not(*:has(> & *:focus-visible)) {
        --quick-return-height: 0px;
        scroll-padding-top: var(--quick-return-height);
    }
}

.tabs-stepper {
    width: 100%;
    padding-inline: var(--space-base);
    display: flex;
    align-items: center;
    justify-content: safe center;
    overflow-x: auto;
}

.tabs-stepper-tab {
    flex-grow: 1;
    flex-basis: auto;
    min-width: 4rem;
    max-width: 6rem;
    background-image: linear-gradient(transparent calc(var(--space-double) + (2.625rem - var(--border-thick)) * 0.5), var(--color-border) calc(var(--space-double) + (2.625rem - var(--border-thick)) * 0.5) calc(calc(var(--space-double) + (2.625rem - var(--border-thick)) * 0.5) + var(--border-thick)), transparent calc(calc(var(--space-double) + (2.625rem - var(--border-thick)) * 0.5) + var(--border-thick)));
    background-repeat: no-repeat;

    &:focus-visible {
        outline-offset: calc(var(--border-focus) * -1);
        box-shadow: inset 0 0 0 calc(var(--border-focus) + var(--border-focus-gap)) var(--color-white);
    }

    &:first-child {
        background-size: 50% auto;
        background-position-x: right;
    }

    &:last-child {
        background-size: 50% auto;
    }
}

.tabs-stepper-look {
    width: 100%;
    padding-inline: var(--space-half);
    padding-block: var(--space-double);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-base);
    box-shadow: inset 0 0 0 100vmax transparent;
    transition: box-shadow var(--motion-hover) ease-out;

    *:has(> &) {
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        *:not(*[aria-disabled="true"]):hover > & {
            box-shadow: inset 0 0 0 100vmax var(--state-hover);
        }
    }

    *:not(*[aria-disabled="true"]):active > & {
        box-shadow: inset 0 0 0 100vmax var(--state-pressed);
        transition-duration: var(--motion-press);
    }
}

.tabs-stepper-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-text);
    --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
    --link-color: var(--color-link);
    --link-visited-color: var(--color-link-visited);
    --muted-color: var(--color-text-muted);
    color: var(--muted-color);
    border: var(--border-thick) solid var(--color-border);
    font-size: var(--font-size-title);
    line-height: var(--line-height-title);
    font-weight: var(--font-weight-title);

    *[aria-selected="true"] & {
        background: var(--color-primary);
        color: var(--color-white);
        --state-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
        --state-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
        --state-raised-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
        --state-raised-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
        --link-color: var(--color-white);
        --link-visited-color: var(--color-white);
        --muted-color: var(--color-white);
        border: var(--border-thick) solid var(--color-primary);
    }
}

.tabs-stepper-label {
    font-size: var(--font-size-tiny);
    line-height: var(--line-height-tiny);
    font-weight: var(--font-weight-tiny);
    color: var(--muted-color);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    *[aria-selected="true"] & {
        color: inherit;
        font-weight: 600;
    }
}

.tabs-stepper-content {
    width: 100%;
}

.accordion-list {
    width: 100%;
}

.accordion-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    position: relative;

    &:not(*:first-child)::before {
        content: "";
        position: absolute;
        top: 0;
        inset-inline-start: var(--space-double);
        inset-inline-end: 0;
        border-top: var(--border-thin) solid var(--color-separator);
    }
}

.accordion-list-heading {
    min-width: 0;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-body);
}

.accordion-list-plain {
    grid-column: 1 / -1;
}

.accordion-list-button {
    width: 100%;

    &:focus-visible {
        outline-offset: calc(var(--border-focus) * -1);
        box-shadow: inset 0 0 0 calc(var(--border-focus) + var(--border-focus-gap)) var(--color-white);
    }
}

.accordion-list-aside {
    align-self: stretch;
    display: grid;
}

.accordion-list-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--motion-slide) ease;

    &:has(> *[data-closed]) {
        grid-template-rows: 0fr;
    }
}

.accordion-list-content {
    min-height: 0;
    overflow: clip;
    transition: opacity var(--motion-slide) ease;

    &[data-closed] {
        opacity: 0;
    }
}

.accordion-rail-item {
    position: relative;

    &:not(*:first-child)::before {
        content: "";
        position: absolute;
        top: 0;
        inset-inline-start: calc(var(--space-double) + 1.625rem + var(--space-base-and-half));
        inset-inline-end: 0;
        border-top: var(--border-thin) solid var(--color-separator);
    }
}

.accordion-rail-heading {
    position: relative;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-body);
}

.accordion-rail-aside {
    display: grid;
}

.accordion-rail-button {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: var(--width-control);
    display: flex;
    align-items: center;
    justify-content: center;

    &:focus-visible {
        outline-offset: calc(var(--border-focus) * -1);
        box-shadow: inset 0 0 0 calc(var(--border-focus) + var(--border-focus-gap)) var(--color-white);
    }
}

.accordion-rail-toggle {
    width: var(--space-quadruple);
    height: var(--space-quadruple);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 100vmax transparent;
    transition: box-shadow var(--motion-hover) ease-out;

    *:has(> &) {
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        *:not(*[aria-disabled="true"]):hover > & {
            box-shadow: inset 0 0 0 100vmax var(--state-hover);
        }
    }

    *:not(*[aria-disabled="true"]):active > & {
        box-shadow: inset 0 0 0 100vmax var(--state-pressed);
        transition-duration: var(--motion-press);
    }
}

.accordion-rail-chevron {
    display: flex;
    align-items: center;
    transition: rotate var(--motion-slide) ease;

    *[aria-expanded="true"] & {
        rotate: 180deg;
    }
}

.accordion-rail-panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--motion-slide) ease;

    &:has(> *[data-closed]) {
        grid-template-rows: 0fr;
    }
}

.accordion-rail-content {
    min-height: 0;
    overflow: clip;
    transition: opacity var(--motion-slide) ease;

    &[data-closed] {
        opacity: 0;
    }
}

.sidebar-rail {
    position: sticky;
    top: var(--space-four-doubles);
    width: var(--width-rail);
    height: calc(100dvh - var(--width-bar));
    border-inline-end: var(--border-thin) solid var(--color-border);
}

.sidebar-rail-box {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.section {
    padding-left: max(var(--space-double), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-double), env(safe-area-inset-right, 0px));
    padding-block: var(--space-seven-doubles);
    container-type: inline-size;

    &.page-end {
        background: linear-gradient(to bottom, var(--color-white), var(--color-secondary)) var(--color-white);
        color: var(--color-text);
        --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
        --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
        --link-color: var(--color-text);
        --link-visited-color: var(--color-text);
        --muted-color: var(--color-text-muted-on-peach);
        flex-grow: 1;
    }
}

.section-content {
    margin-inline: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-quadruple);

    &.reading {
        max-width: var(--width-reading);
    }

    &.wide {
        max-width: var(--width-content);
    }
}

.section-intro {
    margin-inline: auto;
}

.section-heading {
    width: 100%;
    font-size: var(--font-size-hero);
    line-height: var(--line-height-hero);
    font-weight: var(--font-weight-hero);
    hyphens: auto;
    text-align: center;
}

.hero-logo {
    color: var(--color-primary);
}

.hero-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-three-doubles);
}

.hero-link {
    margin-inline: auto;
}

.error {
    background: linear-gradient(to bottom, var(--color-white), var(--color-secondary)) var(--color-white);
    color: var(--color-text);
    --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
    --link-color: var(--color-text);
    --link-visited-color: var(--color-text);
    --muted-color: var(--color-text-muted-on-peach);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.error-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.error-illustration {
    width: 100%;
    max-width: var(--width-reel);
}

.error-illustration-code {
    font-weight: var(--font-weight-hero);
    text-anchor: middle;
    fill: url("#id:error-illustration-code");
}

.error-illustration-code-top {
    stop-color: var(--color-secondary-dark);
}

.error-illustration-code-bottom {
    stop-color: var(--color-primary-light);
}

.error-illustration-figure {
    fill: none;
    stroke: var(--color-primary);
    stroke-linecap: round;
}

.error-illustration-head {
    fill: var(--color-primary);
}

.error-illustration-bar {
    fill: none;
    stroke: var(--color-text-muted);
    stroke-linecap: round;
}

.article-header {
    padding-left: max(var(--space-double), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-double), env(safe-area-inset-right, 0px));

    &.banner {
        background: url("/images/waveHaikei.svg") center center / cover no-repeat, radial-gradient(circle at 15% 25%, color-mix(in srgb, var(--color-secondary) 12%, transparent), transparent 38%), radial-gradient(circle at 85% 70%, color-mix(in srgb, var(--color-secondary-dark) 14%, transparent), transparent 42%), linear-gradient(to top, var(--color-primary-light), var(--color-primary)) var(--color-primary);
        color: var(--color-white);
        --state-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
        --state-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
        --state-raised-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
        --state-raised-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
        --link-color: var(--color-white);
        --link-visited-color: var(--color-white);
        --muted-color: var(--color-white);
        padding-block: var(--space-seven-doubles);
    }

    &.on-page {
        @media (width < 75rem) {
            & {
                background: url("/images/waveHaikei.svg") center center / cover no-repeat, radial-gradient(circle at 15% 25%, color-mix(in srgb, var(--color-secondary) 12%, transparent), transparent 38%), radial-gradient(circle at 85% 70%, color-mix(in srgb, var(--color-secondary-dark) 14%, transparent), transparent 42%), linear-gradient(to top, var(--color-primary-light), var(--color-primary)) var(--color-primary);
                color: var(--color-white);
                --state-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
                --state-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
                --state-raised-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
                --state-raised-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
                --link-color: var(--color-white);
                --link-visited-color: var(--color-white);
                --muted-color: var(--color-white);
                padding-block: var(--space-seven-doubles);
            }
        }

        @media (width >= 75rem) {
            & {
                padding-block-start: var(--space-seven-doubles);
                padding-block-end: var(--space-four-doubles);
            }
        }
    }
}

.article-header-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-inline: auto;
    width: 100%;
    max-width: var(--width-reading);

    &.banner {
        gap: var(--space-three-doubles);
        text-align: center;
    }

    &.on-page {
        @media (width < 75rem) {
            & {
                gap: var(--space-three-doubles);
                text-align: center;
            }
        }

        @media (width >= 75rem) {
            & {
                gap: var(--space-base);
                padding-block-end: var(--space-four-doubles);
                border-bottom: var(--border-thin) solid var(--color-separator);
            }

            &.wide {
                width: fit-content;
                display: grid;
                max-width: var(--width-content);
                grid-template-columns: [reel] minmax(0, var(--width-reel)) [text] minmax(0, var(--width-reading));
                column-gap: var(--space-triple);
                justify-content: center;
            }
        }
    }
}

.article-title {
    width: 100%;
    font-size: var(--font-size-hero);
    line-height: var(--line-height-hero);
    font-weight: var(--font-weight-hero);
    hyphens: auto;
    grid-column: 1 / -1;

    &.on-page {
        @media (width >= 75rem) {
            & {
                font-size: var(--font-size-display);
                line-height: var(--line-height-display);
                font-weight: var(--font-weight-display);
                hyphens: auto;
            }
        }
    }
}

.article-kicker {
    &.on-page {
        @media (width >= 75rem) {
            & {
                color: var(--color-text-muted);
            }
        }
    }
}

.article-subtitle {
    width: 100%;
    font-size: var(--font-size-subtitle);
    line-height: var(--line-height-subtitle);
    font-weight: var(--font-weight-subtitle);
    grid-column: 1 / -1;

    &.on-page {
        @media (width >= 75rem) {
            & {
                color: var(--color-text-muted);
            }
        }
    }
}

.article-body {
    padding-left: max(var(--space-double), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-double), env(safe-area-inset-right, 0px));
    padding-block: var(--space-seven-doubles);
    container-type: inline-size;
}

.article-content {
    margin-inline: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-quadruple);

    &.reading {
        max-width: var(--width-reading);
    }

    &.wide {
        max-width: var(--width-content);
    }
}

.pager {
    padding-left: max(var(--space-double), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-double), env(safe-area-inset-right, 0px));
    padding-block-start: var(--space-double);
    padding-block-end: var(--space-quadruple);
}

.pager-links {
    margin-inline: auto;
    width: 100%;
    max-width: var(--width-reading);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "previous next";
    gap: var(--space-double);
}

.pager-item {
    display: flex;
    width: 100%;

    &.previous {
        grid-area: previous;
    }

    &.next {
        grid-area: next;
    }
}

@media (width < 37.5rem) {
    .pager-links {
        display: flex;
        flex-direction: column;
        align-items: start;
    }
}

.dock {
    position: sticky;
    bottom: max(var(--space-double), env(safe-area-inset-bottom, 0px));
    width: fit-content;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--space-base);
    border-radius: var(--round-base);
    background: var(--color-text);
    color: var(--color-white);
    --state-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
    --link-color: var(--color-white);
    --link-visited-color: var(--color-white);
    --muted-color: var(--color-white);
    box-shadow: var(--shadow-raised);
    touch-action: manipulation;
}

.book {
    @media (width >= 75rem) {
        & {
            display: grid;
            grid-template-columns: var(--width-rail) minmax(0, 1fr);
        }
    }
}

.book-contents-section-link {
    display: grid;
    padding-inline-end: var(--space-base);
}

.callout {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-double);
    padding: var(--space-triple);
    border-radius: var(--round-base);

    &.tip {
        background: var(--color-info-light);
        color: var(--color-text);
        --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
        --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
        --link-color: var(--color-info);
        --link-visited-color: var(--color-link-visited);
        --muted-color: var(--color-text-muted);
        border: var(--border-thin) solid var(--color-info-border);
    }

    &.warning {
        background: var(--color-error-light);
        color: var(--color-text);
        --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
        --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
        --link-color: var(--color-info);
        --link-visited-color: var(--color-link-visited);
        --muted-color: var(--color-text-muted);
        border: var(--border-thin) solid var(--color-error-border);
    }
}

@media (width < 37.5rem) {
    .callout {
        padding-inline: var(--space-double);
    }
}

.callout-title {
    display: flex;
    align-items: start;
    gap: var(--space-double);
    font-size: var(--font-size-title);
    line-height: var(--line-height-title);
    font-weight: var(--font-weight-title);
}

.callout-icon {
    display: flex;
    align-items: center;
    height: 1lh;

    &.tip {
        color: var(--color-info);
    }

    &.warning {
        color: var(--color-error);
    }
}

.callout-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-double);
}

.confirmation-tick {
    color: var(--color-success);
    animation: var(--motion-enter) cubic-bezier(0.32, 0.72, 0, 1) confirmation-pop;
}

.confirmation-body {
    animation: var(--motion-enter) cubic-bezier(0.32, 0.72, 0, 1) confirmation-rise;
}

@keyframes confirmation-pop {
    0% {
        scale: 0.6;
        opacity: 0;
    }

    60% {
        scale: 1.1;
        opacity: 1;
    }

    100% {
        scale: 1;
    }
}

@keyframes confirmation-rise {
    0% {
        opacity: 0;
        translate: 0 var(--space-base);
    }

    100% {
        opacity: 1;
        translate: none;
    }
}

.image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    &.fill {
        width: 100%;
    }

    &.crop {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.table-data {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-base);
}

.table-data-ring {
    width: 100%;

    &:has(> * > *:focus-visible) {
        outline: var(--border-focus) solid var(--color-focus);
        outline-offset: var(--border-focus-gap);
        box-shadow: 0 0 0 var(--border-focus-gap) var(--color-white);
    }
}

.table-data-frame {
    width: 100%;
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--round-base);
    overflow: clip;
}

.table-data-scroll {
    overflow-x: auto;
}

.table-data-table {
    width: 100%;
    border-collapse: collapse;
}

.table-data-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.table-data-head {
    background: var(--color-primary-light);
    color: var(--color-white);
    --state-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
    --link-color: var(--color-white);
    --link-visited-color: var(--color-white);
    --muted-color: var(--color-white);
}

.table-data-header {
    font-size: var(--font-size-title);
    line-height: var(--line-height-title);
    font-weight: var(--font-weight-title);
    --table-column-share: 1;
    min-width: calc(var(--width-table-column) * var(--table-column-share));
    padding-inline: var(--space-triple);
    padding-block: var(--space-base);
    overflow-wrap: break-word;
    vertical-align: top;
    box-shadow: -1px 0 0 0 var(--color-primary-light);
}

.table-data-row {
    &:nth-child(even) {
        background: var(--color-grey-tint);
        color: var(--color-text);
        --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
        --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
        --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
        --link-color: var(--color-info);
        --link-visited-color: var(--color-link-visited);
        --muted-color: var(--color-text-muted);
    }
}

.table-data-cell {
    padding-inline: var(--space-triple);
    padding-block: var(--space-base-and-half);
    overflow-wrap: break-word;
    vertical-align: top;
}

@media (width < 37.5rem) {
    .table-data-header {
        padding-inline: var(--space-double);
    }

    .table-data-cell {
        padding-inline: var(--space-double);
    }
}

.stepper-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-triple);
    padding-inline-start: var(--width-gutter);

    @container (width >= 41.5rem) {
        & {
            padding-inline-start: 0;
        }
    }
}

.stepper-text-step {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-double);
}

.stepper-text-track {
    position: absolute;
    font-size: var(--font-size-title);
    line-height: var(--line-height-title);
    font-weight: var(--font-weight-title);
    inset-block-start: 0;
    inset-block-end: calc(var(--space-triple) * -1);
    inset-inline-start: calc((1lh + var(--space-base)) * -1);
    width: 1lh;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.stepper-text-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-small-label);
    line-height: var(--line-height-small-label);
    font-weight: var(--font-weight-small-label);
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-white);
    --state-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
    --link-color: var(--color-white);
    --link-visited-color: var(--color-white);
    --muted-color: var(--color-white);
    border: var(--border-thin) solid transparent;
}

.stepper-text-guide {
    flex-grow: 1;
    align-self: center;
    width: var(--border-thin);
    background: var(--color-border);
}

.stepper-text-title {
    font-size: var(--font-size-title);
    line-height: var(--line-height-title);
    font-weight: var(--font-weight-title);
}

.stepper-text-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-triple);
    container-type: inline-size;
}

.figure {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-base);
}

.figure-caption {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-small);
    contain: inline-size;
    align-self: stretch;
}

.youtube-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: start;
    overflow-anchor: none;
}

.youtube-play {
    box-shadow: inset 0 0 0 100vmax transparent, var(--shadow-raised);
    transition: box-shadow var(--motion-hover) ease-out;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    *:has(> &) {
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: hover) {
        *:not(*[aria-disabled="true"]):hover > & {
            box-shadow: inset 0 0 0 100vmax var(--state-raised-hover), var(--shadow-raised-hover);
        }
    }

    *:not(*[aria-disabled="true"]):active > & {
        box-shadow: inset 0 0 0 100vmax var(--state-raised-pressed), var(--shadow-raised);
        transition-duration: var(--motion-press);
    }
}

.youtube-frame {
    background: var(--color-black);
    color: var(--color-white);
    --state-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-white) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-white) 20%, transparent);
    --link-color: var(--color-white);
    --link-visited-color: var(--color-white);
    --muted-color: var(--color-white);
    width: 100%;
    aspect-ratio: 9 / 16;
}

.showcase {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;
    gap: var(--space-double);
}

.showcase-reel {
    flex: 0 1 var(--width-reel);
    max-width: var(--width-reel);
}

.markdown-code {
    font-size: var(--font-size-code);
    line-height: var(--line-height-code);
    font-weight: var(--font-weight-code);
    background: var(--color-grey-tint);
    color: var(--color-text);
    --state-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --state-pressed: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
    --state-raised-pressed: color-mix(in srgb, var(--color-text) 12%, transparent);
    --link-color: var(--color-info);
    --link-visited-color: var(--color-link-visited);
    --muted-color: var(--color-text-muted);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--round-half);
    padding-inline: var(--space-base);
    padding-block: var(--space-half);
    box-decoration-break: clone;
}

.markdown-image {
    float: inline-end;
    padding-inline-start: var(--space-double);
    padding-block-end: var(--space-double);
}

.markdown-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-triple);
}

.markdown-heading {
    width: 100%;
    padding-block-end: var(--space-double);

    * + & {
        padding-block-start: var(--space-seven-doubles);
    }
}

.markdown-heading-text {
    font-size: var(--font-size-hero);
    line-height: var(--line-height-hero);
    font-weight: var(--font-weight-hero);
    hyphens: auto;
}

.markdown-subheading {
    font-size: var(--font-size-subtitle);
    line-height: var(--line-height-subtitle);
    font-weight: var(--font-weight-subtitle);
    padding-block-start: var(--space-triple);
}

.markdown-list {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-triple);
    padding-inline-start: var(--width-gutter);
    list-style-type: "✱  ";

    @container (width >= 41.5rem) {
        & {
            padding-inline-start: 0;
        }
    }
}

.markdown-list-item {
    &::marker {
        font-size: var(--font-size-bullet);
        line-height: var(--line-height-bullet);
        font-weight: var(--font-weight-bullet);
        color: var(--color-primary);
    }
}

.markdown-interactive {
    width: 100%;
    container-type: inline-size;
}

.markdown-interactive-columns {
    margin-inline: auto;
    width: 100%;
    max-width: var(--width-reading);
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-triple);

    @container (width >= 44rem) {
        & {
            display: grid;
            max-width: var(--width-content);
            grid-template-columns: [reel] minmax(0, var(--width-reel)) [text] minmax(0, var(--width-reading));
            column-gap: var(--space-triple);
            justify-content: center;
        }
    }
}

.markdown-interactive-text {
    width: 100%;
    grid-column: text;

    &.heading {
        * + & {
            padding-block-start: var(--space-seven-doubles);
        }
    }

    &.wide {
        grid-column: 1 / -1;
    }
}

.markdown-reel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-triple);

    @container (width >= 44rem) {
        & {
            display: grid;
            grid-column: 1 / -1;
            grid-template-columns: subgrid;
        }
    }
}

.markdown-reel-video {
    margin-inline: auto;
    width: 100%;
    max-width: var(--width-reel);
    grid-column: 1;
    grid-row: 1;
}

.markdown-reel-text {
    width: 100%;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-triple);

    @container (width >= 44rem) {
        & {
            container-type: inline-size;
        }
    }
}

.markdown-interactive-opener {
    font-size: var(--font-size-hero);
    line-height: var(--line-height-hero);
    font-weight: var(--font-weight-hero);
    hyphens: auto;
    display: flex;
    align-items: first baseline;
    gap: var(--space-double);

    @container (width >= 44rem) {
        & {
            gap: var(--space-triple);
            margin-block-start: -1.41rem;
            padding-block-start: 1.41rem;
        }
    }

    &.gutter {
        @container (width >= 59.5rem) {
            & {
                display: grid;
                grid-template-columns: 0 minmax(0, 1fr);
                margin-inline-start: calc(var(--space-triple) * -1);
            }
        }
    }

    &.reels {
        @container (width >= 44rem) {
            & {
                display: grid;
                grid-template-columns: 0 minmax(0, 1fr);
                margin-inline-start: calc(var(--space-triple) * -1);
            }
        }
    }
}

.markdown-interactive-opener-number {
    display: flex;
    flex-direction: column;
    align-items: start;

    @container (width >= 44rem) {
        & {
            font-size: var(--font-size-numeral);
            line-height: var(--line-height-numeral);
            font-weight: var(--font-weight-numeral);
            justify-self: self-end;
            align-self: stretch;
            justify-content: end;
            margin-block-start: -1.41rem;
            padding-block-end: 0.97rem;
            max-height: 7.72rem;
        }
    }
}

.markdown-interactive-opener-numeral {
    color: var(--muted-color);
    line-height: 0.71;
    white-space: nowrap;
    padding-inline-end: var(--space-double);
    border-inline-end: var(--border-heavy) solid var(--color-secondary-dark);

    @container (width >= 44rem) {
        & {
            padding-inline-end: var(--space-triple);
        }
    }
}