.account-area { display: inline-block; margin-left: 12px; vertical-align: middle; }
.account-link { display: inline-flex; position: relative; align-items: center; justify-content: center; min-width: 38px; min-height: 28px; padding: 0 10px; border: 1px solid #d5d5d5; border-radius: 4px; font-size: 12px; line-height: 1; }
.account-link:hover, .account-link:focus-visible { border-color: #222; color: #111; }
.account-tooltip { display: none; position: absolute; right: 0; top: calc(100% + 7px); background: #111; color: #fff; padding: 7px 12px; border-radius: 4px; white-space: nowrap; z-index: 10; }
.account-link:hover .account-tooltip, .account-link:focus-visible .account-tooltip { display: block; }
.auth-card { max-width: 390px; margin: 55px auto 90px; padding: 30px; border: 1px solid #e4e4e4; border-radius: 8px; }
.auth-card h1 { text-align: left; font-size: 27px; margin: 0 0 12px; }
.auth-card p { line-height: 1.7; }
.auth-card label { display: block; margin: 18px 0 6px; color: #222; }
.auth-card input { box-sizing: border-box; width: 100%; padding: 12px; font: inherit; border: 1px solid #aaa; border-radius: 4px; }
.auth-card input:focus-visible { outline: 2px solid #333; outline-offset: 2px; }
.auth-button { display: inline-block; box-sizing: border-box; margin-top: 22px; border: 1px solid #111; border-radius: 4px; padding: 11px 23px; font: inherit; cursor: pointer; }
.auth-card .auth-button, .auth-card .auth-button:visited { color: #fff; background: #111; }
.auth-card .auth-secondary, .auth-card .auth-secondary:visited { color: #111; background: #fff; margin-left: 8px; }
.auth-button:hover { opacity: .8; }
.auth-button:disabled { opacity: .5; cursor: wait; }
.auth-hint { color: #666; font-size: 12px; margin: 5px 0; }
.auth-status { min-height: 24px; margin-top: 16px; color: #8c2525; }
.profile-details { margin: 24px 0 0; }
.profile-details dt { margin-top: 16px; color: #777; font-size: 12px; }
.profile-details dd { margin: 4px 0 0; color: #111; font-size: 17px; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
@media (max-width: 960px) {
  #header { min-width: 0; width: auto; margin: 10px 15px; }
  #canvas { width: auto; margin: 10px 15px; }
  #menu { margin-left: 0; }
  #menu-item { margin: 0 10px; }
  .auth-card { padding: 24px; margin-top: 30px; }
}