:root {
  --motion-duration-instant: 80ms;
  --motion-duration-fast: 140ms;
  --motion-duration-base: 220ms;
  --motion-duration-slow: 360ms;
  --motion-duration-drawer: 440ms;
  --motion-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --motion-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-exit: cubic-bezier(.4, 0, 1, 1);
  --motion-ease-spring: cubic-bezier(.2, .9, .2, 1.12);
  --motion-distance-sm: 6px;
  --motion-distance-md: 14px;
  --motion-press-scale: .975;
  --motion-hover-lift: -1px;
  --motion-stagger: 46ms;
  --motion-fast: var(--motion-duration-fast);
  --motion-base: var(--motion-duration-base);
  --ease-out: var(--motion-ease-enter);
}

html { scroll-behavior: smooth; }

:where(button, a, [role="button"], input, textarea, select, summary) {
  -webkit-tap-highlight-color: transparent;
}

:where(button, a, [role="button"]):not(:disabled) {
  transition:
    color var(--motion-duration-fast) var(--motion-ease-standard),
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
    opacity var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
}

:where(button, [role="button"]):not(:disabled):active {
  transform: scale(var(--motion-press-scale));
  transition-duration: var(--motion-duration-instant);
}

:where(button, a, [role="button"], input, textarea, select, summary):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--console-accent, #9caf72) 80%, white);
  outline-offset: 3px;
}

:where(input, textarea, select) {
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.motion-presence,
[data-motion-presence] {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance-sm), 0);
  transition:
    opacity var(--motion-duration-base) var(--motion-ease-enter),
    transform var(--motion-duration-base) var(--motion-ease-enter);
}

.motion-presence.is-present,
[data-motion-presence].is-present {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-page-enter {
  animation: tensor-page-enter var(--motion-duration-fast, 140ms) var(--motion-ease-enter) both;
}

.motion-list-enter > * {
  animation: tensor-item-enter var(--motion-duration-base) var(--motion-ease-enter) both;
  animation-delay: calc(var(--motion-order, 0) * var(--motion-stagger));
}

.motion-loading {
  animation: tensor-loading 1.3s var(--motion-ease-standard) infinite alternate;
}

@keyframes tensor-page-enter {
  from { opacity: 0.88; transform: translate3d(0, 4px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tensor-item-enter {
  from { opacity: 0; transform: translate3d(0, var(--motion-distance-sm), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tensor-loading { from { opacity: .46; } to { opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant: 1ms;
    --motion-duration-fast: 1ms;
    --motion-duration-base: 1ms;
    --motion-duration-slow: 1ms;
    --motion-duration-drawer: 1ms;
    --motion-distance-sm: 0px;
    --motion-distance-md: 0px;
    --motion-stagger: 0ms;
  }

  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}