@layer reset, tokens, base, layout, sidebar, content, components, utilities, responsive;

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

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body,
    h1,
    h2,
    h3,
    h4,
    p,
    ul,
    ol,
    figure,
    blockquote {
        margin: 0;
    }

    ul,
    ol {
        padding: 0;
    }

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

    button,
    input {
        font: inherit;
        color: inherit;
    }

    button {
        cursor: pointer;
        background: none;
        border: 0;
        padding: 0;
    }

    table {
        border-collapse: collapse;
    }
}

@layer tokens {
    :root {
        --paper: #f6f3ec;
        --paper-raised: #fffdf8;
        --paper-sunken: #efeae0;
        --ink: #1c1914;
        --ink-soft: #514b41;
        --line: #d9d1c3;
        --line-strong: #6e675c;
        --verdigris: #0d5c4a;
        --verdigris-ink: #f6f3ec;
        --link: #0d5c4a;
        --link-hover: #084437;
        --warning: #8a4b12;
        --warning-wash: #f4e6d4;
        --code-bg: #efeae0;
        --code-ink: #1c1914;
        --focus: #0b3f34;
        --sidebar: #efeae1;
        --select: #d5ebe4;
        --shadow: none;
        --font-sans: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
        --font-serif: 'IBM Plex Serif', 'Iowan Old Style', Palatino, Georgia, serif;
        --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;
        --space-7: 3rem;
        --space-8: 4rem;
        --sidebar-width: 17.5rem;
        --toc-width: 14rem;
        --measure: 68ch;
        --header-offset: 4.5rem;
        --radius-control: 2px;
        --find-bg: #e7c56a;
        --find-ink: #1c1914;
        --find-current-bg: #0d5c4a;
        --find-current-ink: #f6f3ec;
        color-scheme: light;
    }

    [data-theme='dark'] {
        --paper: #141816;
        --paper-raised: #1c221e;
        --paper-sunken: #101412;
        --ink: #ebe6da;
        --ink-soft: #c8bfb0;
        --line: #3a433c;
        --line-strong: #8d867a;
        --verdigris: #b7e6da;
        --verdigris-ink: #10211c;
        --link: #9edbcc;
        --link-hover: #d5f3ea;
        --warning: #f0c48a;
        --warning-wash: #2a2118;
        --code-bg: #101412;
        --code-ink: #ebe6da;
        --focus: #d5f3ea;
        --sidebar: #101412;
        --select: #1f4a40;
        --find-bg: #e7c56a;
        --find-ink: #1c1914;
        --find-current-bg: #b7e6da;
        --find-current-ink: #10211c;
        color-scheme: dark;
    }

    @media (prefers-color-scheme: dark) {
        :root:not([data-theme='light']) {
            --paper: #141816;
            --paper-raised: #1c221e;
            --paper-sunken: #101412;
            --ink: #ebe6da;
            --ink-soft: #c8bfb0;
            --line: #3a433c;
            --line-strong: #8d867a;
            --verdigris: #b7e6da;
            --verdigris-ink: #10211c;
            --link: #9edbcc;
            --link-hover: #d5f3ea;
            --warning: #f0c48a;
            --warning-wash: #2a2118;
            --code-bg: #101412;
            --code-ink: #ebe6da;
            --focus: #d5f3ea;
            --sidebar: #101412;
            --select: #1f4a40;
            --find-bg: #e7c56a;
            --find-ink: #1c1914;
            --find-current-bg: #b7e6da;
            --find-current-ink: #10211c;
            color-scheme: dark;
        }
    }
}

