.sticky-viewport { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; }
  .svg-canvas { width: 100%; height: 100%; display: block; }
  .hud {
    position: fixed; bottom: 20px; right: 20px;
    background: rgba(255,255,255,0.06); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 14px 20px; border-radius: 10px;
    font-size: 12px; font-family: 'SF Mono', 'Fira Code', monospace;
    color: rgba(255,255,255,0.45); z-index: 100; line-height: 1.8;
  }
  .hud b { color: #D9B8F1; font-weight: 600; }
  .scroll-hint {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.2); font-size: 12px; letter-spacing: 0.1em;
    text-transform: uppercase; animation: pulse 2s ease-in-out infinite; z-index: 100;
  }
  .sticky-viewport {position: fixed;top: 0;width: 100%;height: 100vh;overflow: hidden;z-index: -1;opacity: 1;}
  div#layer-turquoise {
    z-index: 1;
}

div#layer-purple {
    z-index: 2;
}
  /* NEW CSS FOR LAYERS */
  .blob-layer { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; /* Let clicks pass through if needed */
  }
  .blob-layer svg { 
    width: 100%; 
    height: 100%; 
    display: block; 
  }
  @keyframes pulse { 0%,100%{opacity:0.2} 50%{opacity:0.5} }