:root {
  --color-bg: rgb(179, 179, 179);
  --color-text: #000;
  --color-track: #707070;
  --color-thumb: #1f1f1f;
  --color-border-soft: #a5a5a5;
  --color-surface: rgba(255, 255, 255, 0.788);
  --color-panel-alt: #efefef;
  --color-hover-highlight: #fff3b0;
  --color-white: #fff;
  --radius-main: .5rem;
  --radius-alt: .3rem;
  --radius-control: .25rem;
  --radius-proportional: .5em .3em 0 0;
  --space-2: 1rem;
  --space-3: 2rem;
  --font-size-label: 1.3rem;
  --table-max: 980px;
  --content-max: 760px;
  --narrow-max: 640px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--color-text);
  background: var(--color-bg);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 180px);
  overflow: hidden auto;
  scrollbar-color: var(--color-thumb) var(--color-track);
}

body.camera-dialog-open, body.media-dialog-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

html::-webkit-scrollbar {
  width: 12px;
}

html::-webkit-scrollbar-track {
  background: var(--color-track);
}

html::-webkit-scrollbar-thumb {
  background: var(--color-thumb);
  border-radius: 0;
  border: 2px solid var(--color-track);
}

html::-webkit-scrollbar-thumb:hover {
  background: #111;
}

main {
  min-height: 100vh;
  max-width: var(--table-max);
  margin: 0 auto;
}

article {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1%;
  display: flex;
  flex-flow: column wrap;
}

@container page-content (max-width:640px) {

  article {
    padding-left: 0;
    padding-right: 0;
  }

}

