html {
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}

.toc-book {
    --toc-text: var(--color-theme-text, #1f2933);
    --toc-surface: var(--color-theme-background, #ffffff);
    --toc-accent: var(--color-theme-accent, #2f6fed);
    position: relative;
    overflow: hidden;
    max-width: 48rem;
    margin: 1.25rem auto;
    padding: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
    border-radius: 1rem;
    background: var(--toc-surface);
    border: 1px solid color-mix(in srgb, var(--toc-text) 12%, transparent);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 18px 40px -24px rgba(15, 23, 42, .35);
}

.toc-book::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: .3rem;
    background: linear-gradient(90deg, var(--toc-accent), color-mix(in srgb, var(--toc-accent) 35%, transparent));
}

.toc-book__head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--toc-text) 10%, transparent);
}

.toc-book__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: .75rem;
    color: var(--toc-accent);
    background: color-mix(in srgb, var(--toc-accent) 14%, transparent);
}

.toc-book__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.15;
    color: var(--toc-accent);
    font-size: clamp(1.25rem, 1.05rem + .7vw, 1.85rem);
}

.toc-book__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .15rem;
}

@media (min-width: 640px) {
    .toc-book--cols {
        max-width: 56rem;
    }

    .toc-book__list--cols {
        display: block;
        columns: 2;
        column-gap: clamp(1rem, .5rem + 2vw, 2.5rem);
    }

    .toc-book__list--cols .toc-book__item {
        break-inside: avoid;
    }

    .toc-book__list--cols .toc-book__item + .toc-book__item {
        margin-top: .15rem;
    }
}

.toc-book__link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem .85rem;
    border-radius: .7rem;
    text-decoration: none;
    color: var(--toc-text);
    font-family: var(--font-body);
    transition: background-color .18s ease, color .18s ease;
}

.toc-book__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 .45rem;
    flex: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    color: var(--toc-surface);
    background: var(--toc-accent);
    box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--toc-accent) 55%, transparent);
    transition: transform .18s ease;
}

.toc-book__label {
    flex: 1 1 auto;
    font-weight: 500;
    line-height: 1.35;
}

.toc-book__arrow {
    width: .5rem;
    height: .5rem;
    flex: none;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    color: var(--toc-accent);
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
}

.toc-book__link:hover,
.toc-book__link:focus-visible {
    background: color-mix(in srgb, var(--toc-accent) 9%, transparent);
    color: var(--toc-accent);
    outline: none;
}

.toc-book__link:hover .toc-book__num,
.toc-book__link:focus-visible .toc-book__num {
    transform: scale(1.06);
}

.toc-book__link:hover .toc-book__arrow,
.toc-book__link:focus-visible .toc-book__arrow {
    opacity: 1;
    transform: rotate(45deg) translate(2px, -2px);
}

.toc-book__link:focus-visible {
    box-shadow: 0 0 0 2px var(--toc-surface), 0 0 0 4px var(--toc-accent);
}

html, body {
    scroll-behavior: smooth !important;
}

@media (min-width: 1280px) {
    .container {
        display: grid;
        grid-template-columns: [toc] 10rem [full-start] 1fr [half-start] var(--container-gap) [main-start] min(var(--container-width), calc(100% - 10rem - var(--container-gap)*2)) [main-end] var(--container-gap) [half-end] 1fr [full-end];
    }
    .block-hero {
        grid-column: toc / full-end;
    }
}

@media (min-width: 1024px) and (max-width: 1280px) {
    .block-content-banner {
        max-width: 100%;
    }
}