/* Hover states. The design tool compiles each element's style-hover attribute into one of these classes;
   the canonical HTML carries the matching hv-* class on the element. Lifted verbatim from the rendered export.
   Wrap in @media (hover:hover) and (pointer:fine) in the build if touch devices show sticky hover states — that is the
   ONLY permitted change to this file. */
@media (hover: hover) and (pointer: fine) {
.hv-0:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: var(--on-ink-mut) !important; }
.hv-1:hover { transform: translateY(-2px) !important; box-shadow: rgba(237, 171, 78, 0.5) 0px 16px 40px !important; }
.hv-2:hover { background: rgba(255, 255, 255, 0.13) !important; }
.hv-3:hover { background: rgba(255, 255, 255, 0.07) !important; }
.hv-4:hover { transform: translateY(-3px) !important; }
.hv-5:hover { transform: scale(1.03) !important; }
.hv-6:hover { transform: translateY(-3px) !important; border-color: var(--ink-hair-2) !important; }
.hv-7:hover { background: var(--ink-750) !important; }
.hv-8:hover { transform: translateY(-2px) !important; }
.hv-9:hover { transform: scale(1.05) !important; }
.hv-a:hover { opacity: 1 !important; }
.hv-b:hover { border-color: var(--viz-3) !important; color: rgb(255, 255, 255) !important; }
.hv-c:hover { transform: translateY(-4px) !important; border-color: var(--ink-hair-2) !important; }
.hv-d:hover { background: rgba(200, 98, 180, 0.08) !important; }
.hv-e:hover { background: linear-gradient(135deg,var(--amber-500),var(--amber-600)) !important; }
.hv-f:hover { color: var(--magenta-400) !important; }
.hv-g:hover { color: rgb(255, 255, 255) !important; border-color: var(--ink-hair-2) !important; }
.hv-h:hover { border-color: var(--magenta-400) !important; }

}