@charset "UTF-8";

/* VARIABLES */
:root {
    /* > Set these from video file / data */
    --film-aspect: 0.75;
    --film-aspect-inverse: calc(1 / var(--film-aspect));

    /* > Will be set in JS */
    --num-scenes: 1;

    --gap-main: 4px;
    --gap-main-areas: var(--gap-main);
    --gap-notes-area-header: var(--gap-main);

    --height-video: calc(100vh - var(--height-page-header) - var(--height-player-header) - var(--height-timeline) - 2 * var(--gap-main) - var(--height-player-footer));
    --width-video: calc(var(--height-video) * var(--film-aspect-inverse));

    --min-width-notes-area: 30.5rem;
    --max-width-notes-area: calc(50vw - 0.5 * var(--gap-main-areas));

    --ideal-width-notes-area: calc(100vw - var(--width-video) - var(--gap-main-areas));
    --initial-width-notes-area: clamp(32rem, var(--ideal-width-notes-area), 45rem);
    --width-notes-area: clamp(var(--min-width-notes-area), var(--user-width-notes-area, var(--initial-width-notes-area)), var(--max-width-notes-area));

    --height-page-header: 1.95rem;
    --height-player-header: 4.75rem;
    --height-player-footer: 0px;
    --height-notes-area-header: var(--height-page-header);
    --height-notes-footer: calc(var(--height-page-header) + var(--gap-main));
    --height-notes-area-handle-bar: 0px;
    --height-current-button: 2rem;
    --height-scene-header: var(--height-player-header);

    --padding-header-sides: 1rem;
    --padding-notes-sides: 1.5rem;
    --padding-note-preview: 0.75rem;

    --height-timeline-track: 5px;
    --size-timeline-thumb: 15px;
    --gap-scenes: 1.5px;
    --height-timeline-thumbnail: 2.75rem;
    --width-timeline-thumbnail: calc(var(--film-aspect-inverse) * var(--height-timeline-thumbnail));
    --height-timeline-icons: var(--height-page-header);

    --height-timeline: calc(var(--height-timeline-track) + var(--gap-main) + var(--height-timeline-thumbnail) + var(--height-page-header));
    /* 5rem */
    --width-controls: 4.5rem;

    --font-default: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-ui-mono: "Lilex", monospace;
    --font-mono: "Lilex", monospace;
    --font-sans: "Inter", sans-serif;
    --font-serif: "Source Serif 4", serif;
    --font-slab: "Bitter", serif;
    --font-icons: "RFP Icons Round";

    --font-settings-mono-plain-zero: "cv04";

    --font-film-title: var(--font-slab);
    --font-annotation-title: var(--font-slab);

    --font-note-meta: var(--font-default);
    --font-note-quote: var(--font-serif);
    --font-note-quote-original: var(--font-mono);
    --font-note-caption: var(--font-mono);
    --font-note-source: var(--font-serif);
    --font-note-transcript: var(--font-serif);
    --font-note-title: var(--font-serif);
    --font-note-heading: var(--font-default);
    --font-note-text: var(--font-serif);
    --font-note-footnotes: var(--font-serif);
    --font-note-footnotes-marker: var(--font-mono);

    --font-timings: var(--font-default);
    --font-settings-timings: "tnum";
    --font-size-timeline-timings: 0.85rem;
    --font-size-ui-buttons: 0.675rem;
    --font-size-player-header: 1.5rem;
    --font-size-scene-header: 1.1rem;

    --color-bg: #242424;
    --color-video-bg: #000;
    --color-text-default: #dadfd1;

    --color-rfp-accent: #0064a6;
    /*5f64d5*/
    --color-page-header-bg: var(--color-bg);
    --color-video-header-bg: var(--color-notes-bg-default-dark);
    --color-notes-area-header-bg: var(--color-bg);
    --color-notes-area-header-button-bg: var(--color-notes-bg-default-light);
    --color-notes-area-footer-bg: var(--color-notes-bg-default-light);
    --color-notes-area-footer-button-bg: var(--color-notes-bg-default-light);

    --color-info-box-bg: #0064a6;
    --color-controls-bg: transparent;
    --color-video-footer-bg: rgba(0, 0, 0, 0.5);
    /* #8a8377; /*darkgray;*/
    --color-timeline-track: hsl(from var(--color-text-default) h s l / 0.4);
    --color-timeline-track-current: var(--color-text-default);
    --color-timeline-bg-thumbnail: var(--color-timeline-track);
    --color-timeline-bg-icons: var(--color-notes-bg-default-light);
    --color-timeline-bg-icons-current: var(--color-notes-header-bg-current);
    --color-timeline-bg-icons-empty: hsl(from var(--color-notes-bg-default-light) h s l / 0.4);
    --color-scene-tooltip-bg: var(--color-notes-bg-default-light);

    --color-notes-highlight: #ab723d;
    /*#ffd841*/
    --color-notes-bg-default-light: #4A4741;
    --color-notes-bg-default-dark: #3A3833;
    --color-notes-bg: var(--color-notes-bg-default-dark);
    --color-notes-bg-current: #835c3a;
    /*#7b766d;*/
    --color-notes-header-bg: var(--color-notes-bg-default-light);
    --color-notes-header-bg-current: #ab723d;
    /*#625e55;*/

    --color-notes-header-title: hsl(from var(--color-text-default) h s l / 0.8);
    --color-notes-header-title-current: hsl(from var(--color-text-default) h s l / 1.0);
    --color-notes-title: hsl(from var(--color-text-default) h s l / 0.8);
    --color-notes-title-current: hsl(from var(--color-text-default) h s l / 1.0);

    --color-sensitive: hsla(44, 10%, 64%, 1.00);
    --color-sensitive-alpha: hsla(44, 10%, 64%, 0.50);
    --gradient-sensitive-timeline: repeating-linear-gradient(-45deg, transparent, transparent 2px, var(--color-sensitive) 2px, var(--color-sensitive) 6px);

    --height-note-closed: 9rem;
    --height-note-list-view: 3rem;

    --time-note-open: 0.5s;
    --time-notes-area-open-mobile: 0.4s;

    --size-circle-button: 2.5rem;
    --font-size-circle-button: 1rem;

    --indent-caption: 1.4rem;

    --icon-menu: "\f0c9";
    --icon-info: "\3f";
    --icon-meta: "\f008";
    --icon-quote: "\f518";
    --icon-image: "\f030";
    --icon-camera: "\f030";
    --icon-recording: "\f130";
    --icon-bibliography: "\f02e";
    --icon-play: "\f04b";
    --icon-play-circle: "\f01d";
    --icon-pause: "\f04c";
    --icon-restart: "\f0e2";
    --icon-list: "\f0ca";
    --icon-close: "\f00d";
    --icon-plus: "\2b";
    --icon-plus-circle: "\f055";
    --icon-text: "\f036";
    --icon-film: "\f008";
    --icon-paragraph: "\f1dd";
    --icon-quotation: "\f10e";
    --icon-document: "\f15b";
    --icon-article: "\e1d8";
    --icon-shuffle: "\f074";
    --icon-reel: "\e238";
    --icon-film-camera: "\f8a9";
    --icon-video: "\f03d";
    --icon-bookmark: "\f02e";
    --icon-book: "\f518";
    --icon-book-cover: "\f02d";
    --icon-book-blank: "\f5d9";
}

/*@keyframes auto-pause-pulse {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}*/

@keyframes auto-pause-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes info-box-pulse-vertical {
    0% {
        transform: translateY(-0.2rem);
    }

    100% {
        transform: translateY(0.2rem);
    }
}

@keyframes info-box-pulse-horizontal {
    0% {
        transform: translateX(-0.2rem);
    }

    100% {
        transform: translateX(0.2rem);
    }
}

/* MAIN */
html {
    width: 100%;
    /*min-height: 100vh; /* CHECK */
    font-size: 100%;
    font-size: clamp(11.5px, 0.945vw, 24px);
}

body {
    font-family: var(--font-default);
    height: 100%;

    background-color: var(--color-bg);
    color: var(--color-text-default);
    line-height: 1.4;

    overflow: hidden;

    /* For Inter */
    font-feature-settings: "cv11", "ss03";
}

.template {
    display: none;
}

.button-style-close {
    --_color-button: var(--color-text-default);
    --_color-button-hover: var(--color-bg);
    width: var(--size-circle-button);
    height: var(--size-circle-button);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--_color-button);
    border: 1px solid var(--_color-button);
    cursor: pointer;
    font-size: var(--font-size-circle-button);
    line-height: 1;
    font-family: var(--font-icons);

    &::before {
        content: var(--icon-close);
    }

    &:hover {
        color: var(--_color-button-hover);
        background-color: var(--_color-button);
    }
}

/*********************************************/
/* PLAYER CONTAINER */
.rfp-player {
    width: 100%;
    display: flex;
    gap: var(--gap-main-areas);
    opacity: 0.1;
    transition: opacity 0.3s;
    pointer-events: none;

    &.is-ready {
        opacity: 1;
        pointer-events: auto;
    }
}

a:hover {
    text-decoration: none;
}

/*********************************************/
/* VIDEO AREA */
.video-area {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* PAGE HEADER */
.video-area .page-header {
    height: var(--height-page-header);
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    background-color: var(--color-page-header-bg);
    font-family: var(--font-ui-mono);
    line-height: 1;

    & .header-tabs {
        display: flex;

        & .tab {
            display: flex;
            align-items: center;
            white-space: nowrap;
            font-family: var(--font-slab);
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0 var(--padding-header-sides);
            color: hsl(from var(--color-text-default) h s l / 0.5);
            cursor: auto;
            padding-top: var(--gap-main);
            text-transform: uppercase;
            letter-spacing: 0.07em;

            & a {
                /*text-decoration: none;*/
                text-underline-offset: 0.25em;

                &:hover {
                    /*text-decoration: underline;*/
                    color: var(--color-text-default);
                }

                & span {
                    letter-spacing: 0;
                }
            }

            &.current {
                background-color: var(--color-bg);
                color: var(--color-rfp-accent);
                text-decoration: none;
            }

            & > span::before {
                content: "\f105";
                font-family: var(--font-icons);
                margin-inline: 0.5rem 0.4rem;
                font-size: 85%;
                opacity: 0.5;
            }
        }
    }
}

/* VIDEO TITLE HEADER */
.video-area .video-header {
    display: block;
    height: var(--height-player-header);
    margin-top: var(--gap-main);
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0rem var(--padding-header-sides);
    line-height: 1;
    background-color: var(--color-video-header-bg);
    overflow: hidden;

    & .film-title {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: calc(0.65rem);
        gap: 0.45rem;
        height: 100%;
        opacity: 0.8;
        mask-image: linear-gradient(to left, transparent, black 1rem);
        margin-right: -1rem;

        & .title {
            font-family: var(--font-serif);
            white-space: nowrap;
        }

        & .title.en {
            font-family: var(--font-film-title);
            font-size: var(--font-size-player-header);
            font-weight: 600;
            letter-spacing: 0.01em;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            line-height: 1.2;
            color: hsl(from var(--color-text-default) h s l / 1.0);
        }

        & .title.original {
            font-size: 0.9rem;
            color: hsl(from var(--color-text-default) h s l / 0.5);
        }
    }

    & .info-button {
        border-radius: 2rem;
        width: 1.35rem;
        height: 1.35rem;
        background-color: var(--color-text-default);
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--color-bg);
        font-size: 0.75rem;
        font-family: var(--font-ui-mono);
        cursor: pointer;
        opacity: 0.5;

        &:hover {
            opacity: 1.0;
        }
    }
}

