.app{background:var(--page);min-height:100svh;transition:background-color .16s,color .16s}.site-header{z-index:20;border-bottom:1px solid var(--border);background:var(--header);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:space-between;align-items:center;gap:24px;height:64px;padding:0 28px;display:flex;position:sticky;top:0}.site-brand{color:var(--text);letter-spacing:-.035em;font-size:17px;font-weight:650;text-decoration:none}.site-header__actions{align-items:center;gap:12px;display:flex}.site-header__meta{color:var(--muted);font-size:12px}.theme-toggle{border:1px solid var(--border);min-width:74px;height:32px;color:var(--text);background:var(--surface);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:7px;padding:0 10px;transition:border-color .14s,background-color .14s;display:inline-flex}.theme-toggle:hover{border-color:var(--control-border);background:var(--nav-hover)}.theme-toggle svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.45px;width:14px;height:14px}.theme-toggle span{font-size:11px;font-weight:560}.app-layout{grid-template-columns:256px minmax(0,1fr);min-height:calc(100svh - 64px);display:grid}.course-nav{border-right:1px solid var(--border);background:var(--sidebar);height:calc(100svh - 64px);padding:30px 18px;position:sticky;top:64px;overflow-y:auto}.course-nav__heading{gap:5px;padding:0 10px 22px;display:grid}.course-nav__heading strong{color:var(--text);font-size:13px;font-weight:620}.course-nav__heading span{color:var(--quiet);font-size:11px}.course-nav nav{gap:2px;display:grid}.course-link{min-height:40px;color:var(--nav-text);border-radius:8px;grid-template-columns:28px minmax(0,1fr) 14px;align-items:center;gap:7px;padding:0 10px;text-decoration:none;transition:color .14s,background .14s;display:grid}.course-link:hover{color:var(--text);background:var(--nav-hover)}.course-link--active{color:var(--text);background:var(--nav-active)}.course-link__number{color:var(--nav-number);font-variant-numeric:tabular-nums;font-size:10px}.course-link__title{text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:520;overflow:hidden}.course-link__status{color:var(--nav-status);text-align:center;font-size:7px}.course-link--active .course-link__status{color:var(--text)}.mobile-course-nav{display:none}.content{min-width:0}.lesson{width:min(100%,820px);margin:0 auto;padding:72px 40px 100px}.lesson-header{padding-bottom:56px}.lesson-header>p{color:var(--quiet);margin:0 0 18px;font-size:12px}.lesson-header h1{color:var(--text);letter-spacing:-.055em;text-wrap:balance;margin:0;font-size:clamp(36px,4vw,50px);font-weight:610;line-height:1.08}.lesson-header>div{max-width:660px;color:var(--muted);margin-top:22px;font-size:17px;line-height:1.75}.lesson-section{border-top:1px solid var(--border);min-width:0;padding:44px 0}.lesson-section h2,.next-lesson h2{color:var(--text);letter-spacing:-.035em;margin:0 0 18px;font-size:23px;font-weight:610}.lesson-section h3{color:var(--text);margin:0;font-size:15px;font-weight:620}.section-label{color:var(--quiet);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;font-size:10px;display:block}.lesson-section>p,.lesson-section li,.planned-lesson>p,.next-lesson p{color:var(--body-text);font-size:15px;line-height:1.8}.lesson-section>p{margin:0}.lesson-section>p+ul,.lesson-section>p+.architecture-diagram__viewport{margin-top:24px}.lesson-section ul{margin-bottom:0;padding-left:22px}.lesson-section li+li{margin-top:8px}.outcome-list{margin:0;list-style:none;padding:0!important}.outcome-list li{padding-left:24px;position:relative}.outcome-list li:before{content:"✓";color:var(--text);font-size:12px;font-weight:700;position:absolute;left:0}.concept-list{border-top:1px solid var(--border)}.concept-list>div{border-bottom:1px solid var(--border);grid-template-columns:44px minmax(0,1fr);gap:12px;padding:22px 0;display:grid}.concept-list>div>span{color:var(--quiet);padding-top:2px;font-size:11px}.concept-list p{color:var(--muted);margin:7px 0 0;font-size:14px;line-height:1.65}.foundation-list,.walkthrough-list{border-top:1px solid var(--border);margin-top:30px}.foundation-list>article,.walkthrough-list>article{border-bottom:1px solid var(--border);grid-template-columns:44px minmax(0,1fr);gap:12px;min-width:0;padding:30px 0;display:grid}.foundation-list>article>span,.walkthrough-list>article>span{color:var(--quiet);padding-top:2px;font-size:11px}.foundation-list strong{color:var(--strong-text);margin-top:9px;font-size:14px;font-weight:560;line-height:1.65;display:block}.foundation-list p,.walkthrough-list p{color:var(--muted);margin:10px 0 0;font-size:14px;line-height:1.75}.foundation-list ul{margin:16px 0 0;padding-left:20px}.foundation-list li{color:var(--body-text);font-size:13px;line-height:1.7}.foundation-list .code-example,.walkthrough-list .code-example{margin-top:20px}.walkthrough-section>.architecture-diagram__viewport{margin-top:24px}.walkthrough-conclusion{background:var(--surface);border-radius:10px;padding:18px 20px;color:var(--body-text)!important;margin-top:28px!important;font-size:13px!important}.architecture-diagram__viewport{border:1px solid var(--border);background:var(--surface);border-radius:12px;overflow-x:auto}.architecture-diagram__render{min-width:0;padding:22px 18px 18px}.architecture-diagram__render>div,.architecture-diagram__render svg{display:block;width:100%!important;max-width:none!important;height:auto!important}.architecture-diagram__status{color:var(--quiet);text-align:center;margin:0;padding:38px 20px;font-size:12px}.sequence-list{gap:28px;margin-top:28px;display:grid}.sequence-diagram{min-width:0;margin:0}.sequence-diagram>figcaption{margin-bottom:14px}.sequence-diagram>figcaption strong{color:var(--text);font-size:14px;font-weight:620}.sequence-diagram>figcaption p{color:var(--muted);margin:7px 0 0;font-size:12px;line-height:1.65}.sequence-diagram__viewport{border:1px solid var(--border);background:var(--surface);border-radius:12px;overflow-x:auto}.sequence-diagram__render{min-width:0;padding:22px 18px 18px}.sequence-diagram__render>div,.sequence-diagram__render svg{display:block;width:100%!important;max-width:none!important;height:auto!important}.sequence-diagram__render svg [marker-end*=crosshead]{stroke:var(--danger)!important}.sequence-diagram__render svg marker[id*=crosshead] path{fill:var(--danger)!important;stroke:var(--danger)!important}.sequence-diagram__status{color:var(--quiet);text-align:center;margin:0;padding:48px 20px;font-size:12px}.visual-section>p+.lesson-visual-list{margin-top:28px}.lesson-visual-list{gap:34px;display:grid}.lesson-visual{min-width:0;margin:0}.lesson-visual>figcaption{margin-bottom:14px}.lesson-visual>figcaption>span{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px;font-size:9px;font-weight:650;display:block}.lesson-visual>figcaption strong{color:var(--text);font-size:15px;font-weight:620;display:block}.lesson-visual>figcaption p{color:var(--muted);margin:7px 0 0;font-size:12px;line-height:1.65}.visual-diagram__viewport,.lesson-illustration__canvas{border:1px solid var(--border);background:var(--surface);border-radius:12px}.visual-diagram__viewport{overflow-x:auto}.visual-diagram__render{min-width:0;padding:24px 20px 20px}.visual-diagram__render>div,.visual-diagram__render svg{display:block;width:100%!important;max-width:none!important;height:auto!important}.visual-diagram__render svg .row-rect-odd>path:first-child,.visual-diagram__render svg .row-rect-even>path:first-child{fill:var(--surface)!important}.visual-diagram__status{color:var(--quiet);text-align:center;margin:0;padding:54px 20px;font-size:12px}.lesson-illustration__canvas{padding:10px;overflow:hidden}.lesson-illustration__canvas img{border-radius:8px;width:100%;height:auto;display:block}.arrow-icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;flex:0 0 16px;width:16px;height:16px}.arrow-icon--left{transform:rotate(180deg)}.code-list{gap:28px;min-width:0;margin-top:30px;display:grid}.code-example{min-width:0;max-width:100%;margin:0}.code-example figcaption{color:#cfcfd2;background:#252525;border-radius:10px 10px 0 0;justify-content:space-between;align-items:center;gap:20px;min-height:44px;padding:0 15px;display:flex}.code-example figcaption>div{align-items:center;gap:10px;display:flex}.code-example figcaption strong{color:#f7f7f7;font-size:11px;font-weight:580}.code-example figcaption span{color:#909094;text-transform:uppercase;font-family:SFMono-Regular,Consolas,monospace;font-size:9px}.code-example__body,.code-example__body pre{background:var(--code);border-radius:0 0 10px 10px;max-width:100%;margin:0}.code-example__body{overflow-x:auto}.code-example__body pre{min-width:max-content;color:var(--code-text);padding:20px}.code-example__body code{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:12px;line-height:1.7}.code-example__highlight,.code-example__highlight .shiki{min-width:max-content}.code-example>p{color:var(--quiet);margin:10px 0 0;font-size:12px;line-height:1.6}.decision-list{border-top:1px solid var(--border)}.decision-list article{border-bottom:1px solid var(--border);padding:28px 0}.decision-list dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:18px 0 0;display:grid}.decision-list dl>div{gap:6px;display:grid}.decision-list dt{color:var(--quiet);font-size:10px}.decision-list dd{color:var(--body-text);margin:0;font-size:13px;line-height:1.6}.decision-list article>p{color:var(--muted);margin:16px 0 0;font-size:13px;line-height:1.7}.planned-lesson{border-top:1px solid var(--border);padding:40px 0 64px}.planned-lesson>p{margin:0}.planned-lesson>div{color:var(--muted);background:var(--surface);border-radius:10px;margin-top:28px;padding:18px 20px;font-size:13px;line-height:1.7}.next-lesson{border-top:1px solid var(--text);border-bottom:1px solid var(--border);margin-top:52px;padding:36px 0}.next-lesson>span{color:var(--quiet);margin-bottom:15px;font-size:11px;display:block}.next-lesson h2{margin-bottom:10px}.next-lesson p{margin:0}.lesson-pager{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding-top:34px;display:grid}.lesson-pager__link{min-width:0;color:var(--text);align-items:center;gap:12px;text-decoration:none;display:flex}.lesson-pager__link--next{text-align:right;justify-content:flex-end}.lesson-pager__link span{gap:5px;min-width:0;display:grid}.lesson-pager__link small{color:var(--quiet);font-size:10px}.lesson-pager__link strong{text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:580;overflow:hidden}.lesson-pager__link:hover strong{text-underline-offset:3px;text-decoration:underline}@media (width<=800px){.app-layout{display:block}.course-nav{display:none}.mobile-course-nav{border-bottom:1px solid var(--border);background:var(--sidebar);align-items:center;gap:14px;padding:14px 20px;display:flex}.mobile-course-nav label{color:var(--muted);font-size:11px}.mobile-course-nav select{border:1px solid var(--control-border);min-width:0;color:var(--text);background:var(--control);border-radius:8px;flex:1;padding:8px 30px 8px 10px;font-size:12px}.lesson{padding-top:52px}.architecture-diagram__viewport,.sequence-diagram__viewport,.visual-diagram__viewport{overscroll-behavior-inline:contain;scrollbar-width:none}.architecture-diagram__viewport::-webkit-scrollbar{display:none}.sequence-diagram__viewport::-webkit-scrollbar{display:none}.visual-diagram__viewport::-webkit-scrollbar{display:none}.architecture-diagram__render{min-width:var(--architecture-min-width)}.sequence-diagram__render{min-width:var(--sequence-min-width)}.visual-diagram__render{min-width:var(--visual-min-width)}}@media (width<=600px){.site-header{height:58px;padding:0 16px}.site-header__meta{font-size:10px}.lesson{padding:42px 20px 72px}.lesson-header{padding-bottom:42px}.lesson-header h1{font-size:36px}.lesson-header>div{font-size:15px}.lesson-section{padding:36px 0}.lesson-section h2,.next-lesson h2{font-size:21px}.decision-list dl{grid-template-columns:1fr;gap:14px}.architecture-diagram__viewport{border-right:0;border-radius:10px 0 0 10px;margin-right:-20px;padding-right:20px}.sequence-diagram__viewport,.visual-diagram__viewport{border-right:0;border-radius:10px 0 0 10px;margin-right:-20px}.lesson-illustration__canvas{border-right:0;border-radius:10px 0 0 10px;margin-right:-20px;padding-right:30px}.lesson-pager{gap:16px}.lesson-pager__link strong{font-size:11px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}:root{--page:#fff;--header:#fffffff5;--text:#202123;--body-text:#4f4f53;--strong-text:#404044;--muted:#6e6e73;--quiet:#99999f;--border:#e8e8e8;--surface:#f7f7f8;--sidebar:#fbfbfb;--nav-text:#68686d;--nav-number:#a0a0a5;--nav-status:#b5b5b8;--nav-hover:#f1f1f1;--nav-active:#ededed;--control:#fff;--control-border:#d9d9d9;--danger:#b42318;--accent:#4f46e5;--accent-soft:#eef2ff;--accent-border:#c7d2fe;--focus:#202123;--code:#171717;--code-text:#f5f5f5;color:var(--text);background:var(--page);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}:root[data-theme=dark]{--page:#171717;--header:#171717f5;--text:#ececec;--body-text:#c8c8cc;--strong-text:#dddddf;--muted:#a8a8ad;--quiet:#77777d;--border:#303033;--surface:#212121;--sidebar:#141414;--nav-text:#b4b4b9;--nav-number:#73737a;--nav-status:#626268;--nav-hover:#242424;--nav-active:#2f2f2f;--control:#242424;--control-border:#3b3b40;--danger:#f87171;--accent:#a5b4fc;--accent-soft:#262638;--accent-border:#454561;--focus:#ececec;--code:#0d0d0d;--code-text:#f5f5f5}@media (prefers-color-scheme:dark){:root:not([data-theme]){--page:#171717;--header:#171717f5;--text:#ececec;--body-text:#c8c8cc;--strong-text:#dddddf;--muted:#a8a8ad;--quiet:#77777d;--border:#303033;--surface:#212121;--sidebar:#141414;--nav-text:#b4b4b9;--nav-number:#73737a;--nav-status:#626268;--nav-hover:#242424;--nav-active:#2f2f2f;--control:#242424;--control-border:#3b3b40;--danger:#f87171;--accent:#a5b4fc;--accent-soft:#262638;--accent-border:#454561;--focus:#ececec;--code:#0d0d0d;--code-text:#f5f5f5}}*{box-sizing:border-box}html{background:var(--page)}body{background:var(--page);min-width:320px;min-height:100svh;margin:0}button,select{font:inherit}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}