/* Lesson A4 hook simulator. Scoped to .lab--hook-simulator. */
.lab--hook-simulator .lab-hook__wide { grid-column: 1 / -1; }
.lab--hook-simulator .lab-hook__wide .lab__toggle { margin-top: var(--s-2); }
.lab--hook-simulator .lab-hook__hold { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.lab--hook-simulator .lab-hook__hold > span:last-child { position: relative; }
.lab--hook-simulator .lab-hook__bar { position: absolute; inset: auto 0 0 0; height: 3px; background: var(--paper); transform: scaleX(0); transform-origin: left; }
.lab--hook-simulator .lab-hook__hold.is-holding .lab-hook__bar { transform: scaleX(1); transition: transform 1500ms linear; }
.lab--hook-simulator .lab-hook__danger { fill: var(--danger); }
.lab--hook-simulator .lab__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lab--hook-simulator .lab-hook__hold.is-holding .lab-hook__bar { transition: none; } }
.lab--hook-simulator .lab__svg { max-width: 560px; }
.lab--hook-simulator .lab-svg-label { font-size: 14px; }
.lab--hook-simulator .lab-svg-label--ink { font-size: 15px; }