body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
}

header, footer {
  background: #f8f8f8;
  padding: 1rem;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

main {
  padding: 2rem;
  text-align: center;
}

canvas {
  border: 1px solid #ccc;
  margin-top: 1rem;
}

#toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
#toolbar input, #toolbar select, #toolbar button { padding: 8px; }
#text-overlay-container { position: absolute; top: 0; left: 0; pointer-events: none; }
.text-overlay { position: absolute; background: rgba(255,255,0,0.3); pointer-events: auto; cursor: pointer; }
#ad-banner { margin: 1rem auto; text-align: center; }

button, select {
  cursor: pointer;
}
#toolbar button:hover, #toolbar select:hover {
  background-color: #eee;
}

#tool-icons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.tool-btn {
  font-size: 1.2rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  background: white;
}
.tool-btn.active {
  background: #d0ebff;
  border-color: #228be6;
}
#drop-zone {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.hidden {
  display: none;
}

.repeating-radial {
  width: 240px;
  height: 240px;
  background: repeating-radial-gradient(
    black,
    black 5px,
    white 5px,
    white 10px
  );
}

.multi-repeating-conic {
  width:100%;
  height: 400px;
  background: repeating-conic-gradient(
      from 0deg at 80% 50%,
      #5691f580 0% 8.25%,
      #b338ff80 8.25% 16.5%,
      #f8305880 16.5% 25%
    ),
    repeating-conic-gradient(
      from 15deg at 50% 50%,
      #e856f580 0% 8.25%,
      #ff384c80 8.25% 16.5%,
      #e7f83080 16.5% 25%
    ),
    repeating-conic-gradient(
      from 0deg at 20% 50%,
      #f58356ff 0% 8.25%,
      #caff38ff 8.25% 16.5%,
      #30f88aff 16.5% 25%
    );
}