/* VIDEO WRAPPER */
.video-wrapper {
    line-height: 0;
    width: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    display: grid;
    background-color: var(--color-video-bg);

    & > div {
        grid-area: 1 / 1 / 2 / 2;
        position: relative;
    }

    & .original {
        cursor: pointer;
    }

    & video {
        margin: 0;
        padding: 0;
        line-height: 0;
        width: 100%;
        height: var(--height-video);
        object-fit: contain;
    }

    /* SENSITIVE SCENE OVERLAY */
    & .sensitive {
        padding: 0;
        display: grid;
        pointer-events: none;
        display: none;

        .rfp-player.is-sensitive & {
            display: grid;
        }

        & > div {
            grid-area: 1 / 1 / 2 / 2;
        }

        & .sensitive-cover {
            backdrop-filter: contrast(50%) blur(30px);
            background: var(--color-sensitive-alpha);
        }

        & .sensitive-message {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0.7em;
            line-height: 1;
            isolation: isolate;

            & .label {
                background: var(--color-bg);
                color: var(--color-sensitive);
                padding: 0.4em 0.8em;
                border-radius: 1.5em;
            }

            & .content {
                color: var(--color-bg);
                max-width: 50ch;
                text-wrap-style: balance;
                line-height: 1.3;
                text-align: center;
            }
        }
    }

    /* PAUSE INDICATOR OVERLAY */
    & .pause-indicator {
        pointer-events: none;
        display: block;
        opacity: 0;
        transition: opacity 1s;

        & .video-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(closest-corner, rgba(0, 0, 0, 0.2) 25%, #000);
        }

        & .icon {
            position: absolute;
            width: 5rem;
            height: 5rem;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: center;
            align-items: center;
            filter: drop-shadow(0 0 0.4rem rgba(0, 0, 0, 0.5));
            font-family: var(--font-icons);
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }

        & .icon.play::after {
            content: var(--icon-pause);
            font-size: 1.1rem;
        }

        & .icon.wait::after {
            content: "\f1ce";
            /*f28b*/
            font-size: 2.5rem;
            animation: auto-pause-spin 12s linear infinite;
        }

        .rfp-player.is-auto-pausing & {
            opacity: 1;
        }
    }

    /* SCENE CHANGE INDICATOR OVERLAY */
    & .scene-change-indicator {
        pointer-events: none;
        opacity: 0;
        transition: opacity 1s;

        & .video-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(closest-corner, rgba(0, 0, 0, 0.6) 25%, #000);
        }

        & .icon {
            position: absolute;
            width: 3rem;
            height: 3rem;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 10rem 5rem rgba(0, 0, 0, 1.0);
            font-family: var(--font-icons);
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            background-color: hsl(from var(--color-text-default) h s l / 0.7);
            color: #000;
            border-radius: 3rem;
            transition: scale 0.2s, background-color 0.2s;
        }

        & .icon.play::after {
            content: "\e369";
            font-size: 1.1rem;
        }

        & .label {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-top: 3.5rem;
            background-color: hsl(from var(--color-text-default) h s l / 0.7);
            color: #000;
            height: var(--height-page-header);
            line-height: 1;
            width: fit-content;
            white-space: nowrap;
            display: flex;
            align-items: center;
            padding: 0 0.8rem;
            font-family: var(--font-ui-mono);
            font-size: var(--font-size-ui-buttons);
            box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 1.0);
            transition: background-color 0.2s;
        }

        .rfp-player.is-scene-waiting & {
            opacity: 1;
        }
    }

    &:has(video:hover) .scene-change-indicator {
        & .icon {
            background-color: hsl(from var(--color-text-default) h s l / 1.0);
            scale: 1.1;
        }

        & .label {
            background-color: hsl(from var(--color-text-default) h s l / 1.0);
        }
    }

    /* START INDICATOR OVERLAY */
    & .start-indicator {
        pointer-events: none;
        line-height: 1;
        opacity: 1;
        transition: opacity 0.5s;

        & .video-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(closest-corner, rgba(0, 0, 0, 0.6) 25%, #000);
        }

        & .icon {
            position: absolute;
            width: 3rem;
            height: 3rem;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 10rem 5rem rgba(0, 0, 0, 1.0);
            font-family: var(--font-icons);
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            background-color: hsl(from var(--color-text-default) h s l / 0.7);
            color: #000;
            border-radius: 3rem;
            transition: scale 0.2s, background-color 0.2s;
        }

        & .icon.play::after {
            content: var(--icon-play);
            font-size: 1.1rem;
        }

        & .info-box {
            --_inset-info-box: 1.5rem;
            position: absolute;
            max-width: 50ch;
            padding: 1rem 1.25rem;
            font-family: var(--font-ui-mono);
            background-color: var(--color-info-box-bg);
            color: var(--color-text-default);
            font-size: 0.75rem;
            line-height: 1.5;
            display: flex;
            align-items: center;
            gap: 1rem;
            border-radius: 0.5rem;
            box-shadow: 0 0 1rem 0rem rgba(0, 0, 0, 0.4);
            animation-duration: 1.5s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: ease-in-out;
            opacity: 0;
            transition: opacity 0.75s;
            pointer-events: auto;
            cursor: pointer;

            & h6 {
                font-size: inherit;
                font-weight: 600;
                margin: 0;
                margin-bottom: 0em;
            }

            & p + p {
                margin-top: 0.75em;
            }

            .rfp-player.is-ready & {
                opacity: 1;

                &.hide {
                    opacity: 0;
                    transition-delay: 0s;
                }
            }

            &.info-timeline {
                left: var(--_inset-info-box);
                bottom: var(--_inset-info-box);
                padding-left: 1.5rem;
                animation-name: info-box-pulse-vertical;
                transition-delay: 0.5s;

                & > div {
                    border-left: 1px solid hsl(from currentColor h s l / 0.5);
                    padding-left: 1rem;
                }

                &::before {
                    content: "\f063";
                    font-family: var(--font-icons);
                    font-size: 1em;
                }
            }

            &.info-notes {
                right: var(--_inset-info-box);
                top: var(--_inset-info-box);
                padding-right: 1.5rem;
                animation-name: info-box-pulse-horizontal;
                transition-delay: 0.85s;

                & > div {
                    border-right: 1px solid hsl(from currentColor h s l / 0.5);
                    padding-right: 1em;
                }

                &::after {
                    content: "\f061";
                    font-family: var(--font-icons);
                    font-size: 1em;
                }
            }

            &.info-options {
                right: var(--_inset-info-box);
                bottom: var(--_inset-info-box);
                padding-right: 1.5rem;
                animation-name: info-box-pulse-vertical;
                animation-delay: 1s;
                animation-fill-mode: both;
                transition-delay: 2s;

                & > div {
                    border-right: 1px solid hsl(from currentColor h s l / 0.5);
                    padding-right: 1em;
                }

                &::after {
                    content: "\e093";
                    font-family: var(--font-icons);
                    font-size: 1em;
                }
            }
        }

        .rfp-player.has-started & {
            opacity: 0;

            & .info-box {
                pointer-events: none;
            }
        }
    }

    .is-hover &:has(video:hover) .start-indicator .icon {
        background-color: hsl(from var(--color-text-default) h s l / 1.0);
        scale: 1.1;
    }
}

/*********************************************/
/* TIMELINE AREA */
.video-area .timeline-wrapper {
    height: var(--height-timeline);

    display: flex;
    line-height: 1;
    gap: var(--gap-main);

    margin-top: var(--gap-main);

    position: relative;
}

/*********************************************/
/* PLAYBACK CONTROLS */
.timeline-wrapper .controls {
    width: var(--width-controls);
    flex-grow: 0;
    flex-shrink: 0;
    background-color: var(--color-controls-bg);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    padding: 0.2rem 0.7rem;
    padding-left: calc(0.7rem + var(--gap-main));
    padding-bottom: 0.7rem;
    gap: calc(0.25rem + var(--gap-main));

    & .playback-time {
        width: 100%;
        text-align: center;
        flex-grow: 0;
        font-family: var(--font-timings);
        font-size: var(--font-size-timeline-timings);
        font-feature-settings: var(--font-settings-timings);
        color: rgba(255, 255, 255, 0.5);
        color: hsl(from var(--color-text-default) h s l / 0.5);
        font-weight: 500;
    }

    & .play-button {
        width: auto;
        aspect-ratio: 1 / 1;
        flex-grow: 1;
        border-radius: 3rem;
        background-color: hsl(from var(--color-text-default) h s l / 0.5);
        color: var(--color-bg);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 1rem;
        font-family: var(--font-icons);

        &::before {
            content: var(--icon-play);
        }

        .rfp-player.is-playing &::before {
            content: var(--icon-pause);
        }

        .is-hover &:hover {
            background-color: hsl(from var(--color-text-default) h s l / 1.0);
        }
    }
}

/*********************************************/
/* TIMELINE */
.timeline-wrapper .timeline {
    flex-grow: 1;
    min-width: 0;
    position: relative;
}

/*********************************************/
/* SCENES IN TIMELINE */
/*.scene-timeline {
    flex-grow: 1;
}*/

.timeline .scenes {
    display: flex;
    gap: 0;
    width: 100%;
    height: 100%;
}

