.wn-passwurzl {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: #304527;
  font-family: system-ui, sans-serif;
}

.wn-passwurzl *,
.wn-passwurzl *::before,
.wn-passwurzl *::after { box-sizing: border-box; }

.wn-passwurzl h1,
.wn-passwurzl h3 {
  margin: 0;
  color: #246c50;
}

.passwurzl-intro { margin: .35rem 0 0; }

.passwurzl-mode,
.passwurzl-options,
.passwurzl-separators,
.passwurzl-digit {
  margin: 1.5rem 0;
}

.passwurzl-mode {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}

.passwurzl-mode label,
.passwurzl-digit {
  display: flex;
  gap: .55rem;
  align-items: center;
  padding: .75rem;
  border: 1px solid #b7c6a7;
}

.passwurzl-options {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.passwurzl-options select {
  min-height: 2.75rem;
  padding: 0 .65rem;
  border: 1px solid #8fa080;
  border-radius: 0;
  background: #fff;
  color: inherit;
  font: inherit;
}

.passwurzl-separators {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1rem;
  border: 0;
  padding: 0;
}

.passwurzl-separators legend {
  width: 100%;
  margin-bottom: .45rem;
  font-weight: 700;
}

.passwurzl-separators label { white-space: nowrap; }

.passwurzl-result {
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  border: 1px solid #b7c6a7;
  background: #eef4e8;
}

.passwurzl-result > label { font-weight: 700; }

#passwurzl-output {
  display: block;
  min-height: 2em;
  margin: .6rem 0;
  font: 700 clamp(1.05rem, 3vw, 1.35rem)/1.45 ui-monospace, monospace;
  color: #162d20;
  overflow-wrap: anywhere;
  user-select: all;
}

.passwurzl-strength,
.passwurzl-note,
.passwurzl-copy-message {
  margin: .4rem 0 0;
  font-size: .92rem;
}

.passwurzl-note { color: #7a4c00; }
.passwurzl-copy-message { min-height: 1.4em; text-align: center; }

.passwurzl-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.25rem;
}

.wn-passwurzl button {
  min-height: 2.75rem;
  padding: .6rem 1rem;
  border: 0;
  border-radius: 0;
  background: #007c5f;
  color: #fff;
  font: 700 1rem system-ui, sans-serif;
  cursor: pointer;
}

.wn-passwurzl button:hover:not(:disabled) { background: #005f47; }
.wn-passwurzl button:focus-visible, .wn-passwurzl input:focus-visible, .wn-passwurzl select:focus-visible { outline: 3px solid #ffc045; outline-offset: 2px; }
.wn-passwurzl button:disabled { opacity: .55; cursor: wait; }
#copy-btn { background: #ffc045; color: #304527; }
.wn-passwurzl details { margin-top: 1.25rem; }
.hidden { display: none !important; }

@media (max-width: 32rem) {
  .passwurzl-mode { grid-template-columns: 1fr; }
  .passwurzl-options { align-items: stretch; flex-direction: column; }
  .passwurzl-options select { width: 100%; }
  .passwurzl-options .passwurzl-digit { margin: 0; }
  .passwurzl-buttons button { width: 100%; }
}