:root {
  color-scheme: dark;
  font-family: var(--font-sans);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

html,
body {
  min-height: 100vh;
  margin: 0;
}

[x-cloak] {
  display: none !important;
}

/* Gradient spans the full chart height (set by --duck-bar-span), so taller bars reach duck yellow. */
.duck-bar {
  background-image: linear-gradient(to top, var(--duck-bar-base), var(--duck-bar-top));
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% var(--duck-bar-span, 100%);
}

::selection {
  background: color-mix(in oklab, var(--primary) 25%, transparent);
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }
}

/* Landing page: the hero copy and demo rise in once on load. */
@keyframes landing-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .landing-rise {
    animation: landing-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}