body {
  font-family: Gill Sans, Gill Sans MT, Calibri, Trebuchet MS, sans-serif;
}

button {
  cursor: pointer;
}

secret-text {
  margin-bottom: 1rem;
}
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.visually-hidden:not(:is(:focus, :active)) {
  clip-path: inset(100%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

:root {
  --copy-button-success: green;
}

copy-button {
  color: #000;
  background: none;
  width: 1rem;
  height: 1rem;
  padding: .3rem .1rem;
  position: relative;
}

copy-button .copy-wrapper {
  fill: var(--copy-button, black);
}

copy-button .copy-wrapper, copy-button .success-wrapper {
  width: 100%;
  height: 100%;
  display: inline-block;
}

copy-button button {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  position: relative;
  top: 2px;
}

copy-button .success-svg {
  fill: var(--copy-button-success, black);
}

copy-button .copy-hint {
  background: var(--copy-button-hint-bg, #333);
  color: var(--copy-button-hint-color, #fff);
  border-radius: var(--copy-button-hint-radius, 4px);
  white-space: nowrap;
  opacity: 0;
  inset: unset;
  transition: opacity .15s ease-in-out, display .15s allow-discrete;
  border: none;
  margin: 0 0 4px;
  padding: .25rem .5rem;
  font-size: .75rem;
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

:is(copy-button .copy-hint):popover-open {
  opacity: 1;
  display: block;
}

@starting-style {
  :is(copy-button .copy-hint):popover-open {
    opacity: 0;
  }
}

.copy-hint--visible:is(copy-button .copy-hint) {
  opacity: 1;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  copy-button .copy-hint {
    transition: none;
  }
}

secret-text {
  --st-bg: #fff;
  --st-border: #1a1a1a;
  --st-radius: 0;
  --st-text: #1a1a1a;
  --st-btn: #8a8a8a;
  --st-btn-hover: #1a1a1a;
  --st-btn-hover-bg: rgba(0, 0, 0, .05);
  --st-focus: #2563eb;
  --st-font: "Courier New", "Courier", monospace;
}

secret-text:not(:defined) {
  display: none;
}

secret-text {
  display: block;
}

secret-text button {
  width: 2rem;
  height: 2rem;
}

secret-text svg {
  width: 100%;
  height: 100%;
}

secret-text copy-button {
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  padding: .2rem;
  display: flex;
}

secret-text copy-button svg {
  fill: var(--st-text);
  transition: fill .2s;
}

secret-text copy-button:hover svg {
  fill: #00f;
}

secret-text copy-button button {
  top: 0;
}

secret-text .secret-text-eye-btn {
  cursor: pointer;
  color: var(--st-btn);
  background: none;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 5px;
  line-height: 0;
  transition: color .15s, background-color .15s;
  display: inline-flex;
}

secret-text .secret-text-eye-btn:hover {
  color: var(--st-btn-hover);
  background-color: var(--st-btn-hover-bg);
}

secret-text .secret-text-eye-btn:focus-visible {
  outline: 2px solid var(--st-focus);
  outline-offset: 1px;
}

.secret-text-inner {
  border: 1.5px solid var(--st-border);
  border-radius: var(--st-radius);
  background: var(--st-bg);
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .55em .4rem .2rem .75em;
  display: flex;
}

.secret-text-value {
  font-family: var(--st-font);
}

.secret-text-actions {
  flex-shrink: 0;
  align-items: center;
  gap: .125rem;
  display: flex;
}

.secret-text-eye-btn eye-regular, .secret-text-eye-btn eye-slash {
  display: flex;
}