:root {
  /* Neutral palette and shapes inspired by Basecoat (basecoatui.com, MIT). */
  --sidebar: #fafafa;
  --surface: #fff;
  --popover: #fff;
  --ink: #0a0a0a;
  --quiet: #737373;
  --muted: #f5f5f5;
  --hairline: #e5e5e5;
  --control-line: #e5e5e5;
  --field: #fff;
  --field-hover: #f5f5f5;
  --accent: #171717;
  --accent-hover: #404040;
  --on-accent: #fafafa;
  --focus: #a1a1a1;
  --error: #dc2626;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --chevron: url("/chevron-light.svg");

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;

  --sidebar-width: 18.75rem;
  --control: 2rem;
  --radius: 0.5rem;

  --type-body: 0.875rem;
  --type-small: 0.75rem;
  --type-lead: 1.0625rem;
  --weight-strong: 500;

  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 100%;
  line-height: 1.4;
  color: var(--ink);
  background: var(--sidebar);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sidebar: #171717;
    --surface: #0a0a0a;
    --popover: #171717;
    --ink: #fafafa;
    --quiet: #a1a1a1;
    --muted: #262626;
    --hairline: rgb(255 255 255 / 0.1);
    --control-line: rgb(255 255 255 / 0.15);
    --field: rgb(255 255 255 / 0.045);
    --field-hover: rgb(255 255 255 / 0.075);
    --accent: #e5e5e5;
    --accent-hover: #d4d4d4;
    --on-accent: #171717;
    --focus: #737373;
    --error: #ff6467;
    --shadow-xs: none;
    --chevron: url("/chevron-dark.svg");
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { height: 100%; }
body {
  display: grid;
  grid-template:
    "canvas sidebar" minmax(0, 1fr)
    "canvas note" auto
    / minmax(0, 1fr) var(--sidebar-width);
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  font-size: var(--type-body);
}
body > * { min-width: 0; }

h1, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button, select, input { font: inherit; color: inherit; }
button { cursor: default; }
a { color: inherit; text-underline-offset: 0.15em; }
:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 50%, transparent); }
.options:focus { outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  padding: var(--space-1) var(--space-3);
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.quiet { color: var(--quiet); }
.underline { text-decoration: underline; text-underline-offset: 0.15em; }

/* Canvas */

.canvas {
  grid-area: canvas;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
}

.prompt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-6);
  text-align: center;
  border: 0;
  background: none;
  transition: background-color 0.15s;
}
.prompt:hover { background: var(--muted); }
.prompt:focus-visible { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--focus) 50%, transparent); }
.prompt-title { font-size: var(--type-lead); font-weight: var(--weight-strong); text-wrap: balance; }

.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  min-height: 0;
  padding: var(--space-6);
}
.view-image { position: relative; flex: 1; min-width: 0; min-height: 0; }
.view-image img {
  position: absolute;
  inset: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
.view.is-new .view-image img { animation: appear 0.2s ease-out; }
.view-error { flex: none; max-width: 40rem; margin-inline: auto; color: var(--error); text-align: center; overflow-wrap: anywhere; }

.strip {
  flex: none;
  display: flex;
  justify-content: safe center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-4) var(--space-3);
  overflow-x: auto;
}
.thumb { position: relative; flex: none; }
.thumb-select {
  display: block;
  position: relative;
  width: 2.75rem;
  height: 3.5rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: var(--field);
}
.thumb-select img { display: block; width: 100%; height: 100%; object-fit: contain; }
.thumb-select[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.thumb-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--focus) 50%, transparent); }
.thumb-failed {
  position: absolute;
  inset: auto 0 0;
  padding: 0 var(--space-1);
  font-size: var(--type-small);
  font-weight: var(--weight-strong);
  line-height: 1.3;
  text-align: center;
  color: #fff;
  background: #dc2626;
}
.thumb-remove {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  font-size: var(--type-small);
  line-height: 1;
  color: var(--ink);
  border: 1px solid var(--control-line);
  border-radius: 50%;
  background: var(--popover);
  box-shadow: var(--shadow-xs);
}
.thumb-remove:hover:not(:disabled) { background: var(--muted); }
@media (hover: hover) {
  .thumb-remove { opacity: 0; }
  .thumb:hover .thumb-remove, .thumb:focus-within .thumb-remove { opacity: 1; }
}
.thumb-remove::after { content: ""; position: absolute; inset: -0.1875rem; }

.drop-veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  visibility: hidden;
  font-size: var(--type-lead);
  font-weight: var(--weight-strong);
  background: var(--muted);
  pointer-events: none;
}
.is-dragging .drop-veil { visibility: visible; }

/* Sidebar */

