@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');
:root{
  --bg:#03060d; --bg2:#070d1a; --panel:rgba(10,22,40,.72); --panel2:rgba(14,30,54,.6);
  --line:rgba(80,200,255,.18); --line2:rgba(80,200,255,.35);
  --cyan:#29e3ff; --cyan2:#7af0ff; --blue:#3b82ff; --gold:#ffc23d; --green:#2dffa0; --red:#ff4d6d; --violet:#a78bfa;
  --text:#d8eefc; --mute:#7f9bb5; --dim:#4b6580;
  --r:14px; --glow:0 0 18px rgba(41,227,255,.35);
  --display:'Orbitron',system-ui,sans-serif; --ui:'Rajdhani',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--ui);font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
   radial-gradient(1200px 600px at 75% -10%,rgba(41,227,255,.10),transparent 60%),
   radial-gradient(900px 500px at -10% 110%,rgba(59,130,255,.10),transparent 60%),
   linear-gradient(rgba(41,227,255,.035) 1px,transparent 1px) 0 0/40px 40px,
   linear-gradient(90deg,rgba(41,227,255,.035) 1px,transparent 1px) 0 0/40px 40px;}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px)}
a{color:var(--cyan)}
button{font-family:var(--ui);cursor:pointer}
.mono{font-family:var(--mono)}
.display{font-family:var(--display);letter-spacing:.12em}

/* arc reactor */
.reactor{position:relative;width:46px;height:46px;border-radius:50%;flex:none;
  background:radial-gradient(circle,#e9fdff 0 12%,#6ff3ff 18%,rgba(41,227,255,.25) 40%,transparent 62%);
  box-shadow:0 0 22px rgba(41,227,255,.6),inset 0 0 10px rgba(41,227,255,.6);border:2px solid rgba(41,227,255,.6)}
.reactor::before,.reactor::after{content:"";position:absolute;inset:4px;border-radius:50%;
  border:2px dashed rgba(122,240,255,.75);animation:spin 9s linear infinite}
.reactor::after{inset:9px;border:2px solid transparent;border-top-color:var(--cyan);border-bottom-color:var(--cyan);animation-duration:2.5s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}