:root { color-scheme: dark; --cian: #4fd1ff; --cian-claro: #9be8ff; --hielo: #eafaff; --oro: #f2b632; --tenue: #6f93a6; --mal: #ff4f66; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: #02070b; color: var(--hielo); font: 500 16px/1.5 "Rajdhani", "Avenir Next Condensed", sans-serif; padding: 20px 16px; overflow: hidden; }
.plano {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(79, 209, 255, .14), transparent 45%),
    radial-gradient(circle at 50% 42%, transparent 0 299px, rgba(79, 209, 255, .08) 300px, transparent 302px),
    radial-gradient(circle at 50% 42%, transparent 0 459px, rgba(79, 209, 255, .05) 460px, transparent 462px),
    linear-gradient(rgba(79, 209, 255, .05) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(79, 209, 255, .05) 1px, transparent 1px) 0 0 / 24px 100%,
    linear-gradient(rgba(79, 209, 255, .08) 1px, transparent 1px) 0 0 / 100% 120px,
    linear-gradient(90deg, rgba(79, 209, 255, .08) 1px, transparent 1px) 0 0 / 120px 100%;
}
.plano::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, .75) 100%); }
.barrido { position: absolute; left: 0; right: 0; height: 160px; top: -160px; background: linear-gradient(transparent, rgba(79, 209, 255, .07), transparent); animation: barrido 8s linear infinite; }
.acceso { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.reactor-caja { width: min(330px, 78vw); aspect-ratio: 1; filter: drop-shadow(0 0 30px rgba(79, 209, 255, .3)); margin-bottom: 4px; transition: filter .4s; }
.reactor-caja svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rx-g, .rx-latido { transform-origin: 200px 200px; transform-box: view-box; }
.rx-marcas { animation: giro 80s linear infinite; }
.rx-anillo { animation: giro 46s linear infinite reverse; }
.rx-arco { animation: giro 30s linear infinite; }
.rx-oro { animation: giro 18s linear infinite reverse; }
.rx-circuito { animation: giro 120s linear infinite; }
.rx-latido { animation: pulso 3.2s ease-in-out infinite; }
.reactor-caja.pensando .rx-arco { animation-duration: 1.6s; }
.reactor-caja.pensando .rx-oro { animation-duration: 1s; }
.reactor-caja.error .rx-latido { stroke: var(--mal); }
.reactor-caja.error { filter: drop-shadow(0 0 30px rgba(255, 79, 102, .45)); }
.linea { font-family: "Share Tech Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .26em; color: var(--tenue); }
h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: .26em; font-weight: 700; color: var(--hielo); text-shadow: 0 0 14px rgba(79, 209, 255, .6); text-align: center; }
.campo { width: 100%; }
input { width: 100%; padding: 13px 16px; border: 1px solid rgba(79, 209, 255, .35); background: rgba(0, 0, 0, .45); color: var(--hielo); font: 500 18px "Share Tech Mono", ui-monospace, monospace; letter-spacing: .2em; outline: none; text-align: center; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
input::placeholder { color: var(--tenue); letter-spacing: .3em; }
input:focus { border-color: var(--cian); box-shadow: inset 0 0 20px rgba(79, 209, 255, .15); }
button { width: 100%; padding: 13px; border: 1px solid var(--cian); background: linear-gradient(180deg, rgba(79, 209, 255, .3), rgba(79, 209, 255, .12)); color: var(--hielo); font: 700 17px "Rajdhani", sans-serif; letter-spacing: .4em; cursor: pointer; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: transform .15s, box-shadow .2s, background .2s; text-shadow: 0 0 10px rgba(79, 209, 255, .7); }
button:hover { transform: translateY(-2px); background: linear-gradient(180deg, rgba(79, 209, 255, .45), rgba(79, 209, 255, .2)); box-shadow: 0 0 24px rgba(79, 209, 255, .4); }
.err { min-height: 22px; color: var(--mal); font-family: "Share Tech Mono", monospace; font-size: 13px; letter-spacing: .08em; text-align: center; }
@keyframes giro { to { transform: rotate(360deg); } }
@keyframes pulso { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.035); opacity: 1; } }
@keyframes barrido { to { transform: translateY(calc(100vh + 320px)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }