html { scroll-behavior: smooth; }
body {
  color-scheme: dark;
  position: relative;
  overflow-x: hidden;
  background: #05070a;
  --cursor-x: 50vw;
  --cursor-y: 35vh;
}

#ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% -18%, rgba(52, 225, 164, 0.11), transparent 30rem),
    radial-gradient(circle at 8% 90%, rgba(52, 225, 164, 0.055), transparent 25rem),
    linear-gradient(180deg, #05070a 0%, #07100d 46%, #05070a 100%);
}

#ambient-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.68;
}

#ambient-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(52, 225, 164, 0.11), transparent 20rem),
    radial-gradient(circle at calc(var(--cursor-x) + 10rem) calc(var(--cursor-y) + 6rem), rgba(56, 189, 248, 0.045), transparent 22rem);
  opacity: 0.9;
  transition: opacity 220ms ease;
}

.ambient-mesh {
  position: absolute;
  inset: -35%;
  background:
    linear-gradient(115deg, transparent 8%, rgba(52, 225, 164, 0.11) 30%, transparent 52%),
    linear-gradient(245deg, transparent 15%, rgba(56, 189, 248, 0.06) 44%, transparent 68%);
  filter: blur(70px) saturate(115%);
  opacity: 0.58;
  animation: mesh-flow 34s ease-in-out infinite alternate;
}

.ambient-orb,
.ambient-cursor {
  position: absolute;
  border-radius: 9999px;
  filter: blur(42px);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.ambient-orb-a {
  width: 36rem;
  height: 36rem;
  left: -12rem;
  top: 42vh;
  background: rgba(52, 225, 164, 0.06);
  animation: orb-float-a 28s ease-in-out infinite alternate;
}

.ambient-orb-b {
  width: 32rem;
  height: 32rem;
  right: -12rem;
  top: 18vh;
  background: rgba(56, 189, 248, 0.045);
  animation: orb-float-b 32s ease-in-out infinite alternate;
}

.ambient-cursor {
  width: 28rem;
  height: 28rem;
  left: var(--cursor-x);
  top: var(--cursor-y);
  margin-left: -14rem;
  margin-top: -14rem;
  background:
    radial-gradient(circle, rgba(52, 225, 164, 0.14), rgba(52, 225, 164, 0.04) 44%, transparent 72%);
  opacity: 0.68;
  transition: left 160ms ease-out, top 160ms ease-out, opacity 220ms ease;
}

body > header,
body > main,
body > footer {
  position: relative;
  z-index: 1;
}

::selection { background: rgba(52, 225, 164, 0.35); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0d12; }
::-webkit-scrollbar-thumb { background: #283040; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #34e1a4; }

pre code.hljs { padding: 1rem; font-size: 0.85rem; line-height: 1.55; }

.prose-invert :where(strong) { color: #fff; }
.prose-invert :where(code) {
  background: #11161c;
  border: 1px solid #222a36;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
  color: #34e1a4;
}

@keyframes blink-caret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.typing-caret::after {
  content: '▌';
  margin-left: 2px;
  color: #34e1a4;
  animation: blink-caret 1s steps(1) infinite;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(5px);
  transition:
    opacity 700ms ease,
    transform 700ms ease,
    filter 700ms ease,
    border-color 200ms ease,
    background-color 200ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@keyframes mesh-flow {
  0% { transform: translate3d(-2%, -1%, 0) rotate(-4deg) scale(1); }
  100% { transform: translate3d(2%, 2%, 0) rotate(4deg) scale(1.04); }
}

@keyframes orb-float-a {
  0% { transform: translate3d(0, -5%, 0) scale(1); }
  100% { transform: translate3d(16vw, 8%, 0) scale(1.08); }
}

@keyframes orb-float-b {
  0% { transform: translate3d(0, 5%, 0) scale(1); }
  100% { transform: translate3d(-14vw, 10%, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ambient-mesh,
  .ambient-orb,
  .typing-caret::after {
    animation: none;
  }
  .ambient-cursor {
    display: none;
  }
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

@media (max-width: 640px) {
  #chat-widget {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }

  #chat-toggle {
    width: 100%;
    justify-content: center;
  }

  #chat-panel {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 5rem;
    width: auto;
    height: min(72vh, 560px);
  }
}