/*! pixel-bit v2.2.0 | MIT | https://github.com/luisnavarrete12/pixel-bit */

:root {
  --pb-unit: 4px;
  --pb-edge-width: var(--pb-unit);
  --pb-bevel-width: var(--pb-unit);
  --pb-drop-depth: calc(var(--pb-unit) * 2);
  --pb-font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", "Menlo", monospace;
  --pb-font-size: 14px;
  --pb-line-height: 1.6;
  --pb-letter-spacing: 0.04em;
  --pb-edge: #232a34;
  --pb-bg: #f0efe8;
  --pb-surface: #fff;
  --pb-surface-raised: #fff;
  --pb-ink: #212529;
  --pb-ink-muted: #8a8fa3;
  --pb-accent: #2e9bf0;
  --pb-accent-ink: #fff;
  --pb-danger: #e8604a;
  --pb-danger-ink: #fff;
  --pb-success: #86c832;
  --pb-success-ink: #17280a;
  --pb-warning: #f5cf1a;
  --pb-warning-ink: #2b2400;
  --_pb-space-1: var(--pb-unit);
  --_pb-space-2: calc(var(--pb-unit) * 2);
  --_pb-space-3: calc(var(--pb-unit) * 3);
  --_pb-space-4: calc(var(--pb-unit) * 4);
  --_pb-space-6: calc(var(--pb-unit) * 6);
  --pb-tint-light: #fffdf6;
  --pb-tint-dark: #0e1016;
  --pb-hover-veil: rgb(0 0 0 / 9%);
  --pb-transition: 80ms;
  --pb-fill: var(--pb-surface);
  --_pb-light: color-mix(in srgb, var(--pb-fill) 60%, var(--pb-tint-light));
  --_pb-shade: color-mix(in srgb, var(--pb-fill) 62%, var(--pb-tint-dark));
  --_pb-light-soft: color-mix(in srgb, var(--pb-fill) 74%, var(--pb-tint-light));
  --_pb-shade-deep: color-mix(in srgb, var(--pb-fill) 45%, var(--pb-tint-dark));

  /* No diagonal copy: the corner it never reaches is the bitten pixel. */
  --_pb-outline:
    0 calc(var(--pb-edge-width) * -1) 0 0 var(--pb-edge),
    0 var(--pb-edge-width) 0 0 var(--pb-edge),
    calc(var(--pb-edge-width) * -1) 0 0 0 var(--pb-edge),
    var(--pb-edge-width) 0 0 0 var(--pb-edge);
  --_pb-drop:
    var(--pb-edge-width) var(--pb-drop-depth) 0 0 var(--pb-edge),
    var(--pb-drop-depth) var(--pb-edge-width) 0 0 var(--pb-edge);
  --_pb-raised:
    inset var(--pb-bevel-width) var(--pb-bevel-width) 0 0 var(--_pb-light),
    inset calc(var(--pb-bevel-width) * -1) calc(var(--pb-bevel-width) * -1) 0 0 var(--_pb-shade);
  --_pb-pressed:
    inset calc(var(--pb-bevel-width) * -1) calc(var(--pb-bevel-width) * -1) 0 0 var(--_pb-light),
    inset var(--pb-bevel-width) var(--pb-bevel-width) 0 0 var(--_pb-shade);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pb-transition: 0ms;
  }
}

/* A theme redefines surface and semantic colors only. Everything else —
   the grid, the shadow recipes, the bevels — is shared. */

[data-pb-theme="dark"] {
  --pb-edge: #0b0d12;
  --pb-bg: #1c2029;
  --pb-surface: #2c3140;
  --pb-surface-raised: #3a4054;
  --pb-ink: #f0f2f7;
  --pb-ink-muted: #8d94a8;
  --pb-tint-light: #e8ecf7;
  --pb-tint-dark: #05070b;
  --pb-hover-veil: rgb(255 255 255 / 9%);
}

[data-pb-theme="mono"] {
  --pb-edge: #0f2810;
  --pb-bg: #8fac0f;
  --pb-surface: #9cba1a;
  --pb-surface-raised: #aac927;
  --pb-ink: #0f2810;
  --pb-ink-muted: #35521f;
  --pb-tint-light: #d2e86b;
  --pb-tint-dark: #0f2810;
  --pb-accent: #3d5c14;
  --pb-accent-ink: #d2e86b;
  --pb-danger: #2a3d10;
  --pb-danger-ink: #d2e86b;
  --pb-success: #5c7a18;
  --pb-success-ink: #0f2810;
  --pb-warning: #7a9420;
  --pb-warning-ink: #0f2810;
}

