@layer layout {

    .sticky-page .page-layout {
        display: grid;

        grid-template-columns: 250px 1fr;

        gap: var(--spacing-xl);

        max-width: 1200px;

        margin-inline: auto;
    }

}

@layer components {

    .toc {
        background: var(--color-surface);

        border: 1px solid var(--color-border);

        border-radius: var(--radius-lg);

        padding: var(--spacing-lg);

        box-shadow: var(--shadow-md);

        position: sticky;

        top: var(--spacing-lg);

        align-self: start;
    }

    .content section {
        margin-bottom: 6rem;
    }

    .content p {
        margin-bottom: var(--spacing-lg);
    }

}