/* vitrine stylesheet.  Embedded in the binary; served at /-/style.css. */

:root {
	--ink: #24292f;
	--ink-soft: #57606a;
	--accent: #0a5fa4;
	--rule: #d0d7de;
	--paper: #fdfdfc;
	--well: #f3f5f7;
	--well-edge: #c9d1d9;
	--tip: #c99000;
	--success: #1a7f37;
	--todo: #8250df;
	--warning: #ef7c00;
	--danger: #cf222e;
}

/* Dark mode follows the OS/browser preference; there is no in-page toggle
   (vitrine ships no JavaScript, so there is nowhere to store one).
   Every color below is picked to clear WCAG AA (4.5:1) against --paper;
   see the vitrine.meta worklog on dark mode for the measurements. */
@media (prefers-color-scheme: dark) {
	:root {
		--ink: #e6edf3;
		--ink-soft: #9198a1;
		--rule: #30363d;
		--paper: #0d1117;
		--well: #161b22;
		--well-edge: #30363d;
		--tip: #d29922;
		--success: #3fb950;
		--todo: #a371f7;
		--warning: #f0883e;
		--danger: #f85149;
	}
}

body {
	font-family: sans-serif;
	color: var(--ink);
	background: var(--paper);
	max-width: 56rem;
	margin: 1rem auto;
	padding: 0 1rem;
	line-height: 1.5;
}

a { color: var(--accent); }

nav {
	border-bottom: 2px solid var(--accent);
	padding-bottom: .5rem;
	margin-bottom: 1rem;
}
nav .raw {
	float: right;
	font-size: .85rem;
	border: 1px solid var(--rule);
	border-radius: .25rem;
	padding: .1rem .5rem;
	text-decoration: none;
}
nav .raw:hover { background: var(--well); }

/* Host theme name: names the host whose accent color this page wears,
   so the color never has to carry that meaning alone. */
nav .theme {
	font-size: .75rem;
	color: var(--accent);
	margin-left: .25rem;
}

ul.listing { list-style: none; padding-left: 1.5rem; }
ul.listing li { padding: .15rem 0; }

iframe.passthrough {
	width: 100%;
	height: 75vh;
	border: 1px solid var(--well-edge);
	border-radius: .25rem;
	background: white;
}

/* Headings sit flush left; all other article content is inset,
   so headings read as structure at a glance. */
article > * { margin-left: 1.5rem; }
article > h1, article > h2, article > h3,
article > h4, article > h5, article > h6 { margin-left: 0; }

article h1, article h2 {
	border-bottom: 1px solid var(--rule);
	padding-bottom: .2rem;
}
article h1 { color: var(--accent); }

/* Chainlink anchors: subtle until the heading is hovered. */
a.anchor {
	font-size: .7em;
	text-decoration: none;
	margin-left: .4rem;
	opacity: 0;
}
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor,
h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor,
a.anchor:focus { opacity: .6; }

/* Code blocks: inset further than prose, bordered, in a well. */
article pre {
	margin-left: 3rem;
	background: var(--well);
	border: 1px solid var(--well-edge);
	border-left: 3px solid var(--accent);
	border-radius: .25rem;
	padding: .6rem .8rem;
	overflow-x: auto;
}
article code {
	background: var(--well);
	border-radius: .2rem;
	padding: .05rem .25rem;
}
article pre code { background: none; padding: 0; }

article blockquote {
	border-left: 3px solid var(--rule);
	color: var(--ink-soft);
	padding-left: .8rem;
}

article table { border-collapse: collapse; }
article th, article td {
	border: 1px solid var(--rule);
	padding: .2rem .5rem;
}
article th { background: var(--well); }

/* Callouts: :::type admonition boxes.
   Each type carries one accent hue in --callout, and the base box derives its
   tinted fill and border from that hue with color-mix, so a single value drives
   the whole look (info and note simply inherit the per-host --accent).
   --callout-icon is the emoji shown before a title, following this repo's
   emoji-as-icon idiom (see the heading chainlink); it rides the title, so a
   title-less callout shows no icon. */
