.container {
  flex: 1 0 auto;
  min-width: 16rem;
}

.wrapper {
  @media screen and (--bp-margin) {
    position: absolute;
    top: anchor(top);
  }
}

.note {
  @mixin text-xs;
  @mixin my var(--spacing-cozy);

  position: relative;
  padding-left: var(--size-12);
  font-family: var(--font-mono);

  @media screen and (--bp-margin) {
    min-width: 16rem;
    margin-right: var(--spacing-generous);
    padding: var(--spacing-cozy) var(--spacing-cozy) var(--spacing-cozy) var(--size-12) ;
    border: var(--size-1) solid var(--color-surface-inverse);

    background: var(--color-surface-elevated-1);
    box-shadow: 2px 2px 0 var(--color-palette-woodsmoke), 4px 4px 0 var(--color-palette-charcoal-gray);
  }
}

.marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--size-8);

  font-size: var(--typo-size-3xl);
  font-weight: var(--typo-weight-black);
  color: var(--color-text-inverse);

  background-color: var(--color-surface-inverse);
}

.content {
  text-align: left;
}

.ref {
  @mixin ml var(--spacing-snug);
  @mixin anim-txt-characterglitch;

  font-weight: var(--typo-weight-black);
  color: var(--color-text-quarternary);

  &:hover {
    color: var(--color-primary);
  }
}