@font-face{font-family:"Fraunces";src:url("fonts/Fraunces-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-var.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-var.woff2") format("woff2");font-weight:100 800;font-display:swap}
:root{
  --n-0:#FBF8F1;--n-1:#F3EEE2;--n-2:#E6DFCF;--n-3:#CBC2AE;--n-5:#8A7E67;--n-7:#5A5040;--n-9:#2E2922;--n-11:#1C1915;
  --bg:var(--n-0);--surface:var(--n-1);--line:var(--n-2);--line-strong:var(--n-3);--ink:var(--n-11);--ink-2:var(--n-7);--muted:var(--n-5);
  --accent:#C8532A;--accent-hover:#AD4521;--ok:#2F7A4C;--warn:#B07A14;--danger:#C0392B;
  --slate:#26221C;--slate-2:#312C25;--slate-line:#45403A;--slate-ink:#EFE9DD;--slate-ink-2:#B7AE9F;--slate-accent:#E8845A;--slate-code:#1C1915;
  --code-bg:#F3EEE2;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#1C1915;--surface:#26221C;--line:#352F28;--line-strong:#45403A;--ink:#EFE9DD;--ink-2:#D5CCBC;--muted:#B7AE9F;
  --accent:#E8845A;--accent-hover:#F39A74;--ok:#6CC08A;--warn:#E0A83A;--danger:#EE6B5B;
  --slate:#121009;--slate-2:#1C1915;--slate-line:#352F28;--code-bg:#26221C;
  color-scheme:dark;
}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:64px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 "Instrument Sans",ui-sans-serif,sans-serif;font-variation-settings:"wdth" 100}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px;transition:color 150ms ease-out}
a:hover{color:var(--accent-hover);text-decoration-thickness:2px}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
code,kbd{font:0.86em/1.45 "JetBrains Mono",ui-monospace,monospace;background:var(--code-bg);padding:.1em .35em;border-radius:3px}
pre{background:var(--code-bg);border:1px solid var(--line);border-radius:3px;padding:14px 16px;overflow-x:auto;font-size:13.5px;line-height:1.55;margin:14px 0}
pre code{background:none;padding:0;font-size:inherit}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 60,"opsz" 48;letter-spacing:-.01em}
h1{font-size:clamp(34px,6vw,56px);line-height:1.04;font-weight:600;margin:10px 0 18px}
h2{font-size:clamp(26px,3.6vw,40px);line-height:1.12;font-weight:600;margin:72px 0 16px;padding-top:18px;border-top:1px solid var(--line-strong)}
h3{font-size:22px;line-height:1.25;font-weight:600;margin:40px 0 10px}
h4{font-size:17px;margin:28px 0 8px;font-weight:700}
p,li{max-width:70ch}
ul,ol{padding-left:1.25em}
li{margin:5px 0}
li>p{margin:5px 0}
strong{font-weight:700}
hr{border:0;border-top:1px solid var(--line-strong);margin:40px 0}

.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0)}
.top-in{max-width:1140px;margin:0 auto;padding:0 20px;min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:18px}
.brand svg{width:26px;height:26px;flex:none}
.meta{color:var(--muted);font-size:13.5px;white-space:nowrap}

.layout{max-width:1140px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px}
.toc{position:sticky;top:70px;align-self:start;max-height:calc(100vh - 90px);overflow:auto;padding:30px 0 40px;font-size:14px}
.toc-h{font-size:12px;font-weight:700;color:var(--muted);margin:0 0 8px}
.toc ol,.toc-m ol{list-style:none;margin:0;padding:0}
.toc a,.toc-m a{display:block;padding:4px 10px;border-left:2px solid var(--line);color:var(--ink-2);text-decoration:none;line-height:1.35;transition:border-color 150ms ease-out,color 150ms ease-out}
.toc a:hover{color:var(--ink);border-left-color:var(--line-strong)}
.toc a[aria-current]{color:var(--ink);border-left-color:var(--accent);font-weight:600}
.toc .fold{margin:10px 0 6px;padding:4px 10px;color:var(--muted);font-size:12px;border-top:1px dotted var(--line-strong)}
.toc-m{display:none}
.doc{min-width:0;max-width:760px;padding:30px 0 90px}
@media (max-width:940px){
  .layout{grid-template-columns:minmax(0,1fr);gap:0}
  .toc{display:none}
  .toc-m{display:block;margin:0 0 18px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
  .toc-m summary{cursor:pointer;padding:10px 14px;font-weight:600}
  .toc-m ol{padding:0 8px 10px}
  .meta{display:none}
  h2{margin-top:56px}
  td.part{white-space:normal;font-size:16px}
  table{font-size:14.5px}
}

.kicker{font-size:13.5px;color:var(--muted);margin:0 0 6px}
.lede{font-size:20px;line-height:1.5;color:var(--ink-2);margin:0 0 28px;max-width:62ch}

.tablewrap{overflow-x:auto;margin:16px 0 20px}
table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
th,td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--line)}
th{font-weight:700;color:var(--ink-2);border-bottom:1px solid var(--line-strong)}
td.part{font-family:"Fraunces",Georgia,serif;font-size:17px;font-weight:600;white-space:nowrap}
td.cost{white-space:nowrap}

