:root{--noche:#0E1730;--panel:#16223F;--linea:#2C3D68;--tiza:#E8ECF5;--suave:#A9B6D6;--cobalto:#3D6BFF;--amarillo:#F2C53D;--verde:#4CC38A;--coral:#F28C6B;--gris:#6F7DA3;--pixel:'Press Start 2P','Courier New',monospace;--ui:'Pixelify Sans','Trebuchet MS',sans-serif;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{background:var(--noche);color:var(--tiza);font-family:var(--ui);font-size:18px;line-height:1.4;padding-inline:16px;padding-block:16px;display:flex;flex-direction:column;min-height:100vh}
main{flex:1;width:100%;max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
h1{font-family:var(--pixel);font-size:14px;color:var(--amarillo);line-height:1.7;margin:0;letter-spacing:1px}
h2{font-family:var(--ui);font-size:28px;margin:0;line-height:1.2;text-wrap:balance}
button,input,textarea{font-family:var(--ui);font-size:19px}
button{cursor:pointer;border-radius:10px;border:3px solid var(--linea);background:var(--panel);color:var(--tiza);padding:14px 16px;text-align:left}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}
.opciones{display:flex;flex-direction:column;gap:10px}
.opciones button[aria-pressed="true"]{background:var(--cobalto);border-color:var(--cobalto);color:#fff}
.enviar{background:var(--amarillo);border-color:var(--amarillo);color:var(--noche);font-weight:700;text-align:center}
.enviar:disabled{opacity:.45;cursor:default}
textarea,input[type=text]{width:100%;background:var(--panel);color:var(--tiza);border:3px solid var(--linea);border-radius:10px;padding:12px}
.nota{color:var(--suave);font-size:16px;margin:0}
.error{color:var(--coral);font-size:16px;margin:0}
.listo{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:32px 0}
.listo .big{font-family:var(--pixel);font-size:22px;color:var(--verde);line-height:1.5}
.progreso{font-family:var(--pixel);font-size:10px;color:var(--gris);letter-spacing:1px}
.pie{display:flex;justify-content:center;padding-top:24px}
.marca{color:var(--suave);text-decoration:none;font-family:var(--ui);font-size:15px;opacity:.85}
.marca b{font-weight:700;color:var(--tiza)} .marca i{color:var(--amarillo)}
.marca:hover{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}