article .callout {
	--callout: var(--accent);
	--callout-fill: 12%; /* how much of --callout tints the box background */
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	padding: .7rem 1rem;
	border: 1px solid color-mix(in srgb, var(--callout) 45%, var(--well-edge));
	border-left: 3px solid var(--callout);
	border-radius: .5rem;
	background: color-mix(in srgb, var(--callout) var(--callout-fill), var(--paper));
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
/* The children are already inset by "article > *"; inside the box they
   should sit flush to its padding instead. */
article .callout > * { margin-left: 0; }
article .callout-title {
	margin: 0 0 .4rem;
	font-weight: bold;
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--callout);
}
/* The icon rides the title via --callout-icon.  Only the known types below set
   it, so an unknown type shows a clean icon-less box rather than a misleading
   glyph; a title-less callout shows no icon at all. */
article .callout-title::before {
	content: var(--callout-icon, "");
	margin-right: .45rem;
}

/* Per-type accent hues and icons, for the canonical type set only;
   warn is folded onto warning by the normalizer before it reaches the class.
   info and note keep the per-host --accent.  An unknown type matches none of
   these and falls back to the neutral base box above, still readable. */
article .callout-info,
article .callout-note { --callout-icon: "\2139\FE0F"; }  /* information source, theme color */
article .callout-tip { --callout: var(--tip); --callout-icon: "\1F4A1"; }     /* light bulb, sunflower gold */
article .callout-success { --callout: var(--success); --callout-icon: "\2705"; }  /* check mark, green */
article .callout-todo { --callout: var(--todo); --callout-icon: "\1F6A7"; }    /* construction sign, purple */
article .callout-warning { --callout: var(--warning); --callout-fill: 18%; --callout-icon: "\26A0\FE0F"; } /* warning sign, orange (weaker hue, so tinted harder) */
article .callout-danger { --callout: var(--danger); --callout-icon: "\1F9E8"; }   /* firecracker, red */
article .callout-reject { --callout: var(--danger); --callout-icon: "\274C"; }    /* cross mark, red */


/* Diagrams: server-rendered inline SVG from ```dot fenced blocks.
   Inset like a code block and centered; a wide diagram scales down to the
   content width rather than overflowing, while a small one keeps its size. */
article .diagram {
	margin: 1.25rem 0 1.25rem 3rem;
	text-align: center;
}
article .diagram svg {
	max-width: 100%;
	height: auto;
}
/* Graphviz always draws on an opaque white canvas with black ink, regardless
   of the page theme (DOT has no notion of a page dark mode).
   Inverting lightness while rotating hue back into place turns that white
   canvas dark and keeps colored edges/nodes close to their original hue,
   without needing to parse or rewrite the SVG's own fill/stroke attributes. */
@media (prefers-color-scheme: dark) {
	article .diagram svg {
		filter: invert(0.9) hue-rotate(180deg);
	}
}

/* A diagram that failed to render echoes its source in a bordered well,
   flagged in the danger hue so the failure is visible at a glance. */
article .diagram-error {
	text-align: left;
	border: 1px solid var(--danger);
	border-radius: .25rem;
	background: color-mix(in srgb, var(--danger) 8%, var(--paper));
	padding: .4rem .8rem;
}
article .diagram-error-note {
	margin: .2rem 0;
	font-weight: bold;
	color: var(--danger);
}
article .diagram-error pre { margin-left: 0; }

/* ---- socle: the gallery sketchbook ---- */

/* socle lays out its own page: a full-width column so the floor can span the viewport,
   with the sheet (the exhibit column) centered inside it. */
