:root{font-family:Arial,Helvetica,sans-serif;color:#4b5b73;background:#fef9f9}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#fef9f9 url('assets/background.png') center/cover fixed}button,input{font:inherit}#falling-leaves{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}.leaf{position:absolute;top:-5vh;left:var(--left);width:var(--size);height:var(--size);color:var(--color);opacity:var(--opacity);animation:fall var(--duration) linear var(--delay) infinite}.leaf svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}@keyframes fall{0%{transform:translate3d(0,-5vh,0) rotate(var(--rotate))}33%{transform:translate3d(var(--sway),35vh,0) rotate(calc(var(--rotate) + 120deg))}66%{transform:translate3d(calc(var(--sway) * -1),73vh,0) rotate(calc(var(--rotate) + 240deg))}100%{transform:translate3d(0,115vh,0) rotate(calc(var(--rotate) + 360deg))}}.app{position:relative;z-index:1;width:min(560px,calc(100% - 32px));margin:auto;padding:clamp(56px,19vh,245px) 0 34px}.brand{text-align:center}.logo{display:block;width:80px;height:80px;object-fit:cover;border-radius:20px;margin:0 auto 18px;box-shadow:0 5px 9px #59466418}.brand h1{margin:0;color:#132844;font-size:29px;line-height:1.15;font-weight:500;letter-spacing:-1px}.brand p{margin:10px 0 30px;color:#9cacc7;font-size:17px}.card{padding:31px;background:#fff;border-radius:29px;box-shadow:0 18px 29px #b5a2ef25}.password-box{height:80px;border:1px solid #edf0f5;border-radius:19px;background:#f7f9fb;padding:0 21px;display:flex;align-items:center;overflow:auto}.password-box output{color:#112848;font-size:21px;white-space:nowrap;letter-spacing:.15px}.actions{display:flex;gap:10px;margin-top:15px}.actions button{height:45px;border-radius:15px;flex:1;font-weight:600;cursor:pointer}.actions button span:first-child{font-size:23px;line-height:0;vertical-align:-2px;margin-right:12px}.copy{border:1px solid #dce3ee;background:white;color:#4b5b73;box-shadow:0 2px 3px #12223a0b}.generate{border:0;background:#ddc385;color:white;box-shadow:0 4px 8px #906abb3d}.actions button:hover{filter:brightness(.96)}.actions button:focus-visible,input:focus-visible{outline:3px solid #80618e;outline-offset:3px}.strength{margin-top:33px}.strength-label{display:flex;justify-content:space-between;font-size:14px;margin-bottom:10px;color:#687a98}.strength-label strong{color:#683575;font-weight:500}.meter{display:flex;gap:6px}.meter i{display:block;height:10px;flex:1;background:#e9e5ec;border-radius:10px}.meter i.active{background:var(--meter-color,#63336d)}.length-row{display:flex;justify-content:space-between;align-items:center;margin-top:31px;font-weight:600}.length-row output{font-size:16px;color:#df718f;background:#f5f2fa;padding:6px 12px;border-radius:11px}#length{width:100%;margin:20px 0 27px;accent-color:#202020;cursor:pointer}.options{display:grid;gap:14px}.options label{display:flex;align-items:center;justify-content:space-between;min-height:26px;font-weight:600;cursor:pointer}.options input{position:absolute;opacity:0;width:1px;height:1px}.switch{width:45px;height:26px;border-radius:20px;background:#aab1b7;position:relative;transition:background .2s}.switch:before{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}.options input:checked+.switch{background:#1d1d1d}.options input:checked+.switch:before{transform:translateX(19px)}.options input:focus-visible+.switch{outline:3px solid #80618e;outline-offset:3px}footer{text-align:center;color:#9caecb;font-size:14px;margin:27px 0}@media(max-width:600px){.app{padding-top:60px}.card{padding:22px;border-radius:25px}.brand p{font-size:15px}.password-box output{font-size:17px}.options label{font-size:15px}}@media(prefers-reduced-motion:reduce){.leaf{animation:none;display:none}}

.tagline-symbol{font-family:'Segoe UI Symbol','Noto Sans Symbols 2',sans-serif}
