:root {
    color-scheme: light;
    --color-blue-900: #173f8f;
    --color-blue-700: #2454b8;
    --color-blue-100: #eaf0ff;
    --color-green-700: #287d34;
    --color-green-100: #eaf7e8;
    --color-yellow-500: #876600;
    --color-yellow-100: #fff7d6;
    --color-ink: #172033;
    --color-muted: #566074;
    --color-border: #d7deea;
    --color-surface: #ffffff;
    --color-canvas: #f7f9fc;
    --shadow-soft: 0 0.25rem 1.25rem rgb(23 32 51 / 8%);
    --radius-small: 0.5rem;
    --radius-medium: 0.875rem;
    --content-width: 72rem;
    --reading-width: 48rem;
    --library-width: 88rem;
    --wide-content-width: 100rem;
    --document-detail-width: var(--wide-content-width);
    --video-detail-width: 140rem;
    --space-page: clamp(1rem, 4vw, 2rem);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    color: var(--color-ink);
    background: var(--color-canvas);
}

.account-dashboard-access {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: rgb(255 255 255 / 88%);
    box-shadow: var(--shadow-soft);
}

.account-dashboard-access .account-dashboard-section__heading {
    gap: 0.25rem;
}

.account-dashboard-access .account-dashboard-section__heading h2 {
    color: var(--color-blue-900);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
}

.account-dashboard-access .account-dashboard-section__heading p,
.account-dashboard-access p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.92rem;
}

.account-dashboard-access__items {
    display: grid;
    gap: 0.65rem;
}

.account-dashboard-access .account-follow-card {
    padding: 0.8rem;
}

.account-dashboard-access .account-follow-card form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 0.65rem;
}

.account-dashboard-access__empty {
    padding: 0.85rem;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.account-dashboard-access__teacher {
    padding-block-start: 0.75rem;
    border-block-start: 0.0625rem solid var(--color-border);
}

.account-dashboard-access__teacher form {
    margin-block-start: 0.55rem;
}

.account-dashboard-access__teacher .button {
    width: fit-content;
}

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

.account-dashboard-section.account-history-preview {
    margin-block-start: 0;
}



html {
    scroll-behavior: smooth;
}

.account-dashboard-recommendations .library-resource-card {
    min-width: 0;
}

body {
    min-width: 20rem;
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-canvas);
}

main {
    flex: 1;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-blue-700);
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--color-blue-900);
}

:focus-visible {
    outline: 0.2rem solid var(--color-yellow-500);
    outline-offset: 0.2rem;
}

.layout-container {
    width: min(100% - (2 * var(--space-page)), var(--content-width));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    z-index: 100;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-small);
    color: #ffffff;
    background: var(--color-blue-900);
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

.visually-hidden {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.announcement {
    padding-block: 0.55rem;
    border-block-end: 0.0625rem solid #e3c449;
    font-weight: 650;
    color: #493b00;
    background: var(--color-yellow-100);
}

.site-header {
    position: relative;
    z-index: 10;
    border-block-end: 0.0625rem solid var(--color-border);
    background: rgb(255 255 255 / 96%);
    box-shadow: var(--shadow-soft);
}

.site-header__inner {
    min-height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.site-brand {
    min-width: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-ink);
    font-weight: 800;
    text-decoration: none;
}

.site-brand__logo {
    width: 5rem;
    height: 2.5rem;
    object-fit: contain;
}

.site-brand__name {
    white-space: nowrap;
}

.site-navigation__toggle {
    padding: 0.55rem 0.8rem;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-small);
    color: var(--color-blue-900);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.site-navigation__toggle::-webkit-details-marker {
    display: none;
}

.site-navigation--desktop {
    display: none;
}

.site-navigation__list {
    position: absolute;
    inset: 100% 0 auto;
    margin: 0;
    padding: 0.75rem var(--space-page) 1rem;
    display: grid;
    gap: 0.25rem;
    list-style: none;
    border-block-end: 0.0625rem solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.site-navigation__list a {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-small);
    color: var(--color-blue-900);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.site-navigation__list a:hover {
    background: var(--color-blue-100);
}

.site-navigation__list .site-navigation__support-link,
.site-sidebar__links .site-sidebar__support-link {
    border: 0.0625rem solid #a98200;
    color: #604a00;
    background: var(--color-yellow-100);
}

.site-navigation__list .site-navigation__support-link:hover,
.site-navigation__list .site-navigation__support-link:focus-visible,
.site-sidebar__links .site-sidebar__support-link:hover,
.site-sidebar__links .site-sidebar__support-link:focus-visible {
    border-color: var(--color-yellow-500);
    color: #493800;
    background: #ffefad;
}

.site-navigation__list a[aria-current="page"] {
    color: var(--color-blue-900);
    text-decoration: underline;
    text-decoration-color: var(--color-yellow-500);
    text-decoration-thickness: 0.2rem;
    text-underline-offset: 0.35rem;
}

.site-navigation__panel {
    position: absolute;
    inset: 100% 0 auto;
    padding: 0.75rem var(--space-page) 1rem;
    display: grid;
    gap: 0.5rem;
    border-block-end: 0.0625rem solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.site-navigation__panel .site-navigation__list {
    position: static;
    padding: 0;
    border-block-end: 0;
    box-shadow: none;
}

.site-account-actions {
    display: grid;
    gap: 0.35rem;
}

.site-account-actions form {
    margin: 0;
}

.site-account-actions__link,
.site-account-actions__button {
    min-height: 2.35rem;
    padding: 0.55rem 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-small);
    color: var(--color-blue-900);
    background: transparent;
    font: inherit;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.site-account-actions__link:hover,
.site-account-actions__link:focus-visible {
    background: var(--color-blue-100);
}

.site-account-actions__button {
    border: 0.0625rem solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 0.15rem 0.55rem rgb(23 63 143 / 8%);
}

.site-account-actions__button:hover,
.site-account-actions__button:focus-visible {
    border-color: var(--color-blue-700);
    background: var(--color-blue-100);
}

.site-account-actions--mobile {
    padding-block-start: 0.5rem;
    border-block-start: 0.0625rem solid var(--color-border);
}

.site-sidebar-trigger {
    min-height: 2.35rem;
    padding: 0.55rem 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-small);
    color: var(--color-blue-900);
    background: var(--color-surface);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 0.15rem 0.55rem rgb(23 63 143 / 8%);
}

.site-sidebar-trigger:hover,
.site-sidebar-trigger:focus-visible {
    border-color: var(--color-blue-700);
    background: var(--color-blue-100);
}

.site-sidebar-toggle {
    display: none;
    min-height: 2.35rem;
    min-width: 2.35rem;
    flex: 0 0 auto;
    padding: 0.55rem;
    align-items: center;
    justify-content: center;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-small);
    color: var(--color-blue-900);
    background: var(--color-surface);
    font: inherit;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0.15rem 0.55rem rgb(23 63 143 / 8%);
}

.site-sidebar-toggle:hover,
.site-sidebar-toggle:focus-visible {
    border-color: var(--color-blue-700);
    background: var(--color-blue-100);
}

.site-sidebar--desktop {
    display: none;
}

.site-resource-menu {
    display: none;
}

@media (max-width: 74.99rem) {
    .site-resource-menu {
        display: block;
        position: relative;
        margin-inline-start: auto;
    }

    .site-resource-menu summary {
        padding: 0.55rem 0.8rem;
        border: 0.0625rem solid var(--color-border);
        border-radius: var(--radius-small);
        color: var(--color-blue-900);
        background: var(--color-surface);
        font-weight: 800;
        cursor: pointer;
    }

    .site-resource-menu nav {
        position: absolute;
        z-index: 90;
        inset-inline-end: 0;
        inset-block-start: calc(100% + 0.5rem);
        width: min(20rem, calc(100vw - 2rem));
        max-height: 75vh;
        overflow-y: auto;
        padding: 1rem;
        border: 0.0625rem solid var(--color-border);
        border-radius: var(--radius-medium);
        background: var(--color-surface);
        box-shadow: var(--shadow-soft);
    }

    .site-resource-menu .site-navigation__list {
        position: static;
        display: grid;
        gap: 0.4rem;
        padding: 0;
        border: 0;
        box-shadow: none;
    }
}

.site-shell-body {
    width: 100%;
    margin-inline: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* The shell is the body's flex item: short pages must still consume the
       space between the header and footer, while long pages grow naturally. */
    flex: 1 1 auto;
    min-height: 0;
}

.site-shell-main {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.site-shell-main > main {
    flex: 1 0 auto;
}

.site-shell-main > .site-footer {
    flex: 0 0 auto;
}

.site-sidebar {
    color: var(--color-ink);
}

.site-sidebar__nav {
    display: grid;
    gap: 0.8rem;
}

.site-sidebar__section {
    padding: 0.75rem;
    border: 0.0625rem solid #d7e3f5;
    border-radius: var(--radius-medium);
    background: rgb(255 255 255 / 92%);
    box-shadow: 0 0.3rem 1rem rgb(23 63 143 / 7%);
}

.site-sidebar__section[open] {
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
}

.site-sidebar__section summary,
.site-sidebar__section-title {
    margin: 0;
    color: var(--color-blue-900);
    font-size: 0.83rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.site-sidebar__section summary {
    cursor: pointer;
}

.site-sidebar__section summary::marker {
    color: var(--color-blue-700);
}

.site-sidebar__section-body {
    margin-block-start: 0.55rem;
}

.site-sidebar__links,
.site-sidebar__trail {
    margin: 0.55rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.2rem;
    list-style: none;
}

.site-sidebar__support {
    margin-block-start: 0.4rem;
}

.site-sidebar__links a,
.site-sidebar__links span,
.site-sidebar__trail a,
.site-sidebar__trail span {
    min-width: 0;
    display: block;
    padding: 0.45rem 0.55rem;
    border-radius: var(--radius-small);
    color: var(--color-blue-900);
    font-weight: 750;
    line-height: 1.25;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.site-sidebar__links span,
.site-sidebar__trail span {
    color: var(--color-muted);
}

.site-sidebar__links a:hover,
.site-sidebar__links a:focus-visible,
.site-sidebar__trail a:hover,
.site-sidebar__trail a:focus-visible {
    background: var(--color-blue-100);
}

.site-sidebar__links a[aria-current],
.site-sidebar__trail span[aria-current],
.site-sidebar__trail a[aria-current] {
    border-inline-start: 0.25rem solid var(--color-yellow-500);
    color: var(--color-blue-900);
    background: #eef4ff;
    box-shadow: inset 0 0 0 0.0625rem rgb(23 63 143 / 14%);
}

.site-sidebar-drawer {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: none;
}

.site-sidebar-drawer[aria-hidden="false"] {
    display: block;
}

.site-sidebar-drawer-open {
    overflow: hidden;
}

.site-sidebar-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(8 20 46 / 45%);
}

.site-sidebar--drawer {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(22rem, calc(100vw - 2rem));
    padding: 1rem;
    overflow-y: auto;
    background: #f4f8ff;
    box-shadow: 1rem 0 2rem rgb(8 20 46 / 18%);
}

.site-sidebar-drawer__header {
    margin-block-end: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-sidebar-drawer__header strong {
    color: var(--color-blue-900);
    font-size: 1.1rem;
}

.site-sidebar-drawer__header button {
    padding: 0.45rem 0.7rem;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-small);
    color: var(--color-blue-900);
    background: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.site-with-sidebar .account-dashboard-layout {
    grid-template-columns: minmax(0, 1fr);
}

.site-with-sidebar .account-dashboard-nav {
    display: none;
}

.page-shell {
    padding-block: clamp(2rem, 6vw, 4.5rem);
}

.support-page {
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.support-hero {
    max-width: min(100%, 84rem);
    margin-inline: auto;
    margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
}

.support-hero h1 {
    margin: 0 0 0.75rem;
    color: var(--color-ink);
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 0.98;
}

.support-hero p {
    max-width: 68rem;
    margin: 0.7rem 0 0;
    color: var(--color-muted);
    font-size: clamp(1.02rem, 1.6vw, 1.18rem);
    line-height: 1.65;
}

.support-comparison {
    width: min(100%, 84rem);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.15rem, 2vw, 1.75rem);
    align-items: stretch;
}

.support-plan-card {
    min-width: 0;
    min-height: 100%;
    padding: clamp(1.35rem, 2.4vw, 1.8rem);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.support-plan-card--featured {
    border-color: rgb(36 87 197 / 35%);
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    box-shadow: 0 1rem 2.2rem rgb(23 63 143 / 12%);
}

.support-plan-card__body {
    display: grid;
    gap: 0.85rem;
}

.support-plan-card h2,
.support-plan-card h3 {
    margin: 0;
    color: var(--color-ink);
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    line-height: 1.1;
}

.support-plan-card p {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.55;
}

.support-plan-card__price {
    color: var(--color-blue-900) !important;
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.support-plan-card__price span {
    margin-inline-start: 0.2rem;
    color: var(--color-blue-700);
    font-size: 1rem;
    letter-spacing: 0;
}

.support-plan-card__badge {
    width: fit-content;
    padding: 0.38rem 0.7rem;
    border-radius: 999rem;
    color: #493800 !important;
    background: var(--color-yellow-100);
    font-weight: 900;
    box-shadow: inset 0 0 0 0.0625rem #e0bd2e;
}

.support-plan-card__features {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
    color: var(--color-ink);
    list-style: none;
}

.support-plan-card__features li {
    position: relative;
    padding-inline-start: 1.35rem;
    line-height: 1.45;
}

.support-plan-card__features li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    color: var(--color-green-700);
    font-weight: 900;
}

.support-plan-card__action {
    margin-block-start: auto;
}

.support-plan-card__action .button,
.support-plan-card > .button {
    width: 100%;
}

.support-one-time-form {
    display: grid;
    gap: 0.8rem;
}

.support-one-time-form label {
    display: grid;
    gap: 0.4rem;
    color: var(--color-ink);
    font-weight: 800;
}

.support-one-time-form input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.65rem 0.8rem;
    border: 0.0625rem solid #b8c8ea;
    border-radius: var(--radius-small);
    color: var(--color-ink);
    font: inherit;
    background: #ffffff;
}

.support-page__secondary-action {
    width: min(100%, 84rem);
    margin: 1.4rem auto 0;
}

@media (max-width: 68rem) {
    .support-comparison {
        width: min(100%, 48rem);
        grid-template-columns: 1fr;
    }

    .support-plan-card {
        min-height: auto;
    }
}

@media (max-width: 42rem) {
    .support-page {
        padding-block: 2rem 3rem;
    }

    .support-hero {
        margin-block-end: 1.25rem;
    }

    .support-plan-card {
        padding: 1.15rem;
        border-radius: var(--radius-medium);
    }

    .support-plan-card__price {
        font-size: 2rem;
    }

    .support-plan-card__action .button,
    .support-plan-card > .button,
    .support-page__secondary-action .button {
        width: 100%;
    }
}

.page-heading,
.pedagogical-content {
    width: min(100%, var(--reading-width));
    margin-inline: auto;
}

.page-heading {
    margin-block-end: clamp(1.25rem, 3vw, 1.75rem);
}

.site-messages {
    display: grid;
    gap: 0.65rem;
    padding-block-start: 1rem;
}

.site-message {
    width: min(100%, var(--reading-width));
    padding: 0.8rem 0.9rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-small);
    color: var(--color-ink);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.site-message p {
    margin: 0;
    font-weight: 750;
}

.site-message--success {
    border-color: rgb(40 125 52 / 35%);
    background: var(--color-green-100);
}

.site-message--error {
    border-color: rgb(180 45 45 / 35%);
    background: #fff1f1;
}

.site-message--warning {
    border-color: rgb(135 102 0 / 35%);
    background: var(--color-yellow-100);
}

.site-message--info {
    border-color: #b9caef;
    background: var(--color-blue-100);
}

.site-message__close {
    appearance: none;
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 999rem;
    color: inherit;
    background: rgb(255 255 255 / 55%);
    cursor: pointer;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
}

.site-message__close:hover,
.site-message__close:focus-visible {
    background: #ffffff;
    outline: 0.1875rem solid rgb(36 84 184 / 22%);
    outline-offset: 0.125rem;
}

.breadcrumbs {
    width: min(100%, var(--reading-width));
    margin: 0 auto clamp(1.25rem, 4vw, 2rem);
    color: var(--color-muted);
    font-size: 0.92rem;
}

.breadcrumbs ol {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
}

.breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-inline-start: 0.4rem;
    color: #8490a5;
}

.breadcrumbs a {
    font-weight: 700;
}

.breadcrumbs [aria-current="page"] {
    max-width: min(52rem, 70vw);
    min-width: 0;
    overflow-wrap: anywhere;
}

.about-page.layout-container {
    width: min(100% - (2 * var(--space-page)), var(--library-width));
}

.about-page .breadcrumbs {
    width: 100%;
    margin-inline: 0;
}

.about-page__top {
    display: grid;
    gap: clamp(2.75rem, 6vw, 4.25rem);
    align-items: start;
}

.about-hero,
.about-section--text {
    max-width: 66rem;
}

.about-hero h1 {
    margin: 0;
    font-size: clamp(2.35rem, 4vw, 3.25rem);
}

.about-hero p,
.about-section p,
.about-panel p {
    color: var(--color-muted);
}

.about-hero p {
    max-width: 66rem;
    margin-block: 1rem 0;
    font-size: clamp(1.05rem, 2vw, 1.22rem);
}

.about-section,
.about-panel {
    margin-block-start: clamp(2.75rem, 6vw, 4.25rem);
}

.about-page__top .about-section {
    margin-block-start: 0;
}

.about-section h2,
.about-panel h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.about-section--text h2 {
    max-width: 48rem;
    padding-block-end: 0.75rem;
    border-block-end: 0.18rem solid var(--color-blue-700);
}

.about-section--text p {
    max-width: 66rem;
    margin-block: 1.25rem 0;
}

.about-section--wide,
.about-panel,
.about-section--cta {
    width: 100%;
}

.about-principles {
    margin-block-start: 1.25rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 1.5rem);
}

.about-principles article {
    padding: clamp(1rem, 2vw, 1.25rem);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: 0 0.7rem 1.6rem rgb(23 63 143 / 6%);
}

.about-principles h3 {
    margin: 0;
    color: var(--color-blue-900);
    font-size: 1.1rem;
}

.about-principles p {
    margin-block: 0.5rem 0;
}

.about-panel,
.about-section--cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    align-items: center;
    justify-content: space-between;
}

.about-panel {
    padding: clamp(1.25rem, 3vw, 1.8rem);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: rgb(255 255 255 / 58%);
}

.about-panel > div,
.about-section--cta > div {
    max-width: 48rem;
    flex: 1 1 30rem;
}

.about-panel p,
.about-section--cta p {
    margin-block: 0.65rem 0;
}

.about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 auto;
}

.support-note {
    margin-block-start: clamp(2.75rem, 6vw, 4.25rem);
    padding: clamp(1.25rem, 3vw, 1.8rem);
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    align-items: center;
    justify-content: space-between;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: rgb(255 255 255 / 58%);
}

.support-note > div {
    max-width: 48rem;
    flex: 1 1 30rem;
}

.support-note h2,
.support-note p {
    margin: 0;
}

.support-note h2 {
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    line-height: 1.15;
}

.support-note p {
    margin-block-start: 0.65rem;
    color: var(--color-muted);
}

.contact-page {
    width: min(100% - (2 * var(--space-page)), 42rem);
}

.contact-page__header {
    display: grid;
    gap: 0.85rem;
    margin-block-end: clamp(1.5rem, 4vw, 2.25rem);
}

.contact-page__header h1,
.contact-page__header p {
    margin: 0;
}

.contact-page__header p {
    color: var(--color-muted);
    font-size: clamp(1.05rem, 2vw, 1.18rem);
}

