:root {
  color-scheme: light;
  font: 16px/1.55 system-ui, sans-serif;
  color: #202124;
  background: #f0f4f9;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 24px; }
.card {
  width: min(100%, 490px);
  background: #fff;
  padding: clamp(26px, 6vw, 52px);
  border: 1px solid #dfe3e8;
  border-radius: 24px;
  animation: appear 180ms ease-out both;
}
header { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 650; }
.mark { width: 14px; height: 14px; border: solid #8350a4; border-width: 0 0 4px 4px; border-radius: 2px; transform: rotate(45deg); }
h1 { margin: 28px 0 8px; font-size: clamp(27px, 5vw, 38px); line-height: 1.25; font-weight: 550; overflow-wrap: anywhere; }
p { margin: 0; }
.actions { display: grid; gap: 8px; margin-top: 30px; }
button, a { font: 600 14px/1.4 system-ui, sans-serif; border-radius: 999px; padding: 13px 16px; text-align: center; }
button { cursor: pointer; border: 1px solid #195ac5; color: #fff; background: #195ac5; }
button:hover { background: #154ba2; }
button:disabled { opacity: .65; cursor: wait; }
a, .secondary { color: #174ea6; background: transparent; text-decoration: none; }
a:hover, .secondary:hover { background: #eef4ff; }
.secondary { border-color: #d2ddeb; }
:focus-visible { outline: 3px solid #135ed0; outline-offset: 3px; }
.status:not(:empty) { margin-top: 18px; font-size: 14px; color: #4b5563; }
@keyframes appear { from { opacity: .65; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }