html { scroll-behavior: smooth; }
  body { font-family: 'Inter', sans-serif; }
  .font-mono-tight { font-family: 'JetBrains Mono', monospace; letter-spacing: -0.02em; }

  /* light mode base */
  body { background:#F7F9F6; color:#121814; }
  html.dark body { background:#0D1310; color:#E8F0EA; }

  .surface { background:#FFFFFF; border-color:#DCE6DE; }
  html.dark .surface { background:#131A16; border-color:#1E2B24; }

  .surface-soft { background:#F0F5F1; }
  html.dark .surface-soft { background:#101613; }

  .text-muted { color:#5B6B60; }
  html.dark .text-muted { color:#8AA093; }

  .divider { border-color:#DCE6DE; }
  html.dark .divider { border-color:#1E2B24; }

  .grid-overlay {
    background-image:
      linear-gradient(to right, #16A34A0d 1px, transparent 1px),
      linear-gradient(to bottom, #16A34A0d 1px, transparent 1px);
    background-size: 40px 40px;
  }
  html.dark .grid-overlay {
    background-image:
      linear-gradient(to right, #22C55E14 1px, transparent 1px),
      linear-gradient(to bottom, #22C55E14 1px, transparent 1px);
  }

  .skill-chip {
    display:flex; align-items:center; gap:.5rem;
    background:#F0F5F1; border:1px solid #DCE6DE;
    color:#121814; font-size:.8rem; font-weight:500;
    padding:.4rem .65rem; border-radius:.55rem;
    transition: transform .15s ease, border-color .15s ease;
  }
  html.dark .skill-chip { background:#101613; border-color:#1E2B24; color:#E8F0EA; }
  .skill-chip:hover { transform: translateY(-2px); border-color:#16A34A; }
  html.dark .skill-chip:hover { border-color:#22C55E; }

  .card-hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .card-hover:hover { transform: translateY(-4px); border-color:#16A34A; box-shadow: 0 12px 30px -14px rgba(22,163,74,.35); }
  html.dark .card-hover:hover { border-color:#22C55E; box-shadow: 0 12px 30px -14px rgba(34,197,94,.25); }

  .terminal-caret { display:inline-block; width:.55ch; background:#22C55E; margin-left:2px; }

  .nav-pill.active { color:#16A34A; }
  html.dark .nav-pill.active { color:#22C55E; }

  ::selection { background:#16A34A; color:#0D1310; }

  .reveal { opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity:1; transform: translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; opacity:1; transform:none; }
    .animate-blink { animation: none; }
  }

  a:focus-visible, button:focus-visible {
    outline: 2px solid #16A34A; outline-offset: 3px; border-radius: 4px;
  }