@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap');
:root{color-scheme:dark;--base:#181818;--band:#1f1f1f;--panel:#272727;--line:#414141;--text:#fafaf6;--muted:#bdbdb7;--lime:#dcf987;--curve:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}body{margin:0;background:var(--base);color:var(--text);font-family:Manrope,system-ui,sans-serif}h1,h2,h3,p{margin:0}h1,h2,h3{text-wrap:balance;letter-spacing:-.045em}p{text-wrap:pretty}a{color:inherit;text-decoration:none}button,input,textarea{font-family:inherit}a,button,summary{touch-action:manipulation}a:hover,summary:hover{color:var(--lime)}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--lime);outline-offset:4px}button:active,.button:active{transform:scale(.98)}section[id],main{scroll-margin-top:96px}
.heading-1{font-size:60px;line-height:1;font-weight:600}.heading-2{font-size:48px;line-height:1;font-weight:600}.heading-4{font-size:30px;line-height:36px;font-weight:600}.heading-5{font-size:24px;line-height:32px;font-weight:600}.title-2{font-size:18px;line-height:28px;font-weight:500}.title-3{font-size:16px;line-height:24px;font-weight:500}.title-4{font-size:14px;line-height:20px;font-weight:500}.body-3{font-size:16px;line-height:24px;font-weight:400}.body-6,.caption-2{font-size:14px;line-height:20px;font-weight:400}.caption-3{font-size:12px;line-height:16px;font-weight:600}.button-md{font-size:16px;line-height:24px;font-weight:600}.button-sm{font-size:14px;line-height:20px;font-weight:600}
.wrap{width:min(1184px,calc(100% - 48px));margin-inline:auto}.skip{position:fixed;z-index:9;top:8px;left:8px;background:var(--base);padding:12px;transform:translateY(-150%)}.skip:focus{transform:none}header{position:sticky;z-index:4;top:16px;display:flex;justify-content:center;margin:16px 16px 0}nav,.navlinks,.brand{display:flex;align-items:center;gap:24px}nav{position:relative;padding:8px 12px;border:1px solid var(--line);border-radius:16px;background:#272727de;backdrop-filter:blur(16px)}.brand{gap:8px;white-space:nowrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:8px 12px;border:0;border-radius:8px;background:var(--lime);color:#131209;cursor:pointer;transition:transform 500ms var(--curve)}.button:hover{color:#131209;background:#edffb4}.toggle{display:none}
.hero{padding-block:96px;min-height:560px;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:48px}.eyebrow{color:var(--lime);letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:8px}.eyebrow span{width:8px;height:8px;border-radius:50%;background:var(--lime)}h1{margin-top:16px;max-width:680px;background:linear-gradient(90deg,#fff,#9b9b9b);background-clip:text;color:transparent}.lede,.intro{max-width:680px;margin:24px 0;color:var(--muted)}.note{margin-top:12px;color:var(--muted)}
.demo{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}.demo-top,.demo-body{padding:24px}.demo-top{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#313131}.chip,.index{border:1px solid var(--line);border-radius:6px;padding:4px 8px;color:var(--lime)}.query{margin:16px 0;padding:12px;background:#313131;border-radius:8px}.answer{padding:16px;background:var(--base);border-radius:8px}.answer p+p{margin-top:8px}.accent{color:var(--lime)}.source{color:var(--muted);margin-top:12px}
.band{background:var(--band)}.section,.tag{padding-block:80px}.section h2{margin-top:12px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}.cards article,.example{padding:24px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}.index{display:inline-block}.cards h3,.example h3{margin-top:16px}.cards p,.example .body-3,details p{margin-top:8px;color:var(--muted)}.tag p{max-width:680px;margin-inline:auto;text-align:center}.tag span{transition:opacity 500ms var(--curve)}.tag.animated span{opacity:.3}.tag.animated span.lit{opacity:1}.example{margin-top:24px}.example .body-3{max-width:680px}.split{display:grid;grid-template-columns:1fr 1.2fr;gap:48px}.faqs{display:grid;gap:8px}details{padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}summary{cursor:pointer}form,label{display:grid;gap:8px}form{gap:16px}input,textarea{width:100%;background:var(--base);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:8px 12px}textarea{resize:vertical}form button{justify-self:start}form .note{margin:0}footer{display:flex;justify-content:space-between;align-items:center;padding-block:24px;gap:16px}footer div{display:flex;gap:16px}.plain p{max-width:680px;margin-block:24px}.reveal{animation:rise 700ms var(--curve) both}@keyframes rise{from{transform:translateY(32px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:820px){.hero{grid-template-columns:1fr;gap:32px;padding-block:48px}.cards,.split{grid-template-columns:1fr}.section,.tag{padding-block:64px}}
@media(max-width:600px){.wrap{width:calc(100% - 32px)}.heading-1,.heading-2{font-size:36px;line-height:40px}.desktop{display:none}nav{width:100%;justify-content:space-between}.toggle{display:grid;gap:4px;place-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--base);color:var(--text);cursor:pointer}.toggle i{width:16px;height:2px;background:currentColor;transition:transform 500ms var(--curve)}.toggle[aria-expanded=true] i:first-child{transform:translateY(3px) rotate(45deg)}.toggle[aria-expanded=true] i:last-child{transform:translateY(-3px) rotate(-45deg)}.navlinks{display:none;position:absolute;inset:calc(100% + 8px) 0 auto;min-height:calc(100dvh - 96px);padding:32px;background:#181818fa;backdrop-filter:blur(16px);border-radius:16px;align-items:flex-start;flex-direction:column}.navlinks.open{display:flex}.navlinks.open a{animation:menu 500ms var(--curve) both;animation-delay:calc(var(--i,0)*60ms)}.navlinks a:nth-child(2){--i:1}.navlinks a:nth-child(3){--i:2}.navlinks a:nth-child(4){--i:3}.demo-top,.demo-body{padding:16px}}
@keyframes menu{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.tag.animated span{opacity:1}}