.how-hero{padding:calc(var(--nav-h) + clamp(56px, 8vw, 104px)) 0 clamp(56px, 7vw, 88px);position:relative}.how-hero h1{letter-spacing:-.04em;max-width:14ch;margin-top:18px;font-size:clamp(40px,5.6vw,76px);font-weight:600;line-height:.98}.how-hero h1 em{color:var(--sb-fg-muted);font-style:normal;display:block}.how-hero .lede{max-width:58ch;color:var(--sb-fg-muted);margin-top:22px;font-size:clamp(17px,1.5vw,19px)}.waterline{inset-inline:0;background:linear-gradient(90deg, transparent, var(--sb-hairline-strong) 15%, var(--sb-hairline-strong) 85%, transparent);height:1px;position:absolute;bottom:0}.how-steps{padding-top:clamp(48px,6vw,80px)}.chain{gap:0;margin:0;padding:0;list-style:none;display:grid}.chain>li{border-bottom:1px solid var(--sb-hairline);grid-template-columns:56px minmax(0,1fr) minmax(0,.95fr);align-items:start;gap:24px 32px;padding:32px 0;display:grid}.chain>li:first-child{padding-top:0}.chain .n{font-family:var(--mono);color:var(--sb-brand-fg);padding-top:6px;font-size:13px}.chain h2{letter-spacing:-.025em;font-size:clamp(22px,2.2vw,28px)}.chain p{color:var(--sb-fg-muted);max-width:52ch;margin-top:10px}.chain p b{color:var(--sb-fg);font-weight:600}.mini{background:var(--sb-code-bg);box-shadow:inset 0 0 0 1px var(--sb-hairline);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--sb-fg);border-radius:12px;margin:0;padding:14px 16px;font-size:12.5px;line-height:1.65}.mini .t-ok{color:var(--sb-brand-fg)}.mini .t-dim{color:var(--sb-fg-faint)}.how .sh{margin-bottom:clamp(24px,3.4vw,36px)}@media (width<=900px){.chain>li{grid-template-columns:40px minmax(0,1fr)}.chain .mini{grid-column:2}}.flow{grid-template-columns:repeat(7,auto);justify-content:space-between;align-items:stretch;gap:12px;margin:0;padding:clamp(20px,3vw,32px);display:grid}.flow .node{background:var(--sb-canvas);max-width:220px;box-shadow:inset 0 0 0 1px var(--sb-hairline);color:var(--sb-fg-muted);border-radius:12px;gap:6px;padding:14px 16px;font-size:13.5px;display:grid}.flow .node .k{font-family:var(--mono);color:var(--sb-fg);font-size:12.5px;font-weight:600}.flow .node.us{background:var(--sb-brand-soft);box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--sb-brand) 30%, transparent)}.flow .node.us .k{color:var(--sb-brand-fg)}.flow .edge{background:var(--sb-hairline-strong);align-self:center;width:28px;height:1px;position:relative}.flow .edge:after{content:"";border:3.5px solid #0000;border-left:5px solid var(--sb-hairline-strong);position:absolute;top:-3px;right:-1px}.flow figcaption{grid-column:1/-1}@media (width<=1000px){.flow{grid-template-columns:1fr;justify-items:start}.flow .node{width:100%;max-width:none}.flow .edge{width:1px;height:20px;margin-inline-start:24px}.flow .edge:after{border:3.5px solid #0000;border-top:5px solid var(--sb-hairline-strong);top:auto;bottom:-1px;right:-3px}}.tbl-wrap{padding:4px 0;overflow-x:auto}.tbl{border-collapse:collapse;width:100%;font-size:14.5px}.tbl th,.tbl td{text-align:start;border-bottom:1px solid var(--sb-hairline);vertical-align:top;padding:12px 20px}.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}.tbl thead th{color:var(--sb-fg-faint);font-size:13px;font-weight:540}.tbl tbody th{font-weight:560}.tbl .what{color:var(--sb-fg-muted);max-width:56ch;margin-top:2px;font-size:13.5px;font-weight:400;display:block}.tbl td{width:22%}.st{align-items:center;gap:6px;font-size:13px;display:inline-flex}.st.yes .i{color:var(--sb-brand-fg);stroke-width:2px}.st.no .i{color:var(--sb-fg-faint)}.fn{min-width:18px;height:18px;color:var(--sb-fg-muted);background:var(--sb-neutral-soft);vertical-align:1px;border-radius:5px;place-items:center;margin-inline-start:4px;font-size:11px;font-weight:600;text-decoration:none;display:inline-grid}.fns{color:var(--sb-fg-muted);gap:6px;max-width:90ch;margin:16px 0 0;padding:0;font-size:13.5px;list-style:none;display:grid}.fns li:target{color:var(--sb-fg)}.num-tbl td{font-family:var(--mono);text-align:end;font-variant-numeric:tabular-nums;color:var(--sb-fg-muted);white-space:nowrap;font-size:13.5px}.num-tbl thead th:not(:first-child){text-align:end}.num-tbl thead th.us{color:var(--sb-brand-fg)}.num-tbl td.best{color:var(--sb-brand-fg);font-weight:600}@media (width<=600px){.tbl th,.tbl td{padding:10px 12px}.num-tbl td{font-size:12.5px}}.vt-demo{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}@media (width<=860px){.vt-demo{grid-template-columns:1fr}}.vt-demo video{width:100%;box-shadow:var(--sh-card);background:var(--sb-code-bg);aspect-ratio:16/10;border-radius:12px}.vt-demo figure{gap:10px;margin:0;display:grid}.vt-demo figcaption{color:var(--sb-fg-muted);font-size:14px}.chain p code{font-size:.86em}@media (width<=600px){.chain>li{grid-template-columns:28px minmax(0,1fr);gap:16px 12px}.chain .mini{grid-column:1/-1;font-size:11.5px}}.how-hero .lede-link{margin-top:18px}