:root {
      --PlotWidth: calc(var(--PlotRange-right) - var(--PlotRange-left));
      --PlotHeight: calc(var(--PlotRange-top) - var(--PlotRange-bottom));

      
      font-size: calc(100vw / (2 * var(--PlotRangePadding) + var(--PlotWidth))); /* rem = plot horizontal unit */
      line-height: 1rem;
}

body {
    font-size: 16px;
    line-height: normal;
    --PlotOffsetX: var(--PlotOffsetRight, var(--PlotOffset, 0));
    --PlotOffsetY: var(--PlotOffsetTop, var(--PlotOffset, 0));

    overflow: visible;
    position: absolute;
    margin: 0;
    height: calc(var(--PlotRange-top) * 1rlh);
    width: calc(var(--PlotRange-right) * 1rem);
    top: calc(50vh - var(--PlotOffsetY) * 1rem - var(--PlotHeight) * 1rlh / 2);
    left: calc((var(--PlotRangePadding) + var(--PlotOffsetX) - var(--PlotRange-left)) * 1rem);
}

html {
    overflow: hidden;
    position: relative;
}


/* TeX */

.TeXfont { 
  width: min-content;
  font-family: MJXZERO, MJXTEX-I, MJXTEX, "MathJax_Main";
  z-index: 100;

  /* overwrite bad font metrics */
  line-height: 0;
  border-top: calc(0.68 * 1em) transparent solid; 
}
.TeXfont:not(.selectable) {
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.MathJax_Display {
  margin: 0 !important;
}

/* plot labels */

.tickLabel {
    position: absolute;
    padding: .5em;
}

.tickLabel.x {
    translate: -50% 100%;
}
.tickLabel.y {
    translate: -100% 50%;
}
.tickLabel.x.y {
    translate: -100% 100%;
}

.tickLabel > mjx-container[jax="CHTML"][display="true"] {
    margin: 0;
}

/* plot styles */

.axisLine, #axisArrowhead, .tick {
  stroke: var(--AxisColor, black);
  fill: var(--AxisColor, black);
  stroke-width: 0.03;
}

.frame {
  fill: transparent;
  stroke: var(--AxisColor, black);
  stroke-width: 0.03;
}

.point {
    background: var(--PointColor, black);

    width: var(--PointSize, .5em);
    height: var(--PointSize, .5em);
    border-radius: var(--PointSize, .5em);
    
    position: absolute;
    transform: translate(-50%, 50%);
    z-index: 100;
}

.gridLine {
  stroke: var(--GridColor, black);
  stroke-width: 0.015;
  stroke-dasharray: var(--GridDashing, 0.1 0.15);
  stroke-dashoffset: 0.05;
  z-index: -10;
}

svg.plot { 
    position: absolute;
    left: calc(var(--PlotRange-left) * 1rem);
    bottom: calc(var(--PlotRange-bottom) * 1rlh);
    width: calc(var(--PlotWidth) * 1rem);
    height: calc(var(--PlotHeight) * 1rlh);
    scale: 1 -1;
}

svg.axes { 
    position: absolute;
    left: calc((var(--PlotRange-left) - var(--PlotRangePadding)) * 1rem);
    bottom: calc((var(--PlotRange-bottom) - var(--PlotRangePadding)) * 1rlh);
    width: calc((var(--PlotWidth) + 2* var(--PlotRangePadding)) * 1rem);
    height: calc((var(--PlotHeight) + 2* var(--PlotRangePadding)) * 1rlh);
    scale: 1 -1;
}

svg.framed {
//    outline: var(--frameThickness, 2px) var(--frameColor, black) solid;    
}





.debug body {
    background: lightgreen;
}
html.debug {
    background: lightgray;
}
html.debug svg.axes {
    outline: solid 1px red;
}