body {
	max-width: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.sheet {
	width: 100%;
	max-width: 64rem;
	margin: 0 auto;
	padding: 1rem 1.25rem 0;
	box-sizing: border-box;
	flex: 1;
}

/* The hatched flanks: texture, not content.  Fixed, behind everything, unclickable,
   and gone on narrow viewports where they would crowd the sheet. */
.flank {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 240px;
	pointer-events: none;
	z-index: -1;
	background-repeat: repeat-y;
	background-size: 240px 720px;
}
.flank.left { left: 0; }
.flank.right { right: 0; transform: scaleX(-1); }
/* Below this, a flank's inner (already faded) end would still reach under the sheet. */
@media (max-width: 1550px) { .flank { display: none; } }

/* The arc: round buttons over the exhibit.  Offsets along the arc are computed
   server-side into --dy; hover swaps the circle drawing, never the position.
   The page emits its deepest drop as --arc-drop, and the bottom padding reserves
   that room here (transforms take no layout space); narrow screens flatten the
   arc by overriding both, further down. */
nav.arc {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 2.4rem;
	border: none;
	margin: 0;
	padding: 2.4rem 0 calc(.8rem + var(--arc-drop, 0px));
	background: none;
}
nav.arc a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	text-decoration: none;
	color: var(--ink);
	font-size: .8rem;
	letter-spacing: .02em;
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transform: translateY(var(--dy, 0));
}
nav.arc a:hover { color: var(--accent); }
nav.arc a:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}
nav.arc.corner {
	justify-content: flex-end;
	gap: 1.1rem;
	padding: 1.1rem 0 calc(.8rem + var(--arc-drop, 0px));
}
nav.arc.corner a {
	width: 58px;
	height: 58px;
	font-size: .72rem;
}

/* The nameplate: on the entrance (the one page whose first crumb is unlinked),
   the sitename wears the accent -- the gallery's name at the door, and nothing more. */
nav.crumbs .site {
	color: var(--accent);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: .05em;
}

/* The entrance: repos as exhibit stands, surveyed rather than parsed.
   Each stand is name / pedestal / placard / one-line "now showing" caption. */
article ul.entrance {
	list-style: none;
	margin: 2.5rem 0 1rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 2.8rem 1.5rem;
}
.stand { text-align: center; min-width: 0; }
/* The name sits on the cap (negative margin; the svg below is its seat). */
.stand .name { font-size: 1.35rem; margin: 0 0 -7px; position: relative; }
.stand .name a { text-decoration: none; }
.stand .name a:hover { text-decoration: underline; }
/* Each stand's pedestal is its own inline drawing (seeded by the repo name;
   see standSVG): currentColor strokes follow the ink through both schemes. */
.stand .pedestal { height: 84px; color: var(--ink); }
.stand .pedestal svg { display: block; margin: 0 auto; }
.stand .placard {
	font-size: .8rem;
	letter-spacing: .12em;
	color: var(--ink-soft);
	margin: .7rem 0 .15rem;
}
.stand .showing {
	font-size: .78rem;
	font-style: italic;
	color: var(--ink-soft);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The empty room: a 404 shows the bare pedestal, the reason in the museum-label
   register, and the way back.  The pedestal already means "nothing on display"
   wherever else it stands empty; here that is the whole message. */
article .emptyroom { text-align: center; margin: 3.5rem 0; }
article .emptyroom .pedestal {
	height: 84px;
	background-position: top center;
	background-size: 140px 84px;
	background-repeat: no-repeat;
}
article .emptyroom .nothing {
	font-size: .8rem;
	letter-spacing: .16em;
	color: var(--ink-soft);
	margin: 1.2rem 0 2.4rem;
}
article .emptyroom .back a.boxed { text-decoration: none; padding: .45rem 1.1rem; }

/* The tagline: the repo description, read as the exhibit's subtitle. */
article .tagline {
	text-align: center;
	font-style: italic;
	color: var(--ink-soft);
	margin: 0 0 .75rem;
}

/* The vitals card: the clone line and the language meter in one rough box,
   placed before the README so the useful impressions land before the exhibit steers.
   Meter colors are linguist's conventions, used as swatches only; names and
   percentages stay ink.  The faint inset ring keeps pale swatches from dissolving
   into the paper (or the dark ground). */
article .vitals {
	display: block;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 auto 1.8rem;
	padding: .4rem 1.2rem .5rem;
}
article .vitals p.clone { margin: .2rem 0; }
article .vitals .langmeter { display: block; margin: .6rem 0 0; }

/* The clone line and branch list sit centered, like gallery cards. */
article p.clone, article #branches { text-align: center; margin-left: auto; margin-right: auto; }


.langmeter .langbar {
	display: flex;
	gap: 3px;
	width: 28rem;
	max-width: 100%;
	height: 12px;
}
.langmeter .langbar .seg {
	flex-basis: 0;
	min-width: 2px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent);
}
.langmeter .langchips {
	margin: .6rem 0 0;
	font-size: .78rem;
	letter-spacing: .08em;
	color: var(--ink-soft);
	text-align: center;
}
.langmeter .chip { white-space: nowrap; }
.langmeter .chip + .chip { margin-left: .9rem; }
/* The swatch is shared: the meter's legend and the entrance placards both wear it. */
.swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: .35em;
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent);
}
.langmeter .seg.other, .langmeter .swatch.other { background: var(--ink-soft); }

