*,:before,:after{box-sizing:border-box}body{color:#10133a;background:#fafafa;margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5}code{background:#fffc;border-radius:4px;padding:.1em .35em;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.9em}.hero{align-content:center;place-items:center;gap:1.5rem;min-height:100vh;padding:2rem 1rem;display:grid}.hero__inner{text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffffd9;border-radius:16px;max-width:36rem;padding:2rem 2.5rem}.hero h1{letter-spacing:-.03em;margin:0 0 .5rem;font-size:clamp(2.5rem,8vw,5rem)}.hero p{margin:0}.hero__scroll{color:#fff;background:#2a2fd4;border-radius:999px;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:.9rem;font-weight:500;text-decoration:none;transition:background-color .2s;display:inline-flex;box-shadow:0 2px 10px #1016b840}.hero__scroll:hover{background:#1016b8}.hero__scroll:hover span{translate:0 2px}.hero__scroll:focus-visible{outline-offset:3px;outline:2px solid #2a2fd4}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}.hero__scroll span{animation:1.8s ease-in-out infinite scroll-bob}}@keyframes scroll-bob{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}.demo{gap:2rem;max-width:72rem;margin:0 auto;padding:4rem 1rem;display:grid}.grid{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1.5rem;display:grid}.grid--tools{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}.section-title{letter-spacing:-.01em;margin:0 0 1rem;font-size:1.5rem}.card{cursor:pointer;outline-offset:3px;border-radius:16px;outline:3px solid #0000;min-height:18rem;padding:1.5rem;transition:outline-color .2s;overflow:hidden}.card h2,.card p{background:#ffffffd9;border-radius:6px;margin:0 0 .5rem;padding:.2rem .5rem;display:inline-block}.card h2{font-size:1.25rem}.card--tool{min-height:16rem}.card--dark{color:#e8ecff}.card--dark h2,.card--dark p{background:#0b0e1fcc}.card--gradient{color:#fff;background:linear-gradient(135deg,#ff5f6d,#845ec2)}.card--gradient h2,.card--gradient p{background:#0003}.resizable{resize:both;border:1px solid #0000001a;border-radius:16px;width:100%;min-width:12rem;max-width:100%;height:20rem;min-height:8rem;padding:1.5rem;overflow:hidden}.resizable p{background:#ffffffd9;border-radius:6px;margin:0;padding:.2rem .5rem;display:inline-block}[contour].is-selected{outline-offset:3px;outline:3px solid #2a2fd4}@media (hover:hover){.card h2,.card p,.resizable h2,.resizable p{transition:opacity .2s}.card:hover h2,.card:hover p,.resizable:hover h2,.resizable:hover p{opacity:0}}