/* Colours and weights match the figure library and the graph-walk widget. */
* { box-sizing: border-box; }
html, body { margin: 0; overflow: hidden; background: transparent; font: 500 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
.stage { position: relative; width: 100%; max-width: 720px; margin: 0 auto; background: #fff; border-radius: 6px; }
#map { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
#map text { font-family: "New Computer Modern", "Latin Modern Roman", "CMU Serif", "Times New Roman", serif; font-variant-numeric: lining-nums; }
.edge { stroke: #6e7781; stroke-width: 1.8; transition: stroke .25s, stroke-width .25s; }
.edge.on { stroke: #4ac26b; stroke-width: 4; }
.edge.final { stroke: #1a7f37; stroke-width: 4; }
.node { cursor: pointer; outline: none; }
.node circle { fill: #fff; stroke: #1f2328; stroke-width: 2; transition: fill .15s, stroke .15s; }
.node .ring { fill: none; stroke: #6e7781; stroke-width: 2; stroke-dasharray: 4 4; }
.node text { font-size: 21px; text-anchor: middle; dominant-baseline: central; fill: #1f2328; pointer-events: none; }
.node:hover circle.body, .node:focus-visible circle.body { stroke: #0969da; stroke-width: 3; }
.node.on circle.body { fill: #dafbe1; stroke: #4ac26b; stroke-width: 3.5; }
.node.head circle.body { stroke-width: 5; }
.node.final circle.body { fill: #dafbe1; stroke: #1a7f37; stroke-width: 3.5; }
.node.wrong circle.body { fill: #ffd8d3; stroke: #cf222e; stroke-width: 3.5; }
.bar { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 12px; border-radius: 9999px;
  background: rgb(0 0 0 / 0.7); color: #fff; font-variant-numeric: tabular-nums; }
#dots { display: flex; gap: 5px; }
#dots span { width: 10px; height: 10px; border-radius: 9999px; border: 2px solid rgb(255 255 255 / .7); transition: background .2s; }
#dots span.on { background: #4ac26b; border-color: #4ac26b; }
#misses { min-width: 2.5em; color: #ff8182; font-size: 13px; }
#misses:empty { min-width: 0; }
#reset { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 9999px;
  background: transparent; color: #fff; cursor: pointer; }
#reset:hover { background: rgb(255 255 255 / .15); }
#reset svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stage.complete #dots span.on { animation: pop .4s ease-out both; }
@keyframes pop { 50% { transform: scale(1.5); } }
.node.done { cursor: default; }
.node.done circle.body { fill: #1a7f37; stroke: #1a7f37; stroke-width: 3.5; }
.node.done text { fill: #fff; }
.box rect { fill: #dafbe1; stroke: #4ac26b; stroke-width: 2; }
.box text { font-size: 18px; text-anchor: middle; dominant-baseline: central; fill: #1f2328; }
.box.head rect { stroke-width: 3.5; }