.stage .hl-base, .stage .hl-top, .stage .hl-paste { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage .hl-base, .stage .hl-paste { pointer-events: none; }
.stage .hl-top { cursor: none; }
.stage.is-done .hl-top { cursor: default; }

/* tool toggle chip, matches the shared Done pill */
.stage .hl-tools {
  position: absolute; left: 14px; bottom: 14px; z-index: 5;
  display: flex; gap: 2px; padding: 3px;
  background: rgba(42, 36, 32, .82); border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.stage .hl-tools[hidden] { display: none; }
.stage .hl-tools button {
  font: 600 13px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase;
  color: rgba(251, 246, 236, .62); background: transparent; border: 0; border-radius: 999px; padding: 8px 15px;
}
.stage .hl-tools button:hover { color: #fbf6ec; }
.stage .hl-tools button[aria-pressed="true"] { color: #fbf6ec; background: var(--accent); }
@media (max-width: 560px) {
  .stage .hl-tools { left: 8px; bottom: 8px; }
  .stage .hl-tools button { padding: 7px 11px; font-size: 12px; }
}

/* raking-light reveal */
.stage .hl-reveal .hl-rake, .stage .hl-reveal .hl-gold, .stage .hl-reveal .hl-panel { opacity: 0; }
.stage .hl-reveal.is-on .hl-rake, .stage .hl-reveal.is-on .hl-gold, .stage .hl-reveal.is-on .hl-panel { opacity: 1; }
.stage .hl-reveal .is-anim { transition: opacity .9s ease; }
.stage .hl-reveal .hl-gold.is-anim { transition-delay: .55s; }
.stage .hl-reveal .hl-panel.is-anim { transition-delay: .9s; }
.stage .hl-trace { fill: none; stroke: #f0d27a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.stage .hl-trace-glow { fill: none; stroke: #d4a640; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; opacity: .28; }
.stage .hl-panel-bg { fill: rgba(42, 36, 32, .84); }
.stage .hl-row { font: 500 25px var(--mono); fill: #fbf6ec; letter-spacing: -.01em; }
.stage .hl-num { font-variant-numeric: tabular-nums; }
.stage .hl-total { font-weight: 600; }
.stage .hl-total.is-perfect { fill: #f0d27a; }
.stage .hl-rule { stroke: rgba(251, 246, 236, .25); stroke-width: 1; }
.stage .hl-check { fill: none; stroke: #f0d27a; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }