@layer components{.filter-input{font-family:var(--font-sans);font-size:.625rem;font-weight:500;line-height:1.5;color:rgba(0,0,0,.8);background-color:rgba(0,0,0,0);border:.4px solid rgba(0,0,0,.5);border-radius:var(--radius-full);padding:.3rem .625rem;width:100%;min-width:0;max-width:3.5rem;text-align:center;appearance:textfield;transition:border-color .15s ease}html.dark .filter-input{color:#fff;border-color:hsla(0,0%,100%,.5)}.filter-input:focus{outline:none;border-color:var(--color-accent)}.filter-input::placeholder{color:var(--color-text-muted);font-weight:600}.filter-input::-webkit-inner-spin-button,.filter-input::-webkit-outer-spin-button{appearance:none;margin:0}@media(width >= 48rem){.filter-input{padding:.4rem 1rem;border:.6px solid rgba(0,0,0,.5);font-size:.875rem}}.filter-input__label{position:absolute;inset-inline-start:50%;inset-block-start:0;transform:translate(-50%, -50%);padding-inline:.3rem;color:#91a0b9;background:var(--color-surface);font-size:9px;font-weight:500;line-height:1;white-space:nowrap;pointer-events:none}@media(width >= 48rem){.filter-input__label{padding-inline:.35rem}}}