:root{--sidebar-width: 260px;}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#container {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #e5e5e5;
}

canvas {
  display: block;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}

/* Cheat sheet */
#help {
  position: fixed;
  top: 60px;
  right: 30px;
  background: #111;
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 6px;
  line-height: 1.5;
  display: none;
  max-width: 260px;
}

#help h3 {
  margin: 0 0 6px 0;
  font-size: 15px;
}

.burger {
	position: fixed;
	top: 12px;
	left: 12px;
	width: 48px;
	height: 48px;
	border-radius: 0;
	background: white;
	border: 2px solid #0078d4; /* Metro blue */
	color: #0078d4;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 1000;

	display: flex;
	align-items: center;
	justify-content: center;

	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.logo {
	position: fixed;
	top: 12px;
	right: 12px;
	width: auto;
	height: 48px;
	z-index: 1000;

	display: flex;
	align-items: center;
	justify-content: center;
}

.custom-side {
	padding-top: 10px; 
	padding-left: 10px;  
	overflow-y: auto;
}