body.world-surface {
  --world-accent: 107,245,255;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: #050808;
}

body.world-surface[data-world-index="0"] { --world-accent: 120,184,255; --world-index: 0; }
body.world-surface[data-world-index="1"] { --world-accent: 195,148,255; --world-index: 1; }
body.world-surface[data-world-index="2"] { --world-accent: 115,226,182; --world-index: 2; }
body.world-surface[data-world-index="3"] { --world-accent: 107,245,255; --world-index: 3; }
body.world-surface[data-world-index="4"] { --world-accent: 150,170,185; --world-index: 4; }

.world-app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(18,28,29,.20) 0%, rgba(10,16,17,.08) 36%, transparent 68%),
    linear-gradient(180deg,#070b0c 0%,#050808 100%);
  isolation: isolate;
}

.world-header {
  position: absolute;
  z-index: 80;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  height: 82px;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  padding: 0 clamp(28px,4vw,64px);
  pointer-events: none;
}

.world-header > * {
  pointer-events: auto;
}

.world-brand {
  justify-self: start;
  color: #f4f8f8;
  font-size: .94rem;
}

.world-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  color: rgba(235,244,245,.72);
  font-size: .78rem;
}

.world-nav a {
  position: relative;
  padding: 31px 0 27px;
  transition: color .25s ease;
}

.world-nav a::after {
  position: absolute;
  right: 0;
  bottom: 19px;
  left: 0;
  height: 1px;
  background: rgb(var(--world-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s ease,background .58s ease;
  content: "";
}

.world-nav a:hover,
.world-nav a:focus-visible,
.world-nav a[aria-current="page"] {
  color: #fff;
}

.world-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.world-menu {
  display: none;
  justify-self: end;
  width: 38px;
  gap: 5px;
  border: 0;
  padding: 8px 3px;
  background: transparent;
  cursor: pointer;
}

.world-menu span {
  display: block;
  height: 2px;
  border-radius: 99px;
  background: rgba(238,247,247,.78);
}

.world-menu span:nth-child(2) {
  width: 72%;
  margin-left: auto;
}

.world-menu span:nth-child(3) {
  width: 86%;
  margin-left: auto;
}

.world-viewport {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
}

.world-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 500%;
  height: 100%;
  transform: translate3d(0,0,0);
  transition: transform .68s cubic-bezier(.22,.74,.18,1);
  will-change: transform;
  backface-visibility: hidden;
  isolation: isolate;
  background: transparent;
}


body[data-world-index="0"] .world-track { transform: translate3d(0,0,0); }
body[data-world-index="1"] .world-track { transform: translate3d(-20%,0,0); }
body[data-world-index="2"] .world-track { transform: translate3d(-40%,0,0); }
body[data-world-index="3"] .world-track { transform: translate3d(-60%,0,0); }
body[data-world-index="4"] .world-track { transform: translate3d(-80%,0,0); }

.world-panel {
  position: relative;
  z-index: 2;
  flex: 0 0 20%;
  width: 20%;
  height: 100svh;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  backface-visibility: hidden;
  contain: layout paint;
  background: transparent;
}

.world-panel:not(.is-active) {
  pointer-events: none;
}

.world-panel.is-active {
  pointer-events: auto;
}

.world-blank {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: transparent;
}

.world-blank::before,
.world-blank::after {
  display: none;
}

@media (max-width: 1080px) {
.world-header {
    height: 72px;
    grid-template-columns: 1fr auto;
    padding: 0 22px;
  }

  .world-nav {
    position: absolute;
    z-index: 90;
    top: 64px;
    right: 18px;
    display: none;
    min-width: 190px;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    border: 1px solid rgba(151,220,224,.12);
    border-radius: 14px;
    padding: 7px;
    background: rgba(6,12,14,.97);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0,0,0,.34);
  }

  .world-nav[data-open="true"] {
    display: flex;
  }

  .world-nav a {
    padding: 11px 12px;
  }

  .world-nav a::after {
    display: none;
  }

  .world-menu {
    display: grid;
  }
}

@media (max-width: 680px) {
.world-header {
    padding:
      env(safe-area-inset-top,0)
      max(16px,env(safe-area-inset-right,0))
      0
      max(16px,env(safe-area-inset-left,0));
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-track {
    transition-duration: .18s !important;
  }
}