.how-head{display:grid;gap:18px;max-width:900px}.steps{gap:28px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto 1fr;margin-top:clamp(48px,5vw,72px);padding-top:34px}.step,.steps{display:grid;position:relative}.step{background:var(--s);border-radius:var(--r-xl);gap:12px;grid-row:span 3;grid-template-rows:subgrid;min-width:0;padding:50px clamp(20px,2.2vw,30px) clamp(22px,2.4vw,30px);z-index:1}.step-num{background:var(--sc);border:4px solid var(--ground);border-radius:50%;box-shadow:var(--shadow-sm);color:var(--on-bright);display:grid;font:800 27px/1 var(--display);height:64px;left:50%;place-items:center;position:absolute;rotate:-6deg;top:-34px;translate:-50% 0;width:64px}.step:nth-child(2) .step-num{rotate:5deg}[dir=rtl] .step-num{rotate:6deg}[dir=rtl] .step:nth-child(2) .step-num{rotate:-5deg}.step .h3{font-size:1.4rem}.step-text{color:var(--ink-soft);font-size:17px}.mock{align-content:start;background:var(--sheet-bg);border-radius:22px;box-shadow:var(--shadow-sm);container:mock/inline-size;display:grid;font-size:14px;gap:8px;grid-template-columns:minmax(0,1fr);line-height:1.35;margin-top:4px;padding:14px}.mock-top{align-items:center;display:flex;flex-wrap:wrap;gap:6px 8px;justify-content:space-between;margin-bottom:2px}.mock-top b{font-weight:800}.ok{align-items:center;background:var(--field-green);border-radius:999px;color:var(--ink);display:inline-flex;font:700 12px/1.3 var(--text);gap:5px;padding-block:3px;padding-inline:6px 10px;white-space:nowrap}.ok .i{height:14px;width:14px}.step.is-live .step-num{animation:badge-pop .52s var(--ease-pop)}@keyframes badge-pop{0%,to{scale:1}40%{scale:1.14}}.mk-route{align-items:center;color:var(--ink-soft);display:flex;flex-wrap:wrap;font-size:13px;gap:6px}.mk-route .i{height:16px;width:16px}.mk-route b{color:var(--ink);font-weight:700}.state-pill{align-items:center;background:var(--surface-2);border-radius:999px;color:var(--ink-soft);display:inline-flex;font:700 12px/1.3 var(--text);gap:5px;padding-block:3px;padding-inline:8px 10px;transition:background-color .2s ease,color .2s ease;white-space:nowrap}.state-pill .i{height:14px;width:14px}[data-state=running] .state-pill{background:var(--field-sky);color:var(--ink)}[data-state=done] .state-pill{background:var(--field-green);color:var(--ink)}.fields{display:grid;gap:6px}.fld{align-items:center;background:var(--ground);border:1.5px solid var(--line);border-radius:12px;display:grid;gap:8px;grid-template-columns:minmax(0,1fr) auto auto;min-height:40px;padding-block:5px;padding-inline:12px 8px}.fld-name{font-weight:700;line-height:1.25;min-width:0;overflow-wrap:anywhere}.fld-type{background:var(--surface-2);border-radius:999px;font:700 12px/1.3 var(--text);padding:3px 9px;white-space:nowrap}.fld-req,.fld-type{color:var(--ink-soft)}.fld-req{font:600 12px/1 var(--text);min-width:54px;text-align:end}.fld.is-new{border-color:var(--sc)}.fld.is-new .fld-type{background:var(--field-mint);color:var(--ink)}.fld-x{background:transparent;border:0;border-radius:50%;color:var(--ink-soft);cursor:pointer;display:grid;height:30px;place-items:center;width:30px}.fld-x .i{height:14px;width:14px}.add-btn:focus-visible,.f-cancel:focus-visible,.fld-x:focus-visible{outline:3px solid var(--focus);outline-offset:2px}@media (hover:hover) and (pointer:fine){.fld-x:hover{background:var(--surface-2);color:var(--ink)}.add-btn:hover{background:var(--surface-2);border-color:var(--ink-soft)}}@media (prefers-reduced-motion:no-preference){.fld.is-entering{animation:fld-in .38s var(--ease-out) both}}@keyframes fld-in{0%{opacity:0;translate:0 -6px}}.add-btn{align-items:center;background:transparent;border:1.5px dashed var(--line-strong);border-radius:12px;color:var(--ink);cursor:pointer;display:inline-flex;font:700 14px/1 var(--text);gap:6px;justify-content:center;min-height:42px;padding:0 14px;transition:border-color .16s ease,background-color .16s ease}.add-btn .i{height:16px;width:16px}.add-btn:disabled{cursor:not-allowed;opacity:.5}.add-panel{background:var(--surface-2);border-radius:14px;display:grid;gap:8px;padding:10px}.add-panel[hidden]{display:none}.f-row{align-items:center;display:grid;gap:4px 10px;grid-template-columns:84px minmax(0,1fr)}.f-row>label{color:var(--ink-soft);font-size:13px;font-weight:700;line-height:1.25}.f-in{background:var(--ground);border:1.5px solid var(--line-strong);border-radius:11px;color:var(--ink);font:500 15px/1.2 var(--text);min-height:40px;padding:0 11px;transition:border-color .16s ease;width:100%}.f-in::placeholder{color:var(--ph);opacity:1}.f-in:focus-visible{outline:3px solid var(--focus);outline-offset:1px}.f-in[aria-invalid=true]{border-color:var(--err);box-shadow:inset 0 0 0 1px var(--err)}.f-sel{display:block;position:relative}.f-sel .f-in{appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:32px}.f-sel:after{border-bottom:2px solid var(--ink-soft);border-right:2px solid var(--ink-soft);content:"";height:7px;inset-inline-end:13px;pointer-events:none;position:absolute;rotate:45deg;top:50%;translate:0 -70%;width:7px}.f-err{align-items:flex-start;color:var(--err);display:flex;font-size:13px;font-weight:700;gap:6px;grid-column:2;line-height:1.35}.f-err .i{height:15px;margin-top:1px;width:15px}.f-actions{align-items:center;display:flex;flex-wrap:wrap;gap:4px 10px}.f-submit{align-items:center;background:var(--btn-bg);border:0;border-radius:999px;color:var(--btn-ink);cursor:pointer;display:inline-flex;font:800 15px/1 var(--text);gap:8px;min-height:42px;padding:0 18px;transition:transform .16s var(--ease-out),background-color .2s ease}.f-submit:active{transform:scale(.97)}@media (hover:hover) and (pointer:fine){.f-submit:hover{background:var(--btn-bg-hover)}}.f-cancel{background:transparent;border:0;cursor:pointer;font:700 14px/1 var(--text);min-height:42px;padding:0 10px;text-decoration:underline;text-underline-offset:.2em}.f-cancel,.f-note{color:var(--ink-soft)}.f-note{font-size:13px;line-height:1.4}.conv .mock-top{align-items:flex-start;flex-direction:column;gap:8px}.mk-route .rt{gap:6px;white-space:nowrap}.crm-mark,.mk-route .rt{align-items:center;display:inline-flex}.crm-mark{gap:5px}.crm-col img,.crm-mark img,.ok img{flex:none;height:14px;width:14px}.conv-bar{background:var(--surface-2);border-radius:99px;height:6px;overflow:hidden}.conv-bar span{background:var(--sky);border-radius:inherit;display:block;height:100%;transform:scaleX(0);transform-origin:0 50%}[dir=rtl] .conv-bar span{transform-origin:100% 50%}[data-state=done] .conv-bar span{background:var(--green);transform:scaleX(1);transition:background-color .3s ease}.cr{align-items:center;border-bottom:1px solid var(--line);display:grid;font-size:13px;gap:8px;grid-template-columns:minmax(0,1fr) 14px minmax(0,.95fr) 20px;line-height:1.3;padding:7px 0}.conv-rows .cr:last-child{border-bottom:0}.cr-head{border-bottom-color:var(--line-strong);color:var(--ink-soft);font:700 12px/1.2 var(--text);padding:2px 0 6px}.crm-col{align-items:center;display:inline-flex;gap:5px}.cr-from{display:grid;gap:1px;min-width:0}.cr-from b{font-weight:700;overflow-wrap:anywhere}.cr-from small{color:var(--ink-soft);font-size:12px}.cr>.i{color:var(--line-strong);height:14px;transition:color .2s ease;width:14px}.cr-crm{background:var(--crm-bg);border-radius:8px;color:var(--crm-ink);font:600 12px/1.35 var(--mono);justify-self:start;max-width:100%;opacity:.35;overflow-wrap:anywhere;padding:3px 8px;transition:opacity .2s ease}.cr-tick{border:2px solid var(--line-strong);border-radius:50%;color:transparent;display:grid;height:20px;place-items:center;transition:background-color .2s ease,border-color .2s ease,color .2s ease;width:20px}.cr-tick .i{height:12px;width:12px}.cr.is-done>.i{color:var(--ink-soft)}.cr.is-done .cr-crm{opacity:1}.cr.is-done .cr-tick{background:var(--green);border-color:var(--green);color:var(--on-bright)}@media (prefers-reduced-motion:no-preference){.cr.is-done .cr-crm{animation:crm-in .38s var(--ease-pop)}[dir=rtl] .cr.is-done .cr-crm{animation-name:crm-in-rtl}.cr.is-done .cr-tick{animation:pop-in .36s var(--ease-pop) 80ms both}}@keyframes crm-in{0%{scale:.86;translate:-6px 0}}@keyframes crm-in-rtl{0%{scale:.86;translate:6px 0}}@keyframes pop-in{0%{opacity:0;scale:.85}to{opacity:1;scale:1}}.sub-in{align-items:center;background:var(--surface-2);border-radius:14px;display:grid;gap:10px;grid-template-columns:30px minmax(0,1fr);padding:8px 10px;transition:opacity .24s ease}.sub-ava{background:var(--coral);border-radius:50%;color:var(--on-bright);display:grid;font:800 12px/1 var(--display);height:30px;place-items:center;width:30px}.sub-in b{display:block;font-size:14px;font-weight:700}.sub-in small{color:var(--ink-soft);display:block;font-size:12px}[data-state=idle] .sub-in{opacity:.5}.branch{display:grid;gap:7px;padding-inline-start:26px;position:relative;--fill:0}.branch:after,.branch:before{border-radius:3px;bottom:22px;content:"";inset-inline-start:8px;position:absolute;top:10px;width:3px}.branch:before{background:var(--line)}.branch:after{background:var(--green);transform:scaleY(var(--fill));transform-origin:50% 0;transition:transform .46s var(--ease-out)}.br-q{color:var(--ink-soft);font-size:13px;position:relative}.br-q b,.br-q strong{color:var(--ink);font-weight:700}.br-q:before{background:var(--sheet-bg);border:3px solid var(--line-strong);border-radius:4px;content:"";height:15px;inset-inline-start:-24px;position:absolute;rotate:45deg;top:1px;width:15px;z-index:1}.branch.is-set .br-q:before{background:var(--green);border-color:var(--green)}.br-paths{display:grid;gap:6px}.br-path{align-items:center;border:1.5px solid var(--line);border-radius:12px;display:grid;gap:8px;grid-template-columns:auto minmax(0,1fr) 20px;padding:7px 8px;position:relative;transition:opacity .24s ease,border-color .24s ease,background-color .24s ease}.br-path,.br-path:before{background:var(--sheet-bg)}.br-path:before{border:3px solid var(--line-strong);border-radius:50%;content:"";height:13px;inset-inline-start:-23px;position:absolute;top:50%;transition:background-color .2s ease,border-color .2s ease;translate:0 -50%;width:13px;z-index:1}.br-when{background:var(--surface-2);border-radius:999px;font:700 12px/1.3 var(--text);padding:3px 9px;white-space:nowrap}.br-then{font-size:13px;line-height:1.3}.br-tick{background:var(--green);border-radius:50%;color:var(--on-bright);display:grid;height:20px;opacity:0;place-items:center;scale:.6;transition:opacity .2s ease,scale .28s var(--ease-pop);width:20px}.br-tick .i{height:12px;width:12px}.branch.is-set .br-path{opacity:.75}.branch.is-set .br-path.is-on{background:var(--field-green);border-color:var(--green);opacity:1}.branch.is-set .br-path.is-on:before{background:var(--green);border-color:var(--green)}.branch.is-set .br-path.is-on .br-when{background:var(--sheet-bg)}.branch.is-set .br-path.is-on .br-tick{opacity:1;scale:1}.try-ans{display:grid;gap:6px}.try-ans-l{color:var(--ink-soft);font-size:12px;font-weight:700}.seg{background:var(--surface-2);border-radius:999px;display:grid;gap:3px;grid-template-columns:repeat(var(--seg-n,3),minmax(0,1fr));padding:3px}.seg button{background:transparent;border:0;border-radius:999px;color:var(--ink);cursor:pointer;font:700 13px/1 var(--text);min-height:34px;min-width:0;overflow:hidden;padding:0 6px;text-overflow:ellipsis;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease;white-space:nowrap}.seg button[aria-pressed=true]{background:var(--ink);box-shadow:var(--shadow-xs);color:var(--ground)}html:not([lang|=en]) .seg button{hyphens:auto;line-height:1.1;overflow-wrap:anywhere;padding-block:4px;text-overflow:clip;white-space:normal}.seg button:focus-visible{outline:3px solid var(--focus);outline-offset:1px}@media (hover:hover) and (pointer:fine){.seg button[aria-pressed=false]:hover{background:var(--sheet-bg)}}@media (pointer:coarse){.seg button{min-height:44px}.fld-x{height:44px;margin-block:-7px;margin-inline:0 -6px;width:44px}}@container mock (max-width: 284px){.fld{grid-template-columns:auto minmax(0,1fr);padding-block:8px;row-gap:6px}.fld-name{grid-column:1/-1}.fld-req,.fld-x{justify-self:end}.f-row{grid-template-columns:minmax(0,1fr)}.f-err{grid-column:1}.cr{grid-template-columns:minmax(0,1fr) minmax(0,.95fr) 20px}.cr-head>span:nth-child(2),.cr>.i{display:none}}@media (max-width:959px){.steps{gap:52px;grid-template-columns:minmax(0,1fr);padding-top:34px}.step-num{inset-inline-start:30px;left:auto;translate:-30px 0}[dir=rtl] .step-num{translate:30px 0}}@media (max-width:479px){.f-row{grid-template-columns:minmax(0,1fr)}.f-err{grid-column:1}.cr{grid-template-columns:minmax(0,1fr) minmax(0,.95fr) 20px}.cr-head>span:nth-child(2),.cr>.i{display:none}}@media (prefers-reduced-motion:reduce){.f-submit:active{transform:none}.br-tick,.branch:after{transition:none}.cr.is-done .cr-tick,.step.is-live .step-num{animation:none}}