ui-horizontal-loader {
  display: block;
  height: 6px;
  width: 100%;
  position: relative;
  overflow: hidden;
  transition: all 1.0s; }
  ui-horizontal-loader.finished {
    animation: ui-horizontal-loader-finsihed 1s linear; }
  ui-horizontal-loader.loading {
    animation: ui-horizontal-loader-main 2s linear; }
  ui-horizontal-loader:before {
    display: block;
    position: absolute;
    content: "";
    left: -200px;
    width: 200px;
    height: 100%;
    background-color: #6f9797;
    transition: 1.0s all; }
  ui-horizontal-loader.loading:before {
    transition: 1.0s all;
    width: 200px;
    animation: ui-horizontal-loader-loading 2s linear infinite; }

@keyframes ui-horizontal-loader-loading {
  from {
    left: 0;
    width: 0%; }
  40% {
    width: 100%;
    left: 0; }
  50% {
    width: 100%;
    left: 0; }
  70% {
    width: 70%; }
  80% {
    left: 50%; }
  95% {
    left: 100%; }
  to {
    left: 100%; } }

@keyframes ui-horizontal-loader-main {
  from {
    background: transparent; }
  to {
    background: transparent; } }

@keyframes ui-horizontal-loader-finsihed {
  0% {
    background: transparent; }
  10% {
    background: #6f9797; }
  20% {
    background: #aff; }
  40% {
    background: #6f9797; }
  to {
    background: transparent; } }

@font-face {
  font-family: 'default';
  src: url("../fonts/amiko.ttf") format("truetype"); }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

h1,
h2,
h3 {
  color: #d3edec;
  font-weight: normal; }

b {
  color: #d3edec; }

p {
  margin-bottom: 1vh; }

body {
  background: #263435;
  background: #141515;
  background: #27292d;
  color: #a5cac9;
  font-family: "default";
  font-size: calc(10px + 1vh);
  margin: 0; }
  body.transparent {
    background: transparent;
    overflow: hidden; }

a {
  color: inherit; }

.hidden {
  display: none !important; }

.color-positive {
  color: #89bd21; }

.color-patreon {
  color: #f86754; }

.small-text {
  font-size: 0.8em; }

.text-align-justify {
  text-align: justify; }

.text-align-center {
  text-align: center; }

ui-button, .ui-button, ui-account-button {
  user-select: none;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  border: none;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  padding: 1vh 1vw;
  border-radius: 3px;
  font-weight: bold;
  background: #6f9797;
  box-shadow: inset 0 1px #ebfecc5e;
  text-align: center; }
  ui-button.patreon, .patreon.ui-button, ui-account-button.patreon {
    background: #f86754; }
  ui-button.positive, .positive.ui-button, ui-account-button.positive {
    background: #89bd21; }
  ui-button.love, .love.ui-button, ui-account-button.love {
    box-shadow: inset 0 0 0 3px #bf5c71;
    color: #bf5c71;
    background: transparent; }
  ui-button.loved, .loved.ui-button, ui-account-button.loved {
    background: #bf5c71; }
  ui-button.premium, .premium.ui-button, ui-account-button.premium {
    background: linear-gradient(#ffb50d, #f1d6a4); }
  ui-button.disabled, .disabled.ui-button, ui-account-button.disabled {
    background: #888;
    color: #aaa; }
  ui-button.patreon-frame, .patreon-frame.ui-button, ui-account-button.patreon-frame {
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 0 3px #cf634a;
    color: #cf634a;
    background: transparent; }
    ui-button.patreon-frame sub, .patreon-frame.ui-button sub, ui-account-button.patreon-frame sub {
      color: #fa0;
      opacity: 1.0; }
  ui-button sub, .ui-button sub, ui-account-button sub {
    display: block;
    font-size: 0.75em;
    opacity: 0.5; }

.LoginWidget {
  max-width: 580px; }
  .LoginWidget ui-widget-content > * {
    margin-bottom: 1vh; }
  .LoginWidget .Price {
    color: #e2938d;
    text-align: center;
    font-size: 0.8em; }

ui-widget-window {
  background: linear-gradient(to right, #f16754, #6e9796);
  padding: 0.35vh;
  border-radius: 8px;
  z-index: 1;
  box-shadow: -8px 0 16px #f167543d, 8px 0 16px #6e979659; }
  ui-widget-window > h1 {
    color: #fff;
    font-size: 1.5em;
    padding-left: 2px; }

ui-widget-content {
  display: block;
  background: #242a2b;
  padding: 2vh;
  border-radius: inherit; }

.LoginWidgetTierLabel {
  color: #6e9796;
  text-align: center;
  font-size: 1em;
  letter-spacing: 1em;
  font-weight: normal;
  margin: 4vh; }

.LoginWidgetComparisonTable {
  display: flex;
  flex-direction: row;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row;
  gap: 0.5em 1em;
  margin-bottom: 1vh; }
  .LoginWidgetComparisonTable ui-button, .LoginWidgetComparisonTable .ui-button, .LoginWidgetComparisonTable ui-account-button {
    width: 100%; }
  .LoginWidgetComparisonTable h3 {
    text-align: center; }
  .LoginWidgetComparisonTable ui-column {
    border: 2px solid transparent;
    padding: 1vh;
    border-radius: 5px;
    flex-grow: 1;
    flex-basis: 0; }
    .LoginWidgetComparisonTable ui-column img {
      height: 100%;
      width: 100%;
      object-fit: contain;
      image-rendering: pixelated; }
  .LoginWidgetComparisonTable ui-column.selected {
    background: linear-gradient(to bottom, #6f979788, transparent);
    border: 2px solid #6f9797; }
    .LoginWidgetComparisonTable ui-column.selected .Price {
      color: #fff; }

.LoginWidgetSectionHeading {
  color: #ee6754;
  border-radius: 4px;
  margin: 2.5vh 0px;
  text-align: center; }

.LoginWidgetTop {
  background: linear-gradient(to right, #6e9796, #24262b);
  padding-left: 1vw;
  border-radius: 3px;
  text-align: right;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 1vw; }
  .LoginWidgetTop.alt {
    background: linear-gradient(to left, #f16754, #6e9796);
    color: #fff; }
  .LoginWidgetTop.nobg {
    background: transparent; }

ui-widget-overlay {
  background: #00000088;
  width: 100vw;
  height: 100vh; }
  ui-widget-overlay.center {
    display: flex;
    align-items: center;
    justify-content: center; }

.ExportWidget {
  max-width: 640px;
  min-width: 480px; }
  .ExportWidget .error {
    background: #ef6652;
    color: #fff;
    border-radius: 4px;
    padding: 1vh; }
  .ExportWidget ui-widget-content {
    display: flex;
    min-height: 0;
    flex-direction: column; }
    .ExportWidget ui-widget-content > * {
      margin-bottom: 1vh; }
  .ExportWidget .Filters {
    opacity: 0.75; }
  .ExportWidget .Filters,
  .ExportWidget .Output {
    display: grid;
    grid-template-columns: 1fr 1fr; }
  .ExportWidget h2 {
    padding: 0 1vh;
    color: #fff;
    border-radius: 4px; }
  .ExportWidget h2.bg-a {
    background: linear-gradient(to right, #f16754, #f1675422); }
  .ExportWidget h2.bg-b {
    background: linear-gradient(to right, #6e9796, #6e979622); }
  .ExportWidget .ResultLoader {
    grid-column-end: span 2; }

ui-tabs {
  background: #6e979622; }
  ui-tabs ui-tab:hover {
    filter: brightness(125%); }
  ui-tabs.horizontal {
    display: flex;
    flex-direction: row; }
    ui-tabs.horizontal ui-tab {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1vh 1vw;
      transition: 0.25s all;
      flex-grow: 1; }
    ui-tabs.horizontal ui-tab.selected {
      background: linear-gradient(to right, #6e9796, #6e979666);
      color: #fff; }
  ui-tabs.vertical {
    display: flex;
    flex-direction: column; }
    ui-tabs.vertical ui-tab {
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 1vh;
      padding-right: 1vw;
      transition: 0.25s all; }
    ui-tabs.vertical ui-tab.selected {
      background: linear-gradient(to right, #6e9796, #6e979666);
      color: #fff; }

ui-label {
  background: linear-gradient(to right, #242a2c, #2e393b);
  display: block;
  padding: 1vh; }

.Result {
  grid-column-end: span 2; }

ui-checkbox {
  cursor: pointer;
  user-select: none;
  border: 2px solid #6e9796;
  width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  vertical-align: middle;
  border-radius: 2px;
  justify-content: center;
  align-items: center;
  padding: 4px; }
  ui-checkbox:hover {
    background: #6e979644; }
  ui-checkbox.checked:before {
    content: " ";
    width: 100%;
    height: 100%;
    display: block;
    background: #6e9796;
    border-radius: inherit; }

.layout-grid-2 {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1em; }

.no-gap {
  gap: 0; }

.SubmitWidget {
  max-width: 640px; }
  .SubmitWidget .error {
    background: #ef6652;
    color: #fff;
    border-radius: 4px;
    padding: 1vh; }
  .SubmitWidget ui-widget-content {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 1em; }

ui-widget-content .Buttons {
  display: flex;
  justify-content: flex-end;
  padding: 1vh;
  margin: -10px;
  margin-top: 2vh;
  border-top: 2px solid #6d9695;
  padding-top: 2vh; }
  ui-widget-content .Buttons > * {
    flex-grow: 1;
    margin: 0 0.5vw; }

ui-grid {
  display: grid;
  grid-template-columns: auto auto; }
  ui-grid.columns-2 {
    grid-template-columns: auto auto; }
  ui-grid.columns-3 {
    grid-template-columns: auto auto auto; }
  ui-grid.columns-4 {
    grid-template-columns: auto auto auto auto; }
  ui-grid.columns-5 {
    grid-template-columns: auto auto auto auto auto; }

.column,
ui-column {
  display: flex;
  flex-direction: column; }
  .column.center-x,
  ui-column.center-x {
    align-items: center; }
  .column > *,
  ui-column > * {
    margin-bottom: 1vh; }

ui-row {
  display: flex; }
  ui-row.space-between-x {
    justify-content: space-between; }
  ui-row.center-y {
    align-items: center; }
  ui-row.center-x {
    justify-content: center; }
  ui-row.end-x {
    justify-content: flex-end; }
  ui-row.margin-x {
    margin-left: -0.5vw;
    margin-right: -0.5vw; }
  ui-row.margin-x > * {
    margin-left: 0.5vw;
    margin-right: 0.5vw; }

ui-flex-wrap {
  display: flex;
  flex-wrap: wrap;
  outline: 1px solid #f00; }
  ui-flex-wrap.gaps {
    justify-content: left; }
  ui-flex-wrap.gaps > * {
    margin: 1vw; }

ui-gallery-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  border-radius: 1vh;
  background: #414449;
  position: relative;
  padding-bottom: 2em;
  border-bottom: 1px solid #7b715f; }
  ui-gallery-item.premium {
    background: #514e41; }
  ui-gallery-item .cc-coin, ui-gallery-item .community-coin {
    background: #27292d;
    width: 2em;
    height: 2em;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.25em;
    border-radius: 0 0 0 16px; }
  ui-gallery-item .cc {
    height: 1em; }
  ui-gallery-item .thumbnail {
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    width: 100%;
    height: 35vh;
    object-fit: contain;
    padding: 1vw; }
  ui-gallery-item ui-row {
    justify-content: center;
    background: #27292d;
    width: 6em;
    border-radius: 8px 8px 0 0;
    align-self: center;
    position: absolute;
    bottom: -1px; }

ui-gallery-item-likes {
  cursor: pointer;
  color: #818181;
  margin: 8px 8px 0 8px;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(#373b40, #27292d);
  background: #414449;
  border-top: 2px solid #545a63; }
  ui-gallery-item-likes.loved {
    color: #f0d2e2;
    background: #bf5c71;
    border-top: 2px solid #dd9bb3; }

.gallery-columns {
  grid-template-columns: auto auto auto auto auto auto;
  gap: 1vw; }

.Gallery {
  gap: 1vw; }

@media (min-width: 800px) {
  .Gallery {
    grid-template-columns: 1fr 1fr; } }

@media (min-width: 1200px) {
  .Gallery {
    grid-template-columns: 1fr 1fr 1fr; } }

@media (min-width: 1400px) {
  .Gallery {
    grid-template-columns: 1fr 1fr 1fr 1fr; } }

@media (min-width: 1800px) {
  .Gallery {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } }

.site #content {
  padding: 0 2vw;
  margin: auto;
  padding-top: 4em; }

.SpriteDetails {
  max-width: 800px;
  margin: auto;
  padding-top: 2vh; }
  .SpriteDetails > h2 {
    margin: 2vh 0; }
  .SpriteDetails .thumbnail-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#27292d, #444);
    padding: 2em;
    width: 100%;
    border-radius: 2vw; }
  .SpriteDetails .sprite-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1vh; }
    .SpriteDetails .sprite-wrapper .title {
      font-size: 1.25em;
      text-align: justify; }
    .SpriteDetails .sprite-wrapper .author-belt {
      width: 100%;
      margin: 1vh 0;
      align-items: center;
      justify-content: center; }
    .SpriteDetails .sprite-wrapper .buttons {
      margin-top: 1vw;
      margin-bottom: 2vh;
      display: flex;
      width: 100%;
      justify-content: space-between;
      flex-direction: row;
      gap: 1vw; }
      .SpriteDetails .sprite-wrapper .buttons > * {
        flex-grow: 1;
        margin-right: 1vw;
        flex-basis: 0; }
      .SpriteDetails .sprite-wrapper .buttons > *:last-child {
        margin-right: 0; }
    .SpriteDetails .sprite-wrapper img {
      transition: 0.1s all; }
  .SpriteDetails img {
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    background: no-repeat center center; }
  .SpriteDetails .animations {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; }
    .SpriteDetails .animations .animation-wrapper {
      text-align: center; }
      .SpriteDetails .animations .animation-wrapper img {
        width: 100%;
        object-fit: contain; }

ui-comments {
  display: flex;
  flex-direction: column;
  margin: auto; }

ui-comment-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 2vh; }

ui-reply {
  border: 1px #6f9797 dashed;
  height: 3vh;
  display: block; }

ui-comment .date {
  position: absolute;
  transform: translate(-110%, 0);
  opacity: 0.5; }

ui-texteditor {
  display: block; }
  ui-texteditor textarea {
    background: none;
    border: 1px #6f9797 dashed;
    padding: 1vh;
    color: inherit;
    font: inherit;
    min-height: 100px;
    width: 100%; }

#top {
  height: 8vh;
  justify-content: space-between;
  display: flex;
  position: fixed;
  top: 0;
  z-index: 2;
  width: 100%;
  background: #141515;
  left: 0;
  padding: 0.5em; }

.ui-button {
  text-decoration: none; }

ui-button.loading, .loading.ui-button, ui-account-button.loading {
  background: #888;
  border-color: transparent;
  position: relative;
  overflow: hidden;
  transition: all 1.0s;
  box-shadow: none;
  color: #ccc;
  pointer-events: none; }
  ui-button.loading:before, .loading.ui-button:before, ui-account-button.loading:before {
    display: block;
    position: absolute;
    content: "";
    left: -200px;
    width: 100%;
    height: 0.5em;
    bottom: 0;
    background-color: #ccc;
    transition: 1.0s all;
    animation: ui-horizontal-loader-loading 2s linear infinite; }

ui-comment-text > p:first-child {
  display: inline; }

.color-emphasis {
  color: #4DF1DA; }

.color-subtle-attention {
  color: #e2938d; }

.span-2 {
  grid-column-end: span 2; }

.SplashWidget {
  max-width: 800px; }
  .SplashWidget .Logo {
    width: 10vw; }

ui-button.HQ, .HQ.ui-button, ui-account-button.HQ {
  flex-grow: 0 !important;
  padding: 0.5em;
  align-content: center;
  justify-content: center;
  align-items: center;
  display: flex; }

ui-toggle-button {
  user-select: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #fff;
  border: none;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  padding: 1vh 1vw;
  border-radius: 3px;
  font-weight: bold;
  text-align: center;
  box-shadow: inset 0 0 0 3px #6f9797;
  color: #6f9797; }
  ui-toggle-button.checked {
    color: #fff;
    background: #6f9797;
    box-shadow: none; }

.grow-1 {
  flex-grow: 1;
  flex-basis: 0; }

.EditorVideoPreviewWrapper {
  position: relative;
  margin-bottom: 2vh; }
  .EditorVideoPreviewWrapper .EditorVideoPreviewTitle {
    color: #fff;
    font-size: 2em;
    position: absolute;
    bottom: 1vh;
    width: 40vw;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center; }
  .EditorVideoPreviewWrapper .EditorVideoPreview {
    width: 100%;
    opacity: 0.75; }

#home {
  padding: 0;
  display: flex;
  margin-right: 1vh; }

#home img {
  width: 2em;
  height: 2em; }

article > * {
  margin: 2vh 0; }

ui-footer {
  margin-top: 4vh;
  border-radius: 5px 5px 0 0;
  background: #6e979622;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 1vw;
  padding-bottom: 40px;
  font-size: 1.1em;
  font-family: monospace; }

.pledge-info {
  margin: 0 0.5em; }
  .pledge-info.pledge-silver {
    color: #9badb7; }
  .pledge-info.pledge-gold {
    color: #df7126; }
  .pledge-info.pledge-crystal {
    color: #639bff; }

.Tooltip {
  z-index: 100;
  padding: 1vh;
  border-radius: 1vh;
  position: absolute;
  background: #000;
  color: #ac9e8a;
  pointer-events: none; }
  .Tooltip b {
    color: #fff; }
  .Tooltip p {
    margin: 0; }
  .Tooltip hotkey {
    display: inline-flex;
    vertical-align: middle;
    color: #888;
    background: #ddd;
    border-radius: 4px;
    font-weight: bold;
    box-shadow: inset 0 -1px 0 1px #fff;
    border-bottom: 3px #aaa solid;
    font-size: 1em;
    min-width: 1.5em;
    text-align: center;
    height: 1.5em;
    box-shadow: content-box;
    justify-content: center;
    align-items: center; }
  .Tooltip ui-extra {
    font-size: 0.8em;
    display: block; }

ui-footer-legend > * {
  margin: 0.5em; }

ui-footer-legend img {
  margin-right: 0.5em;
  transform: scale(2);
  image-rendering: crisp-edges;
  image-rendering: pixelated; }

ui-messages .error {
  color: #bf5c71; }

.justify-content-right {
  justify-content: flex-end; }

.home-feature-section {
  margin: 20vh 0;
  display: grid;
  align-items: center;
  position: relative;
  grid-template-columns: 1fr 2fr; }
  .home-feature-section .span2 {
    grid-column: 1/span 2; }
  .home-feature-section > * {
    margin: 2vh 2vw;
    flex-grow: 1;
    flex-basis: 0; }
  .home-feature-section .thumbnail {
    flex-grow: 2;
    padding: 2vh 2vw; }
    .home-feature-section .thumbnail sub {
      text-align: center;
      display: block;
      font-size: 0.8em; }
    .home-feature-section .thumbnail video,
    .home-feature-section .thumbnail img {
      width: 100%;
      border-radius: 10px;
      border: 4px solid;
      border-color: inherit; }
  .home-feature-section .continue {
    font-size: 4em;
    position: absolute;
    left: 50%;
    margin: 0;
    bottom: -5vh;
    transform: translate(-50%, 100%);
    color: #444; }

.padding-wrapper {
  max-width: 1280px;
  margin: auto; }

.color-primary {
  color: #6ed2d2; }
  .color-primary h2 {
    color: #8bf5f1; }

.color-secondary {
  color: #ed887b; }
  .color-secondary h2 {
    color: #ffa398; }

.color-caution {
  color: #E05D74; }

.color-tertiary {
  color: #93c451; }
  .color-tertiary h2 {
    color: #b9f569; }

.color-neutral {
  color: #969696; }
  .color-neutral h2 {
    color: #ccc; }

.color-quaternary {
  color: #9c9a55; }

b.experimental {
  background: #000;
  color: #f80;
  padding: 2px; }

ui-button.neutral, .neutral.ui-button, ui-account-button.neutral {
  background: #969696; }

ui-button.primary, .primary.ui-button, ui-account-button.primary {
  background: #6ed2d2; }

ui-button.secondary, .secondary.ui-button, ui-account-button.secondary {
  background: #ed887b; }

ui-button.steam, .steam.ui-button, ui-account-button.steam {
  background: #3d4147; }

ui-button.caution, .caution.ui-button, ui-account-button.caution {
  background: #E05D74; }

ui-button.tertiary, .tertiary.ui-button, ui-account-button.tertiary {
  background: #93c451; }

ui-button.calm, .calm.ui-button, ui-account-button.calm {
  background: #7c5d9d; }

ui-button.quaternary, .quaternary.ui-button, ui-account-button.quaternary {
  background: #9c9a55; }

h2 {
  font-weight: bold; }

ui-progressbar {
  display: block;
  height: 2em;
  position: relative;
  border-radius: 5px;
  border: 2px solid #f96854; }
  ui-progressbar ui-text {
    color: #fff;
    position: absolute;
    z-index: 1;
    left: 1em;
    top: 50%;
    transform: translate(0, -50%); }

ui-progress {
  display: block;
  border-radius: 0px;
  background: #f96854;
  height: 100%; }

.small-info {
  font-size: 0.8em;
  color: #eee; }

ui-button.inline, .inline.ui-button, ui-account-button.inline {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.5em;
  padding: 0;
  width: 2.5em;
  height: 2.5em;
  background: transparent;
  border: 2px dashed #fff;
  vertical-align: top;
  color: #fff;
  box-shadow: none;
  border-radius: 0;
  transition: 0.1s all; }
  ui-button.inline:hover, .inline.ui-button:hover, ui-account-button.inline:hover {
    background: #fff;
    color: #000;
    border-radius: 4px; }

.GallerySearch {
  padding: 4px;
  border-bottom: 1px solid #41454d;
  border-radius: 4px; }
  .GallerySearch input {
    text-align: center;
    background: #41454d;
    color: #fff;
    border-radius: inherit;
    border: none;
    border-top: 2px solid #111; }

.ui-button, ui-button, .ui-button, ui-account-button {
  display: inline-flex;
  cursor: pointer;
  align-content: center;
  align-items: center;
  justify-content: center; }
  .ui-button.frame,
  ui-button.frame,
  .frame.ui-button,
  ui-account-button.frame {
    background: none;
    border: 2px solid; }
  .ui-button.frame.premium,
  ui-button.frame.premium,
  .frame.premium.ui-button,
  ui-account-button.frame.premium {
    color: #fa0;
    border-color: #fa0; }
  .ui-button.frame.positive,
  ui-button.frame.positive,
  .frame.positive.ui-button,
  ui-account-button.frame.positive {
    color: #af0;
    border-color: #af0; }

.SpriteTags a.tag:before {
  font-size: 0.75em;
  content: "#";
  opacity: 0.5; }

.Upcoming .UpcomingGrid {
  display: grid;
  grid-template-columns: 1fr 1fr; }
  .Upcoming .UpcomingGrid > section {
    padding: 64px; }
    .Upcoming .UpcomingGrid > section video {
      width: 100%;
      height: 30vw;
      border-radius: 10px;
      border: 4px solid;
      border-color: inherit;
      background: #001; }
    .Upcoming .UpcomingGrid > section .description {
      color: #a5cac9; }
  .Upcoming .UpcomingGrid .final {
    grid-column: 1 / span 2;
    justify-self: center;
    max-width: 800px; }

.Upcoming .UpcomingGridAnimation {
  display: grid;
  gap: 16px;
  grid-template-columns: auto 1fr; }

@media (max-width: 1279px) {
  .Upcoming .UpcomingGrid {
    display: grid;
    grid-template-columns: 1fr; }
    .Upcoming .UpcomingGrid > section {
      padding: 64px; }
      .Upcoming .UpcomingGrid > section video {
        width: 100%;
        height: 50vw; }
    .Upcoming .UpcomingGrid .final {
      grid-column: 1 / span 1; } }

.article {
  font-size: 0.9em; }
  .article p {
    margin-bottom: 1vh; }
  .article h2 {
    margin-top: 2em;
    margin-bottom: 1vh;
    color: inherit; }
  .article h3 {
    margin-bottom: 1em;
    margin-top: 1em; }

kbd {
  background-color: #323232;
  border-radius: 3px;
  border: 1px solid #000000;
  box-shadow: 0px -2px 0 0 #555 inset;
  color: #d2d2d2;
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  padding: 4px 6px;
  white-space: nowrap;
  font-size: 0.9em; }

.ManualOutline {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  padding-top: 2em;
  padding-left: 16px;
  width: calc((100vw - 1280px - 64px) * 0.5);
  border-right: 1px solid #a5cac9;
  top: 8vh;
  height: 92vh;
  overflow-y: scroll;
  font-size: 0.9em;
  background: #27292d; }
  .ManualOutline a {
    text-decoration: none;
    cursor: pointer; }
    .ManualOutline a:hover {
      color: #fff; }

pre {
  line-height: 1.5em; }

.AreWeThere {
  display: grid;
  grid-template-columns: auto 1fr; }
  .AreWeThere div:nth-child(2n - 1) {
    margin-right: 32px; }
  .AreWeThere div {
    margin-bottom: 1em;
    padding: 8px;
    border-radius: 8px; }
  .AreWeThere .yes {
    background: #360;
    color: #ef8; }
  .AreWeThere .next {
    background: #860;
    color: #eb8; }
  .AreWeThere .no {
    background: #333;
    color: #bbb; }

.FAQ ui-question {
  display: block;
  color: #ccc;
  margin-bottom: 1em; }

.FAQ ui-answer {
  display: block;
  color: #fff;
  margin-bottom: 2em;
  padding-left: 2em; }