/* =============================================
   PhotoToPixel.art — minimal custom styles
   Notes:
   - Tailwind handles layout and theming
   - Add pixelated rendering and small utilities
============================================= */

html, body {
  height: 100%;
}

.pixelated {
  image-rendering: optimizeSpeed;          /* Older versions of FF */
  image-rendering: -moz-crisp-edges;       /* FF */
  image-rendering: -o-crisp-edges;         /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Safari */
  image-rendering: pixelated;              /* Chrome + FF */
  image-rendering: optimize-contrast;      /* Safari */
  -ms-interpolation-mode: nearest-neighbor;/* IE */
}

/* Canvas should fill the container while keeping crisp pixels rendered via JS */
#previewCanvas {
  width: 100%;
  height: 100%;
}

/* Before & After container helpers */
#baContainer {
  /* create a stacking context for masking layers */
  isolation: isolate;
}
#baCanvas {
  width: 100%;
  height: 100%;
}

/* Details arrow color on dark */
summary::-webkit-details-marker {
  color: rgba(255,255,255,0.6);
}