:root{--ink:#000;--paper:#fff;--red:#E8341C;--mute:#555}*{box-sizing:border-box}body{margin:0;background:#FAFAFA;color:var(--ink);font-family:Archivo,"Helvetica Neue",Arial,sans-serif}.wrap{width:min(1040px,calc(100% - 40px));margin:auto}.site{background:#fff;border-bottom:3px solid #000}.site .wrap{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:9px;color:#000;text-decoration:none;font-weight:900;letter-spacing:-.04em;text-transform:uppercase}.brand-icon{width:34px;height:34px}.brand-c{color:var(--red)}nav{display:flex;gap:20px}nav a{color:#000;font-size:11px;font-weight:700;letter-spacing:.08em;text-decoration:none;text-transform:uppercase}nav a:hover{color:var(--red)}main{padding:58px 0 80px}.eyebrow{margin:0 0 14px;color:var(--red);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}h1{max-width:800px;margin:0 0 20px;font-size:clamp(40px,8vw,78px);line-height:.91;letter-spacing:-.06em;text-transform:uppercase}h1 span{color:var(--red)}.lede{max-width:650px;margin:0 0 28px;color:#333;font-size:17px;line-height:1.55}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:42px}.button{display:inline-block;padding:13px 19px;background:var(--red);color:#fff;font-size:12px;font-weight:700;letter-spacing:.05em;text-decoration:none;text-transform:uppercase}.button:hover{background:#000}.button.secondary{background:#fff;color:#000;border:2px solid #000}.button.secondary:hover{background:#000;color:#fff}.preview{margin:0 0 48px;padding:20px;background:#fff;border:2px solid #000;box-shadow:7px 7px 0 var(--red)}.preview svg{display:block;width:100%;height:auto;max-height:360px}.preview figcaption{margin-top:12px;color:var(--mute);font-size:12px}.copy{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:3px solid #000}.copy section{padding:22px 24px 18px 0;border-bottom:2px solid #000}.copy section:nth-child(even){padding-left:24px;border-left:2px solid #000}.copy h2{margin:0 0 9px;font-size:19px;letter-spacing:-.03em;text-transform:uppercase}.copy p,.copy li{color:#333;font-size:14px;line-height:1.6}.copy ul{padding-left:19px;margin:0}.how{grid-column:1/-1}.how ol{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0;margin:0;list-style:none;counter-reset:step}.how li{counter-increment:step;border-top:2px solid #000;padding-top:10px}.how li:before{content:"0" counter(step);display:block;margin-bottom:8px;color:var(--red);font-size:11px;font-weight:700;letter-spacing:.1em}@media(max-width:600px){.wrap{width:min(100% - 28px,1040px)}.brand>span{display:none}nav{gap:10px}nav a{font-size:9px}.copy{display:block}.copy section,.copy section:nth-child(even){padding:18px 0;border-left:0}.how ol{grid-template-columns:1fr}.preview{padding:10px;box-shadow:4px 4px 0 var(--red)}}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.export-note{max-width:760px;margin:-24px 0 34px;font-size:13px;line-height:1.65;color:var(--mute)}
.export-note a,.copy a,.template-faq a{color:inherit;text-underline-offset:3px}
.labeled-preview h2{margin:0 0 16px;font-size:20px;letter-spacing:-.03em;text-transform:uppercase}
.labeled-preview svg{max-height:440px}
.labeled-preview figcaption{max-width:78ch;font-size:14px;line-height:1.65}
.edge-labels,.node-labels{font-family:Archivo,Arial,sans-serif;text-anchor:middle;font-weight:700;fill:#000}
.edge-labels{font-size:15px;paint-order:stroke;stroke:#fff;stroke-width:7px;stroke-linejoin:round}
.node-labels{font-size:15px;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.detailed-copy section:nth-child(4){padding-left:0;border-left:0}.detailed-copy section:nth-child(5){padding-left:24px;border-left:2px solid #000}
.template-faq{margin-top:34px}.template-faq h2{font-size:23px;text-transform:uppercase;letter-spacing:-.03em}
.template-faq details{border-top:1px solid #bbb;padding:16px 0}.template-faq summary{cursor:pointer;font-size:15px;font-weight:700;line-height:1.5}
.template-faq p{max-width:78ch;color:#333;font-size:14px;line-height:1.65;margin:12px 0 0}
.template-next{margin-top:28px;padding-top:25px;border-top:3px solid #000}.template-next p{font-size:18px;font-weight:700;line-height:1.4}
@media(max-width:600px){.actions{gap:10px}.button{min-height:44px;line-height:1.5}.export-note{margin-top:-24px;font-size:12px}.labeled-preview h2{font-size:17px}.labeled-preview figcaption{font-size:13px}.detailed-copy section:nth-child(5){padding-left:0;border-left:0}.template-next .button{max-width:100%;text-align:center}}