/* The plaque: museum-label typography for the metadata line under an exhibit. */
.plaque {
	text-align: center;
	font-size: .8rem;
	letter-spacing: .16em;
	color: var(--ink-soft);
	margin: .9rem auto 2.2rem;
	overflow-wrap: anywhere;
}
article .plaque { margin-left: auto; }
article .plaque code { background: none; padding: 0; letter-spacing: .06em; }

/* Exhibit interiors.  A file view's whole body is one pre (pre.file): there the frame
   is the box, so that pre drops its well.  Code blocks inside a framed README keep
   theirs; they are exhibits' content, not the exhibit itself. */
.exhibit { margin-top: .5rem; }
article .exhibit { margin-left: 0; }
.exhibit > :first-child { margin-top: 0; }
.exhibit > :last-child { margin-bottom: 0; }
article .exhibit > pre.file {
	margin-left: 0;
	background: none;
	border: none;
	padding: 0;
}

/* The ground: the gallery floor at the end of every page.  The floor's gather
   starts high and sparse, so a short page's run-up reads as approach, not absence. */
footer.ground { margin-top: 2.5rem; }
footer.ground .floor {
	height: 230px;
	background-position: bottom center;
	background-size: 1800px 230px;
	background-repeat: no-repeat;
}
footer.ground .colophon {
	text-align: center;
	font-size: .78rem;
	letter-spacing: .16em;
	color: var(--ink-soft);
	margin: .5rem 0 1.1rem;
}

/* The kicker: which project this sheet belongs to, re-asserted above the heading
   on pages deep in a repo, in the provenance register; the name links home. */
article .kicker {
	margin: 0 0 -.6rem;
	font-size: .78rem;
	letter-spacing: .16em;
	color: var(--ink-soft);
}
article .kicker a { color: inherit; }

/* The ledger: provenance rows on the log page.  Subjects are prose and wrap
   freely; the attribution line stays soft and small.  Links wear ink, not accent:
   a hundred accent rows would shout; hover answers the "is it live" question. */
article .provenance {
	margin: -.4rem 0 1.6rem;
	font-size: .78rem;
	letter-spacing: .16em;
	color: var(--ink-soft);
}
article ul.ledger { list-style: none; padding: 0; }
ul.ledger li { padding: .5rem 0 .8rem; }
ul.ledger .subject { margin: 0; max-width: 44rem; }
ul.ledger .subject a { color: var(--ink); text-decoration: none; }
ul.ledger .subject a:hover { color: var(--accent); text-decoration: underline; }
ul.ledger .attrib {
	margin: .3rem 0 0;
	font-size: .78rem;
	color: var(--ink-soft);
}
a.sha {
	font-family: monospace;
	color: var(--ink);
	text-decoration: none;
	display: inline-block;
	padding: 0 .35rem;
	margin-right: .35rem;
}
a.sha:hover { color: var(--accent); }

/* The catalogue: listings keep their tabular bones; rows separate with soft
   hand-rules (set in sketchCSS) and directory links carry the drawer-tab mark. */
/* The catalogue sits center-room with a comfortable minimum width:
   pinned to the left edge it read as a sliver in an empty hall at desktop widths.
   min() keeps narrow screens unharmed. */
article table.tree {
	border-collapse: collapse;
	margin: 0 auto;
	min-width: min(36rem, 100%);
}
article table.tree td, article table.tree th { border: none; padding: .3rem .6rem; }
article table.tree tbody tr:hover { background-color: var(--well); }
article td.dir > a {
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 24px 18px;
	padding-left: 30px;
}
article th { text-align: left; background: none; }
/* Table links skip the underline: in a column of links it is pure noise;
   the accent color and the row hover carry the affordance.  Hover restores it. */
