.image-compression {
  margin: 1.5rem auto 1.8rem;
  color: #333;
  font-family: "DejaVu Sans", system-ui, sans-serif;
  font-size: .92rem;
  max-width: 600px;
  box-sizing: border-box;
}
.image-compression .ic-source-form { display: flex; gap: .5rem; margin-bottom: 1rem; }
.image-compression input[type="file"] { font: inherit; min-width: 0; width: 100%; }
.image-compression input::file-selector-button { font: inherit; margin-right: .65rem; padding: .4rem .7rem; border: 1px solid #aaa; border-radius: 5px; background: #fff; color: #333; cursor: pointer; }
.image-compression input::file-selector-button:hover { background: #edf6f3; }
.image-compression .ic-status { margin: 0 0 .5rem; font-size: .85rem; }
.image-compression :focus-visible { outline: 3px solid #278474; outline-offset: 3px; }
.image-compression table.ic-table { width: 100%; max-width: 600px; table-layout: fixed; margin: 0; border-collapse: separate; border-spacing: .4rem .55rem; border: 0; }
.image-compression .ic-table td { width: 33.333%; padding: 0; vertical-align: top; border: 0; background: transparent; box-shadow: none; }
.image-compression table.ic-table td[data-ic-preset] { background-color: transparent; }
.image-compression .ic-table .quarto-figure { margin: 0; }
.image-compression .ic-table figure { min-width: 0; margin: 0; }
.image-compression .ic-table img { display: block; width: 100%; height: auto; max-height: 190px; object-fit: contain; }
.image-compression figcaption { text-align: center; margin: .35rem 0 0; font-size: .85rem; color: #333; }
.image-compression .ic-error { margin: 0 0 1rem; font-size: .85rem; color: #9a3535; }
.image-compression [hidden] { display: none !important; }
@media (max-width: 620px) {
  .image-compression table.ic-table { border-spacing: .25rem .45rem; }
  .image-compression figcaption { font-size: .73rem; }
}
@media print {
  .image-compression .ic-source-form, .image-compression .ic-status, .image-compression .ic-error { display: none; }
}