:root { --bg: #fef7ff; --fg: #1d1b20; --soft: #49454f; --primary: #6750a4; --on-primary: #fff; --container: #eaddff; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #141218; --fg: #e6e0e9; --soft: #cac4d0; --primary: #d0bcff; --on-primary: #381e72; --container: #4f378b; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, "Segoe UI", Roboto, sans-serif; }
main { width: min(420px, 100% - 32px); text-align: center; padding: 32px 0; }
h1 { margin: 24px 0 8px; font-size: 28px; }
p { margin: 0 0 24px; color: var(--soft); }
.mark { width: 96px; height: 96px; margin: 0 auto; background: var(--primary); clip-path: polygon(50% 0, 62% 8%, 77% 6%, 83% 20%, 96% 27%, 93% 42%, 100% 55%, 91% 67%, 92% 82%, 77% 86%, 68% 98%, 53% 93%, 38% 99%, 29% 88%, 13% 88%, 11% 73%, 0 62%, 7% 49%, 3% 34%, 17% 28%, 20% 13%, 36% 11%); }
.button { display: inline-block; padding: 14px 28px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-weight: 600; text-decoration: none; transition: transform .12s, filter .12s; }
.button:hover { filter: brightness(1.08); }
.button:active { transform: scale(.96); }
.button.tonal { background: var(--container); color: var(--fg); }
.row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }