:root {
  --proto-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --proto-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --proto-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --proto-ring: rgba(139, 92, 246, 0.34);
}

html {
  background: #0a0a0a;
}

body {
  animation: proto-page-in 420ms var(--proto-ease-out) both;
  text-rendering: geometricPrecision;
}

a,
button,
[role="button"],
.cursor-pointer {
  transition-property: transform, border-color, background-color, color, box-shadow, opacity, filter !important;
  transition-duration: 160ms !important;
  transition-timing-function: var(--proto-ease-out) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--proto-ring) !important;
}

button:active,
a:active,
[role="button"]:active,
.cursor-pointer:active {
  transform: translateY(1px) scale(0.985);
}

@media (hover: hover) and (pointer: fine) {
  a[href$=".html"]:hover,
  button:hover,
  [onclick]:hover,
  .cursor-pointer:hover {
    transform: translateY(-1px);
  }

  .bg-panel.border:hover,
  .bg-card.border:hover {
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(139, 92, 246, 0.08);
  }
}

.proto-route-leaving body {
  animation: proto-page-out 150ms ease forwards;
  pointer-events: none;
}

.proto-enter {
  animation: proto-fade-up 460ms var(--proto-ease-out) both;
  animation-delay: var(--proto-delay, 0ms);
}

.modal-overlay:not(.hidden) {
  animation: proto-backdrop-in 180ms ease-out both;
}

.modal-overlay:not(.hidden) > div {
  animation: proto-dialog-in 260ms var(--proto-ease-drawer) both;
  transform-origin: center;
}

[data-proto-step-enter="true"] {
  animation: proto-step-in 240ms var(--proto-ease-out) both;
}

.proto-selected {
  border-color: rgba(139, 92, 246, 0.9) !important;
  background: rgba(139, 92, 246, 0.12) !important;
  color: #c4b5fd !important;
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.16), 0 14px 36px rgba(139, 92, 246, 0.12);
}

.proto-switch-knob {
  transition: transform 220ms var(--proto-ease-drawer), background-color 160ms ease !important;
}

.proto-toast-enter {
  opacity: 1;
  transform: translateX(0);
}

@keyframes proto-page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes proto-page-out {
  to {
    opacity: 0;
    transform: translateY(-4px) scale(0.995);
    filter: blur(2px);
  }
}

@keyframes proto-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes proto-backdrop-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px);
  }
}

@keyframes proto-dialog-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes proto-step-in {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  body,
  .proto-enter,
  .modal-overlay:not(.hidden),
  .modal-overlay:not(.hidden) > div,
  [data-proto-step-enter="true"] {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}