*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.25;display:flex;background-color:var(--clr-primary);font-family:var(--ff-primary);align-items:center}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--clr-primary: #0f0e14;--clr-secondary: #24232b;--clr-accent: #a4ffaf;--clr-neutral-200: #e6e5e9;--clr-neutral-500: #7e7b8c;--clr-neutral-800: #18171f;--ff-primary: "JetBrains Mono", monospace;--fs-200: .75rem;--fs-300: .8125rem;--fs-400: 1rem;--fs-500: 1.5rem;--fs-600: 2rem;--fw-normal: 400;--fw-bold: 700}#app{max-width:500px;min-width:320px;margin:0 auto;padding:2rem;font-size:var(--fs-normal);font-family:var(--ff-primary);font-weight:var(--fw-normal);background-color:var(--clr-light-gray)}h1{color:var(--clr-neutral-500);font-size:var(--fs-600);line-height:1.1;margin-bottom:1rem;text-align:center}h3,label{color:var(--clr-neutral-200);font-size:var(--fs-400)}.copy-icon{width:30px;height:30px;color:var(--clr-accent)}.password-copy-container{display:flex;align-items:center;background-color:var(--clr-secondary);font-size:var(--fs-600);color:var(--clr-neutral-500);margin-bottom:1rem;padding:.75rem;justify-content:space-between;max-width:100%}#password{background-color:transparent;max-width:85%;color:inherit;border:none;flex-grow:1}#copy{cursor:pointer;display:flex;position:relative}#copy *:active{fill:var(--clr-neutral-200)}#copy>div{position:absolute;bottom:-100%;right:2em;font-size:var(--fs-300);background-color:var(--clr-neutral-200);padding:.25em;display:none}.selection-container{background-color:var(--clr-secondary);font-size:var(--fs-600);color:var(--clr-neutral-500);padding:.5em}#slider{width:90%;background:var(--clr-primary);accent-color:var(--clr-accent);margin:1.5rem auto;cursor:pointer;height:6px;border-radius:2px;display:flex}input[type=checkbox]{position:absolute;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;border:0}input[type=checkbox]+label{position:relative;width:100%;font-size:1rem;cursor:pointer;display:inline-flex;align-items:center;height:1.25rem;color:var(--clr-neutral-200)}@media (max-width: 380px){input[type=checkbox]+label{font-size:var(--fs-200)}}input[type=checkbox]+label:before{content:" ";display:inline-block;vertical-align:middle;margin-right:1.25rem;width:1.25rem;height:1.25rem;border:1px solid var(--clr-accent);border-radius:2px}input[type=checkbox]:checked+label:after{content:" ";background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ii8+PC9zdmc+);background-repeat:no-repeat;background-size:12px 12px;background-position:center center;position:absolute;display:flex;justify-content:center;align-items:center;margin-left:0;left:0;top:0;text-align:center;background-color:var(--clr-accent);border-radius:2px;font-size:10px;height:1.25rem;width:1.25rem}.char-container{display:flex;align-items:center}.char-container h3{flex-grow:1}#char-length{margin:.5rem;align-self:center;display:flex;color:var(--clr-accent);font-size:var(--fs-800)}.strength-container{background-color:var(--clr-primary);display:flex;margin-top:.75rem;margin-bottom:.75rem;height:4rem}.strength-container h4{flex-grow:1;text-transform:uppercase;margin-left:1rem;font-size:var(--fs-400);align-self:center}#strength{display:flex;gap:.5rem;padding:1rem;align-self:center}#strength>*{height:1.5rem;width:.5rem;border:2px solid white}#generate{background-color:var(--clr-accent);text-transform:uppercase;font-size:var(--fs-400);width:100%;padding:.75rem;cursor:pointer;color:var(--clr-secondary);border:1px solid var(--clr-accent)}#generate:active{background-color:transparent;color:var(--clr-accent)}