@keyframes hx-blip { 0%,100%{opacity:.3;transform:scale(.75)} 50%{opacity:1;transform:scale(1.1)} }
@keyframes hx-sweep { 0%{transform:translateX(-110%)} 100%{transform:translateX(310%)} }
@keyframes hx-breathe { 0%,100%{opacity:.28} 50%{opacity:.8} }
@keyframes hx-eq { 0%,100%{transform:scaleY(.22)} 50%{transform:scaleY(1)} }
@keyframes hx-caret { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes hx-hazard { 0%{background-position:0 0} 100%{background-position:34px 0} }
@keyframes hx-ring { 0%{transform:scale(.7);opacity:.9} 100%{transform:scale(1.5);opacity:0} }
@keyframes hx-scanline { 0%{left:-8%} 100%{left:108%} }
.hx-blip{animation:hx-blip 1.6s ease-in-out infinite}
.hx-sweep{animation:hx-sweep 9s linear infinite}
.hx-breathe{animation:hx-breathe 3.4s ease-in-out infinite}
.hx-eq{transform-origin:bottom;animation:hx-eq 1s ease-in-out infinite}
.hx-caret{animation:hx-caret 1.1s step-end infinite}
.hx-hazard{animation:hx-hazard 2.4s linear infinite}
.hx-ring{animation:hx-ring 2.6s ease-out infinite}
.hx-scanline{animation:hx-scanline 6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .hx-blip,.hx-sweep,.hx-breathe,.hx-eq,.hx-caret,.hx-hazard,.hx-ring,.hx-scanline{animation:none}
  .hx-breathe{opacity:.55}
  .hx-sweep,.hx-ring,.hx-scanline{display:none}
}
/* FOCUS MODE — collapse both rails so a gallery or a single component gets
   the full window. Toggled by the title bar (a data attribute on <html>), so
   no shell plumbing is needed and it survives navigation. */
html[data-focus-mode="1"] aside{display:none!important}