Access Denied 403

<div class="nuda-err-403">
  <div class="nuda-err-403__lock">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
      <path d="M7 11V7a5 5 0 0110 0v4" />
    </svg>
    <div class="nuda-err-403__shake-line"></div>
  </div>
  <div class="nuda-err-403__label">403 — Forbidden</div>
  <p class="nuda-err-403__msg">Access denied</p>
  <p class="nuda-err-403__sub">You don't have permission to view this resource.</p>
  <div class="nuda-err-403__pills">
    <span class="nuda-err-403__pill">Restricted</span>
    <span class="nuda-err-403__pill nuda-err-403__pill--admin">Admin only</span>
  </div>
</div>

.nuda-err-403 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  background: #141414;
  border: 1px solid rgba(255,107,107,.18);
  border-radius: 16px;
  text-align: center;
  width: 100%;
  max-width: 260px;
  gap: 6px;
}

.nuda-err-403__lock {
  position: relative;
  width: 52px;
  height: 52px;
  color: #ff6b6b;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,107,107,.08);
  border-radius: 50%;
  border: 1px solid rgba(255,107,107,.2);
  animation: _nuda-err403shake .6s ease-in-out .2s 1;
}

.nuda-err-403__lock svg {
  width: 26px;
  height: 26px;
}

.nuda-err-403__shake-line {
  position: absolute;
  inset: -4px;
  border: 1.5px solid rgba(255,107,107,.3);
  border-radius: 50%;
  animation: _nuda-err403ring 2.4s ease-out .6s infinite;
}

.nuda-err-403__label {
  font-size: 9px;
  font-family: ui-monospace,monospace;
  font-weight: 700;
  letter-spacing: .1em;
  color: #ff6b6b;
  text-transform: uppercase;
  padding: 2px 8px;
  background: rgba(255,107,107,.08);
  border-radius: 99px;
  border: 1px solid rgba(255,107,107,.2);
}

.nuda-err-403__msg {
  color: #fafafa;
  font-size: 13px;
  font-weight: 700;
  margin: 2px 0 0;
}

.nuda-err-403__sub {
  color: #555;
  font-size: 10px;
  line-height: 1.5;
  margin: 0;
  max-width: 200px;
}

.nuda-err-403__pills {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.nuda-err-403__pill {
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 600;
  background: rgba(255,255,255,.05);
  color: #777;
  border: 1px solid rgba(255,255,255,.08);
}

.nuda-err-403__pill--admin {
  background: rgba(228,255,84,.06);
  color: #e4ff54;
  border-color: rgba(228,255,84,.2);
}

@keyframes _nuda-err403shake {
  0%,100% {
    transform: none;
  }
  20% {
    transform: rotate(-8deg);
  }
  40% {
    transform: rotate(8deg);
  }
  60% {
    transform: rotate(-6deg);
  }
  80% {
    transform: rotate(4deg);
  }
}

@keyframes _nuda-err403ring {
  0% {
    transform: scale(1);
    opacity: .8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-err-403__lock {
    animation: none;
  }
  .nuda-err-403__shake-line {
    animation: none;
  }
}