@layer base {
    html {
        scroll-behavior: smooth;
        background: var(--paper);
    }

    body {
        min-height: 100dvh;
        background: var(--paper);
        color: var(--ink);
        font-family: var(--font-sans);
        font-size: 1rem;
        line-height: 1.6;
        text-rendering: optimizeLegibility;
    }

    :focus {
        outline: 2px solid var(--focus);
        outline-offset: 2px;

        &:not(:focus-visible) {
            outline: none;
        }
    }

    :focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 2px;
    }

    ::selection {
        background: var(--select);
        color: var(--ink);
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--font-serif);
        font-weight: 600;
        line-height: 1.2;
        color: var(--ink);
    }

    h1,
    h2 {
        text-wrap: balance;
    }

    h1 {
        font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
        letter-spacing: -0.02em;
    }

    h2 {
        font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem);
        letter-spacing: -0.015em;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-family: var(--font-sans);
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0;
    }

    p,
    li,
    dd,
    h3,
    h4,
    td,
    th {
        overflow-wrap: anywhere;
    }

    p {
        text-wrap: pretty;
    }

    a {
        color: var(--link);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.18em;

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

    code,
    pre {
        font-family: var(--font-mono);
        font-size: 0.875rem;
    }

    code {
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;

        :is(p, li, td, th) & {
            background: var(--code-bg);
            padding: 0.05em 0.3em;
            border-radius: var(--radius-control);
        }

        pre & {
            background: none;
            padding: 0;
            border-radius: 0;
            overflow-wrap: normal;
            white-space: pre;
        }
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: var(--line-strong) transparent;
    }
}

@layer layout {
    .skip-link {
        position: absolute;
        inset-inline-start: var(--space-4);
        top: var(--space-4);
        z-index: 10;
        transform: translateY(-150%);
        background: var(--verdigris);
        color: var(--verdigris-ink);
        padding: var(--space-2) var(--space-4);
        text-decoration: none;

        &:focus {
            transform: none;
        }
    }

    .scroll-progress {
        position: fixed;
        inset-inline: 0;
        top: 0;
        z-index: 6;
        height: 2px;
        background: var(--verdigris);
        transform: scaleX(0);
        transform-origin: 0 50%;
        pointer-events: none;
    }

    .app {
        display: grid;
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
        min-height: 100dvh;
    }

    .main-content {
        min-width: 0;
    }

    .docs-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--toc-width);
        gap: var(--space-6);
        width: 100%;
        min-width: 0;
        padding: var(--space-7) var(--space-6) var(--space-8);
    }

    .content-wrapper {
        min-width: 0;
        max-width: 100%;
        container-type: inline-size;
        container-name: doc;
    }

    .content-section {
        min-width: 0;
        max-width: 100%;
        margin-block-end: var(--space-8);
        scroll-margin-top: var(--space-5);

        &:not(.hero-section) {
            padding: var(--space-5);
            background: var(--paper-raised);
            border: 1px solid var(--line);
            border-block-start: 0.45rem solid var(--verdigris);
        }
    }

    .page-toc {
        position: sticky;
        top: var(--space-5);
        align-self: start;
    }

    .mobile-header {
        display: none;
    }
}

