#access.pair {
  top: 137px;
  position: sticky;
  z-index: 10;
  /* transform: translate(0, 32px); */
  margin-top: -100px;
  transition: margin-top 0.5s ease-in-out;
}
@media(max-width: 645px) {
  #access.pair {
    /* top: 181px; */
    top: 226px;
    margin-right: 1em;
  }
  body.is-floating #access {
    width: 50%;
    left: 50%;
  }
  body.is-floating #access button {
    /* margin-right: 30px; */
  }
}
#access > div {
  display: flex;
  justify-content: right;
}
body.is-floating #access button img {
  filter: invert(1) brightness(2);
  transition: filter 0.2s ease-in-out;
}
body.is-floating #access button:hover img,
body.is-floating #access button[aria-expanded="true"] img {
  filter: invert(0) brightness(1);
  transition: filter 0.2s ease-in-out;
}
#access button {
  position: absolute;
  height: 32px;
  width: 32px;
  padding: 3px;
  margin: 0 10px 0 0;
  border: none;
  background: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 40%;
  transition: all 0.2s ease-in-out;
}
#access button img {
  filter: drop-shadow(1px 2px #c6b48e);
}
#access button:hover,
#access button[aria-expanded="true"] {
  filter: none;
  color: white;
  /* mix-blend-mode: difference; */
  background-color: #ffffff;
  border-color: #252a43;
  border-radius: 0px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#access button[aria-expanded="true"] img {
  filter: drop-shadow(1px 2px #eee1c5);
}
#filter-panel:not([hidden]) {
  position: absolute;
  top: 32px;
  margin-right: 10px;
  padding: .5em;
  background: #ffffff;
  border: 1px solid #252a43;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 100;
}

#filter-panel label {
  display: flex;
  /* justify-content: left; */
  /* align-items: center; */
  gap: 0.5rem;
  color: #252a43;
  cursor: pointer;
}

/* Dark */
body #dark { display: none; }
body.dark #dark {
    display: block;
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center 330px,
        #284b3fb4 0%,
        #000000e0 4%,
        #51a186b4 10%,
        #85008520 11%,
        #00808050 14%,
        #96960050 14.5%,
        #8b250050 15%,
        #00000050 16%,
        #000000d5 35%,
        transparent 48%);
    pointer-events: none;
    height: 3000px;
    /* filter: hue-rotate(0deg); */
    /* animation: flickerHue 60s cubic-bezier(0.7, -1, 0.3, 2) infinite; */
}


/* Movement */
@keyframes glitchA {
  0%   { transform: translate(0, 0) rotateX(0deg); }
  25%  { transform: translate(-6px, 6px) rotateX(4deg); }
  50%  { transform: translate(23px, -6px) rotateX(-6deg); }
  75%  { transform: translate(-6px, 0) rotateX(-2deg); }
  /* 100% { transform: translate(0, 0); } */
}

@keyframes glitchB {
  0%   { transform: translate(0, 0) rotateZ(0deg); }
  20%  { transform: translate(6px, 0) rotateZ(4deg); }
  40%  { transform: translate(0, -6px) rotateZ(-6deg); }
  60%  { transform: translate(-23px, 23px) rotateZ(-2deg); }
  80%  { transform: translate(6px, -6px) rotateZ(2deg); }
  /* 100% { transform: translate(0, 0); } */
}

@keyframes flicker {
  0%, 100% { color: #00d0ff; }
  15%      { color: #00b7ff; }
  18%      { color: #00d0ff; }
  20%      { color: #00e1ff; }
  23%      { color: #00b7ff; }
  25%      { color: #00d0ff; }
  30%      { color: #00b7ff; }
  42%      { color: #00e1ff; }
  48%      { color: #00fffb; }
  50%      { color: #00b7ff; }
  70%      { color: #00ccff; }
  75%      { color: #00d0ff; }
  80%      { color: #00fffb; }
  92%      { color: #ff8c00; }
}
@keyframes flickerHue {
  0%, 100% { filter: hue-rotate(0deg) brightness(1); }
  15%      { filter: hue-rotate(10deg) brightness(1); }
  18%      { filter: hue-rotate(0deg) brightness(1); }
  20%      { filter: hue-rotate(20deg) brightness(1); }
  23%      { filter: hue-rotate(10deg) brightness(1); }
  25%      { filter: hue-rotate(0deg) brightness(1); }
  30%      { filter: hue-rotate(10deg) brightness(1); }
  42%      { filter: hue-rotate(20deg) brightness(1); }
  48%      { filter: hue-rotate(60deg) brightness(1); }
  50%      { filter: hue-rotate(10deg) brightness(1); }
  70%      { filter: hue-rotate(30deg) brightness(1); }
  75%      { filter: hue-rotate(0deg) brightness(1); }
  80%      { filter: hue-rotate(60deg) brightness(1); }
  92%      { filter: hue-rotate(180deg) brightness(1); }
}

/* .story [role="document"] strong {
    will-change: transform;
    animation: flickerHue 10s cubic-bezier(0.7, -1, 0.3, 2) infinite;
} */
.story [role="document"] strong::before {
  will-change: transform;
  animation: glitchA 1s infinite steps(1);
}
.story [role="document"] strong::after {
  will-change: transform;
  animation: glitchB 0.3s infinite steps(1);
}
body.no-animation .story [role="document"] strong::before {
  will-change: auto;
  animation: none;
}
body.no-animation .story [role="document"] strong::after {
  will-change: auto;
  animation: none;
}