:root {
  /* layout / behavior */
  --graph-node-count: 75;
  --graph-max-edges-per-node: 3;
  --graph-edge-threshold: 100;

  /* appearance */
  --graph-bg: #ffffff;                              /* plain white container background */
  --graph-node-color: rgba(0,0,0,0.5);             /* dark nodes on white */
  --graph-edge-color: rgba(0,0,0,0.2);             /* subtle dark edges */
  --graph-red-node-color: #c41d1d;                  /* red accent (kept visible on light) */
  --graph-red-edge-color: rgba(196,29,29,0.95);
  --graph-inner-shadow-color: rgba(255,255,255,1);
  --graph-inner-shadow-size: 36px;

  --graph-line-width: 1;
  --graph-node-radius: 2.8;

  /* movement */
  --graph-speed: 0.25;
  --graph-edge-switch-interval: 900;

  /* red activations (normal) */
  --graph-red-chance-per-sec: 500;
  --graph-red-min-duration: 50;
  --graph-red-max-duration: 400;

  /* performance */
  --graph-max-nodes-for-occasional-devices: 110;

  /* ---------- SPECIAL GLYPH SETTINGS (Q and *) ---------- */
  /* how often to attempt forming a glyph (chance per minute) */
  --graph-special-chance-per-minute: 0.8;
  /* how long special glyph edges persist (ms) */
  --graph-special-duration: 2400;
  /* pixels max distance allowed between a target glyph point and the chosen node */
  --graph-special-max-dist: 1000;
  /* scale of glyph relative to the smaller container dimension (0..1) */
  --graph-special-scale: 0.48;
  /* color for special glyph edges */
  --graph-special-edge-color: rgba(196,29,29,0.98);
  /* thickness for special glyph edges (visual emphasis) */
  --graph-special-line-width: 2.4;
  /* minimum seconds between attempts (global cooldown) */
  --graph-special-cooldown-sec: 6;
}

html.dark-mode {
  /* appearance */
  --graph-bg: #0f1724;
  --graph-node-color: rgba(255,255,255,0.75);
  --graph-edge-color: rgba(255,255,255,0.25);
  --graph-red-node-color: #ff4d4f;
  --graph-red-edge-color: rgba(255,77,79,0.95);
  --graph-special-edge-color: rgba(255,65,70,0.98);
  --graph-inner-shadow-color: rgba(15,23,36,0.92);
  --graph-inner-shadow-size: 40px;
}

.graph-card,
.graph-bg,
.graph-content {
  /* mask: center visible, edges fade out */
  -webkit-mask-image: radial-gradient(circle at center,
                                     rgba(0,0,0,1) 65%,   /* fully visible near center */
                                     rgba(0,0,0,0) 125%); /* fully transparent at outer edge */
  mask-image: radial-gradient(circle at center,
                              rgba(0,0,0,1) 65%,
                              rgba(0,0,0,0) 125%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
}

/* ---------- container styles ---------- */
.graph-card{
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 14px;
  /* background: var(--graph-bg); */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  min-height: 180px;
}

.graph-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.graph-content{
  text-align: center;
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  :root{
    --graph-speed: 0;
    --graph-edge-switch-interval: 9999999;
    --graph-special-chance-per-minute: 0;
  }
  .graph-bg{ opacity: 0.85; }
}

@media (max-width: 520px){
  :root{ --graph-node-count: 35; --graph-edge-threshold: 180; --graph-special-scale: 0.42; }
  .graph-card{ padding: 18px; border-radius: 10px; min-height: 150px; }
}