body.canvas-page{height:100%;overflow:hidden}html:has(body.canvas-page){height:100%}@media (width<=760px){body.canvas-page{height:auto;overflow:auto}}.viewport{cursor:grab;touch-action:none;background-color:var(--paper);background-image:radial-gradient(circle, var(--dot) 1.4px, transparent 1.6px);background-size:24px 24px;position:fixed;inset:60px 0 0;overflow:hidden}.viewport.dragging{cursor:grabbing}.viewport.dragging *{cursor:grabbing!important}.world{transform-origin:0 0;will-change:transform;width:3400px;height:2400px;position:absolute;top:0;left:0;transform:translate(80px,110px)scale(.82)}.frame{left:var(--x);top:var(--y);width:var(--w);height:var(--h);outline:none;position:absolute}.flabel{font-family:var(--mono);color:var(--muted);white-space:nowrap;align-items:center;gap:10px;font-size:13px;font-weight:600;display:flex;position:absolute;bottom:calc(100% + 10px);left:0}.flabel .num{color:var(--accent-ink)}.flabel .dim{opacity:1}.board{background:var(--board);border:1px solid var(--line);cursor:zoom-in;border-radius:10px;height:100%;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s;position:relative;overflow:hidden;box-shadow:0 1px #16150f0a,0 12px 30px -18px #16150f40}.frame:hover .board{transform:translateY(-8px);box-shadow:0 2px #16150f0d,0 28px 50px -22px #16150f61}.frame:hover .flabel{color:var(--ink)}.frame:focus-visible .board,.frame.is-active .board{box-shadow:0 0 0 3px var(--sel), 0 28px 50px -22px #16150f61}.frame:focus-visible .flabel,.frame.is-active .flabel{color:var(--sel)}.handles{pointer-events:none;opacity:0;transition:opacity .2s;position:absolute;inset:-6px}.handles i{border:2px solid var(--sel);background:#fff;width:10px;height:10px;position:absolute}.handles i:first-child{top:-1px;left:-1px}.handles i:nth-child(2){top:-1px;right:-1px}.handles i:nth-child(3){bottom:-1px;left:-1px}.handles i:nth-child(4){bottom:-1px;right:-1px}.frame:focus-visible .handles,.frame.is-active .handles{opacity:1}.size{font-family:var(--mono);background:var(--sel);color:#fff;opacity:0;white-space:nowrap;border-radius:4px;padding:3px 8px;font-size:12px;font-weight:600;transition:opacity .2s;position:absolute;top:calc(100% + 10px);right:0}.frame:focus-visible .size,.frame.is-active .size{opacity:1}.hero .board{cursor:default;flex-direction:column;padding:56px 64px;display:flex}.hero-top{align-items:center;gap:16px;margin-bottom:28px;display:flex}.rp{background:var(--ink);width:64px;height:64px;color:var(--paper);letter-spacing:-.03em;border-radius:50%;flex:none;place-items:center;font-size:24px;font-weight:800;display:grid;position:relative}.rp:after{content:"";border:2px dashed var(--accent);border-radius:50%;position:absolute;inset:-6px}.eyebrow{font-family:var(--mono);color:var(--muted);letter-spacing:.02em;font-size:13px;font-weight:600}.hero h1{letter-spacing:-.04em;text-wrap:balance;font-variation-settings:"opsz" 96;max-width:1180px;margin:0 0 28px;font-size:104px;font-weight:760;line-height:.93}.hero h1 .mark{white-space:nowrap;position:relative}.hero h1 .mark svg{width:104%;height:.32em;position:absolute;bottom:-.12em;left:-2%;overflow:visible}.hero h1 .mark path{fill:none;stroke:var(--accent);stroke-width:7px;stroke-linecap:round}.lede{max-width:700px;color:var(--ink-2);text-wrap:pretty;margin:0 0 30px;font-size:22px;line-height:1.4}.hero-actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.cats{flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:24px;display:flex}.chip{font:600 14px/1 var(--mono);border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#fff;border-radius:6px;padding:9px 12px}.chip:hover{border-color:var(--ink)}.bf .board{grid-template-rows:600px auto;grid-template-columns:960px 1fr;gap:28px 40px;padding:40px;display:grid}.shot{border:1px solid var(--line);background:#e9e5da;border-radius:8px;position:relative;overflow:hidden}.shot img{object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%}.shot.phone{border:6px solid var(--ink);border-radius:28px;justify-self:start;width:277px;height:600px}.bf-meta{grid-column:1/-1;justify-content:space-between;align-items:flex-end;gap:30px;display:flex}.bf-meta h3{letter-spacing:-.03em;margin:0 0 10px;font-size:40px;font-weight:760;line-height:1}.bf-meta p{max-width:720px;color:var(--ink-2);text-wrap:pretty;margin:0;font-size:19px}.tags{gap:8px;margin-bottom:14px;display:flex}.tag{font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;background:var(--ink);color:var(--paper);border-radius:999px;padding:7px 10px}.tag.alt{background:var(--y);color:var(--ink)}.ph .board{grid-template-rows:280px 1fr;display:grid}.vis{position:relative;overflow:hidden}.ph-cap{flex-direction:column;gap:6px;padding:22px 26px;display:flex}.ph-cap h3{letter-spacing:-.02em;margin:0;font-size:24px;font-weight:720;line-height:1.1}.ph-cap p{color:var(--ink-2);margin:0;font-size:17px}.badge{z-index:2;font:700 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;background:var(--board);color:var(--ink);border:1px solid var(--ink);border-radius:4px;padding:7px 10px;position:absolute;top:16px;left:16px}.v-funnel{background:linear-gradient(160deg,#ffe9a0,#ffd25c);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding-top:30px;display:flex}.v-funnel i{background:var(--ink);border-radius:8px;flex:none;height:42px;display:block}.v-funnel i:first-of-type{width:76%}.v-funnel i:nth-of-type(2){background:#3a372e;width:54%}.v-funnel i:nth-of-type(3){background:var(--accent);width:32%}.v-funnel b{background:var(--ink);border-radius:50%;flex:none;width:22px;height:22px;display:block}.v-app{background:linear-gradient(150deg,#dce7ff,#b3c9ff)}.win{border:2px solid var(--ink);background:#fff;border-radius:10px;grid-template-rows:26px 1fr;grid-template-columns:90px 1fr;display:grid;position:absolute;inset:52px 48px -20px;overflow:hidden}.win .bar{border-bottom:2px solid var(--ink);grid-column:1/-1;align-items:center;gap:6px;padding-left:10px;display:flex}.win .bar s{background:var(--ink);border-radius:50%;width:9px;height:9px;text-decoration:none}.win .side{border-right:2px solid var(--ink);flex-direction:column;gap:8px;padding:12px;display:flex}.win .side s{background:#c7d5f7;border-radius:4px;height:8px;text-decoration:none}.win .side s:first-child{background:var(--sel)}.win .main{align-items:flex-end;gap:12px;padding:16px;display:flex}.win .main s{background:var(--ink);transform-origin:bottom;border-radius:4px 4px 0 0;flex:1;height:60%;text-decoration:none;animation:2.4s ease-in-out 2 alternate grow}.win .main s:nth-child(2){background:var(--sel);height:85%;animation-delay:.3s}.win .main s:nth-child(3){height:45%;animation-delay:.6s}.win .main s:nth-child(4){background:var(--accent);height:95%;animation-delay:.9s}.win .main s:nth-child(5){height:70%;animation-delay:1.2s}@keyframes grow{0%{transform:scaleY(.45)}to{transform:scaleY(1)}}.v-brand{background:var(--ink);color:var(--paper)}.v-brand .aa{letter-spacing:-.06em;font-size:170px;font-weight:780;line-height:1;position:absolute;top:46px;left:44px}.v-brand .sw{grid-template-columns:repeat(2,58px);gap:10px;display:grid;position:absolute;top:60px;right:40px}.v-brand .sw s{border-radius:50%;height:58px;text-decoration:none}.v-brand .sw s:first-child{background:var(--accent)}.v-brand .sw s:nth-child(2){background:var(--y)}.v-brand .sw s:nth-child(3){background:var(--paper)}.v-brand .sw s:nth-child(4){background:var(--sel)}.v-brand .badge{background:var(--paper)}.v-gfx{background:linear-gradient(140deg,#ffd3de,#ff9fb8)}.v-gfx s{text-decoration:none;position:absolute}.v-gfx .c1{background:var(--ink);border-radius:50%;width:150px;height:150px;top:70px;left:70px}.v-gfx .c2{background:var(--accent);width:120px;height:120px;top:120px;left:200px;transform:rotate(14deg)}.v-gfx .c3{border-bottom:140px solid #fff;border-left:80px solid #0000;border-right:80px solid #0000;width:0;height:0;top:60px;left:360px;transform:rotate(-10deg)}.v-gfx .c4{border:12px solid var(--ink);border-radius:50%;width:90px;height:90px;top:150px;left:470px}.v-motion{background:linear-gradient(150deg,#d2f7e1,#93e4b6)}.orbit{border:2px dashed var(--ink);border-radius:50%;width:200px;height:200px;margin:-100px 0 0 -100px;animation:6s linear spin;position:absolute;top:50%;left:50%}.orbit:before{content:"";background:var(--accent);border-radius:50%;width:26px;height:26px;margin-left:-13px;position:absolute;top:-14px;left:50%}.orbit.o2{width:110px;height:110px;margin:-55px 0 0 -55px;animation-duration:3.6s;animation-iteration-count:1;animation-direction:reverse}.orbit.o2:before{background:var(--ink);width:18px;height:18px;margin-left:-9px;top:-10px}.core{background:var(--ink);border-radius:50%;width:34px;height:34px;margin:-17px 0 0 -17px;position:absolute;top:50%;left:50%}@keyframes spin{to{transform:rotate(360deg)}}.cta .board{background:var(--ink);color:var(--paper);border-color:var(--ink);cursor:default;flex-direction:column;padding:48px 44px;display:flex}.cta .eyebrow{color:#cfc9ba}.cta h2{letter-spacing:-.04em;text-wrap:balance;margin:18px 0 22px;font-size:68px;font-weight:780;line-height:.95}.cta p{color:#e9e4d8;text-wrap:pretty;margin:0 0 30px;font-size:19px}.cta .btn{align-self:flex-start}.cta .btn.hot:hover{background:#ff7442}.cta .small{font-family:var(--mono);color:#cfc9ba;margin-top:auto;font-size:13px;font-weight:600}.sticky{left:var(--x);top:var(--y);width:var(--sw,240px);background:var(--c,var(--y));color:var(--ink);transform:rotate(var(--r,-2deg));font-family:var(--hand);text-wrap:balance;border-radius:2px 2px 14px;padding:22px 22px 26px;font-size:27px;font-weight:600;line-height:1.08;position:absolute;box-shadow:0 14px 22px -14px #16150f73}.sticky:before{content:"";background:#fff9;width:70px;height:22px;margin-left:-35px;position:absolute;top:-10px;left:50%;transform:rotate(-3deg)}.sticky .by{font-family:var(--mono);letter-spacing:.04em;white-space:nowrap;margin-top:10px;font-size:12px;font-weight:700;display:block}.flat .sticky{transform:none}.ink{pointer-events:none;width:3400px;height:2400px;position:absolute;top:0;left:0;overflow:visible}.ink path{fill:none;stroke:var(--ink);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.ink .hot{stroke:var(--accent-ink)}.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:1.4s cubic-bezier(.6,0,.2,1) forwards draw;animation-delay:var(--d,.6s)}@keyframes draw{to{stroke-dashoffset:0}}.anno{left:var(--x);top:var(--y);font-family:var(--hand);color:var(--accent-ink);white-space:nowrap;transform:rotate(var(--r,0deg));pointer-events:none;font-size:30px;font-weight:700;line-height:1;position:absolute}.cursor{z-index:5;pointer-events:none;opacity:0;position:absolute;top:0;left:0;transform:translate(1100px,560px)}.cursor svg{filter:drop-shadow(0 3px 4px #00000040);width:30px;height:30px;display:block}.cursor span{background:var(--accent);color:var(--ink);font:700 14px/1 var(--display);white-space:nowrap;border-radius:4px 12px 12px;padding:7px 10px;position:absolute;top:24px;left:24px}.pulse{animation:1.2s ease-out 2 pulse}@keyframes pulse{0%{box-shadow:0 0 #ff5a1fb3}to{box-shadow:0 0 0 18px #ff5a1f00}}.panel{z-index:15;background:var(--board);border:1px solid var(--line);border-radius:10px;width:212px;padding:12px;position:fixed;top:76px;left:16px;box-shadow:0 12px 30px -20px #16150f66}.panel .lbl{font-family:var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:4px 6px 8px;font-size:12px;font-weight:700}.panel ul{margin:0;padding:0;list-style:none}.panel button{text-align:left;width:100%;font:600 15px/1.2 var(--display);color:var(--ink);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:6px;align-items:center;gap:10px;padding:8px;display:flex}.panel button:hover{background:#efebe1}.panel button[aria-current=true]{color:#1e3db8;background:#e3e9ff}.panel button i{border:2px solid;border-radius:2px;flex:none;width:12px;height:12px}.toolbar{z-index:15;background:var(--ink);color:var(--paper);border-radius:12px;align-items:center;gap:4px;padding:6px;display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 14px 30px -14px #16150f99}.tb{width:44px;height:44px;color:var(--paper);cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;display:grid}.tb:hover{background:#2e2c24}.tb svg{width:20px;height:20px}.tb.txt{width:auto;font:700 15px/1 var(--display);padding:0 14px}.zoomval{text-align:center;min-width:62px;font:700 15px/1 var(--mono)}.sep{background:#4a473d;width:1px;height:26px;margin:0 4px}.tb-hint{font-family:var(--mono);color:#d8d2c3;white-space:nowrap;padding:0 10px 0 6px;font-size:12px;font-weight:600}.minimap{z-index:15;background:var(--board);border:1px solid var(--line);cursor:pointer;border-radius:10px;width:240px;height:150px;position:fixed;bottom:20px;right:16px;overflow:hidden;box-shadow:0 12px 30px -20px #16150f66}.minimap .mm-in{position:absolute;inset:10px}.minimap .mm-f{background:#e2ddd0;border-radius:2px;position:absolute}.minimap .mm-f.k-bf{background:var(--accent)}.minimap .mm-f.k-cta{background:var(--ink)}.minimap .mm-v{border:2px solid var(--sel);background:#2f5bff14;border-radius:3px;position:absolute}@media (width<=1100px){.panel,.tb-hint{display:none}.minimap{width:180px;height:112px}}@media (width<=760px){body.canvas-page{background-image:radial-gradient(circle, var(--dot) 1.3px, transparent 1.5px);background-size:22px 22px;background-attachment:fixed;overflow:auto}.topbar .hint,.panel,.toolbar,.minimap,.ink,.anno,.cursor{display:none}.topbar{height:60px}.file span{display:none}.viewport{cursor:auto;touch-action:auto;background:0 0;padding:96px 16px 40px;position:static;overflow:visible}.world{flex-direction:column;gap:56px;width:auto;height:auto;display:flex;position:static;transform:none!important}.frame{width:auto;height:auto;position:relative;top:auto;left:auto}.board{cursor:default}.frame:hover .board{transform:none}.size{display:none}.flabel{white-space:normal;font-size:12px}.hero .board{padding:28px 22px}.hero-top{margin-bottom:20px}.rp{width:52px;height:52px;font-size:20px}.hero h1{margin-bottom:20px;font-size:clamp(36px,11vw,46px);line-height:.98}p,.eyebrow,.lede,.bf-meta p,.cta p,.ph-cap p,.ph-cap h3,.bf-meta h3,.cta h2{text-wrap:balance}.hero h1 .mark path{stroke-width:5px}.lede{margin-bottom:24px;font-size:18px}.hero-actions .btn{flex:auto}.bf .board{flex-direction:column;gap:18px;padding:18px;display:flex}.shot.hero-shot{aspect-ratio:1440/900}.shot.phone{aspect-ratio:390/844;border-width:5px;border-radius:22px;align-self:center;width:62%;height:auto}.bf-meta{flex-direction:column;align-items:flex-start;gap:18px}.bf-meta h3{font-size:30px}.bf-meta p{font-size:17px}.ph .board{grid-template-rows:200px auto}.v-funnel{gap:9px;padding-top:34px}.v-funnel i{height:32px}.win{top:56px;left:24px;right:24px}.v-brand .aa{font-size:120px;top:50px;left:24px}.v-brand .sw{grid-template-columns:repeat(2,42px);top:64px;right:20px}.v-brand .sw s{height:42px}.v-gfx .c1{width:110px;height:110px;top:56px;left:20px}.v-gfx .c2{width:90px;height:90px;top:96px;left:110px}.v-gfx .c3{top:46px;left:190px}.v-gfx .c4{width:70px;height:70px;top:120px;left:240px}.ph-cap{padding:18px 20px 22px}.ph-cap h3{letter-spacing:-.025em;font-size:20px}.cta .board{padding:32px 24px}.cta h2{font-size:46px}.cta p{font-size:18px}.cta .small{margin-top:28px}.sticky{width:auto;max-width:290px;margin:-16px 0 8px;font-size:26px;position:relative;top:auto;left:auto}.sticky:nth-of-type(odd){align-self:flex-end;margin-right:6px}.sticky:nth-of-type(2n){align-self:flex-start;margin-left:6px}.foot{display:block}}.no-js body.canvas-page{height:auto;overflow:auto}.no-js{& body.canvas-page{background-image:radial-gradient(circle, var(--dot) 1.3px, transparent 1.5px);background-size:22px 22px;background-attachment:fixed;overflow:auto}& .topbar .hint,& .panel,& .toolbar,& .minimap,& .ink,& .anno,& .cursor{display:none}& .topbar{height:60px}& .file span{display:none}& .viewport{cursor:auto;touch-action:auto;background:0 0;padding:96px 16px 40px;position:static;overflow:visible}& .world{flex-direction:column;gap:56px;width:auto;height:auto;display:flex;position:static;transform:none!important}& .frame{width:auto;height:auto;position:relative;top:auto;left:auto}& .board{cursor:default}& .frame:hover .board{transform:none}& .size{display:none}& .flabel{white-space:normal;font-size:12px}& .hero .board{padding:28px 22px}& .hero-top{margin-bottom:20px}& .rp{width:52px;height:52px;font-size:20px}& .hero h1{margin-bottom:20px;font-size:clamp(36px,11vw,46px);line-height:.98}& p,& .eyebrow,& .lede,& .bf-meta p,& .cta p,& .ph-cap p,& .ph-cap h3,& .bf-meta h3,& .cta h2{text-wrap:balance}& .hero h1 .mark path{stroke-width:5px}& .lede{margin-bottom:24px;font-size:18px}& .hero-actions .btn{flex:auto}& .bf .board{flex-direction:column;gap:18px;padding:18px;display:flex}& .shot.hero-shot{aspect-ratio:1440/900}& .shot.phone{aspect-ratio:390/844;border-width:5px;border-radius:22px;align-self:center;width:62%;height:auto}& .bf-meta{flex-direction:column;align-items:flex-start;gap:18px}& .bf-meta h3{font-size:30px}& .bf-meta p{font-size:17px}& .ph .board{grid-template-rows:200px auto}& .v-funnel{gap:9px;padding-top:34px}& .v-funnel i{height:32px}& .win{top:56px;left:24px;right:24px}& .v-brand .aa{font-size:120px;top:50px;left:24px}& .v-brand .sw{grid-template-columns:repeat(2,42px);top:64px;right:20px}& .v-brand .sw s{height:42px}& .v-gfx .c1{width:110px;height:110px;top:56px;left:20px}& .v-gfx .c2{width:90px;height:90px;top:96px;left:110px}& .v-gfx .c3{top:46px;left:190px}& .v-gfx .c4{width:70px;height:70px;top:120px;left:240px}& .ph-cap{padding:18px 20px 22px}& .ph-cap h3{letter-spacing:-.025em;font-size:20px}& .cta .board{padding:32px 24px}& .cta h2{font-size:46px}& .cta p{font-size:18px}& .cta .small{margin-top:28px}& .sticky{width:auto;max-width:290px;margin:-16px 0 8px;font-size:26px;position:relative;top:auto;left:auto}& .sticky:nth-of-type(odd){align-self:flex-end;margin-right:6px}& .sticky:nth-of-type(2n){align-self:flex-start;margin-left:6px}& .foot{display:block}}.foot{text-align:center;font-family:var(--mono);color:var(--muted);padding:0 16px 40px;font-size:12px;font-weight:600;display:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}.draw{stroke-dashoffset:0}}.badge.soon{background:#ffe27a}.skip.skip-2{left:200px}.bf-actions{flex-wrap:wrap;flex:none;gap:12px;display:flex}.ph-cap h3 a{text-decoration:none}.ph-cap h3 a:hover{text-decoration:underline}.v-shot img{object-fit:cover;object-position:top center;pointer-events:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.ph-actions{flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:8px;display:flex}.ph-cap .more{color:var(--accent-ink);margin-top:auto;font-size:16px;font-weight:700}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.proof .board{cursor:default;background:var(--paper);flex-direction:column;justify-content:center;gap:16px;padding:72px 44px 40px;display:flex;position:relative}.proof h2{letter-spacing:-.035em;text-wrap:balance;margin:0;font-size:44px;font-weight:780;line-height:1}.proof .board>p{color:var(--ink-2);text-wrap:balance;margin:0;font-size:19px}.proof .quote{margin:0}.proof blockquote{letter-spacing:-.015em;margin:0;font-size:24px;font-weight:620;line-height:1.25}.proof blockquote p{margin:0}.proof figcaption{color:var(--ink-2);margin-top:10px;font-size:16px}@media (width<=760px){.proof .board{padding:64px 22px 28px}.proof h2{font-size:32px}.proof .board>p{font-size:17px}}
