:root {
  color-scheme: dark;
  --focus-color: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  background: #021740;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
}

a {
  -webkit-tap-highlight-color: transparent;
}

.scroll-track {
  height: 500vh;
}

.menu-stage {
  height: 100vh;
  height: 100dvh;
  inset: 0;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: fixed;
  width: 100vw;
}

.menu-panel {
  backface-visibility: hidden;
  height: 100%;
  isolation: isolate;
  left: var(--panel-left);
  overflow: hidden;
  padding-inline: 2rem;
  perspective: 1000px;
  position: absolute;
  top: 0;
  transform: translate3d(0, 125vh, 0) scaleY(1);
  transform-origin: left top;
  user-select: none;
  visibility: hidden;
  width: var(--panel-width);
  will-change: transform;
  -webkit-user-drag: none;
}

.menu-stage.is-ready .menu-panel {
  visibility: visible;
}

.panel-link {
  color: inherit;
  cursor: pointer;
  display: block;
  height: 100%;
  outline: none;
  width: 100%;
}

.panel-glyph {
  display: block;
  height: 100%;
  object-fit: fill;
  opacity: 0.95;
  pointer-events: none;
  shape-rendering: optimizeSpeed;
  transform: translateZ(0);
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform 420ms ease-in-out;
  width: 100%;
}

@media (hover: hover) {
  .panel-link:hover .panel-glyph {
    transform: translateZ(0) scaleY(1.2);
  }
}

.panel-link:focus-visible {
  box-shadow: inset 0 0 0 5px var(--focus-color);
}

@media (max-width: 767px) {
  .menu-panel {
    padding-inline: 0.5rem;
  }
}

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