body{--dark-mode: true;--topbar-border-bottom: none;--glow-border-color: oklch(.22 .02 277.72);--glow-border: 1px solid var(--docs-border-color);ui-card{--card-padding: 1.5rem 2rem;--card-description-line-height: 1.6;--cards-gap: 2rem}}@layer page{body{text-wrap:pretty}topbar{position:absolute;top:1rem;width:100%;z-index:var(--float-layer)}p,li{font-size:18px;color:var(--text-color);line-height:1.66}ul{padding-left:0;margin-left:0}li{list-style-type:none}li ui-icon[check]{color:var(--secondary-text-color);background-color:#eab59f1c;border-radius:var(--circular-radius);padding:3px;height:17px;font-size:12px}aboveFold{position:relative;color:var(--standard-80);background-image:var(--angled-gradient);display:flex;flex-direction:column;height:90dvh;h1{color:var(--white)}p{color:var(--white-90)}b,strong{color:#fff}content{position:relative;width:100%;flex-grow:1;z-index:2;line-height:1.18;align-content:center;text-shadow:0px 2px 5px rgba(0,0,0,.3);&:before{position:absolute;width:100%;content:"";top:0;left:0;height:100%;background-image:radial-gradient(circle at 50% 50%,#000000e6,oklch(.32 .08 228.42 / .14) 350px);background-image:radial-gradient(circle at 70% 50%,#000000bf,oklch(.25 .07 228.42 / .35) 350px,oklch(.12 .04 228.42 / .55) 650px,#000 90vw);*/pointer-events: none}}h1{font-size:48px;margin:0}p{font-size:20px;line-height:1.8;margin-top:.5rem;b{color:#fff}}ui-container{position:relative;display:flex;flex-direction:row;align-items:center}.text{margin:0 3rem 0 0;text-align:left;max-width:60ch;ui-button{font-size:18px}}.visual{position:absolute;top:0;right:0;width:500px;height:2600px;margin-left:auto;code-sample,.expressive-code{margin:var(--top-margin);--code-padding: var(--padding-l);--code-border-radius: var(--border-radius-l);--code-background: var(--black-40);--code-font-size: 14px}.sticky{position:sticky;width:inherit;left:auto;top:2em}.segment{padding:var(--padding-l);border:var(--glow-border);border-radius:var(--border-radius-xl);background-image:var(--angled-gradient);pre{--ec-brdWd: 0}.section{display:none}}&.one .section.one,&.two .section.two,&.three .section.three,&.four .section.four{display:block}}canvas#plasma,canvas#gradient{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 2s ease;image-rendering:auto;will-change:contents;contain:strict;overflow:hidden;&.loaded{opacity:1}}&:before{position:absolute;z-index:1;width:150%;height:277%;top:-130%;left:-25%;transform:rotateX(60deg) rotate(0) rotateY(0) translateY(-7%) translate(0) translateZ(0);content:"";pointer-events:none;background:url(/images/ui.png);transform-origin:50% 50%;transform-style:preserve-3d;animation-name:masthead;opacity:.03;animation-duration:15s;animation-fill-mode:both;filter:blur(0px);animation-timing-function:linear;animation-iteration-count:infinite;display:none}&.offscreen{canvas{display:none}&:before{display:none}}}ribbon{position:relative;display:block;color:var(--standard-80);min-height:300px;padding:5rem 0rem;&.proof{ui-cards{font-size:16px}}ui-container{position:relative}.sub.header{color:var(--secondary-text-color);font-size:16px;margin-bottom:0;+.header{margin-top:0rem}}h3.header{font-size:24px;font-weight:700}.expressive-code{margin-top:1rem}}.tour{.copy{min-height:500px;margin-bottom:3rem}ui-container{display:flex;flex-direction:row-reverse}.left{flex:1 1 auto;padding-right:5rem}.right{width:500px;flex:0 0 auto}}.cards{display:flex;flex-direction:row;gap:2rem;flex-wrap:wrap;.card{background-color:#02080e;background-image:var(--subtle-gradient);box-shadow:var(--floating-shadow);flex-grow:1;flex-basis:calc(33.333% - 1.5rem);border-radius:var(--border-radius);border:var(--glow-border);padding:1.5rem;text-align:center;color:var(--white);margin-bottom:5rem;img{display:block;height:165px;margin:-60px auto 1rem}ui-icon{font-size:48px;margin-bottom:.5rem;color:var(--primary-text-color)}.header{font-size:24px;line-height:1.2;font-weight:700;color:var(--primary-text-color);margin:0rem 0rem .5rem}p{max-width:500px;margin:0 auto}}}playground-example{display:block;margin-bottom:5rem}footer{border-top:1px solid var(--glow-border-color);padding:4rem 0 2rem;.columns{display:flex;gap:2rem;justify-content:space-between}.column{--icon-offset: 32px;display:flex;flex-direction:column;gap:.5rem;h4{display:flex;align-items:center;gap:.4em;color:var(--white);font-size:14px;font-weight:600;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.05em;ui-icon{font-size:16px;opacity:.4;margin-right:var(--gap-xs)}}a{color:var(--standard-50);text-decoration:none;font-size:14px;line-height:1.6;padding-left:var(--icon-offset);transition:color .15s ease;&:hover{color:var(--white)}}}.bottom{display:flex;align-items:center;justify-content:space-between;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--glow-border-color);.copyright{color:var(--standard-40);font-size:13px;a:not(:hover){color:var(--white-40)}}.social{color:var(--standard-40);transition:color .15s ease;&:hover{color:var(--white)}ui-icon{font-size:20px}}}}}@keyframes fade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes masthead{0%{background-position:0% 0%}to{background-position:0% 475px}}@layer responsive.mobile{@media only screen and (max-width:767px){aboveFold{height:90vh;content:before{background-image:none}.image{max-width:calc(100% - 2rem);max-height:175px;object-fit:contain;margin:0rem auto 1rem;float:none;display:block}.text{text-align:center}h1{font-size:32px}}ribbon{padding:2rem 1rem;&.proof{ui-cards{margin-top:-3rem;font-size:15px}}.cards{margin-top:0rem;.card{margin:0;flex-basis:100%}}&.tour{.left{padding-right:0rem}.right{display:none}}}canvas#gradient{position:absolute;width:100%;height:100%;--gradient-color-1: #001019;--gradient-color-2: #001019;--gradient-color-3: #001019;--gradient-color-4: #001019}footer .columns{flex-wrap:wrap;gap:2rem 1.5rem;.column{flex-basis:calc(50% - 1rem)}}}}#hero-demo{.prompt-hint{font-size:12px;color:var(--white-30);padding:0 .25rem;margin-bottom:.35rem;transition:color .3s ease,font-size .3s ease;&.live{color:var(--primary-text-color);font-size:14px}}.prompt-bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .6rem .6rem 1.1rem;border-radius:var(--border-radius-l);background:var(--black-50);border:var(--border);.prompt-input{flex:1;font-size:16px;font-family:inherit;color:var(--white-70);background:transparent;border:none;outline:none;min-width:0;transition:color .3s ease;&::placeholder{color:var(--white-30)}}&.submitted .prompt-input{color:var(--white-40)}&.submitted .submit-button{color:var(--white-20)}.submit-button{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--border-radius);background:var(--white-10);border:none;color:var(--white-40);cursor:pointer;transition:background .15s ease,color .15s ease;&.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{display:flex;align-items:center;gap:.4em;font-size:13px;color:var(--white-30);padding:0 .5rem;margin-top:.4rem;margin-bottom:1.25rem;height:1.4em;opacity:0;transition:opacity .2s ease;&.visible{opacity:1}ai-loader{color:var(--secondary-text-color);flex-shrink:0}.cot-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&.shimmer{background:linear-gradient(90deg,var(--white-30) 0%,var(--white-60) 40%,var(--white-60) 60%,var(--white-30) 100%);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:shimmer 1.5s ease-in-out infinite}}}}.demo-segment{border:var(--border);padding:var(--padding-xs) var(--padding-s);opacity:0;background:var(--angled-gradient);transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;&.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{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--secondary-text-color);margin-bottom:var(--gap-xs)}.demo-ui{min-height:36px;display:flex;align-items:center}.demo-note{font-size:12px;color:var(--warning-color, #c47a00);padding:0 var(--padding-s);padding-bottom:var(--padding-xs);opacity:0;transition:opacity .3s ease;&.visible{opacity:1}}.demo-code{pre{--ec-brdWd: 0;background-color:transparent!important;margin:0;white-space:pre-wrap;overflow-wrap:break-word}}}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}