:root{font-family:Arial,Helvetica,sans-serif;color:#111;background:#f8f9fa;font-synthesis:none;--red:#d90b3d;--green:#326c40;--orange:#a94b00;--panel:#dfefdf}*{box-sizing:border-box}body{margin:0}main{max-width:1040px;margin:0 auto;padding:52px 28px 32px}header{text-align:center;margin-bottom:36px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:#565c60;margin:0 0 14px}h1{font-size:44px;line-height:1.18;font-weight:600;letter-spacing:-1.2px;margin:0 0 20px}.intro{font-size:20px;line-height:1.5;margin:0;color:#42474b}.password-box{display:flex;align-items:center;gap:16px;border:1px solid #777;border-radius:8px;background:#fff;padding:24px;min-height:104px}#password{min-width:0;flex:1;border:0;background:transparent;color:#111;font-family:Arial,Helvetica,sans-serif;font-size:27px;padding:8px 0;line-height:1.4}.actions{display:flex;align-items:center;gap:14px}button{font:700 15px Arial,sans-serif;cursor:pointer;min-height:44px;border-radius:8px}.copy{border:0;background:var(--red);color:white;padding:0 20px;white-space:nowrap}.copy:hover{background:#b80732}.refresh{display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:0;color:#62696b;width:44px}.refresh:hover{background:#f0f2f2}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mobile-label{display:none}.strength-row{display:flex;align-items:center;gap:20px;margin:12px 0 28px;min-height:20px}.meter{height:8px;border-radius:20px;background:#dfe1e2;flex:1;overflow:hidden}.meter span{display:block;height:100%;border-radius:20px;width:0;background:#dfe1e2;transition:width .15s ease}.strength-label{min-width:78px;font-size:14px;font-weight:700;text-align:right}.settings{background:var(--panel);border-radius:8px;position:relative;padding:32px;display:grid;gap:28px}.settings:before{content:"";position:absolute;top:-16px;left:calc(50% - 16px);border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--panel)}.length-row{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:24px}.length-row label,legend{font-size:15px;font-weight:700}output{margin-left:4px}input[type=range]{appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(to right,#111 0%,#111 var(--progress,17.24%),#98a99b var(--progress,17.24%),#98a99b 100%)}input[type=range]::-webkit-slider-thumb{appearance:none;background:#fff;border:1px solid #d9e0db;border-radius:50%;width:32px;height:32px;margin-top:-12px;box-shadow:0 2px 3px #0002}input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:#98a99b}input[type=range]::-moz-range-progress{height:8px;background:#111}input[type=range]::-moz-range-thumb{background:#fff;border:1px solid #d9e0db;border-radius:50%;width:32px;height:32px;box-shadow:0 2px 3px #0002}fieldset{border:0;margin:0;padding:0;display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;min-width:0}legend{float:left;width:200px;padding:14px 0}.categories{display:flex;gap:18px;flex-wrap:wrap}.categories label{display:flex;align-items:center;gap:7px;min-height:44px;font-size:15px;cursor:pointer;white-space:nowrap}.categories input{width:20px;height:20px;margin:0;accent-color:#111;cursor:pointer}.validation{margin:0;color:#9b1331;font-size:14px;line-height:1.5}.feedback{min-height:22px;margin:12px 0 0;font-size:14px;color:#42474b}footer{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:20px;font-size:13px;color:#5a6264}footer svg{width:18px;height:18px;flex:none}:focus-visible{outline:3px solid #005fcc;outline-offset:4px}#password:focus-visible{outline-offset:3px}button:disabled{opacity:.5;cursor:not-allowed}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@media(max-width:760px){main{padding:32px 20px}h1{font-size:34px}.intro{font-size:18px}.length-row,fieldset{grid-template-columns:160px minmax(0,1fr);gap:16px}legend{width:160px}.categories{gap:8px 16px}.settings{padding:24px}.password-box{padding:18px;gap:8px}#password{font-size:23px}.actions{gap:4px}.copy{padding:0 15px}}@media(max-width:540px){main{padding:28px 16px}header{margin-bottom:28px}h1{font-size:31px;letter-spacing:-.7px}.desktop-break{display:none}.intro{font-size:16px}.eyebrow{font-size:11px}.password-box{flex-wrap:wrap;padding:16px}#password{flex-basis:100%;width:100%;font-size:24px}.actions{width:100%;justify-content:space-between;gap:12px}.refresh{width:auto;padding:0 12px;background:#f2f4f4;font-size:14px}.mobile-label{display:inline}.copy{flex:1}.strength-row{gap:12px;margin-bottom:26px}.settings{padding:22px 20px;gap:16px}.length-row,fieldset{display:block}.length-row label{display:block;margin-bottom:8px}legend{float:none;width:auto;padding:0 0 10px}.categories{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.categories label{font-size:14px}footer{align-items:flex-start;line-height:1.5;text-align:left;margin-top:16px}}@media(prefers-reduced-motion:reduce){.meter span{transition:none}}
/* Keep the fieldset legend in the left label column across browser engines. */
fieldset{display:block}fieldset .categories{margin-left:224px}
@media(max-width:760px){fieldset .categories{margin-left:176px}}
@media(max-width:540px){fieldset .categories{margin-left:0}}