h1, h2, h3, h4, h5, h6 {
margin-top: 2em;
margin-bottom: 0.6em;
color: var(--text);
font-family: var(--font-serif);
font-weight: 700;
line-height: var(--lh-heading);
}
h1 {
margin-top: 0px;
font-size: var(--fs-headline);
border-bottom: 2px solid var(--border);
padding-bottom: 0.3em;
}
h2 {
font-size: var(--fs-title);
border-bottom: 1px solid var(--border);
padding-bottom: 0.2em;
}
h3 {
font-size: var(--fs-subtitle);
}
h4 {
font-size: var(--fs-lead);
}
h5,
h6 {
font-size: var(--fs-body);
}
p {
margin: 1em 0;
}
strong {
color: var(--text);
}
em {
color: var(--text-soft);
}
a {
color: var(--accent);
text-decoration: none;
transition: color 0.15s var(--ease-out);
}
a:hover {
color: var(--accent-hover);
text-decoration: underline;
}
.content :is(p, li, td, dd, figcaption, blockquote) a:not(.ref a, :has(> code:only-child)) {
text-decoration: underline 1px var(--link-underline);
text-underline-offset: 0.2em;
}
.content :is(p, li, td, dd, figcaption, blockquote) a:not(.ref a, :has(> code:only-child)):is(:hover, :focus-visible) {
text-decoration-color: currentColor;
}
ul, ol {
padding-left: 1.5rem;
}
li {
margin: 0.4em 0;
}
blockquote {
margin: 1.5em 0;
padding: 0.8em 1.2em;
border: 1px solid var(--border);
background: var(--bg-light);
color: var(--text-soft);
font-family: var(--font-serif);
font-style: italic;
}
table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
}
th, td {
border: 1px solid var(--border);
padding: 12px;
}
th {
background: var(--bg-table-head);
color: var(--text);
font-weight: 700;
}
hr {
border: none;
border-top: 1px solid var(--border);
margin: 2em 0;
}
img {
max-width: 100%;
border-radius: var(--radius-block);
}
.layout {
display: flex;
}
.sidebar {
width: 260px;
flex-shrink: 0;
padding: 24px;
background: var(--bg-sidebar);
border-right: 1px solid var(--border);
position: sticky;
top: var(--header-h);
height: calc(100vh - var(--header-h));
height: calc(100dvh - var(--header-h));
overflow-y: auto;
}
.sidebar-title {
margin: 0 0 0.6em;
color: var(--text);
font-family: var(--font-serif);
font-size: var(--fs-lead);
-webkit-hyphens: auto;
hyphens: auto;
overflow-wrap: break-word;
font-weight: 700;
line-height: var(--lh-heading);
border-bottom: 1px solid var(--border);
padding-bottom: 0.2em;
}
.sidebar ul {
list-style: none;
padding-left: 0;
}
.sidebar li {
margin: 8px 0;
}
.sidebar li.h2 {
margin-left: 0px;
}
.sidebar li.h3 {
margin-left: 24px;
}
.sidebar li.h4 {
margin-left: 48px;
}
.sidebar ul ul {
padding-left: 18px;
margin-top: 6px;
border-left: 1px solid var(--border);
}
.sidebar a {
color: var(--text-soft);
text-decoration: none;
transition: color 0.15s var(--ease-out);
}
.sidebar a:hover,
.sidebar a:focus-visible {
color: var(--accent);
}
.sidebar a.active {
color: var(--accent);
font-weight: 600;
}
.sidebar-contents-summary {
display: none;
}
@media (max-width: 48em) {
.sidebar-contents-summary {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
list-style: none;
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-soft);
transition: color 0.15s var(--ease-out);
}
.sidebar-contents-summary::-webkit-details-marker {
display: none;
}
.sidebar-contents-summary::before {
content: '';
flex-shrink: 0;
width: 0.4em;
height: 0.4em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
transition: transform 0.15s var(--ease-out);
}
.sidebar-contents[open] > .sidebar-contents-summary::before {
transform: rotate(45deg);
}
.sidebar-contents-summary:hover,
.sidebar-contents-summary:focus-visible {
color: var(--accent);
}
}
.sidebar-all {
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.sidebar-all-summary {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
list-style: none;
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-soft);
transition: color 0.15s var(--ease-out);
}
.sidebar-all-summary::-webkit-details-marker {
display: none;
}
.sidebar-all-summary::before {
content: '';
flex-shrink: 0;
width: 0.4em;
height: 0.4em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
transition: transform 0.15s var(--ease-out);
}
.sidebar-all[open] > .sidebar-all-summary::before {
transform: rotate(45deg);
}
.sidebar-all-summary:hover,
.sidebar-all-summary:focus-visible {
color: var(--accent);
}
.sidebar-all-tree {
margin: 10px 0 0;
padding-left: 0;
}
.sidebar-all-link {
display: block;
font-size: var(--fs-ui);
line-height: var(--lh-ui);
}
.sidebar-all-sep hr {
border: none;
border-top: 1px solid var(--border);
margin: 10px 0;
}
.sidebar-all-heading {
display: block;
padding: 10px 0 2px;
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-soft);
}
.sidebar-all-tree > li:first-child > .sidebar-all-heading,
.sidebar-all-sep + .sidebar-all-group > .sidebar-all-heading {
padding-top: 0;
}
.sidebar .sidebar-all-group > ul {
padding-left: 0;
border-left: none;
}
.sidebar-all-sep {
margin: 0;
}
.sidebar-all-link.is-current {
color: var(--accent);
font-weight: 600;
}
.sidebar-source {
margin-top: 24px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.sidebar-source-links {
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
}
.sidebar-source-links a {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.04em;
color: var(--text-soft);
text-decoration: none;
transition: color 0.15s var(--ease-out);
}
.sidebar-source-links a:hover,
.sidebar-source-links a:focus-visible {
color: var(--accent);
}
@media (min-width: 48.0625em) {
.sidebar-all-summary,
.sidebar-source-links a {
padding-block: 6px;
margin-block: -6px;
}
}
@media (min-width: 48.0625em) and (pointer: coarse) {
.sidebar-all-summary,
.sidebar-source-links a {
min-height: 44px;
padding-block: 0;
margin-block: 0;
}
}
.content {
flex: 1;
max-width: 1200px;
min-width: 0;
padding: 32px 48px;
overflow-wrap: break-word;
}
.content > p,
.content > ul,
.content > ol,
.content > dl,
.content > blockquote {
-webkit-hyphens: auto;
hyphens: auto;
text-wrap: pretty;
}
.content > h1,
.content > h2,
.content > h3,
.content > h4,
.content > h5,
.content > h6 {
text-wrap: balance;
}
.doc-modified {
margin: 10px 0 0;
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.04em;
color: var(--text-soft);
line-height: var(--lh-ui);
}
.doc-modified time {
display: inline-block;
}
.doc-pager {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 20px;
margin-top: 56px;
border-top: 1px solid var(--border);
}
.doc-pager > .doc-next-link:only-child {
margin-left: auto;
}
.doc-prev-link {
display: flex;
align-items: center;
gap: 10px;
padding: 20px 0;
max-width: 42%;
text-decoration: none;
}
.doc-prev-meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.doc-prev-label {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-soft);
}
.doc-prev-title {
font-size: var(--fs-ui);
color: var(--text-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 0.15s var(--ease-out);
}
.doc-prev-arrow {
font-size: var(--fs-ui);
color: var(--text-soft);
flex-shrink: 0;
transition: transform 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.doc-prev-link:hover .doc-prev-title,
.doc-prev-link:focus-visible .doc-prev-title,
.doc-prev-link:hover .doc-prev-arrow,
.doc-prev-link:focus-visible .doc-prev-arrow {
color: var(--accent);
}
.doc-prev-link:hover .doc-prev-arrow,
.doc-prev-link:focus-visible .doc-prev-arrow {
transform: translateX(-3px);
}
.doc-prev-link:focus-visible {
outline: var(--focus-ring);
outline-offset: 4px;
border-radius: var(--radius-xs);
}
.doc-next-link {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
padding: 20px 0;
text-decoration: none;
}
.doc-next-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
min-width: 0;
}
.doc-next-label {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-soft);
}
.doc-next-title {
font-family: var(--font-serif);
font-size: var(--fs-lead);
font-weight: 700;
color: var(--text);
transition: color 0.15s var(--ease-out);
}
.doc-next-arrow {
font-size: var(--fs-lead);
color: var(--accent);
flex-shrink: 0;
transition: transform 0.15s var(--ease-out);
}
.doc-next-link:hover .doc-next-title,
.doc-next-link:focus-visible .doc-next-title {
color: var(--accent);
}
.doc-next-link:hover .doc-next-arrow,
.doc-next-link:focus-visible .doc-next-arrow {
transform: translateX(3px);
}
.doc-next-link:focus-visible {
outline: var(--focus-ring);
outline-offset: 4px;
border-radius: var(--radius-xs);
}
.heading {
position: relative;
scroll-margin-top: 12px;
}
.heading:target {
animation: flash 1s ease;
}
@keyframes flash {
0% {
color: var(--accent);
background: transparent;
}
20% {
color: var(--text);
background: var(--target-bg);
}
100% {
color: var(--accent);
background: transparent;
}
}
.anchor {
margin-right: 8px;
text-decoration: none;
opacity: 0.3;
transition: opacity 0.15s var(--ease-out);
}
.heading:hover .anchor,
.anchor:focus-visible {
opacity: 1;
}
@media (hover: none) {
.content p > a:only-child,
.content p > strong > a:only-child,
.content li > a:only-child {
padding-block: 3px;
}
}
@media (hover: none) {
.anchor {
display: inline-block;
min-width: 24px;
opacity: 0.55;
}
}
.info      { --callout: var(--info);      --callout-bg: var(--info-bg);      --callout-bg1: var(--info-bg1); }
.warning   { --callout: var(--warning);   --callout-bg: var(--warning-bg);   --callout-bg1: var(--warning-bg1); }
.danger    { --callout: var(--danger);    --callout-bg: var(--danger-bg);    --callout-bg1: var(--danger-bg1); }
.attention { --callout: var(--attention); --callout-bg: var(--attention-bg); --callout-bg1: var(--attention-bg1); }
.tip       { --callout: var(--tip);       --callout-bg: var(--tip-bg);       --callout-bg1: var(--tip-bg1); }
.info,
.warning,
.danger,
.attention,
.tip {
padding: 12px 16px;
margin: 32px 0;
display: flex;
align-items: flex-start;
color: var(--callout);
border-top: 1px solid var(--callout);
border-bottom: 1px solid var(--callout);
background: linear-gradient(0deg, var(--callout-bg) 5%, var(--callout-bg1) 25%, var(--callout-bg1) 75%, var(--callout-bg) 95%);
}
.info-content,
.warning-content,
.danger-content,
.attention-content,
.tip-content {
color: var(--text);
min-width: 0;
}
.info-content > :first-child,
.warning-content > :first-child,
.danger-content > :first-child,
.attention-content > :first-child,
.tip-content > :first-child { margin-top: 0; }
.info-content > :last-child,
.warning-content > :last-child,
.danger-content > :last-child,
.attention-content > :last-child,
.tip-content > :last-child { margin-bottom: 0; }
.info strong,
.warning strong,
.danger strong,
.attention strong,
.tip strong { color: var(--callout); }
.info .icon,
.warning .icon,
.danger .icon,
.attention .icon,
.tip .icon {
width: 24px;
height: 24px;
margin-top: calc((1.7em - 24px) / 2);
margin-right: 12px;
flex-shrink: 0;
color: var(--callout);
}
.details {
margin: 1.5em 0;
border: 1px solid var(--border);
border-radius: var(--radius-code);
background: var(--bg-light);
}
.details-summary {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
cursor: pointer;
font-family: var(--font-serif);
font-weight: 700;
color: var(--text);
transition: color 0.15s var(--ease-out);
list-style: none;
}
.details-summary::-webkit-details-marker {
display: none;
}
.details-summary::before {
content: '';
flex-shrink: 0;
width: 0.45em;
height: 0.45em;
border-right: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(-45deg);
transition: transform 0.15s var(--ease-out);
}
.details[open] > .details-summary::before {
transform: rotate(45deg);
}
.details-summary:hover {
color: var(--accent);
}
.details-summary:focus-visible {
outline: var(--focus-ring);
outline-offset: -2px;
border-radius: var(--radius-code);
}
.details-body {
padding: 12px 16px 14px;
border-top: 1px solid var(--border);
}
.details-body > :first-child { margin-top: 0; }
.details-body > :last-child { margin-bottom: 0; }
.banner-tone-attention { --banner: var(--attention); --banner-bg: var(--attention-bg); --banner-bg1: var(--attention-bg1); }
.banner-tone-info      { --banner: var(--info);      --banner-bg: var(--info-bg);      --banner-bg1: var(--info-bg1); }
.banner-tone-warning   { --banner: var(--warning);   --banner-bg: var(--warning-bg);   --banner-bg1: var(--warning-bg1); }
.banner-tone-tip       { --banner: var(--tip);       --banner-bg: var(--tip-bg);       --banner-bg1: var(--tip-bg1); }
.banner-tone-danger    { --banner: var(--danger);    --banner-bg: var(--danger-bg);    --banner-bg1: var(--danger-bg1); }
.banner {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 24px 0 28px;
padding: 14px 16px;
border-top: 1px solid var(--banner);
border-bottom: 1px solid var(--banner);
background: linear-gradient(0deg, var(--banner-bg) 5%, var(--banner-bg1) 25%, var(--banner-bg1) 75%, var(--banner-bg) 95%);
}
.content > .banner:first-child {
margin-top: 0;
}
.banner .icon {
width: 24px;
height: 24px;
margin-top: calc((1.35em - 24px) / 2);
flex-shrink: 0;
color: var(--banner);
}
.banner-title {
margin: 0;
font-family: var(--font-serif);
font-weight: 700;
font-size: var(--fs-body);
line-height: var(--lh-heading);
color: var(--banner);
}
.banner-note {
color: var(--text-soft);
font-size: var(--fs-ui);
}
.banner-note > :first-child { margin-top: 0.35em; }
.banner-note > :last-child { margin-bottom: 0; }
.ref {
font-size: 0.75em;
}
.ref a {
text-decoration: none;
}
.ref a:hover,
.ref a:focus-visible {
text-decoration: underline;
}
@media (pointer: coarse) {
.ref a {
padding: 6px 8px;
margin: 0 -8px;
}
}
.refs {
margin: 1.5em 0;
font-size: var(--fs-ui);
}
.ref-item {
display: flex;
gap: 0.5em;
margin: 0.5em 0;
color: var(--text-soft);
}
.ref-text > p {
margin: 0.4em 0;
}
.ref-text > :first-child { margin-top: 0; }
.ref-text > :last-child { margin-bottom: 0; }
.ref-item:target {
border-radius: var(--radius-xs);
padding: 0.2em 0.4em;
margin: 0.3em -0.4em;
animation: ref-flash 2s ease;
}
@keyframes ref-flash {
0%, 20% {
background: var(--target-bg);
}
100% {
background: transparent;
}
}
.ref-back {
flex-shrink: 0;
display: inline-block;
min-width: 24px;
font-family: var(--font-mono);
font-size: 0.85em;
text-decoration: none;
}
.ref-back:hover,
.ref-back:focus-visible {
text-decoration: underline;
}
.ref-back--plain {
color: var(--text-soft);
cursor: default;
}
.ref-backs {
display: flex;
flex-shrink: 0;
gap: 0.5em;
font-family: var(--font-mono);
font-size: 0.85em;
}
.ref-backs a {
display: inline-block;
min-width: 24px;
text-align: center;
text-decoration: none;
}
.ref-backs a:hover,
.ref-backs a:focus-visible {
text-decoration: underline;
}
.hatnote {
margin: 0 0 24px;
padding: 10px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-code);
color: var(--text-soft);
font-family: var(--font-serif);
font-style: italic;
font-size: var(--fs-ui);
}
@media (max-width: 48em) {
.layout {
flex-direction: column;
}
.sidebar {
width: 100%;
height: auto;
position: static;
border-right: none;
border-bottom: 1px solid var(--border);
padding: 16px 20px;
overflow-y: visible;
}
.sidebar-title {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-soft);
margin-bottom: 10px;
border: none;
padding: 0;
}
.sidebar-contents[open] > .sidebar-toc {
max-height: 50vh;
overflow-y: auto;
margin-top: 10px;
}
.sidebar-toc a {
display: flex;
align-items: center;
min-height: 44px;
}
.sidebar-contents-summary,
.sidebar-all-summary {
min-height: 44px;
}
.sidebar-all-link,
.sidebar-source-links a {
display: flex;
align-items: center;
min-height: 44px;
overflow-wrap: break-word;
}
.content {
padding: 24px 20px;
max-width: 100%;
}
table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
h1 {
font-size: var(--fs-title);
}
h2 {
font-size: var(--fs-subtitle);
}
}
@media (max-width: 25em) {
.sidebar {
padding: 12px 16px;
}
.content {
padding: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
a,
.anchor,
.doc-next-title,
.doc-next-arrow,
.doc-prev-title,
.doc-prev-arrow,
.details-summary,
.details-summary::before,
.sidebar-all-summary,
.sidebar-all-summary::before,
.sidebar-contents-summary,
.sidebar-contents-summary::before {
transition: none;
}
.heading:target,
.ref-item:target {
animation: none;
}
}