@font-face{font-family:Inter;src:url("/fonts/Inter-400-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url("/fonts/Inter-600-latin.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Spectral;src:url("/fonts/Spectral-400-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Spectral;src:url("/fonts/Spectral-500-latin.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:IBM Plex Mono;src:url("/fonts/IBMPlexMono-400-latin.woff2") format("woff2");font-weight:400;font-display:swap}
:root{color-scheme:light;--paper:#faf9f5;--ink:#3c3835;--clay:#d97757;--muted:#716c67;--line:#d9d4cc;--panel:#f3f0e9}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;font-size:16px;line-height:1.65}
a{color:inherit;text-underline-offset:3px}
a:hover{color:#a94f33}
button,textarea{font:inherit}
fieldset{border:0;padding:0;margin:0;min-width:0}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.55}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-5rem;left:1rem;z-index:10;background:var(--ink);color:white;padding:.55rem .8rem}
.skip-link:focus{top:1rem}
.shell{width:min(100% - 3rem,1140px);margin-inline:auto}
.site-header{border-bottom:1px solid var(--line)}
.header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.wordmark{font-family:"IBM Plex Mono",monospace;font-size:1rem;font-weight:600;letter-spacing:.1em;text-decoration:none;white-space:nowrap}
.wordmark span:first-child{font-weight:400}.wordmark-dot{color:var(--clay)}
.site-header nav{display:flex;align-items:center;gap:clamp(.75rem,2.5vw,2rem);font-size:.85rem}
.site-header nav a{text-decoration:none;white-space:nowrap}
.site-header nav .nav-action{border-bottom:1px solid var(--clay);padding-bottom:.2rem}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1.8rem 0 0;color:var(--muted);font-size:.78rem}
.breadcrumb a{color:var(--muted)}
.eyebrow,.section-number{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#99503b}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:Spectral,Georgia,serif;font-weight:500;letter-spacing:-.035em;line-height:1.08}
h1{font-size:clamp(3rem,6.6vw,6.7rem)}
h2{font-size:clamp(2rem,3.5vw,3rem)}
h3{font-size:1.03rem}
p{max-width:70ch}
.hero{padding:clamp(4rem,9vw,8rem) 0 5rem;border-bottom:1px solid var(--line)}
.hero h1{max-width:880px;margin:1.2rem 0 2rem}
.hero-aside{max-width:640px;margin-left:auto;color:var(--muted);font-size:1.08rem}
.hero-aside p:last-child{margin-bottom:0}
.section-intro{padding:5rem 0 1rem}
.section-intro h2{max-width:700px;margin:1rem 0}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.guide-card{padding:2.1rem 2rem 2.5rem;border-right:1px solid var(--line)}
.guide-card:first-child{padding-left:0}
.guide-card:last-child{border-right:0}
.guide-card h2{font-size:1.75rem;line-height:1.15;margin:1.6rem 0 1rem}
.guide-card h2 a{text-decoration:none}
.guide-card p{font-size:.94rem;color:var(--muted)}
.text-link{display:inline-block;color:var(--ink);font-size:.85rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--clay);padding-bottom:.15rem}
.tool-promo{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin:6rem 0;padding:3rem;background:var(--panel);border:1px solid var(--line)}
.tool-promo h2{max-width:600px;margin:1rem 0}
.tool-promo p{color:var(--muted);margin-bottom:0}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.7rem 1.1rem;background:var(--ink);color:white;border:1px solid var(--ink);text-decoration:none;font-weight:600;font-size:.85rem;white-space:nowrap}
.button:hover{background:#554e49;color:white}
.button.secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.button.secondary:hover{border-color:var(--ink);background:var(--panel)}
.article-hero{max-width:930px;padding:5rem 0 4rem}
.article-hero h1{margin:1.5rem 0}
.dek{font-size:1.25rem;color:var(--muted);max-width:760px}
.article-layout{display:grid;grid-template-columns:minmax(0,730px) minmax(190px,1fr);gap:5rem;align-items:start}
.article-section{display:grid;grid-template-columns:48px minmax(0,1fr);gap:1.4rem;padding:2.7rem 0;border-top:1px solid var(--line)}
.article-section h2{font-size:2.15rem;margin-bottom:1.4rem}
.article-section p,.article-section li{color:#514b47}
.article-section ul,.checklist ul{padding-left:1.25rem}
.article-section li,.checklist li{padding-left:.25rem;margin-bottom:.5rem}
.aside-sticky{position:sticky;top:2rem;border-top:1px solid var(--line);padding-top:1.25rem}
.aside-sticky ol{padding-left:1.2rem;margin:1rem 0 2rem;font-size:.85rem}
.aside-sticky li{margin-bottom:.8rem}.aside-sticky a{text-decoration:none}
.aside-tool{display:block;border-top:1px solid var(--line);padding-top:1rem;font-weight:600}
.prompt-panel,.example-panel,.checklist{margin:3rem 0 4rem;padding:2rem;border:1px solid var(--line)}
.prompt-panel{background:var(--panel)}
.prompt-panel h2,.example-panel h2,.checklist h2{font-size:2.2rem;margin:.6rem 0 1rem}
.panel-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem}
.panel-heading a{font-size:.82rem;white-space:nowrap}
.prompt-panel p,.example-panel p,.checklist li{color:#514b47}
.prompt-panel textarea,.tool-result textarea{display:block;width:100%;min-height:300px;resize:vertical;padding:1rem;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-family:"IBM Plex Mono",monospace;font-size:.82rem;line-height:1.7;margin:1.5rem 0 1rem}
.feedback{display:inline-block;min-height:1.5em;margin-left:.8rem;color:#375d4a;font-size:.82rem}
.example-panel h3{font-family:"IBM Plex Mono",monospace;font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);margin:1.6rem 0 .4rem}
.related{padding:3rem 0 6rem;border-top:1px solid var(--line)}
.related h2{margin:1rem 0 2rem}
.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.related-grid .guide-card{border-right:1px solid var(--line)}
.related-grid .guide-card:last-child{border-right:0}
.tool-hero{padding-bottom:4rem}
.tool-layout{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:4rem 0 6rem}
.tool-form,.tool-result{border-top:1px solid var(--ink);padding-top:1.5rem;min-width:0}
.tool-layout h2{font-size:2.5rem;margin:1rem 0}
.tool-layout p{color:var(--muted);font-size:.94rem}
.form-field{margin:1.6rem 0}
.form-field label{display:block;font-size:.9rem;font-weight:600}
.field-hint{margin:.2rem 0 .5rem;font-size:.8rem!important}
.form-field textarea{width:100%;min-height:72px;resize:vertical;border:1px solid var(--line);background:var(--paper);padding:.8rem;color:var(--ink)}
.form-field textarea:focus{border-color:var(--clay)}
.form-actions{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center}
.tool-result textarea{min-height:520px;background:var(--panel)}
.tool-result .feedback{margin:.8rem 0 0}
.noscript-note{border:1px solid var(--clay);padding:1.5rem;margin-bottom:4rem}
.noscript-note pre{overflow-x:auto;white-space:pre-wrap;font-size:.8rem}
.site-footer{border-top:1px solid var(--line)}
.footer-inner{display:flex;justify-content:space-between;gap:1rem;padding:2.5rem 0;color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:.72rem}
@media(max-width:850px){.article-layout{grid-template-columns:1fr}.article-aside{display:none}.guide-grid{grid-template-columns:1fr}.guide-card,.guide-card:first-child{border-right:0;border-bottom:1px solid var(--line);padding:2rem 0}.guide-card:last-child{border-bottom:0}.tool-layout{grid-template-columns:1fr}.tool-result textarea{min-height:330px}}
@media(max-width:600px){.shell{width:min(100% - 2rem,1140px)}.header-inner{align-items:flex-start;flex-direction:column;padding:1rem 0}.site-header nav{width:100%;overflow-x:auto;gap:1rem;padding-bottom:.25rem}.site-header nav a{font-size:.78rem}.hero{padding:3rem 0}.hero h1{font-size:clamp(2.75rem,11vw,4rem)}.hero-aside{font-size:1rem}.article-hero{padding:3rem 0}.article-section{grid-template-columns:1fr;gap:.5rem}.article-section h2{font-size:1.8rem}.prompt-panel,.example-panel,.checklist{padding:1.25rem}.panel-heading{align-items:start;flex-direction:column}.tool-promo{align-items:start;flex-direction:column;padding:1.5rem;margin:4rem 0}.related-grid{grid-template-columns:1fr}.related-grid .guide-card{border-right:0;border-bottom:1px solid var(--line)}.related-grid .guide-card:last-child{border-bottom:0}.footer-inner{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}