body{--dark-mode:true;--topbar-border-bottom:none;--glow-border-color:oklch(22% .02 277.72);--glow-border:1px solid var(--docs-border-color);& ai-prompt{--ai-prompt-label-color:#eab59f}}@layer page{body{text-wrap:pretty}topbar{width:100%;z-index:var(--float-layer);position:absolute;top:1rem}p,li{color:var(--text-color);font-size:18px;line-height:1.66}ul{margin-left:0;padding-left:0}li{list-style-type:none}li ui-icon[check]{color:var(--secondary-text-color);border-radius:var(--circular-radius);background-color:#eab59f1c;height:17px;padding:3px;font-size:12px}aboveFold{color:var(--standard-80);background-image:var(--angled-gradient);flex-direction:column;height:90dvh;display:flex;position:relative;& h1{color:var(--white)}& p{color:var(--white-90)}& b,& strong{color:#fff}& content{z-index:2;text-shadow:0 2px 5px #0000004d;will-change:transform;flex-grow:1;align-content:center;width:100%;line-height:1.18;position:relative;&:before{content:"";pointer-events:none;background-image:radial-gradient(circle at 70%,oklch(0% 0 0/.75) 0%,oklch(25% .07 228.42/.35) 350px,oklch(12% .04 228.42/.55) 650px,oklch(0% 0 0) 90vw);width:100%;height:100%;position:absolute;top:0;left:0}}& h1{margin:0;font-size:48px}& p{margin-top:.5rem;font-size:20px;line-height:1.8;& b{color:#fff}}& ui-container{flex-direction:row;align-items:center;display:flex;position:relative}& .text{text-align:left;max-width:60ch;margin:0 3rem 0 0;& ui-button{font-size:18px}}& .visual{width:500px;height:100%;margin-left:auto;position:absolute;top:0;right:0;& .sticky{width:inherit;position:sticky;top:8em;left:auto}}& canvas#plasma{z-index:0;image-rendering:auto;will-change:contents;contain:strict;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}&.offscreen{& canvas,&:before{display:none}}}ribbon{color:var(--standard-80);min-height:300px;padding:5rem 0;display:block;position:relative;& ui-container{position:relative}& .sub.header{color:var(--secondary-text-color);margin-bottom:0;font-size:16px;&+.header{margin-top:0}}& h3.header{font-size:24px;font-weight:700}& .demo{& .pane{background-color:oklch(16% .015 260/.92);background-image:var(--subtle-angled-gradient);border:var(--glow-border);border-radius:var(--border-radius-l);box-shadow:var(--floating-shadow);padding:var(--padding-s) var(--padding)}& .pane.preview{box-shadow:0 35px 70px -20px #000c, var(--floating-shadow);margin:-1.25rem 0 0 2.5rem}& .label{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--secondary-text-color);margin-bottom:var(--gap-s)}& .expressive-code pre{scrollbar-width:thin;border:none;margin:0;overflow-x:auto;background:0 0!important;& code{font-size:12.5px}}}}.tour{& ui-container{flex-direction:row;gap:4rem;display:flex}& .content{flex:auto}& .visual{flex:0 0 500px;width:500px;& .sticky{perspective:1600px;display:grid;position:sticky;top:4rem;&:before{content:"";filter:blur(24px);pointer-events:none;background:radial-gradient(45% 40% at 75% 15%,oklch(50% .13 240/.3),#0000 70%),radial-gradient(38% 35% at 15% 85%,oklch(75% .09 45/.12),#0000 70%);position:absolute;inset:-3rem -4rem}}}& .example{opacity:0;pointer-events:none;grid-area:1/1;min-width:0;transition:opacity .3s;&.active{opacity:1;pointer-events:auto}}& .agent.flow{gap:var(--gap-s);flex-direction:column;display:flex;& .step{align-items:center;gap:var(--gap-xs);display:flex}& .prompt{color:var(--standard-60);font-style:italic;& ui-icon{color:var(--secondary-text-color)}}& .markup code{color:var(--standard-70);background:var(--standard-5);padding:var(--padding-3xs) var(--padding-2xs);border-radius:var(--border-radius-s);font-size:12.5px}& .result{justify-content:space-between;& .valid{align-items:center;gap:var(--gap-3xs);font-size:var(--text-xs);color:var(--green-text-color);display:inline-flex;& ui-icon{font-size:12px}}}}& .copy{align-content:center;min-height:85dvh;margin-bottom:4rem;padding-right:2rem;&:last-child{margin-bottom:0}}}.nobuild{& ui-container{perspective:1600px;flex-direction:row;align-items:center;gap:4rem;display:flex}& .demo{flex:55%;min-width:0}& .intro{flex:45%;max-width:34rem}}.showcase{& .header{margin-bottom:1.5rem;& h3{margin:0}}& .menu{margin-bottom:2rem;font-size:16px}& .example{display:none;&.active{display:block}}}playground-example{margin-bottom:5rem;display:block}footer{border-top:1px solid var(--glow-border-color);padding:4rem 0 2rem;& .columns{justify-content:space-between;gap:2rem;display:flex}& .column{--icon-offset:32px;flex-direction:column;gap:.5rem;display:flex;& h4{color:var(--white);text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:.4em;margin:0 0 .5rem;font-size:14px;font-weight:600;display:flex;& ui-icon{opacity:.4;margin-right:var(--gap-xs);font-size:16px}}& a{color:var(--standard-50);padding-left:var(--icon-offset);font-size:14px;line-height:1.6;text-decoration:none;transition:color .15s;&:hover{color:var(--white)}}}& .bottom{border-top:1px solid var(--glow-border-color);justify-content:space-between;align-items:center;margin-top:3rem;padding-top:1.5rem;display:flex;& .copyright{color:var(--standard-40);font-size:13px;& a:not(:hover){color:var(--white-40)}}& .social{color:var(--standard-40);transition:color .15s;&:hover{color:var(--white)}& ui-icon{font-size:20px}}}}}@keyframes fade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:no-preference){body.motion{& .tour .content .copy,& .nobuild .demo,& .nobuild .intro,& .showcase ui-container{opacity:0;transition:opacity .7s,transform .7s cubic-bezier(.22,1,.36,1);transform:translateY(28px);&.visible{opacity:1;transform:translateY(0)}}& .nobuild .demo{transition:opacity .7s,transform .9s cubic-bezier(.22,1,.36,1);transform:rotateX(5deg)rotateY(16deg)translateY(36px);&.visible{transform:none}}& .tour .example .demo{transition:transform .7s cubic-bezier(.22,1,.36,1);transform:rotateX(5deg)rotateY(-16deg)scale(.985)}& .tour .example.active .demo{transform:none}}}@keyframes masthead{0%{background-position:0 0}to{background-position:0 475px}}@layer responsive.mobile{@media only screen and (width>=768px) and (width<=1099px){aboveFold{height:auto;padding:7rem 0 4rem;& ui-container{flex-direction:column;align-items:flex-start;gap:3rem}& .text{margin-right:0}& .visual{width:100%;max-width:560px;height:auto;margin:0;padding-top:100px;position:relative;top:auto;right:auto;& .sticky{width:100%;position:static}}}.tour{& ui-container{gap:2.5rem}& .visual{flex:0 0 380px;width:380px}& .copy{padding-right:0}}.nobuild{& ui-container{flex-direction:column-reverse;gap:3rem}& .demo,& .intro{width:100%;max-width:640px}}}@media only screen and (width<=767px){aboveFold{height:auto;padding:5rem 0 3rem;& content:before{background-image:none}& ui-container{flex-direction:column;gap:1rem}& .text{text-align:center;margin:0}& h1{font-size:32px}& .visual{width:100%;height:auto;margin:0;padding-top:100px;position:relative;top:auto;right:auto;& .sticky{width:100%;position:static}}}ribbon{padding:2rem 1rem;& .demo{transform:none;& .pane.preview{margin:var(--margin-s) 0 0;transform:none}}&.tour{& ui-container{flex-direction:column}& .visual{display:none}& .content{padding-right:0}& .copy{min-height:0;margin-bottom:3rem;padding-right:0}}&.nobuild{& ui-container{flex-direction:column-reverse;gap:2rem}& .demo,& .intro{width:100%}}&.showcase{& .menu{max-width:100%;overflow-x:auto}}}canvas#gradient{--gradient-color-1:#001019;--gradient-color-2:#001019;--gradient-color-3:#001019;--gradient-color-4:#001019;width:100%;height:100%;position:absolute}footer .columns{flex-wrap:wrap;gap:2rem 1.5rem;& .column{flex-basis:calc(50% - 1rem)}}}}#hero-demo{& .prompt-hint{color:var(--white-30);margin-bottom:.35rem;padding:0 .25rem;font-size:12px;transition:color .3s,font-size .3s;&.live{color:var(--primary-text-color);font-size:14px}}& .prompt-bar{border-radius:var(--border-radius-l);background:var(--black-50);border:var(--border);align-items:center;gap:.5rem;padding:.6rem .6rem .6rem 1.1rem;display:flex;& .prompt-input{color:var(--white-70);background:0 0;border:none;outline:none;flex:1;min-width:0;font-family:inherit;font-size:16px;transition:color .3s;&::placeholder{color:var(--white-30)}}&.submitted .prompt-input{color:var(--white-40)}&.submitted .submit-button{color:var(--white-20)}& .submit-button{border-radius:var(--border-radius);background:var(--white-10);width:32px;height:32px;color:var(--white-40);cursor:pointer;border:none;flex:none;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex;&.active{background:var(--white-20);color:var(--white-80)}&:hover:not(:disabled){background:var(--white-15);color:var(--white-70)}&:disabled{opacity:.3;cursor:default}& ui-icon{font-size:16px}}}& .cot-line{color:var(--white-30);opacity:0;align-items:center;gap:.4em;height:1.4em;margin-top:.4rem;margin-bottom:1.25rem;padding:0 .5rem;font-size:13px;transition:opacity .2s;display:flex;&.visible{opacity:1}& ai-loader{color:var(--secondary-text-color);flex-shrink:0}& .cot-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;&.shimmer{background:linear-gradient(90deg, var(--white-30) 0%, var(--white-60) 40%, var(--white-60) 60%, var(--white-30) 100%);color:#0000;background-size:200% 100%;background-clip:text;animation:1.5s ease-in-out infinite shimmer}}}}.demo-segment{border:var(--border);padding:var(--padding-xs) var(--padding-s);opacity:0;background:var(--angled-gradient);transition:opacity .4s,transform .4s;transform:translateY(8px);&.visible{opacity:1;transform:translateY(0)}& .demo-pane{padding:var(--padding-s) var(--padding-s);&:first-child{border-bottom:1px solid var(--white-10)}}& .pane-label{text-transform:uppercase;letter-spacing:.05em;color:var(--secondary-text-color);margin-bottom:var(--gap-xs);font-size:11px}& .demo-ui{align-items:center;min-height:36px;display:flex}& .demo-note{color:var(--warning-color,#c47a00);padding:0 var(--padding-s);padding-bottom:var(--padding-xs);opacity:0;font-size:12px;transition:opacity .3s;&.visible{opacity:1}}& .demo-code{& pre{--ec-brdWd:0;white-space:pre-wrap;overflow-wrap:break-word;margin:0;background-color:#0000!important}}}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}