.hero{text-align:center;padding:80px 24px 50px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:-120px;left:50%;transform:translate(-50%);width:600px;height:600px;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);pointer-events:none}.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:999px;background:var(--accent-glow);border:1px solid var(--border-accent);color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:24px}.hero h1{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;background:linear-gradient(135deg,var(--white) 0%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero p{color:var(--text-secondary);font-size:16px;max-width:520px;margin:16px auto 0;line-height:1.6}.hero-install{display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding:12px 24px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius);font-family:var(--font-mono);font-size:14px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition)}.hero-install:hover{background:var(--bg-card-hover);border-color:var(--border-accent);color:var(--text-primary)}.hero-install code{color:var(--accent)}.hero-install .copy-hint{font-size:11px;opacity:.4}.section{max-width:1100px;margin:0 auto;padding:40px 24px}.section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:12px}.section-heading{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:32px}.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}.props-table-wrapper{overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius);background:var(--bg-card)}.props-table{width:100%;border-collapse:collapse;font-size:13px}.props-table th{text-align:left;padding:14px 18px;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);border-bottom:1px solid var(--border-subtle);background:var(--bg-card)}.props-table td{padding:12px 18px;border-bottom:1px solid var(--border-subtle);vertical-align:top}.props-table tr:last-child td{border-bottom:none}.props-table tr:hover td{background:var(--bg-card-hover)}.props-table .prop-name{color:var(--accent);font-family:var(--font-mono);font-size:12px;font-weight:500}.props-table .prop-type{color:var(--info);font-family:var(--font-mono);font-size:11px}.props-table .prop-default{color:var(--text-muted);font-family:var(--font-mono);font-size:11px}.footer{text-align:center;padding:60px 24px;color:var(--text-muted);font-size:13px;border-top:1px solid var(--border-subtle)}.footer a{color:var(--accent);text-decoration:none}.footer a:hover{text-decoration:underline}.playground{display:grid;grid-template-columns:340px 1fr;gap:24px;min-height:420px}@media (max-width: 768px){.playground{grid-template-columns:1fr}}.playground-controls{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;max-height:480px}.playground-preview{position:relative;background:var(--bg-overlay);border:1px solid var(--border-subtle);border-radius:var(--radius);min-height:400px;display:flex;align-items:center;justify-content:center;overflow:hidden}.playground-preview .placeholder-text{color:var(--text-muted);font-size:14px;text-align:center}.control-group label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:6px}.control-group select,.control-group input[type=text],.control-group input[type=number],.control-group input[type=range]{width:100%;padding:8px 12px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:13px;outline:none;transition:border-color var(--transition)}.control-group select:focus,.control-group input:focus{border-color:var(--accent)}.control-group select option{background:var(--bg-primary)}.control-row{display:flex;gap:12px}.control-row .control-group{flex:1}.toggle-group{display:flex;align-items:center;justify-content:space-between}.toggle-group label{margin-bottom:0}.toggle{position:relative;width:40px;height:22px;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:var(--bg-card-hover);border-radius:999px;border:none;cursor:pointer;transition:background var(--transition);padding:0}.toggle:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--text-secondary);border-radius:50%;transition:all var(--transition)}.toggle:checked{background:var(--accent)}.toggle:checked:after{left:21px;background:var(--white)}.demo-card{position:relative;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius);overflow:hidden;transition:all var(--transition)}.demo-card:hover{background:var(--bg-card-hover);border-color:var(--border-accent);transform:translateY(-2px);box-shadow:0 12px 40px #0000004d}.demo-card-preview{position:relative;height:200px;background:var(--bg-overlay);display:flex;align-items:center;justify-content:center;overflow:hidden}.demo-card-preview .preview-content{text-align:center;color:var(--text-muted);font-size:13px}.demo-card-body{padding:20px}.demo-card-body h3{font-size:16px;font-weight:600;margin-bottom:6px}.demo-card-body p{font-size:13px;color:var(--text-secondary);line-height:1.5;margin-bottom:16px}.demo-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.tag{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:500;border:1px solid}.tag-purple{color:var(--purple);border-color:var(--border-accent);background:var(--bg-card)}.tag-green{color:var(--green);border-color:var(--border-accent);background:var(--bg-card)}.tag-blue{color:var(--blue);border-color:var(--border-accent);background:var(--bg-card)}.tag-amber{color:var(--amber);border-color:var(--border-accent);background:var(--bg-card)}.tag-pink{color:var(--pink);border-color:var(--border-accent);background:var(--bg-card)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--white: #ffffff;--black: #000000;--bg-primary: #0a0a0f;--bg-card: rgba(255, 255, 255, .03);--bg-card-hover: rgba(255, 255, 255, .06);--bg-input: rgba(255, 255, 255, .04);--bg-overlay: rgba(0, 0, 0, .35);--bg-dots: #60d394;--bg-pulse: #60a5fa;--bg-ring: #f59e0b;--bg-bar: #f472b6;--bg-closable: #34d399;--border-subtle: rgba(255, 255, 255, .06);--border-accent: rgba(167, 139, 250, .2);--text-primary: #f0f0f5;--text-secondary: rgba(240, 240, 245, .6);--text-muted: rgba(240, 240, 245, .35);--accent: #a78bfa;--accent-glow: rgba(167, 139, 250, .15);--accent-hover: #8b5cf6;--success: #60d394;--warning: #fbbf24;--danger: #f87171;--info: #60a5fa;--pink: #f472b6;--amber: #fbbf24;--blue: #60a5fa;--green: #60d394;--purple: #a78bfa;--code-comment: #636c76;--code-symbol: #fbbf24;--code-keyword: #c084fc;--code-string: #60d394;--code-tag: #60a5fa;--code-attr: #a78bfa;--radius: 14px;--radius-sm: 8px;--transition: .2s cubic-bezier(.4, 0, .2, 1);--font-mono: "SF Mono", "Fira Code", monospace}html{scroll-behavior:smooth}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition);width:100%}.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:var(--white);box-shadow:0 4px 20px var(--accent-glow)}.btn-primary:hover{box-shadow:0 6px 28px var(--accent-glow);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-success{background:linear-gradient(135deg,var(--success),var(--bg-closable));color:var(--black)}.btn-info{background:linear-gradient(135deg,var(--info),var(--blue));color:var(--white)}.btn-warning{background:linear-gradient(135deg,var(--warning),var(--bg-ring));color:var(--black)}.btn-danger{background:linear-gradient(135deg,var(--danger),var(--danger));color:var(--white)}.btn-outline{background:transparent;border:1px solid var(--border-subtle);color:var(--text-secondary)}.btn-outline:hover{background:var(--bg-card);border-color:var(--border-accent);color:var(--text-primary)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeInUp .5s ease both}.fade-in-delay-1{animation-delay:.1s}.fade-in-delay-2{animation-delay:.2s}.fade-in-delay-3{animation-delay:.3s}.fade-in-delay-4{animation-delay:.4s}.fade-in-delay-5{animation-delay:.5s}.fade-in-delay-6{animation-delay:.6s}