:root {
  --bg: #fafaf9; --panel: rgba(255,255,255,.9); --border: #e2e2df;
  --text: #1c1c1a; --muted: #77776f; --link: #c9c9c4; --accent: #2563eb;
  --node-stroke: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141413; --panel: rgba(30,30,28,.9); --border: #33332f;
    --text: #ececE8; --muted: #9a9a92; --link: #4a4a45; --accent: #6b9bff;
    --node-stroke: #141413;
  }
}
:root[data-theme="dark"] {
  --bg: #141413; --panel: rgba(30,30,28,.9); --border: #33332f;
  --text: #ececE8; --muted: #9a9a92; --link: #4a4a45; --accent: #6b9bff;
  --node-stroke: #141413;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
svg { display: block; width: 100%; height: 100%; touch-action: none; }
.panel { position: absolute; z-index: 10; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

#controls { left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; max-width: 760px; margin: 0 auto; }
#slider { flex: 1; min-width: 0; accent-color: var(--accent); }
button { display: flex; align-items: center; justify-content: center; flex: none; height: 2rem; min-width: 2rem;
  padding: 0 .5rem; font: inherit; font-size: .9rem; border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--text); cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--muted); }
button:disabled { opacity: .3; cursor: default; }

#info { top: 16px; left: 16px; padding: .7rem .9rem; font-size: .8rem; max-width: 15rem; }
#info h1 { font-size: .95rem; margin: 0 0 .15rem; }
#info .stats { color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: .55rem; }
#legend div { display: flex; align-items: center; gap: .45rem; margin-top: .2rem; cursor: pointer; user-select: none; }
#legend div.off { opacity: .35; }
.swatch { width: .65rem; height: .65rem; border-radius: 50%; flex: none; }

#day-box { top: 16px; right: 16px; padding: .7rem .9rem; font-size: .8rem; width: 14rem; max-height: 35vh; overflow-y: auto; }
#day-box h2 { font-size: .8rem; margin: 0 0 .4rem; font-weight: 600; }
#day-box .dots { display: flex; flex-wrap: wrap; gap: .35rem; }
#day-box em { color: var(--muted); }

#tooltip { position: absolute; z-index: 20; pointer-events: none; padding: .35rem .55rem; font-size: .78rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px; display: none; white-space: nowrap; }

.link { stroke: var(--link); stroke-opacity: .55; }
.link.hl { stroke: var(--accent); stroke-opacity: .9; }
.node { stroke: var(--node-stroke); stroke-width: 1px; cursor: pointer; }
.node.today { stroke: var(--text); stroke-width: 2px; }
.node.focus { stroke: var(--accent); stroke-width: 3px; }
.dim { opacity: .12; }

@media (max-width: 640px) {
  #day-box { top: auto; bottom: 76px; right: 16px; left: 16px; width: auto; max-height: 22vh; }
  #info { max-width: none; right: 16px; }
  #legend { display: flex; flex-wrap: wrap; gap: 0 .8rem; }
}