.contact-form {
    padding: clamp(1.25rem, 4vw, 2rem);
    display: grid;
    gap: 1rem;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.contact-form__field {
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.contact-form__name-grid {
    display: grid;
    gap: 1rem;
}

.contact-form__field > label {
    font-weight: 800;
}

.contact-form textarea {
    width: 100%;
    min-height: 10rem;
    resize: vertical;
}

.contact-form__errors {
    padding: 0.85rem 1rem;
    border: 0.0625rem solid #f2b8b5;
    border-radius: var(--radius-small);
    color: #7a1f1c;
    background: #fff1f0;
}

.contact-form__honeypot {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    margin: -0.0625rem;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.contact-form__submit {
    width: fit-content;
    margin-block-start: 0.35rem;
}

.page-heading__summary {
    max-width: 42rem;
    margin: 1rem 0 0;
    color: var(--color-muted);
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
    white-space: normal;
    overflow-wrap: anywhere;
}

.page-heading__summary br {
    display: block;
    content: "";
    margin-block-start: 0.35rem;
}

.tag-list {
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
}

.tag-list li {
    padding: 0.3rem 0.7rem;
    border: 0.0625rem solid #b9caef;
    border-radius: 999rem;
    color: var(--color-blue-900);
    font-size: 0.9rem;
    font-weight: 700;
    background: var(--color-blue-100);
}

.page-heading__eyebrow {
    margin: 0 0 0.25rem;
    color: var(--color-blue-700);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    font-size: clamp(2rem, 7vw, 3.75rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.resource-detail h1 {
    max-width: 34ch;
    font-size: clamp(1.65rem, 3.2vw, 2.35rem);
    line-height: 1.14;
}

.resource-detail--document h1 {
    max-width: none;
}

.resource-detail--video.layout-container {
    width: min(100% - (2 * var(--space-page)), var(--video-detail-width));
}

.resource-detail--written.layout-container {
    width: min(100% - (2 * var(--space-page)), var(--video-detail-width));
}

.resource-detail--document.layout-container {
    width: min(100% - (2 * var(--space-page)), var(--document-detail-width));
    max-width: var(--document-detail-width);
}

.resource-detail--written.page-shell {
    padding-block-start: clamp(1.25rem, 3vw, 2.25rem);
}

.resource-detail--written > .page-heading {
    margin-block-end: clamp(0.85rem, 2vw, 1.2rem);
}

.resource-detail--video > .breadcrumbs {
    width: 100%;
    margin-inline: 0;
    margin-block-end: clamp(1rem, 2vw, 1.5rem);
}

.resource-detail--document > .breadcrumbs {
    width: 100%;
    margin-inline: 0;
}

.pedagogical-content {
    display: flow-root;
}

.content-block {
    margin-block: clamp(1.5rem, 4vw, 2.5rem);
}

.content-block:first-child {
    margin-block-start: 0;
}

.content-heading {
    color: var(--color-ink);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.content-heading--h2 {
    margin: clamp(2.25rem, 6vw, 3.75rem) 0 1rem;
    padding-block-end: 0.65rem;
    border-block-end: 0.1875rem solid var(--color-blue-700);
    font-size: clamp(1.5rem, 4vw, 2.15rem);
}

.content-heading--h3 {
    margin: 2rem 0 0.75rem;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
}

.rich-text {
    color: var(--color-ink);
    font-size: 1.05rem;
}

.rich-text > :first-child {
    margin-block-start: 0;
}

.rich-text > :last-child {
    margin-block-end: 0;
}

.rich-text p,
.rich-text li {
    max-width: 70ch;
}

.rich-text li + li {
    margin-block-start: 0.4rem;
}

.rich-text a,
.resource-link,
.resource-panel__fallback a {
    font-weight: 700;
}

.callout {
    padding: clamp(1rem, 4vw, 1.5rem);
    border: 0.0625rem solid var(--color-border);
    border-inline-start-width: 0.35rem;
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.callout--information {
    border-inline-start-color: var(--color-blue-700);
    background: var(--color-blue-100);
}

.callout--method {
    border-inline-start-color: var(--color-yellow-500);
    background: var(--color-yellow-100);
}

.callout--common_error {
    border-inline-start-color: #9a3412;
    background: #fff3ed;
}

.callout__label,
.resource-kind {
    margin: 0 0 0.35rem;
    color: var(--color-blue-900);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.callout--method .callout__label {
    color: #654c00;
}

.callout--common_error .callout__label {
    color: #7c2d12;
}

.callout__title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    line-height: 1.25;
}

.resource-panel {
    overflow: hidden;
    border: 0.0625rem solid #b9caef;
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.resource-panel__heading {
    padding: clamp(1rem, 4vw, 1.5rem);
    color: #ffffff;
    background: var(--color-blue-900);
}

.resource-panel__heading .resource-kind {
    color: #cbd9ff;
}

.resource-panel__heading h2 {
    margin: 0;
    font-size: clamp(1.35rem, 4vw, 1.85rem);
    line-height: 1.2;
}

.resource-panel__heading p:last-child {
    margin-block-end: 0;
}

.video-embed {
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    background: #10182a;
}

.video-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.resource-panel__fallback {
    margin: 0;
    padding: 0.75rem 1rem;
    text-align: center;
    background: var(--color-blue-100);
}

.resource-youtube-engagement {
    padding: clamp(1rem, 3vw, 1.25rem);
    display: grid;
    gap: 0.85rem;
    background: var(--color-blue-100);
}

.resource-youtube-engagement__copy h2 {
    margin: 0;
    color: var(--color-blue-900);
    font-size: clamp(1rem, 2.5vw, 1.15rem);
}

.resource-youtube-engagement__copy p,
.resource-youtube-engagement__note {
    margin: 0.2rem 0 0;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.resource-youtube-engagement__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.resource-favorite__form {
    margin: 0;
}

.resource-favorite__button,
.resource-favorite__login {
    min-height: 2.75rem;
    padding: 0.65rem 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.0625rem solid var(--color-green-700);
    border-radius: 999rem;
    color: var(--color-green-900);
    font: inherit;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    background: #ffffff;
    cursor: pointer;
}

.resource-favorite__button:hover,
.resource-favorite__button:focus-visible,
.resource-favorite__login:hover,
.resource-favorite__login:focus-visible {
    color: var(--color-green-900);
    background: var(--color-green-100);
    outline: 0.1875rem solid rgb(42 130 58 / 25%);
    outline-offset: 0.125rem;
    text-decoration: none;
}

.resource-youtube-engagement__action {
    appearance: none;
    padding: 0.55rem 0.85rem;
    border: 0.0625rem solid #b9caef;
    border-radius: 999rem;
    color: var(--color-blue-900);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    background: #ffffff;
    cursor: pointer;
}

.resource-youtube-engagement__action:hover,
.resource-youtube-engagement__action:focus-visible {
    color: var(--color-blue-900);
    background: var(--color-blue-100);
    outline: 0.1875rem solid rgb(36 84 184 / 25%);
    outline-offset: 0.125rem;
    text-decoration: none;
}

.resource-youtube-engagement__action--like {
    color: #ffffff;
    border-color: var(--color-blue-700);
    background: var(--color-blue-700);
}

.written-exercise {
    display: grid;
    gap: 1rem;
    width: 100%;
    min-width: 0;
}

.written-exercise__header,
.written-exercise__body,
.written-exercise__corrections,
.written-exercise__conversion {
    background: #fff;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 1.25rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    padding: clamp(1.2rem, 2vw, 2rem);
}

.written-exercise__header {
    display: flex;
    gap: 0.75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding: clamp(0.8rem, 1.4vw, 1.1rem) clamp(1rem, 2vw, 1.5rem);
}

.written-exercise__intro {
    flex: 1 1 20rem;
    min-width: 0;
}

.written-exercise__intro .resource-kind {
    margin: 0;
}

.written-exercise__metadata-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    align-items: center;
    margin: 0.25rem 0 0;
    color: var(--color-muted);
    font-size: 0.98rem;
    font-weight: 750;
}

.written-exercise__metadata-line span {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

.written-exercise__metadata-line span::before {
    content: "·";
    margin-right: 0.65rem;
    color: #9aa9c3;
}

.written-exercise__metadata-line span:first-child::before {
    content: none;
    margin-right: 0;
}

.written-exercise__actions {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.55rem;
    justify-content: flex-end;
    max-width: 100%;
    min-width: 0;
}

.written-exercise__actions .resource-favorite__button,
.written-exercise__actions .resource-favorite__login,
.written-exercise__action {
    min-height: 2.5rem;
    padding: 0.55rem 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.0625rem solid var(--color-border);
    border-radius: 999rem;
    background: #ffffff;
    color: var(--color-blue-900);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 850;
    line-height: 1.1;
    text-decoration: none;
    max-width: 100%;
    white-space: normal;
}

.written-exercise__actions .resource-favorite__button,
.written-exercise__actions .resource-favorite__login {
    border-color: var(--color-green-700);
    color: var(--color-green-900);
}

.written-exercise__action:hover,
.written-exercise__action:focus-visible {
    border-color: var(--color-blue-700);
    background: var(--color-blue-100);
    outline: 0.1875rem solid rgb(36 84 184 / 20%);
    outline-offset: 0.125rem;
}

.written-exercise__action:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.collection-exercise-nav {
    display: grid;
    gap: 0.6rem;
    padding: clamp(0.9rem, 1.6vw, 1.2rem);
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 1.15rem;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.collection-exercise-nav--bottom {
    margin-block-start: 0.25rem;
}

.collection-exercise-nav__position,
.collection-exercise-nav__hint {
    margin: 0;
}

.collection-exercise-nav__position {
    color: var(--color-blue-900);
    font-size: 0.98rem;
    font-weight: 900;
}

.collection-exercise-nav__hint {
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.collection-exercise-nav__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.collection-exercise-nav__link {
    min-height: 2.5rem;
    padding: 0.55rem 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.0625rem solid var(--color-border);
    border-radius: 999rem;
    background: #ffffff;
    color: var(--color-blue-900);
    font-size: 0.92rem;
    font-weight: 850;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
}

.collection-exercise-nav__link:hover,
.collection-exercise-nav__link:focus-visible {
    border-color: var(--color-blue-700);
    background: var(--color-blue-100);
    outline: 0.1875rem solid rgb(36 84 184 / 20%);
    outline-offset: 0.125rem;
}

.collection-exercise-nav__link--collection {
    border-color: var(--color-blue-700);
    background: var(--color-blue-700);
    color: #ffffff;
}

.collection-exercise-nav__link--disabled {
    color: var(--color-muted);
    cursor: default;
    opacity: 0.56;
}

@media (max-width: 34rem) {
    .collection-exercise-nav__links {
        grid-template-columns: 1fr;
    }

    .collection-exercise-nav__link {
        min-height: 2.35rem;
    }
}

.written-exercise__metadata,
.written-exercise__conversion dl {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin: 1rem 0 0;
}

.written-exercise-callout {
    margin: 1rem 0;
    padding: 0.8rem 1rem;
    border-left: 0.25rem solid var(--color-blue-700);
    border-radius: 0.55rem;
    background: var(--color-blue-100);
}

.written-exercise-callout--control {
    border-left-color: #2f8a3b;
    background: #eef9ef;
}

.written-exercise-callout--reminder {
    border-left-color: #b7791f;
    background: #fff8e7;
}

.written-exercise__metadata div,
.written-exercise__conversion div {
    background: #eef4ff;
    border-radius: 0.9rem;
    padding: 0.75rem 0.9rem;
}

.written-exercise__metadata dt,
.written-exercise__conversion dt {
    color: #174093;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.written-exercise__metadata dd,
.written-exercise__conversion dd {
    margin: 0.2rem 0 0;
}

.written-exercise__body {
    color: #172033;
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.75;
    min-width: 0;
    overflow-wrap: anywhere;
}

.course-resource__body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: anywhere;
}

.course-resource__body > h1 {
    color: #174093;
    font-size: clamp(1.45rem, 2.6vw, 2.15rem);
    line-height: 1.2;
    margin: 2.25rem 0 0.85rem;
    break-after: avoid;
}

.course-resource__body > h2 {
    color: #174093;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    line-height: 1.25;
    margin: 1.7rem 0 0.65rem;
    break-after: avoid;
}

.course-resource__body blockquote > p:first-child strong {
    color: #174093;
    font-size: 1.05em;
}

.course-resource__body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: separate;
    border-spacing: 0.85rem 0.3rem;
    min-width: 100%;
}

.course-resource__body th,
.course-resource__body td {
    min-width: 5.25rem;
    padding: 0.35rem 0.75rem;
    vertical-align: top;
}

.course-resource__body .course-diagram,
.course-resource__body .minipage {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.course-resource__body .math.inline {
    display: inline;
    max-width: 100%;
    overflow: visible;
    vertical-align: middle;
}

.course-resource__body blockquote {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    border-left: 0.35rem solid #2d62c5;
    border-radius: 0.75rem;
    background: #f4f8ff;
    break-inside: avoid;
}

.written-exercise__body > h2,
.written-correction-heading h2 {
    color: #174093;
    font-size: clamp(1.45rem, 2vw, 2rem);
    margin: 0 0 1rem;
}

.written-correction-heading .resource-kind {
    margin: 0 0 0.35rem;
}

.written-correction-panels {
    display: grid;
    gap: 0.85rem;
}

.written-correction-panel {
    border: 1px solid rgba(36, 87, 197, 0.2);
    border-radius: 1rem;
    background: #f8fbff;
    overflow: hidden;
}

.written-correction-panel summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    color: #143a86;
    font-weight: 900;
    list-style: none;
}

.written-correction-panel summary::-webkit-details-marker {
    display: none;
}

.written-correction-panel summary::after {
    content: "+";
    border: 1px solid rgba(36, 87, 197, 0.24);
    border-radius: 999rem;
    display: inline-grid;
    height: 1.8rem;
    place-items: center;
    width: 1.8rem;
}

.written-correction-panel[open] summary::after {
    content: "−";
}

.written-correction-panel__body {
    border-top: 1px solid rgba(36, 87, 197, 0.16);
    padding: 0.35rem clamp(1rem, 2vw, 1.35rem) 1.2rem;
}

.written-correction-question {
    margin-top: 1.2rem;
}

.written-correction-question h3 {
    color: #172033;
    font-size: clamp(1.12rem, 1.4vw, 1.35rem);
    margin: 0 0 0.65rem;
}

.written-correction-block {
    margin: 0.8rem 0 0;
    padding: 0;
}

.written-correction-block h4 {
    color: #2457c5;
    font-size: 0.82rem;
    font-weight: 950;
    letter-spacing: 0.015em;
    margin: 0 0 0.25rem;
    text-transform: none;
}

.written-correction-block__content {
    line-height: 1.65;
}

.written-correction-block__content > :first-child,
.written-correction-block__content p:first-child {
    margin-top: 0;
}

.written-correction-block__content > :last-child,
.written-correction-block__content p:last-child {
    margin-bottom: 0;
}

.written-exercise-html,
.written-exercise-paragraph {
    max-width: 86rem;
    min-width: 0;
}

.written-exercise-section {
    margin-top: 2rem;
}

.written-exercise-section:first-child {
    margin-top: 0;
}

.written-exercise-section h2 {
    color: #174093;
    font-size: clamp(1.45rem, 2vw, 2rem);
    margin-bottom: 1rem;
}

.written-exercise-html ol,
.written-exercise-html ul,
.written-exercise-paragraph + .written-exercise-html ol {
    padding-left: 1.6rem;
}

.written-exercise-html li {
    margin: 0.55rem 0;
    min-width: 0;
}

.written-question-help {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
    align-items: flex-start;
    margin: 0.35rem 0 0.45rem;
    width: 100%;
}

.written-question-help__panel {
    border: 1px solid rgba(36, 87, 197, 0.18);
    border-radius: 999rem;
    background: transparent;
    width: auto;
    overflow: hidden;
}

.written-question-help__panel[open] {
    background: #f8fbff;
    border-radius: 0.75rem;
    width: 100%;
}

.written-question-help__panel summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    min-height: 1.8rem;
    padding: 0.2rem 0.52rem;
    color: #143a86;
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.2;
    list-style: none;
}

.written-question-help__panel summary::-webkit-details-marker {
    display: none;
}

.written-question-help__panel summary span[aria-hidden="true"] {
    display: inline-block;
    font-size: 0.9em;
    line-height: 1;
}

.written-question-help__panel[open] summary span[aria-hidden="true"] {
    font-size: 0;
}

.written-question-help__panel[open] summary span[aria-hidden="true"]::before {
    content: "−";
    font-size: 0.84rem;
}

.written-question-help__content {
    border-top: 1px solid rgba(36, 87, 197, 0.14);
    margin: 0 0.75rem 0.75rem;
    padding: 0.75rem 0 0;
}

.written-question-help__locked-content {
    max-width: 34rem;
}

.written-question-help__locked-content p {
    margin: 0 0 0.65rem;
}

.written-question-help__locked-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.written-question-help__support-link,
.written-question-help__login-link {
    display: inline-block;
    font-weight: 800;
}

.written-question-help .written-correction-question {
    margin-top: 0.55rem;
}

.written-question-help .written-correction-question h3 {
    font-size: 0.98rem;
    margin-bottom: 0.55rem;
}

.written-question-help .written-correction-block {
    margin: 0.75rem 0 0;
    padding: 0;
}

.written-question-help .written-correction-block h4 {
    font-size: 0.84rem;
}

.written-exercise-html ol ol,
.written-exercise-table ol ol,
.written-exercise-question-list .written-exercise-question-list {
    counter-reset: written-subquestion;
    list-style: none;
    padding-left: 1.65rem;
}

.written-exercise-html ol ol > li,
.written-exercise-table ol ol > li,
.written-exercise-question-list .written-exercise-question-list > li {
    counter-increment: written-subquestion;
    list-style: none;
    position: relative;
}

.written-exercise-html ol ol > li::marker,
.written-exercise-table ol ol > li::marker,
.written-exercise-question-list .written-exercise-question-list > li::marker {
    content: "";
}

.written-exercise-html ol ol > li::before,
.written-exercise-table ol ol > li::before,
.written-exercise-question-list .written-exercise-question-list > li::before {
    content: "(" counter(written-subquestion, lower-alpha) ")";
    position: absolute;
    left: -1.65rem;
    color: inherit;
}

.written-exercise-table {
    overflow-x: auto;
    max-width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}

.written-exercise-table table,
.written-exercise-html table {
    border-collapse: collapse;
    margin: 1rem 0;
    max-width: 100%;
    min-width: min(100%, 36rem);
    width: auto;
}

.written-exercise-table td,
.written-exercise-table th,
.written-exercise-html td,
.written-exercise-html th {
    border: 1px solid #b8c8ef;
    padding: 0.55rem 0.8rem;
    text-align: center;
}

.written-exercise-figure {
    margin: 1.5rem 0;
    overflow-x: auto;
    max-width: 100%;
    text-align: center;
    -webkit-overflow-scrolling: touch;
}

.written-exercise-figure-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 24rem);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
    margin: 1.5rem 0;
}

.written-exercise-figure-pair__text,
.written-exercise-figure-pair__media {
    min-width: 0;
}

.written-exercise-figure-pair__media .written-exercise-figure {
    margin: 0;
    display: flex;
    justify-content: center;
}

.written-exercise-figure-pair__media .written-exercise-figure__image,
.written-exercise-figure-pair__media .written-exercise-figure__svg {
    max-width: min(100%, 24rem);
    max-height: 28rem;
    object-fit: contain;
}

.written-exercise-figure__svg {
    display: inline-block;
    width: min(100%, 720px);
    max-width: 100%;
    vertical-align: top;
}

.written-exercise-figure__svg svg {
    display: block;
    height: auto;
    width: 100%;
    max-width: 100%;
}

.written-exercise-figure__image {
    display: inline-block;
    width: auto;
    max-width: min(100%, 720px);
    height: auto;
    vertical-align: top;
}

.written-exercise mjx-container {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.math,
.math-content {
    min-width: 0;
    max-width: 100%;
}

.math-fallback {
    display: inline;
    font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
    overflow-wrap: normal;
}

.math-fallback.display {
    display: block;
    overflow-x: auto;
    padding-block: 0.2rem;
    -webkit-overflow-scrolling: touch;
}

.math-fallback__fraction {
    display: inline-grid;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    margin-inline: 0.12em;
    vertical-align: middle;
}

.math-fallback__fraction > span:first-child {
    border-bottom: 0.06em solid currentColor;
    padding-inline: 0.18em;
}

.math-fallback__fraction > span:last-child {
    padding-inline: 0.18em;
}

.math-fallback__sqrt > span {
    border-top: 0.06em solid currentColor;
    padding-inline-start: 0.12em;
}

.math-fallback__boxed {
    border: 0.06em solid currentColor;
    padding: 0.05em 0.22em;
}

.written-exercise-figure__missing,
.written-exercise-figure__missing-inline,
.written-exercise-unsupported {
    background: #fff8db;
    border: 1px solid #f4c542;
    border-radius: 0.9rem;
    color: #5f4600;
    padding: 0.9rem 1rem;
    text-align: left;
}

.written-exercise-figure__missing-inline {
    display: inline-flex;
    gap: 0.35rem;
    align-items: baseline;
    margin-block: 0.35rem;
}

.written-exercise-notice {
    background: #eef4ff;
    border-left: 4px solid #2457c5;
    border-radius: 0.8rem;
    padding: 0.85rem 1rem;
}

@media (max-width: 640px) {
    .written-exercise {
        gap: 1rem;
    }

    .written-exercise__header {
        align-items: stretch;
        flex-direction: column;
        gap: 0.65rem;
    }

    .written-exercise__intro {
        flex: 0 1 auto;
        width: 100%;
    }

    .written-exercise__actions {
        justify-content: flex-start;
        width: 100%;
    }

    .written-exercise__actions .resource-favorite__button,
    .written-exercise__actions .resource-favorite__login,
    .written-exercise__action {
        flex: 1 1 min(100%, 9rem);
    }

    .written-exercise-figure-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .written-exercise__header,
    .written-exercise__body,
    .written-exercise__corrections,
    .written-exercise__conversion {
        border-radius: 1rem;
        padding: 1rem;
    }

    .written-exercise__header {
        padding-block: 0.8rem;
    }

    .written-exercise-html ol,
    .written-exercise-html ul,
    .written-exercise-paragraph + .written-exercise-html ol {
        padding-left: 1.15rem;
    }

    .written-exercise-html ol ol,
    .written-exercise-table ol ol,
    .written-exercise-question-list .written-exercise-question-list {
        padding-left: 1.25rem;
    }

    .written-exercise-html ol ol > li::before,
    .written-exercise-table ol ol > li::before,
    .written-exercise-question-list .written-exercise-question-list > li::before {
        left: -1.25rem;
    }

    .written-exercise-table table,
    .written-exercise-html table {
        min-width: 34rem;
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 10mm 11mm 12mm;
    }

    .site-header,
    .site-footer,
    .skip-link,
    .breadcrumbs,
    .resource-recommendations,
    .resource-context,
    .written-exercise__conversion,
    .written-exercise__corrections,
    .written-exercise__actions {
        display: none !important;
    }

    .written-exercise,
    .resource-detail,
    .resource-detail__content {
        display: block;
        max-width: none;
        width: 100%;
    }

    .written-exercise__header,
    .written-exercise__body {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .resource-detail > .page-heading,
    .course-resource .written-exercise__header {
        display: none !important;
    }

    .course-resource__body {
        font-size: 0.88rem;
        line-height: 1.34;
    }

    .course-resource__body p,
    .course-resource__body li {
        orphans: 3;
        widows: 3;
    }

    .course-resource__body > p:first-child {
        margin-top: 0;
    }

    .course-resource__body > h1,
    .course-resource__body > h2,
    .course-resource__body > h3 {
        display: block;
        width: 100%;
        break-inside: avoid;
        break-after: avoid;
        page-break-inside: avoid;
        page-break-after: avoid;
        -webkit-column-break-inside: avoid;
    }

    .course-resource__body > h1 + *,
    .course-resource__body > h2 + *,
    .course-resource__body > h3 + * {
        break-before: avoid;
        page-break-before: avoid;
    }

    .course-resource__body p:has(> strong) {
        break-inside: avoid;
        break-after: avoid;
        page-break-inside: avoid;
        page-break-after: avoid;
        -webkit-column-break-inside: avoid;
    }

    .course-resource__body p:has(> strong) + * {
        break-before: avoid;
        page-break-before: avoid;
    }

    .course-resource__body table,
    .course-resource__body tr,
    .course-resource__body ol > li,
    .course-resource__body ol > li > p,
    .course-resource__body p:has(> .math.display) {
        break-inside: avoid;
        page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }

    .course-resource__body > .minipage > .minipage > p:has(> strong) {
        break-inside: avoid;
        break-after: avoid;
        page-break-inside: avoid;
        page-break-after: avoid;
        -webkit-column-break-inside: avoid;
    }

    .course-resource__body > .minipage > .minipage > p:has(> strong) + * {
        break-before: avoid;
        page-break-before: avoid;
    }

    .course-resource__body ol > li > p {
        display: table;
        width: 100%;
    }

    .course-resource__body ol > li > p > .math.inline,
    .course-resource__body ol > li > p > .math.inline mjx-container {
        break-inside: avoid;
        page-break-inside: avoid;
        white-space: nowrap;
    }

    .course-resource__body table {
        break-before: avoid;
        page-break-before: avoid;
    }

    .course-resource__body .math.inline,
    .course-resource__body .math.inline mjx-container {
        display: inline;
        overflow: visible !important;
    }

    .course-resource__body table {
        overflow: visible;
    }
}

.resource-youtube-engagement__action--like:hover,
.resource-youtube-engagement__action--like:focus-visible,
.resource-youtube-engagement__action--like:active {
    color: #ffffff;
    background: var(--color-blue-900);
}

.resource-youtube-engagement__action--subscribe {
    color: #ffffff;
    border-color: #c7352e;
    background: #c7352e;
}

.resource-youtube-engagement__action--subscribe:hover,
.resource-youtube-engagement__action--subscribe:focus-visible,
.resource-youtube-engagement__action--subscribe:active {
    color: #ffffff;
    background: #9f251f;
    text-decoration: none;
}

.resource-youtube-engagement__share,
.resource-youtube-engagement__share:hover,
.resource-youtube-engagement__share:focus-visible,
.resource-youtube-engagement__share:active {
    color: #ffffff;
}

.resource-youtube-engagement__share {
    border-color: var(--color-green-700);
    background: var(--color-green-700);
}

.resource-youtube-engagement__share:hover,
.resource-youtube-engagement__share:focus-visible,
.resource-youtube-engagement__share:active {
    background: #1f6329;
}

.resource-share-fallback {
    padding: 0.85rem;
    border: 0.0625rem solid var(--color-border);
    border-radius: 1rem;
    background: #ffffff;
}

.resource-share-fallback__title {
    margin: 0 0 0.65rem;
    color: var(--color-blue-900);
    font-weight: 800;
}

.resource-share-fallback__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.resource-share-fallback__actions button,
.resource-share-fallback__close {
    appearance: none;
    padding: 0.5rem 0.75rem;
    border: 0.0625rem solid #b9caef;
    border-radius: 999rem;
    color: var(--color-blue-900);
    font: inherit;
    font-weight: 750;
    background: var(--color-blue-100);
    cursor: pointer;
}

.resource-share-fallback__actions button:hover,
.resource-share-fallback__actions button:focus-visible,
.resource-share-fallback__close:hover,
.resource-share-fallback__close:focus-visible {
    outline: 0.1875rem solid rgb(36 84 184 / 25%);
    outline-offset: 0.125rem;
    background: #ffffff;
}

.resource-share-fallback__status {
    min-height: 1.4em;
    margin: 0.55rem 0 0;
    color: var(--color-green-700);
    font-weight: 750;
}

.resource-share-fallback__qr-panel {
    margin-block-start: 0.75rem;
    display: grid;
    gap: 0.5rem;
    justify-items: start;
}

.resource-share-fallback__qr-canvas {
    width: 11.25rem;
    max-width: 100%;
    height: auto;
    border: 0.5rem solid #ffffff;
    box-shadow: 0 0 0 0.0625rem var(--color-border);
}

.resource-share-fallback__url {
    max-width: 100%;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.resource-card {
    padding: clamp(1rem, 4vw, 1.4rem);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.resource-card--document {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "icon body download"
        "icon actions actions";
    gap: 1rem;
    align-items: start;
    border-block-start: 0.25rem solid var(--color-green-700);
}

.resource-card--document > .resource-card__icon {
    grid-area: icon;
}

.resource-card--document > .resource-card__body {
    grid-area: body;
    min-width: 0;
}

.resource-card--document > .button--download {
    grid-area: download;
    align-self: start;
    justify-self: end;
}

.resource-card__secondary-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.resource-card__secondary-actions .resource-issue-report--document {
    width: auto;
}

.resource-card__secondary-actions .resource-favorite {
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
}

.resource-card__icon {
    width: 3.4rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: var(--radius-small);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 900;
    background: var(--color-green-700);
}

.resource-card h2,
.resource-card h3 {
    margin: 0;
    line-height: 1.25;
}

.resource-card h2 {
    font-size: clamp(1.25rem, 4vw, 1.65rem);
}

.resource-card h3 {
    font-size: 1.15rem;
}

.resource-card__body > p:not(.resource-kind, .resource-meta) {
    margin: 0.6rem 0 0;
    color: var(--color-muted);
}

.resource-meta {
    margin: 0.6rem 0 0;
    color: var(--color-muted);
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.button {
    width: fit-content;
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.125rem solid var(--color-green-700);
    border-radius: var(--radius-small);
    color: #ffffff;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    background: var(--color-green-700);
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, transform 100ms ease, box-shadow 140ms ease;
}

.button:hover {
    color: #ffffff;
    background: #1f672a;
    border-color: #1f672a;
    box-shadow: 0 0.3rem 0.7rem rgb(23 63 143 / 18%);
}

.button:active {
    transform: translateY(0.08rem);
    box-shadow: none;
}

.button:focus-visible,
.site-navigation__support-link:focus-visible,
.site-footer__support-link:focus-visible {
    outline: 0.2rem solid var(--color-yellow-500);
    outline-offset: 0.15rem;
}

.button--download {
    grid-column: auto;
}

@media (max-width: 60rem) and (min-width: 42.01rem) {
    .resource-card--document {
        grid-template-areas:
            "icon body"
            "icon download"
            "icon actions";
        grid-template-columns: auto minmax(0, 1fr);
    }

    .resource-card--document > .button--download {
        justify-self: start;
    }
}

@media (max-width: 42rem) {
    .resource-card--document {
        grid-template-areas:
            "icon"
            "body"
            "download"
            "actions";
        grid-template-columns: minmax(0, 1fr);
    }

    .resource-card--document > .resource-card__icon,
    .resource-card--document > .button--download,
    .resource-card__secondary-actions {
        justify-self: stretch;
    }

    .resource-card--document > .resource-card__icon {
        justify-self: start;
    }

    .resource-card--document > .button--download {
        width: 100%;
    }

    .resource-card__secondary-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .resource-card__secondary-actions .resource-favorite,
    .resource-card__secondary-actions .resource-issue-report--document,
    .resource-card__secondary-actions .resource-favorite__button,
    .resource-card__secondary-actions .resource-favorite__login,
    .resource-card__secondary-actions .resource-issue-report__trigger {
        width: 100%;
    }
}

.resource-grid {
    display: grid;
    gap: 1rem;
}

.resource-card--compact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-block-start: 0.25rem solid var(--color-blue-700);
}

.resource-card--compact .resource-link {
    margin-block-start: auto;
}

.faq__items {
    border-block-start: 0.0625rem solid var(--color-border);
}

.faq__item {
    border-block-end: 0.0625rem solid var(--color-border);
    background: var(--color-surface);
}

.faq__item summary {
    padding: 1rem 2.5rem 1rem 0;
    position: relative;
    color: var(--color-blue-900);
    font-weight: 800;
    cursor: pointer;
}

.faq__item summary::after {
    content: "+";
    position: absolute;
    inset-inline-end: 0.5rem;
    font-size: 1.4rem;
    line-height: 1;
}

.faq__item[open] summary::after {
    content: "−";
}

.faq__answer {
    padding: 0 2.5rem 1rem 0;
}

.related-chapter {
    padding: clamp(1rem, 4vw, 1.5rem);
    display: grid;
    gap: 1rem;
    border: 0.0625rem solid #b9caef;
    border-radius: var(--radius-medium);
    background: var(--color-blue-100);
}

.related-chapter h2 {
    margin: 0;
    font-size: 1.4rem;
}

.related-chapter p:last-child {
    margin-block-end: 0;
}

.content-image {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.content-image img {
    width: 100%;
    display: block;
}

.content-separator {
    width: min(12rem, 45%);
    margin: clamp(2.5rem, 8vw, 4.5rem) auto;
    border: 0;
    border-block-start: 0.25rem solid var(--color-yellow-500);
}

.home-hero {
    position: relative;
    overflow: hidden;
    border-block-end: 0.0625rem solid #c8d5f2;
    background:
        radial-gradient(circle at 85% 18%, rgb(255 214 20 / 28%), transparent 18rem),
        linear-gradient(135deg, #ffffff 0%, var(--color-blue-100) 100%);
}

.home-class-shortcuts.layout-container,
.home-hero__inner.layout-container,
.home-main.layout-container {
    width: min(100% - (2 * var(--space-page)), var(--library-width));
}

.home-hero__inner {
    min-height: clamp(14rem, 32vh, 22rem);
    padding-block: clamp(1.25rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.home-hero__content {
    max-width: 43rem;
}

.home-hero h1 {
    max-width: 16ch;
    margin: 0;
    font-size: clamp(2.45rem, 6.4vw, 4.8rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.home-hero__introduction {
    max-width: 38rem;
    margin: 1.1rem 0 1.45rem;
    color: var(--color-muted);
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
}

.home-hero__actions .button {
    width: fit-content;
}

.home-hero__login {
    color: var(--color-blue-900);
    font-weight: 850;
}

.home-hero__account {
    max-width: 36rem;
    margin: 0.8rem 0 0;
    color: var(--color-muted);
    font-size: 0.96rem;
}

.home-hero__account a {
    color: var(--color-blue-900);
    font-weight: 750;
}

.home-class-shortcuts {
    padding-block: clamp(1rem, 2.5vw, 1.5rem) clamp(0.7rem, 1.8vw, 1.1rem);
}

.home-class-shortcuts p {
    margin: 0 0 0.65rem;
    color: var(--color-blue-700);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-class-shortcuts ul {
    display: grid;
    grid-template-columns: repeat(6, minmax(8.5rem, 1fr));
    gap: 0.65rem;
    justify-content: flex-start;
    margin: 0;
    padding: 0.2rem 0 0.35rem;
    overflow-x: auto;
    list-style: none;
    scroll-padding-inline: 0.45rem;
    scrollbar-width: thin;
}

.home-class-shortcuts li {
    min-width: 0;
}

.home-class-shortcuts a,
.home-class-shortcuts__disabled {
    width: 100%;
    min-width: 0;
    min-height: 4rem;
    padding: 0.72rem 0.85rem;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    border: 0.0625rem solid #d4def4;
    border-radius: 0.7rem;
    background: rgb(255 255 255 / 78%);
    color: var(--color-blue-900);
    font-weight: 900;
    line-height: 1.12;
    text-decoration: none;
    box-shadow: 0 0.35rem 1rem rgb(23 63 143 / 6%);
}

.home-class-shortcuts a:hover,
.home-class-shortcuts a:focus-visible {
    border-color: var(--color-blue-700);
    transform: translateY(-0.0625rem);
}

.home-class-shortcuts a:focus-visible {
    outline: 0.1875rem solid rgb(36 84 184 / 30%);
    outline-offset: 0.1875rem;
}

.home-class-shortcuts small {
    margin-block-start: 0.32rem;
    font-size: 0.72rem;
    font-weight: 800;
}

.home-class-shortcuts a.home-class-shortcuts__link {
    border-color: var(--color-blue-900);
    background: linear-gradient(135deg, var(--color-blue-900), var(--color-blue-700));
    color: #ffffff;
    box-shadow: 0 0.7rem 1.5rem rgb(23 63 143 / 16%);
}

.home-class-shortcuts a.home-class-shortcuts__link small {
    color: rgb(255 255 255 / 88%);
}

.home-class-shortcuts a.home-class-shortcuts__link:hover,
.home-class-shortcuts a.home-class-shortcuts__link:focus-visible {
    background: linear-gradient(135deg, #0f2f72, var(--color-blue-900));
    color: #ffffff;
}

.home-class-shortcuts__disabled {
    border-style: dashed;
    background: rgb(255 255 255 / 54%);
    color: #6f7890;
    box-shadow: none;
}

.home-class-shortcuts__disabled small {
    color: #7d879d;
}

.home-hero__signature {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(7rem, 15vw, 12rem);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.12em;
    filter: drop-shadow(0 1rem 1.6rem rgb(23 63 143 / 15%));
    user-select: none;
}

.home-hero__number {
    color: #42a943;
}

.home-hero__letter {
    color: #e0ad00;
}

.home-hero__pi {
    color: #2454b8;
}

.home-steps {
    margin-block-start: 0;
}

.home-steps {
    padding: clamp(1.15rem, 2.4vw, 1.65rem);
    border: 0.0625rem solid #c9d7f4;
    border-radius: var(--radius-medium);
    background: var(--color-blue-100);
}

.home-steps > p:not(.page-heading__eyebrow) {
    color: var(--color-muted);
}

.home-steps h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.35rem, 4vw, 2rem);
    line-height: 1.15;
}

.home-steps ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.9rem, 2.5vw, 1.65rem);
    margin: 0;
    padding: 0;
    color: var(--color-ink);
    list-style: none;
    counter-reset: home-step;
}

.home-steps li {
    counter-increment: home-step;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.home-steps li::before {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    color: var(--color-blue-900);
    font-weight: 900;
    content: counter(home-step);
}

.home-steps strong,
.home-steps span {
    grid-column: 2;
}

.home-steps strong {
    font-size: 1rem;
}

.home-steps span {
    color: var(--color-muted);
}

.home-steps li + li {
    margin-block-start: 0;
}

.home-main {
    display: grid;
    gap: clamp(2rem, 4vw, 3.75rem);
}

.home-section-heading {
    max-width: 46rem;
    display: grid;
    gap: 0.45rem;
}

.home-section-heading h2,
.home-section-heading p {
    margin: 0;
}

.home-section-heading p:not(.page-heading__eyebrow) {
    color: var(--color-muted);
}

.home-featured {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 1.8rem);
}

.home-featured__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.1rem, 2vw, 1.5rem);
}

.home-featured > .button {
    width: fit-content;
}

.home-account-panel {
    padding: clamp(1.35rem, 3vw, 2rem);
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    align-items: center;
    justify-content: space-between;
    border: 0.0625rem solid #c9d7f4;
    border-radius: var(--radius-medium);
    background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%);
}

.home-account-panel div {
    max-width: 48rem;
}

.home-account-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.home-account-panel h2,
.home-account-panel p {
    margin: 0;
}

.home-account-panel p {
    margin-block-start: 0.55rem;
    color: var(--color-muted);
}

.home-learning-path {
    padding-block-start: clamp(1.1rem, 2vw, 1.45rem);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
    border-block-start: 0.0625rem solid var(--color-border);
}

.home-learning-path div {
    max-width: 58rem;
}

.home-learning-path h2,
.home-learning-path p {
    margin: 0;
}

.home-learning-path p {
    margin-block-start: 0.45rem;
    color: var(--color-muted);
}

.home-learning-path__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 48rem) {
    .about-section,
    .about-panel {
        margin-block-start: 2.5rem;
    }

    .about-principles {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-actions {
        width: 100%;
    }

    .about-actions .button {
        width: 100%;
    }

    .home-class-shortcuts ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: flex-start;
        padding-inline: 0;
        overflow-x: visible;
    }

    .home-class-shortcuts li {
        min-width: 0;
    }

    .home-class-shortcuts a,
    .home-class-shortcuts__disabled {
        width: 100%;
        min-width: 0;
        min-height: 3.5rem;
        padding: 0.65rem 0.8rem;
    }

    .home-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
    }

    .home-hero__signature {
        font-size: clamp(5rem, 26vw, 8rem);
    }

    .home-steps ol {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-featured__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 56rem) {
    .teacher-preview-summary,
    .teacher-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
    }

    .home-hero__signature {
        font-size: clamp(5rem, 22vw, 8rem);
    }
}

.resource-detail__content {
    width: min(100%, var(--reading-width));
    margin-inline: auto;
    display: grid;
    gap: clamp(1.5rem, 5vw, 2.5rem);
}

.resource-detail__content--video {
    width: min(100%, var(--video-detail-width));
}

.resource-detail--written > .page-heading,
.resource-detail--written > .resource-detail__content {
    width: min(100%, var(--video-detail-width));
}

.resource-detail--document > .page-heading,
.resource-detail--document > .resource-detail__content {
    width: 100%;
    max-width: var(--document-detail-width);
}

.resource-detail__video-layout {
    width: min(100%, var(--video-detail-width));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 2.55fr) minmax(20rem, 1fr);
    grid-template-rows: auto auto;
    gap: clamp(1rem, 1.5vw, 1.5rem);
    align-items: start;
}

.resource-detail__main-column {
    display: contents;
}

.resource-detail__main-column > .page-heading {
    width: 100%;
    margin-inline: 0;
    margin-block-end: 0;
    grid-column: 1;
}

.resource-detail__main-column > .page-heading h1 {
    max-width: none;
}

.resource-detail__main-column > .resource-hero-video {
    min-width: 0;
    grid-column: 1;
    grid-row: 2;
}

.resource-hero-video,
.resource-student-summary,
.resource-learning-points,
.resource-extra-links,
.resource-source-links,
.resource-original-description {
    overflow: hidden;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.resource-side-panel {
    overflow: hidden;
    position: sticky;
    top: clamp(1rem, 3vw, 1.5rem);
    min-height: 0;
    align-self: start;
    height: var(--resource-player-height, auto);
    max-height: var(--resource-player-height, none);
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.resource-side-panel__tabs {
    padding: 0.45rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    border-block-end: 0.0625rem solid var(--color-border);
    background: var(--color-blue-100);
}

.resource-side-panel__tab {
    appearance: none;
    padding: 0.65rem 0.9rem;
    border: 0;
    border-radius: 999rem;
    color: var(--color-blue-900);
    font: inherit;
    font-weight: 850;
    background: transparent;
    cursor: pointer;
}

.resource-side-panel__tab[aria-selected="true"] {
    color: #ffffff;
    background: var(--color-blue-700);
    box-shadow: 0 0.5rem 1rem rgb(36 84 184 / 18%);
}

.resource-side-panel__tab:focus-visible {
    outline: 0.1875rem solid rgb(36 84 184 / 28%);
    outline-offset: 0.125rem;
}

.resource-side-panel__panel {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(1rem, 3vw, 1.25rem);
}

.resource-side-panel__panel[hidden] {
    display: none;
}

.resource-side-panel__panel .resource-student-summary,
.resource-side-panel__panel .resource-learning-points,
.resource-side-panel__panel .resource-video-chapters {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.resource-side-panel__panel .resource-student-summary + .resource-learning-points {
    margin-block-start: clamp(1.25rem, 3vw, 1.75rem);
    padding-block-start: clamp(1.25rem, 3vw, 1.75rem);
    border-block-start: 0.0625rem solid var(--color-border);
}

.resource-side-panel__empty {
    margin: 0;
    color: var(--color-muted);
    font-weight: 700;
}

.resource-student-summary,
.resource-learning-points,
.resource-extra-links,
.resource-source-links,
.resource-original-description {
    padding: clamp(1.25rem, 4vw, 2rem);
}

.resource-student-summary h2,
.resource-learning-points h2,
.resource-extra-links h2,
.resource-source-links h2 {
    margin: 0.25rem 0 0.85rem;
    font-size: clamp(1.25rem, 4vw, 1.65rem);
}

.resource-student-summary .math-content > :first-child,
.resource-learning-points ul,
.resource-extra-links ul,
.resource-source-links ul {
    margin-block-start: 0;
}

.resource-learning-points ul,
.resource-extra-links ul,
.resource-source-links ul {
    padding-inline-start: 1.25rem;
}

.resource-learning-points li + li,
.resource-extra-links li + li,
.resource-source-links li + li {
    margin-block-start: 0.45rem;
}

.resource-source-links {
    color: var(--color-muted);
    background: var(--color-canvas);
    box-shadow: none;
}

.resource-source-links a {
    font-weight: 700;
}

.resource-context {
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 0.0625rem solid #b9caef;
    border-radius: var(--radius-medium);
    background: var(--color-blue-100);
}

.resource-context h2 {
    margin: 0.25rem 0 0.75rem;
}

.resource-context ul {
    margin: 0;
    padding-inline-start: 1.25rem;
}

.resource-context li + li {
    margin-block-start: 0.5rem;
}

.resource-context a {
    font-weight: 750;
}

.resource-recommendations {
    display: grid;
    gap: clamp(1rem, 3vw, 1.35rem);
    padding-block-start: clamp(0.5rem, 2vw, 1rem);
}

.resource-recommendations__heading {
    display: grid;
    gap: 0.35rem;
}

.resource-recommendations__heading h2 {
    margin: 0;
    color: var(--color-ink);
    font-size: clamp(1.45rem, 4vw, 2rem);
    line-height: 1.1;
}

.resource-recommendations__heading p:last-child {
    margin: 0;
    max-width: 46rem;
    color: var(--color-muted);
}

.resource-recommendations__grid {
    align-items: stretch;
}

.resource-detail--document .resource-recommendations__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.playlist-series {
    display: grid;
    gap: clamp(1rem, 3vw, 1.35rem);
    padding-block-start: clamp(0.5rem, 2vw, 1rem);
}

.playlist-series__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
    gap: clamp(1rem, 3vw, 1.25rem);
}

.playlist-series__grid--extra {
    margin-block-start: 1rem;
}

.playlist-series-card {
    min-width: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.playlist-series-card__thumbnail {
    width: 100%;
    height: 100%;
    min-height: 11rem;
    object-fit: contain;
    background: var(--color-blue-100);
}

.playlist-series-card__thumbnail--fallback {
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.08em;
}

.playlist-series-card__body {
    min-width: 0;
    padding: clamp(0.9rem, 2.5vw, 1.1rem);
    display: grid;
    gap: 0.85rem;
}

.playlist-series-card__header {
    display: grid;
    gap: 0.25rem;
}

.playlist-series-card__header h3 {
    margin: 0;
    color: var(--color-blue-900);
    font-size: 1.1rem;
    line-height: 1.2;
}

.playlist-series-card__meta {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.92rem;
    font-weight: 750;
}

.playlist-series-card__nav {
    min-width: 0;
    display: grid;
    gap: 0.65rem;
}

.playlist-series-card__previous,
.playlist-series-card__next {
    min-width: 0;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    border-radius: 1rem;
    text-decoration: none;
}

.playlist-series-card__previous img,
.playlist-series-card__next img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.7rem;
    object-fit: cover;
    background: var(--color-blue-100);
}

.playlist-series-card__previous span,
.playlist-series-card__next span {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.playlist-series-card__previous small,
.playlist-series-card__next small {
    color: var(--color-muted);
    font-weight: 850;
}

.playlist-series-card__previous strong,
.playlist-series-card__next strong {
    min-width: 0;
    color: var(--color-blue-900);
    line-height: 1.2;
}

.playlist-series-card__previous em,
.playlist-series-card__next em {
    color: var(--color-muted);
    font-size: 0.88rem;
    font-style: normal;
}

.playlist-series-card__next {
    padding: 0.75rem;
    border: 0.125rem solid color-mix(in srgb, var(--color-blue-700) 28%, transparent);
    background: color-mix(in srgb, var(--color-blue-700) 7%, white);
}

.playlist-series-card__next:hover,
.playlist-series-card__next:focus-visible {
    border-color: var(--color-blue-700);
    background: var(--color-blue-100);
}

.playlist-series-card__previous {
    padding: 0.55rem;
    border: 0.0625rem solid var(--color-border);
    background: #ffffff;
}

.playlist-series-card__end {
    margin: 0;
    padding: 0.75rem;
    border-radius: 1rem;
    color: var(--color-muted);
    background: var(--color-canvas);
    font-weight: 750;
}

.playlist-series-card__all {
    width: fit-content;
    color: var(--color-blue-900);
    font-weight: 850;
}

.playlist-series__more summary {
    width: fit-content;
    color: var(--color-blue-900);
    font-weight: 850;
    cursor: pointer;
}

.playlist-page__heading {
    display: block;
    width: 100%;
}

.playlist-page-video img,
.playlist-page-video__fallback {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-small);
    object-fit: cover;
    background: linear-gradient(135deg, var(--color-blue-900), var(--color-blue-700));
}

.playlist-page__description {
    max-width: 62rem;
    color: var(--color-muted);
}

.playlist-page--continuous.layout-container {
    width: min(100% - (2 * var(--space-page)), var(--video-detail-width));
}

.playlist-page--continuous > .breadcrumbs,
.playlist-page--continuous > .playlist-page__heading,
.playlist-page--continuous > .playlist-watch,
.playlist-page--continuous > .playlist-page__catalog,
.playlist-page--continuous > .playlist-page__discover {
    width: 100%;
    margin-inline: 0;
}

.playlist-page__catalog {
    display: grid;
    gap: clamp(1rem, 3vw, 1.35rem);
}

.playlist-page__videos {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.85rem, 2vw, 1rem);
    list-style: none;
}

.playlist-page-video button,
.playlist-page-video a {
    appearance: none;
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0.7rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    color: var(--color-ink);
    font: inherit;
    text-align: start;
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    cursor: pointer;
}

.playlist-page-video button:hover,
.playlist-page-video button:focus-visible,
.playlist-page-video a:hover,
.playlist-page-video a:focus-visible,
.playlist-page-video.is-active button {
    border-color: var(--color-blue-700);
    outline: 0.1875rem solid rgb(36 84 184 / 18%);
    outline-offset: 0.125rem;
}

.playlist-page-video__fallback {
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.08em;
}

.playlist-page-video__body {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
}

.playlist-page-video__position {
    width: fit-content;
    padding: 0.2rem 0.55rem;
    border-radius: 999rem;
    color: var(--color-blue-900);
    background: var(--color-blue-100);
    font-size: 0.78rem;
    font-weight: 850;
}

.playlist-page-video strong {
    color: var(--color-blue-900);
    line-height: 1.2;
}

.playlist-page-video span:last-child {
    color: var(--color-muted);
    font-weight: 750;
}

.playlist-watch {
    display: grid;
    grid-template-columns: minmax(0, 2.55fr) minmax(20rem, 1fr);
    gap: clamp(1rem, 1.5vw, 1.5rem);
    align-items: start;
    margin-block-end: clamp(1.5rem, 4vw, 2rem);
    --playlist-player-height: auto;
}

.playlist-watch__main,
.playlist-watch__side {
    min-width: 0;
    padding: clamp(0.75rem, 1.4vw, 1rem);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.playlist-watch__side {
    position: sticky;
    top: clamp(1rem, 3vw, 1.5rem);
    height: var(--playlist-player-height, auto);
    max-height: var(--playlist-player-height, none);
    container-type: inline-size;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
}

.playlist-watch__main h2,
.playlist-watch__side h2 {
    margin-block: 0 0.35rem;
    color: var(--color-ink);
    line-height: 1.15;
}

.playlist-watch__meta,
.playlist-watch__status,
.playlist-watch__side-note {
    color: var(--color-muted);
    font-weight: 700;
}

.playlist-watch__player {
    overflow: hidden;
    margin-block: clamp(0.65rem, 1.2vw, 0.85rem);
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-medium);
    background: #0d1c38;
}

.playlist-watch__player iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.playlist-watch__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.playlist-watch__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.92fr);
    gap: clamp(0.75rem, 1.5vw, 1.1rem);
    align-items: stretch;
}

.playlist-watch__engagement {
    min-width: 0;
    padding: 0.85rem;
    display: grid;
    align-content: center;
    gap: 0.65rem;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-blue-100);
}

.playlist-watch__engagement-copy h3 {
    margin: 0;
    color: var(--color-blue-900);
    font-size: 1rem;
    line-height: 1.15;
}

.playlist-watch__engagement-copy p {
    margin: 0.2rem 0 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.playlist-watch__engagement-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.playlist-watch__engagement-actions .resource-favorite__form {
    display: inline-flex;
}

.playlist-watch__engagement-actions .resource-favorite__button,
.playlist-watch__engagement-actions .resource-favorite__login,
.playlist-watch__engagement-actions .resource-youtube-engagement__action {
    min-height: 2.35rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.86rem;
}

.playlist-autoplay-toggle {
    appearance: none;
    min-height: 2.75rem;
    padding: 0.5rem 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 0.0625rem solid var(--color-green-700);
    border-radius: 0.85rem;
    color: var(--color-green-900);
    font: inherit;
    font-weight: 850;
    text-align: left;
    background: #effaf1;
    cursor: pointer;
}

.playlist-autoplay-toggle__dot {
    width: 0.75rem;
    height: 0.75rem;
    flex: 0 0 auto;
    border-radius: 999rem;
    background: var(--color-green-700);
    box-shadow: 0 0 0 0.22rem rgb(42 130 58 / 16%);
}

.playlist-autoplay-toggle small {
    display: block;
    margin-block-start: 0.08rem;
    color: var(--color-green-700);
    font-size: 0.76rem;
    font-weight: 900;
}

.playlist-autoplay-toggle:hover,
.playlist-autoplay-toggle:focus-visible {
    outline: 0.1875rem solid rgb(42 130 58 / 22%);
    outline-offset: 0.125rem;
}

.playlist-autoplay-toggle.is-off {
    border-color: var(--color-border);
    color: var(--color-muted);
    background: #ffffff;
}

.playlist-autoplay-toggle.is-off .playlist-autoplay-toggle__dot {
    background: #9aa4b5;
    box-shadow: 0 0 0 0.22rem rgb(90 102 124 / 14%);
}

.playlist-autoplay-toggle.is-off small {
    color: var(--color-muted);
}

.playlist-outline-toolbar {
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) max-content;
    gap: 0.7rem 0.9rem;
    align-items: start;
    margin-block: 0.65rem 0.9rem;
}

.playlist-outline-controls,
.playlist-outline-search {
    display: grid;
    gap: 0.35rem;
}

.playlist-outline-controls {
    justify-self: end;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.playlist-outline-controls > span {
    white-space: nowrap;
}

.playlist-outline-controls__buttons {
    isolation: isolate;
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    overflow: hidden;
    border: 0.0625rem solid var(--color-border);
    border-radius: 999rem;
    background: #ffffff;
}

.playlist-outline-controls button {
    appearance: none;
    min-height: 2.35rem;
    margin: 0;
    border: 0;
    border-inline-start: 0.0625rem solid var(--color-border);
    border-radius: 0;
    padding: 0.38rem 0.48rem;
    color: var(--color-blue-900);
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.playlist-outline-controls button:first-child {
    border-inline-start: 0;
}

.playlist-outline-controls button:hover,
.playlist-outline-controls button:focus-visible {
    background: var(--color-blue-100);
}

.playlist-outline-controls button:focus-visible {
    position: relative;
    z-index: 1;
    outline: 0.1875rem solid rgb(36 84 184 / 24%);
    outline-offset: -0.1875rem;
}

.playlist-outline-controls button.is-active {
    color: #ffffff;
    background: var(--color-blue-700);
}

.playlist-outline-search label {
    color: var(--color-text);
    font-size: 0.88rem;
    font-weight: 850;
}

.playlist-outline-search__field {
    position: relative;
}

.playlist-outline-search input {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.55rem 2.45rem 0.55rem 0.7rem;
    border: 0.125rem solid #9fb5da;
    border-radius: var(--radius-small);
    color: var(--color-text);
    font: inherit;
    font-size: 0.95rem;
    background: #ffffff;
}

.playlist-outline-search input:focus-visible {
    border-color: var(--color-blue-700);
    outline: 0.1875rem solid rgb(36 84 184 / 24%);
    outline-offset: 0.125rem;
}

.playlist-outline-search__field button {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    z-index: 1;
    width: 1.85rem;
    height: 1.85rem;
    border: 0;
    border-radius: 999rem;
    color: var(--color-blue-900);
    font: inherit;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    background: var(--color-blue-100);
    cursor: pointer;
    transform: translateY(-50%);
}

.playlist-outline-search__field button:hover,
.playlist-outline-search__field button:focus-visible {
    color: #ffffff;
    background: var(--color-blue-700);
    outline: 0.1875rem solid rgb(36 84 184 / 24%);
    outline-offset: 0.125rem;
}

.playlist-outline-search__status {
    min-height: 1.15rem;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.84rem;
    font-weight: 750;
}

@container (max-width: 27rem) {
    .playlist-outline-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .playlist-outline-controls {
        justify-self: stretch;
    }

    .playlist-outline-controls__buttons {
        width: 100%;
    }

    .playlist-outline-controls button {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 0.45rem;
    }
}

.playlist-timeline,
.playlist-timeline__chapters {
    margin: 0;
    padding: 0;
    list-style: none;
}

.playlist-timeline {
    min-height: 0;
    max-height: none;
    overflow: auto;
    display: grid;
    gap: 0.9rem;
    padding-inline-end: 0.25rem;
}

.playlist-timeline__video {
    min-width: 0;
    border: 0.0625rem solid var(--color-border);
    border-radius: 1rem;
    background: #ffffff;
}

.playlist-timeline__video.is-active {
    border-color: var(--color-blue-700);
    box-shadow: 0 0 0 0.16rem rgb(36 84 184 / 16%);
}

.playlist-timeline__video-button,
.playlist-timeline__chapters button {
    appearance: none;
    width: 100%;
    min-width: 0;
    border: 0;
    color: var(--color-ink);
    font: inherit;
    text-align: start;
    background: transparent;
    cursor: pointer;
}

.playlist-timeline__video-button {
    padding: 0.8rem;
    display: grid;
    gap: 0.25rem;
    position: relative;
}

.playlist-timeline__position {
    width: fit-content;
    padding: 0.18rem 0.5rem;
    border-radius: 999rem;
    color: var(--color-blue-900);
    background: var(--color-blue-100);
    font-size: 0.76rem;
    font-weight: 850;
}

.playlist-timeline__position::before {
    content: "▶";
    display: inline-block;
    margin-inline-end: 0.28rem;
}

.playlist-timeline__video.is-open .playlist-timeline__position::before {
    content: "▼";
}

.playlist-timeline__video.is-active .playlist-timeline__position::after {
    content: " · Lecture en cours";
}

.playlist-timeline__video-button strong {
    color: var(--color-blue-900);
    line-height: 1.2;
}

.playlist-timeline__video-button span:last-child,
.playlist-timeline__empty {
    color: var(--color-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.playlist-timeline__panel {
    border-block-start: 0.0625rem solid var(--color-border);
}

.playlist-timeline__play {
    appearance: none;
    width: calc(100% - 1.5rem);
    margin: 0.65rem 0.75rem;
    padding: 0.55rem 0.8rem;
    border: 0.0625rem solid var(--color-blue-200);
    border-radius: 0.75rem;
    color: var(--color-blue-900);
    background: var(--color-blue-50);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 850;
    text-align: center;
    cursor: pointer;
}

.playlist-timeline__play:hover,
.playlist-timeline__play:focus-visible {
    border-color: var(--color-blue-700);
    background: var(--color-blue-100);
}

.playlist-timeline__chapters {
    display: grid;
}

.playlist-timeline__chapters button {
    padding: 0.55rem 0.75rem;
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: baseline;
}

.playlist-timeline__chapters button:hover,
.playlist-timeline__chapters button:focus-visible,
.playlist-timeline__chapters button.is-active {
    background: var(--color-blue-100);
}

.playlist-timeline__chapters button.is-active {
    box-shadow: inset 0.22rem 0 0 var(--color-yellow-500);
}

.playlist-timeline__chapters time {
    color: var(--color-blue-900);
    font-variant-numeric: tabular-nums;
    font-weight: 850;
}

.playlist-timeline__chapters small {
    grid-column: 2;
    color: var(--color-muted);
    font-size: 0.76rem;
}

.playlist-timeline__empty {
    margin: 0;
    padding: 0.7rem 0.8rem;
    border-block-start: 0.0625rem solid var(--color-border);
}

.resource-video-chapters {
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.autochapter-student-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block: 0 1rem;
    padding: .8rem 1rem;
    border: 2px solid #e6b800;
    border-radius: .75rem;
    background: #fff8cf;
    color: #17233d;
}

.autochapter-student-preview strong,
.autochapter-student-preview span {
    display: inline;
}

.autochapter-student-preview a {
    flex: 0 0 auto;
    font-weight: 700;
}

@media (max-width: 45rem) {
    .autochapter-student-preview {
        align-items: flex-start;
        flex-direction: column;
    }
}

.resource-original-description summary {
    color: var(--color-blue-900);
    font-weight: 850;
    cursor: pointer;
}

.resource-original-description .math-content {
    margin-block-start: 1rem;
    max-height: 24rem;
    overflow: auto;
    padding: 1rem;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-small);
    color: var(--color-muted);
    background: var(--color-canvas);
}

.resource-original-description h2 {
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
}

.resource-video-chapters h2 {
    margin: 0.25rem 0 1rem;
}

.resource-video-chapters__progress-summary {
    margin: -0.55rem 0 1rem;
    color: #1d5f3d;
    font-weight: 800;
}

.resource-video-chapters__search {
    margin-block-end: 1rem;
    display: grid;
    gap: 0.4rem;
}

.resource-video-chapters__search[hidden],
.resource-video-chapters__expand[hidden] {
    display: none;
}

.resource-video-chapters__search label {
    color: var(--color-text);
    font-weight: 800;
}

.resource-video-chapters__search input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    border: 0.125rem solid #9fb5da;
    border-radius: var(--radius-small);
    color: var(--color-text);
    font: inherit;
    background: #ffffff;
}

.resource-video-chapters__search input:focus-visible {
    border-color: var(--color-blue-700);
    outline: 0.1875rem solid rgb(36 84 184 / 24%);
    outline-offset: 0.125rem;
}

.resource-video-chapters__search-status {
    min-height: 1.25rem;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.resource-video-chapters__toolbar {
    margin-block: -0.25rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
}

.resource-video-chapters__expand,
.resource-video-chapters__reset {
    appearance: none;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    border: 0.0625rem solid #cbd8ef;
    border-radius: 999rem;
    color: var(--color-muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    background: var(--color-canvas);
    cursor: pointer;
}

.resource-video-chapters__expand {
    color: var(--color-blue-900);
    border-color: #9cb5e8;
    background: var(--color-blue-100);
}

.resource-video-chapters__expand:hover,
.resource-video-chapters__expand:focus-visible,
.resource-video-chapters__reset:hover,
.resource-video-chapters__reset:focus-visible {
    color: var(--color-blue-900);
    border-color: #9cb5e8;
}

.resource-video-chapters__expand:focus-visible,
.resource-video-chapters__reset:focus-visible {
    outline: 0.1875rem solid rgb(36 84 184 / 24%);
    outline-offset: 0.125rem;
}

.resource-video-chapters__list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
    list-style: none;
}

.resource-video-chapters__item {
    margin-inline: -0.4rem;
    padding: 0 0.4rem 0.75rem;
    border-block-end: 0.0625rem solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: baseline;
    border-inline-start: 0.1875rem solid transparent;
    border-radius: 0.6rem;
    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

.resource-video-chapters--long .resource-video-chapters__list {
    gap: 0.45rem;
}

.resource-video-chapters--long .resource-video-chapters__item {
    padding-block-end: 0.5rem;
}

.resource-video-chapters__item:last-child {
    padding-block-end: 0;
    border-block-end: 0;
}

.resource-video-chapters__item[hidden] {
    display: none;
}

.resource-video-chapters__item--active {
    border-inline-start-color: #d89a00;
    background: #fff8df;
}

.resource-video-chapters__item--seen:not(.resource-video-chapters__item--active) {
    border-inline-start-color: #3a9b5f;
    background: #f0fbf4;
}

.resource-video-chapters__control {
    appearance: none;
    min-height: 2.75rem;
    padding: 0.35rem 0;
    border: 0;
    display: inline-flex;
    flex: 1 1 15rem;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: baseline;
    color: var(--color-blue-700);
    font: inherit;
    font-weight: 750;
    text-align: start;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
}

.resource-video-chapters__title.math-content {
    font-family: "Cambria Math", "STIX Two Math", "DejaVu Sans", sans-serif;
}

.resource-video-chapters__control:hover,
.resource-video-chapters__control:focus-visible,
.resource-video-chapters__control--active {
    color: var(--color-blue-900);
    text-decoration: none;
}

.resource-video-chapters__control:focus-visible {
    outline: 0.1875rem solid rgb(36 84 184 / 24%);
    outline-offset: 0.2rem;
}

.resource-video-chapters__control:hover .resource-video-chapters__title,
.resource-video-chapters__control:focus-visible .resource-video-chapters__title,
.resource-video-chapters__control--active .resource-video-chapters__title {
    text-decoration-line: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

.resource-video-chapters__control--active time {
    color: #2f2400;
    background: #f3c43b;
    box-shadow: 0 0.35rem 0.8rem rgb(216 154 0 / 24%);
}

.resource-video-chapters__item--seen:not(.resource-video-chapters__item--active) time {
    color: #ffffff;
    background: #24824f;
    box-shadow: 0 0.35rem 0.8rem rgb(36 130 79 / 18%);
}

.resource-video-chapters__list time {
    padding: 0.12rem 0.45rem;
    border-radius: 999rem;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    background: var(--color-blue-900);
}

.resource-video-chapters__duration {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 650;
    white-space: nowrap;
}

.resource-video-chapters__seen-toggle {
    appearance: none;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.6rem;
    margin-inline-start: auto;
    border: 0.1rem solid #9fb5da;
    border-radius: 0.28rem;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    color: var(--color-blue-700);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
    background: #ffffff;
    cursor: pointer;
}

.resource-video-chapters__seen-box {
    width: 0.78rem;
    height: 0.78rem;
    display: inline-grid;
    place-items: center;
}

.resource-video-chapters__seen-toggle:hover,
.resource-video-chapters__seen-toggle:focus-visible {
    border-color: #24824f;
}

.resource-video-chapters__seen-toggle:focus-visible {
    outline: 0.1875rem solid rgb(36 130 79 / 22%);
    outline-offset: 0.125rem;
}

.resource-video-chapters__seen-toggle[aria-pressed="true"] {
    color: #ffffff;
    border-color: #24824f;
    background: #24824f;
    box-shadow: 0 0.35rem 0.8rem rgb(36 130 79 / 18%);
}

.resource-video-chapters__seen-toggle[aria-pressed="true"] .resource-video-chapters__seen-box::before {
    content: "✓";
}

.resource-progress-card {
    margin-block-start: clamp(1.2rem, 4vw, 1.8rem);
    padding-block-start: clamp(1rem, 3vw, 1.35rem);
    border-block-start: 0.0625rem solid var(--color-border);
    display: grid;
    gap: 0.75rem;
}

.resource-progress-card h2 {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(1.15rem, 3vw, 1.45rem);
}

.resource-progress-card__note {
    margin: 0;
    color: var(--color-muted);
    font-weight: 650;
}

.resource-progress-card__toggle {
    appearance: none;
    width: fit-content;
    padding: 0.55rem 0.85rem;
    border: 0.0625rem solid #cbd8ef;
    border-radius: 999rem;
    display: inline-flex;
    gap: 0.55rem;
    align-items: center;
    color: var(--color-blue-900);
    font: inherit;
    font-weight: 800;
    background: #ffffff;
    cursor: pointer;
}

.resource-progress-card__toggle:hover,
.resource-progress-card__toggle:focus-visible {
    border-color: #24824f;
}

.resource-progress-card__toggle:focus-visible {
    outline: 0.1875rem solid rgb(36 130 79 / 22%);
    outline-offset: 0.125rem;
}

.resource-progress-card__box {
    width: 1rem;
    height: 1rem;
    border: 0.1rem solid #9fb5da;
    border-radius: 0.28rem;
    display: inline-grid;
    place-items: center;
    background: #ffffff;
}

.resource-progress-card--completed {
    border-block-start-color: rgb(36 130 79 / 24%);
}

.resource-progress-card--completed .resource-progress-card__toggle {
    border-color: #24824f;
    color: #1d5f3d;
    background: #f0fbf4;
}

.resource-progress-card--completed .resource-progress-card__box {
    border-color: #24824f;
    color: #ffffff;
    background: #24824f;
}

.resource-progress-card--completed .resource-progress-card__box::before {
    content: "✓";
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
}

@media (max-width: 64rem) {
    .resource-detail__video-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .resource-side-panel {
        position: static;
        height: auto;
        max-height: none;
        overflow: visible;
        grid-column: 1;
        grid-row: auto;
    }

    .resource-side-panel__panel {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 48rem) {
    .playlist-series-card,
    .playlist-page__heading,
    .playlist-page-video a,
    .playlist-page-video button,
    .playlist-watch {
        grid-template-columns: minmax(0, 1fr);
    }

    .playlist-series-card__thumbnail {
        min-height: auto;
        aspect-ratio: 16 / 9;
    }

    .playlist-series-card__previous,
    .playlist-series-card__next {
        grid-template-columns: minmax(4.5rem, 6rem) minmax(0, 1fr);
    }

    .playlist-series-card__next {
        min-height: 4.75rem;
    }

    .playlist-watch__side {
        position: static;
        height: auto;
        max-height: none;
    }

    .playlist-watch__controls {
        align-items: stretch;
        flex-direction: column;
    }

    .playlist-watch__footer {
        grid-template-columns: minmax(0, 1fr);
    }

    .playlist-watch__controls .button {
        width: 100%;
    }

    .playlist-autoplay-toggle {
        width: 100%;
    }

    .playlist-watch__engagement-actions > * {
        flex: 1 1 10rem;
    }

    .playlist-outline-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .playlist-outline-controls {
        justify-self: stretch;
    }

    .playlist-outline-controls__buttons {
        width: 100%;
    }

    .playlist-outline-controls button {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 0.45rem;
    }

    .playlist-timeline {
        max-height: none;
        overflow: visible;
    }

    .playlist-page__videos {
        grid-template-columns: minmax(0, 1fr);
    }
}

.library-heading {
    margin-block-end: clamp(1.5rem, 5vw, 2.5rem);
}

.library-search {
    margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
    padding: clamp(1rem, 3vw, 1.5rem);
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(18rem, 1.2fr);
    gap: 1rem 2rem;
    align-items: end;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.library-search h2,
.library-search p,
.library-search-results h3 {
    margin: 0;
}

.library-search p {
    margin-block-start: 0.35rem;
    color: var(--color-muted);
}

.library-search__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
}

.library-search__experiment-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--color-blue-700) 28%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-blue-700) 5%, white);
  cursor: pointer;
}

.library-search__form .library-search__experiment-toggle input[type="checkbox"] {
  inline-size: 1.2rem;
  block-size: 1.2rem;
  width: 1.2rem;
  min-height: 1.2rem;
  padding: 0;
  margin-block-start: 0.12rem;
  flex: 0 0 auto;
}

.library-search__experiment-toggle span,
.library-search__experiment-toggle small {
  display: block;
}

.library-search__experiment-toggle small {
  margin-block-start: 0.2rem;
  color: var(--color-muted);
}

.transcript-search-results {
  margin-block: 1.5rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--color-blue-700) 24%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-blue-700) 4%, white);
}

.transcript-search-results__heading > * {
  margin-block: 0 0.35rem;
}

.transcript-search-results__list {
  display: grid;
  gap: 0.75rem;
  margin-block-start: 1rem;
}

.transcript-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--color-blue-700) 18%, transparent);
  border-radius: 0.8rem;
  background: white;
}

.transcript-search-result h4,
.transcript-search-result p {
  margin-block: 0 0.3rem;
}

.transcript-search-result__type {
  color: var(--color-blue-700);
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.transcript-search-result__video {
  font-weight: 700;
}

.transcript-search-result__reason {
  color: var(--color-muted);
  font-size: 0.92rem;
}

.transcript-search-result__actions {
  display: grid;
  justify-items: end;
  gap: 0.65rem;
}

.transcript-search-result fieldset {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.transcript-search-result legend {
  inline-size: 100%;
  margin-block-end: 0.3rem;
  font-size: 0.86rem;
}

.transcript-search-result fieldset button {
  min-block-size: 2.75rem;
  padding-inline: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-blue-700) 35%, transparent);
  border-radius: 999px;
  background: white;
  color: var(--color-blue-700);
  font-weight: 750;
  cursor: pointer;
}

.transcript-search-result fieldset button:hover,
.transcript-search-result fieldset button:focus-visible {
  background: color-mix(in srgb, var(--color-blue-700) 8%, white);
}

@media (max-width: 48rem) {
  .transcript-search-result {
    grid-template-columns: 1fr;
  }

  .transcript-search-result__actions,
  .transcript-search-result fieldset {
    justify-items: stretch;
    justify-content: flex-start;
  }

  .transcript-search-result__actions .button {
    inline-size: 100%;
    text-align: center;
  }
}

.library-search__combobox {
  position: relative;
  min-width: 0;
  flex: 1 1 28rem;
}

.library-search__combobox > input {
  width: 100%;
}

.library-search__suggestions {
  position: absolute;
  z-index: 20;
  inset: calc(100% + 0.35rem) 0 auto;
  max-height: min(28rem, 65vh);
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid #9db6e8;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 0.8rem 2rem rgb(20 49 105 / 16%);
}

.library-search__suggestion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.65rem;
  min-height: 3.25rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--ink, #14213d);
  text-decoration: none;
}

.library-search__suggestion:hover,
.library-search__suggestion.is-active,
.library-search__suggestion:focus-visible {
  background: #edf3ff;
  outline: 2px solid transparent;
}

.library-search__suggestion-type {
  grid-row: 1 / span 2;
  align-self: start;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: #e8efff;
  color: #194da7;
  font-size: 0.72rem;
  font-weight: 800;
}

.library-search__suggestion strong,
.library-search__suggestion-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-search__suggestion-meta {
  color: #586780;
  font-size: 0.82rem;
}

.library-resource-card__search-reason,
.library-resource-card__search-levels {
  display: block;
  color: #3e5475;
  font-size: 0.82rem;
  font-weight: 700;
}

.library-empty__examples a {
  white-space: nowrap;
}

@media (max-width: 42rem) {
  .library-search__combobox {
    flex-basis: 100%;
  }

  .library-search__suggestions {
    max-height: 55vh;
  }

  .library-search__suggestion {
    min-height: 3.5rem;
  }
}

.library-search__form input {
    width: 100%;
    min-height: 3rem;
    padding: 0.65rem 0.85rem;
    border: 0.125rem solid #9fb5da;
    border-radius: var(--radius-small);
    color: var(--color-ink);
    font: inherit;
    background: #ffffff;
}

.library-search__form input:focus-visible {
    outline: 0.1875rem solid rgb(36 84 184 / 24%);
    outline-offset: 0.125rem;
    border-color: var(--color-blue-700);
}

.library-search-results {
    display: grid;
    gap: 1.5rem;
}

.library-search-results > section {
    display: grid;
    gap: 0.9rem;
}

.library-search-units {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.library-search-units a {
    min-height: 3rem;
    padding: 0.65rem 0.85rem;
    display: grid;
    gap: 0.1rem;
    border: 0.0625rem solid #b9caef;
    border-radius: var(--radius-small);
    color: var(--color-blue-900);
    text-decoration: none;
    background: var(--color-blue-100);
}

.library-search-units a:hover,
.library-search-units a:focus-visible {
    border-color: var(--color-blue-700);
}

.library-search-units a:focus-visible {
    outline: 0.1875rem solid rgb(36 84 184 / 24%);
    outline-offset: 0.125rem;
}

.library-search-units span {
    color: var(--color-muted);
    font-size: 0.86rem;
}

.library-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: center;
    justify-content: center;
}

@media (max-width: 48rem) {
    .library-search,
    .library-search__form {
        grid-template-columns: minmax(0, 1fr);
    }

    .library-search__form .button {
        width: 100%;
    }
}

.library-page--wide.page-shell {
    padding-block: clamp(1.6rem, 4.8vw, 3.5rem);
}

.library-page--wide.layout-container {
    width: min(calc(100% - 48px), var(--wide-content-width));
}

.library-page--unit.layout-container {
    width: min(100% - (2 * var(--space-page)), var(--video-detail-width));
}

.playlist-page--continuous.layout-container {
    width: min(100% - (2 * var(--space-page)), var(--video-detail-width));
}

.library-page--index.layout-container {
    width: min(calc(100% - 48px), var(--library-width));
}

.library-page--index.library-page--search-active.layout-container {
    width: min(calc(100% - 48px), 112rem);
}

.library-page--index .breadcrumbs,
.library-page--index .library-heading,
.library-page--index .library-section {
    margin-inline: 0;
}

.library-page--index .breadcrumbs,
.library-page--index .library-heading {
    width: min(100%, var(--reading-width));
}

.library-page--index .library-section {
    width: 100%;
    margin-block-start: clamp(1.8rem, 4vw, 2.75rem);
}

.library-page--wide .breadcrumbs,
.library-page--wide .library-heading,
.library-page--wide .library-section {
    width: 100%;
    margin-inline: 0;
}

.library-page--wide .breadcrumbs {
    margin-block-end: clamp(1rem, 3vw, 1.55rem);
}

.library-page--wide .library-heading {
    margin-block-end: clamp(1.2rem, 4vw, 2rem);
}

.library-section {
    width: min(100%, var(--reading-width));
    margin-inline: auto;
    margin-block-start: clamp(1.5rem, 5vw, 2.75rem);
}

.library-page--wide .library-section {
    width: 100%;
    margin-block-start: clamp(1.8rem, 4vw, 2.75rem);
    padding-block-start: clamp(0.75rem, 1.5vw, 1rem);
    border-block-start: 0.0625rem solid rgb(215 226 244 / 72%);
}

.library-page--wide .library-section:first-of-type {
    margin-block-start: clamp(1.1rem, 3vw, 1.75rem);
    padding-block-start: 0;
    border-block-start: 0;
}

.library-section--compact {
    margin-block-start: 0;
    padding: clamp(1rem, 4vw, 1.5rem);
    border: 0.0625rem solid #b9caef;
    border-radius: var(--radius-medium);
    background: var(--color-blue-100);
}

.library-section h2 {
    margin: 0 0 1rem;
    color: var(--color-ink);
    font-size: clamp(1.35rem, 4vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.library-page--wide .library-section h2 {
    margin-block-end: clamp(0.65rem, 1.1vw, 0.85rem);
}

.library-section__header {
    display: grid;
    gap: 1rem;
}

.library-mode-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-block: 0 clamp(1.2rem, 3vw, 1.8rem);
}

.library-mode-nav a {
    border: 0.0625rem solid #b9caef;
    border-radius: 999px;
    padding: 0.55rem 0.85rem;
    background: #fff;
    color: var(--color-blue-800);
    font-weight: 700;
    text-decoration: none;
}

.library-mode-nav a:focus-visible,
.library-mode-nav a:hover {
    border-color: var(--color-blue-700);
    background: var(--color-blue-100);
}

.library-grid,
.library-resource-grid {
    display: grid;
    gap: clamp(0.85rem, 2vw, 1.15rem);
}

/* Mixed resources keep their intrinsic height instead of borrowing a video row's height. */
.library-resource-grid {
    align-items: start;
}

.library-collection-grid {
    display: grid;
    gap: clamp(0.85rem, 2vw, 1.15rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.library-collection-card {
    display: grid;
    gap: 0.9rem;
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.25rem);
    border: 0.0625rem solid #c4d4f3;
    border-radius: var(--radius-medium);
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
    box-shadow: var(--shadow-soft);
}

.library-collection-card__link {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    color: var(--color-ink);
    text-decoration: none;
}

.library-collection-card__link:hover strong,
.library-collection-card__link:focus-visible strong {
    color: var(--color-blue-700);
}

.library-collection-card__eyebrow {
    color: var(--color-blue-800);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.library-collection-card strong {
    color: var(--color-blue-800);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.2;
}

.library-collection-card__summary,
.library-collection-card__meta {
    min-width: 0;
    color: #56627a;
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.library-collection-card__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.library-collection-card__topics span {
    width: fit-content;
    padding: 0.22rem 0.55rem;
    border-radius: 999rem;
    color: var(--color-muted);
    background: var(--color-canvas);
    font-size: 0.78rem;
    font-weight: 800;
}

.library-collection-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.library-collection-card__open,
.library-collection-card__pdf {
    min-height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.0625rem solid var(--color-blue-700);
    border-radius: 999px;
    padding: 0.55rem 0.85rem;
    font-weight: 800;
    text-decoration: none;
}

.library-collection-card__open {
    background: #fff;
    color: var(--color-blue-800);
}

.library-collection-card__pdf {
    background: var(--color-blue-700);
    color: #fff;
}

.library-collection-card__open:hover,
.library-collection-card__open:focus-visible {
    background: var(--color-blue-100);
}

.library-collection-card__pdf:hover,
.library-collection-card__pdf:focus-visible {
    background: var(--color-blue-800);
    color: #fff;
}

.library-collection-heading__tags {
    margin-block: 1rem 0;
}

.library-collection-heading__description {
    max-width: min(100%, 68rem);
    white-space: pre-line;
    line-height: 1.65;
}

.library-collection-heading__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    margin-block-start: 1rem;
    color: #56627a;
    font-weight: 750;
}

.library-collection-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
    align-items: end;
    gap: 0.65rem 1rem;
    margin-block: 0.35rem 1rem;
    min-width: 0;
}

.library-collection-search {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.library-collection-search label {
    color: var(--color-ink);
    font-weight: 850;
}

.library-collection-search input {
    width: 100%;
    min-height: 2.55rem;
    border: 0.09rem solid #9fb7e6;
    border-radius: 0.85rem;
    padding: 0.55rem 0.8rem;
    color: var(--color-ink);
    background: #fff;
    font: inherit;
    font-weight: 650;
}

.library-collection-search input:focus-visible {
    border-color: var(--color-blue-700);
    box-shadow: 0 0 0 0.18rem rgba(42, 91, 191, 0.18);
    outline: none;
}

.library-collection-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.library-collection-filters button {
    min-width: 0;
    max-width: 100%;
    min-height: 2.35rem;
    border: 0.0625rem solid #c4d4f3;
    border-radius: 999px;
    padding: 0.4rem 0.65rem;
    color: var(--color-blue-800);
    background: #fff;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.2;
    overflow-wrap: anywhere;
    white-space: normal;
    cursor: pointer;
}

.library-collection-filters button[aria-pressed="true"] {
    border-color: var(--color-blue-700);
    color: #fff;
    background: var(--color-blue-700);
}

.library-collection-filters button:focus-visible,
.library-collection-filters button:hover {
    border-color: var(--color-blue-700);
    box-shadow: 0 0 0 0.15rem rgba(42, 91, 191, 0.16);
    outline: none;
}

.library-collection-tools__status {
    grid-column: 1 / -1;
    margin: 0;
    color: #56627a;
    font-size: 0.9rem;
    font-weight: 750;
}

.library-collection-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 0.7rem;
    align-items: stretch;
}

.library-collection-item {
    display: grid;
    grid-template-rows: 1fr auto;
    min-width: 0;
    border: 0.0625rem solid #d3def2;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0.5rem 1.35rem rgba(22, 34, 61, 0.055);
    overflow: hidden;
}

.library-collection-item[hidden] {
    display: none;
}

.library-collection-item__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.8rem 0.85rem 0.65rem;
    color: inherit;
    text-decoration: none;
}

.library-collection-item__link:hover strong,
.library-collection-item__link:focus-visible strong {
    color: var(--color-blue-700);
}

.library-collection-item__position {
    display: inline-grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 999px;
    color: #fff;
    background: var(--color-blue-700);
    font-weight: 900;
}

.library-collection-item__body {
    display: grid;
    gap: 0.38rem;
    min-width: 0;
}

.library-collection-item__badges,
.library-collection-item__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.library-collection-item__badges span,
.library-collection-item__topics span {
    width: fit-content;
    border-radius: 999px;
    padding: 0.18rem 0.48rem;
    font-size: 0.75rem;
    font-weight: 850;
    line-height: 1.25;
}

.library-collection-item__badges span {
    color: var(--color-blue-800);
    background: var(--color-blue-100);
}

.library-collection-item__topics span {
    color: #56627a;
    background: var(--color-canvas);
}

.library-collection-item strong {
    color: var(--color-blue-800);
    font-size: 0.98rem;
    line-height: 1.25;
}

.library-collection-item__favorite {
    margin: 0;
    padding: 0.55rem 0.75rem 0.7rem;
    border-top: 0.0625rem solid #e6edf8;
}

.library-collection-item__favorite button,
.library-collection-more {
    width: 100%;
    min-height: 2.35rem;
    border: 0.0625rem solid #c4d4f3;
    border-radius: 999px;
    color: var(--color-blue-800);
    background: #fff;
    font: inherit;
    font-weight: 850;
    cursor: pointer;
}

.library-collection-item__favorite button:hover,
.library-collection-item__favorite button:focus-visible,
.library-collection-more:hover,
.library-collection-more:focus-visible {
    border-color: var(--color-blue-700);
    background: var(--color-blue-100);
    outline: none;
}

.library-collection-more {
    margin-block-start: 0.9rem;
}

@media (max-width: 52rem) {
    .library-collection-tools {
        grid-template-columns: 1fr;
    }

    .library-collection-filters {
        justify-content: flex-start;
        max-width: none;
    }
}

@media (max-width: 34rem) {
    .library-collection-heading__actions {
        align-items: stretch;
    }

    .library-collection-heading__actions .button,
    .library-collection-card__actions a {
        width: 100%;
    }

    .library-collection-items {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .library-collection-item__link {
        padding: 0.7rem 0.75rem 0.55rem;
    }

    .library-collection-item__favorite {
        padding: 0.45rem 0.65rem 0.6rem;
    }

    .library-collection-card {
        gap: 0.75rem;
    }

    .library-collection-card__actions {
        gap: 0.45rem;
    }
}

.library-section__hint {
    margin: 0.35rem 0 1rem;
    color: #56627a;
    font-weight: 650;
}

.library-section__hint a {
    color: var(--color-blue-800);
    font-weight: 850;
}

.library-grid--program {
    align-items: stretch;
    gap: clamp(0.75rem, 1.6vw, 1rem);
}

.library-grid--levels {
    gap: clamp(1rem, 2vw, 1.5rem);
}

.library-page--wide .library-grid--program {
    grid-template-columns: 1fr;
}

.library-card,
.library-resource-card__link {
    text-decoration: none;
}

.library-card {
    min-height: 9.5rem;
    min-width: 0;
    padding: clamp(0.95rem, 3vw, 1.15rem);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    color: var(--color-ink);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.library-card:hover,
.library-card:focus-visible {
    border-color: #9eb7ef;
    color: var(--color-ink);
    outline: 0.1875rem solid rgb(36 84 184 / 18%);
    outline-offset: 0.125rem;
    transform: translateY(-0.0625rem);
}

.library-card[aria-disabled="true"] {
    cursor: default;
}

.library-card[aria-disabled="true"]:hover {
    border-color: var(--color-border);
    outline: none;
    transform: none;
}

.library-card--available {
    border-color: #9bb8f1;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    box-shadow: 0 1rem 2.4rem rgb(36 84 184 / 10%);
}

.library-card--available:hover,
.library-card--available:focus-visible {
    border-color: var(--color-blue-700);
}

.library-card--preparing {
    background: #f9fbff;
    border-color: #e3eaf6;
    box-shadow: none;
}

.library-card.library-card--preparing strong {
    color: #204b92;
}

.library-card--preparing > span:not(.library-card__eyebrow, .library-card__footer) {
    color: #5a667a;
}

.library-card--preparing .library-card__meta {
    width: fit-content;
    padding: 0.22rem 0.55rem;
    border: 0.0625rem solid #d8e1f0;
    border-radius: 999rem;
    color: #536176;
    background: #f0f4fb;
    font-size: 0.78rem;
    font-weight: 750;
}

.library-card--level-entry {
    min-height: clamp(9.5rem, 13vw, 11rem);
    padding: clamp(1rem, 2vw, 1.25rem);
}

.library-card--level-entry .library-card__eyebrow {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.library-card--level-entry strong {
    max-width: 24ch;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    line-height: 1.05;
}

.library-card--level-entry .library-card__count {
    min-height: auto;
    padding: 0;
    color: var(--color-muted);
    background: transparent;
    font-size: 0.95rem;
}

.library-card--level-entry.library-card--preparing .library-card__meta {
    padding: 0;
    border: 0;
    color: #66758e;
    background: transparent;
    font-size: 0.95rem;
}

.library-card--level-entry.library-card--preparing .library-card__cta {
    color: #536176;
}

.library-card--current {
    border-color: var(--color-blue-900);
    box-shadow: 0 1rem 2.4rem rgb(23 63 143 / 14%);
}

.library-card--followed {
    border-color: #7ea78a;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
}

.library-card__personal-label {
    width: fit-content;
    padding: 0.22rem 0.6rem;
    border: 0.0625rem solid transparent;
    border-radius: 999rem;
    font-size: 0.76rem;
    font-weight: 850;
}

.library-card__personal-label--current {
    color: #ffffff;
    border-color: var(--color-blue-900);
    background: var(--color-blue-900);
}

.library-card__personal-label--followed {
    color: #174c29;
    border-color: #7ea78a;
    background: #edf7ef;
}

.library-card__eyebrow,
.library-card__meta {
    color: var(--color-muted);
    font-size: 0.86rem;
    font-weight: 750;
}

.library-card strong {
    color: var(--color-blue-900);
    font-size: clamp(1.1rem, 2vw, 1.28rem);
    line-height: 1.15;
}

.library-card
    > span:not(
        .library-card__eyebrow,
        .library-card__footer,
        .library-card__personal-label
    ) {
    display: -webkit-box;
    overflow: hidden;
    color: #46536b;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.library-card__footer {
    margin-block-start: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
}

.library-card__meta {
    min-width: 0;
}

.library-card__explore {
    flex: 0 0 auto;
    color: var(--color-blue-700);
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.library-card__explore:hover,
.library-card__explore:focus-visible {
    color: var(--color-blue-900);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.library-card--clickable { cursor: pointer; }
.library-card--clickable { position: relative; }
.library-card__stretched-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.library-card--clickable > *:not(.library-card__stretched-link) { position: relative; z-index: 2; pointer-events: none; }
.library-card__format-counts,
.library-card__explore { position: relative; z-index: 3; pointer-events: auto; }
.library-card--clickable:focus-visible { outline: 3px solid var(--color-blue-400); outline-offset: 3px; }
.library-card__format-counts { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.library-card__format-counts .library-card__count { text-decoration: none; }
.library-card__format-counts .library-card__count:hover,
.library-card__format-counts .library-card__count:focus-visible { background: var(--color-blue-900); }
.library-card__preparing { color: var(--color-muted); }

.library-card__count {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999rem;
    color: #ffffff;
    background: var(--color-blue-700);
    font-size: 0.82rem;
    font-weight: 850;
}

.library-card__cta {
    color: var(--color-blue-700);
    font-size: 0.86rem;
    font-weight: 850;
    white-space: nowrap;
}

.library-program-section {
    display: grid;
    gap: 0.85rem;
}

.library-program-subsection {
    display: grid;
    gap: 0.75rem;
}

.library-program-subsection + .library-program-subsection {
    margin-block-start: clamp(0.8rem, 2vw, 1.2rem);
}

.library-program-subsection h3 {
    margin: 0;
    color: var(--color-blue-900);
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.library-program-section--exam {
    padding-block-start: 0.25rem;
}

.library-card--exam {
    min-height: 7.5rem;
    border-color: #c5d4ef;
    background: #ffffff;
}

.library-card--exam .library-card__eyebrow {
    width: fit-content;
    padding: 0.2rem 0.55rem;
    border-radius: 999rem;
    color: var(--color-blue-900);
    background: #edf3ff;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.library-part-grid {
    display: grid;
    gap: 0.75rem;
}

.library-part-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    padding: 0.85rem 1rem;
    border: 0.0625rem solid #c9d7f4;
    border-radius: var(--radius-small);
    color: var(--color-ink);
    text-decoration: none;
    background: #ffffff;
}

.library-part-card--clickable {
    cursor: pointer;
}

.library-part-card__stretched-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.library-part-card--clickable > *:not(.library-part-card__stretched-link) {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.library-part-card__meta .library-card__format-counts,
.library-part-card__explore {
    position: relative;
    z-index: 3;
    pointer-events: auto;
}

.library-part-card:hover,
.library-part-card:has(.library-part-card__stretched-link:focus-visible),
.library-part-card:has(.library-part-card__explore:focus-visible),
.library-part-card:has(.library-card__count:focus-visible) {
    border-color: #8fa9e8;
    outline: 0.1875rem solid rgb(36 84 184 / 16%);
    outline-offset: 0.125rem;
}

.library-part-card__order {
    min-width: 2rem;
    min-height: 2rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999rem;
    color: #ffffff;
    font-weight: 850;
    background: var(--color-blue-900);
}

.library-part-card__body {
    display: grid;
    gap: 0.35rem;
}

.library-part-card strong {
    color: var(--color-blue-900);
    font-size: 1.05rem;
}

.library-part-card__body > span:not(.library-part-card__meta) {
    color: var(--color-muted);
}

.library-part-card__meta {
    color: var(--color-muted);
    font-size: 0.88rem;
    font-weight: 750;
}

.library-part-card__explore {
    justify-self: start;
    width: fit-content;
    color: var(--color-blue-700);
    font-size: 0.9rem;
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.library-part-card__explore:hover,
.library-part-card__explore:focus-visible {
    color: var(--color-blue-900);
}

.library-filters {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    padding-block-end: 0.2rem;
}

.library-filters a {
    flex: 0 0 auto;
    padding: 0.45rem 0.75rem;
    border: 0.0625rem solid #b9caef;
    border-radius: 999rem;
    color: var(--color-blue-900);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    background: #ffffff;
}

.library-filters a[aria-current="true"],
.library-filters a:hover,
.library-filters a:focus-visible {
    color: #ffffff;
    border-color: var(--color-blue-700);
    background: var(--color-blue-700);
}

.library-filters span {
    margin-inline-start: 0.2rem;
    font-variant-numeric: tabular-nums;
}

.library-empty {
    padding: clamp(1rem, 4vw, 1.5rem);
    border: 0.0625rem dashed #b9caef;
    border-radius: var(--radius-medium);
    color: var(--color-muted);
    background: var(--color-blue-100);
}

.library-empty__actions,
.error-page__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
}

.error-page__search {
    font-weight: 700;
}

.library-resource-card {
    min-width: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.library-resource-card__link {
    min-width: 0;
    height: 100%;
    display: grid;
    color: var(--color-ink);
}

.library-resource-card__link:hover,
.library-resource-card__link:focus-visible {
    color: var(--color-ink);
    outline: 0.1875rem solid rgb(36 84 184 / 18%);
    outline-offset: 0.125rem;
}

.library-resource-card__favorite {
    margin: 0;
    padding: 0.65rem clamp(0.8rem, 2.5vw, 1rem);
    border-block-start: 0.0625rem solid var(--color-border);
    background: var(--color-surface);
}

.resource-card__favorite {
    margin: 0;
}

.library-resource-card__favorite-button {
    appearance: none;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.7rem;
    border: 0.0625rem solid #9fb5da;
    border-radius: 999rem;
    color: var(--color-blue-900);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 850;
    line-height: 1.2;
    background: #ffffff;
    cursor: pointer;
}

.library-resource-card__favorite-button:hover,
.library-resource-card__favorite-button:focus-visible {
    border-color: var(--color-blue-700);
    background: var(--color-blue-100);
}

.library-resource-card__favorite-button:focus-visible {
    outline: 0.1875rem solid rgb(36 84 184 / 24%);
    outline-offset: 0.125rem;
}

.library-resource-card__favorite-button--active {
    color: #1d5f3d;
    border-color: #72ad83;
    background: #f0fbf4;
}

.library-resource-card__thumbnail {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    object-fit: cover;
    color: #ffffff;
    font-size: clamp(2rem, 10vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.08em;
    background: linear-gradient(135deg, var(--color-blue-900), var(--color-blue-700));
}

.library-resource-card__body {
    min-width: 0;
    padding: clamp(0.8rem, 2.5vw, 1rem);
    display: grid;
    gap: 0.55rem;
}

.library-resource-card--compact-no-thumb .library-resource-card__link {
    align-content: start;
}

.library-resource-card--compact-no-thumb .library-resource-card__body {
    min-height: 0;
    padding: clamp(1rem, 3vw, 1.2rem);
}

.library-resource-card--compact-no-thumb strong {
    -webkit-line-clamp: 3;
}

.library-resource-card__badges,
.library-resource-card__notions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.library-resource-card__badges span,
.library-resource-card__notions span {
    width: fit-content;
    padding: 0.22rem 0.55rem;
    border-radius: 999rem;
    font-size: 0.78rem;
    font-weight: 800;
}

.library-resource-card__badges span {
    color: var(--color-blue-900);
    background: var(--color-blue-100);
}

.library-resource-card__badges .library-resource-card__reason {
    color: #ffffff;
    background: var(--color-blue-700);
}

.library-resource-card__badges .library-resource-card__personalized {
    color: #7a3700;
    background: #fff3cc;
}

.library-resource-card__notions span {
    color: var(--color-muted);
    background: var(--color-canvas);
}

.library-resource-card__part-matches {
    padding: 0.65rem 0.7rem;
    display: grid;
    gap: 0.4rem;
    border-inline-start: 0.2rem solid #d89a00;
    border-radius: 0.35rem;
    color: var(--color-ink);
    font-size: 0.84rem;
    background: #fff8df;
}

.library-resource-card__part-match-label {
    color: #765100;
    font-weight: 850;
}

.library-resource-card__part-match {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.library-resource-card__part-match-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-resource-card__part-match time,
.library-resource-card__part-match-duration {
    flex: 0 0 auto;
    color: var(--color-blue-900);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    white-space: nowrap;
}

.library-resource-card__unit-matches {
    margin: 0 clamp(0.8rem, 2.5vw, 1rem) clamp(0.8rem, 2.5vw, 1rem);
    padding: 0.65rem 0.7rem;
    display: grid;
    gap: 0.45rem;
    border-inline-start: 0.2rem solid #d89a00;
    border-radius: 0.35rem;
    color: var(--color-ink);
    font-size: 0.84rem;
    background: #fff8df;
}

.library-resource-card__unit-match-summary {
    margin: 0;
    display: grid;
    gap: 0.12rem;
    color: #765100;
    font-weight: 850;
}

.library-resource-card__unit-match-summary span:last-child {
    color: var(--color-blue-900);
    font-size: 0.8rem;
}

.library-resource-card__unit-match-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.2rem;
    list-style: none;
}

.library-resource-card__unit-match-list a {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: baseline;
    color: var(--color-ink);
    text-decoration: none;
}

.library-resource-card__unit-match-list a:hover,
.library-resource-card__unit-match-list a:focus-visible {
    color: var(--color-blue-900);
    text-decoration: underline;
    outline: 0.1875rem solid rgb(36 84 184 / 18%);
    outline-offset: 0.125rem;
}

.library-resource-card__unit-match-list time,
.library-resource-card__unit-match-list small {
    color: var(--color-blue-900);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    white-space: nowrap;
}

.library-resource-card__unit-match-list span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-resource-card__unit-match-details summary {
    width: fit-content;
    color: var(--color-blue-900);
    font-weight: 850;
    cursor: pointer;
}

.library-resource-card__unit-match-details summary:hover,
.library-resource-card__unit-match-details summary:focus-visible {
    text-decoration: underline;
}

.library-resource-card__unit-match-details[open] {
    display: grid;
    gap: 0.45rem;
}

.student-math-frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 1.25em;
    margin-inline: 0.08em;
    vertical-align: middle;
    line-height: 0.86;
    transform: translateY(-0.03em);
}

.student-math-frac__num,
.student-math-frac__den {
    display: block;
    min-width: 100%;
    padding-inline: 0.12em;
    text-align: center;
    font-size: 0.74em;
    line-height: 0.92;
}

.student-math-frac__den {
    border-block-start: 0.1em solid currentColor;
    margin-block-start: 0.07em;
    padding-block-start: 0.07em;
}

.library-resource-card--search-result .library-resource-card__thumbnail {
    object-fit: contain;
    background: #0d1c38;
}

.library-resource-card--search-result strong {
    display: block;
    overflow: visible;
    overflow-wrap: anywhere;
    -webkit-line-clamp: unset;
}

.library-resource-card--search-result .library-resource-card__part-match {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.library-resource-card--search-result .library-resource-card__part-match span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.library-resource-card--search-result .library-resource-card__part-match-duration {
    white-space: nowrap;
}

.library-resource-card strong {
    color: var(--color-blue-900);
    display: -webkit-box;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.library-resource-card__summary,
.library-resource-card__meta {
    color: var(--color-muted);
}

.library-resource-card__summary {
    font-size: 0.95rem;
    line-height: 1.45;
}

.library-resource-card__meta {
    font-size: 0.88rem;
    font-weight: 700;
}

.account-favorites {
    margin-block: clamp(1.5rem, 4vw, 2.5rem);
}

.account-dashboard.layout-container {
    width: calc(100% - (2 * var(--space-page)));
}

.account-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.account-dashboard-content {
    min-width: 0;
}

.account-dashboard-nav {
    position: sticky;
    top: 1.25rem;
    padding: 1rem;
    border: 0.0625rem solid #d7e3f5;
    border-radius: var(--radius-medium);
    background: #f4f8ff;
}

.account-dashboard-nav__title {
    margin: 0 0 0.7rem;
    color: var(--color-blue-900);
    font-weight: 900;
}

.account-dashboard-nav nav {
    display: grid;
    gap: 0.25rem;
}

.account-dashboard-nav a {
    display: block;
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-small);
    color: var(--color-blue-900);
    font-weight: 750;
    text-decoration: none;
}

.account-dashboard-nav a:hover,
.account-dashboard-nav a:focus-visible {
    background: #dfeaff;
    outline: 0.15rem solid rgb(36 84 184 / 22%);
    outline-offset: 0.08rem;
}

.account-dashboard-hero,
.account-dashboard-section,
.account-dashboard-nav a {
    scroll-margin-top: 5rem;
}

.support-status-card {
    width: min(100%, 56rem);
    padding: clamp(1.25rem, 3vw, 2rem);
    display: grid;
    gap: 1rem;
    border: 0.0625rem solid #cbd8ef;
    border-radius: var(--radius-large);
    background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%);
    box-shadow: var(--shadow-soft);
}

.support-status-card__heading {
    display: flex;
    align-items: start;
}

.support-status-card__identity {
    min-width: 0;
}

.support-status-card__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
}

.support-status-card__eyebrow {
    margin: 0 0 0.35rem;
    color: var(--color-blue-700);
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.support-status-card h3 {
    margin: 0;
    color: var(--color-ink);
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
}

.support-status-card__badge {
    padding: 0.25rem 0.6rem;
    border: 0.0625rem solid #8bc59a;
    border-radius: 999rem;
    color: #155b27;
    background: #e8f7eb;
    font-weight: 900;
}

.support-status-card__price {
    margin: 0;
    color: var(--color-blue-900);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.support-status-card__price span {
    margin-inline-start: 0.2rem;
    color: var(--color-blue-700);
    font-size: 0.88em;
    letter-spacing: 0;
}

.support-status-card__notice,
.support-status-card__note {
    margin: 0;
    color: var(--color-muted);
}

.support-status-card__notice {
    font-size: 0.94rem;
}

.account-account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 58rem;
}

.account-account-card {
    min-width: 0;
    padding: 1.15rem;
    display: grid;
    align-content: start;
    gap: 0.7rem;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: rgb(255 255 255 / 88%);
    box-shadow: var(--shadow-soft);
}

.account-account-card h3,
.account-account-card p {
    margin: 0;
}

.account-account-card h3 {
    color: var(--color-blue-900);
    font-size: 1.35rem;
}

.account-account-card p {
    color: var(--color-muted);
}

.account-account-card__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.account-account-card__support-text {
    min-height: 2.4rem;
}

.account-account-card .account-dashboard-hero__editor {
    margin-block-start: 0.15rem;
}

@media (max-width: 48rem) {
    .account-account-grid {
        grid-template-columns: 1fr;
    }
}

.account-support-comparison {
    width: 100%;
}

.account-support-offers {
    display: grid;
    gap: 1rem;
}

.account-support-offers__intro {
    margin: 0;
    color: var(--color-muted);
}

@media (max-width: 68rem) {
    .account-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .account-dashboard-nav {
        position: static;
    }

    .account-dashboard-nav nav {
        display: flex;
        gap: 0.4rem;
        overflow-x: auto;
        padding-block-end: 0.2rem;
    }

    .account-dashboard-nav a {
        flex: 0 0 auto;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

.account-history-page > .page-heading {
    width: 100%;
    margin-inline: 0;
}

.account-history-page > .page-heading h1 {
    max-width: none;
    font-size: clamp(2rem, 4vw, 3rem);
}

.account-history-page .account-history-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-history-footer {
    display: flex;
    justify-content: flex-end;
    margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
}

.account-history-footer form {
    margin: 0;
}

.account-email-confirmation {
    margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
    padding: clamp(1rem, 2vw, 1.25rem);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    border: 0.0625rem solid #d7e3f5;
    border-radius: var(--radius-medium);
    background: #f4f8ff;
}

.account-email-confirmation h2 {
    margin: 0;
    color: var(--color-blue-900);
    font-size: 1rem;
}

.account-email-confirmation p {
    margin: 0.25rem 0 0;
    color: var(--color-muted);
}

.account-email-confirmation form {
    margin: 0;
}

.account-dashboard-hero {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    margin-block-end: clamp(1.75rem, 3vw, 2.5rem);
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: center;
}

.account-dashboard-hero__identity {
    display: grid;
    gap: clamp(0.45rem, 1vw, 0.7rem);
}

.account-dashboard-hero h1 {
    max-width: 56rem;
    margin-block: 0 0.15rem;
    font-size: clamp(2.25rem, 4.7vw, 4.15rem);
}

.account-dashboard-hero__greeting {
    margin: 0;
    color: var(--color-blue-900);
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    font-weight: 850;
    line-height: 1.25;
}

.account-program {
    margin-block-start: 0.5rem;
    display: grid;
    gap: 0.65rem;
}

.account-program__label {
    margin: 0;
    color: var(--color-blue-900);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.account-program__primary {
    padding: clamp(1rem, 2.5vw, 1.3rem);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    border: 0.0625rem solid #a8cbb0;
    border-inline-start: 0.35rem solid var(--color-green-700);
    border-radius: var(--radius-medium);
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.account-program__primary > div {
    min-width: 0;
    display: grid;
    gap: 0.55rem;
}

.account-program__primary h2 {
    margin: 0;
    color: var(--color-blue-900);
    font-size: clamp(1.2rem, 2.3vw, 1.55rem);
    line-height: 1.2;
}

.account-program__secondary {
    margin-block-start: 0.45rem;
    display: grid;
    gap: 0.55rem;
}

.account-program__secondary h3 {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.account-program__secondary-list {
    display: grid;
    gap: 0.55rem;
}

.account-program__secondary-card {
    min-width: 0;
    padding: 0.75rem 0.9rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-small);
    background: rgb(255 255 255 / 70%);
}

.account-program__secondary-card strong {
    min-width: 0;
    color: var(--color-blue-900);
    line-height: 1.25;
}

.account-program__secondary-card a {
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding-inline: 0.8rem;
    display: inline-flex;
    align-items: center;
    border-radius: 999rem;
    font-weight: 850;
}

.account-dashboard-hero__footer {
    margin-block-start: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: flex-start;
    justify-content: space-between;
}

.account-dashboard-hero__footer p {
    max-width: 45rem;
    margin: 0;
}

.account-dashboard-chip {
    width: fit-content;
    padding: 0.25rem 0.6rem;
    border: 0.0625rem solid #cbd8ef;
    border-radius: 999rem;
    color: var(--color-blue-900);
    background: #ffffff;
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.2;
}

.account-dashboard-chip--principal {
    color: #ffffff;
    border-color: var(--color-blue-900);
    background: var(--color-blue-900);
}

.account-dashboard-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.85rem, 2vw, 1rem);
    align-items: center;
    justify-content: flex-start;
}

.account-dashboard-hero__actions .button {
    width: fit-content;
}

.account-dashboard-hero__editor {
    width: fit-content;
    max-width: 100%;
}

.account-dashboard-hero__editor summary {
    width: fit-content;
    min-height: 2.7rem;
    padding: 0.55rem 0.9rem;
    display: inline-flex;
    align-items: center;
    border: 0.0625rem solid #cbd8ef;
    border-radius: var(--radius-small);
    color: var(--color-blue-900);
    background: #ffffff;
    cursor: pointer;
    font-weight: 850;
}

.account-dashboard-hero__editor summary:hover,
.account-dashboard-hero__editor summary:focus-visible {
    border-color: var(--color-blue-700);
    background: var(--color-blue-100);
    outline: 0.1875rem solid rgb(36 84 184 / 22%);
    outline-offset: 0.125rem;
}

.account-dashboard-hero__editor .account-form {
    margin-block-start: 1rem;
}

.account-dashboard-section {
    display: grid;
    gap: clamp(1.25rem, 2vw, 1.75rem);
    margin-block: 0 clamp(2rem, 5vw, 3.25rem);
}

.account-dashboard-section__heading {
    display: grid;
}

.account-dashboard-section__heading h2 {
    margin: 0;
}

.teacher-preview-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: flex-start;
    justify-content: space-between;
}

.teacher-preview-hero > div {
    min-width: 0;
}

.teacher-preview-summary,
.teacher-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-block-end: clamp(2rem, 5vw, 3.25rem);
}

.teacher-preview-card {
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.35rem);
    display: grid;
    gap: 0.55rem;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.teacher-preview-card strong {
    color: var(--color-blue-900);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.teacher-preview-card h3,
.teacher-preview-card p {
    margin: 0;
}

.teacher-preview-card p {
    color: var(--color-muted);
}

.teacher-preview-card__label {
    color: var(--color-blue-900);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.teacher-preview-card .button {
    width: fit-content;
    margin-block-start: 0.35rem;
}

.teacher-preview-section {
    scroll-margin-top: 2rem;
}

.teacher-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block-end: 0;
}

.teacher-preview-card--wide {
    box-shadow: none;
}

.teacher-preview-future {
    color: var(--color-muted);
    font-size: 0.92rem;
    font-style: italic;
}

.account-dashboard-recommendations {
    width: 100%;
    column-gap: clamp(1.35rem, 2vw, 1.75rem);
    row-gap: clamp(1.75rem, 3vw, 2.25rem);
}

.account-dashboard .library-resource-card__body {
    padding: clamp(1rem, 2vw, 1.18rem);
    gap: 0.7rem;
}

.account-dashboard .library-resource-card__badges,
.account-dashboard .library-resource-card__notions {
    gap: 0.45rem;
}

.account-empty-state {
    width: min(100%, 42rem);
    padding: clamp(1rem, 3vw, 1.35rem);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
}

.account-empty-state h3,
.account-empty-state p {
    margin-block-start: 0;
}

.account-empty-state .button {
    margin-block-start: 0.5rem;
}

.account-missing-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.auth-page {
    min-height: clamp(30rem, 62vh, 42rem);
    display: grid;
    align-items: start;
    justify-items: center;
    padding-block-start: clamp(2.5rem, 6vw, 4rem);
}

.auth-card {
    width: min(100%, 35rem);
    padding: clamp(1.55rem, 4vw, 2.35rem);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: 0 1.1rem 2.8rem rgb(23 63 143 / 8%);
}

.auth-card__header {
    display: grid;
    gap: 0.65rem;
}

.auth-card__header h1,
.auth-card__header p,
.auth-card__secondary h2,
.auth-card__secondary p,
.auth-card__forgot-password {
    margin: 0;
}

.auth-card__header h1 {
    font-size: clamp(2rem, 6vw, 3rem);
}

.auth-card__header p,
.auth-card__secondary p,
.auth-card__notice {
    color: var(--color-muted);
    line-height: 1.5;
}

.auth-card__notice {
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    border: 0.0625rem solid #d8e1f0;
    border-radius: var(--radius-small);
    background: #f0f4fb;
}

.auth-google-button {
    width: 100%;
    min-height: 3rem;
    margin-block-start: 1.45rem;
    padding: 0.65rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    border: 0.0625rem solid #cbd8ef;
    border-radius: 999rem;
    color: var(--color-blue-900);
    background: #ffffff;
    box-shadow: 0 0.35rem 1rem rgb(23 63 143 / 8%);
    font-weight: 850;
    text-decoration: none;
}

.auth-google-button span {
    width: 1.7rem;
    height: 1.7rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999rem;
    color: #ffffff;
    background: #4285f4;
    font-weight: 900;
}

.auth-google-button:hover,
.auth-google-button:focus-visible {
    border-color: var(--color-blue-700);
    color: var(--color-blue-900);
    background: #f7faff;
    outline: 0.1875rem solid rgb(36 84 184 / 22%);
    outline-offset: 0.125rem;
}

.auth-divider {
    margin-block: 1.15rem 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-muted);
    font-weight: 800;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 0.0625rem;
    background: var(--color-border);
}

.auth-form {
    margin-block-start: 1.55rem;
    display: grid;
    gap: 1.15rem;
}

.auth-form__field {
    margin: 0;
    display: grid;
    gap: 0.52rem;
}

.auth-form__field label {
    font-weight: 800;
}

.auth-form__submit {
    width: fit-content;
    margin-block-start: 0.45rem;
}

.auth-form__errors {
    padding: 0.85rem 1rem;
    border: 0.0625rem solid #f2b8b5;
    border-radius: var(--radius-small);
    color: #7a1f1c;
    background: #fff1f0;
}

.auth-form__errors .errorlist,
.auth-form__field .errorlist {
    margin: 0;
}

.auth-card__forgot-password {
    margin-block-start: 0.9rem;
    font-weight: 750;
}

.auth-card__secondary {
    margin-block-start: 1.5rem;
    padding-block-start: 1.5rem;
    display: grid;
    gap: 0.85rem;
    border-block-start: 0.0625rem solid var(--color-border);
}

.auth-card__secondary h2 {
    font-size: clamp(1.25rem, 4vw, 1.55rem);
}

.auth-card__secondary .button {
    width: fit-content;
    border-color: #cbd8ef;
    color: var(--color-blue-900);
    background: #ffffff;
    box-shadow: 0 0.15rem 0.55rem rgb(23 63 143 / 8%);
}

.auth-card__secondary .button:hover,
.auth-card__secondary .button:focus-visible {
    border-color: var(--color-blue-700);
    color: var(--color-blue-900);
    background: var(--color-blue-100);
}

.register-page {
    width: min(calc(100% - 48px), 43.75rem);
}

.register-page__heading {
    max-width: 42rem;
    display: grid;
    gap: 0.75rem;
    margin-block-end: clamp(1.5rem, 4vw, 2.25rem);
}

.register-page__heading h1,
.register-page__heading p,
.register-page__login {
    margin: 0;
}

.register-page__heading h1 {
    font-size: clamp(2.4rem, 8vw, 4rem);
}

.register-page__heading p {
    color: var(--color-muted);
    font-size: clamp(1.05rem, 2vw, 1.18rem);
    line-height: 1.5;
}

.register-page__google {
    width: 100%;
    margin-block-end: 1.5rem;
}

.register-page__google-note {
    margin: 0.8rem 0 0;
    color: var(--color-muted);
    font-weight: 750;
    text-align: center;
}

.register-form {
    display: grid;
    gap: clamp(1.25rem, 3vw, 1.75rem);
}

.register-form__group {
    min-width: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    border: 0;
}

.register-form__group + .register-form__group {
    padding-block-start: clamp(1.25rem, 3vw, 1.65rem);
    border-block-start: 0.0625rem solid var(--color-border);
}

.register-form__group legend {
    margin-block-end: 0.25rem;
    padding: 0;
    color: var(--color-blue-900);
    font-size: clamp(1.2rem, 3vw, 1.45rem);
    font-weight: 900;
}

.register-form__field {
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.register-form__field > label {
    font-weight: 800;
}

.register-form__name-grid {
    display: grid;
    gap: 1rem;
}

.register-form input[type="email"],
.register-form input[type="text"],
.register-form input[type="password"],
.register-form select,
.register-form .public-password-toggle {
    width: 100%;
    max-width: none;
}

.register-form .helptext,
.register-form .errorlist {
    max-width: none;
}

.register-form__level-grid > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

.register-form .account-level-option {
    margin: 0;
}

.register-form .account-level-option--principal {
    display: block;
}

.register-form .account-level-option label {
    min-height: 3rem;
    padding: 0.7rem 0.8rem;
    align-items: center;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-small);
    background: #ffffff;
    cursor: pointer;
}

.register-form .account-level-option label:hover,
.register-form .account-level-option label:focus-within {
    border-color: #b9c9ea;
    background: var(--color-blue-100);
}

.register-form .account-level-option input {
    flex: 0 0 auto;
}

.register-form .account-level-option--principal label {
    color: #5a667a;
    background: #f3f6fb;
    cursor: default;
}

.register-form .account-level-option--principal label:hover,
.register-form .account-level-option--principal label:focus-within {
    border-color: var(--color-border);
    background: #f3f6fb;
}

.account-level-option__badge {
    margin-inline-start: auto;
    padding: 0.18rem 0.5rem;
    border-radius: 999rem;
    color: #ffffff;
    background: var(--color-blue-700);
    font-size: 0.72rem;
    font-weight: 850;
    white-space: nowrap;
}

.register-form__password-help {
    padding: 0.85rem 1rem;
    display: grid;
    gap: 0.25rem;
    border: 0.0625rem solid #d8e1f0;
    border-radius: var(--radius-small);
    color: var(--color-muted);
    background: #f8faff;
    font-size: 0.92rem;
    line-height: 1.45;
}

.register-form__password-help span:first-child {
    color: var(--color-ink);
    font-weight: 800;
}

.register-form__password-help ul {
    margin: 0;
    padding-inline-start: 1.1rem;
}

.register-form__password-help li + li {
    margin-block-start: 0.12rem;
}

.register-form__submit {
    width: fit-content;
}

.register-form__errors {
    padding: 0.85rem 1rem;
    border: 0.0625rem solid #f2b8b5;
    border-radius: var(--radius-small);
    color: #7a1f1c;
    background: #fff1f0;
}

.register-page__login {
    margin-block-start: 1.25rem;
    color: var(--color-muted);
}

.account-form input[type="email"],
.account-form input[type="text"],
.account-form input[type="password"],
.account-form .public-password-toggle {
    width: 100%;
    max-width: 35rem;
}

.account-form .helptext,
.account-form .errorlist {
    display: block;
    max-width: 35rem;
}

.account-form.register-form input[type="email"],
.account-form.register-form input[type="text"],
.account-form.register-form input[type="password"],
.account-form.register-form .public-password-toggle,
.account-form.register-form .helptext,
.account-form.register-form .errorlist {
    max-width: none;
}

.public-password-toggle {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.public-password-toggle input[type="password"],
.public-password-toggle input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    padding-right: 3rem;
}

.public-password-toggle__button {
    flex: 0 0 auto;
    min-width: 3rem;
    margin-left: -3rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    z-index: 1;
}

.public-password-toggle__button[aria-pressed="true"] {
    color: var(--color-blue-700);
}

.public-password-toggle__button:focus-visible {
    outline: 0.1875rem solid var(--color-accent);
    outline-offset: -0.25rem;
}

.resource-issue-report {
    width: min(100%, 34rem);
    color: var(--color-ink);
    position: relative;
}

.resource-issue-report__trigger {
    width: fit-content;
    min-height: 2.75rem;
    padding: 0.62rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 0.0625rem solid #d8b96d;
    border-radius: 999rem;
    color: #654700;
    background: #fff7d6;
    cursor: pointer;
    font-weight: 850;
    list-style: none;
    line-height: 1.1;
    box-shadow: 0 0.25rem 0.7rem rgb(101 71 0 / 8%);
}

.resource-issue-report__trigger::-webkit-details-marker {
    display: none;
}

.resource-issue-report__trigger::marker {
    content: "";
}

.resource-issue-report__trigger:hover,
.resource-issue-report__trigger:focus-visible {
    border-color: #c8951a;
    background: #ffedaa;
    outline: 0.1875rem solid rgb(216 165 34 / 22%);
    outline-offset: 0.125rem;
}

.resource-issue-report__panel {
    margin-block-start: 0.65rem;
    padding: 0.85rem;
    border: 0.0625rem solid #d8e1f0;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 0.45rem 1.2rem rgb(23 63 143 / 10%);
}

.resource-issue-report__form {
    display: grid;
    gap: 0.75rem;
}

.resource-issue-report__heading {
    display: grid;
    gap: 0.18rem;
}

.resource-issue-report__title {
    margin: 0;
    font-weight: 850;
}

.resource-issue-report__legend {
    margin: 0 0 0.35rem;
    padding: 0;
    width: 100%;
    color: var(--color-slate);
    font-size: 0.86rem;
    font-weight: 800;
}

.resource-issue-report__context,
.resource-issue-report__youtube-note {
    margin: 0;
    color: var(--color-slate);
    font-size: 0.92rem;
}

.resource-issue-report__youtube-note a {
    color: var(--color-blue-700);
    font-weight: 800;
}

.resource-issue-report__login-panel {
    display: grid;
    gap: 0.7rem;
}

.resource-issue-report__login-link {
    width: fit-content;
    min-height: 2.35rem;
    padding: 0.45rem 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999rem;
    color: #ffffff;
    background: var(--color-blue-700);
    font-weight: 850;
    text-decoration: none;
}

.resource-issue-report__login-link:hover,
.resource-issue-report__login-link:focus-visible {
    color: #ffffff;
    background: var(--color-blue-900);
    outline: 0.1875rem solid rgb(36 84 184 / 22%);
    outline-offset: 0.125rem;
}

.resource-issue-report__choices {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.resource-issue-report__choice {
    display: inline-flex;
}

.resource-issue-report__choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.resource-issue-report__choice span {
    min-height: 2.1rem;
    padding: 0.42rem 0.72rem;
    display: inline-flex;
    align-items: center;
    border: 0.0625rem solid #c9d8f4;
    border-radius: 999rem;
    color: var(--color-blue-700);
    background: #f7faff;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.15;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.resource-issue-report__choice input:checked + span {
    border-color: var(--color-blue-700);
    color: #ffffff;
    background: var(--color-blue-700);
}

.resource-issue-report__choice input:focus-visible + span {
    outline: 0.1875rem solid rgb(36 84 184 / 22%);
    outline-offset: 0.125rem;
}

.resource-issue-report__choice:hover span {
    border-color: var(--color-blue-700);
    background: #eaf1ff;
}

.resource-issue-report__choice:hover input:checked + span {
    background: var(--color-blue-900);
}

.resource-issue-report__message textarea {
    width: 100%;
    max-width: none;
    min-height: 5.2rem;
    resize: vertical;
    padding: 0.7rem 0.8rem;
    border: 0.0625rem solid #ccd8ed;
    border-radius: 0.9rem;
    background: #fbfdff;
    color: var(--color-ink);
    font: inherit;
}

.resource-issue-report__message textarea:focus-visible {
    border-color: var(--color-blue-700);
    outline: 0.1875rem solid rgb(36 84 184 / 18%);
    outline-offset: 0.125rem;
}

.resource-issue-report__honeypot {
    position: absolute;
    left: -9999rem;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.resource-issue-report__submit {
    width: fit-content;
    min-height: 2.35rem;
    padding: 0.45rem 0.9rem;
    border: 0;
    border-radius: 999rem;
    color: #ffffff;
    background: var(--color-blue-700);
    cursor: pointer;
    font: inherit;
    font-weight: 850;
}

.resource-issue-report__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.resource-issue-report__cancel {
    width: fit-content;
    min-height: 2.35rem;
    padding: 0.45rem 0.85rem;
    border: 0.0625rem solid #c9d8f4;
    border-radius: 999rem;
    color: var(--color-blue-700);
    background: #ffffff;
    cursor: pointer;
    font: inherit;
    font-weight: 850;
}

.resource-issue-report__submit:hover,
.resource-issue-report__submit:focus-visible,
.resource-issue-report__cancel:hover,
.resource-issue-report__cancel:focus-visible {
    background: var(--color-blue-900);
    color: #ffffff;
    outline: 0.1875rem solid rgb(36 84 184 / 22%);
    outline-offset: 0.125rem;
}

.resource-issue-report--compact {
    width: auto;
}

.resource-issue-report--compact .resource-issue-report__form {
    min-width: min(28rem, calc(100vw - 3rem));
}

.resource-issue-report--segment {
    margin-block-start: 0.45rem;
    grid-column: 1 / -1;
    width: 100%;
}

.resource-issue-report--segment .resource-issue-report__trigger {
    min-height: 2rem;
    padding: 0.22rem 0.5rem;
    border-color: transparent;
    color: var(--color-slate);
    background: transparent;
    box-shadow: none;
    font-size: 0.76rem;
    font-weight: 800;
}

.resource-issue-report--segment .resource-issue-report__trigger:hover,
.resource-issue-report--segment .resource-issue-report__trigger:focus-visible {
    border-color: #d8b96d;
    color: #654700;
    background: #fff7d6;
}

.resource-issue-report--segment .resource-issue-report__panel {
    max-width: 28rem;
    margin-block-start: 0.35rem;
    padding: 0.65rem;
    border-radius: 0.85rem;
    box-shadow: 0 0.3rem 0.8rem rgb(23 63 143 / 8%);
}

.resource-issue-report--segment .resource-issue-report__form {
    gap: 0.5rem;
}

.resource-issue-report--segment .resource-issue-report__title {
    font-size: 0.9rem;
}

.resource-issue-report--segment .resource-issue-report__context {
    font-size: 0.82rem;
}

.resource-issue-report--segment .resource-issue-report__choice span {
    min-height: 1.85rem;
    padding: 0.3rem 0.58rem;
    font-size: 0.78rem;
}

.resource-issue-report--segment .resource-issue-report__message textarea {
    min-height: 3.4rem;
    padding: 0.52rem 0.62rem;
    border-radius: 0.7rem;
    font-size: 0.85rem;
}

.resource-issue-report--segment .resource-issue-report__submit,
.resource-issue-report--segment .resource-issue-report__cancel {
    min-height: 1.9rem;
    padding: 0.28rem 0.65rem;
    font-size: 0.8rem;
}

.resource-issue-report--correction {
    margin-block-start: 0.55rem;
}

.written-exercise__actions .resource-issue-report--written {
    flex: 0 0 auto;
    width: auto;
    align-self: flex-start;
}

.written-exercise__actions .resource-issue-report--written .resource-issue-report__panel {
    position: absolute;
    z-index: 30;
    inset-block-start: calc(100% + 0.45rem);
    inset-inline-end: 0;
    width: min(34rem, calc(100vw - 2rem));
}

.written-exercise__statement-report {
    margin: 0 0 1rem;
}

.resource-issue-report--written-inline {
    width: auto;
    align-self: flex-start;
}

.resource-issue-report--written-inline .resource-issue-report__trigger {
    min-height: 2rem;
    padding: 0.22rem 0.52rem;
    border-color: rgba(156, 114, 14, 0.24);
    background: #fffaf0;
    color: #7a5508;
    font-size: 0.82rem;
    box-shadow: none;
}

.resource-issue-report--written-inline .resource-issue-report__trigger:hover,
.resource-issue-report--written-inline .resource-issue-report__trigger:focus-visible {
    border-color: #c8951a;
    background: #fff1bf;
    color: #5e3f00;
}

.resource-issue-report--written-inline .resource-issue-report__panel {
    max-width: min(30rem, calc(100vw - 3rem));
    margin-block-start: 0.35rem;
    padding: 0.65rem;
}

.resource-issue-report--written-inline .resource-issue-report__form {
    gap: 0.5rem;
}

.resource-issue-report--written-inline .resource-issue-report__title {
    font-size: 0.9rem;
}

.resource-issue-report--written-inline .resource-issue-report__choice span {
    min-height: 1.85rem;
    padding: 0.3rem 0.58rem;
    font-size: 0.8rem;
}

.resource-issue-report--written-inline .resource-issue-report__choices--context {
    padding-block-end: 0.15rem;
    border-bottom: 1px solid rgba(36, 87, 197, 0.12);
}

.resource-issue-report--written-inline .resource-issue-report__reason-group {
    margin-block-start: -0.2rem;
}

.resource-issue-report--written-inline .resource-issue-report__message textarea {
    min-height: 3.4rem;
    padding: 0.52rem 0.62rem;
    font-size: 0.85rem;
}

.resource-issue-report--written-inline .resource-issue-report__submit,
.resource-issue-report--written-inline .resource-issue-report__cancel {
    min-height: 1.9rem;
    padding: 0.28rem 0.65rem;
    font-size: 0.8rem;
}

.resource-issue-report--document {
    grid-column: 1 / -1;
}

@media (max-width: 42rem) {
    .resource-issue-report,
    .resource-issue-report--compact {
        width: 100%;
    }

    .resource-issue-report__trigger,
    .resource-issue-report__submit,
    .resource-issue-report__cancel {
        width: 100%;
        justify-content: center;
    }

    .resource-issue-report--compact .resource-issue-report__form {
        min-width: 0;
    }

    .resource-issue-report__panel {
        padding: 0.8rem;
    }

    .resource-issue-report__choices {
        display: grid;
        grid-template-columns: 1fr;
    }

    .resource-issue-report__choice span {
        width: 100%;
        justify-content: center;
    }

    .resource-issue-report--segment .resource-issue-report__trigger,
    .resource-issue-report--segment .resource-issue-report__submit,
    .resource-issue-report--segment .resource-issue-report__cancel {
        width: fit-content;
    }

    .resource-issue-report--segment .resource-issue-report__choices {
        display: flex;
        flex-wrap: wrap;
    }

    .resource-issue-report--segment .resource-issue-report__choice span {
        width: auto;
    }

    .resource-issue-report--written-inline .resource-issue-report__trigger,
    .resource-issue-report--written-inline .resource-issue-report__submit,
    .resource-issue-report--written-inline .resource-issue-report__cancel {
        width: fit-content;
    }

    .resource-issue-report--written-inline .resource-issue-report__choices {
        display: flex;
        flex-wrap: wrap;
    }

    .resource-issue-report--written-inline .resource-issue-report__choice span {
        width: auto;
    }

    .written-exercise__actions .resource-issue-report--written {
        width: 100%;
    }

    .written-exercise__actions .resource-issue-report--written .resource-issue-report__panel {
        position: static;
        width: 100%;
    }
}

.account-level-option {
    margin-block: 0.35rem;
}

.account-level-option label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.account-level-option--principal {
    display: none;
}

.account-favorites h2 {
    margin: 0;
}

.account-favorites__grid {
    width: 100%;
    column-gap: clamp(1.35rem, 2vw, 1.75rem);
    row-gap: clamp(1.75rem, 3vw, 2.25rem);
}

.account-history-preview {
    margin-top: var(--space-6);
}

.account-history-preview .account-dashboard-section__heading {
    align-items: baseline;
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
}

.account-history-grid {
    margin-top: var(--space-4);
}

/* Recent/history items are quick access cards; thumbnails remain secondary. */
.account-history-grid .library-resource-card__link {
    grid-template-columns: 6rem minmax(0, 1fr);
    align-items: start;
    height: auto;
}

.account-history-grid .library-resource-card--compact-no-thumb .library-resource-card__link {
    grid-template-columns: minmax(0, 1fr);
}

.account-history-grid .library-resource-card__thumbnail {
    width: 5rem;
    margin: 1rem 0 0 1rem;
    border-radius: var(--radius-small);
    font-size: 1.5rem;
}

.account-history-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-history-card {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.account-history-card > .library-resource-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.account-history-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    min-height: 3.35rem;
    padding: 0.7rem 1rem;
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface);
}

.account-history-card__footer > time,
.account-history-card__footer .account-history-action {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin: 0;
}

.account-history-action {
    color: var(--color-primary);
    font-weight: 700;
}

.account-history-card__footer .account-history-action {
    color: var(--color-primary);
    font-weight: 800;
}

.account-history-action:empty {
    display: none;
}

.account-history-collection-card {
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: clamp(0.8rem, 2.5vw, 1rem);
    color: var(--color-ink);
    text-decoration: none;
}

.account-history-card > .account-history-collection-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.account-history-remove {
    background: none;
    border: 0;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    text-decoration: underline;
}

.account-history-card__footer form {
    margin: 0 0 0 auto;
}

.account-history-filters,
.account-history-pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-5) 0;
}

.account-history-filters a {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
}

.account-history-filters a.is-active {
    background: var(--color-blue-900);
    color: white;
}

.account-favorite-card {
    display: grid;
    gap: 0.45rem;
}

.account-favorite-card .library-resource-card {
    min-width: 0;
}

.account-favorite-card__action {
    margin: 0;
}

.account-favorite-card__remove {
    appearance: none;
    width: fit-content;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border: 0.0625rem solid #cbd8ef;
    border-radius: 999rem;
    color: var(--color-blue-900);
    background: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 850;
}

.account-favorite-card__remove:hover,
.account-favorite-card__remove:focus-visible {
    border-color: var(--color-blue-700);
    background: var(--color-blue-100);
    outline: 0.1875rem solid rgb(36 84 184 / 22%);
    outline-offset: 0.125rem;
}

.math-content {
    overflow-wrap: anywhere;
}

.error-page {
    min-height: 65vh;
    display: grid;
    align-items: center;
    gap: clamp(1.5rem, 6vw, 4rem);
}

.error-page--standalone {
    min-height: 100vh;
    padding-block: 2rem;
}

.error-page__code {
    margin: 0;
    color: var(--color-blue-100);
    font-size: clamp(7rem, 28vw, 15rem);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.08em;
    text-shadow: 0.05em 0 var(--color-blue-700);
}

.error-page h1 {
    max-width: 15ch;
}

.error-page div > p:not(.page-heading__eyebrow) {
    max-width: 42rem;
    margin-block: 1rem 1.5rem;
    color: var(--color-muted);
    font-size: 1.08rem;
}

.site-footer {
    margin-block-start: 3rem;
    padding-block: 2rem;
    border-block-start: 0.25rem solid var(--color-green-700);
    color: #ffffff;
    background: var(--color-blue-900);
}

.site-footer__inner {
    display: grid;
    gap: 1rem;
}

.site-footer p {
    margin: 0.25rem 0 0;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.15rem;
    align-items: center;
}

.site-footer a {
    color: #ffffff;
    font-weight: 700;
}

.site-footer .site-footer__support-link {
    min-height: 2.75rem;
    padding: 0.4rem 0.7rem;
    display: inline-flex;
    align-items: center;
    border: 0.0625rem solid #d7b126;
    border-radius: var(--radius-small);
    color: #604a00;
    background: var(--color-yellow-100);
    text-decoration: none;
    cursor: pointer;
}

.site-footer .site-footer__support-link:hover,
.site-footer .site-footer__support-link:focus-visible {
    border-color: #f1cf4d;
    color: #493800;
    background: #ffefad;
}

.site-footer .site-footer__support-link:active,
.site-navigation__list .site-navigation__support-link:active {
    transform: translateY(0.08rem);
}

@media (min-width: 48rem) {
    .site-header__inner {
        justify-content: start;
    }

    .site-navigation--desktop {
        display: block;
        margin-left: auto;
    }

    .site-navigation--desktop .site-navigation__list {
        position: static;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 0.12rem;
        border: 0;
        box-shadow: none;
    }

    .site-navigation--mobile {
        display: none !important;
    }

    .site-account-actions--desktop {
        display: flex;
        align-items: center;
        gap: 0.12rem;
    }

    .site-footer__inner {
        grid-template-columns: minmax(12rem, 1fr) 2fr auto;
        align-items: start;
    }

    .resource-card--document {
        align-items: center;
    }

    .button--download {
        grid-column: auto;
    }

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

    .register-form__level-grid > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

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

    .library-page--wide .library-grid--program {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .library-section__header {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .related-chapter {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .home-hero__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
    }

    .home-hero__signature {
        display: flex;
    }

    .error-page {
        grid-template-columns: minmax(14rem, 0.65fr) minmax(0, 1fr);
    }
}

@media (min-width: 48rem) and (max-width: 74.99rem) {
    .site-navigation--desktop,
    .site-account-actions--desktop {
        display: none;
    }

    .site-navigation--mobile {
        display: block !important;
        margin-left: auto;
    }
}

@media (max-width: 47.99rem) {
    .site-account-actions--desktop {
        display: none;
    }
}

@media (max-width: 56rem) {
    .home-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
    }

    .home-hero__signature {
        font-size: clamp(5rem, 22vw, 8rem);
    }
}

@media (max-width: 40rem) {
    .teacher-preview-summary,
    .teacher-preview-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 60rem) {
    .library-page--wide .library-grid--program {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 68rem) {
    .about-page__top {
        grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
        gap: clamp(3rem, 5vw, 4.5rem);
    }

    .library-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .library-grid--program-exam {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .library-resource-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .library-part-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .account-dashboard-hero {
        grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 0.7fr);
        column-gap: clamp(3rem, 5vw, 4.5rem);
    }

    .account-dashboard-hero__footer {
        align-self: center;
        justify-content: flex-start;
    }
}

@media (min-width: 90rem) {
    .library-resource-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .account-history-page .account-history-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .library-resource-grid--search {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 89.99rem) {
    .playlist-page__videos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 68rem) {
    .account-history-page .account-history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 47.99rem) {
    .account-history-page .account-history-grid {
        grid-template-columns: 1fr;
    }

    .account-history-footer {
        justify-content: flex-start;
    }
}

@media (max-width: 48rem) {
    .playlist-page__videos {
        grid-template-columns: minmax(0, 1fr);
    }
}

.explore-page {
    --explore-card-min: clamp(17.5rem, 18vw, 22.5rem);
    --explore-grid-min: min(100%, clamp(17.5rem, 20vw, 21.5rem));
    display: grid;
    gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

.explore-page.layout-container {
    width: min(100% - clamp(1.5rem, 4vw, 5rem), 112rem);
}

.explore-heading {
    width: min(100%, 62rem);
    margin-inline: 0;
}

.explore-heading__count {
    margin: 1rem 0 0;
    color: var(--color-muted, #5f6b7a);
    font-weight: 700;
}

.explore-filters {
    display: grid;
    gap: .9rem;
    padding: clamp(.85rem, 1.6vw, 1.15rem);
    border: 1px solid var(--color-border, #dbe4f0);
    border-radius: 1.25rem;
    background: var(--color-surface, #fff);
}

.explore-filters fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.explore-filters legend {
    margin-bottom: .45rem;
    font-weight: 800;
    color: var(--color-heading, #172033);
}

.explore-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    overflow-x: visible;
    padding-bottom: .15rem;
    scrollbar-width: none;
}

.explore-filter-row::-webkit-scrollbar,
.explore-row::-webkit-scrollbar {
    display: none;
}

.explore-chip,
.explore-reset,
.explore-back a,
.explore-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: .5rem .85rem;
    border: 1px solid var(--color-border, #dbe4f0);
    border-radius: 999px;
    background: #fff;
    color: var(--color-link, #0d56c9);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.explore-chip--active {
    background: var(--color-primary, #173f8f);
    border-color: var(--color-primary, #173f8f);
    color: #fff;
}

.explore-reset {
    justify-self: start;
    margin-top: .15rem;
}

.explore-notice,
.explore-empty {
    width: fit-content;
    max-width: 100%;
    padding: .65rem .9rem;
    border: 1px solid #ffd996;
    border-radius: .85rem;
    background: #fff8e8;
    color: #5f4100;
    font-size: .95rem;
}

.explore-notice {
    padding: 0;
}

.explore-notice__link {
    padding: .65rem .9rem;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem .55rem;
    align-items: center;
    color: inherit;
    font-weight: 750;
    text-decoration: none;
}

.explore-notice__link span {
    color: var(--color-link, #0d56c9);
    font-weight: 900;
}

.explore-notice__link:hover,
.explore-notice__link:focus-visible {
    color: #4b3300;
    background: #fff2c5;
    outline: 0.1875rem solid rgb(135 102 0 / 20%);
    outline-offset: 0.125rem;
}

.explore-sections {
    display: grid;
    gap: clamp(1.75rem, 3vw, 2.6rem);
}

.explore-section {
    display: grid;
    gap: 1rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--color-border, #dbe4f0);
}

.explore-section__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.explore-section__heading h2,
.explore-section__heading h3 {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.explore-section-family {
    margin: 0;
    color: var(--color-ink, #102033);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.explore-section__heading p {
    margin: .25rem 0 0;
    color: var(--color-muted, #5f6b7a);
    font-weight: 700;
}

.explore-section__heading > a {
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    padding-inline: .25rem;
    color: var(--color-link, #0d56c9);
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.explore-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(17.5rem, var(--explore-card-min));
    gap: clamp(.85rem, 1.2vw, 1.15rem);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    padding: .25rem .15rem .85rem;
    scrollbar-width: none;
}

.explore-row__item {
    scroll-snap-align: start;
}

.explore-grid,
.explore-full-grid .library-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--explore-grid-min), 1fr));
    gap: clamp(.9rem, 1.3vw, 1.25rem);
}

.explore-full-grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

.explore-full-grid__heading {
    padding-block-end: .35rem;
    border-block-end: 1px solid var(--color-border, #dbe4f0);
}

.explore-back {
    margin-block-end: .55rem;
}

.explore-playlist-card {
    position: relative;
    height: 100%;
    border: 1px solid var(--color-border, #dbe4f0);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 .35rem 1.25rem rgba(16, 32, 64, .08);
    overflow: hidden;
}

.explore-playlist-card__link {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.explore-playlist-card__thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: linear-gradient(135deg, #173f8f, #38bdf8);
}

.explore-playlist-card__thumbnail--fallback {
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 900;
}

.explore-playlist-card__body {
    display: grid;
    grid-template-rows: auto minmax(3.75rem, auto) auto;
    align-content: stretch;
    gap: .55rem;
    padding: .9rem;
}

.explore-playlist-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.explore-playlist-card__badges span {
    padding: .18rem .5rem;
    border-radius: 999px;
    background: #edf4ff;
    color: #173f8f;
    font-size: .78rem;
    font-weight: 900;
}

.explore-playlist-card__body strong {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.explore-playlist-card__meta {
    align-self: end;
    color: var(--color-muted, #5f6b7a);
    font-weight: 700;
}

.explore-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
    font-weight: 800;
}

.explore-page .library-resource-card,
.explore-page .library-resource-card__link {
    height: 100%;
}

.explore-page .library-resource-card__thumbnail {
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background-color: #f3f6fb;
}

.explore-page .library-resource-card strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media (max-width: 48rem) {
    .explore-page.layout-container {
        width: min(100% - 1rem, 100%);
    }

    .explore-filters {
        border-radius: 1rem;
    }

    .explore-filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        padding-block-end: .35rem;
    }

    .explore-chip {
        scroll-snap-align: start;
    }

    .explore-section__heading {
        align-items: start;
        flex-wrap: wrap;
    }

    .explore-row {
        grid-auto-columns: minmax(16rem, 82vw);
    }

    .explore-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 120rem) {
    .explore-page.layout-container {
        width: min(100% - 6rem, 128rem);
    }
}

@media (min-width: 96rem) {
    .library-page--wide .library-grid--program {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.teacher-class-card,
.teacher-class-panel {
    border: 1px solid var(--color-border, #d9e2ef);
    border-radius: 1rem;
    background: var(--color-surface, #fff);
    box-shadow: 0 .5rem 1.5rem rgb(15 23 42 / 6%);
}

.teacher-class-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem 1rem;
    align-items: center;
    padding: 1rem;
}

.teacher-class-card__main {
    color: inherit;
    text-decoration: none;
}

.teacher-class-card__main,
.teacher-class-card__main > span:first-child {
    display: grid;
    gap: .2rem;
}

.teacher-class-card__main strong {
    font-size: 1.1rem;
}

.teacher-class-card__main small,
.teacher-class-muted,
.teacher-class-header__meta {
    color: var(--color-text-muted, #5b6472);
}

.teacher-class-card__count,
.teacher-class-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    background: #eef5ff;
    color: #1f4fbf;
    padding: .25rem .65rem;
    font-size: .85rem;
    font-weight: 700;
}

.teacher-class-card__link {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.teacher-class-card__copy {
    justify-self: end;
}

.teacher-class-workspace {
    display: grid;
    gap: 1rem;
}

.teacher-class-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    padding: 1.25rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #eef5ff, #fff);
}

.teacher-class-header h1 {
    margin-block: .2rem;
}

.teacher-class-header__count {
    font-size: 1.1rem;
    color: #1f4fbf;
}

.teacher-class-tabs,
.teacher-class-bulkbar,
.teacher-class-secondary-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

.teacher-class-tabs {
    position: sticky;
    top: .5rem;
    z-index: 2;
    padding: .5rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 92%);
    box-shadow: 0 .35rem 1rem rgb(15 23 42 / 8%);
}

.teacher-class-tabs a {
    border-radius: 999px;
    padding: .45rem .8rem;
    color: #1f4fbf;
    font-weight: 700;
    text-decoration: none;
}

.teacher-class-tabs a:hover,
.teacher-class-tabs a:focus {
    background: #eef5ff;
}

.teacher-class-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.teacher-class-panel__heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.teacher-class-panel__heading h2 {
    margin-block: 0 .25rem;
}

.teacher-class-panel__heading p {
    margin: 0;
}

.teacher-class-filters {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, .6fr) auto auto;
    gap: .6rem;
    align-items: end;
}

.teacher-class-filters label,
.teacher-class-new-group form,
.teacher-class-student-card__groups {
    display: grid;
    gap: .3rem;
}

.teacher-class-bulkbar {
    padding: .65rem;
    border-radius: .8rem;
    background: #f7fafc;
}

.teacher-class-matrix {
    overflow-x: auto;
}

.teacher-class-matrix table {
    width: 100%;
    border-collapse: collapse;
    min-width: 42rem;
}

.teacher-class-matrix th,
.teacher-class-matrix td {
    padding: .55rem .65rem;
    border-bottom: 1px solid #e7edf6;
    text-align: center;
}

.teacher-class-matrix th:first-child {
    text-align: left;
}

.teacher-class-matrix small {
    display: block;
    color: var(--color-text-muted, #5b6472);
    font-weight: 400;
}

.teacher-class-compact-list {
    display: grid;
    gap: .5rem;
}

.teacher-class-compact-row,
.teacher-class-group-row {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .65rem;
    border: 1px solid #e7edf6;
    border-radius: .8rem;
}

.teacher-class-group-row--inactive {
    opacity: .72;
}

.teacher-class-mobile-cards {
    display: none;
}

.teacher-class-student-card {
    display: grid;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid #e7edf6;
    border-radius: .9rem;
}

.teacher-class-student-card__title {
    display: flex;
    gap: .5rem;
    align-items: start;
}

.teacher-class-student-card__title small {
    display: block;
    color: var(--color-text-muted, #5b6472);
}

.teacher-class-group-list {
    display: grid;
    gap: .5rem;
}

.teacher-class-new-group {
    justify-self: end;
}

.teacher-class-new-group form {
    margin-top: .75rem;
    min-width: min(24rem, 80vw);
    padding: .75rem;
    border: 1px solid #e7edf6;
    border-radius: .8rem;
    background: #fff;
}

.teacher-class-invitation-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .55rem .7rem;
    border-radius: .6rem;
    background: #f7fafc;
}

.teacher-class-save {
    justify-self: start;
}

@media (max-width: 48rem) {
    .teacher-class-card,
    .teacher-class-header,
    .teacher-class-panel__heading,
    .teacher-class-group-row,
    .teacher-class-compact-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .teacher-class-header,
    .teacher-class-panel__heading {
        display: grid;
        align-items: start;
    }

    .teacher-class-tabs {
        border-radius: 1rem;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .teacher-class-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .teacher-class-matrix--desktop,
    .teacher-class-compact-list--desktop {
        display: none;
    }

    .teacher-class-mobile-cards {
        display: grid;
        gap: .75rem;
    }

    .teacher-class-card__copy,
    .teacher-class-new-group {
        justify-self: start;
    }
}

@media (max-width: 26rem) {
    .site-brand__name {
        position: absolute;
        width: 0.0625rem;
        height: 0.0625rem;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

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

@media (forced-colors: active) {
    .button,
    .callout,
    .resource-card,
    .resource-panel,
    .related-chapter,
    .resource-context {
        border: 0.125rem solid CanvasText;
    }
}

@media (min-width: 80rem) {
    .site-sidebar-trigger--mobile {
        display: none;
    }

    .site-sidebar-toggle {
        display: inline-flex;
    }

    .site-shell-body {
        padding-inline: var(--space-page);
        display: grid;
        grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
        gap: clamp(1.25rem, 2vw, 2rem);
        align-items: stretch;
        transition: grid-template-columns 160ms ease, gap 160ms ease;
    }

    .site-shell-body--sidebar-collapsed {
        grid-template-columns: 0 minmax(0, 1fr);
        gap: 0;
    }

    .site-sidebar--desktop {
        position: sticky;
        top: 1rem;
        /* Navigation scrolls inside the main column's row without contributing
           its intrinsic content height to the position of the footer. */
        contain: size;
        height: 100%;
        align-self: start;
        max-height: calc(100vh - 2rem);
        display: block;
        overflow-y: auto;
        padding: 0.25rem;
        scrollbar-gutter: stable;
        transition: opacity 120ms ease, visibility 120ms ease;
    }

    .site-shell-body--sidebar-collapsed .site-sidebar--desktop {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
        padding: 0;
        scrollbar-gutter: auto;
    }

    .site-shell-body--resource {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .site-shell-body--resource .site-shell-main {
        grid-column: 1;
    }

}

@media (max-width: 79.99rem) {
    .site-sidebar-toggle {
        display: none;
    }

    .site-sidebar--desktop {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-shell-body,
    .site-sidebar--desktop {
        transition: none;
    }
}

@media (max-width: 30rem) {
    .site-sidebar--drawer {
        width: min(21rem, calc(100vw - 1rem));
        padding: 0.8rem;
    }

    .site-sidebar__section {
        padding: 0.65rem;
    }
}