/* DESKTOP-ARROWS: mouse/trackpad only; phones never see these */
.da-btn{display:none}
@media (hover:hover) and (pointer:fine){
  .da-btn{display:flex;position:absolute;top:50%;z-index:6;width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:50%;align-items:center;justify-content:center;background:rgba(18,16,14,.52);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 2px 10px rgba(0,0,0,.25);cursor:pointer;opacity:0;transition:opacity .16s ease,background .16s ease}
  .da-btn:hover{background:rgba(18,16,14,.72)}
  .da-btn:focus-visible{opacity:1;outline:2px solid #D93350;outline-offset:2px;box-shadow:0 0 0 2px #fff,0 2px 10px rgba(0,0,0,.25)}
  .da-btn[hidden]{display:none}
  .da-prev{left:10px}.da-next{right:10px}
  .da-host:not(.da-fs)>.da-btn{top:40%}
  .da-host:hover>.da-btn,.da-host:focus-within>.da-btn,.da-fs>.da-btn{opacity:1}
  .da-fs>.da-btn{width:44px;height:44px;margin-top:-22px}
  .da-fs>.da-prev{left:12px}.da-fs>.da-next{right:12px}
}
@media (prefers-reduced-motion:reduce){.da-btn{transition:none}}
@media (forced-colors:active){.da-btn{border:1px solid ButtonText}}