:root{
  --text-color:#111;
  --note-bg:#f6f6f6;
  --note-border:#e5e5e5;

  /* sketch.js will update this so blocks match the canvas width exactly */
  --canvas-w: min(1100px, calc(100vw - 16px));
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #fff;
  color: var(--text-color);
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-optical-sizing: auto;
}

#container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 4px;
  box-sizing:border-box;
}

.text-block{
  background: var(--note-bg);
  border: 1px solid var(--note-border);
  border-radius: 12px;
  padding: 12px;
  margin: 8px 4px 0 4px;
  box-sizing: border-box;
  line-height: 1.4;
  font-size: 10pt;
  width: var(--canvas-w, min(1100px, calc(100vw - 16px)));
}

#p5-wrap{
  width: var(--canvas-w, min(1100px, calc(100vw - 16px)));
  border: 1px solid var(--note-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

#p5-container{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #fff;
}

canvas{
  display:block;
  max-width:100%;
  height:auto;
  touch-action: none;
}