.home .pp-head .in{gap:20px;padding-block:56px 0}.home .pp-head .sec-head{gap:10px}.home .pp-head h1{letter-spacing:-.04em;max-width:21ch;font-size:clamp(36px,4.6vw,58px);line-height:1}.home .pp-head .sec-head p{max-width:62ch}.home .pp-crumb{font:600 13px var(--mono);color:var(--dim);gap:8px;display:flex}.home .pp-crumb a{color:var(--ink);text-decoration:underline;-webkit-text-decoration-color:var(--yellow);text-decoration-color:var(--yellow);text-underline-offset:3px;text-decoration-thickness:2px}.home .pp-jump{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.home .pp-jump a{min-height:36px;font:600 13px var(--mono);color:var(--ink);background:var(--white);border:2px solid var(--ink);border-radius:99px;align-items:center;padding:4px 13px;text-decoration:none;transition:background .15s ease-out;display:inline-flex}.home .pp-jump a:hover{background:var(--wash)}.home .pp-jump a:focus-visible,.home .pp-src summary:focus-visible,.home .pp-ref:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.home section.pp-sec .in{gap:24px;padding-block:88px 0}.home .pp-sh{gap:10px}.home .pp-sh h2{font-size:clamp(30px,3.4vw,44px)}.home .pp-sh p{max-width:62ch;font-size:18px}.home .pp-sec h3{letter-spacing:-.025em;font-size:22px;line-height:1.12}.home .pp-sec code{font:600 .88em var(--mono);background:var(--white);border:1.5px solid var(--rule);border-radius:5px;padding:0 5px}.home .pp-sec .link{text-decoration:underline;-webkit-text-decoration-color:var(--yellow);text-decoration-color:var(--yellow);text-underline-offset:4px;white-space:nowrap;font-weight:700;text-decoration-thickness:3px}.home .pp-demo{gap:12px;margin-top:8px;display:grid}.home .pp-note{color:var(--dim);max-width:72ch;font-size:15px}.home .pp-why{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none;display:grid}.home .pp-why li{align-content:start;gap:10px;padding:24px 24px 26px;display:grid}.home .pp-why p{color:var(--ink-2);font-size:16px}.home .pp-n{font:600 13px var(--mono);color:var(--dim);letter-spacing:.08em}.home .pp-refs{white-space:nowrap}.home .pp-ref{font:600 13px var(--mono);color:var(--blue);border-radius:3px;margin-right:2px;text-decoration:none}.home .pp-ref:hover{text-decoration:underline}.home .pp-more{color:var(--ink-2);max-width:62ch;margin-top:-6px;font-size:16px}.home .pp-src{border-top:2px solid var(--rule);margin-top:-8px;padding-top:12px}.home .pp-src summary{cursor:pointer;min-height:36px;font:600 12.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border-radius:6px;align-items:center;gap:8px;list-style:none;display:inline-flex}.home .pp-src summary::-webkit-details-marker{display:none}.home .pp-src summary:before{content:"+";border:1.5px solid var(--dim);letter-spacing:0;border-radius:50%;place-items:center;width:20px;height:20px;font-size:13px;line-height:1;transition:transform .2s ease-out;display:inline-grid}.home .pp-src[open] summary:before{content:"−"}.home .pp-src summary:hover{color:var(--ink)}.home .pp-src ol{color:var(--ink-2);gap:4px;max-width:90ch;margin:8px 0 0;padding-left:22px;font-size:14px;animation:.2s ease-out both pp-in;display:grid}.home .pp-src a{color:inherit;text-decoration:underline;-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule);text-underline-offset:3px}.home .pp-src a:hover{-webkit-text-decoration-color:var(--ink);text-decoration-color:var(--ink)}.home .pp-src li:target{background:var(--wash);border-radius:4px}@keyframes pp-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.home .pp-steps{counter-reset:pp;max-width:920px;margin:0;padding:0;list-style:none;display:grid}.home .pp-steps>li{counter-increment:pp;gap:12px;min-width:0;padding:0 0 40px 58px;display:grid;position:relative}.home .pp-steps>li:before{content:counter(pp);width:40px;height:40px;font:800 19px var(--display);background:var(--yellow);border:2.5px solid var(--ink);border-radius:50%;place-items:center;display:grid;position:absolute;top:-5px;left:0}.home .pp-steps>li:after{content:"";border-left:2.5px dashed var(--rule);position:absolute;top:42px;bottom:6px;left:19px}.home .pp-steps>li:last-child{padding-bottom:0}.home .pp-steps>li:last-child:after{display:none}.home .pp-steps p{color:var(--ink-2);max-width:62ch;font-size:16.5px}.home .pp-steps p code{white-space:nowrap}.home .pp-steps .link{margin-left:4px}.home .pp-cmds{gap:10px;margin-top:4px;display:grid}.home .pp-cmd{box-shadow:3px 3px 0 var(--yellow)}.home .pp-cmd code{font:500 14px/1.5 var(--mono);color:var(--paper);white-space:normal;overflow-wrap:anywhere;background:0 0;border:0;padding:0}.home .pp-sec .copy{transition:background .15s ease-out,color .15s ease-out}.home .pp-cmd .copy.done{background:var(--yellow);border-color:var(--yellow)}.home .pp-files{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:4px;display:grid}.home .pp-filec{align-content:start;gap:10px;min-width:0;display:grid}.home .pp-src-note{font:500 13px var(--mono);color:var(--dim);text-decoration:underline;-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule);text-underline-offset:3px;justify-self:start}.home .pp-src-note:hover{color:var(--ink);-webkit-text-decoration-color:var(--ink);text-decoration-color:var(--ink)}.home .pp-file{border-radius:14px;min-width:0;margin:0;overflow:hidden}.home .pp-file figcaption{font:500 13px var(--mono);color:var(--dim);border-bottom:2px solid var(--ink);background:var(--paper);justify-content:space-between;align-items:center;gap:10px;padding:6px 8px 6px 14px;display:flex}.home .pp-file figcaption b{color:var(--ink);font-weight:700}.home .pp-file .copy{background:var(--white);border:1.5px solid var(--ink)}.home .pp-file .copy:hover,.home .pp-file .copy.done{background:var(--wash)}.home .pp-file pre{margin:0;padding:12px 14px 14px}.home .pp-file code{font:500 14px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;background:0 0;border:0;padding:0;display:block}.home .pp-tips{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none;display:grid}.home .pp-tips li{box-shadow:4px 4px 0 var(--yellow), 4px 4px 0 2.5px var(--ink);align-content:start;gap:10px;padding:22px 24px 26px;display:grid}.home .pp-tn{width:36px;height:36px;font:800 17px var(--display);background:var(--yellow);border:2.5px solid var(--ink);border-radius:50%;place-items:center;display:grid}.home .pp-tips p{color:var(--ink-2);font-size:16px}.home .pp-tips li{grid-template-rows:auto auto 1fr auto}.home .pp-add{background:var(--paper);border:2px solid var(--ink);border-radius:10px;gap:6px;margin-top:6px;padding:10px 12px 12px;display:grid}.home .pp-add-h{font:600 12px var(--mono);color:var(--dim);justify-content:space-between;align-items:center;gap:8px;display:flex}.home .pp-add .copy{background:var(--white);border:1.5px solid var(--ink);min-height:30px;padding:3px 9px}.home .pp-add .copy:hover,.home .pp-add .copy.done{background:var(--wash)}.home .pp-add code{font:500 13.5px/1.5 var(--mono);color:var(--ink);overflow-wrap:anywhere;background:0 0;border:0;padding:0;display:block}.home .pp-next .in{gap:16px;padding-block:88px 104px}.home .pp-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.home .pp-row .demo-all{margin-top:0}.home .pp-go-t{gap:2px;min-width:0;display:grid}.home .pp-go-t>span{color:var(--ink-2);font-size:15px}@media (max-width:1000px){.home .pp-why,.home .pp-tips,.home .pp-files,.home .pp-row{grid-template-columns:1fr}}@media (max-width:720px){.home .pp-head .in{gap:18px;padding-block:40px 0}.home section.pp-sec .in{gap:22px;padding-block:64px 0}.home .pp-sh p{font-size:16.5px}.home .pp-sec h3{font-size:20px}.home .pp-steps>li{padding-left:48px}.home .pp-steps>li:before{width:34px;height:34px;font-size:16px}.home .pp-steps>li:after{top:36px;left:16px}.home .pp-cmd code,.home .pp-file code{font-size:13px}.home .pp-next .in{padding-block:64px 80px}}@media (prefers-reduced-motion:reduce){.home .pp-jump a,.home .pp-sec .copy,.home .pp-src summary:before{transition:none}.home .pp-src ol{animation:none}}