@property --bdr-rotating-gradient-border-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.bdr-rotating-gradient-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --fill: color-mix(in srgb, var(--c) 10%, #0b0f19);
  box-sizing: border-box;
  border: 0.2em solid transparent;
  background:
    linear-gradient(var(--fill), var(--fill)) padding-box,
    conic-gradient(from var(--bdr-rotating-gradient-border-a), var(--c), color-mix(in oklch, var(--c), #d946ef 70%), color-mix(in oklch, var(--c), #f97316 70%), color-mix(in oklch, var(--c), #22d3ee 70%), var(--c)) border-box;
  color: #f1f5f9;
  animation: bdr-rotating-gradient-border-spin 4s linear infinite;
}
@keyframes bdr-rotating-gradient-border-spin {
  to { --bdr-rotating-gradient-border-a: 360deg; }
}

.bdr-animated-gradient-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  box-sizing: border-box;
  border: 0.2em solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(115deg, var(--c), color-mix(in oklch, var(--c), #a855f7 70%), color-mix(in oklch, var(--c), #ec4899 80%), color-mix(in oklch, var(--c), #f59e0b 75%), var(--c)) 0 50% / 300% 300% border-box;
  color: #111827;
  animation: bdr-animated-gradient-border-flow 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes bdr-animated-gradient-border-flow {
  0%, 100% { background-position: 0 0, 0% 50%; }
  50%      { background-position: 0 0, 100% 50%; }
}

@property --bdr-transparent-gradient-border-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.bdr-transparent-gradient-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;

}
.bdr-transparent-gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.2em;
  border-radius: inherit;
  background: conic-gradient(from var(--bdr-transparent-gradient-border-a), var(--c), color-mix(in oklch, var(--c), #ec4899 80%), var(--c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  animation: bdr-transparent-gradient-border-spin 4s linear infinite;
}
@keyframes bdr-transparent-gradient-border-spin {
  to { --bdr-transparent-gradient-border-a: 360deg; }
}

@property --bdr-border-beam-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.bdr-border-beam {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 10%, #0b0f19);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent);
  color: #f1f5f9;
}
.bdr-border-beam-light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: drop-shadow(0 0 0.25em var(--c));
  pointer-events: none;
}
.bdr-border-beam-light::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.14em;
  border-radius: inherit;
  background: conic-gradient(from var(--bdr-border-beam-a), transparent 0 74%, color-mix(in srgb, var(--c) 60%, transparent) 86%, var(--c) 94%, color-mix(in srgb, var(--c) 25%, #fff) 98.5%, transparent 99%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: bdr-border-beam-orbit 3s linear infinite;
}
@keyframes bdr-border-beam-orbit {
  to { --bdr-border-beam-a: 360deg; }
}

@property --bdr-glowing-gradient-border-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.bdr-glowing-gradient-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --fill: color-mix(in srgb, var(--c) 10%, #0b0f19);
  --ring: conic-gradient(from var(--bdr-glowing-gradient-border-a), var(--c), color-mix(in oklch, var(--c), #d946ef 70%), color-mix(in oklch, var(--c), #22d3ee 70%), var(--c));
  isolation: isolate;
  color: #f1f5f9;
  animation: bdr-glowing-gradient-border-spin 4s linear infinite;
}
.bdr-glowing-gradient-border::before,
.bdr-glowing-gradient-border::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.bdr-glowing-gradient-border::before {
  inset: 0.3em;
  background: var(--ring);
  filter: blur(0.9em);
  opacity: 0.75;
}
.bdr-glowing-gradient-border::after {
  inset: 0;
  border: 0.16em solid transparent;
  background: linear-gradient(var(--fill), var(--fill)) padding-box, var(--ring) border-box;
}
@keyframes bdr-glowing-gradient-border-spin {
  to { --bdr-glowing-gradient-border-a: 360deg; }
}

.bdr-rainbow-rgb-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --fill: color-mix(in srgb, var(--c) 8%, #09090b);
  box-sizing: border-box;
  border: 0.25em solid transparent;
  background:
    linear-gradient(var(--fill), var(--fill)) padding-box,
    repeating-linear-gradient(45deg, #ff2d55, #ff9500 1.33em, #ffd60a 2.67em, #34c759 4em, #00aaff 5.33em, #5e5ce6 6.67em, #ff2d55 8em) 0 0 / 11.3137em 11.3137em border-box;
  color: #fafafa;
  letter-spacing: 0.04em;
  animation: bdr-rainbow-rgb-border-stream 3s linear infinite;
}
@keyframes bdr-rainbow-rgb-border-stream {
  to { background-position: 0 0, 11.3137em 0; }
}

.bdr-shine-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 10%, #0b0f19);
  color: #f1f5f9;
}
.bdr-shine-border::before,
.bdr-shine-border::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: bdr-shine-border-sweep 3.5s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.bdr-shine-border::before {
  padding: 0.16em;
  background:
    linear-gradient(110deg, transparent 44%, #fff 50%, transparent 56%) 100% 0 / 250% 100% no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, transparent), var(--c) 35% 65%, color-mix(in srgb, var(--c) 40%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.bdr-shine-border::after {
  background: linear-gradient(110deg, transparent 44%, color-mix(in srgb, #fff 8%, transparent) 50%, transparent 56%) 100% 0 / 250% 100% no-repeat;
}
@keyframes bdr-shine-border-sweep {
  0%        { background-position: 100% 0, 0 0; }
  60%, 100% { background-position: 0% 0, 0 0; }
}

@property --bdr-gold-gradient-border-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.bdr-gold-gradient-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --fill: color-mix(in srgb, var(--c) 10%, #120e07);
  box-sizing: border-box;
  border: 0.3em solid transparent;
  background:
    linear-gradient(var(--fill), var(--fill)) padding-box,
    conic-gradient(from var(--bdr-gold-gradient-border-a), #fff3c4, #d4a537 12%, #7c5512 22%, #e9c46a 34%, #fffbe6 42%, #b8861f 55%, #6b4a0f 66%, #d9ae4a 80%, #fff3c4) border-box;
  color: #f2d27a;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: bdr-gold-gradient-border-spin 6s linear infinite;
}
.bdr-gold-gradient-border::after {
  content: "";
  position: absolute;
  inset: 0.3em;
  border: 1px solid color-mix(in srgb, #e9c46a 50%, transparent);
  border-radius: 0.4em;
  pointer-events: none;
}
@keyframes bdr-gold-gradient-border-spin {
  to { --bdr-gold-gradient-border-a: 360deg; }
}

@property --bdr-animated-border-button-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.bdr-animated-border-button {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  isolation: isolate;
  padding: 0.85em 2em;
  border: 0;
  border-radius: 99em;
  background: transparent;
  color: #f8fafc;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bdr-animated-border-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 0.15em solid transparent;
  border-radius: inherit;
  background:
    linear-gradient(color-mix(in srgb, var(--c) 10%, #0b0f19), color-mix(in srgb, var(--c) 10%, #0b0f19)) padding-box,
    conic-gradient(from var(--bdr-animated-border-button-a), transparent 0 22%, var(--c) 47%, color-mix(in srgb, var(--c) 25%, #fff) 50%, transparent 0 72%, color-mix(in oklch, var(--c), #ec4899 85%) 97%, #fce7f3 100%) border-box,
    linear-gradient(color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 30%, transparent)) border-box;
  animation: bdr-animated-border-button-spin 3s linear infinite;
}
.bdr-animated-border-button:hover { transform: translateY(-0.12em); }
.bdr-animated-border-button:active { transform: scale(0.97); }
.bdr-animated-border-button:focus-visible {
  outline: 0.14em solid var(--c);
  outline-offset: 0.25em;
}
@keyframes bdr-animated-border-button-spin {
  to { --bdr-animated-border-button-a: 360deg; }
}

@property --bdr-ai-gradient-input-border-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --bdr-ai-gradient-input-border-v {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}
.bdr-ai-gradient-input-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  --ring: conic-gradient(from var(--bdr-ai-gradient-input-border-a),
    color-mix(in srgb, var(--c) var(--bdr-ai-gradient-input-border-v), #cbd5e1),
    color-mix(in srgb, #a855f7 var(--bdr-ai-gradient-input-border-v), #cbd5e1),
    color-mix(in srgb, #ec4899 var(--bdr-ai-gradient-input-border-v), #cbd5e1),
    color-mix(in srgb, #f59e0b var(--bdr-ai-gradient-input-border-v), #cbd5e1),
    color-mix(in srgb, var(--c) var(--bdr-ai-gradient-input-border-v), #cbd5e1));
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.6em;
  box-sizing: border-box;
  width: 17em;
  height: 3.2em;
  padding: 0 1.2em;
  border-radius: 99em;
  font-family: system-ui, sans-serif;
  cursor: text;
  animation: bdr-ai-gradient-input-border-spin 5s linear infinite;
  transition: --bdr-ai-gradient-input-border-v 0.4s ease;
}
.bdr-ai-gradient-input-border::before,
.bdr-ai-gradient-input-border::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.bdr-ai-gradient-input-border::before {
  inset: 0.3em 0.8em;
  background: var(--ring);
  filter: blur(0.8em);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.bdr-ai-gradient-input-border::after {
  inset: 0;
  border: 0.14em solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--ring) border-box;
}
.bdr-ai-gradient-input-border-icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  fill: var(--c);
}
.bdr-ai-gradient-input-border-field {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #0f172a;
  font: inherit;
  outline: none;
}
.bdr-ai-gradient-input-border-field::placeholder { color: #94a3b8; }
.bdr-ai-gradient-input-border:hover { --bdr-ai-gradient-input-border-v: 75%; }
.bdr-ai-gradient-input-border:focus-within { --bdr-ai-gradient-input-border-v: 100%; }
.bdr-ai-gradient-input-border:focus-within::before { opacity: 0.6; }
@keyframes bdr-ai-gradient-input-border-spin {
  to { --bdr-ai-gradient-input-border-a: 360deg; }
}

.bdr-running-gradient-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --run: var(--c), color-mix(in oklch, var(--c), #ec4899 80%), color-mix(in oklch, var(--c), #f59e0b 75%), var(--c);
  box-sizing: border-box;
  border: 0.22em solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--c) 10%, #0b0f19), color-mix(in srgb, var(--c) 10%, #0b0f19)) padding-box,
    linear-gradient(90deg, var(--run)) 0 0 / 11.75em 1em repeat-x border-box,
    linear-gradient(180deg, var(--run)) 100% 8.5em / 1em 11.75em repeat-y border-box,
    linear-gradient(270deg, var(--run)) 3.25em 100% / 11.75em 1em repeat-x border-box,
    linear-gradient(0deg, var(--run)) 0 0 / 1em 11.75em repeat-y border-box;
  color: #f1f5f9;
  animation: bdr-running-gradient-border-run 3s linear infinite;
}
@keyframes bdr-running-gradient-border-run {
  to { background-position: 0 0, 11.75em 0, 100% 20.25em, -8.5em 100%, 0 -11.75em; }
}

@property --bdr-dual-border-beam-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.bdr-dual-border-beam {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
}
.bdr-dual-border-beam::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.15em;
  border-radius: inherit;
  background:
    conic-gradient(from var(--bdr-dual-border-beam-a), transparent 0 78%, var(--c) 99.5%, transparent 0),
    conic-gradient(from calc(var(--bdr-dual-border-beam-a) * -1), transparent 0 0.5%, color-mix(in oklch, var(--c), #ec4899 85%) 0, transparent 21.5%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  animation: bdr-dual-border-beam-cross 4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes bdr-dual-border-beam-cross {
  0%   { --bdr-dual-border-beam-a: 0deg; }
  50%  { --bdr-dual-border-beam-a: 180deg; }
  100% { --bdr-dual-border-beam-a: 360deg; }
}

.bdr-color-changing-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  animation: bdr-color-changing-border-cycle 6s linear infinite;
}
.bdr-color-changing-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.2em;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--c), color-mix(in oklch, var(--c), #a855f7 45%));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.bdr-color-changing-border-label {
  color: color-mix(in srgb, var(--c) 70%, currentColor);
}
@keyframes bdr-color-changing-border-cycle {
  to { filter: hue-rotate(360deg); }
}

.bdr-multicolor-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  box-sizing: border-box;
  border: 0.22em solid;
  border-color: var(--c) #ef4444 #facc15 #22c55e;
  background: color-mix(in srgb, var(--c) 6%, transparent);
  animation: bdr-multicolor-border-hop 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes bdr-multicolor-border-hop {
  0%, 18%  { border-color: var(--c) #ef4444 #facc15 #22c55e; }
  25%, 43% { border-color: #22c55e var(--c) #ef4444 #facc15; }
  50%, 68% { border-color: #facc15 #22c55e var(--c) #ef4444; }
  75%, 93% { border-color: #ef4444 #facc15 #22c55e var(--c); }
  100%     { border-color: var(--c) #ef4444 #facc15 #22c55e; }
}

.bdr-gradient-bottom-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --bar: linear-gradient(90deg, var(--c), color-mix(in oklch, var(--c), #ec4899 80%), color-mix(in oklch, var(--c), #f59e0b 75%), var(--c));
  border-radius: 0.8em 0.8em 0.25em 0.25em;
  background: var(--bar) 0 100% / 15em 0.22em repeat-x, color-mix(in srgb, var(--c) 8%, transparent);
  animation: bdr-gradient-bottom-border-flow 3s linear infinite;
}
.bdr-gradient-bottom-border::after {
  content: "";
  position: absolute;
  inset: auto 1em -0.25em;
  height: 0.35em;
  background: var(--bar) 0 0 / 15em 100% repeat-x;
  filter: blur(0.45em);
  opacity: 0.7;
  pointer-events: none;
  animation: bdr-gradient-bottom-border-flow 3s linear infinite;
}
@keyframes bdr-gradient-bottom-border-flow {
  from { background-position: -1em 100%, 0 0; }
  to   { background-position: 14em 100%, 0 0; }
}

.bdr-top-highlight-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  align-content: center;
  gap: 0.3em;
  overflow: hidden;
  background: color-mix(in srgb, var(--c) 10%, #0b0f19);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
  color: #f1f5f9;
}
.bdr-top-highlight-border::before,
.bdr-top-highlight-border::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6em;
  pointer-events: none;
  animation: bdr-top-highlight-border-glide 4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.bdr-top-highlight-border::before {
  z-index: 1;
  height: 0.12em;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 30%, #fff) 50%, transparent);
}
.bdr-top-highlight-border::after {
  height: 3.5em;
  background: radial-gradient(50% 100% at 50% 0, color-mix(in srgb, var(--c) 40%, transparent), transparent);
}
.bdr-top-highlight-border-title { font-size: 1.05em; }
.bdr-top-highlight-border-text {
  color: color-mix(in srgb, #fff 60%, transparent);
  font-size: 0.8em;
  font-weight: 400;
}
@keyframes bdr-top-highlight-border-glide {
  from { transform: translateX(0.5em); }
  to   { transform: translateX(8.5em); }
}

.bdr-story-ring-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  display: inline-grid;
  justify-items: center;
  gap: 0.5em;
  font-family: system-ui, sans-serif;
}
.bdr-story-ring-border-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.5em;
  height: 5.5em;
}
.bdr-story-ring-border-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.27em), #000 calc(100% - 0.25em));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.27em), #000 calc(100% - 0.25em));
  animation: bdr-story-ring-border-spin 3s linear infinite;
}
.bdr-story-ring-border-photo {
  --skin: color-mix(in srgb, var(--c) 18%, #fff);
  width: calc(100% - 0.85em);
  height: calc(100% - 0.85em);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, var(--skin) 0 17%, transparent 18%),
    radial-gradient(34% 30% at 50% 98%, var(--skin) 0 98%, transparent 100%),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 50%, #fff), var(--c));
}
.bdr-story-ring-border-name {
  font-size: 0.85em;
  font-weight: 500;
}
@keyframes bdr-story-ring-border-spin {
  to { transform: rotate(1turn); }
}

@property --bdr-pulsing-gradient-border-w {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --bdr-pulsing-gradient-border-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.bdr-pulsing-gradient-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 10%, #0b0f19);
  color: #f1f5f9;
}
.bdr-pulsing-gradient-border::before {
  content: "";
  position: absolute;
  inset: calc(var(--bdr-pulsing-gradient-border-w) * -1);
  padding: var(--bdr-pulsing-gradient-border-w);
  border-radius: calc(1em + var(--bdr-pulsing-gradient-border-w));
  background: conic-gradient(from var(--bdr-pulsing-gradient-border-a), var(--c), color-mix(in oklch, var(--c), #ec4899 75%), color-mix(in oklch, var(--c), #8b5cf6 60%), var(--c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  animation:
    bdr-pulsing-gradient-border-breathe 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite,
    bdr-pulsing-gradient-border-turn 9.6s linear infinite;
}
@keyframes bdr-pulsing-gradient-border-breathe {
  0%, 100% { --bdr-pulsing-gradient-border-w: 0.1em; opacity: 0.7; }
  50%      { --bdr-pulsing-gradient-border-w: 0.45em; opacity: 1; }
}
@keyframes bdr-pulsing-gradient-border-turn {
  to { --bdr-pulsing-gradient-border-a: 360deg; }
}

.bdr-holographic-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 8%, #0d0f16);
  color: #f8fafc;
}
.bdr-holographic-border::before,
.bdr-holographic-border::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 0.9) 50%, transparent 62%) 100% 0 / 300% 100% no-repeat,
    linear-gradient(60deg, #f9a8d4, color-mix(in srgb, var(--c) 45%, #fff), #6ee7b7, #fde047, #c4b5fd, #f0abfc, #f9a8d4) 0 0 / 300% 300%;
  pointer-events: none;
  animation: bdr-holographic-border-tilt 4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.bdr-holographic-border::before {
  padding: 0.3em;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.bdr-holographic-border::after { opacity: 0.12; }
@keyframes bdr-holographic-border-tilt {
  from { background-position: 100% 0, 0% 0%; }
  to   { background-position: 0% 0, 100% 100%; }
}

@property --bdr-aurora-border-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --bdr-aurora-border-b {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.bdr-aurora-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --night: color-mix(in srgb, var(--c) 8%, #050914);
  --aurora:
    conic-gradient(from var(--bdr-aurora-border-a) at 30% 50%, #34d399, transparent 18% 40%, var(--c) 55%, transparent 70% 85%, #34d399),
    conic-gradient(from var(--bdr-aurora-border-b) at 70% 50%, #a78bfa, transparent 20% 45%, #22d3ee 60%, transparent 75% 90%, #a78bfa);
  isolation: isolate;
  overflow: hidden;
  background: var(--night);
  color: #e2e8f0;
  letter-spacing: 0.04em;
  animation:
    bdr-aurora-border-a 9s linear infinite,
    bdr-aurora-border-b 13s linear infinite reverse;
}
.bdr-aurora-border::before,
.bdr-aurora-border::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.bdr-aurora-border::before {
  inset: 0;
  z-index: -2;
  background: var(--aurora);
  filter: blur(1.1em);
}
.bdr-aurora-border::after {
  inset: 1.1em 1.3em;
  z-index: -1;
  border-radius: 1em;
  background: var(--night);
  filter: blur(0.9em);
}
.bdr-aurora-border-rim {
  position: absolute;
  inset: 0;
  padding: 0.1em;
  border-radius: inherit;
  background: var(--aurora);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
@keyframes bdr-aurora-border-a {
  to { --bdr-aurora-border-a: 360deg; }
}
@keyframes bdr-aurora-border-b {
  to { --bdr-aurora-border-b: 360deg; }
}

@property --bdr-spotlight-border-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.bdr-spotlight-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --beam: conic-gradient(from var(--bdr-spotlight-border-a) at 50% 100%, transparent, color-mix(in srgb, var(--c) 70%, #fff) 18deg, transparent 36deg);
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(1.4em 0.5em at 50% 100%, color-mix(in srgb, var(--c) 50%, #fff), transparent),
    color-mix(in srgb, var(--c) 10%, #0b0f19);
  color: #f1f5f9;
  animation: bdr-spotlight-border-sweep 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.bdr-spotlight-border::before,
.bdr-spotlight-border::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.bdr-spotlight-border::before {
  z-index: -1;
  background: var(--beam);
  opacity: 0.2;
}
.bdr-spotlight-border::after {
  padding: 0.14em;
  background: var(--beam), color-mix(in srgb, var(--c) 14%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@keyframes bdr-spotlight-border-sweep {
  0%, 100% { --bdr-spotlight-border-a: -62deg; }
  50%      { --bdr-spotlight-border-a: 26deg; }
}

@property --bdr-stepped-rainbow-border-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.bdr-stepped-rainbow-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  box-sizing: border-box;
  border: 0.24em solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--bdr-stepped-rainbow-border-a),
      #ef4444 0 15.6%, transparent 0 16.67%,
      #f97316 0 32.3%, transparent 0 33.33%,
      #facc15 0 49%, transparent 0 50%,
      #22c55e 0 65.6%, transparent 0 66.67%,
      #3b82f6 0 82.3%, transparent 0 83.33%,
      #a855f7 0 99%, transparent 0) border-box;
  color: color-mix(in srgb, var(--c) 55%, #111827);
  animation: bdr-stepped-rainbow-border-tick 6s cubic-bezier(0.7, 0, 0.25, 1) infinite;
}
@keyframes bdr-stepped-rainbow-border-tick {
  0%      { --bdr-stepped-rainbow-border-a: 0deg; }
  16.667% { --bdr-stepped-rainbow-border-a: 60deg; }
  33.333% { --bdr-stepped-rainbow-border-a: 120deg; }
  50%     { --bdr-stepped-rainbow-border-a: 180deg; }
  66.667% { --bdr-stepped-rainbow-border-a: 240deg; }
  83.333% { --bdr-stepped-rainbow-border-a: 300deg; }
  100%    { --bdr-stepped-rainbow-border-a: 360deg; }
}

@property --bdr-two-tone-border-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --bdr-two-tone-border-s {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}
.bdr-two-tone-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --two: color-mix(in oklch, var(--c), #f59e0b 85%);
  box-sizing: border-box;
  border: 0.22em solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--c) 10%, #0b0f19), color-mix(in srgb, var(--c) 10%, #0b0f19)) padding-box,
    conic-gradient(from var(--bdr-two-tone-border-a), var(--c) 0 calc(var(--bdr-two-tone-border-s) - 3%), var(--two) calc(var(--bdr-two-tone-border-s) + 3%) 97%, var(--c)) border-box;
  color: #f1f5f9;
  animation:
    bdr-two-tone-border-turn 8s linear infinite,
    bdr-two-tone-border-tug 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes bdr-two-tone-border-turn {
  to { --bdr-two-tone-border-a: 360deg; }
}
@keyframes bdr-two-tone-border-tug {
  from { --bdr-two-tone-border-s: 28%; }
  to   { --bdr-two-tone-border-s: 72%; }
}

@property --bdr-color-wipe-border-p {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --bdr-color-wipe-border-from {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --bdr-color-wipe-border-to {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
.bdr-color-wipe-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --one: var(--c);
  --two: color-mix(in oklch, var(--c), #ec4899 85%);
  --three: color-mix(in oklch, var(--c), #f59e0b 80%);
  box-sizing: border-box;
  border: 0.24em solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(var(--bdr-color-wipe-border-to) calc(var(--bdr-color-wipe-border-p) - 3%), var(--bdr-color-wipe-border-from) var(--bdr-color-wipe-border-p)) border-box;
  color: #111827;
  animation: bdr-color-wipe-border-paint 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes bdr-color-wipe-border-paint {
  0%     { --bdr-color-wipe-border-p: 0%;   --bdr-color-wipe-border-from: var(--one);   --bdr-color-wipe-border-to: var(--two); }
  33.3%  { --bdr-color-wipe-border-p: 103%; --bdr-color-wipe-border-from: var(--one);   --bdr-color-wipe-border-to: var(--two); }
  33.4%  { --bdr-color-wipe-border-p: 0%;   --bdr-color-wipe-border-from: var(--two);   --bdr-color-wipe-border-to: var(--three); }
  66.6%  { --bdr-color-wipe-border-p: 103%; --bdr-color-wipe-border-from: var(--two);   --bdr-color-wipe-border-to: var(--three); }
  66.7%  { --bdr-color-wipe-border-p: 0%;   --bdr-color-wipe-border-from: var(--three); --bdr-color-wipe-border-to: var(--one); }
  100%   { --bdr-color-wipe-border-p: 103%; --bdr-color-wipe-border-from: var(--three); --bdr-color-wipe-border-to: var(--one); }
}

.bdr-fire-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --ember: color-mix(in srgb, var(--c) 8%, #140806);
  --fire: linear-gradient(0deg, #7f1d1d, #dc2626, #f97316, #fbbf24, #fef3c7, #fbbf24, #f97316, #dc2626, #7f1d1d) 0 0 / 100% 5em;
  isolation: isolate;
  color: #fde68a;
  letter-spacing: 0.04em;
}
.bdr-fire-border::before,
.bdr-fire-border::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.bdr-fire-border::before {
  inset: 0.1em 0.15em 0.5em;
  background: var(--fire);
  filter: blur(0.55em);
  transform: translateY(-0.2em);
  animation:
    bdr-fire-border-rise 1.6s linear infinite,
    bdr-fire-border-flicker 1.9s linear infinite;
}
.bdr-fire-border::after {
  inset: 0;
  border: 0.18em solid transparent;
  background: linear-gradient(var(--ember), var(--ember)) padding-box, var(--fire) border-box;
  animation: bdr-fire-border-rise 1.6s linear infinite;
}
@keyframes bdr-fire-border-rise {
  to { background-position: 0 -5em; }
}
@keyframes bdr-fire-border-flicker {
  0%, 100% { opacity: 0.8; }
  12%      { opacity: 0.55; }
  27%      { opacity: 0.95; }
  41%      { opacity: 0.6; }
  58%      { opacity: 1; }
  73%      { opacity: 0.65; }
  88%      { opacity: 0.9; }
}

@property --bdr-mesh-gradient-border-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --bdr-mesh-gradient-border-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.bdr-mesh-gradient-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --x: var(--bdr-mesh-gradient-border-x);
  --y: var(--bdr-mesh-gradient-border-y);
  box-sizing: border-box;
  border: 0.26em solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    radial-gradient(circle at var(--x) var(--y), color-mix(in oklch, var(--c), #ec4899 85%), transparent 55%) border-box,
    radial-gradient(circle at calc(100% - var(--x)) calc(100% - var(--y)), color-mix(in oklch, var(--c), #22d3ee 80%), transparent 55%) border-box,
    radial-gradient(circle at var(--y) calc(100% - var(--x)), color-mix(in oklch, var(--c), #facc15 85%), transparent 50%) border-box,
    linear-gradient(var(--c), var(--c)) border-box;
  color: #111827;
  animation: bdr-mesh-gradient-border-drift 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes bdr-mesh-gradient-border-drift {
  0%, 100% { --bdr-mesh-gradient-border-x: 10%; --bdr-mesh-gradient-border-y: 15%; }
  25%      { --bdr-mesh-gradient-border-x: 90%; --bdr-mesh-gradient-border-y: 25%; }
  50%      { --bdr-mesh-gradient-border-x: 80%; --bdr-mesh-gradient-border-y: 90%; }
  75%      { --bdr-mesh-gradient-border-x: 15%; --bdr-mesh-gradient-border-y: 80%; }
}

@property --bdr-grainy-gradient-border-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.bdr-grainy-gradient-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --fill: color-mix(in srgb, var(--c) 10%, #0b0f19);
  box-sizing: border-box;
  isolation: isolate;
  border: 0.34em solid transparent;
  background:
    linear-gradient(var(--fill), var(--fill)) padding-box,
    conic-gradient(from var(--bdr-grainy-gradient-border-a), var(--c), color-mix(in oklch, var(--c), #f97316 75%), color-mix(in oklch, var(--c), #ec4899 80%), var(--c)) border-box;
  color: #f8fafc;
  animation: bdr-grainy-gradient-border-spin 8s linear infinite;
}
.bdr-grainy-gradient-border-grain {
  position: absolute;
  inset: -0.34em;
  width: calc(100% + 0.68em);
  height: calc(100% + 0.68em);
  clip-path: inset(0 round 1em);
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}
@keyframes bdr-grainy-gradient-border-spin {
  to { --bdr-grainy-gradient-border-a: 360deg; }
}

@property --bdr-cut-corner-gradient-border-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.bdr-cut-corner-gradient-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  isolation: isolate;
  border-radius: 0;
  clip-path: polygon(1.4em 0, 100% 0, 100% calc(100% - 1.4em), calc(100% - 1.4em) 100%, 0 100%, 0 1.4em);
  background: conic-gradient(from var(--bdr-cut-corner-gradient-border-a), var(--c), color-mix(in oklch, var(--c), #22d3ee 75%), color-mix(in srgb, var(--c) 30%, transparent) 30% 45%, color-mix(in oklch, var(--c), #22d3ee 75%), var(--c) 70%, color-mix(in srgb, var(--c) 30%, transparent) 85%, var(--c));
  color: color-mix(in srgb, var(--c) 30%, #fff);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: bdr-cut-corner-gradient-border-spin 4s linear infinite;
}
.bdr-cut-corner-gradient-border::before {
  content: "";
  position: absolute;
  inset: 0.18em;
  z-index: -1;
  clip-path: polygon(1.295em 0, 100% 0, 100% calc(100% - 1.295em), calc(100% - 1.295em) 100%, 0 100%, 0 1.295em);
  background: color-mix(in srgb, var(--c) 10%, #0b0f19);
}
@keyframes bdr-cut-corner-gradient-border-spin {
  to { --bdr-cut-corner-gradient-border-a: 360deg; }
}

.bdr-candy-stripe-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  box-sizing: border-box;
  align-content: center;
  gap: 0.2em;
  border: 0.5em solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    repeating-linear-gradient(45deg, var(--c) 0 0.5em, color-mix(in srgb, var(--c) 12%, #fff) 0 1em) 0 0 / 1.4142em 1.4142em border-box;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent);
  color: #111827;
  animation: bdr-candy-stripe-border-roll 1s linear infinite;
}
.bdr-candy-stripe-border-title { font-weight: 700; }
.bdr-candy-stripe-border-note {
  color: color-mix(in srgb, var(--c) 60%, #334155);
  font-size: 0.8em;
  font-weight: 500;
}
@keyframes bdr-candy-stripe-border-roll {
  to { background-position: 0 0, 1.4142em 0; }
}

.bdr-offset-gradient-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  isolation: isolate;
  color: #111827;
}
.bdr-offset-gradient-border::before,
.bdr-offset-gradient-border::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.bdr-offset-gradient-border::before {
  padding: 0.18em;
  background: linear-gradient(135deg, var(--c), color-mix(in oklch, var(--c), #ec4899 80%), color-mix(in oklch, var(--c), #f59e0b 75%));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: bdr-offset-gradient-border-orbit 4s linear infinite;
}
.bdr-offset-gradient-border::after {
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, #cbd5e1);
}
@keyframes bdr-offset-gradient-border-orbit {
  from { transform: rotate(0turn) translate(0.55em) rotate(0turn); }
  to   { transform: rotate(1turn) translate(0.55em) rotate(-1turn); }
}

.bdr-snake-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --t: 3.6s;
  --w: 0.2em;
  --tail: 5.5em;
  overflow: hidden;
  border-radius: 0.3em;
  background: color-mix(in srgb, var(--c) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent);
}
.bdr-snake-border-top,
.bdr-snake-border-right,
.bdr-snake-border-bottom,
.bdr-snake-border-left {
  position: absolute;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 0.2em var(--c));
  animation: bdr-snake-border-x var(--t) linear infinite;
}
.bdr-snake-border-top,
.bdr-snake-border-bottom {
  left: 0;
  width: 100%;
  height: var(--w);
  background-image: linear-gradient(90deg, transparent, var(--c) 75%);
  background-size: var(--tail) 100%;
}
.bdr-snake-border-right,
.bdr-snake-border-left {
  top: 0;
  width: var(--w);
  height: 100%;
  background-image: linear-gradient(180deg, transparent, var(--c) 75%);
  background-size: 100% var(--tail);
  animation-name: bdr-snake-border-y;
}
.bdr-snake-border-top { top: 0; }
.bdr-snake-border-right { right: 0; animation-delay: calc(var(--t) * -0.681); }
.bdr-snake-border-bottom { bottom: 0; rotate: 180deg; animation-delay: calc(var(--t) * -0.5); }
.bdr-snake-border-left { left: 0; rotate: 180deg; animation-delay: calc(var(--t) * -0.181); }
/* The box is 15em by 8.5em, 47em around: an edge takes its share of the loop. */
@keyframes bdr-snake-border-x {
  0%           { transform: translateX(calc(var(--tail) * -1)); }
  31.9%        { transform: translateX(calc(100% - var(--tail))); }
  42.55%, 100% { transform: translateX(100%); }
}
@keyframes bdr-snake-border-y {
  0%           { transform: translateY(calc(var(--tail) * -1)); }
  18.09%       { transform: translateY(calc(100% - var(--tail))); }
  28.72%, 100% { transform: translateY(100%); }
}

.bdr-neon-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --lit: color-mix(in srgb, var(--c) 35%, #fff);
  background: color-mix(in srgb, var(--c) 7%, #0a0a10);
  box-shadow: 0 0 1.4em color-mix(in srgb, var(--c) 22%, transparent);
  color: var(--lit);
}
.bdr-neon-border::before,
.bdr-neon-border::after {
  content: "";
  position: absolute;
  pointer-events: none;
  animation: bdr-neon-border-hum 5s linear infinite;
}
.bdr-neon-border::before {
  inset: 0.6em;
  border: 0.14em solid var(--lit);
  border-radius: 0.55em;
  box-shadow:
    0 0 0.15em var(--c),
    0 0 0.6em var(--c),
    0 0 1.3em color-mix(in srgb, var(--c) 55%, transparent),
    inset 0 0 0.15em var(--c),
    inset 0 0 0.7em color-mix(in srgb, var(--c) 50%, transparent);
}
.bdr-neon-border::after {
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 16%, transparent), transparent);
}
.bdr-neon-border-text {
  position: relative;
  font-size: 1.15em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 0.12em var(--c), 0 0 0.5em var(--c);
  animation: bdr-neon-border-hum 5s linear infinite;
}
@keyframes bdr-neon-border-hum {
  0%, 9%, 13.5%, 64%, 66%, 100% { opacity: 1; }
  10%, 12% { opacity: 0.3; }
  11%      { opacity: 0.95; }
  40%      { opacity: 0.92; }
  65%      { opacity: 0.55; }
}

.bdr-glowing-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 5%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent);
  color: color-mix(in srgb, var(--c) 45%, #111827);
}
.bdr-glowing-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0.8em 0.05em var(--c), 0 0 1.8em color-mix(in srgb, var(--c) 35%, transparent);
  pointer-events: none;
  animation: bdr-glowing-border-breathe 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes bdr-glowing-border-breathe {
  50% { opacity: 0.5; }
}

.bdr-border-draw {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --t: 4s;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  background: color-mix(in srgb, var(--c) 5%, transparent);
}
.bdr-border-draw-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.bdr-border-draw-svg rect {
  rx: 1em;
  fill: none;
}
.bdr-border-draw-track {
  stroke: color-mix(in srgb, var(--c) 16%, transparent);
  stroke-width: 0.14em;
}
.bdr-border-draw-line {
  stroke: var(--c);
  stroke-width: 0.14em;
  stroke-dasharray: 100 100;
  animation: bdr-border-draw-line var(--t) var(--ease) infinite;
}
.bdr-border-draw-pen {
  stroke: color-mix(in srgb, var(--c) 75%, #fff);
  stroke-width: 0.42em;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  filter: drop-shadow(0 0 0.25em var(--c));
  animation: bdr-border-draw-pen var(--t) var(--ease) infinite;
}
@keyframes bdr-border-draw-line {
  0%       { stroke-dashoffset: 100; }
  45%, 58% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: -100; }
}
@keyframes bdr-border-draw-pen {
  0%       { stroke-dashoffset: 0; opacity: 1; }
  45%      { stroke-dashoffset: -100; opacity: 1; }
  50%      { opacity: 0; }
  53%      { opacity: 0; }
  58%      { stroke-dashoffset: -100; opacity: 1; }
  100%     { stroke-dashoffset: -200; opacity: 1; }
}

.bdr-marching-ants-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  border-radius: 0;
  background: color-mix(in srgb, var(--c) 7%, transparent);
}
.bdr-marching-ants-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.bdr-marching-ants-border-svg rect {
  fill: none;
  stroke-width: 0.1em;
}
.bdr-marching-ants-border-base { stroke: color-mix(in srgb, var(--c) 12%, #fff); }
.bdr-marching-ants-border-ants {
  stroke: var(--c);
  stroke-dasharray: 1 1;
  animation: bdr-marching-ants-border-march 0.9s linear infinite;
}
.bdr-marching-ants-border::after {
  content: "";
  position: absolute;
  inset: -0.25em;
  --h: linear-gradient(var(--c) 0 0);
  background:
    var(--h) 0 0, var(--h) 50% 0, var(--h) 100% 0,
    var(--h) 0 50%, var(--h) 100% 50%,
    var(--h) 0 100%, var(--h) 50% 100%, var(--h) 100% 100%;
  background-size: 0.5em 0.5em;
  background-repeat: no-repeat;
  pointer-events: none;
}
@keyframes bdr-marching-ants-border-march {
  to { stroke-dashoffset: -2; }
}

.bdr-electric-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 8%, #07070c);
  color: color-mix(in srgb, var(--c) 30%, #fff);
}
.bdr-electric-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 0.2em var(--c)) drop-shadow(0 0 0.5em color-mix(in srgb, var(--c) 70%, transparent));
  pointer-events: none;
}
.bdr-electric-border-svg rect { fill: none; }
.bdr-electric-border-halo {
  stroke: color-mix(in srgb, var(--c) 30%, transparent);
  stroke-width: 2.5;
}
.bdr-electric-border-arc {
  stroke: color-mix(in srgb, var(--c) 45%, #fff);
  stroke-width: 1.2;
  opacity: 0;
  animation: bdr-electric-border-zap 0.36s step-end infinite;
}
.bdr-electric-border-arc:nth-of-type(3) { animation-delay: -0.12s; }
.bdr-electric-border-arc:nth-of-type(4) { animation-delay: -0.24s; }
.bdr-electric-border-text {
  position: relative;
  letter-spacing: 0.04em;
  text-shadow: 0 0 0.4em var(--c);
}
@keyframes bdr-electric-border-zap {
  0%        { opacity: 1; }
  33.3%, 100% { opacity: 0; }
}

.bdr-pulsing-glow-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --beat: 1.4s cubic-bezier(0.33, 0, 0.2, 1) infinite;
  grid-auto-flow: column;
  gap: 0.5em;
  justify-content: center;
  border: 0.12em solid var(--c);
  box-sizing: border-box;
  background: color-mix(in srgb, var(--c) 6%, transparent);
}
.bdr-pulsing-glow-border::before {
  content: "";
  position: absolute;
  inset: -0.12em;
  border-radius: inherit;
  box-shadow: 0 0 0.3em 0.1em var(--c), 0 0 1.4em color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 0.9em color-mix(in srgb, var(--c) 35%, transparent);
  pointer-events: none;
  animation: bdr-pulsing-glow-border-beat var(--beat);
}
.bdr-pulsing-glow-border-dot {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0.5em var(--c);
  animation: bdr-pulsing-glow-border-beat var(--beat);
}
@keyframes bdr-pulsing-glow-border-beat {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  10%      { opacity: 1; transform: scale(1.025); }
  20%      { opacity: 0.45; transform: scale(1); }
  32%      { opacity: 0.95; transform: scale(1.02); }
  60%      { opacity: 0.25; transform: scale(1); }
}

.bdr-corner-brackets-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  border-radius: 0.2em;
  background: color-mix(in srgb, var(--c) 6%, transparent);
}
.bdr-corner-brackets-border::before {
  content: "";
  position: absolute;
  inset: 0;
  --h: linear-gradient(var(--c) 0 0) no-repeat;
  background:
    var(--h) 0 0, var(--h) 0 0,
    var(--h) 100% 0, var(--h) 100% 0,
    var(--h) 0 100%, var(--h) 0 100%,
    var(--h) 100% 100%, var(--h) 100% 100%;
  pointer-events: none;
  animation: bdr-corner-brackets-border-close 4s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes bdr-corner-brackets-border-close {
  0%, 12%, 100% { background-size: 1.4em 0.16em, 0.16em 1.4em; }
  44%, 68%      { background-size: 51% 0.16em, 0.16em 51%; }
}

.bdr-marquee-lights-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 10%, #0d0c10);
  color: color-mix(in srgb, var(--c) 30%, #fff);
}
.bdr-marquee-lights-border-svg {
  position: absolute;
  inset: 0.6em;
  width: calc(100% - 1.2em);
  height: calc(100% - 1.2em);
  overflow: visible;
  pointer-events: none;
}
.bdr-marquee-lights-border-svg rect {
  rx: 0.5em;
  fill: none;
  stroke-width: 0.42em;
  stroke-linecap: round;
}
.bdr-marquee-lights-border-bulbs {
  stroke: color-mix(in srgb, var(--c) 28%, transparent);
  stroke-dasharray: 0 4;
}
.bdr-marquee-lights-border-lit {
  stroke: color-mix(in srgb, var(--c) 35%, #fff);
  stroke-dasharray: 0 12;
  filter: drop-shadow(0 0 0.2em var(--c));
  animation: bdr-marquee-lights-border-chase 0.6s step-end infinite;
}
.bdr-marquee-lights-border-lit:nth-of-type(3) { stroke-dashoffset: -4; animation-delay: -0.4s; }
.bdr-marquee-lights-border-lit:nth-of-type(4) { stroke-dashoffset: -8; animation-delay: -0.2s; }
.bdr-marquee-lights-border-text {
  font-size: 1.05em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 0 0.5em var(--c);
}
@keyframes bdr-marquee-lights-border-chase {
  0%          { opacity: 1; }
  33.3%, 100% { opacity: 0; }
}

.bdr-input-focus-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  display: grid;
  gap: 0.45em;
  align-content: start;
  width: 15em;
  font-family: system-ui, sans-serif;
}
.bdr-input-focus-border-label {
  font-size: 0.8em;
  font-weight: 600;
  opacity: 0.75;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.bdr-input-focus-border-field {
  position: relative;
  border-radius: 0.6em;
  transition: box-shadow 0.4s ease;
}
.bdr-input-focus-border input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.75em 0.9em;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--c) 5%, transparent);
  color: inherit;
  font: inherit;
  outline: none;
  transition: border-color 0.3s ease;
}
.bdr-input-focus-border input::placeholder { color: inherit; opacity: 0.45; }
.bdr-input-focus-border-field:hover input { border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.bdr-input-focus-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.bdr-input-focus-border-svg rect {
  rx: 0.6em;
  fill: none;
  stroke: var(--c);
  stroke-width: 0.13em;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.bdr-input-focus-border:focus-within .bdr-input-focus-border-label { color: var(--c); opacity: 1; }
.bdr-input-focus-border-field:focus-within { box-shadow: 0 0 0 0.3em color-mix(in srgb, var(--c) 18%, transparent); }
.bdr-input-focus-border-field:focus-within rect { stroke-dashoffset: 0; }

.bdr-neon-sign-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --lit: color-mix(in srgb, var(--c) 35%, #fff);
  background: color-mix(in srgb, var(--c) 6%, #09090d);
  color: var(--lit);
}
.bdr-neon-sign-border-outer,
.bdr-neon-sign-border-inner {
  position: absolute;
  border: 0.14em solid var(--lit);
  box-shadow:
    0 0 0.15em var(--c),
    0 0 0.6em var(--c),
    inset 0 0 0.15em var(--c),
    inset 0 0 0.6em color-mix(in srgb, var(--c) 50%, transparent);
  animation: 4.5s linear infinite;
}
.bdr-neon-sign-border-outer {
  inset: 0.5em;
  border-radius: 0.65em;
  animation-name: bdr-neon-sign-border-outer;
}
.bdr-neon-sign-border-inner {
  inset: 1.05em;
  border-width: 0.1em;
  border-radius: 0.35em;
  filter: hue-rotate(110deg);
  animation-name: bdr-neon-sign-border-inner;
}
.bdr-neon-sign-border-text {
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 0 0.12em var(--c), 0 0 0.45em var(--c);
  animation: bdr-neon-sign-border-outer 4.5s linear infinite;
}
@keyframes bdr-neon-sign-border-outer {
  0%, 6%, 94%, 100% { opacity: 0.14; }
  7%   { opacity: 1; }
  8%   { opacity: 0.3; }
  10%  { opacity: 1; }
  11%  { opacity: 0.5; }
  12%, 78% { opacity: 1; }
  79%, 81% { opacity: 0.14; }
  82%, 84% { opacity: 1; }
  85%, 87% { opacity: 0.14; }
  88%, 93% { opacity: 1; }
}
@keyframes bdr-neon-sign-border-inner {
  0%, 22%, 94%, 100% { opacity: 0.14; }
  23%  { opacity: 1; }
  24%  { opacity: 0.25; }
  26%  { opacity: 0.9; }
  27%, 78% { opacity: 1; }
  79%, 81% { opacity: 0.14; }
  82%, 84% { opacity: 1; }
  85%, 87% { opacity: 0.14; }
  88%, 93% { opacity: 1; }
}

.bdr-inner-glow-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --ease: cubic-bezier(0.45, 0, 0.55, 1);
  background: color-mix(in srgb, var(--c) 4%, transparent);
}
.bdr-inner-glow-border::before,
.bdr-inner-glow-border::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.bdr-inner-glow-border::before {
  box-shadow: inset 0 0 0 1px var(--c), inset 0 0 0.6em color-mix(in srgb, var(--c) 60%, transparent);
  animation: bdr-inner-glow-border-rim 3.2s var(--ease) infinite;
}
.bdr-inner-glow-border::after {
  box-shadow: inset 0 0 2.4em 0.3em color-mix(in srgb, var(--c) 55%, transparent);
  opacity: 0;
  animation: bdr-inner-glow-border-wash 3.2s var(--ease) infinite;
}
@keyframes bdr-inner-glow-border-rim {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@keyframes bdr-inner-glow-border-wash {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

.bdr-ripple-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  border: 0.12em solid var(--c);
  box-sizing: border-box;
  background: color-mix(in srgb, var(--c) 8%, #fff);
  color: color-mix(in srgb, var(--c) 45%, #111827);
}
.bdr-ripple-border::before,
.bdr-ripple-border::after {
  content: "";
  position: absolute;
  inset: -0.12em;
  border-radius: inherit;
  outline: 0.12em solid var(--c);
  pointer-events: none;
  animation: bdr-ripple-border-out 2.4s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}
.bdr-ripple-border::after { animation-delay: -1.2s; }
@keyframes bdr-ripple-border-out {
  0%   { outline-offset: 0; opacity: 1; }
  100% { outline-offset: 1.5em; opacity: 0; }
}

.bdr-blinking-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  grid-auto-flow: column;
  gap: 0.5em;
  justify-content: center;
  background: color-mix(in srgb, var(--c) 7%, transparent);
}
.bdr-blinking-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.14em solid var(--c);
  border-radius: inherit;
  box-shadow: 0 0 0.7em color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 0.5em color-mix(in srgb, var(--c) 30%, transparent);
  pointer-events: none;
  animation: bdr-blinking-border-flash 2.2s step-end infinite;
}
.bdr-blinking-border-icon {
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes bdr-blinking-border-flash {
  0%, 20%, 100% { opacity: 1; }
  10%, 30%      { opacity: 0.12; }
  40%           { opacity: 1; }
}

.bdr-glitch-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  border-radius: 0.3em;
  background: color-mix(in srgb, var(--c) 6%, #08080c);
  color: color-mix(in srgb, var(--c) 25%, #fff);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.bdr-glitch-border::before,
.bdr-glitch-border-a,
.bdr-glitch-border-b {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.13em solid var(--c);
  border-radius: inherit;
  pointer-events: none;
}
.bdr-glitch-border::before {
  box-shadow: 0 0 0.6em color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 0.6em color-mix(in srgb, var(--c) 30%, transparent);
  animation: bdr-glitch-border-jolt 3s step-end infinite;
}
.bdr-glitch-border-a,
.bdr-glitch-border-b {
  opacity: 0;
  animation: bdr-glitch-border-tear 3s step-end infinite;
}
.bdr-glitch-border-a {
  border-width: 0.18em;
  border-color: color-mix(in srgb, var(--c) 35%, #00e5ff);
}
.bdr-glitch-border-b {
  border-width: 0.18em;
  border-color: color-mix(in srgb, var(--c) 35%, #ff2bd6);
  rotate: 180deg;
}
.bdr-glitch-border-text {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: bdr-glitch-border-jolt 3s step-end infinite;
}
@keyframes bdr-glitch-border-tear {
  0%, 16%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  2%  { opacity: 1; transform: translate(-0.3em, 0.1em); clip-path: inset(8% 0 62% 0); }
  5%  { opacity: 1; transform: translate(0.35em, -0.1em); clip-path: inset(55% 0 20% 0); }
  8%  { opacity: 1; transform: translate(-0.2em, 0); clip-path: inset(30% 0 45% 0); }
  11% { opacity: 1; transform: translate(0.25em, 0.1em); clip-path: inset(0 0 80% 0); }
  14% { opacity: 1; transform: translate(-0.15em, -0.05em); clip-path: inset(75% 0 0 0); }
}
@keyframes bdr-glitch-border-jolt {
  0%, 16%, 100% { transform: none; }
  3%  { transform: translateX(0.12em); }
  7%  { transform: translateX(-0.1em); }
  12% { transform: translateX(0.06em); }
}

@property --bdr-countdown-timer-border-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 5;
}
.bdr-countdown-timer-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --t: 6s;
  background: color-mix(in srgb, var(--c) 5%, transparent);
  font-variant-numeric: tabular-nums;
}
.bdr-countdown-timer-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.bdr-countdown-timer-border-svg path {
  fill: none;
  stroke-width: 1.6;
}
.bdr-countdown-timer-border-track { stroke: color-mix(in srgb, var(--c) 16%, transparent); }
.bdr-countdown-timer-border-time {
  stroke: var(--c);
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  animation: bdr-countdown-timer-border-drain var(--t) linear infinite;
}
.bdr-countdown-timer-border-n {
  counter-reset: bdr-countdown-timer-border var(--bdr-countdown-timer-border-n);
  color: var(--c);
  animation: bdr-countdown-timer-border-count var(--t) infinite;
}
.bdr-countdown-timer-border-n::after { content: counter(bdr-countdown-timer-border); }
@keyframes bdr-countdown-timer-border-drain {
  0%     { stroke-dashoffset: 0; }
  83.33% { stroke-dashoffset: -100; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100%   { stroke-dashoffset: -200; }
}
@keyframes bdr-countdown-timer-border-count {
  0%            { --bdr-countdown-timer-border-n: 5; animation-timing-function: steps(5, end); }
  83.33%        { --bdr-countdown-timer-border-n: 0; }
  83.34%, 100%  { --bdr-countdown-timer-border-n: 5; }
}

.bdr-dashed-to-solid-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 5%, transparent);
}
.bdr-dashed-to-solid-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.bdr-dashed-to-solid-border-svg rect {
  rx: 1em;
  fill: none;
  stroke: var(--c);
  stroke-width: 0.16em;
  stroke-linecap: round;
  stroke-dasharray: 0.5 3.5;
  animation:
    bdr-dashed-to-solid-border-join 4s cubic-bezier(0.65, 0, 0.35, 1) infinite,
    bdr-dashed-to-solid-border-flow 1.6s linear infinite;
}
@keyframes bdr-dashed-to-solid-border-join {
  0%, 12%, 100% { stroke-dasharray: 0.5 3.5; }
  46%, 62%      { stroke-dasharray: 4 0; }
}
@keyframes bdr-dashed-to-solid-border-flow {
  to { stroke-dashoffset: -4; }
}

.bdr-dotted-wave-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 5%, transparent);
}
.bdr-dotted-wave-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.bdr-dotted-wave-border-svg rect {
  rx: 1em;
  fill: none;
  stroke-linecap: round;
}
.bdr-dotted-wave-border-dots {
  stroke: color-mix(in srgb, var(--c) 55%, transparent);
  stroke-width: 0.24em;
  stroke-dasharray: 0 2.5;
}
.bdr-dotted-wave-border-big {
  stroke: var(--c);
  stroke-width: 0.5em;
  stroke-dasharray: 0 2.5;
}
.bdr-dotted-wave-border-sweep {
  stroke: #fff;
  stroke-width: 1.2em;
  stroke-dasharray: 24 76;
  filter: blur(0.7em);
  animation: bdr-dotted-wave-border-sweep 2.8s linear infinite;
}
@keyframes bdr-dotted-wave-border-sweep {
  to { stroke-dashoffset: -100; }
}

.bdr-double-dashed-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 5%, transparent);
}
.bdr-double-dashed-border-outer,
.bdr-double-dashed-border-inner {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
.bdr-double-dashed-border-outer {
  inset: 0;
  width: 100%;
  height: 100%;
}
.bdr-double-dashed-border-inner {
  inset: 0.45em;
  width: calc(100% - 0.9em);
  height: calc(100% - 0.9em);
}
.bdr-double-dashed-border rect {
  fill: none;
  stroke-linecap: round;
}
.bdr-double-dashed-border-outer rect {
  rx: 1em;
  stroke: var(--c);
  stroke-width: 0.16em;
  stroke-dasharray: 3 2;
  animation: bdr-double-dashed-border-cw 3s linear infinite;
}
.bdr-double-dashed-border-inner rect {
  rx: 0.6em;
  stroke: color-mix(in srgb, var(--c) 55%, transparent);
  stroke-width: 0.1em;
  stroke-dasharray: 1.2 1.3;
  animation: bdr-double-dashed-border-ccw 3s linear infinite;
}
@keyframes bdr-double-dashed-border-cw {
  to { stroke-dashoffset: -10; }
}
@keyframes bdr-double-dashed-border-ccw {
  to { stroke-dashoffset: 10; }
}

.bdr-stitched-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --thread: color-mix(in srgb, var(--c) 15%, #fde7c2);
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, #fff 7%, transparent) 0 1px, transparent 1px 0.3em),
    color-mix(in srgb, var(--c) 70%, #0b1220);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, #000), inset 0 0 1.2em color-mix(in srgb, #000 30%, transparent);
  color: var(--thread);
  letter-spacing: 0.04em;
}
.bdr-stitched-border-svg {
  position: absolute;
  inset: 0.55em;
  width: calc(100% - 1.1em);
  height: calc(100% - 1.1em);
  overflow: visible;
  pointer-events: none;
}
.bdr-stitched-border-svg rect {
  rx: 0.5em;
  fill: none;
}
.bdr-stitched-border-thread {
  stroke: var(--thread);
  stroke-width: 0.15em;
  filter: drop-shadow(0 0.06em 0 color-mix(in srgb, #000 40%, transparent));
  stroke-linecap: round;
  stroke-dasharray: 1.4 1.1;
}
.bdr-stitched-border-needle {
  stroke: #fff;
  stroke-width: 1em;
  stroke-dasharray: 100 100;
  animation: bdr-stitched-border-sew 5s infinite;
}
/* 40 stitches: one step of 2.5 per stitch. */
@keyframes bdr-stitched-border-sew {
  0%       { stroke-dashoffset: 100; animation-timing-function: steps(40, end); }
  60%, 85% { stroke-dashoffset: 0; animation-timing-function: steps(40, end); }
  100%     { stroke-dashoffset: -100; }
}

.bdr-lightsaber-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 5%, #09090c);
  color: color-mix(in srgb, var(--c) 25%, #fff);
  letter-spacing: 0.06em;
}
.bdr-lightsaber-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 0.25em var(--c)) drop-shadow(0 0 0.6em color-mix(in srgb, var(--c) 60%, transparent));
  pointer-events: none;
  animation: bdr-lightsaber-border-hum 0.14s linear infinite;
}
.bdr-lightsaber-border-svg path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  animation: bdr-lightsaber-border-ignite 5s infinite;
}
.bdr-lightsaber-border-glow {
  stroke: var(--c);
  stroke-width: 4;
  stroke-opacity: 0.7;
}
.bdr-lightsaber-border-core {
  stroke: color-mix(in srgb, var(--c) 12%, #fff);
  stroke-width: 1.4;
}
.bdr-lightsaber-border-hilt {
  position: absolute;
  bottom: -0.4em;
  left: 50%;
  width: 2.8em;
  height: 0.8em;
  margin-left: -1.4em;
  border-radius: 0.2em;
  background:
    repeating-linear-gradient(90deg, #3f3f46 0 0.14em, transparent 0.14em 0.32em) 50% 50% / 55% 60% no-repeat,
    linear-gradient(#f4f4f5, #a1a1aa 45%, #52525b);
  box-shadow: 0 0.1em 0.25em color-mix(in srgb, #000 45%, transparent);
}
@keyframes bdr-lightsaber-border-ignite {
  0%       { stroke-dashoffset: 100; animation-timing-function: cubic-bezier(0.15, 0.85, 0.3, 1); }
  14%, 72% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
  82%, 100% { stroke-dashoffset: 100; }
}
@keyframes bdr-lightsaber-border-hum {
  50% { opacity: 0.86; }
}

.bdr-scanner-frame-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --ease: cubic-bezier(0.45, 0, 0.55, 1);
  background: color-mix(in srgb, var(--c) 5%, transparent);
}
.bdr-scanner-frame-border-corners {
  position: absolute;
  inset: 0;
  border: 0.2em solid var(--c);
  border-radius: inherit;
  -webkit-mask:
    linear-gradient(90deg, #000 18%, transparent 0 82%, #000 0),
    linear-gradient(#000 28%, transparent 0 72%, #000 0);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, #000 18%, transparent 0 82%, #000 0),
    linear-gradient(#000 28%, transparent 0 72%, #000 0);
  mask-composite: intersect;
  animation: bdr-scanner-frame-border-breathe 2.4s var(--ease) infinite;
}
.bdr-scanner-frame-border-code {
  width: 3.4em;
  height: 3.4em;
  fill: currentColor;
  opacity: 0.8;
}
.bdr-scanner-frame-border-beam {
  position: absolute;
  top: 0;
  left: 1.4em;
  right: 1.4em;
  height: 0.14em;
  border-radius: 1em;
  background: linear-gradient(90deg, transparent, var(--c) 20% 80%, transparent);
  box-shadow: 0 0 0.6em 0.1em color-mix(in srgb, var(--c) 55%, transparent);
  animation: bdr-scanner-frame-border-scan 2.4s var(--ease) infinite alternate;
}
@keyframes bdr-scanner-frame-border-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.965, 0.94); }
}
@keyframes bdr-scanner-frame-border-scan {
  from { transform: translateY(1.2em); }
  to   { transform: translateY(7.2em); }
}

.bdr-film-strip-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  overflow: hidden;
  border-radius: 0.3em;
  background: color-mix(in srgb, var(--c) 8%, #0e0e11);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent);
}
.bdr-film-strip-border-holes {
  position: absolute;
  top: 0.4em;
  left: 0;
  width: calc(100% + 1.2em);
  height: 0.6em;
  background: linear-gradient(90deg, #e7e5e4 0 0.62em, transparent 0) 0.3em 0 / 1.2em 100% repeat-x;
  animation: bdr-film-strip-border-roll 0.5s linear infinite;
}
.bdr-film-strip-border-holes + .bdr-film-strip-border-holes {
  top: auto;
  bottom: 0.4em;
}
.bdr-film-strip-border-frame {
  position: absolute;
  inset: 1.35em 0.7em;
  display: grid;
  place-items: center;
  border-radius: 0.2em;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 70%, #000));
  color: #fff;
  letter-spacing: 0.04em;
  animation: bdr-film-strip-border-flicker 0.3s steps(2) infinite;
}
@keyframes bdr-film-strip-border-roll {
  to { transform: translateX(-1.2em); }
}
@keyframes bdr-film-strip-border-flicker {
  50% { opacity: 0.93; }
}

.bdr-hand-drawn-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  border-radius: 0;
}
.bdr-hand-drawn-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.bdr-hand-drawn-border-sketch {
  fill: none;
  stroke: var(--c);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0;
  animation: bdr-hand-drawn-border-boil 0.42s step-end infinite;
}
.bdr-hand-drawn-border-sketch:nth-of-type(2) { animation-delay: -0.28s; }
.bdr-hand-drawn-border-sketch:nth-of-type(3) { animation-delay: -0.14s; }
.bdr-hand-drawn-border-text {
  color: var(--c);
  font: 700 1.25em "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  animation: bdr-hand-drawn-border-jitter 0.42s step-end infinite;
}
@keyframes bdr-hand-drawn-border-boil {
  0%          { opacity: 1; }
  33.3%, 100% { opacity: 0; }
}
@keyframes bdr-hand-drawn-border-jitter {
  0%    { transform: rotate(-1.5deg); }
  33.3% { transform: rotate(0.5deg) translateY(0.04em); }
  66.6% { transform: rotate(-0.5deg) translateX(0.04em); }
}

.bdr-blob-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  box-sizing: border-box;
  border: 0.14em solid var(--c);
  background: color-mix(in srgb, var(--c) 8%, transparent);
  box-shadow: 0 0 1.2em color-mix(in srgb, var(--c) 25%, transparent);
  animation: bdr-blob-border-morph 9s ease-in-out infinite;
}
.bdr-blob-border::before {
  content: "";
  position: absolute;
  inset: -0.5em;
  border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  pointer-events: none;
  animation: bdr-blob-border-morph 9s ease-in-out -6.8s infinite;
}
@keyframes bdr-blob-border-morph {
  0%, 100% { border-radius: 38% 62% 66% 34% / 52% 34% 66% 48%; }
  25%      { border-radius: 70% 30% 38% 62% / 30% 62% 38% 70%; }
  50%      { border-radius: 30% 70% 62% 38% / 66% 30% 70% 34%; }
  75%      { border-radius: 62% 38% 28% 72% / 40% 70% 30% 60%; }
}

.bdr-pixel-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  border-radius: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bdr-pixel-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
  pointer-events: none;
}
.bdr-pixel-border-svg path {
  fill: none;
  stroke-width: 1;
}
.bdr-pixel-border-frame {
  stroke: color-mix(in srgb, var(--c) 22%, transparent);
  stroke-dasharray: 0.85 0.15;
}
.bdr-pixel-border-snake {
  stroke: var(--c);
  stroke-dasharray: 0.85 0.15 0.85 0.15 0.85 0.15 0.85 0.15 0.85 0.15 0.85 82.15;
  animation: bdr-pixel-border-crawl 5.5s steps(88) infinite;
}
.bdr-pixel-border-head {
  stroke: color-mix(in srgb, var(--c) 50%, currentColor);
  stroke-dasharray: 0.85 87.15;
  animation: bdr-pixel-border-crawl-head 5.5s steps(88) infinite;
}
.bdr-pixel-border-text { animation: bdr-pixel-border-blink 1s step-end infinite; }
/* 88 blocks around the frame, one block per step. The head is block 6, so it runs 5 ahead. */
@keyframes bdr-pixel-border-crawl {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -88; }
}
@keyframes bdr-pixel-border-crawl-head {
  from { stroke-dashoffset: -5; }
  to   { stroke-dashoffset: -93; }
}
@keyframes bdr-pixel-border-blink {
  50% { opacity: 0; }
}

.bdr-wavy-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 5%, transparent);
}
.bdr-wavy-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 0.2em color-mix(in srgb, var(--c) 45%, transparent));
  pointer-events: none;
}
.bdr-wavy-border-svg path {
  fill: none;
  stroke: var(--c);
  stroke-width: 0.16em;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: bdr-wavy-border-x 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.bdr-wavy-border-svg .bdr-wavy-border-x { animation-name: bdr-wavy-border-x; }
.bdr-wavy-border-svg .bdr-wavy-border-y { animation-name: bdr-wavy-border-y; animation-delay: -0.7s; }
.bdr-wavy-border-svg .bdr-wavy-border-corners { animation: none; }
@keyframes bdr-wavy-border-x {
  from { transform: scaleY(1); }
  to   { transform: scaleY(-1); }
}
@keyframes bdr-wavy-border-y {
  from { transform: scaleX(1); }
  to   { transform: scaleX(-1); }
}

.bdr-loading-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, var(--c) 5%, transparent);
}
.bdr-loading-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.bdr-loading-border-svg rect {
  rx: 1em;
  fill: none;
  stroke-width: 0.16em;
}
.bdr-loading-border-track { stroke: color-mix(in srgb, var(--c) 15%, transparent); }
.bdr-loading-border-arc {
  stroke: var(--c);
  stroke-linecap: round;
  animation: bdr-loading-border-chase 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes bdr-loading-border-chase {
  0%   { stroke-dasharray: 1 99; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 42 58; stroke-dashoffset: -8; }
  100% { stroke-dasharray: 1 99; stroke-dashoffset: -99; }
}

.bdr-underline-input-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  display: grid;
  gap: 0.35em;
  align-content: start;
  width: 15em;
  font-family: system-ui, sans-serif;
}
.bdr-underline-input-border-label {
  font-size: 0.8em;
  font-weight: 600;
  opacity: 0.75;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.bdr-underline-input-border-field { position: relative; }
.bdr-underline-input-border input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.55em 0.1em;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
  transition: border-color 0.3s ease;
}
.bdr-underline-input-border input::placeholder { color: inherit; opacity: 0.4; }
.bdr-underline-input-border-field:hover input { border-bottom-color: color-mix(in srgb, var(--c) 85%, transparent); }
.bdr-underline-input-border-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.14em;
  background: var(--c);
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bdr-underline-input-border:focus-within .bdr-underline-input-border-line { transform: scaleX(1); }
.bdr-underline-input-border:focus-within .bdr-underline-input-border-label { color: var(--c); opacity: 1; }

.bdr-invalid-input-shake-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  --bad: #ef4444;
  --good: #16a34a;
  display: grid;
  gap: 0.45em;
  align-content: start;
  width: 15em;
  font-family: system-ui, sans-serif;
}
.bdr-invalid-input-shake-border-label {
  font-size: 0.8em;
  font-weight: 600;
  opacity: 0.75;
}
.bdr-invalid-input-shake-border-field { position: relative; }
.bdr-invalid-input-shake-border input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.75em 2.4em 0.75em 0.9em;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--c) 5%, transparent);
  color: inherit;
  font: inherit;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.bdr-invalid-input-shake-border-field:hover input { border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.bdr-invalid-input-shake-border input:focus {
  border-color: var(--c);
  box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--c) 20%, transparent);
}
.bdr-invalid-input-shake-border input:invalid:not(:placeholder-shown) {
  border-color: var(--bad);
  box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--bad) 18%, transparent), 0 0 1em color-mix(in srgb, var(--bad) 30%, transparent);
  animation: bdr-invalid-input-shake-border-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.bdr-invalid-input-shake-border input:valid { border-color: var(--good); }
.bdr-invalid-input-shake-border-check {
  position: absolute;
  top: 50%;
  right: 0.8em;
  width: 1.2em;
  height: 1.2em;
  margin-top: -0.6em;
  fill: none;
  stroke: var(--good);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
}
.bdr-invalid-input-shake-border input:valid + .bdr-invalid-input-shake-border-check { stroke-dashoffset: 0; }
.bdr-invalid-input-shake-border-hint {
  position: absolute;
  top: 100%;
  left: 0.1em;
  margin-top: 0.45em;
  color: var(--bad);
  font-size: 0.72em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.bdr-invalid-input-shake-border input:invalid:not(:placeholder-shown) ~ .bdr-invalid-input-shake-border-hint { opacity: 1; }
@keyframes bdr-invalid-input-shake-border-shake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-0.45em); }
  30%      { transform: translateX(0.4em); }
  45%      { transform: translateX(-0.3em); }
  60%      { transform: translateX(0.2em); }
  75%      { transform: translateX(-0.1em); }
}