.pwm .meter{gap:5px;margin:10px 0 6px;display:flex}.pwm .meter i{background:var(--line);border-radius:999px;flex:1;height:6px;transition:background .3s}.pwm .meter[data-s="1"] i:nth-child(-n+1){background:var(--bad)}.pwm .meter[data-s="2"] i:nth-child(-n+2){background:var(--warn)}.pwm .meter[data-s="3"] i:nth-child(-n+3),.pwm .meter[data-s="4"] i{background:var(--accent)}.pwm .rules{grid-template-columns:1fr 1fr;gap:6px 14px;margin:8px 0 4px;display:grid}.pwm .rules span,.pwm-match{color:var(--ink-2);align-items:center;gap:7px;font-size:12.5px;transition:color .25s;display:flex}.pwm .rules span:before,.pwm-match:before{content:"";border:2px solid var(--line);border-radius:50%;flex-shrink:0;width:14px;height:14px;transition:all .25s}.pwm .rules span.ok,.pwm-match.ok{color:var(--ink)}.pwm .rules span.ok:before,.pwm-match.ok:before{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/9px no-repeat;border-color:var(--accent)}.pwm-match{margin-top:6px}.pw-wrap{position:relative}.pw-wrap .pw-eye{color:var(--ink-2);cursor:pointer;background:0 0;border:0;border-radius:7px;place-items:center;padding:6px;transition:background .2s;display:grid;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.pw-wrap .pw-eye:hover{background:var(--surface-2)}.pw-wrap .pw-eye svg{width:18px;height:18px;position:static;transform:none}.pw-wrap .input{padding-right:42px}.code-input{letter-spacing:.4em;font-variant-numeric:tabular-nums;text-align:center;font-size:20px;font-family:var(--f-display);font-weight:700}@media (max-width:420px){.pwm .rules{grid-template-columns:1fr}}