:root{--cream:#FAF4EC;--paper:#FFFDF9;--ink:#201618;--pink:#D6336C;--pink-soft:#F7DBE6;--line:#B99EA5;--serif:"Young Serif",Georgia,serif;--sans:"Archivo",-apple-system,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.62 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--pink);color:#fff}
a{color:inherit}
button{font:inherit}
.wrap{width:min(100% - 48px,1000px);margin-inline:auto}
.site-header{border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:25px}
.wordmark{font:400 22px/1.2 var(--serif);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.wordmark em{color:var(--pink);font-style:normal}
.header-link{font-size:13px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--pink);padding-bottom:3px}
.header-link:hover,.text-link:hover{color:var(--pink)}
.hero{padding:72px 0 56px}
h1,h2,h3,p{margin-top:0}
h1{max-width:15ch;font:400 clamp(43px,6vw,70px)/1.1 var(--serif);letter-spacing:-.03em;text-wrap:balance;margin-bottom:22px}
h2{font:400 clamp(32px,4vw,46px)/1.17 var(--serif);letter-spacing:-.02em;text-wrap:balance;margin-bottom:18px}
h3{font:400 23px/1.25 var(--serif);margin-bottom:10px}
.lede{max-width:60ch;font-size:19px;line-height:1.55;margin-bottom:20px}
.byline{display:flex;align-items:center;gap:12px;font-size:13px;line-height:1.4;font-weight:700}
.byline img{width:48px;height:48px;object-fit:cover;border:1px solid var(--ink)}
.pin-preview{width:min(255px,100%);margin:27px 0 0}
.pin-preview img{display:block;width:100%;height:auto;border:1px solid var(--ink)}
.rail{display:flex;flex-wrap:wrap;gap:12px 24px;border-block:1px solid var(--line);padding:15px 0;margin-top:35px;font-size:14px;font-weight:700}
.rail a{text-decoration:none}
.rail a:hover{color:var(--pink)}
.section{padding:56px 0;border-top:1px solid var(--line);scroll-margin-top:20px}
.section.alt{background:var(--paper)}
.section-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:48px}
.section-intro{max-width:38ch}
.prose{max-width:68ch}
.prose p,.section-intro p{margin-bottom:18px}
.plain-list{padding-left:22px;margin:0 0 20px}
.plain-list li{padding-left:5px;margin-bottom:12px}
.steps{list-style:none;margin:8px 0 0;padding:0;border-top:1.5px solid var(--ink)}
.steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.steps .number{font:400 19px/1.3 var(--serif);color:var(--pink)}
.steps strong{display:block;font-size:17px;margin-bottom:5px}
.steps p{margin:0}
.example{border:1.5px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--pink-soft);padding:25px 28px;margin:25px 0}
.alt .example{background:var(--cream)}
.example h3{margin-bottom:14px}
.example p:last-child{margin-bottom:0}
.example-label{font-weight:700;font-size:13px;margin-bottom:13px}
.example + .example{margin-top:34px}
.output-list{border-top:1.5px solid var(--ink);margin-top:23px}
.output-row{display:grid;grid-template-columns:115px minmax(0,1fr);gap:20px;padding:19px 0;border-bottom:1px solid var(--line)}
.output-row strong{font-size:14px}
.output-row p{margin:0}
.prompt{position:relative;background:var(--paper);border:1.5px solid var(--ink);padding:25px 28px;margin:24px 0;box-shadow:6px 6px 0 var(--pink-soft)}
.prompt p{font-weight:700;margin:0 86px 14px 0}
.prompt pre{white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.6 var(--sans);margin:0}
.copy{position:absolute;top:20px;right:20px;background:var(--cream);color:var(--ink);border:1px solid var(--ink);padding:8px 10px;font-size:12px;font-weight:700;cursor:pointer}
.copy:hover{background:var(--pink);color:#fff}
.note{font-size:14px;font-weight:700}
.text-link{font-weight:700;text-decoration:none;border-bottom:2px solid var(--pink)}
.cta{padding:65px 0 75px}
.cta-inner{background:var(--ink);color:var(--cream);padding:42px 48px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.cta h2{font-size:clamp(30px,3.8vw,42px);margin:0 0 10px}
.cta p{margin:0;max-width:50ch}
.cta a{background:var(--pink);color:#fff;border:1.5px solid var(--cream);padding:13px 18px;font-size:14px;font-weight:700;text-decoration:none;text-align:center;box-shadow:3px 3px 0 var(--cream)}
.cta a:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--cream)}
footer{border-top:1px solid var(--line);padding:25px 0 37px;font-size:13px;font-weight:700}
footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.more{display:flex;gap:10px 20px;flex-wrap:wrap}
.more a{text-decoration:none;border-bottom:2px solid var(--pink)}
a:focus-visible,button:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
@media(max-width:700px){.wrap{width:min(100% - 36px,1000px)}.site-header .wrap{padding-block:19px}.wordmark{font-size:19px}.header-link{font-size:12px}.hero{padding:49px 0 40px}h1{font-size:clamp(42px,11vw,58px)}.lede{font-size:17px}.section{padding:42px 0}.section-grid{grid-template-columns:1fr;gap:18px}.example,.prompt{padding:20px}.output-row{grid-template-columns:1fr;gap:5px}.cta{padding:45px 0 55px}.cta-inner{grid-template-columns:1fr;padding:33px 25px}.cta a{justify-self:start}}
@media(max-width:420px){.wordmark{font-size:17px}.header-link{max-width:108px;text-align:right;line-height:1.3}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cta a:hover{transform:none}}