:root {
  --ink: #092a45;
  --ink-soft: #456579;
  --ocean: #1769b8;
  --ocean-dark: #0b4d86;
  --teal: #098f9e;
  --sky: #f2f8fc;
  --surface: #ffffff;
  --line: #d7e6ef;
  --shadow: 0 18px 55px rgba(12, 56, 88, .1);
}

html { scroll-behavior: smooth; }
button, a, input, select { transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
button:active:not(:disabled), .button:active { transform: translateY(1px) scale(.98); }
button:disabled { cursor: wait; opacity: .65; }
.reveal-pending { opacity: 0; transform: translateY(18px); }
[data-reveal] { transition: opacity .45s ease, transform .45s ease; }
.dashboard:not([hidden]), .page:not(.hidden), .analytics-grid article:not([hidden]) { animation: content-enter .28s ease both; }
.metric-card { transition: transform .2s, box-shadow .2s; }
.metric-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px #092a4514; }
.copy-endpoint { min-width: 44px; min-height: 44px; }
.copy-endpoint[data-copied="true"] { color: #09815c; background: #e2f5ef; }
.copy-status { font-size: 13px; color: #087760; }
@keyframes content-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body { color: var(--ink); background: var(--sky); }

/* The animated shapes sit behind opaque content surfaces. */
.waves {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(55vw 40vw at 100% 0%, #d7f4fb 0%, transparent 70%);
}
.waves i {
  position: absolute;
  width: 140vw;
  height: 34vh;
  left: -20vw;
  top: 81vh;
  border: 1px solid rgba(36, 147, 183, .13);
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  background: linear-gradient(180deg, rgba(74, 202, 217, .13), rgba(22, 105, 184, .07));
  transform: rotate(-3deg);
  animation: ambient-swell 24s ease-in-out infinite alternate;
}
.waves i:nth-child(2) { top: 86vh; transform: rotate(3deg); animation-duration: 31s; animation-delay: -12s; opacity: .66; }
.waves i:nth-child(3) { top: 92vh; animation-duration: 37s; animation-delay: -19s; opacity: .42; }
@keyframes ambient-swell {
  to { transform: translate3d(5%,-5%,0) rotate(2deg); }
}
header, main, footer { position: relative; z-index: 1; }

:where(a, button, input, select, summary):focus-visible {
  outline: 3px solid #086caa;
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .waves i { width: 200vw; left: -50vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .waves i { animation: none !important; }
}