/* Pixel patterns: the tile repeated over the whole page, chrome from the --lab-* tokens. */
html, body { overflow: hidden; }

#pp-view {
  position: fixed; inset: 0; cursor: pointer;
  background-repeat: repeat; background-position: 0 0;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
#pp-outline {
  position: fixed; left: 0; top: 0; pointer-events: none;
  outline: 2px dashed var(--lab-magenta); outline-offset: -1px;
  box-shadow: 0 0 0 9999px rgba(29, 27, 58, .35);
}
#pp-outline[hidden] { display: none; }

/* The generator's own canvas, kept off screen (it needs a laid-out node to measure) */
#stage { position: fixed; left: -10000px; top: 0; visibility: hidden; }

#pp-bar {
  position: fixed; z-index: 20; top: 8px; right: 8px;
  max-width: calc(100vw - 16px); box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  font: var(--lab-font-size)/1.3 var(--lab-font);
  user-select: none;
}
#pp-bar h1 { margin: 0; color: var(--lab-ink); font-size: 14px; font-weight: 800; width: 100%; }
#pp-bar label { display: inline-flex; align-items: center; gap: 6px; }
#pp-bar .lab-button { padding: 0 10px; }
#pp-bar .pp-icon { width: var(--lab-control-h); padding: 0; }
#pp-bar input[type=range] { width: 80px; }
#pp-bar input[type=color] { width: 30px; height: 26px; padding: 0; border: 1px solid var(--lab-border); border-radius: var(--lab-radius-sm); background: none; cursor: pointer; }
#pp-zoom-val, #pp-count { min-width: 2.4em; color: var(--lab-ink); font-family: var(--lab-mono); font-variant-numeric: tabular-nums; }
.pp-group { display: inline-flex; align-items: center; gap: 4px; }
.pp-swatch {
  width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%;
  border: 2px solid var(--lab-border); cursor: pointer;
}
.pp-swatch:hover { border-color: var(--lab-ink); }

@media (max-width: 600px) {
  #pp-bar { top: auto; bottom: calc(48px + env(safe-area-inset-bottom)); left: 8px; right: 8px; }
  #pp-bar h1 { display: none; }
  #pp-hint { top: calc(16px + env(safe-area-inset-top)); bottom: auto; }
}