:root{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;color:#17191c;background:#fafbfc;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 18px;background:radial-gradient(ellipse at 15% 12%,#eaf0fc88,transparent 50%),radial-gradient(ellipse at 90% 90%,#f3e8f588,transparent 50%),#fafbfc}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid #2d68c4;outline-offset:4px}.welcome{width:100%;max-width:438px;text-align:center;padding:37px 42px 28px;border:1.5px solid #e1e3e7;border-radius:32px;background:#ffffffeb;box-shadow:0 16px 70px #31446708}.home-pair{position:relative;height:76px;width:142px;margin:0 auto 22px}.home{display:flex;align-items:center;justify-content:center;width:69px;height:69px;border-radius:23px;position:absolute;top:3px}.home svg{width:34px;height:34px}.home.dad{left:0;background:#e3eaf8;color:#2d68c4;transform:rotate(-7deg)}.home.mom{right:0;background:#f1e3f2;color:#8553a4;transform:rotate(7deg)}svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.heart{position:absolute;bottom:-4px;left:57px;width:29px;height:29px;padding:5px;background:#fff;border-radius:50%;color:#e05a65;stroke-width:2}.family-names{font-size:11px;letter-spacing:1.6px;font-weight:600;color:#737680;margin:0 0 11px}h1{font-size:32px;letter-spacing:-1px;line-height:1.15;margin:0 0 12px;font-weight:650}.intro{font-size:14px;line-height:1.6;color:#747780;margin:0 0 28px}#pin-label{display:block;font-size:13px;color:#61656e}.pin-dots{height:47px;display:flex;align-items:center;justify-content:center;gap:15px;margin:0 0 15px}.pin-dots span{width:13px;height:13px;border:1.7px solid #d6dce6;border-radius:50%;transition:background .12s,border-color .12s}.pin-dots span.filled{background:#697caa;border-color:#697caa}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;justify-items:center;margin:0 auto 21px;max-width:286px}.keypad button{border:1px solid #e1e6f0;border-radius:50%;height:70px;width:70px;font-size:27px;font-weight:500;background:#f0f4fc;color:#345b9b;box-shadow:0 2px 0 #dce3f140;transition:background .15s,transform .1s}.keypad button:nth-child(2),.keypad button:nth-child(4),.keypad button:nth-child(6),.keypad button:nth-child(8){background:#f6eef7;border-color:#ecdfef;color:#805891}.keypad button:hover{background:#e3eaf8}.keypad button:active{transform:scale(.95)}.keypad button.quiet{font-size:12px;font-weight:500;color:#777d88;background:transparent;border-color:transparent;box-shadow:none}.keypad button.quiet svg{width:25px;height:25px}.unlock{height:48px;width:100%;border:0;border-radius:16px;background:#657ba6;color:white;font-size:15px;font-weight:500}.unlock span{margin-left:10px}.unlock:disabled{background:#e8ecf4;color:#939cad;cursor:default}button:disabled{cursor:default}.pin-status{font-size:12px;line-height:1.5;color:#9297a1;min-height:18px;margin:14px 0 0}.pin-status.error{color:#a65c64}.remember{font-size:11px;color:#9297a1;line-height:1.5;margin:16px 0 0}.preview-note{font-size:10px;color:#92712d;background:#fff5db;padding:8px;border-radius:9px;line-height:1.4}[hidden]{display:none!important}
@media(max-width:380px){body{padding:16px 12px}.welcome{padding:27px 23px 23px;border-radius:27px}h1{font-size:29px}.intro{font-size:13px;margin-bottom:21px}.home-pair{margin-bottom:18px}.keypad{gap:9px}.keypad button{height:62px;width:62px;font-size:25px}.pin-dots{margin-bottom:10px}}@media(max-height:720px){body{padding:16px 12px}.welcome{padding-top:24px;padding-bottom:22px}.home-pair{height:65px;margin-bottom:15px}.home{width:59px;height:59px}.home-pair{width:124px}.heart{left:48px}.intro{margin-bottom:17px}.keypad{gap:8px;margin-bottom:17px}.keypad button{height:59px;width:59px}.remember{margin-top:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-height:650px){body{padding:10px}.welcome{padding:18px 20px 14px;border-radius:25px}.home-pair{height:42px;width:92px;margin-bottom:10px}.home{top:0;width:42px;height:42px;border-radius:14px}.home svg{width:25px;height:25px}.heart{left:35px;width:22px;height:22px;padding:4px}.family-names{font-size:9px;margin-bottom:7px}h1{font-size:26px;margin-bottom:16px}.intro{display:none}#pin-label{font-size:12px}.pin-dots{height:32px;gap:12px;margin-bottom:10px}.pin-dots span{width:11px;height:11px}.keypad{gap:7px;max-width:230px;margin-bottom:12px}.keypad button{height:48px;width:48px;font-size:22px}.keypad button.quiet{font-size:11px}.unlock{height:40px;font-size:13px;border-radius:13px}.pin-status{font-size:11px;min-height:17px;margin-top:10px}.remember{font-size:10px;margin-top:8px}.preview-note{font-size:9px;line-height:12px;padding:6px;margin:8px 0 0}}
@media(max-height:520px){.home-pair,.unlock,.remember{display:none}}