[data-pb-theme="amber"] {
  --pb-edge: #1a0f00;
  --pb-bg: #241500;
  --pb-surface: #33200a;
  --pb-surface-raised: #452c0f;
  --pb-ink: #ffb734;
  --pb-ink-muted: #a3762a;
  --pb-tint-light: #ffd98a;
  --pb-tint-dark: #0d0700;
  --pb-accent: #ff9a1f;
  --pb-accent-ink: #1a0f00;
  --pb-danger: #ff6b2c;
  --pb-danger-ink: #1a0f00;
  --pb-success: #d9a223;
  --pb-success-ink: #1a0f00;
  --pb-warning: #ffcf4d;
  --pb-warning-ink: #1a0f00;
  --pb-hover-veil: rgb(255 255 255 / 10%);
}

.pb {
  background: var(--pb-bg);
  color: var(--pb-ink);
  font-family: var(--pb-font-family);
  font-size: var(--pb-font-size);
  line-height: var(--pb-line-height);
  letter-spacing: var(--pb-letter-spacing);
  -webkit-font-smoothing: none;
}

:where(.pb, .pb *) {
  box-sizing: border-box;
}

:where(.pb) :where(a) {
  color: var(--pb-accent);
  text-decoration: underline;
  text-decoration-thickness: var(--pb-edge-width);
  text-underline-offset: var(--pb-unit);
}

:where(.pb) :where(a):hover {
  background: var(--pb-accent);
  color: var(--pb-accent-ink);
  text-decoration-color: transparent;
}

:where(.pb) :where(a):focus-visible {
  outline: var(--pb-unit) solid var(--pb-ink);
  outline-offset: var(--pb-unit);
}

:where(.pb) :where(ul, ol) {
  padding-inline-start: calc(var(--pb-unit) * 8);
  margin-block: var(--_pb-space-4);
}

:where(.pb) :where(li) {
  margin-block: var(--_pb-space-2);
}

:where(.pb) :where(ul) {
  list-style: none;
}

/* A square block instead of a glyph: a bullet drawn by the font antialiases
   and drifts off the grid. */
:where(.pb) :where(ul) > li::before {
  content: "";
  position: absolute;
  margin-inline-start: calc(var(--pb-unit) * -5);
  margin-block-start: calc(var(--pb-unit) * 1.5);
  inline-size: var(--_pb-space-2);
  block-size: var(--_pb-space-2);
  background: var(--pb-accent);
}

:where(.pb) :where(ol) {
  list-style: decimal;
}

:where(.pb) :where(ol) > li::marker {
  color: var(--pb-accent);
}

:where(.pb) :where(hr) {
  border: none;
  block-size: var(--pb-edge-width);
  background: var(--pb-edge);
  margin-block: calc(var(--pb-unit) * 8);
}

:where(.pb) :where(button, [type="button"], [type="submit"], [type="reset"]) {
  --pb-fill: var(--pb-surface-raised);

  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  color: var(--pb-ink);
  background: var(--pb-fill);
  border: none;
  border-radius: 0;
  padding: var(--_pb-space-3) var(--_pb-space-4);
  min-height: calc(var(--pb-unit) * 11);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_pb-space-2);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-shadow: var(--_pb-outline), var(--_pb-drop), var(--_pb-raised);
  transition: box-shadow var(--pb-transition) steps(1);
}

/* Naming a color here reverts every variant to the default surface. */
:where(.pb) :where(button, [type="button"], [type="submit"], [type="reset"]):hover:not(:disabled) {
  background-image: linear-gradient(var(--pb-hover-veil) 0 0);
}

:where(.pb) :where(button, [type="button"], [type="submit"], [type="reset"]):active:not(:disabled) {
  box-shadow: var(--_pb-outline), var(--_pb-pressed);
  padding:
    calc(var(--_pb-space-3) + var(--pb-bevel-width))
    var(--_pb-space-4)
    calc(var(--_pb-space-3) - var(--pb-bevel-width));
}

:where(.pb) :where(button, [type="button"], [type="submit"], [type="reset"]):disabled {
  --pb-fill: var(--pb-surface);

  color: var(--pb-ink-muted);
  cursor: not-allowed;
  box-shadow: var(--_pb-outline);
}

