:root{--ink:#251f45;--pur:#6c4cf1;--pur2:#4f33c9;--line:#e6e0fa}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.lg{font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);min-height:100vh;min-height:100dvh;
  background:linear-gradient(160deg,#7a5cff 0%,#5a3fe0 45%,#3a2aa8 100%);display:flex;align-items:center;justify-content:center;padding:20px 16px;position:relative;overflow-x:hidden}
.sky{position:fixed;inset:0;pointer-events:none}
.star{position:absolute;fill:#ffc83d;stroke:#b97a00;stroke-width:1.2;animation:tw 4s ease-in-out infinite}
.s1{width:34px;top:8%;left:10%}.s2{width:22px;top:18%;right:12%;animation-delay:1.2s}.s3{width:28px;bottom:12%;left:18%;animation-delay:2.2s}
.blob{position:absolute;border-radius:50%;opacity:.22;background:#fff}
.b1{width:260px;height:260px;top:-90px;right:-70px}.b2{width:200px;height:200px;bottom:-70px;left:-60px}
@keyframes tw{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(14deg)}}
@media (prefers-reduced-motion:reduce){.star{animation:none}}
.wrap{position:relative;width:100%;max-width:420px}
.hero{text-align:center;color:#fff;margin-bottom:14px}
.book{width:132px;height:auto;filter:drop-shadow(0 6px 0 rgba(0,0,0,.18))}
.hero h1{font-size:30px;margin:6px 0 2px;font-weight:800;letter-spacing:-.01em}
.hero p{margin:0;font-weight:700;opacity:.92}
.panel{background:#fff;border-radius:26px;padding:20px 18px 16px;box-shadow:0 10px 0 rgba(0,0,0,.14),0 24px 40px rgba(20,10,80,.3)}
.err{background:#fde7ec;border:2px solid #f2a9b9;color:#8b1c36;border-radius:12px;padding:10px 12px;font-weight:700;margin:0 0 12px}
.who{border:0;margin:0 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.who legend{font-weight:800;font-size:15px;margin-bottom:8px;padding:0}
.pick{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px 10px;border:3px solid var(--line);border-radius:18px;cursor:pointer;background:#faf8ff;text-align:center;transition:transform .12s}
.pick:hover{transform:translateY(-2px)}
.pick input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pick .face svg{width:54px;height:54px}
.pick b{font-size:17px}.pick small{font-size:12.5px;color:#5f5a86;font-weight:700}
.pick:has(input:checked){border-color:var(--pur);background:#ece8ff;box-shadow:0 0 0 4px #ddd5ff}
.pick:has(input:focus-visible){outline:3px solid var(--pur2);outline-offset:2px}
.pw{display:block;font-weight:800;font-size:15px}
.pwbox{display:flex;align-items:center;margin-top:6px;border:3px solid var(--line);border-radius:14px;background:#faf8ff;padding-right:4px}
.pwbox:focus-within{border-color:var(--pur)}
.pwbox input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:18px;padding:13px 12px;color:var(--ink);outline:none}
.pwbox button{border:0;background:transparent;width:44px;height:44px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pwbox button svg{width:24px;height:24px;fill:none;stroke:#5f5a86;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pwbox button[aria-pressed=true] svg{stroke:var(--pur2)}
.go{display:block;width:100%;margin-top:16px;padding:15px;border:0;border-radius:16px;background:var(--pur);color:#fff;font:inherit;font-weight:800;font-size:18px;cursor:pointer;box-shadow:0 5px 0 var(--pur2);transition:transform .08s,box-shadow .08s}
.go:active{transform:translateY(4px);box-shadow:0 1px 0 var(--pur2)}
.go:focus-visible{outline:3px solid #ffc83d;outline-offset:3px}
.fine{margin:12px 0 0;text-align:center;font-size:12.5px;color:#5f5a86;font-weight:600;line-height:1.4}
@media (max-height:640px){.book{width:90px}.hero h1{font-size:24px}}
.pw+.pw{margin-top:14px}