html,
body {
  height: 100%;
  overflow: hidden;
}

.exp-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: var(--space-medium);
  padding: var(--space-medium) var(--space-large);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  mix-blend-mode: multiply;
}

.exp-bar a {
  color: inherit;
  text-decoration: none;
}

.hud {
  position: absolute;
  left: var(--space-large);
  top: 4rem;
  z-index: 2;
  max-width: 22rem;
}

.kicker {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-small);
}

h1 {
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-small);
}

.hud > p {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-medium);
}

.zoom-actions {
  display: flex;
  gap: var(--space-medium);
}

.zoom-actions button,
.region {
  cursor: pointer;
}

.zoom-actions button {
  appearance: none;
  background: none;
  border: var(--border-width) solid var(--color-border);
  width: 2rem;
  height: 2rem;
  font-family: var(--font-mono);
  color: inherit;
}

.note {
  margin-top: var(--space-large);
  font-size: var(--size-sm);
  color: var(--color-text-muted);
  max-width: 20rem;
}

.viewport {
  position: absolute;
  inset: 0;
  cursor: grab;
  overflow: hidden;
}

.viewport.is-dragging {
  cursor: grabbing;
}

.plane {
  width: 1400px;
  height: 900px;
  transform-origin: 0 0;
  position: relative;
}

.region {
  position: absolute;
  width: 16rem;
  padding: var(--space-medium) 0;
  border-top: var(--border-width) solid var(--color-text);
}

.region h2 {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: var(--weight-medium);
  margin: 0 0 var(--space-small);
}

.fine {
  margin: 0;
  font-size: var(--size-sm);
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-out);
}

.plane.is-close .fine {
  opacity: 1;
}

.region.is-on {
  color: var(--color-accent-text);
}