*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--font-body: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "Source Code Pro", "SF Mono", "Fira Code", monospace;--bg: #fafaf9;--bg-sidebar: #f5f5f4;--bg-code: #e8e9ed;--bg-details: #f0eeeb;--text: #1c1917;--text-secondary: #57534e;--text-sidebar: #44403c;--text-sidebar-active: #1c1917;--text-code: #4c4f69;--border: #d6d3d1;--border-light: #e7e5e4;--accent: #9333ea;--accent-light: #f3e8ff;--link: #7c3aed;--link-hover: #6d28d9;--bg-macro: #e8e9ed;--text-macro-label: #6c6f85;--sidebar-width: 260px;--content-max-width: 48rem;--section-gap: 4rem;--text-xs: .64rem;--text-sm: .8rem;--text-base: 1rem;--text-lg: 1.25rem;--text-xl: 1.563rem;--text-2xl: 1.953rem;--text-3xl: 2.441rem}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:var(--bg-sidebar);border-right:1px solid var(--border);overflow-y:auto;padding:2rem 1rem 2rem 1.25rem;z-index:100;display:flex;flex-direction:column}.sidebar-title{font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}.sidebar-nav{list-style:none;flex:1}.sidebar-nav .part-label{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin-top:1.25rem;margin-bottom:.4rem;padding-left:.25rem}.sidebar-nav .part-label:first-child{margin-top:0}.sidebar-nav a{display:block;font-size:var(--text-sm);color:var(--text-sidebar);text-decoration:none;padding:.25rem .5rem;border-radius:4px;border-left:2px solid transparent;transition:all .15s ease;line-height:1.4}.sidebar-nav a:hover{color:var(--text-sidebar-active);background:#0000000a}.sidebar-nav a.active{color:var(--accent);border-left-color:var(--accent);background:var(--accent-light);font-weight:500}.scroll-progress{position:fixed;top:0;left:0;width:var(--sidebar-width);height:3px;background:var(--border-light);z-index:101}.scroll-progress-bar{height:100%;background:var(--accent);width:0%;transition:width .1s ease-out}.hamburger{display:none;position:fixed;top:1rem;left:1rem;z-index:200;background:var(--bg-sidebar);border:1px solid var(--border);border-radius:6px;padding:.5rem;cursor:pointer;line-height:1}.hamburger svg{width:24px;height:24px;stroke:var(--text);stroke-width:2;fill:none}.content{margin-left:var(--sidebar-width);padding:3rem 2rem 6rem}.content-inner{max-width:var(--content-max-width);margin:0 auto}.tutorial-header{text-align:center;padding:2rem 0 3rem;margin-bottom:2rem;border-bottom:1px solid var(--border-light)}.tutorial-header h1{font-size:var(--text-3xl);font-weight:800;letter-spacing:-.02em;margin-bottom:-.9rem}.tutorial-header h2{font-family:var(--font-mono);font-size:var(--text-xl);font-weight:400;color:var(--text-secondary);margin-bottom:1rem}.tutorial-header .subtitle{font-size:var(--text-lg);color:var(--text-secondary);max-width:36rem;margin:0 auto;line-height:1.5}.tutorial-section{padding-top:2rem;margin-bottom:var(--section-gap)}.tutorial-section+.tutorial-section{border-top:1px solid var(--border-light)}.tutorial-section h2{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.01em;margin-bottom:1.25rem}.tutorial-section h3{font-size:var(--text-xl);font-weight:600;margin-top:2rem;margin-bottom:.75rem}.prose{margin-bottom:1.5rem}.prose p{margin-bottom:1rem}.prose p:last-child{margin-bottom:0}.prose ul,.prose ol{margin-bottom:1rem;padding-left:1.5rem}.prose li{margin-bottom:.35rem}.prose strong{font-weight:600}.prose code{font-family:var(--font-mono);font-size:.875em;background:#0000000f;padding:.15em .35em;border-radius:3px}a{color:var(--link);text-decoration:underline;text-decoration-color:#7c3aed4d;text-underline-offset:2px;transition:text-decoration-color .15s}a:hover{color:var(--link-hover);text-decoration-color:var(--link-hover)}a[target=_blank]:after{content:"";display:inline-block;width:.7em;height:.7em;margin-left:.15em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;vertical-align:baseline;opacity:.6}pre{font-family:var(--font-mono);font-size:.875rem;line-height:1.6;background:var(--bg-code);color:var(--text-code);border-radius:8px;padding:1.25rem 1.5rem;overflow-x:auto;margin-bottom:1.5rem;max-width:calc(var(--content-max-width) + 4rem)}pre code{font-family:inherit;font-size:inherit;background:none;padding:0;border-radius:0}.shiki{background:var(--bg-code)!important;border-radius:8px;padding:1.25rem 1.5rem;overflow-x:auto;margin-bottom:1.5rem}.shiki,.shiki span{color:var(--shiki-light)!important}.shiki span{background-color:transparent!important}@media(prefers-color-scheme:dark){.shiki,.shiki span{color:var(--shiki-dark)!important}}.diagram-container{text-align:center;margin:2rem 0;padding:.5rem;background:var(--bg);border:1px solid var(--border-light);border-radius:8px;overflow-x:auto}.diagram-container img{max-width:100%;width:auto;height:auto}.diagram-caption{font-size:var(--text-sm);color:var(--text-secondary);margin-top:.75rem;font-style:italic}details{margin:1.5rem 0;background:var(--bg-details);border:1px solid var(--border-light);border-radius:8px;overflow:hidden}details summary{font-weight:600;font-size:var(--text-sm);padding:.75rem 1rem;cursor:pointer;-webkit-user-select:none;user-select:none;list-style:none;display:flex;align-items:center;gap:.5rem}details summary:before{content:"";display:inline-block;width:0;height:0;border-left:5px solid var(--text-secondary);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .2s ease;flex-shrink:0}details[open] summary:before{transform:rotate(90deg)}details summary::-webkit-details-marker{display:none}details .details-content{padding:0 1rem 1rem;font-size:var(--text-sm);line-height:1.6}details .details-content pre{font-size:var(--text-sm);margin-top:.75rem}.macro-panel{display:grid;grid-template-columns:1fr;gap:0;margin:2rem 0;border:1px solid var(--border-light);border-radius:8px;overflow:hidden}.macro-panel .macro-input,.macro-panel .macro-output{overflow-x:auto;background:var(--bg-macro)}.macro-panel .macro-input{border-bottom:1px solid var(--border)}.macro-panel .macro-input pre,.macro-panel .macro-output pre{margin:0;border-radius:0;font-size:.875rem}.macro-panel .shiki{background:transparent!important;margin-bottom:0}.macro-panel .macro-label{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-macro-label);padding:.5rem 1rem 0;background:var(--bg-macro)}.macro-panel [data-group]{transition:background-color .15s ease;border-radius:2px}.macro-panel [data-group].highlight{background-color:#9333ea33}.math{font-family:var(--font-mono);font-size:.9em;white-space:nowrap}.epilogue{padding-top:2rem;border-top:2px solid var(--border);margin-top:var(--section-gap)}.epilogue h2{font-size:var(--text-xl)}.epilogue p{color:var(--text-secondary)}@media(prefers-color-scheme:dark){:root{--bg: #1c1917;--bg-sidebar: #292524;--bg-code: #1e1e2e;--bg-details: #292524;--text: #fafaf9;--text-secondary: #a8a29e;--text-sidebar: #d6d3d1;--text-sidebar-active: #fafaf9;--text-code: #cdd6f4;--border: #44403c;--border-light: #3a3633;--accent: #a855f7;--accent-light: rgba(168, 85, 247, .15);--link: #a78bfa;--link-hover: #c4b5fd;--bg-macro: #1e1e2e;--text-macro-label: #a6adc8}.prose code{background:#ffffff1a}.diagram-container{background:var(--bg-details)}.sidebar-nav a:hover{background:#ffffff0f}a[target=_blank]:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E")}}@media(max-width:768px){.hamburger{display:block}.sidebar{transform:translate(-100%);transition:transform .25s ease;box-shadow:none}.sidebar.open{transform:translate(0);box-shadow:4px 0 20px #0000001a}.scroll-progress{left:0;width:100%}.content{margin-left:0;padding:4rem 1.25rem}pre{font-size:var(--text-xs);padding:1rem}}@media(min-width:769px)and (max-width:1100px){:root{--sidebar-width: 220px}}@media print{.sidebar,.hamburger,.scroll-progress{display:none!important}.content{margin-left:0;padding:0}pre{white-space:pre-wrap;word-break:break-all;border:1px solid #ccc;background:#f5f5f5!important;color:#333!important}.tutorial-section{break-inside:avoid-page}details{open:true}details[open] .details-content{display:block}a[target=_blank]:after{content:" (" attr(href) ")";font-size:.8em;background:none;width:auto;height:auto}}a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}.skip-link{position:absolute;top:-100%;left:1rem;padding:.5rem 1rem;background:var(--accent);color:#fff;text-decoration:none;border-radius:4px;z-index:300;font-weight:600}.skip-link:focus{top:1rem}