@layer components{.vxl-hero{text-align:center;width:100%;min-height:calc(100dvh - 60px);padding:var(--s-8) var(--s-5);flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}@media (width>=1024px){.vxl-hero{text-align:left;padding:var(--s-8) 10%;flex-direction:row;justify-content:space-between}}.vxl-hero:before{content:"";pointer-events:none;background:radial-gradient(80% 55% at 50% 35%,#84e63c1c 0%,#0000 70%);position:absolute;inset:0}.vxl-hero:after{content:"";pointer-events:none;background-image:radial-gradient(circle,#ffffff0e 1px,#0000 1px);background-size:28px 28px;position:absolute;inset:0;mask-image:radial-gradient(70% 60% at 50% 40%,#000 0%,#0000 100%)}.vxl-hero__inner{z-index:1;align-items:center;gap:var(--s-5);flex-direction:column;max-width:680px;display:flex;position:relative}@media (width>=1024px){.vxl-hero__inner{flex:1;align-items:flex-start}}.vxl-hero__canvas-wrapper{z-index:1;flex:1;justify-content:center;align-items:center;width:100%;min-height:350px;display:flex;position:relative}@media (width>=1024px){.vxl-hero__canvas-wrapper{min-height:600px}}.vxl-hero__canvas{width:100%;height:100%;position:absolute;inset:0}.vxl-hero__eyebrow{justify-content:center;display:flex}@media (width>=1024px){.vxl-hero__eyebrow{justify-content:flex-start}}.vxl-hero__heading{font:var(--t-display);color:var(--fg-1);letter-spacing:-.03em;margin:0;line-height:.96}.vxl-hero__subheading{font:var(--t-body-lg);color:var(--fg-3);max-width:520px;margin:0;line-height:1.6}.vxl-hero__actions{justify-content:center;gap:var(--s-3);margin-top:var(--s-2);flex-wrap:wrap;width:100%;display:flex}@media (width>=1024px){.vxl-hero__actions{justify-content:flex-start}}.vxl-hero__note{font:var(--t-small);color:var(--fg-4);align-items:center;gap:var(--s-2);margin:0;display:flex}.vxl-hero__note:before{content:"";border-radius:var(--r-full);background:var(--grass);width:7px;height:7px;box-shadow:0 0 0 3px #84e63c2e}.vxl-hero__enter{opacity:0;animation:vxl-hero-enter var(--dur-3) var(--ease-out) forwards;transform:translateY(16px)}.vxl-hero__enter[data-step="1"]{animation-delay:60ms}.vxl-hero__enter[data-step="2"]{animation-delay:.14s}.vxl-hero__enter[data-step="3"]{animation-delay:.24s}.vxl-hero__enter[data-step="4"]{animation-delay:.36s}.vxl-hero__enter[data-step="5"]{animation-delay:.46s}@keyframes vxl-hero-enter{to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.vxl-hero__enter{opacity:1;animation:none;transform:none}}@media (width<=640px){.vxl-hero{min-height:auto;padding:var(--s-7) var(--s-4)}.vxl-hero__actions{flex-direction:column;align-items:stretch}.vxl-hero__actions>*{width:100%}.vxl-hero__canvas-wrapper{min-height:220px}}.vxl-showcase{padding-block:var(--s-9);padding-inline:var(--s-5);background:radial-gradient(120% 80% at 50% -10%, #84e63c0f 0%, transparent 60%), var(--ink-850);border-top:1px solid var(--line-1);position:relative;overflow:hidden}.vxl-showcase__bg{z-index:0;pointer-events:none;opacity:.4;position:absolute;inset:0}.vxl-showcase__veil{z-index:1;pointer-events:none;background:radial-gradient(90% 70% at 50% 50%, #1214198c 0%, #121419e0 70%, var(--ink-850) 100%);position:absolute;inset:0}.vxl-showcase__inner{z-index:2;max-width:1200px;margin-inline:auto;position:relative}.vxl-showcase__header{max-width:640px;margin-inline:auto;margin-bottom:var(--s-7);text-align:center;align-items:center;gap:var(--s-3);flex-direction:column;display:flex}.vxl-showcase__eyebrow{color:var(--primary)}.vxl-showcase__heading{letter-spacing:-.02em}.vxl-showcase__description{font:var(--t-body-lg);color:var(--fg-3);margin:0;line-height:1.6}.vxl-showcase__grid{gap:var(--s-5);grid-template-columns:repeat(2,1fr);align-items:stretch;display:grid}.vxl-showcase__grid>.vxl-showcase__reveal{display:flex}.vxl-showcase__grid>.vxl-showcase__reveal>.vxl-showcase__panel{flex:1}.vxl-showcase__panel{gap:var(--s-5);padding:var(--s-6);border-radius:var(--r-4);border:1px solid var(--line-1);background:linear-gradient(to bottom, var(--ink-600) 0%, var(--ink-700) 45%);box-shadow:var(--shadow-2), var(--inset-top);transition:transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);flex-direction:column;display:flex}.vxl-showcase__panel:hover{border-color:var(--line-2);transform:translateY(-4px)}.vxl-showcase__panel-top{gap:var(--s-3);flex-direction:column;display:flex}.vxl-showcase__panel-copy{color:var(--fg-3);margin:0}.vxl-showcase__panel-foot{margin-top:auto}.vxl-showcase__code{font:var(--t-mono);color:var(--fg-1);background:var(--ink-800);border:1px solid var(--line-1);border-radius:var(--r-1);padding:1px 6px}.vxl-showcase__media{border-radius:var(--r-3);border:1px solid var(--line-1);background:radial-gradient(100% 100% at 50% 0%, #ffffff0a 0%, transparent 70%), var(--ink-800);overflow:hidden}.vxl-showcase__media--generate{padding:var(--s-4);gap:var(--s-4);flex-direction:column;display:flex}.vxl-showcase__promptbar{align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);border-radius:var(--r-full);background:var(--ink-700);border:1px solid var(--line-2);display:flex}.vxl-showcase__promptbar-dot{border-radius:var(--r-full);background:var(--primary);width:8px;height:8px;box-shadow:0 0 0 4px var(--primary-tint);flex-shrink:0}.vxl-showcase__promptbar-text{min-width:0;font:var(--t-small);color:var(--fg-2);white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.vxl-showcase__promptbar-cta{font:var(--t-caption);color:var(--fg-on-accent);background:var(--primary);border-radius:var(--r-full);flex-shrink:0;padding:6px 12px}.vxl-showcase__stage{border-radius:var(--r-2);border:1px solid var(--line-1);background:radial-gradient(70% 70% at 50% 35%, #84e63c1a 0%, transparent 70%), var(--ink-900);height:260px;position:relative}.vxl-showcase__stage-canvas{position:absolute;inset:0}.vxl-showcase__editor{background:var(--ink-900);flex-direction:column;display:flex}.vxl-showcase__editor-menubar{align-items:center;gap:var(--s-4);padding:var(--s-2) var(--s-4);border-bottom:1px solid var(--line-1);background:var(--ink-850);font:var(--t-caption);color:var(--fg-3);display:flex}.vxl-showcase__editor-brand{color:var(--primary);font-weight:600}.vxl-showcase__editor-project{color:var(--fg-2);margin-inline:auto}.vxl-showcase__editor-shell{grid-template-columns:1fr 2.4fr 1fr;min-height:240px;display:grid}.vxl-showcase__editor-label{font:var(--t-label);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-4)}.vxl-showcase__editor-left{gap:var(--s-3);padding:var(--s-3);border-right:1px solid var(--line-1);background:var(--ink-850);flex-direction:column;display:flex}.vxl-showcase__editor-row{border-radius:var(--r-1);background:var(--ink-600);height:10px}.vxl-showcase__editor-row.is-dim{background:var(--ink-700);width:70%}.vxl-showcase__editor-left-foot{gap:var(--s-3);flex-direction:column;margin-top:auto;display:flex}.vxl-showcase__swatches{gap:var(--s-2);display:flex}.vxl-showcase__swatches span{border-radius:var(--r-1);border:1px solid var(--line-2);width:16px;height:16px}.vxl-showcase__editor-genbtn{font:var(--t-caption);color:var(--fg-1);text-align:center;border-radius:var(--r-2);background:linear-gradient(100deg, var(--berry) 0%, var(--lava) 100%);padding:7px 10px}.vxl-showcase__editor-viewport{flex-direction:column;align-items:center;display:flex;position:relative}.vxl-showcase__editor-floor{background:radial-gradient(80% 80% at 50% 60%, #3da9ff14 0%, transparent 70%), repeating-linear-gradient(0deg, var(--line-1) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, var(--line-1) 0 1px, transparent 1px 22px);position:absolute;inset:0}.vxl-showcase__editor-canvas{position:absolute;inset:0}.vxl-showcase__editor-gizmos{z-index:1;gap:var(--s-2);margin-top:var(--s-3);display:flex;position:relative}.vxl-showcase__editor-toolbar{z-index:1;gap:var(--s-2);margin-top:auto;margin-bottom:var(--s-3);display:flex;position:relative}.vxl-showcase__pill{font:var(--t-caption);color:var(--fg-2);border-radius:var(--r-full);border:1px solid var(--line-2);backdrop-filter:blur(4px);background:#16181fd9;padding:5px 12px}.vxl-showcase__pill.is-active{color:var(--fg-on-accent);background:var(--primary);border-color:var(--primary)}.vxl-showcase__editor-right{gap:var(--s-2);padding:var(--s-3);border-left:1px solid var(--line-1);background:var(--ink-850);flex-direction:column;display:flex}.vxl-showcase__editor-action{font:var(--t-caption);color:var(--fg-2);border-radius:var(--r-1);border:1px solid var(--line-1);background:var(--ink-700);padding:8px 10px}@media (width<=768px){.vxl-showcase{padding-block:var(--s-7)}.vxl-showcase__grid{gap:var(--s-4);grid-template-columns:1fr}.vxl-showcase__bg{opacity:.28}}@media (width<=640px){.vxl-showcase{padding-block:var(--s-6);padding-inline:var(--s-4)}.vxl-showcase__header{margin-bottom:var(--s-5)}.vxl-showcase__panel{padding:var(--s-5)}.vxl-showcase__stage{height:220px}.vxl-showcase__editor-shell{grid-template-columns:.8fr 2fr;min-height:220px}.vxl-showcase__editor-right,.vxl-showcase__editor-menubar span:nth-child(2),.vxl-showcase__editor-menubar span:nth-child(3),.vxl-showcase__editor-menubar span:nth-child(4),.vxl-showcase__editor-menubar span:nth-child(5),.vxl-showcase__bg{display:none}}@media (prefers-reduced-motion:reduce){.vxl-showcase__panel{transition:none}}.vxl-reveal{opacity:0;transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);will-change:opacity, transform;transform:translateY(18px)}.vxl-reveal[data-reveal=in]{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.vxl-reveal{opacity:1;transition:none;transform:none}}.vxl-agent{padding-block:var(--s-9);padding-inline:var(--s-5);position:relative;overflow:hidden}.vxl-agent:before{content:"";pointer-events:none;background:radial-gradient(60% 50% at 15% 20%,#84e63c14 0%,#0000 70%);position:absolute;inset:0}.vxl-agent__inner{z-index:1;gap:var(--s-8);grid-template-columns:1fr 1fr;align-items:center;max-width:1200px;margin-inline:auto;display:grid;position:relative}@media (width<=1024px){.vxl-agent__inner{gap:var(--s-7);grid-template-columns:1fr}}.vxl-agent__eyebrow{color:var(--primary)}.vxl-agent__heading{margin-top:var(--s-3);letter-spacing:-.02em}.vxl-agent__lede{font:var(--t-body-lg);color:var(--fg-3);margin:var(--s-4) 0 0;max-width:520px;line-height:1.6}.vxl-agent__compare{gap:var(--s-3);margin-top:var(--s-6);flex-direction:column;display:flex}.vxl-agent__chip{align-items:flex-start;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-3);border:1px solid var(--line-2);background:linear-gradient(180deg, var(--ink-600), var(--ink-700));display:flex}.vxl-agent__chip strong{font:var(--t-h4);color:var(--fg-1);display:block}.vxl-agent__chip span:not(.vxl-agent__chip-dot){font:var(--t-small);color:var(--fg-3);margin-top:2px;display:block}.vxl-agent__chip-dot{border-radius:var(--r-full);flex:none;width:10px;height:10px;margin-top:6px}.vxl-agent__chip--good{box-shadow:var(--inset-top);border-color:#84e63c59}.vxl-agent__chip--good .vxl-agent__chip-dot{background:var(--grass);box-shadow:0 0 0 3px #84e63c2e}.vxl-agent__chip--muted{opacity:.7}.vxl-agent__chip--muted .vxl-agent__chip-dot{background:var(--fg-4)}.vxl-agent__actions{gap:var(--s-3);margin-top:var(--s-6);flex-wrap:wrap;display:flex}.vxl-agent__terminal{border:1px solid var(--line-2);border-radius:var(--r-4);background:linear-gradient(180deg, var(--ink-800), var(--ink-900));box-shadow:var(--shadow-3), var(--inset-top);flex-direction:column;min-height:360px;display:flex;overflow:hidden}.vxl-agent__terminal-bar{align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line-1);background:linear-gradient(180deg, var(--ink-700), var(--ink-800));display:flex}.vxl-agent__dot{border-radius:var(--r-full);width:11px;height:11px}.vxl-agent__dot--r{background:var(--lava)}.vxl-agent__dot--y{background:var(--gold)}.vxl-agent__dot--g{background:var(--grass)}.vxl-agent__terminal-title{font:var(--t-mono);color:var(--fg-4);margin-left:var(--s-2);margin-right:auto}.vxl-agent__terminal-body{padding:var(--s-4);gap:var(--s-2);flex-direction:column;flex:1;display:flex}.vxl-agent__line{align-items:baseline;gap:var(--s-3);animation:vxl-agent-line var(--dur-3) var(--ease-out);grid-template-columns:auto 1fr auto;padding-block:2px;display:grid}@keyframes vxl-agent-line{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.vxl-agent__prompt{font:var(--t-mono);color:var(--grass)}.vxl-agent__code{font:var(--t-mono);color:var(--fg-2);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.vxl-agent__fn{color:var(--sky)}.vxl-agent__str{color:var(--grass)}.vxl-agent__num{color:var(--gold)}.vxl-agent__hex{color:var(--berry)}.vxl-agent__caret{background:var(--grass);width:8px;height:1.05em;margin-left:2px;animation:1s steps(2,start) infinite vxl-agent-blink;display:inline-block;translate:0 2px}@keyframes vxl-agent-blink{0%,to{opacity:1}50%{opacity:0}}.vxl-agent__log{align-items:center;gap:var(--s-2);font:var(--t-caption);color:var(--fg-4);white-space:nowrap;justify-self:end;display:inline-flex}.vxl-agent__log-swatch{border:1px solid var(--line-2);border-radius:3px;width:10px;height:10px}@media (width<=640px){.vxl-agent{padding-block:var(--s-7);padding-inline:var(--s-4)}.vxl-agent__log{display:none}.vxl-agent__line{grid-template-columns:auto 1fr}}@media (prefers-reduced-motion:reduce){.vxl-agent__line,.vxl-agent__caret{animation:none}}.vxl-features{padding-block:var(--s-9);padding-inline:var(--s-5)}.vxl-features__inner{max-width:1200px;margin-inline:auto}.vxl-features__header{max-width:620px;margin-bottom:var(--s-7);gap:var(--s-3);flex-direction:column;display:flex}.vxl-features__eyebrow{color:var(--primary)}.vxl-features__heading{letter-spacing:-.02em}.vxl-features__description{font:var(--t-body-lg);color:var(--fg-3);margin:0;line-height:1.6}.vxl-features__steps{gap:var(--s-4);margin-bottom:var(--s-7);grid-template-columns:repeat(3,1fr);display:grid}.vxl-features__step{padding:var(--s-5);border-radius:var(--r-3);border:1px solid var(--line-1);gap:var(--s-2);background:linear-gradient(#ffffff05,#0000);flex-direction:column;display:flex;position:relative}.vxl-features__step-n{font:var(--t-display);color:#0000;background:linear-gradient(160deg, var(--grass), var(--ice));margin-bottom:var(--s-2);background-clip:text;font-size:34px;line-height:1}.vxl-features__grid{gap:var(--s-4);grid-template-columns:repeat(auto-fill,minmax(260px,1fr));display:grid}.vxl-features__card{height:100%;transition:transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out)}.vxl-features__card:hover{border-color:var(--line-3);transform:translateY(-4px)}.vxl-features__card-inner{gap:var(--s-3);flex-direction:column;display:flex}@media (width<=768px){.vxl-features{padding-block:var(--s-7)}.vxl-features__steps{grid-template-columns:1fr}}@media (width<=640px){.vxl-features{padding-inline:var(--s-4)}.vxl-features__grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.vxl-features__card:hover{transform:none}}.vxl-cta{padding-block:var(--s-9);padding-inline:var(--s-5)}.vxl-cta__panel{max-width:880px;padding:var(--s-9) var(--s-7);text-align:center;border-radius:var(--r-4);border:1px solid var(--line-2);background:radial-gradient(ellipse 70% 90% at 50% 0%, #84e63c1f 0%, transparent 70%), linear-gradient(180deg, var(--ink-700), var(--ink-800));box-shadow:var(--shadow-3), var(--inset-top);margin-inline:auto;position:relative;overflow:hidden}.vxl-cta__panel:after{content:"";pointer-events:none;background-image:radial-gradient(circle,#ffffff0d 1px,#0000 1px);background-size:26px 26px;position:absolute;inset:0;mask-image:radial-gradient(70% 70% at 50% 0,#000 0%,#0000 75%)}.vxl-cta__panel>*{z-index:1;position:relative}.vxl-cta__eyebrow{color:var(--primary);display:block}.vxl-cta__heading{font:var(--t-h1);color:var(--fg-1);letter-spacing:-.02em;margin:var(--s-3) 0 0;font-size:clamp(30px,4.5vw,46px)}.vxl-cta__sub{font:var(--t-body-lg);color:var(--fg-3);max-width:520px;margin:var(--s-4) auto 0;line-height:1.6}.vxl-cta__actions{justify-content:center;gap:var(--s-3);margin-top:var(--s-6);flex-wrap:wrap;display:flex}@media (width<=640px){.vxl-cta{padding-block:var(--s-7);padding-inline:var(--s-4)}.vxl-cta__panel{padding:var(--s-7) var(--s-5)}.vxl-cta__actions{flex-direction:column}.vxl-cta__actions>*,.vxl-cta__actions .vxl-button{width:100%}}}