@layer sidebar {
    .sidebar {
        position: sticky;
        top: 0;
        align-self: start;
        display: flex;
        flex-direction: column;
        width: var(--sidebar-width);
        height: 100dvh;
        background: var(--sidebar);
        border-inline-end: 1px solid var(--line);
        z-index: 4;
    }

    .sidebar-header,
    .sidebar-search,
    .sidebar-footer {
        padding: var(--space-4);
        flex: none;
    }

    .sidebar-search {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        max-height: 46dvh;
    }

    .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        border-block-end: 1px solid var(--line);
    }

    .sidebar-close {
        display: none;
        align-items: center;
        min-height: 2.75rem;
        padding-inline: var(--space-3);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-control);
        background: var(--paper-raised);
    }

    .logo {
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
        color: var(--ink);
        text-decoration: none;
    }

    .logo-icon {
        font-family: var(--font-serif);
        font-weight: 600;
        letter-spacing: 0.04em;
    }

    .logo-text {
        font-size: 0.875rem;
        color: var(--ink-soft);
    }

    .search-input-wrap {
        position: relative;
    }

    .search-icon {
        position: absolute;
        inset-inline-start: 0.75rem;
        top: 50%;
        width: 1rem;
        height: 1rem;
        max-width: none;
        transform: translateY(-50%);
        color: var(--ink-soft);
        pointer-events: none;
    }

    .sidebar-search input,
    .api-filter {
        width: 100%;
        min-height: 2.75rem;
        padding: var(--space-2) var(--space-3);
        background: var(--paper-raised);
        color: var(--ink);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-control);
    }

    .sidebar-search input {
        padding-inline-start: 2.5rem;
    }

    .doc-search-status {
        color: var(--ink-soft);
        font-size: 0.8125rem;

        &:empty {
            display: none;
        }
    }

    .mobile-search-btn,
    .doc-search-hit {
        min-height: 2.75rem;
        padding-inline: var(--space-3);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-control);
        background: var(--paper-raised);
    }

    .doc-search-results {
        list-style: none;
        overflow: auto;
        margin: 0;
        padding: 0;

        &:empty {
            display: none;
        }
    }

    .doc-search-hit {
        display: block;
        width: 100%;
        margin-block-end: var(--space-2);
        text-align: start;
        overflow-wrap: anywhere;

        small {
            display: block;
            color: var(--ink-soft);
            font-size: 0.8125rem;
        }

        &[aria-current='true'] {
            border-color: var(--verdigris);
            font-weight: 600;
        }
    }

    .sidebar-search input::placeholder,
    .api-filter::placeholder {
        color: var(--ink-soft);
        opacity: 1;
    }

    .sidebar-nav {
        flex: 1;
        overflow: auto;
        padding: var(--space-3) var(--space-3) var(--space-5);
    }

    .nav-heading,
    .nav-fold > summary {
        margin: var(--space-4) var(--space-2) var(--space-2);
        font-family: var(--font-sans);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }

    .nav-fold {
        border-block-start: 1px solid var(--line);
        margin-block-start: var(--space-3);
        padding-block-start: var(--space-2);

        & > summary {
            cursor: pointer;
            min-height: 2.75rem;
            display: flex;
            align-items: center;
            list-style: none;

            &::-webkit-details-marker {
                display: none;
            }

            &::before {
                content: '';
                width: 0.4rem;
                height: 0.4rem;
                margin-inline-end: var(--space-2);
                border-inline-end: 1.5px solid currentColor;
                border-block-end: 1.5px solid currentColor;
                transform: rotate(-45deg);
            }
        }

        &[open] > summary::before {
            transform: rotate(45deg);
        }
    }

    .nav-list {
        list-style: none;
    }

    .nav-link {
        display: block;
        padding: 0.45rem var(--space-3);
        color: var(--ink);
        text-decoration: none;
        border-inline-start: 2px solid transparent;
        overflow-wrap: anywhere;

        &:hover {
            background: color-mix(in srgb, var(--ink) 5%, transparent);
        }

        &.active {
            border-inline-start-color: var(--verdigris);
            background: var(--paper-raised);
            font-weight: 600;
        }
    }

    .sidebar-footer {
        border-block-start: 1px solid var(--line);
    }

    .theme-toggle,
    .mobile-theme-btn,
    .sidebar-toggle {
        min-height: 2.75rem;
        min-width: 2.75rem;
    }

    .theme-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-control);
        background: var(--paper-raised);
    }

    .theme-icons {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .theme-badge {
        font-size: 0.875rem;
        font-weight: 500;
    }

    .sidebar-overlay {
        display: none;
    }
}

