:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: #090a0c; color: #f7f7f8; }
* { box-sizing: border-box; }
body { min-width: 20rem; min-height: 100vh; margin: 0; overflow: hidden; background: #090a0c; }
main { display: grid; min-height: 100svh; place-items: center; padding: 1.5rem; }
form { display: grid; width: min(22rem, 100%); gap: .75rem; transform-origin: center; }
label { color: #b8b8ba; font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
input { width: 100%; min-height: 3rem; border: 1px solid #363739; border-radius: 0; outline: 0; background: #111214; padding: .75rem 1rem; color: #f7f7f8; font: 1rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; caret-color: #ff6363; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
input:focus { border-color: #ff6363; background: #151618; box-shadow: 0 0 0 1px #ff6363; }
form.denied input { animation: denied .34s cubic-bezier(.36,.07,.19,.97); border-color: #ff6363; }
body.granted form { animation: depart .7s cubic-bezier(.76,0,.24,1) forwards; }
body.granted::after { content: ""; position: fixed; inset: 50% 0 auto; height: 1px; background: #ff6363; transform: scaleX(0); animation: cut .7s cubic-bezier(.76,0,.24,1) forwards; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
@keyframes denied { 20%, 60% { transform: translateX(-.5rem); } 40%, 80% { transform: translateX(.5rem); } }
@keyframes depart { 0% { opacity: 1; transform: scale(1); } 38% { opacity: 1; transform: scaleX(.78); } 100% { opacity: 0; transform: scaleX(2.4) translateY(-1rem); filter: blur(.5rem); } }
@keyframes cut { 0%, 28% { transform: scaleX(0); } 62% { transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }