@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800;900&display=swap');
:root{--ink:#171717;--paper:#fffdf7;--yellow:#f6d94b;--pink:#ff9db5;--blue:#a8ddf7;--border:3px solid var(--ink);--shadow:6px 6px 0 var(--ink);--radius:24px}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{font-family:'Plus Jakarta Sans',Arial,sans-serif;background:var(--yellow);color:var(--ink);font-weight:700;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.topbar{height:72px;padding:0 clamp(18px,4vw,48px);display:flex;align-items:center;justify-content:space-between;background:var(--paper);border-bottom:var(--border);position:relative;z-index:5}
.brand{font-size:19px;font-weight:900;letter-spacing:1px}
.top-actions{display:flex;align-items:center;gap:10px}
.app-label{padding:7px 12px;background:var(--pink);border:2px solid var(--ink);border-radius:10px;font-size:11px;font-weight:900}
.language-wrap{position:relative}
.flag-button{height:39px;min-width:58px;padding:0 9px;background:#fff;border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);display:flex;align-items:center;justify-content:center;gap:6px;font-size:18px}
.flag-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.language-menu{position:absolute;right:0;top:47px;width:175px;max-height:65vh;overflow:auto;background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:6px;z-index:20}
.language-menu[hidden]{display:none}
.language-menu button{width:100%;padding:10px;border:0;border-radius:8px;background:white;text-align:left;font-size:13px;font-weight:800}
.language-menu button:active,.language-menu button:hover{background:var(--yellow)}
.stage{height:calc(100dvh - 72px);min-height:0;padding:0;display:block}
.onboarding,.fingerprint-screen{width:100%;height:100%;max-height:none;background:var(--paper);border:0;border-radius:0;box-shadow:none;padding:clamp(20px,5vw,54px);display:flex;flex-direction:column;overflow:hidden}
.photo-frame{position:relative;flex:0 0 auto;width:min(72vw,390px);height:min(34vh,270px);min-height:150px;margin:clamp(26px,7vh,72px) auto 0;background:#eeeade;border:var(--border);border-radius:22px;overflow:hidden;display:grid;place-items:center}
.photo-frame img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;display:none}
.photo-placeholder{display:grid;place-items:center}
.photo-placeholder svg{width:62px;height:62px;fill:none;stroke:#777;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.slide-copy{width:min(100%,520px);margin:0 auto;padding:clamp(25px,5vh,48px) 2px 12px}
.slide-copy h1,.fingerprint-content h1{font-size:clamp(30px,6vw,48px);line-height:1.05;letter-spacing:-1.8px;margin:0 0 9px;font-weight:900}
.slide-copy p,.fingerprint-content>p{font-size:14px;line-height:1.6;color:#555;margin:0}
.bottom-actions{width:min(100%,520px);margin: auto auto 0;display:flex;gap:12px;padding-top:24px;padding-bottom:max(4px,env(safe-area-inset-bottom))}
.skip-button,.next-button{height:54px;border:var(--border);border-radius:14px;box-shadow:4px 4px 0 var(--ink);font-size:14px;font-weight:900}
.skip-button{background:#fff;flex:1}
.next-button{background:var(--yellow);flex:1;display:flex;align-items:center;justify-content:center;gap:14px}
.next-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fingerprint-screen{align-items:center;justify-content:center;text-align:center}
.fingerprint-content{width:min(100%,430px)}
.fingerprint-content>p{max-width:330px;margin:0 auto}
.fingerprint-area{width:190px;height:190px;margin:34px auto 22px;border-radius:50%;display:grid;place-items:center;background:#f0eee5;position:relative;touch-action:none;user-select:none}
.fingerprint-progress{width:160px;height:160px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--yellow) 0%,#ddd 0%);padding:7px;transition:background .04s linear}
.fingerprint-svg{width:100%;height:100%;padding:34px;background:var(--blue);border:var(--border);border-radius:50%;fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.fingerprint-area.pressing .fingerprint-svg{transform:scale(.96)}
.progress-value{font-size:30px;font-weight:900;margin-bottom:12px}
.progress-track{height:12px;width:100%;border:2px solid var(--ink);border-radius:20px;background:white;overflow:hidden}
.progress-track span{display:block;width:0;height:100%;border-radius:20px;background:var(--yellow)}
.fingerprint-hint{margin-top:16px!important;font-size:12px!important}
.home-body{background:var(--yellow)}
.home-content{height:calc(100dvh - 72px);display:grid;align-content:center;justify-items:center;text-align:center;padding:24px}
.home-content h1{font-size:clamp(38px,8vw,76px);letter-spacing:-2px;margin:0}
.home-content h1 span{background:var(--pink);padding:0 8px;border-radius:10px}
.home-content p{font-size:13px}
.translate-hidden{position:absolute;left:-9999px;top:-9999px}
.goog-te-banner-frame,.goog-te-gadget{display:none!important}body{top:0!important}
@media(max-width:600px){.topbar{height:64px}.stage{height:calc(100dvh - 64px);padding:0}.onboarding,.fingerprint-screen{padding:18px 20px}.photo-frame{width:min(72vw,330px);height:min(32vh,230px);min-height:145px;margin-top:clamp(28px,7vh,58px);border-radius:19px}.slide-copy{padding-top:clamp(24px,5vh,38px)}.bottom-actions{padding-top:18px;padding-bottom:max(6px,env(safe-area-inset-bottom))}.skip-button,.next-button{height:52px}.fingerprint-area{width:170px;height:170px}.fingerprint-progress{width:146px;height:146px}.fingerprint-svg{padding:30px}}