@charset "UTF-8";
/********************
 * COLORS AND FONTS *
 ********************/
@font-face {
  font-family: "TradeMarker";
  src: url("../../fonts/TradeMarker-Bold.woff2") format("woff2"), url("../../fonts/TradeMarker-Bold.woff") format("woff");
  font-weight: bold;
  font-display: swap;
}
@font-face {
  font-family: "Gill Sans Std";
  src: url("../../fonts/GillSansStd-Light.woff2") format("woff2"), url("../../fonts/GillSansStd-Light.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Matoran";
  src: url("../../fonts/BIONRG__.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Rahkshi";
  src: url("../../fonts/Rahkshi.woff2") format("woff2"), url("../../fonts/Rahkshi.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Vahki";
  src: url("../../fonts/Vahki.woff2") format("woff2"), url("../../fonts/Vahki.woff") format("woff");
  font-display: swap;
}
/* OpenDyslexic — hosted via jsDelivr CDN; replace with local files for production */
@font-face {
  font-family: "OpenDyslexic";
  src: url("https://cdn.jsdelivr.net/gh/antijingoist/opendyslexic@0.91.12/compiled/OpenDyslexic-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("https://cdn.jsdelivr.net/gh/antijingoist/opendyslexic@0.91.12/compiled/OpenDyslexic-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
:root {
  --back1: #080808;
  --back2: #161616;
  --back2clear: rgba(22, 22, 22, 0.5);
  --back3: #202020;
  --border: #202020;
  --back4: #303030;
  --front1: #ffffff;
  --front2: #cfcfcf;
  --front3: #9f9f9f;
  --fontweight: normal;
  --outershadow: 2px 2px 4px rgba(0, 0, 0, 0.5625);
  --smalloutershadow: 1px 1px 2px rgba(0, 0, 0, 0.5625);
  --innershadow:
    inset 3px 3px 6px var(--back1), inset -3px -3px 6px var(--back3);
  --iconfilter: invert(0%);
  --versions: darkgray;
  --pfontsize: 1.0625rem;
  --trademarker: "Trademarker", Helvetica Now, Helvetica, Arial, sans-serif;
  --gillsans: "Gill Sans Std", Helvetica Now, Helvetica, Arial, sans-serif;
  --rahkshi: "Rahkshi", Helvetica Now, Helvetica, Arial, sans-serif;
  --vahki: "Vahki", Helvetica Now, Helvetica, Arial, sans-serif;
  --matoran:
    "Matoran", "Gill Sans Std", Helvetica Now, Helvetica, Arial, sans-serif;
}
:root.light {
  --front1: #080808;
  --front2: #161616;
  --front3: #202020;
  --border: #cbcccf;
  --back4: #ffffff;
  --back3: #f9f9fa;
  --back2: #e5e6eb;
  --back2clear: rgba(229, 230, 235, 0.5);
  --back1: #b1b1b2;
  --fontweight: bold;
  --outershadow: 3px 3px 6px rgba(0, 0, 0, 0.5625);
  --smalloutershadow: 1px 1px 2px rgba(0, 0, 0, 0.5625);
  --innershadow:
    3px 3px 6px var(--back1), inset 3px 3px 6px var(--back1),
    inset -3px -3px 6px var(--back3);
  --iconfilter: invert(100%);
  --versions: gray;
}
:root.matoran {
  --trademarker:
    "Matoran", "Trademarker", Helvetica Now, Helvetica, Arial, sans-serif;
  --gillsans:
    "Matoran", "Gill Sans Std", Helvetica Now, Helvetica, Arial, sans-serif;
  --rahkshi:
    "Matoran", "Rahkshi", Helvetica Now, Helvetica, Arial, sans-serif;
  --vahki: "Matoran", "Vahki", Helvetica Now, Helvetica, Arial, sans-serif;
  --matoran:
    "Matoran", "Gill Sans Std", Helvetica Now, Helvetica, Arial, sans-serif;
}

:root.smallest {
  --pfontsize: 0.75rem;
}

:root.smaller {
  --pfontsize: 0.875rem;
}

:root.small {
  --pfontsize: 1rem;
}

:root.big {
  --pfontsize: 1.125rem;
}

:root.bigger {
  --pfontsize: 1.25rem;
}

:root.biggest {
  --pfontsize: 1.5rem;
}

.trademarker {
  font-family: var(--trademarker);
}

.matoran {
  font-family: var(--matoran);
}

.vahki {
  font-family: var(--vahki);
  font-weight: 100;
  letter-spacing: 0.25em;
  color: var(--front2);
}

.rahkshi {
  font-family: var(--rahkshi);
  font-weight: 100;
  letter-spacing: 0.25em;
  color: var(--front2);
}

div.contentButtonText span.rahkshi {
  font-size: x-small;
  color: var(--front1);
}

.center {
  text-align: center;
}

span.rightarrow:after {
  content: "⮞";
}
span.leftarrow:after {
  content: "⮜";
}
span.downarrow:after {
  content: "⮟";
}
span.linkarrow:after {
  content: "🡭";
}
span.exitSpan:after {
  content: "🞬";
}
span.exitSpan {
  position: absolute;
  top: 1em;
  right: 1em;
  max-width: 1em;
  max-height: 1em;
  font-size: 2em;
  line-height: 1em;
  border-radius: 50%;
  cursor: pointer;
  color: var(--front1);
  opacity: 0.75;
  transition: all 0.2s ease-in-out;
}
span.exitSpan:hover {
  color: var(--front2);
  transform: scale(1.03125);
}
span.exitSpan:active {
  color: var(--front3);
  transform: scale(0.9875);
}

* {
  padding: 0em;
  margin: 0em;
  color: var(--front1);
}

body {
  position: relative;
  z-index: 0;
  background: none;
  background-color: var(--back2);
  padding-bottom: 3.5em;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("/img/MATANU-island.webp") center center/cover no-repeat;
  filter: grayscale(100%) brightness(25%);
  transform: scale(1);
  transform-origin: center center;
  pointer-events: none;
  z-index: -1;
}
body .zoom {
  display: flex;
  opacity: 0%;
  position: fixed;
  top: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.875);
  z-index: 20;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: none;
}

header {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  font-family: var(--gillsans);
  font-style: normal;
  line-height: 1.5;
  margin: 0.675em auto;
  width: 100%;
}
header img {
  cursor: pointer;
}

main {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  font-family: var(--gillsans);
  font-style: normal;
  line-height: 1.5;
  margin: auto;
  padding: 0.5em;
  gap: 1em;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: calc(100% - 1em);
  background: none;
  border: none;
  box-shadow: none;
}
main h1 {
  font-size: 2.5em;
}
main h2 {
  font-size: 2em;
}
main h3 {
  font-size: 1.25em;
}
main h3 a:active {
  font-size: 0.98125em;
}
main p {
  font-size: var(--pfontsize);
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
  margin: 0.5em;
  letter-spacing: 0.0625em;
  width: calc(100% - 3em);
}
main p a {
  font-weight: 600;
  text-decoration: none;
}
main ul {
  margin: 0.5em;
  min-width: 80%;
}
main section:only-child {
  border-bottom: none;
}
main .readerColumn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 960px;
}
main article.homepageArticle {
  background-color: var(--back2clear);
  border: 1px solid var(--border);
  border-radius: 0.5em;
  backdrop-filter: blur(16px);
  box-shadow: var(--outershadow);
  overflow: hidden;
}
main article.homepageArticle #tv {
  width: 100%;
  min-width: 66.6667vw;
  max-width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(12, 12, 12);
  box-shadow: inset 0 0 0.5rem rgb(0, 0, 0);
  overflow: hidden;
  position: relative;
  color: #fff;
}
main article.homepageArticle #tv #scan-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  filter: opacity(0.5);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  backdrop-filter: blur(0.125rem);
}
main article.homepageArticle #tv video#homepage-video-player {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  background-color: rgb(12, 12, 12);
  animation: tv-flicker 0.1s infinite;
}
main article.homepageArticle #tv .volume-icon {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: #fff;
  z-index: 5;
  font-size: 2rem;
  line-height: 1;
  display: none;
  pointer-events: none;
  text-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.8);
}
main article.homepageArticle > section[lang=es] {
  display: none;
}
main article.homepageArticle p {
  width: calc(100% - 1rem);
  text-align: center;
}
main article.homepageArticle .homepageReadButton {
  background-color: rgba(0, 0, 0, 0);
}
main article.homepageArticle .homepageReadButton:disabled {
  opacity: 50%;
  cursor: default;
}
main article.homepageArticle .homepageReadButton:disabled:active {
  box-shadow: var(--outershadow);
}
main article.homepageArticle .social a {
  width: 2em;
  height: 2em;
}
main article.homepageArticle .social a:hover, main article.homepageArticle .social a:active {
  box-shadow: none;
}
main article.homepageArticle .social {
  width: 33.33%;
  margin: 1em auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}
