:root{--primary-font: "JetBrains Mono";--primary: #e6e5ea;--secondary: #817d92;--tertiary: #54535b;--quaternary: #18171f;--quinary: #a4ffaf;--senary: white;--primary-background: #08070b;--secondary-background: #08070b;--tertiary-background: #24232c;--quaternary-background: #18171f;--quinary-background: #a4ffaf;--senary-background: #e6e5ea;--outer-inline-padding: 1rem;--max-form-width: 33.75rem;--form-gap: 1rem;--form-block-padding: 1rem;--form-inline-padding: 1rem;--form-prepare-gap: 1rem;--title-size: 1rem;--title-line-height: calc(20/16);--form-size: 1rem;--form-line-height: calc(20/16);--password-size: 1.5rem;--password-line-height: calc(32/24);--password-block-padding: 1rem;--copy-size: 1rem;--copy-line-height: calc(20/16);--copy-gap: 0.5rem;--character-length-size: 1.5rem;--character-length-line-height: calc(32/24);--range-gap: 0.5rem;--range-track-height: 0.5rem;--range-thumb-size: 1.75rem;--range-thumb-border-radius: 50%;--checkbox-list-block-margin-start: 2rem;--checkbox-list-block-margin-end: 1rem;--checkbox-gap: 1rem;--checkbox-border-width: 0.125rem;--checkbox-size: 1.25rem;--strength-size: 1.125rem;--strength-block-padding: 0.875rem;--strength-inline-padding: 1rem;--strength-gap: 1rem;--submit-button-gap: 1rem;--submit-button-padding: 1rem;--submit-button-padding-hover: 0.875rem;--submit-button-border-width: 0.125rem}@media(width >= 35.75em){:root{--form-gap: 1.5rem;--form-block-padding: 1.5rem;--form-inline-padding: 2rem;--form-prepare-gap: 2rem;--title-size: 1.5rem;--title-line-height: calc(32/24);--form-size: 1.125rem;--form-line-height: calc(24/18);--password-size: 2rem;--password-line-height: calc(42/32);--copy-size: 1.125rem;--copy-line-height: calc(24/18);--copy-gap: 1rem;--character-length-size: 2rem;--character-length-line-height: calc(42/32);--range-gap: 1rem;--checkbox-gap: 1.5rem;--strength-size: 1.5rem;--submit-button-gap: 1.5rem}}body,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,pre,blockquote,figure,figcaption,form,fieldset,legend,input,select,textarea,button{padding:0;margin:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6,pre{font-size:1rem}pre{white-space:pre-wrap}table{border-collapse:collapse;border-spacing:0}address{font-style:normal}fieldset,legend,img,abbr,acronym{border:none}legend{white-space:normal}input,select,textarea,button,img{vertical-align:middle}input,select,textarea,button,code,kbd,samp,var{font-size:inherit}input,select,textarea,button{font-family:inherit;border:1px solid}input,select,textarea{border-radius:0}input[type=checkbox],input[type=radio],input[type=submit],input[type=reset],input[type=button]{cursor:pointer}button,details summary{cursor:pointer}input[type=checkbox],input[type=radio]{border:none}input[type=search]{appearance:none}input[type=submit],input[type=reset]{appearance:none}input::placeholder{color:inherit;opacity:1}input[disabled],button[disabled]{cursor:default}button{background:rgba(0,0,0,0)}button:focus-visible{outline:thin dotted}img,object,audio,video,embed,svg{max-width:100%;height:auto}abbr[title]{text-decoration:none}::selection{color:#000;background-color:#add8e6;text-shadow:none}@media print{*{color:#000 !important;background-color:rgba(0,0,0,0) !important;background-image:none !important}}@media print{h1,h2,h3,h4,h5,h6{page-break-after:avoid}}@media print{img,object,audio,video,embed,svg{page-break-inside:avoid}}.sr-only{width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(1px);position:absolute}@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-VariableFont_wght.woff2") format(woff2);font-weight:400 800;font-style:normal;font-display:swap}@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-Italic-VariableFont_wght.woff2") format(woff2);font-weight:400 800;font-style:italic;font-display:swap}body{font-family:var(--primary-font),monospace;font-weight:bold}h1{font-size:var(--title-size);line-height:var(--title-line-height);text-align:center}body{color:var(--primary);background:linear-gradient(to right, var(--primary-background), var(--secondary-background));display:flex;min-block-size:100dvb;padding-inline:var(--outer-inline-padding);flex-direction:column}main{inline-size:min(var(--max-form-width),100%);margin:auto}h1{color:var(--secondary);margin-block-end:var(--form-gap)}#password-generator{font-size:var(--form-size);line-height:var(--form-line-height);display:flex;flex-direction:column;gap:var(--form-gap)}#password-generator>p,#password-generator .prepare{background:var(--tertiary-background);padding:var(--form-inline-padding)}#password-generator>p{order:-1;position:relative}#password-generator>p button{font-size:var(--copy-size);line-height:var(--copy-line-height);text-transform:uppercase;color:var(--quinary);background:inherit;display:inline-flex;gap:var(--copy-gap);align-items:center;border:none;position:absolute;inset-block-start:50%;inset-inline-end:var(--form-inline-padding);transform:translateY(-50%)}#password-generator>p button path{fill:var(--quinary);transition:fill 250ms ease-in}#password-generator>p button:hover path,#password-generator>p button:focus path{fill:var(--senary)}#password-generator ul{list-style:none}#password-generator li{display:flex;margin-block-end:var(--checkbox-list-block-margin-end)}#password-generator li:has(input[type=range]){flex-direction:column;gap:var(--range-gap);margin-block-end:var(--checkbox-list-block-margin-start)}#password-generator li:has(input[type=range]) label{display:inline-flex;justify-content:space-between;align-items:center}#password-generator li:has(input[type=checkbox]){gap:var(--checkbox-gap);align-items:center}#password-generator input,#password-generator button{font-weight:inherit;border:none}#password-generator input[type=checkbox],#password-generator input[type=range]{appearance:none}#password-generator input[type=checkbox]{width:var(--checkbox-size);height:var(--checkbox-size);border:var(--checkbox-border-width) solid var(--primary);transition:250ms ease-in;transition-property:border-color,background-color}#password-generator input[type=checkbox]:hover,#password-generator input[type=checkbox]:focus,#password-generator input[type=checkbox]:checked{border-color:var(--quinary)}#password-generator input[type=checkbox]:checked{background:var(--quinary) url("images/check.svg") no-repeat center}#password-generator input[type=range]{--offset: calc(100% * var(--value) / var(--max));background:initial;cursor:pointer;position:relative}#password-generator input[type=range]::-moz-range-track,#password-generator input[type=range]::-moz-range-progress{block-size:var(--range-track-height)}#password-generator input[type=range]::-webkit-slider-runnable-track{block-size:var(--range-track-height)}#password-generator input[type=range]::-moz-range-track{background:var(--quaternary-background)}#password-generator input[type=range]::-moz-range-progress{background:var(--quinary-background)}#password-generator input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--quinary-background) var(--offset, 0%), var(--quaternary-background) var(--offset, 0%))}#password-generator input[type=range]::-moz-range-thumb{background:var(--senary-background);width:var(--range-thumb-size);height:var(--range-thumb-size);border:none;border-radius:var(--range-thumb-border-radius);transition:background 250ms ease-in}#password-generator input[type=range]::-webkit-slider-thumb{background:var(--senary-background);width:var(--range-thumb-size);height:var(--range-thumb-size);border:none;border-radius:var(--range-thumb-border-radius);transition:background 250ms ease-in;appearance:none;margin-block-start:calc((var(--range-track-height) - var(--range-thumb-size))/2)}#password-generator input[type=range]:hover::-moz-range-thumb,#password-generator input[type=range]:focus::-moz-range-thumb{background:var(--quaternary-background);outline:2px solid var(--quinary-background)}#password-generator input[type=range]:hover::-webkit-slider-thumb,#password-generator input[type=range]:focus::-webkit-slider-thumb{background:var(--quaternary-background);outline:2px solid var(--quinary-background)}#password-generator input[readonly]{font-size:var(--password-size);line-height:var(--password-line-height);color:inherit;background:rgba(0,0,0,0);width:100%}#password-generator input::placeholder{color:var(--tertiary)}#password-generator button[type=submit]{text-transform:uppercase;color:var(--quaternary);background:var(--quinary-background);padding:var(--submit-button-padding);box-sizing:border-box;transition:250ms ease-in;transition-property:color,background}#password-generator button[type=submit]::after{background:url("images/icon-arrow.svg") no-repeat;display:inline-block;width:12px;height:12px;margin-inline-start:var(--submit-button-gap);content:"";transition:background-position-y 250ms ease-in}#password-generator button[type=submit]:hover,#password-generator button[type=submit]:focus{color:var(--quinary);background:rgba(0,0,0,0);padding:var(--submit-button-padding-hover);border:var(--submit-button-border-width) solid var(--quinary)}#password-generator button[type=submit]:hover::after,#password-generator button[type=submit]:focus::after{background-position-y:-12px}#password-generator .prepare{display:flex;flex-direction:column;gap:var(--form-prepare-gap)}#password-generator .prepare p:last-of-type{display:inline-flex;flex-direction:column;order:1}#password-generator .strength{text-transform:uppercase;color:var(--secondary);background:var(--quaternary-background);padding:var(--strength-block-padding) var(--strength-inline-padding);display:flex;justify-content:space-between;align-items:center}#password-generator .strength:has([class^=level]){align-items:baseline}#password-generator .strength dd{font-size:var(--strength-size);line-height:1;color:var(--primary);display:inline-flex;gap:var(--strength-gap);align-items:center}#password-generator .strength dd::after{background:url("images/strength-levels.svg") no-repeat;display:inline-block;width:64px;height:28px;content:""}#password-generator .strength dd.level-too-weak::after{background-position-y:-28px}#password-generator .strength dd.level-weak::after{background-position-y:-56px}#password-generator .strength dd.level-medium::after{background-position-y:-84px}#password-generator .strength dd.level-strong::after{background-position-y:-112px}#password-generator .character-length-number{font-size:var(--character-length-size);line-height:var(--character-length-line-height);color:var(--quinary)}@media(width >= 35.75em){#password-generator>p{padding-block:var(--password-block-padding)}#password-generator .prepare{padding-block:var(--form-block-padding)}}