:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 196 100% 50%;
    --primary-light: 190 100% 60%;
    --primary-rgb: 0, 191, 255;
    --primary-light-rgb: 64, 224, 208;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 196 100% 50%;
    --radius: 0.5rem;
  
    /* header morph (kept for compatibility; actual values now computed inside header scope) */
    --pill-progress: 0;
    --header-top: 0px;
    --header-width: 100%;
    --header-radius: 16px;
    --header-height: 64px;
    --glass-a1: .20;
    --glass-a2: .08;
    --ring-a: .0;
    --shadow-a: .0;
    --drag-x: 0px;
    --drag-y: 0px;
  }
  
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 196 100% 50%;
    --primary-light: 190 100% 60%;
    --primary-rgb: 0, 191, 255;
    --primary-light-rgb: 64, 224, 208;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 196 100% 50%;
  }
  
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: 'Mona Sans', sans-serif; transition: background-color .2s linear, color .2s linear; }
  
  #three-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; pointer-events: none;
  }
  
  .grid-background { position: relative; overflow: hidden; }
  .grid-background::before {
    content: ''; position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(0, 191, 255, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 191, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px; pointer-events: none; z-index: 1;
    animation: float 20s ease-in-out infinite;
  }
  
  .bento-item { position: relative; overflow: hidden; cursor: pointer; transition: all .3s cubic-bezier(.4,0,.2,1); }
  .bento-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,191,255,.1), transparent); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
  .bento-item:hover::before { opacity: 1; }
  .bento-item:hover { transform: translateY(-8px) scale(1.02); }
  
  .gradient-text { background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-light))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
  .gradient-text-subtle { background: linear-gradient(135deg, hsl(var(--muted-foreground)), hsl(var(--primary))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
  
  .shadow-glow { box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.4); }
  .shadow-glow:hover { box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.6); }
  
  .glow-card {
    position: relative;
    background: linear-gradient(135deg, rgba(0,191,255,.05), rgba(64,224,208,.05));
    border: 1px solid rgba(0,191,255,.2);
    backdrop-filter: blur(10px);
    transition: all .3s ease;
  }
  .glow-card:hover { background: linear-gradient(135deg, rgba(0,191,255,.1), rgba(64,224,208,.1)); border-color: rgba(0,191,255,.4); transform: translateY(-4px); box-shadow: 0 10px 40px rgba(0,191,255,.3); }
  
  .typewriter-cursor { animation: blink 1s infinite; }