main article.homepageArticle .social img {
  width: 1.5em;
  height: 1.5em;
  margin: 0.25em;
  filter: var(--iconfilter);
}
main article.homepageArticle#aboutArticle {
  max-width: 780px;
}
main article.homepageArticle#aboutArticle p {
  text-align: justify;
}
main article.homepageArticle#aboutArticle img {
  margin: 1em auto;
  padding: 0em;
  box-shadow: var(--outershadow);
  height: 8em;
  width: 8em;
  border-radius: 50%;
  border: 2px solid var(--border);
}
main article.homepageArticle#aboutArticle .footer {
  margin-top: 1em;
  font-size: small;
  text-align: center;
}
main article section.story ins {
  text-decoration: none;
  background-color: #80ff80;
  color: #080808;
}
main article section.story del {
  text-decoration: line-through;
  background-color: #ff8080;
  color: #080808;
}
main video {
  padding: 0em;
}
main hr {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

@keyframes tv-flicker {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.05);
  }
  100% {
    filter: brightness(1);
  }
}
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

h1,
h2,
h3,
h4 {
  text-align: center;
  line-height: 1em;
  font-family: var(--trademarker);
  font-weight: bold;
  letter-spacing: 0.125em;
}

h2 a,
h3 a {
  text-decoration: none;
  cursor: pointer;
}

button {
  display: inline-block;
  margin: 0.5em 1em;
  border: 1px solid var(--border);
  border-radius: 0.375em;
  border-left: none;
  border-right: none;
  background: var(--back2clear);
  backdrop-filter: blur(16px);
  box-shadow: var(--outershadow);
  cursor: pointer;
  font-family: var(--gillsans);
}

label {
  display: inline-block;
  width: 100%;
  padding: 0em 0.5em;
  text-align: left;
  font-size: 1.25em;
  cursor: pointer;
}
label input {
  margin-right: 0.25em;
}

a:hover,
a span:hover {
  color: var(--front2);
}
a:active,
a span:active {
  color: var(--front3);
}
a:visited,
a span:visited {
  color: var(--front1);
}

video {
  max-width: 100%;
}

hr {
  margin: 0.5em 0em 0.5em 0em;
  border: 0px;
  border-top: 1px solid var(--border);
}

aside {
  position: relative;
  border: 1px solid var(--border);
  border-left: none;
  border-right: none;
  border-radius: 0.5em;
  background-color: var(--back2clear);
  backdrop-filter: blur(16px);
  box-shadow: var(--outershadow);
  z-index: 1;
  min-width: 240px;
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.25em 0;
}
aside button.hideShow,
aside a.hideShow {
  display: none;
}
aside div.asideMain {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
aside hr {
  width: 100%;
  margin: 0.25em 0;
}
aside form {
  display: flex;
  flex-flow: row nowrap;
  height: 1.5em;
  max-height: 1.5em;
  margin: 0.375rem 3.75% 0.375rem 3.75%;
  width: 92.5%;
  font-size: 0.9375rem;
  border: none;
  color: var(--front2);
  box-shadow: none;
  background-color: var(--back2);
  text-transform: uppercase;
  letter-spacing: 0.1875em;
}
aside form input {
  width: 75%;
  max-width: 75%;
  height: 22px;
  font-family: var(--gillsans);
  background-color: var(--back3);
  border: 1px solid var(--border);
  border-radius: 0.25em;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: 0.5em;
  letter-spacing: 0.1875em;
  font-weight: bolder;
}
aside form input::-moz-placeholder {
  font-family: var(--gillsans);
}
aside form input::placeholder {
  font-family: var(--gillsans);
}
aside form button {
  width: 25%;
  max-width: 25%;
  height: 24px;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0.25em;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin: auto;
}
aside fieldset {
  margin: 0;
  width: 92.5%;
  margin-left: 3.75%;
  margin-right: 3.75%;
  font-size: 0.9375em;
  border: none;
  color: var(--front2);
  box-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.1875em;
  background-color: rgba(0, 0, 0, 0);
}
aside fieldset select {
  flex-basis: initial;
  color: var(--front2);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 0.75em;
  letter-spacing: 0.125em;
  margin: 0.25em 0;
  padding-left: 0.5rem;
}
aside a,
aside button {
  border-radius: 0.5em;
  background: var(--back2);
  font-weight: bolder;
  z-index: 1;
  cursor: pointer;
  margin: 0.25em 3.75%;
  font-size: 0.75em;
  height: 20px;
  width: 92.5%;
  border: none;
  color: var(--front2);
  box-shadow: none;
  background-color: var(--back2);
  text-transform: uppercase;
  letter-spacing: 0.1875em;
  text-align: center;
  text-decoration: none;
  display: block;
}
aside a:hover,
aside button:hover {
  background-color: var(--back3);
}
aside a:active,
aside button:active {
  background-color: var(--back2);
}
aside a:visited,
aside button:visited {
  color: var(--front2);
}
aside a.nocaps,
aside button.nocaps {
  text-transform: initial;
}
aside p a {
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
  background-color: transparent;
  text-transform: none;
  letter-spacing: inherit;
  font-size: inherit;
  font-weight: inherit;
}
aside p a:hover {
  background: none;
  background-color: transparent;
}
aside p a:active {
  background: none;
  background-color: transparent;
}
aside p {
  margin: 0.25em 3.75%;
  width: 92.5%;
  font-size: 0.75rem;
}
aside div.asideTagLinks {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25em;
  width: 92.5%;
  margin: 0.25em 3.75%;
}
aside div.asideTagLinks a.asideTagChip {
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.0625em 0.3125em;
  border-radius: 0.25em;
  background-color: gray;
  font-family: var(--gillsans);
  font-size: 0.75em;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
  color: #010203;
  line-height: 1.25;
}
aside div.asideTagLinks a.asideTagChip:hover, aside div.asideTagLinks a.asideTagChip:active, aside div.asideTagLinks a.asideTagChip:visited {
  color: #010203;
}
aside div.asideTagLinks a.asideTagChip:hover {
  background-color: #707070;
}
aside div.asideTagLinks a.asideTagChip:active {
  background-color: #626262;
}
aside #matoran-mode-toggle {
  font-family: var(--matoran);
}

.homepageAsideColumn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1em;
  width: 240px;
  min-width: 240px;
}
.homepageAsideColumn aside {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

aside.changelogAside {
  align-items: stretch;
  padding: 0.75em;
  overflow: hidden;
}
aside.changelogAside pre {
  display: block;
  margin: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: min(40vh, 20rem);
  overflow-x: auto;
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 0.375em;
  padding: 0.75em;
  background-color: var(--back2);
  color: var(--front2);
  font-family: monospace;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}

p {
  color: var(--front2);
  margin: 0.25em;
  margin-left: 3.75%;
  margin-right: 3.75%;
  font-weight: 900;
  font-size: 0.75em;
  letter-spacing: 0.125em;
  width: 92.5%;
  padding: 0;
}
p em {
  color: var(--front2);
}
p a {
  font-weight: 900;
  color: var(--front1);
  cursor: pointer;
}
p a em {
  font-weight: 900;
  color: var(--front1);
  cursor: pointer;
}

#downloadMarker {
  display: none;
}

