:root{--font-mono:"JetBrains Mono","IBM Plex Mono","Fira Code",ui-monospace,monospace;--weight-regular:400;--weight-medium:500;--weight-bold:600;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.5rem;--text-5xl:3.5rem;--leading-tight:1.2;--leading-normal:1.5;--leading-relaxed:1.7;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;--color-bg-base:#0d0d0f;--color-bg-subtle:#141418;--color-bg-muted:#1a1a1f;--color-bg-elevated:#222228;--color-text-default:#e4e4e7;--color-text-muted:#71717a;--color-text-subtle:#52525b;--color-accent:#7c9aff;--color-accent-muted:rgba(124,154,255,0.15);--color-accent-subtle:rgba(124,154,255,0.08);--color-success:#6ee7b7;--color-success-muted:rgba(110,231,183,0.15);--color-warning:#fcd34d;--color-warning-muted:rgba(252,211,77,0.15);--color-error:#f87171;--color-error-muted:rgba(248,113,113,0.12);--color-diff-add-bg:rgba(110,231,183,0.08);--color-diff-add-text:#6ee7b7;--color-diff-remove-bg:rgba(248,113,113,0.08);--color-diff-remove-text:#f87171;--color-border:rgba(255,255,255,0.06);--color-border-subtle:rgba(255,255,255,0.03);--shadow-sm:0 1px 2px rgba(0,0,0,0.4);--shadow-md:0 4px 12px rgba(0,0,0,0.3);--shadow-lg:0 8px 24px rgba(0,0,0,0.4);--transition-fast:100ms ease;--transition-base:200ms ease;--transition-slow:300ms ease;--radius-sm:3px;--radius-md:6px;--radius-lg:8px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-mono);font-size:var(--text-base);line-height:var(--leading-normal);background-color:var(--color-bg-base);min-height:100vh}body,h1,h2,h3,h4,h5,h6{font-weight:var(--weight-regular);color:var(--color-text-default)}h1,h2,h3,h4,h5,h6{line-height:var(--leading-tight)}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-lg)}p{color:var(--color-text-muted);line-height:var(--leading-relaxed)}a{color:var(--color-accent);text-decoration:none;transition:opacity var(--transition-fast)}a:hover{opacity:.8}code{font-family:var(--font-mono);font-size:.9em;background:var(--color-bg-muted);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-6)}.section{padding:var(--space-24) 0}.code-panel{background:var(--color-bg-subtle);border-radius:var(--radius-md);overflow:hidden;font-family:var(--font-mono);font-size:var(--text-sm)}.code-panel-header{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);color:var(--color-text-muted);font-size:var(--text-xs)}.code-panel-header .icon{opacity:.5}.code-panel-body{padding:var(--space-4);overflow-x:auto}.code-panel-footer{padding:var(--space-2) var(--space-4);background:var(--color-bg-muted);font-size:var(--text-xs);color:var(--color-text-subtle)}.line-number{color:var(--color-text-subtle);-webkit-user-select:none;-moz-user-select:none;user-select:none;text-align:right;padding-right:var(--space-4);min-width:2.5em;display:inline-block}.terminal-panel{background:var(--color-bg-subtle);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-sm);overflow:hidden}.terminal-line{padding:var(--space-1) var(--space-4)}.terminal-prompt{color:var(--color-text-muted)}.terminal-input{color:var(--color-text-default)}.terminal-output{color:var(--color-text-muted)}.terminal-success{color:var(--color-success)}.btn{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-regular);padding:var(--space-3) var(--space-5);border-radius:var(--radius-sm);border:none;cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:var(--space-2)}.btn-primary{background:var(--color-accent);color:var(--color-bg-base)}.btn-primary:hover{opacity:.9;transform:translateY(-1px)}.btn-secondary{background:var(--color-bg-elevated);color:var(--color-text-default);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-bg-muted);border-color:var(--color-border)}.text-muted{color:var(--color-text-muted)}.text-subtle{color:var(--color-text-subtle)}.text-accent{color:var(--color-accent)}.font-medium{font-weight:var(--weight-medium)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn var(--transition-slow) ease forwards}.animate-slide-up{animation:slideUp .5s ease forwards}.delay-1{animation-delay:.1s;opacity:0}.delay-2{animation-delay:.2s;opacity:0}.delay-3{animation-delay:.3s;opacity:0}.delay-4{animation-delay:.4s;opacity:0}.delay-5{animation-delay:.5s;opacity:0}