/* Navigation */
.bottomInner nav { display: grid; align-content: start; gap: 6px }
.bottomInner nav strong { margin-block-end: 6px; font-size: .76em; font-family: Menlo, Consolas, 'Liberation Mono', monospace; color: var(--t-text); letter-spacing: 0.11em; text-transform: uppercase }
.bottomInner nav a { text-decoration-line: none; color: var(--t-text-2) }
.bottomInner nav a:hover { color: var(--t-link) }
.bottomLinks { flex-wrap: wrap; font-size: .78em; gap: 13px }
.bottomLinks { justify-content: space-between; display: flex; border-block-start: 1px solid var(--t-rule) }
.bottomLinks { padding: 15px 22px 24px; font-family: Menlo, Consolas, 'Liberation Mono', monospace }
.links ul { margin: 0; display: contents }
.links li { display: contents; margin: 0 }
.links ul { list-style-type: none; padding: 0 }
.links li { padding: 0; list-style-type: none }
.twoCol.asideLeft { grid-template-columns: 260px minmax(0,1fr) }
.toc summary { font-weight: 600; cursor: pointer }
.heroGrid { display: flex; align-items: center }
/* Utilities */
.heroGrid { row-gap: 25px; text-align: start; column-gap: 25px; flex-wrap: wrap; justify-content: space-between }
.heroGrid > div:not(.visualk) { flex: 1 1 315px }
.visualk { max-inline-size: 100%; inline-size: 178px }
.visualk { margin: 0 auto 0 0; flex-shrink: 0 }
.visualk > * { block-size: auto; inline-size: 100%; display: block }
.sponsorUnit { margin: 0; inline-size: 100%; min-inline-size: 0; background-color: transparent; display: flex; max-inline-size: 100vw }
.sponsorUnit { box-sizing: border-box; justify-content: flex-end; padding-block: 10px; padding-inline: 14px }
.sponsorContent { flex-direction: column; align-items: center; display: flex }
.sponsorContent { gap: 4px; min-inline-size: 0; box-sizing: border-box; inline-size: 100%; max-inline-size: 100% }
.sponsorContent.sponsorSide { flex-direction: row; min-inline-size: 0; align-items: center; inline-size: 100%; column-gap: 9px; row-gap: 9px }
.sponsorLink { inline-size: min(468px, 100%); max-inline-size: 100%; display: block; min-inline-size: 0; flex: 0 1 auto; flex-basis: auto }
.sponsorImage { max-inline-size: 100%; min-inline-size: 0; inline-size: min(468px, 100%); block-size: auto; display: block }
.sponsorLabel { font-size: .72rem; color: inherit; opacity: .75; line-height: 1.2 }
.sponsorSide .sponsorLabel { white-space: nowrap }
/* Reset */
.sponsorSide .sponsorLink { flex: 0 1 auto; min-inline-size: 0; inline-size: min(468px, 100%); flex-basis: auto }
.authorCard { margin-block-end: 41px; display: flex; margin-block-start: 41px }
.authorCard { row-gap: 15px; padding: 20px; background-color: var(--t-panel); align-items: flex-start; column-gap: 15px }
.authorCard { border: 1px solid var(--t-rule); border-radius: 9px }
.authorCard h4 { margin: 0 0 4px }
.authorCard p { font-size: .94em; margin: 0; color: var(--t-text-2) }
.hide,[hidden] { display: none }
.clamp { -webkit-box-orient: vertical; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4 }
.codeBlock { position: relative }
.srOnly { overflow: hidden; border: 0 }
.srOnly { block-size: 1px; position: absolute; margin: -1px; padding: 0; inline-size: 1px; white-space: nowrap; clip: rect(0,0,0,0) }
.skipToContent { background-color: var(--t-link); inset-block-start: -40px; inset-inline-start: 8px; transition: none }
.skipToContent { color: #111111; border-radius: 0 0 6px 5px; position: absolute }
.skipToContent { padding: 8px 13px 8px 13px; z-index: 100 }
/* Components */
.skipToContent:focus { inset-block-start: 0 }
.space-1 { margin-block-start: 4px }
.space-2 { margin-block-start: 9px }
.space-3 { margin-block-start: 15px }
.space-4 { margin-block-start: 25px }
.space-5 { margin-block-start: 35px }
:focus-visible { outline: 2px solid var(--t-link); outline-offset: 2px }
:focus:not(:focus-visible) { outline: none }
.tip { cursor: help; position: relative; border-block-end: 1px dotted var(--t-text-2) }
.tip::after { color: var(--t-page); padding-inline: 7px; padding-block: 5px; inset-block-end: 125%; transform: translateX(-50%); border-radius: 6px; content: attr(data-tip); background-color: var(--t-text); inset-inline-start: 50%; position: absolute }
.tip::after { font-size: .8em; transition: opacity .15s; pointer-events: none; white-space: nowrap; opacity: 0 }
.tip:hover::after { opacity: 1 }
.dropCap::first-letter { font-size: 3.2em; font-family: 'Josefin Sans', 'Segoe UI', Roboto, sans-serif; float: inline-start; line-height: .8 }
.dropCap::first-letter { color: var(--t-highlight); padding: 6px 7px 0 0; font-weight: 700 }
/* Media */
::selection { color: #111111; background-color: var(--t-link); text-shadow: none }
pre { background-color: var(--t-panel); font-size: .9em }
pre { margin-inline: 0; line-height: 1.5; border-radius: 9px; color: var(--t-text); padding-block: 19px; padding-inline: 18px; margin-block: 1.18em; overflow: auto }
pre code { color: inherit; border-radius: 0 }
pre code { background-color: transparent; font-size: inherit; padding: 0 }
pre::-webkit-scrollbar { block-size: 8px }
pre::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #a4a19880 }
select { font: inherit; background-color: var(--t-panel); padding-block: 9px; color: var(--t-text); inline-size: 100%; padding-inline: 12px; border: 1px solid var(--t-rule); border-radius: 9px }
textarea { background-color: var(--t-panel); border: 1px solid var(--t-rule); padding-block: 9px; padding-inline: 12px; color: var(--t-text); inline-size: 100%; font: inherit; border-radius: 9px }
input { background-color: var(--t-panel); inline-size: 100%; border: 1px solid var(--t-rule); padding-inline: 12px; padding-block: 9px; font: inherit; color: var(--t-text); border-radius: 9px }
input:focus { box-shadow: 0 0 0 3px #e2b23633; border-color: var(--t-link); outline: none }
textarea:focus { border-color: var(--t-link); outline: none; box-shadow: 0 0 0 3px #e2b23633 }
select:focus { outline: none; box-shadow: 0 0 0 3px #e2b23633; border-color: var(--t-link) }
label { font-weight: 600; font-size: .92em; display: block; margin: 0 0 6px }
/* Cards */
textarea { resize: vertical; min-block-size: 120px }
.scrollTop { block-size: 42px; place-items: center; inset-block-end: 16px; inline-size: 42px }
.scrollTop { background-color: var(--t-link); inset-inline-end: 16px; position: fixed; z-index: 50; box-shadow: 0 6px 20px #f3f3f133; display: grid; text-decoration: none; color: #111111; border-radius: 10px }
.scrollTop:hover { background-color: var(--t-link-hover); color: #111111 }
.trail ol { display: flex; flex-wrap: wrap }
.trail ol { margin: 0px; gap: 4px 8px; list-style-type: none; padding: 0 }
.trail li+li::before { opacity: .5; margin-inline-end: 8px; content: "›" }
.trail a:hover { text-decoration: underline }
.isStuck { inset-block-start: 0; position: sticky; z-index: 40; box-shadow: 0 6px 18px #f3f3f114 }
summary { list-style: disclosure-closed; cursor: pointer }
details[open] summary { margin-block-end: 6px }
.cloud { display: flex; flex-wrap: wrap; gap: 8px }
.cloud a { text-decoration: none; color: var(--t-text); background-color: var(--t-wash); border-radius: 4px }
.cloud a { font-size: .86em; padding: 4px 11px 4px 11px }
/* Content */
.cloud a:hover { background-color: var(--t-link); color: #111111 }
tbody tr:hover { background-color: var(--t-wash) }
caption { padding-inline: 0; padding-block: 8px; text-align: start }
caption { color: var(--t-text-2); font-size: .88em; caption-side: top }
.nf { padding-block: 33px; padding-inline: 0; row-gap: 34px; flex-wrap: wrap; align-items: center; display: flex; column-gap: 34px }
.nf img { border-radius: 12px; max-inline-size: 40vw }
body > .statusbar { z-index: 40; position: relative }
/* media */
@media (max-width: 62.06rem){.articleList { grid-template-columns: repeat(2,minmax(0,1fr)) }}
@media (max-width: 57.81rem){.twoCol { grid-template-columns: minmax(0,1fr) }}
@media (max-width: 57.81rem){.sideColumn { position: static }}
@media (max-width: 48.25rem){.spotlight { grid-template-columns: minmax(0,1fr) }}
@media (max-width: 48.25rem){.bottomInner { grid-template-columns: minmax(0,1fr) }}
@media (max-width: 48.25rem){.burger { display: flex }}
@media (max-width: 48.25rem){.links { flex-direction: column; display: none; inline-size: 100%; padding: 6px 0 11px }}
@media (max-width: 48.25rem){[data-nav-open] .links { display: flex }}
@media (max-width: 37.94rem){.articleList { grid-template-columns: minmax(0,1fr) }}
@media (max-width: 37.94rem){.articleList .articleHeader { flex-wrap: wrap }}
@media (max-width: 39.31rem){.jumbo h1,.articleHeader h1 { font-size: 1.8rem }}
@media (max-width: 57.81rem){.twoCol.asideLeft { grid-template-columns: minmax(0,1fr) }}
@media (max-width: 45.19rem){.visualk { margin: 0 auto 11px; inline-size: min(146px, 60vw) }}
@media (max-width: 32.94rem){.sponsorContent.sponsorSide { flex-direction: column }}
@media (max-width: 32.94rem){.sponsorLink { flex-basis: auto }}
@media print{aside { display: none }}
@media print{nav { display: none }}
@media print{footer { display: none }}
@media print{header { display: none }}
@media print{body { color: #000; background-color: #fff; font-size: 11pt }}
@media print{a { color: #000; text-decoration: none }}
@media print{a[href^=http]::after { content: " (" attr(href) ")"; font-size: .85em }}
@media print{h2 { break-after: avoid }}
@media print{h3 { break-after: avoid }}
@media print{img,table,pre { break-inside: avoid }}