body {
  --stroke: #30280fe3;
}

@font-face {
  font-family: PenroseFont;
  src: url('../fonts/PICHSIM_.ttf') format('truetype');
}
@font-face {
  font-family: ChapterFont;
  src: url('../fonts/PICAHMR_.ttf') format('truetype');
}

body {
  height: 3000px;
}
#bg {
  background-image: url('../img/larastelle-lg.webp');
  background-size: 3000px 3000px;
  background-position: 50% 0;
  height: 3000px;
}

.h-text-version, .h-audio-version {
  z-index: 5;
}

pre.chapter-font {
  font-family: ChapterFont;
  margin: 0;
}
.story h3 {
  font-size: 2em;
  font-family: BrandFont;
  padding: .5rem 0 1rem;
  margin: 0;
}
.story h3 span.long {
  text-align: left;
}
.story h3.larastelle-font {
  font-family: LarastelleFont;
  text-shadow: none;
  font-size: 2rem;
  line-height: 1.2;
}
.story h4 {
  font-size: 1.5em;
  color: #E9D8F7;
  text-shadow: 1px 3px #2F2933;
  font-family: monospace;
}
#desc-penrose {
  position: absolute;
  width: 100%;
  height: 3000px;
  overflow: hidden;
}
.penrose-font {
  opacity: 0.62;
  position: absolute;
  width: 100%;
  margin: 0;
  height: 3000px;
  font-family: PenroseFont;
  font-size: 48px;
  line-height: 32px;
  text-align: center;
  color: #00d0ff;
  mix-blend-mode: difference;
  pointer-events: none;
  overflow: hidden;
  /* animation: flicker 60s cubic-bezier(0.7, -1, 0.3, 2) infinite; */
}
.no-animation {
  animation: none !important;
}
.penrose-font span {
  display: inline-block;
}
.penrose-font.left {
  transform: translateX(-0.85em) translateY(0.37em);
}
.penrose-font.right {
  transform: translateX(0.85em) translateY(0.37em);
}
.penrose-font.right span {
  transform: rotate(45deg);
}
.penrose-font.left span {
  transform: rotate(-45deg);
}

h2.larastelle-font {
  font-size: 4em;
}
h3 {
  text-align: center;
}

.links button,
.links a {
  user-select: none;
  cursor: pointer;
  align-items: center;
}
.links span {
  margin: 0;
  color: #bfb4c8;
}

.repeat {
  margin-top: 10px;
}
#chapters-control {
  font-family: LarastelleFont;
  font-size: 2em;
}
#chapters-control > * {
  color: #E9D8F7;
  text-shadow: 0 2px #000;
}
#chapters-control .tabs {
  gap: 0;
  /* background-color: none !important; */
  /* background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); */
}
#chapters-control .tabs a {
  margin: 0;
  background: none;
}
#chapters-control .tabs span {
  display: flex;
  align-items: center;
  pointer-events: none;
  user-select: none;
}
#chapters-control .tabs a.active {
  background-repeat: no-repeat;
  background-image: linear-gradient(to right,
  hsl(270, 60%, 70%),
  hsl(289, 60%, 70%),
  hsl(308, 60%, 70%),
  hsl(327, 60%, 70%),
  hsl(346, 60%, 70%),
  hsl(5, 60%, 70%),
  hsl(24, 60%, 70%),
  hsl(43, 60%, 70%),
  hsl(62, 60%, 70%),
  hsl(81, 60%, 70%),
  hsl(100, 60%, 70%),
  hsl(119, 60%, 70%),
  hsl(138, 60%, 70%),
  hsl(157, 60%, 70%),
  hsl(176, 60%, 70%),
  hsl(195, 60%, 70%),
  hsl(214, 60%, 70%),
  hsl(233, 60%, 70%),
  hsl(252, 60%, 70%)
  );
  color: #54455d;
  /* text-shadow: 0 2px #52485a; */
  text-shadow: none;
  outline: 1px solid #E9D8F750;
  outline-offset: -1px;
  /* border: 1px solid #2F2933; */
  border-radius: 1px;
  filter: /* drop-shadow(0 2px 3px #2F2933) */ drop-shadow(0 2px black);
  /* background-color: #E9D8F7; */
}
.pair.links > * {
  justify-content: center;
}

