:root{--color-primary: hsl(120, 75%, 77%);--color-primary-light: hsl(120, 75%, 90%);--color-gray-500: hsl(0deg 0% 50%);--color-gray-600: hsl(0deg 0% 40%);--color-gray-700: hsl(0deg 0% 18%);--color-gray-800: hsl(0deg 0% 10%)}*,*:before,*:after{box-sizing:border-box}*{margin:0}html,body,#root{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased;font-family:sans-serif}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root{isolation:isolate}@media (prefers-color-scheme: dark){html{color-scheme:dark}}.main{height:100%;display:flex;flex-direction:column;justify-content:center;width:500px;margin:0 auto}.title{font-size:1.3rem;text-align:center;margin-bottom:1rem;color:var(--color-gray-500)}.form-options{background-color:var(--color-gray-700);padding:1.5rem}.length{display:flex;justify-content:space-between;align-items:center}.length .length-size{font-size:1.5rem;color:var(--color-primary)}.length-bar{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;background-color:var(--color-gray-800);border-radius:0}.length-bar::-webkit-slider-thumb{margin-top:-6px;background-color:#eaeaea;border-radius:50%;width:20px;height:20px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.length-bar::-webkit-slider-thumb:hover{background-color:var(--color-gray-800);border:1px solid var(--color-primary);cursor:pointer}.length-bar::-moz-range-thumb{background-color:#eaeaea;border-radius:50%;width:20px;height:20px}.length-bar::-webkit-slider-runnable-track{--range: 20;--ratio: calc((var(--val) - 0)/var(--range));--sx: calc(.5*20px + var(--ratio)*(100% - 20px));background:linear-gradient(var(--color-primary),var(--color-primary)) 0/var(--sx) 100% var(--color-gray-800) no-repeat;border:none;height:4px}.other-options-wrapper{display:flex;flex-direction:column;gap:.625rem;margin:1.5rem 0}.checkbox{display:none}.other-options-wrapper label{cursor:pointer}.other-options-wrapper label:before{content:"✓";color:transparent;text-align:center;line-height:15px;display:inline-block;width:1rem;height:1rem;border:1px solid #eaeaea;margin-right:16px;background-color:var(--color-gray-700);font-size:1rem;font-weight:800}.other-options-wrapper label:hover:before{border:1px solid var(--color-primary)}.checkbox:checked+label:before{content:"✓";background-color:var(--color-primary);color:var(--color-gray-800);border:1px solid var(--color-primary)}.strength-wrapper{padding:1.3rem 1.5rem;background-color:var(--color-gray-800);color:var(--color-gray-600);display:flex;justify-content:space-between;font-weight:600;align-items:center}.password{width:100%;font-size:1.5rem;padding:1rem 1.5rem;font-weight:600;background-color:var(--color-gray-700);color:var(--color-gray-600);margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center}.password-result{margin:0;color:#fff}.password svg{color:var(--color-primary)}.password svg:hover{color:#eaeaea;cursor:pointer}.tooltip-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}.tooltip{position:absolute;top:0;font-size:.7em;background-color:var(--color-gray-600);color:#fff;padding:5px 8px;border-radius:5px;box-shadow:0 10px 10px #0000001a;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.68,-.55,.265,1.55)}.tooltip:before{position:absolute;content:"";height:8px;width:8px;background-color:var(--color-gray-600);bottom:-3px;left:50%;transform:translate(-50%) rotate(45deg);transition:all .3s cubic-bezier(.68,-.55,.265,1.55)}.tooltip-wrapper:hover .tooltip{top:-45px;opacity:1;visibility:visible;pointer-events:auto;text-shadow:0px -1px 0px rgba(0,0,0,.1)}.button-primary{border:1px solid transparent;background-color:var(--color-primary);color:var(--color-gray-700);font-size:1rem;font-weight:700;text-transform:uppercase;width:100%;text-align:center;cursor:pointer;padding:1rem 0;margin-top:1.5rem}.button-primary:hover{border:1px solid var(--color-primary);background-color:var(--color-gray-700);color:var(--color-primary)}.disabled{opacity:.7;pointer-events:none}.strength{color:#eaeaea;display:flex;gap:8px;align-items:center}.strength p{margin:0}.strength-items-wrapper{display:flex;gap:8px}.strength-item{width:8px;height:1.4rem;border:1px solid currentColor}.strength-item.medium{background-color:orange}.strength-item.high{background-color:#9acd32}.strength-item.low{background-color:red}