.sidebar { grid-area: sidebar; display: flex; min-width: 0; min-height: 0; background: var(--sidebar); }
.options { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
  padding: var(--space-4);
  overflow-y: auto;
}
.row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.375rem; }
.panel-head { display: grid; gap: var(--space-1); margin-inline: calc(-1 * var(--space-4)); padding: 0 var(--space-4) var(--space-3); border-bottom: 1px solid var(--hairline); }
.brand { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.panel-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 1.5rem; font-size: var(--type-small); color: var(--quiet); font-variant-numeric: tabular-nums; }
.panel-meta .link { font-size: var(--type-small); }
.for-touch { display: none; }
@media (pointer: coarse) {
  .for-pointer { display: none; }
  .for-touch { display: inline; }
}
.row-label { font-size: var(--type-small); font-weight: var(--weight-strong); }
.row-hint { margin-inline-start: var(--space-1); font-weight: 400; color: var(--quiet); }
.row-value { min-width: 0; }
.row-links { display: flex; gap: var(--space-1); margin-inline-end: calc(-1 * var(--space-2)); }

select {
  width: 100%;
  height: var(--control);
  padding: 0 2rem 0 0.625rem;
  border: 1px solid var(--control-line);
  border-radius: var(--radius);
  background-color: var(--field);
  box-shadow: var(--shadow-xs);
  /* The native arrow can't be positioned, so a chevron image replaces it. */
  appearance: none;
  background-image: var(--chevron);
  background-position: right 0.625rem center;
  background-size: 1rem 1rem;
  background-repeat: no-repeat;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
select:hover:not(:disabled) { background-color: var(--field-hover); }
select:disabled { opacity: 0.5; }

/* A styled open list where supported. Other browsers keep their native menu. */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: flex; align-items: center; white-space: nowrap; overflow: clip; overflow-clip-margin: content-box; }
  select::picker-icon { display: none; }
  ::picker(select) {
    max-height: min(24rem, 70dvh);
    margin-block: var(--space-1);
    padding: var(--space-1);
    color: var(--ink);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--popover);
    box-shadow: var(--shadow-md);
  }
  optgroup { margin: var(--space-1) calc(-1 * var(--space-1)) 0; padding: var(--space-1) var(--space-1) 0; font-weight: 400; border-top: 1px solid var(--hairline); }
  legend { position: sticky; top: calc(-1 * var(--space-1)); z-index: 1; padding: 0.375rem var(--space-2); font-size: var(--type-small); font-weight: var(--weight-strong); color: var(--quiet); background: var(--popover); }
  option { display: flex; align-items: center; gap: var(--space-2); min-height: 1.75rem; padding: 0.125rem var(--space-2); font-size: var(--type-body); color: var(--ink); border-radius: 0.375rem; }
  option::checkmark { order: 1; margin-inline-start: auto; color: var(--ink); }
  option:hover, option:focus-visible { outline: none; box-shadow: none; background: var(--muted); }
  option:checked { font-weight: var(--weight-strong); }
}
.check { display: flex; align-items: center; gap: var(--space-2); }
.check input { flex: none; width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
.range { display: flex; align-items: center; gap: var(--space-2); }
.range input { flex: 1; min-width: 0; margin: 0; accent-color: var(--accent); }
output { flex: none; color: var(--quiet); font-variant-numeric: tabular-nums; }

.actions { flex: none; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-4); }
.status { min-width: 0; min-height: 1.4em; color: var(--quiet); overflow-wrap: anywhere; }
.status.error { color: var(--error); }
.downloads { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--control);
  padding: 0 0.625rem;
  font-weight: var(--weight-strong);
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  border: 1px solid var(--control-line);
  border-radius: var(--radius);
  background: var(--field);
  box-shadow: var(--shadow-xs);
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.button:hover:not(:disabled) { background: var(--field-hover); }
.button:active:not(:disabled) { transform: translateY(1px); }
.button-primary { color: var(--on-accent); border-color: transparent; background: var(--accent); box-shadow: none; }
.button-primary:hover:not(:disabled) { background: var(--accent-hover); }
.button:disabled { opacity: 0.5; }

.link {
  align-self: center;
  min-height: 1.5rem;
  padding: 0 var(--space-2);
  font-weight: var(--weight-strong);
  color: var(--quiet);
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: none;
  transition: background-color 0.15s, color 0.15s;
}
.link:hover:not(:disabled) { color: var(--ink); background: var(--muted); }
.link:disabled { opacity: 0.5; }
.actions .link { align-self: stretch; min-height: var(--control); }

.note { grid-area: note; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--hairline); font-size: var(--type-small); color: var(--quiet); background: var(--sidebar); }

@keyframes appear {
  from { opacity: 0; }
}

/* Mobile: touch-sized controls, and 16 px fields so iOS doesn't zoom on focus. */
@media (max-width: 47.5rem) {
  :root { --control: 2.75rem; --type-body: 0.9375rem; --type-small: 0.8125rem; }
  body { display: block; height: auto; overflow: visible; }
  .canvas { height: 60svh; min-height: 22rem; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .view { padding: var(--space-4); }
  .rows { overflow: visible; }
  select { font-size: 1rem; }
  .link { min-height: 2.75rem; }
  .thumb-remove { width: 1.5rem; height: 1.5rem; }
  .check input { width: 1.25rem; height: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}