.how-page{--bar: 56px;--foot: 76px;height:100vh;height:100dvh;overflow:hidden}.how-bar{height:var(--bar);gap:16px;background:#050507db;border-color:var(--line)}.how-bar .brand{font-size:16px;white-space:nowrap}.how-bar .brand svg{width:22px;height:22px}.how-links{opacity:.45;transition:opacity .2s var(--ease)}.how-links:hover,.how-links:focus-within{opacity:1}.how-links a[aria-current]{color:var(--text)}.how-controls{gap:8px}.how-progress{min-width:92px;text-align:right;font:500 14px/1 var(--display);color:rgba(var(--spot),.85);font-variant-numeric:tabular-nums;white-space:nowrap}.how-icon{width:38px;padding:0}.how-icon svg{width:16px;height:16px}.how-back{white-space:nowrap}.how-main{position:fixed;inset:var(--bar) 0 var(--foot);isolation:isolate}.how-main .spot{height:100%}.how-slides{position:absolute;top:0;right:0;bottom:0;left:0;outline:none}.how-slide{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,48px);padding:clamp(16px,4vh,48px) clamp(24px,6vw,112px);overflow:hidden}.how-slide[data-state=before],.how-slide[data-state=after]{visibility:hidden}.how-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.how-stage-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(24px,5vw,96px);width:100%;max-width:1600px;margin:0 auto}.how-kicker{display:flex;align-items:center;gap:14px;font:500 clamp(16px,1.4vw,24px)/1 var(--display);color:rgba(var(--spot),.85)}.how-n{display:inline-grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;border:1px solid var(--line-2);background:var(--bg);font:500 .8em/1 var(--display);color:rgba(var(--spot),.9);box-shadow:0 0 24px rgba(var(--spot),.18);flex:none}.how-stage h2{margin-top:clamp(16px,2.6vh,32px);font-size:clamp(34px,4.6vw,84px);max-width:15ch;letter-spacing:-.03em}.how-detail{margin-top:clamp(14px,2.4vh,28px);max-width:36em;font-size:clamp(17px,1.45vw,26px);line-height:1.5;color:var(--muted)}.how-who{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(16px,3vh,36px)}.how-who span{padding:6px 14px;border-radius:999px;border:1px solid var(--line-2);background:#ffffff0a;font-size:clamp(14px,1.1vw,18px);color:var(--text)}.how-side{display:grid;gap:clamp(16px,3vh,32px)}.how-removes h3{font-size:clamp(14px,1.1vw,18px);font-weight:500;color:var(--faint)}.how-removes ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}.how-removes li{font-size:clamp(16px,1.35vw,24px);line-height:1.35;color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(var(--spot),.6);text-decoration-thickness:2px}.how-handoff{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:16px;width:100%;max-width:1600px;margin:0 auto}.how-handoff p{padding:14px 20px;border-radius:14px;border:1px solid var(--line);font-size:clamp(15px,1.25vw,22px);line-height:1.35}.how-handoff p span{display:block;margin-bottom:4px;font-size:.7em;color:var(--faint)}.how-in{color:var(--muted)}.how-out{border-color:rgba(var(--spot),.45)!important;background:rgba(var(--spot),.05);color:var(--text)}.how-out span{color:rgba(var(--spot),.8)!important}.how-arrow{position:relative;align-self:center;width:clamp(28px,4vw,64px);height:2px;background:linear-gradient(90deg,var(--line-2),rgba(var(--spot),.7))}.how-arrow:after{content:"";position:absolute;right:-1px;top:-4px;width:9px;height:9px;border-top:2px solid rgba(var(--spot),.8);border-right:2px solid rgba(var(--spot),.8);transform:rotate(45deg)}.how-todo{padding:0 4px;border-radius:4px;outline:1px dashed rgba(251,191,36,.7);background:#fbbf241a;color:#fcd34d}.how-visual{position:relative;height:clamp(160px,30vh,360px);border-radius:var(--radius);border:1px solid var(--line);background:radial-gradient(ellipse 60% 90% at 50% 0%,rgba(var(--spot),.12),transparent 70%),var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;overflow:hidden}.how-visual .shirt{--s: clamp(70px, 11vh, 130px);width:var(--s);height:calc(var(--s) * 1.16);background:#e7e5e4;clip-path:polygon(28% 0,72% 0,100% 16%,88% 38%,78% 32%,78% 100%,22% 100%,22% 32%,12% 38%,0 16%)}.how-visual .shirt-art{background:radial-gradient(circle at 30% 30%,#fde047 0 8%,transparent 9%),repeating-linear-gradient(-35deg,#0f172a 0 9px,transparent 9px 18px),linear-gradient(160deg,#ef4444,#f97316)}.v-pill{padding:6px 14px;border-radius:999px;border:1px solid var(--line-2);background:#ffffff0d;font:500 clamp(12px,1vw,15px)/1.2 var(--display);color:var(--muted)}.v-pill-light{background:var(--text);color:#0b0b0e}.v-card{display:grid;gap:10px;width:min(70%,280px);padding:18px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel)}.v-card b{height:10px;border-radius:5px;background:#ffffff1a}.v-card b:nth-child(2){width:80%}.v-card b:nth-child(3){width:55%}.v-pics{display:flex;gap:8px;margin-top:4px}.v-pics em{flex:1;aspect-ratio:1;border-radius:8px;background:linear-gradient(135deg,#334155,#1e293b)}.v-pics em:nth-child(2){background:linear-gradient(135deg,#f59e0b,#dc2626)}.v-pin{position:absolute;left:calc(50% - 7px);top:calc(50% - (clamp(70px,11vh,130px)*.58) + 6px);width:14px;height:14px;border-radius:50%;background:#facc15;box-shadow:0 0 0 5px #facc1540}.v-bubble{position:absolute;left:calc(50% + 18px);top:calc(50% - (clamp(70px,11vh,130px)*.58) - 18px);padding:6px 12px;border-radius:10px 10px 10px 2px;background:var(--panel-2);border:1px solid var(--line-2);font-size:clamp(12px,1vw,15px);white-space:nowrap}.v-row{display:flex;align-items:flex-end;gap:clamp(12px,2vw,28px)}.v-row .shirt:not(.shirt-art){--s: clamp(54px, 8vh, 96px);background:linear-gradient(135deg,#334155,#1e293b)}.v-row .shirt-art{--s: clamp(70px, 11vh, 124px);filter:drop-shadow(0 0 12px rgba(var(--spot),.5))}.v-files{position:relative;width:clamp(110px,16vh,180px);height:clamp(130px,20vh,220px)}.v-files em{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:end;padding:12px 14px;border-radius:8px;border:1px dashed rgba(var(--spot),.4);background:linear-gradient(135deg,transparent 46%,rgba(109,93,252,.55) 46% 54%,transparent 54%) 0 0 / 24px 24px,var(--panel);font:700 clamp(26px,4vh,44px)/1 var(--display);font-style:normal}.v-files em:nth-child(1){transform:translate(-22%,8%) rotate(-8deg)}.v-files em:nth-child(2){transform:translate(0)}.v-files em:nth-child(3){transform:translate(22%,-8%) rotate(7deg)}.how-stage-demo{justify-content:stretch}.how-stage-demo .how-stage-body{flex:1;min-height:0;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);align-items:stretch;gap:clamp(24px,3vw,56px)}.how-stage-demo .how-copy{align-self:center}.how-stage-demo h2{font-size:clamp(28px,3vw,56px)}.how-stage-demo .how-removes{margin-top:clamp(16px,3vh,36px)}.how-side-demo{display:flex;flex-direction:column;gap:14px;min-height:0}.how-demo-slot{flex:1;min-height:320px}.how-demo-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 24px}.how-try{font-size:clamp(14px,1.1vw,18px);color:rgba(var(--spot),.85)}.how-join{display:flex;align-items:center;gap:14px;flex:none;max-width:50%}.how-join p{font-size:clamp(13px,1vw,16px);color:var(--muted);overflow-wrap:anywhere}.how-join p span{display:block;color:var(--text);font-weight:500}.how-join a{color:var(--text)}.how-qr{width:clamp(84px,9vw,132px);flex:none;padding:6px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg)}.how-qr svg{display:block;width:100%;height:auto}.how-demos{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;overflow:hidden;pointer-events:none}.how-demo{position:absolute;margin:0;max-width:none;display:flex;flex-direction:column;pointer-events:auto}.how-demo[data-on=false]{visibility:hidden}.how-demo .demo-stage{flex:1;height:auto;min-height:0}.how-demo-url{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:var(--muted)}.how-demo-btn{flex:none;height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:#ffffff0a;color:var(--text);font:500 12px/1 Inter,system-ui,sans-serif;cursor:pointer}.how-demo-btn:disabled{opacity:.45;cursor:default}.how-overview{align-items:center;justify-content:safe center;overflow-y:auto;gap:clamp(14px,2.6vh,40px)}.how-overview-head{max-width:1100px;text-align:center}.how-overview h2{font-size:clamp(28px,2.8vw,60px)}.how-overview .how-detail{margin-inline:auto}.how-map{list-style:none;margin:0;padding:0;width:100%;max-width:2100px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(20px,2.4vw,44px)}.how-node{position:relative;display:flex}.how-node button{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(14px,1.4vw,22px);border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(180deg,#ffffff08,#ffffff03);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease)}.how-node button:hover{border-color:var(--line-2);background-color:#ffffff08}.how-node strong{font:600 clamp(17px,1.5vw,26px)/1.1 var(--display);letter-spacing:-.02em}.how-node-who{font-size:clamp(12px,.9vw,15px);color:var(--faint)}.how-node.is-done button{border-color:rgba(var(--spot),.25)}.how-node.is-current button{border-color:rgba(var(--spot),.7);background:rgba(var(--spot),.06);box-shadow:0 0 40px -8px rgba(var(--spot),.35)}.how-link{position:absolute;left:100%;top:clamp(26px,2.6vw,42px);width:clamp(20px,2.4vw,44px);display:flex;justify-content:center}.how-link .how-arrow{width:70%}.how-node-out{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);width:100%;font-size:clamp(12px,.95vw,16px);line-height:1.35;color:var(--muted)}.how-node-who{margin-bottom:8px}.how-row-label{width:100%;max-width:2100px;margin:0;font:500 clamp(12px,.95vw,15px)/1 var(--display);color:var(--faint)}.how-row-label-kitlab{color:var(--muted);margin-bottom:-8px}.how-usual{width:100%;max-width:2100px;display:grid;gap:10px}.how-usual ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.how-usual li{display:grid;gap:4px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);color:var(--faint)}.how-usual strong{font:500 clamp(13px,1vw,17px)/1.1 var(--display);color:var(--muted);text-decoration:line-through;text-decoration-color:#ffffff59}.how-usual span{font-size:clamp(11px,.8vw,13px)}.how-who .how-covers{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 4px;border:0;background:none;font-size:clamp(13px,1vw,16px);color:var(--faint)}.how-covers em{font-style:normal}.how-covers s{color:var(--muted);text-decoration-color:#fff6}.v-fork{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.how-n-side{border-style:dashed;font-size:.9em}.how-node-side button{border-style:dashed}.how-flow-wrap{flex:1 1 0;min-height:260px;width:100%;max-width:1700px;display:flex;justify-content:center;align-items:center;container-type:size}.how-flow{position:relative;width:min(100%,100cqh * 1400 / 440);aspect-ratio:1400 / 440;container-type:inline-size}.how-flow svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible}.flow-line{fill:none;stroke:#ffffff80;stroke-width:2.5}.flow-line-side{stroke-dasharray:8 7}.how-flow marker path{fill:#ffffffb3}.flow-label{fill:var(--text);font:700 26px var(--display)}.flow-label-small{fill:var(--muted);font-size:16px;font-weight:400}.flow-node{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.4cqw;padding:0 1.4cqw;border-radius:1cqw;border:1px solid var(--line-2);background:var(--bg);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease)}.flow-node:hover{background-color:#111114}.flow-node strong{font:600 1.5cqw/1.1 var(--display);letter-spacing:-.02em}.flow-node>span{font-size:1.05cqw;color:var(--faint)}.flow-node strong{display:flex;align-items:center;gap:.7cqw}.flow-node .how-n{flex:none;font-size:.75cqw;letter-spacing:0}.flow-node-side{border-style:dashed}.flow-node-q{border-color:rgba(var(--spot),.6)}.flow-node.is-done{border-color:rgba(var(--spot),.35)}.flow-node.is-current{border-color:rgba(var(--spot),.8);box-shadow:0 0 40px -8px rgba(var(--spot),.4)}@media(min-width:1101px){.how-map{display:none}}.how-rail-side button:before{width:9px;height:9px;margin-top:1px;border-style:dashed}.how-rail-side button{font-size:12px}.how-foot{position:fixed;inset:auto 0 0;height:var(--foot);display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,32px);padding:0 var(--gutter);border-top:1px solid var(--line);background:#050507db;z-index:40}.how-step-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:#ffffff08;color:var(--text);cursor:pointer}.how-step-btn svg{width:20px;height:20px}.how-step-btn:hover:not(:disabled){border-color:#ffffff4d;background:#ffffff0f}.how-step-btn:disabled{opacity:.35;cursor:default}.how-rail{list-style:none;margin:0;padding:0;display:flex;flex:0 1 900px;min-width:0}.how-rail li{flex:1;position:relative;display:flex;justify-content:center}.how-rail li+li:before{content:"";position:absolute;right:calc(50% + 8px);left:calc(-50% + 8px);top:13px;height:1px;background:var(--line-2)}.how-rail button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:7px 4px 0;border:0;background:none;color:var(--faint);font:500 13px/1 Inter,system-ui,sans-serif;cursor:pointer;min-width:0}.how-rail button:before{content:"";width:12px;height:12px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg)}.how-rail button span{white-space:nowrap}.how-rail button:hover{color:var(--text)}.how-rail button.is-done:before{border-color:rgba(var(--spot),.5);background:rgba(var(--spot),.35)}.how-rail button.is-current{color:var(--text)}.how-rail button.is-current:before{border-color:rgba(var(--spot),1);background:rgba(var(--spot),1);box-shadow:0 0 14px rgba(var(--spot),.7)}@media(max-width:1100px){.how-flow-wrap{display:none}.how-map .how-node-side{margin-left:24px}.how-usual ol{grid-template-columns:repeat(4,minmax(0,1fr))}.how-map{grid-template-columns:1fr;max-width:640px;gap:10px}.how-overview{justify-content:flex-start;overflow-y:auto}.how-node button{flex-direction:row;align-items:center;padding:10px 16px}.how-node strong{min-width:6.5em}.how-node-who{margin:0;min-width:9em}.how-node-out{margin:0 0 0 auto;padding:0 0 0 12px;border-top:0;border-left:1px solid var(--line);width:auto;flex:1}.how-link{display:none}}@media(max-width:860px){.how-page{--bar: 52px;--foot: 64px}.how-progress{min-width:0}.how-slide{justify-content:flex-start;overflow-y:auto;padding:24px 16px 32px;gap:24px}.how-stage-body{grid-template-columns:1fr;gap:24px}.how-stage h2{font-size:clamp(30px,8vw,44px)}.how-visual{height:180px}.how-stage-demo .how-stage-body{flex:none;grid-template-columns:1fr}.how-demo-slot{flex:none;height:min(72vh,560px)}.how-demo-foot{flex-direction:column;align-items:flex-start}.how-join{max-width:none}.how-handoff{grid-template-columns:1fr;gap:8px}.how-handoff .how-arrow{justify-self:center;transform:rotate(90deg);margin:8px 0}.how-rail button span{display:none}}@media(max-width:600px){.how-usual ol{display:flex;flex-wrap:wrap;gap:6px}.how-usual li{padding:4px 10px}.how-usual span,.how-bar .brand-sep,.how-bar .how-title,.how-back,.how-icon{display:none}.how-controls .btn-sm{padding:0 12px}.how-node button{flex-wrap:wrap;gap:4px 12px}.how-node strong,.how-node-who{min-width:0}.how-node-out{flex-basis:100%;margin:4px 0 0;padding:8px 0 0;border-left:0;border-top:1px solid var(--line)}}@media(min-width:861px)and (max-height:960px){.how-stage-demo .how-removes{display:none}}@media(min-width:1101px)and (max-height:960px){.how-usual span{display:none}.how-node button{gap:6px}}