html, body {
  margin: 0;
  padding: 0;
  background: #0c0c0c;
  color: #cccccc;
  font-family: "Cascadia Mono", Consolas, "DejaVu Sans Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.4;
}

a { color: #6fc36f; text-decoration: none; }
a:hover { color: #b8ffb8; text-decoration: underline; }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 80px;
}

.row { margin-top: 6px; }
.out { margin: 2px 0 10px 0; }
.p   { color: #5ab85a; }
.dim { color: #6a6a6a; }
.mono { color: #b8ffb8; }

.portrait {
  float: left;
  margin: 0 22px 6px 0;
  font-size: 4px;
  line-height: 4px;
  white-space: pre;
  color: #d6d6d6;
}

.name {
  margin: 0;
  font-size: 13px;
  line-height: 1.1;
  white-space: pre;
  font-weight: bold;
  background: linear-gradient(90deg,
    #1d5b1d, #2ea043, #5fed83, #b8ffc6, #5fed83, #2ea043, #1d5b1d);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: slide 5s linear infinite;
}
@keyframes slide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
.other { margin-top: 12px; }
.other img {
  vertical-align: middle;
  margin-left: 4px;
  image-rendering: pixelated;
}

.clear { clear: both; }

.icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
}
.icons > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cccccc;
}
.icons img { width: 18px; height: 18px; }

.hint {
  margin-top: 8px;
  color: #6a6a6a;
  font-size: 12px;
}
.hint:first-of-type { margin-top: 14px; }

#live {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  scroll-margin-bottom: 80px;
}
.inp { position: relative; flex: 1; }
.ghost {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #4a4a4a;
  font: inherit;
  white-space: pre;
}
.ghost .typed { color: transparent; }
#cmd {
  position: relative;
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: #e0e0e0;
  font: inherit;
  caret-color: #6fc36f;
  padding: 0;
}

#output > div { margin: 2px 0; }
#output .err { color: #d96a6a; }
#output .ok  { color: #6fc36f; }
#output .row { margin-top: 6px; }

.cert-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.cert-grid img {
  max-width: 220px;
  max-height: 160px;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: #6a6a6a;
  background: linear-gradient(to top, #0c0c0c 60%, transparent);
  padding: 14px 10px 10px;
  pointer-events: none;
}
footer a { pointer-events: auto; color: #7d7d7d; }
footer a:hover { color: #b8ffb8; }

@media (max-width: 760px) {
  .portrait {
    float: none;
    display: block;
    margin: 0 auto 10px;
    font-size: 3px;
    line-height: 3px;
  }
  .name { font-size: 9px; }
  .icons { gap: 8px 14px; }
  .icons > * { font-size: 13px; }
  footer { position: static; background: none; margin-top: 24px; }
  main { padding-bottom: 24px; }
}

@media (max-width: 420px) {
  body { font-size: 13px; }
  .portrait { font-size: 2.4px; line-height: 2.4px; }
  .name { font-size: 7px; }
}