.app{grid-template-columns:var(--sidebar-w,280px) 1fr;min-height:100vh;display:grid}.vibe-sidebar{background:var(--bg-elev);border-right:1px solid var(--border);flex-direction:column;gap:20px;height:100vh;padding:24px 20px;display:flex;position:sticky;top:0;overflow-y:auto}.vibe-sidebar::-webkit-scrollbar{width:6px}.vibe-sidebar::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}.vibe-brand{align-items:center;gap:10px;padding-bottom:4px;text-decoration:none;display:flex}.vibe-brand:hover{text-decoration:none}.vibe-brand-logo{background:var(--brand);color:#fff;width:34px;height:34px;box-shadow:var(--shadow-sm);border-radius:8px;flex-shrink:0;place-items:center;font-size:16px;font-weight:700;display:grid}.vibe-brand-text{line-height:1.2}.vibe-brand-title{color:var(--fg);font-size:15px;font-weight:600}.vibe-brand-sub{color:var(--fg-dim);margin-top:2px;font-size:12px}.vibe-nav-heading{text-transform:uppercase;letter-spacing:.12em;color:var(--fg-dim);margin:6px 4px;font-size:11px;font-weight:600}.vibe-nav-list{flex-direction:column;gap:2px;display:flex}.vibe-nav-item{color:var(--fg-muted);border:1px solid #0000;border-radius:8px;padding:10px 12px;font-size:13.5px;line-height:1.35;text-decoration:none;transition:all .15s;display:block}.vibe-nav-item:hover{background:var(--bg-soft);color:var(--fg);text-decoration:none}.vibe-nav-item.active{background:var(--brand-soft);color:var(--brand-fg);font-weight:600}.vibe-nav-item.locked{opacity:.55;cursor:not-allowed}.vibe-nav-item.locked:hover{color:var(--fg-muted);background:0 0}.vibe-nav-head{justify-content:space-between;align-items:center;gap:8px;margin-bottom:2px;display:flex}.vibe-nav-code{color:var(--fg-dim);letter-spacing:.04em;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11px}.vibe-nav-item.active .vibe-nav-code{color:var(--brand-fg);opacity:.75}.vibe-nav-tag{letter-spacing:.04em;background:var(--bg-soft);color:var(--fg-dim);border:1px solid var(--border);border-radius:999px;padding:1px 7px;font-size:10px;font-weight:600}.vibe-nav-tag.open{background:var(--brand-soft);color:var(--brand-fg);border-color:#0000}.vibe-nav-item.active .vibe-nav-tag.open{background:#ffffff80}[data-theme=dark] .vibe-nav-item.active .vibe-nav-tag.open{background:#0003}.vibe-nav-title{color:inherit;font-weight:inherit}.vibe-sidebar-footer{border-top:1px solid var(--border);color:var(--fg-dim);justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:16px;font-size:12px;display:flex}.vibe-sidebar-footer a{color:var(--fg-muted);text-decoration:none}.vibe-sidebar-footer a:hover{color:var(--fg);text-decoration:underline}.theme-toggle{border:1px solid var(--border);color:var(--fg-muted);cursor:pointer;background:0 0;border-radius:8px;place-items:center;width:32px;height:32px;font-family:inherit;font-size:14px;transition:all .15s;display:grid}.theme-toggle:hover{background:var(--bg-soft);color:var(--fg);border-color:var(--border-strong)}.vibe-main{width:100%;min-width:0;max-width:860px;margin:0 auto;padding:40px 48px 80px}.page-hero{border-bottom:1px solid var(--border);margin-bottom:36px;padding:8px 0 28px}.page-eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--brand-fg);margin-bottom:10px;font-size:11px;font-weight:600}.page-title{letter-spacing:-.02em;margin:0 0 12px;font-size:32px;font-weight:700;line-height:1.22}.page-subtitle{color:var(--fg-muted);max-width:620px;margin:0;font-size:15.5px;line-height:1.7}.section-label{text-transform:uppercase;letter-spacing:.12em;color:var(--fg-dim);margin:0 0 14px;font-size:11px;font-weight:600}.lesson-grid{grid-template-columns:1fr;gap:14px;display:grid}.lesson-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);color:var(--fg);padding:22px 48px 22px 24px;text-decoration:none;transition:all .18s;display:block;position:relative;overflow:hidden}.lesson-card:hover{border-color:var(--brand);box-shadow:var(--shadow-md);text-decoration:none;transform:translateY(-2px)}.lesson-card-head{align-items:center;gap:10px;margin-bottom:8px;display:flex}.lesson-code{color:var(--fg-dim);letter-spacing:.06em;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11px}.lesson-tag{letter-spacing:.04em;border-radius:999px;padding:2px 8px;font-size:10.5px;font-weight:600}.lesson-tag.open{background:var(--brand-soft);color:var(--brand-fg)}.lesson-tag.soon{background:var(--bg-soft);color:var(--fg-dim);border:1px solid var(--border)}.lesson-title{letter-spacing:-.01em;color:var(--fg);margin:0 0 6px;font-size:18px;font-weight:600;line-height:1.35}.lesson-desc{color:var(--fg-muted);margin:0;font-size:14px;line-height:1.6}.lesson-card .lesson-arrow{color:var(--brand);opacity:0;font-size:18px;transition:all .18s;position:absolute;top:50%;right:22px;transform:translateY(-50%)}.lesson-card:hover .lesson-arrow{opacity:1;right:18px}.lesson-card.locked{cursor:not-allowed;opacity:.65}.lesson-card.locked:hover{border-color:var(--border);box-shadow:none;transform:none}.os-picker{grid-template-columns:1fr 1fr;gap:12px;margin:0 0 28px;display:grid}.os-btn{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;color:var(--fg-muted);text-align:center;justify-content:center;align-items:center;gap:10px;padding:16px 14px;font-size:14.5px;font-weight:500;transition:all .18s;display:flex}.os-btn:hover{border-color:var(--border-strong);color:var(--fg);background:var(--bg-soft)}.os-btn .os-icon{font-size:20px;line-height:1}.os-btn.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-fg);font-weight:600}.os-panel{display:none}.os-panel.active{display:block}.step{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);margin:0 0 14px;padding:22px 22px 22px 68px;transition:border-color .15s;position:relative}.step:hover{border-color:var(--border-strong)}.step-num{background:var(--brand-soft);width:32px;height:32px;color:var(--brand-fg);border-radius:50%;place-items:center;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:14px;font-weight:700;display:grid;position:absolute;top:22px;left:20px}.step-title{letter-spacing:-.005em;color:var(--fg);margin:2px 0 10px;font-size:16.5px;font-weight:600}.step p{color:var(--fg-muted);margin:8px 0;font-size:14.5px}.step p.hint{color:var(--fg-dim);font-size:13px}.step strong{color:var(--fg);font-weight:600}.step ol,.step ul{color:var(--fg-muted);margin:8px 0;padding-left:22px;font-size:14.5px}.step li{margin:4px 0}.step li::marker{color:var(--fg-dim)}.step a{color:var(--brand-fg)}.step code{background:var(--code-inline-bg);color:var(--code-inline-fg);border-radius:4px;padding:1px 6px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.88em}.code-block{background:var(--code-bg);border:1px solid var(--code-bg);border-radius:10px;margin:12px 0;position:relative;overflow:hidden}.code-block pre{color:var(--code-fg);margin:0;padding:14px 60px 14px 18px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:13px;line-height:1.6;overflow-x:auto}.copy-btn{color:var(--code-fg);cursor:pointer;letter-spacing:.02em;background:#ffffff14;border:1px solid #ffffff29;border-radius:6px;padding:4px 10px;font-family:inherit;font-size:11.5px;transition:all .15s;position:absolute;top:8px;right:8px}.copy-btn:hover{background:var(--brand);border-color:var(--brand);color:#fff}.copy-btn.copied{background:var(--accent);border-color:var(--accent);color:#fff}.check{background:var(--bg-soft);border-left:3px solid var(--accent);color:var(--fg-muted);border-radius:0 8px 8px 0;margin:12px 0 0;padding:10px 14px;font-size:13.5px}.check strong{color:var(--accent);font-weight:600}.check code{background:var(--code-inline-bg);color:var(--code-inline-fg);border-radius:4px;padding:1px 6px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.9em}.callout{background:var(--brand-soft);border-left:3px solid var(--brand);color:var(--brand-fg);border-radius:0 8px 8px 0;margin:12px 0;padding:12px 14px;font-size:13.5px}.callout strong{color:var(--brand-fg);font-weight:600}.done-card{background:var(--brand-soft);border:1px solid var(--brand);border-radius:var(--radius);text-align:center;margin:32px 0 0;padding:28px 24px}.done-card h2{color:var(--brand-fg);letter-spacing:-.01em;margin:0 0 8px;font-size:20px;font-weight:700}.done-card p{color:var(--brand-fg);margin:6px 0 0;font-size:14px}.done-card code{color:var(--brand-fg);background:#ffffff80;border-radius:4px;padding:1px 6px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.9em}[data-theme=dark] .done-card code{background:#00000040}.page-footer{border-top:1px solid var(--border);color:var(--fg-dim);text-align:center;margin-top:48px;padding:24px 0 0;font-size:13px}.page-footer a{color:var(--brand-fg)}.vibe-menu-btn{z-index:50;background:var(--brand);color:#fff;cursor:pointer;width:52px;height:52px;box-shadow:var(--shadow-md);border:none;border-radius:50%;font-size:22px;display:none;position:fixed;bottom:20px;right:20px}.vibe-backdrop{z-index:35;background:#0006;display:none;position:fixed;inset:0}.vibe-backdrop.show{display:block}@media (max-width:900px){.app{grid-template-columns:1fr}.vibe-sidebar{z-index:40;width:280px;max-width:85vw;transition:transform .25s;position:fixed;top:0;left:0;transform:translate(-100%)}.vibe-sidebar.open{transform:translate(0)}.vibe-main{padding:28px 22px 80px}.vibe-menu-btn{justify-content:center;align-items:center;display:inline-flex}}@media (max-width:640px){.page-title{font-size:26px}.page-hero{margin-bottom:28px;padding:4px 0 24px}.step{padding:18px 16px 18px 58px}.step-num{width:28px;height:28px;font-size:13px;top:18px;left:14px}.step-title{font-size:15.5px}.lesson-card{padding:18px 44px 18px 18px}.os-btn{padding:14px 12px;font-size:13.5px}}