* { box-sizing: border-box }

body {
  margin: 0 auto;
  max-width: 86ch;
  padding: 2.4rem 1.25rem 3.5rem;
  background: #000;
  color: #c9c4b6;
  font: 400 13.5px/1.8 ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}

a { color: #f2837b; font-weight: 700; text-decoration: none }
a:hover { text-decoration: underline; text-underline-offset: 3px }
strong { font-weight: 700; color: #e9e4d6 }
p { margin: .8rem 0 }

.bannerwrap { text-align: center; overflow-x: auto }
pre.banner {
  display: inline-block; text-align: left; margin: 0;
  color: #f2837b; font-size: 11.5px; line-height: 1.25; font-family: inherit;
  background: none; border: 0; border-radius: 0; padding: 0; overflow: visible;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }

.dv { text-align: center; color: #5c584d; letter-spacing: 2px; margin: 1.7rem 0 }
.sc { text-align: center; color: #e9e4d6; font-weight: 700; letter-spacing: .18em; margin: 1.1rem 0 .5rem }
.home { margin-top: 2.6rem }
.hdv { display: flex; justify-content: center; align-items: baseline; gap: 1.4ch; margin: 0 0 .5rem; font-size: 1rem; flex-wrap: wrap }
.hdv .blk { color: #5c584d; letter-spacing: 1px }
.hdv .ttl { color: #e9e4d6; font-weight: 700; text-transform: uppercase; letter-spacing: .35em; font-size: 1.02rem }
.meta { text-align: center; color: #8f8b80; font-size: .88em; margin: 0 0 2.3rem }
.end { margin-top: 3rem }

h2 {
  text-align: center; text-transform: uppercase;
  letter-spacing: .4em; font-size: .9rem; font-weight: 700;
  color: #e9e4d6; margin: 2.6rem 0 1rem;
}
h3 { font-size: .95em; font-weight: 700; color: #e9e4d6; margin: 1.6rem 0 .4rem }

.center { text-align: center }
.listwrap { display: flex; justify-content: center }
.listwrap > div { text-align: left; max-width: 100% }
.ln { margin: .25rem 0; white-space: pre-wrap }
.ln .d { color: #8f8b80 }
.info { color: #8f8b80 }

.legend { color: #8f8b80; font-size: .85em; display: flex; gap: 1.4rem; flex-wrap: wrap; justify-content: center; margin: 1.2rem 0 }
.tool { display: flex; gap: 1.4ch; margin: 0 0 1.5rem }
.tool > .bico { margin-top: .35rem; color: #a8a396 }
.tool-b { min-width: 0 }
.tool-h { margin: 0 0 .25rem; display: flex; align-items: baseline; gap: 1ch; flex-wrap: wrap }
.tool-name { font-weight: 700; color: #e9e4d6; font-size: 1.02em }
.tool-net { color: #8f8b80; font-size: .8em }
.tool-d { margin: 0; color: #c5c0b2; font-size: .96em; line-height: 1.75 }

.bico { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto }
.bico.inh { width: 19px; height: 19px; vertical-align: -4px; margin-right: .6ch; color: #e9e4d6 }
.bico.inl { width: 15px; height: 15px; vertical-align: -2px; margin-right: .4ch; color: #a8a396 }

.badge { font-weight: 700; font-size: .85em; white-space: nowrap }
.badge::before { content: "[" } .badge::after { content: "]" }
.badge.ok { color: #f2837b }
.badge.mid { color: #bfa87c }
.badge.no { color: #f2837b } .badge.no::after { content: "!]" }
.badge.dead { color: #8f8b80 }

.lede { color: #c9c4b6 }
.src { list-style: none; padding: 0; margin: .5rem 0 0 }
.src li { display: grid; grid-template-columns: 3ch 1fr; gap: .6ch; margin: .3rem 0; font-size: .93em }
.src .n { color: #77725f }
.src a { word-break: break-word }
.muted { color: #8f8b80; font-size: .88em }

ul, ol { padding-left: 2.4ch }
li { margin: .4rem 0 }
li::marker { color: #8f8b80 }

code { font-size: .92em; background: #14120d; border: 1px solid #221f18; border-radius: 3px; padding: .05rem .45ch; color: #e9c8a0 }
pre { background: none; border: 0; border-radius: 0; padding: .15rem 0 .15rem 3ch; overflow-x: auto; margin: 1.1rem 0 }
pre code { background: none; border: 0; padding: 0; color: #e9e4d6; display: block; line-height: 2 }
pre .c { color: #6f6a58 }
pre .p { color: #f2837b; font-weight: 700; user-select: none }

table { border-collapse: collapse; margin: 1rem 0; font-size: .92em; width: 100% }
th, td { border: 1px solid #2a271f; padding: .45rem .8ch; text-align: left; vertical-align: top }
th { color: #8f8b80; font-weight: 700; text-transform: uppercase; font-size: .82em; letter-spacing: .05em }
blockquote { margin: 1rem 0; padding: .1rem 0 .1rem 1.4ch; border-left: 3px solid #2a271f; color: #a8a396; font-style: italic }
.note, .warn { border-left: 3px solid #2a271f; padding: .1rem 0 .1rem 1.4ch; margin: 1.2rem 0; font-size: .96em; color: #c5c0b2 }
.warn { border-left-color: #f2837b }
.note b, .warn b { display: block; text-transform: uppercase; font-size: .8em; letter-spacing: .05em; color: #8f8b80; margin-bottom: .25rem }
.warn b { color: #f2837b }

.mascot { text-align: center; margin-top: 2.4rem }
.mascot.right { position: fixed; right: 16px; bottom: 12px; margin: 0; z-index: 2 }
.mascot.right img { max-height: 104px }
@media (max-width: 980px) { .mascot.right { display: none } }
.mascot img { image-rendering: pixelated; max-height: 110px }

:focus-visible { outline: 2px solid #f2837b; outline-offset: 3px }
@media (max-width: 640px) { pre.banner { font-size: 8.5px } .hdv .ttl { letter-spacing: .2em } }