:root { --accent: #e5383b;
	--dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges' fill-opacity='.36'%3E%3Cpath d='M0 0h1v1H0zM2 0h1v3H2zM0 2h1v2H0z'/%3E%3C/svg%3E"); }
body { margin: 0; background: #0a0a0b; color: #ece8df; font-family: Verdana, sans-serif; font-size: 13px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* The website's style (app.css): the menu's Void & Bone neutrals and red accent, skrt dot texture, square
   cards with a slim title strip, flat square controls. Verdana 13 px ImGui line height = 10.7 px CSS,
   17 px rows. Wiki additions: sidebar, function cards, badges, code blocks (all in the same colors). */
#screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
#win { --winBg: #121213; --head: #0f0f10; --panel: #121213; --line: #222224; --field: #1a1a1c; --fieldLine: #2d2d30;
	--text: #ece8df; --dimText: #8f8c86; --mute: #5c5a56; --bad: #e8776d; --warn: #e3b261; }
#win { position: relative; flex: 1; display: flex; flex-direction: column; background: var(--winBg); font-size: 10.7px; line-height: 17px; }
.header { display: flex; align-items: center; flex: none; height: 32px; box-sizing: border-box; padding: 0 10px; background: var(--head); border-bottom: 1px solid var(--line); user-select: none; }
.title { flex: 1; display: flex; align-items: center; margin: 0; font-size: 12.34px; font-weight: bold; letter-spacing: 0.06em; }
/* The Nihilo wordmark (app.css .wordmark). */
.title .wordmark { display: block; flex: none; height: 0.9693em; width: 4.5284em; color: var(--text); }
.title .wordmark .slash { stroke: var(--accent); }
/* Easter egg (wiki.js, 1 page load in 100): the slash cycles slowly through the rainbow (app.css). */
.rainbow .title .wordmark .slash { animation: rainbow 12s linear infinite; }
@keyframes rainbow { 0%, 100% { stroke: oklch(0.7 0.16 25); } 12.5% { stroke: oklch(0.7 0.16 65); } 25% { stroke: oklch(0.7 0.16 100); } 37.5% { stroke: oklch(0.7 0.16 145); } 50% { stroke: oklch(0.7 0.16 195); } 62.5% { stroke: oklch(0.7 0.16 250); } 75% { stroke: oklch(0.7 0.16 295); } 87.5% { stroke: oklch(0.7 0.16 340); } }
.title .sub { margin-left: 8px; font-weight: normal; letter-spacing: 0.02em; color: var(--dimText); }
.who { display: flex; gap: 10px; color: var(--dimText); white-space: nowrap; }
button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.content { flex: 1; padding: 20px 10px; display: grid; grid-template-columns: 240px minmax(0, 860px); gap: 10px; justify-content: center; align-content: start; background: var(--dots) 0 0 / 4px 4px fixed, #121213; image-rendering: pixelated; }
.panel { min-width: 0; background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line); }
.ptitle { position: relative; box-sizing: border-box; height: 17px; margin: 0; padding: 4px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; font-size: 9.9px; font-weight: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dimText); text-box: trim-both cap alphabetic; }
.ptitle::before { content: ""; position: absolute; left: 0; top: 4px; height: 7px; width: 2px; background: var(--accent); }
.body { padding: 6px 10px 8px; }
.row { display: flex; align-items: baseline; margin-bottom: 4px; }
.row .k { flex: none; width: 70px; color: var(--dimText); }
.row .v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dim { color: var(--dimText); margin-bottom: 6px; }
.link, a { color: var(--accent); cursor: pointer; }
.link:hover, .link:focus-visible, a:hover, a:focus-visible { text-decoration: underline; outline: none; }
input.txt { display: block; width: 100%; height: 24px; margin-bottom: 6px; box-sizing: border-box; background: var(--field); border: 1px solid var(--fieldLine); color: var(--text); font: inherit; padding: 0 7px; outline: none; }
input.txt::placeholder { color: var(--dimText); }
input.txt:focus { border-color: var(--accent); }
/* Sidebar: the menu rework's list (sunken field; the current row has an accent tint and a 2 px accent bar). Links are
   real links, so Tab reaches them; keyboard focus looks like hover. */
aside { align-self: start; position: sticky; top: 10px; max-height: calc(100vh - 20px); display: flex; flex-direction: column; }
aside .panel { display: flex; flex-direction: column; min-height: 0; }
aside .body { display: flex; flex-direction: column; min-height: 0; }
.list { background: #0e0e0f; border: 1px solid var(--line); padding: 2px 0; overflow-y: auto; min-height: 0; }
.list .grp { padding: 4px 8px 0; color: var(--dimText); font-size: 9.9px; letter-spacing: 0.1em; text-transform: uppercase; }
.list a { display: flex; padding: 0 8px; line-height: 17px; color: var(--dimText); text-decoration: none; }
.list a:hover, .list a:focus-visible { background: #1a1a1c; color: var(--text); outline: none; text-decoration: none; }
.list a:focus-visible { box-shadow: inset 2px 0 0 var(--text); }
.list a[aria-current] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.list .n { margin-left: auto; color: var(--dimText); font-variant-numeric: tabular-nums; }
.list::-webkit-scrollbar, pre::-webkit-scrollbar { width: 4px; height: 4px; }
.list::-webkit-scrollbar-track, pre::-webkit-scrollbar-track { background: transparent; }
.list::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb { background: #343437; min-height: 18px; }
.list::-webkit-scrollbar-thumb:hover, pre::-webkit-scrollbar-thumb:hover { background: var(--accent); }
#count { margin: 6px 0 0; }
main { display: grid; gap: 10px; align-content: start; min-width: 0; }
main p { margin: 0 0 6px; }
main ul { margin: 0 0 6px; padding-left: 16px; color: var(--dimText); }
main li { margin-bottom: 3px; }
main b { font-weight: normal; color: var(--text); }
code, pre { font-family: Consolas, "Courier New", monospace; }
code { color: var(--text); }
pre { margin: 0 0 6px; padding: 3px 8px; overflow-x: auto; background: #0e0e0f; border: 1px solid var(--line); font-size: 11px; line-height: 16px; color: var(--text); tab-size: 4; }
/* Function card: a sunken block with a hairline top rule; name, badge, signature, returns, text, example. */
.fn { padding: 6px 0 2px; border-top: 1px solid var(--line); }
.fn:first-of-type { border-top: 0; padding-top: 0; }
.fn h3 { display: inline; margin: 0; font-size: 11.5px; font-weight: bold; }
.fn h3 a { color: var(--text); text-decoration: none; }
.fn h3 a:hover, .fn h3 a:focus-visible { color: var(--accent); }
.fn:target h3 a { color: var(--accent); }
.fn .desc { margin: 0 0 4px; color: var(--dimText); }
.fn .head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 3px; }
/* Where callable: outlined tag in the state colors (Status log's warn/bad). */
.badge { display: inline-block; padding: 0 6px; border: 1px solid var(--fieldLine); background: var(--field); color: var(--dimText); font-size: 9.9px; line-height: 15px; white-space: nowrap; }
.badge.paint { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--fieldLine)); background: color-mix(in srgb, var(--warn) 8%, var(--field)); }
.badge.unsafe { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--fieldLine)); background: color-mix(in srgb, var(--bad) 8%, var(--field)); }
.banner { display: block; padding: 6px 10px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid var(--line); box-shadow: inset 2px 0 0 var(--accent); }
.skip { position: absolute; left: 10px; top: -40px; z-index: 5; padding: 4px 8px; background: var(--field); border: 1px solid var(--accent); }
.skip:focus { top: 6px; }
table { border-collapse: collapse; margin: 0 0 6px; width: 100%; }
th, td { padding: 2px 8px 2px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { color: var(--dimText); font-weight: normal; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* Touch screens: the menu's 17 px rows are too small to read and tap, so scale text and targets up. Text fields
   use 16 px so iOS does not zoom in on focus. Same colors, frames and dots. */
@media (max-width: 640px), (pointer: coarse) {
	#win { font-size: 14px; line-height: 22px; }
	.header { height: auto; min-height: 48px; flex-wrap: wrap; column-gap: 12px; padding: 0 12px; }
	.title { font-size: 17px; }
	.ptitle { height: 25px; padding: 7px 12px 0; font-size: 12px; }
	.ptitle::before { top: 7px; height: 9px; }
	.body { padding: 8px 12px 10px; }
	.row .k { width: 6em; }
	input.txt { height: 44px; margin-bottom: 10px; font-size: 16px; padding: 0 10px; }
	.list a { min-height: 40px; align-items: center; line-height: 22px; padding: 0 10px; }
	.list .grp { font-size: 12px; padding: 8px 10px 0; }
	pre { font-size: 13px; line-height: 20px; }
	.fn h3 { font-size: 14px; }
	.badge { font-size: 12px; line-height: 20px; }
}
/* Phones: one column; the sidebar is a normal block above the text. */
@media (max-width: 800px) {
	.content { grid-template-columns: minmax(0, 1fr); padding: 14px 8px; }
	aside { position: static; max-height: none; }
	.list { max-height: 40vh; }
}
#ns { display: contents; }