.timeline .scene {
    --content-width: 0%;

    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;

    --padding-scene-left: var(--gap-scenes);
    --padding-scene-right: var(--gap-scenes);

    padding-left: var(--padding-scene-left);
    padding-right: var(--padding-scene-right);

    cursor: pointer;

    width: var(--time-width);

    min-width: 12px;
    /*min-width: 0rem;*/
    /*min-width: calc(100% / 18.0);*/
    /* animation janky because it starts from 0 and not the actual width of the element */
    transition: width 0.3s ease;

    position: relative;

    /* CHECK*/
    box-sizing: content-box;

    display: flex;
    flex-direction: column;
    gap: var(--gap-main);

    & .scene-timeline {
        position: relative;
        flex-grow: 0;
        flex-shrink: 0;

        & .track-touch-area {
            width: 100%;
            width: calc(100% + 2 * var(--gap-scenes));
            height: var(--height-timeline-track);
            position: absolute;
            left: calc(-1 * var(--gap-scenes));
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            /*background-color: rgba(255, 0, 0, 0.3);*/
        }

        & .track {
            height: var(--height-timeline-track);
            width: 100%;
            background-color: var(--color-timeline-track);
        }

        & .thumb {
            width: var(--size-timeline-thumb);
            height: var(--size-timeline-thumb);
            border-radius: 100%;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #000;
            border: 4px solid #FFF;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
            pointer-events: none;
            z-index: 999;
            display: none;
        }
    }

    &.active .scene-timeline .track {
        background-color: #FFF;
    }

    &.active .scene-timeline .thumb {
        display: block;
    }

    & .scene-content {
        width: 100%;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        overflow: clip;
        position: relative;
        opacity: 0.6;
        will-change: opacity;

        & .thumbnail {
            width: 100%;
            height: var(--height-timeline-thumbnail);
            flex-grow: 0;
            flex-shrink: 0;
            background-color: var(--color-timeline-bg-thumbnail);
            background-repeat: repeat-x;
            background-size: auto 100%;
            background-position: left top;
            mask-image: linear-gradient(to right, white var(--width-timeline-thumbnail), rgba(0, 0, 0, 0.3));
            transition: background-position 0.3s ease;
        }

        &.active .thumbnail {
            background-color: #FFF;
        }

        &:hover .thumbnail {}

        & .note-icons {
            /* Important for icon area sizing on hover */
            width: min-content;
            min-width: 100%;
            flex-grow: 1;
            background-color: var(--color-timeline-bg-icons);
            padding: 0.2rem 0.5rem;
            padding-right: 0.1rem;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;

            & .icons {
                height: 100%;
                display: flex;
                align-items: stretch;
                gap: 0.4rem;

                & div {
                    font-family: var(--font-icons);
                    font-size: 0.75rem;
                    color: var(--color-text-default);
                    opacity: 0.8;
                    border-right: 1px solid hsl(from currentColor h s l / 0.3);
                    padding-right: 0.4rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                & div:last-child {
                    border: none;
                }

                & div::before {
                    content: var(--_icon, "\f15b");
                    /* file */
                }

                /*& div[data-type="meta"]::before {
                    content: var(--icon-meta);
                }

                & div[data-type="quote"]::before {
                    content: var(--icon-quote);
                }

                & div[data-type="image"]::before {
                    content: var(--icon-image);
                }

                & div[data-type="recording"]::before {
                    content: var(--icon-recording);
                }

                & div[data-type="article"]::before {
                    content: var(--icon-article);
                }*/
            }
        }
    }

    &.empty .scene-content .note-icons {
        background-color: var(--color-timeline-bg-icons-empty);
    }

    &.active .scene-content .note-icons {
        background-color: var(--color-timeline-bg-icons-current);
    }
}

.timeline .scene:first-child {
    --padding-scene-left: 0;
    /*padding-left: 0;
    margin-left: 0;*/
}

.timeline .scene:last-child {
    --padding-scene-right: 0;
    /*padding-right: 0;
    margin-right: 0;*/
}

.timeline .scene:hover {
    /* Set scene size to either full video frame width, its width proportional to its duration, or its content size (icon area), depending on which is largest */
    width: max(calc(4.375rem + 2 * var(--gap-scenes)), var(--time-width), var(--content-width));
    width: max(calc(var(--width-timeline-thumbnail) + 2 * var(--gap-scenes)), var(--time-width), var(--content-width));

    /* needed if min-width used, or else it won't open fully (?) */
    min-width: auto;

    & .scene-content {
        opacity: 1.0;
    }
}

.timeline .scene.active {
    opacity: 1.0;
}

/* Mark sensitive scenes */
.timeline .scene.is-sensitive .scene-content {}

.timeline .scene.is-sensitive .scene-content::after {
    content: "";
    position: absolute;
    /*left: var(--padding-scene-left);
    right: var(--padding-scene-right);*/
    left: 0;
    right: 0;
    top: 0;
    height: var(--height-timeline-thumbnail);
    background: var(--gradient-sensitive-timeline);
}

/*.scene-timeline .scene div::before {
    content: "▶";
    position: absolute;
    left: 50%;
    top: 1.75rem;
    font-size: 0.5rem;
    width: 3em;
    height: 3em;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #FFF;
    background-color: rgba(0,0,0,0.9);
    border-radius: 100%;
    opacity: 0;
    transition: opacity 0.1s;
}
.scene-timeline .scene:hover div::before {
    opacity: 1;
}*/

/*********************************************/
/* TIMELINE DETAILS & TOOLTIPS */

/*.timeline .thumb {
    width: var(--size-timeline-thumb);
    height: var(--size-timeline-thumb);
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #000;
    border: 4px solid #FFF;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 999;
}*/

.timeline.hover .scene-timeline .track-touch-area {
    height: calc(var(--height-timeline-track) + 2 * var(--gap-main));
}

.timeline-wrapper .scrub-tooltip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -100%);
    margin-right: 1rem;
    /* min distance from right video edge */
    padding-bottom: calc(2 * var(--gap-main));
    display: none;


    &.show {
        display: flex;
    }

    & .scrub-time {
        padding: 0.2em 0.3em;
        background-color: #FFF;
        color: #000;
        font-family: var(--font-timings);
        font-size: var(--font-size-timeline-timings);
        font-feature-settings: var(--font-settings-timings);
        border-radius: 0.2em;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
        flex-grow: 0;
    }

    & .scrub-preview {
        line-height: 0;
        width: 10rem;
        position: relative;
        border-radius: 0.2em;
        overflow: hidden;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.5);
    }

    & .scrub-preview video {
        width: 100%;
        height: auto;
    }

    &.is-sensitive .scrub-preview:after {
        content: "";
        position: absolute;
        /*left: var(--padding-scene-left);
        right: var(--padding-scene-right);*/
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: var(--gradient-sensitive-timeline);
        /*background: repeating-linear-gradient(-45deg, transparent, transparent 1px, var(--color-sensitive) 1px, var(--color-sensitive) 6px);*/
    }
}

.timeline-wrapper .scene-tooltip {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -100%);
    padding-inline: calc(2 * var(--gap-main));
    /* min distance from right video edge */
    padding-bottom: calc(3 * var(--gap-main));
    display: none;
    line-height: 1.15;

    &.show {
        display: block;
    }

    & .scene-info {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
        border-radius: 0.2rem;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 0.55em;
        background-color: var(--color-scene-tooltip-bg);
        padding: 0.45em 0.65em;
        color: #AAA;
        white-space: nowrap;
        font-size: 0.8rem;
        font-family: var(--font-default);
    }

    & .number {
        font-feature-settings: var(--font-settings-timings);
        opacity: 0.5;
        white-space: pre;
        border-right: 0.12em solid currentColor;
        padding-right: 0.5em;
    }

    /*& .number::after {
        content: "  |";
    }*/

    & .title {}
}

/*********************************************/
/* VIDEO FOOTER */
/*.video-area .video-footer {
    width: 100%;
    height: var(--height-player-footer);
    padding-top: var(--gap-main);
    flex-grow: 0;
    flex-shrink: 0;

    & .footer-content {
        height: 100%;
        display: flex;
        gap: var(--gap-main);
    }

    & .audio-controls {
        width: var(--width-controls);
        flex-grow: 0;
        flex-shrink: 0;
        background-color: var(--color-video-footer-bg);

        & .silent {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: default;
            gap: 0.5rem;
            opacity: 0.2;
        }

        & .silent::before {
            content: "\f026";
            font-family: var(--font-icons);
            font-size: 0.7rem;
        }
    }

    & .filler {
        flex-grow: 1;
        background-color: var(--color-video-footer-bg);
    }
}*/

/*********************************************/
/* NOTES & MATERIAL AREA */
.notes-area {
    --_radius-top: 1.5rem;
    width: var(--width-notes-area);
    height: 100vh;
    overflow: hidden;
    display: flex;
}

.notes-area > div {
    width: 100%;
    flex-shrink: 0;
}

/*********************************************/
/* NOTES AREA MOBILE HANDLE BAR */
.notes-area .notes-area-handle-bar {
    display: none;
    height: var(--height-notes-area-handle-bar);
    flex-shrink: 0;
    flex-grow: 0;
    background-color: var(--color-notes-bg-default-dark);
    background: linear-gradient(to bottom, var(--color-notes-bg-default-dark), var(--color-bg));
    border-top-left-radius: var(--_radius-top);
    border-top-right-radius: var(--_radius-top);
    grid-template-columns: 1fr auto 1fr;

    & .handle {
        display: grid;
        justify-content: center;
        align-content: center;
        padding-bottom: 0.2rem;

        & .icon {
            grid-area: 1 / 1;
            font-family: var(--font-icons);
            font-size: 1.5rem;
            color: hsl(from currentColor h s l / 0.4);
            transition: opacity 0.35s;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }

        & .icon.open {
            &::after {
                content: "\e36a";
            }

            .rfp-player.is-notes-open & {
                opacity: 0;
            }
        }

        & .icon.close {
            &::after {
                content: "\e36b";
            }

            opacity: 0;

            .rfp-player.is-notes-open & {
                opacity: 1;
            }
        }
    }

    & .pause-indicator {
        display: block;
        position: relative;
        margin-bottom: 0.15rem;
        line-height: 1;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;

        & .icon {
            position: absolute;
            left: 1.95rem;
            top: 50%;
            translate: -50% -50%;
            width: 4.6vw;
            height: 4.6vw;
            opacity: 0.4;
            background-color: currentColor;
            mask-position: center;
            mask-repeat: no-repeat;
            mask-size: contain;
        }

        & .icon.play {
            mask-image: url("assets/icons/auto-pause-pause-square.svg");
        }

        & .icon.wait {
            mask-image: url("assets/icons/auto-pause-circle-square.svg");
        }

        & .icon.wait {
            animation: auto-pause-spin 12s linear infinite;
        }

        .rfp-player.is-notes-open.is-auto-pausing & {
            opacity: 1;
        }
    }
}


/*********************************************/
/* NOTES MENU VIEW */
.notes-area .menu-view {
    display: flex;
    flex-direction: column;
    height: 100%;

    margin-left: 0;
    transition: margin 0.45s;
    transition-timing-function: ease-in-out;
}

.rfp-player.menu-open .notes-area .menu-view {
    margin-left: 0;
}

.notes-area .menu-view .menu-header {
    height: var(--height-player-header);
    flex-grow: 0;
    flex-shrink: 0;
    padding-top: var(--gap-main);
    line-height: 1;
}

.notes-area .menu-view .menu-header .header-content {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0 var(--padding-notes-sides);
    background-color: var(--color-notes-highlight);
    color: var(--color-notes-bg);

    & .header-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0.8rem;

        flex-grow: 1;

        & .title {
            font-family: var(--font-default);
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

        & .info {
            font-family: var(--font-ui-mono);
            font-size: 0.75rem;
        }
    }

    & .header-right {
        flex-grow: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        & .menu-close-button {
            --_color-button: var(--color-notes-bg);
            --_color-button-hover: var(--color-notes-highlight);
            display: none;

            /*width: var(--size-circle-button);
            height: var(--size-circle-button);
            border-radius: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid var(--color-notes-bg);
            cursor: pointer;
            font-size: var(--font-size-circle-button);
            line-height: 1;
            font-family: var(--font-icons);

            &::before {
                content: var(--icon-close);
            }

            &:hover {
                color: var(--color-notes-highlight);
                background-color: var(--color-notes-bg);
            }*/

            /* Only show close button when opening menu (to avoid flicker of button when loading with no annotation*/
            .rfp-player.menu-open & {
                display: flex;
            }

            /* Don't show close button when starting with no annotation */
            .rfp-player[data-annotation-id="-1"] & {
                display: none;
            }
        }
    }
}

.notes-area .menu-view .menu-header .menu-close-button {}

.notes-area .menu-view .notes-menu {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-bg);
}

