body {
    margin: 0;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    background: #f8fafc;
    color: #0f172a;
}

a {
    text-decoration: none;
}

a[href],
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
[role="tab"]:not([aria-disabled="true"]),
summary,
label[for],
select:not(:disabled),
input[type="button"]:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
input[type="reset"]:not(:disabled),
input[type="submit"]:not(:disabled) {
    cursor: pointer;
}

button:disabled,
[aria-disabled="true"],
select:disabled,
input:disabled {
    cursor: not-allowed;
}

.app-sidebar {
    background: #ffffff;
    border: 1px solid #e7e7e9;
    color: #52525b;
    min-width: 0;
    position: relative;
}

.app-sidebar-brand {
    align-items: center;
    border-bottom: 1px solid #ededee;
    display: flex;
    height: 5rem;
    padding: 0 1.5rem;
}

.app-sidebar-brand-link {
    align-items: center;
    color: #18181b;
    display: flex;
    gap: 0.65rem;
    min-width: 0;
}

.app-sidebar-logo {
    align-items: center;
    background: #18181b;
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1rem;
    height: 1.875rem;
    justify-content: center;
    width: 1.875rem;
}

.app-sidebar-logo img {
    height: 100%;
    width: 100%;
}

.app-sidebar-brand-name {
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -0.035em;
    white-space: nowrap;
}

.app-sidebar-body {
    flex: 1;
    padding: 1.5rem 1.25rem;
}

.app-sidebar-nav {
    display: grid;
    gap: 0.5rem;
}

.app-sidebar-section-label {
    color: #8b8b91;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    margin: 0 0 0.375rem;
    padding: 0 0.875rem;
    text-transform: uppercase;
}

.app-sidebar-section-label--secondary {
    margin-top: 1.75rem;
}

.app-sidebar-link {
    align-items: center;
    border-radius: 0.5rem;
    color: #626268;
    display: flex;
    font-size: 0.875rem;
    font-weight: 500;
    gap: 0.875rem;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    position: relative;
    transition: background-color 160ms ease, color 160ms ease;
}

.app-sidebar-link > i {
    flex-shrink: 0;
    font-size: 1.125rem;
    text-align: center;
    width: 1.25rem;
}

.app-sidebar-link:hover,
.app-sidebar-link.is-active {
    background: #f5f5f5;
    color: #18181b;
}

.app-sidebar-link:focus-visible,
.app-sidebar-toggle:focus-visible,
.app-sidebar-brand-link:focus-visible,
.app-sidebar-user-toggle:focus-visible {
    outline: 2px solid #71717a;
    outline-offset: 3px;
}

.app-sidebar-tooltip {
    display: none;
}

.app-sidebar-toggle {
    display: none;
}

.app-sidebar-footer {
    border-top: 1px solid #ededee;
    flex-shrink: 0;
    padding: 1rem;
}

.app-sidebar-user-toggle {
    align-items: center;
    border-radius: 0.5rem;
    display: grid;
    gap: 0.625rem;
    grid-template-columns: 2.25rem minmax(0, 1fr) 0.75rem;
    padding: 0.625rem;
    text-align: left;
    transition: background-color 160ms ease;
    width: 100%;
}

.app-sidebar-user-toggle:hover {
    background: #f5f5f5;
}