#modal-data button.disambigButton:hover {
  background-color: var(--back3);
  transform: none;
}
#modal-data button.disambigButton:active {
  background-color: var(--back2);
  box-shadow: none;
  transform: scale(0.95);
}
#modal-data button.disambigButton {
  width: 92.5%;
  margin-left: 3.75%;
  margin-right: 3.75%;
  font-size: 0.9375em;
  border: none;
  color: var(--front2);
  box-shadow: none;
  background-color: var(--back2);
  text-transform: uppercase;
  letter-spacing: 0.1875em;
  height: 4em;
}
#modal-data .hideShow {
  height: 20px;
  padding: 0.125em;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.8125em;
  font-weight: bolder;
  border: none;
  box-shadow: none;
  width: 90%;
  margin: 1em 5% auto 5%;
}
#modal-data .hideShow:hover {
  background-color: var(--back3);
}
#modal-data .hideShow:active {
  background-color: var(--back2);
  transform: scale(0.984375);
}
#modal-data section.showable.is-collapsed {
  display: none;
}
#modal-data {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  position: relative;
  top: auto;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 1em;
  -webkit-overflow-scrolling: touch;
}
#modal-data img.slideshow {
  position: relative;
  width: auto;
  margin-top: -1em;
  overflow: visible;
  z-index: 25;
  border-radius: 0.25em;
  transition: all 0.2s ease-in-out;
}
#modal-data img.slideshow:hover {
  transform: scale(1.03125);
  cursor: pointer;
  box-shadow: var(--outershadow);
}
#modal-data img.slideshow:active {
  transform: scale(0.96875);
  filter: brightness(87.5%);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

button.swapper:hover {
  background-color: var(--back3);
  transform: none;
}
button.swapper:active {
  background-color: var(--back2);
  box-shadow: none;
  transform: scale(0.95);
}
button.swapper {
  border: none;
  color: var(--front2);
  box-shadow: none;
  background-color: var(--back2);
  margin: auto 25% auto 25%;
  width: 50%;
  height: 20px;
  padding: 0.125em;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.8125em;
  font-weight: bolder;
}

div.titleBoxText {
  background-color: rgba(0, 0, 0, 0);
}

.multiparents {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  min-height: 2em;
}
.multiparents button {
  margin: 0em;
  width: 15%;
  border: 0px;
  box-shadow: none;
  background: none;
}

.titleBoxText .multiparents h1,
.titleBoxText .multiparents h3 {
  width: 70%;
  display: none;
  margin: 0em;
}
.titleBoxText .multiparents h1:first-of-type,
.titleBoxText .multiparents h3:first-of-type {
  display: block;
}
.titleBoxText {
  width: 100%;
  padding: 0em 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5em;
}
.titleBoxText h1,
.titleBoxText h2,
.titleBoxText h3 {
  letter-spacing: 0.25em;
}

audio {
  width: 100%;
}

.titleBox {
  padding: 1em;
  height: auto;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background-size: cover;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

div.mediaplayercontents img {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  display: none;
  height: auto;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  border-radius: 0.5em;
}
div.mediaplayercontents img:hover {
  transform: scale(1.03125);
  cursor: pointer;
  box-shadow: var(--outershadow);
}
div.mediaplayercontents img:active {
  transform: scale(0.96875);
  filter: brightness(87.5%);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}
div.mediaplayercontents span img {
  display: block;
}
div.mediaplayercontents span div {
  display: block;
}
div.mediaplayercontents span {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
}
div.mediaplayercontents video {
  display: none;
  height: auto;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  border-radius: 0.5em;
  min-height: 100%;
  background-color: rgba(8, 8, 8, 0.75);
}
div.mediaplayercontents > *:first-child {
  display: block;
}
div.mediaplayercontents {
  max-height: calc(100% - 2em);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-grow: 2;
  border-radius: 0.5em;
}
div.mediaplayercontents:only-child {
  max-height: 100%;
}

.zoom p {
  font-family: var(--gillsans);
  margin: 0.25em;
  padding: 0.25em;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.75);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1875em;
  box-shadow: 0em 0em 0.25em 0.25em rgba(0, 0, 0, 0.75);
}
.zoom img {
  max-height: 90vh;
  max-width: 90vw;
  border-radius: 0.25em;
  margin: 0.5em;
}
.zoom .zoom-image-stage {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  margin: 0.5em;
  border-radius: 0.25em;
  overflow: hidden;
  line-height: 0;
}
.zoom .zoom-image-stage > img {
  display: block;
  max-height: 90vh;
  max-width: 90vw;
  margin: 0;
  border-radius: inherit;
}
.zoom .zoom-magnifier-lens {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(112px, 16vw, 176px);
  height: clamp(112px, 16vw, 176px);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.65), 0px 0px 12px rgba(0, 0, 0, 0.45);
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
  z-index: 2;
}
.zoom .zoom-image-stage.magnifier-active,
.zoom .zoom-image-stage.magnifier-active > img {
  cursor: none;
}
.zoom .mediaplayer {
  height: 85%;
  width: 85%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0.5em;
}
.zoom div.mediaplayer div.mediaplayercontents video {
  background-color: rgba(0, 0, 0, 0);
  min-height: initial;
  height: auto;
}
.zoom div.mediaplayer div.mediaplayercontents img:hover {
  transform: none;
  box-shadow: none;
}
.zoom div.mediaplayer div.mediaplayercontents img:active {
  transform: none;
  box-shadow: none;
}
.zoom div.mediaplayer div.mediaplayercontrols {
  height: 2em;
  width: 100%;
}
.zoom div.mediaplayer div.mediaplayercontrols button {
  background-color: var(--back2);
  border-radius: 0.375em;
  font-size: 1.25em;
  font-weight: bolder;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.zoom div.mediaplayer div.mediaplayercontrols button:hover {
  background-color: var(--back3);
  transform: scale(1.015625);
  cursor: pointer;
}
.zoom div.mediaplayer div.mediaplayercontrols button:active {
  background-color: var(--back1);
  transform: scale(0.984375);
}
.zoom div.mediaplayer div.mediaplayercontrols div {
  background-color: var(--back2);
  border-radius: 0.375em;
  font-size: 1.25em;
  font-weight: bolder;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.zoom div.mediaplayer div.mediaplayercontrols div:hover {
  background-color: var(--back3);
}
.zoom div.mediaplayer div.mediaplayercontrols div.slidelocationdiv p.slidelocation {
  height: 100%;
}
.zoom div.mediaplayer p {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

@media (hover: none), (pointer: coarse) {
  .zoom .zoom-image-stage.magnifier-active,
  .zoom .zoom-image-stage.magnifier-active > img {
    cursor: default;
  }
}
.imginfobox {
  position: absolute !important;
  z-index: 15;
  bottom: 10%;
  right: 10%;
  background-color: rgba(255, 255, 255, 0.125);
  border: 1px solid rgba(255, 255, 255, 0.375);
  cursor: pointer;
}
.imginfobox:hover {
  background-color: rgba(255, 255, 255, 0.25);
}
.imginfobox:active {
  background-color: rgba(255, 255, 255, 0.375);
}

fieldset {
  margin: 1em 0.5em;
  border: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
fieldset label {
  flex-basis: 20%;
  font-size: var(--pfontsize);
  cursor: default;
}
fieldset select {
  flex-basis: 75%;
  margin: 0.25em auto;
  border: 1px solid var(--border);
  background: var(--back2);
  border-radius: 0.5em;
  height: 2em;
  width: 100%;
  padding-left: 0.5rem;
}

#sortable li {
  margin: 0.25em;
  background-color: var(--back2);
  border: 1px solid var(--border);
  border-radius: 0.25em;
  padding: 0em 0.25em;
  display: flex;
  cursor: grab;
}
#sortable li a {
  width: 100%;
  text-align: center;
  font-size: medium;
  text-decoration: none;
  cursor: pointer;
}
#sortable li label {
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#sortable li:hover {
  background-color: var(--back3);
}

#resetButton {
  margin: -0.5em auto 1em auto;
  display: block;
  border: none;
  background: none;
  box-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.75em;
}
#resetButton:hover {
  transform: scale(1.046875);
}
#resetButton:active {
  transform: scale(0.953125);
}

#submit {
  display: block;
  width: 128px;
  height: 64px;
  position: fixed;
  bottom: 1.5em;
  right: 1.5em;
  box-shadow: var(--outershadow);
  border: 1px solid var(--border);
  border-left: none;
  border-right: none;
  font-size: 1.25em;
  color: var(--front2);
  text-decoration: none;
  font-weight: bolder;
  text-transform: uppercase;
  letter-spacing: 0.1875em;
}
#submit:active {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0), -3px -3px 6px rgba(0, 0, 0, 0), var(--smalloutershadow);
  transform: scale(0.96875);
  background-color: var(--back2);
}
#submit:hover {
  transform: scale(1.03125);
}

