.sp-nav{z-index:var(--z-nav);background:var(--surface);border-bottom:1px solid var(--hairline);position:sticky;top:0}.sp-nav .wrap{justify-content:space-between;align-items:center;gap:var(--space-4);min-height:64px;display:flex}.sp-nav-right{align-items:center;gap:var(--space-4);display:flex}.sp-nav-links{align-items:center;gap:var(--space-2);display:flex}.sp-nav-links a{min-height:44px;color:var(--body);align-items:center;padding:0 .5rem;font-size:.94rem;font-weight:500;text-decoration:none;display:inline-flex}@media (hover:hover) and (pointer:fine){.sp-nav-links a:hover{color:var(--green-700)}}.sp-hero{padding-block:var(--space-7) var(--space-section)}.sp-hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(2rem,4vw,4rem);display:grid}.sp-hero h1{max-width:16ch}.sp-lede{margin-top:var(--space-5);font-size:var(--fs-lede);color:var(--body);max-width:40ch}.sp-cta{margin-top:var(--space-6);justify-items:start;gap:var(--space-3);display:grid}.sp-compat{font-size:var(--fs-small);color:var(--muted)}.sp-poster{justify-self:end;width:100%;max-width:26rem;margin:0}.sp-poster img,.sp-examples img{width:100%;box-shadow:0 0 0 1px var(--hairline), 0 18px 40px -16px #131b1559;border-radius:2px}.sp-steps{padding-block:var(--space-section);background:var(--surface);border-block:1px solid var(--hairline)}.sp-step-list{margin:var(--space-6) 0 0;gap:var(--space-6);counter-reset:sp-step;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;list-style:none;display:grid}.sp-step{counter-increment:sp-step;padding-top:var(--space-4);border-top:2px solid var(--ink)}.sp-step:before{content:counter(sp-step, decimal-leading-zero);letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.71rem;font-weight:600;display:block}.sp-step h3{margin-top:var(--space-3);font-size:1.35rem}.sp-step p{margin-top:var(--space-3);color:var(--body)}.sp-examples{padding-block:var(--space-section)}.sp-example-grid{margin:var(--space-6) 0 0;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.75rem,3vw,2.5rem);padding:0;list-style:none;display:grid}.sp-example-grid li{grid-column:span 2}.sp-example-grid li:first-child:nth-last-child(2){grid-column:2/span 2}.sp-questions{padding-block:var(--space-section);background:var(--surface);border-top:1px solid var(--hairline)}.sp-qa{margin-top:var(--space-6);gap:var(--space-6);max-width:62ch;display:grid}.sp-qa h3{font-family:var(--sans);font-size:var(--fs-body);letter-spacing:0;color:var(--ink);font-weight:600}.sp-qa p{margin-top:var(--space-2);color:var(--body)}.sp-links{margin:var(--space-6) 0 0;gap:0 var(--space-5);flex-wrap:wrap;padding:0;list-style:none;display:flex}.sp-links a{min-height:44px;font-size:var(--fs-small);color:var(--green-700);text-underline-offset:3px;align-items:center;font-weight:500;display:inline-flex}@media (width<=900px){.sp-hero{padding-block:var(--space-6) var(--space-7)}.sp-steps,.sp-examples,.sp-questions{padding-block:var(--space-7)}}@media (width<=860px){.sp-hero-grid{grid-template-columns:minmax(0,1fr)}.sp-poster{justify-self:start;max-width:22rem}.sp-step-list{grid-template-columns:minmax(0,1fr)}}@media (width<=560px){.sp-nav .sp-nav-right .btn{display:none}.sp-example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-example-grid li,.sp-example-grid li:first-child:nth-last-child(2){grid-column:auto}}