@charset "UTF-8";

body {
  box-shadow: 0 0 55px rgba(0,0,0,0.1) inset;
}
body:focus-within {
  background-color: rgba(0,0,0,0.05);
}
/**/
.Auth {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
}
.Auth > main {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  inline-size: calc(100% - 110px);
}
.Auth > main > form {
  display: flow-root;
  margin-block: 0;
  margin-inline: 0;
  box-shadow: 0 1px 1px 0 rgba(66,66,66,0.08), 0 1px 3px 1px rgba(66,66,66,0.16);
  border-radius: 4px;
  background-color: rgba(255,255,255,1);
}
.Auth > main > form > fieldset {
  margin-block: 32px;
  margin-inline: 32px;
  border: none;
  padding-block: 0;
  padding-inline: 0;
  min-inline-size: auto;
}
.Auth > main > form > fieldset > legend {
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
  font-size: 160%;
  font-weight: bold;
}
.Auth > main > form > fieldset > p {
  margin: 8px 0;
}
.Auth > main > form > fieldset > .field {
  margin-top: 16px;
}
.Auth > main > form > fieldset > .field > label {
  display: block;
  margin-bottom: 4px;
  inline-size: fit-content;
  font-size: 12px;
}
.Auth > main > form > fieldset > .field > .content {}
.Auth > main > form > fieldset > .field > .message {
  margin: 4px;
  font-size: 12px;
}
.Auth > main > form > fieldset > .field > .message:empty {
  display: none;
}
.Auth > main > form > fieldset > .field > .message.status\:error {
  color: rgba(234,92,112,1);
}
.Auth > main > form > .control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 32px;
}
.Auth > main > form > .control > .anchor {
  text-decoration-color: rgba(0,0,0,0);
  color: inherit;
  font-size: 10px;
  transition: all 0.2s ease 0s;
}
.Auth > main > form > .control > .anchor:hover {
  text-decoration-color: currentColor;
}
.Auth > main > header {}
.Auth > main > header > h1 {
  margin-block: 0;
  inline-size: 233px;
}
.Auth > main > header > h1 > a > img,
.Auth > main > header > h1 > img {
  display: block;
  inline-size: 100%;
}
.Auth > footer {
  flex-shrink: 0;
}
.Auth > footer > ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 13px;
  padding: 0;
  list-style: none;
}
.Auth > footer > ul > li {}
.Auth > footer > ul > li > a {
  display: block;
  padding: 4px;
}
.Auth > footer > ul > li > a:any-link {
  text-decoration-color: rgba(0,0,0,0);
}
.Auth > footer > ul > li > a:hover {
  text-decoration-color: currentColor;
}
@media (min-width: 1px) and (max-width: 767px) {
  .Auth > main {
    flex-direction: column;
    gap: 34px;
    padding-block: 21px;
    padding-inline: 21px;
  }
}
@media (min-width: 768px) {
  .Auth > main {
    flex-direction: row;
    gap: 89px;
    padding-block: 55px;
    padding-inline: 55px;
  }
  .Auth > main > form {
    flex-grow: 1;
    width: 100%;
    max-width: 610px;
  }
  .Auth > main.mode\:option {
    flex-direction: row-reverse;
  }
}
@media (min-width: 769px) and (max-width: 1000px) {
  .Auth > main {
    flex-direction: row;
    gap: 55px;
    padding-block: 34px;
    padding-inline: 34px;
  }
  .Auth > main > form {
    flex-grow: 1;
    width: 100%;
    max-width: 377px;
  }
  .Auth > main.mode\:option {
    flex-direction: row-reverse;
  }
}
@media (min-width: 1001px) {
  .Auth > main {
    flex-direction: row;
    gap: 89px;
    padding-block: 55px;
    padding-inline: 55px;
  }
  .Auth > main > form {
    flex-grow: 1;
    width: 100%;
    max-width: 610px;
  }
  .Auth > main.mode\:option {
    flex-direction: row-reverse;
  }
}
@media screen {
  body {
    transition-delay: 0s;
    transition-duration: 0.2s;
    transition-property: background-color;
    transition-timing-function: ease-in;
  }
  .Auth > main {
    animation-delay: 0s;
    animation-duration: 2s;
    animation-name: fade-in;
    animation-iteration-count: 1;
    animation-timing-function: ease;
  }
  .Auth > main,
  .Auth > main > form,
  .Auth > main > form > .control > a,
  .Auth > footer > ul > li > a {
    transition-delay: 0s;
    transition-duration: 0.2s;
    transition-property: all;
    transition-timing-function: ease;
  }
}