:root { color-scheme: dark; }
html, body {
  margin: 0;
  height: 100%;
  background: #0f1115;
  color: #e8e8e8;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}
#svg-host { position: fixed; inset: 0; }
#svg-host svg { width: 100%; height: 100%; display: block; }
#overlay {
  position: fixed; top: 14px; left: 18px;
  padding: 10px 14px;
  background: rgba(20, 22, 28, .78);
  border: 1px solid #2b3040;
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 60vw;
}
#title { font-size: 18px; font-weight: 600; letter-spacing: .2px; }
#counter { font-size: 11px; opacity: .65; margin-top: 2px; }
#hint {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-size: 11px; opacity: .55;
  padding: 6px 12px; border-radius: 6px;
  background: rgba(20, 22, 28, .65);
  border: 1px solid #2b3040;
  transition: opacity .25s;
}
#warn {
  position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: #ffb454;
  padding: 6px 12px; border-radius: 6px;
  background: rgba(60, 30, 10, .85);
  border: 1px solid #6b4a2a;
  display: none;
}
body.hide-chrome #overlay,
body.hide-chrome #hint { opacity: 0; pointer-events: none; }
kbd {
  font-family: inherit;
  background: #252a36;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #3a4254;
  font-size: 10px;
}

/* Edge visibility — non-seq edges fade when they don't touch the current slide.
   Seq edges (class="seq" on the DOT-side edge) always stay at full opacity. */
g.edge { transition: opacity 350ms ease; }
g.edge.dot-slide-edge-faded { opacity: 0.18; }