/* .distance-0, .distance-1, .distance-2, .distance-3, .distance-4, .distance-5, .distance-6,
.distance-7, .distance-8, .distance-9, .distance-10, .distance-11, .distance-12, .distance-13, .distance-14, .distance-15, .distance-16,
.distance-17, .distance-18, .distance-19, .distance-20 {
  display: flex;
} */

@media (max-width: 1200px) { /* 5 */
  .distance-6, .distance-7, .distance-8, .distance-9,
  .distance-10, .distance-11, .distance-12, .distance-13, .distance-14,
  .distance-15, .distance-16, .distance-17, .distance-18, .distance-19,
  .distance-20
  { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
}
@media (max-width: 1000px) { /* 3 */
  .distance-4,
  .distance-5, .distance-6, .distance-7, .distance-8, .distance-9,
  .distance-10, .distance-11, .distance-12, .distance-13, .distance-14,
  .distance-15, .distance-16, .distance-17, .distance-18, .distance-19,
  .distance-20
  { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
}
@media (max-width: 800px) { /* 2 */
  .distance-3, .distance-4,
  .distance-5, .distance-6, .distance-7, .distance-8, .distance-9,
  .distance-10, .distance-11, .distance-12, .distance-13, .distance-14,
  .distance-15, .distance-16, .distance-17, .distance-18, .distance-19,
  .distance-20
  { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
}
@media (max-width: 400px) { /* 0 */
  .distance-1, .distance-2, .distance-3, .distance-4,
  .distance-5, .distance-6, .distance-7, .distance-8, .distance-9,
  .distance-10, .distance-11, .distance-12, .distance-13, .distance-14,
  .distance-15, .distance-16, .distance-17, .distance-18, .distance-19,
  .distance-20
  { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
}

#chapters-control > a {
  filter: hue-rotate(120deg) brightness(1);
  /* animation: flicker 60s cubic-bezier(0.7, -1, 0.3, 2) infinite; */
  text-decoration: underline;
  text-underline-offset: 0.06em;
  transition: text-underline-offset 0.1s ease-out, filter 0.1s ease-in;
}
#chapters-control > a:hover {
  text-underline-offset: 0.16em;
  filter: hue-rotate(120deg) brightness(1.5);
}
#chapters-control .tabs a:hover {
  text-decoration: underline;
}
.nav-previous::before { content: "«" }
.nav-next::before { content: "»" }
.nav-previous:hover::before { content: "‹\00A0" }
.nav-next:hover::before { content: "\00A0›" }
@media (max-width: 350px) {
  #chapters-control { font-size: 1.4em; }
  .nav-previous::before { content: "‹" }
  .nav-next::before { content: "›" }
  .nav-previous:hover::before { content: "‹" }
  .nav-next:hover::before { content: "›" }
}



#chapters-control .tabs > .active::before {
  mix-blend-mode: multiply;
}
[aria-controls="ch0"]::before { content: "|:"; }
[aria-controls="ch1"]::before,
[aria-controls="ch5"]::before,
[aria-controls="ch9"]::before,
[aria-controls="ch13"]::before  { content: "."; }
[aria-controls="ch2"]::before,
[aria-controls="ch6"]::before,
[aria-controls="ch10"]::before,
[aria-controls="ch14"]::before { content: "‚"; }
[aria-controls="ch3"]::before,
[aria-controls="ch7"]::before,
[aria-controls="ch11"]::before,
[aria-controls="ch15"]::before { content: "¨"; width: .4em; clip-path: inset(-10% 0% -50% -5%); }
[aria-controls="ch4"]::before,
[aria-controls="ch8"]::before,
[aria-controls="ch12"]::before,
[aria-controls="ch16"]::before { content: "'"; }
[aria-controls="ch17"]::before { content: ":|"; }