.menu-view .notes-menu .menu-item {
    --_color-menu-item-bg: var(--color-notes-bg);
    flex-grow: 1;
    flex-basis: 0;
    background-color: var(--_color-menu-item-bg);
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    line-height: 1;

    flex-shrink: 0;
    overflow-y: hidden;
    transition: flex-grow 0.3s;

    &::after {
        content: "";
        position: absolute;
        width: 6px;
        left: 0;
        top: 0;
        bottom: 0;
        background-color: hsl(from var(--color-notes-highlight) h s l / 0.2);
    }

    &.current {
        --_color-menu-item-bg: var(--color-notes-bg-current);
    }

    &.current::after {
        background-color: var(--color-notes-highlight);
    }

    & .menu-item-content {
        padding: 1rem 1.5rem;
        overflow-y: scroll;
        padding-bottom: 6rem;

        & .title {
            font-family: var(--font-annotation-title);
            font-size: 1.5rem;
            font-weight: 600;
            line-height: 1.2;
            max-width: 40rem;
        }

        & .subtitle {
            font-family: var(--font-annotation-title);
            font-size: 1.5rem;
            margin-top: 0rem;
            line-height: 1.2;
            max-width: 40rem;
            opacity: 0.6;

            &:empty {
                display: none;
            }
        }

        & .authors {
            font-family: var(--font-ui-mono);
            font-size: 0.75rem;
            max-width: 30rem;
            line-height: 1.5;
            opacity: 0.6;
            margin-top: 0.5rem;
        }

        & .abstract {
            font-family: var(--font-serif);
            font-size: 1.2rem;
            line-height: 1.35;
            max-width: 40rem;
            margin-top: 1rem;
            opacity: 0;
            transition: opacity 0.3s;

            & p + p {
                margin-top: 1em;
            }
        }

        & .bios {
            font-family: var(--font-ui-mono);
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1.5;
            max-width: 40rem;
            margin-top: 1rem;

            opacity: 0;
            transition: opacity 0.3s;

            & p::before {
                content: "●\20";
            }

            & p + p {
                margin-top: 0.5em;
            }
        }
    }

    & .arrow-button {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        position: absolute;
        bottom: 0;
        padding-bottom: 1rem;
        padding-left: 1.5rem;
        padding-top: 3rem;

        background: linear-gradient(to top, var(--_color-menu-item-bg) 3.5rem, transparent);
        width: calc(100% - 3rem);
        pointer-events: none;

        & .arrow {
            width: 2rem;
            height: 2rem;
            border-radius: 2rem;
            border: 1px solid currentColor;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.2s;
            line-height: 1;
        }

        & .arrow::before {
            content: "\f061";
            font-family: var(--font-icons);
            font-size: 0.75rem;
        }

        & .label {
            font-family: var(--font-ui-mono);
            font-size: 0.75rem;
            display: block;
            opacity: 0;
            transition: opacity 0.2s;

            & .current {
                display: none;
            }
        }
    }

    &.current .arrow-button .label {
        & .default {
            display: none;
        }

        & .current {
            display: block;
        }
    }

    &:hover {
        color: var(--color-notes-highlight);
        flex-grow: 3;

        & .abstract {
            opacity: 1;
        }

        & .bios {
            opacity: 0.6;
        }

        & .arrow-button {
            & .arrow {
                background-color: var(--color-notes-highlight);
                color: var(--_color-menu-item-bg);
            }

            & .label {
                opacity: 0.6;
            }
        }
    }
}

/*********************************************/
/* NOTES VIEW */
.notes-area .notes-view {
    display: flex;
    flex-direction: column;
    height: 100%;

    /*margin-left: -100%;*/
    transition: margin 0.45s;
    transition-timing-function: ease-in-out;

    position: relative;

    background-color: var(--color-bg);
}

/* Show menu without animation when no valid annotation id on startup */
.rfp-player[data-annotation-id="-1"] .notes-area .notes-view {
    transition: none;
}

.rfp-player.menu-open .notes-area .notes-view {
    margin-left: 0;
}

/*********************************************/
/* NOTES AREA HEADER */
.notes-view .notes-area-header {
    height: var(--height-notes-area-header);
    flex-shrink: 0;
    background-color: var(--color-notes-area-header-bg);
    display: flex;
    justify-content: space-between;
    gap: var(--gap-notes-area-header);
    font-family: var(--font-ui-mono);
    font-size: var(--font-size-ui-buttons);
    line-height: 1;

    & .button-group {
        display: flex;
        gap: var(--gap-notes-area-header);
        background-color: var(--color-bg);
    }

    & .header-button {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 0 var(--padding-notes-sides);
        background-color: var(--color-notes-area-header-button-bg);
        color: hsl(from currentColor h s l / 0.4);
        white-space: nowrap;
        padding-top: 0.1rem;

        &::before {
            content: var(--icon-menu);
            font-family: var(--font-icons);
            margin-right: 0.75em;
        }

        .is-hover &:hover {
            background-color: var(--color-notes-bg-current);
            color: currentColor;
        }

        &.active {
            background-color: var(--color-notes-highlight);
            color: currentColor;
        }
    }

    & .list-button {
        &::before {
            content: var(--icon-list);
        }
    }

    & .bibliography-button {
        display: none;

        &::before {
            content: var(--icon-bibliography);
        }

        .has-bibliography & {
            display: flex;
        }
    }

    & .info-button {
        &::before {
            content: var(--icon-info);
        }
    }

    & .expand-button {
        background-color: transparent;

        .is-hover &:hover {
            background-color: transparent;
        }

        &::before {
            content: "\f107";
        }

        &::after {
            content: attr(data-label);
        }

        &.active {
            background-color: transparent;
            color: hsl(from currentColor h s l / 0.4);

            &::before {
                content: "\f00d";
            }

            &::after {
                content: attr(data-label-active);
            }
        }

        .is-hover &:hover {
            color: currentColor;
        }
    }

    /*& .notes-menu-button {
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 0 var(--padding-notes-sides);
            color: var(--color-notes-highlight);
            border-right: 0px solid var(--color-bg);

            &::before {
                content: "\f0c9";
                font-family: var(--font-icons);
                margin-right: 1em;
            }

            &:hover {
                background-color: var(--color-notes-highlight);
                color: var(--color-bg);
            }
        }*/
}

/*********************************************/
/* NOTES HEADER */
.notes-view .notes-header {
    height: var(--height-player-header);
    flex-grow: 0;
    flex-shrink: 0;
    padding-top: var(--gap-main);
    line-height: 1;
    border-bottom: 1px solid var(--color-bg);
}

.notes-view .notes-header .header-content {
    height: 100%;
    width: 100%;
    background-color: var(--color-notes-bg);
    display: flex;
    justify-content: flex-start;
    padding: 0 var(--padding-notes-sides);
    gap: 1rem;
}

.notes-view .notes-header .header-left {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.65rem;
}

.notes-view .notes-header .menu-button {
    color: var(--color-notes-highlight);
    font-family: var(--font-ui-mono);
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 0.7em;
    font-size: 0.75rem;
    cursor: pointer;
    padding-left: 2rem;
    position: relative;
}

.notes-view .notes-header .menu-button:hover {
    text-decoration: underline;
}

.notes-view .notes-header .menu-button::before {
    content: "←";
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 2rem;
    border: 1px solid currentColor;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    text-decoration: none;
    left: 0;
    font-family: var(--font-default);
    font-size: 80%;
}

.notes-view .notes-header .menu-button:hover::before {
    background-color: var(--color-notes-highlight);
    color: var(--color-notes-bg);
}

.notes-view .notes-header .notes-title {
    font-family: var(--font-annotation-title);
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: hsl(from var(--color-text-default) h s l / 0.8);
}

.notes-view .notes-header .notes-authors {
    font-family: var(--font-ui-mono);
    font-size: 0.75rem;
    color: hsl(from var(--color-text-default) h s l / 0.3);
}

.notes-view .notes-header .info-button {
    border-radius: 2rem;
    width: 1.35rem;
    height: 1.35rem;
    background-color: var(--color-text-default);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-bg);
    font-size: 0.75rem;
    font-family: var(--font-ui-mono);
    font-weight: 400;
    cursor: pointer;
    opacity: 0.5;
}

.notes-view .notes-header .info-button:hover {
    opacity: 1.0;
}

.notes-view .notes-header .header-right {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

.notes-view .notes-header .list-button {
    color: var(--color-text-default);
    border: 0px solid transparent;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.3rem;
    opacity: 0.5;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    background-color: var(--color-notes-header-bg-current);

    &::before {
        content: var(--icon-list);
        font-family: var(--font-icons);
        font-size: 1rem;
    }

    &:hover {
        opacity: 1;
    }

    .show-list & {
        opacity: 1;
        border: 0px solid currentColor;
        background-color: var(--color-text-default);
        color: var(--color-notes-header-bg-current);
    }
}

/*********************************************/
/* NOTES */
.notes {
    counter-reset: counter-fn-text counter-fn-list;
    flex-grow: 1;
    overflow-y: scroll;
    scroll-behavior: auto;
    margin-top: var(--gap-notes-area-header);
    background-color: var(--color-notes-bg-default-dark);
}

.notes section {
    background-color: var(--color-notes-bg);
    /*margin-bottom: var(--gap-main);*/
    border-bottom: var(--gap-main) solid var(--color-bg);
    transition: opacity 0.3s;

    &:last-child {
        margin-bottom: 0;
        border-bottom: none;

        .rfp-player:not(.show-list) & {
            min-height: 100%;
        }
    }

    &.empty {
        opacity: 0.3;
    }

    &.current {
        background-color: var(--color-notes-bg-current);
        --color-notes-title: var(--color-notes-title-current);
        opacity: 1.0;
    }

    & + section {}

    /*********************************************/
    /* NOTES SECTION HEADER */
    & .scene-header {
        --_padding-header: 0.8rem;
        padding: var(--_padding-header) var(--padding-notes-sides);
        display: flex;
        align-items: flex-start;
        gap: 0.8rem;
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: var(--color-notes-header-bg);
        height: var(--height-scene-header);
        box-shadow: 0 0.5rem 0.5rem 0.2rem rgba(0, 0, 0, 0.1);
        cursor: pointer;

        & .scene-preview {
            display: grid;
            justify-items: center;
            align-items: center;
            flex-grow: 0;
            flex-shrink: 0;

            & img {
                grid-area: 1 / 1 / 2 / 2;
                height: 3rem;
                height: calc(var(--height-player-header) - 2 * var(--_padding-header));
                width: auto;
                border-radius: 0.2rem;
                border: 1px solid hsl(from var(--color-text-default) h s l / 0.5);
                box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
            }

            &::after {
                content: var(--icon-play-circle);
                font-family: var(--font-icons);
                grid-area: 1 / 1;
                font-size: 1.5rem;
                line-height: 1;
                color: var(--color-text-default);
                filter: drop-shadow(0px 0px 0.3rem rgba(0, 0, 0, 0.8));
                display: none;
            }

            .is-touch &::after {
                display: block;
                opacity: 0.8;
            }
        }

        & .scene-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 0.45rem;
            width: 100%;
            min-width: 0;
            color: var(--color-notes-header-title);
        }

        & .scene-title {
            font-family: var(--font-slab);
            font-size: var(--font-size-scene-header);
            display: flex;
            align-items: flex-start;
            gap: 0.05em;
            line-height: 1.3;

            & .number {
                opacity: 0.4;
                display: inline;
                font-feature-settings: "tnum";
                flex-grow: 0;
                flex-shrink: 0;
                white-space: pre;
            }

            & .number::after {
                content: "  |  ";
            }

            & .title {
                display: inline;
                /*overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;*/
                /*padding-top: 0.05em;*/
                font-weight: 600;
                letter-spacing: 0.01em;
            }
        }

        & .scene-time {
            font-family: var(--font-timings);
            font-feature-settings: var(--font-settings-timings);
            opacity: 0.4;
            word-spacing: -0.15em;
            font-size: 0.7rem;
            display: none;
        }

        .is-hover &:hover {
            background-color: var(--color-notes-bg-current);

            & .scene-preview {
                & img {
                    border-color: hsl(from var(--color-text-default) h s l / 0.7);
                }

                &::after {
                    display: block;
                }
            }
        }
    }

    &.current .scene-header {
        background-color: var(--color-notes-header-bg-current);

        & .scene-info {
            color: var(--color-notes-header-title-current);
        }

        & .scene-preview img {
            border-color: var(--color-text-default);
        }
    }
}

