*,*:before,*:after{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Archivo,system-ui,sans-serif;background:var(--bg,#0f1020);color:var(--fg,#fff);transition:background .6s ease,color .6s ease;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overscroll-behavior:none}#app{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;padding:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}.center{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px}.big{font:900 clamp(44px,15vw,72px)/1 "Archivo",sans-serif;font-stretch:75%;text-transform:uppercase;overflow-wrap:anywhere}.dark .big{color:#f0c35a}.small{font:600 17px Archivo,sans-serif;opacity:.7}.join{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;max-width:420px;width:100%;margin:0 auto}.join h1{margin:0 0 10px;font:900 40px/1 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase}.join h1 b{color:#f0c35a}.join label{font:700 16px Archivo,sans-serif;opacity:.7}.join input{height:64px;border-radius:16px;border:2px solid rgba(255,255,255,.2);background:#ffffff14;color:inherit;padding:0 18px;font:800 26px Archivo,sans-serif;outline:none;-webkit-user-select:text;user-select:text}.join input:focus{border-color:#f0c35a}.join button{height:64px;border:0;border-radius:16px;background:#f0c35a;color:#14152a;font:900 24px Archivo,sans-serif;cursor:pointer}.join button:disabled{opacity:.5}.join .err{min-height:22px;font:700 16px Archivo,sans-serif;color:#ff8a7a}.bar{height:10px;border-radius:5px;background:#0000001f;overflow:hidden;flex:none}.bar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:0 50%}.keys{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;min-height:0}.keys.n3 .key:last-child{grid-column:1/-1}.key{border:0;border-radius:24px;background:#fff;color:var(--accent);font:900 clamp(56px,20vw,96px)/1 "Archivo",sans-serif;box-shadow:0 8px 20px #00000014;transition:opacity .25s,transform .12s,box-shadow .15s;cursor:pointer}.key:active{transform:scale(.97)}.key:disabled{cursor:default}.key.sel{box-shadow:inset 0 0 0 4px #22252b80,0 8px 20px #00000014}.wait .key{opacity:.45}.done .key,.sending .key{opacity:.35}.num{flex:1;display:flex;flex-direction:column;gap:12px;margin-top:16px;min-height:0}.num .show{flex:none;height:76px;border-radius:20px;background:#fff;color:#22252b;display:grid;place-items:center;font:900 46px Archivo,sans-serif;font-variant-numeric:tabular-nums}.pad{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-height:0}.pad button{border:0;border-radius:18px;background:#fff;color:#22252b;font:800 32px Archivo,sans-serif;cursor:pointer;display:grid;place-items:center}.pad button.soft{background:#ffffff8c;font-size:20px}.pad button:active{transform:scale(.97)}.wait .pad,.done .pad,.sending .pad{opacity:.35}.confirm{flex:none;height:72px;margin-top:14px;border:0;border-radius:20px;background:var(--accent);color:#fff;font:900 26px Archivo,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .2s,color .2s,opacity .2s,transform .12s}.confirm:active{transform:scale(.98)}.confirm:disabled{background:#00000012;color:#22252b61;cursor:default;transform:none}.confirm.hurry{animation:hurry .7s ease-in-out infinite alternate}@keyframes hurry{to{transform:scale(1.03);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 30%,transparent)}}.res{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;animation:resIn .45s cubic-bezier(.2,1.4,.4,1) both}.res .sym{font:900 140px/1 Archivo,sans-serif}.res b{font:900 52px/1 Archivo,sans-serif;font-stretch:80%;text-transform:uppercase}@keyframes resIn{0%{opacity:0;transform:scale(.8)}}.res.sending{color:#9a9a92}.res.sending .ic{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#net{position:fixed;top:max(10px,env(safe-area-inset-top));left:50%;transform:translate(-50%);padding:6px 14px;border-radius:999px;background:#0009;color:#fff;font:700 13px Archivo,sans-serif}