/* pixelwrld-tile — SKIN. The only file to edit per project. Values are the source's own. */
.sp-pw-stage, .sp-pw-tile {
  --sp-pw-ink: #000;
  --sp-pw-pill: rgba(226, 226, 226, .8);
  --sp-pw-scrim: rgba(247, 247, 247, .4);
  --sp-pw-scrim-blur: 7px;
  --sp-pw-hairline: rgba(0, 0, 0, .2);
  --sp-pw-focus: #5d5d5d;
  --sp-pw-page: #f7f7f7;
}
html.dark .sp-pw-stage, html.dark .sp-pw-tile, [data-theme="dark"] .sp-pw-stage, [data-theme="dark"] .sp-pw-tile {
  --sp-pw-ink: #f2f2f2;
  --sp-pw-pill: rgba(60, 60, 60, .8);
  --sp-pw-scrim: rgba(22, 22, 22, .45);
  --sp-pw-hairline: rgba(255, 255, 255, .14);
  --sp-pw-focus: #9e9e9e;
  --sp-pw-page: #161616;
}

/* ---- Brassword site skin: the tile sits on the page stage, no case. */
.sp-pw-stage, .sp-pw-tile {
  --sp-pw-page: var(--ground, #f4f0e8);
  --sp-pw-ink: var(--ink, #292929);
  --sp-pw-pill: color-mix(in srgb, var(--surface, #fffdfa) 85%, transparent);
  --sp-pw-scrim: color-mix(in srgb, var(--ground, #f4f0e8) 40%, transparent);
  --sp-pw-focus: var(--fingerprint, #4f86b8);
}
html.dark .sp-pw-stage, html.dark .sp-pw-tile, [data-theme] .sp-pw-stage, [data-theme] .sp-pw-tile {
  --sp-pw-page: var(--ground, #f4f0e8);
  --sp-pw-ink: var(--ink, #292929);
  --sp-pw-pill: color-mix(in srgb, var(--surface, #fffdfa) 85%, transparent);
  --sp-pw-scrim: color-mix(in srgb, var(--ground, #f4f0e8) 40%, transparent);
  --sp-pw-hairline: color-mix(in srgb, var(--ink, #292929) 18%, transparent);
  --sp-pw-focus: var(--fingerprint, #4f86b8);
}