: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}.p3{position:relative;width:100%;height:100%;overflow:hidden;background:#01040a;color:#fff;font-family:Inter,system-ui,sans-serif;isolation:isolate}.p3__haze{position:absolute;top:-260px;left:-180px;width:1100px;height:900px;background:radial-gradient(50% 50% at 50% 50%,#1c54ba4d,#0e2c6829 44%,#0000 72%);filter:blur(30px)}.p3__orbBloom{position:absolute;left:50%;top:300px;width:1500px;height:1100px;transform:translate(-48%);background:radial-gradient(50% 50% at 50% 50%,#2e84f680,#1852ba42 34%,#0a245c1f 56%,#0000 74%);filter:blur(70px)}.p3__orb{position:absolute;left:50%;top:372px;width:1140px;height:1140px;transform:translate(-46%);border-radius:50%;background:radial-gradient(38% 34% at 30% 24%,#7ebeff8c,#7ebeff00 68%),radial-gradient(circle at 44% 30%,#2f7ce6,#1a51b0 14%,#0e2f72 32%,#071a42 52%,#03091c 74%,#01050f);box-shadow:0 0 180px #2674e859}.p3__bokeh{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 35%,#7fc0ff,#2c72d8 45%,#143c8c00 78%);filter:blur(1.5px)}.p3__bokeh--a{top:176px;left:1288px;width:34px;height:34px;opacity:.9}.p3__bokeh--b{top:236px;left:1372px;width:22px;height:22px;opacity:.75}.p3__vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(120% 90% at 50% 60%,#0000 40%,#0009 78%,#000000f2),linear-gradient(180deg,#000000b8,#0000 26%)}.p3__grain{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.12;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")}.p3__watermark{position:absolute;top:74px;left:196px;z-index:1;font-family:Inter Tight,Inter,sans-serif;font-size:212px;font-weight:700;line-height:1;letter-spacing:-.035em;white-space:nowrap;color:#5694ec42;-webkit-user-select:none;user-select:none}.p3__brandline{position:absolute;top:96px;left:940px;z-index:2;font-family:Inter Tight,Inter,sans-serif;font-size:62px;font-weight:500;line-height:1;letter-spacing:-.03em;white-space:nowrap;color:#fffffff0;text-shadow:0 6px 40px rgba(0,0,0,.6);-webkit-user-select:none;user-select:none}.p3__logo{position:absolute;top:46px;left:66px;z-index:5;display:block;width:52px;color:#fff}.p3__logo svg{width:100%;height:auto;display:block}.p3__nav{position:absolute;top:40px;left:50%;transform:translate(-50%);z-index:5;display:flex;align-items:center;gap:10px;height:54px;padding:5px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.1);background:#0a101e8c;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 16px 40px #00000073,inset 0 1px #ffffff14}.p3__close{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#d9dde4;color:#10141c;cursor:pointer;transition:background .18s ease}.p3__close:hover{background:#fff}.p3__close svg{width:18px;height:18px}.p3__links{display:flex;align-items:center;gap:26px;margin:0 14px;padding:0;list-style:none}.p3__link{position:relative;display:inline-block;padding:6px 0 10px;color:#ffffffc7;font-size:15px;font-weight:400;letter-spacing:-.008em;text-decoration:none;white-space:nowrap;transition:color .18s ease}.p3__link:hover,.p3__link[data-active=true]{color:#fff}.p3__link[data-active=true]:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:#ffffffbf}.p3__download{display:inline-flex;align-items:center;height:44px;padding:0 26px;border-radius:var(--r-pill);background:#fff;color:#0b0f18;font-size:15px;font-weight:500;letter-spacing:-.012em;text-decoration:none;white-space:nowrap;transition:background .18s ease,transform .18s ease}.p3__download:hover{background:#e6e9ee;transform:translateY(-1px)}.p3__plans{position:absolute;top:235px;left:157px;z-index:3;display:grid;grid-template-columns:repeat(3,428px);gap:17px}.p3__card{position:relative;display:flex;flex-direction:column;height:436px;padding:28px 28px 26px;border-radius:26px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(160deg,#ffffff1a,#ffffff0b 34%,#ffffff05);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);box-shadow:0 32px 80px #00000073,inset 0 1px #ffffff24}.p3__card[data-plan=free]{background:linear-gradient(160deg,#ffffff13,#ffffff08 40%,#ffffff03);border-color:#ffffff1a}.p3__card[data-plan=pro]{background:linear-gradient(160deg,#96c8ff29,#5a96eb13 42%,#285ab409);border-color:#b4d6ff3d}.p3__cardName{font-size:17px;font-weight:400;letter-spacing:-.01em;color:#ffffffd1}.p3__price{margin:6px 0 0;font-family:Inter Tight,Inter,sans-serif;font-size:36px;font-weight:500;line-height:1.1;letter-spacing:-.03em;color:#fff}.p3__period{font-size:22px;font-weight:400;letter-spacing:-.02em;color:#ffffffdb}.p3__blurb{margin:16px 0 0;max-width:300px;font-size:12.5px;line-height:1.55;letter-spacing:-.005em;color:#ffffff8c}.p3__features{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:15px}.p3__feature{display:flex;align-items:center;gap:11px;font-size:13px;letter-spacing:-.005em;color:#ffffffe6}.p3__check{flex:0 0 auto;width:19px;height:19px}.p3__choose{margin:auto auto 0;width:194px;height:42px;border:0;border-radius:var(--r-pill);background:#fff;color:#0b0f18;font-size:14px;font-weight:500;letter-spacing:-.012em;cursor:pointer;transition:background .18s ease,transform .18s ease}.p3__choose:hover{background:#e6e9ee;transform:translateY(-1px)}.p3__billing{position:absolute;top:706px;left:157px;z-index:3;display:flex;align-items:center;gap:16px}.p3__toggle{position:relative;width:66px;height:34px;padding:0;border:0;border-radius:var(--r-pill);background:#fff;cursor:pointer;transition:background .2s ease}.p3__knob{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#0b1220;transition:transform .24s cubic-bezier(.4,0,.2,1)}.p3__toggle[data-on=true] .p3__knob{transform:translate(32px)}.p3__billingLabel{font-size:20px;font-weight:500;letter-spacing:-.02em;color:#fff}.p3__peek{position:absolute;left:157px;right:157px;top:838px;height:120px;z-index:3;border-radius:30px 30px 0 0;border:1px solid rgba(255,255,255,.12);border-bottom:0;background:linear-gradient(180deg,#ffffff12,#ffffff05);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
