:root {
  color-scheme: light;
  font: 16px/1.5 Arial, sans-serif;
  color: #25212b;
  background: #5f148c;
  --accent: #8131b0;
  --deep: #5f148c;
}
body { display: grid; min-height: 100dvh; place-items: center; margin: 0; padding: 1rem; box-sizing: border-box; }
body::before { content: ""; position: fixed; inset: 0; background: var(--accent); clip-path: polygon(56% 0, 79% 0, 34% 100%, 21% 100%); }
main { position: relative; width: min(100%, 440px); box-sizing: border-box; padding: clamp(1.25rem, 6vw, 2.25rem); background: #fff; border-radius: clamp(24px, 6vw, 40px); box-shadow: 0 18px 55px #360d5240; }
h1 { margin: .8rem 0 .35rem; line-height: 1.2; font-size: 1.65rem; }
p { color: #514858; }
.vc-wordmark { display: grid; gap: .3rem; margin: 0; color: var(--accent); font-family: "Arial Black", Arial, sans-serif; font-weight: 900; line-height: 1; text-transform: uppercase; }
.vc-wordmark strong { font-size: 27px; letter-spacing: .03em; }
.vc-wordmark small { font-size: 12px; letter-spacing: .28em; }
label { display: grid; gap: .3rem; margin-block: 1rem; font-weight: 650; }
input, button { min-height: 48px; box-sizing: border-box; min-width: 0; font: inherit; padding: .65rem .8rem; border: 1px solid #8a7b94; border-radius: 12px; }
button { width: 100%; border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; }
button:hover { background: var(--deep); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[role=alert] { color: #8f1d2c; background: #fdecef; padding: .6rem .75rem; border-radius: 8px; }