article table.tree a { text-decoration: none; }
article table.tree a:hover { text-decoration: underline; }
article td.name { white-space: nowrap; }
article td.size { text-align: right; color: var(--ink-soft); white-space: nowrap; }
article td.date { color: var(--ink-soft); white-space: nowrap; }
article td.soft { color: var(--ink-soft); }
article td.hash a { font-family: monospace; }
article p.clone code { user-select: all; }
article img.file { max-width: 100%; }
article pre.file { tab-size: 4; }
/* Unified diffs color by text, not background: safe in both schemes, and the
   hues are the palette's existing success/danger pair. */
article pre.diff { tab-size: 4; }
article pre.diff .d-add { color: var(--success); }
article pre.diff .d-del { color: var(--danger); }
article pre.diff .d-hunk { color: var(--accent); }
article pre.diff .d-file { font-weight: bold; }
/* Headings and inline code may carry paths, shas, and clone commands: long tokens
   break rather than force the page wide.  (Wells scroll; this is for prose flow.) */
article h1, article code { overflow-wrap: anywhere; }

/* Phone widths: the arc flattens to a tappable row, insets yield to content,
   and the exhibit mat thins.  Buttons stay still within this layout; the
   breakpoint is the only place they are allowed to differ. */
@media (max-width: 560px) {
	/* The sun still rises on phones: buttons shrink and the precomputed drops scale
	   down with them (same ratio as the size change), but the curve stays.
	   Width check: 4 dawn buttons at 64px + 3 gaps ~= 296px, fits 390 without wrap. */
	nav.arc { gap: .8rem; padding: 1.2rem 0 calc(.6rem + var(--arc-drop, 0px) * .72); }
	nav.arc a { transform: translateY(calc(var(--dy, 0px) * .72)); width: 64px; height: 64px; font-size: .72rem; }
	nav.arc.corner { padding: .8rem 0 calc(.4rem + var(--arc-drop, 0px) * .72); }
	nav.arc.corner a { width: 48px; height: 48px; }
	article > * { margin-left: 0; }
	article pre { margin-left: 0; }
	.exhibit { padding: .9rem 1rem; }
}

.flank { background-image: url(/-/sketch/flank-light.svg); }
footer.ground .floor { background-image: url(/-/sketch/ground-light.svg); }
.emptyroom .pedestal { background-image: url(/-/sketch/plinth-light.svg); }
/* Hand-ruled lines replace solid borders on the nav and headings. */
nav.crumbs, article h1, article h2 {
	border-bottom: none;
	background-image: url(/-/sketch/rule-light.svg);
	background-position: bottom left;
	background-repeat: repeat-x;
	background-size: auto 10px;
	padding-bottom: .55rem;
}
/* Each ledger row sits under its own light hand-rule; the chip outline around a
   sha is the small sibling of the frames, so it reads as a button, not a well. */
ul.ledger li {
	background-image: url(/-/sketch/rule-light.svg);
	background-position: bottom left;
	background-repeat: repeat-x;
	background-size: auto 9px;
}
/* Catalogue rows separate with the rule's soft sibling; the tab mark rides the link. */
article table.tree tbody tr {
	background-image: url(/-/sketch/rulesoft-light.svg);
	background-position: bottom left;
	background-repeat: repeat-x;
	background-size: auto 8px;
}
article td.dir > a { background-image: url(/-/sketch/tab-light.svg); }
a.sha {
	border: 7px solid transparent;
	border-image: url(/-/sketch/chip-light.svg) 8 / 7px round;
}
/* Rough-ruled frames, as border-images.  The tile is sliced at 16 and the border is
   near that size, so the stroke renders at the weight it was drawn. */
.exhibit {
	border: 13px solid transparent;
	border-image: url(/-/sketch/frame-light.svg) 16 / 13px round;
	padding: 1.4rem 2rem;
}
.boxed {
	border: 10px solid transparent;
	border-image: url(/-/sketch/frame-light.svg) 16 / 10px round;
	padding: .3rem .9rem;
	display: inline-block;
}
/* Each button wears one of three circle drawings; hover moves to the next drawing,
   so the ink appears to shift under a living hand.  Active presses to the third. */
