/* 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; }
#board { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
#board text { font-family: "New Computer Modern", "Latin Modern Roman", "CMU Serif", "Times New Roman", serif; font-variant-numeric: lining-nums;
  text-anchor: middle; dominant-baseline: central; fill: #1f2328; pointer-events: none; font-size: 21px; }
.arrow { stroke: #1f2328; stroke-width: 2; }
.arrow.new { stroke: #4ac26b; stroke-width: 4; }
.node { cursor: pointer; outline: none; }
.node circle { fill: #fff; stroke: #1f2328; stroke-width: 2; transition: fill .15s, stroke .15s; }
.node:hover circle, .node:focus-visible circle { stroke: #0969da; stroke-width: 3; }
.node.named circle { stroke: #0969da; stroke-width: 3.5; }
.node.won circle { fill: #dafbe1; stroke: #1a7f37; stroke-width: 3.5; }
.node.wrong circle { fill: #ffd8d3; stroke: #cf222e; stroke-width: 3.5; }
.stage.complete .node circle { fill: #1a7f37; stroke: #1a7f37; }
.stage.complete #board .node text { fill: #fff; }
.stage.complete .arrow, .stage.complete .arrow.new { stroke: #1a7f37; }
.op rect { fill: #fff; stroke: #1f2328; stroke-width: 1.5; }
.op.next rect { stroke: #0969da; stroke-width: 3.5; }
.op.next text { font-weight: 700; }
.op.used rect { stroke: #8c959f; }
#board .op.used text { fill: #8c959f; }
/* progress sits in the empty bottom-right corner */
.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); } }