/* Task lessons share geometry, palette and canonical timing with Better Help. */
.lesson svg { display: block; }
.lesson .scene { width: 340px; height: 250px; }
.lesson .line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lesson .card { fill: var(--card); stroke: var(--ink-faint); stroke-width: 1.2; }
.lesson .surface { fill: var(--face); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.lesson .shade { fill: var(--face-shade); }
.lesson .wash { fill: var(--ink-wash); }
.lesson .accent { fill: color-mix(in srgb, var(--accent) 16%, var(--card)); stroke: var(--accent); stroke-width: 1.5; }
.lesson .selection { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 4; }
.lesson .soft { fill: var(--ink-soft); }
.lesson .dark { fill: var(--ink); }
.lesson .new { animation: lessonReveal var(--loop-duration) var(--loop-ease) infinite; }
.lesson .old { animation: lessonBefore var(--loop-duration) var(--loop-ease) infinite; }
.lesson .travel { animation: lessonTravel var(--loop-duration) var(--loop-ease) infinite; }
.lesson .pulse { animation: lessonPulse var(--loop-duration) var(--loop-ease) infinite; }
.lesson .gesture { position: absolute; animation: lessonTap var(--loop-duration) var(--loop-ease) infinite; }
.lesson .gesture .touch { left: -13px; top: -13px; }
.lesson .gesture .pencil { left: -17px; top: -40px; }
.lesson .gesture .keyboard { left: -2px; top: -2px; }
@keyframes lessonReveal { 0%, 14% { opacity: 0; } 52%, 64% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes lessonBefore { 0%, 14% { opacity: 1; } 52%, 64% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes lessonTravel { 0%, 14% { transform: translate(0, 0); } 52%, 64% { transform: translate(var(--travel-x), var(--travel-y)); } 96%, 100% { transform: translate(0, 0); } }
@keyframes lessonPulse { 0%, 14% { opacity: .25; } 52%, 64% { opacity: .8; } 96%, 100% { opacity: .25; } }
@keyframes lessonTap { 0%, 8% { opacity: 0; transform: scale(1.2); } 14% { opacity: 1; transform: scale(1); } 52%, 64% { opacity: .5; transform: scale(.85); } 70%, 96%, 100% { opacity: 0; transform: scale(1.2); } }