body {
  display: grid;
  margin: 0;
  height: 100svh;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  line-height: 1.5;

  font-family: sans-serif;
}

p {
  margin-inline: 1em;
  margin-block: 0.5lh;
}

main {
  height: 100%;
  display: grid;
  overflow: hidden;
  justify-content: center;
  justify-items: center;
}

svg {
  height: 100%;
  width: 100%;
}

.polygon {
  --color: oklch(0.8 0.4 calc(var(--n) * 7));

  & polygon {
    fill: color-mix(in oklab, var(--color), transparent 50%);
    stroke: color-mix(in oklab, var(--color), black 50%);
    stroke-width: 0.001;
    stroke-dasharray: 0.05 0.01;
  }

  #drawing-polygon & {
  }
  
  #drawing-polygon.invalid & polygon {
    --color: hsla(0,100%,50%,0.5);
    stroke-width: 0.01;
    stroke-dasharray: 0.05 0.01;
    stroke: red;
  }

}

.point {
  r: 0.005px;

  #drawing-polygon & {
    r: 0.01px;
    fill: yellow;
    stroke: black;
    stroke-width: 0.001;
  }
}