.sw{margin:0 0 30px}
.sw-head{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.sw-head h3{font:normal 24px/1.3 var(--serif);margin:0}
.sw-tag{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#ffd1a7;border:1px solid #e7b37f66;border-radius:3px;padding:4px 9px}
.sw-screen{border-radius:12px;overflow:hidden;border:1px solid #ffffff30;box-shadow:0 30px 70px #0006,0 0 0 6px #0b1630;background:#0a1426}
.sw-bar{height:30px;display:flex;align-items:center;gap:7px;padding:0 12px;background:#0d1b38;border-bottom:1px solid #ffffff18}
.sw-bar i{width:10px;height:10px;border-radius:50%;background:#ffffff2a}
.sw-bar span{margin-left:12px;font-size:11px;color:#9fb0d4;background:#ffffff0d;border-radius:4px;padding:2px 12px}
.sw-view{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a1426}
.sw-cam{position:absolute;inset:0;transform-origin:0 0;transition:transform 1.15s cubic-bezier(.45,.05,.25,1);--s:1}
.sw-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;user-select:none}
.sw-frame.on{opacity:1}
.sw-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.sw-ring rect{fill:none;stroke:#ff8a2b;stroke-width:calc(4px / var(--s));stroke-dasharray:100;stroke-dashoffset:100;opacity:0;filter:drop-shadow(0 0 6px #ff8a2b88)}
.sw-ring.on rect{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .8s ease .35s,opacity .2s ease .35s}
.sw-ring.warn rect{stroke:#ff5a4f;filter:drop-shadow(0 0 6px #ff5a4f88)}
.sw-ring.good rect{stroke:#3ecf8e;filter:drop-shadow(0 0 6px #3ecf8e88)}
.sw-cursor{position:absolute;width:26px;height:26px;margin:-3px 0 0 -4px;transform:scale(calc(1 / var(--s)));transform-origin:4px 3px;transition:left .9s cubic-bezier(.5,0,.2,1),top .9s cubic-bezier(.5,0,.2,1),opacity .3s;opacity:0;z-index:3;filter:drop-shadow(0 2px 3px #0009)}
.sw-cursor.on{opacity:1}
.sw-cursor path{fill:#fff;stroke:#111;stroke-width:1.4;stroke-linejoin:round}
.sw-tap{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid #ff8a2b;opacity:0;transform:scale(calc(.3 / var(--s)));pointer-events:none;z-index:2}
.sw-tap.go{animation:sw-tap .7s ease-out}
@keyframes sw-tap{0%{opacity:.95;transform:scale(calc(.3 / var(--s)))}100%{opacity:0;transform:scale(calc(1.4 / var(--s)))}}
.sw-note{position:absolute;left:4%;bottom:6%;max-width:46%;background:#fffdf3;color:#1d2a44;font:600 clamp(15px,1.9vw,24px)/1.3 'Caveat','FUDocHand',cursive;padding:10px 16px;border-radius:6px;box-shadow:0 10px 30px #0007;transform:translateY(12px) rotate(-1.2deg);opacity:0;transition:opacity .35s,transform .35s;border-left:5px solid #ff8a2b;z-index:4}
.sw-note.on{opacity:1;transform:translateY(0) rotate(-1.2deg)}
.sw-note.warn{border-left-color:#ff5a4f}.sw-note.good{border-left-color:#3ecf8e}
.sw-note.right{left:auto;right:4%}.sw-note.top{bottom:auto;top:6%}
.sw-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:0;background:#ff9b4aee;display:grid;place-items:center;z-index:5;box-shadow:0 10px 40px #0008;transition:opacity .3s}
.sw-play svg{width:38px;height:38px;fill:#14233f;margin-left:5px}
.sw.playing .sw-play{opacity:0;pointer-events:none}
.sw-controls{display:flex;align-items:center;gap:10px;margin-top:12px}
.sw-btn{font-size:12px;padding:7px 14px}
.sw-track{flex:1;height:6px;background:#ffffff22;border-radius:6px;cursor:pointer;overflow:hidden}
.sw-track span{display:block;height:100%;width:0;background:var(--orange)}
.sw-time{font-size:12px;color:var(--muted);min-width:34px;text-align:right}
.sw-caption{min-height:58px;margin:12px 0 0;font-size:17px;line-height:1.6;color:#e7eeff;max-width:900px}
@media (max-width:640px){.sw-note{max-width:58%;font-size:12.5px;padding:5px 9px;bottom:3%;left:3%;border-left-width:3px}.sw-note.right{right:3%}.sw-note.top{top:3%}.sw-play{width:60px;height:60px;margin:-30px 0 0 -30px}.sw-caption{font-size:15px}}
@media (prefers-reduced-motion:reduce){.sw-cam,.sw-cursor{transition:none}}
/* Freight Research add-on under Step 2 (optional extra walkthrough) */
.fr-addon{margin:28px 0 8px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.fr-addon>.kicker{margin-bottom:4px}
.fr-addon>p{margin:0 0 12px}

.sw-mask{position:absolute;display:block;pointer-events:none;z-index:1}

/* Drivers Before Trucks only: once started, a paused play button sits in the corner so it doesn't hide what's outlined */
.sw-db.sw-started .sw-play{left:auto;top:auto;right:12px;bottom:12px;margin:0;width:48px;height:48px}
.sw-db.sw-started .sw-play svg{width:22px;height:22px}
@media (max-width:640px){
 .sw-db:not(.sw-started) .sw-play{width:56px;height:56px;margin:-28px 0 0 -28px}
 .sw-db.sw-started .sw-play{right:8px;bottom:8px;width:38px;height:38px}
 .sw-db.sw-started .sw-play svg{width:18px;height:18px}
 .sw-db .sw-caption{font-size:16px;line-height:1.5}
}