:root{--color-bg:#0a0a0a;--color-surface:#141414;--color-surface-raised:#1a1a1a;--color-border:#262626;--color-border-hover:#404040;--color-text:#fafafa;--color-text-secondary:#a3a3a3;--color-text-muted:#737373;--color-accent:#f97316;--color-accent-hover:#fb923c;--color-accent-dim:#f973161f;--color-green:#22c55e;--color-red:#ef4444;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:2rem;--space-8:2.5rem;--space-9:3rem;--space-10:4rem;--space-12:5rem;--space-16:8rem;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-pill:999px;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Cascadia Code", "Fira Code", Consolas, monospace;--fs-xs:.75rem;--fs-sm:.8125rem;--fs-base:.9375rem;--fs-md:1.0625rem;--fs-lg:1.25rem;--fs-xl:1.5rem;--fs-2xl:2rem;--fs-3xl:2.5rem;--fs-hero:clamp(2.5rem, 5vw, 3.75rem);--lh-tight:1.15;--lh-snug:1.3;--lh-normal:1.6;--duration-fast:.15s;--duration-base:.2s;--duration-slow:.35s;--ease:cubic-bezier(.25, .46, .45, .94)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}html,body,#root{min-height:100dvh}body{font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--color-text-secondary);background:var(--color-bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{color:var(--color-text);line-height:var(--lh-tight);font-weight:700}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit;background:0 0;border:none}button{cursor:pointer}ul,ol{list-style:none}img,svg{max-width:100%;display:block}code,pre{font-family:var(--font-mono)}::selection{color:var(--color-text);background:#f973164d}.skeleton-auto-overlay{pointer-events:none;z-index:1;position:absolute;inset:0;overflow:hidden}.skeleton-auto-node{background:var(--skeleton-base,#e0e0e0);display:block;position:absolute;overflow:hidden}.skeleton-auto-node--type-block{opacity:.42}.skeleton-auto-node--type-block:after{display:none}.skeleton-auto-node:after{content:"";background-image:linear-gradient(90deg, transparent 0%, var(--skeleton-highlight,#f0f0f0) 50%, transparent 100%);position:absolute;inset:0;transform:translate(-100%)}.skeleton-auto-node--shimmer:after{animation:1.4s ease-in-out infinite skeleton-auto-shimmer}.skeleton-auto-node--wave:after{animation:1.8s linear infinite skeleton-auto-wave}.skeleton-auto-node--pulse{animation:1.5s ease-in-out infinite skeleton-auto-pulse}.skeleton-auto-node--pulse:after,.skeleton-auto-node--none:after{display:none}@keyframes skeleton-auto-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes skeleton-auto-wave{0%{transform:translate(-120%)}to{transform:translate(120%)}}@keyframes skeleton-auto-pulse{0%,to{opacity:.55}50%{opacity:1}}@media (prefers-reduced-motion:reduce){.skeleton-auto-node--shimmer:after,.skeleton-auto-node--wave:after,.skeleton-auto-node--pulse{animation:none!important;transform:none!important}}.app-shell{width:100%;overflow-x:hidden}.container{width:min(1140px, calc(100% - var(--space-7) * 2));margin:0 auto}.section{padding:var(--space-16) 0}.section+.section{border-top:1px solid var(--color-border)}.reveal{animation:reveal-up .6s var(--ease) both;animation-delay:var(--delay,0s)}@keyframes reveal-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.navbar{z-index:100;-webkit-backdrop-filter:blur(16px)saturate(180%);border-bottom:1px solid var(--color-border);background:#0a0a0acc;position:sticky;top:0}.navbar .container{justify-content:space-between;align-items:center;height:64px;display:flex}.navbar-logo{align-items:center;gap:var(--space-3);font-weight:700;font-size:var(--fs-md);color:var(--color-text);display:flex}.navbar-logo-icon{border-radius:var(--radius-sm);background:var(--color-accent);color:#fff;justify-content:center;align-items:center;width:32px;height:32px;font-size:.875rem;font-weight:800;display:flex}.navbar-actions{align-items:center;gap:var(--space-4);display:flex}.navbar-link{align-items:center;gap:var(--space-2);color:var(--color-text-secondary);font-size:var(--fs-sm);transition:color var(--duration-fast) var(--ease);font-weight:500;display:flex}.navbar-link:hover{color:var(--color-text)}.navbar-link svg{width:18px;height:18px}.btn{justify-content:center;align-items:center;gap:var(--space-2);font-size:var(--fs-sm);border-radius:var(--radius-sm);transition:all var(--duration-fast) var(--ease);white-space:nowrap;padding:.5rem 1.125rem;font-weight:600;display:inline-flex}.btn-primary{background:var(--color-accent);color:#fff}.btn-primary:hover{background:var(--color-accent-hover);transform:translateY(-1px)}.btn-outline{border:1px solid var(--color-accent);color:var(--color-accent);background:0 0}.btn-outline:hover{background:var(--color-accent-dim);transform:translateY(-1px)}.btn-ghost{color:var(--color-text-secondary);background:var(--color-surface-raised);border:1px solid var(--color-border)}.btn-ghost:hover{border-color:var(--color-border-hover);color:var(--color-text);transform:translateY(-1px)}.hero{padding:var(--space-16) 0 var(--space-12);text-align:center}.hero-badge{align-items:center;gap:var(--space-2);background:var(--color-accent-dim);border-radius:var(--radius-pill);color:var(--color-accent);font-size:var(--fs-xs);letter-spacing:.03em;text-transform:uppercase;margin-bottom:var(--space-7);border:1px solid #f9731633;padding:.375rem .875rem;font-weight:600;display:inline-flex}.hero h1{font-size:var(--fs-hero);font-weight:800;line-height:var(--lh-tight);max-width:800px;margin:0 auto var(--space-6);letter-spacing:-.02em}.hero h1 .accent{color:var(--color-accent)}.hero-subtitle{font-size:var(--fs-lg);color:var(--color-text-secondary);max-width:600px;margin:0 auto var(--space-8);line-height:var(--lh-normal)}.terminal-box{align-items:center;gap:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--space-7);max-width:100%;padding:.75rem 1rem .75rem 1.25rem;display:inline-flex}.terminal-box code{font-size:var(--fs-base);color:var(--color-text);white-space:nowrap}.terminal-box .dollar{color:var(--color-accent);-webkit-user-select:none;user-select:none}.terminal-box .copy-btn{font-size:var(--fs-xs);color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:all var(--duration-fast) var(--ease);padding:.375rem .75rem;font-weight:600}.terminal-box .copy-btn:hover{color:var(--color-text);border-color:var(--color-border-hover)}.terminal-box .copy-btn.copied{color:var(--color-green);border-color:#22c55e4d}.hero-cta-row{justify-content:center;align-items:center;gap:var(--space-4);margin-bottom:var(--space-9);flex-wrap:wrap;display:flex}.stats-row{justify-content:center;align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.stat-badge{align-items:center;gap:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-pill);font-size:var(--fs-xs);color:var(--color-text-muted);padding:.375rem .875rem;font-weight:500;display:inline-flex}.stat-badge .stat-value{color:var(--color-accent);font-weight:700}.stat-badge svg{width:14px;height:14px}.problem-section{background:var(--color-surface)}.section-label{text-transform:uppercase;letter-spacing:.1em;font-size:var(--fs-xs);color:var(--color-accent);margin-bottom:var(--space-4);font-weight:700;display:inline-block}.section-title{font-size:var(--fs-2xl);margin-bottom:var(--space-3);letter-spacing:-.01em;font-weight:800}.section-subtitle{font-size:var(--fs-md);color:var(--color-text-secondary);max-width:620px;margin-bottom:var(--space-9)}.problem-grid{gap:var(--space-7);grid-template-columns:1fr 1fr;display:grid}.problem-card{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-7);transition:border-color var(--duration-base) var(--ease)}.problem-card:hover{border-color:var(--color-border-hover)}.problem-card-header{align-items:center;gap:var(--space-3);margin-bottom:var(--space-6);display:flex}.problem-card-icon{border-radius:var(--radius-sm);justify-content:center;align-items:center;width:36px;height:36px;font-size:1.125rem;display:flex}.problem-card-icon.before{color:var(--color-red);background:#ef44441f}.problem-card-icon.after{color:var(--color-green);background:#22c55e1f}.problem-card-header h3{font-size:var(--fs-lg);font-weight:700}.problem-list{gap:var(--space-4);display:grid}.problem-list-item{align-items:flex-start;gap:var(--space-3);font-size:var(--fs-sm);line-height:var(--lh-normal);display:flex}.problem-list-item .icon{flex-shrink:0;margin-top:2px;font-size:.875rem}.problem-list-item .icon.red{color:var(--color-red)}.problem-list-item .icon.green{color:var(--color-green)}.features-grid{gap:var(--space-5);grid-template-columns:repeat(3,1fr);display:grid}.feature-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-7);transition:all var(--duration-base) var(--ease);position:relative;overflow:hidden}.feature-card:before{content:"";background:linear-gradient(90deg, transparent, var(--color-accent), transparent);opacity:0;height:1px;transition:opacity var(--duration-base) var(--ease);position:absolute;top:0;left:0;right:0}.feature-card:hover{border-color:var(--color-border-hover);transform:translateY(-2px)}.feature-card:hover:before{opacity:1}.feature-icon{border-radius:var(--radius-md);background:var(--color-accent-dim);width:42px;height:42px;color:var(--color-accent);margin-bottom:var(--space-5);justify-content:center;align-items:center;font-size:1.25rem;display:flex}.feature-card h3{font-size:var(--fs-md);margin-bottom:var(--space-2);font-weight:700}.feature-card p{font-size:var(--fs-sm);color:var(--color-text-secondary);line-height:var(--lh-normal)}.code-section-grid{gap:var(--space-7);display:grid}.code-step{gap:var(--space-7);grid-template-columns:1fr 1.2fr;align-items:start;display:grid}.code-step:nth-child(2n){direction:rtl}.code-step:nth-child(2n)>*{direction:ltr}.code-step-info{padding-top:var(--space-4)}.code-step-number{background:var(--color-accent-dim);width:28px;height:28px;color:var(--color-accent);font-size:var(--fs-xs);margin-bottom:var(--space-4);border-radius:50%;justify-content:center;align-items:center;font-weight:700;display:inline-flex}.code-step-info h3{font-size:var(--fs-xl);margin-bottom:var(--space-3);font-weight:700}.code-step-info p{font-size:var(--fs-base);color:var(--color-text-secondary);line-height:var(--lh-normal)}.code-block{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:border-color var(--duration-base) var(--ease);overflow:hidden}.code-block:hover{border-color:var(--color-border-hover)}.code-block-header{border-bottom:1px solid var(--color-border);background:#14141499;justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.code-block-dots{gap:6px;display:flex}.code-block-dots span{border-radius:50%;width:10px;height:10px}.code-block-dots span:first-child{background:#ef4444}.code-block-dots span:nth-child(2){background:#eab308}.code-block-dots span:nth-child(3){background:#22c55e}.code-block-title{font-size:var(--fs-xs);font-family:var(--font-mono);color:var(--color-text-muted)}.code-block-copy{font-size:var(--fs-xs);color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:all var(--duration-fast) var(--ease);padding:.25rem .625rem;font-weight:600}.code-block-copy:hover{color:var(--color-text);border-color:var(--color-border-hover)}.code-block-copy.copied{color:var(--color-green);border-color:#22c55e4d}.code-block pre{margin:0;padding:1.25rem 1.5rem;overflow-x:auto}.code-block code{font-size:var(--fs-sm);color:var(--color-text-secondary);line-height:1.7}.code-block code .kw{color:#c084fc}.code-block code .fn{color:#60a5fa}.code-block code .str{color:#4ade80}.code-block code .tag{color:#f97316}.code-block code .atr{color:#38bdf8}.code-block code .cmt{color:#525252;font-style:italic}.code-block code .pnc{color:#737373}.code-block code .dollar{color:var(--color-accent)}.demo-layout{gap:var(--space-6);grid-template-columns:280px 1fr;display:grid}.demo-controls{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);gap:var(--space-5);align-content:start;display:grid}.demo-controls h3{font-size:var(--fs-md);font-weight:700}.control-group{gap:var(--space-2);display:grid}.control-label{font-size:var(--fs-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.control-segmented{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-sm);grid-template-columns:repeat(2,1fr);gap:4px;padding:3px;display:grid}.control-seg-btn{font-size:var(--fs-xs);text-transform:capitalize;color:var(--color-text-muted);transition:all var(--duration-fast) var(--ease);border-radius:4px;padding:.375rem .5rem;font-weight:600}.control-seg-btn.active{background:var(--color-accent-dim);color:var(--color-accent)}.control-seg-btn:hover:not(.active){color:var(--color-text-secondary)}.control-color-row{gap:var(--space-2);grid-template-columns:1fr 1fr;display:grid}.color-input-wrap{gap:4px;display:grid}.color-input-wrap input[type=color]{border-radius:var(--radius-sm);border:1px solid var(--color-border);cursor:pointer;width:100%;height:32px;padding:2px}.control-range{width:100%;accent-color:var(--color-accent);height:4px}.control-toggle{align-items:center;gap:var(--space-2);font-size:var(--fs-sm);color:var(--color-text-secondary);cursor:pointer;display:flex}.control-toggle input[type=checkbox]{accent-color:var(--color-accent);width:16px;height:16px}.btn-reload{width:100%;font-size:var(--fs-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);transition:all var(--duration-fast) var(--ease);padding:.5rem 1rem;font-weight:600}.btn-reload:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent)}.btn-reload:disabled{opacity:.5;cursor:not-allowed}.progress-bar{border-radius:var(--radius-pill);background:var(--color-border);height:3px;margin-top:var(--space-2);overflow:hidden}.progress-bar-fill{border-radius:inherit;background:var(--color-accent);height:100%;transition:width var(--duration-base) var(--ease)}.demo-preview-area{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.demo-preview-header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:.75rem 1.25rem;display:flex}.demo-preview-header span{font-size:var(--fs-xs);color:var(--color-text-muted);font-weight:500}.template-nav{align-items:center;gap:var(--space-2);display:flex}.template-nav button{border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:var(--fs-xs);transition:all var(--duration-fast) var(--ease);padding:.25rem .5rem}.template-nav button:hover:not(:disabled){color:var(--color-text);border-color:var(--color-border-hover)}.template-nav button:disabled{opacity:.4;cursor:not-allowed}.template-nav span{font-size:var(--fs-xs);color:var(--color-text-muted);text-align:center;min-width:30px}.demo-preview-canvas{padding:var(--space-7);background:#0f0f0f;justify-content:center;align-items:flex-start;min-height:520px;display:flex}.demo-preview-canvas>*{width:100%}.demo-card{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);max-width:480px;margin:0 auto;overflow:hidden}.demo-card-cover{height:120px}.demo-card-body{padding:var(--space-5);gap:var(--space-4);display:grid}.demo-card-head{gap:var(--space-3);grid-template-columns:44px 1fr;align-items:center;display:grid}.demo-card-avatar{background:#ffffff14;border-radius:50%;width:44px;height:44px}.demo-card-head .eyebrow{font-size:var(--fs-xs);color:var(--color-accent);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.demo-card-head h3{font-size:var(--fs-md);margin-top:2px}.demo-card-head .sub{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:1px}.demo-card-desc{font-size:var(--fs-sm);color:var(--color-text-secondary);line-height:var(--lh-normal)}.demo-metric-grid{gap:var(--space-3);grid-template-columns:repeat(3,1fr);display:grid}.demo-metric{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);gap:2px;padding:.625rem .75rem;display:grid}.demo-metric span{font-size:var(--fs-xs);color:var(--color-text-muted)}.demo-metric strong{font-size:var(--fs-base);color:var(--color-text)}.demo-card-cta{border-radius:var(--radius-sm);background:var(--color-accent);color:#fff;font-size:var(--fs-sm);transition:background var(--duration-fast) var(--ease);border:none;justify-self:start;padding:.5rem 1rem;font-weight:600}.demo-card-cta:hover{background:var(--color-accent-hover)}.animation-gallery-grid{gap:var(--space-4);margin-top:var(--space-7);grid-template-columns:repeat(4,1fr);display:grid}.anim-gallery-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);transition:border-color var(--duration-base) var(--ease)}.anim-gallery-item:hover{border-color:var(--color-border-hover)}.anim-gallery-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-accent);margin-bottom:var(--space-3);font-weight:700}.anim-gallery-card{border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface-raised);overflow:hidden}.anim-gallery-card-cover{background:linear-gradient(130deg,#262626,#1a1a1a);height:48px}.anim-gallery-card-body{padding:var(--space-3);gap:var(--space-2);display:grid}.anim-gallery-card-body h4{font-size:var(--fs-sm);font-weight:600}.anim-gallery-card-body p{font-size:var(--fs-xs);color:var(--color-text-muted)}.anim-gallery-card-body button{border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--fs-xs);color:var(--color-text-muted);justify-self:start;padding:.25rem .5rem}.api-table-wrapper{margin-top:var(--space-7);overflow-x:auto}.api-table{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}.api-table th,.api-table td{text-align:left;border-bottom:1px solid var(--color-border);padding:.875rem 1rem}.api-table th{font-weight:700;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);border-bottom:2px solid var(--color-border)}.api-table td{color:var(--color-text-secondary)}.api-table td:first-child{font-family:var(--font-mono);color:var(--color-accent);font-weight:500;font-size:var(--fs-xs)}.api-table td:nth-child(2){font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-muted)}.api-table tr:hover td{background:#f9731608}.footer{border-top:1px solid var(--color-border);padding:var(--space-9) 0}.footer .container{justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.footer-left{align-items:center;gap:var(--space-4);display:flex}.footer-logo{font-weight:700;font-size:var(--fs-sm);color:var(--color-text)}.footer-copy{font-size:var(--fs-xs);color:var(--color-text-muted)}.footer-links{gap:var(--space-5);display:flex}.footer-links a{font-size:var(--fs-sm);color:var(--color-text-muted);transition:color var(--duration-fast) var(--ease)}.footer-links a:hover{color:var(--color-accent)}@media (width<=1024px){.features-grid{grid-template-columns:repeat(2,1fr)}.code-step{grid-template-columns:1fr}.code-step:nth-child(2n){direction:ltr}.demo-layout{grid-template-columns:1fr}.animation-gallery-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.hero h1{font-size:clamp(1.75rem,6vw,2.5rem)}.problem-grid,.features-grid,.demo-metric-grid,.animation-gallery-grid{grid-template-columns:1fr}.navbar .container{height:56px}.navbar-link span{display:none}.section{padding:var(--space-10) 0}.stats-row{gap:var(--space-2)}.stat-badge{padding:.25rem .625rem;font-size:.6875rem}.footer .container{text-align:center;flex-direction:column}}