nav.arc a.va { background-image: url(/-/sketch/circle-a-light.svg); }
nav.arc a.vb { background-image: url(/-/sketch/circle-b-light.svg); }
nav.arc a.vc { background-image: url(/-/sketch/circle-c-light.svg); }
nav.arc a.va:hover { background-image: url(/-/sketch/circle-b-light.svg); }
nav.arc a.vb:hover { background-image: url(/-/sketch/circle-c-light.svg); }
nav.arc a.vc:hover { background-image: url(/-/sketch/circle-a-light.svg); }
nav.arc a.va:active { background-image: url(/-/sketch/circle-c-light.svg); }
nav.arc a.vb:active { background-image: url(/-/sketch/circle-a-light.svg); }
nav.arc a.vc:active { background-image: url(/-/sketch/circle-b-light.svg); }
@media (prefers-color-scheme: dark) {
.flank { background-image: url(/-/sketch/flank-dark.svg); }
footer.ground .floor { background-image: url(/-/sketch/ground-dark.svg); }
.emptyroom .pedestal { background-image: url(/-/sketch/plinth-dark.svg); }
/* Hand-ruled lines replace solid borders on the nav and headings. */
nav.crumbs, article h1, article h2 {
	border-bottom: none;
	background-image: url(/-/sketch/rule-dark.svg);
	background-position: bottom left;
	background-repeat: repeat-x;
	background-size: auto 10px;
	padding-bottom: .55rem;
}
/* Each ledger row sits under its own light hand-rule; the chip outline around a
   sha is the small sibling of the frames, so it reads as a button, not a well. */
ul.ledger li {
	background-image: url(/-/sketch/rule-dark.svg);
	background-position: bottom left;
	background-repeat: repeat-x;
	background-size: auto 9px;
}
/* Catalogue rows separate with the rule's soft sibling; the tab mark rides the link. */
article table.tree tbody tr {
	background-image: url(/-/sketch/rulesoft-dark.svg);
	background-position: bottom left;
	background-repeat: repeat-x;
	background-size: auto 8px;
}
article td.dir > a { background-image: url(/-/sketch/tab-dark.svg); }
a.sha {
	border: 7px solid transparent;
	border-image: url(/-/sketch/chip-dark.svg) 8 / 7px round;
}
/* Rough-ruled frames, as border-images.  The tile is sliced at 16 and the border is
   near that size, so the stroke renders at the weight it was drawn. */
.exhibit {
	border: 13px solid transparent;
	border-image: url(/-/sketch/frame-dark.svg) 16 / 13px round;
	padding: 1.4rem 2rem;
}
.boxed {
	border: 10px solid transparent;
	border-image: url(/-/sketch/frame-dark.svg) 16 / 10px round;
	padding: .3rem .9rem;
	display: inline-block;
}
/* Each button wears one of three circle drawings; hover moves to the next drawing,
   so the ink appears to shift under a living hand.  Active presses to the third. */
nav.arc a.va { background-image: url(/-/sketch/circle-a-dark.svg); }
nav.arc a.vb { background-image: url(/-/sketch/circle-b-dark.svg); }
nav.arc a.vc { background-image: url(/-/sketch/circle-c-dark.svg); }
nav.arc a.va:hover { background-image: url(/-/sketch/circle-b-dark.svg); }
nav.arc a.vb:hover { background-image: url(/-/sketch/circle-c-dark.svg); }
nav.arc a.vc:hover { background-image: url(/-/sketch/circle-a-dark.svg); }
nav.arc a.va:active { background-image: url(/-/sketch/circle-c-dark.svg); }
nav.arc a.vb:active { background-image: url(/-/sketch/circle-a-dark.svg); }
nav.arc a.vc:active { background-image: url(/-/sketch/circle-b-dark.svg); }
}
:root { --accent: #4a7fc4; }
@media (prefers-color-scheme: dark) { :root { --accent: #4a7fc4; } }