.hero{width:min(calc(100% - 2 * var(--page-gutter)), 86rem);border-bottom:1px solid #dfe2ec;margin:0 auto;padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,4vw,3rem)}.index{color:#8ce9df;letter-spacing:.16em;text-transform:uppercase;margin:0 0 1rem;font-size:.76rem;font-weight:800}h1,h2,p{margin-top:0}h1{color:#131c31;letter-spacing:-.055em;margin-bottom:1.25rem;font-size:clamp(2.25rem,5vw,4.5rem);font-weight:650;line-height:1}nav{flex-wrap:wrap;gap:.75rem 1.5rem;display:flex}nav a{color:#5547ce;text-underline-offset:.3em;font-weight:650}.examples{padding:clamp(4rem,8vw,7rem) 0}.example-card{width:min(calc(100% - 2 * var(--page-gutter)), 86rem);grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(2.5rem,6vw,6rem);margin:0 auto clamp(7rem,14vw,13rem);display:grid}.example-card.reverse .canvas-frame{order:2}.canvas-frame{min-width:0}.canvas-frame>div{border-radius:1.5rem;width:100%;height:clamp(20rem,48vw,39rem);position:relative;overflow:hidden;box-shadow:0 2.5rem 6rem #171e2d29,0 0 0 1px #1f273c14}.copy{min-width:0;max-width:34rem}.copy .index{color:#6254d8}h2{color:#131c31;letter-spacing:-.055em;margin-bottom:1.25rem;font-size:clamp(2rem,4.4vw,4.25rem);line-height:1}.copy>p:not(.index){color:#596177;font-size:1.02rem;line-height:1.7}button{color:#fff;cursor:pointer;font:inherit;background:#5547ce;border:0;border-radius:999px;padding:.7rem 1rem;font-weight:700}button:hover,button:focus-visible{background:#3e32af}pre{color:#33405a;tab-size:2;background:#f6f7fb;border:1px solid #e1e4ef;border-radius:.85rem;max-width:100%;margin:1.75rem 0 0;padding:1rem;font-size:.78rem;line-height:1.55;overflow-x:auto}code{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace}label{color:#353d54;grid-template-columns:auto 1fr;align-items:center;gap:.25rem .75rem;margin:1.5rem 0;font-weight:650;display:grid}label strong{color:#6254d8;justify-self:end}input[type=range]{accent-color:#6254d8;grid-column:1/-1;width:100%}footer{width:min(calc(100% - 2 * var(--page-gutter)), 86rem);color:#747c91;border-top:1px solid #dfe2ec;margin:0 auto;padding:2rem 0 3rem;font-size:.9rem}@media (width<=760px){.example-card{grid-template-columns:minmax(0,1fr);margin-bottom:7rem}.example-card.reverse .canvas-frame{order:initial}.canvas-frame>div{height:min(76vw,31rem)}}:root{--page-gutter:clamp(1.25rem, 5vw, 5rem);color:#151d31;font-synthesis:none;background:#fff}*{box-sizing:border-box}html{background:#fff;min-width:320px}body{min-width:320px;min-height:100vh;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Arial,sans-serif}a{color:inherit}button,input{font:inherit}