/* Light mode (default) */
:root{
  --bg:#fafafa;
  --fg:#111;
  --accent:#06c;
  --dot-size:6px; /* base size, scaled in JS */
  --dot-color:rgba(0,0,0,0.12);
  --dot-color-static: 0,0,0; /* RGB values for JavaScript */
  --aurora-deep-blue: rgba(20, 50, 120, 0.6);
  --aurora-electric-blue: rgba(0, 150, 255, 0.7);
  --aurora-cyan: rgba(0, 255, 255, 0.8);
  --aurora-green: rgba(100, 255, 200, 0.8);
  --aurora-purple: rgba(200, 100, 255, 0.9);
  --text-color:#111;
  --card-bg: rgba(255,255,255,0.6);
  --card-shadow: rgba(20,20,20,0.08);
  --lead-color: rgba(0,0,0,0.55);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root{
    --bg:#0a0a0a;
    --fg:#ffffff;
    --accent:#40a6ff;
    --dot-color:rgba(255,255,255,0.08);
    --dot-color-static: 255,255,255; /* RGB values for JavaScript */
    --aurora-deep-blue: rgba(60, 120, 200, 0.8);
    --aurora-electric-blue: rgba(100, 200, 255, 0.9);
    --aurora-cyan: rgba(150, 255, 255, 0.9);
    --aurora-green: rgba(180, 255, 220, 0.9);
    --aurora-purple: rgba(220, 150, 255, 0.95);
    --text-color:#ffffff;
    --card-bg: rgba(20,20,20,0.7);
    --card-shadow: rgba(0,0,0,0.3);
    --lead-color: rgba(255,255,255,0.7);
  }
}
html,body{
  height:100%;
  /* Prevent scrolling and overscroll bounce on iOS Safari */
  overflow: hidden;
  position: fixed;
  width: 100%;
  touch-action: none;
  -webkit-overflow-scrolling: none;
}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'San Francisco', 'Helvetica Neue', Arial;
  background:var(--bg);
  color:var(--text-color);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Additional iOS Safari specific fixes */
  -webkit-user-select: none;
  user-select: none;
}

/* canvas sits under content */
canvas#bgCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  display:block;
  /* Improve touch interaction */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* content */
.wrap{
  position:relative;
  z-index:2;
  text-align:center;
  padding:48px;
  max-width:880px;
  width:100%;
}
h1{
  margin:0 0 24px 0;
  font-weight:600;
  letter-spacing:-0.02em;
  font-size:44px;
}
p.lead{
  margin:0;
  color:var(--lead-color);
  font-size:18px;
}

/* subtle backdrop to mimic Apple style */
.card{
  display:inline-block;
  background:var(--card-bg);
  backdrop-filter: blur(6px) saturate(120%);
  padding:36px 48px;
  border-radius:16px;
  box-shadow:0 8px 30px var(--card-shadow);
}

/* Enhanced mobile/touch device support */
@media (max-width:600px){
  h1{font-size:28px}
  .card{padding:20px}
  .wrap{padding:24px}
  p.lead{font-size:16px}
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  html, body {
    /* Prevent bounce scrolling and any scrolling on iOS */
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: none !important;
    /* Prevent zoom on double tap */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  .card {
    /* Make text more readable on touch devices */
    backdrop-filter: blur(8px) saturate(130%);
  }
  
  /* Enhance visual feedback for touch interactions */
  canvas#bgCanvas {
    cursor: crosshair;
    /* Additional touch prevention */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
}