/* chat overrides for unauthorized users */

chat
{
border: 1px solid white;
background: black !important;
padding: 2px;
border-radius: 1.7rem !important;
box-shadow: none !important;
}





/* Toggle primitives */
toggles {
    display: none;
}

toggle[left],
toggle[right] {
    display: none;
}

/* Lesson layout shell */
lesson {
    position: relative;
    display: block;
    min-height: calc(100vh - 3rem);
}

/* Lesson content flow */
lesson > content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    transition: opacity 0.14s ease, transform 0.14s ease, filter 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    overflow: visible;
}

section[lesson-window] {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    min-width: 0;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 0 5rem rgb(230, 230, 230);
    padding: 1.5rem 2rem 2rem;
    box-sizing: border-box;
}

page[dark-theme] section[lesson-window],
page[dark-theme] section {
    background: #171c25;
    color: #edf1f7;
    box-shadow: 0 0 3rem rgba(0, 0, 0, 0.28);
}

section[lesson-body] {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    min-width: 0;
    position: relative;
}

section[lesson-body][student-observe-visible]::before {
    content: attr(student-observe-label);
    position: sticky;
    top: 4.4rem;
    z-index: 120;
    display: block;
    align-self: flex-start;
    max-width: min(44rem, calc(100vw - 3rem));
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.95rem;
    border-radius: 0.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: #10233f;
    background: rgba(61, 112, 216, 0.18);
    box-shadow: 0 0.65rem 1.6rem rgba(17, 24, 39, 0.16), 0 0 0 0.16rem rgba(61, 112, 216, 0.28);
    backdrop-filter: blur(0.4rem);
    pointer-events: none;
}

section[lesson-body][student-observe-visible][student-last-highlight-interaction="focus"]::before {
    color: #10342d;
    background: rgba(33, 154, 128, 0.18);
    box-shadow: 0 0.65rem 1.6rem rgba(17, 24, 39, 0.16), 0 0 0 0.16rem rgba(33, 154, 128, 0.3);
}

section[lesson-body][student-observe-visible][student-last-highlight-interaction="click"]::before {
    color: #4b2406;
    background: rgba(210, 110, 36, 0.22);
    box-shadow: 0 0.7rem 1.7rem rgba(17, 24, 39, 0.18), 0 0 0 0.18rem rgba(210, 110, 36, 0.34);
}

section[lesson-source-editor] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    min-height: calc(100vh - 10rem);
    overflow: hidden;
}

section[lesson-source-editor][hidden] {
    display: none !important;
}

header[lesson-source-title] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

page[dark-theme] header[lesson-source-title] {
    color: #edf1f7;
}

page[editor-mode] section[lesson-body] {
    display: none;
}

page[split-mode] lesson > content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.4rem;
    align-items: stretch;
}

page[split-mode] section[lesson-source-editor] {
    order: 1;
}

page[split-mode] section[lesson-body] {
    order: 2;
}

page[split-mode] section[lesson-body],
page[split-mode] section[lesson-source-editor] {
    display: flex;
}

page[editor-mode] lesson > content {
    filter: none;
}

page[split-mode] lesson > content {
    filter: none;
}

page[editor-mode] sidebar[left],
page[editor-mode] sidebar[right] {
    visibility: visible;
    transform: translate(0, -50%);
}

page[split-mode] sidebar[left],
page[split-mode] sidebar[right],
page[split-mode] toggles,
page[split-mode] toggle[left],
page[split-mode] toggle[right] {
    display: none !important;
    visibility: hidden !important;
    transform: translate(0, -50%) !important;
}

