.sf{display:flex;align-items:center;gap:.5rem;height:2.5rem;padding:0 .65rem;border:1px solid var(--rule);background:var(--bg);transition:border-color 120ms ease-out}
.sf:focus-within{border-color:var(--muted)}
.demo .sf input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;outline:0}
.sf input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
.sf kbd{flex:none;padding:.05rem .35rem;border:1px solid var(--rule);color:var(--muted);font:inherit;font-size:.85em}
.sf.is-hidden kbd{display:none}
.sf.is-fade input{--mask:linear-gradient(to right,transparent,#000 var(--start,0px),#000 calc(100% - var(--end,0px)),transparent);-webkit-mask-image:var(--mask);mask-image:var(--mask)}