:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #241c38; background: #f8f5ff; }
* { box-sizing: border-box; }
body { min-height: 100dvh; margin: 0; display: flex; flex-direction: column; }
.page { flex: 1; display: grid; place-items: center; padding: 2rem 1rem; }
.card { width: min(100%, 38rem); padding: clamp(1.5rem, 5vw, 3rem); text-align: center; background: white; border: 1px solid #e7ddf8; border-radius: 1.5rem; box-shadow: 0 1.25rem 3rem rgba(73, 37, 129, .10); }
.mark { width: 4.5rem; height: 4.5rem; display: grid; place-items: center; margin: 0 auto 1.1rem; border-radius: 1.3rem; color: #fff; background: #6e39bd; font-size: 2.5rem; }
.eyebrow { margin: 0 0 .45rem; color: #6336a8; font-size: .85rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.12; letter-spacing: -.035em; }
.lead { margin: 1.15rem 0 .5rem; font-size: 1.15rem; font-weight: 650; }
.description { margin: 0 auto 1.6rem; max-width: 29rem; color: #594f6c; line-height: 1.55; }
.controls { display: grid; gap: .7rem; }
button { min-height: 3.25rem; width: 100%; border: 0; border-radius: .85rem; padding: .75rem 1rem; font: inherit; font-weight: 700; cursor: pointer; }
#start { color: #fff; background: #6736b5; }
#start:hover { background: #542a99; }
#end { color: #542a99; background: #eee5fb; }
button:focus-visible { outline: .2rem solid #301468; outline-offset: .2rem; }
button:disabled { cursor: wait; opacity: .6; }
#status { min-height: 1.5rem; margin: 1.1rem 0 .25rem; color: #4f3972; font-weight: 600; }
.hint { margin: .5rem 0 0; font-size: .83rem; color: #665d73; }
footer { padding: 0 1rem 1.5rem; text-align: center; font-size: .83rem; color: #61566f; }
footer p { margin: .25rem 0; }
@media (max-width: 480px) { .page { align-items: start; padding-top: 1.25rem; } .card { border-radius: 1.1rem; } }