* { box-sizing: border-box; }

/* Plain white page: the paint and the logo are drawn by the overlay. */
html, body {
  margin: 0;
  height: 100%;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  overflow: hidden;
}

/* Paint overlay: fixed, full viewport, on top of everything, never blocks input. */
#paint {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;   /* overridden in px by paint.js on resize */
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  display: block;
}

/* Hint shown while the panel is hidden (click/tap opens the panel too). */
#hint {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10000;
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #888;
  background: rgba(20, 20, 20, 0.55);
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
#hint:hover { color: #eee; }
#hint.touch { color: #eee; font-size: 14px; padding: 14px 18px; background: rgba(20, 20, 20, 0.75); }
#hint[hidden] { display: none; }

/* Debug panel (toggle with "d"). */
#debug {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10000;
  background: rgba(20, 20, 20, 0.88);
  color: #eee;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 12px 14px;
  border-radius: 10px;
  display: grid;
  gap: 8px;
  min-width: 300px;
  backdrop-filter: blur(6px);
}

#debug[hidden] { display: none; }

#debug label {
  display: grid;
  grid-template-columns: 110px 1fr 44px;
  align-items: center;
  gap: 8px;
}

#debug input[type="range"] { width: 100%; }
#debug span { text-align: right; opacity: 0.8; }
#debug .row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
#debug .hint { opacity: 0.5; }
#debug button {
  font: inherit;
  color: #111;
  background: #eee;
  border: 0;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
#debug button:hover { background: #fff; }
#debug button.ghost { background: transparent; color: #aaa; }
#debug button.ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }