.mxed {
  --mxed-head: #b1fa75;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(306px, 25vw, 350px);
  min-width: 0;
  overflow: hidden;
  color: #e5e8e4;
  background: #111614;
  border: 1px solid #333a34;
  border-radius: 11px;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}
.mxed__wave, .mxed__curves {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mxed__wave { pointer-events: none; }
.mxed__curves { overflow: hidden; touch-action: none; }
.mxed__curves:focus-visible { outline: 2px solid var(--mxed-head); outline-offset: -2px; }
.mxed__point:focus-visible { outline: none; stroke: #fff; stroke-width: 3; }
.mxed__head {
  position: absolute;
  inset: 0 auto 0 0;
  width: 1.5px;
  background: var(--mxed-head);
  pointer-events: none;
  box-shadow: 0 0 8px #b1fa7545;
}
.mxed__head::before {
  content: "";
  display: block;
  width: 11px;
  height: 13px;
  margin-left: -4.75px;
  background: var(--mxed-head);
  clip-path: polygon(0 0, 100% 0, 100% 59%, 50% 100%, 0 59%);
}
.mxed__tip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  padding: 5px 9px;
  border: 1px solid #465148;
  border-radius: 5px;
  background: #101512f2;
  color: #edf3ea;
  font: 10px/1.4 ui-monospace, Consolas, "Microsoft YaHei UI", monospace;
  box-shadow: 0 3px 12px #0006;
}
.mxed [hidden] { display: none; }
@media (max-width: 600px) {
  .mxed { height: 302px; border-radius: 8px; }
}
@media (prefers-contrast: more) {
  .mxed { border-color: #89938a; }
}