:root{--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--spacing-4xl: 96px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-pill: 999px;--color-primary: #6d28d9;--color-primary-hover: #5b21b6;--color-primary-light: #ede9fe;--color-accent: #3b82f6;--color-accent-hover: #2563eb;--color-accent-light: #dbeafe;--color-success: #10b981;--color-success-light: #d1fae5;--color-warning: #f59e0b;--color-warning-light: #fef3c7;--color-danger: #ef4444;--color-danger-light: #fee2e2;--grad-from: #7c3aed;--grad-to: #2563eb;--grad-from-alt: #6d28d9;--grad-to-alt: #3b82f6;--color-bg: #ffffff;--color-surface: #f7f7f8;--color-surface-raised: #ffffff;--color-border: #e4e4e7;--color-border-strong: #d4d4d8;--color-text: #18181b;--color-text-muted: #71717a;--color-text-subtle: #a1a1aa;--color-sidebar: #0b0b0f;--color-sidebar-text: #a1a1aa;--color-sidebar-text-active: #ffffff;--color-overlay: rgba(0, 0, 0, .5);--chip-draft-bg: #ededf1;--chip-draft-fg: #71717a;--chip-instructions-bg: #ede9fe;--chip-instructions-fg: #6d28d9;--chip-rendering-bg: #dbeafe;--chip-rendering-fg: #2563eb;--chip-ready-bg: #d1fae5;--chip-ready-fg: #059669;--chip-published-bg: #e4e4e7;--chip-published-fg: #3f3f46;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--font-body: Inter, system-ui, -apple-system, sans-serif;--font-display: Space Grotesk, Inter, sans-serif;--font-size-display: clamp(36px, 5vw, 56px);--font-size-h1: clamp(28px, 4vw, 40px);--font-size-h2: clamp(22px, 3vw, 32px);--font-size-h3: 20px;--font-size-body: 16px;--font-size-body-lg: 18px;--font-size-body-sm: 14px;--font-size-caption: 12px;--font-size-label: 13px;--font-size-button: 14px;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease}[data-theme=dark]{--color-bg: #0b0b0f;--color-surface: #151519;--color-surface-raised: #1c1c22;--color-border: #2a2a33;--color-border-strong: #3f3f46;--color-text: #f4f4f5;--color-text-muted: #a1a1aa;--color-text-subtle: #71717a;--color-sidebar: #0b0b0f;--color-sidebar-text: #a1a1aa;--color-sidebar-text-active: #ffffff;--color-overlay: rgba(0, 0, 0, .7);--chip-draft-bg: #2a2a33;--chip-draft-fg: #a1a1aa;--chip-instructions-bg: #2e1a4d;--chip-instructions-fg: #c4b5fd;--chip-rendering-bg: #1e3a5f;--chip-rendering-fg: #93c5fd;--chip-ready-bg: #14532d;--chip-ready-fg: #6ee7b7;--chip-published-bg: #3f3f46;--chip-published-fg: #d4d4d8;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -2px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -4px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .4), 0 8px 10px -6px rgba(0, 0, 0, .3)}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-body);font-size:var(--font-size-body);line-height:1.6;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--transition-base),color var(--transition-base)}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);margin:0;line-height:1.2;font-weight:var(--font-weight-bold)}p{margin:0}button{font-family:inherit;cursor:pointer}input,select,textarea{font-family:inherit;font-size:inherit}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{text-decoration:underline}img{max-width:100%;height:auto;display:block}.brand-gradient{background-image:linear-gradient(135deg,var(--grad-from),var(--grad-to))}.brand-gradient-alt{background-image:linear-gradient(135deg,var(--grad-from-alt),var(--grad-to-alt))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg)}.section{padding:var(--spacing-4xl) 0}@media (max-width: 768px){.section{padding:var(--spacing-3xl) 0}}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}::selection{background-color:var(--color-primary-light);color:var(--color-primary)}[data-theme=dark] ::selection{background-color:var(--color-primary);color:#fff}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-fade-in{animation:fade-in var(--transition-slow) ease-out forwards}.animate-slide-up{animation:slide-up var(--transition-slow) ease-out forwards}.animate-slide-down{animation:slide-down var(--transition-slow) ease-out forwards}.animate-scale-in{animation:scale-in var(--transition-base) ease-out forwards}.animate-float{animation:float 3s ease-in-out infinite}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}.delay-5{animation-delay:.5s}.delay-6{animation-delay:.6s}.gradient-text{color:var(--color-primary)}@supports (-webkit-background-clip: text) or (background-clip: text){.gradient-text{background-image:linear-gradient(135deg,var(--grad-from),var(--grad-to));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}}.gradient-text-alt{color:var(--color-accent)}@supports (-webkit-background-clip: text) or (background-clip: text){.gradient-text-alt{background-image:linear-gradient(135deg,var(--grad-from-alt),var(--grad-to-alt));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}}.btn,.btn-outline,.btn-ghost,.btn-secondary,.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-size:var(--font-size-button);font-weight:var(--font-weight-semibold);line-height:1;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;text-decoration:none}.btn:disabled,.btn-outline:disabled,.btn-ghost:disabled,.btn-secondary:disabled,.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--grad-from),var(--grad-to));color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-lg)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background-color:var(--color-surface-raised);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background-color:var(--color-surface);border-color:var(--color-border-strong)}.btn-ghost{background-color:transparent;color:var(--color-text)}.btn-ghost:hover:not(:disabled){background-color:var(--color-surface)}.btn-outline{background-color:transparent;color:var(--color-primary);border:1px solid var(--color-primary)}.btn-outline:hover:not(:disabled){background-color:var(--color-primary-light)}.btn-lg{padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-body-sm)}.btn-sm{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-caption)}.btn-icon{padding:var(--spacing-sm)}.input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-xs)}.input-label{font-size:var(--font-size-label);font-weight:var(--font-weight-medium);color:var(--color-text)}.input-field{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-body);line-height:1.5;color:var(--color-text);background-color:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast)}.input-field::placeholder{color:var(--color-text-subtle)}.input-field:hover:not(:disabled):not(:focus){border-color:var(--color-border-strong)}.input-field:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.input-field:disabled{opacity:.5;cursor:not-allowed}.input-field.input-error{border-color:var(--color-danger);box-shadow:0 0 0 3px var(--color-danger-light)}.input-error-text{font-size:var(--font-size-caption);color:var(--color-danger)}.input-hint{font-size:var(--font-size-caption);color:var(--color-text-muted)}.card,.card-interactive{background-color:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--spacing-xl);transition:all var(--transition-base)}.card:hover,.card-interactive:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-lg)}.card-interactive{cursor:pointer}.card-interactive:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}.badge{display:inline-flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-caption);font-weight:var(--font-weight-medium);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-pill);white-space:nowrap}.badge-primary{background-color:var(--color-primary-light);color:var(--color-primary)}.badge-success{background-color:var(--color-success-light);color:var(--color-success)}.badge-warning{background-color:var(--color-warning-light);color:var(--color-warning)}.badge-danger{background-color:var(--color-danger-light);color:var(--color-danger)}.badge-neutral{background-color:var(--color-surface);color:var(--color-text-muted);border:1px solid var(--color-border)}.grid{display:grid;gap:var(--spacing-lg)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}@media (max-width: 1024px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.flex-col{display:flex;flex-direction:column}.gap-xs{gap:var(--spacing-xs)}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.text-center{text-align:center}.text-muted{color:var(--color-text-muted)}.text-subtle{color:var(--color-text-subtle)}.text-primary{color:var(--color-primary)}.heading-display{font-size:var(--font-size-display);font-weight:var(--font-weight-bold);line-height:1.1}.heading-h1{font-size:var(--font-size-h1);font-weight:var(--font-weight-bold);line-height:1.2}.heading-h2{font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);line-height:1.3}.heading-h3{font-size:var(--font-size-h3);font-weight:var(--font-weight-semibold);line-height:1.4}.body-lg{font-size:var(--font-size-body-lg);line-height:1.7}.body-sm{font-size:var(--font-size-body-sm);line-height:1.6}.caption{font-size:var(--font-size-caption);line-height:1.5}.icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--grad-from),var(--grad-to));color:#fff}.icon-wrapper-lg{width:64px;height:64px;border-radius:var(--radius-xl)}.icon-wrapper-sm{width:36px;height:36px;border-radius:var(--radius-md)}.screenshot-frame{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl);cursor:default}.screenshot-frame-header{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-surface-raised);border-bottom:1px solid var(--color-border);cursor:default}.screenshot-frame-header *{cursor:default!important}.screenshot-frame-dots{display:flex;gap:4px}.screenshot-frame-dot{width:12px;height:12px;border-radius:50%;background-color:var(--color-border)}.screenshot-frame-dot:nth-child(1){background-color:#ff5f57}.screenshot-frame-dot:nth-child(2){background-color:#febc2e}.screenshot-frame-dot:nth-child(3){background-color:#28ca42}.screenshot-frame-content{padding:var(--spacing-lg);min-height:300px}.carousel{position:relative;overflow:hidden}.carousel-track{display:flex;transition:transform var(--transition-slow) ease-out}.carousel-slide{flex:0 0 100%;padding:0 var(--spacing-sm)}@media (min-width: 768px){.carousel-slide{flex:0 0 50%}}@media (min-width: 1024px){.carousel-slide{flex:0 0 33.333%}}.carousel-nav{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);margin-top:var(--spacing-xl)}.carousel-nav-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-pill);background-color:var(--color-surface-raised);border:1px solid var(--color-border);color:var(--color-text);cursor:pointer;transition:all var(--transition-fast)}.carousel-nav-btn:hover:not(:disabled){background-color:var(--color-surface);border-color:var(--color-border-strong)}.carousel-nav-btn:disabled{opacity:.3;cursor:not-allowed}.carousel-dots{display:flex;gap:var(--spacing-sm)}.carousel-dot{width:10px;height:10px;border-radius:var(--radius-pill);background-color:var(--color-border);cursor:pointer;transition:all var(--transition-fast)}.carousel-dot.active{background-color:var(--color-primary);transform:scale(1.2)}.toast-container{position:fixed;bottom:var(--spacing-xl);right:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-sm);z-index:1000}.toast{display:flex;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);background-color:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);min-width:300px;max-width:400px;animation:slide-in-right var(--transition-base) ease-out}@keyframes slide-in-right{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast-success{border-left:4px solid var(--color-success)}.toast-error{border-left:4px solid var(--color-danger)}.toast-info{border-left:4px solid var(--color-primary)}.toast-close{margin-left:auto;padding:var(--spacing-xs);color:var(--color-text-muted);background:none;border:none;cursor:pointer;border-radius:var(--radius-sm)}.toast-close:hover{color:var(--color-text);background-color:var(--color-surface)}.reveal{opacity:1;transform:translateY(0);transition:opacity var(--transition-slow) ease-out,transform var(--transition-slow) ease-out}.reveal.will-animate{opacity:0;transform:translateY(20px)}.reveal.visible{opacity:1;transform:translateY(0)}.hero-typewriter-wrap{display:inline-block;min-width:9ch;min-height:calc(2.2em + 6px);max-width:100%;vertical-align:bottom}.typewriter{display:inline-flex;align-items:center;font-weight:var(--font-weight-bold);color:var(--color-primary);border-bottom:3px solid var(--color-primary-light);padding-bottom:2px}.typewriter-highlight{background:linear-gradient(135deg,#7c3aed,#ec4899,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:#7c3aed;font-style:italic}.typewriter-cursor{display:inline-block;margin-left:2px;width:3px;height:1.1em;background:var(--color-primary);animation:blink 1s step-end infinite;vertical-align:text-bottom}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.mock-btn{cursor:default!important;pointer-events:none}.radio-card{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md);border:2px solid var(--color-border);border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-fast);background:var(--color-surface-raised);color:var(--color-text);text-align:center}.radio-card:hover{border-color:var(--color-primary)}.radio-card.selected{border-color:var(--color-primary);background:var(--color-primary);color:#fff}.radio-card.selected .caption{color:#ffffffd9}.hidden{display:none!important}@media (min-width: 768px){.md\:flex-center{display:flex!important;align-items:center;justify-content:center}.md\:hidden{display:none!important}}@media (max-width: 767px){.md\:hidden{display:flex!important}}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-xs{max-width:20rem}.max-w-md{max-width:28rem}.mx-auto{margin-left:auto;margin-right:auto}.pt-\[120px\]{padding-top:120px}.pb-4xl{padding-bottom:var(--spacing-4xl)}.min-h-screen{min-height:100vh}.flex-1{flex:1}.overflow-hidden{overflow:hidden}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.top-0{top:0}.left-0{left:0}.right-0{right:0}.z-50{z-index:50}.backdrop-blur-md{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.bg-bg\/80{background:#fffc}[data-theme=dark] .bg-bg\/80{background:#0b0b0fcc}.border-b{border-bottom:1px solid var(--color-border)}.border-t{border-top:1px solid var(--color-border)}.px-lg{padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}.py-md{padding:var(--spacing-md) 0}.py-sm{padding:var(--spacing-sm) 0}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.p-xl{padding:var(--spacing-xl)}.px-xl{padding-left:var(--spacing-xl);padding-right:var(--spacing-xl)}.py-2xl{padding-top:var(--spacing-2xl);padding-bottom:var(--spacing-2xl)}.py-3xl{padding-top:var(--spacing-3xl);padding-bottom:var(--spacing-3xl)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mb-xl{margin-bottom:var(--spacing-xl)}.mb-3xl{margin-bottom:var(--spacing-3xl)}.mb-2xl{margin-bottom:var(--spacing-2xl)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mt-xl{margin-top:var(--spacing-xl)}.mt-2xl{margin-top:var(--spacing-2xl)}.mt-3xl{margin-top:var(--spacing-3xl)}.gap-xl{gap:var(--spacing-xl)}.gap-2xl{gap:var(--spacing-2xl)}.gap-3xl{gap:var(--spacing-3xl)}.items-center{align-items:center}.justify-center{justify-content:center}.text-decoration-none{text-decoration:none}.leading-tight{line-height:1.1}.inline-flex{display:inline-flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.transition-all{transition:all var(--transition-base)}.resize-y{resize:vertical}.min-h-\[100px\]{min-height:100px}.h-2{height:8px}.h-3{height:12px}.h-4{height:16px}.h-6{height:24px}.h-8{height:32px}.h-32{height:128px}.w-2{width:8px}.w-8{width:32px}.w-10{width:40px}.w-16{width:64px}.w-24{width:96px}.w-32{width:128px}.w-40{width:160px}.w-48{width:192px}.rounded-full{border-radius:999px}.rounded-pill{border-radius:var(--radius-pill)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-lg{border-radius:var(--radius-lg)}.bg-surface{background:var(--color-surface)}.bg-surface-raised{background:var(--color-surface-raised)}.bg-primary-light{background:var(--color-primary-light)}.bg-success-light{background:var(--color-success-light)}.bg-accent-light{background:var(--color-accent-light)}.bg-warning-light{background:var(--color-warning-light)}.bg-danger-light{background:var(--color-danger-light)}.text-success{color:var(--color-success)}.text-danger{color:var(--color-danger)}.text-warning{color:var(--color-warning)}.border{border:1px solid var(--color-border)}.border-2{border-width:2px}.border-dashed{border-style:dashed}.font-bold{font-weight:var(--font-weight-bold)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-medium{font-weight:var(--font-weight-medium)}.text-sm{font-size:var(--font-size-body-sm)}.text-xs{font-size:var(--font-size-caption)}.opacity-20{opacity:.2}.blur-2xl{filter:blur(40px)}.-bottom-8{bottom:-32px}.-right-8{right:-32px}.-top-8{top:-32px}.-left-8{left:-32px}.-bottom-12{bottom:-48px}.-right-12{right:-48px}.-top-12{top:-48px}.-left-12{left:-48px}.-top-4{top:-16px}.left-1\/2{left:50%}.-translate-x-1\/2{transform:translate(-50%)}.-translate-y-1\/2{transform:translateY(-50%)}.top-1\/2{top:50%}.top-3{top:12px}.left-4{left:16px}.right-4{right:16px}.bottom-3{bottom:12px}.h-full{height:100%}.flex-wrap{flex-wrap:wrap}.whitespace-nowrap{white-space:nowrap}