input[type=checkbox]{--tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");-moz-appearance:none;appearance:none;-webkit-appearance:none;flex:0 0 auto;display:grid;place-items:center;width:1.3rem;height:1.3rem;margin:.1rem 0 0;border-radius:.55rem;border:1.5px solid var(--border-strong);background:var(--surface-strong);cursor:pointer;transition:border-color var(--speed) var(--ease-out),background var(--speed) var(--ease-out),box-shadow var(--speed) var(--ease-out),transform var(--speed-fast) var(--ease-out)}input[type=checkbox]:before{content:"";width:.85rem;height:.85rem;background-color:#fff;-webkit-mask:var(--tick) center / contain no-repeat;mask:var(--tick) center / contain no-repeat;transform:scale(.3) rotate(-12deg);opacity:0;transition:transform var(--speed) var(--ease-spring),opacity var(--speed-fast) var(--ease-out)}label:hover>input[type=checkbox]:not(:checked){border-color:var(--brand-primary)}input[type=checkbox]:checked{border-color:transparent;background:var(--gradient-brand);box-shadow:0 5px 14px -5px color-mix(in oklab,var(--brand-primary) 65%,transparent)}input[type=checkbox]:checked:before{transform:scale(1) rotate(0);opacity:1}input[type=checkbox]:active{transform:scale(.9)}input[type=checkbox]:focus-visible{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--brand-primary) 25%,transparent)}@media(prefers-reduced-motion:reduce){input[type=checkbox],input[type=checkbox]:before{transition:none}}.password{position:relative;display:block}.password .input{padding-right:3rem}.password__toggle{position:absolute;top:50%;right:.45rem;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-xs);color:var(--text-subtle);transition:color var(--speed-fast) var(--ease-out),background-color var(--speed-fast) var(--ease-out)}.password__toggle:hover{color:var(--text);background:var(--surface-sunken)}.password__toggle .icon-eye-off{display:none}.password__toggle[aria-pressed=true] .icon-eye-off{display:block}.password__toggle[aria-pressed=true] .icon-eye{display:none}
