:root,:root[data-theme=dark]{--bg: #0d1117;--bg-soft: #161b22;--border: #30363d;--text: #e6edf3;--text-dim: #9da7b3;--accent: #58a6ff;--accent-warm: #f0883e}:root[data-theme=light]{--bg: #ffffff;--bg-soft: #f6f8fa;--border: #d0d7de;--text: #1f2328;--text-dim: #636c76;--accent: #0969da;--accent-warm: #bc4c00}:root{--max: 760px;--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;transition:background .2s ease,color .2s ease}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}.site-header{border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}.site-header .inner{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:700;font-size:1.05rem;color:var(--text)}.brand span{color:var(--accent-warm)}.header-right{display:flex;align-items:center;gap:18px}.nav a{color:var(--text-dim);font-size:.95rem}.nav a:hover{color:var(--text);text-decoration:none}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:8px;background:var(--bg-soft);color:var(--text);cursor:pointer;padding:0}.theme-toggle:hover{border-color:var(--accent)}.theme-toggle svg{width:18px;height:18px}:root[data-theme=dark] .icon-moon{display:none}:root[data-theme=light] .icon-sun{display:none}.site-footer{border-top:1px solid var(--border);margin-top:80px;padding:32px 0;color:var(--text-dim);font-size:.9rem}.hero{padding:72px 0 32px}.hero h1{font-size:2.6rem;line-height:1.15;margin:0 0 16px}.hero p{font-size:1.2rem;color:var(--text-dim);margin:0 0 28px}.cta{display:inline-block;background:var(--accent-warm);color:#fff;font-weight:600;padding:12px 22px;border-radius:8px}.cta:hover{text-decoration:none;filter:brightness(1.08)}.tut-list{list-style:none;padding:0;margin:40px 0}.tut-card{border:1px solid var(--border);border-radius:10px;padding:22px 24px;margin-bottom:16px;background:var(--bg-soft);transition:border-color .15s}.tut-card:hover{border-color:var(--accent)}.tut-card h3{margin:0 0 6px;font-size:1.25rem}.tut-card h3 a{color:var(--text)}.tut-card p{margin:0 0 10px;color:var(--text-dim);font-size:.98rem}.tag{display:inline-block;font-size:.75rem;color:var(--text-dim);border:1px solid var(--border);border-radius:999px;padding:2px 10px;margin-right:6px}.layout{display:grid;grid-template-columns:220px minmax(0,1fr) 210px;gap:36px;max-width:1200px;margin:0 auto;padding:32px 20px;align-items:start}.sidebar{position:sticky;top:72px;font-size:.92rem}.sidebar .series-group{margin-bottom:22px}.sidebar .series-group>.s-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-bottom:8px}.sidebar ul{list-style:none;margin:0;padding:0}.sidebar li{margin:0}.sidebar li a{display:block;padding:5px 10px;border-radius:6px;color:var(--text-dim);border-left:2px solid transparent}.sidebar li a:hover{color:var(--text);text-decoration:none;background:var(--bg-soft)}.sidebar li a.active{color:var(--text);border-left-color:var(--accent-warm);background:var(--bg-soft)}.toc{position:sticky;top:72px;font-size:.88rem}.toc .s-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-bottom:8px}.toc ul{list-style:none;margin:0;padding:0}.toc a{display:block;padding:4px 0;color:var(--text-dim);line-height:1.4}.toc a:hover{color:var(--text);text-decoration:none}.toc .depth-3{padding-left:14px;font-size:.84rem}@media(max-width:1080px){.layout{grid-template-columns:200px minmax(0,1fr)}.toc{display:none}}@media(max-width:720px){.layout{grid-template-columns:1fr}.sidebar{display:none}}article.prose{padding:0;min-width:0}.prose h1{font-size:2.2rem;line-height:1.2;margin:0 0 8px}.prose .meta{color:var(--text-dim);font-size:.9rem;margin-bottom:28px}.prose h2{font-size:1.5rem;margin:44px 0 12px;padding-top:8px;scroll-margin-top:80px}.prose h3{font-size:1.2rem;margin:28px 0 8px;scroll-margin-top:80px}.prose p,.prose li{color:var(--text)}.prose code{font-family:var(--mono);font-size:.86em;background:var(--bg-soft);border:1px solid var(--border);border-radius:4px;padding:1px 5px}.prose pre{background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;padding:16px;overflow-x:auto;font-size:.85rem}.prose pre code{background:none;border:none;padding:0}.prose blockquote{border-left:3px solid var(--accent-warm);margin:20px 0;padding:4px 18px;color:var(--text-dim)}.prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.92rem}.prose th,.prose td{border:1px solid var(--border);padding:8px 12px;text-align:left}.prose th{background:var(--bg-soft)}.yt-embed{position:relative;width:100%;aspect-ratio:16 / 9;margin:24px 0;border-radius:10px;overflow:hidden;border:1px solid var(--border)}.yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.series-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}.series-nav a{flex:1;border:1px solid var(--border);border-radius:8px;padding:12px 16px;background:var(--bg-soft)}.series-nav a:hover{border-color:var(--accent);text-decoration:none}.series-nav .dir{font-size:.78rem;color:var(--text-dim)}.series-nav .next{text-align:right}.sub-cta{border:1px solid var(--accent-warm);border-radius:10px;padding:22px 24px;margin:40px 0;text-align:center}.sub-cta p{margin:0 0 14px}.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:36px 0 8px;padding-top:20px;border-top:1px solid var(--border)}.share .share-label{font-size:.85rem;color:var(--text-dim);margin-right:4px}.share a,.share button{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-family:var(--font);color:var(--text);background:var(--bg-soft);border:1px solid var(--border);border-radius:999px;padding:6px 12px;cursor:pointer;line-height:1}.share a:hover,.share button:hover{border-color:var(--accent);text-decoration:none}.share svg{width:15px;height:15px;fill:currentColor}
