html { color-scheme: dark; }
  body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  .aura { background: radial-gradient(58% 46% at 50% 0%, rgba(2,132,199,.16) 0%, rgba(2,132,199,0) 72%); }

  .no-scroll { overflow: hidden; }
  :focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }
  ::selection { background: #0284c7; color: #ffffff; }
  .vial { filter: drop-shadow(0 14px 16px rgba(0,0,0,.55)); transition: filter .35s ease; }
  /* The frame now hugs the art, so the hover cue lifts brightness rather than
     scaling — a transform would be clipped by the frame edge. */
  article:hover .vial { filter: drop-shadow(0 14px 16px rgba(0,0,0,.55)) brightness(1.12); }
  @keyframes drop { 0% { opacity:0; transform: translateY(-22px) scale(.85); } 60% { opacity:1; transform: translateY(4px) scale(1.04); } 100% { opacity:1; transform: translateY(0) scale(1); } }
  @keyframes fade { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }
  @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(2,132,199,.45); } 100% { box-shadow: 0 0 0 12px rgba(2,132,199,0); } }
  .drop { animation: drop .42s cubic-bezier(.34,1.56,.64,1) both; }
  .fade { animation: fade .3s ease-out both; }
  .ping { animation: pulseRing .55s ease-out; }
  /* Footer links are buttons so they can drive the router, but they should
     read and behave like links. */
  .foot-link { color: inherit; text-align: left; transition: color .15s ease; }
  .foot-link:hover { color: #ffffff; }
  @media (prefers-reduced-motion: reduce) {
    .drop, .fade, .ping { animation: none; }
    .vial, article:hover .vial { transition: none; }
    html { scroll-behavior: auto; }
  }