:host {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: 14px;
  background: repeating-linear-gradient(-45deg, #1f1b2e 0 12px, #241f36 12px 24px);
  color: #f0eaff;
  font: 0.95rem/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
}
button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: #3b3355;
  transition: background 150ms ease;
}
button:hover { background: #4a4170; }
button:focus-visible { outline: 2px solid #b69cff; outline-offset: 2px; }
.lock { transition: transform 300ms ease; }
.message {
  margin: 0;
  filter: blur(6px);
  user-select: none;
  transition: filter 400ms ease;
}
:host([revealed]) .message { filter: none; user-select: auto; }
:host([revealed]) .lock { transform: rotate(-20deg); }