*{margin:0;padding:0;box-sizing:border-box}.fade-enter-active,.fade-leave-active{transition:opacity 1s ease}.fade-enter-from,.fade-leave-to{opacity:0}.fade-enter-to,.fade-leave-from{opacity:1}.pins{display:grid;gap:10px;position:absolute;left:var(--pins-x);top:var(--pins-y);transform:translate(-50%,-50%);grid-template-areas:"a7 a8 a9 a10" "a4 a5 a6 ." ". a2 a3 ." " . a1 . ."}.pin{width:var(--pin-size);height:var(--pin-size);border:2px solid var(--pin-color);background:var(--pin-color);font-size:22px;text-align:center;line-height:var(--pin-size);border-radius:50%;transition:all .2s ease-in-out;font-family:Arial,Helvetica,sans-serif;color:#000}.pin:nth-child(4),.pin:nth-child(5),.pin:nth-child(6),.pin:nth-child(1){transform:translate(50%) translateY(-10%)}.pin:nth-child(2),.pin:nth-child(3){transform:translateY(-20%)}.pin:nth-child(1){transform:translate(50%) translateY(-30%)}.pin.pin--down{background:#000;color:var(--pin-color)}body{background:#000}main{width:5760px;height:var(--site-height, 1080px);overflow:hidden}.back-video{position:absolute;top:var(--video-offset, 0);left:0;width:100%;height:1080px}.back-video video{width:100%;height:100%}.back{height:100%;position:relative;--cell-border-width: var(--7b396232);--cell-border-color: var(--7a2263cf);--pin-color: var(--39f9a05d)}.tracks{display:flex;height:100%;align-items:flex-end;position:relative;z-index:10;counter-reset:track}.track{counter-increment:track;flex-grow:1;height:var(--cell-height, 50%);border:var(--cell-border-width) var(--cell-border-color) solid;position:relative;font-family:Arial,Helvetica,sans-serif}.track:after{content:counter(track);color:#fff;left:50%;top:35%;font-size:380px;position:absolute;transform:translate(-50%) translateY(-50%)}.track.track--active:after{font-size:120px;left:var(--track-number-x);top:var(--track-number-y)}.track .track__video{position:absolute;top:calc(var(--cell-height) - 1080px);object-fit:cover;z-index:-1;height:auto;aspect-ratio:.568}