:where(.pb) :where(
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
  textarea,
  select
) {
  --pb-fill: var(--pb-surface);

  font: inherit;
  letter-spacing: inherit;
  color: var(--pb-ink);
  background: var(--pb-fill);
  border: none;
  border-radius: 0;
  padding: var(--_pb-space-3);
  min-height: calc(var(--pb-unit) * 11);
  width: 100%;
  box-shadow:
    var(--_pb-outline),
    inset var(--pb-bevel-width) var(--pb-bevel-width) 0 0 var(--_pb-shade-deep),
    inset calc(var(--pb-bevel-width) * -1) calc(var(--pb-bevel-width) * -1) 0 0 var(--_pb-light-soft);
}

:where(.pb) :where(input, textarea)::-moz-placeholder {
  color: var(--pb-ink-muted);
  opacity: 1;
}

:where(.pb) :where(input, textarea)::placeholder {
  color: var(--pb-ink-muted);
  opacity: 1;
}

:where(.pb) :where(textarea) {
  resize: vertical;
  min-height: calc(var(--pb-unit) * 22);
  line-height: var(--pb-line-height);
}

:where(.pb) :where(select) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Stepped triangle, 5 -> 3 -> 1 units. */
  background-image:
    linear-gradient(currentcolor 0 0),
    linear-gradient(currentcolor 0 0),
    linear-gradient(currentcolor 0 0);
  background-size:
    calc(var(--pb-unit) * 5) var(--pb-unit),
    calc(var(--pb-unit) * 3) var(--pb-unit),
    var(--pb-unit) var(--pb-unit);
  background-position:
    right calc(var(--pb-unit) * 3) top calc(50% - var(--pb-unit) * 1.5),
    right calc(var(--pb-unit) * 4) top calc(50% - var(--pb-unit) * 0.5),
    right calc(var(--pb-unit) * 5) top calc(50% + var(--pb-unit) * 0.5);
  background-repeat: no-repeat;
  padding-right: calc(var(--pb-unit) * 10);
}

:where(.pb) :where(input, textarea, select):disabled {
  color: var(--pb-ink-muted);
  cursor: not-allowed;
}

:where(.pb) :where([type="checkbox"], [type="radio"]) {
  --pb-fill: var(--pb-surface);

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
  margin: 0;
  flex: none;
  inline-size: calc(var(--pb-unit) * 6);
  block-size: calc(var(--pb-unit) * 6);
  background: var(--pb-fill);
  border: none;
  border-radius: 0;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  box-shadow:
    var(--_pb-outline),
    inset var(--pb-bevel-width) var(--pb-bevel-width) 0 0 var(--_pb-shade-deep);
}

:where(.pb) :where([type="checkbox"], [type="radio"])::before {
  content: "";
  inline-size: calc(var(--pb-unit) * 2);
  block-size: calc(var(--pb-unit) * 2);
  background: var(--pb-accent);
  scale: 0;
  transition: scale var(--pb-transition) steps(1);
}

:where(.pb) :where([type="checkbox"], [type="radio"]):checked::before {
  scale: 1;
}

/* clip-path cuts offset copies away; an inset ring survives it. */
:where(.pb) :where([type="radio"]) {
  box-shadow:
    inset 0 0 0 var(--pb-edge-width) var(--pb-edge),
    inset calc(var(--pb-edge-width) * 2) calc(var(--pb-edge-width) * 2) 0 0 var(--_pb-shade-deep);
  clip-path: polygon(
    0 var(--pb-unit),
    var(--pb-unit) var(--pb-unit),
    var(--pb-unit) 0,
    calc(100% - var(--pb-unit)) 0,
    calc(100% - var(--pb-unit)) var(--pb-unit),
    100% var(--pb-unit),
    100% calc(100% - var(--pb-unit)),
    calc(100% - var(--pb-unit)) calc(100% - var(--pb-unit)),
    calc(100% - var(--pb-unit)) 100%,
    var(--pb-unit) 100%,
    var(--pb-unit) calc(100% - var(--pb-unit)),
    0 calc(100% - var(--pb-unit))
  );
}

:where(.pb) :where([type="checkbox"], [type="radio"]):disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

:where(.pb) :where(label) {
  display: inline-flex;
  align-items: center;
  gap: var(--_pb-space-2);
  cursor: pointer;
}