/*********************************************/
/* NOTES ARTICLE ELEMENTS */

.notes article {
    width: 100%;

    display: grid;

    /*opacity: 0.3;
    transition: opacity 0.15s;*/
}

/*.notes article + article {
    border-top: 1px solid var(--color-notes-header-bg-current);
}*/

.notes .current article {
    /*opacity: 0.75;*/
}

.notes article:hover {
    /*opacity: 1;*/
}

/* .notes article:first-of-type {
    padding-top: 0.5rem;
}

.notes article:not(.open):last-child {
    padding-bottom: 0.5rem;
} */

.notes article:first-of-type .note-preview-wrapper {
    padding-top: calc(2 * var(--padding-note-preview));
}

.notes article:not(.open):last-child .note-preview-wrapper {
    padding-bottom: calc(2 * var(--padding-note-preview));
}

.notes article.no-preview:last-child {
    padding-bottom: 0;
}

.rfp-player.show-list .notes article {
    padding: 0;
}

.rfp-player:not(.show-list) .notes article.open + article:not(.open) .note-preview-wrapper {
    padding-top: calc(2 * var(--padding-note-preview));
}

.rfp-player:not(.show-list) .notes article.no-preview + article:not(.open) .note-preview-wrapper {
    padding-top: calc(2 * var(--padding-note-preview));
}