.slidecontrols {
  display: flex;
  justify-content: center;
  align-items: center;
}
.slidecontrols:first-child {
  border-bottom-left-radius: inherit;
}
.slidecontrols:last-child {
  border-bottom-right-radius: inherit;
}
.slidecontrols button {
  z-index: 1;
  margin: 0em;
  border: none;
  border-top-left-radius: 0em;
  border-top-right-radius: 0em;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  background-color: var(--back2);
  width: 33.33%;
  font-size: 1.25em;
  box-shadow: none;
  height: 34px;
  color: #fff;
  cursor: pointer;
  border-top: 1px solid var(--back3);
}
.slidecontrols button:hover {
  background-color: var(--back3);
}
.slidecontrols button:active {
  background-color: var(--back1);
}

.savefile {
  display: flex;
  justify-content: center;
  align-items: center;
}
.savefile button {
  font-size: 1.25em;
  width: 7.5em;
  height: 1.5em;
  margin: 1em;
  letter-spacing: 0.0625em;
  margin-bottom: 0.625em;
  background-color: var(--back2clear);
  backdrop-filter: blur(16px);
}
.savefile button:hover {
  transform: scale(1.0625);
}
.savefile button:active {
  transform: scale(0.9375);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0), -3px -3px 6px rgba(0, 0, 0, 0), var(--smalloutershadow);
}
.savefile button:focus {
  outline: 0;
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav button,
.nav a {
  border: 1px solid var(--border);
  border-left: none;
  border-right: none;
  border-radius: 0.375em;
  background-color: var(--back2clear);
  backdrop-filter: blur(16px);
  box-shadow: var(--outershadow);
  font-size: 1.25em;
  width: 7.5em;
  margin: 1em;
  letter-spacing: 0.0625em;
  margin-top: 0.625em;
  height: 3em;
  font-weight: 900;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
.nav button:hover,
.nav a:hover {
  transform: scale(1.0625);
}
.nav button:active,
.nav a:active {
  transform: scale(0.9375);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0), -3px -3px 6px rgba(0, 0, 0, 0), var(--smalloutershadow);
}
.nav button:focus,
.nav a:focus {
  outline: 0;
}

.route-status-container {
  position: fixed;
  left: 1em;
  bottom: 0.75em;
  width: auto;
  max-width: calc(100vw - 2em);
  z-index: 6;
  text-align: left;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.route-status-container .route-status {
  margin: 0;
  color: var(--front3);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.9;
  text-align: left;
  white-space: nowrap;
}
.route-status-container .progressBarContainer {
  height: auto;
}
.route-status-container .progressBarContainer progress {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  margin: 0;
  border: none;
  border-radius: 0.25rem;
  width: 100%;
  height: 0.5rem;
  background-color: rgba(0, 0, 0, 0.25);
}
.route-status-container .progressBarContainer progress::-webkit-progress-bar {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 0.25rem;
}
.route-status-container .progressBarContainer progress::-webkit-progress-value {
  background-color: #938170;
  border-radius: 0.25rem;
}
.route-status-container .progressBarContainer progress::-moz-progress-bar {
  background-color: #938170;
  border-radius: 0.25rem;
}

@keyframes routePickerPop {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
dialog.route-picker-dialog {
  max-width: 42rem;
  width: min(90vw, 42rem);
  border: 1px solid var(--border);
  border-left: none;
  border-right: none;
  border-radius: 0.75rem;
  background-color: var(--back2clear);
  backdrop-filter: blur(16px);
  box-shadow: var(--outershadow);
  padding: 0;
}
dialog.route-picker-dialog[open] {
  animation: routePickerPop 0.18s ease-out;
}
dialog.route-picker-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.route-picker-form {
  padding: 1.25rem;
}
.route-picker-form h2 {
  margin: 0;
  text-align: left;
  font-size: 1.5rem;
}
.route-picker-form menu {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 1rem 0 0 0;
  padding: 0;
}
.route-picker-help {
  margin: 0.5rem 0 1rem 0;
  width: auto;
  color: var(--front2);
  font-size: 0.875rem;
  letter-spacing: 0.0625em;
  text-transform: none;
  text-align: left;
}
.route-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: min(50vh, 24rem);
  overflow: auto;
  padding-right: 0.25rem;
}
.route-picker-option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-left: none;
  border-right: none;
  border-radius: 0.5rem;
  text-align: left;
  background-color: var(--back2);
  box-shadow: none;
}
.route-picker-option:hover {
  background-color: var(--back3);
  transform: scale(1.01);
}
.route-picker-option:active {
  background-color: var(--back1);
  transform: scale(0.99);
  box-shadow: none;
}
.route-picker-option:focus-visible {
  outline: 2px solid var(--front1);
  outline-offset: 2px;
}
.route-picker-option-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.route-picker-action {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  color: var(--front3);
  font-size: 0.6875rem;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  background-color: var(--back2clear);
  line-height: 1.2;
}
.route-picker-title {
  color: var(--front1);
  font-family: var(--trademarker);
  font-size: 1rem;
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}
.route-picker-description {
  margin: 0.375rem 0 0 0;
  width: 100%;
  color: var(--front2);
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: 0.0625em;
  text-transform: none;
  text-align: left;
}
.route-picker-cancel {
  width: auto;
  min-width: 7rem;
  height: 2.5rem;
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.125em;
  text-transform: uppercase;
}
.route-picker-cancel:hover {
  transform: scale(1.02);
}
.route-picker-cancel:active {
  transform: scale(0.98);
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
}
nav button.standaloneButton {
  width: 50%;
  margin: 0.625em;
  font-weight: 900;
  letter-spacing: 0.125em;
  font-size: 1.125em;
}
nav button {
  height: 2em;
  width: 5em;
  margin: 0.5em;
  font-size: 2em;
  font-weight: 900;
  letter-spacing: 0.125em;
}
nav button:hover {
  transform: scale(1.0625);
}
nav button:active {
  transform: scale(0.9375);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0), -3px -3px 6px rgba(0, 0, 0, 0), var(--smalloutershadow);
}
nav button:focus {
  outline: 0;
}
nav a {
  font-weight: 900;
  letter-spacing: 0.125em;
}

#slidelocationdiv {
  z-index: 1;
  margin: 0em;
  border: none;
  border-top-left-radius: 0em;
  border-top-right-radius: 0em;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  background-color: var(--back2);
  width: 33.33%;
  font-size: 1.25em;
  box-shadow: none;
  height: 33px;
  line-height: 32px;
  text-align: center;
  border-top: 1px solid var(--back3);
}

#slidelocation {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 1em;
  line-height: 0px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.standaloneButton {
  font-size: 1.25em;
  width: 7.5em;
  height: 1.5em;
  margin: 1em;
  letter-spacing: 0.0625em;
}
.standaloneButton:hover {
  transform: scale(1.03125);
}
.standaloneButton:active {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0), -3px -3px 6px rgba(0, 0, 0, 0), var(--smalloutershadow);
  transform: scale(0.96875);
  background-color: var(--back2);
}
.standaloneButton:focus {
  outline: 0;
}

.swappable div {
  display: none;
  transition: unset;
}
.swappable .swapdefault {
  display: block;
  transition: unset;
}

div#modal-data div.mediaplayer {
  margin: auto;
  margin-top: -1em;
  max-width: 90%;
  height: 33.33%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5em;
}

div.mediaplayer div.mediaplayercontrols {
  height: 1.5em;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}
div.mediaplayer div.mediaplayercontrols button,
div.mediaplayer div.mediaplayercontrols div {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

div.mediaplayercontrols button.mediaplayerbutton:first-child {
  display: none;
}
div.mediaplayercontrols button,
div.mediaplayercontrols div {
  width: 33.33%;
  flex-grow: 1;
  height: 100%;
  margin: 0em 0.375em;
  background: none;
  border: none;
  box-shadow: none;
  transition: all 0.2s ease-in-out;
}
div.mediaplayercontrols button:hover,
div.mediaplayercontrols div:hover {
  background-color: var(--back3);
  border-radius: 0.375em;
}
div.mediaplayercontrols button:hover {
  transform: scale(1.0625);
  cursor: pointer;
}
div.mediaplayercontrols p {
  width: 100%;
  max-height: 100%;
  text-align: center;
  margin: auto 0em;
}

canvas:focus {
  outline: none;
}
canvas {
  border-radius: 0.5em;
}

blockquote {
  margin: 1em;
  border: 1px solid var(--border);
  border-radius: 0.375em;
  box-shadow: var(--innershadow);
}
blockquote p {
  font-size: 1.25em;
}
blockquote p:nth-child(2) {
  padding-top: 0em;
  text-align: right;
}
blockquote p:nth-child(3) {
  margin-top: -0.75em;
  padding-top: 0em;
  padding-right: 2.5em;
  font-family: monospace;
  font-size: 1em;
  text-align: right;
}
blockquote p a {
  text-decoration: none;
}
blockquote p a:hover {
  color: var(--front2);
}
blockquote p a:active {
  color: var(--front3);
}
blockquote p a:visited {
  color: var(--front1);
}

.quotation:before, .quotation:after {
  display: inline;
  height: 0;
  line-height: 0;
  position: relative;
  top: 0.25em;
  color: #969696;
  font-size: 2em;
}
.quotation:before {
  content: open-quote;
  padding-right: 0.125em;
}
.quotation:after {
  content: close-quote;
  padding-left: 0.125em;
}

ins {
  margin: 1px;
  border-radius: 0.125em;
  padding: 1px;
}

del {
  margin: 1px;
  border-radius: 0.125em;
  padding: 1px;
}

#mains main ul {
  list-style-type: disc;
  list-style-position: inside;
}

