:root{
    --bg: #0e0d0d;
    --text: #ffffff;
  }
  
  * { box-sizing: border-box; }
  
  html, body {
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.45;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" result="noise" /></filter><rect width="100" height="100" fill="%231a1a1a" filter="url(%23noise)" opacity="0.08"/></svg>');
    background-attachment: fixed;
  }  
  
  /* Header */
  .page-header {
    max-width: 980px;
    margin: 32px auto 16px;
    padding: 0 16px;
  }
  
  .page-header h1 {
    margin: 0 0 6px 0;
    font-family: 'Press Start 2P', monospace;
    font-size: 24px;
    letter-spacing: 0.5px;
    color: var(--text);
  }
  
  .subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
  }
  
  /* Main layout  */
  .page-main {
    max-width: 980px;
    margin: 0 auto 48px;
    padding: 0 16px;
  }
  

  
  /*  Axes + labels on dark bg */
  .x-axis path,
  .x-axis line,
  .y-axis path,
  .y-axis line {
    stroke: rgba(255,255,255,0.35);
  }
  
  .x-axis text,
  .y-axis text {
    fill: rgba(255,255,255,0.85);
    font-size: 12px;
  }
  
  .x-label,
  .y-label {
    fill: rgba(255,255,255,0.9);
    font-size: 13px;
  }
  
  /* Points  */
  .points circle {
    transition: transform 120ms ease, opacity 120ms ease;
  }
   

#process-book {
  position:absolute;
  font-size: 25px;
  left: 50%
}

/* DNA visualization container */
#barchart {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}

.hidden {
  opacity: 0;
  transition: all 1.5s;
}

.show {
  opacity: 1;
  transition: all 2s;
}

/* @media(prefers-reduced-motion) {
  .hidden {
    transition: none
  }
} */

#scatter-text, #edu-bar-text {
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
}

#title {
  font-family: "Press Start 2P";
  font-size: 50px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}