.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 54px;
  padding: 0 22px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-grid)
}
.bar .sp {
  flex: 1
}
.wrap {
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  gap: 34px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 24px 80px
}
.toc {
  position: sticky;
  top: 74px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow: auto;
  border-right: 1px solid var(--c-grid);
  padding-right: 14px
}
.toc .h {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-faint);
  margin-bottom: 10px
}
.toc a {
  display: block;
  color: var(--c-muted);
  text-decoration: none;
  font-size: 12.8px;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1.4
}
.toc a:hover {
  color: var(--c-ink);
  background: var(--c-active)
}
.toc a.sub {
  padding-left: 20px;
  font-size: 12.3px
}
.toc a.on {
  color: var(--c-accent);
  background: var(--c-accent-soft);
  font-weight: 600
}

article {
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.65
}
.doc-title {
  font-size: 30px;
  letter-spacing: -.02em;
  margin: 0 0 22px;
  color: var(--c-accent)
}
article h2 {
  font-size: 21px;
  margin: 38px 0 4px;
  padding-top: 15px;
  border-top: 1px solid var(--c-grid);
  color: var(--c-accent)
}
article h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none
}
article .sect {
  color: var(--c-muted);
  font-style: italic;
  margin: 0 0 6px
}
article h3 {
  font-size: 16.5px;
  margin: 28px 0 8px
}
article p {
  margin: 0 0 10px
}
article ul {
  margin: 0 0 12px;
  padding-left: 20px
}
article li {
  margin-bottom: 5px
}
article code {
  font: 12.5px/1 var(--font-mono);
  background: var(--c-active);
  padding: 2px 5px;
  border-radius: 4px
}
article a {
  color: var(--c-accent)
}

.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--c-grid);
  border-radius: 10px;
  margin: 12px 0
}
.tablewrap table {
  width: 100%;
  border-collapse: collapse
}
.tablewrap th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-faint);
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-grid)
}
.tablewrap td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-grid);
  vertical-align: top
}
.tablewrap tr:last-child td {
  border-bottom: none
}
.tablewrap td:first-child {
  white-space: nowrap
}

@media(max-width:900px) {
  .wrap {
    grid-template-columns: 1fr
  }
  .toc {
    position: static;
    border-right: none;
    max-height: none
  }
}
@media print {
  .bar, .toc {
    display: none
  }
  .wrap {
    grid-template-columns: 1fr;
    padding: 0
  }
}