@font-face{font-family:JetBrainsMonoBold;src:url(/password-generator-app/assets/JetBrainsMono-VariableFont_wght-Db5mdcFk.ttf);font-weight:700}:root{--white:#fff;--black:#000;--grey-950:#08070b;--grey-900:#14132b;--grey-850:#18171f;--grey-800:#24232c;--grey-700:#54535b;--grey-600:#817d92;--grey-200:#e6e5ea;--green-200:#a4ffaf;--yellow-300:#f8cd65;--orange-400:#fb7c58;--red-500:#f64a4a;--spacing-100:8px;--spacing-200:16px;--spacing-300:24px;--spacing-400:32px;--spacing-700:56px;--spacing-1000:80px;--spacing-1300:104px;--spacing-1600:128px;--spacing-2000:160px;--spacing-2200:176px;--spacing-2300:184px}*,:before,:after,::placeholder{font-family:inherit;font-weight:inherit;box-sizing:border-box;margin:0;padding:0}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;font-family:JetBrainsMonoBold,monospace;font-size:100%;font-weight:700}body{background:linear-gradient(90deg,#14131b,#08070b);flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex}.large-text{font-size:1.5rem;line-height:1.3}.small-text{font-size:1rem;line-height:1.25}main{gap:var(--spacing-200);flex-direction:column;flex:1;width:100%;max-width:30rem;padding:clamp(1rem,1vw,10rem);display:flex}h1{color:var(--grey-600);text-align:center;width:100%;padding-top:var(--spacing-1000)}.password-wrapper{background-color:var(--grey-800);padding:var(--spacing-200);justify-content:space-between;align-items:center;display:flex}.password-field{color:var(--grey-700)}#password-display.active{color:var(--white)}.copy-button{cursor:pointer;align-items:center;gap:var(--spacing-100);background-color:#0000;border:none;padding:0;display:flex}.copied-label{color:var(--green-200);text-transform:uppercase;opacity:0;font-size:1rem;transition:opacity .15s}.copied-label.visible{opacity:1}.copy-button svg path{fill:var(--green-200);transition:fill .15s}.copy-button:hover svg path{fill:var(--white)}.controls{background-color:var(--grey-800);padding:clamp(1rem,2vw,1.5rem) clamp(1rem,3vw,2rem)}.slider-label{padding:var(--spacing-100) 0;justify-content:space-between;align-items:center;display:flex}.slider-label label{color:var(--white)}.char-length-output{color:var(--green-200)}input[type=range]{appearance:none;cursor:pointer;background:var(--grey-950);background-image:linear-gradient(var(--green-200));background-repeat:no-repeat;background-size:0% 100%;width:100%;height:8px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--white);border-radius:50%;width:28px;height:28px}fieldset{padding-top:var(--spacing-400);border:none}fieldset label{color:var(--grey-200);gap:var(--spacing-100);grid-template-columns:2rem auto;line-height:1.75;display:grid}input[type=checkbox]{appearance:none;margin:var(--spacing-100);color:currentColor;background-color:#0000;border:.15rem solid;width:1.25rem;height:1.25rem;position:relative;transform:translateY(-.25rem)}input[type=checkbox]:checked{background-color:var(--green-200);border-color:var(--green-200)}input[type=checkbox]:checked:after{content:"";background-image:url("data:image/svg+xml,%3csvg%20width='14'%20height='12'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20stroke='%2318171F'%20stroke-width='3'%20fill='none'%20d='M1%205.607%204.393%209l8-8'/%3e%3c/svg%3e");background-position:50%;background-repeat:no-repeat;background-size:contain;width:14px;height:12px;display:block;position:absolute;top:55%;left:55%;transform:translate(-50%,-50%)}.strength-wrapper{background-color:var(--grey-850);padding:var(--spacing-200);margin-top:var(--spacing-300);justify-content:space-between;align-items:center;display:flex}.strength-wrapper>p{color:var(--grey-600);text-transform:uppercase}.strength-scale{flex-direction:row;align-items:center;display:flex}.strength-scale>p{color:var(--white);text-transform:uppercase;padding-right:var(--spacing-200)}.strength-value{border:solid .15rem var(--white);width:10px;height:25px;margin:0 .15rem}.strength-value.too-weak{background-color:var(--red-500);border-color:var(--red-500)}.strength-value.weak{background-color:var(--orange-400);border-color:var(--orange-400)}.strength-value.medium{background-color:var(--yellow-300);border-color:var(--yellow-300)}.strength-value.strong{background-color:var(--green-200);border-color:var(--green-200)}#generate{background-color:var(--green-200);width:100%;padding:var(--spacing-200);margin-top:var(--spacing-200);color:var(--black);text-transform:uppercase;cursor:pointer;border:2px solid #0000;transition:background-color .15s,color .15s,border-color .15s}#generate:hover{color:var(--green-200);border-color:var(--green-200);background-color:#0000}.arrow-icon{background-color:var(--black);width:12px;height:12px;transition:background-color .15s;display:inline-block;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill='%2324232C'%20d='m5.106%2012%206-6-6-6-1.265%201.265%203.841%203.84H.001v1.79h7.681l-3.841%203.84z'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill='%2324232C'%20d='m5.106%2012%206-6-6-6-1.265%201.265%203.841%203.84H.001v1.79h7.681l-3.841%203.84z'/%3e%3c/svg%3e");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}#generate:hover .arrow-icon{background-color:var(--green-200)}@media (width>=768px){.large-text{font-size:2rem}.small-text{font-size:1.125rem}}