:root { color-scheme: dark; --cyan: #38e1ff; --violet: #b36bff; }

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: #eef1f7;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(40rem 30rem at 50% 30%, rgba(179, 107, 255, .14), transparent 70%),
    #07080d;
}

main { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 2rem 1rem; }

.duo { width: min(28rem, 85vw, 60vh); height: auto; filter: drop-shadow(0 0 18px rgba(56, 225, 255, .25)); animation: rise 1.4s ease-out both; }

form { display: flex; width: min(20rem, 85vw); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .04); }
form:focus-within { border-color: var(--cyan); }
input { flex: 1; min-width: 0; font: inherit; color: inherit; background: none; border: 0; padding: .75rem 1.1rem; outline: none; }
button { font: inherit; font-weight: 700; color: #06070b; border: 0; padding: 0 1.2rem; cursor: pointer; background: linear-gradient(100deg, var(--cyan), var(--violet)); }

.error { margin: -1rem 0 0; color: #ff7b72; font-size: .9rem; }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) { .duo { animation: none; } }