@media (min-width: 64rem) {
    .app-shell {
        display: grid;
        align-items: start;
        gap: 0.5rem;
        grid-template-columns: 17.5rem minmax(0, 1fr);
        padding: 1rem;
        transition: grid-template-columns 220ms ease;
    }

    .app-shell[data-sidebar-collapsed="true"] {
        grid-template-columns: 6rem minmax(0, 1fr);
    }

    .app-sidebar {
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - 2rem);
        position: sticky;
        top: 1rem;
        z-index: 30;
    }

    .app-sidebar-toggle {
        align-items: center;
        background: #ffffff;
        border: 1px solid #e7e7e9;
        border-radius: 0.5rem;
        box-shadow: 0 2px 6px rgba(24, 24, 27, 0.04);
        color: #52525b;
        display: flex;
        font-size: 0.75rem;
        height: 1.875rem;
        justify-content: center;
        position: absolute;
        right: -0.9375rem;
        top: 4.0625rem;
        transition: background-color 160ms ease, color 160ms ease;
        width: 1.875rem;
        z-index: 20;
    }

    .app-sidebar-toggle:hover {
        background: #f5f5f5;
        color: #18181b;
    }

    .app-sidebar-brand,
    .app-sidebar-body,
    .app-sidebar-footer,
    .app-sidebar [data-user-menu-toggle] {
        transition: padding 220ms ease, gap 220ms ease;
    }

    .app-shell[data-sidebar-collapsed="true"] [data-sidebar-content] {
        display: none;
    }

    .app-shell[data-sidebar-collapsed="true"] .app-sidebar-brand {
        justify-content: center;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .app-shell[data-sidebar-collapsed="true"] .app-sidebar-body {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .app-shell[data-sidebar-collapsed="true"] .app-sidebar-nav a {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .app-shell[data-sidebar-collapsed="true"] .app-sidebar-section-label {
        font-size: 0.5625rem;
        letter-spacing: 0.025em;
        padding: 0;
        text-align: center;
    }

    .app-shell[data-sidebar-collapsed="true"] .app-sidebar-link {
        margin: 0 auto;
        width: 2.75rem;
    }

    .app-shell[data-sidebar-collapsed="true"] .app-sidebar-link:hover .app-sidebar-tooltip,
    .app-shell[data-sidebar-collapsed="true"] .app-sidebar-link:focus-visible .app-sidebar-tooltip {
        background: #18181b;
        border-radius: 0.375rem;
        box-shadow: 0 4px 12px rgba(24, 24, 27, 0.12);
        color: #ffffff;
        display: block;
        font-size: 0.75rem;
        left: calc(100% + 1rem);
        padding: 0.625rem 0.875rem;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        z-index: 40;
    }

    .app-sidebar-tooltip::before {
        border-bottom: 0.375rem solid transparent;
        border-right: 0.375rem solid #18181b;
        border-top: 0.375rem solid transparent;
        content: "";
        left: -0.375rem;
        position: absolute;
        top: calc(50% - 0.375rem);
    }

    .app-shell[data-sidebar-collapsed="true"] .app-sidebar-footer {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .app-shell[data-sidebar-collapsed="true"] .app-sidebar [data-user-menu-toggle] {
        gap: 0;
        grid-template-columns: 2.25rem;
        justify-content: center;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    .app-shell[data-sidebar-collapsed="true"] .app-sidebar [data-user-menu-panel] {
        bottom: 0;
        left: calc(100% + 0.75rem);
        margin-bottom: 0;
        right: auto;
        width: 18rem;
    }
}

.course-header {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.course-header > .min-w-0 {
    flex: 1 1 22rem;
}

.course-progress {
    flex: 1 1 100%;
    min-width: 0;
    position: relative;
}

.course-progress-summary {
    cursor: pointer;
    display: block;
    height: 7.5rem;
    position: relative;
    transition: border-color 180ms ease, background-color 180ms ease;
}

.course-progress-summary-content {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
}

.course-progress-summary-top {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) 7.75rem;
    min-width: 0;
}

.course-progress-summary-copy {
    color: #0f172a;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.course-progress-summary-title { font-size: 0.875rem; font-weight: 800; line-height: 1.125rem; }
.course-progress-summary-percentage { font-size: 1.75rem; font-weight: 800; line-height: 1.875rem; }
.course-progress-summary-streak { align-self: center; border-left: 1px solid #e8eef7; padding: 0 1rem 0 0.5rem; }
.course-progress-streak-label { align-items: center; color: #64748b; display: flex; font-size: 0.6875rem; gap: 0.25rem; white-space: nowrap; }
.course-progress-streak-label i { color: #f43f6c; font-size: 0.9375rem; }
.course-progress-streak-label strong { color: #0f172a; font-weight: 750; }
.course-progress-summary-metrics { display: grid; gap: 0.25rem; }
.course-progress-summary-completed { color: #64748b; font-size: 0.6875rem; line-height: 0.875rem; text-align: right; }
.course-progress-summary-bar { background: #e2e8f0; border-radius: 999px; display: block; height: 0.5rem; overflow: hidden; }
.course-progress-summary-bar > span { background: #0866ff; border-radius: inherit; display: block; height: 100%; }

.course-progress-week { display: grid; gap: 0.3125rem; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.course-progress-day { align-items: center; color: #64748b; display: flex; flex-direction: column; font-size: 0.625rem; gap: 0.25rem; line-height: 1; }
.course-progress-day-dot { background: #dbe4f0; border-radius: 50%; display: block; height: 0.875rem; width: 0.875rem; }
.course-progress-day--active { color: #0866ff; }
.course-progress-day--active .course-progress-day-dot { background: #0866ff; }
.course-progress-summary-streak .course-progress-week { margin-top: 0.375rem; }
.course-progress-summary-streak .course-progress-day { font-size: 0.5625rem; gap: 0.1875rem; }
.course-progress-summary-streak .course-progress-day-dot { height: 0.625rem; width: 0.625rem; }

.course-progress-summary:hover,
.course-progress-summary[aria-expanded="true"] {
    border-color: #93c5fd;
}

.course-progress-summary:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

.course-progress-chevron {
    position: absolute;
    right: 1rem;
    text-align: center;
    top: 2.25rem;
    transition: transform 180ms ease;
}

.course-progress-summary[aria-expanded="true"] .course-progress-chevron {
    transform: rotate(180deg);
}

.course-progress-panel {
    inset: calc(100% + 0.75rem) 0 auto auto;
    max-height: min(42rem, var(--course-progress-available-height, calc(100dvh - 2rem)));
    max-width: calc(100vw - 2rem);
    opacity: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: none;
    position: absolute;
    transform: translateY(-0.5rem);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
    visibility: hidden;
    width: 100%;
    z-index: 20;
}

.course-progress-panel[data-placement="above"] {
    inset: auto 0 calc(100% + 0.75rem) auto;
    transform: translateY(0.5rem);
}

.course-progress-summary[aria-expanded="true"] + .course-progress-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
}

.course-progress-panel { scrollbar-width: thin; }
.course-progress-section { border: 1px solid #e5edf8; border-radius: 1rem; padding: 0.75rem; }
.course-progress-section + .course-progress-section { margin-top: 0.625rem; }
.course-progress-section-heading { align-items: baseline; display: flex; gap: 0.5rem; justify-content: space-between; margin-bottom: 0.625rem; }
.course-progress-section-heading h2 { color: #0f172a; font-size: 0.875rem; font-weight: 800; line-height: 1.25; min-width: 0; }
.course-progress-detail { align-items: center; color: #0866ff; cursor: pointer; display: inline-flex; flex-shrink: 0; font-size: 0.6875rem; gap: 0.3125rem; line-height: 1.25; }
.course-progress-detail:hover { color: #1d4ed8; text-decoration: underline; text-underline-offset: 0.1875rem; }
.course-progress-detail:focus-visible,
.course-progress-reinforcement button:focus-visible { border-radius: 0.25rem; outline: 2px solid #2563eb; outline-offset: 2px; }

.course-progress-tiles { display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.course-progress-tile { align-content: start; border: 1px solid #e5edf8; border-radius: 0.625rem; column-gap: 0.5rem; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); padding: 0.5rem; row-gap: 0.1875rem; }
.course-progress-tile-icon { align-items: center; background: #eef5ff; border-radius: 0.5rem; color: #0866ff; display: flex; font-size: 1rem; grid-row: 1 / span 2; height: 1.875rem; justify-content: center; width: 1.5rem; }
.course-progress-tile dt { color: #64748b; font-size: 0.6875rem; line-height: 1.3; overflow-wrap: anywhere; }
.course-progress-tile dd { align-items: baseline; color: #0f172a; display: flex; flex-wrap: wrap; font-size: 1rem; gap: 0.25rem; line-height: 1.3; min-width: 0; }
.course-progress-tile dd strong { font-weight: 750; overflow-wrap: anywhere; }
.course-progress-tile-suffix { color: #64748b; font-size: 0.6875rem; font-weight: 400; }
.course-progress-tile--neutral .course-progress-tile-icon { color: #64799e; }
.course-progress-tile--accent .course-progress-tile-icon { background: #fff1f5; color: #f43f6c; }
.course-progress-tile--success dd { align-items: center; color: #059669; flex-wrap: nowrap; font-size: 0.75rem; gap: 0.3125rem; }
.course-progress-status-dot { background: currentColor; border-radius: 50%; flex-shrink: 0; height: 0.5rem; width: 0.5rem; }
.course-progress-tiles--assessment { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.course-progress-tiles--assessment .course-progress-tile { column-gap: 0.3125rem; grid-template-columns: 1.125rem minmax(0, 1fr); padding: 0.4375rem; }
.course-progress-tiles--assessment .course-progress-tile-icon { font-size: 0.875rem; height: 1.5rem; width: 1.125rem; }
.course-progress-tiles--assessment dt { font-size: 0.625rem; }
.course-progress-tiles--assessment dd { font-size: 0.9375rem; }
.course-progress-tiles--assessment .course-progress-tile-suffix { font-size: 0.625rem; }

.course-progress-priority-table { border: 1px solid #e5edf8; border-radius: 0.625rem; overflow-x: auto; }
.course-progress-priority-table table { border-collapse: collapse; font-size: 0.6875rem; font-variant-numeric: tabular-nums; width: 100%; }
.course-progress-priority-table th,
.course-progress-priority-table td { padding: 0.4375rem 0.1875rem; text-align: center; }
.course-progress-priority-table th:first-child { padding-left: 0.375rem; text-align: left; }
.course-progress-priority-table thead { background: #f5f8fd; color: #52688d; font-size: 0.625rem; }
.course-progress-priority-table abbr { cursor: help; text-decoration: none; white-space: nowrap; }
.course-progress-priority-table tbody tr { border-top: 1px solid #edf2f9; }
.course-progress-priority-table tbody td { color: #405779; font-weight: 650; }
.course-progress-priority-table tbody td:last-child { color: #0f172a; font-weight: 750; }
.course-progress-priority-table .course-priority-pill { background: transparent; border: 0; color: var(--priority-color); font-size: 0.6875rem; gap: 0.3125rem; padding: 0; }
.course-progress-priority-table .course-priority-pill i { color: var(--priority-icon-color); font-size: 0.6875rem; }

.course-progress-streak { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr) auto; }
.course-progress-streak > .course-progress-week { align-self: center; }
.course-progress-streak-records { display: grid; gap: 0.625rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.course-progress-streak-records > div { border-left: 1px solid #e5edf8; display: flex; flex-direction: column-reverse; padding-left: 0.5rem; }
.course-progress-streak-records dt { color: #64748b; font-size: 0.625rem; margin-top: 0.25rem; text-align: right; }
.course-progress-streak-records dd { align-items: center; color: #0f172a; display: flex; font-size: 0.875rem; gap: 0.3125rem; white-space: nowrap; }
.course-progress-streak-records i { color: #f43f6c; font-size: 1.125rem; }
.course-progress-streak-records > div:last-child i { color: #64799e; }

.course-progress-reinforcement { border: 1px solid #e5edf8; border-radius: 0.625rem; overflow: hidden; }
.course-progress-reinforcement li + li { border-top: 1px solid #e5edf8; }
.course-progress-reinforcement button { align-items: center; color: #52688d; cursor: pointer; display: grid; gap: 0.5rem; grid-template-columns: 1rem minmax(0, 1fr) auto 0.625rem; padding: 0.5rem; text-align: left; transition: background-color 160ms ease; width: 100%; }
.course-progress-reinforcement button:hover { background: #f5f8fd; }
.course-progress-reinforcement button:focus-visible { outline-offset: -2px; }
.course-progress-area-title { font-size: 0.6875rem; line-height: 1.4; overflow-wrap: anywhere; }
.course-progress-error-count { background: #ffe8ef; border-radius: 999px; color: #e11d48; font-size: 0.625rem; padding: 0.1875rem 0.4375rem; white-space: nowrap; }
.course-progress-reinforcement button > i:last-child { font-size: 0.625rem; }
.course-progress-empty { color: #64748b; font-size: 0.75rem; }

@media (max-width: 23rem) {
    .course-progress-summary-top { grid-template-columns: minmax(0, 1fr) 7rem; }
    .course-progress-summary-title { font-size: 0.8125rem; }
    .course-progress-tiles--assessment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .course-progress-streak { grid-template-columns: 1fr; }
    .course-progress-streak-records { justify-self: end; }
}

@media (min-width: 40rem) {
    .course-progress {
        flex: 0 1 clamp(17rem, 30vw, 23rem);
    }

    .course-progress-panel {
        width: 23rem;
    }
}

.course-icon-button {
    align-items: center;
    border-radius: 0.75rem;
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    transition: background-color 160ms ease, color 160ms ease;
    width: 2.5rem;
}

.course-icon-button:hover {
    background: #ffffff;
    color: #2563eb;
}

.course-meta-pill {
    align-items: center;
    background: rgba(241, 245, 249, 0.9);
    border-radius: 0.5rem;
    color: #475569;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 650;
    gap: 0.375rem;
    padding: 0.3rem 0.6rem;
}

.course-meta-pill i {
    color: #4f46e5;
}

.course-tab-trigger {
    align-items: center;
    border-bottom: 2px solid transparent;
    color: #64748b;
    display: inline-flex;
    font-weight: 650;
    gap: 0.65rem;
    padding: 0.85rem 1.25rem 1rem;
    transition: border-color 160ms ease, color 160ms ease;
}

.course-tab-trigger:hover {
    color: #1d4ed8;
}

.course-tab-trigger[aria-selected="true"] {
    border-bottom-color: #2563eb;
    color: #2563eb;
}

.course-syllabus {
    container: course-syllabus / inline-size;
}

.course-syllabus-sections {
    display: grid;
    gap: 1.25rem;
    padding: 1rem;
}

.course-syllabus-section {
    --class-accent: #4f75e5;
    --class-tint: #e8efff;
    background: linear-gradient(135deg, var(--class-tint), #f8faff);
    border-radius: 1.125rem;
    padding: 0.625rem;
    min-width: 0;
}

.course-syllabus-section--rose { --class-accent: #f65371; --class-tint: #ffe9ef; }
.course-syllabus-section--teal { --class-accent: #12a995; --class-tint: #e2f6f2; }
.course-syllabus-section--violet { --class-accent: #8b5cf6; --class-tint: #efe8ff; }
.course-syllabus-section--amber { --class-accent: #d99212; --class-tint: #fff3da; }

.course-syllabus-section-header {
    align-items: start;
    background-image: linear-gradient(90deg, var(--class-tint), transparent), var(--section-background, none);
    background-position: center;
    background-size: cover;
    border-radius: 0.875rem;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    margin-bottom: 0.625rem;
    padding: 0.625rem;
}

.course-syllabus-section-icon {
    align-items: center;
    background: var(--class-accent);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    font-size: 1.25rem;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.course-syllabus-section-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.course-syllabus-section-title h3 {
    color: #020617;
    font-size: clamp(1.25rem, 2.6cqi, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.15;
    margin: 0;
}

.course-syllabus-section-count {
    background: var(--class-accent);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.2rem 0.625rem;
    white-space: nowrap;
}

.course-syllabus-section-copy p {
    color: #526789;
    font-size: 0.8125rem;
    line-height: 1.45;
    margin: 0.5rem 0 0;
}

.course-syllabus-section-metrics {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    grid-column: 2;
    justify-content: flex-end;
    min-width: 0;
}

.course-syllabus-section-metrics > .course-priority-summary {
    border-left: 1px solid color-mix(in srgb, var(--class-accent) 25%, transparent);
    padding-left: 0.75rem;
    flex-wrap: wrap;
}

.course-syllabus-section-empty { color: #526789; font-size: 0.875rem; padding: 0.75rem; }

.course-syllabus-section .course-syllabus-grid { gap: 0.625rem; }
.course-syllabus-section .course-syllabus-card { padding: 0.375rem; }
.course-syllabus-section .course-syllabus-art { border-radius: 0.625rem; object-fit: cover; }
.course-syllabus-section .course-syllabus-card-content { gap: 0.375rem; min-width: 0; padding: 0.5rem; }
.course-syllabus-section .course-syllabus-card-title { font-size: 0.9375rem; }
.course-syllabus-section .course-syllabus-card-description { font-size: 0.8125rem; }
.course-syllabus-section .course-syllabus-card-footer { gap: 0.375rem; }
.course-syllabus-section .course-syllabus-type { font-size: 0.625rem; }
.course-syllabus-section .course-syllabus-unit-count { font-size: 0.6875rem; gap: 0.375rem; }
.course-syllabus-section .course-syllabus-card-action { font-size: 0.6875rem; gap: 0.5rem; padding: 0.375rem 0.625rem; }
.course-syllabus-section[hidden] { display: none; }

@container course-syllabus (min-width: 40rem) {
    .course-syllabus-section-header { align-items: center; grid-template-columns: 2.75rem minmax(0, 1fr) auto; }
    .course-syllabus-section-metrics { grid-column: 3; max-width: 23rem; justify-content: flex-end; }
    .course-syllabus-section--preparation .course-syllabus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .course-syllabus-section--preparation .course-syllabus-card { flex-direction: row; }
    .course-syllabus-section--preparation .course-syllabus-art { aspect-ratio: auto; flex: 0 0 38%; min-height: 9rem; width: 38%; }
}

@container course-syllabus (min-width: 52rem) {
    .course-syllabus-section .course-syllabus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .course-syllabus-section--preparation .course-syllabus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.course-syllabus-stats {
    border: 1px solid #e4ecf7;
    border-radius: 0.75rem;
    display: flex;
    margin: 0;
    max-width: 100%;
}

.course-syllabus-stats > div {
    align-items: center;
    display: grid;
    gap: 0.125rem 0.625rem;
    grid-template-columns: 2rem auto;
    padding: 0.625rem 0.875rem;
}

.course-syllabus-stats > div + div {
    border-left: 1px solid #e4ecf7;
}

.course-syllabus-stats i {
    background: #eff5ff;
    border-radius: 50%;
    color: #0866ff;
    display: grid;
    grid-row: 1 / 3;
    height: 2rem;
    place-items: center;
    width: 2rem;
}

.course-syllabus-stats dt {
    color: #637ca3;
    font-size: 0.75rem;
    grid-column: 2;
    grid-row: 2;
}

.course-syllabus-stats dd {
    color: #0f172a;
    font-size: 1.125rem;
    font-weight: 800;
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

.course-syllabus-type--fundamentals,
.course-syllabus-type--backend {
    --class-accent: #0866ff;
    --class-tint: #eff5ff;
}

.course-syllabus-type--frontend,
.course-syllabus-type--database {
    --class-accent: #7c3aed;
    --class-tint: #f5efff;
}

.course-syllabus-type--security {
    --class-accent: #059669;
    --class-tint: #ecfaf4;
}

.course-syllabus-type--deployment {
    --class-accent: #f59e0b;
    --class-tint: #fff6e9;
}

.course-syllabus-filter,
.course-syllabus-type,
.course-syllabus-card-action {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 650;
    gap: 0.5rem;
    white-space: nowrap;
}

.course-syllabus-filter {
    background: #f7f9fc;
    border: 1px solid #eaf0f8;
    color: #526789;
    min-height: 2.125rem;
    padding: 0.375rem 0.875rem;
    transition: background-color 160ms ease, color 160ms ease;
}

.course-syllabus-filter:hover {
    background: #eaf3ff;
}

.course-syllabus-filter[aria-pressed="true"] {
    background: #0866ff;
    border-color: #0866ff;
    color: #ffffff;
}

.course-syllabus-filter > span,
.course-syllabus-type > span {
    background: var(--class-accent);
    border-radius: 50%;
    height: 0.5rem;
    width: 0.5rem;
}

.course-syllabus-filter[aria-pressed="true"] > span {
    background: #ffffff;
}

.course-syllabus-grid {
    display: grid;
    gap: 1.125rem;
}

.course-syllabus-card {
    background: #ffffff;
    border: 1px solid #e4ecf7;
    border-radius: 0.875rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    position: relative;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.course-syllabus-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}

.course-syllabus-filter:focus-visible,
.course-syllabus-card-trigger:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

.course-syllabus-card-trigger {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

.course-syllabus-card-trigger:focus-visible { outline-offset: -3px; }
.course-syllabus-card:active { border-color: #60a5fa; }

/* Keep tooltips and any future nested controls above the full-card trigger. */
.course-syllabus-card-footer,
.course-syllabus-card :is(a, button:not(.course-syllabus-card-trigger), input, select, textarea, [contenteditable="true"]) {
    position: relative;
    z-index: 2;
}

.course-syllabus-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem;
}

.course-syllabus-card-title {
    color: #0f172a;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.25;
}

.course-syllabus-card-description {
    color: #637ca3;
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.4;
}

.course-syllabus-card-footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    margin-top: 0.25rem;
}

.course-syllabus-card-meta {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-width: 0;
}

.course-syllabus-card-meta .course-syllabus-type {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.course-class-progress {
    align-items: center;
    color: #637ca3;
    display: inline-flex;
    flex: 1 1 4.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    gap: 0.375rem;
    max-width: 6rem;
    min-width: 4.25rem;
}

.course-class-progress-bar {
    appearance: none;
    background: #e2e8f0;
    border: 0;
    border-radius: 999px;
    color: var(--class-accent);
    display: block;
    flex: 1;
    height: 0.375rem;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.course-class-progress-bar::-webkit-progress-bar { background: #e2e8f0; border-radius: inherit; }
.course-class-progress-bar::-webkit-progress-value { background: var(--class-accent); border-radius: inherit; }
.course-class-progress-bar::-moz-progress-bar { background: var(--class-accent); border-radius: inherit; }
.course-class-progress-value { flex-shrink: 0; font-variant-numeric: tabular-nums; }

.course-syllabus-type {
    background: var(--class-tint);
    color: var(--class-accent);
    padding: 0.375rem 0.625rem;
}

.course-syllabus-unit-count {
    align-items: center;
    color: #637ca3;
    display: inline-flex;
    font-size: 0.75rem;
    gap: 0.5rem;
    white-space: nowrap;
}

.course-syllabus-unit-count i {
    font-size: 0.9375rem;
}

.course-syllabus-card-action {
    border: 1px solid #e4ecf7;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
    color: #0866ff;
    gap: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.course-syllabus-art {
    aspect-ratio: 2.65;
    background: linear-gradient(135deg, #ffebef, #fde5ec);
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.course-syllabus-art--backend {
    background: linear-gradient(135deg, #eaf2ff, #dce9ff);
}

.course-syllabus-art--frontend {
    background: linear-gradient(135deg, #f0eaff, #e9e1ff);
}

.course-syllabus-art--database {
    background: linear-gradient(135deg, #e2faf3, #dff8f2);
}

.course-syllabus-art--security {
    background: linear-gradient(135deg, #fff7e4, #fff0d1);
}

.course-syllabus-art--deployment {
    background: linear-gradient(135deg, #ffeedf, #ffe5d1);
}

.course-syllabus-art-decoration {
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 0.5rem;
    height: 55%;
    position: absolute;
    top: 12%;
    width: 32%;
}

.course-syllabus-art-decoration--left {
    left: 5%;
    top: 38%;
}

.course-syllabus-art-decoration--right {
    right: 5%;
}

.course-syllabus-art-editor,
.course-syllabus-art-window,
.course-syllabus-art-tree {
    border-radius: 0.625rem;
    box-shadow: 0 5px 16px rgba(55, 79, 119, 0.12);
    position: absolute;
}

.course-syllabus-art-editor {
    background: linear-gradient(145deg, #344155, #1c293a);
    border: 1px solid #657489;
    height: 70%;
    right: 14%;
    top: 23%;
    width: 40%;
}

.course-syllabus-art-toolbar {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem;
}

.course-syllabus-art-toolbar i {
    background: #fb5269;
    border-radius: 50%;
    height: 0.375rem;
    width: 0.375rem;
}

.course-syllabus-art-toolbar i:nth-child(2) {
    background: #ffc13c;
}

.course-syllabus-art-toolbar i:nth-child(3) {
    background: #59a0ff;
}

.course-syllabus-art-code {
    display: grid;
    gap: 0.3rem;
    padding: 0.25rem 1rem;
}

.course-syllabus-art-code i {
    background: #579df8;
    border-radius: 999px;
    height: 0.25rem;
    width: 70%;
}

.course-syllabus-art-code i:nth-child(2) {
    background: linear-gradient(90deg, #569cfa 50%, #ff9da7 50%);
    width: 90%;
}

.course-syllabus-art-code i:nth-child(3) {
    background: linear-gradient(90deg, #ffb6c3 60%, #59bdac 60%);
    width: 100%;
}

.course-syllabus-art-code i:nth-child(4) {
    background: #cad5ea;
    width: 65%;
}

.course-syllabus-art-code i:nth-child(5) {
    background: linear-gradient(90deg, #f7c361 35%, #59bdac 35%);
    width: 80%;
}

.course-syllabus-art-logo {
    align-items: center;
    background: linear-gradient(145deg, #ffffff, #fff8f8);
    border: 1px solid #ffffff;
    border-radius: 1.25rem;
    color: #ff2d20;
    display: flex;
    font-size: clamp(2.5rem, 5vw, 4rem);
    height: 64%;
    justify-content: center;
    left: 17%;
    position: absolute;
    top: 16%;
    width: 27%;
}

.course-syllabus-art--backend .course-syllabus-art-editor {
    left: 10%;
    right: auto;
    width: 55%;
}

.course-syllabus-art-tree {
    background: rgba(255, 255, 255, 0.85);
    color: #526789;
    display: grid;
    font-size: 0.5625rem;
    gap: 0.3rem;
    padding: 0.625rem;
    right: 8%;
    top: 13%;
    width: 36%;
}

.course-syllabus-art-tree > span {
    align-items: center;
    display: flex;
    gap: 0.375rem;
    white-space: nowrap;
}

.course-syllabus-art-tree i {
    color: #4489f4;
}

.course-syllabus-art-window {
    background: #ffffff;
    height: 80%;
    left: 8%;
    top: 12%;
    width: 56%;
}

.course-syllabus-art-wireframe {
    align-items: center;
    display: flex;
    gap: 0.625rem;
    padding: 0.25rem 0.625rem;
}

.course-syllabus-art-wireframe > i {
    background: #eff5ff;
    border-radius: 0.375rem;
    color: #b8d0f7;
    font-size: 2.25rem;
    padding: 0.625rem;
}

.course-syllabus-art-wireframe > span {
    display: grid;
    flex: 1;
    gap: 0.375rem;
}

.course-syllabus-art-wireframe strong {
    background: #fff0f0;
    border-radius: 0.25rem;
    color: #ff5269;
    font-family: monospace;
    font-size: 0.875rem;
    padding: 0.375rem;
}

.course-syllabus-art-wireframe span i {
    background: #e3ebfa;
    border-radius: 999px;
    height: 0.25rem;
}

.course-syllabus-art--frontend .course-syllabus-art-tree {
    box-shadow: none;
    right: 4%;
    top: 25%;
    width: 32%;
}

.course-syllabus-art--database .course-syllabus-art-editor {
    right: 16%;
    width: 53%;
}

.course-syllabus-art-database {
    color: #6372ff;
    filter: drop-shadow(3px 5px 0 #b4b5ff);
    font-size: clamp(2.5rem, 5vw, 4rem);
    left: 12%;
    position: absolute;
    top: 25%;
}

.course-syllabus-art-shield,
.course-syllabus-art-cloud {
    color: #348aff;
    filter: drop-shadow(3px 4px 0 #b7d8ff);
    font-size: clamp(4.5rem, 7vw, 6rem);
    left: 18%;
    position: absolute;
    top: 9%;
}

.course-syllabus-art-shield > i + i,
.course-syllabus-art-cloud > i + i {
    color: #ffffff;
    font-size: 0.35em;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.course-syllabus-art--security .course-syllabus-art-tree {
    right: 19%;
    top: 11%;
    width: 33%;
}

.course-syllabus-art-cloud {
    left: 12%;
    top: 17%;
}

.course-syllabus-art-deployment {
    align-items: center;
    background: #ffffff;
    border-radius: 0.75rem;
    color: #17233e;
    display: flex;
    font-size: 1.75rem;
    gap: 1.125rem;
    padding: 1rem;
    position: absolute;
    right: 8%;
    top: 27%;
}

.course-syllabus-art-deployment i:last-child {
    color: #22b86b;
    font-size: 1.375rem;
}

[data-course-syllabus-target="catalog"][hidden],
[data-course-syllabus-target="detail"][hidden],
.course-syllabus-card[hidden] {
    display: none !important;
}

@container course-syllabus (min-width: 40rem) {
    .course-syllabus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container course-syllabus (max-width: 28rem) {
    .course-syllabus-stats {
        width: 100%;
    }

    .course-syllabus-stats > div {
        flex: 1;
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
        text-align: center;
    }

    .course-syllabus-stats i {
        display: none;
    }

    .course-syllabus-stats dt,
    .course-syllabus-stats dd {
        grid-column: 1;
    }
}

@container course-syllabus (min-width: 62rem) {
    .course-syllabus-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.course-lesson-tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
}

.course-priority-pill,
.course-duration-pill {
    align-items: center;
    background: #f1f5f9;
    border-radius: 0.5rem;
    color: #64748b;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 650;
    gap: 0.4rem;
    margin-top: 0.25rem;
    padding: 0.3rem 0.65rem;
    white-space: nowrap;
}

.course-priority-pill {
    --priority-color: #64748b;
    --priority-bg: #f1f5f9;
    --priority-icon-color: var(--priority-color);
    background: var(--priority-bg);
    color: var(--priority-color);
}

.course-priority-pill--medium {
    --priority-bg: #eff6ff;
    --priority-color: #0866f5;
}

.course-priority-pill--medium i {
    font-size: 0.65rem;
}

.course-priority-pill--high {
    --priority-bg: #fffbeb;
    --priority-color: #b45309;
    --priority-icon-color: #f59e0b;
}

.course-priority-pill--high i {
    color: var(--priority-icon-color);
}

.course-priority-pill--key {
    --priority-bg: #fff1f2;
    --priority-color: #e11d48;
}

.course-priority-summary {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.5rem;
    max-width: 100%;
}

.course-priority-pill.course-priority-count {
    background: transparent;
    border-radius: 0;
    font-size: 0.6875rem;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}

.course-priority-count i {
    align-items: center;
    background: var(--priority-icon-color);
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 1.25rem;
    font-size: 0.625rem;
    height: 1.25rem;
    justify-content: center;
    width: 1.25rem;
}

.course-priority-count-value { font-variant-numeric: tabular-nums; }
.course-priority-pill.course-priority-count--labelled {
    display: grid;
    gap: 0.125rem 0.25rem;
    grid-template-columns: 1.25rem auto;
}
.course-priority-count--labelled i { grid-row: 1 / 3; }
.course-priority-count-label { color: #637ca3; font-size: 0.625rem; grid-column: 2; }

.course-lesson-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.course-lesson-row {
    align-items: center;
    border-top: 1px solid #e2e8f0;
    display: grid;
    gap: 1rem 0.75rem;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    min-width: 0;
    padding: 0.875rem 1rem;
}

.course-lesson-number {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
    margin-right: 0.375rem;
    white-space: nowrap;
}

.course-lesson-content {
    min-width: 0;
}

.course-lesson-title {
    color: #0f172a;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    overflow-wrap: anywhere;
}

.course-status {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    font-size: 1rem;
}

.course-status--icon {
    height: 2rem;
    justify-content: center;
    padding: 0;
    width: 2rem;
}

.course-status--completed {
    background: #22c55e;
    color: #ffffff;
}

.course-status--progress {
    border: 2px solid #0866f5;
    color: #0866f5;
}

.course-status--progress i {
    font-size: 0.875rem;
    margin-left: 0.125rem;
}

.course-status--pending {
    border: 3px solid #94a3b8;
}

.course-status--locked {
    background: #f1f5f9;
    color: #64748b;
}

.course-lesson-actions {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: 8.25rem 3.5rem 6.25rem;
    min-width: 0;
}

.course-lesson-actions > button,
.course-theory-split > .course-primary-button {
    cursor: pointer;
    min-height: 3rem;
    min-width: 0;
    padding: 0.7rem 0.5rem;
}

.course-lesson-actions > button i,
.course-theory-split > .course-primary-button i {
    font-size: 1.125rem;
}

.course-lesson-notes {
    position: relative;
}

.course-lesson-notes-indicator {
    background: #22c55e;
    border: 2px solid #ffffff;
    border-radius: 50%;
    height: 0.75rem;
    position: absolute;
    right: 0.25rem;
    top: 0.25rem;
    width: 0.75rem;
}

.course-lesson-actions .course-lesson-assessment {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #64748b;
}

.course-lesson-actions .course-lesson-assessment--passed {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #059669;
}

.course-lesson-actions .course-lesson-assessment--review {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

.course-lesson-actions > button:focus-visible,
.course-theory-split > .course-primary-button:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
}

.course-lesson-actions > button:disabled,
.course-theory-split > button:disabled {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    transform: none;
}

.course-theory-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.5rem;
    min-width: 0;
}

.course-theory-split > .course-lesson-theory {
    border-radius: 0.7rem 0 0 0.7rem;
    border-right: 0;
    gap: 0.35rem;
    white-space: nowrap;
}

.course-theory-split > .course-lesson-theory-download {
    border-radius: 0 0.7rem 0.7rem 0;
    border-left: 1px solid rgb(255 255 255 / 30%);
    text-decoration: none;
}

.course-theory-split > .course-lesson-theory-download:disabled {
    border-left-color: #dce5ef;
}

.course-theory-split > .course-primary-button:hover {
    transform: none;
}

.course-theory-split > .course-primary-button:focus-visible {
    outline-offset: -3px;
}

@container course-syllabus (max-width: 48rem) {
    .course-lesson-row {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .course-lesson-actions {
        grid-column: 2;
        grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 0.8fr);
    }
}

@container course-syllabus (max-width: 28rem) {
    .course-lesson-row {
        gap: 0.75rem;
        grid-template-columns: 2rem minmax(0, 1fr);
        padding: 0.875rem 0.75rem;
    }

    .course-lesson-actions {
        gap: 0.5rem;
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 0.8fr);
    }
}

.course-primary-button,
.course-secondary-button {
    align-items: center;
    border-radius: 0.7rem;
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 750;
    gap: 0.55rem;
    justify-content: center;
    min-height: 2.85rem;
    padding: 0.7rem 1rem;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.course-primary-button {
    background: #0866f5;
    color: #ffffff;
}

.course-primary-button:hover {
    background: #0758d5;
    transform: translateY(-1px);
}

.course-secondary-button {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
}

.course-secondary-button:hover {
    border-color: #93c5fd;
    color: #1d4ed8;
}

.course-presentation {
    container: course-presentation / inline-size;
    display: grid;
    gap: 0.875rem;
}

.course-presentation-hero,
.course-presentation-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.035);
}

.course-presentation-hero {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.15)), var(--course-presentation-background);
    background-position: center, right center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1.4rem;
    overflow: hidden;
    padding: 0.5rem;
}

.course-presentation-hero-inner {
    padding: 1.25rem;
}

.course-presentation-copy {
    min-width: 0;
}

.course-presentation-badge {
    background: #ffffff;
    border: 1px solid #ffd7dd;
    border-radius: 999px;
    box-shadow: 0 2px 3px rgba(15, 23, 42, 0.06);
    color: #ef172a;
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 750;
    padding: 0.25rem 0.875rem;
}

.course-presentation-copy h2 {
    color: #020617;
    font-size: clamp(1.75rem, 4.25cqi, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.12;
    margin: 1rem 0 0;
}

.course-presentation-copy h2 span {
    display: block;
    font-size: 0.72em;
    letter-spacing: -0.035em;
    line-height: 1.3;
    margin-top: 0.25rem;
}

.course-presentation-description {
    color: #526789;
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0.75rem 0 1.125rem;
}

.course-presentation-progress-label {
    align-items: baseline;
    color: #526789;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.75rem;
    gap: 0.25rem 1rem;
    justify-content: space-between;
}

.course-presentation-progress-label strong {
    color: #0f172a;
    font-weight: 750;
}

.course-presentation-progress {
    background: #d9e5f7;
    border-radius: 999px;
    height: 0.625rem;
    margin-top: 0.5rem;
    overflow: hidden;
}

.course-presentation-progress > span {
    background: #0866ff;
    border-radius: inherit;
    display: block;
    height: 100%;
}

.course-presentation-actions {
    display: grid;
    gap: 0.625rem;
    margin-top: 1rem;
}

.course-presentation-overview {
    --presentation-columns: 1;
    --presentation-gap: 12px;
    align-items: start;
    display: grid;
    gap: var(--presentation-gap);
    grid-template-columns: minmax(0, 1fr);
}

.course-presentation-overview.is-masonry {
    grid-auto-rows: 1px;
    row-gap: 0;
}

.course-presentation-card {
    border-radius: 1rem;
    min-width: 0;
    padding: 0.875rem;
    --presentation-accent: #0866ff;
    --presentation-tint: #eaf3ff;
}

.course-presentation-card--requirements {
    --presentation-accent: #059669;
    --presentation-tint: #e3f8ef;
}

.course-presentation-card--contents {
    --presentation-accent: #8b36ff;
    --presentation-tint: #f1e9ff;
}

.course-presentation-card--audience {
    --presentation-accent: #f5a000;
    --presentation-tint: #fff6df;
}

.course-presentation-card-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.625rem;
    margin-bottom: 0.5rem;
}

.course-presentation-card-icon {
    align-items: center;
    background: var(--presentation-tint);
    border-radius: 50%;
    color: var(--presentation-accent);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.125rem;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.course-presentation-card-heading h3 {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -0.025em;
    margin: 0;
}

.course-presentation-checklist {
    color: #526789;
    display: grid;
    font-size: 0.8125rem;
    gap: 0.5rem;
    line-height: 1.45;
    list-style: none;
    margin: 0;
    padding: 0.125rem 0.5rem;
}

.course-presentation-checklist li {
    align-items: start;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1.125rem minmax(0, 1fr);
}

.course-presentation-checklist i {
    color: var(--presentation-accent);
    font-size: 1rem;
    margin-top: 0.125rem;
}

.course-presentation-card--audience .course-presentation-checklist {
    font-size: 0.75rem;
    gap: 0.375rem;
}

.course-presentation-counts {
    background: #eff5ff;
    border-radius: 999px;
    color: #2563eb;
    font-size: 0.625rem;
    margin-left: auto;
    padding: 0.375rem 0.625rem;
}

.course-presentation-modules {
    border: 1px solid #e4ecf7;
    border-radius: 0.75rem;
    overflow: hidden;
}

.course-presentation-module + .course-presentation-module {
    border-top: 1px solid #e4ecf7;
}

.course-presentation-module summary {
    align-items: center;
    display: grid;
    font-size: 0.75rem;
    gap: 0.625rem;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto 0.75rem;
    list-style: none;
    padding: 0.5rem 0.75rem;
}

.course-presentation-module summary::-webkit-details-marker {
    display: none;
}

.course-presentation-module summary:hover {
    background: #f8faff;
}

.course-presentation-module-number {
    align-items: center;
    background: #eaf3ff;
    border-radius: 50%;
    color: #0866ff;
    display: inline-flex;
    font-weight: 700;
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

.course-presentation-module-title {
    color: #17233e;
    font-weight: 500;
}

.course-presentation-module-count,
.course-presentation-module summary > i {
    color: #637ca3;
    font-size: 0.625rem;
}

.course-presentation-module[open] summary > i {
    transform: rotate(180deg);
}

.course-presentation-module-details {
    color: #526789;
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 0 0.875rem 0.875rem 3.125rem;
}

.course-presentation-module-details p {
    margin: 0 0 0.5rem;
}

.course-presentation-module-details button {
    color: #2563eb;
    font-weight: 650;
}

@container course-presentation (min-width: 25rem) {
    .course-presentation-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container course-presentation (min-width: 40rem) {
    .course-presentation-hero-inner {
        padding: 1.75rem;
    }

    .course-presentation-description,
    .course-presentation-progress-label,
    .course-presentation-progress,
    .course-presentation-actions {
        max-width: 66%;
    }

    .course-presentation-overview {
        --presentation-columns: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-presentation-card--learning {
        grid-column: 1;
    }

    .course-presentation-card--contents {
        grid-column: 2;
    }
}

.course-classroom {
    container: course-classroom / inline-size;
}

.course-classroom-grid,
.course-classroom-resources {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr);
}

.course-classroom-main {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.course-classroom-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.035);
    min-width: 0;
    padding: 1.125rem;
}

.course-classroom h2,
.course-classroom h3,
.course-classroom h4 {
    color: #0f172a;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.35;
    margin: 0;
}

.course-classroom h2,
.course-classroom .course-classroom-chat h3 {
    font-size: 1.25rem;
}

.course-classroom h3 {
    font-size: 1.0625rem;
}

.course-classroom h4 {
    font-size: 0.9375rem;
}

.course-classroom p {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 0;
}

.course-classroom-session-heading,
.course-classroom-card-heading {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.course-classroom-session-heading {
    align-items: start;
}

.course-classroom-session-heading p {
    margin-top: 0.3rem;
}

.course-classroom-session-icon {
    align-items: center;
    background: #eff6ff;
    border-radius: 0.75rem;
    color: #0866f5;
    display: inline-flex;
    flex-shrink: 0;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.course-classroom-session-meta {
    align-items: center;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    gap: 0.75rem 1.25rem;
    margin: 0.875rem 0;
}

.course-classroom-session-meta > span {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
}

.course-classroom-live {
    background: #fff1f2;
    border-radius: 999px;
    color: #e11d48;
    font-weight: 650;
    padding: 0.3rem 0.65rem;
}

.course-classroom-live > span,
.course-classroom-chat-heading p > span {
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    height: 0.625rem;
    width: 0.625rem;
}

.course-classroom-player {
    aspect-ratio: 21 / 9;
    background: #1e293b;
    border-radius: 0.65rem;
    color: #ffffff;
    overflow: hidden;
    position: relative;
}

.course-classroom-player > img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.course-classroom-player-play {
    align-items: center;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(3px);
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    font-size: 1.75rem;
    height: 5rem;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 46%;
    transform: translate(-50%, -50%);
    width: 5rem;
}

.course-classroom-player-play i {
    margin-left: 0.25rem;
}

.course-classroom-player-controls {
    background: linear-gradient(transparent, rgba(15, 23, 42, 0.9));
    bottom: 0;
    left: 0;
    padding: 1.5rem 1rem 0.625rem;
    position: absolute;
    right: 0;
}

.course-classroom-player-track {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    height: 3px;
    margin-bottom: 0.5rem;
}

.course-classroom-player-track > span {
    background: #ffffff;
    display: block;
    height: 100%;
    width: 2.5%;
}

.course-classroom-player-toolbar,
.course-classroom-player-options {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.course-classroom-player-options {
    margin-left: auto;
}

.course-classroom-player-toolbar button,
.course-classroom-message-input button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    width: 2rem;
}

.course-classroom-player-time {
    font-size: 0.8125rem;
    white-space: nowrap;
}

.course-classroom-card-heading > i {
    color: #64748b;
    font-size: 1.25rem;
}

.course-classroom-description > p {
    margin-top: 0.875rem;
}

.course-classroom-objectives-heading {
    margin: 1rem 0 0.5rem;
}

.course-classroom-objectives-heading > i {
    color: #0866f5;
}

.course-classroom-objectives,
.course-classroom-files,
.course-classroom-messages {
    list-style: none;
    margin: 0;
    padding: 0;
}

.course-classroom-objectives li {
    align-items: start;
    color: #64748b;
    display: flex;
    font-size: 0.8125rem;
    gap: 0.75rem;
    line-height: 1.5;
    margin-top: 0.4rem;
}

.course-classroom-objectives li > span:first-child {
    background: #dbeafe;
    border-radius: 50%;
    color: #0866f5;
    flex-shrink: 0;
    font-weight: 700;
    height: 1.5rem;
    text-align: center;
    width: 1.5rem;
}

.course-classroom-materials-heading {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.course-classroom-download-all {
    align-items: center;
    background: none;
    border: 0;
    color: #0866f5;
    display: inline-flex;
    font-size: 0.75rem;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0;
}

.course-classroom-files {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.course-classroom-files li {
    align-items: start;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    padding: 0.65rem;
}

.course-classroom-file-icon {
    color: #0866f5;
    font-size: 1.875rem;
    line-height: 1;
}

.course-classroom-file-icon--pdf {
    color: #ef4444;
}

.course-classroom-file-icon--image {
    color: #22c55e;
}

.course-classroom-file-copy {
    min-width: 0;
    overflow-wrap: anywhere;
}

.course-classroom-file-copy strong {
    color: #0f172a;
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
}

.course-classroom-file-copy p {
    font-size: 0.6875rem;
    margin-top: 0.25rem;
}

.course-classroom-file-download {
    font-size: 0.6875rem;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.4rem 0.6rem;
}

.course-classroom-chat-slot {
    align-self: start;
    height: 100vh;
    height: 100dvh;
    min-width: 0;
}

.course-classroom-chat {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    overflow: hidden;
}

.course-classroom-chat-slot[data-chat-pinned] .course-classroom-chat {
    height: 100vh;
    height: 100dvh;
    left: var(--course-classroom-chat-left);
    position: fixed;
    top: 0;
    width: var(--course-classroom-chat-width);
    z-index: 10;
}

.course-classroom-chat-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.course-classroom-chat-heading,
.course-classroom-chat-body > *,
.course-classroom-composer {
    flex-shrink: 0;
}

.course-classroom-chat-body:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: -2px;
}

.course-classroom-chat-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.course-classroom-chat-heading p {
    align-items: center;
    display: flex;
    font-size: 0.8125rem;
    gap: 0.625rem;
    margin-top: 0.375rem;
}

.course-classroom-chat-heading p > span {
    color: #14b8a6;
}

.course-classroom-announcement {
    background: #eff6ff;
    border-radius: 0.75rem;
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem;
}

.course-classroom-announcement > i {
    color: #0866f5;
    font-size: 1.25rem;
    margin-top: 0.125rem;
}

.course-classroom-announcement-heading,
.course-classroom-message-heading {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    gap: 0.3rem 0.625rem;
    margin-bottom: 0.375rem;
}

.course-classroom-announcement-heading {
    color: #0866f5;
    justify-content: space-between;
}

.course-classroom time {
    color: #94a3b8;
    font-size: 0.6875rem;
    white-space: nowrap;
}

.course-classroom-messages {
    display: grid;
    gap: 1.125rem;
}

.course-classroom-message {
    align-items: start;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 2.25rem minmax(0, 1fr);
}

.course-classroom-avatar {
    align-items: center;
    background: #a78bfa;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    font-size: 0.8125rem;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.course-classroom-avatar--slate {
    background: #94a3b8;
}

.course-classroom-avatar--blue {
    background: #60a5fa;
}

.course-classroom-avatar--teacher {
    background: #e0e7ff;
    color: #4f46e5;
    font-weight: 700;
}

.course-classroom-message-copy {
    min-width: 0;
}

.course-classroom-message-heading strong {
    color: #0f172a;
    font-weight: 700;
}

.course-classroom-message-copy > p {
    background: #f1f5f9;
    border-radius: 0.75rem;
    padding: 0.6rem 0.75rem;
}

.course-classroom-message--teacher .course-classroom-message-heading strong {
    color: #0866f5;
}

.course-classroom-message--teacher .course-classroom-message-copy > p {
    background: #eff6ff;
}

.course-classroom-composer {
    align-items: center;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.course-classroom-composer > button {
    min-height: 2.5rem;
    padding: 0.5rem;
}

.course-classroom-message-input {
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    color: #64748b;
    display: flex;
    min-width: 0;
    padding: 0.25rem 0.5rem;
}

.course-classroom-message-input input {
    background: transparent;
    border: 0;
    color: #64748b;
    font-size: 0.6875rem;
    min-width: 0;
    width: 100%;
}

.course-classroom button:focus-visible,
.course-classroom input:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
}

@container course-classroom (min-width: 42rem) {
    .course-classroom-resources {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container course-classroom (min-width: 64rem) {
    .course-classroom-grid {
        grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
    }

}

@container course-classroom (max-width: 28rem) {
    .course-classroom-card {
        padding: 0.875rem;
    }

    .course-classroom-player {
        aspect-ratio: 16 / 10;
    }

    .course-classroom-player-play {
        font-size: 1.25rem;
        height: 3.5rem;
        width: 3.5rem;
    }

    .course-classroom-player-toolbar,
    .course-classroom-player-options {
        gap: 0.125rem;
    }

    .course-classroom-player-toolbar button {
        height: 1.75rem;
        width: 1.5rem;
    }

    .course-classroom-player-time {
        font-size: 0.6875rem;
    }

    .course-classroom-player-controls {
        padding-inline: 0.5rem;
    }

    .course-classroom-file-download span {
        display: none;
    }
}

.course-theory-dialog {
    width: min(80rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100dvh - 3rem);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dce5f2;
    border-radius: 0.875rem;
    background: #fff;
    color: #0b1745;
    box-shadow: 0 24px 80px rgb(15 23 42 / 30%);
}

.course-theory-dialog[open] {
    display: flex;
    flex-direction: column;
}

.course-theory-dialog::backdrop {
    background: rgb(15 23 42 / 58%);
    backdrop-filter: blur(5px);
}

.course-theory-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e7edf6;
}

.course-theory-icon {
    color: #1670ff;
    font-size: 1.5rem;
}

.course-theory-heading {
    min-width: 0;
    flex: 1;
}

.course-theory-heading h2 {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
}

.course-theory-heading p {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.9375rem;
}

.course-theory-close {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    place-items: center;
    border: 1px solid #dce5f2;
    border-radius: 0.625rem;
    background: #fff;
    font-size: 1.25rem;
    cursor: pointer;
}

.course-theory-close:hover {
    background: #f1f5fb;
}

.course-theory-close:focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 2px;
}

.course-theory-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.75rem 1.25rem 1.25rem;
}

.course-theory-body > .course-theory {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.course-theory-body .course-theory :is(p, blockquote) {
    max-width: none;
}

.course-theory-resources:not(:empty) {
    margin-top: 1rem;
}

@media print {
    .course-theory-dialog[open] { position: static; width: 100%; max-height: none; overflow: visible; box-shadow: none; }
    .course-theory-dialog[open] .course-theory-body { overflow: visible; }
    .course-theory-dialog[open] .course-theory-close,
    .course-theory-dialog[open] .course-theory-resources { display: none; }
}

@media (max-width: 640px) {
    .course-theory-dialog {
        width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .course-theory-header {
        gap: 0.625rem;
        padding: 0.875rem;
    }

    .course-theory-heading h2 {
        font-size: 1.0625rem;
    }

    .course-theory-body {
        padding: 0.625rem;
    }

}

[data-course-module-toggle][aria-expanded="true"] [data-course-module-chevron] {
    transform: rotate(180deg);
}

[data-course-tab-panel][hidden],
[data-course-module-panel][hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .app-shell,
    .app-sidebar-toggle,
    .course-icon-button,
    .course-primary-button,
    .course-secondary-button,
    .course-progress-summary,
    .course-progress-chevron,
    .course-progress-panel,
    .course-tab-trigger,
    [data-course-module-chevron] {
        transition: none;
    }
}