/* The family sign-in dialog (built by js/online.js), on every page. */
#account {
  width: min(92vw, 380px);
  color: #aaa;
  background: #0000aa;
  border: 2px solid #aaa;
  box-shadow: 0 0 0 4px #0000aa;
  padding: 16px;
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
}
#account::backdrop { background: rgba(0, 0, 0, 0.6); }
#account h2 { margin: 0 0 8px; color: #ffff55; font-size: 18px; font-weight: normal; letter-spacing: 0.08em; }
#account label { display: block; margin: 10px 0; color: #fff; }
#account input {
  display: block;
  width: 100%;
  margin-top: 4px;
  font: inherit;
  font-size: 18px;
  color: #fff;
  background: #000;
  border: 1px solid #aaa;
  padding: 6px 8px;
}
#account input:focus-visible { outline: 2px solid #ffff55; }
#account button {
  font: inherit;
  color: #000;
  background: #aaa;
  border: 0;
  padding: 6px 14px;
  margin-right: 8px;
  cursor: pointer;
}
#account button:hover, #account button:focus-visible { background: #55ffff; }
#account .close { position: absolute; top: 10px; right: 6px; margin: 0; padding: 2px 8px; }
#account .msg { min-height: 1.2em; color: #ffff55; margin: 8px 0 0; }
#account b { color: #55ffff; font-weight: normal; }
#account h2::before, #account h2::after { content: none; }
#account p { color: #d0d0ff; }