/* Passwords: a safe's dial plate. The result sits in a recessed steel slot in a monospace face, with a strength
   meter that fills from red to green. Cool steel page. */
:root { --page: #eef1f3; --card: #ffffff; --ink: #11161a; --soft: #55606a; --line: #d3d9de; --field: #e4e9ec; --act: #1d5c74; --on-act: #ffffff; --stop: #b3261e; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #0f1214; --card: #181d20; --ink: #e7edf1; --soft: #9eabb5; --line: #2a3237; --field: #0b0e10; --act: #79c3df; --on-act: #062330; --stop: #ff8a80; color-scheme: dark; }
}
.out output { display: block; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 18px 16px; box-shadow: inset 0 2px 5px rgb(0 0 0 / .12);
  font: 600 clamp(18px, 5vw, 24px)/1.35 ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; word-break: break-all; min-height: 70px; user-select: all; }
.meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--bar, #b3261e); transition: width .2s; }
input[type="range"] { width: 100%; accent-color: var(--act); min-height: 44px; }
.row .check { flex: 0 1 auto; }