:root{--bg:#050506;--c:#38C8F4;--b:#4F7BFF;--p:#8B5CF6;--g:#C9A66B;--t:#ECEEF5;--m:#9AA0B4}
*{box-sizing:border-box}html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--t);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#111;padding:8px;border-radius:11px;z-index:9}
.top{display:flex;justify-content:flex-end;padding:12px 16px}
.rm{background:transparent;color:var(--m);border:1px solid #2a2c36;border-radius:11px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
.rm[aria-pressed=true]{color:var(--t);border-color:var(--g)}
main{max-width:640px;margin:0 auto;padding:0 18px 24px}
.hero{position:relative;text-align:center;padding:8px 0 28px}
.glow{position:absolute;inset:-10% 10% auto;height:340px;background:radial-gradient(closest-side,rgba(79,123,255,.28),rgba(139,92,246,.12),transparent);filter:blur(20px);z-index:-1;animation:pulse 6s ease-in-out infinite}
.emblem{width:240px;height:240px;border-radius:50%;box-shadow:0 0 0 1px rgba(201,166,107,.35),0 20px 60px rgba(79,123,255,.25);animation:float 7s ease-in-out infinite}
h1{margin:18px 0 4px;font-size:32px;letter-spacing:.5px;background:linear-gradient(90deg,var(--c),var(--b),var(--p));-webkit-background-clip:text;background-clip:text;color:transparent}
.slogan{margin:0 0 22px;color:var(--m)}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:11px;font-weight:600;text-decoration:none;color:var(--t)}
.btn:focus-visible,.rm:focus-visible,a:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.primary{background:linear-gradient(90deg,var(--c),var(--b) 55%,var(--p));color:#05060a}
.ghost{border:1px solid #343849;background:#0d0e13}
.wide{width:100%}
.card{background:#0c0d12;border:1px solid #1d1f29;border-radius:16px;padding:20px;margin:16px 0;box-shadow:inset 0 1px 0 rgba(201,166,107,.12)}
h2{margin:0 0 14px;font-size:20px}h3{font-size:15px;margin:18px 0 6px;color:var(--g);font-weight:600}
.meta{color:var(--m);font-size:13px;margin:10px 0 0}code{color:var(--t)}
ol{padding-left:20px;margin:6px 0}li{margin:4px 0}
footer{text-align:center;color:var(--m);font-size:13px;padding:10px 18px 30px}
footer a{color:var(--c)}.angel{display:block;margin:0 auto 8px;opacity:.9}.note{opacity:.75}
@keyframes float{50%{transform:translateY(-6px)}}@keyframes pulse{50%{opacity:.6}}
@media (min-width:900px){.emblem{width:300px;height:300px}h1{font-size:40px}main{padding-top:10px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.reduce *{animation:none!important;transition:none!important}

/* t128: mascote R3 animada (sprite 60 quadros, 30 fps) encostada no emblema */
.emb-wrap{position:relative;display:inline-block}
.r3{position:absolute;right:-18px;bottom:6px;width:84px;height:84px;background:url(assets/r3-idle-sprite.webp) 0 0/1000% 600% no-repeat;filter:drop-shadow(0 8px 18px rgba(124,92,255,.4));animation:r3x .333333s steps(10) infinite,r3y 2s steps(6) infinite}
@keyframes r3x{to{background-position-x:111.111%}}@keyframes r3y{to{background-position-y:120%}}
@media (max-width:600px){.r3{width:68px;height:68px;right:-10px}}
html.reduce .r3{animation:none}
@media (prefers-reduced-motion:reduce){.r3{animation:r3y 6s steps(6) infinite!important}}