body[data-view="challenge"] article { max-width:var(--narrow-max); padding:var(--space-2); text-align:center; align-items:center; }
body[data-view="challenge"] .challenge-header { margin:2.8vh auto 3rem; text-align:center; }
body[data-view="challenge"] .challenge-header img { display:block; width:100px; height:100px; margin:0 auto; padding:var(--space-2) 0; }
body[data-view="challenge"] .challenge-header h1 { margin:0; padding:1.2rem 0 .7rem; font-size:1.85em; font-weight:500; }
body[data-view="challenge"] form { display:flex; flex-direction:column; gap:1rem; max-width:360px; width:100%; margin:.85rem auto 1.15rem; align-items:center; }
body[data-view="challenge"] form[hidden] { display:none; }
body[data-view="challenge"] p { font-size:1.18rem; line-height:1.45; margin:.1rem 0 .8rem; }
body[data-view="challenge"] :is(label, input) { font-size:1.15rem; }
body[data-view="challenge"] input { width:100%; font-size:1.15rem; margin:.2rem 0; padding:1rem .75rem; border-radius:var(--radius-control); border:.1rem solid var(--color-text); background:var(--color-white); }
body[data-view="challenge"] input:focus { outline:none; }
body[data-view="challenge"] :is(.challenge-email-wrap, .challenge-code-wrap) { position:relative; width:100%; }
body[data-view="challenge"] .challenge-email-icon { position:absolute; left:.95rem; inset-block:0; display:grid; place-items:center; color:#4a4a4a; font-size:1.34rem; line-height:1; width:1.6rem; text-align:center; font-family:"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; pointer-events:none; }
body[data-view="challenge"] .challenge-code-icon { position:absolute; left:.95rem; inset-block:0; display:grid; place-items:center; color:#4a4a4a; font-size:1.34rem; line-height:1; width:1.6rem; text-align:center; font-family:"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; pointer-events:none; }
body[data-view="challenge"] #challenge-email { font-size:1.42rem; padding:1.2rem 1.2rem 1.2rem 3.6rem; }
body[data-view="challenge"] #challenge-code { font-size:1.3rem; padding:1.1rem 1.1rem 1.1rem 3.6rem; }
body[data-view="challenge"] #challenge-email+button { margin-top:-.35rem; }
body[data-view="challenge"] #challenge-turnstile { width:100%; display:flex; justify-content:center; margin-bottom:1rem; }
body[data-view="challenge"] #challenge-turnstile>div,
body[data-view="challenge"] #challenge-turnstile iframe { width:100% !important; }
body[data-view="challenge"] .challenge-or { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.8rem; width:100%; margin:2.6rem 0 2.75rem; }
body[data-view="challenge"] .challenge-or::before,
body[data-view="challenge"] .challenge-or::after { content:""; height:.06rem; background:var(--color-border-soft); }
body[data-view="challenge"] .challenge-or>span { font-size:1rem; letter-spacing:.05em; text-transform:uppercase; }
body[data-view="challenge"] button { display:inline-flex; align-items:center; gap:.45rem; align-self:flex-start; margin:.2rem 0; border-radius:var(--radius-control); border:.1rem solid var(--color-text); background:var(--color-white); color:#111; cursor:pointer; font-size:1.3rem; line-height:1.2; padding:1.15rem 1.1rem; width:100%; justify-content:center; }
body[data-view="challenge"] button:hover { background:var(--color-panel-alt); }
body[data-view="challenge"] button:disabled { cursor:not-allowed; opacity:.55; }
body[data-view="challenge"] button.challenge-loading { position:relative; pointer-events:none; border-color:#4f46e5; box-shadow:0 0 0 0 rgba(79,70,229,.34); animation:challenge-pulse-border 1.1s ease-in-out infinite; }
body[data-view="challenge"] button.challenge-loading::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, transparent 25%, rgba(79,70,229,.08) 50%, transparent 75%); background-size:200% 100%; animation:challenge-shimmer 1.2s ease-in-out infinite; }
@keyframes challenge-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@keyframes challenge-pulse-border { 0%, 100% { border-color:#111; box-shadow:0 0 0 0 rgba(79,70,229,0); } 50% { border-color:#4f46e5; box-shadow:0 0 0 .25rem rgba(79,70,229,.18); } }
body[data-view="challenge"] .challenge-events-wrap { width:100%; max-width:620px; margin:8.2rem auto 4.2rem; text-align:center; }
body[data-view="challenge"] #challenge-events { list-style:none; margin:.65rem 0 0; padding:0; display:flex; flex-direction:column; align-items:center; gap:2.2rem; }
body[data-view="challenge"] #challenge-events li { margin:0; padding:0; font-size:1.18rem; line-height:1.45; text-align:center; }
body[data-view="challenge"] .challenge-event-main { display:inline; }
body[data-view="challenge"] .challenge-event-ago { display:inline; margin-left:.45rem; font-size:.82em; color:#3f3f3f; }

@container page-content (min-width:641px) {
  body[data-view="account"] article>ol>li>label,
  body[data-view="account"] article>ol>li>label.passkeys-label,
  body[data-view="account"] article>ol>li>.detail-value {
    align-items: flex-start;
  }

  body[data-view="account"] article>ol>li>label {
    padding-top: calc(var(--space-2) + .4rem);
    padding-bottom: calc(var(--space-2) - .4rem);
  }

  body[data-view="account"] article>ol>li:first-child>label {
    padding-top: calc(2.2rem + .4rem);
    padding-bottom: calc(var(--space-2) - .4rem);
  }

  body[data-view="account"] article>ol>li:last-child>label {
    padding-top: calc(1.6rem + .4rem);
    padding-bottom: calc(2.2rem - .4rem);
  }

  body[data-view="account"] #account-passkeys.detail-value {
    padding: var(--space-2) var(--space-3);
  }

  body[data-view="account"] .passkeys-group-list { padding:0; }
}

@container page-content (max-width:640px) {
  body[data-view="account"] #account-passkeys.detail-value {
    padding: .08rem var(--space-3) .08rem;
  }

  body[data-view="account"] .passkeys-group-list {
    padding: 0;
  }

  body[data-view="account"] :is(#account-hardware .hardware-metadata, #account-media .hardware-metadata) {
    font-size: .82em;
  }

  body[data-view="account"] #account-network .network-status {
    font-size: .82em;
  }

}

@container page-content (max-width:640px) {
  main>footer {
    padding-left: .5rem;
    padding-right: .5rem;
  }
}

@media (max-width:640px) {
  body[data-view="challenge"] article {
    padding-left: .5rem;
    padding-right: .5rem;
  }
}