.account-dialog{
  --account-unit:min(var(--unit),calc((100svh - 100px) / 288));
  position:fixed;inset:calc(76 * var(--account-unit)) calc(60 * var(--unit)) auto auto;
  width:calc(622 * var(--account-unit));height:calc(288 * var(--account-unit));
  max-width:calc(100vw - 32px);max-height:none;margin:0;padding:0;border:0;
  overflow:visible;border-radius:calc(12 * var(--account-unit));background:#fff;color:#000;color-scheme:light;
  box-shadow:0 0 48px 12px #ffffff35,0 20px 60px #0003;
}
.account-dialog::backdrop{background:rgb(0 0 0 / .3);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.account-dialog[open]{animation:account-appear .42s cubic-bezier(.2,.7,.2,1) both}
.account-dialog[open]::backdrop{animation:account-backdrop .4s ease both}
#account-title{position:absolute;left:calc(21 * var(--account-unit));top:calc(37 * var(--account-unit));margin:0;width:calc(114 * var(--account-unit));height:calc(17 * var(--account-unit));outline:none}
#account-title img,.account-sections img{display:block;width:100%;height:auto}
.account-sections{position:absolute;left:calc(21 * var(--account-unit));top:calc(92 * var(--account-unit));display:flex;flex-direction:column;gap:calc(25 * var(--account-unit))}
.account-sections a{margin:0;height:calc(14 * var(--account-unit));display:flex;align-items:center}
.account-sections a:nth-child(1){width:calc(76 * var(--account-unit))}
.account-sections a:nth-child(2){width:calc(116 * var(--account-unit))}
.account-sections a:nth-child(3){width:calc(199 * var(--account-unit))}
.account-create{position:absolute;left:calc(21 * var(--account-unit));top:calc(217 * var(--account-unit));width:calc(579 * var(--account-unit));height:calc(57 * var(--account-unit));border-radius:calc(2 * var(--account-unit));cursor:default}
.account-create img{width:100%;height:100%}
.account-close{position:absolute;right:calc(21 * var(--account-unit));top:calc(24 * var(--account-unit));width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.account-close:focus-visible{clip-path:none;width:auto;height:auto;padding:8px 10px;color:#166874;background:#fff;font-size:14px;outline:2px solid #166874;outline-offset:3px;border-radius:3px}
html.account-is-open,html.account-is-open body{overflow:hidden}
@keyframes account-appear{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes account-backdrop{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.account-dialog[open],.account-dialog[open]::backdrop{animation:none}}

.account-sections a{transition:opacity .25s ease,transform .3s ease}.account-sections a:hover{opacity:.65;transform:translateX(3px)}