.tst-image-webp {
  --tst-image-accent: var(--tst-tool-control-primary, #c8f65c);
  --tst-image-on-accent: var(--tst-tool-control-on-primary, #101827);
  --tst-image-border: #475569;
  --tst-image-field: #1e293b;
  --tst-image-ink: #f8fafc;
  --tst-image-muted: #cbd5e1;
  color: var(--tst-image-ink);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.tst-image-webp * { box-sizing: border-box; }
.tst-image-webp > * { max-width: 100%; min-width: 0; }
.tst-image-webp :where(h2, p, figure) { margin: 0; }
.tst-image-webp h2 { color: var(--tst-image-ink); font-size: clamp(1.4rem, 3vw, 2rem); }
.tst-image-webp__privacy, .tst-image-webp__note, .tst-image-webp__drop p, .tst-image-webp figure p { color: var(--tst-image-muted); font-size: .82rem; }
.tst-image-webp__drop { border: 1.5px dashed var(--tst-image-border); border-radius: 1rem; display: grid; gap: .55rem; min-width: 0; padding: 1.5rem; }
.tst-image-webp__drop[data-drag-active='true'] { border-color: var(--tst-image-accent); background: color-mix(in srgb, var(--tst-image-accent) 8%, transparent); }
.tst-image-webp label, .tst-image-webp figcaption { color: var(--tst-image-ink); font-size: .82rem; font-weight: 800; }
.tst-image-webp input[type='file'] { max-width: 100%; min-width: 0; width: 100%; }
.tst-image-webp__controls { border-top: 1px solid var(--tst-image-border); display: grid; gap: 1rem; padding-top: 1.2rem; }
.tst-image-webp__controls[hidden], .tst-image-webp__previews[hidden], .tst-image-webp figure[hidden] { display: none; }
.tst-image-webp input[type='range'] { accent-color: var(--tst-image-accent); width: min(100%, 28rem); }
.tst-image-webp__dimensions { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tst-image-webp__dimensions label { display: grid; gap: .4rem; }
.tst-image-webp input[type='number'] { background: var(--tst-image-field); border: 1px solid var(--tst-image-border); border-radius: .65rem; color: var(--tst-image-ink); font: inherit; padding: .7rem; width: 100%; }
.tst-image-webp__checkbox { align-items: center; display: flex; gap: .45rem; }
.tst-image-webp button, .tst-image-webp__download { align-items: center; align-self: start; background: var(--tst-image-accent); border: 1px solid var(--tst-image-accent); border-radius: .7rem; color: var(--tst-image-on-accent); cursor: pointer; display: inline-flex; font: inherit; font-size: .82rem; font-weight: 850; justify-content: center; min-height: 2.7rem; padding: .65rem 1rem; text-decoration: none; width: fit-content; }
.tst-image-webp :where(input, button, a):focus-visible { outline: .2rem solid var(--tst-tool-control-focus, #8ab1ff); outline-offset: .12rem; }
.tst-image-webp__previews { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tst-image-webp figure { border: 1px solid var(--tst-image-border); border-radius: .9rem; display: grid; gap: .7rem; min-width: 0; padding: .8rem; }
.tst-image-webp img { background: repeating-conic-gradient(#e7e9ed 0 25%, #fff 0 50%) 50% / 16px 16px; border-radius: .55rem; display: block; height: 15rem; max-width: 100%; object-fit: contain; width: 100%; }
.tst-image-webp__status { min-height: 1.5em; }
[data-tst-site-shell][data-theme='light'] .tst-image-webp { --tst-image-border: #cbd5e1; --tst-image-field: #f8fafc; --tst-image-ink: #0f172a; --tst-image-muted: #526071; }
@media (max-width: 42rem) { .tst-image-webp__previews, .tst-image-webp__dimensions { grid-template-columns: 1fr; } .tst-image-webp img { height: 12rem; } }

.tst-image-crop {
  --tst-crop-accent: var(--tst-tool-control-primary, #c8f65c);
  --tst-crop-on-accent: var(--tst-tool-control-on-primary, #101827);
  --tst-crop-border: #475569;
  --tst-crop-field: #1e293b;
  --tst-crop-ink: #f8fafc;
  --tst-crop-muted: #cbd5e1;
  color: var(--tst-crop-ink);
  display: grid;
  gap: 1.1rem;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.tst-image-crop *, .tst-image-crop *::before, .tst-image-crop *::after { box-sizing: border-box; }
.tst-image-crop > * { margin-block: 0; max-width: 100%; min-width: 0; }
.tst-image-crop h2 { color: var(--tst-crop-ink); font-size: clamp(1.4rem, 3vw, 2rem); }
.tst-image-crop__privacy, .tst-image-crop__note, .tst-image-crop__source, .tst-image-crop__drop span, .tst-image-crop figcaption { color: var(--tst-crop-muted); font-size: .82rem; }
.tst-image-crop__drop { border: 1.5px dashed var(--tst-crop-border); border-radius: 1rem; display: grid; gap: .55rem; min-width: 0; padding: 1.25rem; }
.tst-image-crop__drop input[type='file'] { max-width: 100%; min-width: 0; width: 100%; }
.tst-image-crop__controls { border-top: 1px solid var(--tst-crop-border); display: grid; gap: 1rem; padding-top: 1rem; }
.tst-image-crop [hidden] { display: none !important; }
.tst-image-crop__grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.tst-image-crop__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tst-image-crop label { color: var(--tst-crop-ink); display: grid; font-size: .82rem; font-weight: 800; gap: .38rem; min-width: 0; }
.tst-image-crop fieldset { border: 1px solid var(--tst-crop-border); border-radius: .8rem; margin: 0; min-width: 0; padding: .8rem; }
.tst-image-crop legend { font-size: .82rem; font-weight: 850; padding-inline: .25rem; }
.tst-image-crop :where(input[type='number'], select) { background: var(--tst-crop-field); border: 1px solid var(--tst-crop-border); border-radius: .65rem; color: var(--tst-crop-ink); font: inherit; max-width: 100%; min-width: 0; padding: .7rem; width: 100%; }
.tst-image-crop input[type='range'] { accent-color: var(--tst-crop-accent); max-width: 100%; width: min(100%, 28rem); }
.tst-image-crop__checkbox { align-items: center; display: flex !important; font-weight: 650 !important; gap: .45rem !important; margin-top: .75rem; }
.tst-image-crop button, .tst-image-crop__download { align-items: center; background: var(--tst-crop-accent); border: 1px solid var(--tst-crop-accent); border-radius: .7rem; color: var(--tst-crop-on-accent); cursor: pointer; display: inline-flex; font: inherit; font-size: .82rem; font-weight: 850; justify-content: center; min-height: 2.7rem; padding: .65rem 1rem; text-decoration: none; width: fit-content; }
.tst-image-crop :where(input, select, button, a):focus-visible { outline: .2rem solid var(--tst-tool-control-focus, #8ab1ff); outline-offset: .12rem; }
.tst-image-crop__preview { border: 1px solid var(--tst-crop-border); border-radius: .9rem; display: grid; gap: .65rem; min-width: 0; padding: .8rem; }
.tst-image-crop__preview canvas { background: repeating-conic-gradient(#e7e9ed 0 25%, #fff 0 50%) 50% / 16px 16px; border-radius: .55rem; display: block; height: auto; max-height: 32rem; max-width: 100%; object-fit: contain; width: auto; }
.tst-image-crop__status { min-height: 1.5em; }
[data-tst-site-shell][data-theme='light'] .tst-image-crop { --tst-crop-border: #cbd5e1; --tst-crop-field: #f8fafc; --tst-crop-ink: #0f172a; --tst-crop-muted: #526071; }
@media (max-width: 42rem) { .tst-image-crop__grid, .tst-image-crop__grid--four { grid-template-columns: minmax(0, 1fr); } }