.imageNode {
  /* Responsive scaling */
  max-width: 100%;          /* never overflow its parent */
  height: auto !important;  /* preserve aspect ratio */

  /* Horizontal centring */
  display: block;           /* takes the element out of the inline flow */
  margin: 0 auto;           /* left & right margins set to “auto” centre it */
}

.CodeBlock{
  background:#F5F5F5;
  margin:10px 0 10px 0;
  padding:0;
  display:block;
  overflow:auto;
  width:100%;
  min-height:28px;
  box-sizing:border-box;
  position:relative;       /* anchor for absolute button */
  font-family:Consolas,Menlo,monospace;
}

.eoOutputWrapper{
    width: 100vw;                 /* full viewport width … */
    max-width: calc(100vw - 2*38px - 15px) /* 2*38px (padding) + 15px (add hoc to avoid clipping scrollbars) */ 
}

.CodeBlock .copybtn{
  position:absolute;
  top:1px;
  right:2px;
  padding:4px;
  border:0;
  background:none;
  cursor:pointer;
  line-height:0;
  z-index:3;
  color:#000;                  /* icon stroke follows text color */
}

.CodeBlock .copybtn svg{
  width:1.25rem;
  height:1.25rem;
  stroke-width:1.5;
  stroke:currentColor;
  fill:none;
  pointer-events:none;
}

.CodeBlock .copybtn:hover       { color:#444; }
.CodeBlock .copybtn:active svg  { color:#222; }
.CodeBlock .copybtn.copied svg  { color:#4caf50; }

.copybtn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 100%;                 /* park it to the left edge */
  top: 50%;
  transform: translateY(-50%) translateX(-8px);  /* 8-px gap */
  white-space: nowrap;
  background: #333;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;        /* hover stays on the button */
  transition: opacity 0.15s ease;
  z-index: 4;
}

/* little arrow */
.copybtn[data-tooltip]::before {
  content: '';
  position: absolute;
  right: calc(100% - 2px);     /* overlap by 2 px so it looks attached */
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #333;     /* arrow colour matches bubble */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 4;
}

/* show on hover / focus */
.copybtn:hover::after,
.copybtn:hover::before,
.copybtn:focus-visible::after,
.copybtn:focus-visible::before {
  opacity: 1;
}

.copybtn.copied[data-tooltip]::after  { content:"Copied!"; }
.copybtn.copied[data-tooltip]::before { /* arrow shape stays */ }
.copybtn .icon-check    { display:none; }
.copybtn.copied .icon-copy  { display:none; }
.copybtn.copied .icon-check { display:block;  stroke:#4caf50; }
.copybtn.copied svg         { stroke:#4caf50; }   /* green tint */