.notes article {
    & .note-list-view-wrapper {}

    & .note-list-view {}

    & .note-preview-wrapper {
        padding: var(--padding-note-preview) var(--padding-notes-sides);
        height: var(--height-note-closed);
        transition: opacity var(--time-note-open);
        opacity: 1;
        grid-area: 1 / 1 / 2 / 2;
        /* Let fixed height not change by paddings */
        box-sizing: content-box;

        & .note-preview {
            height: 100%;
            border: 1px solid hsl(from var(--color-text-default) h s l / 0.3);
            border-radius: 0.5rem;
            display: flex;
            overflow: hidden;
            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
            color: var(--color-notes-title);
            background-color: var(--color-notes-bg-default-light);
            transition: border-color 0.15s;
            cursor: pointer;

            .current & {
                background-color: var(--color-notes-header-bg-current);
            }
        }

        .is-hover & .note-preview:hover {
            border-color: var(--color-text-default);

            /*background-color: hsl(from var(--color-text-default) h s l / 0.15);*/
        }

        & .note-preview .preview-image {
            width: 10rem;
            background-color: var(--color-text-default);
            flex-grow: 0;
            flex-shrink: 0;

            /*background-position: top center;
            background-repeat: no-repeat;
            background-size: cover;*/

            /*display: flex;
            justify-content: center;
            align-items: center;*/
            position: relative;

            display: grid;
            justify-items: center;
            align-items: center;

            & > * {
                grid-area: 1 / 1;
                width: 100%;
                height: 100%;
            }

            & .image {
                background-position: top center;
                background-repeat: no-repeat;
                background-size: cover;
            }

            & .layer {
                background-position: bottom left;
                background-repeat: no-repeat;
                background-size: cover;
            }
        }

        & .note-preview .preview-image::after {
            content: var(--icon-plus-circle);
            font-family: var(--font-icons);
            font-size: 2rem;
            color: rgba(0, 0, 0, 0.4);
            opacity: 0;
            transition: opacity 0.15s;
            grid-area: 1 / 1;
            z-index: 1;
            background-color: hsl(from var(--color-text-default) h s l / 0.5);
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .is-hover & .note-preview:hover .preview-image {}

        .is-hover & .note-preview:hover .preview-image::after {
            opacity: 1;
        }
    }

    &.has-multiple-images .note-preview .preview-image::before {
        content: "\f302";
        /*content: "\f07c";*/
        font-family: var(--font-icons);
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 0.5rem 0.65rem;
        font-size: 1rem;
        color: hsl(from var(--color-text-default) h s l / 0.7);
    }

    & .note-content-wrapper {
        grid-area: 1 / 1 / 2 / 2;
        display: block;
        visibility: hidden;
        padding: 0rem var(--padding-notes-sides);
        height: var(--height-note-closed);
        overflow: hidden;
        opacity: 0;
        transition: opacity var(--time-note-open);

        position: relative;

        border-bottom: 1px solid hsl(from var(--color-text-default) h s l / 0.3);
    }

    /* Close button */
    & .note-content-wrapper .close-button {
        position: absolute;
        top: 1.25rem;
        right: 1rem;
        --_color-button-hover: var(--color-notes-bg);
        opacity: 0.5;
        width: 2rem;
        height: 2rem;
        font-size: 0.7rem;
    }

    &.no-preview .note-content-wrapper .close-button {
        display: none;
    }

    /* Padding to make space for close button */
    &:not(.no-preview) .note-content {
        padding-right: 2.75rem;
    }

    &:last-child .note-content-wrapper {
        border-bottom: none;
    }

    /* Border and padding at top of open contents */
    &:not(.open, .no-preview) + article .note-content-wrapper {
        border-top: 1px solid hsl(from var(--color-text-default) h s l / 0.3);
        margin-top: -1px;
    }

    /* Preview followed by open content */
    &:has(+ .open) .note-preview-wrapper,
    &:has(+ .no-preview) .note-preview-wrapper {
        padding-bottom: calc(2 * var(--padding-note-preview) + 1px);
    }

    &.open .note-preview-wrapper {
        display: none;
        opacity: 0;
    }

    &.open .note-content-wrapper,
    &.no-preview .note-content-wrapper {
        visibility: visible;
        display: block;
        height: auto;
        opacity: 1;
        overflow: visible;
    }

    & .note-content {
        padding-top: 1.5rem;

        & p {
            margin: 0;
        }
    }
}

/*********************************************/
/* NOTE TYPE: META */
.notes article[data-type="meta"] {

    & .note-content-wrapper {
        padding: 0.5rem var(--padding-notes-sides);
        border-bottom: none;
    }
}

/*********************************************/
/* NOTE TYPE: QUOTE */
.notes article[data-type="quote"] {

    & .note-preview .preview-content {
        flex-grow: 1;
        padding: 0.75rem 1.5rem 0 1rem;

        mask-image: linear-gradient(to bottom, black 50%, transparent);
    }

    & .note-preview .preview-content .title {
        font-family: var(--font-note-title);
        font-size: 0.95rem;
        margin-bottom: 0.75em;
        font-weight: 600;

        &::before {
            /*content: var(--icon-quote);*/
            content: var(--_icon);
            font-size: 0.9rem;
            margin-right: 0.5em;
            width: 1.2em;
            display: inline-block;
            text-align: center;
            font-family: var(--font-icons);
            opacity: 0.6;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }
    }

    & .note-preview .preview-content .text {
        font-family: var(--font-note-quote);
        font-size: 0.95rem;
        opacity: 0.7;
    }

    & .note-content-wrapper {
        /* padding-bottom: 0rem; */
    }

    & .note-content {
        /* padding-right: 0rem; */
    }
}

/*********************************************/
/* NOTE TYPE: IMAGE */
.notes article[data-type="image"] {

    & .note-preview .preview-content {
        flex-grow: 1;
        padding: 0.75rem 1.5rem 0.75rem 1rem;

        /*mask-image: linear-gradient(to bottom, black 50%, transparent);*/

        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    & .note-preview .preview-content .title {
        font-family: var(--font-note-title);
        font-size: 0.95rem;
        font-weight: 600;

        & + .text {
            margin-top: 0.75em;
        }
    }

    & .note-preview .preview-content .text {
        font-family: var(--font-note-caption);
        opacity: 0.7;
        max-width: 75%;
        font-weight: 500;
        font-size: 0.8rem;
        font-style: italic;

        &::before {
            content: var(--_icon);
            font-family: var(--font-icons);
            font-size: 0.9rem;
            margin-right: 0.5em;
            width: 1.2em;
            display: inline-block;
            text-align: center;
            opacity: 0.6;
            font-style: normal;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }
    }

    & .note-content-wrapper {
        /* padding-bottom: 1.5rem; */
    }

    & .note-content {}
}

/*********************************************/
/* NOTE CONTENT BLOCKS */
.notes .block {
    & p + p {
        margin-top: 1em;
    }

    & .fn {
        font-family: var(--font-note-footnotes-marker);
        font-weight: 500;
        font-style: normal;
        vertical-align: super;
        color: hsl(from currentColor h s l / 0.5);
        line-height: 1;
        font-size: 0.7rem;
        margin-right: 0.1em;
        margin-left: 0.2em;
        font-feature-settings: var(--font-settings-mono-plain-zero);

        &::before {
            counter-increment: counter-fn-text;
            content: counter(counter-fn-text);
        }
    }
}

.notes .block + .block {
    margin-top: 1rem;
}

.notes .note-content > .block:last-child {
    margin-bottom: 1.5rem;
}

.notes .note-content .block[data-type="source"].has-cover:last-child {
    margin-bottom: 0;
}

.notes .note-content > .block:last-child:has(> .block[data-type="source"].has-cover:last-child) {
    margin-bottom: 0;
}

.notes .block[data-type="title"] + .block[data-type="quote-text"] {
    margin-top: 0.75rem;
}

.notes .block[data-type="caption"] + .block[data-type="source"] {
    margin-top: 0.25rem;
    padding-left: var(--indent-caption);
}

.notes .block[data-type="image"]:has(.block[data-type="caption"]) + .block[data-type="image"] {
    margin-top: 2rem;
}

.notes .block[data-type="quote"] + .block[data-type="quote"] {
    margin-top: 1.5rem;
}

.notes .block[data-type="quote"] + .block[data-type="image"],
.notes .block[data-type="quote"] + .block[data-type="video"] {
    margin-top: 2rem;
}

.notes .block[data-type="quote"]:has(+ .block[data-type="image"]) {
    & .source {
        border-bottom: 1px solid hsl(from currentColor h s l / 0.3);
    }
}

.notes .block[data-type="text"] + .block[data-type="image"] {
    margin-top: 1.5rem;
}

.notes .block[data-type="image"] + .block[data-type="footnotes"],
.notes .block[data-type="caption"] + .block[data-type="footnotes"],
.notes .block[data-type="video"] + .block[data-type="footnotes"] {
    margin-top: 3rem;
}

.notes .block[data-type="quote"] + .block[data-type="footnotes"] {
    margin-top: 1.5rem;
}

.notes .block[data-type="image"] + .block[data-type="quote"],
.notes .block[data-type="image-set"] + .block[data-type="quote"],
.notes .block[data-type="caption"] + .block[data-type="quote"],
.notes .block[data-type="video"] + .block[data-type="quote"] {
    margin-top: 2rem;
}

/* BLOCK TYPES */
.notes .block[data-type="meta"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid hsl(from currentColor h s l / 0.5);
    border-radius: 0.5rem;
    display: flex;
    gap: 0.5rem;

    & .text {
        font-family: var(--font-note-meta);
        font-size: 0.85rem;
    }

    & .icon {
        width: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & .icon::before {
        content: var(--_icon);
        font-family: var(--font-icons);
        font-size: 1.2rem;
        opacity: 0.5;
    }
}

.notes .block[data-type="title"] {
    font-family: var(--font-note-title);
    font-size: 1.35rem;
    max-width: 60ch;
    color: hsl(from currentColor h s l / 0.6);
    font-weight: 600;
    line-height: 1.3;
    /* margin-bottom: 0.75rem; */
}

.notes .block[data-type="quote-text"] {
    font-family: var(--font-note-quote);
    line-height: 1.5;
    border-left: 0.125rem solid hsl(from currentColor h s l / 0.3);
    padding-left: calc(var(--indent-caption) - 0.125rem);
    padding-right: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    font-size: 1.1rem;
    color: hsl(from currentColor h s l / 1.0);
}

.notes .block.style-original .block[data-type="quote-text"] {
    font-family: var(--font-note-quote-original);
    font-size: 0.9rem;
    line-height: 1.7;
    font-weight: 500;
    font-style: italic;
    word-spacing: -0.15em;
    font-feature-settings: var(--font-settings-mono-plain-zero);

    & em {
        font-style: normal;
    }
}

.notes .block.style-decorative .block[data-type="quote-text"] {
    font-family: var(--font-note-quote-original);
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 500;
    font-style: italic;
    word-spacing: -0.15em;
    font-feature-settings: var(--font-settings-mono-plain-zero);

    & em {
        font-style: normal;
    }
}

.notes .block[data-type="source"] {

    &.has-cover {
        display: flex;
        gap: 0rem;

        & .text {
            padding-top: 1rem;
            max-width: 60ch;
        }
    }

    & .text {
        font-family: var(--font-note-source);
        font-weight: 400;
        font-size: 0.75rem;
        line-height: 1.5;
        max-width: 80ch;
        color: hsl(from currentColor h s l / 0.5);

        & a {
            text-decoration: underline;
            color: inherit;

            &:hover {
                color: hsl(from currentColor h s l / 0.8);
            }
        }
    }

    & .cover {
        width: 15rem;
        flex-grow: 0;
        flex-shrink: 0;
        max-height: 12rem;
        overflow: hidden;
        mask-image: linear-gradient(0deg, transparent, black 3rem);
        /*opacity: 0.8;*/

        & img {
            width: 80%;
            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
            transform: rotate(-2.5deg) translate(12%, 8%);
        }
    }
}

.notes .block[data-type="image"] {
    & .image {
        width: 100%;

        & img {
            width: auto;
            max-width: min(40rem, 100%);
            max-height: 35rem;
            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
        }

        & + .source {
            margin-top: 0.75rem;
        }
    }

    &.size-fill .image img {
        width: 100%;
    }

    &.zoom .image {
        cursor: pointer;
    }

    /* source in image blocks */
    & .block[data-type="source"] .text {
        color: hsl(from currentColor h s l / 0.3);
    }
}

.notes .block[data-type="image-set"] {

    & .images {
        display: flex;
        gap: 1rem;

        & > .block {
            flex-grow: 1;
            flex-basis: 0;
            margin-top: 0;
        }
    }
}

.notes .block[data-type="video"] {
    & .video {
        width: 100%;

        & video {
            width: 100%;
            max-width: min(40rem, 100%);
            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
            object-fit: fill;
        }

        & + .source {
            margin-top: 0.75rem;
        }
    }

    /*&.size-fill .video video {
        width: 100%;
    }*/
}

.notes .block[data-type="caption"] {
    margin-top: 0.65rem;
    font-family: var(--font-note-caption);
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.5;
    word-spacing: -0.15em;
    font-feature-settings: var(--font-settings-mono-plain-zero);
    color: hsl(from var(--color-text-default) h s l / 0.85);
    padding-left: var(--indent-caption);
    max-width: 65ch;

    & em {
        font-style: normal;
    }

    & p {
        /* text-wrap-style: balance; */
    }

    & p + p {
        margin-top: 0.15rem;
    }

    & p::before {
        content: var(--_icon, "\f0da");
        /*margin-right: 0.7em;*/
        font-family: var(--font-icons);
        font-size: 0.9em;
        font-style: normal;
        display: inline-block;
        width: var(--indent-caption);
        margin-left: calc(-1 * var(--indent-caption));
        color: hsl(from currentColor h s l / 0.35);
    }
}

.notes .block[data-type="heading"] {
    font-family: var(--font-note-heading);
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 600;

    /* margin-bottom: 0.65em; */
}

.notes .block[data-type="text"] {
    font-family: var(--font-note-text);
    font-size: 1.1rem;
    line-height: 1.4;

    & + .block[data-type="text"] {
        margin-top: 0.65em;
    }
}

.notes .block[data-type="footnotes"] {
    font-family: var(--font-note-footnotes);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.5;
    color: hsl(from currentColor h s l / 0.5);
    max-width: 95ch;

    --_inset-footnotes: 2.4em;
    --_inset-footnotes: var(--indent-caption);

    & p {
        padding-left: var(--_inset-footnotes);
    }

    & p::before {
        counter-increment: counter-fn-list;
        content: counter(counter-fn-list);
        width: var(--_inset-footnotes);
        margin-left: calc(-1 * var(--_inset-footnotes));
        display: inline-block;
        font-family: var(--font-note-footnotes-marker);
        font-feature-settings: var(--font-settings-mono-plain-zero);
        font-weight: 500;
        font-size: 90%;
    }

    & p + p {
        margin-top: 0.5em;
    }

    & a {
        text-decoration: underline;
        color: inherit;

        &:hover {
            color: hsl(from currentColor h s l / 0.8);
        }
    }
}

.notes .block[data-type="recording"] {

    & .audio {
        width: 100%;
        margin-bottom: 0.5rem;
        padding: 0 1.5rem;

        & audio {
            width: 100%;

            &::-webkit-media-controls-panel {
                background-color: #f0e0bd;
            }
        }
    }

    & .transcript {
        font-family: var(--font-note-transcript);
        font-size: 1.3rem;
        font-weight: 500;
        font-style: italic;
        margin-bottom: 0.5rem;
        line-height: 1.35;
        /*border-left: 2px solid hsl(from currentColor h s l / 0.3);*/
        padding-left: 2rem;
        padding-right: 1.5rem;
        color: #f0e0bd;

        & em {
            font-style: normal;
        }

        & p {}

        & p:first-child::before {
            content: var(--icon-recording);
            font-family: var(--font-icons);
            opacity: 0.3;
            display: inline-block;
            font-size: 80%;
            vertical-align: 0.1em;
            margin-left: -2rem;
            width: 2rem;
            font-style: normal;
        }
    }
}

.notes-view .footnotes-print-wrapper {
    counter-reset: counter-fn-list-print;
    display: none;
    pointer-events: none;

    font-family: var(--font-note-footnotes);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-default);
    max-width: 95ch;

    --_inset-footnotes: 2.4em;
    --_inset-footnotes: var(--indent-caption);

    & .content::before {
        content: "";
        width: 12rem;
        border-top: 0.5pt solid hsl(from currentColor h s l / 0.5);
        display: block;
        margin-bottom: 1.5em;
    }

    & p {
        padding-left: var(--_inset-footnotes);
    }

    & p::before {
        counter-increment: counter-fn-list-print;
        content: counter(counter-fn-list-print);
        width: var(--_inset-footnotes);
        margin-left: calc(-1 * var(--_inset-footnotes));
        display: inline-block;
        font-family: var(--font-note-footnotes-marker);
        font-feature-settings: var(--font-settings-mono-plain-zero);
        font-weight: 500;
        font-size: 90%;
    }

    & p + p {
        margin-top: 0.5em;
    }

    & a {
        text-decoration: underline;
        color: inherit;
    }
}

/*********************************************/
/* LIST VIEW FOR NOTES */
.notes-view article .note-list-view-wrapper {
    grid-area: 1 / 1 / 2 / 2;
    /*display: none;
    visibility: hidden;*/
    padding: 0rem var(--padding-notes-sides);
    height: var(--height-note-list-view);
    /*opacity: 1;
    transition: opacity var(--time-note-open);*/
    display: none;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    color: var(--color-text-default);

    &:hover .note-list-view {
        opacity: 1;
    }

    & .note-list-view {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        width: 100%;
        width: calc(100% + 2rem);
        mask-image: linear-gradient(to left, transparent, black 2rem);
        /* mask gradient starts outside view */

        opacity: 0.5;
        transition: opacity 0.15s;

        & .icon {
            flex-grow: 0;
            flex-shrink: 0;
            border-right: 1px solid currentColor;
            padding-right: 0.7rem;
            width: 2.1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;

            &::before {
                content: var(--_icon);
                font-family: var(--font-icons);
                font-size: 1rem;
                opacity: 0.6;
            }
        }

        & .title {
            text-overflow: ellipsis;
            white-space: nowrap;
            flex-grow: 1;
            font-size: 1.1rem;
            font-family: var(--font-serif);
            font-weight: 500;
        }
    }
}

.notes-view article:not(:last-child) .note-list-view-wrapper {
    border-bottom: 1px solid hsl(from var(--color-text-default) h s l / 0.5);
}

/*.notes-view article[data-type="quote"] .note-list-view .icon::before {
    content: var(--icon-quote);
}

.notes-view article[data-type="image"] .note-list-view .icon::before {
    content: var(--icon-image);
}

.notes-view article[data-type="recording"] .note-list-view .icon::before {
    content: var(--icon-recording);
}

.notes-view article[data-type="article"] .note-list-view .icon::before {
    content: var(--icon-article);
}*/

.rfp-player.show-list .notes-view .notes section {
    min-height: auto;
}

/* Force hide other contents in list view */
.rfp-player.show-list .notes-view :is(article, article.open, article.no-preview) {
    & .note-list-view-wrapper {
        display: flex;
    }

    & .note-preview-wrapper {
        display: none;
    }

    & .note-content-wrapper {
        display: none;
    }
}

/*********************************************/
/* NOTES AREA RESIZE HANDLE */
.resize-handle-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--width-notes-area);
    width: var(--gap-main-areas);
    cursor: grab;
    z-index: 900;
    opacity: 0;
    transition: opacity 0.15s;
    transition-delay: 100ms;

    & .touch-area {
        width: 16px;
        position: absolute;
        left: 50%;
        translate: -50% 0;
        height: 100%;
        /*background-color: rgba(255, 0, 0, 0.3);*/
        display: none;
    }

    & .handle-bg {
        position: absolute;
        left: 50%;
        translate: -50% 0%;
        width: 100%;
        height: 100%;
        background-color: hsl(from currentColor h s l / 0.8);
        opacity: 1;
    }

    & .handle {
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        width: 16px;
        height: 3.0rem;
        border-radius: 16px;
        background-color: hsl(from currentColor h s l / 1);
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.15s;

        &::after {
            content: "\f7a5";
            font-family: var(--font-icons);
            font-size: 0.8rem;
            color: var(--color-bg);
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }
    }

    & .header-handle {
        --_handle-size: calc(var(--height-player-header) - 1.4rem);
        height: var(--_handle-size);
        width: 1.5rem;
        position: absolute;
        top: calc(var(--height-page-header) + 0.5 * var(--height-player-header) + var(--gap-main));
        left: 0;
        translate: -100% -50%;
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
        background-color: var(--color-bg);
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 0px;
        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
        background-color: transparent;
        display: none;

        &::after {
            content: "\f7a5";
            font-family: var(--font-icons);
            font-size: 0.8rem;
            color: hsl(from currentColor h s l / 0.3);
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }
    }

    .rfp-player:not(.has-started) & {
        & .handle-bg {}
    }

    &.hover {
        opacity: 1;

        & .handle-bg {
            opacity: 1;
        }
    }

    &.active {
        opacity: 1;

        & .touch-area {
            display: block;
        }

        & .handle {
            opacity: 1;
        }
    }
}

