/* One dim accent for the whole site. It never colors text: the line on the active step, hover
   borders, focus rings, link underlines and a faint tint in the photo behind each demo. The slider stays white. */
:root { --ac: #7f8296; }

.step.active { box-shadow: inset 2px 0 0 var(--ac); }

.frame::after {
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.15), rgba(10, 10, 10, 0.6)),
    linear-gradient(color-mix(in srgb, var(--ac) 14%, transparent), color-mix(in srgb, var(--ac) 14%, transparent));
}

/* The guide inside the demos */
.coach { box-shadow: inset 2px 0 0 var(--ac), 0 14px 40px rgba(0, 0, 0, 0.5); }
@keyframes coach-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 40%, transparent); } }

/* Other non-text touches */
.btn:hover { border-color: var(--ac); }
a:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 1.5px solid var(--ac); outline-offset: 3px; }
.download-help a, .install-guide a { text-decoration-color: var(--ac); }
.install-flag:hover { box-shadow: inset 2px 0 0 var(--ac); }