@layer content {
    .hero-section {
        display: grid;
        gap: var(--space-6);
    }

    .eyebrow {
        margin-block-end: var(--space-3);
        font-size: 0.8125rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }

    .lead,
    .section-head p {
        max-width: var(--measure);
        margin-block-start: var(--space-3);
        color: var(--ink-soft);
        font-size: 1.0625rem;
        line-height: 1.6;
    }

    .section-head {
        margin-block-end: var(--space-5);
        padding-block-end: var(--space-4);
        border-block-end: 1px solid var(--line);
    }

    .section-kicker,
    .group-kicker,
    .field-label {
        display: block;
        margin-block-end: 0.2rem;
        font-family: var(--font-sans);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--verdigris);
    }

    :is(.section-head, .content-section >) h2 {
        margin-block-end: 0;
    }

    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-4);
        margin-block-start: var(--space-5);
    }

    .hero-button {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        padding: var(--space-2) var(--space-4);
        text-decoration: none;
        border-radius: var(--radius-control);

        &.primary {
            background: var(--verdigris);
            color: var(--verdigris-ink);
            font-weight: 600;
        }

        &.secondary {
            padding-inline: 0;
            color: var(--link);
            text-decoration: underline;
            text-underline-offset: 0.18em;
        }

        &.primary:hover {
            color: var(--verdigris-ink);
            background: var(--link-hover);
        }
    }

    [data-theme='dark'] .hero-button.primary:hover {
        background: var(--link);
        color: var(--verdigris-ink);
    }

    .hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin-block-start: var(--space-5);
    }

    .meta-pill {
        padding: 0.2rem 0.55rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        font-size: 0.8125rem;
        color: var(--ink-soft);
    }

    .hero-panel,
    .panel-card,
    .doc-card,
    .feature-card,
    .result-box {
        min-width: 0;
        max-width: 100%;
        background: var(--paper-raised);
        border: 1px solid var(--line);
        border-radius: 0;
        padding: var(--space-4);
    }

    .panel-card h3,
    .doc-card h3,
    .feature-card h4,
    .result-box h4 {
        margin-block-end: var(--space-3);
    }

    .features-grid,
    .comparison-grid,
    .runtime-grid,
    .results-grid {
        display: grid;
        gap: var(--space-4);
    }

    :is(.feature-card, .doc-card) p {
        color: var(--ink-soft);
    }

    :is(.feature-list, .spaced-list) {
        list-style: disc;
        padding-inline-start: 1.2rem;

        li {
            margin-block: 0.35rem;
        }
    }

    .feature-list li::marker,
    .spaced-list li::marker {
        color: var(--ink);
    }

    .callout {
        margin-block: var(--space-5);
        padding: var(--space-3) var(--space-4);
        border-inline-start: 3px solid var(--line-strong);
        background: var(--paper-sunken);
        max-width: var(--measure);

        strong {
            font-weight: 600;
        }
    }

    .callout-warning {
        border-inline-start-color: var(--warning);
        background: var(--warning-wash);
    }

    h3[id],
    .method,
    .ref-group {
        scroll-margin-top: var(--space-5);
    }

    .shared-call {
        max-width: var(--measure);
        margin-block: var(--space-4);
        padding: var(--space-4);
        background: var(--paper-sunken);
        border-inline-start: 0.35rem solid var(--verdigris);

        p {
            margin-block-start: var(--space-2);
            color: var(--ink-soft);
        }
    }

    .ref-group {
        margin-block-start: var(--space-6);
        padding: var(--space-4);
        background: var(--paper);
        border: 1px solid var(--line);
    }

    .ref-group-head {
        margin-block-end: var(--space-4);
        padding-block-end: var(--space-3);
        border-block-end: 2px solid var(--ink);
    }

    .group-when,
    .method-use,
    .method-when,
    .method-where {
        max-width: var(--measure);
        margin-block-start: var(--space-3);
    }

    .method {
        min-width: 0;
        max-width: 100%;
        margin-block-start: var(--space-4);
        padding: var(--space-4);
        background: var(--paper-raised);
        border: 1px solid var(--line);
        border-inline-start: 0.35rem solid var(--verdigris);
    }

    .method.is-search-current,
    tr.is-search-current,
    .is-search-current {
        outline: 2px solid var(--verdigris);
        outline-offset: 2px;
    }

    .method-name {
        font-family: var(--font-mono);
        font-size: 0.95rem;
        font-weight: 500;
        overflow-wrap: anywhere;
    }

    .method-description {
        margin-block: var(--space-2);
        color: var(--ink-soft);
    }

    .method-signature {
        max-width: 100%;
        min-width: 0;
        margin-block: var(--space-4);
        padding: var(--space-3);
        overflow-x: auto;
        background: var(--code-bg);
        color: var(--code-ink);
    }

    .syntax-generic {
        display: block;
        overflow-wrap: anywhere;
        font-family: var(--font-mono);
        font-size: 0.95rem;
    }

    :is(.method-params, .method-returns) {
        margin-block-start: var(--space-3);

        strong {
            font-size: 0.8125rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
    }

    .method-returns p {
        margin-block-start: var(--space-2);
    }

    .filter-label {
        display: block;
        margin-block: var(--space-4) var(--space-2);
        font-size: 0.875rem;
        font-weight: 600;
    }

    .filter-status {
        min-height: 1.4em;
        margin-block: var(--space-2) var(--space-4);
        color: var(--ink-soft);
        font-size: 0.875rem;
    }

    .data-table {
        width: max-content;
        min-width: 100%;
        font-size: 0.9375rem;

        caption {
            caption-side: top;
            margin-block-end: var(--space-3);
            text-align: start;
            font-weight: 600;
        }

        :is(th, td) {
            padding: 0.65rem 0.75rem;
            border-block-end: 1px solid var(--line);
            text-align: start;
            vertical-align: top;
        }

        thead th {
            font-family: var(--font-sans);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--ink-soft);
            border-block-end: 2px solid var(--ink);
        }
    }

    .table-scroll {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        margin-block-end: var(--space-5);
    }

    :is(.content-section >, .ref-group) h3 {
        margin-block: 0 var(--space-2);
    }
}