@media (max-width: 92rem) {
    page[editor-mode] sidebar[left],
    page[editor-mode] sidebar[right],
    page[editor-mode] toggles,
    page[editor-mode] toggle[left],
    page[editor-mode] toggle[right] {
        display: none !important;
        visibility: hidden !important;
        transform: translate(0, -50%) !important;
    }

    page[editor-mode] sidebar[left],
    page[editor-mode] sidebar[right] {
        display: none !important;
        visibility: hidden !important;
        transform: translate(0, -50%) !important;
    }

    page[split-mode] lesson > content {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Layout-ready width states */
page[layout-ready] > header,
page[layout-ready] lesson > content,
page[layout-ready] > content > lesson {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Layout-ready medium width */
@media (min-width: 34rem) {
    page[layout-ready] > header,
    page[layout-ready] lesson > content,
    page[layout-ready] > content > lesson {
        width: calc(100vw - 9rem);
        max-width: calc(100vw - 9rem);
    }
}

/* Layout-ready wide width */
@media (min-width: 59rem) {
    page[layout-ready] > header,
    page[layout-ready] lesson > content,
    page[layout-ready] > content > lesson {
        width: 50rem;
        max-width: 50rem;
    }
}

/* Content leave state */
lesson > content[leaving] {
    opacity: 0;
    transform: translateY(0.35rem);
}

/* Side edges */
edge[left],
edge[right] {
    display: none;
    pointer-events: none;
}

/* Sidebars */
sidebar[left],
sidebar[right] {
    position: fixed;
    top: 50%;
    bottom: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
    z-index: 9999;
    transition: none;
    padding: 1rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.12);
    height: fit-content;
    max-height: calc(100vh - 6rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: fit-content;
    visibility: hidden;
}

lesson-settings[lesson-settings-panel][hidden] {
    display: none !important;
}

lesson-settings[lesson-settings-panel] {
    position: fixed;
    top: 4.9rem;
    right: 1rem;
    z-index: 12012;
    width: min(24rem, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 0 2rem rgba(0,0,0,0.18);
}

header[lesson-settings-header] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

header[lesson-settings-header] > strong {
    flex: 1;
}

button[lesson-settings-close] {
    border: none;
    border-radius: 0.55rem;
    width: 2.2rem;
    height: 2.2rem;
    background: rgba(0,0,0,0.06);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}

section[lesson-settings-group] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

section[lesson-settings-group] > h4 {
    margin: 0;
    font-size: 0.95rem;
}

label[lesson-settings-option] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
}

label[lesson-settings-option] > span {
    line-height: 1.35;
}

section[lesson-body][student-hovered],
section[lesson-body][student-focused],
section[lesson-body][student-clicked],
section[lesson-body] > section[student-hovered],
section[lesson-body] > section[student-focused],
section[lesson-body] > section[student-clicked] {
    transition: box-shadow 0.16s ease, outline-color 0.16s ease, background-color 0.16s ease;
}

section[lesson-body] > section[student-hovered] {
    outline: 0.22rem solid rgba(61, 112, 216, 0.62);
    background: rgba(61, 112, 216, 0.14);
    box-shadow: 0 0 0 0.14rem rgba(61, 112, 216, 0.22), 0 0 1.2rem rgba(61, 112, 216, 0.18);
}

section[lesson-body] > section[student-focused] {
    outline: 0.22rem solid rgba(33, 154, 128, 0.66);
    background: rgba(33, 154, 128, 0.16);
    box-shadow: 0 0 0 0.14rem rgba(33, 154, 128, 0.22), 0 0 1.2rem rgba(33, 154, 128, 0.18);
}

section[lesson-body] > section[student-clicked] {
    outline: 0.24rem solid rgba(210, 110, 36, 0.7);
    background: rgba(210, 110, 36, 0.18);
    box-shadow: 0 0 0 0.16rem rgba(210, 110, 36, 0.24), 0 0 1.4rem rgba(210, 110, 36, 0.22);
}

entry[toc][student-hovered] {
    background: rgba(61, 112, 216, 0.24);
    box-shadow: inset 0 0 0 0.12rem rgba(61, 112, 216, 0.34);
}

entry[toc][student-focused] {
    background: rgba(33, 154, 128, 0.24);
    box-shadow: inset 0 0 0 0.12rem rgba(33, 154, 128, 0.34);
}

entry[toc][student-clicked] {
    background: rgba(210, 110, 36, 0.3);
    box-shadow: inset 0 0 0 0.14rem rgba(210, 110, 36, 0.42);
}

section[lesson-body] [student-target-hovered] {
    background: rgba(61, 112, 216, 0.28);
    border-radius: 0.35rem;
    box-shadow: 0 0 0 0.14rem rgba(61, 112, 216, 0.44), 0 0 0.8rem rgba(61, 112, 216, 0.22);
}

section[lesson-body] [student-target-focused] {
    background: rgba(33, 154, 128, 0.3);
    border-radius: 0.35rem;
    box-shadow: 0 0 0 0.14rem rgba(33, 154, 128, 0.44), 0 0 0.8rem rgba(33, 154, 128, 0.22);
}

section[lesson-body] [student-target-clicked] {
    background: rgba(210, 110, 36, 0.36);
    border-radius: 0.35rem;
    box-shadow: 0 0 0 0.16rem rgba(210, 110, 36, 0.48), 0 0 0.95rem rgba(210, 110, 36, 0.24);
}

entry[toc][student-target-hovered] {
    box-shadow: inset 0 0 0 0.12rem rgba(61, 112, 216, 0.34);
}

entry[toc][student-target-focused] {
    box-shadow: inset 0 0 0 0.12rem rgba(33, 154, 128, 0.36);
}

entry[toc][student-target-clicked] {
    box-shadow: inset 0 0 0 0.12rem rgba(210, 110, 36, 0.38);
}

page[dark-theme] lesson-settings[lesson-settings-panel] {
    background: #171c25;
    color: #edf1f7;
}

page[dark-theme] button[lesson-settings-close] {
    background: rgba(255,255,255,0.08);
    color: #edf1f7;
}

page[dark-theme] section[lesson-body] > section[student-hovered] {
    outline-color: rgba(116, 161, 249, 0.74);
    background: rgba(116, 161, 249, 0.18);
    box-shadow: 0 0 0 0.14rem rgba(116, 161, 249, 0.24), 0 0 1.2rem rgba(116, 161, 249, 0.18);
}

page[dark-theme] section[lesson-body][student-observe-visible]::before {
    color: #ebf1ff;
    background: rgba(116, 161, 249, 0.26);
    box-shadow: 0 0.7rem 1.7rem rgba(0, 0, 0, 0.28), 0 0 0 0.16rem rgba(116, 161, 249, 0.34);
}

page[dark-theme] section[lesson-body][student-observe-visible][student-last-highlight-interaction="focus"]::before {
    color: #ebfff8;
    background: rgba(83, 199, 174, 0.26);
    box-shadow: 0 0.7rem 1.7rem rgba(0, 0, 0, 0.28), 0 0 0 0.16rem rgba(83, 199, 174, 0.34);
}

page[dark-theme] section[lesson-body][student-observe-visible][student-last-highlight-interaction="click"]::before {
    color: #fff1e6;
    background: rgba(247, 164, 99, 0.3);
    box-shadow: 0 0.75rem 1.8rem rgba(0, 0, 0, 0.3), 0 0 0 0.18rem rgba(247, 164, 99, 0.4);
}

page[dark-theme] section[lesson-body] > section[student-focused] {
    outline-color: rgba(83, 199, 174, 0.76);
    background: rgba(83, 199, 174, 0.19);
    box-shadow: 0 0 0 0.14rem rgba(83, 199, 174, 0.24), 0 0 1.2rem rgba(83, 199, 174, 0.18);
}

page[dark-theme] section[lesson-body] > section[student-clicked] {
    outline-color: rgba(247, 164, 99, 0.82);
    background: rgba(247, 164, 99, 0.22);
    box-shadow: 0 0 0 0.16rem rgba(247, 164, 99, 0.28), 0 0 1.4rem rgba(247, 164, 99, 0.22);
}

page[dark-theme] entry[toc][student-hovered] {
    background: rgba(116, 161, 249, 0.22);
}

page[dark-theme] entry[toc][student-focused] {
    background: rgba(83, 199, 174, 0.22);
}

page[dark-theme] entry[toc][student-clicked] {
    background: rgba(247, 164, 99, 0.22);
}

page[dark-theme] section[lesson-body] [student-target-hovered] {
    background: rgba(116, 161, 249, 0.32);
    box-shadow: 0 0 0 0.14rem rgba(116, 161, 249, 0.52), 0 0 0.9rem rgba(116, 161, 249, 0.22);
}

page[dark-theme] section[lesson-body] [student-target-focused] {
    background: rgba(83, 199, 174, 0.32);
    box-shadow: 0 0 0 0.14rem rgba(83, 199, 174, 0.52), 0 0 0.9rem rgba(83, 199, 174, 0.22);
}

page[dark-theme] section[lesson-body] [student-target-clicked] {
    background: rgba(247, 164, 99, 0.38);
    box-shadow: 0 0 0 0.16rem rgba(247, 164, 99, 0.58), 0 0 1rem rgba(247, 164, 99, 0.24);
}

page[dark-theme] entry[toc][student-target-hovered] {
    box-shadow: inset 0 0 0 0.12rem rgba(116, 161, 249, 0.44);
}

page[dark-theme] entry[toc][student-target-focused] {
    box-shadow: inset 0 0 0 0.12rem rgba(83, 199, 174, 0.46);
}

page[dark-theme] entry[toc][student-target-clicked] {
    box-shadow: inset 0 0 0 0.12rem rgba(247, 164, 99, 0.48);
}

page[dark-theme] sidebar[left],
page[dark-theme] sidebar[right] {
    background: #171c25;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
}

/* Sidebar ready state */
page[side-ready] sidebar[left],
page[side-ready] sidebar[right] {
    transition: transform 0.2s ease;
    visibility: visible;
}

/* Left sidebar */
sidebar[left] {
    left: 0;
    transform: translate(-100%, -50%);
    border-radius: 0 1rem 1rem 0;
}

/* Right sidebar */
sidebar[right] {
    right: 0;
    transform: translate(100%, -50%);
    border-radius: 1rem 0 0 1rem;
}

/* Sidebar headers */
sidebar[left] header,
sidebar[right] language,
sidebar[right] course {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    background-color: #393939;
    color: #fff;
    text-decoration: none;
    width: -webkit-fit-content;
    margin-left: 0.7rem;
    font-size: 1.3rem;
    line-height: 2rem;
}

/* Sidebar spacing tweaks */
sidebar[right] course {
    margin-top: -0.3rem;
}

sidebar[right] language {
    margin-top: 0.8rem;
}

/* Sidebar open states */
page[left-open] sidebar[left] {
    transform: translate(0, -50%);
}

page[right-open] sidebar[right] {
    transform: translate(0, -50%);
}

page[left-open] lesson > content,
page[right-open] lesson > content {
    filter: none;
}

sidebar[left] header,
sidebar[right] header {
    font-weight: 600;
}

list[toc],
list[lessons] {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    padding: 0 0.5rem;
    overflow-y: scroll;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    max-height: 50vh;
}

entry[toc],
entry[link] {
    display: block;
    width: 100%;
    font-size: 1.2rem;
    padding: 0.25rem 0.7rem;
    border-radius: 0.5rem;
    cursor: pointer;
    color: #2a2a2a;
}

page[dark-theme] entry[toc],
page[dark-theme] entry[link] {
    color: #d8deea;
}

entry[link][active] {
    color: #323232;
    background-color: #e0e0e0;
    text-shadow: 0.06rem 0.06rem 0.06rem #fff;
}

page[dark-theme] entry[link][active] {
    color: #f4f7ff;
    background-color: #2a3446;
    text-shadow: none;
}

entry[toc]:hover,
entry[link]:hover {
    background-color: rgba(224, 224, 224, 0.7);
}

page[dark-theme] entry[toc]:hover,
page[dark-theme] entry[link]:hover {
    background-color: rgba(72, 86, 110, 0.6);
}

page > content > lesson {
    display: flex;
    width: 100%;
    margin: 0 auto;
    padding-top: 0;
    min-width: 0;
    max-width: 62rem;
    overflow: visible;
}

section {
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    /* box-shadow: 0 0 5rem rgb(230, 230, 230); */
    padding: 1.5rem 2rem 2rem;
    overflow: visible;
}

section > header ~ * {
    margin-left: 1rem;
}

anchored-block {
    display: block;
    position: relative;
    overflow: visible;
}

anchored-block > mini-main {
    display: block;
    min-width: 0;
}

mini-sidebar[left],
mini-sidebar[right] {
    display: grid;
    grid-template-columns: repeat(1, 3.8rem);
    grid-auto-columns: 3.4rem;
    gap: 0.75rem;
    position: absolute;
    top: 0;
    width: 7.55rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s cubic-bezier(0.2, 0, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
    z-index: 6;
}

mini-sidebar[left] {
    direction: rtl;
    justify-items: start;
    transform: translateX(-4.3rem);
}

mini-sidebar[right] {
    left: calc(100% + 1.6rem);
    justify-items: start;
    transform: translateX(9rem);
}

mini-sidebar[left] mini-anchor,
mini-sidebar[left] mini-popover {
    direction: ltr;
}

mini-anchor {
position: relative;
display: flex;
flex: 0 0 3.4rem;
width: 3rem;
height: 3rem;
min-width: 3rem;
min-height: 3rem;
aspect-ratio: 1 / 1;
overflow: visible;
transform: translateX(-7.5rem);
}

mini-trigger {
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 18, 18, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.18);
    color: #f4f4f4;
    opacity: 0;
    transform: translateY(0.45rem);
    transition: opacity 0.6s ease, transform 0.6s ease, background-color 0.2s ease, border-color 0.2s ease;
    transition-delay: calc(var(--order, 0) * 0.05s);
    cursor: pointer;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
}

mini-trigger:hover {
    background: rgba(28, 28, 28, 0.96);
    border-color: rgba(255, 255, 255, 0.16);
}

mini-popover {
    position: absolute;
    top: 0;
    min-width: 15rem;
    max-width: 22rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    background: rgba(18, 18, 18, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.24);
    color: #f4f4f4;
    z-index: 10;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.2, 0, 0.2, 1), visibility 0.24s ease;
}

aside[left],
aside[right] {
    display: none;
}

mini-popover[left] {
    left: 1rem;
    transform: translateX(-0.8rem);
}

mini-popover[right] {
    right: calc(100% + 16rem);
    transform: translateX(0.8rem);
}

mini-popover-body {
    display: block;
    font-size: 1.05rem;
}

mini-anchor[open] mini-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    height: -webkit-fit-content;
}

anchored-block[active] mini-sidebar[left],
anchored-block[active] mini-sidebar[right] {
    opacity: 1;
    pointer-events: auto;
}

anchored-block[active] mini-trigger {
    opacity: 1;
    transform: translateY(0);
}

lesson > content[reveal] > section {
    opacity: 0;
    transform: translateY(0.6rem);
    animation: lesson-section-in 0.2s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 0.02s);
}

