:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--tg-theme-bg-color, #fafafa); color: var(--tg-theme-text-color, #202124); }
main { min-height: 100svh; max-width: 440px; margin: auto; padding: 44px 20px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.mark { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 25px; background: var(--tg-theme-secondary-bg-color, #edf2f4); color: var(--tg-theme-button-color, #2481cc); }
h1 { margin: 22px 0 8px; font-size: 23px; font-weight: 600; letter-spacing: -.5px; }
p { line-height: 1.5; margin: 0 0 22px; font-size: 15px; }
#challenge { min-height: 65px; max-width: 100%; }
button { border: 0; border-radius: 12px; padding: 14px 22px; font: inherit; background: var(--tg-theme-button-color, #2481cc); color: var(--tg-theme-button-text-color, white); cursor: pointer; margin-top: 16px; }
button:focus-visible { outline: 3px solid var(--tg-theme-link-color, #2481cc); outline-offset: 4px; }
button:disabled { opacity: .6; cursor: wait; }
.note { font-size: 12px; color: var(--tg-theme-hint-color, #74787e); margin: 28px 0 0; }
[hidden] { display: none !important; }
@media (prefers-color-scheme: dark) { body { background: var(--tg-theme-bg-color, #18222d); color: var(--tg-theme-text-color, #f4f4f5); } .mark { background: var(--tg-theme-secondary-bg-color, #232e3c); } }