#howto{display:none}#landing.active~#howto{display:block}body[data-mode=lab] #landing.active~#howto{display:none}html:has(#landing.active){overflow-x:clip}#howto{--howto-ink: #f4f5f7;--howto-muted: #a7abb3;--howto-faint: #6c7079;--howto-blue: #a4dbe8;--howto-bezel: #17181b;--howto-gutter: max(16px, env(safe-area-inset-left, 0px));margin:0 calc(50% - 50vw);color:var(--howto-ink);background:radial-gradient(circle at 1px 1px,rgb(255 255 255 / .07) 1px,transparent 1.4px) 0 0 / 6px 6px,#27292d;position:relative}#howto:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.1rem;pointer-events:none;opacity:.7;background:repeating-linear-gradient(90deg,rgb(255 255 255 / .55) 0 1px,transparent 1px 4rem) bottom / 100% 100% no-repeat,repeating-linear-gradient(90deg,rgb(255 255 255 / .3) 0 1px,transparent 1px .4rem) bottom / 100% 50% no-repeat}.howto-intro{max-width:1240px;margin:0 auto;padding-block:clamp(48px,9vw,112px) clamp(8px,3vw,32px);padding-inline:var(--howto-gutter)}.howto-intro h2{margin:0;max-width:14ch;color:var(--howto-ink);font-size:clamp(34px,6.4vw,76px);line-height:.98;font-weight:800;letter-spacing:-.045em;text-wrap:balance}.howto-intro p{margin:16px 0 0;max-width:46ch;color:var(--howto-muted);font-size:clamp(16px,1.6vw,19px);line-height:1.5}.howto-track{position:relative;height:400svh;padding-bottom:clamp(48px,12svh,120px);box-sizing:content-box}.howto-stage{position:sticky;top:0;height:100svh;max-width:1360px;margin:0 auto;padding-inline:var(--howto-gutter);display:grid;grid-template-rows:auto auto;align-content:center;justify-items:center;gap:clamp(14px,2.6svh,26px)}.howto-phone{--h: min(56svh, 620px);height:var(--h);width:calc((var(--h) - 16px) * 390 / 844 + 16px);padding:8px;border-radius:calc(var(--h) * .075);background:var(--howto-bezel);box-shadow:0 0 0 1px #ffffff12,0 30px 80px #00000073}.howto-phone .howto-screen{height:100%;border-radius:calc(var(--h) * .06)}.howto-laptop{display:none}.howto-lid{padding:12px 12px 14px;border-radius:18px 18px 6px 6px;background:var(--howto-bezel);box-shadow:0 0 0 1px #ffffff14,0 40px 90px #00000073}.howto-laptop .howto-screen{aspect-ratio:1440 / 900;border-radius:4px}.howto-base{position:relative;height:14px;margin:0 -7%;border-radius:2px 2px 16px 16px;background:linear-gradient(#45474e,#26272b 70%,#1b1c1f)}.howto-base:before{content:"";position:absolute;left:50%;top:0;width:15%;height:5px;transform:translate(-50%);border-radius:0 0 8px 8px;background:#1b1c1f}.howto-screen{position:relative;width:100%;overflow:hidden;background:#fbfbfd}.howto-shot{position:absolute;inset:0;opacity:0;transform:translateY(2%);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}.howto-shot.on{opacity:1;transform:none}.howto-shot>img{display:block;width:100%;height:100%}.howto-viewer,.howto-loupe{position:absolute;overflow:hidden;container-type:inline-size}.howto-phone :is(.howto-viewer,.howto-loupe){left:3.333%;top:11.137%;width:93.333%;height:66.825%;border-radius:5.5%/3.5%}.howto-laptop :is(.howto-viewer,.howto-loupe){left:6.319%;top:13.333%;width:61.25%;height:78.667%;border-radius:2.27%/2.82%}.howto-viewer canvas{display:block;width:100%;height:100%}.howto-gen{position:absolute;left:50%;top:4%;transform:translate(-50%);width:min(80%,300px);padding:10px 12px 9px;border-radius:12px;box-sizing:border-box;display:grid;gap:6px;justify-items:center;background:#fffffff0;color:#1d1d1f;box-shadow:0 6px 18px #00000014;font-size:clamp(10px,3.6cqi,13px);font-weight:600;transition:opacity .3s ease}.howto-bar{display:block;width:100%;height:4px;border-radius:4px;background:#ececef;overflow:hidden}.howto-bar i{display:block;height:100%;width:0;border-radius:4px;background:#1a84dd}.howto-pct{font:500 .92em var(--mono);color:#8a8a90}.howto-gen.done{opacity:0}.howto-loupe img{position:absolute;max-width:none;height:auto;display:block;transform:scale(var(--z, 1));will-change:transform}.howto-phone .howto-loupe{--zmax: 2.2}.howto-phone .howto-loupe img{width:107.14%;left:-3.571%;top:-16.667%;transform-origin:33.2% 42.6%}.howto-laptop .howto-loupe{--zmax: 2.6}.howto-laptop .howto-loupe img{width:163.27%;left:-10.317%;top:-16.949%;transform-origin:28.7% 47.4%}.howto-tag{position:absolute;left:50%;bottom:7%;transform:translate(-50%);padding:6px 12px;border-radius:999px;white-space:nowrap;background:#ffffffeb;color:#1d1d1f;box-shadow:0 4px 14px #0000001a;font-size:clamp(10px,3.4cqi,13px);font-weight:600;opacity:var(--tag, 0)}.howto-caption{width:min(100%,440px);display:grid;gap:10px}.howto-ticks{display:flex;gap:6px}.howto-ticks button{flex:1;height:28px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}.howto-ticks span{display:block;width:100%;height:4px;border-radius:4px;background:#ffffff29;background-image:linear-gradient(var(--howto-blue),var(--howto-blue));background-repeat:no-repeat;background-size:calc(var(--fill, 0) * 100%) 100%}.howto-ticks button:focus-visible,.howto-text button:focus-visible{outline:2px solid #8fe0a8;outline-offset:2px;border-radius:4px}.howto-texts{display:grid;list-style:none;margin:0;padding:0}.howto-text{grid-area:1 / 1;opacity:0;transition:opacity .35s ease}.howto-text.on{opacity:1}.howto-text h3{margin:0;font-size:clamp(22px,2.6vw,30px);line-height:1.12;font-weight:700;letter-spacing:-.03em}.howto-text h3 button{all:unset;display:flex;gap:12px;align-items:baseline;cursor:pointer;text-wrap:balance}.howto-text h3 b{font:600 .62em var(--mono);color:var(--howto-blue);letter-spacing:0}.howto-text p{margin:8px 0 0;max-width:42ch;color:var(--howto-muted);font-size:15.5px;line-height:1.5}@media(min-width:900px){.howto-stage{grid-template-columns:minmax(290px,.8fr) auto;grid-template-rows:none;align-items:center;justify-items:stretch;gap:clamp(32px,4.5vw,72px)}.howto-phone{display:none}.howto-laptop{display:block;order:2;width:min(calc(100vw - 460px),calc((78svh - 60px)*1.6 + 24px),880px)}.howto-text h3{font-size:clamp(22px,2vw,27px)}.howto-caption{order:1;width:auto;gap:0}.howto-ticks{display:none}.howto-texts{display:flex;flex-direction:column;gap:6px}.howto-text{grid-area:auto;opacity:1;position:relative;padding:18px 0 18px 22px;border-left:2px solid rgb(255 255 255 / .12)}.howto-text:before{content:"";position:absolute;left:-2px;top:0;width:2px;height:calc(var(--fill, 0) * 100%);background:var(--howto-blue)}.howto-text h3,.howto-text h3 b{color:var(--howto-faint);transition:color .35s ease}.howto-text.on h3{color:var(--howto-ink)}.howto-text.on h3 b{color:var(--howto-blue)}.howto-text p{max-height:0;overflow:hidden;opacity:0;margin-top:0;font-size:17px;transition:max-height .5s ease,opacity .4s ease,margin-top .5s ease}.howto-text.on p{max-height:9em;opacity:1;margin-top:10px}}@media(prefers-reduced-motion:reduce){.howto-shot,.howto-text,.howto-text p,.howto-gen{transition:none}.howto-shot{transform:none}}