.compilatio-lesson-layout{--color-bg: var(--color-themed-light-bg);--color-surface: var(--color-themed-light-surface);--color-surface-muted: var(--color-themed-light-toggle-inactive-bg);--color-text: #1c1917;--color-text-muted: #57534e;--color-text-subtle: #78716c;--color-accent: rgb(185, 62, 70);--color-accent-hover: rgb(160, 48, 55);--color-accent-fill: rgb(175, 55, 62);--color-on-accent: #f8f6f2;--color-accent-soft: rgb(175 55 62 / .1);--color-border: #d6d0c8;--color-border-strong: #a8a29e;--color-link: rgb(168, 54, 61);--color-link-hover: rgb(142, 44, 50);--color-toc-muted: #6b6560;--radius-sm: .375rem;--radius-md: .625rem;--radius-lg: .875rem;--radius-xl: 1.125rem;--radius-pill: 999px;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--shadow-sm: 0 1px 2px rgb(28 25 23 / .05), 0 1px 3px rgb(28 25 23 / .04);--shadow-md: 0 8px 24px rgb(28 25 23 / .08);--container-max: 72rem;--header-height: 4rem;--font-mono: ui-monospace, Consolas, "Courier New", monospace}.compilatio-lesson-layout.dark-mode{--color-bg: var(--color-themed-dark-bg);--color-surface: var(--color-themed-dark-surface);--color-surface-muted: var(--color-muted-700);--color-text: #f4f1ec;--color-text-muted: #a8a29e;--color-text-subtle: #78716c;--color-accent: rgb(229, 128, 133);--color-accent-hover: rgb(204, 63, 71);--color-accent-fill: rgb(165, 50, 58);--color-on-accent: #f4f1ec;--color-accent-soft: rgb(229 128 133 / .12);--color-border: hsl(30, 6%, 22%);--color-border-strong: #57534e;--color-link: rgb(220, 132, 137);--color-link-hover: rgb(236, 118, 125);--color-toc-muted: #9a9590;--shadow-md: 0 8px 24px rgb(0 0 0 / .28)}.compilatio-lesson-layout{display:flex;flex-direction:column;min-height:100dvh;background:var(--color-bg);color:var(--color-text)}.compilatio-lesson-layout__main{flex:1;width:100%;max-width:var(--container-max);margin:0 auto;padding:var(--space-4) var(--space-4);padding-bottom:0}@media(max-width:767px){.compilatio-lesson-layout__main{padding:0}}.compilatio-lesson-layout__grid{display:flex;flex-direction:column;gap:var(--space-4)}@media(min-width:768px){.compilatio-lesson-layout__grid{flex-direction:row;align-items:flex-start}}.compilatio-lesson-layout__content{flex:1;min-width:0;padding-bottom:var(--space-4)}@media(max-width:767px){.compilatio-lesson-layout__content{padding-bottom:0}}.compilatio-lesson-sidebar{display:none;width:100%;flex-shrink:0;contain:layout style}@media(min-width:768px){.compilatio-lesson-sidebar{display:block;position:sticky;top:var(--space-4);align-self:flex-start;width:18rem;height:calc(100dvh - var(--space-8))}}.compilatio-lesson-sidebar__panel{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}.compilatio-lesson-sidebar__header{flex-shrink:0;padding:var(--space-5) var(--space-5) var(--space-3)}.compilatio-lesson-toc-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%}.compilatio-lesson-toc-header__title{margin:0;font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-subtle)}.compilatio-lesson-toc-header__toggle-all{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:0;padding:0;border:0;background:transparent;color:var(--color-accent);cursor:pointer;transition:color .15s ease}.compilatio-lesson-toc-header__toggle-icon{width:.875rem;height:.875rem;flex-shrink:0}.compilatio-lesson-toc-header__toggle-all:hover{color:var(--color-accent)}.compilatio-lesson-sidebar__header-rule{height:1px;margin-top:var(--space-3);background:color-mix(in srgb,var(--color-border) 80%,var(--color-surface))}.compilatio-lesson-sidebar__scroll{flex:1;min-height:0;overflow-y:auto;padding:0 var(--space-5) var(--space-5);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--color-border-strong) 45%,var(--color-border)) transparent}.compilatio-lesson-sidebar__scroll::-webkit-scrollbar{width:3px}.compilatio-lesson-sidebar__scroll::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--color-border-strong) 50%,var(--color-border))}.compilatio-lesson-toc-tree{display:flex;flex-direction:column}.compilatio-lesson-toc-tree__lesson:has(.compilatio-lesson-toc-tree__parts){margin-bottom:var(--space-1)}.compilatio-lesson-toc-tree__lesson-header{display:flex;align-items:flex-start;gap:var(--space-1);scroll-margin-top:var(--space-2)}.compilatio-lesson-toc-tree__lesson-link{display:flex;flex:1;gap:.35em;min-width:0;padding:.5rem 0;border-radius:var(--radius-sm);color:var(--color-text);font-size:.875rem;font-weight:600;line-height:1.35;text-decoration:none;transition:color .15s ease}.compilatio-lesson-toc-tree__lesson-link:hover{color:var(--color-text);text-decoration:none}.compilatio-lesson-toc-tree__lesson-link--active{background:var(--color-accent-fill);color:var(--color-on-accent);padding-inline:var(--space-2);margin-inline:calc(-1 * var(--space-2))}.compilatio-lesson-toc-tree__lesson-link--active:hover{color:var(--color-on-accent)}.compilatio-lesson-toc-tree__lesson-toggle{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.4375rem;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-subtle);cursor:pointer;transition:color .15s ease}.compilatio-lesson-toc-tree__lesson-toggle:hover{color:var(--color-text-muted)}.compilatio-lesson-toc-tree__chevron{width:.875rem;height:.875rem;transition:transform .15s ease}.compilatio-lesson-toc-tree__chevron--expanded{transform:rotate(90deg)}.compilatio-lesson-toc-tree__parts{display:flex;flex-direction:column;margin:0;padding:0 0 0 var(--space-4);border-left:1px solid color-mix(in srgb,var(--color-border) 90%,var(--color-surface));list-style:none}.compilatio-lesson-toc-tree__part-link{display:block;padding:.25rem .5rem;border-radius:var(--radius-md);color:var(--color-toc-muted);font-size:.8125rem;font-weight:400;line-height:1.45;text-decoration:none;transition:background-color .15s ease,color .15s ease}.compilatio-lesson-toc-tree__part-link:hover{color:var(--color-text);text-decoration:none}.compilatio-lesson-toc-tree__part-link--active{background:var(--color-accent-fill);color:var(--color-on-accent);font-weight:500}.compilatio-lesson-toc-tree__part-link--active:hover{color:var(--color-on-accent)}.compilatio-lesson-toc-label__code{font-family:var(--font-mono);font-size:.92em;font-weight:inherit}.compilatio-lesson-breadcrumbs{font-size:.875rem;color:var(--color-text-muted)}@media(max-width:767px){.compilatio-lesson-breadcrumbs{font-size:1rem}}.compilatio-lesson-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);margin:0;padding:0;list-style:none}.compilatio-lesson-breadcrumbs__item{display:flex;align-items:center;gap:var(--space-1)}.compilatio-lesson-breadcrumbs__sep{color:var(--color-text-subtle)}.compilatio-lesson-breadcrumbs__link{color:var(--color-link);text-decoration:none}.compilatio-lesson-breadcrumbs__link:hover{color:var(--color-link-hover);text-decoration:underline}.compilatio-lesson-breadcrumbs__current{font-weight:600;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:767px){.compilatio-lesson-breadcrumbs__item:last-child{display:none}}.compilatio-lesson-content-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-3)}.compilatio-lesson-content-toolbar .compilatio-lesson-breadcrumbs{flex:1;min-width:0}.compilatio-lesson-content-toolbar__theme-toggle{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-text-muted);cursor:pointer;transition:color .18s ease}.compilatio-lesson-content-toolbar__theme-toggle:hover{color:var(--color-accent)}.compilatio-lesson-page{width:100%;padding:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface)}@media(max-width:767px){.compilatio-lesson-page{padding:var(--space-6) var(--space-4) var(--space-4);border-radius:0;border-left:0;border-right:0}}@media(min-width:768px){.compilatio-lesson-page{padding:var(--space-5) var(--space-10)}}.compilatio-lesson-page__header{margin-bottom:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid color-mix(in srgb,var(--color-border) 75%,transparent)}@media(max-width:767px){.compilatio-lesson-page__header{border-bottom:none;margin-bottom:0}}.compilatio-lesson-page__title{font-size:clamp(1.625rem,2.2vw,2rem);font-weight:700;line-height:1.2;letter-spacing:-.025em;margin:0}.compilatio-lesson-mobile-trigger{display:none}@media(max-width:767px){.compilatio-lesson-mobile-trigger{display:block}}.compilatio-lesson-mobile-trigger__btn{position:fixed;right:var(--space-4);bottom:calc(env(safe-area-inset-bottom,0px) + var(--space-4));z-index:120;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border:0;border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-md);cursor:pointer}.compilatio-lesson-toc-dialog__backdrop{position:fixed;inset:0;z-index:130;background:#14121294}.compilatio-lesson-toc-dialog__panel{position:fixed;z-index:131;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,24rem);max-height:min(80vh,32rem);border:1px solid color-mix(in srgb,var(--color-border) 75%,transparent);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-md)}.compilatio-lesson-toc-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) var(--space-4) .85rem}.compilatio-lesson-toc-dialog__header .compilatio-lesson-toc-header{flex:1;min-width:0}.compilatio-lesson-toc-dialog__actions{display:flex;align-items:center;gap:var(--space-1)}.compilatio-lesson-toc-dialog__icon-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-muted);cursor:pointer}.compilatio-lesson-toc-dialog__icon-btn:hover{color:var(--color-accent)}.compilatio-lesson-toc-dialog__separator{height:1px;background:var(--color-border)}.compilatio-lesson-toc-dialog__body{padding:var(--space-2) var(--space-3) var(--space-4)}.compilatio-lesson-toc-dialog__scroll{max-height:min(60vh,28rem);overflow-x:hidden;overflow-y:auto;padding-inline:var(--space-2);-webkit-overflow-scrolling:touch;scrollbar-width:none}.compilatio-lesson-toc-dialog__scroll::-webkit-scrollbar{display:none}.compilatio-lesson-toc-dialog__scroll--positioning{visibility:hidden}