:where(.pb) :where(fieldset) {
  --pb-fill: var(--pb-surface);

  border: none;
  border-radius: 0;
  background: var(--pb-fill);
  padding: var(--_pb-space-4);
  margin: 0;
  box-shadow: var(--_pb-outline), var(--_pb-raised);
}

:where(.pb) :where(legend) {
  --pb-fill: var(--pb-surface-raised);

  background: var(--pb-fill);
  padding: var(--_pb-space-1) var(--_pb-space-3);
  text-transform: uppercase;
  box-shadow: var(--_pb-outline);
}

:where(.pb) :where(button, input, textarea, select, [type="checkbox"], [type="radio"]):focus-visible {
  outline: var(--pb-unit) solid var(--pb-ink);
  outline-offset: var(--pb-unit);
}

:where(.pb) :where(input, textarea, select)[aria-invalid="true"] {
  --pb-fill: color-mix(in srgb, var(--pb-surface) 88%, var(--pb-danger));
  --pb-edge: var(--pb-danger);
}

:where(.pb) :where(.pb-panel) {
  --pb-fill: var(--pb-surface);

  position: relative;
  display: block;
  background: var(--pb-fill);
  color: var(--pb-ink);
  padding: var(--_pb-space-6);
  box-shadow: var(--_pb-outline), var(--_pb-raised);
}

:where(.pb) :where(.pb-panel:has(.pb-panel-title)) {
  margin-block-start: var(--_pb-space-4);
}

:where(.pb) :where(.pb-panel-title) {
  --pb-fill: var(--pb-surface-raised);

  position: absolute;
  inset-block-start: calc(var(--pb-unit) * -3);
  inset-inline-start: var(--_pb-space-4);
  margin: 0;
  padding: var(--_pb-space-1) var(--_pb-space-3);
  background: var(--pb-fill);
  font-size: 0.85em;
  text-transform: uppercase;
  box-shadow: var(--_pb-outline);
}

:where(.pb) :where(.pb-balloon) {
  --pb-fill: var(--pb-surface);

  position: relative;
  display: inline-block;
  max-inline-size: 46ch;
  margin-block-end: calc(var(--pb-unit) * 4);
  padding: var(--_pb-space-4);
  background: var(--pb-fill);
  color: var(--pb-ink);
  box-shadow: var(--_pb-outline);
}

:where(.pb) :where(.pb-balloon > :first-child) {
  margin-block-start: 0;
}

:where(.pb) :where(.pb-balloon > :last-child) {
  margin-block-end: 0;
}

:where(.pb) :where(.pb-balloon)::before,
:where(.pb) :where(.pb-balloon)::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: calc(var(--pb-unit) * 5);
  background-repeat: no-repeat;
}

:where(.pb) :where(.pb-balloon)::before {
  inline-size: calc(var(--pb-unit) * 5);
  block-size: calc(var(--pb-unit) * 3);
  background-image:
    linear-gradient(var(--pb-edge) 0 0),
    linear-gradient(var(--pb-edge) 0 0),
    linear-gradient(var(--pb-edge) 0 0);
  background-size:
    calc(var(--pb-unit) * 5) var(--pb-unit),
    calc(var(--pb-unit) * 4) var(--pb-unit),
    calc(var(--pb-unit) * 3) var(--pb-unit);
  background-position: 0 0, 0 var(--pb-unit), 0 calc(var(--pb-unit) * 2);
}

:where(.pb) :where(.pb-balloon)::after {
  inline-size: calc(var(--pb-unit) * 4);
  block-size: calc(var(--pb-unit) * 2);
  background-image:
    linear-gradient(var(--pb-fill) 0 0),
    linear-gradient(var(--pb-fill) 0 0);
  background-size:
    calc(var(--pb-unit) * 4) var(--pb-unit),
    calc(var(--pb-unit) * 3) var(--pb-unit);
  background-position: 0 0, 0 var(--pb-unit);
}

:where(.pb) :where(.pb-balloon-right)::before,
:where(.pb) :where(.pb-balloon-right)::after {
  inset-inline: auto calc(var(--pb-unit) * 5);
  background-position-x: right;
}

:where(.pb) :where(.pb-badge) {
  --pb-fill: var(--pb-surface-raised);

  display: inline-flex;
  align-items: center;
  gap: var(--_pb-space-1);
  padding: var(--_pb-space-1) var(--_pb-space-3);
  background: var(--pb-fill);
  color: var(--pb-ink);
  font-size: 0.8em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--_pb-outline), var(--_pb-raised);
}

