html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 10%, #ffffff 0%, #f7f7fb 42%, #eeeef5 100%),
    linear-gradient(#e7e7ef 1px, transparent 1px),
    linear-gradient(90deg, #e7e7ef 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  font-family: Arial, Helvetica, sans-serif;
}

main {
  width: 100%;
  height: 100vh;
  position: relative;
}

.controls {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 10;
  padding: 10px 12px;
  border: 1px solid rgba(98, 82, 216, 0.25);
  border-radius: 10px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
  color: #403a75;
  font-size: 14px;
}

#staircase {
  width: 100%;
  height: 100vh;
}

svg {
  width: 100%;
  height: 100vh;
  display: block;
}

.tread { fill: url(#treadGrad); }
.riser { fill: url(#riserGrad); }

.edge {
  fill: none;
  stroke: #6252d8;
  stroke-width: 1.45;
  vector-effect: non-scaling-stroke;
}

.soft-edge {
  fill: none;
  stroke: rgba(98,82,216,.42);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ambient {
  fill: url(#shadowGrad);
  opacity: .22;
}