#morse {
  --morse-text: var(--mat-sys-on-surface, #302d28);
  --morse-signal: var(--mat-sys-primary, #a1813f);
  --morse-sent: var(--mat-sys-on-surface-variant, #4f4c46);
  --morse-font-family: var(--mat-sys-body-medium-font, ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace);
  display: flex;
  justify-content: center;
  width: 100%;
  color: var(--morse-text);
  font-family: var(--morse-font-family);
  font-variant-numeric: tabular-nums;
}

  #morse .cell {
    flex: 0 1 160px;
    min-width: 0;
    text-align: center;
  }

  #morse .code {
    height: clamp(22px, 2.8vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, .42vw, 8px);
  }

  #morse .signal {
    display: block;
    flex: none;
    height: clamp(2px, .32vw, 6px);
    background: var(--morse-signal);
    opacity: .16;
    transition: opacity 140ms ease, background-color 180ms ease;
  }

    #morse .signal.dot {
      width: clamp(3px, .42vw, 8px);
      border-radius: 50%;
    }

    #morse .signal.dash {
      width: clamp(9px, 1.26vw, 24px);
      border-radius: 999px;
    }

    #morse .signal.active {
      background: var(--morse-signal);
      opacity: 1;
    }

    #morse .signal.sent {
      background: var(--morse-sent);
      opacity: .58;
    }

      #morse .signal.sent.active {
        background: var(--morse-signal);
        opacity: 1;
      }

  #morse .letter {
    margin-top: clamp(16px, 1.7vw, 28px);
    font-size: clamp(34px, 5.8vw, 112px);
    line-height: .92;
    font-weight: 400;
    letter-spacing: .025em;
    color: var(--morse-text);
    opacity: 0;
    transition: opacity 420ms ease;
  }

    #morse .letter.decoded {
      opacity: .82;
    }

@media (prefers-color-scheme: dark) {
  #morse {
    --morse-text: var(--mat-sys-on-surface, #d9d5cc);
    --morse-signal: var(--mat-sys-primary, #b39761);
    --morse-sent: var(--mat-sys-on-surface-variant, #69665f);
  }

    #morse .signal {
      opacity: .09;
    }

      #morse .signal.active {
        opacity: 1;
      }

      #morse .signal.sent {
        opacity: .58;
      }
}