@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");:root{--bg-void:#0a0a0f;--bg-primary:#0d0d14;--bg-surface:#12121a;--bg-elevated:#1a1a24;--bg-card:#16161f;--text-primary:#f0f0f5;--text-secondary:#9090a0;--text-muted:#606070;--text-dim:#404050;--color-primary:#00ff88;--color-primary-dim:rgba(0,255,136,0.15);--color-primary-glow:rgba(0,255,136,0.4);--color-accent:#00d4ff;--color-accent-dim:rgba(0,212,255,0.15);--color-accent-glow:rgba(0,212,255,0.4);--color-success:#00ff88;--color-warning:#ffcc00;--color-error:#ff4466;--color-info:#00d4ff;--gradient-glow:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);--gradient-surface:linear-gradient(180deg,var(--bg-surface) 0%,var(--bg-primary) 100%);--gradient-card:linear-gradient(135deg,var(--bg-elevated) 0%,var(--bg-card) 100%);--sp-xs:4px;--sp-sm:8px;--sp-md:12px;--sp-lg:16px;--sp-xl:24px;--sp-2xl:32px;--sp-3xl:48px;--sp-4xl:64px;--sp-5xl:96px;--sp-6xl:128px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:20px;--radius-full:9999px;--shadow-sm:0 2px 8px rgba(0,0,0,0.3);--shadow-md:0 4px 16px rgba(0,0,0,0.4);--shadow-lg:0 8px 32px rgba(0,0,0,0.5);--shadow-xl:0 16px 64px rgba(0,0,0,0.6);--glow-primary:0 0 20px var(--color-primary-glow),0 0 40px rgba(0,255,136,0.2);--glow-accent:0 0 20px var(--color-accent-glow),0 0 40px rgba(0,212,255,0.2);--font-display:"Outfit",system-ui,sans-serif;--font-body:"Outfit",system-ui,sans-serif;--font-mono:"IBM Plex Mono","JetBrains Mono",monospace;--border-subtle:1px solid rgba(255,255,255,0.06);--border-default:1px solid rgba(255,255,255,0.1);--border-glow:1px solid var(--color-primary);--border-color:rgba(255,255,255,0.08);--border-color-light:rgba(255,255,255,0.06);--bg-secondary:#0f0f16}*,:after,:before{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;font-size:16px;min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 0),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 0);background-size:64px 64px;pointer-events:none;z-index:0}.container{max-width:1200px;position:relative;z-index:1}.container,.container-narrow{margin:0 auto;padding:0 var(--sp-xl)}.container-narrow{max-width:720px}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.2}code,pre{font-family:var(--font-mono)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-sm);padding:var(--sp-md) var(--sp-xl);border-radius:var(--radius-md);font-family:var(--font-body);font-weight:600;font-size:.95rem;text-decoration:none;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;position:relative;overflow:hidden}.btn-primary{background:var(--color-primary);color:var(--bg-void)}.btn-primary:hover{box-shadow:var(--glow-primary);transform:translateY(-2px)}.btn-primary:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 50%);opacity:0;transition:opacity .2s}.btn-primary:hover:before{opacity:1}.btn-secondary{background:transparent;color:var(--text-primary);border:var(--border-default)}.btn-secondary:hover{border-color:var(--color-primary);color:var(--color-primary);box-shadow:0 0 20px var(--color-primary-dim)}.btn-ghost{background:transparent;color:var(--text-secondary);padding:var(--sp-sm) var(--sp-lg)}.btn-ghost:hover{color:var(--color-primary)}.section-header{text-align:center;margin-bottom:var(--sp-4xl)}.section-label{display:inline-flex;align-items:center;gap:var(--sp-sm);color:var(--color-primary);font-family:var(--font-mono);font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em;margin-bottom:var(--sp-lg)}.section-label:before{content:"//";opacity:.5}.section-header h2{font-size:2.75rem;font-weight:800;color:var(--text-primary);margin-bottom:var(--sp-lg)}.section-header p{color:var(--text-secondary);font-size:1.1rem;max-width:600px;margin:0 auto}.section-header a{color:var(--color-primary);text-decoration:none;font-weight:600}.section-header a:hover{text-decoration:underline}.card{background:var(--gradient-card);border:var(--border-subtle);border-radius:var(--radius-xl);padding:var(--sp-2xl);transition:all .25s cubic-bezier(.4,0,.2,1)}.card:hover{border-color:rgba(0,255,136,.2);box-shadow:0 0 40px rgba(0,255,136,.05);transform:translateY(-4px)}.code-block{background:var(--bg-void);border:var(--border-subtle);border-radius:var(--radius-xl);overflow:hidden}.code-header{display:flex;align-items:center;gap:var(--sp-sm);padding:var(--sp-lg) var(--sp-xl);background:rgba(255,255,255,.03);border-bottom:var(--border-subtle)}.code-dots{display:flex;gap:6px}.code-dot{width:10px;height:10px;border-radius:50%}.code-dot.red{background:#ff5f57}.code-dot.yellow{background:#febc2e}.code-dot.green{background:#28c840}.code-title{margin-left:var(--sp-lg);color:var(--text-muted);font-family:var(--font-mono);font-size:.8rem}.code-content{padding:var(--sp-xl);overflow-x:auto}.code-content pre{margin:0}.code-content code{font-family:var(--font-mono);font-size:.85rem;line-height:1.8;color:var(--text-primary)}.code-content .comment{color:var(--text-muted)}.code-content .keyword{color:#ff79c6}.code-content .string{color:var(--color-primary)}.code-content .function{color:var(--color-accent)}.code-content .variable{color:#bd93f9}.code-content .property{color:#8be9fd}.code-content .number{color:#ffb86c}.terminal{background:var(--bg-void);border:var(--border-default);border-radius:var(--radius-lg);font-family:var(--font-mono);overflow:hidden}.terminal-header{padding:var(--sp-md) var(--sp-lg);background:rgba(255,255,255,.03);border-bottom:var(--border-subtle);display:flex;align-items:center;gap:var(--sp-md)}.terminal-prompt{color:var(--color-primary)}.terminal-command{color:var(--text-primary)}.badge{display:inline-flex;align-items:center;gap:var(--sp-xs);padding:var(--sp-xs) var(--sp-md);background:var(--color-primary-dim);color:var(--color-primary);border-radius:var(--radius-full);font-family:var(--font-mono);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.badge:before{content:"";width:6px;height:6px;background:var(--color-primary);border-radius:50%;animation:pulse-dot 2s infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}@keyframes glow-pulse{0%,to{box-shadow:0 0 20px var(--color-primary-glow)}50%{box-shadow:0 0 40px var(--color-primary-glow),0 0 60px rgba(0,255,136,.2)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes scan-line{0%{transform:translateY(-100%)}to{transform:translateY(100vh)}}@keyframes data-stream{0%{background-position:0 0}to{background-position:0 100%}}.text-gradient{background:var(--gradient-glow);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glow-border{position:relative}.glow-border:before{content:"";position:absolute;inset:-1px;background:var(--gradient-glow);border-radius:inherit;z-index:-1;opacity:0;transition:opacity .3s}.glow-border:hover:before{opacity:1}@media (max-width:1024px){.section-header h2{font-size:2.25rem}.section-header p{font-size:1rem}}@media (max-width:768px){.container{padding:0 var(--sp-lg)}.section-header{margin-bottom:var(--sp-2xl)}.section-header h2{font-size:1.75rem}.section-header p{font-size:.95rem}.section-label{font-size:.75rem;margin-bottom:var(--sp-md)}.btn{padding:var(--sp-md) var(--sp-lg);font-size:.9rem}.code-block{border-radius:var(--radius-lg)}.code-header{padding:var(--sp-md) var(--sp-lg)}.code-content{padding:var(--sp-lg)}.code-content code{font-size:.75rem;line-height:1.6}.card{padding:var(--sp-xl)}}@media (max-width:480px){.container{padding:0 var(--sp-md)}.section-header h2{font-size:1.5rem}.code-content code{font-size:.7rem}.btn{width:100%;justify-content:center}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-surface)}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}::selection{background:var(--color-primary);color:var(--bg-void)}