/* "Try a design" on a KeoCodes link-in-bio demo (includes/links/demo-design.php).
   A neutral chip pinned to the bottom so it reads on any design, light or dark. */
.kc-try-design {
  position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 2147483000;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); box-sizing: border-box;
  padding: 6px 6px 6px 14px; border-radius: 999px;
  background: rgba(17, 19, 24, .92); color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55);
  font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.kc-try-design__label { white-space: nowrap; color: rgba(255, 255, 255, .78); }
.kc-try-design__list { display: flex; gap: 4px; }
.kc-try-design__opt {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.kc-try-design__opt:hover { background: rgba(255, 255, 255, .12); }
.kc-try-design__opt[aria-current="true"] { background: #fff; color: #111318; }
.kc-try-design__opt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body:has(.kc-try-design) { padding-bottom: 76px; }
@media (max-width: 420px) {
  .kc-try-design { gap: 6px; padding-left: 12px; font-size: 12.5px; }
  .kc-try-design__opt { padding: 0 10px; }
}
@media print { .kc-try-design { display: none; } }