/* Halftone Studio: nur was über das gemeinsame Gerüst hinausgeht */
#output { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); image-rendering: auto; }

.hs-shapes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.hs-shape {
  appearance: none; aspect-ratio: 1; border: 1px solid var(--t-line); border-radius: 10px; background: none; cursor: pointer;
  display: grid; place-items: center; padding: 8px; position: relative;
}
.hs-shape svg { width: 100%; height: 100%; display: block; }
.hs-shape.is-on { border-color: var(--t-fg); box-shadow: inset 0 0 0 1px var(--t-fg); }
.hs-shape .hs-x {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 0;
  background: var(--t-fg); color: var(--t-bg); font-size: 11px; line-height: 18px; cursor: pointer; padding: 0; display: none;
}
.hs-shape:hover .hs-x { display: block; }
.hs-add { font-size: 20px; color: var(--t-fg-2); }

.hs-source { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.hs-thumb { width: 44px; height: 44px; border-radius: 8px; background: var(--t-fill) center / cover no-repeat; }
.hs-source-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }