article.doc {
max-width: 76ch;
}
article.doc h2 {
display: block;
padding-top: 18px;
border-top: 1px solid var(--paper-line);
}
article.doc > h2:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
article.doc h4 {
margin-top: 22px;
font-size: 16px;
font-weight: 650;
color: var(--ink);
}
article.doc a.self {
color: inherit;
text-decoration: none;
}
article.doc a.self:hover {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--paper-line);
text-underline-offset: 4px;
}
article.doc li > ul,
article.doc li > ol {
margin-top: 6px;
}
article.doc li > p + p {
margin-top: 8px;
}
article.doc hr {
margin: 32px 0;
border: 0;
border-top: 1px solid var(--paper-line);
}
article.doc pre {
padding: 14px 16px;
overflow-x: auto;
background: var(--paper-card);
border: 1px solid var(--paper-line);
border-radius: 8px;
font-size: 13.5px;
line-height: 1.55;
}
article.doc pre code {
padding: 0;
border: 0;
background: none;
font-size: inherit;
overflow-wrap: normal;
white-space: pre;
}
article.doc .table {
overflow-x: auto;
border: 1px solid var(--paper-line);
border-radius: 8px;
background: var(--paper-card);
}
article.doc table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
line-height: 1.5;
}
article.doc th,
article.doc td {
padding: 8px 12px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--paper-line);
}
article.doc th {
color: var(--ink);
font-weight: 650;
white-space: nowrap;
}
article.doc tr:last-child td {
border-bottom: 0;
}
article.doc td code {
overflow-wrap: normal;
white-space: nowrap;
}
article.doc blockquote {
margin: 14px 0 0;
padding: 2px 0 2px 16px;
border-left: 3px solid var(--paper-line);
color: var(--ink-quiet);
}
article.doc blockquote > * + * {
margin-top: 8px;
}
article.doc blockquote.alert {
--tone: var(--blue);
padding: 12px 16px;
border-left-color: var(--tone);
border-radius: 0 8px 8px 0;
background: var(--paper-card);
color: var(--ink-body);
}
article.doc blockquote.important {
--tone: #7a4fd0;
}
article.doc blockquote.warning {
--tone: #b06d00;
}
article.doc blockquote.caution {
--tone: #c2362b;
}
article.doc blockquote.tip {
--tone: #2f8a4c;
}
article.doc .alert-title {
font-weight: 650;
color: var(--tone);
}
article.doc .diagram {
padding: 16px;
overflow-x: auto;
text-align: center;
background: var(--paper-card);
border: 1px solid var(--paper-line);
border-radius: 8px;
}
article.doc .diagram svg {
max-width: 100%;
height: auto;
}
article.doc .manuals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: 10px;
padding: 0;
list-style: none;
}
article.doc .manuals li + li {
margin-top: 0;
}
article.doc .manuals a {
display: flex;
flex-direction: column;
gap: 4px;
height: 100%;
padding: 14px 16px;
background: var(--paper-card);
border: 1px solid var(--paper-line);
border-radius: 10px;
color: var(--ink-quiet);
font-size: 15px;
line-height: 1.45;
text-decoration: none;
}
article.doc .manuals a:hover {
border-color: var(--ink);
color: var(--ink-quiet);
}
article.doc .manuals b {
color: var(--blue);
font-weight: 650;
}
@media (max-width: 559px) {
article.doc pre {
margin-left: calc(var(--gutter) * -1);
margin-right: calc(var(--gutter) * -1);
border-radius: 0;
border-left: 0;
border-right: 0;
}
}