@media all {
  /*-----------------------------------------------------------------------------------------------*/
  /* Variables
  /*-----------------------------------------------------------------------------------------------*/
  @media all {
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    :root {
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
      --background-bottom-glow:  radial-gradient(ellipse at center bottom, white 15%, rgba(255,255,255,0) 70%);
      --background-bottom-overlay-text: radial-gradient(ellipse at center bottom,rgba(0,0,0,.75) 15%,rgba(0,0,0,0) 70%);
      --background-color: #f3f3f3;
      --background-color-contrast: rgba(255,255,255,.5);
      --background-color-elevated: white;
      --background-color-faded: rgba(255, 255, 255, 0);
      --background-color-hover: white;
      --background-color-lowered: rgba(0,0,0,.03);
      --background-color-overlay: rgba(255,255,255,.75);
      --background-color-overlay-button: rgba(255,255,255,.75);
      --background-color-overlay-button-hover: rgba(255,255,255,.9);
      --background-color-overlay-elevated: white;
      --background-color-overlay-nav: white;
      --background-highlight-glow:  radial-gradient(ellipse at center, yellow, transparent 50%);
      --background-overlay-image: rgba(0,0,0,.25);
      --background-overlay-image-hover: rgba(0,0,0,.5);
      --background-overlay-image-light: rgba(0,0,0,.075);
      --background-primary: linear-gradient(to right, var(--font-color-primary-from), var(--font-color-primary-to));
    
      --body-min-width: 320px;
    
      --border-color: rgba(0,0,0,.16);
      --border-color-light: rgba(0,0,0,.08);
      --border-color-highlight: rgba(0,0,0,.3);
      --border-radius: 20px;
      --border-radius-max: 2em;
      --border-radius-min: 7px;
    
      --button-border-size: 2px;
      --button-border-size-nav: 3px;

      --detailsheet-height: min(70vmin, 700px);
      --detailsheet-nav-height: 84px;

      --flick-bg:rgba(0,0,0,.87);
      --flick-height: 225px;
      --flick-height-large: 300px;
      --flicklist-item-aspect-ratio: 342/513;

      --font-color: rgba(0,0,0,.75);
      --font-color-contrast: white;
      --font-color-disabled: rgba(0,0,0,.1);
      --font-color-disguised: rgba(0,0,0,.025);
      --font-color-max: black;
      --font-color-nav: rgba(0,0,0,.6);
      --font-color-light: rgba(0,0,0,.45);
      --font-color-primary: #ff0055;
      --font-color-primary-from: #ff0033;
      --font-color-primary-to: #ff0077;
    
      --font-size-medium: 1.25rem;
      --font-size-large: 1.5rem;
      --font-size-larger: 1.75rem;

      --font-weight-bold: 600;

      --icon-height: 24px;
    
      --image-gray-filter: grayscale(1);
      
      --intro-animation-time: 1.5s;
    
      --mood-color: rgba(255,255,255,.75);
    
      --nav-height: 40px;

      --opacity-overlay: .75;
      --opacity-active: .5;
      --opacity-disabled: .2;

      --outline-glas: 4px solid rgba(255,255,255,.1);
    
      --overlay-action-size: min(100px, max(7vw, 5vh));
      --overlay-action-secondary-size: calc(var(--overlay-action-size)/2);
      --overlay-margin: .5rem;
    
      --shadow: 0px 2px 5px 0 rgba(0,0,0,0.2);
      --shadow-elevated: 0px 5px 10px 0 rgba(0,0,0,0.2);
      --shadow-highlight: 0px 0 15px 3px yellow;
      --shadow-inset: inset 0 1px 5px 0 rgba(0,0,0,.1);
      --shadow-nav: 0px 0px 15px 5px rgba(0,0,0,0.1);
      --shadow-overlay: 0px 11px 22px rgba(0,0,0,0.16);
      --shadow-overlay-button: 0 2px 5px 0 rgba(0,0,0,.1);
      --shadow-overlay-glow: 0px 3px 50px rgba(0,0,0,0.1);
      --shadow-overlay-image: 0px 11px 22px rgba(0,0,0,0.1);
      --shadow-overlay-light: 0px 3px 22px rgba(0,0,0,0.1);
      --shadow-sheet: 0px -5px 10px 5px rgba(0,0,0,.1);

      --size-content: 500px;
      --size-footer: 4.5rem;
      --size-overlay-minWidth: 550px;
      --size-person: 150px;
      --size-scrollbar: 10px;
      --size-switch: 25px;
    
      --space-button: .75em;
      --space-mini: .25rem;
      --space-tiny: .5rem;
      --space-small: 1rem;
      --space-normal: 2rem;
      --space-large: 5rem;
      --space-huge: 10rem;
    
      --trailer-width: max(min(calc(.85 * var(--vw)), var(--video-width-max)), var(--body-min-width) * .85);
      --trailer-height: calc(var(--trailer-width) / 16 * 9);
    
      --transform-zoom: scale(1.1);
      --transform-zoom-more: scale(1.2);
      
      --transition-time: .25s;
      --transition-time-fast: .125s;
      --transition-time-slow: 1s;
    
      --video-width-max: 1280px;
      --vw: 100vw;

      --watchlist-item-width: 148px;
      --watchlist-item-height: 222px;
    
      --z-index-nav-overlap:1;
      --z-index-flick-active:10;
      --z-index-floating-button:20;
      --z-index-floating-nav:30;
      --z-index-footer:50;
      --z-index-overlay:60;
      --z-index-header:100;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    html.fullscreen {
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
      --video-width-max: 100vw;
    }
  }
  @media (max-device-width: 900px) {
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    :root {
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
      --overlay-action-secondary-size: var(--overlay-action-size);
      
      --space-mini: .4rem;
      --space-normal: 1rem;
      --space-large: 2rem;

      --watchlist-item-width: 136px;
      --watchlist-item-height: 204px;

    }
  }
  @media (pointer: coarse) {
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    :root {
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
      --size-scrollbar: 0px;
    }
  }
  @media (prefers-color-scheme: dark) {
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    :root {
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
      --background-bottom-glow:  radial-gradient(ellipse at center bottom, rgba(255,255,255,.1) 15%, rgba(255,255,255,0) 70%);

      --background-color: rgb(32, 33, 36);
      --background-color-contrast: rgba(0,0,0,.5);
      --background-color-elevated:rgb(41, 42, 46);
      --background-color-faded: rgba(0, 0, 0, 0);
      --background-color-hover: rgb(28, 29, 33);

      --background-color-lowered: rgba(0,0,0,.2);
      --background-color-overlay: rgba(0,0,0,.75);
      --background-color-overlay-elevated: rgba(255,255,255,.05);
      --background-color-overlay-nav: var(--background-color-overlay);

      --border-color:rgba(255,255,255,.16);
      --border-color-light: rgba(255,255,255,.06);
      --border-color-highlight:rgba(255,255,255,.35);

      --flick-bg:rgb(41, 42, 46);

      --font-color: rgba(255,255,255,.87);
      --font-color-contrast: black;
      --font-color-disabled: rgba(255,255,255,.1);
      --font-color-disguised: rgba(255,255,255,.025);
      --font-color-max: white;
      --font-color-nav: rgba(255,255,255,.6);
      --font-color-light: rgba(255,255,255,.45);

      --image-gray-filter: grayscale(1) brightness(2.5);

      --mood-color: rgba(0,0,0,.75);

      --shadow-overlay-button: 0 2px 5px 0 rgba(0,0,0,.5);
      --shadow-overlay-image: 0px 11px 22px rgba(0,0,0,0.5);
    }
  }


  /*-----------------------------------------------------------------------------------------------*/
  /* Keyframes
  /*-----------------------------------------------------------------------------------------------*/
  @media all {
    /* --------------------------------------------------------- */
    @keyframes fadeIn {
    /* --------------------------------------------------------- */
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    /* --------------------------------------------------------- */
    @keyframes loading {
    /* --------------------------------------------------------- */
      from, to {
        background: var(--background-color);
      }
      50% {
        background: var(--font-color-disabled);
      }
    }
    /* --------------------------------------------------------- */
    @keyframes plopIn {
    /* --------------------------------------------------------- */
      from {
        transform: scale(0);
      }
      to {
        transform: scale(1);
      }
    }
    /* --------------------------------------------------------- */
    @keyframes searchSlideOut {
    /* --------------------------------------------------------- */
      from {
        min-height: 0;
      }
      to {
        min-height: 50vh;
      }
    }
    /* --------------------------------------------------------- */
    @keyframes slideAwayFooter {
    /* --------------------------------------------------------- */
      from {
        bottom: -100vh;
      }
      to {
        bottom: calc(-100vh - var(--size-footer));
      }
    }
    /* --------------------------------------------------------- */
    @keyframes slideInFooter {
    /* --------------------------------------------------------- */
      from {
        bottom: calc(-100vh - var(--size-footer));
      }
      to {
        bottom: -100vh;
      }
    }
    /* --------------------------------------------------------- */
    @keyframes slideInFooterOverlay {
    /* --------------------------------------------------------- */
      from {
        bottom: -150vh;
      }
      to {
        bottom: -100vh;
      }
    }
    /* --------------------------------------------------------- */
    @keyframes slideInHeader {
    /* --------------------------------------------------------- */
      from {
        top: -50vh;
      }
      to {
        top: 0;
      }
    }
    /* --------------------------------------------------------- */
    @keyframes spin {
    /* --------------------------------------------------------- */
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }    
  }


  /*-----------------------------------------------------------------------------------------------*/
  /* Global
  /*-----------------------------------------------------------------------------------------------*/
  @media all {
    /* --------------------------------------------------------- */
    * {
    /* --------------------------------------------------------- */
      box-sizing: inherit;
      user-select: none;

      color: var(--font-color);
      font-family: 'Ubuntu Condensed', Arial, Helvetica;
    }
    /* --------------------------------------------------------- */
    [x-cloak] {
    /* --------------------------------------------------------- */
      display: none;
    }
    /* --------------------------------------------------------- */
    [popover]{
    /* --------------------------------------------------------- */
      margin: 0;
      position: absolute;
      position-anchor: --popover;
      position-area: center right;
      position-try-fallbacks: flip-block, flip-inline;
    }
    /* --------------------------------------------------------- */
    [popovertarget]{
    /* --------------------------------------------------------- */
      anchor-name: --popover;
    }
    /* --------------------------------------------------------- */
    html {
    /* --------------------------------------------------------- */
      box-sizing: border-box;
      font-size: 18px;
    }
  }
  @media (pointer: coarse) {

    /* --------------------------------------------------------- */
    ::-webkit-scrollbar {
    /* --------------------------------------------------------- */
      display: none;
    }
  }
  /*-----------------------------------------------------------------------------------------------*/
  @media (prefers-reduced-motion: no-preference){
    /* --------------------------------------------------------- */
    @view-transition {
    /* --------------------------------------------------------- */
      navigation: auto;
    }

    /* --------------------------------------------------------- */
    html {
    /* --------------------------------------------------------- */
        scroll-behavior: smooth;
    }
  }
  /*-----------------------------------------------------------------------------------------------*/
  @media (hover: hover) and (pointer: fine) {
    /* --------------------------------------------------------- */
    ::-webkit-scrollbar {
    /* --------------------------------------------------------- */
      height: var(--size-scrollbar);
      width: var(--size-scrollbar);
    }
    /* --------------------------------------------------------- */
    ::-webkit-scrollbar-track {
    /* --------------------------------------------------------- */
      background-color: var(--background-color);
    }
    /* --------------------------------------------------------- */
    ::-webkit-scrollbar-thumb {
    /* --------------------------------------------------------- */
      background: transparent;
      border-radius: 5px;
    }
      /* --------------------------------------- */
      :hover::-webkit-scrollbar-thumb {
      /* --------------------------------------- */
        background: var(--font-color-disabled);
      }
      /* --------------------------------------- */
      ::-webkit-scrollbar-thumb:hover {
      /* --------------------------------------- */
        background: var(--font-color-light);
      }
      /* --------------------------------------- */
      ::-webkit-scrollbar-thumb:active {
      /* --------------------------------------- */
        background: var(--font-color-nav);
      }
  }


  /*-----------------------------------------------------------------------------------------------*/
  /* Elements
  /*-----------------------------------------------------------------------------------------------*/
  @media all {
    /* --------------------------------------------------------- */
    a {
    /* --------------------------------------------------------- */
      text-decoration: none;

      /* --------------------------------------- */
      &.big {
      /* --------------------------------------- */
        padding: var(--space-tiny);

        /* ------------------------------------- */
        img {
        /* ------------------------------------- */
          transform: var(--transform-zoom-more);
        }
      }
      /* --------------------------------------- */
      &.button {
      /* --------------------------------------- */
        padding: var(--space-button);        
      }
      /* --------------------------------------- */
      &.disclaimer {
      /* --------------------------------------- */
        color: var(--font-color-disabled);
      }
      /* --------------------------------------- */
      &.primary {
      /* --------------------------------------- */
        color: var(--font-color-primary);
        font-weight: bold;
      }
      /* --------------------------------------- */
      &:active {
      /* --------------------------------------- */
        opacity: .9;
        transform: scale(.9) !important;
      }
      /* --------------------------------------- */
      &.active {
      /* --------------------------------------- */
        font-weight: var(--font-weight-bold);

        color: var(--font-color-max);
      }
      /* --------------------------------------- */
      img.icon {
      /* --------------------------------------- */
        vertical-align: middle;
        transition: var(--transition-time-fast);
      }
    }
    /* --------------------------------------------------------- */
    b {
    /* --------------------------------------------------------- */
      font-weight: bold;
    }
    /* --------------------------------------------------------- */
    body {
    /* --------------------------------------------------------- */
      --paddingBottom: 15rem;

      margin: 0;
      min-height: calc(100vh - var(--paddingBottom));
      min-width: var(--body-min-width);
      overflow-y: scroll;
      padding-bottom: var(--paddingBottom);
      text-align: center;

      background: var(--background-color-elevated);
      background: linear-gradient(to bottom, var(--background-color), var(--background-color-elevated));
      background-attachment: fixed;
      color: var(--font-color);
      cursor: default;
    }
    /* --------------------------------------------------------- */
    button {
    /* --------------------------------------------------------- */
      border-radius: 2em;
      font-size: 1rem;
      padding: var(--space-button);

      background: transparent;
      border: none;
      cursor: pointer;

      transition: all .25s, transform .1s;

      /* --------------------------------------- */
      &:active:not(:disabled) {
      /* --------------------------------------- */
        box-shadow: var(--shadow-inset) !important;
        opacity: .9 !important;
        transition-duration: var(--transition-time-fast);
      }
      /* --------------------------------------- */
      &:disabled {
      /* --------------------------------------- */
        cursor: not-allowed;
        filter: grayscale(1);
        opacity: .5 !important;

        color: var(--font-color-disabled) !important;

        /* ------------------------------------- */
        img {
        /* ------------------------------------- */
          opacity: .2 !important;
        }
      }
      /* --------------------------------------- */
      &:focus {
      /* --------------------------------------- */
        transform: scale(.975);
        outline: var(--button-border-nav) solid var(--border-color-light);
      }
      /* --------------------------------------- */
      &:has(img.tag) {
      /* --------------------------------------- */
        position: relative;
      }
      /* --------------------------------------- */
      &[popovertarget]:has(+ dialog:popover-open) {
      /* --------------------------------------- */
        background: var(--background-color-lowered);
        box-shadow: var(--shadow-inset);
      }
      /* ------------------------------------- */
      &.active.icon {
      /* ------------------------------------- */
        background: var(--background-color-elevated);
        box-shadow: var(--shadow);
      }
      /* --------------------------------------- */
      &.big {
      /* --------------------------------------- */
        padding: var(--space-tiny);

        /* ------------------------------------- */
        img {
        /* ------------------------------------- */
          transform: scale(1.5);
        }
      }
      /* --------------------------------------- */
      &.button {
      /* --------------------------------------- */
        align-items: center;
        display: inline-flex;
        gap: var(--space-tiny);
        
        background-color: var(--background-color-lowered);

        /* ------------------------------------- */
        &:not(.icon) {
        /* ------------------------------------- */
          padding: var(--space-small);
        }
      }
      /* --------------------------------------- */
      &.elevated {
      /* --------------------------------------- */
        background: var(--background-color-elevated);  
      }
      /* --------------------------------------- */
      &.image {
      /* --------------------------------------- */
        padding: 1em;

        /* ------------------------------------- */
        img {
        /* ------------------------------------- */
          transition: var(--transition-time-fast);
        }
        /* ------------------------------------- */
        &.active img {
        /* ------------------------------------- */
          transform: var(--transform-zoom);

          box-shadow: var(--shadow-elevated);
          outline:var(--button-border-size-nav) solid var(--background-color-elevated);
        }
      }
      /* --------------------------------------- */
      &.on {
      /* --------------------------------------- */
        background: var(--background-primary);
        
        /* --------------------------------------- */
        img.icon {
        /* --------------------------------------- */
          opacity: 1 !important;
        }
        /* --------------------------------------- */
        span {
        /* --------------------------------------- */
          color: white;
        }
      }
      /* --------------------------------------- */
      &.overlay {
      /* --------------------------------------- */
        padding: var(--space-small);
        transition-duration: var(--transition-time);

        background: var(--background-overlay-image);
        backdrop-filter: blur(10px);
      }
      /* --------------------------------------- */
      &.primary {
      /* --------------------------------------- */
        background: linear-gradient(to right, var(--font-color-primary-from), var(--font-color-primary-to));
        color: white;
        transition: var(--transition-time);
      }
      /* --------------------------------------- */
      img {
      /* --------------------------------------- */
        display: block;
        transition: var(--transition-time-fast);
      }
    }
    /* --------------------------------------------------------- */
    dialog {
    /* --------------------------------------------------------- */
      max-width: 100vw;
      padding:var(--space-mini);
      z-index: var(--z-index-overlay);

      background: var(--background-color-elevated);
      border: none;
      border-radius: var(--border-radius);
      box-shadow: var(--shadow-overlay);

      /* --------------------------------------- */
      &:has(section){
      /* --------------------------------------- */
        padding: 0;
      }

      /* --------------------------------------- */
      &:not([popover]){
      /* --------------------------------------- */
        display: block;
      }

      /* --------------------------------------- */
      button {
      /* --------------------------------------- */
        display: flex;
        gap: var(--space-tiny);
        padding: var(--space-tiny);
        padding-right: var(--space-small);
        width: 100%;

        border-radius: var(--border-radius);
      }
    }
    /* --------------------------------------------------------- */
    figure {
    /* --------------------------------------------------------- */
      display: inline-block;
      margin: 0;

      /* ----------------------------------- */
      &.screenshot {
      /* ----------------------------------- */
        perspective: 100vw;

        /* --------------------------------- */
        img {
        /* --------------------------------- */
          border-radius: var(--border-radius-min);
          margin-top: -10%;
          transform: rotateX(40deg) ;
          width: 75%;

          box-shadow: var(--shadow-overlay-glow);
        }
      }
    }
    /* --------------------------------------------------------- */
    footer {
    /* --------------------------------------------------------- */
      bottom: -100vh;
      position: fixed;
      /* width: calc(100% - var(--size-scrollbar)); */
      width: 100%;
      z-index: var(--z-index-footer);
      
      /* --------------------------------------- */
      & > * {
      /* --------------------------------------- */
        bottom: 100vh;
        position: relative;
      }
      /* --------------------------------------- */
      & > button {
      /* --------------------------------------- */
        border-radius: 2em;
        margin: var(--overlay-margin);

        background: var(--background-color-overlay-nav);
        box-shadow: var(--shadow-overlay-image);

        /* ------------------------------------- */
        &.icon {
        /* ------------------------------------- */
          backdrop-filter: blur(5px);

          /* ----------------------------------- */
          &.active {
          /* ----------------------------------- */
            padding: .25em;

            /* --------------------------------- */
            img {
            /* --------------------------------- */
              border-radius: 2em;
              padding: .5em;

              background-color: var(--font-color-primary);
            }
          }
        }
        /* --------------------------------------- */
        &.primary {
        /* --------------------------------------- */
          padding: 1em 1.5em;

          /* ------------------------------------- */
          &.active {
          /* ------------------------------------- */
            box-shadow: var(--shadow-highlight) !important;
          }
        }
      }
      /* --------------------------------------- */
      & > nav {
      /* --------------------------------------- */
        align-items: end;
        border-radius: var(--border-radius);
        display: flex;
        margin: var(--overlay-margin) auto;
        max-width: min(400px, 100%);
        padding-top: .25em;

        backdrop-filter: blur(20px);
        background: var(--background-color-overlay-nav);
        box-shadow: var(--shadow-overlay-light);

        /* ------------------------------------- */
        a {
        /* ------------------------------------- */
          align-items: center;
          border-radius: var(--border-radius);
          display: inline-flex;
          flex-basis: 0;
          flex-direction: column;
          flex-grow: 1;
          gap: .375em;
          padding: .5em;
          position: relative;

          /* ----------------------------------- */
          img {
          /* ----------------------------------- */
            border-radius: 2em;
            padding: .1em .5em;
          }
          /* ----------------------------------- */
          span {
          /* ----------------------------------- */
            color: var(--font-color-nav);
          }
          /* ----------------------------------- */
          &.active img {
          /* ----------------------------------- */
            background: var(--background-primary);
          }
          /* ----------------------------------- */
          &.active span {
          /* ----------------------------------- */
            color: var(--font-color-max);
          }
        }
      }
      /* --------------------------------------- */
      &.overlay {
      /* --------------------------------------- */
        z-index: var(--z-index-overlay);

        /* ------------------------------------- */
        dialog {
        /* ------------------------------------- */
          max-width: calc(min(var(--size-overlay-minWidth), 100%) - 2em);
        }
      }
      /* --------------------------------------- */
      &.slideIn {
      /* --------------------------------------- */
        animation: slideInFooter .5s forwards;
        bottom: -100vh;
        will-change: bottom;

        /* --------------------------------------- */
        &:has(aside) {
        /* --------------------------------------- */
          animation: slideInFooterOverlay .5s forwards;
        }
        /* --------------------------------------- */
        & > button,
        & > nav {
        /* --------------------------------------- */
          bottom: 100vh;
          position: relative;
        }

        /* ------------------------------------- */
        aside {
        /* ------------------------------------- */
          bottom: 100vh;
        }
      }
      /* --------------------------------------- */
      &.submerged {
      /* --------------------------------------- */
        animation: slideAwayFooter .5s ease forwards;
      }
      /* ------------------------------------- */
      article {
      /* ------------------------------------- */
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);

        background-color: var(--flick-bg);
        background-size: cover;

        /* ------------------------------------- */
        nav button {
        /* ------------------------------------- */
          border-radius: 0;
          margin: 0;
          padding: 1em;

          opacity: .75;

          /* ----------------------------------- */
          &:first-of-type {
          /* ----------------------------------- */
            border-top-left-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);

            background: radial-gradient(ellipse at left top,rgba(0,0,0,.25) 30%,rgba(0,0,0,0) 70%);
          }
          /* ----------------------------------- */
          &:last-of-type {
          /* ----------------------------------- */
            border-top-right-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);

            background: radial-gradient(ellipse at right top,rgba(0,0,0,.25) 30%,rgba(0,0,0,0) 70%);
          }
          /* ----------------------------------- */
          &.active {
          /* ----------------------------------- */
            background: var(--background-primary);
            box-shadow: var(--shadow-highlight);
          }
        }

        /* ------------------------------------- */
        section {
        /* ------------------------------------- */
          padding-bottom: .5rem;
          padding-top: 1rem;

          background: var(--background-bottom-overlay-text);

          /* ------------------------------------- */
          &.textMode {
          /* ------------------------------------- */
            background: linear-gradient(to top, rgba(0,0,0,.75) 50%, transparent);
          }
          /* ------------------------------------- */
          * {
          /* ------------------------------------- */
            color: white;
          }
          /* ------------------------------------- */
          .overview {
          /* ------------------------------------- */
            margin-inline: auto;
            margin-top: 0;
            max-width: calc(var(--size-overlay-minWidth) - 2rem);
            overflow: auto;            
          }
          /* ------------------------------------- */
          .rating {
          /* ------------------------------------- */
            margin-bottom: .5rem;
            margin-top: .75rem;

            backdrop-filter: blur(5px);
            background: var(--background-overlay-image-hover);
          }
        }
      }
      /* ------------------------------------- */
      aside {
      /* ------------------------------------- */
        display: inline-block;
        margin-bottom: var(--overlay-margin);
        margin-inline: auto;
        min-width: min(var(--size-overlay-minWidth), 100%);
        position: relative;

        background: var(--background-color-overlay);
        backdrop-filter: blur(30px);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-overlay-light);

        /* ----------------------------------- */
        .hint {
        /* ----------------------------------- */
          border-radius: var(--border-radius);
          display: inline-block;
          margin: var(--space-mini);
          padding: .25em .5em;
          
          background: linear-gradient(to bottom, var(--background-color-lowered), transparent);
          box-shadow: inset var(--shadow-overlay-button);
          /* ----------------------------------- */
          img {
          /* ----------------------------------- */
            filter: grayscale(1) brightness(0.6);
            vertical-align: baseline;
          }
        }
        /* ------------------------------------- */
        .iframeScroller {
        /* ------------------------------------- */
          height: calc(87px + var(--size-scrollbar));
          margin-top: .5rem;
          min-width: 120px;
          overflow-x: auto;

          /* ----------------------------------- */
          iframe {
          /* ----------------------------------- */
            height: 83px;
            margin-inline: auto;

            border: none;
          }
        }
        /* ------------------------------------- */
        section.justwatch {
        /* ------------------------------------- */
          padding-inline: 0;

        }
      }
      /* ------------------------------------- */
      iframe.trailer {
      /* ------------------------------------- */
        box-shadow: var(--shadow-sheet);
      }
    }
    /* --------------------------------------------------------- */
    h1 {
    /* --------------------------------------------------------- */
      font-size: var(--font-size-larger);
      margin: 0;
      text-wrap: balance;

      color: var(--font-color-light);

      /* --------------------------------------- */
      & > * {
      /* --------------------------------------- */
        vertical-align: middle;
      }
      /* --------------------------------------- */
      .profile {
      /* --------------------------------------- */
        margin-right: .25em;
        width: 1em;
      }
    }
    /* --------------------------------------------------------- */
    h2 {
    /* --------------------------------------------------------- */
      font-size: var(--font-size-large);
      margin-bottom: .5rem;
      margin-top: 0;
      padding-top: 1em;
      text-wrap: balance;

      color: var(--font-color-light);

      /* --------------------------------------- */
      &.icon {
      /* --------------------------------------- */
        display: inline-flex;
        gap: .5em;      

        /* ------------------------------------- */
        img {
        /* ------------------------------------- */
          transform: scale(1.5);
        }
      }
      /* --------------------------------------- */
      * {
      /* --------------------------------------- */
        color: var(--font-color-light);
      }
      /* --------------------------------------- */
      img.profile {
      /* --------------------------------------- */
        margin-right: var(--space-mini);
        vertical-align: middle;
      }
    }
    /* --------------------------------------------------------- */
    h3 {
    /* --------------------------------------------------------- */
      font-size: var(--font-size-medium);
      line-height: 1.25em;
      margin: 0;
      margin-bottom: var(--space-mini);
      text-wrap: balance;
    }
    /* --------------------------------------------------------- */
    header {
    /* --------------------------------------------------------- */
      padding: 1rem;
      padding-top: 2rem;

      background: var(--background-color-elevated);
      box-shadow: var(--shadow-nav);
    }
      /* ----------------------------------- */
      header.page {
      /* ----------------------------------- */
        padding: .5em;
      }
        /* --------------------------------- */
        header.page nav {
        /* --------------------------------- */
          align-items: center;
          display: flex;
          justify-content: center;
        }
          /* ------------------------------- */
          header.page nav h1 {
          /* ------------------------------- */
            flex-grow: 1;
            margin-inline: .5em;
          }
      /* ----------------------------------- */
      header.sticky {
      /* ----------------------------------- */
        position: sticky;
        width: 100%;
        z-index: var(--z-index-header);

        animation: slideInHeader .25s forwards;
      }
      /* ----------------------------------- */
      header:not(.page) nav {
      /* ----------------------------------- */
        padding-inline: .5rem;
        margin-top: 1rem;
      }
        /* --------------------------------- */
        header nav input[type=search] {
        /* --------------------------------- */
          --flick-width: calc(var(--flick-height) * var(--flicklist-item-aspect-ratio));

          border-radius: 2em;
          font-size: var(--font-size-large);
          font-weight: var(--font-weight-bold);
          padding-left: 2em;        
          width: min(100%, 600px);

          background-image: url(/images/icons/gray/search.svg);
          background-repeat: no-repeat;
          background-position: .5em;
          background-size: 1.25em;
        }
    /* --------------------------------------------------------- */
    iframe {
    /* --------------------------------------------------------- */
      border: none;
    }
      /* ----------------------------------- */
      iframe.trailer {
      /* ----------------------------------- */
        aspect-ratio: 16/9;
        display: block;
        width: 100%;

        background: black;
      }
    /* --------------------------------------------------------- */
    img {
    /* --------------------------------------------------------- */
      max-width: 100%;

      /* ----------------------------------- */
      &.icon {
      /* ----------------------------------- */
        opacity: .5;
        min-height: 24px;
        min-width: 24px;
        vertical-align: bottom;

        /* --------------------------------- */
        &.logo {
        /* --------------------------------- */
          aspect-ratio: 1/1;
          width: 24px;

          opacity: 1;
        }
      }
      /* ----------------------------------- */
      &.iconSpacer {
      /* ----------------------------------- */
        aspect-ratio: 1/1;
        display: block;
        filter: grayscale(1);
        margin: 5vh auto;
        opacity: .05;
        width: 2rem;
      }
      /* ----------------------------------- */
      &.inline {
      /* ----------------------------------- */
        height: .8em;
        margin: 0 .2em;
        vertical-align: text-top;
      }
    }
    /* --------------------------------------------------------- */
    input {
    /* --------------------------------------------------------- */
      font-size: 1rem;
      max-width: 100%;
      padding: .5em;
      padding-left: 1em;

      background: var(--background-color);
      border: none;
      color: var(--font-color);

      /* --------------------------------------------------------- */
      &.google {
      /* --------------------------------------------------------- */
        padding-left: 3em;
        background-image: url(/images/google/icon.svg);
        background-repeat: no-repeat;
        background-position: 1em;
      }

      /* --------------------------------------------------------- */
      &.image {
      /* --------------------------------------------------------- */
        background-position: left;
        background-size: contain;
        padding-left: 4em;
      }

    }
      /* --------------------------------------------------------- */
      input:focus {
      /* --------------------------------------------------------- */
        background-color: var(--background-color-elevated);
        box-shadow: var(--shadow-highlight);
        outline: var(--button-border-size) solid var(--border-color);
      }
      /* ----------------------------------- */
      input::placeholder {
      /* ----------------------------------- */
        color: var(--font-color-light);
      }
      /* ----------------------------------- */
      input[type=search]::-webkit-search-cancel-button {
      /* ----------------------------------- */
        appearance: none;
        -webkit-appearance: none;
        height: 1em;
        width: 1em;

        background: url(/images/icons/gray/cancel.svg) no-repeat center center;
        background-size: contain;
      }
    /* --------------------------------------------------------- */
    ins {
    /* --------------------------------------------------------- */
      text-decoration: none;

      /* ----------------------------------- */
      &.header {
      /* ----------------------------------- */
        min-height: 63px;
      }
      /* --------------------------------------- */
      &.indicator {
      /* --------------------------------------- */
        border-radius: 100%;
        display: inline-block;
        height: 7px;
        vertical-align: middle;
        width: 7px;

        background: var(--background-primary);
      }
    }
    /* --------------------------------------------------------- */
    label {
    /* --------------------------------------------------------- */
      border-radius: 2em;
      display: inline-block;
      margin: .25rem;
      padding: .5em;
      padding-left: 1em;
      white-space: nowrap;
      
      cursor: pointer;

      /* ----------------------------------- */
      &:has(img.icon) {
      /* ----------------------------------- */
        padding-left: .25em;
      }
      /* ----------------------------------- */
      span {
      /* ----------------------------------- */
        margin-right: .5em;
        vertical-align: middle;

        color: var(--font-color-nav);
      }  
    }
    /* --------------------------------------------------------- */
    main {
    /* --------------------------------------------------------- */
      margin-inline: auto;
    }
      /* ----------------------------------- */
      main.flicks article {
      /* ----------------------------------- */
        display: inline-block;
      }
      /* ----------------------------------- */
      main.search {
      /* ----------------------------------- */
        /* animation: searchSlideOut var(--transition-time-fast) ease forwards; */
        
        background-color: var(--background-color-lowered);
      }
    /* --------------------------------------------------------- */
    mark.sticker {
    /* --------------------------------------------------------- */
      display: inline-block;
      font-weight: var(--font-weight-bold);
      margin-left: -1em;
      margin-top: -1em;
      padding: .25em;
      position: absolute;
      text-transform: uppercase;    
      text-wrap: nowrap;
      transform: rotate(-5deg);
      z-index: var(--z-index-nav-overlap);

      background: var(--background-color-elevated);
      box-shadow: var(--shadow-elevated);
    }
    /* --------------------------------------------------------- */
    nav {
    /* --------------------------------------------------------- */

      /* ----------------------------------- */
      &.chips {
      /* ----------------------------------- */
        gap: 0;

        /* --------------------------------- */
        button.chip {
        /* --------------------------------- */
          gap: .25em;
          margin: .5em;

          /* ------------------------------- */
          img {
          /* ------------------------------- */
            height: 1.75em;
          }
        }
      }
      /* ----------------------------------- */
      &.horizontal {
      /* ----------------------------------- */
        button.big {
        /* --------------------------------- */
          padding: var(--space-small);
        }
      }
      /* ----------------------------------- */
      &.menu {
      /* ----------------------------------- */
        display: flex;
        max-width: 100%;
        overflow: auto;

        /* --------------------------------- */
        & > button {
        /* --------------------------------- */
          flex-direction: column;
        }
        /* --------------------------------- */
        button {
        /* --------------------------------- */
          align-items: center;
          border-radius: var(--border-radius);
          display: inline-flex;
          flex-basis: 0;
          flex-grow: 1;
          gap: .5em;
          margin: 0;
          padding: var(--space-small);

          opacity: .75;

          /* ------------------------------- */
          &.active,
          &.active * {
          /* ------------------------------- */
            color: var(--font-color-max);
            font-weight: bold;
            opacity: 1;
          }
        }
        /* --------------------------------- */
        dialog {
        /* --------------------------------- */
          margin-bottom: 4.25em;
          margin-right: 1em;
          width: min-content;
        }
      }
      /* ----------------------------------- */
      &.more {
      /* ----------------------------------- */
        height: 1.5rem;
        padding: .25em;
        position: relative;
        top: -2.25em;

        background: radial-gradient(ellipse at bottom, var(--background-color-overlay), transparent 50%);

        /* --------------------------------- */
        button {
        /* --------------------------------- */
          border-radius: 0;
          bottom: .5em;
          margin: 0;
          padding: .75em;
          position: relative;
          z-index: var(--z-index-floating-button);

          backdrop-filter: blur(10px);
          background: var(--background-color-overlay-button);
          box-shadow: var(--shadow-overlay-image);

          /* ------------------------------- */
          &:first-of-type {
          /* ------------------------------- */
            border-bottom-left-radius: 2em;
            border-top-left-radius: 2em;
          }
          /* ------------------------------- */
          &:last-of-type {
          /* ------------------------------- */
            border-bottom-right-radius: 2em;
            border-top-right-radius: 2em;
          }
        }
      }
      /* ----------------------------------- */
      &.sticky {
      /* ----------------------------------- */
        position: sticky;
        z-index: var(--z-index-floating-nav);

        box-shadow: var(--shadow-overlay-light);

        /* --------------------------------- */
        &.view {
        /* --------------------------------- */
          margin-top: var(--space-tiny);
          top: var(--overlay-margin);

          background: var(--background-color-overlay);
          backdrop-filter: blur(20px);

          /* ------------------------------- */
          button.active {
          /* ------------------------------- */
            border: var(--button-border-size) solid var(--border-color);
            box-shadow: none;
          }
        }
      }
      /* ----------------------------------- */
      &.top {
      /* ----------------------------------- */
        margin-bottom: 2rem;
      }
      /* ----------------------------------- */
      &.view {
      /* ----------------------------------- */
        border-radius: 2em;
        display: flex;
        margin-bottom: .75rem;
        margin-inline: auto;
        max-width: 100%;
        padding: var(--space-mini);
        width: fit-content;

        background: var(--background-color);

        /* --------------------------------- */
        a,
        button {
        /* --------------------------------- */
          align-items: anchor-center;
          border-radius: 2em;
          font-size: var(--font-size-medium);
          font-weight: var(--font-weight-bold);
          display: flex;
          padding: .5em 1em;
          margin: 0;
          text-wrap: nowrap;

          transition: .25s;

          /* ------------------------------- */
          &.active {
          /* ------------------------------- */
            background: var(--background-color-elevated);
            box-shadow: var(--shadow);
          }
          /* ------------------------------- */
          &:has(img.profile) {
          /* ------------------------------- */
            padding: 0 .5em;
          }
          /* ------------------------------- */
          &:not(.active) {
          /* ------------------------------- */
            color: var(--font-color-light);
          }
        }
        /* --------------------------------- */
        button:has(.switch) {
        /* --------------------------------- */
          padding: .5em;
        }
        /* --------------------------------- */
        img.icon {
        /* --------------------------------- */
          margin-right: .25em;
        }
      }
    }
    /* --------------------------------------------------------- */
    ol.charts {
    /* --------------------------------------------------------- */
      counter-reset: item;
      margin-inline: auto;
      max-width: 400px;
      position: relative;
    }
      /* ----------------------------------- */
      ol.charts li {
      /* ----------------------------------- */
        border-radius: var(--border-radius-max);
        counter-increment: item;
        font-size: var(--font-size-large);
        list-style-type: none;
        line-height: 2em;
        margin-bottom: .5rem;
        margin-right: 2rem;

        background: var(--background-color-contrast);
      }
      /* ----------------------------------- */
      ol.charts li::marker {
      /* ----------------------------------- */
        content: counter(item) '   ';
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-larger);

        color: var(--font-color-light);
      }
      /* ----------------------------------- */
      ol.charts li:first-of-type {
      /* ----------------------------------- */
        background: var(--background-primary);
        color: white;
      }
    /* --------------------------------------------------------- */
    p {
    /* --------------------------------------------------------- */
      margin: 0;
      padding-bottom: var(--space-small);
    }
      /* ----------------------------------- */
      p.spaceTop {
      /* ----------------------------------- */
        padding-top: 1em;
      }
    /* --------------------------------------------------------- */
    section {
    /* --------------------------------------------------------- */
      padding-inline: 1rem;

      /* ----------------------------------- */
      &.about {
      /* ----------------------------------- */
        /* --------------------- */
        nav a img {
        /* --------------------- */
          filter: grayscale(1);
        }
      }
      /* ----------------------------------- */
      &.loadingIndicator {
      /* ----------------------------------- */
        height: 100%;
        padding: var(--space-normal);
        position: absolute;
        width: 100%;
        z-index: var(--z-index-overlay);

        box-shadow: var(--shadow-inset);
      }
      /* ----------------------------------- */
      &.nav {
      /* ----------------------------------- */
        display: inline-flex;
        gap: 1em;
        padding: 1rem;

        background: linear-gradient(to bottom, var(--background-color-lowered), transparent);
        border-radius: var(--border-radius);

        /* --------------------- */
        nav {
        /* --------------------- */
          flex-basis: 0;
          flex-grow: 1;
        }
      }
    }
    /* --------------------------------------------------------- */
    small {
    /* --------------------------------------------------------- */
      font-size: 1em;
      font-weight: lighter;
      color: var(--font-color-light);

      /* ----------------------------------- */
      img.inline {
      /* ----------------------------------- */
        height: .7em;
      }
    }
    /* --------------------------------------------------------- */
    span.primary {
    /* --------------------------------------------------------- */
      background: var(--background-primary);
      background-clip: text;
    }
    /* --------------------------------------------------------- */
    ul {
    /* --------------------------------------------------------- */
      list-style-type: none;
      margin-inline: auto;
      max-width: var(--size-content);
      padding-inline: 0;
      position: relative;

      /* ----------------------------------- */
      li {
      /* ----------------------------------- */
        border-radius: var(--border-radius);
        line-height: 1.25em;
        margin-bottom: .5rem;
        margin-inline: 0;
        padding: var(--space-tiny);

        background-color: var(--background-color-lowered);

        /* --------------------- */
        &.check {
        /* --------------------- */
          background-image: url(/images/icons/primary/check.svg);
          background-position: left center;
          background-repeat: no-repeat;
          background-size: 2em;
        }
        /* --------------------- */
        img.icon {
        /* --------------------- */
          vertical-align: sub;
        }
      }
    }

  }
  @media (orientation: portrait) {
    /* --------------------------------------------------------- */
    footer aside article section p {
    /* --------------------------------------------------------- */
      max-height: 20vh;
    }
  }
  @media (orientation: landscape) {
    /* --------------------------------------------------------- */
    footer aside iframe.trailer:not(.fullscreen) {
    /* --------------------------------------------------------- */
      height: 50vh !important;
      max-height: 450px;
    }
    /* --------------------------------------------------------- */
    footer aside nav button.close {
    /* --------------------------------------------------------- */
      bottom: 2em;
      left: 50%;
    }
    /* --------------------------------------------------------- */
    footer aside article section p {
    /* --------------------------------------------------------- */
      max-height: 30vh;
    }
  }
  @media (orientation: landscape) and (pointer: coarse) and (max-height: 800px) {
    /* --------------------------------------------------------- */
    footer aside article {
    /* --------------------------------------------------------- */
      display: none;
    }
    /* --------------------------------------------------------- */
    footer aside.playTrailer section.justwatch {
    /* --------------------------------------------------------- */
      display: none;
    }
    /* --------------------------------------------------------- */
    footer aside:not(.playTrailer) iframe.trailer {
    /* --------------------------------------------------------- */
      display: none;
    }
  }
  @media (orientation: portrait) and (pointer: coarse) and (max-width: 450px) {
    /* --------------------------------------------------------- */
    footer aside {
    /* --------------------------------------------------------- */
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      margin-bottom: 0;
      max-width: none;
      width: 100%;
    }
    /* --------------------------------------------------------- */
    footer > nav {
    /* --------------------------------------------------------- */
      border-radius: 0;
      margin: 0;
      max-width: 100%;
    }
  }
  @media (max-width: 600px) {
    /* --------------------------------------------------------- */
    section.nav {
    /* --------------------------------------------------------- */
      flex-direction: column;
      gap: 2em;
    }
  }
  @media (pointer: coarse) {
    /* --------------------------------------------------------- */
    footer aside nav button {
    /* --------------------------------------------------------- */
      transform: scale(0);

      animation: plopIn var(--transition-time) ease var(--transition-time) forwards;    
    }
    /* --------------------------------------------------------- */
    nav.view {
    /* --------------------------------------------------------- */
      overflow: auto hidden;
    }
  }
  /*-----------------------------------------------------------------------------------------------*/
  @media (hover: hover) and (pointer: fine) {
    /* --------------------------------------------------------- */
    a:hover,
    button:hover {
    /* --------------------------------------------------------- */
      &:not(:disabled):not(.active) {
      /* --------------------------------------- */
        &.icon:not(.bg):not(.overlay):not(.primary) {
        /* ------------------------------------- */
          background: var(--background-color-hover);
        }
        /* ------------------------------------- */
        &.primary {
        /* ------------------------------------- */
          color: var(--font-color);
        }
        /* ------------------------------------- */
        img.icon:not(.logo) {
        /* ------------------------------------- */
          opacity: .75;
        }

      }
    }
    /* --------------------------------------------------------- */
    button:not(:disabled):hover {
    /* --------------------------------------------------------- */
      &.button {
      /* --------------------------------------- */
        background-color: var(--background-color-hover);
      }
      /* --------------------------------------- */
      &:not(.primary),
      &:not(.primary) * {
      /* --------------------------------------- */
        color: var(--font-color);
      }
      /* --------------------------------------- */
      &.image img {
      /* --------------------------------------- */
        transform: var(--transform-zoom);

        /* ------------------------------------- */
        &:not(.tag){
        /* ------------------------------------- */
          box-shadow: var(--shadow-elevated);
        }
      }
    }
    /* --------------------------------------------------------- */
    button.primary:hover,
    button.elevated:not(.active):hover {
    /* --------------------------------------------------------- */
      box-shadow: var(--shadow-overlay-button);
      transform: var(--transform-zoom);
    }
    /* --------------------------------------------------------- */
    button.overlay:hover {
    /* --------------------------------------------------------- */
      box-shadow: var(--shadow-overlay-button);    
      transform: var(--transform-zoom);
    }
    /* --------------------------------------------------------- */
    dialog button:hover:not(:disabled) {
    /* --------------------------------------------------------- */
      background: var(--background-color) !important;
    }  
    /* --------------------------------------------------------- */
    footer aside article button:hover {
    /* --------------------------------------------------------- */
      opacity: 1 !important;
    }
    /* --------------------------------------------------------- */
    footer > nav button:hover {
    /* --------------------------------------------------------- */
      transform: var(--transform-zoom);
    }
    /* --------------------------------------------------------- */
    footer > nav a:not(.active):hover {
    /* --------------------------------------------------------- */
      background: var(--background-bottom-glow);
    }
      /* ------------------------------------------------------- */
      footer > nav a:not(.active):hover img {
      /* ------------------------------------------------------- */
        background: var(--background-overlay-image-light);
      }
      /* ------------------------------------------------------- */
      footer > nav a:not(.active):hover span {
      /* ------------------------------------------------------- */
        font-weight: var(--font-weight-bold);

        color: var(--font-color);
      }
    /* --------------------------------------------------------- */
    label:hover {
    /* --------------------------------------------------------- */
      background: var(--background-color-lowered);
    }
      /* --------------------------------------- */
      label:hover span {
      /* --------------------------------------- */
        color: var(--font-color);
      }
    /* --------------------------------------------------------- */
    nav {
    /* --------------------------------------------------------- */
      &.menu button:hover {
        color: var(--font-color-max);
        background: var(--background-bottom-glow);
        opacity: 1;
      }
      &.more button.icon:not(:disabled):hover {
        background: var(--background-color-overlay-button-hover) !important;
        box-shadow: var(--shadow-overlay-button);
      }

      &.view {
        a, button {
          &:not(.active):not(.on):hover {
            background: var(--background-bottom-glow);
            color: var(--font-color-nav);

            &:not(:has(img)){
              transform: var(--transform-zoom);
            }
          }
        }
      }
    }
    /* --------------------------------------------------------- */
    section.about nav a:hover img {
    /* --------------------------------------------------------- */
      filter: none;
      opacity: 1 !important;
      transition: ease-in var(--transition-time-fast);
    }
  }

  /*-----------------------------------------------------------------------------------------------*/
  /* Classes
  /*-----------------------------------------------------------------------------------------------*/
  @media all {
    /* --------------------------------------------------------- */
    .active,
    .active * {
    /* --------------------------------------------------------- */
      color: var(--font-color-max) !important;
    }
    /* --------------------------------------------------------- */
    .active img {
    /* --------------------------------------------------------- */
      opacity: 1;
    }
    /* --------------------------------------------------------- */
    .anchor {
    /* --------------------------------------------------------- */
      display: block;
      position: relative;
      top: -3rem;
    }
    /* --------------------------------------------------------- */
    .balanced {
    /* --------------------------------------------------------- */
      text-wrap: balance;    
    }
    /* --------------------------------------------------------- */
    .bar {
    /* --------------------------------------------------------- */
      align-items: center;
      border-radius: var(--border-radius);
      display: flex;
      padding: 1rem;
      margin: .5rem auto;
      max-width: var(--size-content);
      width: 100%;

      background: var(--background-color-contrast);
      border: 1px solid var(--border-color-light);

      transition: .5s;

      /* --------------------------------------------------------- */
      & > ins {
      /* --------------------------------------------------------- */
        flex-grow: 1;
        padding-inline: 1em;
        text-align: left;
      }

      input& {
        border-radius: var(--border-radius-max);
      }

      /* --------------------------------------------------------- */
      img.icon {
      /* --------------------------------------------------------- */
        width: 2rem;
      }
    }
    /* --------------------------------------------------------- */
    .bg {
    /* --------------------------------------------------------- */
      background-size: cover !important;
    }
    /* --------------------------------------------------------- */
    .card {
    /* --------------------------------------------------------- */
      border-radius: var(--border-radius);
      display: inline-block;
      margin-bottom: 2rem;
      padding: .5rem;
      width: 100%;

      background: var(--background-color-contrast);
      box-shadow: var(--shadow-overlay-light);    
    }
      /* --------------------------------------- */
      .card .chips {
      /* --------------------------------------- */
        margin-top: .5rem;
        margin-left: -.5rem;
        max-width: calc(100% + 1rem);
        padding-inline: .5rem;
      }
      /* --------------------------------------- */
      .card button.trailer {
      /* --------------------------------------- */
        display: block;
        padding: 0;
        margin: 0;
        position: relative;
        width: 100%;
      }
        /* ------------------------------------- */
        .card button.trailer iframe.trailer {
        /* ------------------------------------- */
          border-radius: var(--border-radius);
        }
      /* --------------------------------------- */
      .card img.poster {
      /* --------------------------------------- */
        aspect-ratio: 16/9;
        border-radius: var(--border-radius);
        display: block;
        object-fit: cover;
        width: 100%;

        background: var(--background-color-lowered);
      }
      /* --------------------------------------- */
      .card nav.menu {
      /* --------------------------------------- */
        border-radius: var(--border-radius);
        margin: 0;
        margin-top: .5rem;
      }
      /* --------------------------------------- */
      .card p {
      /* --------------------------------------- */
        padding-bottom: .5rem;
      }
    /* --------------------------------------------------------- */
    .cards {
    /* --------------------------------------------------------- */
      margin-inline: auto;
      max-width: 700px;
    }
    /* --------------------------------------------------------- */
    .chip {
    /* --------------------------------------------------------- */
      align-items: center;
      border-radius: 2em;
      display: inline-flex;
      flex-grow: 1;
      gap: .5em;
      margin: 0;
      padding: .25em;
      padding-right: 1em;
      text-wrap: nowrap;
      min-width: max-content;
    }
      /* --------------------------------------- */
      .chip.active {
      /* --------------------------------------- */
        box-shadow: inset var(--shadow-overlay-button);
        background: var(--background-color-lowered);
      }
      /* --------------------------------------- */
      .chip b,
      .chip small {
      /* --------------------------------------- */
        display: block;
        text-align: left;
      }
      /* --------------------------------------- */
      .chip span {
      /* --------------------------------------- */
        color: var(--font-color-nav);
      }
      /* --------------------------------------- */
      .chip img {
      /* --------------------------------------- */
        height: 3rem;
      }
    /* --------------------------------------------------------- */
    .chips {
    /* --------------------------------------------------------- */
      display: flex;
      gap: .5rem;
      justify-content: left;
      max-width: 100%;
      overflow-x: auto;
    }
    /* --------------------------------------------------------- */
    .clickable {
    /* --------------------------------------------------------- */
      cursor: pointer;
    }
    /* --------------------------------------------------------- */
    .cut {
    /* --------------------------------------------------------- */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* --------------------------------------------------------- */
    .disabled,
    .disabled * {
    /* --------------------------------------------------------- */
      color: var(--font-color-disabled) !important;
    }
      /* --------------------------------------- */
      .disabled img {
      /* --------------------------------------- */
        opacity: .1 !important;
      }
    /* --------------------------------------------------------- */
    .fadeIn {
    /* --------------------------------------------------------- */
      animation: fadeIn var(--transition-time-slow) ease forwards;
    }
    /* --------------------------------------------------------- */
    .flag {
    /* --------------------------------------------------------- */
      border-radius: 1em;
      position: absolute;
      margin-top: -2.5em;
      margin-left: -.75em;
      width: 1.5em;

      box-shadow: var(--shadow-elevated);
    }
    /* --------------------------------------------------------- */
    .flick {
    /* --------------------------------------------------------- */
      display: inline-block;
      padding: .75em;
      position: relative;
      z-index: 0;

      transition: var(--transition-time);

      /* --------------------------------------- */
      &:focus {
      /* --------------------------------------- */
        outline: none;
      }
      /* --------------------------------------- */
      &.listed img {
      /* --------------------------------------- */
        border: var(--button-border-size-nav) solid var(--background-color-hover);
        outline: var(--button-border-size) solid var(--border-color-light);      }
      /* --------------------------------------- */
      h3 {
      /* --------------------------------------- */
        padding-bottom: .5em;
        padding-top: .25em;
      }
      /* --------------------------------------- */
      img {
      /* --------------------------------------- */
        aspect-ratio: var(--flicklist-item-aspect-ratio);
        height: var(--flick-height);

        background: var(--flick-bg);
        border-radius: var(--border-radius);
        filter: grayscale(1);
        opacity: .5;
        transition: .25s;
      }
      /* --------------------------------------- */
      &.active {
      /* --------------------------------------- */
        transform: scale(1.1);
        z-index: var(--z-index-flick-active);

        /* ------------------------------------- */
        h3 {
        /* ------------------------------------- */
          visibility: hidden;
        }
        /* ------------------------------------- */
        img {
        /* ------------------------------------- */
          box-shadow: var(--shadow-highlight) !important;
        }
      }
      /* ------------------------------------- */
      &.active img,
      &.available img {
      /* ------------------------------------- */
        filter: grayscale(0);
        opacity: 1;
      }
      /* --------------------------------------- */
      &.large img {
      /* --------------------------------------- */
        height: var(--flick-height-large);
      }
    }
    /* --------------------------------------------------------- */
    .flicks:not(.search) {
    /* --------------------------------------------------------- */
      max-width: 1900px;
    }
      /* ------------------------------------- */
      .flicks article > ins {
      /* ------------------------------------- */
        display: block;
        min-height: var(--flick-height);
      }
    /* --------------------------------------- */
    .grow {
    /* --------------------------------------- */
      flex-grow: 1;
    }
    /* --------------------------------------- */
    .hidden {
    /* --------------------------------------- */
      visibility: hidden;
    }
    /* --------------------------------------- */
    .hide {
    /* --------------------------------------- */
      transform: scale(0) !important;
    }
    /* --------------------------------------- */
    .highlight {
    /* --------------------------------------- */
      box-shadow: var(--shadow-highlight);
    }
    /* --------------------------------------- */
    .horizontal {
    /* --------------------------------------- */
      align-items: center;
      display: flex;
      justify-content: center;
    }
    /* --------------------------------------- */
    .hspace {
    /* --------------------------------------- */
      padding-inline: .5em;
    }
    /* --------------------------------------- */
    .icon:not(img) {
    /* --------------------------------------- */
      border-radius: 2em;

      transition: .25s;
    }
      /* ------------------------------------- */
      .icon img {
      /* ------------------------------------- */
        display: block;
      }
    /* --------------------------------------------------------- */
    .invisible {
    /* --------------------------------------------------------- */
      cursor: inherit;
      opacity: 0 !important;
      transition: var(--transition-time);
      z-index: 0 !important;
    }
    /* --------------------------------------------------------- */
    .list > * {
    /* --------------------------------------------------------- */
      vertical-align: middle;
    }
    /* --------------------------------------------------------- */
    .list > a {
    /* --------------------------------------------------------- */
      display: inline-block;
      padding: .5em;
    }
    /* --------------------------------------------------------- */
    .loading {
    /* --------------------------------------------------------- */
      animation: loading 1s linear infinite;
    }
    /* --------------------------------------------------------- */
    .overview {
    /* --------------------------------------------------------- */
      font-size: smaller;
      line-height: 1.25em;
      text-align: justify;
    }
    /* --------------------------------------------------------- */
    .persons {
    /* --------------------------------------------------------- */
      align-items: center;
      display: inline-flex;
      justify-content: left;
      max-height: calc(var(--size-person) + 1rem);
      max-width: 100%;
      overflow-y: hidden;
      padding-inline: 1em;
      text-wrap: nowrap;

      /* ------------------------------------------------------- */
      button {
      /* ------------------------------------------------------- */
        border-radius: 100%;
        flex-shrink: 0;
        margin-bottom: 1rem;
        position: relative;
        vertical-align: bottom;
        width: var(--size-person);

        /* ------------------------------------- */
        &.active {
        /* ------------------------------------- */
          img.circle {
          /* ----------------------------------- */
            outline-width: var(--button-border-size-nav);
          }
        }
        /* ------------------------------------- */
        &.icon:not(:hover) {
        /* ------------------------------------- */
          padding: 1.25em;
        }
        /* ------------------------------------- */
        & > img {
        /* ------------------------------------- */
          aspect-ratio: 1/1;
          object-fit: cover;
          width: 100%;

          /* ----------------------------------- */
          &.circle {
          /* ----------------------------------- */
            border: var(--button-border-size-nav) solid var(--background-color-hover);
            outline: var(--button-border-size) solid var(--border-color-light);
          }
        }
        /* ------------------------------------- */
        h2 {
        /* ------------------------------------- */
          margin-top: 2rem;
        }
        /* ------------------------------------- */
        img {
        /* ------------------------------------- */
          border-radius: 100%;
        }
        /* ------------------------------------- */
        .tag {
        /* ------------------------------------- */
          display: flex;
          gap: var(--space-tiny);
          position: absolute;
          width: 100%;
        }
      }
    }
    /* --------------------------------------------------------- */
    .plopIn {
    /* --------------------------------------------------------- */
      animation: plopIn var(--transition-time-fast) ease forwards;      
    }
    /* --------------------------------------------------------- */
    .primary {
    /* --------------------------------------------------------- */
      color: var(--font-color-primary)
    }
    /* --------------------------------------------------------- */
    .profile {
    /* --------------------------------------------------------- */
      aspect-ratio: 1/1;
      border-radius: 100%;
      margin-inline: auto;
      object-fit: cover;
      width: 2rem;

      /* ------------------------------------------------------- */
      &.big {
      /* ------------------------------------------------------- */
        width: 4em;
      }
    }
    /* --------------------------------------------------------- */
    .rating {
    /* --------------------------------------------------------- */
      border-radius: 2em;
      display: inline-flex;
      padding: .25em .5em;
    }
      /* ------------------------------------------------------- */
      .rating button {
      /* ------------------------------------------------------- */
        padding: .375em;
      }
    /* --------------------------------------------------------- */
    .small {
    /* --------------------------------------------------------- */
      font-size: small;
    }
    /* --------------------------------------------------------- */
    .spaced-left {
    /* --------------------------------------------------------- */
      margin-left: var(--space-tiny);
    }
    /* --------------------------------------------------------- */
    .spaced-left {
    /* --------------------------------------------------------- */
      margin-right: var(--space-tiny);
    }
    /* --------------------------------------------------------- */
    .spinning {
    /* --------------------------------------------------------- */
      animation: spin 1s linear infinite;      
    }
    /* --------------------------------------------------------- */
    .streamer {
    /* --------------------------------------------------------- */
      display: block;
      min-height: 2rem;

      /* --------------------------------------- */
      &.extend {
      /* --------------------------------------- */
        padding-bottom: 2rem;
      }
      /* --------------------------------------- */
      button {
      /* --------------------------------------- */
        align-items: center;
        border-radius: var(--border-radius);
        display: inline-flex;
        gap: 1em;
        padding: clamp(1em, 2vw, 2em);
        vertical-align: middle;

        /* ---------------------- */
        &.active {
        /* ---------------------- */
          background: radial-gradient(ellipse, var(--background-color-elevated), transparent 50%);
        }
        /* ---------------------- */
        &:not(.active) img {
        /* ---------------------- */
          filter: grayscale(1);
          opacity: .25;
        }
        /* ---------------------- */
        img.icon {
        /* ---------------------- */
          opacity: .5 !important;
        }
        /* ---------------------- */
        img:not(.icon) {
        /* ---------------------- */
          transition: .25s;
        }
      }
    }
    /* --------------------------------------------------------- */
    .switch {
    /* --------------------------------------------------------- */
      box-sizing: content-box;
      display: inline-block;
      padding: 0;
      text-align: left;
      width: calc(var(--size-switch) * 1.75);

      background: var(--border-color);
      border-radius: 2em;
      outline: var(--button-border-size-nav) solid transparent;

      transition: var(--transition-time-fast);
    }
      /* - - - - - - - - - - - - - - - - - - - - - - - - */
      .switch ins {
      /* - - - - - - - - - - - - - - - - - - - - - - - - */
        display: inline-block;
        height: var(--size-switch);
        margin-left: 0;
        vertical-align: top;
        width: var(--size-switch);
        
        border-radius: 100%;
        background: var(--font-color-contrast);
        box-shadow: var(--shadow);

        transform: scale(.9);
        transition: margin .25s;
      }
      /* - - - - - - - - - - - - - - - - - - - - - - - - */
      .switch.on {
      /* - - - - - - - - - - - - - - - - - - - - - - - - */
        background: var(--background-primary);
      }
        /* - - - - - - - - - - - - - - - - - - - - - - - */
        .switch.on ins {
        /* - - - - - - - - - - - - - - - - - - - - - - - */
          margin-left: calc(var(--size-switch) * .75);
        }

    /* --------------------------------------------------------- */
    .trailerOverlay {
    /* --------------------------------------------------------- */
      aspect-ratio: 16/9;
      left: 0;
      position: absolute;
      width: 100%;
    }
  }
  @media (pointer: coarse) {
    /* --------------------------------------------------------- */
    .touch-handle {
    /* --------------------------------------------------------- */
      position: absolute;
      width: 100%;
    }
      /* ----------------------------------- */
      .touch-handle ins {
      /* ----------------------------------- */
        border-radius: 2em;
        display: inline-block;
        height: .375em;
        width: 3rem;

        background: white;
        box-shadow: var(--shadow-elevated);
        opacity: var(--opacity-overlay);
      }
  }
  @media (prefers-color-scheme: light) {
  /*-----------------------------------------------------------------------------------------------*/
    /* --------------------------------------------------------- */
    .streamer button:not(.active)#googleplay img,
    .streamer button:not(.active)#upc img {
  /* --------------------------------------------------------- */
      opacity: .5;
    }
  /* --------------------------------------------------------- */
    .streamer button:not(.active)#sky img,
    .streamer button:not(.active)#prime img {
  /* --------------------------------------------------------- */
      opacity: .35;
    }
  /* --------------------------------------------------------- */
    .streamer button:not(.active)#msstore img {
  /* --------------------------------------------------------- */
      opacity: .75;
    }
  }
  @media (prefers-color-scheme: dark) {
  /*-----------------------------------------------------------------------------------------------*/
    /* --------------------------------------------------------- */
    .streamer button:not(.active)#netflix img {
    /* --------------------------------------------------------- */
      opacity: 1;
    }
    /* --------------------------------------------------------- */
    .streamer button:not(.active)#sky img {
    /* --------------------------------------------------------- */
      opacity: .5;
    }
    /* --------------------------------------------------------- */
    img.iconSpacer {
    /* --------------------------------------------------------- */
      opacity: .5;
    }
  }
  /*-----------------------------------------------------------------------------------------------*/
  @media (hover: hover) and (pointer: fine) {
  /*-----------------------------------------------------------------------------------------------*/
    /* --------------------------------------------------------- */
    .bar:not(:disabled):hover {
    /* --------------------------------------------------------- */
      background-color: var(--background-color-elevated);
      box-shadow: var(--shadow-elevated);
    }
    /* --------------------------------------------------------- */
    .card nav.menu button:hover {
    /* --------------------------------------------------------- */
      background-color: var(--background-color);    
    }
      /* --------------------------------------- */
      .card nav.menu button:hover img.icon {
      /* --------------------------------------- */
        opacity: 1;
      }
    /* --------------------------------------------------------- */
    .chip:hover {
    /* --------------------------------------------------------- */
      background: var(--background-color-lowered);
    }
    /* --------------------------------------------------------- */
    .icon.overlay:hover {
    /* --------------------------------------------------------- */
      background: var(--background-overlay-image-hover);
    }
    /* --------------------------------------------------------- */
    .streamer button:not(:disabled):hover {
    /* --------------------------------------------------------- */
      background: var(--background-color-contrast);
    }
      /* ------------------------------------------------------- */
      .streamer button:not(:disabled):hover img {
      /* ------------------------------------------------------- */
        transform: var(--transform-zoom);
      }
    /* --------------------------------------------------------- */
    .flicks .flick:hover {
    /* --------------------------------------------------------- */
      transform: scale(1.1);
      z-index: var(--z-index-flick-active);
    }
      /* --------------------------------------- */
      .flicks .flick:hover h3 small {
      /* --------------------------------------- */
        color: var(--font-color);
      }
      /* --------------------------------------- */
      .flicks .flick:hover img {
      /* --------------------------------------- */
        box-shadow: var(--shadow-elevated);
        opacity: 1;
      }
    /* --------------------------------------------------------- */
    .rating:hover button {
    /* --------------------------------------------------------- */
      background: none;
    }
      /* --------------------------------------- */
      .rating button:hover,
      .rating button:has(~ button:hover) {
      /* --------------------------------------- */
        background: var(--background-highlight-glow);
      }
      /* --------------------------------------- */
        .rating button:hover img,
        .rating button:has(~ button:hover) img {
      /* --------------------------------------- */
          opacity: 1;
        }
    /* --------------------------------------------------------- */
    .switch:hover,
    button:hover .switch {
    /* --------------------------------------------------------- */
      outline-color: var(--border-color);
    }
    /* --------------------------------------------------------- */
    .switch.on:hover,
    button:hover .switch.on {
    /* --------------------------------------------------------- */
      outline-color: var(--font-color-primary);
    }
  }
}