body.maker { display: flex; flex-direction: column; min-height: 100vh; }
#mbar {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  border-bottom: 1px solid var(--line); background: #000;
}
#mmark { height: 54px; width: auto; }
#mbar h1 {
  margin: 0; font: 900 italic 22px/1 var(--font);
  text-transform: uppercase; letter-spacing: -.01em; color: #fff;
}
#mbar .grow { flex: 1 1 auto; }
#mbar .room { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#mbar .room label {
  display: flex; align-items: center; gap: 6px;
  font: 700 9px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
#mbar .room input {
  width: 62px; padding: 7px 8px;
  border: 1px solid var(--line2); border-radius: 8px;
  background: #101014; color: #fff; font: 700 13px/1 var(--font);
}
#mbar .room button, .mbtn, #mtools button {
  padding: 9px 14px; border: 1px solid var(--line2); border-radius: 999px;
  background: #101014; color: var(--dim); cursor: pointer;
  font: 800 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
}
#mbar .room button:hover, .mbtn:hover, #mtools button:hover { border-color: var(--red); color: #fff; }
#mtools button.on { border-color: var(--red); color: #fff; background: #16161c; }
#mtools button.go { background: linear-gradient(180deg, var(--red-hi), var(--red-lo)); color: #fff; border-color: var(--red); }
#mwrap { flex: 1 1 auto; position: relative; min-height: 0; }
#mcv { display: block; touch-action: none; }
#mhint {
  position: absolute; left: 0; right: 0; bottom: 8px; margin: 0;
  text-align: center; color: var(--dim); font-size: 12px; pointer-events: none;
}
#mtools {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--line); background: #08080a;
}
#mtools .tool { display: flex; align-items: center; gap: 8px; }
#mtools .tool > span {
  font: 700 9px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--pink);
}
#mstat { flex: 1 1 100%; color: var(--dim); font-size: 12px; }

/* The width brush sits above the board: you pick it, then draw with it. */
#mbrush {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--line); background: #08080a;
}
#mbrush > span {
  font: 700 9px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--pink);
}
#mbrush button {
  padding: 9px 16px; border: 1px solid var(--line2); border-radius: 999px;
  background: #101014; color: var(--dim); cursor: pointer;
  font: 800 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
}
#mbrush button:hover { border-color: var(--red); color: #fff; }
#mbrush button.on { color: #fff; background: #16161c; }
#mbrush button[data-w="2"].on { border-color: #5ac8fa; }
#mbrush button[data-w="3"].on { border-color: #ffd400; }
#mbrush button[data-w="4"].on { border-color: #ff5e6e; }
#mbrush #mstart { margin-left: 12px; }
#mbrush #mstart.on { border-color: #fff; color: #fff; }

#mbrush #msnap {
  margin-left: auto;
  background: linear-gradient(180deg, var(--red-hi), var(--red-lo));
  color: #fff; border-color: var(--red);
}
#mbrush #msnap:hover { filter: brightness(1.12); }