#next {
  display: flex;
  font-size: 1.4em;
  justify-content: center;
  align-items: center;
}
#next::before {
  content: "Next:\00a0";
}
#next::after {
  content: "\00a0→";
}
#next[data-last]::before {
  content: "";
}
#next[data-last]::after {
  content: "\00a0𝄇";
  font-size: 1.8em;
  text-decoration: none;
}
#next[data-last]:hover::after {
  text-decoration: none;
  text-decoration: 1px underline;
  text-underline-offset: -0.1em;
}
.story pre.severe {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.11) 0px, rgba(0, 0, 0, 0.11) 12px, rgba(1, 1, 1, 0.16) 12px, rgba(1, 1, 1, 0.16) 24px, rgba(0, 0, 0, 0.14) 24px, rgba(0, 0, 0, 0.14) 36px, rgba(0, 0, 0, 0.23) 36px, rgba(0, 0, 0, 0.23) 48px, rgba(0, 0, 0, 0.12) 48px, rgba(0, 0, 0, 0.12) 60px, rgba(1, 1, 1, 0.07) 60px, rgba(1, 1, 1, 0.07) 72px, rgba(0, 0, 0, 0.21) 72px, rgba(0, 0, 0, 0.21) 84px, rgba(0, 0, 0, 0.24) 84px, rgba(0, 0, 0, 0.24) 96px, rgba(1, 1, 1, 0.23) 96px, rgba(1, 1, 1, 0.23) 108px, rgba(1, 1, 1, 0.07) 108px, rgba(1, 1, 1, 0.07) 120px, rgba(0, 0, 0, 0.01) 120px, rgba(0, 0, 0, 0.01) 132px, rgba(1, 1, 1, 0.22) 132px, rgba(1, 1, 1, 0.22) 144px, rgba(1, 1, 1, 0.24) 144px, rgba(1, 1, 1, 0.24) 156px, rgba(0, 0, 0, 0) 156px, rgba(0, 0, 0, 0) 168px, rgba(0, 0, 0, 0.12) 168px, rgba(0, 0, 0, 0.12) 180px),
    repeating-linear-gradient(90deg, rgba(1, 1, 1, 0.01) 0px, rgba(1, 1, 1, 0.01) 12px, rgba(1, 1, 1, 0.15) 12px, rgba(1, 1, 1, 0.15) 24px, rgba(0, 0, 0, 0.09) 24px, rgba(0, 0, 0, 0.09) 36px, rgba(0, 0, 0, 0.02) 36px, rgba(0, 0, 0, 0.02) 48px, rgba(0, 0, 0, 0.1) 48px, rgba(0, 0, 0, 0.1) 60px, rgba(1, 1, 1, 0.07) 60px, rgba(1, 1, 1, 0.07) 72px, rgba(1, 1, 1, 0.15) 72px, rgba(1, 1, 1, 0.15) 84px, rgba(0, 0, 0, 0.18) 84px, rgba(0, 0, 0, 0.18) 96px, rgba(1, 1, 1, 0.15) 96px, rgba(1, 1, 1, 0.15) 108px, rgba(1, 1, 1, 0.09) 108px, rgba(1, 1, 1, 0.09) 120px, rgba(1, 1, 1, 0.07) 120px, rgba(1, 1, 1, 0.07) 132px, rgba(1, 1, 1, 0.05) 132px, rgba(1, 1, 1, 0.05) 144px, rgba(0, 0, 0, 0.1) 144px, rgba(0, 0, 0, 0.1) 156px, rgba(1, 1, 1, 0.18) 156px, rgba(1, 1, 1, 0.18) 168px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.24) 0px, rgba(0, 0, 0, 0.24) 16px, rgba(1, 1, 1, 0.06) 16px, rgba(1, 1, 1, 0.06) 32px, rgba(0, 0, 0, 0.16) 32px, rgba(0, 0, 0, 0.16) 48px, rgba(1, 1, 1, 0) 48px, rgba(1, 1, 1, 0) 64px, rgba(1, 1, 1, 0.12) 64px, rgba(1, 1, 1, 0.12) 80px, rgba(1, 1, 1, 0.22) 80px, rgba(1, 1, 1, 0.22) 96px, rgba(0, 0, 0, 0.24) 96px, rgba(0, 0, 0, 0.24) 112px, rgba(0, 0, 0, 0.25) 112px, rgba(0, 0, 0, 0.25) 128px, rgba(1, 1, 1, 0.12) 128px, rgba(1, 1, 1, 0.12) 144px, rgba(0, 0, 0, 0.18) 144px, rgba(0, 0, 0, 0.18) 160px, rgba(1, 1, 1, 0.03) 160px, rgba(1, 1, 1, 0.03) 176px, rgba(1, 1, 1, 0.1) 176px, rgba(1, 1, 1, 0.1) 192px),
    repeating-linear-gradient(135deg, rgba(1, 1, 1, 0.18) 0px, rgba(1, 1, 1, 0.18) 3px, rgba(0, 0, 0, 0.09) 3px, rgba(0, 0, 0, 0.09) 6px, rgba(0, 0, 0, 0.08) 6px, rgba(0, 0, 0, 0.08) 9px, rgba(1, 1, 1, 0.05) 9px, rgba(1, 1, 1, 0.05) 12px, rgba(0, 0, 0, 0.01) 12px, rgba(0, 0, 0, 0.01) 15px, rgba(1, 1, 1, 0.12) 15px, rgba(1, 1, 1, 0.12) 18px, rgba(0, 0, 0, 0.05) 18px, rgba(0, 0, 0, 0.05) 21px, rgba(1, 1, 1, 0.16) 21px, rgba(1, 1, 1, 0.16) 24px, rgba(1, 1, 1, 0.07) 24px, rgba(1, 1, 1, 0.07) 27px, rgba(1, 1, 1, 0.23) 27px, rgba(1, 1, 1, 0.23) 30px, rgba(0, 0, 0, 0.2) 30px, rgba(0, 0, 0, 0.2) 33px, rgba(0, 0, 0, 0.18) 33px, rgba(0, 0, 0, 0.18) 36px, rgba(1, 1, 1, 0.12) 36px, rgba(1, 1, 1, 0.12) 39px, rgba(1, 1, 1, 0.13) 39px, rgba(1, 1, 1, 0.13) 42px, rgba(1, 1, 1, 0.2) 42px, rgba(1, 1, 1, 0.2) 45px, rgba(1, 1, 1, 0.18) 45px, rgba(1, 1, 1, 0.18) 48px, rgba(0, 0, 0, 0.2) 48px, rgba(0, 0, 0, 0.2) 51px, rgba(1, 1, 1, 0) 51px, rgba(1, 1, 1, 0) 54px, rgba(0, 0, 0, 0.03) 54px, rgba(0, 0, 0, 0.03) 57px, rgba(1, 1, 1, 0.06) 57px, rgba(1, 1, 1, 0.06) 60px, rgba(1, 1, 1, 0) 60px, rgba(1, 1, 1, 0) 63px, rgba(0, 0, 0, 0.1) 63px, rgba(0, 0, 0, 0.1) 66px, rgba(1, 1, 1, 0.19) 66px, rgba(1, 1, 1, 0.19) 69px),
    linear-gradient(90deg, rgb(239, 53, 115), rgb(79, 2, 93));
  /* background-image:
    radial-gradient(circle at center center, transparent,#333747a0),
    repeating-linear-gradient(135deg, #333747a0 0px, #333747a0 12px,transparent 12px, transparent 19px,#333747a0 19px, #333747a0 24px,transparent 24px, transparent 28px),
    repeating-linear-gradient(45deg, #171e28 0px, #171e28 7px,transparent 7px, transparent 14px),
    linear-gradient(90deg, #333747a0,#333747a0); */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#footer,
