@font-face {
  font-family: "PPNeueBit";
  src: url("/auth/agentid/presentation/pp-neue-bit-regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
html {
  background: #000;
  color-scheme: dark;
}
body {
  margin: 0;
}
.agent-notice {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 96px;
  box-sizing: border-box;
  background: #000;
}
.agent-notice::before {
  content: "";
  height: 48px;
  flex-shrink: 0;
}
.agent-access-stage {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.agent-access-footer {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding-top: 24px;
}
.agent-access-copyright {
  --agent-access-glyph-font-size: 10.298850574712644px;
  color: rgb(255 255 255 / 68%);
  font-family: "PPNeueBit";
  font-size: var(--agent-access-glyph-font-size);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  line-height: 24px;
  letter-spacing: normal;
  text-align: center;
  transform: scale(var(--agent-access-copyright-scale, 1));
  transform-origin: center;
  white-space: pre-wrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.agent-access-frame {
  --corner-color: rgb(255 255 255 / 28%);
  --corner-length: 38.4px;
  width: min(341.2px, calc(100vw - 192px), calc(100svh - 192px));
  aspect-ratio: 1;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  padding: 9.6px;
  background:
    linear-gradient(var(--corner-color) 0 0) left top / var(--corner-length) 1px
    no-repeat,
    linear-gradient(var(--corner-color) 0 0) left top / 1px var(--corner-length)
    no-repeat,
    linear-gradient(var(--corner-color) 0 0) right top / var(--corner-length)
    1px no-repeat,
    linear-gradient(var(--corner-color) 0 0) right top / 1px
    var(--corner-length) no-repeat,
    linear-gradient(var(--corner-color) 0 0) left bottom / var(--corner-length)
    1px no-repeat,
    linear-gradient(var(--corner-color) 0 0) left bottom / 1px
    var(--corner-length) no-repeat,
    linear-gradient(var(--corner-color) 0 0) right bottom / var(--corner-length)
    1px no-repeat,
    linear-gradient(var(--corner-color) 0 0) right bottom / 1px
    var(--corner-length) no-repeat,
    #000;
  background-clip: border-box;
  background-origin: border-box;
}
.agent-access-canvas {
  display: block;
  width: min(320px, 100%);
  height: auto;
  aspect-ratio: 1;
  filter: invert(1);
  visibility: hidden;
}
.agent-access-frame[data-playback-state="revealing"] .agent-access-canvas,
.agent-access-frame[data-playback-state="ready"] .agent-access-canvas,
.agent-access-frame[data-playback-state="knocking"] .agent-access-canvas {
  visibility: visible;
}
@media (max-width: 767px) {
  .agent-notice {
    padding: 24px;
  }
  .agent-access-copyright {
    line-height: 18px;
  }
  .agent-access-frame {
    width: min(341.2px, calc(100vw - 48px), calc(100svh - 138px));
  }
}
@media (forced-colors: active) {
  .agent-access-frame {
    --corner-color: CanvasText;
  }
}

/* Semantic onboarding stays in the accessibility tree and appears on keyboard focus. */
.agent-access-guidance {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

.agent-access-guidance:focus-within {
  position: fixed;
  inset: 24px;
  z-index: 1;
  width: auto;
  height: auto;
  padding: 24px;
  margin: 0;
  overflow: auto;
  clip-path: none;
  color: #fff;
  background: #000;
  font: 16px / 1.5 monospace;
}

.agent-access-guidance a {
  color: inherit;
  text-decoration: underline;
}

.agent-access-guidance a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}