.navbar{z-index:100;background:var(--navbar-bg);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0}.navbar-inner{align-items:center;gap:24px;max-width:900px;height:56px;margin:0 auto;padding:0 20px;display:flex}.navbar-brand{color:var(--text);font-size:20px;font-weight:700;text-decoration:none}.navbar-links{flex:1;gap:8px;margin:0;padding:0;list-style:none;display:flex}.navbar-links a{color:var(--muted);border-radius:6px;padding:6px 12px;font-size:15px;text-decoration:none;transition:color .15s,background .15s}.navbar-links a:hover{color:var(--text);background:var(--hover)}.theme-toggle{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:6px;transition:color .15s,background .15s,border-color .15s;display:flex}.theme-toggle:hover{color:var(--text);background:var(--hover);border-color:var(--accent)}section{position:relative}section h2{align-items:center;gap:12px;display:flex}.step-badge{background:var(--accent);color:#fff;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;min-width:28px;height:28px;font-size:13px;font-weight:600;display:inline-flex}.customize-panel h2{border-bottom:none;margin-bottom:6px}.customize-panel>p{margin-top:0;margin-bottom:20px}.customize-grid{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;display:grid}.customize-field{color:var(--muted);flex-direction:column;gap:6px;font-size:13px;display:flex}.customize-field input{border:1px solid var(--border);background:var(--code-bg);color:var(--text);border-radius:8px;outline:none;padding:9px 12px;font-family:ui-monospace,Cascadia Code,Fira Code,monospace;font-size:14px;transition:border-color .15s}.customize-field input:focus{border-color:var(--accent)}.reset-btn{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:8px;padding:6px 14px;font-size:13px;transition:color .15s,border-color .15s}.reset-btn:hover{color:var(--text);border-color:var(--accent)}.code-block{position:relative}.code-block pre{margin-top:0}.code-block .copy-btn{background:var(--card);border:1px solid var(--border);color:var(--muted);cursor:pointer;border-radius:6px;align-items:center;gap:5px;padding:4px 10px;font-size:12px;transition:color .15s,border-color .15s;display:flex;position:absolute;top:10px;right:10px}.code-block .copy-btn:hover{color:var(--text);border-color:var(--accent)}.code-block .copy-btn.copied{color:#16a34a;border-color:#16a34a}:root,[data-theme=dark]{--bg:#0f1117;--card:#151922;--navbar-bg:#0f1117d9;--text:#e6edf3;--muted:#9aa4b2;--border:#2b313d;--code-bg:#0d1117;--accent:#3b82f6;--hover:#ffffff0f}[data-theme=light]{--bg:#f6f8fa;--card:#fff;--navbar-bg:#f6f8fad9;--text:#1f2328;--muted:#656d76;--border:#d0d7de;--code-bg:#f0f2f5;--accent:#0969da;--hover:#0000000a}*,:before,:after{box-sizing:border-box}body{background:var(--bg);color:var(--text);scroll-behavior:smooth;margin:0;font-family:Inter,system-ui,Arial}.scroll-progress{z-index:200;background:0 0;width:100%;height:3px;position:fixed;top:0;left:0}.scroll-progress-bar{background:var(--accent);height:100%;transition:width .1s linear}.scroll-to-top{z-index:150;background:var(--card);border:1px solid var(--border);color:var(--muted);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;padding:10px;transition:color .15s,border-color .15s,transform .15s;display:flex;position:fixed;bottom:28px;right:28px;box-shadow:0 2px 8px #00000026}.scroll-to-top:hover{color:var(--text);border-color:var(--accent);transform:translateY(-2px)}.footer{border-top:1px solid var(--border);margin-top:60px;padding:24px 0}.footer-inner{max-width:900px;color:var(--muted);justify-content:space-between;align-items:center;margin:0 auto;padding:0 20px;font-size:14px;display:flex}.footer-links{gap:16px;display:flex}.footer-links a{color:var(--muted);text-decoration:none;transition:color .15s}.footer-links a:hover{color:var(--text)}.not-found{text-align:center;max-width:500px;margin:100px auto 0;padding:0 20px}.not-found h1{color:var(--accent);margin-bottom:8px;font-size:72px}.not-found p{color:var(--muted);margin-bottom:24px;font-size:18px}.not-found-link{background:var(--accent);color:#fff;border-radius:8px;padding:10px 24px;font-weight:600;transition:opacity .15s;display:inline-block}.not-found-link:hover{opacity:.9}.tutorial-container{max-width:900px;margin:auto;padding:50px 20px}h1{margin-bottom:10px;font-size:38px}h2{border-bottom:1px solid var(--border);margin-top:50px;margin-bottom:15px;padding-bottom:8px;font-size:26px}h4{margin-top:20px}.subtitle{color:var(--muted);margin-bottom:40px}section{background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:30px;padding:30px}p{color:var(--text);line-height:1.6}ul{padding-left:20px}li{margin-bottom:8px}pre{background:var(--code-bg);border:1px solid var(--border);white-space:pre-wrap;word-break:break-word;border-radius:8px;margin-top:10px;padding:18px;font-size:14px;overflow-x:auto}table{border-collapse:collapse;width:100%;margin-top:15px}th{text-align:left;background:var(--code-bg);padding:12px}td{border-top:1px solid var(--border);padding:12px}a{color:var(--accent);text-decoration:none}