/* ===== RESET & GLOBALS ===== */
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1a1a1a;
}

/* ===== CANVAS (VIEWPORT) ===== */
#canvas {
  width: 100%;
  height: 100%;
  position: relative;

  /* Grid */
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 25px 25px;
}

#canvasContainer {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

/* ===== UTILITY ===== */
.hidden {
  display: none !important;
}

/* ===== GHOST PREVIEW ===== */
.ghost {
  transition: left 0.02s linear, top 0.02s linear;
}