.filter__sentinel{height:1px;display:block}.filter__bar{z-index:5;align-items:center;gap:var(--space-2) var(--space-3);padding-block:var(--space-2);background:var(--paper);box-shadow:0 1px 0 var(--line-strong), 0 8px 18px -14px transparent;clip-path:inset(0 -.75rem -2rem);transition:box-shadow var(--dur) var(--ease-out);flex-wrap:wrap;display:flex;position:sticky;top:0}.filter.is-stuck .filter__bar{box-shadow:0 1px 0 var(--line-strong), 0 8px 18px -10px light-dark(oklch(20% .045 var(--accent-h) / .18),oklch(0% 0 0/.5))}.filter__field{border:1px solid var(--line-strong);background:var(--surface);min-width:0;transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);border-radius:999px;flex:18rem;align-items:center;gap:.7ch;padding:.55em .6em .55em .95em;display:flex}.filter__field:hover{border-color:var(--accent-ghost)}.filter__field:has(.filter__input:focus-visible),.filter__field:has(.filter__input:focus){border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.filter__icon{width:1.05em;height:1.05em;color:var(--ink-faint);transition:color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);flex:none}.filter__field:has(.filter__input:focus) .filter__icon,.filter[data-state=matches] .filter__icon{color:var(--accent);transform:scale(1.08)}.filter[data-state=empty] .filter__field .filter__icon{color:var(--ink-faint);transform:none}.filter__input{min-width:0;font-size:var(--step--1);color:var(--ink);appearance:none;background:0 0;border:0;outline:0;flex:auto}.filter__input::placeholder{color:var(--ink-faint);transition:color var(--dur) var(--ease-out)}.filter__field:has(.filter__input:focus) .filter__input::placeholder{color:color-mix(in oklch, var(--ink-faint) 55%, transparent)}.filter__input::-webkit-search-cancel-button{appearance:none;display:none}.filter__input::-webkit-search-decoration{appearance:none;display:none}.filter__end{flex:none;width:1.85em;height:1.85em;position:relative}.filter__key,.filter__clear{transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);border-radius:999px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.filter__key{font-family:var(--font-mono);font-size:var(--step--2);color:var(--ink-faint);border:1px solid var(--line);background:var(--surface-sunk);font-weight:600;line-height:1}.filter__clear{border:1px solid var(--line);background:var(--surface);color:var(--ink-faint);cursor:pointer;opacity:0;visibility:hidden;padding:0;transform:scale(.6)rotate(-90deg)}.filter__clear svg{width:.72em;height:.72em;display:block}.filter__clear:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}.filter[data-has-query=true] .filter__clear{opacity:1;visibility:visible;transform:none}.filter[data-has-query=true] .filter__key,.filter__field:has(.filter__input:focus) .filter__key{opacity:0;visibility:hidden;transform:scale(.8)}@media (hover:none){.filter__key{display:none}}.filter__count{font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--ink-faint);white-space:nowrap;transition:color var(--dur) var(--ease-out);flex:none;margin-left:auto;font-weight:600}.filter[data-state=matches] .filter__count{color:var(--accent-ink)}.filter .listing .book.is-filtered-out,.filter[data-state=empty] .listing{display:none}.filter__empty{align-items:flex-start;gap:var(--space-2);padding:var(--space-4) var(--space-3);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);opacity:0;transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), display var(--dur) allow-discrete;flex-direction:column;display:none;transform:translateY(10px)}.filter[data-state=empty] .filter__empty{opacity:1;display:flex;transform:none}@starting-style{.filter[data-state=empty] .filter__empty{opacity:0;transform:translateY(10px)}}.filter__empty-head{font-family:var(--font-display);font-size:var(--step-1);letter-spacing:-.03em;color:var(--ink);font-weight:800}.filter__empty-body{font-size:var(--step--1);color:var(--ink-soft)}.filter__empty-body strong{color:var(--ink)}