body { display: grid; place-items: center; padding: 16px; }
.corner { position: fixed; top: 16px; right: 16px; }
.card {
  width: 100%;
  max-width: 400px;
  padding: 44px 32px 36px;
  text-align: center;
  background: var(--surface);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: none;
}
.mark { display: block; width: 52px; height: 52px; margin: 0 auto 20px; color: var(--text); }
.mark .mark-cursor { stroke: var(--accent-2); }
.wordmark {
  margin: 0 0 32px;
  font: 600 30px/1.1 var(--mono);
  letter-spacing: -1px;
}
.cursor { color: var(--accent-2); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.button-slot { display: flex; justify-content: center; min-height: 44px; }
.message { margin: 16px 0 0; color: var(--error); font-size: 14px; }
.fine { margin: 24px 0 0; color: var(--muted); font-size: 13px; }