/* Shared by the website's inner pages. Same world as the home page: drawing sheets on graphite. */
@font-face{font-family:"Archivo Narrow";font-weight:700;font-display:swap;src:url(fonts/archivo-narrow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:400;font-display:swap;src:url(fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:700;font-display:swap;src:url(fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-display:swap;src:url(fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2")}

:root{
  --ground:#1A1A1A;--sheet:#232323;--raise:#2A2726;--ink:#EDE7E3;--soft:#ABA49F;--faint:#938B86;
  --rule:#38332F;--frame:#4A443F;--rose:#B9838A;--fail:#EC5F57;--pass:#93BB9B;--off:#7C7570;
  --head:"Archivo Narrow",sans-serif;--text:"Atkinson Hyperlegible Next",sans-serif;--mono:"JetBrains Mono",monospace;
  --gutter:clamp(16px,2.6vw,40px);--pad:clamp(10px,1.4vw,22px);
}
*{box-sizing:border-box;margin:0}
html{background:var(--ground);scroll-behavior:smooth;scrollbar-color:#4A443F var(--ground)}
body{background:var(--ground);color:var(--ink);font:400 16.5px/1.6 var(--text);-webkit-font-smoothing:antialiased}
::selection{background:var(--rose);color:#1A1A1A}
a{color:inherit;text-underline-offset:3px;text-decoration-color:var(--frame)}
a:hover{text-decoration-color:var(--rose)}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:3px}
code,.mono{font-family:var(--mono);font-variant-ligatures:none;font-variant-numeric:tabular-nums;font-size:.9em}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--rose);color:#1A1A1A;padding:8px 12px;z-index:9}

/* sheet frame */
.sheet{position:relative;margin:var(--gutter);border:1px solid var(--rule);padding:var(--pad)}
.sheet-in{position:relative;background:var(--sheet);border:1.5px solid var(--frame)}
header.top{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);padding:14px clamp(16px,2.4vw,34px);border-bottom:1px solid var(--rule);font-size:14px}
.brand{font:700 21px/1 var(--head);letter-spacing:.01em;text-decoration:none}.brand b{color:var(--rose);font-weight:700}
header.top nav{display:flex;gap:clamp(12px,2vw,26px)}
header.top nav a{color:var(--soft);text-decoration:none}header.top nav a:hover,header.top nav a[aria-current]{color:var(--ink)}
header.top nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:6px}
.gh{margin-left:auto;color:var(--ink);text-decoration:none;border:1px solid var(--frame);border-radius:7px;padding:7px 13px;display:inline-flex;gap:8px;align-items:center}
.gh:hover{border-color:var(--rose)}.gh svg{width:16px;height:16px}

.page-head{padding:clamp(32px,5vw,72px) clamp(20px,4vw,60px) clamp(28px,4vw,52px)}
.page-head h1{font:700 clamp(40px,4.4vw,64px)/1 var(--head);letter-spacing:-.01em;text-wrap:balance;max-width:18ch}
.page-head p{margin-top:16px;color:var(--soft);font-size:clamp(16px,1.3vw,19px);max-width:58ch}
.toc{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:24px;font:400 13.5px/1 var(--mono)}
.toc a{color:var(--rose);text-decoration:none}.toc a:hover{text-decoration:underline}

/* following sheets */
.part{margin:0 var(--gutter) var(--gutter);border:1px solid var(--rule);padding:var(--pad);scroll-margin-top:16px}
.part-in{background:var(--sheet);border:1.5px solid var(--frame);padding:clamp(28px,4.5vw,60px) clamp(20px,4vw,60px)}
.part h2{font:700 clamp(28px,2.8vw,40px)/1.06 var(--head);text-wrap:balance;max-width:24ch}
.sheetno{font:400 12.5px/1 var(--mono);color:var(--faint);margin-bottom:16px;display:block}
.intro{margin-top:12px;color:var(--soft);max-width:64ch}

/* the run, in order */
ol.proc{list-style:none;padding:0;margin-top:clamp(22px,3vw,36px);counter-reset:p}
ol.proc li{counter-increment:p;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;padding:15px 0;border-top:1px solid var(--rule)}
ol.proc li::before{content:counter(p);grid-row:span 2;font:600 15px/1.5 var(--mono);color:var(--rose)}
ol.proc b{font-weight:700}
ol.proc span{color:var(--soft);font-size:15px}

/* tables */
table.t{width:100%;border-collapse:collapse;margin-top:clamp(22px,3vw,36px);font-size:15px}
.t th{text-align:left;font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--faint);padding:0 16px 12px 0;border-bottom:1.5px solid var(--frame)}
.t td{padding:13px 16px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--soft)}
.t td:first-child{color:var(--ink);font-weight:700}
.t td.n{font-family:var(--mono);color:var(--ink);white-space:nowrap}
.t td.cap{font-family:var(--mono);color:var(--fail);white-space:nowrap}

/* grids of short facts */
.facts{list-style:none;padding:0;margin-top:clamp(22px,3vw,36px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px)}
.facts li{padding:16px 0;border-top:1px solid var(--rule);color:var(--soft)}
.facts strong{display:block;color:var(--ink);font:700 19px/1.2 var(--head);margin-bottom:5px}
.facts code{color:var(--rose)}

.sample{margin-top:18px;padding:13px 16px;background:var(--ground);border:1px solid var(--frame);border-radius:8px;font:400 13.5px/1.5 var(--mono);color:var(--ink);overflow-x:auto}
.guide{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.guide span{font:600 13px/1 var(--mono);padding:9px 12px;border:1px solid var(--frame);border-radius:7px;color:var(--soft)}
.guide b{color:var(--ink)}

/* the command box (same as the home page) */
.cmd{display:flex;align-items:stretch;border:1px solid var(--frame);border-radius:9px;background:var(--ground);overflow:hidden;max-width:640px;margin-top:20px}
.cmd .pre{flex:none;padding:15px 0 15px 16px;font:400 15px/1.3 var(--mono);color:var(--ink);font-variant-ligatures:none;cursor:text}
.cmd .srv{flex:1;min-width:0;border:0;background:transparent;padding:15px 16px 15px 1ch;font:400 15px/1.3 var(--mono);color:var(--rose);caret-color:var(--rose);outline:none;font-variant-ligatures:none}
.cmd .srv::placeholder{color:var(--rose);opacity:.8}
.cmd:focus-within{border-color:var(--rose)}
.copy{font:700 15px/1 var(--text);background:var(--rose);color:#1A1A1A;border:0;padding:0 20px;cursor:pointer;transition:background .2s}
.copy:hover{background:#C89299}.copy[data-done]{background:var(--ink)}

footer{margin:0 var(--gutter) var(--gutter);padding:18px 4px;display:flex;flex-wrap:wrap;gap:10px 24px;color:var(--faint);font-size:13.5px;border-top:1px solid var(--rule)}
footer a{color:var(--soft)}footer .r{margin-left:auto}

@media (max-width:760px){
  header.top nav{display:none}
  .facts{grid-template-columns:1fr}
  .t thead{display:none}
  .t tr{display:block;padding:12px 0;border-bottom:1px solid var(--rule)}
  .t td{display:block;border:0;padding:2px 0}
  .cmd{flex-wrap:wrap}.cmd .pre{width:100%;padding-bottom:0}.cmd .srv{padding-left:16px}.cmd .copy{width:100%;padding:13px}
}