.pen-page{background:#fff;color:#29272d}.pen-breadcrumb{display:flex;align-items:center;gap:10px;padding:42px 0 0;color:#706c74;font-size:.83rem}.pen-breadcrumb a{padding-block:10px;margin-block:-10px}.pen-breadcrumb a:hover{color:#e1192a}.pen-hero{min-height:0;padding-bottom:clamp(56px,8vw,96px)}.pen-hero__grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);align-items:end;grid-gap:6vw;gap:6vw;padding-top:clamp(48px,8vh,96px)}.pen-kicker{display:flex;align-items:center;gap:10px;margin-bottom:30px;color:#706c74;font-size:.98rem}.pen-kicker span{width:7px;height:7px;border-radius:50%;background:#e1192a;box-shadow:0 0 0 5px #fde9eb}.pen-hero h1{max-width:12ch;font-size:clamp(4.1rem,7.7vw,8rem);font-weight:500;line-height:.99;letter-spacing:-.082em}.pen-hero__aside{padding-bottom:10px}.pen-hero__aside>p{max-width:40ch;color:#66616b;font-size:clamp(1.05rem,1.3vw,1.28rem);line-height:1.5}.pen-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}.pen-button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:44px;padding:11px 17px;border-radius:999px;font-size:.9rem;font-weight:500;transition:transform .2s ease,background-color .2s ease}.pen-button:hover{transform:translateY(-2px)}.pen-button--primary{background:#e1192a;color:#fff}.pen-button--primary:hover{background:#bf1220}.pen-button--quiet{background:#f4f3f4;color:#39363c}.pen-button--quiet:hover{background:#eeebed}.pen-section{padding:clamp(105px,12vw,170px) 0}.pen-section__intro{max-width:540px}.pen-label{margin-bottom:28px;color:#e1192a;font-size:.76rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase}.pen-end h2,.pen-section h2{font-size:clamp(3.2rem,5.7vw,6.2rem);font-weight:500;line-height:1.04;letter-spacing:-.075em}.pen-section__intro>p:last-of-type{max-width:42ch;margin-top:24px;color:#706c74;font-size:1.05rem;line-height:1.6}.pen-code-grid,.pen-faq-grid,.pen-workflow{display:grid;grid-template-columns:1fr 1fr;grid-gap:clamp(50px,9vw,140px);gap:clamp(50px,9vw,140px)}.pen-flow{border-top:1px solid #dcd9dd}.pen-flow>div{display:grid;grid-template-columns:140px 1fr;grid-gap:24px;gap:24px;padding:24px 0;border-bottom:1px solid #dcd9dd}.pen-flow span,.pen-test-grid article>span{color:#e1192a;font-size:.77rem;font-weight:600;letter-spacing:.04em}.pen-flow p{max-width:36ch;color:#625e66;font-size:1.05rem;line-height:1.55}.pen-section--code,.pen-section--faq{background:#faf9fa}.pen-section__intro>a{display:inline-flex;gap:20px;margin-top:34px;padding-bottom:5px;border-bottom:1px solid #e1192a;color:#e1192a;font-size:.95rem}.pen-code{min-width:0;align-self:start;overflow:hidden;border:1px solid #e4e1e5;border-radius:16px;background:#fff;box-shadow:0 20px 50px -38px #49414a}.pen-code__bar{display:flex;align-items:center;gap:9px;padding:15px 20px;border-bottom:1px solid #eeecee;color:#7a747d;font-size:.78rem}.pen-code__bar span{width:7px;height:7px;border-radius:50%;background:#e1192a}.pen-code pre{margin:0;padding:25px 22px 30px;overflow-x:auto;font-family:JetBrains Mono,monospace;font-size:.8rem;line-height:1.8}.pen-section__intro--wide{max-width:780px;margin-bottom:65px}.pen-test-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #dedbdf}.pen-test-grid article{padding:34px 28px 0 0}.pen-test-grid h3{margin-top:72px;font-size:clamp(2rem,2.8vw,3rem);font-weight:500;letter-spacing:-.06em}.pen-test-grid p{max-width:36ch;margin-top:15px;color:#706c74;font-size:.97rem;line-height:1.55}.pen-faq-grid details{padding:23px 0;border-top:1px solid #dedbdf}.pen-faq-grid details:last-child{border-bottom:1px solid #dedbdf}.pen-faq-grid summary{display:flex;justify-content:space-between;gap:24px;cursor:pointer;list-style:none;font-size:1.16rem;font-weight:500}.pen-faq-grid summary::-webkit-details-marker{display:none}.pen-faq-grid summary:after{content:"+";color:#e1192a}.pen-faq-grid details[open] summary:after{content:"−"}.pen-faq-grid details p{max-width:47ch;margin-top:15px;color:#706c74;line-height:1.6}.pen-end{padding:clamp(110px,12vw,170px) 0}.pen-end h2{margin-bottom:35px}@media (max-width:850px){.pen-hero{min-height:0;padding-bottom:110px}.pen-code-grid,.pen-faq-grid,.pen-hero__grid,.pen-workflow{grid-template-columns:1fr;gap:46px}.pen-hero__grid{padding-top:100px}.pen-hero h1{font-size:clamp(3.8rem,9.5vw,6rem)}.pen-test-grid{grid-template-columns:1fr}.pen-test-grid article{padding:25px 0 35px;border-bottom:1px solid #dedbdf}.pen-test-grid h3{margin-top:25px}}@media (max-width:520px){.pen-breadcrumb{padding-top:24px}.pen-hero__grid{padding-top:82px}.pen-hero h1{font-size:clamp(3.2rem,13vw,4.2rem)}.pen-hero__aside>p{font-size:1rem}.pen-section{padding:90px 0}.pen-end h2,.pen-section h2{font-size:clamp(2.7rem,10vw,3.8rem)}.pen-flow>div{grid-template-columns:1fr;gap:10px}.pen-code pre{font-size:.7rem}}@media (prefers-reduced-motion:reduce){.pen-button{transition:none}}