.rfp-player.is-resizing {
    & * {
        cursor: grabbing;
    }

    & .notes-area {
        opacity: 0.3;
    }

    & .video-area {
        opacity: 0.3;
    }
}

/*********************************************/
/* ICON SETTINGS (applied to previews, list view, timeline) */
*[data-type="meta"],
*[data-icon="meta"] {
    --_icon: var(--icon-meta);
}

*[data-type="quote"],
*[data-icon="quote"] {
    --_icon: var(--icon-quote);
}

*[data-type="image"],
*[data-icon="image"] {
    --_icon: var(--icon-image);
}

*[data-type="caption"] {
    /*--_icon: "\f0da";*/
    --_icon: "\e3d6";
}

*[data-type="article"] {
    --_icon: var(--icon-text);
}

*[data-type="recording"],
*[data-icon="recording"] {
    --_icon: var(--icon-recording);
}

*[data-icon="text"] {
    --_icon: var(--icon-text);
}

*[data-icon="camera"] {
    --_icon: var(--icon-camera);
}

*[data-icon="film"] {
    --_icon: var(--icon-film);
}

*[data-icon="shuffle"] {
    --_icon: var(--icon-shuffle);
}

*[data-icon="reel"] {
    --_icon: var(--icon-reel);
}

*[data-icon="film-camera"] {
    --_icon: var(--icon-film-camera);
}

*[data-icon="video"] {
    --_icon: var(--icon-video);
}

*[data-icon="document"] {
    --_icon: var(--icon-document);
}

*[data-icon="article"] {
    --_icon: var(--icon-article);
}

*[data-icon="external"] {
    --_icon: "\f08e";
}

*[data-icon="quotation"] {
    --_icon: "\f10e";
}


/*********************************************/
/* BIBLIOGRAPHY OVERLAY */
.bibliography-overlay {
    position: absolute;
    top: calc(var(--height-notes-area-handle-bar) + var(--height-notes-area-header) + var(--gap-notes-area-header));
    left: 0;
    right: 0;
    bottom: var(--height-notes-footer);
    /* Above go-to-current button */
    z-index: 100;
    background-color: var(--color-notes-bg);
    color: var(--color-text-default);
    display: none;

    .show-bibliography & {
        display: block;
    }

    & .bibliography-content {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        padding-top: 0rem;
        padding-left: var(--padding-notes-sides);
        padding-right: calc(var(--padding-notes-sides) + var(--size-circle-button) + 1.5rem);
        padding-bottom: 3rem;

        & .header {
            height: var(--height-player-header);
            display: flex;
            align-items: center;

            & .title {
                font-family: var(--font-slab);
                font-size: var(--font-size-player-header);
                font-weight: 600;
                color: hsl(from var(--color-text-default) h s l / 0.8);
                letter-spacing: 0.01em;
            }
        }


        & .content {
            font-family: var(--font-serif);
            font-size: 0.95rem;

            & > div:not(:empty) + div {
                margin-top: 1rem;
            }
        }

        & .text-before:empty {
            display: none;
        }

        & .text-after:empty {
            display: none;
        }

        & .references {
            & p {
                padding-left: 1.25rem;

                &::before {
                    content: var(--icon-bibliography);
                    font-family: var(--font-icons);
                    opacity: 0.3;
                    width: 1.25rem;
                    margin-left: -1.25rem;
                    display: inline-block;
                    font-size: 85%;
                }
            }
        }

        & p + p {
            margin-top: 0.75em;
        }
    }

    & .close-button {
        position: absolute;
        top: 1rem;
        right: var(--padding-notes-sides);
        --_color-button-hover: var(--color-notes-bg);
        opacity: 0.6;
    }
}

/*********************************************/
/* ANNOTATION INFO OVERLAY */
.annotation-info-overlay {
    position: absolute;
    top: calc(var(--height-notes-area-handle-bar) + var(--height-notes-area-header) + var(--gap-notes-area-header));
    left: 0;
    right: 0;
    bottom: var(--height-notes-footer);
    /* Above go-to-current button */
    z-index: 100;
    background-color: var(--color-notes-highlight);
    color: var(--color-text-default);
    display: none;

    .show-info & {
        display: block;
    }

    & .annotation-info-content {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        padding-top: 0;
        padding-left: var(--padding-notes-sides);
        padding-right: calc(var(--padding-notes-sides) + var(--size-circle-button) + 1.5rem);
        padding-bottom: 3rem;

        & .header {
            height: var(--height-player-header);
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            border-bottom: 1px solid hsl(from currentColor h s l / 0.3);

            & .title {
                font-family: var(--font-slab);
                font-size: var(--font-size-player-header);
                font-weight: 600;
                color: hsl(from var(--color-text-default) h s l / 0.8);
                letter-spacing: 0.01em;
            }
        }


        & .content {

            & > div:empty {
                display: none;
            }

            & .title {
                font-family: var(--font-annotation-title);
                font-size: 1.5rem;
                font-weight: 600;
                line-height: 1.2;
                padding-top: 0.65rem;
            }

            & .subtitle {
                font-family: var(--font-annotation-title);
                font-size: 1.5rem;
                line-height: 1.2;
            }

            & .authors {
                margin-top: 0.3rem;
                font-family: var(--font-serif);
                font-size: 0.9rem;
                color: hsl(from currentColor h s l / 0.6);
            }

            & .description {
                margin-top: 0.5rem;
                font-family: var(--font-serif);
                font-size: 1.1rem;
            }

            & .credits {
                margin-top: 1.5rem;
                font-family: var(--font-serif);
                font-size: 1rem;
                color: hsl(from currentColor h s l / 0.75);

                & img {
                    width: 11rem;
                    float: left;
                    margin-right: -1.5rem;
                    margin-bottom: -1rem;
                }
            }

            & .bios {
                margin-top: 1.5rem;
                font-family: var(--font-serif);
                font-size: 0.95rem;
                color: hsl(from currentColor h s l / 0.6);
                border-top: 1px solid hsl(from currentColor h s l / 0.3);
                padding-top: 1.5rem;
            }

            & p + p {
                margin-top: 0.75em;
            }

            & h6 {
                font-size: inherit;
                margin: 0;
                font-weight: 600;
                margin-top: 0.75em;
                clear: both;
            }
        }
    }

    & .close-button {
        position: absolute;
        top: 1rem;
        right: var(--padding-notes-sides);
        --_color-button: var(--color-notes-bg);
        --_color-button: var(--color-text-default);
        --_color-button-hover: var(--color-notes-highlight);
        opacity: 0.6;
    }
}

/*********************************************/
/* GO-TO-CURRENT BUTTON */
.notes-view .current-button {
    position: absolute;
    font-size: var(--font-size-ui-buttons);
    font-family: var(--font-ui-mono);
    bottom: calc(var(--height-notes-footer) + 1rem);
    left: 50%;
    translate: -50%;
    line-height: 1;
    z-index: 99;
    pointer-events: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;

    &.active {
        pointer-events: all;
        opacity: 1.0;
    }

    & div {
        height: var(--height-current-button);
        display: flex;
        gap: 0.7em;
        align-items: center;
        padding: 0em 1.2em;
        border-radius: 3em;
        box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.4);
        background-color: var(--color-notes-bg-current);
        border: 1px solid hsl(from var(--color-text-default) h s l / 0.3);
        color: hsl(from var(--color-text-default) h s l / 0.5);

        &::before {
            content: "\f079";
            font-family: var(--font-icons);
            font-size: 1.25em;
            opacity: 0.5;
        }

        .is-hover &:hover {
            background-color: var(--color-notes-header-bg-current);
            color: var(--color-text-default);
        }

        .is-touch & {
            background-color: var(--color-notes-header-bg-current);
            color: var(--color-text-default);
        }
    }
}

.notes-view .scroll-dither {
    position: absolute;
    width: 100%;
    height: 3rem;
    bottom: calc(var(--height-notes-footer));
    left: 0;
    z-index: 90;
    pointer-events: none;
    transition: opacity 0.3s;
    background: linear-gradient(to top, var(--color-bg) 0%, hsl(from var(--color-bg) h s l / 0.738) 19%, hsl(from var(--color-bg) h s l / 0.541) 34%, hsl(from var(--color-bg) h s l / 0.382) 47%, hsl(from var(--color-bg) h s l / 0.278) 56.5%, hsl(from var(--color-bg) h s l / 0.194) 65%, hsl(from var(--color-bg) h s l / 0.126) 73%, hsl(from var(--color-bg) h s l / 0.075) 80.2%, hsl(from var(--color-bg) h s l / 0.042) 86.1%, hsl(from var(--color-bg) h s l / 0.021) 91%, hsl(from var(--color-bg) h s l / 0.008) 95.2%, hsl(from var(--color-bg) h s l / 0.002) 98.2%, transparent 100%);

    &.hide {
        opacity: 0;
    }
}

/*********************************************/
/* NOTES FOOTER */
.notes-footer {
    height: var(--height-notes-footer);
    padding-top: var(--gap-main);
    flex-grow: 0;
    flex-shrink: 0;
    background-color: var(--color-bg);
}

