.note-filters { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px; width:100%; max-width:1180px; box-sizing:border-box; margin:24px auto 0; padding:0 32px; }
.note-filters a { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-height:40px; box-sizing:border-box; white-space:nowrap; line-height:1.4; }
.note-filters[hidden] { display:none; }
.note-filters a,.note-category-editor button { border:1px solid var(--line,#555); border-radius:24px; padding:10px 15px; color:var(--dim,#aaa); background:transparent; font:inherit; font-size:13px; text-decoration:none; cursor:pointer; }
.note-filters a[aria-current],.note-category-editor button[aria-pressed="true"] { background:var(--fg,#eee); border-color:var(--fg,#eee); color:var(--bg,#111); }
.note-filters a:focus-visible,.note-category-editor button:focus-visible,.note-topic:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.note-category-editor { border:0; padding:0; margin:12px 0; display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.note-category-editor legend { font-size:12px; margin-bottom:10px; }
.note-topic { color:var(--dim); text-decoration:none; font-size:12px; }
.story-heading .note-topic { display:inline-block; margin-bottom:12px; }
@media(max-width:760px) { .note-filters { margin:20px auto 0; padding-inline:20px; gap:8px; } .note-filters a { padding:10px 12px; font-size:12px; } }

.note-filters a,.note-category-editor button { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.note-icon { display:block; width:16px; height:16px; flex:0 0 16px; pointer-events:none; }

/* Keep selection legible; animate only categories that can be selected next. */
.note-filters a { position:relative;isolation:isolate;overflow:hidden;--note-hover-bg:color-mix(in srgb,var(--fg,#eee) 78%,var(--bg,#111));--note-hover-fg:var(--bg,#111);transition:border-color 340ms ease,background-color 220ms ease; }
.note-filters a::before { content:"";position:absolute;inset:0;z-index:-1;background:var(--note-hover-bg);transform:translateY(101%);transition:transform 340ms cubic-bezier(.25,.7,.25,1); }
.note-fade { display:block;width:100%; }
.note-words { display:grid;text-align:center; }
.note-words>span { grid-area:1 / 1; }
.note-word { opacity:0;color:var(--note-hover-fg); }
.note-word-original { display:flex;align-items:center;justify-content:center;gap:7px;transition:transform 340ms cubic-bezier(.25,.7,.25,1); }
@keyframes note-word-cycle {
 0% { opacity:0;transform:translateY(5px); }
 5%,27% { opacity:1;transform:translateY(0); }
 33.333%,100% { opacity:0;transform:translateY(-4px); }
}
.note-filters a:not([aria-current]):focus-visible { border-color:var(--fg,#eee); }
.note-filters a:not([aria-current]):focus-visible::before { transform:translateY(0); }
.note-filters a:not([aria-current]):focus-visible .note-word-original { transform:translateY(calc(-100% - 14px)); }
.note-filters a:not([aria-current]):focus-visible .note-word { animation:note-word-cycle 4.8s linear var(--word-delay) infinite; }
@media(hover:hover) and (pointer:fine) {
.note-filters a:not([aria-current]):hover { border-color:var(--fg,#eee); }
.note-filters a:not([aria-current]):hover::before { transform:translateY(0); }
.note-filters a:not([aria-current]):hover .note-word-original { transform:translateY(calc(-100% - 14px)); }
.note-filters a:not([aria-current]):hover .note-word { animation:note-word-cycle 4.8s linear var(--word-delay) infinite; }
}
@media(prefers-reduced-motion:reduce) {
 .note-filters a,.note-filters a::before,.note-word-original { transition:none; }
 .note-filters a:not([aria-current]):is(:hover,:focus-visible) .note-word { animation:none; }
 .note-filters a:not([aria-current]):is(:hover,:focus-visible) .note-word-original { transform:none;color:var(--note-hover-fg); }
}


.note-filters a[aria-current] { box-shadow:inset 0 0 0 1px var(--fg,#eee); }