:root{color-scheme:dark;font-family:Inter,"Segoe UI",Arial,sans-serif;background:#090b0e;color:#f6eee2}*{box-sizing:border-box}body{margin:0}.entrance{position:relative;min-height:100svh;overflow:hidden;display:grid;grid-template-columns:54% 46%;align-items:center}.scene{position:absolute;inset:0;pointer-events:none;overflow:hidden}.scene img,.scene canvas{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center}.shade{position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,#090b0e44 57%,#090b0eb0 100%)}.access{position:relative;grid-column:2;width:min(390px,80%);margin:0 auto;padding:70px 0}h1{font-size:clamp(32px,3.6vw,54px);font-weight:300;letter-spacing:.28em;margin:0 0 74px;text-align:center;padding-left:.28em}label{font-size:17px;display:block;margin-bottom:12px}.password-field{display:flex;border:1px solid #e5d6c038;border-radius:15px;background:#090b0e66;overflow:hidden}.password-field:focus-within{outline:2px solid #cbb692;outline-offset:3px}input[type=password],input[type=text]{font:inherit;letter-spacing:.12em;min-width:0;width:100%;padding:17px 18px;background:transparent;border:0;color:inherit;outline:0}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible{outline:2px solid #accce0;outline-offset:5px}#reveal{width:54px;flex-shrink:0;border:0;background:transparent;display:grid;place-items:center}#reveal svg{width:24px;height:24px}.remember{display:flex;align-items:center;gap:10px;color:#b6b3ae;font-size:12px;line-height:1.5;margin:16px 0 27px}.remember input{accent-color:#e9d9c0;width:16px;height:16px;flex-shrink:0}.enter{width:100%;min-height:56px;background:#f4e8d7;border:1px solid #fff1de;border-radius:14px;font-size:21px;color:#171717;transition:background .2s}.enter:hover{background:#fff5e6}.enter:disabled{opacity:.55;cursor:wait}#status,#error{font-size:13px;line-height:1.6;min-height:21px;color:#c2bbb2;margin:20px 0 0}#error{color:#ffd2c2}.retry{background:none;border:1px solid #736957;border-radius:8px;padding:12px 18px;margin-top:12px}.motion{position:absolute;bottom:18px;left:24px;background:#090b0e60;border:1px solid #e5d6c025;border-radius:20px;padding:10px 15px;font-size:11px;color:#c1beb8;min-height:40px}[hidden]{display:none!important}
@media(max-width:650px){.entrance{display:block;padding:0 28px 74px;min-height:100svh}.scene{height:440px}.scene img,.scene canvas{width:100%;height:100%;object-position:28% center}.shade{background:linear-gradient(0deg,#090b0e 0%,#090b0e00 50%)}.access{padding:290px 0 20px;width:100%;max-width:390px}h1{font-size:34px;margin-bottom:45px}.motion{left:50%;transform:translateX(-50%);white-space:nowrap;bottom:16px}}
@media(prefers-reduced-motion:reduce){.enter{transition:none}}

.phone-unlock,.phone-enroll{display:none}.phone-unlock{text-align:center}#biometric{width:100px;height:100px;border:1px solid #e5d6c045;border-radius:50%;background:#0c111366;color:#f4e8d7;box-shadow:0 0 40px #e5d6c010}#biometric svg{width:62px;height:62px}#biometric:disabled{opacity:.4;cursor:default}.fallback{background:none;border:0;color:#c2bbb2;font-size:12px;text-decoration:underline;padding:16px}.phone-unlock p{font-size:13px;color:#c2bbb2}
@media(max-width:650px){.phone-unlock{display:block}.phone-enroll{display:flex}body:not(.password-mode) #credentials,body:not(.password-mode) #enter{display:none}body.password-mode #credentials{display:block!important}body.password-mode #enter{display:block}.access h1{margin-bottom:36px}}

/* Authenticated transition: awaken, then travel toward the light. */
body.entering{pointer-events:none}.entering .access{opacity:0;transition:opacity .6s}.entering .scene{animation:passage-travel .7s cubic-bezier(.42,0,.25,1) forwards;transform-origin:38% 60%}.entering .shade{opacity:0;transition:opacity 1.5s}.entrance::after{content:"";position:fixed;inset:0;background:#eee6db;opacity:0;pointer-events:none}.entering .entrance::after{animation:passage-light .7s ease-in forwards}
@keyframes passage-travel{0%,25%{transform:scale(1)}100%{transform:scale(3.5)}}@keyframes passage-light{0%,50%{opacity:0}100%{opacity:1}}@media(max-width:650px){.entering .scene{transform-origin:24% 50%}}@media(prefers-reduced-motion:reduce){.entering .scene,.entering .entrance::after{animation:none}}
