#fairy-boot {
  --boot-duration: 2700ms;
  --boot-blue: #9dddff;
  --boot-line: #4c79b5;
  position: fixed;
  z-index: 50;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: clamp(16px, 6vmin, 64px);
  background: #030509;
  color: #c5e7ff;
  box-shadow: none;
  opacity: 1;
  transition: opacity 220ms ease;
}
#fairy-boot::backdrop { background: transparent; }
#fairy-boot:not([open]) { display: none; }
#fairy-boot.is-leaving { opacity: 0; }
.fairy-boot-screen {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1440px;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  border: 1px solid #182235;
  background: #050c12;
  box-shadow: inset 0 0 70px #000b;
}
.fairy-boot-screen::before, .fairy-boot-screen::after {
  position: absolute;
  z-index: 4;
  width: 15px;
  height: 15px;
  content: "";
  pointer-events: none;
}
.fairy-boot-screen::before { top: 0; left: 0; border-top: 1px solid var(--boot-line); border-left: 1px solid var(--boot-line); }
.fairy-boot-screen::after { bottom: 0; right: 0; border-bottom: 1px solid var(--boot-line); border-right: 1px solid var(--boot-line); }
.fairy-boot-grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(transparent 0 3px, #030911 4px, transparent 5px),
    linear-gradient(0deg, #779fd011 1px, transparent 1px) center / 26px 26px,
    linear-gradient(90deg, #779fd011 1px, transparent 1px) center / 26px 26px,
    radial-gradient(ellipse at 50% 46%, #19404f61, transparent 68%);
}
.fairy-boot-grid::before, .fairy-boot-grid::after {
  position: absolute;
  width: min(32%, 280px);
  height: 16%;
  content: "";
  border: 1px solid #8cb8cb3d;
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, #8cb8cb12 4px 5px) 10px 15px / 54% 45% no-repeat,
    linear-gradient(#8cb8cb2b 1px, #8cb8cb2b 7px, transparent 7px);
}
.fairy-boot-grid::before { top: 25%; left: 14%; }
.fairy-boot-grid::after { right: 13%; bottom: 27%; opacity: .56; }
.fairy-boot-scan {
  position: absolute;
  z-index: 2;
  top: 46%;
  left: 50%;
  width: min(62vw, 650px);
  height: 1px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scaleX(.02);
  background: linear-gradient(90deg, transparent, #779cda 20%, #ebfaff 50%, #779cda 80%, transparent);
  box-shadow: 0 0 11px 1px #83bdff88;
}
.fairy-boot-label, .fairy-boot-caption, .fairy-boot-skip, .fairy-boot-audio {
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .13em;
}
.fairy-boot-label {
  position: absolute;
  z-index: 4;
  top: clamp(11px, 2.5vmin, 26px);
  left: clamp(11px, 2.5vmin, 26px);
  opacity: 0;
  margin: 0;
  color: #9fbfdd;
}
.fairy-boot-label::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  background: #9dddff;
  box-shadow: 0 0 7px #8dccff94;
  content: "";
}
.fairy-boot-core {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(74vw, 62dvh, 560px);
  max-width: 100%;
  height: auto;
  opacity: 0;
  overflow: visible;
  transform: translate(-50%, -50%) scale(.6, .02);
  pointer-events: none;
  filter: hue-rotate(335deg) saturate(1.25) drop-shadow(0 0 17px #3b77ff3b);
}
.fairy-boot-wordmark {
  position: absolute;
  z-index: 2;
  top: calc(46% + min(25vw, 22dvh, 202px));
  left: 50%;
  margin: 0;
  opacity: 0;
  transform: translate(-50%, 8px);
  color: #d2efff;
  text-shadow: -2px 0 #588bce8c, 2px 0 #517dba66, 0 0 16px #599aff65;
  font: 900 clamp(23px, 5vmin, 52px)/1 var(--sans, sans-serif);
  letter-spacing: .25em;
  padding-left: .25em;
  white-space: nowrap;
}
.fairy-boot-caption {
  position: absolute;
  z-index: 2;
  top: calc(46% + min(25vw, 22dvh, 202px) + clamp(31px, 6vmin, 65px));
  left: 50%;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0;
  opacity: 0;
  transform: translateX(-50%);
  color: #92b3d7;
  text-align: center;
}
.fairy-boot-controls {
  position: absolute;
  z-index: 6;
  right: max(clamp(12px, 3.4vmin, 32px), env(safe-area-inset-right, 0px));
  bottom: max(clamp(12px, 3.4vmin, 32px), env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: calc(100% - 24px);
}
.fairy-boot-skip, .fairy-boot-audio {
  min-width: 72px;
  min-height: 38px;
  padding: 5px 10px;
  color: #bfdcf8;
  background: #101b2be8;
  border: 1px solid #4b6284;
  border-radius: 2px;
}
.fairy-boot-skip:hover, .fairy-boot-audio:hover { color: #eff9ff; background: #213651; border-color: #89b1df; }
.fairy-boot-skip:focus-visible, .fairy-boot-audio:focus-visible { outline: 2px solid #abddff; outline-offset: 4px; }
.fairy-boot-video {
  position: absolute;
  z-index: 5;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #000;
  pointer-events: none;
}
#fairy-boot.has-video { padding: 0; background: #000; }
#fairy-boot.has-video .fairy-boot-video { opacity: 1; }
#fairy-boot.has-video .fairy-boot-screen { visibility: hidden; }
.fairy-boot-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 31px;
  padding: 3px 8px;
  color: #cdbded;
  background: #282137;
  border: 1px solid #514367;
  border-radius: 2px;
  font-size: 12px;
  white-space: nowrap;
}
.fairy-boot-replay:hover { color: #f3e9ff; background: #34284b; border-color: #9d87c9; }
.fairy-boot-replay .icon { width: 14px; height: 14px; }
#fairy-boot.is-playing .fairy-boot-grid { animation: fairy-boot-grid var(--boot-duration) both; }
#fairy-boot.is-playing .fairy-boot-scan { animation: fairy-boot-scan var(--boot-duration) both; }
#fairy-boot.is-playing .fairy-boot-label { animation: fairy-boot-label var(--boot-duration) both; }
#fairy-boot.is-playing .fairy-boot-core { animation: fairy-boot-core var(--boot-duration) both; }
#fairy-boot.is-playing .fairy-boot-wordmark { animation: fairy-boot-wordmark var(--boot-duration) both; }
#fairy-boot.is-playing .fairy-boot-caption { animation: fairy-boot-caption var(--boot-duration) both; }
@keyframes fairy-boot-grid {
  0%, 12% { opacity: 0; }
  26% { opacity: .32; }
  46%, 100% { opacity: .83; }
}
@keyframes fairy-boot-scan {
  0%, 8% { opacity: 0; transform: translateX(-50%) scaleX(.02); }
  11% { opacity: 1; transform: translateX(-50%) scaleX(.08); }
  21% { opacity: .95; transform: translateX(-50%) scaleX(1); }
  35% { opacity: 0; transform: translateX(-50%) scaleX(1.2); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(1.2); }
}
@keyframes fairy-boot-label {
  0%, 19% { opacity: 0; }
  31%, 100% { opacity: .9; }
}
@keyframes fairy-boot-core {
  0%, 16% { opacity: 0; transform: translate(-50%, -50%) scale(.6, .02); }
  23% { opacity: .62; transform: translate(-50%, -50%) scale(.89, .09); }
  31% { opacity: .87; transform: translate(-50%, -50%) scale(.93, .68) rotate(-9deg); }
  47% { opacity: 1; transform: translate(-50%, -50%) scale(1.04) rotate(5deg); }
  64%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fairy-boot-wordmark {
  0%, 52% { opacity: 0; transform: translate(-50%, 8px) scaleX(.98); }
  57% { opacity: .76; transform: translate(-50%, 2px) scaleX(1.02); }
  65%, 100% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes fairy-boot-caption {
  0%, 65% { opacity: 0; }
  76%, 100% { opacity: 1; }
}
@media (max-width: 480px) {
  .fairy-boot-label, .fairy-boot-caption, .fairy-boot-skip, .fairy-boot-audio { font-size: 10px; }
  .fairy-boot-skip, .fairy-boot-audio { min-width: 61px; }
  .top-private:has(.fairy-boot-replay) { gap: 5px; font-size: 11px; }
  .top-private .fairy-boot-replay { min-height: 28px; padding-inline: 6px; font-size: 11px; }
}
@media (max-height: 420px) {
  .fairy-boot-wordmark { top: calc(46% + 21dvh); }
  .fairy-boot-caption { top: calc(46% + 21dvh + 30px); }
}
@media (prefers-reduced-motion: reduce) {
  #fairy-boot { transition: none; }
  #fairy-boot.is-playing .fairy-boot-grid,
  #fairy-boot.is-playing .fairy-boot-label,
  #fairy-boot.is-playing .fairy-boot-core,
  #fairy-boot.is-playing .fairy-boot-wordmark,
  #fairy-boot.is-playing .fairy-boot-caption {
    opacity: 1;
    animation: none;
  }
  #fairy-boot.is-playing .fairy-boot-core { transform: translate(-50%, -50%); }
  #fairy-boot.is-playing .fairy-boot-wordmark { transform: translate(-50%, 0); }
  #fairy-boot.is-playing .fairy-boot-scan { display: none; }
}