.ssh-page{
  padding-block:3rem;
}

.ssh-hero{
  max-width:760px;
  margin-bottom:2.5rem;
}

.ssh-hero h1{
  font-family:var(--font-orbitron);
  font-size:2rem;
  margin-bottom:.9rem;
  color:var(--color-text);
}

.ssh-hero p{
  font-size:1.08rem;
  line-height:1.8;
  color:#e4e4e4;
}

.ssh-page code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:.92em;
}

.ssh-hero code,
.ssh-steps p code,
.ssh-note p code{
  background:#202020;
  border:1px solid var(--color-border);
  border-radius:5px;
  padding:.05em .4em;
  color:#ffb4b4;
}

.ssh-section{
  margin-bottom:2.75rem;
}

.ssh-section h2{
  font-family:var(--font-orbitron);
  font-size:1.2rem;
  margin-bottom:1.1rem;
  padding-left:.8rem;
  border-left:3px solid var(--color-red);
  color:var(--color-text);
}

.ssh-key-list{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

.ssh-key{
  padding:1.4rem;
}

.ssh-key-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.6rem;
  margin-bottom:.9rem;
}

.ssh-key-title{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.ssh-key-label{
  font-family:var(--font-orbitron);
  font-size:1.05rem;
  color:var(--color-text);
}

.ssh-key-owner{
  font-size:.9rem;
  color:var(--color-text-dim);
}

.ssh-key-type{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.72rem;
  color:var(--color-red-bright);
  border:1px solid var(--color-red);
  border-radius:6px;
  padding:.2rem .55rem;
}

.ssh-code{
  background:#0b0b0b;
  border:1px solid var(--color-border);
  border-radius:10px;
  padding:1rem;
  overflow-x:auto;
  white-space:pre;
  font-size:.85rem;
  line-height:1.6;
  color:#e6e6e6;
  transition:border-color .25s ease;
}

.ssh-key .ssh-code{
  white-space:pre-wrap;
  word-break:break-all;
}

.ssh-code:hover{
  border-color:#3a1717;
}

.ssh-key-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.9rem;
  margin-top:.9rem;
}

.ssh-fingerprint{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0;
  font-size:.78rem;
  color:var(--color-text-dim);
}

.ssh-fingerprint code{
  color:#e6e6e6;
  word-break:break-all;
}

.ssh-key-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.btn.is-copied{
  border-color:#4be08c;
  color:#7dffb0;
  background:rgba(60,200,120,.1);
  animation:exoworoPop .35s var(--ease);
}

@keyframes exoworoPop{
  0%{ transform:scale(.92); }
  60%{ transform:scale(1.06); }
  100%{ transform:scale(1); }
}

.ssh-steps{
  list-style:none;
  counter-reset:ssh-step;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

.ssh-steps > li{
  position:relative;
  counter-increment:ssh-step;
  padding:1.4rem 1.4rem 1.4rem 4rem;
}

@media (max-width:520px){
  .ssh-steps > li{
    padding:3.6rem 1.1rem 1.1rem;
  }
}

.ssh-steps > li::before{
  content:counter(ssh-step);
  position:absolute;
  left:1.2rem;
  top:1.3rem;
  width:2rem;
  height:2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--color-red);
  color:#fff;
  font-family:var(--font-orbitron);
  font-size:.85rem;
}

.ssh-steps h3,
.ssh-note h3{
  font-family:var(--font-orbitron);
  font-size:1rem;
  margin-bottom:.5rem;
  color:var(--color-text);
}

.ssh-steps p,
.ssh-note p{
  font-size:1rem;
  line-height:1.75;
  color:#dcdcdc;
  margin-bottom:.9rem;
}

.ssh-codewrap{
  position:relative;
}

.ssh-codewrap .ssh-code{
  padding-right:5.5rem;
}

.ssh-copy{
  position:absolute;
  top:.55rem;
  right:.55rem;
  background:#161616;
}

.ssh-note{
  padding:1.4rem;
}

.ssh-note a{
  color:var(--color-red-bright);
  word-break:break-all;
}

.ssh-warning{
  margin-bottom:0 !important;
  padding:.75rem .9rem;
  border-left:3px solid var(--color-red);
  background:rgba(200,20,20,.07);
  border-radius:0 8px 8px 0;
  font-size:.95rem !important;
}

.ssh-empty{
  padding:1.4rem;
  color:var(--color-text-dim);
}