:where(.pb) :where(table) {
  --pb-fill: var(--pb-surface);

  border-collapse: collapse;
  background: var(--pb-fill);
  color: var(--pb-ink);
  font-size: 0.9em;
}

:where(.pb) :where(th, td) {
  border: var(--pb-edge-width) solid var(--pb-edge);
  padding: var(--_pb-space-2) var(--_pb-space-4);
  text-align: start;
}

:where(.pb) :where(thead th) {
  background: var(--pb-surface-raised);
  text-transform: uppercase;
}

:where(.pb) :where(tbody tr:nth-child(even)) {
  background: color-mix(in srgb, var(--pb-surface) 92%, var(--pb-tint-dark));
}

:where(.pb) :where(.pb-text-accent) {
  color: var(--pb-accent);
}

:where(.pb) :where(.pb-text-danger) {
  color: var(--pb-danger);
}

:where(.pb) :where(.pb-text-success) {
  color: color-mix(in srgb, var(--pb-success) 80%, var(--pb-tint-dark));
}

:where(.pb) :where(.pb-text-warning) {
  color: color-mix(in srgb, var(--pb-warning) 78%, var(--pb-tint-dark));
}

:where(.pb) :where(.pb-text-muted) {
  color: var(--pb-ink-muted);
}

:where(.pb) :where(dialog) {
  --pb-fill: var(--pb-surface);

  border: none;
  padding: var(--_pb-space-6);
  max-inline-size: 46ch;
  background: var(--pb-fill);
  color: var(--pb-ink);
  box-shadow: var(--_pb-outline), var(--_pb-raised);
}

:where(.pb) :where(dialog > :first-child) {
  margin-block-start: 0;
}

:where(.pb) :where(dialog > :last-child) {
  margin-block-end: 0;
}

/* Dithered rather than a flat wash: a smooth translucent layer is the one
   thing on screen that cannot be made of pixels. */
:where(.pb) :where(dialog)::backdrop {
  background-color: rgb(14 16 22 / 55%);
  background-image:
    linear-gradient(45deg, rgb(14 16 22 / 55%) 25%, transparent 25% 75%, rgb(14 16 22 / 55%) 75%),
    linear-gradient(45deg, rgb(14 16 22 / 55%) 25%, transparent 25% 75%, rgb(14 16 22 / 55%) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}
:where(.pb) :where(.pb-icon) {
  display: inline-block;
  vertical-align: middle;
  inline-size: calc(var(--pb-unit) * 8);
  block-size: calc(var(--pb-unit) * 8);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
}

:where(.pb) :where(.pb-icon-sm) {
  inline-size: calc(var(--pb-unit) * 5);
  block-size: calc(var(--pb-unit) * 5);
}

:where(.pb) :where(.pb-icon-lg) {
  inline-size: calc(var(--pb-unit) * 16);
  block-size: calc(var(--pb-unit) * 16);
}

/* Drawn here, not traced from any sprite sheet. */
:where(.pb) :where(.pb-icon-heart) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23e8604a' d='M1 0h2v1H1zM5 0h2v1H5zM0 1h8v3H0zM1 4h6v1H1zM2 5h4v1H2zM3 6h2v1H3z'/%3E%3Cpath fill='%23ff9d8a' d='M1 1h2v1H1zM1 2h1v1H1z'/%3E%3C/svg%3E");
}

:where(.pb) :where(.pb-icon-heart-half) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23e8604a' d='M1 0h2v1H1zM0 1h4v3H0zM1 4h3v1H1zM2 5h2v1H2zM3 6h1v1H3z'/%3E%3Cpath fill='%23ff9d8a' d='M1 1h2v1H1zM1 2h1v1H1z'/%3E%3Cpath fill='%23b9bcc9' d='M5 0h2v1H5zM4 1h4v3H4zM4 4h3v1H4zM4 5h2v1H4zM4 6h1v1H4z'/%3E%3C/svg%3E");
}

:where(.pb) :where(.pb-icon-heart-empty) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23b9bcc9' d='M1 0h2v1H1zM5 0h2v1H5zM0 1h8v3H0zM1 4h6v1H1zM2 5h4v1H2zM3 6h2v1H3z'/%3E%3C/svg%3E");
}

