html, body { margin: 0; padding: 0; }
body {
  display: flex;
  gap: 2rem;
  min-height: 100vh;

  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  
  --global-rot: 30deg;
}

main {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--global-rot));
}

aside {
  position: fixed;
  right: 0;
  display: flex;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.5));
}

aside.pattern {
  top: 0;
}

aside.layout {
  bottom: 0;

  height: 12rem;
}

aside.layout > svg {
  width: auto;
  height: 100%;
}

.controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.5rem;
  gap: 0.25rem;
  background: #eeeeee;
}

/* controls */
.control {
  display: flex;
  align-items: center;
  transition: background 0.3s;
  justify-content: space-between;
  gap: 0.5rem;
}

.control label:first-child {
  width: 6rem;
}


.control--preset {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #b9bdc1;
  margin-bottom: 0.25rem;
}

.control--preset select {
  flex: 1;
}


.control--axis label:first-child {
  flex: 1;
}

.control--axis > input {
  width: 5em;
}

.control--axis.dir-disabled label.dir {
  color: #b9bdc1;
}

.control--axis.driven {
  opacity: 0.5;
}

.control--axis.selected {
  background: #eeeeee;
}

/* diagram */
.bg {
  fill: #eeeeee;
}

.arrow {
  --rotation: 0deg;
  --extension: 20px;
  --fill: #303336;

  transform: rotate(var(--rotation)) translateY(var(--extension));
  cursor: pointer;
}

.arrow.driven,
.arrow.negative {
  --fill: #b9bdc1;
}

.arrow:hover {
  --fill: #303336;
}

.arrow.selected {
  --extension: 0;
}

.arrow path {
  fill: var(--fill);
}

.arrow text {
  font-size: 20px;
  line-height: 1;
  font-family: 'Source Sans Pro';
  word-spacing: 0px;
  fill: #ffffff;
  transform: rotate(calc(0deg - var(--rotation) - var(--global-rot))) translateY(6px);
  text-anchor: middle;
  text-align: center;
}

.turn {
  fill: #b9bdc1;
  cursor: pointer;
}
.turn:hover {
  fill: #303336;
}

.center {
  fill: #ffffff;
  stroke: #b9bdc1;
  stroke-width: 10;
  sroke-linecap: round;
  stroke-linejoin: round;
}

.turn, .arrow path {
  transition: fill 0.3s;
}

.inner {
  transform: rotate(var(--global-rot));
}

.hex {
  --rotation: 0deg;
  fill: #eeeeee;
  stroke: #ffffff;
  stroke-width: 1px;
  sroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(var(--rotation)) translateY(-65px) scale(3.779);
}