.howto{font-size:17px;line-height:1.6}.howto p{margin:0}.howto em{color:var(--color-rust);font-style:italic}.howto .muted{color:var(--color-ink-soft)}.howto .intro{border-bottom:1px solid var(--color-rule);padding:60px 0}.howto .intro__grid{grid-template-columns:1fr 1.4fr;align-items:start;gap:60px;display:grid}.howto .intro__label{font-family:var(--font-mono);color:var(--color-rust);letter-spacing:.1em;text-transform:uppercase;border-top:2px solid var(--color-rust);width:max-content;padding-top:6px;font-size:12px;font-weight:600;display:inline-block}.howto .intro__copy p{color:var(--color-ink-2);max-width:56ch;font-size:19px;line-height:1.7}.howto .intro__copy p+p{margin-top:14px}.howto .outcomes{flex-direction:column;gap:10px;margin:24px 0 0;padding:0;list-style:none;display:flex}.howto .outcomes li{color:var(--color-ink-2);padding-inline-start:28px;font-size:17px;position:relative}.howto .outcomes li:before{content:"✓";inset-inline-start:0;color:var(--color-sage);font-weight:700;position:absolute;top:0}@media (max-width:780px){.howto .intro__grid{grid-template-columns:1fr;gap:24px}.howto .intro{padding:40px 0}.howto .intro__copy p{font-size:17px}}@media (max-width:480px){.howto{font-size:16px}.howto .intro{padding:28px 0}.howto .intro__copy p{font-size:16px}}.howto .steps{padding:60px 0}.howto .steps__intro{align-items:baseline;gap:16px;margin-bottom:48px;display:flex}.howto .steps__intro h2{letter-spacing:-.02em;font-size:42px;font-weight:500}.howto .steps__intro .count{font-family:var(--font-mono);color:var(--color-ink-3);letter-spacing:.08em;font-size:14px}.howto .step{border-bottom:1px solid var(--color-rule);grid-template-columns:80px 1fr;gap:32px;margin-bottom:60px;padding-bottom:60px;display:grid;position:relative}.howto .step:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.howto .step__num{font-family:var(--font-display);color:var(--color-rust);letter-spacing:-.03em;font-size:80px;font-weight:500;line-height:.9}.howto .step__num small{font-family:var(--font-mono);color:var(--color-ink-3);letter-spacing:.1em;text-transform:uppercase;margin-top:6px;font-size:12px;font-weight:500;display:block}.howto .step__title{letter-spacing:-.02em;margin-bottom:16px;font-size:36px;font-weight:500;line-height:1.15}.howto .step__title em{font-style:italic}.howto .step__body p{color:var(--color-ink-2);max-width:60ch;font-size:18px;line-height:1.7}.howto .step__body p+p{margin-top:14px}.howto .step__body strong{color:var(--color-ink)}@media (max-width:780px){.howto .steps{padding:40px 0}.howto .steps__intro{margin-bottom:28px}.howto .steps__intro h2{font-size:32px}.howto .step{grid-template-columns:56px 1fr;gap:18px;margin-bottom:40px;padding-bottom:40px}.howto .step__num{font-size:56px}.howto .step__title{font-size:26px}.howto .step__body p{font-size:16px}}@media (max-width:480px){.howto .steps{padding:28px 0}.howto .steps__intro{flex-wrap:wrap;gap:8px;margin-bottom:22px}.howto .steps__intro h2{font-size:26px}.howto .step{grid-template-columns:1fr;gap:8px;margin-bottom:28px;padding-bottom:28px}.howto .step__num{align-items:baseline;gap:12px;font-size:40px;display:flex}.howto .step__num small{margin-top:0}.howto .step__title{font-size:22px}}.howto .shot{border:1px solid var(--color-rule);border-radius:var(--radius);background:var(--color-paper);margin:28px 0 8px;overflow:hidden;box-shadow:0 1px #1f1b160d,0 20px 50px -22px #1f1b1638}.howto .shot__chrome{background:var(--color-cream);border-bottom:1px solid var(--color-rule);align-items:center;gap:8px;padding:10px 14px;display:flex}.howto .shot__dot{background:var(--color-cream-3);border-radius:50%;width:10px;height:10px}.howto .shot__dot--red{background:var(--color-rust-soft)}.howto .shot__url{font-family:var(--font-mono);color:var(--color-ink-3);background:var(--color-cream-2);border-radius:4px;flex:1;max-width:380px;margin-inline-start:16px;padding:4px 12px;font-size:12px}.howto .shot__body{direction:rtl;grid-template-columns:240px 1fr;min-height:320px;padding:0;display:grid}.howto .shot__sidebar{background:var(--color-cream);border-inline-start:1px solid var(--color-rule);flex-direction:column;gap:8px;padding:18px 14px;display:flex}.howto .shot__sidebar .sb-title{font-family:var(--font-mono);color:var(--color-ink-3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;font-size:10px}.howto .shot__sidebar .sb-item{color:var(--color-ink-2);cursor:pointer;border-radius:4px;padding:8px 10px;font-size:13px}.howto .shot__sidebar .sb-item--active{color:var(--color-ink);background:#b8451e1f;font-weight:600}.howto .shot__sidebar .sb-item__sub{color:var(--color-ink-soft);margin-top:2px;font-size:11px}.howto .shot__main{flex-direction:column;gap:16px;padding:28px 32px;display:flex}.howto .shot__bubble{background:var(--color-cream-2);max-width:70%;color:var(--color-ink);border-radius:14px 14px 14px 4px;align-self:flex-start;padding:12px 16px;font-size:14px}.howto .shot__bubble--user{background:var(--color-ink);color:var(--color-cream);border-radius:14px 14px 4px;align-self:flex-end}.howto .shot__input{border:1px solid var(--color-rule);font-family:var(--font-mono);color:var(--color-ink-3);background:var(--color-paper);border-radius:12px;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding:12px 16px;font-size:13px;display:flex}.howto .shot__input-send{background:var(--color-rust);width:28px;height:28px;color:var(--color-paper);border-radius:50%;place-items:center;font-size:14px;font-weight:700;display:grid}.howto .shot__body--split{grid-template-columns:240px 1fr 1.25fr}.howto .shot__artifact{border-inline-start:1px solid var(--color-rule);background:var(--color-cream);flex-direction:column;display:flex}.howto .shot__artifact-head{border-bottom:1px solid var(--color-rule);font-family:var(--font-mono);color:var(--color-ink-3);letter-spacing:.05em;justify-content:space-between;align-items:center;padding:10px 14px;font-size:11px;display:flex}.howto .shot__artifact-tabs{gap:8px;display:flex}.howto .shot__artifact-tab{background:var(--color-cream-2);border-radius:4px;padding:3px 10px;font-size:11px}.howto .shot__artifact-tab--on{background:var(--color-ink);color:var(--color-cream)}.howto .shot__artifact-body{background:var(--color-paper);flex-direction:column;flex:1;gap:10px;padding:20px;display:flex}.howto .mock-button{background:var(--color-rust);color:var(--color-paper);border-radius:4px;margin-top:10px;padding:6px 12px;font-size:11px;font-weight:600;display:inline-block}@media (max-width:780px){.howto .shot__body,.howto .shot__body--split{grid-template-columns:1fr}.howto .shot__sidebar{display:none}.howto .shot__main{padding:18px}.howto .shot__url{max-width:100%;margin-inline-start:8px}}@media (max-width:480px){.howto .shot{margin:18px 0 4px}.howto .shot__chrome{padding:8px 10px}.howto .shot__main{padding:14px}.howto .shot__bubble{max-width:90%}}.howto .pitfalls{background:var(--color-cream-2);border-block:1px solid var(--color-rule);padding:70px 0}.howto .pitfalls__head{align-items:baseline;gap:16px;margin-bottom:36px;display:flex}.howto .pitfalls__head h2{letter-spacing:-.02em;font-size:42px;font-weight:500}.howto .pitfalls__head .count{font-family:var(--font-mono);color:var(--color-ink-3);font-size:14px}.howto .pitfalls__grid{grid-template-columns:1fr 1fr;gap:24px;display:grid}.howto .pitfall{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius);flex-direction:column;gap:8px;padding:24px 26px;display:flex}.howto .pitfall__label{font-family:var(--font-mono);color:var(--color-rust);letter-spacing:.1em;text-transform:uppercase;font-size:11px;font-weight:600}.howto .pitfall h3{letter-spacing:-.015em;font-size:24px;font-weight:500}.howto .pitfall p{color:var(--color-ink-2);font-size:15.5px;line-height:1.65}@media (max-width:780px){.howto .pitfalls__grid{grid-template-columns:1fr}.howto .pitfalls{padding:44px 0}.howto .pitfalls__head{margin-bottom:22px}.howto .pitfalls__head h2{font-size:30px}}@media (max-width:480px){.howto .pitfalls{padding:28px 0}.howto .pitfalls__head h2{font-size:24px}.howto .pitfall{padding:18px}.howto .pitfall h3{font-size:20px}}