JS requires to be placed in body for local files

I've very small example: https://codepen.io/MadBoyEvo/pen/XWNMVqj

This example works just fine.

If I copy/paste this example into .HTML file and just open it up locally

<!-- saved from url=(0014)about:internet -->
<!DOCTYPE html>
<html>

    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <meta content="2021-02-15 20:33:22" name="revised" />
        <title>Test</title>
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" as="style" type="text/css" rel="stylesheet preload prefetch" />
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link href="https://cdn.jsdelivr.net/gh/findawayer/kineto@main/dist/kineto.css" as="style" type="text/css" rel="stylesheet preload prefetch" />
        <style>
            body {
                font-family: 'Roboto Condensed', sans-serif;
                font-size: 8pt;
                margin: 0
            }

            input {
                font-size: 8pt
            }
        </style>
        <style>
            .overflowHidden {
                overflow: hidden;
                overflow-x: hidden;
                overflow-y: hidden
            }

            .flexParent {
                display: flex;
                justify-content: space-between
            }

            .flexParentInvisible {
                display: flex;
                justify-content: space-between
            }

            .flexElement {
                flex-basis: 100%
            }

            .flexPanel {
                flex-basis: 100%
            }

            .flex-grid {
                display: flex
            }
        </style>
        <style>
            .carousel {
                position: relative;
                width: 100%;
                margin-bottom: 20px;
            }

            .slide {
                width: 100%;
                height: 300px;
                box-sizing: border-box;
                background-color: rgb(52, 73, 85);
                line-height: 1.15em;
                font-size: 3rem;
                text-align: center;
                /* transition: background-color .3s; */
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

            .slide::before,
            .slide::after,
            .slide .count {
                display: inline-block;
                vertical-align: middle;
            }

            .slide::before,
            .slide::after {
                content: '';
                width: 1px;
                height: 100%;
            }

            .carousel [tabindex]:focus,
            .carousel button:focus {
                outline: 0;
            }

            .carousel [tabindex='0']:focus,
            .carousel button:focus {
                box-shadow: inset 0 0 0 2px rgba(249, 170, 51, 0.6);
            }

            .carousel-thumb .slide {
                height: 100px;
                font-size: 1.8rem;
            }

            .kineto .kineto__frame,
            .kineto .kineto-frame {
                color: rgb(249, 170, 51);
                background-color: rgb(74, 101, 114);
                transition: height 0.25s cubic-bezier(0, 0, 0.2, 1);
            }

            .kineto .kineto__slide--active,
            .kineto .kineto-slide.kineto-active {
                background-color: rgb(35, 47, 52);
            }

            .kineto .kineto__arrow__button,
            .kineto .kineto-arrow-button {
                position: absolute;
                top: 50%;
                color: rgb(249, 170, 51);
                transform: translate(0, -50%);
                transition: opacity 0.3s;
            }

            .kineto .kineto__arrow__button--previous,
            .kineto .kineto-previous {
                left: 1%;
            }

            .kineto .kineto__arrow__button--next,
            .kineto .kineto-next {
                right: 1%;
            }

            .kineto .kineto__pagination,
            .kineto .kineto-pagination {
                position: absolute;
                right: 0;
                bottom: 20px;
                left: 0;
                color: rgb(249, 170, 51);
            }

            .kineto .kineto__pagination__button,
            .kineto .kineto-pagination-button {
                border-radius: 100%;
                transition: opacity 0.3s;
            }

            .kineto .kineto__pagination__button--active,
            .kineto .kineto-pagination-button.kineto-active {
                font-weight: 700;
            }

            .kineto .kineto__count,
            .kineto .kineto-count {
                position: absolute;
                top: 10px;
                right: 15px;
                color: rgb(249, 170, 51, 0.4);
            }

            .kineto .kineto__count .current,
            .kineto .kineto-count .current {
                color: rgb(249, 170, 51);
                font-size: 1.2rem;
                font-style: normal;
            }

            #navigation .kineto__arrow__button,
            #navigation .kineto-arrow-button {
                font-size: 1.2rem;
            }

            #navigation .kineto__pagination__button,
            #navigation .kineto-pagination-button {
                width: auto;
                height: auto;
                background: transparent;
                border-radius: 0;
                box-sizing: border-box;
                line-height: 20px;
            }

            #sync2 .slide {
                height: 200px;
                font-size: 2.5rem;
            }

            #sync3 .slide {
                height: 100px;
                font-size: 1.75rem;
            }
        </style>
        <style>
            .defaultText {
                margin: 5px
            }
        </style>
        <script src="https://cdn.jsdelivr.net/gh/findawayer/kineto@main/dist/kineto.js"></script>
    </head>

    <body>

        <div class="main-section">
            <div id="Carousel-iCPeagPu" class="carousel">
                <div class="slide">
                    <div class="defaultText">
                        <span>Slide 1</span>
                    </div>
                </div>
                <div class="slide">
                    <div class="defaultText">
                        <span>Slide 2</span>
                    </div>
                </div>
            </div>
            <script>
                Kineto.create("#Carousel-iCPeagPu", {
                    pagination: !0,
                    mode: "horizontal"
                });
            </script>
        </div>
    </body>

</html>

With errors:

If I move

<script src="https://cdn.jsdelivr.net/gh/findawayer/kineto@main/dist/kineto.js"></script>

to line 209 (so just inside body tag) it starts to work just fine. Why would behavior for local files be different than for hosted files?

findawayer / kineto

JS requires to be placed in body for local files #2