@layer components {
    .install-tabs,
    .tab-panel {
        min-width: 0;
        max-width: 100%;
    }

    .install-tabs {
        margin-block-start: var(--space-4);
    }

    .tab-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        border-block-end: 1px solid var(--line);
    }

    .tab-button {
        min-height: 2.75rem;
        padding: var(--space-2) var(--space-4);
        margin-block-end: -1px;
        border-block-end: 2px solid transparent;
        color: var(--ink-soft);

        &:hover {
            color: var(--ink);
        }

        &.active {
            color: var(--ink);
            border-block-end-color: var(--verdigris);
            font-weight: 600;
        }
    }

    .tab-panel {
        padding-block-start: var(--space-4);

        &:not(.active) {
            display: none;
        }
    }

    .tab-panel-label {
        display: none;
        margin-block-end: var(--space-2);
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }

    .code-block-wrapper {
        max-width: 100%;
        min-width: 0;
        border: 1px solid var(--line);
        background: var(--code-bg);
    }

    .code-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        min-height: 2.5rem;
        padding-inline: var(--space-3);
        border-block-end: 1px solid var(--line);
        background: var(--paper-raised);
    }

    .code-lang {
        font-family: var(--font-sans);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        color: var(--ink-soft);
    }

    .copy-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-height: 2.25rem;
        padding-inline: var(--space-2);
        color: var(--link);
        font-size: 0.8125rem;

        &.copied {
            color: var(--ink);
        }
    }

    pre {
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        padding: var(--space-4);
        color: var(--code-ink);
        line-height: 1.55;
    }

    .page-toc-card {
        padding-block-start: var(--space-2);
    }

    .page-toc-label {
        margin-block-end: var(--space-3);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }

    .page-toc-nav {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 6rem);
        overflow: auto;
    }

    .page-toc-link {
        padding: 0.35rem 0;
        color: var(--ink-soft);
        text-decoration: none;
        font-size: 0.875rem;
        border-inline-start: 2px solid transparent;
        padding-inline-start: var(--space-3);
    }

    .page-toc-link:hover,
    .page-toc-link.active {
        color: var(--ink);
        border-inline-start-color: var(--verdigris);
    }

    .page-toc-empty {
        color: var(--ink-soft);
        font-size: 0.875rem;
    }

    .hamburger {
        position: relative;

        &,
        &::before,
        &::after {
            display: block;
            width: 1.1rem;
            height: 1px;
            background: currentColor;
        }

        &::before,
        &::after {
            content: '';
            position: absolute;
            inset-inline-start: 0;
        }

        &::before {
            top: -5px;
        }

        &::after {
            top: 5px;
        }
    }
}