.note{border-left:3px solid var(--accent);padding:4px 0 4px 16px;margin:18px 0}
.note.plain{border-left-color:var(--line-strong)}
.note .label{font-size:12.5px;font-weight:700;color:var(--muted);display:block;margin-bottom:2px}

.steps{list-style:none;padding:0;margin:16px 0;counter-reset:st}
.steps>li{counter-increment:st;position:relative;padding:12px 0 12px 54px;border-top:1px solid var(--line);margin:0}
.steps>li:last-child{border-bottom:1px solid var(--line)}
.steps>li::before{content:counter(st);position:absolute;left:0;top:11px;width:36px;height:36px;border:1px solid var(--line-strong);border-radius:3px;font-family:"Fraunces",Georgia,serif;font-size:19px;font-weight:600;display:grid;place-items:center;color:var(--ink-2)}
.steps b{display:block;font-weight:700}

.paste{border:1px solid var(--line-strong);border-radius:3px;padding:14px 16px 12px;margin:18px 0;background:var(--surface)}
.paste .label{font-size:12.5px;font-weight:700;color:var(--muted);display:block;margin-bottom:8px}
.paste pre{margin:0;background:var(--bg)}

.diagram{margin:20px 0 10px}
.diagram svg{width:100%;height:auto;display:block}
.diagram figcaption{font-size:13.5px;color:var(--muted);margin-top:6px}

/* The fold: the technician's half */
.fold-line{margin:88px -20px 0;padding:0 20px;position:relative}
.fold-line::before{content:"";display:block;border-top:2px dotted var(--line-strong)}
.fold-line span{position:absolute;top:-11px;left:20px;background:var(--bg);padding:0 10px 0 0;font-size:12.5px;font-weight:700;color:var(--muted)}
.tech{background:var(--slate);color:var(--slate-ink);margin:0 -20px;padding:40px 20px 70px}
.tech .tech-in{max-width:760px}
.tech h2{border-top-color:var(--slate-line);color:var(--slate-ink)}
.tech h2:first-of-type{margin-top:0;border-top:0;padding-top:0}
.tech h3,.tech h4{color:var(--slate-ink)}
.tech p,.tech li{color:var(--slate-ink)}
.tech a{color:var(--slate-accent)}
.tech code,.tech kbd{background:var(--slate-code);color:var(--slate-ink)}
.tech pre{background:var(--slate-code);border-color:var(--slate-line);color:var(--slate-ink)}
.tech th,.tech td{border-color:var(--slate-line)}
.tech th{color:var(--slate-ink-2)}
.tech .note{border-left-color:var(--slate-accent)}
.tech .note .label,.tech .kicker{color:var(--slate-ink-2)}
.tech .steps>li{border-color:var(--slate-line)}
.tech .steps>li::before{border-color:var(--slate-line);color:var(--slate-ink-2)}
.tech .muted{color:var(--slate-ink-2)}

.foot{max-width:1140px;margin:0 auto;padding:28px 20px 48px;color:var(--muted);font-size:13.5px;border-top:1px solid var(--line)}
.foot p{margin:4px 0}

/* 404 */
.err{max-width:640px;margin:14vh auto;padding:0 20px}
.err .code{font-family:"Fraunces",Georgia,serif;font-size:96px;line-height:1;color:var(--danger);font-weight:600}
.err .actions a{margin-right:18px}