:root{--bg:#0b0d10;--fg:#f2f5f7;--muted:#9aa3ab;--dot:#7fb4ff;--track:#1d2229;--btn:#f2f5f7;--btn-fg:#0b0d10}
@media (prefers-color-scheme:light){:root{--bg:#f6f7f9;--fg:#15181c;--muted:#5b636b;--dot:#2f6fdf;--track:#dfe3e8;--btn:#15181c;--btn-fg:#f6f7f9}}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;text-align:center;max-width:36em;margin:0 auto;overflow-wrap:anywhere}
.dot{width:12px;height:12px;border-radius:50%;background:var(--dot);margin-bottom:28px;animation:p 2.2s ease-in-out infinite}
@keyframes p{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}.bar span{transition:none}}
.word{font-size:11px;letter-spacing:.34em;color:var(--muted);margin:0 0 10px}
h1{font-size:22px;font-weight:600;margin:0 0 8px}
p{margin:0;color:var(--muted);max-width:30em}.lead{color:var(--fg);opacity:.9}
.bar{width:100%;max-width:22em;height:6px;border-radius:3px;background:var(--track);margin:24px 0 10px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--dot);border-radius:3px;transition:width .6s ease}
.stage{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font-size:14px;margin-bottom:16px}
.note{font-size:14px;margin-top:12px}
.button{display:inline-block;margin-top:22px;padding:12px 22px;min-height:44px;border-radius:999px;background:var(--btn);color:var(--btn-fg);text-decoration:none;font-weight:600}
.button:focus-visible{outline:2px solid var(--dot);outline-offset:3px}