/* ==========================================================================
   Generated hover and focus states
   Produced by tools/port_design.py from the Claude Design bundles.
   Do not edit by hand — rerun the porter instead.

   !important is required because the source markup carries inline styles,
   which would otherwise always beat a class selector.
   ========================================================================== */

.sf1:focus-visible { left:22px !important; }
.sh2:hover { color:#F4F6F5 !important; background-size:calc(100% - 16px) 1px !important; }
.sh3:hover { border-color:rgba(255,255,255,.55) !important; color:#F4F6F5 !important; }
.sh4:hover { background:#13C0B1 !important; }
.sh5:hover { background-size:100% 1px !important; }
.sh6:hover { transform:translateY(-4px) !important; border-color:rgba(13,168,155,.75) !important; }
.sh7:hover { color:#8FE6DA !important; }
.sh8:hover { transform:translateY(-4px) !important; border-color:rgba(13,168,155,.4) !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}