:root{--canvas-w: 1600px;--canvas-h: 900px;--ink: #0b0b0b;--ink-2: #1a1a1a;--muted: #8b8b8b;--muted-2: #6f6f6f;--panel: #f6f6f6;--field: #ebebeb;--field-2: #e4e4e4;--line: #e6e6e6;--page: #ffffff;--r-pill: 999px;--r-panel: 20px;--r-field: 10px;--r-media: 26px;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{margin:0;background:#0e0f11}.demo{box-sizing:border-box;max-width:1600px;margin:0 auto;padding:clamp(16px,4vw,48px)}.frame{position:relative;width:100%;aspect-ratio:1600 / 900;overflow:hidden}.frame__canvas{position:absolute;top:0;left:0;transform-origin:top left;will-change:transform}:where(.frame),:where(.frame) *,:where(.frame) *:before,:where(.frame) *:after{box-sizing:border-box}:where(.frame){font-family:Inter,system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;color:var(--ink)}:where(.frame) button,:where(.frame) input,:where(.frame) select,:where(.frame) textarea{font:inherit;color:inherit}.c9{position:relative;width:100%;height:100%;overflow:hidden;font-family:Manrope,Inter,system-ui,sans-serif;isolation:isolate}.c9__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(118deg,#4c4c50,#8f8f94 26%,#5c5c60 48%,#a2a2a8 72%,#45454a);overflow:hidden}.c9__backdropImg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.c9__streak{position:absolute;border-radius:50%;filter:blur(70px)}.c9__streak--a{top:-240px;left:-160px;width:900px;height:420px;transform:rotate(-24deg);background:#ffffff6b}.c9__streak--b{bottom:-280px;right:-180px;width:1000px;height:460px;transform:rotate(-18deg);background:#ffffff4d}.c9__streak--c{top:40%;left:30%;width:620px;height:240px;transform:rotate(-30deg);background:#ffffff29}.c9__panel{position:absolute;top:40px;right:40px;bottom:40px;left:40px;z-index:2;padding:44px 46px 46px;border-radius:30px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(160deg,#18181af0,#0e0e10f5 46%,#09090bf7);-webkit-backdrop-filter:blur(30px) saturate(120%);backdrop-filter:blur(30px) saturate(120%);box-shadow:0 50px 120px #0000009e,inset 0 1px #ffffff12;overflow:hidden}.c9__grain{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.09;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}.c9__head{position:relative;text-align:center}.c9__title{margin:0;font-size:46px;font-weight:700;line-height:1.15;letter-spacing:-.03em;background:linear-gradient(180deg,#fff,#d2d2d6 46%,#8e8e94);-webkit-background-clip:text;background-clip:text;color:transparent}.c9__lede{margin:16px auto 0;max-width:720px;font-size:13.5px;font-weight:400;line-height:1.68;letter-spacing:-.002em;color:#ffffff80}.c9__lede b{font-weight:700;color:#ffffffe6}.c9__grid{position:relative;margin-top:34px;height:512px;display:grid;grid-template-columns:1.22fr 1fr 1fr;grid-template-rows:1.14fr 1fr 1.3fr;gap:14px}.c9__card[data-card=product-design]{grid-column:1;grid-row:1 / 3}.c9__card[data-card=nocode]{grid-column:2 / 4;grid-row:1}.c9__card[data-card=brand]{grid-column:3;grid-row:2}.c9__card[data-card=systems]{grid-column:2;grid-row:2}.c9__card[data-card=strategy]{grid-column:1 / 3;grid-row:3}.c9__card[data-card=prototype]{grid-column:3;grid-row:3}.c9__card{position:relative;display:flex;flex-direction:column;padding:22px 24px;border-radius:18px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(162deg,#ffffff0e,#ffffff05 46%,#ffffff02);box-shadow:inset 0 1px #ffffff0f,0 20px 44px #00000073;overflow:hidden}.c9__card[data-align=bottom] .c9__text{margin-top:auto}.c9__cardTitle{margin:0;font-size:23px;font-weight:700;line-height:1.2;letter-spacing:-.028em;color:#f1f1f3}.c9__cardBody{margin:9px 0 0;max-width:300px;font-size:12.5px;font-weight:400;line-height:1.55;letter-spacing:-.002em;color:#ffffff70}.c9__icon{position:absolute;display:block;height:auto;pointer-events:none}.c9__icon svg{width:100%;height:auto;display:block}.c9__card[data-card=product-design] .c9__icon{top:4px;left:26px;width:190px;opacity:.9}.c9__card[data-card=nocode] .c9__icon{top:26px;right:20px;width:210px}.c9__card[data-card=brand] .c9__icon{right:6px;bottom:-6px;width:128px;opacity:.92}.c9__card[data-card=systems] .c9__icon{top:2px;right:10px;width:138px;opacity:.92}.c9__card[data-card=strategy] .c9__icon{top:8px;right:40px;width:220px}.c9__card[data-card=prototype] .c9__icon{right:8px;bottom:2px;width:132px;opacity:.92}.c9__card[data-card=nocode] .c9__cardBody,.c9__card[data-card=strategy] .c9__cardBody{max-width:250px}.c9__card[data-card=brand] .c9__cardBody,.c9__card[data-card=systems] .c9__cardBody,.c9__card[data-card=prototype] .c9__cardBody{max-width:190px}.c9__text{position:relative;z-index:1}