:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #071912;
  font-family: "SFMono-Regular", "Roboto Mono", Menlo, Monaco, Consolas, monospace;
  color: #d6ffe7;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1.4rem 2rem;
  background: transparent;
  letter-spacing: 0.15em;
  z-index: 2;
}

.nav a {
  color: rgba(146, 255, 198, 0.85);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 180ms ease, text-shadow 180ms ease;
}

.nav a:hover,
.nav a:focus-visible {
  color: #defee5;
  text-shadow: 0 0 14px rgba(133, 255, 205, 0.75);
}

.nav-inner {
  width: clamp(260px, 60vw, 880px);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  column-gap: 1.6rem;
  text-transform: lowercase;
}

.nav-inner a {
  text-align: center;
}

.divider {
  text-align: center;
  color: rgba(76, 150, 112, 0.65);
  font-size: 0.85rem;
  letter-spacing: 0.25em;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#oscilloscope {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
}