.lesson-top{z-index:20;background:var(--paper);border-bottom:2px solid var(--ink);align-items:center;gap:20px;height:64px;padding:0 24px;display:flex;position:sticky;top:0}.lesson-top-sep{background:var(--line);width:1px;height:28px}.lesson-top-crumb{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:8px;min-width:0;font-size:13px;display:flex;overflow:hidden}.lesson-progress{color:var(--ink-3);white-space:nowrap;align-items:center;gap:12px;font-size:12px;display:flex}.lesson-bar{border:2px solid var(--ink);background:var(--white);border-radius:999px;width:160px;height:10px;display:block;overflow:hidden}.lesson-bar>span{background:var(--accent);height:100%;transition:width .2s;display:block}.lesson-avatar{border:2px solid var(--ink);background:var(--white);width:36px;height:36px;color:var(--ink);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:700;text-decoration:none;display:inline-flex}.lesson-nav-toggle{display:none}.lesson-grid{grid-template-columns:320px minmax(0,1fr);align-items:start;display:grid}.lesson-grid[data-side=rail]{grid-template-columns:64px minmax(0,1fr)}.lesson-grid[data-settled=true]{transition:grid-template-columns .22s}.lesson-side{border-right:2px solid var(--ink);background:var(--white);height:calc(100vh - 64px);position:sticky;top:64px;overflow:hidden auto}.lesson-side-full{min-width:318px}.lesson-rail{display:none}.lesson-grid[data-side=rail] .lesson-side{z-index:12;overflow:visible}.lesson-grid[data-side=rail] .lesson-side-full{display:none}.lesson-grid[data-side=rail] .lesson-rail{flex-direction:column;align-items:center;gap:10px;height:100%;padding:14px 0 16px;display:flex}.rail-toggle{border:2px solid var(--ink);background:var(--white);width:36px;height:36px;color:var(--ink);cursor:pointer;box-shadow:2px 2px 0 var(--ink);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.rail-toggle:hover{background:var(--paper)}.side-collapse{width:30px;height:30px;box-shadow:none;border-width:1.5px}.rail-ch{letter-spacing:.04em;background:var(--ink);color:var(--white);border-radius:5px;padding:2px 6px;font-size:11px;font-weight:800}.rail-track{flex-direction:column;flex:auto;align-items:center;width:100%;min-height:0;margin:4px 0 0;padding:0;list-style:none;display:flex}.rail-step{--seg:var(--line);flex-direction:column;flex:1 1 0;align-items:center;gap:4px;width:100%;min-height:22px;max-height:96px;display:flex;position:relative}.rail-step[data-last=true]{flex:none;min-height:0}.rail-step:not([data-last=true]):after{content:"";background:var(--seg);border-radius:2px;width:4px;position:absolute;top:16px;bottom:0;left:50%;transform:translate(-50%)}.rail-step[data-done=true]{--seg:var(--accent)}.rail-step[data-cur=true]:not([data-done=true]):not([data-last=true]):after{background:linear-gradient(to bottom, var(--accent) calc(var(--read,0) * 100%), var(--line) calc(var(--read,0) * 100%))}.rail-node{z-index:1;border:2px solid var(--muted-2);background:var(--white);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;text-decoration:none;display:inline-flex;position:relative}.rail-step[data-sub=true] .rail-node{width:12px;height:12px;margin:2px 0}.rail-step[data-done=true] .rail-node{border-color:var(--ink);background:var(--ink);border-radius:4px}.rail-step[data-cur=true] .rail-node{border-color:var(--ink);background:var(--accent);width:20px;height:20px;box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);margin:-2px 0}.rail-lab{z-index:1;border:1.5px solid var(--ink);background:var(--white);color:var(--ink);border-radius:4px;margin-top:auto;margin-bottom:4px;padding:3px 4px;font-size:9px;font-weight:800;line-height:1;text-decoration:none;position:relative}.rail-tip{background:var(--inv);width:max-content;max-width:280px;color:var(--on-inv);white-space:normal;text-align:left;pointer-events:none;box-shadow:3px 3px 0 var(--accent);border-radius:6px;padding:6px 10px;font-size:12px;font-weight:400;line-height:1.35;display:none;position:absolute;top:50%;left:calc(100% + 14px);transform:translateY(-50%)}.rail-tip b{color:var(--accent);margin-right:4px}.rail-node:hover .rail-tip,.rail-node:focus-visible .rail-tip,.rail-lab:hover .rail-tip,.rail-lab:focus-visible .rail-tip{display:block}.rail-count{font-size:13px;font-weight:800}.rail-count span{color:var(--muted);font-weight:500}.sitem{color:var(--ink);border-left:3px solid #0000;align-items:center;gap:10px;padding:9px 18px;text-decoration:none;transition:background .1s;display:flex}.sitem:hover{background:var(--paper);color:var(--ink)}.sitem[aria-current=page]{background:var(--paper);border-left-color:var(--ink)}.sdot{flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;display:inline-flex}.sdot-done{background:var(--ink);border-radius:4px}.sdot-cur{background:var(--accent);border:2px solid var(--ink);border-radius:50%}.sdot-todo{border:2px solid #b5b5b5;border-radius:50%}.lesson-article{flex-direction:column;gap:22px;max-width:780px;margin:0 auto;padding:44px 48px 96px;display:flex}.crumb{color:var(--muted);text-underline-offset:3px;text-decoration:underline}.crumb:hover{color:var(--ink)}.lesson-h1{letter-spacing:-.035em;overflow-wrap:anywhere;font-size:40px;font-weight:800;line-height:1.12}.lesson-h2{letter-spacing:-.02em;margin-top:14px;font-size:22px;font-weight:800;line-height:1.25}.lesson-p{color:var(--ink-2);font-size:17px;line-height:1.75}.lesson-code{background:var(--term);color:var(--term-text);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:12px;overflow:hidden}.lesson-code-bar{border-bottom:1px solid var(--term-line);letter-spacing:.1em;text-transform:uppercase;color:#a3a3a3;justify-content:space-between;align-items:center;padding:7px 8px 7px 16px;font-size:11px;display:flex}.lesson-copy{color:#d4d4d4;letter-spacing:.06em;cursor:pointer;background:0 0;border:1px solid #3a3a3a;border-radius:6px;align-items:center;gap:6px;height:28px;padding:0 10px;font-size:11px;display:inline-flex}.lesson-out{border-top:1px solid var(--term-line);color:#b8e0a8;background:#0f0f0f;padding:12px 18px 14px;font-size:13px;line-height:1.6;overflow-x:auto}.lesson-table-wrap{border:2px solid var(--ink);background:var(--white);border-radius:10px;overflow-x:auto}.lesson-table{border-collapse:collapse;width:100%;color:var(--ink-2);font-size:15px;line-height:1.5}.lesson-table th{background:var(--ink);color:var(--white);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:10px 14px;font-size:11px;font-weight:500}.lesson-table td{border-top:1px solid var(--line);vertical-align:top;min-width:120px;padding:10px 14px}.lesson-h3{letter-spacing:-.01em;margin-top:6px;font-size:18px;font-weight:700;line-height:1.3}.lesson-ul,.lesson-ol{color:var(--ink-2);flex-direction:column;gap:10px;margin:0;padding:0;font-size:17px;line-height:1.6;list-style:none;display:flex}.lesson-ul>li{padding-left:22px;position:relative}.lesson-ul>li:before{content:"";background:var(--ink);border-radius:2px;width:8px;height:8px;position:absolute;top:.62em;left:4px}.lesson-ol{counter-reset:step}.lesson-ol>li{counter-increment:step;min-height:28px;padding-left:40px;position:relative}.lesson-ol>li:before{content:counter(step);border:2px solid var(--ink);width:26px;height:26px;font-family:var(--mono);background:var(--white);color:var(--ink);box-sizing:border-box;border-radius:6px;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:inline-flex;position:absolute;top:1px;left:0}.lesson-ol .lesson-ul,.lesson-ul .lesson-ul,.lesson-ol .lesson-ol{margin-top:10px;font-size:16px}.lesson-ul li>p,.lesson-ol li>p{font-size:inherit;margin:0}.lesson-hr{border:0;border-top:2px dashed var(--line);width:100%;margin:8px 0}.lesson-callout{background:var(--white);border:2px dashed var(--ink);border-radius:12px;flex-direction:column;gap:10px;padding:16px 20px 18px;display:flex}.lesson-callout .lesson-p{font-size:16px;line-height:1.65}.lesson-details{border:2px solid var(--ink);background:var(--white);border-radius:12px}.lesson-details>summary{cursor:pointer;align-items:center;gap:10px;padding:12px 18px;font-size:14px;font-weight:700;list-style:none;display:flex}.lesson-details>summary::-webkit-details-marker{display:none}.lesson-details>summary:before{content:"▸";color:var(--muted);transition:transform .15s}.lesson-details[open]>summary:before{transform:rotate(90deg)}.lesson-details[open]>summary{border-bottom:1px solid var(--line)}.lesson-details>:not(summary){margin:14px 18px}@media (prefers-reduced-motion:reduce){.lesson-details>summary:before{transition:none}}.callout-pill{width:fit-content;margin-bottom:10px;padding:2px 10px;display:flex}.lesson-output{border:2px solid var(--ink);color:#b8e0a8;white-space:pre;box-shadow:5px 5px 0 var(--ink);background:#0f0f0f;border-top:0;border-radius:0 0 12px 12px;margin-top:-22px;padding:12px 18px 14px;font-size:13px;line-height:1.6;overflow-x:auto}.lesson-output-label{letter-spacing:.14em;color:var(--muted);margin-bottom:4px;font-size:10px}.lesson-code:has(+.lesson-output){box-shadow:5px 0 0 var(--ink);border-bottom-right-radius:0;border-bottom-left-radius:0}.lesson-quiz .quiz-q{font-size:18px;line-height:1.45}.lesson-quiz .opt{padding:12px 16px;font-size:15px}.lesson-article>.card{margin-top:6px}.lesson-pager{border-top:2px solid var(--ink);flex-wrap:wrap;align-items:center;gap:14px;margin-top:8px;padding-top:28px;display:flex}.pager-btn{white-space:normal;flex-direction:column;gap:2px;max-width:320px;height:auto;padding:10px 18px}.pager-k{color:var(--muted);font-size:11px;font-weight:500}.pager-v{text-align:left}@media (max-width:1080px){.lesson-grid,.lesson-grid[data-side=rail]{grid-template-columns:minmax(0,1fr)}.lesson-grid[data-side=rail] .lesson-side{overflow-y:auto}.lesson-grid .lesson-rail,.lesson-grid[data-side=rail] .lesson-rail{display:none}.lesson-grid[data-side=rail] .lesson-side-full{display:block}.lesson-side-full{min-width:0}.side-collapse{display:none}.lesson-nav-toggle{display:inline-flex}.lesson-side,.lesson-grid[data-side=rail] .lesson-side{z-index:15;border-right:0;height:auto;display:none;position:fixed;inset:64px 0 0}.lesson-side[data-open=true],.lesson-grid[data-side=rail] .lesson-side[data-open=true]{display:block}.lesson-top-crumb,.lesson-top-sep{display:none}}@media (max-width:720px){.lesson-top{gap:10px;padding:0 16px}.lesson-top .wordmark,.lesson-progress .lesson-bar,.lesson-unlock{display:none}.lesson-login{padding:0 10px;font-size:11px}.lesson-article{padding:28px 16px 64px}.lesson-h1{font-size:30px}.lesson-p,.lesson-li{font-size:16px}}.lesson-anim{margin:6px 0 26px}.lesson-figure{border:2px solid var(--ink);width:100%;height:auto;box-shadow:5px 5px 0 var(--ink);background:#fff;border-radius:12px;margin:4px 0 10px;display:block}.lesson-p:has(>.lesson-figure){margin-bottom:4px}.lesson-anim-media{aspect-ratio:16/9;background:var(--term);border:2px solid var(--ink);width:100%;height:auto;box-shadow:5px 5px 0 var(--ink);border-radius:12px;display:block}.lesson-anim figcaption{color:var(--muted);margin-top:12px;font-size:14px;line-height:1.5}.lesson-anim-fallback{text-decoration:none;display:block}.lesson-anim-fallback span{margin-top:8px;font-size:12px;display:inline-block}.lesson-anim-error{border:1.5px dashed var(--bad);color:var(--bad);border-radius:10px;margin:6px 0 22px;padding:10px 14px;font-size:12.5px}.lesson-fig{margin:6px 0 26px}.lesson-fig-frame{background:var(--white);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:12px;overflow:hidden}.lesson-fig-title{color:var(--ink);padding:14px 18px 0;font-size:13.5px;font-weight:700}.lesson-fig-body{padding:18px;overflow-x:auto}.lesson-fig-svg svg{height:auto;margin:0 auto;display:block}.lesson-fig-svg .label{font:inherit;letter-spacing:normal;text-transform:none}.lesson-fig-scratch{visibility:hidden;width:1200px;position:absolute;top:0;left:-10000px}.lesson-fig-svg .node :is(rect,circle,ellipse,polygon,path){stroke-width:2px!important}.lesson-fig-svg .fig-el{transition:opacity .3s}.lesson-fig-svg .fig-dim{opacity:.2}.lesson-fig-svg .fig-lit :is(rect,circle,ellipse,polygon,path,line,.label-container){stroke:var(--accent)!important;stroke-width:3px!important}.lesson-fig-chart{width:100%}.lesson-fig-chart svg{margin:0 auto;display:block}.lesson-fig-loading{min-height:160px;color:var(--muted-2);place-items:center;font-size:12px;display:grid}.lesson-fig-fallback{color:var(--ink-2);font-size:15px;line-height:1.6}.lesson-fig-dev-error{color:var(--bad);margin-top:8px;font-size:12px}.lesson-fig-stepper{border-top:2px solid var(--ink);background:var(--paper-2);align-items:center;gap:10px;padding:10px 12px;display:flex}.lesson-fig-stepper:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}.lesson-fig-stepper p{min-width:0;color:var(--ink);flex:1;font-size:14.5px;line-height:1.45}.lesson-fig-stepper button{border:2px solid var(--ink);background:var(--white);cursor:pointer;border-radius:8px;flex:none;min-width:34px;height:34px;padding:0 8px;font-size:12px}.lesson-fig-stepper button:hover:not(:disabled){background:var(--accent);color:var(--on-accent)}.lesson-fig-stepper button:disabled{opacity:.3;cursor:default}.lesson-fig-stepper .lesson-fig-all{font-size:11px}.lesson-fig-count{color:var(--accent);margin-right:8px;font-size:12px;font-weight:700}.lesson-fig figcaption{color:var(--muted);margin-top:12px;font-size:14px;line-height:1.5}@media (prefers-reduced-motion:reduce){.lesson-fig-svg .fig-el{transition:none}}@media (max-width:560px){.lesson-fig-body{padding:12px}}.lesson-article .icode{white-space:normal;overflow-wrap:anywhere}@media (max-width:420px){.lesson-top{gap:8px}}.cp{z-index:50;background:var(--paper);flex-direction:column;animation:.25s both cp-in;display:flex;position:fixed;inset:0}.cp-bar{background:var(--inv);color:var(--on-inv);letter-spacing:.04em;flex-shrink:0;align-items:center;gap:16px;padding:0 24px;font-size:12px;display:flex}.cp-bar-top{height:60px;animation:.4s cubic-bezier(.2,.8,.2,1) both cp-drop}.cp-bar-bottom{justify-content:space-between;height:64px;animation:.4s cubic-bezier(.2,.8,.2,1) both cp-rise}.cp-tag{background:var(--accent);color:var(--on-accent);text-transform:uppercase;letter-spacing:.12em;border-radius:5px;flex-shrink:0;padding:3px 8px;font-weight:800}.cp-title{text-overflow:ellipsis;white-space:nowrap;color:#d4d4d4;min-width:0;overflow:hidden}.cp-segs{flex-shrink:0;gap:4px;margin:0 0 0 auto;padding:0;list-style:none;display:flex}.cp-segs li{background:#3a3a3a;border-radius:3px;width:22px;height:6px;transition:background .2s}.cp-segs li[data-state=done]{background:#d4d4d4}.cp-segs li[data-state=cur]{background:var(--accent)}.cp-x{color:#d4d4d4;height:30px;font:inherit;cursor:pointer;background:0 0;border:1px solid #4a4a4a;border-radius:6px;flex-shrink:0;padding:0 10px}.cp-x:hover{color:#fff;border-color:#d4d4d4}.cp-body{flex:auto;overflow-y:auto}.cp-inner{max-width:820px;margin:0 auto;padding:48px 32px 64px}.cp-step:not([hidden]),.cp-card{flex-direction:column;gap:16px;animation:.35s cubic-bezier(.2,.8,.2,1) both cp-stage;display:flex}.cp-card-body{padding:26px 24px}.cp-kicker{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:12px}.cp-intro{background:var(--white);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:14px;gap:18px;margin-top:4vh;padding:34px 32px 32px}.cp-h{letter-spacing:-.05em;text-transform:uppercase;font-size:56px;font-weight:800;line-height:1}.cp-h:after{content:"_";color:var(--accent);animation:1s step-end infinite cp-blink}.cp-chips{flex-wrap:wrap;gap:8px;display:flex}.cp-count{color:#a3a3a3}.cp-nav.btn:not(.btn-accent){color:var(--on-inv);box-shadow:none;background:0 0;border-color:#6b6b6b}@keyframes cp-in{0%{opacity:0}}@keyframes cp-drop{0%{transform:translateY(-100%)}}@keyframes cp-rise{0%{transform:translateY(100%)}}@keyframes cp-stage{0%{opacity:0;transform:translateY(24px)scale(.98)}}@keyframes cp-blink{50%{opacity:0}}.cs{z-index:60;background-color:var(--paper);flex-direction:column;transition:opacity .35s;animation:.3s both cp-in;display:flex;position:fixed;inset:0}.cs[data-leaving=true]{opacity:0}.cs-bar{background:var(--inv);height:60px;color:var(--on-inv);letter-spacing:.04em;flex-shrink:0;align-items:center;gap:14px;padding:0 24px;font-size:12px;animation:.4s cubic-bezier(.2,.8,.2,1) both cp-drop;display:flex}.cs-tag{background:var(--accent);color:var(--on-accent);text-transform:uppercase;letter-spacing:.12em;border-radius:5px;flex-shrink:0;padding:3px 8px;font-weight:800}.cs-label{text-overflow:ellipsis;white-space:nowrap;color:#d4d4d4;flex:auto;min-width:0;overflow:hidden}.cs-btn{color:#d4d4d4;min-width:34px;height:34px;font:inherit;cursor:pointer;background:0 0;border:1px solid #4a4a4a;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;padding:0 10px;display:inline-flex}.cs-btn:hover{color:#fff;border-color:#d4d4d4}.cs-stage{flex-direction:column;flex:auto;align-items:center;gap:22px;padding:clamp(24px,6vh,64px) 24px 40px;animation:.45s cubic-bezier(.2,.8,.2,1) .1s both cp-stage;display:flex;overflow-y:auto}.cs-stage>:first-child{margin-top:auto}.cs-stage>:last-child{margin-bottom:auto}.cs-card{width:min(640px,100%);margin:0}.cs-frame{aspect-ratio:16/9;background:var(--term);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:14px;place-items:center;display:grid;position:relative;overflow:hidden}.cs-video{object-fit:contain;width:100%;height:100%;display:block}.cs-card figcaption{color:var(--muted);text-align:center;margin-top:14px;font-size:14px;line-height:1.5}.cs-play{border:2px solid var(--on-inv);background:var(--accent);width:76px;height:76px;color:var(--on-accent);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;display:inline-flex;position:absolute}.cs-load{flex-direction:column;align-items:center;gap:14px;width:min(420px,100%);display:flex}.cs-load[data-ready=true] :is(.nl-pulse,.nl-node){animation:none}.cs-load[data-ready=true] .nl-node{fill:var(--accent)}.cs-load[data-ready=true] .nl-label{color:var(--ink);font-weight:700}.cs-time{width:100%;color:var(--muted);align-items:center;gap:12px;font-size:12px;display:flex}.cs-track{border:2px solid var(--ink);background:var(--white);border-radius:7px;flex:auto;height:12px;overflow:hidden}.cs-track span{background:var(--accent);height:100%;transition:width .25s linear;display:block}.cs-clock{text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;min-width:64px}.cs-next{min-width:240px}.cs-next:disabled{cursor:not-allowed;opacity:.45;box-shadow:none;background:var(--white);color:var(--muted);transform:none}@media (max-width:720px){.cp-bar{gap:10px;padding:0 14px}.cp-title{display:none}.cp-segs li{width:10px}.cp-x{width:30px;padding:0;font-size:0}.cp-x:before{content:"✕";font-size:13px}.cp-inner{padding:24px 16px 40px}.cp-intro{box-shadow:5px 5px 0 var(--ink);padding:24px 20px}.cp-card-body{padding:20px 16px}.cp-step .shadow-8{box-shadow:5px 5px 0 var(--ink)}.cp-h{font-size:38px}.cs-bar{padding:0 14px}.cs-stage{gap:18px;padding:24px 16px 32px}.cs-frame{box-shadow:5px 5px 0 var(--ink)}.cs-next{width:100%}}@media (prefers-reduced-motion:reduce){.cp,.cp-bar,.cp-step,.cp-card,.cs,.cs-bar,.cs-stage{animation:none!important}.cp-h:after{animation:none}.lesson-grid[data-settled=true]{transition:none}}