:where(.pb) :where(kbd) {
  --pb-fill: var(--pb-surface-raised);

  font: inherit;
  font-size: 0.85em;
  letter-spacing: inherit;
  text-transform: uppercase;
  color: var(--pb-ink);
  background: var(--pb-fill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: calc(var(--pb-unit) * 9);
  min-block-size: calc(var(--pb-unit) * 9);
  padding: 0 var(--_pb-space-2);
  box-shadow: var(--_pb-outline), var(--_pb-drop), var(--_pb-raised);
}

:where(.pb) :where(kbd.pb-key-round) {
  min-inline-size: calc(var(--pb-unit) * 11);
  min-block-size: calc(var(--pb-unit) * 11);
  padding: 0;
  box-shadow:
    inset 0 0 0 var(--pb-edge-width) var(--pb-edge),
    inset calc(var(--pb-edge-width) * 2) calc(var(--pb-edge-width) * 2) 0 0 var(--_pb-light),
    inset calc(var(--pb-edge-width) * -2) calc(var(--pb-edge-width) * -2) 0 0 var(--_pb-shade);
  clip-path: polygon(
    0 calc(var(--pb-unit) * 2),
    var(--pb-unit) calc(var(--pb-unit) * 2),
    var(--pb-unit) var(--pb-unit),
    calc(var(--pb-unit) * 2) var(--pb-unit),
    calc(var(--pb-unit) * 2) 0,
    calc(100% - var(--pb-unit) * 2) 0,
    calc(100% - var(--pb-unit) * 2) var(--pb-unit),
    calc(100% - var(--pb-unit)) var(--pb-unit),
    calc(100% - var(--pb-unit)) calc(var(--pb-unit) * 2),
    100% calc(var(--pb-unit) * 2),
    100% calc(100% - var(--pb-unit) * 2),
    calc(100% - var(--pb-unit)) calc(100% - var(--pb-unit) * 2),
    calc(100% - var(--pb-unit)) calc(100% - var(--pb-unit)),
    calc(100% - var(--pb-unit) * 2) calc(100% - var(--pb-unit)),
    calc(100% - var(--pb-unit) * 2) 100%,
    calc(var(--pb-unit) * 2) 100%,
    calc(var(--pb-unit) * 2) calc(100% - var(--pb-unit)),
    var(--pb-unit) calc(100% - var(--pb-unit)),
    var(--pb-unit) calc(100% - var(--pb-unit) * 2),
    0 calc(100% - var(--pb-unit) * 2)
  );
}

:where(.pb) :where(kbd.pb-key-held) {
  box-shadow: var(--_pb-outline), var(--_pb-pressed);
  translate: 0 var(--pb-bevel-width);
}

:where(.pb) :where(progress) {
  --pb-fill: var(--pb-success);
  --pb-segment-width: calc(var(--pb-unit) * 4);
  --pb-segment-gap: var(--pb-unit);

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
  display: block;
  inline-size: 100%;
  block-size: calc(var(--pb-unit) * 7);
  border: none;
  background: var(--pb-bg);
  box-shadow:
    var(--_pb-outline),
    inset var(--pb-bevel-width) var(--pb-bevel-width) 0 0
      color-mix(in srgb, var(--pb-bg) 45%, var(--pb-tint-dark));
}

/* No :where() here: browser styles beat zero specificity. */
.pb progress::-webkit-progress-bar {
  background: var(--pb-bg);
}

.pb progress::-webkit-progress-value {
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--pb-fill) 0 var(--pb-segment-width),
      var(--pb-bg) var(--pb-segment-width) calc(var(--pb-segment-width) + var(--pb-segment-gap))
    );
}

.pb progress::-moz-progress-bar {
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--pb-fill) 0 var(--pb-segment-width),
      var(--pb-bg) var(--pb-segment-width) calc(var(--pb-segment-width) + var(--pb-segment-gap))
    );
}

/* Last: modifiers must beat the components they modify. */

:where(.pb) :where(.pb-accent) {
  --pb-fill: var(--pb-accent);

  color: var(--pb-accent-ink);
}

:where(.pb) :where(.pb-danger) {
  --pb-fill: var(--pb-danger);

  color: var(--pb-danger-ink);
}

:where(.pb) :where(.pb-success) {
  --pb-fill: var(--pb-success);

  color: var(--pb-success-ink);
}

:where(.pb) :where(.pb-warning) {
  --pb-fill: var(--pb-warning);

  color: var(--pb-warning-ink);
}