.copy-editor button {
  background: #21162f;
  border: 1px solid #65408d;
  border-radius: .5rem;
  color: #f0e7fc;
  cursor: pointer;
  font: inherit;
  padding: .45rem .8rem;
}
.copy-editor button:hover { background: #38214f; }
.copy-editor :focus-visible,
.copy-editor-trigger:focus-visible { outline: 2px solid #bc85ff; outline-offset: 2px; }
.copy-editor {
  margin: auto;
  padding: clamp(1rem, 4vw, 1.5rem);
  width: min(35rem, calc(100% - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  overflow: auto;
  border: 1px solid #65408d;
  border-radius: .85rem;
  color: #f0e7fc;
  background: #17101f;
  box-shadow: 0 1rem 4rem #000a;
}
.copy-editor::backdrop { background: #060309b8; }
.copy-editor-heading,
.copy-editor-actions { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.copy-editor-heading { justify-content: space-between; }
.copy-editor h2 { font-size: 1.2rem; font-weight: 650; }
.copy-editor p, .copy-editor label { font-size: .9rem; margin-top: .7rem; }
.copy-editor p { color: #c5b5d4; }
.copy-editor label { display: grid; gap: .25rem; }
.copy-editor input:not([hidden]),
.copy-editor select,
.copy-editor textarea {
  width: 100%;
  min-width: 0;
  padding: .5rem;
  background: #100b16;
  border: 1px solid #65408d;
  border-radius: .35rem;
  color: inherit;
}
.copy-editor textarea { resize: vertical; font-family: ui-monospace, monospace; }
.copy-editor-actions { margin-top: .75rem; }
.copy-editor button:disabled { opacity: .5; cursor: default; }
.copy-editor #copy-save { color: #170e21; background: #b278f4; font-weight: 650; }
.copy-editor #copy-save:hover { background: #c99bf9; }
.copy-editor [role="status"] { min-height: 1.3em; }

main .crt-flicker > div:first-child > span:nth-child(3) {
  position: relative;
}

.copy-editor-trigger {
  position: absolute;
  inset: -7px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.copy-passcode {
  width: min(28rem, calc(100% - 1.5rem));
}

.copy-code-row {
  position: relative;
  margin-top: 1rem;
}

.copy-code-slots {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(.2rem, 1.3vw, .45rem);
}

.copy-code-slots span {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 2.4rem;
  aspect-ratio: 5 / 6;
  border: 1px solid #65408d;
  border-radius: .6rem;
  background: #271938;
}

.copy-code-slots span::after {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #251338;
  opacity: 0;
  transform: translateY(.35rem);
  transition: opacity 160ms, transform 220ms cubic-bezier(.2, 1.3, .4, 1);
}

.copy-code-slots [data-filled] { background: #be8df3; }
.copy-code-slots [data-filled]::after { opacity: 1; transform: translateY(0); }

.copy-code-row:focus-within [data-current] {
  border-color: #e1c1ff;
  box-shadow: 0 0 0 1px #e1c1ff;
}

.copy-code-row:focus-within [data-current]::after {
  width: 2px;
  height: 1rem;
  border-radius: 0;
  background: #e1c1ff;
  opacity: 1;
  transform: none;
}

.copy-code-row input {
  position: absolute;
  inset: 0;
  opacity: 0;
  font-size: 16px;
}

.copy-passcode .copy-code-status { min-height: 1.4em; }
.copy-passcode[data-state="error"] .copy-code-status { color: #ff9da7; }
.copy-passcode[data-state="success"] .copy-code-status { color: #d8b6ff; }

.copy-passcode[data-state="error"] [data-filled] {
  border-color: #ff8190;
  animation: copy-code-drain 200ms ease-out calc((7 - var(--slot-index)) * 18ms) both;
}

.copy-passcode[data-state="success"] [data-filled] {
  border-color: #e1c1ff;
  background: #e1c1ff;
}

@keyframes copy-code-drain {
  to { transform: translateY(.3rem); opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .copy-code-slots span, .copy-code-slots span::after {
    animation: none !important;
    transition: none;
  }
}