viewer.css

html, body, canvas, svg {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;

  font-family: Arial, Helvetica, sans-serif;

  /* make clicking work without dragging capturing events */
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */

  --small-gap: 0.5em;
  --medium-gap: 1em;
  --large-gap: 2em;
}

#canvas-hidden {
  display: none;
  image-rendering: crisp-edges;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
}

#help-menu {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

  background: rgba(255,255,255,0.9);
  
  .toggle-visible {
    display: inline-block;
    margin: var(--medium-gap) var(--medium-gap);
    font-weight: bold;
  }

  &:has(.hidden) {
    background: unset;
    width: 0;
    height: 0;
  }
  &:has(.hidden) > div {
    visibility: hidden;
  }
  & > div {
    visibility: visible;
    
    width: 40em;
    margin: auto;
  }
}

#inputs-container {
  position: absolute;
  z-index: 1;
  bottom: 0px;
  left: var(--medium-gap);

  border-radius: var(--large-gap) var(--large-gap) 0 0;
  background-color: #add8e699;
  padding: var(--small-gap);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--small-gap);

  transform: translate(0);
  transition: transform 1s;

  &:has(.hidden) {
    transform: translate(0, 100%);
  }

  .toggle-visible {
    --height: 18px;
    --width: 50px;
    height: var(--height);
    width: var(--width);

    position: absolute;
    top: calc(-1 * var(--height));
    left: calc((100% - var(--width)) / 2);

    border-radius: var(--small-gap) var(--small-gap) 0 0;
    background-color: #2b7bd7;
  }
  
}

.slider {
  display: flex;           /* Make parent a flex-container */
  justify-content: center; /* Centers child horizontally */
  align-items: center;     /* Centers child vertically */
  gap: var(--small-gap);
}

.slider-label {
  display: inline-block;
  vertical-align: middle;
  text-align: right;
  width: 100px;
}

.hline-bottom {
  padding-bottom: 5px;
  border-bottom: 1px solid #234fb8; /* whichever color you prefer */
}