/* personalization + editor styles (module 2) */

/* --------------------------------------------------------------------------
 * Personal additions: keyboard focus visibility
 * Rest state is unchanged; rings only appear for keyboard focus.
 * ----------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ink, #1a1a1a);
  outline-offset: 3px;
}
 .tab:focus-visible { outline-offset: 5px; border-radius: 2px; }


/* --------------------------------------------------------------------------
 * Fast first paint: show one atlas frame immediately (~18 KB), then swap in
 * the full 240-frame atlas after the page is interactive.
 * ----------------------------------------------------------------------- */
.hero-dog-sprite {
  background-image: url(../assets/hero/dog-turn/dog-look-angle-start.webp);
  background-size: 100% 100%;
  background-position: 0 0;
}
html.dog-atlas-ready .hero-dog-sprite {
  background-image: url(../assets/hero/dog-turn/dog-look-angle-atlas.webp);
  background-size: 1600% 1500%;
  background-position: 86.667% 64.286%;
}