.beta-mark {
  display: inline-block;
  margin-left: .2em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  padding: .12em .45em;
  font-size: .3em;
  letter-spacing: 0;
  vertical-align: .45em;
}

.sample-picker { text-align: center; }
.sample-picker > p:first-child { margin: .9rem 0 .55rem; color: var(--muted); font-size: .84rem; }
.sample-picker .sample-button { display: inline-block; }

.background-toolbar {
  display: grid;
  gap: .85rem;
  padding: 1rem;
  border-bottom: 1px solid var(--line);
  background: #fffaf1;
}
.background-toolbar .tool-row { margin: 0; }
.view-switch { display: flex; gap: .45rem; }
.view-switch .button[aria-pressed="true"] { border-color: var(--ink); background: var(--yellow); box-shadow: inset 0 0 0 1px var(--ink); }
.background-view-tools { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.background-view-tools output { min-width: 3.4rem; text-align: center; color: var(--muted); font-size: .82rem; font-weight: 900; }

.background-options {
  display: flex;
  gap: .55rem;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.background-options legend { float: left; margin-right: .55rem; }
.background-options label {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: .3rem .7rem;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 800;
}
.background-options label:has(input[type="radio"]:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.background-options input[type="radio"] { accent-color: var(--red); }
.background-options input[type="color"] { width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; overflow: hidden; }
.background-options input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.background-options input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.background-options:disabled { opacity: .55; }
.swatch { width: 19px; height: 19px; border: 1px solid #a89883; border-radius: 50%; }
.transparent-swatch, .checkerboard-wrap, .background-stage {
  background-color: #f8f4ed;
  background-image:
    linear-gradient(45deg, #d8d0c4 25%, transparent 25%),
    linear-gradient(-45deg, #d8d0c4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d8d0c4 75%),
    linear-gradient(-45deg, transparent 75%, #d8d0c4 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
.white-swatch { background: #fff; }

.progress-panel { padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: #fff6d5; }
.progress-panel > div { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.progress-panel strong { font-size: .9rem; }
.progress-panel progress { display: block; width: 100%; height: 12px; margin: .65rem 0 .35rem; accent-color: var(--red); }
.progress-panel p { margin: 0; color: var(--muted); font-size: .78rem; }

.checkerboard-wrap {
  padding: 1rem;
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
  touch-action: none;
  overscroll-behavior: contain;
}
.checkerboard-wrap:focus-visible { outline: 3px solid rgb(217 66 51 / .35); outline-offset: -3px; }
.checkerboard-wrap.is-pannable { cursor: grab; }
.checkerboard-wrap.is-dragging { cursor: grabbing; }
.background-stage { width: 1px; height: 1px; max-width: none; margin: auto; background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; box-shadow: 0 10px 24px rgb(68 43 18 / .18); user-select: none; }
#result-canvas { display: block; width: 100%; height: 100%; max-width: none; max-height: none; pointer-events: none; }
.beta-notice { border-color: #d49c32; background: #fff8d9; }

@media (max-width: 620px) {
  .background-options legend { width: 100%; margin: 0 0 .15rem; }
  .background-options label { flex: 1; justify-content: center; min-width: 88px; }
}