:root{
  --bg:#061525;
  --green:#9ff971;
  --cyan:#00d6e4;
  --white:#e6faff;
  --red:#ff5e6e;
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family: 'Courier New', monospace;
  background:var(--bg);
  color:var(--white);
  min-height:100vh;
  overflow:hidden;
}

/* terminal */
.terminal{
  width:90%;
  max-width:800px;
  margin:4rem auto 2rem;
  background:#000;
  padding:1.5rem 1rem;
  border-radius:6px;
  box-shadow:0 0 18px rgba(0,0,0,.6);
  height:260px;
  overflow:auto;
  line-height:1.35rem;
}
pre{white-space:pre-wrap; word-break:break-word;}

/* info section */
#info{
  width:90%;
  max-width:800px;
  margin:0 auto;
  text-align:left;
  animation:fadeIn .8s ease forwards;
}
#info.hidden{display:none}
#info h2{margin-bottom:.6rem;color:var(--cyan);}
#info ul{margin-left:1rem;margin-bottom:1.2rem}
#info li{margin:.3rem 0}
.btn{
  display:inline-block;
  padding:.6rem 1.4rem;
  background:var(--cyan);
  color:#00171f;
  font-weight:bold;
  border-radius:999px;
  text-decoration:none;
  transition:transform .2s,box-shadow .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,214,228,.35)}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* wrenches */
.wrench{
  position:fixed;
  font-size:24px;
  pointer-events:none;
  animation:pop 1s ease forwards;
}
@keyframes pop{
  0%{transform:translate(-50%,-50%) scale(0); opacity:1;}
  70%{transform:translate(-50%,-150%) scale(1.2);}
  100%{transform:translate(-50%,-200%) scale(.6); opacity:0;}
}