[role="document"] {
  background-color: #27364fd5;
  border: 2px solid #27364f;
  border-top: 2px solid #27364f40;
  border-radius: 5px;
}
[role="document"] {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#footer {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}
.story .dream {
  /* https://www.gradientmagic.com/collection/carbonfiber/gradient/1602197911880
   * 68deg #310927 #A620205E */
  background-image:
    /* added: */ linear-gradient(180deg, rgb(49,9,39) 0%, rgba(49,9,39,.5) 100%),
    radial-gradient(circle at center center, transparent,rgb(49,9,39)),
    repeating-linear-gradient(203deg, rgb(49,9,39) 0px, rgb(49,9,39) 2px,transparent 2px, transparent 10px,rgb(49,9,39) 10px, rgb(49,9,39) 11px,transparent 11px, transparent 21px),
    repeating-linear-gradient(113deg, rgba(166,32,32, 0.37) 0px, rgba(166,32,32, 0.37) 4px,transparent 4px, transparent 8px),
    linear-gradient(158deg, rgb(49,9,39),rgb(49,9,39));

  margin: 1em -21px 0;
  padding: 1rem 36px;
  border-radius: 3px;
  border-top: 1px solid #66626c;
  border-left: 1px solid #636656;
  border-right: 1px solid #636656;
  border-bottom: 1px solid #66626c;
  filter: drop-shadow(0 2px 3px #2F2933);
}
.story pre {
  /* https://www.gradientmagic.com/collection/carbonfiber/gradient/1602197911880
   * 47deg */
  background-image:
    radial-gradient(circle at center center, transparent,rgb(33,33,33)),
    repeating-linear-gradient(182deg, rgb(33,33,33) 0px, rgb(33,33,33) 2px,transparent 2px, transparent 10px,rgb(33,33,33) 10px, rgb(33,33,33) 11px,transparent 11px, transparent 21px),
    repeating-linear-gradient(92deg, rgb(47,47,47) 0px, rgb(47,47,47) 4px,transparent 4px, transparent 8px),
    linear-gradient(137deg, rgb(33,33,33),rgb(33,33,33));

  margin: 1em -21px 0;
  padding: 1rem 36px;
  mix-blend-mode: luminosity;
  border-radius: 3px;
  border-top: 1px solid #66626c;
  border-left: 1px solid #636656;
  border-right: 1px solid #636656;
  border-bottom: 1px solid #66626c;
  filter: drop-shadow(0 2px 3px #2F2933);
}
.music-story .content {
  background: none;
  padding: 0;
  border: none;
  max-width: 500px !important;
}
.story [role="document"] pre,
.story [role="document"] p {
  text-shadow: 1px 1px #171E28;
}
.story [role="document"] p {
  padding: 0 20px;
}
.story [role="document"] p:last-child {
  margin-bottom: 0;
  padding-bottom: 1em;
}
.story .drop {
  display: flex;
  justify-content: center;
  align-items: center;
}
.story .drop h3 {
  padding-left: .2em;
  padding-right: .2em;
}
#ch4 h3, #ch13 h3 {
  padding-left: .7em;
  padding-right: .7em;
}
#ch8 h3 {
  padding-left: .3em;
  padding-right: .3em;
}

#ch0 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(270, 60%, 70%) 65%, hsl(289, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch1 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(289, 60%, 70%) 65%, hsl(308, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch2 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(308, 60%, 70%) 65%, hsl(327, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch3 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(327, 60%, 70%) 65%, hsl(346, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch4 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(346, 60%, 70%) 65%, hsl(5, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch5 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(5, 60%, 70%) 65%, hsl(24, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch6 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(24, 60%, 70%) 65%, hsl(43, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch7 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(43, 60%, 70%) 65%, hsl(62, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch8 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(62, 60%, 70%) 65%, hsl(81, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch9 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(81, 60%, 70%) 65%, hsl(100, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch10 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(100, 60%, 70%) 65%, hsl(119, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch11 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(119, 60%, 70%) 65%, hsl(138, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch12 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(138, 60%, 70%) 65%, hsl(157, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch13 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(157, 60%, 70%) 65%, hsl(176, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch14 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(176, 60%, 70%) 65%, hsl(195, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch15 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(195, 60%, 70%) 65%, hsl(214, 60%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch16 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(214, 60%, 70%) 65%, hsl(260, 59%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#ch17 h3 { background: linear-gradient(75deg, #E9D8F7 0%, hsl(266, 59%, 70%) 65%, hsl(299, 59%, 70%) 90%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
/* #ch0 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch1 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch2 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch3 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch4 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch5 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch6 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch7 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch8 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch9 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch10 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch11 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch12 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch13 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch14 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch15 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch16 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); }
#ch17 h3 { background: linear-gradient(4deg, #ef84ff 0%, #E9D8F7 73%); } */

.story .hostile {
  font-family: monospace;
}
.story .hostile::before {
  position: absolute;
  content: attr(data-c);
  font-family: monospace;
  color: #b73c4c;
  margin-top: -1.1em;
}
/* .story .hostile::after {
  position: absolute;
  content: "CEASE";
  text-shadow: -3px 6px 0 #fbc42090, 24px -10px 0 #fb20ab90;
  transform: rotate(-90deg) translateY(5em);
} */
.story .brave {
  color: #20fbc8;
  font-family: monospace;
  /* animation: flickerHue 20s cubic-bezier(0.7, -1, 0.3, 2) infinite; */
}
/* .story .brave::after {
  position: absolute;
  content: "NO";
  text-shadow: -5em 0 0 #20fbc890;
  transform: rotate(-11deg);
} */


#youtube-chapters li:nth-child(1) { background-image: url(../img/larastelle-1-yt.webp) }
#youtube-chapters li:nth-child(2) { background-image: url(../img/larastelle-2-yt.webp) }
#youtube-chapters li:nth-child(3) { background-image: url(../img/larastelle-3-yt.webp) }
#youtube-chapters li:nth-child(4) { background-image: url(../img/larastelle-4-yt.webp) }
#youtube-chapters li:nth-child(5) { background-image: url(../img/larastelle-5-yt.webp) }
#youtube-chapters li:nth-child(6) { background-image: url(../img/larastelle-6-yt.webp) }
#youtube-chapters li:nth-child(7) { background-image: url(../img/larastelle-7-yt.webp) }
#youtube-chapters li:nth-child(8) { background-image: url(../img/larastelle-8-yt.webp) }
#youtube-chapters li:nth-child(9) { background-image: url(../img/larastelle-9-yt.webp) }
#youtube-chapters li:nth-child(10) { background-image: url(../img/larastelle-10-yt.webp) }
#youtube-chapters li:nth-child(11) { background-image: url(../img/larastelle-11-yt.webp) }
#youtube-chapters li:nth-child(12) { background-image: url(../img/larastelle-12-yt.webp) }
#youtube-chapters li:nth-child(13) { background-image: url(../img/larastelle-13-yt.webp) }
#youtube-chapters li:nth-child(14) { background-image: url(../img/larastelle-14-yt.webp) }
#youtube-chapters li:nth-child(15) { background-image: url(../img/larastelle-15-yt.webp) }
#youtube-chapters li:nth-child(16) { background-image: url(../img/larastelle-16-yt.webp) }


.story [role="document"] strong {
  font-weight: normal;
  color: #ff0066;
  mix-blend-mode: color-dodge;
  text-shadow: none;
}
.story [role="document"] strong::before {
  position: absolute;
  user-select: none;
  pointer-events: none;
  content: attr(data-c);
  color: transparent;
  transform: translate(0, 0);
  text-shadow:
    6px 16px hsl(303, 97%, 30%),
    -16px 6px hsl(214, 97%, 30%),
    16px -6px hsl(149, 97%, 30%),
    -6px -16px hsl(51, 97%, 30%);
  mix-blend-mode: color-dodge;
}
.story [role="document"] strong::after {
  position: absolute;
  user-select: none;
  pointer-events: none;
  content: attr(data-c);
  transform: translate(0, 0) rotate(0deg);
  color: #898b76;
  text-shadow:
    20px 23px hsl(280, 97%, 30%),
    -23px 20px hsl(184, 97%, 30%),
    23px -20px hsl(334, 97%, 30%),
    -20px -23px hsl(29, 97%, 30%);
  mix-blend-mode: screen;
}