.director{background:#fff;border:1px solid #dce5df;border-radius:16px;padding:18px 22px;margin:0 0 27px;scroll-margin-top:18px}
.director-caption{display:flex;align-items:flex-start;gap:14px}.director-caption>div{flex:1}.director-caption strong{font-size:19px;line-height:1.5}.director-caption p{font-size:14px;line-height:1.7;color:#68756e;margin:5px 0 0}
#step-number{background:#176b55;color:white;border-radius:9px;padding:8px 10px;white-space:nowrap;font-size:13px}
#step-actor{font-size:11px;background:#eef4ef;color:#39715a;padding:7px 10px;border-radius:20px;white-space:nowrap}
.director-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #edf0eb;margin-top:15px;padding-top:12px;flex-wrap:wrap}
#step-track{display:flex;list-style:none;gap:14px;padding:0;margin:0;flex-wrap:wrap}#step-track li{display:flex;align-items:center;gap:5px;font-size:11px;color:#929c95}#step-track li span{display:grid;place-items:center;border:1px solid #d9e2db;width:21px;height:21px;border-radius:50%}#step-track .current{color:#176b55;font-weight:700}#step-track .current span,#step-track .done span{background:#176b55;color:white;border-color:#176b55}
.playback{display:flex;gap:7px;align-items:center;font-size:12px}.playback button,.playback select{font:inherit;padding:7px 9px;background:#f6f8f4;border:1px solid #dce4dc;border-radius:7px;color:#365947}.playback button:disabled{opacity:.4;cursor:default}.playback label{display:flex;gap:5px;align-items:center}.playback button:not(:disabled):hover{background:#e8f2eb}
.demo-focus-target{outline:3px solid #329575!important;outline-offset:4px;box-shadow:0 0 0 8px #32957518!important;transition:outline-color .25s}.demo-phone-active .screen{box-shadow:0 0 20px #176b5530}
.tap-marker{position:fixed;z-index:10000;width:38px;height:38px;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;background:#166b55a8;border:3px solid white;box-shadow:0 0 0 2px #176b55;animation:tap-in 1.4s both}.tap-marker i{position:absolute;inset:-5px;border:3px solid #269b79;border-radius:50%;animation:tap-wave 1.3s ease-out both}.tap-marker b{position:absolute;top:46px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#174d3c;color:white;font-size:12px;padding:5px 9px;border-radius:5px}
.signal-forward .connection-line:after,.signal-backward .connection-line:after{content:"";position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:#288866;box-shadow:0 0 0 5px #28886624;animation:signal-travel 1.2s ease-in-out both}.signal-backward .connection-line:after{animation-direction:reverse}
.timeline li:last-child{animation:event-arrival .6s ease-out}
@keyframes tap-in{0%{opacity:0;scale:.6}15%,75%{opacity:1;scale:1}100%{opacity:0;scale:1}}
@keyframes tap-wave{from{transform:scale(.7);opacity:1}to{transform:scale(2.3);opacity:0}}
@keyframes signal-travel{0%{left:0;opacity:0}15%,80%{opacity:1}100%{left:100%;opacity:0}}
@keyframes event-arrival{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:780px){.director{padding:15px}.director-caption{gap:9px;flex-wrap:wrap}.director-caption>div{min-width:70%}.director-caption strong{font-size:17px}#step-actor{margin-left:48px}.director-bottom{gap:15px}.playback{flex-wrap:wrap}#step-track{gap:9px}.signal-forward .connection-line:after,.signal-backward .connection-line:after{animation-name:signal-vertical}@keyframes signal-vertical{0%{top:0;opacity:0}15%,80%{opacity:1}100%{top:100%;opacity:0}}}
@media(prefers-reduced-motion:reduce){.tap-marker,.tap-marker i,.timeline li:last-child{animation:none}.signal-forward .connection-line:after,.signal-backward .connection-line:after{animation:none;opacity:0}.demo-focus-target{transition:none}}