/* Frame: a photographer's light table. Neutral grey so every background choice reads true; the preview sits on a
   chequerboard so a clear background shows as clear. */
:root { --page: #f2f2ef; --card: #ffffff; --ink: #171717; --soft: #5b5b57; --line: #d8d8d2; --field: #ebebe8; --act: #171717; --on-act: #ffffff; --stop: #b3261e; --wide: 760px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #121212; --card: #1c1c1c; --ink: #ededeb; --soft: #a6a6a1; --line: #333331; --field: #121212; --act: #ededeb; --on-act: #121212; --stop: #ff8a80; color-scheme: dark; }
}
.drop { position: relative; display: grid; place-items: center; gap: 4px; min-height: 130px; border: 2px dashed var(--soft); border-radius: 12px; background: var(--card); text-align: center; cursor: pointer; padding: 20px; font-size: 19px; }
.drop.over, .drop:focus-within { border-color: var(--ink); border-style: solid; } .drop input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; } .drop .soft { font-weight: 400; }
#out { width: 100%; height: auto; border-radius: 8px; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 20px 20px; }
.chip.swatch::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--sw); margin-right: 8px; vertical-align: -2px; border: 1px solid rgb(0 0 0 / .15); }