* { box-sizing: border-box; }

body {
  display: grid;
  grid-template-areas: "header header" "nav main";
  grid-template-columns: 220px minmax(0, 1fr);
  margin: 0;
  color: #1f2328;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.75;
}

header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75em 1.5em;
  border-bottom: 1px solid #d0d7de;
  background: #0d1117;
  color: #f0f6fc;
}
header .site-name { color: inherit; font-weight: bold; text-decoration: none; }
header a { color: #9ecbff; font-size: .9em; }

nav {
  grid-area: nav;
  padding: 1.5em 1em;
  border-right: 1px solid #d0d7de;
  background: #f6f8fa;
  font-size: .9em;
}
nav p { margin: 0 0 .5em; color: #59636e; font-weight: bold; }
nav ul { margin: 0; padding: 0; list-style: none; }
nav li a { display: block; padding: .25em .5em; border-radius: 4px; color: #1f2328; text-decoration: none; }
nav li a:hover { background: #eaeef2; }
nav li a[aria-current="page"] { background: #ddf4ff; color: #0969da; font-weight: bold; }

main {
  --arasuji-accent: #8250df;
  grid-area: main;
  max-width: 760px;
  padding: 2em 2.5em 4em;
}
main h1 { margin-top: 0; font-size: 2em; }
main section { margin-top: 2.5em; }
main h2 { padding-bottom: .25em; border-bottom: 1px solid #d0d7de; font-size: 1.5em; }
main pre {
  overflow-x: auto;
  padding: 1em;
  border-radius: 6px;
  background: #f6f8fa;
  line-height: 1.5;
}
main code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }
main p code, main li code, main td code { padding: .1em .35em; border-radius: 4px; background: #eff1f3; }
main table { border-collapse: collapse; }
main th, main td { padding: .4em .8em; border: 1px solid #d0d7de; text-align: left; }

@media (max-width: 720px) {
  body { grid-template-areas: "header" "nav" "main"; grid-template-columns: 1fr; }
  nav { border-right: 0; border-bottom: 1px solid #d0d7de; }
  main { padding: 1.25em 1em 3em; }
}