@layer utilities {
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@layer responsive {
    @container doc (width >= 40rem) {
        .features-grid,
        .results-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .comparison-grid,
        .runtime-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .hero-section {
            grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.85fr);
            align-items: start;
        }

        .features-grid {
            grid-column: 1 / -1;
        }
    }

    @media (width <= 1100px) {
        .docs-shell {
            grid-template-columns: minmax(0, 1fr);
            padding-inline: var(--space-5);
        }

        .page-toc {
            display: none;
        }
    }

    @media (width <= 768px) {
        .app {
            grid-template-columns: 1fr;
        }

        .mobile-header {
            position: sticky;
            top: 0;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            min-height: 3.25rem;
            padding-inline: var(--space-3);
            background: var(--paper);
            border-block-end: 1px solid var(--line);
        }

        .mobile-logo {
            font-family: var(--font-serif);
            font-weight: 600;
        }

        .mobile-theme-btn {
            padding-inline: var(--space-2);
            border: 1px solid var(--line-strong);
            border-radius: var(--radius-control);
            background: var(--paper-raised);
        }

        [data-theme='light'] .theme-icon.dark,
        [data-theme='dark'] .theme-icon.light {
            display: none;
        }

        .sidebar {
            position: fixed;
            inset: 0 auto 0 0;
            width: min(20rem, 88vw);
            transform: translateX(-100%);
            transition: transform 160ms linear;

            [dir='rtl'] & {
                transform: translateX(100%);
            }

            &.open {
                transform: none;
            }
        }

        .sidebar-close {
            display: inline-flex;
        }

        .sidebar-overlay {
            display: block;
            position: fixed;
            inset: 0;
            z-index: 3;
            background: rgb(20 24 22 / 0.45);
            opacity: 0;
            pointer-events: none;

            &.active {
                opacity: 1;
                pointer-events: auto;
            }
        }

        .docs-shell {
            padding: var(--space-5) var(--space-4) var(--space-7);
        }

        .content-section,
        h3[id],
        .method,
        .ref-group {
            scroll-margin-top: var(--header-offset);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        .sidebar {
            transition: none;
        }
    }

    @media (prefers-contrast: more) {
        :root {
            --line: var(--line-strong);
        }
    }

    @media (forced-colors: active) {
        .hero-button.primary,
        .skip-link {
            border: 1px solid ButtonText;
        }

        .nav-link.active,
        .tab-button.active,
        .page-toc-link.active {
            border-color: Highlight;
        }

        :focus-visible {
            outline-color: CanvasText;
        }
    }
}

@media print {
    @page {
        margin: 16mm;
    }

    .sidebar,
    .sidebar-overlay,
    .mobile-header,
    .page-toc,
    .scroll-progress,
    .skip-link,
    .copy-btn,
    .api-filter,
    .filter-label,
    .filter-status,
    .tab-list,
    .hero-actions,
    .theme-toggle {
        display: none !important;
    }

    .app,
    .docs-shell,
    .main-content {
        display: block;
    }

    .tab-panel,
    .tab-panel-label {
        display: block !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    a[href^='http']::after {
        content: ' (' attr(href) ')';
        font-size: 0.85em;
    }
}

::highlight(jme-find) {
    background-color: var(--find-bg);
    color: var(--find-ink);
}

::highlight(jme-find-current) {
    background-color: var(--find-current-bg);
    color: var(--find-current-ink);
}

mark.find-hit {
    background-color: var(--find-bg);
    color: var(--find-ink);

    &.current {
        background-color: var(--find-current-bg);
        color: var(--find-current-ink);
    }
}

@media (forced-colors: active) {
    ::highlight(jme-find),
    mark.find-hit {
        background-color: Mark;
        color: MarkText;
    }

    ::highlight(jme-find-current),
    mark.find-hit.current {
        background-color: Highlight;
        color: HighlightText;
    }
}