.red {
  margin: 0em;
  margin-bottom: -0.5em;
  padding: 0em;
  text-align: center;
  text-transform: uppercase;
  color: red;
  font-size: x-large;
  font-weight: 900;
}

.redstroke {
  -webkit-text-stroke: 1px red;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

html body main article {
  max-width: 960px;
  padding-bottom: 0.75em;
  box-sizing: border-box;
  position: relative;
  border: 1px solid var(--border);
  border-left: none;
  border-right: none;
  border-radius: 0.5em;
  background-color: var(--back2clear);
  backdrop-filter: blur(16px);
  box-shadow: var(--outershadow);
  overflow: visible;
}
html body main article section.story {
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html body main article section.story section.titleBox {
  position: relative;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0.5em 0.5em 0 0;
  box-shadow: none;
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: none;
}
html body main article section.story section.titleBox img {
  overflow: visible;
  margin-top: -1.5em;
  margin-left: -1.5em;
  padding: 0em;
  float: left;
  width: auto;
  max-width: 33.33%;
  max-height: 240px;
  height: auto;
  border-radius: 0.375em;
}
html body main article section.story div.paragraph {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: 0.25rem;
  margin: 0rem;
  padding: 0rem 1rem;
}
html body main article section.story div.page_markers {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-width: 2rem;
  position: relative;
  align-self: stretch;
  box-sizing: border-box;
  color: var(--front3);
  font-size: 0.875rem;
  font-weight: normal;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
html body main article section.story div.page_markers .page_marker {
  max-width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  border-left: 1px solid currentColor;
  color: var(--front3);
  line-height: 1;
  box-sizing: border-box;
}
html body main article section.story div.page_markers .page_marker * {
  color: inherit;
}
html body main article section.story div.page_markers .page_marker span {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
}
html body main article section.story div.page_markers .page_marker.start {
  border-top-left-radius: 0.5rem;
  padding: 0.25rem;
  margin-top: 0.5rem;
}
html body main article section.story div.page_markers .page_marker.end {
  border-bottom-left-radius: 0.5rem;
  min-height: 1rem;
}
html body main article section.story img {
  margin: 0em;
  width: 100%;
  padding: 0.5em 0em;
  transition: all 0.2s ease-in-out;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}
html body main article section.story img:hover {
  transform: scale(1.03125);
  cursor: pointer;
  box-shadow: var(--outershadow);
}
html body main article section.story img:active {
  transform: scale(0.96875);
  filter: brightness(87.5%);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}
html body main article section.story video {
  margin: 0em;
  width: 100%;
  padding: 0.5em 0em;
}
html body main article section.story iframe {
  margin: 0em;
  width: 100%;
  padding: 0.5em 0em;
}
html body main article section.story audio,
html body main article section.story embed,
html body main article section.story object {
  margin: 0em;
  width: 100%;
  padding: 0.5em 0em;
}
html body main article section.story span.anchors {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: flex-start;
  min-width: 0;
  text-align: justify;
}
html body main article section.story span.anchors > a.anchor {
  flex: 0 0 auto;
  min-width: 2rem;
  margin: 0.5rem 0rem;
  line-height: 1.6875;
  color: var(--front3);
  font-size: 0.9375rem;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
html body main article section.story span.anchors > p,
html body main article section.story span.anchors > ul,
html body main article section.story span.anchors > ol,
html body main article section.story span.anchors > div {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0.5rem 0rem;
  width: auto;
  text-indent: 2rem;
}
html body main article section.story span.anchors > p {
  padding: 0em;
}
html body main article section.story span.anchors > ul,
html body main article section.story span.anchors > ol {
  padding-left: 1.5em;
}
html body main article section.story span.anchors:target > p,
html body main article section.story span.anchors:target > ul,
html body main article section.story span.anchors:target > ol,
html body main article section.story span.anchors:target > div, html body main article section.story span.anchors.x-target > p,
html body main article section.story span.anchors.x-target > ul,
html body main article section.story span.anchors.x-target > ol,
html body main article section.story span.anchors.x-target > div {
  background-color: var(--back4);
  border-radius: 0.125em;
  transition: 0s;
}
html body main article section.structure {
  width: calc(100% - (0.5em + 7px));
  margin-left: calc(0.5em + 7px);
  padding-top: 1em;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
  align-content: flex-start;
  background-color: rgba(0, 0, 0, 0);
}
html body main article section.structure h2 {
  margin-top: 0.5em;
}
html body main article section.structure nav {
  width: 100%;
}
html body main article section.structure div.padding {
  min-height: 120px;
  width: 47.5%;
  margin: 0rem;
}
html body main article section.structure div.padding * {
  text-decoration: none;
}
html body main article section.structure div.padding a .contentButtonText::-webkit-scrollbar,
html body main article section.structure div.padding button.contentsButton .contentButtonText::-webkit-scrollbar {
  display: none;
}
html body main article section.structure div.padding a .contentButtonText .tags,
html body main article section.structure div.padding button.contentsButton .contentButtonText .tags {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
}
html body main article section.structure div.padding a .contentButtonText .tags p,
html body main article section.structure div.padding button.contentsButton .contentButtonText .tags p {
  margin: 0.0625em 0.125em;
  padding: 0.0625em 0.125em;
  width: auto;
  border-radius: 0.25em;
  background-color: gray;
  font-family: var(--gillsans);
  font-size: 0.75em;
  color: #010203;
}
html body main article section.structure div.padding a .contentButtonText .versions,
html body main article section.structure div.padding button.contentsButton .contentButtonText .versions {
  padding-right: 0.5em;
  overflow: scroll;
  max-height: 56px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
html body main article section.structure div.padding a .contentButtonText .versions::-webkit-scrollbar,
html body main article section.structure div.padding button.contentsButton .contentButtonText .versions::-webkit-scrollbar {
  display: none;
}
html body main article section.structure div.padding a .contentButtonText .versions p,
html body main article section.structure div.padding button.contentsButton .contentButtonText .versions p {
  font-family: var(--gillsans);
  color: var(--versions);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 0.8125em;
  line-height: 0.8125em;
  letter-spacing: 0.0625em;
}
html body main article section.structure div.padding a .contentButtonText p::-webkit-scrollbar,
html body main article section.structure div.padding button.contentsButton .contentButtonText p::-webkit-scrollbar {
  display: none;
}
html body main article section.structure div.padding a .contentButtonText p,
html body main article section.structure div.padding button.contentsButton .contentButtonText p {
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 0;
}
html body main article section.structure div.padding a .contentButtonText,
html body main article section.structure div.padding button.contentsButton .contentButtonText {
  -ms-overflow-style: none;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-height: 95%;
  gap: 0.4375em;
  margin: auto 0.25em;
  padding: 0.25em;
}
html body main article section.structure div.padding a .contentButtonText div.tags,
html body main article section.structure div.padding button.contentsButton .contentButtonText div.tags {
  padding-right: 0.5em;
  overflow: visible;
  max-height: none;
}
html body main article section.structure div.padding a .contentButtonText .versions,
html body main article section.structure div.padding button.contentsButton .contentButtonText .versions {
  font-size: 0.9375em;
  width: 100%;
}
html body main article section.structure div.padding a .contentButtonText .tags,
html body main article section.structure div.padding button.contentsButton .contentButtonText .tags {
  font-size: 0.9375em;
  width: 100%;
}
html body main article section.structure div.padding a:active,
html body main article section.structure div.padding button.contentsButton:active {
  transform: scale(0.96875);
  background-color: var(--back2);
  box-shadow: var(--smalloutershadow);
}
html body main article section.structure div.padding a,
html body main article section.structure div.padding button.contentsButton {
  margin: 1em auto;
  border-radius: 0.5em;
  width: 90%;
  display: flex;
  flex-direction: row;
  max-width: 100%;
  min-height: 160px;
  height: 100%;
  max-height: 160px;
  padding: 0em;
  -ms-overflow-style: none;
  scrollbar-width: none;
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(16px);
  border: 1px solid #323232;
  border-left: 0px;
  border-right: 0px;
}
html body main article section.structure div.padding a::-webkit-scrollbar,
html body main article section.structure div.padding button.contentsButton::-webkit-scrollbar {
  display: none;
}
html body main article section.structure div.padding a:focus,
html body main article section.structure div.padding button.contentsButton:focus {
  outline: 0;
}
html body main article section.structure div.padding a img,
html body main article section.structure div.padding button.contentsButton img {
  margin-top: -1em;
  margin-left: -1em;
  margin-right: 0;
  border-radius: 0.375em;
  float: left;
  display: block;
  height: 100%;
  max-height: 144px;
  width: auto;
  max-width: 108px;
  -o-object-fit: cover;
     object-fit: cover;
  border: none;
  padding: 0;
}
html body main article section.structure div.padding a p,
html body main article section.structure div.padding button.contentsButton p {
  width: 100%;
  max-width: 100%;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1rem;
  margin: 0;
}
html body main article section.structure div.padding a p:first-of-type,
html body main article section.structure div.padding button.contentsButton p:first-of-type {
  font-family: var(--trademarker);
  font-size: 1.1875em;
}
html body main article section.structure div.padding a p:nth-of-type(2),
html body main article section.structure div.padding button.contentsButton p:nth-of-type(2) {
  padding-right: 0.5em;
  overflow: scroll;
  max-height: 5rem;
}
html body main article section.structure div.padding.small {
  min-height: 0px;
}
html body main article section.structure .contentsImg {
  height: 100%;
  width: 100%;
  display: flex;
  flex-basis: 20%;
  overflow: hidden;
  position: relative;
  margin: auto;
}
html body main article section.structure .contentsImg img {
  height: 100%;
  width: unset;
  overflow: hidden;
  position: absolute;
  border-radius: 0.5em 0 0 0.5em;
  padding: 0;
}
html body main article section.structure .contentsText {
  flex-basis: 80%;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 0.5em 1em;
}
html body main article section.structure .contentsText p {
  font-family: var(--trademarker);
}
html body main article section.structure .contentsText p:last-of-type {
  font-family: var(--gillsans);
  padding-top: 0;
  padding-bottom: 0;
}
html body main article section.structure .contents p {
  text-align: center;
  line-height: 1.25em;
  padding: 0 0.5em;
}
html body main article section.structure .noImg {
  height: 100px;
}
html body main article .toc-bucket {
  width: 97.5%;
  margin: 0.5rem auto;
  background-color: var(--back3);
  border-left: 3px solid gray;
  border-radius: 0.5em;
  overflow: hidden;
}
html body main article .toc-bucket-toggle {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 1rem);
  padding: 0.5rem;
  font-family: var(--trademarker);
  font-size: 0.9375em;
  font-weight: bold;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  text-align: left;
  color: var(--front1);
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  margin: 0.5rem;
}
html body main article .toc-bucket-toggle:hover {
  background-color: rgba(255, 255, 255, 0.125);
}
html body main article .toc-bucket-toggle:active {
  background-color: rgba(255, 255, 255, 0.25);
}
html body main article .toc-bucket-toggle--inner {
  font-size: 0.8125em;
}
html body main article .toc-bucket-body {
  width: calc(100% - 1rem);
  padding: 0 0.5em 0.5em;
}
html body main article .toc-bucket-body section.structure {
  width: 100%;
  margin-left: 0;
  padding-top: 0.375em;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
  align-content: flex-start;
}
html body main article .toc-bucket--inner {
  margin-top: 0.375em;
  background-color: var(--back2);
  border-left: 2px solid gray;
  border-radius: 0.5em;
}
html body aside {
  min-width: 240px;
}

#indeximg {
  margin: 0px 0px -18px 0px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(0, 0, 0, 0);
  visibility: hidden;
  transition: all 0.375s ease-in-out;
}
.modal-visible {
  z-index: 8;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: visible;
}
.modal-content-center {
  position: fixed;
  top: 100%;
  left: calc(50% - 320px);
  width: 640px;
  right: calc(50% - 320px);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -90%;
  height: 90%;
  z-index: 0;
  background-color: var(--back2);
  border: 1px solid var(--border);
  border: 1px solid var(--border);
  border-left: none;
  border-right: none;
  border-radius: 0.5em;
  background-color: var(--back2clear);
  backdrop-filter: blur(16px);
  box-shadow: var(--outershadow);
  border-radius: 0.5em;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  transition: all 0.375s ease-in-out;
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.modal-content-center::-webkit-scrollbar {
  display: none;
}
.modal-content-center-visible {
  z-index: 9;
  top: 5%;
  height: 90%;
  box-shadow: 3px 3px 6px rgb(0, 0, 0);
  overflow-y: hidden;
  overflow-x: hidden;
}
.modal-content img {
  width: 100%;
  max-width: 640px;
}
.modal-content h1 {
  text-align: center;
  padding: 8px 8px;
  line-height: 1.25em;
  font-family: "TradeMarker", Helvetica Now, Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: var(--front1);
  padding-bottom: 0px;
}
.modal-content h2 {
  text-align: center;
  padding: 8px 8px;
  line-height: 1.25em;
  font-family: "TradeMarker", Helvetica Now, Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: var(--front1);
}
.modal-content p {
  margin: 0.5em 1em;
  position: relative;
  overflow: hidden;
  color: var(--front2);
  font-family: "Gill Sans Std", Helvetica Now, Helvetica, Arial, sans-serif;
  font-style: normal;
  line-height: 1.5em;
  font-size: 1em;
  letter-spacing: 0.125rem;
  color: var(--front1);
}
.modal-content a {
  display: inline-block;
  color: var(--front2);
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1875em;
  padding: 0.5em;
  transition: 0.25s;
}
.modal-content a:visited {
  color: var(--front2);
}
.modal-content a:hover {
  color: var(--front1);
  font-size: 1.03125em;
  cursor: pointer;
  line-height: 1.5em;
}
.modal-content a:active {
  color: var(--front3);
  font-size: 0.96875em;
  cursor: pointer;
  line-height: 1.5em;
}
.modal-content ul {
  font-family: "Gill Sans Std", Helvetica Now, Helvetica, Arial, sans-serif;
  font-size: 0.9375em;
  color: var(--front1);
  list-style: inside circle;
  margin: 0.5em 1em;
}
.modal-content li {
  font-family: "Gill Sans Std", Helvetica Now, Helvetica, Arial, sans-serif;
  font-size: 0.9375em;
  color: var(--front1);
  list-style: inside circle;
  margin: 0.25em 1em;
}
.modal-content .source {
  text-align: center;
  font-size: 0.875em;
}
.modal-content {
  /* Make modal content visually consistent with the aside */
}
.modal-content #modal-data .settings-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.5em 1em;
}
.modal-content #modal-data .settings-list button.small {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 0.375em;
  background: var(--back2clear);
  box-shadow: var(--outershadow);
  color: var(--front2);
  padding: 0.5em 0.75em;
  cursor: pointer;
  font-family: "Gill Sans Std", Helvetica Now, Helvetica, Arial, sans-serif;
}
.modal-content {
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
  min-height: 0;
  padding-top: 1em;
}
.modal-content .slidecontrols {
  height: 34px;
}
.modal-text {
  overflow: visible;
  max-height: none;
  height: auto;
}
.modal-text section {
  position: relative;
}

/* Gear button for reader settings modal */
.settings-gear {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 12;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--back3);
  color: var(--front1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: var(--outershadow);
  cursor: pointer;
}

.settings-gear:focus {
  outline: 2px solid var(--front2);
}

@media only screen and (max-width: 640px) {
  .settings-gear {
    bottom: 0.5rem;
    right: 0.5rem;
    width: 44px;
    height: 44px;
  }
}
@media only screen and (max-width: 640px) {
  body {
    padding-bottom: 2em;
  }
  header {
    max-width: 80%;
  }
  header img {
    max-width: 100%;
    height: auto;
    max-height: 72px;
  }
  header p {
    font-size: var(--pfontsize);
  }
  main {
    margin: 8px auto;
    padding: 0px;
    padding-top: 0.5em;
  }
  main h1 {
    margin-top: 0.125em;
    margin-bottom: 0.125em;
    font-size: 1.5em;
  }
  main h2 {
    margin-top: 0.125em;
    margin-bottom: 0.125em;
    font-size: 1.375em;
  }
  main h3 {
    margin-top: 0.125em;
    margin-bottom: 0.125em;
    font-size: 1em;
  }
  main h3:nth-of-type(2) {
    margin-bottom: 0.25em;
  }
  main p {
    font-size: var(--pfontsize);
  }
  .savefile button {
    width: 128px;
    height: 40px;
    font-size: 1em;
  }
  .nav button,
  .nav a {
    width: 128px;
    height: 64px;
    font-size: 1em;
  }
  .route-status-container {
    left: 0.75em;
    bottom: 0.5em;
    max-width: calc(100vw - 1.5em);
  }
  .route-status-container .route-status {
    font-size: 0.6875rem;
  }
  dialog.route-picker-dialog {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    border-radius: 0.5rem;
  }
  .route-picker-form {
    padding: 1rem;
  }
  .route-picker-form h2 {
    font-size: 1.25rem;
  }
  .route-picker-form menu {
    justify-content: stretch;
  }
  .route-picker-list {
    max-height: min(55vh, 20rem);
  }
  .route-picker-title {
    font-size: 0.9375rem;
  }
  .route-picker-cancel {
    width: 100%;
    min-width: 0;
  }
  .anchor {
    padding-top: 0.875em;
    font-size: 0.875em;
    min-width: 18px;
    text-align: center;
  }
  .page {
    padding-top: 0.875em;
    font-size: 0.875em;
    min-width: 18px;
    text-align: center;
  }
  html body main article section.story div.paragraph {
    gap: 0.5em;
    padding-left: 0.125em;
  }
  html body main article section.story div.page_markers {
    width: 2.75em;
    min-width: 2.75em;
  }
  html body main article section.story span.anchors > a.anchor {
    min-width: 2.25em;
    padding-top: 0.25em;
    padding-left: 0.25em;
  }
  html body main article section.story span.pages {
    padding-left: 3.25em;
  }
  html body main article section.story span.pages::before {
    width: 2.75em;
  }
  html body main article section.story span.pages .page {
    width: 2.75em;
    min-width: 0;
    padding-top: 0.1em;
    text-align: left;
  }
}
@media only screen and (max-width: 720px) {
  .titleBox img {
    display: none;
  }
  .titleBoxText {
    margin-left: 0em;
  }
  aside {
    min-width: 0;
    width: auto;
    border-radius: 0em;
    border-left: none;
    border-right: none;
    border-bottom: none;
    position: fixed;
    z-index: 20;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0px;
    margin: 0em;
    justify-content: space-between;
    background-color: var(--back2);
    padding: 0.375rem 0 0.5rem;
  }
  aside div {
    min-width: 100%;
    width: 100%;
  }
  aside button.hideShow {
    display: block;
    width: calc(100% - 1.5rem);
    height: 2.25rem;
    margin: 0.25rem 0.75rem;
    padding: 0 0.75rem;
    font-size: 0.9375em;
    line-height: 1.1;
  }
  aside div.asideMain {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
  }
  aside div.asideMain > a,
  aside div.asideMain > button {
    width: calc(100% - 1.5rem);
    height: 2.25rem;
    margin: 0.25rem 0.75rem;
    padding: 0 0.75rem;
    font-size: 0.9375em;
    line-height: 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  aside div.asideMain p {
    font-size: 0.875em;
  }
  aside p {
    margin: 0.375em 0.75em;
    width: calc(100% - 1.5em);
  }
  aside div.asideTagLinks {
    width: calc(100% - 1.5em);
    margin: 0.25em 0.75em;
    gap: 0.375em;
  }
  aside div.asideTagLinks a.asideTagChip {
    font-size: 0.8125em;
  }
  aside form {
    margin: 0.5rem 0.75rem;
    width: calc(100% - 1.5rem);
    min-height: 2.25rem;
    height: 2.25rem;
    max-height: none;
  }
  aside form input {
    font-size: 0.9375em;
    height: calc(2.25rem - 2px);
    max-height: none;
    padding-left: 0.625em;
  }
  aside form button {
    font-size: 0.9375em;
    height: calc(2.25rem - 2px);
    max-height: none;
    margin: 0;
  }
  aside.changelogAside {
    display: none;
  }
  .homepageAsideColumn {
    width: 100%;
    min-width: 100%;
  }
  html body main {
    flex-direction: column-reverse;
    align-items: center;
  }
  html body main article section.structure {
    width: calc(100% - 1rem);
    margin: 0.5em auto 0;
    padding-top: 0.5em;
    justify-content: flex-start;
  }
  html body main article section.structure div.padding {
    width: 100%;
    margin: 0.75em 0;
  }
  html body main article section.structure div.padding a,
  html body main article section.structure div.padding button.contentsButton {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  html body main article .toc-bucket {
    width: 100%;
  }
  html body main article .toc-bucket-body {
    padding: 0 0.25em 0.375em;
  }
  html body main article .toc-bucket-body section.structure {
    width: 100%;
    margin: 0;
  }
  html body main .readerColumn {
    width: 97.5%;
  }
  html body main .readerColumn article {
    width: 100%;
  }
  main article.homepageArticle .social {
    width: 100%;
    max-width: 100%;
    margin: 1rem auto;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    font-size: 0;
    line-height: 0;
  }
  main article.homepageArticle .social a {
    width: 2.125rem;
    height: 2.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1;
  }
  main article.homepageArticle .social img {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
  }
  span.rightarrow:after {
    content: "→";
  }
  span.leftarrow:after {
    content: "←";
  }
  span.downarrow:after {
    content: "↓";
  }
  span.linkarrow:after {
    content: "➚";
  }
  span.exitSpan:after {
    content: "X";
  }
  .readerColumn nav button.standaloneButton {
    width: 95%;
  }
}
@media screen and (min-width: 720px) {
  html body main .readerColumn {
    width: calc(95% - 240px);
  }
  html body main .readerColumn article {
    width: 100%;
  }
}
@media only screen and (max-width: 680px) {
  .modal-content-center {
    left: 5%;
    width: 90%;
    right: 5%;
  }
}
/**************************************
 * CONSOLIDATED DOOM PAGE STYLES *
 **************************************/
.doom-view article {
  width: 100%;
  max-width: calc(95vw - 1rem - 240px);
}
.doom-view #jsdos {
  width: 100%;
  aspect-ratio: 16/10 !important;
}
.doom-view #warning {
  display: none;
}
.doom-view header img {
  height: 80px;
  max-height: 80px !important;
  width: auto !important;
}
@media only screen and (max-width: 640px) {
  .doom-view main {
    width: 90%;
    border: none;
    box-shadow: none;
  }
  .doom-view main object,
  .doom-view #controls,
  .doom-view #jsdos {
    display: none;
  }
  .doom-view #warning {
    display: block;
  }
}

