<style>
section[data-section-id="69639df21d733220ec82c8dc"] {
.tp-audio-scene{position:relative}
.tp-audio-overlay{position:absolute;inset:0}
.tp-audio-overlay .tp-pin{
  position:absolute;
  left:var(--px,50%);
  top:var(--py,50%);
  transform:translate(-50%,-50%);
}

.tp-audio-scene[data-mode="exterior"]{--axisY:50}
.tp-audio-scene[data-mode="exterior"] .tp-audio-overlay .tp-pin:nth-of-type(1){--dx:40px!important;--dyPct:-31!important}
.tp-audio-scene[data-mode="exterior"] .tp-audio-overlay .tp-pin:nth-of-type(2){--dx:90px!important;--dyPct:-21!important}
.tp-audio-scene[data-mode="exterior"] .tp-audio-overlay .tp-pin:nth-of-type(3){--dx:-60px!important;--dyPct:-15!important}
.tp-audio-scene[data-mode="exterior"] .tp-audio-overlay .tp-pin:nth-of-type(4){--dx:43px!important;--dyPct:-1.5!important}
.tp-audio-scene[data-mode="exterior"] .tp-audio-overlay .tp-pin:nth-of-type(5){--dx:4px!important;--dyPct:20!important}

.tp-audio-scene[data-mode="interior"]{--axisY:50}
.tp-audio-scene[data-mode="interior"] .tp-audio-overlay .tp-pin:nth-of-type(1){--dx:40px!important;--dyPct:-31!important}
.tp-audio-scene[data-mode="interior"] .tp-audio-overlay .tp-pin:nth-of-type(2){--dx:90px!important;--dyPct:-21!important}
.tp-audio-scene[data-mode="interior"] .tp-audio-overlay .tp-pin:nth-of-type(3){--dx:-60px!important;--dyPct:-15!important}
.tp-audio-scene[data-mode="interior"] .tp-audio-overlay .tp-pin:nth-of-type(4){--dx:43px!important;--dyPct:-1.5!important}
.tp-audio-scene[data-mode="interior"] .tp-audio-overlay .tp-pin:nth-of-type(5){--dx:4px!important;--dyPct:20!important}
}
</style>

<script>
(function(){
  var SECTION_SELECTOR = 'section[data-section-id="69639df21d733220ec82c8dc"]';

  function toNumber(v){
    v = parseFloat(v);
    return isFinite(v) ? v : 0;
  }

  var lastLayoutSignature = '';

  function updatePinPositions(){
    var section = document.querySelector(SECTION_SELECTOR);
    if(!section) return;

    var scene = section.querySelector('.tp-audio-scene');
    if(!scene) return;

    var image = scene.querySelector('img.tp-audio-bg');
    var overlay = scene.querySelector('.tp-audio-overlay');
    if(!image || !overlay) return;

    var sceneRect = scene.getBoundingClientRect();
    var imageRect = image.getBoundingClientRect();
    if(imageRect.width <= 0 || imageRect.height <= 0) return;

    var centerXInScene =
      (imageRect.left + imageRect.width / 2) - sceneRect.left;

    var axisY =
      toNumber(getComputedStyle(scene).getPropertyValue('--axisY')) || 50;

    var centerYInScene =
      (imageRect.top - sceneRect.top) + (axisY / 100) * imageRect.height;

    var pins = [].slice.call(overlay.querySelectorAll('.tp-pin'));

    for(var i = 0; i < pins.length; i++){
      var pinStyle = getComputedStyle(pins[i]);
      var dx = toNumber(pinStyle.getPropertyValue('--dx'));
      var dyPct = toNumber(pinStyle.getPropertyValue('--dyPct'));

      pins[i].style.setProperty('--px', (centerXInScene + dx) + 'px');
      pins[i].style.setProperty(
        '--py',
        (centerYInScene + (dyPct / 100) * imageRect.height) + 'px'
      );
    }
  }

  function buildLayoutSignature(){
    var section = document.querySelector(SECTION_SELECTOR);
    if(!section) return '';

    var scene = section.querySelector('.tp-audio-scene');
    if(!scene) return '';

    var overlay = scene.querySelector('.tp-audio-overlay');
    if(!overlay) return '';

    var mode = (scene.getAttribute('data-mode') || '').trim();
    var axisY =
      (getComputedStyle(scene).getPropertyValue('--axisY') || '').trim();

    var pins = [].slice.call(overlay.querySelectorAll('.tp-pin'));

    var signature = mode + '|' + axisY + '|' + pins.length + '|';

    for(var i = 0; i < pins.length; i++){
      var pinStyle = getComputedStyle(pins[i]);
      signature +=
        (pinStyle.getPropertyValue('--dx') || '').trim() + ',' +
        (pinStyle.getPropertyValue('--dyPct') || '').trim() + ';';
    }

    return signature;
  }

  function watchForConfigChanges(){
    var sig = buildLayoutSignature();
    if(sig && sig !== lastLayoutSignature){
      lastLayoutSignature = sig;
      updatePinPositions();
    }
    requestAnimationFrame(watchForConfigChanges);
  }

  function init(){
    updatePinPositions();
    lastLayoutSignature = buildLayoutSignature();

    window.addEventListener('resize', updatePinPositions, { passive:true });
    window.addEventListener('scroll', updatePinPositions, { passive:true });

    var section = document.querySelector(SECTION_SELECTOR);
    var scene = section && section.querySelector('.tp-audio-scene');

    if(scene){
      var image = scene.querySelector('img.tp-audio-bg');

      if(image && !image.complete){
        image.addEventListener('load', updatePinPositions, { once:true });
      }

      var resizeObserver = new ResizeObserver(updatePinPositions);
      resizeObserver.observe(scene);
      if(image) resizeObserver.observe(image);

      var mutationObserver = new MutationObserver(function(){
        updatePinPositions();
        lastLayoutSignature = buildLayoutSignature();
      });
      mutationObserver.observe(scene, {
        attributes:true,
        childList:true,
        subtree:true
      });
    }

    requestAnimationFrame(watchForConfigChanges);
  }

  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', init, { once:true });
  } else {
    init();
  }
})();
</script>