:root {
  color-scheme: dark;
  --scene-x: 0px;
  --scene-y: 0px;
  --edge: #06100c;
  background-color: var(--edge);
  background-image:
    repeating-linear-gradient(90deg, rgba(194, 218, 202, 0.012) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(218, 233, 223, 0.01) 0 1px, transparent 1px 72px);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--edge);
  background-image:
    repeating-linear-gradient(90deg, rgba(194, 218, 202, 0.012) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(218, 233, 223, 0.01) 0 1px, transparent 1px 72px);
}

body {
  min-height: 100dvh;
  touch-action: manipulation;
}

main {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: transparent;
  outline: none;
  isolation: isolate;
}

.transition-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(1.018);
  transform-origin: center;
  transition: transform 900ms cubic-bezier(.2, .72, .18, 1);
}

body.is-returned main {
  cursor: pointer;
}

body.is-leaving .transition-field {
  transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(1.022);
}

@media (hover: none), (pointer: coarse) {
  .transition-field {
    transform: scale(1.012);
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .transition-field {
    transform: none;
    transition: none;
  }
}