.notes-footer .footer-content {
    width: 100%;
    height: 100%;
    background-color: var(--color-notes-area-footer-bg);
    display: flex;
    gap: var(--gap-main);
    gap: 0;
    justify-content: space-between;

    & .button-group-options {
        display: flex;

        & .footer-button {
            --_color-button: var(--color-text-default);
            display: flex;
            align-items: center;
            /*padding: 0 1rem 0 0.8rem;*/
            padding: 0 var(--padding-notes-sides);
            font-size: var(--font-size-ui-buttons);
            font-family: var(--font-ui-mono);
            background-color: var(--color-notes-area-footer-button-bg);
            color: hsl(from var(--_color-button) h s l / 0.4);
            cursor: pointer;
            gap: 0.75em;
            border-right: 1px solid var(--color-bg);
            white-space: nowrap;

            &::before {
                content: "";
                width: 1.15em;
                height: 1.15em;
                border: 1px solid currentColor;
                padding: 1.5px;
                background-clip: content-box;
                border-radius: 1rem;
            }

            &.forced::before {
                color: var(--color-notes-highlight);
            }

            &.active {}

            &.active::before {
                background-color: currentColor;
            }

            &:hover {
                color: var(--_color-button);
                background-color: var(--color-notes-bg-current);
            }
        }
    }

    & .button-group-bibliography {
        display: flex;
        flex-grow: 1;

        & .button-bibliography {
            --_color-button: var(--color-text-default);
            align-items: center;
            padding: 0 1rem 0 0.8rem;
            font-size: var(--font-size-ui-buttons);
            font-family: var(--font-ui-mono);
            background-color: rgba(255, 255, 255, 0.1);
            background-color: transparent;
            color: hsl(from var(--_color-button) h s l / 0.5);
            cursor: pointer;
            gap: 0.65em;
            flex-grow: 1;
            display: none;

            .has-bibliography & {
                display: flex;
            }

            &::before {
                content: var(--icon-bibliography);
                font-family: var(--font-icons);
                font-size: 100%;
            }

            &:hover {
                color: var(--_color-button);
                background-color: rgba(255, 255, 255, 0.2);
            }

            .show-bibliography & {
                color: var(--_color-button);
                background-color: rgba(255, 255, 255, 0.2);
            }
        }
    }
}

/*********************************************/
/* GLOBAL TOOLTIP */
.tooltip {
    display: none;
    position: absolute;

    pointer-events: none;
    user-select: none;
    white-space: nowrap;

    font-family: var(--font-ui-mono);
    color: var(--color-bg);
    background-color: var(--color-text-default);

    font-size: var(--font-size-ui-buttons);
    line-height: 1.3;

    margin: var(--gap-main) 0;

    box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.3);

    align-items: center;
    padding: 0 1rem;
    height: var(--height-page-header);

    z-index: 9999;
}

.tooltip.show {
    display: flex;
}

/* Custom color settings for tooltips. Elements need to have the same data attribute.*/
.tooltip[data-tooltip-color="notes-highlight"] {
    background-color: var(--color-notes-highlight);
}

/*********************************************/
/* MOBILE SETTINGS */
@media only screen and (max-width: 768px) {
    :root {
        --gap-main: 3px;
        --height-page-header: 2.2rem;
        --height-notes-area-header: 2.5rem;
        --gap-notes-area-header: 1.5px;
        --height-player-header: 4.7rem;
        --height-notes-footer: 0px;
        --height-notes-area-handle-bar: 3.25rem;
        --height-current-button: 2.5rem;

        --width-controls: 4rem;
        --height-timeline: 4.5rem;
        --height-timeline-track: 8px;
        --size-timeline-thumb: 15px;

        --width-video: 100vw;
        --optimal-height-video: calc(var(--width-video) * var(--film-aspect));
        --height-video: var(--optimal-height-video);

        --height-video-area: calc(var(--height-page-header) + var(--height-player-header) + var(--height-video) + var(--height-timeline) + 2 * var(--gap-main));

        --height-notes-area: calc(100dvh - var(--height-video-area) - var(--gap-main-areas));
        --height-notes-area-open: calc(100dvh - var(--height-page-header) - var(--gap-main));

        --font-size-player-header: 1.25rem;
        --font-size-ui-buttons: 0.85rem;
        --font-size-scene-header: 1.25rem;
    }

    html {
        font-size: 2.75vw;
    }

    body {}

    .rfp-player {
        display: block;
    }

    .video-area {
        width: 100vw;
        overflow: hidden;

        & .video-wrapper {
            & .original {
                video {
                    width: 100%;
                    height: var(--height-video);
                }
            }
        }

        & .start-indicator {
            transition-duration: 0.2s;

            .rfp-player:not(:is(.is-playing, .is-auto-pausing)) & {
                opacity: 1;
            }

            & .video-effect {
                background: radial-gradient(closest-corner, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1.0));
            }

            & .icon {
                background-color: hsl(from var(--color-text-default) h s l / 0.9);
            }

            & .info-box {
                display: none;
            }
        }

        & .timeline-wrapper {
            & .controls {
                padding: 0.2rem 0.25rem;
                padding-left: calc(0.25rem + var(--gap-main));
                padding-bottom: 0.25rem;

                & .play-button {
                    font-size: 0.9rem;
                }
            }

            & .timeline {
                & .scenes {
                    & .scene {
                        width: auto;
                        flex-basis: 0;
                        min-width: 0;

                        & .scene-timeline {
                            & .track-touch-area {
                                height: calc(var(--height-timeline-track) + 2 * var(--gap-main));
                            }
                        }

                        & .scene-content {
                            & .thumbnail {
                                flex-grow: 1;
                                height: auto;
                            }

                            & .note-icons {
                                display: none;

                                & .icons {
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .notes-area {
        position: fixed;
        z-index: 1000;
        bottom: 0;
        left: 0;
        height: var(--height-notes-area);
        width: 100%;
        box-shadow: 0 0rem 1.5rem 1rem rgba(0, 0, 0, 0.5);
        transition: height var(--time-notes-area-open-mobile);
        transition-timing-function: linear(0, 0.652 14.4%, 0.858 22.6%, 0.988 31.6%, 1.061 48.8%, 1);
        transition-timing-function: cubic-bezier(0.275, 1.341, 0.64, 1);
        transition-timing-function: cubic-bezier(0.095, 1.273, 0.655, 1.003);
        will-change: height;
        border-top-left-radius: var(--_radius-top);
        border-top-right-radius: var(--_radius-top);

        .rfp-player.is-notes-open & {
            height: var(--height-notes-area-open);
        }

        & .notes-area-handle-bar {
            display: grid;
        }

        & .notes-area-header {
            & .header-button {
                &:first-child {
                    border-top-left-radius: 0;
                }

                &:last-child {
                    border-top-right-radius: 0.5rem;
                }
            }
        }

        & .notes article {
            & .note-content-wrapper {
                & .close-button {
                    width: 2.5rem;
                    height: 2.5rem;
                    font-size: 0.85rem;
                }
            }
        }

        & .current-button {
            bottom: 2rem;
        }

        & .notes-footer {
            display: none;
        }
    }

    .resize-handle-bar {
        display: none;
    }
}

/*********************************************/
/* TOUCH SETTINGS */
@media (hover: none) {}

/*********************************************/
/* PRINT SETTINGS */
@media print {
    :root {
        --color-bg: #FFF;
        --color-text-default: #000;
        --color-notes-bg-default-dark: #FFF;
        --color-notes-bg-default-light: #FFF;
        --color-notes-bg: #FFF;
        --color-notes-bg-current: #FFF;
        --color-notes-header-bg: #FFF;
        --color-notes-header-bg-current: #FFF;
        --color-notes-title: #000;
        --color-notes-title-current: #000;
        --color-notes-header-title: #000;
        --color-notes-header-title-current: #000;
        --padding-notes-sides: 0;
    }

    html {
        font-size: 9pt;
    }

    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        max-width: 85%;
        overflow: auto;
    }

    .notes-area {
        height: auto !important;
        overflow: visible;
        display: block;

        & .notes-view {
            margin-left: 0;
            display: block;
            height: auto;
        }
    }

    .page-header,
    .video-area,
    .notes-footer,
    .notes-header .list-button,
    .notes-header .info-button,
    article .close-button,
    .notes-area .menu-view,
    .notes-area .scroll-dither,
    .notes-area .current-button {
        display: none !important;
    }

    section .scene-header {
        break-before: page;

        height: auto !important;
        border-top: 1.5pt solid hsl(from currentColor h s l / 0.5) !important;
        border-bottom: 0.5pt solid hsl(from currentColor h s l / 0.5) !important;
        margin-top: 0rem;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        box-shadow: none !important;

        & .scene-preview {
            & img {
                height: 4.5rem !important;
                box-shadow: none !important;
            }
        }

        & .scene-info .scene-title {
            font-size: 1.2rem;

            & .number {
                opacity: 1.0;
            }
        }

        & .scene-info .scene-time {
            display: block !important;
            opacity: 1.0 !important;
            font-size: 0.9rem;
        }
    }

    section:first-of-type .header,
    section.empty .header {
        break-before: auto;
    }

    /* If first section is empty, don't break before the next */
    section:first-of-type.empty + section .header {
        break-before: auto;
    }

    .has-bibliography .bibliography-overlay {
        display: block;
        position: static;
        break-before: page;

        & .close-button {
            display: none;
        }
    }

    .notes-view .footnotes-print-wrapper {
        display: block;
        position: static;
        break-before: page;

        &:has(.content:empty) {
            display: none;
        }
    }

    .notes article {

        & .note-preview-wrapper {
            display: none;
            opacity: 0;
        }

        & .note-content-wrapper {
            visibility: visible;
            display: block;
            height: auto;
            opacity: 1;
            overflow: visible;
            border: none !important;
        }

        & .note-content {
            padding-right: 0 !important;
        }

        + article {
            margin-top: 0rem;
            border-top: 0pt solid hsl(from currentColor h s l / 0.3);

            & .note-content {
                border-top: 0.5pt solid hsl(from currentColor h s l / 0.3);

                /* Keep line above article with first title element when breaking pages */
                &:has(> .block[data-type="title"]:first-child) {
                    border-top: none;
                    padding-top: 1pt;

                    & .block[data-type="title"]:first-child {
                        padding-top: 1.5rem;
                        border-top: 0.5pt solid hsl(from currentColor h s l / 0.3);
                    }
                }
            }
        }

        &:has(+ article) {
            padding-bottom: 2.0rem;
        }
    }

    .notes .block[data-type="title"] {
        break-after: avoid;
        color: currentColor;
        max-width: none;

        &:empty {
            display: none;
        }

        &:has(p:empty) {
            display: none;
        }
    }

    .notes .block[data-type="quote"] {}

    .notes .block[data-type="image-set"] {
        width: fit-content;
        max-width: 100%;
    }

    .notes .block[data-type="image"] {
        break-inside: avoid;

        & .image img {
            box-shadow: none;
            border: 0.5pt solid hsl(from currentColor h s l / 0.5);
            max-height: 18rem;
        }

        &.size-fill .image img {
            width: auto;
        }
    }

    .notes .block[data-type="video"] {
        & .video {
            & video {
                box-shadow: none;
                border: 0.5pt solid hsl(from currentColor h s l / 0.5);
                width: auto;
                max-height: 18rem;
            }
        }
    }

    .notes .block[data-type="recording"] {
        & .audio {
            display: none;
        }

        & .transcript {
            color: var(--color-text-default) !important;
        }
    }

    .notes .block[data-type="caption"] {
        break-before: avoid;
        color: currentColor;
    }

    .notes .block[data-type="footnotes"] {
        display: none;
    }

    .notes .block .fn {
        color: currentColor;
    }
}

@page {
    margin: 1.25cm 1.5cm 2.25cm 1.5cm;

    @bottom-left {
        content: counter(page) " / " counter(pages);
        font-family: var(--font-default);
        font-size: 0.75rem;
        color: currentColor;
    }
}