@layer _color {
  :root {
    --primary-hue: 72.42;
    --primary-chroma: .3;
    --secondary-hue: 23;
    --secondary-chroma: 1.9;
    --tertiary-hue: 50;
    --quaternary-hue: 104;
    --quinary-hue: 375;
    --color-black: #000;
    --color-white: #fff;
    --color-foreground: var(--color-surface-90);
    --color-background: var(--color-surface-10);
    --color-primary-1: oklch(.779 var(--primary-chroma) var(--primary-hue));
    --color-primary-2: oklch(.795 var(--primary-chroma) var(--primary-hue));
    --color-primary-3: oklch(.81 var(--primary-chroma) var(--primary-hue));
    --color-primary-4: oklch(.825 var(--primary-chroma) var(--primary-hue));
    --color-primary-5: oklch(.84 var(--primary-chroma) var(--primary-hue));
    --color-primary-6: oklch(.855 var(--primary-chroma) var(--primary-hue));
    --color-primary-7: oklch(.87 var(--primary-chroma) var(--primary-hue));
    --color-primary-8: oklch(.885 var(--primary-chroma) var(--primary-hue));
    --color-primary-9: oklch(.92 var(--primary-chroma) var(--primary-hue));
    --color-secondary-1: oklch(.65 var(--secondary-chroma) var(--secondary-hue));
    --color-secondary-2: oklch(.7 var(--secondary-chroma) var(--secondary-hue));
    --color-secondary-3: oklch(.72 var(--secondary-chroma) var(--secondary-hue));
    --color-secondary-4: oklch(.75 var(--secondary-chroma) var(--secondary-hue));
    --color-secondary-5: oklch(.78 var(--secondary-chroma) var(--secondary-hue));
    --color-secondary-6: oklch(.81 var(--secondary-chroma) var(--secondary-hue));
    --color-secondary-7: oklch(.84 var(--secondary-chroma) var(--secondary-hue));
    --color-secondary-8: oklch(.87 var(--secondary-chroma) var(--secondary-hue));
    --color-tertiary-1: oklch(.55 .15 var(--tertiary-hue));
    --color-tertiary-2: oklch(.6 .15 var(--tertiary-hue));
    --color-tertiary-3: oklch(.65 .15 var(--tertiary-hue));
    --color-tertiary-4: oklch(.7 .15 var(--tertiary-hue));
    --color-tertiary-5: oklch(.75 .15 var(--tertiary-hue));
    --color-tertiary-6: oklch(.8 .15 var(--tertiary-hue));
    --color-tertiary-7: oklch(.85 .15 var(--tertiary-hue));
    --color-tertiary-8: oklch(.9 .15 var(--tertiary-hue));
    --color-quaternary-1: oklch(.6 .1 var(--quaternary-hue));
    --color-quaternary-2: oklch(.65 .1 var(--quaternary-hue));
    --color-quaternary-3: oklch(.68 .1 var(--quaternary-hue));
    --color-quaternary-4: oklch(.71 .1 var(--quaternary-hue));
    --color-quaternary-5: oklch(.74 .1 var(--quaternary-hue));
    --color-quaternary-6: oklch(.77 .1 var(--quaternary-hue));
    --color-quaternary-7: oklch(.8 .1 var(--quaternary-hue));
    --color-quaternary-8: oklch(.83 .1 var(--quaternary-hue));
    --color-quinary-1: oklch(.65 .2 var(--quinary-hue));
    --color-quinary-2: oklch(.7 .2 var(--quinary-hue));
    --color-quinary-3: oklch(.72 .2 var(--quinary-hue));
    --color-quinary-4: oklch(.75 .2 var(--quinary-hue));
    --color-quinary-5: oklch(.78 .2 var(--quinary-hue));
    --color-quinary-6: oklch(.81 .2 var(--quinary-hue));
    --color-quinary-7: oklch(.84 .2 var(--quinary-hue));
    --color-quinary-8: oklch(.87 .2 var(--quinary-hue));
    --color-surface-1: oklch(.02 .02 var(--primary-hue));
    --color-surface-100: oklch(.09 .02 var(--primary-hue));
    --color-surface-97: oklch(.1 .02 var(--primary-hue));
    --color-surface-95: oklch(.11 .02 var(--primary-hue));
    --color-surface-90: oklch(.15 .02 var(--primary-hue));
    --color-surface-87: oklch(.19 .02 var(--primary-hue));
    --color-surface-85: oklch(.23 .02 var(--primary-hue));
    --color-surface-80: oklch(.32 .02 var(--primary-hue));
    --color-surface-70: oklch(.49 .02 var(--primary-hue));
    --color-surface-60: oklch(.66 .02 var(--primary-hue));
    --color-surface-50: oklch(.76 .02 var(--primary-hue));
    --color-surface-40: oklch(.84 .02 var(--primary-hue));
    --color-surface-30: oklch(.89 .02 var(--primary-hue));
    --color-surface-25: oklch(.93 .02 var(--primary-hue));
    --color-surface-20: oklch(.95 .02 var(--primary-hue));
    --color-surface-15: oklch(.9725 .02 var(--primary-hue));
    --color-surface-10: oklch(.985 .02 var(--primary-hue));
    --color-surface-0: oklch(1 0 0);
    --surface-chroma: .005;
    --color-surface-saturated-1: oklch(.02 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-100: oklch(.09 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-97: oklch(.1 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-95: oklch(.11 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-90: oklch(.15 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-87: oklch(.19 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-85: oklch(.23 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-80: oklch(.32 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-70: oklch(.49 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-60: oklch(.66 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-50: oklch(.76 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-40: oklch(.84 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-35: oklch(.9 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-30: oklch(.93 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-25: oklch(.94 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-20: oklch(.96 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-15: oklch(.97 var(--surface-chroma) var(--secondary-hue));
    --color-surface-saturated-10: oklch(.98 var(--surface-chroma) var(--secondary-hue));
    --color-green: var(--color-quaternary-1);
    --color-orange: oklch(.75 .15 42);
    --color-red: var(--color-quinary-1);
    --button-label-color: var(--color-white);
    --button-active-color: var(--color-primary-1);
    --input-label-color: colorx(in srgb, var(--color-foreground) 100%, var(--color-primary) 80%);
    --notification-success-color: var(--color-green);
    --notification-urgent-color: var(--color-red);
    --notification-warning-color: var(--color-orange);
    --notification-error-color: var(--color-red);
    --input-focus-color: var(--color-secondary-1);
    --card-border-color: var(--color-surface-10);
    --border-color: var(--color-surface-40);
  }

  .--dark {
    --color-surface-0: oklch(.02 .02 var(--primary-hue));
    --color-surface-10: oklch(.07 .02 var(--primary-hue));
    --color-surface-15: oklch(.1 .02 var(--primary-hue));
    --color-surface-20: oklch(.15 .02 var(--primary-hue));
    --color-surface-25: oklch(.19 .02 var(--primary-hue));
    --color-surface-30: oklch(.23 .02 var(--primary-hue));
    --color-surface-40: oklch(.32 .02 var(--primary-hue));
    --color-surface-50: oklch(.49 .02 var(--primary-hue));
    --color-surface-60: oklch(.66 .02 var(--primary-hue));
    --color-surface-70: oklch(.76 .02 var(--primary-hue));
    --color-surface-80: oklch(.84 .02 var(--primary-hue));
    --color-surface-85: oklch(.89 .02 var(--primary-hue));
    --color-surface-87: oklch(.93 .02 var(--primary-hue));
    --color-surface-90: oklch(.96 .02 var(--primary-hue));
    --color-surface-95: oklch(.96 .02 var(--primary-hue));
    --color-surface-97: oklch(.97 .02 var(--primary-hue));
    --color-surface-100: oklch(.98 .02 var(--primary-hue));
    --color-surface-1: oklch(1 0 0);
    --color-surface-saturated-0: oklch(.02 .03 var(--primary-hue));
    --color-surface-saturated-10: oklch(.08 .03 var(--primary-hue));
    --color-surface-saturated-15: oklch(.1 .03 var(--primary-hue));
    --color-surface-saturated-20: oklch(.14 .03 var(--primary-hue));
    --color-surface-saturated-25: oklch(.19 .03 var(--primary-hue));
    --color-surface-saturated-30: oklch(.22 .03 var(--primary-hue));
    --color-surface-saturated-40: oklch(.32 .03 var(--primary-hue));
    --color-surface-saturated-50: oklch(.49 .03 var(--primary-hue));
    --color-surface-saturated-60: oklch(.66 .03 var(--primary-hue));
    --color-surface-saturated-70: oklch(.76 .03 var(--primary-hue));
    --color-surface-saturated-80: oklch(.84 .03 var(--primary-hue));
    --color-surface-saturated-85: oklch(.89 .03 var(--primary-hue));
    --color-surface-saturated-87: oklch(.93 .03 var(--primary-hue));
    --color-surface-saturated-90: oklch(.96 .03 var(--primary-hue));
    --color-surface-saturated-95: oklch(.96 .03 var(--primary-hue));
    --color-surface-saturated-97: oklch(.97 .03 var(--primary-hue));
    --color-surface-saturated-100: oklch(.98 .03 var(--primary-hue));
    --color-surface-saturated-1: oklch(1 0 0);
    --color-foreground: var(--color-surface-90);
    --color-background: var(--color-surface-0);
    --button-active-color: var(--color-primary-9);
    --input-label-color: color-mix(in srgb, var(--color-foreground) 100%, var(--color-primary) 80%);
    --notification-success-color: var(--color-green);
    --notification-urgent-color: var(--color-red);
    --notification-warning-color: var(--color-orange);
    --notification-error-color: var(--color-red);
    --input-focus-color: var(--color-primary-3);
    --card-border-color: var(--color-surface-0);
    --border-color: var(--color-surface-20);
  }
}

@layer _type {
  @font-face {
    font-family: PP Neue Montreal Mono;
    src: url("PPNeueMontrealMono-Thin.50488392.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: PP Neue Montreal Mono;
    src: url("PPNeueMontrealMono-Book.f223e109.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: PP Neue Montreal Mono;
    src: url("PPNeueMontrealMono-Medium.9196d5a3.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: PP Neue Montreal Mono;
    src: url("PPNeueMontrealMono-RegularItalic.5e589bc6.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: PP Neue Montreal Mono;
    src: url("PPNeueMontrealMono-Bold.1b50d1cb.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: PP Neue Montreal Mono;
    src: url("PPNeueMontrealMono-BoldItalic.c0704a0c.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }
}

@layer _var {
  :root {
    --font-size: 16px;
    --space: calc(var(--font-size) * 1.5);
    --border-radius: calc(var(--space) * 2);
    --animation-step: .125s;
    --focus-box-shadow: 0 0 0 1.5em var(--primary-color);
    --focus-box-shadow-color: var(--primary-color);
    --screen-xl: 1680px;
    --screen-lg: 1280px;
    --screen-md: 976px;
    --screen-sm: 736px;
    --border-width: 2px;
    --modal__border-radius: 24px;
  }

  @media (width >= 599px) {
    :root {
      --space: calc(var(--font-size) * 2);
      --border-radius: calc(var(--space) * 1.5);
    }
  }

  @media (width >= 1280px) {
    :root {
      --space: calc(var(--font-size) * 2.5);
    }
  }
}

@layer _set {
  * {
    box-sizing: border-box;
  }

  :before, :after {
    box-sizing: inherit;
  }

  html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    font-size: var(--font-size);
  }

  html {
    -webkit-tap-highlight-color: #0000;
  }

  body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
  }

  ol, ul {
    list-style: none;
  }
}

@layer _button {
  button, [data-roll="button"] {
    box-sizing: border-box;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    font-weight: 400;
    line-height: var(--font-line-height-body);
    cursor: pointer;
    text-align: center;
    text-transform: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    background-color: #0000;
    border: 1px solid #0000;
    outline: none;
    align-items: center;
    padding: 0;
    overflow: visible;

    & abbr {
      pointer-events: none;
      width: 1em;
      height: 1em;

      &.--icon {
        & svg {
          transform-origin: center;
          width: 100%;
        }
      }
    }

    &:focus {
      outline-offset: .25em;
    }

    &:active {
      transform: scale(.97);
    }
  }

  .jacks0n-button, [data-roll="button"] {
    color: var(--color-white);
    background-color: var(--color-secondary-1);
    letter-spacing: .01em;
    transition: transform var(--animation-step) ease-in-out, box-shadow var(--animation-step) ease-in-out, border-color var(--animation-step) ease-in-out, background-color var(--animation-step) ease-in-out;
    letter-spacing: .0375em;
    border-radius: var(--button-border-radius, 1em);
    text-align: center;
    font-weight: 600;
    line-height: 1em;
    font-size: var(--font-size);
    justify-content: center;
    align-items: center;
    padding: 1.125em;
    display: inline-flex;
    text-decoration: none !important;

    & span, & svg {
      width: 100%;
    }

    & i {
      transform-origin: center;
      background-color: var(--color-background);
      border-radius: 111em;
      width: 1em;
      height: 1em;
      margin: 0 .5em 0 -.5em;
      display: inline-block;
      transform: scale(.75);
    }
  }

  .jacks0n-button, .jacks0n-button--def, button, [data-role="button"], [data-button=""] {
    &[data-size="xs" i], &.--xs {
      padding: .25em 1em;
      font-size: .75em;
      font-weight: 400;

      &.--round {
        padding: .675em 1.35em;
      }

      &.--circle {
        padding: .675em .875em;
      }
    }

    &[data-size="sm" i], &.--sm {
      padding: .675em 1em;
      font-size: 1em;
      font-weight: 400;
    }

    &[data-size="md" i], &.--md {
      padding: 1.125em 1.25em;
    }

    &[data-size="lg" i], &.--lg {
      padding: 1em 1.125em;
      font-size: 1.25em;
    }

    &[data-size="xl" i], &.--xl {
      padding: 1.25em 1.375em;
      font-size: 1.375em;
      font-weight: 800;
      line-height: 1.125em;
    }

    &[data-variant="primary" i], &.--primary {
      background-color: var(--color-primary-1);
      color: var(--color-white);
    }

    &[data-variant="secondary" i], &.--secondary {
      background-color: color-mix(in srgb, var(--color-surface-saturated-10) 25%, transparent 100%);
      backdrop-filter: blur(.4em);
      color: var(--color-foreground);
      border-radius: calc(var(--border-radius) / 6);
      transition: background-color var(--animation-step) ease, border-color calc(var(--animation-step) * 2) ease, box-shadow var(--animation-step) ease, transform var(--animation-step) ease;
      border: 1px solid;
      border-color: var(--color-surface-30);
      border-top-color: color-mix(in srgb, var(--color-surface-40) 50%, transparent 100%);
      border-left-color: color-mix(in srgb, var(--color-surface-40) 50%, transparent 100%);
      border-bottom-color: color-mix(in srgb, var(--color-surface-40) 50%, transparent 100%);
      background-color: color-mix(in srgb, var(--color-surface-saturated-20) 95%, transparent 60%);

      &:hover {
        background-color: color-mix(in srgb, var(--color-surface-saturated-30) 95%, transparent 30%);
        border-color: var(--color-surface-10);
        border-top-color: color-mix(in srgb, var(--color-surface-40) 50%, transparent 100%);
        border-left-color: color-mix(in srgb, var(--color-surface-40) 50%, transparent 100%);
        border-bottom-color: color-mix(in srgb, var(--color-surface-50) 90%, transparent 60%);
        border-right-color: color-mix(in srgb, var(--color-surface-50) 90%, transparent 60%);
      }
    }
  }

  &[data-variant="tertiary" i], &.--tertiary {
    background-color: var(--color-surface-40);
    color: var(--color-foreground);
  }

  &[data-variant="outline" i], &.--outline {
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    border-color: var(--color-surface-70);
    color: var(--color-surface-100);
    background-color: #0000;
  }

  &[data-variant="primary" i], &.--primary, &[data-variant="secondary" i], &.--secondary, &[data-variant="outline" i], &.--outline {
    &:hover {
      background-color: var(--color-primary-3);
      color: var(--color-white);
    }
  }

  &.--wide {
    width: 100%;
    max-width: var(--screen-md);
    text-align: center;
  }

  &.--flex {
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  &[data-round], &.--round {
    border-radius: 11em;
    padding-left: 1.125em;
    padding-right: 1.125em;
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: .8;
    color: #777 !important;
    box-shadow: none !important;
    background-color: #ccc !important;

    &:hover, &:active, &:focus {
      transform: none;
    }
  }

  .jacks0n-button--icon-only, [data-icon-only] {
    text-align: center;
    justify-content: center;
    align-items: center;
    display: grid;

    & abbr {
      line-height: auto;
      width: 100%;
      height: 100%;
      margin: 0 auto;

      & svg {
        width: 100%;
      }

      &.--icon--padding {
        & svg {
          padding: .5em;
        }
      }
    }

    &[data-size="xs"], &.--xs {
      width: 2.25em;
      height: 2.25em;
      padding: .375em .75em;
    }

    &[data-size="sm"], &.--sm {
      width: 2.5em;
      height: 2.5em;
      padding: .375em 1em;
    }

    &[data-size="md"], &.--md {
      width: 3.5em;
      height: 3.5em;
      padding: .75em 1em;
    }

    &[data-size="lg"] {
      width: 4em;
      height: 4em;
      padding: .75em;
    }

    &[data-size="xl"] {
      width: 4em;
      height: 4em;
      padding: 1em;
    }

    &[data-round] {
      text-align: center;
    }
  }

  button.jacks0n-button__switch {
    background-color: var(--color-surface-30);
    border: 1px solid var(--color-surface-30);
    white-space: nowrap;
    transition: background-color var(--animation-step) ease-in-out, border-color var(--animation-step) ease-in-out;
    border-radius: 10em;
    padding: .25em;
    display: block;

    & span {
      letter-spacing: .05em;
      pointer-events: none;
      width: 3em;
      font-size: .875em;
      line-height: var(--font-line-height-body);
      text-transform: uppercase;
      z-index: 1;
      transition: color calc(var(--animation-step) * 1.5) ease-in-out;
      border-radius: 10em;
      padding: .25em;
      display: inline-block;
      position: relative;
      background-color: #0000 !important;

      &:before {
        content: "";
        background-color: var(--color-background);
        z-index: -2;
        width: 100%;
        height: 100%;
        transition: transform calc(var(--animation-step) * 2) cubic-bezier(0, -.25, .5, 1.25), background-color var(--animation-step) ease-in-out;
        border-radius: 111em;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
      }

      & abbr {
        transition: opacity calc(var(--animation-step) / 2) ease-in-out 0;
        margin: .375em 0 0 .2675em;
        position: absolute;
        left: -100%;

        & svg {
          width: 175%;
          height: auto;
          overflow: visible;

          & path {
            fill: none;
            stroke-width: 1.75px;
            stroke: var(--color-background);
            transition: stroke-dashoffset calc(var(--animation-step) * 1.5) ease calc(var(--animation-step) * 1.25);
            stroke-dasharray: 20;
            stroke-dashoffset: 20px;
          }
        }
      }
    }

    &:active {
      transform: none;
    }

    &[role="switch"][aria-checked="false"] :first-child, &[role="switch"][aria-checked="true"] :first-child {
      color: inherit;
      z-index: 2;
      background-color: #0000 !important;

      &:before {
        display: none;
      }
    }

    &[role="switch"][aria-checked="true"] :last-child {
      color: var(--color-foreground);

      &:before {
        background-color: var(--button-active-color);
        border-color: var(--button-active-color);
        box-shadow: 0 0 .5em color-mix(in srgb, var(--button-active-color) 50%, transparent 95%);
      }

      & abbr {
        opacity: 1;
        transition: opacity calc(var(--animation-step) / 2) ease-in-out calc(var(--animation-step) * 1.25);

        & svg {
          & path {
            stroke-dasharray: 20;
            stroke-dashoffset: 0;
          }
        }
      }
    }

    &[role="switch"][aria-checked="false"] :last-child {
      color: var(--color-surface-50);

      &:before {
        transform: translateX(calc(-100% - .275em));
      }
    }

    &[role="switch"][aria-checked="true"] :first-child {
      color: var(--color-surface-50);
    }

    &[role="switch"][aria-checked="true"] :last-child {
      color: var(--color-background);
    }

    &:focus {
      outline: 0em solid var(--color-primary-1);
      outline-offset: .125em;
    }

    &:focus:not(:focus-visible) {
      box-shadow: none;
      outline: none;
    }

    &:focus:not(:-moz-focusring) {
      box-shadow: none;
      outline: none;
    }
  }

  label.jacks0n-label__switch {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    opacity: .6;
    padding: 0 .5em 0 0;
    font-weight: 300;

    &:hover {
      opacity: 1;
    }
  }

  button.jacks0n-button__switch.switch--sm {
    background-color: var(--color-surface-20);
    border: 1px solid var(--color-surface-20);
    font-size: .75em;

    & span {
      width: 2.5em;
      height: 2.5em;
      color: #0000 !important;

      &:before {
        transition: transform calc(var(--animation-step) * 1.25) cubic-bezier(0, -.25, .5, 1), background-color var(--animation-step) ease-in-out;
      }
    }

    &[role="switch"][aria-checked="false"] :last-child {
      &:before {
        transform: translateX(calc(-100% - .25em));
      }
    }

    &[role="switch"][aria-checked="true"] {
      background-color: var(--button-active-color);
      border-color: var(--button-active-color);

      & span {
        &:before {
          background-color: var(--color-background);
          border-color: var(--color-background);
        }
      }
    }
  }

  button.jacks0n-button__switch.switch--xs {
    background-color: var(--color-surface-60);
    border: 1px solid var(--color-surface-60);
    font-size: .5em;

    & span {
      width: 2.5em;
      height: 2.5em;
      color: #0000 !important;

      &:before {
        transition: transform calc(var(--animation-step) * 1.25) cubic-bezier(0, -.25, .5, 1), background-color var(--animation-step) ease-in-out;
      }
    }

    &[role="switch"][aria-checked="false"] :last-child {
      &:before {
        transform: translateX(calc(-100% - .25em));
      }
    }

    &[role="switch"][aria-checked="true"] {
      background-color: var(--button-active-color);
      border-color: var(--button-active-color);
      box-shadow: 0 0 2em 0 color-mix(in srgb, var(--button-active-color) 40%, transparent 95%);

      & span {
        &:before {
          background-color: var(--color-background);
          border-color: var(--color-background);
        }
      }
    }
  }

  button.__close {
    background-color: var(--color-surface-20);
    border-radius: .25em;

    & abbr.closeIcon {
      pointer-events: none;
      width: 1em;
      height: 1em;
      margin: 0;
      position: relative;

      &:before, &:after {
        content: "";
        background-color: var(--color-foreground);
        width: 100%;
        height: 2px;
        transition: transform calc(var(--animation-step) * 2) ease-in-out;
        display: block;
        position: absolute;
        top: calc(50% - .25em);
        left: 0;
        transform: translateY(.25em)rotate(-225deg)scaleX(0);
      }

      &:after {
        transition: transform calc(var(--animation-step) * 2) ease-in-out;
        top: calc(50% + .25em);
        transform: translateY(-.25em)rotate(225deg)scaleX(0);
      }
    }

    &[aria-expanded="true"] {
      & span {
        opacity: 0;
      }

      & abbr.closeIcon {
        &:before {
          transform: translateY(.25em)rotate(-225deg)scaleX(1);
        }

        &:after {
          transform: translateY(-.25em)rotate(225deg)scaleX(1);
        }
      }
    }

    &[aria-expanded="false"] {
      & span {
        opacity: 1;
      }

      & abbr.closeIcon {
        &:before {
          transform: translateY(.25em)rotate(-225deg)scaleX(0);
        }

        &:after {
          transform: translateY(-.25em)rotate(225deg)scaleX(0);
        }
      }
    }

    &:hover {
      background-color: var(--color-primary-7);
    }
  }

  #audio-controls label > button.__close {
    z-index: 10;
    background-color: color-mix(in srgb, var(--color-surface-20) 80%, transparent 20%);
    border: 1px solid color-mix(in srgb, var(--color-surface-40) 60%, transparent 40%);
    width: 2.25em;
    height: 2.25em;
    transition: all var(--animation-step) ease;
    border-radius: .25em;
    justify-content: center;
    align-items: center;
    padding: .25em;
    display: grid;
    position: absolute;
    top: .5em;
    right: .5em;

    &:hover {
      background-color: color-mix(in srgb, var(--color-surface-30) 90%, transparent 10%);
      border-color: color-mix(in srgb, var(--color-surface-50) 80%, transparent 20%);
      transform: scale(1.05);
    }

    &:active {
      transform: scale(.95);
    }

    & abbr.--icon {
      justify-content: center;
      align-items: center;
      width: 1em;
      height: 1em;
      display: grid;

      & svg {
        width: 100%;
        height: 100%;
        color: var(--color-foreground);
      }
    }
  }
}

@layer jacks0n {
  video::-webkit-media-controls {
    opacity: 0;
    display: none !important;
  }

  video::-webkit-media-controls-start-playback-button {
    display: none !important;
  }

  * {
    -webkit-tap-highlight-color: transparent !important;
  }

  html {
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    overflow: hidden;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  main {
    --right: .5px;
    --color-user-background: #000002;
    grid-template-columns: auto var(--right);
    width: 100%;
    min-height: 100dvh;
    transition: grid-template-columns calc(var(--animation-step) * 1.5) cubic-bezier(0, .25, .25, 1.2) 0s, opacity calc(var(--animation-step) * 1) ease 2s;
    display: grid;
    position: fixed;
    overflow: hidden;

    @media only screen and (width <= 699px) {
      & {
        grid-template-columns: 100% var(--right);
      }
    }

    & nav.JACKS0N__nav {
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden scroll;

      & > div {
        background-color: var(--color-surface-saturated-25);
      }

      & > * {
        transition: opacity calc(var(--animation-step) * 1.25) ease 0s;
        opacity: 0;
        width: 100%;
      }

      & .nav__header {
        & h1 {
          letter-spacing: .01em;
          letter-spacing: .125em;
          margin-bottom: .25em;
          font-size: 2em;
          font-weight: 300;
          line-height: 1.25em;
        }

        & h2 {
          letter-spacing: .01em;
          letter-spacing: .125em;
          font-size: 1.25em;
          font-weight: 300;
          line-height: 1em;
        }
      }

      @media only screen and (width <= 699px) {
        & {
          width: 300px;
          min-height: 100dvh;
          transition: transform .3s ease-in-out;
          top: 0;
          bottom: 0;
          left: -340px;
          background-color: var(--color-surface-saturated-25) !important;
          border-left: 1px solid #0000 !important;
          position: fixed !important;
        }
      }
    }

    &.w__nav {
      --right: 22em;
      will-change: grid-template-columns, opacity;
      height: 100dvh;
      transition: grid-template-columns calc(var(--animation-step) * 3) cubic-bezier(0, .25, .25, 1.2) 0s, opacity calc(var(--animation-step) * 1) ease 3s;

      @media only screen and (width >= 1400px) {
        & {
          --right: 28em;
        }
      }

      & .JACKS0N__nav {
        @media only screen and (width <= 699px) {
          & {
            z-index: 11;
            width: 100%;
            padding: 1em;
            position: absolute;
            left: 0;
          }
        }

        & > * {
          transition: opacity calc(var(--animation-step) * 1) ease .2875s;
          opacity: 1;

          @media only screen and (width <= 699px) {
            & {
              padding: 1em;
              background-color: #0000 !important;
            }
          }
        }
      }

      & .calendar__heading {
        display: none;
      }
    }
  }

  @layer _button {
    button.toggle__JACKS0N__nav {
      top: calc(100dvh - 4.5em - var(--space) / 2);
      right: calc(var(--space) / 2);
      z-index: 111111;
      white-space: nowrap;
      pointer-events: all;
      gap: 0;
      width: 4.5em;
      font-size: 1em;
      display: flex;
      position: absolute;
      overflow: hidden;

      & span.__button-label {
        letter-spacing: .01em;
        letter-spacing: .125em;
        text-transform: uppercase;
        padding: 0 0 0 .5em;
        font-size: 1.375em;
        font-weight: 400;
        line-height: 1em;
        animation-name: marquee-content;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        display: none;
      }

      & abbr {
        justify-content: center;
        align-items: center;
        gap: .5em;
        width: 3em;
        height: 2em;
        display: grid;

        & svg {
          transform-origin: center;
          transform: scale(1)rotate(180deg)translate(-.125em);
        }
      }

      &[aria-expanded="false"] {
        & abbr.toggleIcon {
          & svg {
            transform: scale(1)rotate(0)translate(-.125em);
          }
        }
      }
    }

    button {
      &.--primary.--big {
        color: var(--color-foreground);
        font-size: inherit;
        cursor: pointer;
        background-color: color-mix(in srgb, var(--color-background) 5%, color-mix(in srgb, #fff 75%, var(--color-foreground) 40%) 30%);
        border-radius: calc(var(--border-radius) / 6);
        border: 1px solid color-mix(in srgb, var(--color-background) 10%, var(--color-foreground) 40%);
        text-shadow: -.5px -.5px 1px color-mix(in srgb, var(--color-background) 40%, var(--color-foreground) 20%), 0 0 12px color-mix(in srgb, var(--color-primary-1) 70%, transparent 40%);
        transition: background-color var(--animation-step) ease, border-color calc(var(--animation-step) * 2) ease, box-shadow var(--animation-step) ease, transform var(--animation-step) ease;
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-background) 10%, var(--color-foreground) 40%), inset calc(.25 * var(--border-width)) calc(.125 * var(--border-width)) 0 .25px color-mix(in srgb, transparent 0%, var(--color-background) 30%), inset -1px -1px 0 0px color-mix(in srgb, var(--color-background) 10%, var(--color-foreground) 20%);
        backdrop-filter: blur(.25em);
        border-radius: .25em;
        line-height: 1;
        overflow: hidden;
        padding: .75em .875em .875em !important;
        font-weight: 700 !important;

        &:after {
          content: "";
          z-index: 1;
          background: radial-gradient(ellipse farthest-corner at right bottom, var(--color-primary-1) 1%, color-mix(in srgb, var(--color-primary-1) 80%, var(--color-primary-1)) 33%, color-mix(in srgb, var(--color-primary-1) 40%, var(--color-primary-1)) 20%, transparent 20%), radial-gradient(ellipse farthest-corner at left top, var(--color-foreground) 0%, color-mix(in srgb, var(--color-primary-1) 90%, var(--color-primary-1) 50%) 2%, color-mix(in srgb, var(--color-primary-1) 20%, var(--color-primary-1)) 15%, color-mix(in srgb, var(--color-primary-1) 20%, var(--color-primary-3) 100%) 62.5%, color-mix(in srgb, var(--color-primary-1) 40%, var(--color-primary-3) 100%) 100%);
          opacity: .75;
          mix-blend-mode: overlay;
          width: 100%;
          height: 100%;
          transition: opacity calc(var(--animation-step) * 2) ease;
          display: block;
          position: absolute;
          top: 0;
          left: 0;
        }

        &:hover {
          &:after {
            opacity: .675;
          }
        }

        &:active {
          box-shadow: inset 2px 2px 1px 0 color-mix(in srgb, transparent 40%, var(--color-foreground) 20%), inset -.5px calc(-.5 * var(--border-width)) 1px 0 color-mix(in srgb, transparent 10%, var(--color-background) 30%), 0 0 0 1px color-mix(in srgb, var(--color-background) 10%, var(--color-foreground) 90%);
          border-color: var(--color-primary-3);
          outline: 3px solid var(--color-primary-3);
          transform: scale(1);

          &:after {
            opacity: .85 !important;
          }

          &:hover {
            outline-offset: .5px;
            outline: 1px solid color-mix(in srgb, var(--color-secondary-3) 50%, var(--color-foreground) 30%);
          }

          & span {
            text-shadow: .5px .5px color-mix(in srgb, var(--color-background) 0%, var(--color-background) 50%);
          }
        }
      }
    }

    .--one, .--two, .--three, .--four, .--five {
      & button.toggle__JACKS0N__nav {
        transition: grid-template-columns calc(var(--animation-step) * 1.5) ease 0;
        grid-template-columns: 1fr auto;
        display: grid;
        width: auto !important;

        & span.__button-label {
          letter-spacing: .01em;
          transition: opacity calc(var(--animation-step) * 1) ease 0s;
          font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
          font-weight: 500;
          display: block;
          text-transform: none !important;
        }

        &[aria-expanded="true"] {
          grid-template-columns: .1px auto;
          width: 5em !important;

          & span.__button-label {
            opacity: 0;
          }
        }
      }

      @media only screen and (width <= 699px) {
        & button.toggle__JACKS0N__nav {
          width: calc(100vw - var(--space)) !important;

          & span.__button-label {
            text-align: left;
          }
        }
      }
    }
  }

  main .JACKS0N__nav {
    background-color: var(--color-surface-saturated-25);
    border-left: 1px solid var(--color-surface-saturated-40);
    align-items: start;
    display: grid;

    & > div {
      padding: calc(var(--space) * 1) calc(var(--space) / 2);
      text-align: center;
      grid-template-columns: 1fr;
      align-content: start;
      justify-items: center;
      gap: 0;
      display: grid;
    }
  }

  article {
    padding: var(--space);
    gap: var(--space);
    gap: calc(var(--space) / 1);
    grid-template-rows: 0 1fr;
    display: grid;
    position: relative;

    & > header {
      margin-top: calc(-1 * calc(var(--space) * 1)) auto 0;
      pointer-events: none;
      height: 100%;
      position: absolute;
    }

    & section {
      z-index: 2;
      padding: var(--space);
      height: 200%;
      position: relative;
    }
  }
}

@property --frame-size {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}

@keyframes frameSize {
  0% {
    --frame-size: 2;
  }

  100% {
    --frame-size: 5;
  }
}

@keyframes frameSizeReturn {
  0% {
    --frame-size: 5;
  }

  100% {
    --frame-size: 2;
  }
}

@keyframes frameSizeTwo {
  0%, 100% {
    --frame-size: 5;
  }

  50% {
    --frame-size: 9;
  }
}

@keyframes closeTimer {
  to {
    stroke-dashoffset: 0;
  }
}

html {
  --frame-size: 2;
  background-color: var(--color-surface-saturated-25);
  position: fixed;
  overflow: hidden;

  @media only screen and (width <= 699px) {
    & {
      --frame-size: 1;
    }
  }
}

body {
  opacity: 0;
  animation: .5s .375s forwards fadeIn;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

main {
  background-color: var(--color-surface-saturated-0);
  font-family: PP Neue Montreal Mono;
  animation: .675s cubic-bezier(0, .85, .125, 1.1) forwards frameSize;

  &.w__nav {
    opacity: 1;
    animation: .5s cubic-bezier(0, .25, .5, 1.05) forwards frameSizeReturn !important;
  }

  & .JACKS0N__nav {
    z-index: 111111;
    border-left: 0px solid var(--color-surface-saturated-80);
    background-color: #0000;
    position: relative;

    & h1 {
      padding: var(--space) calc(var(--space) / 2) 0;
      text-align: center;
      letter-spacing: .01em;
      color: var(--color-surface-saturated-80);
      background-color: #0000;
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
      font-size: 2.375em;
      font-weight: 300;
      line-height: 1.25em;
    }

    & .table-window {
      & table {
        & td {
          vertical-align: top;
        }
      }
    }

    & > * {
      background-color: #0000;
      gap: 0;

      & .streaming-links, & .complilation-links {
        margin: var(--space) 0 0 0;
        background-color: #0000;
        padding-top: 0;
        padding-bottom: 1em;
        background-color: color-mix(in srgb, var(--color-surface-saturated-15) 10%, transparent 100%) !important;

        & .sheet-table th, & .sheet-table td {
          text-align: left;
          padding-bottom: 0 !important;
        }
      }

      & .complilation-links {
        border: 1px solid var(--color-foreground);
        border-radius: 1.375em;
      }

      & #secondary-table-container {
        color: var(--color-surface-saturated-80);
        letter-spacing: .01em;
        margin-top: .875em;
        padding: .125em;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
        font-size: 1.375em;
        font-weight: 300;
        line-height: 1.25em;
      }

      & .sheet-table a {
        color: var(--color-surface-saturated-70);
        border-width: 1px;
        border-color: color-mix(in srgb, var(--color-surface-saturated-40) 100%, transparent 20%);
        border-left: 1px solid color-mix(in srgb, var(--color-surface-saturated-50) 100%, transparent 28%);
        border-right: .5px solid var(--color-surface-saturated-40);
        border-top: .5px solid var(--color-surface-saturated-60);
        text-align: center;
        background-color: #0000;
        border-radius: 1em;
        font-family: PP Neue Montreal Mono;
        font-weight: 300;
        position: relative;
        overflow: hidden;

        @media only screen and (width <= 699px) {
          & {
            color: var(--color-foreground);
          }
        }

        &:hover {
          border-color: var(--color-surface-saturated-90) !important;
          background-color: var(--color-surface-saturated-90) !important;
          color: var(--color-background) !important;
        }

        &.active {
          cursor: default;
          border-color: var(--color-surface-saturated-90) !important;
          background-color: var(--color-surface-saturated-90) !important;
          color: var(--color-background) !important;
        }
      }
    }

    & > div {
      gap: 0;
      width: 100%;
      height: calc(100% - 2em);
      margin: 0;
      padding: 0;
      position: relative;

      @media only screen and (width >= 699px) {
        & {
          margin: var(--space) var(--space) 0 0;
          width: calc(100% - 2em);
          color: var(--color-foreground) !important;
        }

        & h1 {
          color: var(--color-foreground);
        }
      }

      & > div {
        z-index: 1111;
        gap: 0;
        height: auto;
      }
    }
  }

  & button.toggle__JACKS0N__nav.toggle__JACKS0N__nav {
    top: calc(100dvh - 5.0675em - var(--space) / 2);
    background: color-mix(in srgb, var(--color-surface-saturated-90) 3%, transparent 100%);
    z-index: 1111111111;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--color-primary-1) 0%, var(--color-foreground) 80%);
    border-radius: 1.675rem !important;
    height: 5rem !important;

    &[aria-expanded="true"] {
      width: 5em;

      @media only screen and (width <= 699px) {
        & {
          background: var(--color-background) !important;
          border-color: var(--color-foreground) !important;
          box-shadow: 0 0 0 1px var(--color-foreground) !important;
        }
      }
    }

    @media only screen and (width <= 699px) {
      & {
        top: calc(100dvh - 3.0675em - var(--space) / 2);
        height: 3em !important;
        padding: .375em !important;
      }
    }
  }

  & > article {
    & > header {
      z-index: 222222;
      width: 100%;
      overflow: visible;
    }

    & section.JACKS0N__01 {
      z-index: 11;
      width: 100%;
      max-width: 100vmin;
      height: 100%;
      height: calc(100dvh - calc(var(--space) * 2));
      border: 1px solid var(--color-surface-saturated-0);
      box-shadow: 0 0 1em 0 var(--color-surface-saturated-30) inset, 0 0 1em 0 color-mix(in srgb, var(--color-surface-saturated-40) 50%, transparent 95%), 0 0 0 1em color-mix(in srgb, var(--color-surface-saturated-30) 70%, transparent 95%);
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      padding: 0;
      display: grid;
      overflow: hidden;

      &:after {
        content: "";
        opacity: .5;
        background-color: var(--color-surface-saturated-30);
        border: solid calc(var(--frame-size) * 1vmin) var(--color-surface-saturated-20);
        border-bottom-color: var(--color-surface-saturated-10);
        border-left-color: var(--color-surface-saturated-20);
        border-right-color: var(--color-surface-saturated-15);
        border-top-color: var(--color-surface-saturated-25);
        border-radius: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }

      & .picture {
        z-index: 1;
        left: calc(var(--frame-size) * 1vmin);
        top: calc(var(--frame-size) * 1vmin);
        width: calc(100% - calc(var(--frame-size) * 2vmin));
        height: calc(calc(100% - var(--frame-size) * 1vmin)  - var(--frame-size) * 1vmin);
        border: 1px solid var(--color-surface-saturated-0);
        background-color: var(--color-surface-saturated-0);
        background: var(--color-surface-saturated-25);
        image-rendering: pixelated;
        mix-blend-mode: screen;
        opacity: .75;
        background-size: 12em;
        display: block;
        position: absolute;
      }

      & .shadow {
        z-index: 2;
        left: calc(var(--frame-size) * 1vmin);
        top: calc(var(--frame-size) * 1vmin);
        width: calc(100% - calc(var(--frame-size) * 2vmin));
        height: calc(calc(100% - var(--frame-size) * 1vmin)  - var(--frame-size) * 1vmin);
        border: .5px solid var(--color-surface-saturated-40);
        image-rendering: pixelated;
        background-size: 8em;
        display: block;
        position: absolute;

        &:before {
          content: "";
          background: repeating-conic-gradient(var(--color-surface-saturated-40) 0%, var(--color-surface-saturated-30) 25%, transparent 0%, transparent 50%) 50% center / 40px 40px;
          width: 100%;
          height: 100%;
          image-rendering: pixelated;
          mix-blend-mode: multiply;
          opacity: .25;
          background-repeat: repeat;
          background-size: 2em 2em;
          position: absolute;
          top: 0;
          left: 0;
        }
      }

      & .picture__image {
        z-index: 8;
        left: calc(var(--frame-size) * 1vmin);
        top: calc(var(--frame-size) * 1vmin);
        width: calc(100% - calc(var(--frame-size) * 2vmin));
        height: calc(calc(100% - var(--frame-size) * 1vmin)  - var(--frame-size) * 1vmin);
        border: .5px dashed var(--color-surface-saturated-60);
        display: block;
        position: absolute;
        overflow: hidden;

        & > div {
          mix-blend-mode: exclusion;
          width: 100%;
          height: 100%;
          filter: screen;
          padding: var(--space) calc(var(--space) * 2) var(--space) var(--space);
          z-index: 8;
          cursor: auto;
          font-size: 2em;
          overflow: scroll;

          & > p > button {
            text-align: left;
            font-weight: 800;
          }

          & > p {
            color: var(--color-surface-saturated-85);
            margin: 0 0 1em;
          }

          &::-webkit-scrollbar {
            width: 0 !important;
          }

          &::-webkit-scrollbar-track {
            height: 100px;
            background: red !important;
          }

          &::-webkit-scrollbar-thumb {
            background: #888;
          }

          &::-webkit-scrollbar-thumb:hover {
            background: #555;
          }

          &::-moz-range-thumb {
            opacity: .001;
            background: none;
            border: none;
            width: 2em;
            height: 2em;
          }

          &::-moz-range-track {
            background: none;
            border: none;
          }
        }
      }

      &.is-playing {
        & .picture {
          border: 1px solid var(--color-surface-saturated-10);
        }

        & .channel {
          opacity: 0;
          pointer-events: none;
        }

        & .espri {
          border-bottom: 1px solid var(--color-surface-saturated-50);
          border-top: 0px solid var(--color-surface-saturated-40);

          &:before {
            opacity: 1;
          }

          & .espri__scroll {
            opacity: 1;
            border: 1px solid var(--color-surface-saturated-10);
            border-top: 1px solid var(--color-surface-saturated-50);
            overflow: auto;

            & > * {
              visibility: visible;
            }

            & .frame {
              opacity: 1;
            }
          }
        }
      }
    }
  }

  & .spot {
    border: 1px solid var(--color-surface-saturated-10);
    background-color: var(--color-primary-1);
    border-radius: 0;
    width: 6em;
    height: 6em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    &.--lg {
      width: 12em;
      height: 12em;
      bottom: 1em;
      left: unset;
      right: 1em;
      top: unset;
      background-color: var(--color-surface-saturated-10);
      display: none;
      transform: none;
    }

    &.--sm {
      --spot-x: 1em;
      --spot-y: 1em;
      border: none;
      border-radius: 111em;
      width: 3em;
      height: 3em;

      &:after {
        content: "";
        top: var(--spot-y);
        left: var(--spot-x);
        background-color: var(--color-primary-1);
        border: 1px solid orange;
        border-radius: 111em;
        width: 100%;
        height: 100%;
        position: absolute;
      }
    }
  }
}

.channel {
  z-index: 2;
  left: calc(var(--frame-size) * 2vmin);
  top: calc(var(--frame-size) * 2vmin);
  width: calc(100% - calc(var(--frame-size) * 4vmin));
  height: calc(calc(100% - var(--frame-size) * 2vmin)  - var(--frame-size) * 2vmin);
  border: 1px solid var(--color-surface-saturated-40);
  image-rendering: pixelated;
  border: 1px solid var(--color-surface-saturated-40);
  pointer-events: all;
  opacity: 1;
  box-shadow: 0 0 0 .0675em var(--color-surface-saturated-30);
  cursor: pointer;
  padding: 0;
  font-size: 1em;
  transition: opacity .125s, box-shadow .125s;
  display: grid;
  position: absolute;

  @media only screen and (width <= 699px) {
    & {
      left: calc(var(--frame-size) / 1vmin);
      top: calc(var(--frame-size) * .25vmin);
      width: calc(100% - calc(var(--frame-size) * .125vmin));
      height: calc(calc(100% - var(--frame-size) * .25vmin)  - var(--frame-size) * .25vmin);
    }
  }

  &:before {
    content: "";
    background-color: var(--color-primary-1);
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    opacity: .4;
    background: url("noise-white.ec5cf665.gif");
    transition: opacity .125s, box-shadow .125s;
    position: absolute;
    top: 0;
    left: 0;
  }

  &:after {
    content: "";
    background-color: var(--color-primary-1);
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    opacity: .1;
    background: url("noise.e67ae4e2.gif");
    transition: opacity .125s, box-shadow .125s;
    position: absolute;
    top: 0;
    left: 0;
  }

  &:hover {
    box-shadow: 0 0 0 .03875em var(--color-surface-saturated-40);

    &:after {
      opacity: .2;
    }
  }
}

.espri {
  z-index: 2;
  left: calc(var(--frame-size) * 2vmin);
  top: calc(var(--frame-size) * 2vmin);
  width: calc(100% - calc(var(--frame-size) * 4vmin));
  height: calc(calc(100% - var(--frame-size) * 2vmin)  - var(--frame-size) * 2vmin);
  border: 1px solid var(--color-surface-saturated-40);
  border: 1px solid var(--color-surface-saturated-30);
  border-left: 1px dashed var(--color-surface-saturated-25);
  border-right: 1px dashed var(--color-surface-saturated-25);
  box-shadow: inset -1px -1px 2px 0px color-mix(in srgb, var(--color-surface-saturated-15) 70%, transparent 100%), -2px -2px 3px 0px var(--color-surface-20), inset 0px 0px .25em 0px var(--color-surface-30), inset -1px -1px 2px 0px color-mix(in srgb, var(--color-surface-saturated-15) 30%, transparent 100%), 0px -2px 3px 0px color-mix(in srgb, var(--color-surface-saturated-15) 50%, transparent 100%);
  padding: 0;
  font-size: 1em;
  display: grid;
  position: absolute;

  @media only screen and (width <= 699px) {
    & {
      left: calc(var(--frame-size) / 1vmin);
      top: calc(var(--frame-size) * .25vmin);
      width: calc(100% - calc(var(--frame-size) * .125vmin));
      height: calc(calc(100% - var(--frame-size) * .25vmin)  - var(--frame-size) * .25vmin);
    }
  }

  &:before {
    pointer-events: none;
    content: "";
    z-index: 11111;
    opacity: 1;
    backdrop-filter: blur(3em);
    opacity: 0;
    width: 100%;
    height: 5em;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    mask: linear-gradient(to top, #000 0%, #0000 100%);
  }

  & > * {
    z-index: 2;
    position: relative;
  }

  & .espri__scroll {
    z-index: 1;
    z-index: 11;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-surface-saturated-20);
    border-left: 1px dashed var(--color-surface-saturated-25);
    border-right: 1px dashed var(--color-surface-saturated-25);
    border-top: 1px solid var(--color-surface-saturated-20);
    width: 100%;
    height: 100%;
    box-shadow: inset -1px -1px 2px 0px color-mix(in srgb, var(--color-surface-saturated-15) 70%, transparent 100%), -2px -2px 3px 0px var(--color-surface-20), inset 0px 0px .25em 0px var(--color-surface-30), inset -1px -1px 2px 0px color-mix(in srgb, var(--color-surface-saturated-15) 30%, transparent 100%), 0px -2px 3px 0px color-mix(in srgb, var(--color-surface-saturated-15) 50%, transparent 100%);
    background-color: var(--color-surface-saturated-30);
    border: 1px solid var(--color-surface-saturated-20);
    position: relative;
    overflow-y: hidden;

    & > div {
      width: 100%;
      height: auto;
      filter: screen;
      z-index: 8;
      cursor: auto;
      padding: 0;
      font-size: 2em;
      overflow: visible;

      & .frame {
        width: 100%;
        height: auto;
        image-rendering: pixelated;
        opacity: .1;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 80%;
        margin: 0;
        padding: clamp(1em, 20vh, 22em) 0 0;
        transition: opacity 67.5ms;
        position: relative;
      }

      & > p > button {
        text-align: left;
        font-weight: 800;
      }

      & > p {
        color: var(--color-surface-saturated-85);
        margin: 0 0 1em;
      }

      &::-webkit-scrollbar {
        width: 0 !important;
      }

      &::-webkit-scrollbar-track {
        height: 100px;
        background: red !important;
      }

      &::-webkit-scrollbar-thumb {
        background: #888;
      }

      &::-webkit-scrollbar-thumb:hover {
        background: #555;
      }

      &::-moz-range-thumb {
        opacity: .001;
        background: none;
        border: none;
        width: 2em;
        height: 2em;
      }

      &::-moz-range-track {
        background: none;
        border: none;
      }
    }
  }
}

@keyframes scrollText {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

.reel {
  --reel-size: clamp(2em, 14vmin, 8em);
  z-index: 11;
  left: calc(50% - calc(var(--reel-size) / 2));
  top: calc(50% - calc(var(--reel-size) / 2));
  height: var(--reel-size);
  width: var(--reel-size);
  height: var(--reel-size);
  background: var(--color-surface-saturated-100);
  background-size: left top;
  filter: blur(.0675em);
  background: #000;
  border-radius: 111em;
  justify-content: center;
  align-items: center;
  display: grid;
  position: absolute;

  & .reel__spine {
    width: .5em;
    height: 60%;
    height: calc(var(--reel-size) * .4);
    background: #ff0;
    display: none;
  }

  & .reel__start {
    background: var(--color-surface-saturated-30);
    width: .5em;
    height: 60%;
    height: calc(var(--reel-size) * .4);
    display: block;
    rotate: 45deg;
  }
}

.title-card {
  z-index: 1111111;
  left: calc(var(--space) * 2);
  top: calc(var(--space) * 2);
  z-index: 1111111;
  pointer-events: all;
  height: 4em;
  position: fixed;
  overflow: hidden;
}

@keyframes audioControlsShow {
  0% {
    opacity: 0;
    visibility: visible;
  }

  100% {
    opacity: 1;
  }
}

@keyframes audioControlsHide {
  0% {
    opacity: 1;
    visibility: visible;
  }

  99% {
    opacity: 0;
  }

  100% {
    visibility: hidden;
  }
}

#audio-controls {
  z-index: 111111111;
  top: calc(var(--space) * .5);
  left: calc(var(--space) * .5);
  opacity: 1;
  justify-content: center;
  align-items: center;
  display: grid;
  position: fixed;

  & > label {
    backdrop-filter: blur(1.125em);
    width: fit-content;
    height: auto;
    box-shadow: inset 0 0 1.5em 0 color-mix(in srgb, transparent 100%, var(--color-background) 10%), inset .5px 1px .125em 0 color-mix(in srgb, transparent 100%, var(--color-foreground) 10%), inset -0px -1px 0 0 color-mix(in srgb, transparent 100%, var(--color-background) 20%);
    text-transform: uppercase;
    text-align: center;
    opacity: 0;
    transition: opacity .5s ease .125s, visibility 0s none;
    border: 2px solid #ffffff80;
    border-radius: 2em;
    grid-template-columns: 1fr;
    gap: .5em;
    padding: 2em 3em;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    animation: .5s forwards audioControlsHide;
    display: grid;
    position: fixed;
    top: calc(50% - 4.675em - 2px);
    left: calc(50% - 8.36755em - 1px);
    background-color: color-mix(in srgb, transparent 100%, var(--color-background) 5%) !important;

    @media only screen and (width >= 699px) {
      & {
        top: calc(50% - 3em - 2px);
      }
    }

    &:before {
      content: "";
      filter: blur(.5em);
      z-index: -1;
      border-radius: 2em;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: color-mix(in srgb, transparent 100%, var(--color-background) 50%) !important;
      box-shadow: 0 0 1em 2em color-mix(in srgb, transparent 100%, var(--color-background) 50%) !important;
    }

    & > .__close {
      z-index: 10;
      position: absolute;
      top: .5em;
      right: .5em;
      overflow: visible;
      width: 1em !important;
      height: 1em !important;
      box-shadow: none !important;
      background-color: color-mix(in srgb, transparent 100%, var(--color-background) 15%) !important;
      backdrop-filter: none !important;
      border: 0 !important;
      padding: 0 !important;

      & > abbr {
        opacity: .75;
        margin-top: .5px;

        & > svg:first-of-type {
          width: 1rem;

          & path {
            stroke-width: .875px;
            fill: var(--color-foreground) !important;
            stroke: var(--color-foreground) !important;
          }
        }

        & > svg.progress-ring {
          width: 100%;
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          overflow: visible;

          & circle {
            fill: none;
            stroke: var(--color-background);
            stroke-miterlimit: 10;
            stroke-width: 2px;
            stroke-dasharray: 200;
            stroke-dashoffset: 208px;
            overflow: visible;
          }
        }
      }

      &:hover {
        background-color: color-mix(in srgb, transparent 100%, var(--color-background) 60%) !important;

        & > abbr {
          opacity: 1;
        }
      }

      &:after {
        content: none !important;
      }
    }

    &[data-show="false"] {
      opacity: 0;
      animation: .5s forwards audioControlsHide;
    }

    &[data-show="true"] {
      animation: .5s forwards audioControlsShow;
      display: grid;

      & > .__close {
        & > abbr {
          & > svg.progress-ring {
            & circle {
              animation: 7.675s linear forwards closeTimer;
            }
          }
        }
      }
    }

    & > span {
      letter-spacing: .025em;
      color: var(--color-foreground);
      min-width: 8em;
      font-size: .875em;
      font-weight: 600;

      &:nth-of-type(2) {
        margin-top: -.5em;
        margin-bottom: .5em;
      }
    }

    & > svg {
      width: 1.25em;
      height: 1.25em;
      margin: 0 auto;
      display: block;
    }

    @media only screen and (width >= 699px) {
      & > span:nth-of-type(2) {
        display: none;
      }
    }

    &.--top-left {
      top: calc(var(--space) / 1.75);
      border-width: .5px;
      padding: 1em 3em 1em 1em;
      left: 7em;
      visibility: visible !important;
      text-align: left !important;
      border-color: color-mix(in srgb, transparent 50%, var(--color-background) 50%) !important;
      backdrop-filter: blur(2px) !important;
      background-color: color-mix(in srgb, transparent 100%, var(--color-background) 20%) !important;
      border-radius: .375em !important;
      display: grid !important;

      &:before {
        box-shadow: none !important;
      }

      & > svg {
        margin: 0 !important;
      }

      & span {
        text-shadow: 0px 0px color-mix(in srgb, var(--color-background) 0%, var(--color-background) 20%);
        color: var(--color-foreground) !important;
        font-weight: 600 !important;
      }

      & .__close {
        z-index: 10;
        position: absolute;
        top: .25em;
        right: .25em;
        background-color: #0000 !important;

        &:before {
          content: none !important;
        }

        & > abbr {
          & > svg.progress-ring {
            & circle {
              stroke: color-mix(in srgb, transparent 100%, var(--color-foreground) 80%) !important;
            }
          }
        }
      }
    }
  }

  & button {
    color: var(--color-foreground);
    cursor: pointer;
    border-radius: calc(var(--border-radius) / 6);
    border: 2px solid color-mix(in srgb, var(--color-foreground) 60%, var(--color-background) 10%);
    text-shadow: -.5px -.5px 1px color-mix(in srgb, var(--color-background) 40%, var(--color-foreground) 20%), 0 0 12px color-mix(in srgb, var(--color-primary-1) 70%, transparent 40%);
    transition: background-color var(--animation-step) ease, border-color calc(var(--animation-step) * 2) ease, box-shadow var(--animation-step) ease, transform var(--animation-step) ease;
    backdrop-filter: blur(.25em);
    width: 5rem;
    height: 5rem;
    box-shadow: none;
    border-radius: .25em;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    line-height: 1;
    display: grid;
    overflow: hidden;
    background-color: color-mix(in srgb, transparent 100%, var(--color-background) 5%) !important;
    border-radius: 1.675rem !important;
    padding: .75em .875em .875em !important;
    font-weight: 700 !important;

    & .play-label {
      display: none;
    }

    & svg {
      display: block;
      overflow: visible;

      & path.play-icon {
        transform-origin: center;
        display: block;
        transform: scale(1.125)translate(.0657em, .05em);
      }

      & g.pause-icon {
        transform-origin: center;
        display: block;
        transform: scale(1.5)translate(.0657em, .05em);

        & rect {
          fill: var(--color-surface-saturated-70);
        }
      }
    }

    &.is-pressed {
      box-sizing: border-box;
      border-color: var(--color-surface-saturated-90);
      box-shadow: inset 2px 2px 1px 0 color-mix(in srgb, transparent 100%, var(--color-surface-saturated-20) 10%), inset -.5px calc(-.5 * var(--border-width)) 1px 0 color-mix(in srgb, transparent 10%, var(--color-background) 30%), 0 0 0 1px color-mix(in srgb, var(--color-surface-saturated-50) 20%, var(--color-surface-saturated-70) 10%);
      background-color: #0000;
      box-shadow: none !important;
      border-width: 2px !important;
      border-radius: 1.675rem !important;

      &:after {
        opacity: 0;
        box-shadow: none;
      }

      & span {
        text-shadow: .5px .5px color-mix(in srgb, var(--color-user-background) 0%, var(--color-background) 50%);
      }

      &:hover {
        background-color: #0000;

        &:after {
          opacity: 0 !important;
        }

        & svg {
          & path.play-icon {
            fill: var(--color-foreground);
          }

          & g.pause-icon {
            & rect {
              fill: var(--color-foreground);
            }
          }
        }
      }
    }

    &:before {
      opacity: 0 !important;
    }

    &:after {
      content: "";
      z-index: 1;
      width: 100%;
      height: 100%;
      transition: opacity calc(var(--animation-step) * 2) ease;
      border: 2px solid #0000;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0 !important;
    }

    &:hover {
      background-color: #0000 !important;

      &:after {
        opacity: 0;
      }
    }

    &:focus {
      background-color: #0000 !important;

      &:after {
        opacity: 0;
      }
    }

    &:active {
      outline: 3px solid #0000;
      transform: scale(1);
      background-color: #0000 !important;

      &:after {
        opacity: 0 !important;
      }

      &:hover {
        outline-offset: .5px;
        outline: 1px solid color-mix(in srgb, var(--color-background) 50%, var(--color-foreground) 30%);
        background-color: #0000 !important;

        &:after {
          opacity: 0 !important;
        }
      }

      & span {
        text-shadow: .5px .5px color-mix(in srgb, var(--color-background) 0%, var(--color-background) 50%);
      }
    }
  }
}

main.--one {
  --secondary-hue: 23;
  --surface-chroma: .005;
  --color-surface-saturated-1: oklch(.02 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-100: oklch(.09 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-97: oklch(.1 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-95: oklch(.11 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-90: oklch(.15 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-87: oklch(.19 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-85: oklch(.23 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-80: oklch(.32 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-70: oklch(.49 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-60: oklch(.66 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-50: oklch(.76 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-40: oklch(.84 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-35: oklch(.9 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-30: oklch(.93 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-25: oklch(.94 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-20: oklch(.96 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-15: oklch(.97 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-10: oklch(.98 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-0: oklch(1 0 0);

  & .JACKS0N__01 {
    max-width: unset;
    z-index: 11;
    width: 100%;
    height: 100%;
    height: calc(100dvh - calc(var(--space) * 2));
    border: unset;
    box-shadow: none;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    display: grid;
    overflow: hidden;

    &:after {
      content: "";
      opacity: 1;
      background-color: var(--color-surface-saturated-0);
      border: unset;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    & .espri {
      & .espri__scroll {
        & .frame {
          & .reel {
            transform: scale(1);
          }
        }
      }
    }
  }

  & #audio-controls {
    & > label {
      background-color: color-mix(in srgb, var(--color-white) 100%, transparent 100%) !important;

      & > .__close {
        & > abbr {
          & > svg:nth-of-type(2) {
            & circle {
              stroke: color-mix(in srgb, var(--color-foreground) 70%, var(--color-background) 90%) !important;
            }
          }
        }
      }
    }
  }
}

main.--three {
  --secondary-hue: 23;
  --surface-chroma: .005;
  --color-surface-saturated-1: oklch(.02 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-100: oklch(.09 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-97: oklch(.1 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-95: oklch(.11 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-90: oklch(.15 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-87: oklch(.19 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-85: oklch(.23 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-80: oklch(.32 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-70: oklch(.49 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-60: oklch(.66 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-50: oklch(.76 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-40: oklch(.84 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-35: oklch(.9 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-30: oklch(.93 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-25: oklch(.94 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-20: oklch(.96 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-15: oklch(.97 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-10: oklch(.98 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-0: oklch(1 0 0);

  & .JACKS0N__01 {
    max-width: unset;
    z-index: 11;
    width: 100%;
    height: 100%;
    height: calc(100dvh - calc(var(--space) * 2));
    border: unset;
    box-shadow: none;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    display: grid;
    overflow: hidden;

    & .espri {
      & .espri__scroll {
        & .frame {
          & .reel {
            transform: scale(1);
          }
        }
      }
    }
  }

  & section.JACKS0N__02 {
    max-width: unset;
    z-index: 11;
    width: 100%;
    height: 100dvh;
    height: calc(100dvh - calc(var(--space) * 2));
    border: unset;
    margin: 0 auto;
    display: grid;

    & .control__wrapper {
      & > span {
        filter: none !important;
      }
    }

    & .video__overlay {
      box-shadow: 0 0 0 .125em color-mix(in srgb, var(--color-primary-1) 0%, var(--color-background) 100%);
      overflow: hidden;

      & video {
        top: -75%;
      }
    }
  }

  & .JACKS0N__nav {
    --the-color: transparent;
    z-index: 111;

    @media only screen and (width <= 699px) {
      & {
        background-color: #0000 !important;
      }
    }

    & > * {
      background-color: #0000;

      & h1 {
        color: #fff;

        @media only screen and (width <= 699px) {
          & {
            color: var(--color-foreground) !important;
          }
        }
      }

      & .streaming-links, & .complilation-links {
        border-color: color-mix(in srgb, var(--color-primary-1) 0%, var(--color-background) 100%);
        border-width: 0;
        background-color: #0000 !important;
      }

      & .complilation-links {
        border: 1px solid var(--color-background);
        border-radius: 1.375em;
        padding-bottom: .875em;
      }

      & #secondary-table-container {
        color: #fff !important;

        @media only screen and (width <= 699px) {
          & {
            color: var(--color-foreground) !important;
          }
        }
      }

      & .sheet-table a {
        color: #000;
        background-color: color-mix(in srgb, var(--color-background) 100%, transparent 10%);
        text-align: center;
        border-width: .5px;
        border-color: color-mix(in srgb, transparent 0%, var(--color-background) 20%);

        &:hover {
          border-color: var(--color-foreground) !important;
          background-color: var(--color-foreground) !important;
          color: var(--color-background) !important;
        }

        &.active {
          cursor: default;
          border-color: var(--color-foreground) !important;
          background-color: var(--color-foreground) !important;
          color: var(--color-background) !important;
        }
      }
    }
  }

  & button.toggle__JACKS0N__nav.toggle__JACKS0N__nav {
    background: color-mix(in srgb, var(--color-surface-saturated-90) 10%, transparent 100%);
    border-color: color-mix(in srgb, var(--color-primary-1) 0%, var(--color-background) 100%);
    color: #fff;
    z-index: 1111111111;
    border-width: 2px;

    &[aria-expanded="true"] {
      @media only screen and (width <= 699px) {
        & {
          color: var(--color-foreground) !important;
        }
      }
    }
  }

  & #audio-controls {
    & button {
      width: 5rem;
      height: 5rem;
      box-shadow: 0 0 0 2px white, 0 0 0 1px color-mix(in srgb, var(--color-background) 10%, var(--color-foreground) 30%), inset calc(.25 * var(--border-width)) calc(.125 * var(--border-width)) 0 .25px color-mix(in srgb, transparent 0%, var(--color-background) 30%), inset -1px -1px 0 0px color-mix(in srgb, var(--color-background) 20%, var(--color-foreground) 20%);
      justify-content: center;
      align-items: center;
      display: grid;
      border-color: #0000 !important;
      border-radius: 1.675rem !important;

      &.is-pressed {
        border-width: 2px;
        box-shadow: 0 0 0 2px #fff;
        border-color: color-mix(in srgb, var(--color-primary-1) 0%, var(--color-background) 100%) !important;
        box-shadow: none !important;
        border-radius: 1.675rem !important;
      }

      & svg {
        & path {
          fill: var(--color-background);
        }
      }

      &:hover {
        & svg {
          & g.pause-icon {
            & rect {
              fill: var(--color-background);
            }
          }
        }
      }

      & svg {
        & g.pause-icon {
          & rect {
            fill: var(--color-background);
          }
        }
      }
    }
  }
}

main.--five {
  --secondary-hue: 23;
  --surface-chroma: .005;

  & section.JACKS0N__02 {
    max-width: unset;
    z-index: 11;
    width: 100%;
    height: 100dvh;
    height: calc(100dvh - calc(var(--space) * 2));
    border: unset;
    margin: 0 auto;
    display: grid;

    & .video__overlay {
      & video {
        top: -75%;
      }
    }
  }

  & .JACKS0N__nav {
    --the-color: transparent;
    z-index: 111;

    @media only screen and (width <= 699px) {
      & {
        background-color: #0000 !important;
      }
    }

    & > * {
      background-color: #0000;

      & h1 {
        color: #fff;

        @media only screen and (width <= 699px) {
          & {
            color: var(--color-foreground) !important;
          }
        }
      }

      & .streaming-links, & .complilation-links {
        border-color: color-mix(in srgb, var(--color-primary-1) 0%, var(--color-background) 100%);
        border-width: 0;
        background-color: #0000 !important;
      }

      & .complilation-links {
        border: 1px solid var(--color-background);
        border-radius: 1.375em;
        padding-bottom: .875em;
      }

      & #secondary-table-container {
        color: #fff !important;

        @media only screen and (width <= 699px) {
          & {
            color: var(--color-foreground) !important;
          }
        }
      }

      & .sheet-table a {
        color: #000;
        background-color: var(--color-background);
        text-align: center;
        border-width: .5px;
        border-color: color-mix(in srgb, transparent 0%, var(--color-background) 20%);

        &:hover {
          border-color: var(--color-foreground) !important;
          background-color: var(--color-foreground) !important;
          color: var(--color-background) !important;
        }

        &.active {
          cursor: default;
          border-color: var(--color-foreground) !important;
          background-color: var(--color-foreground) !important;
          color: var(--color-background) !important;
        }
      }
    }
  }

  & button.toggle__JACKS0N__nav.toggle__JACKS0N__nav {
    background: color-mix(in srgb, var(--color-background) 20%, transparent 10%);
    border-color: color-mix(in srgb, transparent 100%, var(--color-background) 20%);
    color: var(--color-foreground);
    box-shadow: 0 0 0 2px var(--color-foreground);
    z-index: 1111111111;
    mix-blend-mode: none;
    border-width: 1px;

    @media only screen and (width <= 699px) {
      & {
        top: calc(100dvh - 3.75em - var(--space) / 2);
        padding: .5em;
        height: auto !important;
      }
    }

    &:after {
      content: "";
      z-index: 1;
      width: 100%;
      height: 100%;
      transition: opacity calc(var(--animation-step) * 2) ease;
      border: 2px solid #0000;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0 !important;
    }

    &[aria-expanded="true"] {
      @media only screen and (width <= 699px) {
        & {
          color: var(--color-foreground) !important;
        }
      }
    }
  }

  & #audio-controls {
    & > label {
      border-color: #ffffff71 !important;
    }

    & button {
      width: 5rem;
      height: 5rem;
      box-shadow: 0 0 0 2px var(--color-foreground), 0 0 0 1px color-mix(in srgb, var(--color-background) 10%, var(--color-foreground) 30%), inset calc(.25 * var(--border-width)) calc(.125 * var(--border-width)) 0 .25px color-mix(in srgb, transparent 0%, var(--color-background) 30%), inset -1px -1px 0 0px color-mix(in srgb, var(--color-background) 20%, var(--color-foreground) 20%);
      justify-content: center;
      align-items: center;
      display: grid;
      border-color: #0000 !important;
      border-radius: 1.675rem !important;

      &.is-pressed {
        border-width: 2px;
        box-shadow: 0 0 0 2px #fff;
        border-color: color-mix(in srgb, var(--color-primary-1) 0%, var(--color-foreground) 100%) !important;
        box-shadow: none !important;
        border-radius: 1.675rem !important;
      }

      & svg {
        & path {
          fill: var(--color-foreground);
        }
      }

      &:hover {
        & svg {
          & g.pause-icon {
            & rect {
              fill: var(--color-foreground);
            }
          }
        }
      }

      & svg {
        & g.pause-icon {
          & rect {
            fill: var(--color-foreground);
          }
        }
      }
    }
  }
}

main.--four {
  --secondary-hue: 23;
  --surface-chroma: .005;
  --color-surface-saturated-1: oklch(.02 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-100: oklch(.09 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-97: oklch(.1 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-95: oklch(.11 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-90: oklch(.15 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-87: oklch(.19 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-85: oklch(.23 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-80: oklch(.32 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-70: oklch(.49 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-60: oklch(.66 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-50: oklch(.76 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-40: oklch(.84 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-35: oklch(.9 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-30: oklch(.93 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-25: oklch(.94 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-20: oklch(.96 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-15: oklch(.97 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-10: oklch(.98 var(--surface-chroma) var(--secondary-hue));
  --color-surface-saturated-0: oklch(1 0 0);

  & .JACKS0N__01 {
    max-width: unset;
    z-index: 11;
    width: 100%;
    height: 100%;
    height: calc(100dvh - calc(var(--space) * 2));
    border: unset;
    box-shadow: none;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    display: grid;
    overflow: hidden;

    &:after {
      content: "";
      opacity: .5;
      background-color: var(--color-surface-saturated-30);
      border: unset;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    & .espri {
      & .espri__scroll {
        & .frame {
          & .reel {
            transform: scale(1);
          }
        }
      }
    }
  }

  & section.JACKS0N__02 {
    max-width: unset;
    z-index: 11;
    width: 100%;
    height: 100dvh;
    height: calc(100dvh - calc(var(--space) * 2));
    border: unset;
    margin: 0 auto;
    display: grid;
  }

  & .JACKS0N__nav {
    z-index: 111111;
    border-left: 0px solid var(--color-surface-saturated-80);
    background-color: #0000;
    position: relative;
    color: var(--color-surface-saturated-0) !important;

    & h1 {
      padding: 1.5em calc(var(--space) / 2) 0;
      color: var(--color-background) !important;

      @media only screen and (width <= 699px) {
        & {
          color: var(--color-foreground) !important;
        }
      }
    }

    & .table-window {
      backdrop-filter: blur(.25em);
      background-color: color-mix(in srgb, var(--color-surface-saturated-15) 10%, transparent 100%) !important;

      & table {
        & td {
          vertical-align: top;
          text-align: left;
        }
      }
    }

    & > * {
      text-align: left;
      background-color: #0000;

      & #secondary-table-container {
        color: #fff !important;

        @media only screen and (width <= 699px) {
          & {
            color: var(--color-foreground) !important;
          }
        }
      }

      & .streaming-links, & .complilation-links {
        border-color: color-mix(in srgb, var(--color-primary-1) 0%, var(--color-background) 100%);
        background-filter: blur(0);
        border-width: 0;
        background-color: #0000 !important;
      }

      & .sheet-table a {
        background-color: var(--color-background);
        text-align: center;
        border-color: color-mix(in srgb, transparent 0%, var(--color-foreground) 40%);
        color: var(--color-foreground) !important;
        border-width: .125px !important;

        @media only screen and (width <= 699px) {
          & {
            border-color: color-mix(in srgb, transparent 0%, var(--color-foreground) 20%);
            color: var(--color-foreground) !important;
            background-color: color-mix(in srgb, var(--color-background) 6%, transparent 100%) !important;
          }
        }

        &:hover {
          border-color: var(--color-surface-saturated-0) !important;
          background-color: var(--color-surface-saturated-0) !important;
          color: var(--color-foreground) !important;
        }

        &.active {
          cursor: default;
          border-color: var(--color-foreground) !important;
          background-color: var(--color-foreground) !important;
          color: var(--color-background) !important;
        }
      }
    }

    & > div {
      width: calc(100% - 2em);
      height: calc(100% - 2em);
      margin: 0 1em;
      position: relative;

      @media only screen and (width <= 699px) {
        & {
          width: 100%;
          margin: 0;
        }
      }

      & > div {
        z-index: 1111;
        height: auto;
        overflow: scroll;
      }
    }
  }

  & button.toggle__JACKS0N__nav.toggle__JACKS0N__nav {
    top: calc(100dvh - 5.0675em - var(--space) / 2);
    background: color-mix(in srgb, var(--color-surface-saturated-90) 10%, transparent 100%);
    border-color: color-mix(in srgb, var(--color-primary-1) 0%, var(--color-background) 100%);
    color: #fff;
    z-index: 1111111111;
    border-width: 2px;
    border-radius: 1.675rem !important;
    width: 5rem !important;
    height: 5rem !important;

    &[aria-expanded="true"] {
      @media only screen and (width <= 699px) {
        & {
          color: var(--color-foreground) !important;
        }
      }
    }
  }

  & .video__overlay {
    box-shadow: 0 0 0 .125em color-mix(in srgb, var(--color-primary-1) 0%, var(--color-foreground) 100%) !important;

    & video {
      min-width: 100vmin;
      height: 340%;
      min-height: 100vmax;
      top: -50%;
      left: -100% !important;
    }

    &.minimized {
      --frame-size: 10;

      @media only screen and (width <= 699px) {
        & {
          --frame-size: 5;
        }
      }

      & video {
        min-width: 100vmin;
        height: 340%;
        min-height: 100vmax;
        top: -100%;
        left: -50% !important;
      }

      & button {
        background: color-mix(in srgb, var(--color-background) 0%, transparent 100%);
      }

      & .subtitles-container {
        display: none;
      }

      &:hover {
        & button {
          opacity: 1;
          background: color-mix(in srgb, var(--color-background) 0%, transparent 90%);

          &:hover {
            background: color-mix(in srgb, var(--color-background) 20%, transparent 90%);
          }
        }
      }
    }
  }

  & #audio-controls {
    & button {
      width: 5rem;
      height: 5rem;
      box-shadow: 0 0 0 2px white, 0 0 0 1px color-mix(in srgb, var(--color-background) 10%, var(--color-foreground) 30%), inset calc(.25 * var(--border-width)) calc(.125 * var(--border-width)) 0 .25px color-mix(in srgb, transparent 0%, var(--color-background) 30%), inset -1px -1px 0 0px color-mix(in srgb, var(--color-background) 50%, var(--color-foreground) 20%);
      justify-content: center;
      align-items: center;
      display: grid;
      border-color: #0000 !important;
      border-radius: 1.675rem !important;

      &.is-pressed {
        border-width: 2px;
        box-shadow: 0 0 0 2px #fff;
        border-color: color-mix(in srgb, var(--color-primary-1) 0%, var(--color-background) 100%) !important;
        box-shadow: none !important;
        border-radius: 1.675rem !important;
      }

      & svg {
        & path {
          fill: var(--color-background);
        }
      }

      &:hover {
        & svg {
          & g.pause-icon {
            & rect {
              fill: var(--color-background);
            }
          }
        }
      }

      & svg {
        & g.pause-icon {
          & rect {
            fill: var(--color-background);
          }
        }
      }
    }
  }
}

.scene__counter {
  --highlight-color: var(--color-background);
  z-index: 11111111;
  width: auto;
  height: auto;
  color: var(--color-foreground);
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity var(--animation-step) ease;
  font-size: clamp(1.5em, 4vmin, 8em);
  font-weight: 300;
  position: absolute;
  top: 50%;
  right: -.375em;

  &.is-playing {
    opacity: 1;
  }

  & span {
    opacity: 0;
    text-align: left;
    max-width: 80%;
    margin: 0 auto;
    padding: 0;
    animation: none;
    position: relative;
    bottom: 0;
    animation-play-state: paused !important;
  }
}

#infinite-scroll-container {
  bottom: calc(var(--space) * .25);
  left: calc(var(--space) * .5);
  z-index: 1111111111;
  pointer-events: all;
  border: 2px solid var(--color-background);
  opacity: 0;
  width: 4em;
  height: auto;
  transition: opacity var(--animation-step) ease;
  border-radius: 0;
  position: absolute;
  overflow: hidden;
  cursor: grab !important;

  &.is-playing {
    opacity: 1;
  }

  &:after {
    z-index: 2;
    opacity: .25;
    content: "";
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("noise.e67ae4e2.gif");
    background-repeat: repeat;
    background-size: 113px;
    transition: opacity 1s;
    position: absolute;
    top: 0;
    left: 0;
  }

  & .espri {
    left: unset;
    top: unset;
    width: 3.675em;
    height: 14em;
    box-shadow: none;
    border: none;
    position: relative;
    cursor: grab !important;

    &:after {
      display: none;
    }

    & .espri__scroll-inner {
      box-shadow: none;
      border: none;

      &:after {
        display: none;
      }
    }

    & .espri__scroll {
      box-shadow: none;
      -ms-overflow-style: none;
      scrollbar-width: none;
      background-color: #0000;
      border: none;
      overflow-y: scroll;
      cursor: pointer !important;

      &:after {
        display: none;
      }

      &::-webkit-scrollbar {
        display: none;
      }

      & > div {
        font-size: 1em;
      }

      & .frame {
        opacity: 1;
        padding: 4em 0 0;
        cursor: pointer !important;

        &:hover {
          transform: scale(.95);
          border-radius: 111.125em !important;
        }

        & .reel {
          --reel-size: 2em;
          filter: blur(.5em);
          background-color: var(--color-background);
          border-radius: 0;
          transform: scale(1);
        }

        &:hover {
          & .reel {
            border-radius: .125em !important;
          }
        }
      }
    }
  }
}

.control__wrapper {
  z-index: 111111;
  width: 30vmin;
  height: 30vmin;
  position: absolute;
  top: calc(50% - 15vmin);
  left: calc(50% - 15vmin);

  & > span {
    opacity: .75;
    background-color: var(--color-background);
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 2px var(--color-foreground);
    border: 1px solid var(--color-foreground);
    box-shadow: 0 0 0 2px var(--color-foreground);
    filter: blur(1em);
    mix-blend-mode: luminosity;
    border-width: .5px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
  }

  &.--yellow {
    width: 40vmin;
    height: 40vmin;
    top: calc(50% - 20vmin);
    left: calc(50% - 20vmin);

    & > span {
      filter: blur(2.25em);
      background-color: color-mix(in srgb, var(--color-primary-1) 90%, transparent 100%);
      mix-blend-mode: darken;
      border-width: 1px;
      border-color: #ff0;
    }
  }

  &.--outline {
    width: 40vmin;
    height: 40vmin;
    top: calc(50% - 20vmin);
    left: calc(50% - 20vmin);

    & > span {
      filter: blur(1.75em);
      background-color: color-mix(in srgb, var(--color-background) 90%, transparent 100%);
      mix-blend-mode: overlay;
      border-width: 16px;
      border-color: #0f0;
    }
  }

  &.--noise {
    width: 60vmin;
    height: 60vmin;
    top: calc(50% - 30vmin);
    left: calc(50% - 30vmin);
    mask: radial-gradient(circle, #000 0% 0%, #0000 70%);

    & > span.particle-fill {
      z-index: 2;
      pointer-events: none;
      filter: none;
      box-shadow: none;
      opacity: 1;
      mix-blend-mode: overlay;
      background: url("noise.e67ae4e2.gif") 0 0 / 50px;
      border: 0 #0000;
      transition: opacity 1s;

      &:after, &:before {
        content: "";
        filter: blur(.75em);
        mix-blend-mode: luminosity;
        background-color: #00ffff3b;
        border-radius: 50%;
        width: 8em;
        height: 8em;
        display: block;
        position: absolute;
        top: calc(50% - 4em);
        left: calc(50% - 4em);
        box-shadow: 0 0 0 4px #f0f;
      }

      &:before {
        mix-blend-mode: multiply;
        background: url("noise.e67ae4e2.gif");
      }
    }

    & > span.particle-phase {
      background-color: #ff00ff71;
      border: 0 #0000;
    }
  }
}

.f33d__luc {
  padding: var(--space);

  & > a {
    color: var(--color-foreground);
    opacity: .5;
    text-transform: uppercase;
    letter-spacing: .125em;
    background: #fffc;
    padding: .25em .675em;
    font-size: .75em;
    text-decoration: none;

    &:hover {
      opacity: 1;
      text-decoration: underline;
    }
  }
}

.sheet-table {
  border-collapse: collapse;
  width: 100%;
}

.sheet-table th, .sheet-table td {
  text-align: center;
  border: 1px solid #0000;
  padding: .75em;
}

.sheet-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.sheet-table a {
  color: var(--color-foreground);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
  font-weight: bold;
  text-decoration: none;
}

.sheet-table a:hover {
  text-decoration: underline;
}

.sheet-image {
  object-fit: contain;
  border: 2px solid var(--color-background);
  width: 100%;
}

.error-message {
  color: #d32f2f;
  background-color: #fff3f3;
  border: 1px solid #ffcdd2;
  border-radius: 4px;
  padding: 1rem;
}

.table-window {
  width: 100%;
  max-width: 30em;
  height: 100%;
  max-height: 80dvh;
  overflow: scroll;

  & table {
    border: 1px solid #0000;
    margin: 0;
    padding: 0;

    & td {
      vertical-align: top;
      text-align: center;

      &:nth-child(2n) {
        background-color: color-mix(in srgb, var(--color-foreground) 10%, var(--color-background) 50%);
      }
    }
  }
}

.streaming-links, .complilation-links {
  z-index: 111;
  border: 0px solid color-mix(in srgb, var(--color-foreground) 80%, transparent 50%);
  width: 100%;
  height: auto;
  color: var(--color-surface-saturated-90);
  border-radius: 0;
  margin-bottom: 4em;
  font-size: 1.375em;
  font-weight: 300;

  & table & td {
    padding: .5em;
  }

  & a {
    background-color: var(--color-surface-saturated-20);
    border: 1px solid var(--color-surface-saturated-35);
    border-radius: .5em;
    width: 100%;
    height: 100%;
    padding: .5em 1em;
    font-size: 1rem;
    display: block;

    &:hover {
      background-color: var(--color-surface-saturated-40);
      border: 1px solid var(--color-surface-saturated-40);
      text-decoration: none;
    }

    @media only screen and (width <= 760px) {
      & {
        padding: .5em .75em;
        font-size: .875rem;
      }
    }
  }
}

#secondary-table-container {
  color: var(--color-surface-saturated-80);
  font-size: 1.125em;
  font-weight: 300;
}

#news-table-container {
  --border-color: color-mix(in srgb, var(--color-primary-6) 60%, transparent 50%);
  color: var(--color-surface-saturated-20);
  background-color: color-mix(in srgb, var(--color-foreground) 100%, transparent 0%);
  border: 0px solid var(--color-foreground);
  border: 1px solid var(--border-color);
  background-size: 44px;
  border-radius: .125em;
  width: calc(100% - 1.5em);
  margin: 3.5em .75em 2em;
  padding: 2em 1em 1em;
  font-size: 1.125em;
  font-weight: 200;
  position: relative;
  overflow: visible;

  &:before {
    content: "--0--";
    width: auto;
    color: var(--color-background);
    background-color: var(--color-foreground);
    padding: .5em calc(var(--space) / 1.75);
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    height: 2em;
    display: block;
    position: absolute;
    top: -2em;
    left: -1px;
  }

  & a {
    color: var(--color-surface-saturated-20);
    text-underline-offset: 4px;
    border: 0px solid var(--color-foreground);
    background: none;
    border-radius: .125em;
    padding-left: .125em;
    padding-right: .125em;
    font-weight: 400;
    text-decoration: underline;

    &:hover {
      background-color: color-mix(in srgb, var(--color-primary-4) 90%, transparent 50%);
    }
  }

  & td {
    text-align: left;
    padding: .5em;

    &:after {
      content: "";
      background-color: color-mix(in srgb, var(--color-background) 60%, transparent 50%);
      width: 1em;
      height: 1px;
      margin: 3em 0 1em;
      display: block;
    }
  }

  & tr:last-child td {
    &:after {
      display: none;
    }
  }
}
/*# sourceMappingURL=_five.769a9cda.css.map */