dialog {
  --background: #f0f0e6;
  --ink: #121414;
  --muted: #5c5e52;
  --separator: #bdbdaf;
  --fill: #e4e4d9;
  --focus: #009dea;
  color-scheme: light;
  color: #121414;
  background: #f0f0e6;
  border: 1px solid #121414;
  border-radius: 0;
  padding: 28px;
  max-height: calc(100dvh - 40px);
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
}

dialog::backdrop {
  background: rgb(18 20 20 / 48%);
  backdrop-filter: none;
}

dialog :is(button, input, select, textarea) {
  border-radius: 0;
  border-color: #a9aa9d;
  color: #121414;
}

dialog :is(button, input, select, textarea):focus-visible {
  outline: 3px solid #009dea;
  outline-offset: 3px;
}

dialog button {
  min-height: 40px;
  border-color: #121414;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}

dialog button:hover { background-color: #e4e4d9; }
dialog button.primary { color: #121414; background: #ff4b23; border-color: #ff4b23; }
dialog button.primary:hover { background: #eb421e; border-color: #eb421e; filter: none; }
dialog textarea { min-height: 160px; padding: 16px; background: transparent; }
dialog h2 { font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: 28px; text-transform: uppercase; letter-spacing: -.02em; }
dialog .share-actions { margin-top: 22px; gap: 8px; }
dialog .error { color: #a82b13; }

dialog.artwork-dialog { width: min(1040px,calc(100% - 40px)); padding: 28px 32px 32px; }
dialog .artwork-header { padding-bottom: 20px; border-bottom: 1px solid #121414; gap: 8px; }
dialog .artwork-header button { min-width: 92px; }
dialog .hold-settings { margin-top: 24px; gap: 24px; }
dialog .hold-settings .control { font-size: 12px; }
dialog .artwork-model { max-width: none; margin: 24px 0; padding: 24px 18px; background: #e4e4d9; }
dialog .artwork-model svg { filter: none; }
dialog .paint-heading { margin-bottom: 18px; }
dialog .zone-legend { gap: 20px; }
dialog .zone-legend span { color: #121414; font-size: 11px; }
dialog .zone-legend span::before { border-radius: 0; }
dialog .paint-toolbar { margin: 0 0 22px; }

dialog .segmented { padding: 0; gap: 0; border: 1px solid #121414; border-radius: 0; background: transparent; }
dialog .segmented button { min-width: 84px; min-height: 38px; padding: 10px 18px; border: 0; border-right: 1px solid #121414; border-radius: 0; background: transparent; color: #121414; }
dialog .segmented button:last-child { border-right: 0; }
dialog .segmented button:hover { background: #e4e4d9; }
dialog .segmented button[aria-pressed=true] { background: #121414; color: #f0f0e6; box-shadow: none; }

dialog .pixel-grid-shell { margin-bottom: 0; }
dialog .pixel { min-height: 30px; padding: 0; border-color: #a9aa9d; border-radius: 0; font: 9px Arial, Helvetica, sans-serif; }
dialog .pixel[data-empty=true] { background: repeating-conic-gradient(#dbdccf 0% 25%,#f0f0e6 0% 50%) 50% / 10px 10px; color: #5c5e52; }
dialog .pixel[data-picked=true] { outline-color: #121414; }
dialog .pixel[data-inrange=true] { box-shadow: inset 0 0 0 2px #009dea; }
dialog .zone-guide { border-radius: 0; }

dialog .artwork-controls { gap: 40px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #121414; }
dialog .artwork-controls h3 { font: 700 12px Arial, Helvetica, sans-serif; letter-spacing: .08em; color: #121414; margin-bottom: 18px; }
dialog .control { font-size: 12px; }
dialog .channels { gap: 12px; }
dialog .channels label { color: #5c5e52; font-size: 11px; }
dialog .channels input,dialog .range-controls input { min-height: 42px; padding: 10px; background: transparent; }
dialog input[type=color] { height: 42px; width: 48px; padding: 4px; background: transparent; }
dialog .eyedropper { flex-basis: 42px; width: 42px; height: 42px; padding: 10px; }
dialog .eyedropper[aria-pressed=true] { background: #121414; color: #f0f0e6; outline: 2px solid #009dea; }
dialog .range-actions { gap: 8px; }
dialog .range-actions button { padding: 10px 12px; font-size: 11px; }

@media(max-width:560px) {
  dialog { width: calc(100% - 24px); padding: 20px; max-height: calc(100dvh - 24px); }
  dialog.artwork-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); padding: 18px; }
  dialog .artwork-header { padding-bottom: 16px; }
  dialog .artwork-model { margin: 20px 0; padding: 20px 8px; }
  dialog .zone-legend { gap: 14px; }
  dialog .paint-toolbar { margin-bottom: 20px; }
  dialog .segmented button { min-width: 76px; padding: 10px 12px; }
  dialog .artwork-controls { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; padding-top: 22px; }
  dialog .hold-settings { gap: 16px; }
}