/*****************************************
 * CONSOLIDATED DISCORD PAGE STYLES *
 *****************************************/
.discord-view::before {
  display: none;
}
.discord-view,
.discord-view * {
  background-color: #202225;
}
.discord-view p {
  margin: 2rem;
  color: #fff;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 1.125rem;
  text-align: center;
  letter-spacing: 0.0625rem;
}

/***************************************
 * CONSOLIDATED REFERENCE PAGE STYLES *
 ***************************************/
.reference-view section.story {
  overflow: hidden;
}
.reference-view section.story p.pronunciation,
.reference-view section.story p.domain {
  text-align: center;
  font-weight: bolder;
}
.reference-view section.story > p.center {
  width: calc(100% - 1rem);
  margin: 0.375em auto;
  padding: 0em 0.5rem;
  box-sizing: border-box;
  text-align: center;
}
.reference-view section.story img:hover {
  box-shadow: none;
}
.reference-view section.story section.titleBox div.mediaplayer div.mediaplayercontents {
  height: 240px;
  width: 320px;
}
.reference-view section.story section.titleBox div.mediaplayer div.mediaplayercontents img,
.reference-view section.story section.titleBox div.mediaplayer div.mediaplayercontents video {
  height: 100%;
}
.reference-view section.story section.titleBox div.mediaplayer {
  margin: -0.5em;
}
.reference-view section.story div.mediaplayer {
  margin: 0.5em;
  max-width: 320px;
  max-height: 320px;
  float: right;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.reference-view section.story div.mediaplayer div.mediaplayercontents img,
.reference-view section.story div.mediaplayer div.mediaplayercontents video {
  max-width: 320px;
  max-height: 320px;
  padding: 0em;
}
.reference-view section.titleBox {
  display: flex;
  flex-flow: row nowrap;
}
.reference-view section.titleBox div.mediaplayer div.mediaplayercontents img {
  margin: 0em;
}
.reference-view div.titleBoxText {
  margin: auto 0em;
}
.reference-view .anchors p,
.reference-view .anchors ul {
  margin: 0.5em;
}
.reference-view .anchors ul {
  margin-left: 1em;
}
.reference-view p a:hover, .reference-view p a:active,
.reference-view p a span:hover,
.reference-view p a span:active {
  color: var(--front1);
}
@media only screen and (max-width: 640px) {
  .reference-view section.story section.titleBox div.mediaplayer {
    display: none;
  }
  .reference-view section.story div.mediaplayer {
    float: none;
    margin: 0.5em auto;
  }
}

/*******************************************
 * CONSOLIDATED REFERENCE SUBJECTS STYLES *
 *******************************************/
.reference-subjects-view main article section.structure {
  width: calc(100% - 1rem);
  margin: 0.375em auto;
  padding: 0.125em 0.5rem;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25em;
  align-items: stretch;
  justify-items: stretch;
}
.reference-subjects-view main article section.structure div.padding.small {
  width: 100%;
  min-height: 0px;
  margin: 0em;
}
.reference-subjects-view main article section.structure div.padding.small button.contentsButton.small {
  width: 100%;
  margin: 0em;
  height: 46px;
  min-height: 46px;
  max-height: 46px;
}
.reference-subjects-view main article section.structure div.padding.small button.contentsButton.small .contentButtonText {
  margin: auto 0.125em;
  padding: 0em 0.1875em;
  gap: 0.0625em;
}
.reference-subjects-view main article section.structure div.padding.small button.contentsButton.small p {
  font-family: var(--gillsans);
  font-weight: 300;
  letter-spacing: 0.03125em;
  font-size: 0.6875rem;
  line-height: 0.8125rem;
}
.reference-subjects-view main article section.structure div.padding.small button.contentsButton.small p:first-of-type {
  font-family: var(--gillsans);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 0.875rem;
}
.reference-subjects-view main article section.structure div.padding.small button.contentsButton.small p:nth-of-type(2) {
  padding-right: 0em;
  max-height: 1.625em;
}
@media only screen and (max-width: 1200px) {
  .reference-subjects-view main article section.structure {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 860px) {
  .reference-subjects-view main article section.structure {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 560px) {
  .reference-subjects-view main article section.structure {
    grid-template-columns: 1fr;
  }
}

/********************************
 * CONSOLIDATED SEARCH STYLES *
 ********************************/
.search-view main hr {
  margin-left: 0;
  margin-right: 0;
}
.search-view article {
  min-width: 50vw;
}
.search-view article section.story > h1 {
  margin: 0.75rem 1rem 0.875rem 1rem;
}
.search-view article section.story > .search-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0.75rem 1rem 0.875rem 1rem;
}
.search-view article section.story > .search-heading > h1 {
  margin: 0;
  flex: 1 1 auto;
}
.search-view article .search-clear-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 0.875em;
  height: 20px;
  border: none;
  border-radius: 0.5em;
  background: var(--back2);
  background-color: var(--back2);
  box-shadow: none;
  color: var(--front2);
  font-size: 0.75em;
  font-weight: bolder;
  letter-spacing: 0.1875em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.search-view article .search-clear-link:hover, .search-view article .search-clear-link:focus-visible {
  background-color: var(--back3);
  color: var(--front2);
  text-decoration: none;
}
.search-view article .search-clear-link:active {
  background-color: var(--back2);
  color: var(--front2);
  text-decoration: none;
}
.search-view article .search-clear-link:visited {
  color: var(--front2);
}
.search-view article h3 {
  margin: 1rem 1rem 0.1875rem 1rem;
  width: calc(100% - 2rem);
  text-align: left;
  font-size: medium;
}
.search-view article h3 a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}
.search-view article h3 a:hover {
  color: #cccccc;
  text-decoration: none;
}
.search-view article h3 a:active {
  color: #99999a;
  text-decoration: none;
  font-size: inherit;
}
.search-view article h3 a:visited {
  color: #fff;
  text-decoration: none;
}
.search-view article p {
  margin: 0.1875rem 1rem 0.625rem 1rem;
  width: calc(100% - 2rem);
  color: #8c8c8c;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.0625em;
  text-transform: none;
  text-align: left;
}
.search-view article form {
  display: flex;
  flex-flow: row nowrap;
  height: 1.5em;
  max-height: 1.5em;
  margin: 0.375em;
}
.search-view article form input {
  width: 75%;
  max-width: 75%;
  height: 22px;
  background-color: var(--back3);
  border: 1px solid var(--border);
  border-radius: 0.25em;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: 0.5em;
  color: var(--front2);
  text-transform: uppercase;
  letter-spacing: 0.1875em;
  font-weight: bolder;
}
.search-view article form button {
  width: 25%;
  max-width: 25%;
  height: 24px;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0.25em;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin: auto;
}
@media only screen and (max-width: 640px) {
  .search-view article section.story > .search-heading {
    flex-direction: column;
    align-items: stretch;
  }
  .search-view article .search-clear-link {
    align-self: flex-start;
  }
}

/* Toggleable reader number visibility */
html.woh-hide-page-numbers .page_markers,
body.woh-hide-page-numbers .page_markers {
  display: none !important;
}

html.woh-hide-paragraph-numbers span.anchors > a.anchor,
body.woh-hide-paragraph-numbers span.anchors > a.anchor {
  display: none !important;
}

html.woh-no-text-indent body main article section.story span.anchors > p,
body.woh-no-text-indent main article section.story span.anchors > p {
  text-indent: 0 !important;
}

/* OpenDyslexic font mode */
html.woh-opendyslexic body,
html.woh-opendyslexic main p,
html.woh-opendyslexic main article,
html.woh-opendyslexic main header,
html.woh-opendyslexic aside .asideMain,
html.woh-opendyslexic .modal {
  font-family: "OpenDyslexic", Arial, sans-serif;
  letter-spacing: 0.01em;
}
html.woh-opendyslexic h1,
html.woh-opendyslexic h2,
html.woh-opendyslexic h3,
html.woh-opendyslexic h4 {
  font-family: "OpenDyslexic", Arial, sans-serif;
}
html.woh-opendyslexic aside select,
html.woh-opendyslexic aside input,
html.woh-opendyslexic aside button {
  font-family: "OpenDyslexic", Arial, sans-serif;
}

/* Beeline Reader mode — per-line gradients are applied by beelineApply() in palette.js.
   CSS here only handles edge-cases for elements nested inside JS-generated .bl-line spans. */
html.woh-beeline main article section.story {
  /* Each .bl-line is display:block and inherits text-indent from its <p> ancestor.
     Only the first line of a paragraph should be indented; reset all subsequent ones. */
}
html.woh-beeline main article section.story .paragraph span.anchors > p > .bl-line:not(:first-child) {
  text-indent: 0;
}
html.woh-beeline main article section.story {
  /* text-align:justify treats the single line inside each display:block .bl-line
     as a "last line" and left-aligns it. Force justification on all lines except
     the true last line of each paragraph, matching normal justified layout. */
}
html.woh-beeline main article section.story .paragraph span.anchors > p > .bl-line:not(:last-child) {
  -moz-text-align-last: justify;
       text-align-last: justify;
}
html.woh-beeline main article section.story {
  /* Reference modal links are wrapped in <a> elements. Keep them visually
     distinct from body text with bold weight. */
}
html.woh-beeline main article section.story .bl-line a {
  font-weight: bold;
}