@property --pb-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.tn-credit {
  display: flex;
  justify-content: center;
  padding: 28px 16px 36px;
}

.pb-wrap {
  --pb-radius: 11px;
  --pb-gold: oklch(0.84 0.15 88);
  --pb-green: oklch(0.82 0.14 162);
  --pb-red: oklch(0.66 0.2 28);
  --pb-purple: oklch(0.58 0.19 305);
  --pb-glow-op: 0.3;
  --pb-rim-op: 0.7;
  position: relative;
  display: inline-block;
  isolation: isolate;
  line-height: 0;
}

.pb-glow {
  position: absolute;
  inset: 1px;
  border-radius: var(--pb-radius);
  box-shadow:
    -4px -5px 16px -3px var(--pb-gold),
    4px -5px 16px -3px var(--pb-green),
    -4px 5px 16px -3px var(--pb-red),
    4px 5px 16px -3px var(--pb-purple);
  opacity: var(--pb-glow-op);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.pb-ring {
  position: absolute;
  inset: 0;
  border-radius: var(--pb-radius);
  padding: 1px;
  background: conic-gradient(from var(--pb-angle) at 50% 50%, var(--pb-gold) 0deg 26deg, var(--pb-green) 78deg 116deg, var(--pb-red) 168deg 206deg, var(--pb-purple) 258deg 296deg, var(--pb-gold) 360deg);
  opacity: var(--pb-rim-op);
  pointer-events: none;
  z-index: 2;
  animation: pb-spin 16s linear infinite;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .pb-ring {
    -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, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
}

@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .pb-ring {
    background: none;
    border: 1px solid rgba(242, 234, 219, 0.28);
    padding: 0;
    animation: none;
  }
}

@keyframes pb-spin {
  to { --pb-angle: 360deg; }
}

.tn-credit a.pb-badge {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 18px 11px;
  gap: 3px;
  border-radius: var(--pb-radius);
  overflow: hidden;
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(242, 234, 219, 0.07) 0%, rgba(242, 234, 219, 0) 46%),
    linear-gradient(160deg, #10161a 0%, #080c0f 52%, #05080a 100%);
  box-shadow:
    inset 0 1px 0 rgba(242, 234, 219, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7),
    0 10px 22px -14px rgba(0, 0, 0, 0.95);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pb-wrap:hover {
  --pb-glow-op: 0.72;
  --pb-rim-op: 1;
}

.pb-wrap:hover .pb-badge {
  transform: translateY(-2px);
}

.tn-credit a.pb-badge:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #06090b, 0 0 0 4px #f2eadb;
}

.tn-credit .pb-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9.6px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(242, 234, 219, 0.78);
}

.tn-credit .pb-brand {
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: #f2eadb;
}

@media (prefers-reduced-motion: reduce) {
  .pb-ring { animation: none; }
  .pb-glow, .tn-credit a.pb-badge { transition: none; }
  .pb-wrap:hover .pb-badge { transform: none; }
}

@media (prefers-contrast: more) {
  .pb-wrap { --pb-glow-op: 0; --pb-rim-op: 1; }
  .tn-credit .pb-label { color: rgba(242, 234, 219, 0.95); }
  .tn-credit a.pb-badge { background: #05080a; }
}