.memory-intro{
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden;
  background:#050608;
  color:#fff;
  opacity:1;
  transition:opacity .7s cubic-bezier(.16,1,.3,1);
  touch-action:none;
  cursor:crosshair;
  font-family:Arial,Helvetica,sans-serif;
  contain:strict;
}
.memory-intro.is-finished{opacity:0;pointer-events:none}
.memory-intro canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  image-rendering:auto;
}
.memory-intro__wash{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(199,255,52,.055),transparent 30%),
    linear-gradient(115deg,transparent 15%,rgba(255,255,255,.025) 42%,transparent 63%);
  transition:background .2s linear;
}
.memory-intro__grain{
  position:absolute;
  inset:-10%;
  pointer-events:none;
  z-index:3;
  opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  animation:p0-soft-grain .9s steps(3,end) infinite;
}
@keyframes p0-soft-grain{
  0%{transform:translate3d(-.2%,.1%,0)}
  33%{transform:translate3d(.15%,-.2%,0)}
  66%{transform:translate3d(.1%,.18%,0)}
  100%{transform:translate3d(-.2%,.1%,0)}
}
.memory-intro__frame{
  position:absolute;
  inset:clamp(7px,1.2vw,18px);
  z-index:4;
  border:1px solid rgba(255,255,255,.14);
  pointer-events:none;
}
.memory-intro__frame::before,
.memory-intro__frame::after{
  content:"";
  position:absolute;
  background:currentColor;
  opacity:.13;
}
.memory-intro__frame::before{left:33.333%;top:0;width:1px;height:100%}
.memory-intro__frame::after{left:0;top:66.666%;width:100%;height:1px}
.memory-intro__meta,
.memory-intro__era,
.memory-intro__counter{
  position:absolute;
  z-index:6;
  font:500 clamp(7px,.72vw,11px)/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;
  text-transform:uppercase;
  pointer-events:none;
}
.memory-intro__meta{
  left:clamp(16px,2.5vw,40px);
  top:clamp(14px,2.3vw,34px);
  color:rgba(255,255,255,.58);
}
.memory-intro__era{
  right:clamp(16px,2.5vw,40px);
  top:clamp(14px,2.3vw,34px);
  text-align:right;
  color:#c7ff34;
}
.memory-intro__counter{
  right:clamp(16px,2.5vw,40px);
  bottom:clamp(15px,2.3vw,34px);
  text-align:right;
  color:rgba(255,255,255,.42);
}
.memory-intro__title{
  position:absolute;
  z-index:6;
  left:var(--title-x,7vw);
  top:var(--title-y,50%);
  width:min(88vw,1200px);
  margin:0;
  transform:translate3d(0,-50%,0);
  color:inherit;
  font-weight:800;
  font-size:clamp(48px,14vw,220px);
  line-height:.8;
  letter-spacing:-.085em;
  white-space:pre-line;
  pointer-events:none;
  will-change:transform,opacity,filter;
}
.memory-intro__title.is-changing{
  animation:p0-title-flow 1.15s cubic-bezier(.16,1,.3,1) both;
}
@keyframes p0-title-flow{
  0%{opacity:0;filter:blur(10px);transform:translate3d(-2vw,-42%,0) scale(.965)}
  20%{opacity:.96;filter:blur(0)}
  72%{opacity:.82;transform:translate3d(1vw,-52%,0) scale(1.018)}
  100%{opacity:0;filter:blur(5px);transform:translate3d(3vw,-58%,0) scale(1.035)}
}
.memory-intro__caption{
  position:absolute;
  z-index:6;
  left:var(--caption-x,7vw);
  bottom:var(--caption-y,9vh);
  max-width:min(75vw,760px);
  font:600 clamp(8px,.78vw,12px)/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:inherit;
  opacity:.68;
  pointer-events:none;
}
.memory-intro__marker{
  position:absolute;
  z-index:6;
  left:var(--marker-x,50%);
  top:var(--marker-y,50%);
  width:10px;
  height:10px;
  border:1px solid currentColor;
  border-radius:50%;
  transform:translate(-50%,-50%);
  opacity:.68;
  pointer-events:none;
  transition:left 1.6s cubic-bezier(.16,1,.3,1),top 1.6s cubic-bezier(.16,1,.3,1),color .6s;
}
.memory-intro__marker::after{
  content:"";
  position:absolute;
  inset:-16px;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.16;
  animation:p0-marker-breathe 2.8s ease-in-out infinite;
}
@keyframes p0-marker-breathe{
  0%,100%{transform:scale(.78);opacity:.08}
  50%{transform:scale(1.25);opacity:.26}
}
.memory-intro__skip{
  position:absolute;
  z-index:8;
  left:clamp(16px,2.5vw,40px);
  bottom:clamp(14px,2.3vw,34px);
  appearance:none;
  border:0;
  border-bottom:1px solid currentColor;
  background:transparent;
  color:inherit;
  padding:5px 0;
  font:500 8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;
  cursor:pointer;
  opacity:.48;
}
.memory-intro__skip:hover,
.memory-intro__skip:focus-visible{opacity:1}
.memory-intro__progress{
  position:absolute;
  left:0;
  bottom:0;
  z-index:9;
  width:100%;
  height:2px;
  background:#c7ff34;
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
}
body.intro-running{overflow:hidden!important}
body.intro-running .observation-entry,
body.intro-running .limited-banner,
body.intro-running .player-center-button,
body.intro-running .observation-nav{visibility:hidden!important}
@media(max-width:700px){
  .memory-intro__frame{inset:6px}
  .memory-intro__frame::before{left:50%}
  .memory-intro__title{
    left:var(--title-x,6vw);
    width:92vw;
    font-size:clamp(44px,19vw,108px);
    line-height:.82;
  }
  .memory-intro__caption{
    left:var(--caption-x,6vw);
    max-width:82vw;
    bottom:var(--caption-y,11vh);
  }
  .memory-intro__meta{max-width:54vw}
  .memory-intro__era{max-width:38vw}
  .memory-intro__counter{font-size:7px}
}
@media(prefers-reduced-motion:reduce){
  .memory-intro__grain,
  .memory-intro__marker::after{animation:none}
  .memory-intro__title.is-changing{animation-duration:.28s}
}