@keyframes lesson-section-in {
    from {
        opacity: 0;
        transform: translateY(0.6rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    anchored-block {
        padding-top: 4.6rem;
    }

    mini-sidebar[left],
    mini-sidebar[right] {
        position: absolute;
        top: 0;
        left: 0;
        right: auto;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    mini-sidebar[right] {
        left: 8.2rem;
    }

    mini-trigger {
        opacity: 1;
        transform: none;
    }

    mini-popover[left],
    mini-popover[right] {
        left: 0;
        right: auto;
        top: calc(100% + 0.6rem);
        min-width: min(18rem, calc(100vw - 4rem));
    }

    toggles {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 120;
        pointer-events: none;
    }

    toggle[left],
    toggle[right] {
        display: flex;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        user-select: none;
        pointer-events: auto;
        padding: 0.4rem;
        color: black;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    toggle[left] {
        left: 0;
        /* background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI5MCIgaGVpZ2h0PSIyMDIiICB4bWw6c3BhY2U9InByZXNlcnZlIiBpZD0ibCI+CiAgICA8cGF0aCBpZD0ibC1iZyIgc3Ryb2tlPSJub25lIiBmaWxsPSJyZ2IoMCwgMCwgMCkiIGQ9Ik0gNDUsMTU3IEMgNzAsMTU3IDkwLDEzNiA5MCwxMTIgTCA5MCw5MCBDIDkwLDY1IDcwLDQ1IDQ1LDQ1IE0gNDUsMTU3IEMgMjEsMTU3IDAsMTc3IDAsMjAyIEwgMCw5NiAwLC0wIEMgMCwyNCAyMSw0NSA0NSw0NSIgLz4KICAgIDxwYXRoIGlkPSJsLWxpbmUxIiBzdHJva2U9InJnYigyNTUsIDI1NSwgMjU1KSIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSIgZD0iTSAyOSw4OSBMIDY4LDg5IiAvPgogICAgPHBhdGggaWQ9ImwtbGluZTIiIHN0cm9rZT0icmdiKDI1NSwgMjU1LCAyNTUpIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIiBkPSJNIDI5LDEwMSBMIDY4LDEwMSIgLz4KICAgIDxwYXRoIGlkPSJsLWxpbmUzIiBzdHJva2U9InJnYigyNTUsIDI1NSwgMjU1KSIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSIgZD0iTSAyOSwxMTMgTCA2OCwxMTMiIC8+Cjwvc3ZnPgo="); */
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MyIgaGVpZ2h0PSIxMzEiIHZpZXdCb3g9IjAgMCA0MyAxMzEiPjxwYXRoIGQ9Ik0yMCAxMTJjMTcuNSAwIDIzLTMgMjMtMjdWNDhjMC0yNS01LjUtMjgtMjMtMjhDMy4yIDIwIDAgMTIgMC0xMnYxNTZjMC0yNSAzLjItMzIgMjAtMzIiLz48Y2lyY2xlIGN4PSIyMS41IiBjeT0iNDQuNSIgcj0iNi41IiBmaWxsPSIjZmZmIi8+PGNpcmNsZSBjeD0iMjEuNSIgY3k9IjY2LjUiIHI9IjYuNSIgZmlsbD0iI2ZmZiIvPjxjaXJjbGUgY3g9IjIxLjUiIGN5PSI4OC41IiByPSI2LjUiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");
        width: 2rem;
        height: 6rem;
        background-size: cover;
    }

    toggle[right] {
right: 0;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MyIgaGVpZ2h0PSIxMzEiIHZpZXdCb3g9IjAgMCA0MyAxMzEiPjxwYXRoIGQ9Ik0yMCAxMTJjMTcuNSAwIDIzLTMgMjMtMjdWNDhjMC0yNS01LjUtMjgtMjMtMjhDMy4yIDIwIDAgMTIgMC0xMnYxNTZjMC0yNSAzLjItMzIgMjAtMzIiLz48Y2lyY2xlIGN4PSIyMS41IiBjeT0iNDQuNSIgcj0iNi41IiBmaWxsPSIjZmZmIi8+PGNpcmNsZSBjeD0iMjEuNSIgY3k9IjY2LjUiIHI9IjYuNSIgZmlsbD0iI2ZmZiIvPjxjaXJjbGUgY3g9IjIxLjUiIGN5PSI4OC41IiByPSI2LjUiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");
width: 2rem;
height: 6rem;
background-size: cover;
transform: scaleX(-1) translateY(-50%);
    }

    page[toggles-hidden] toggle[left] {
        transform: translate(-120%, -50%);
        opacity: 0;
        pointer-events: none;
    }

    page[toggles-hidden] toggle[right] {
        transform: translate(120%, -50%);
        opacity: 0;
        pointer-events: none;
    }

    page[data-toggle-mode="pinned"] toggles {
        display: block;
    }

    page[data-toggle-mode="pinned"] toggle[left],
    page[data-toggle-mode="pinned"] toggle[right] {
        display: flex;
        opacity: 1;
        pointer-events: auto;
    }

    page[data-toggle-mode="pinned"][toggles-hidden] toggle[left] {
        transform: translateY(-50%);
        opacity: 1;
        pointer-events: auto;
    }

    page[data-toggle-mode="pinned"][toggles-hidden] toggle[right] {
        transform: scaleX(-1) translateY(-50%);
        opacity: 1;
        pointer-events: auto;
    }

    sidebar[left],
    sidebar[right] {
        width: min(84vw, 20rem);
    }
}

[mobile] lesson {
    padding: 0;
}

[mobile] lesson > content {
    gap: 1rem;
}