:root{
  --paper:#f2ebd8;
  --paper-2:#ece2c9;
  --ink:#211c14;
  --ink-soft:#574e3d;
  --ink-faint:#897f67;
  --red:#a3301c;
  --line:rgba(33,28,20,.18);
  --surround:#e2d5b2;
  --serif:"Crimson Pro",Georgia,"Times New Roman",serif;
  --mono:"Courier Prime",ui-monospace,"Courier New",monospace;
}

*{box-sizing:border-box}

/* The page is a page: one portrait sheet on a darker surround, with real
   margins. The sheet is the body itself, so no page needs extra markup. */
html{background:var(--surround)}
body{
  max-width:48rem;margin:34px auto;min-height:calc(100vh - 68px);
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line);
  font-family:var(--serif);font-size:19px;line-height:1.6;
}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.wrap{padding:0 56px}

header.bar{border-bottom:1px solid var(--line);margin-bottom:48px}
header.bar .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:26px;padding-bottom:16px}
.brand{color:var(--ink);font-weight:700;font-size:21px;
  display:inline-flex;align-items:center;gap:9px}
.brand img{width:22px;height:22px;display:block}
.brand span{display:none}
.bar nav{margin-left:auto;display:flex;gap:16px;font-family:var(--mono);font-size:13px}
.bar nav a{color:var(--ink-soft)}
.bar nav a[aria-current]{color:var(--ink);text-decoration:underline}

.crumb{display:none}

h1{font-weight:700;font-size:34px;line-height:1.15;margin:0}
h1 .code{display:block;font-family:var(--mono);font-size:15px;font-weight:400;
  color:var(--ink-faint);margin-bottom:8px}
h2{font-weight:700;font-size:25px;line-height:1.2;margin:46px 0 0}
h3{font-weight:700;font-size:19px;margin:28px 0 0}
p{margin:14px 0 0}
.lede{color:var(--ink-soft);margin-top:12px}
ul,ol{margin:14px 0 0;padding-left:20px}
li{margin:6px 0}
li p{margin:0}
li p+p,li pre{margin-top:8px}

pre{font-family:var(--mono);font-size:13.5px;line-height:1.6;margin:16px 0 0;
  padding:14px 16px;background:var(--paper-2);overflow-x:auto;white-space:pre}
code{font-family:var(--mono);font-size:.85em}
p code,li code{background:var(--paper-2);padding:0 3px}
pre code{background:none;padding:0}

.filter{margin:28px 0 0}
.filter input{font-family:var(--mono);font-size:14px;padding:8px 10px;width:100%;
  background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.filter .count{display:block;font-family:var(--mono);font-size:12px;
  color:var(--ink-faint);margin-top:6px}

.codelist{list-style:none;padding:0;margin:16px 0 0}
.codelist li{margin:0}
.codelist a{display:block;padding:5px 0;color:var(--ink)}
.codelist a:hover{text-decoration:none;color:var(--red)}
.codelist .c{font-family:var(--mono);font-size:13.5px;color:var(--red);
  display:inline-block;min-width:13rem}
.codelist .t{color:var(--ink-soft)}
@media(max-width:640px){.codelist .c{display:block;min-width:0}}

footer.foot{margin-top:72px;border-top:1px solid var(--line);padding:18px 0 56px;
  font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
footer.foot a{color:var(--ink-faint)}
footer.foot .wrap{display:flex;gap:16px;flex-wrap:wrap}
footer.foot .sp{margin-left:auto}

@media(max-width:52rem){
  body{margin:0;border:0;min-height:100vh}
  .wrap{padding:0 24px}
  header.bar .wrap{padding-top:18px}
}