* { box-sizing: border-box; }
body { margin: 0; background: #000; color: #f5f5f7; font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
main { width: 100%; max-width: 560px; min-width: 0; margin: 0 auto; padding: 48px max(24px, env(safe-area-inset-right)) 40px max(24px, env(safe-area-inset-left)); overflow-x: hidden; }
.brand { color: #98989f; font-size: 14px; margin: 0 0 14px; }
h2 { font-size: 32px; line-height: 1.15; letter-spacing: -.035em; margin: 0 0 20px; }
p { font-size: 15px; line-height: 1.45; }
h2 span { white-space: nowrap; }
a { color: #409cff; text-underline-offset: 3px; }
a:hover { color: #70b5ff; }
ol { min-width: 0; padding-left: 28px; }
li { min-width: 0; padding-left: 4px; margin-bottom: 16px; font-size: 15px; line-height: 1.45; }
li button { margin-top: 16px; }
.step-note { margin: 12px 0 0; color: #c7c7cc; }
.instruction-image-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 360px;
  min-width: 0;
  margin: 18px auto 24px;
  overflow: hidden;
  border: 1px solid #38383a;
  border-radius: 22px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.instruction-image-wrap:focus-visible {
  outline: 2px solid white;
  outline-offset: 4px;
}
.instruction-image {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 140ms ease-out;
}
@media (hover: hover) {
  .instruction-image-wrap:hover .instruction-image { opacity: .8; }
}
.profile-highlight {
  position: absolute;
  left: var(--highlight-left, 4.7%);
  top: var(--highlight-top, 39.7%);
  width: var(--highlight-width, 90.6%);
  height: var(--highlight-height, 5.8%);
  border: clamp(2px, .8vw, 4px) solid #ff3b30;
  border-radius: 4% / 32%;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 35%);
  pointer-events: none;
}
.notice { padding: 20px; background: #1c1c1e; border-radius: 20px; font-size: 15px; color: #c7c7cc; }
.notice p { margin: 0 0 14px; }
.notice p:last-child { margin-bottom: 0; }
button { border: 0; border-radius: 16px; background: #0a84ff; color: #fff; min-height: 52px; padding: 12px 20px; font: inherit; font-weight: 650; cursor: pointer; width: 100%; }
button:active { opacity: .75; } button:focus-visible, input:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.secondary { background: #1c1c1e; color: #0a84ff; }
.small, footer { font-size: 13px; color: #98989f; } footer { margin-top: 32px; }
input { display: block; width: 100%; min-width: 0; padding: 18px 10px; border-radius: 16px; border: 1px solid #38383a; background: #1c1c1e; color: #fff; font: 15px ui-monospace, monospace; margin-bottom: 16px; }
#status { color: #b9d9ff; } [hidden] { display: none !important; }

@media (max-width: 620px) {
  main { padding-top: 32px; }
  h2 { font-size: 27px; }
  h2 span { white-space: normal; }
}