body {
  font-family: monospace;
  line-height: 1.6;
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
  background: #fff;
  color: #000;
}
h1 { font-size: 2em; margin: 1em 0 0.5em; }
h2 { font-size: 1.5em; margin: 1.5em 0 0.5em; border-bottom: 1px solid #ccc; padding-bottom: 0.3em; }
h3 { font-size: 1.2em; margin: 1.2em 0 0.5em; }
a { color: #00e; text-decoration: none; font-weight: bold; }
a:visited { color: #551a8b; }
a:hover { text-decoration: underline; }
p a { text-decoration: none; }
p a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
a[target="_blank"]::after { 
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.2em;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M9 2L9 3L12.3 3L6 9.3L6.7 10L13 3.7L13 7L14 7L14 2ZM4 4C2.9 4 2 4.9 2 6L2 12C2 13.1 2.9 14 4 14L10 14C11.1 14 12 13.1 12 12L12 7L11 8L11 12C11 12.6 10.6 13 10 13L4 13C3.4 13 3 12.6 3 12L3 6C3 5.4 3.4 5 4 5L8 5L9 4Z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: text-top;
}
ul { list-style: none; padding: 0; }
li { margin: 1em 0; padding: 0.5em 0; border-bottom: 1px dotted #ddd; }
li:last-child { border-bottom: none; }
strong { font-weight: bold; }
img { display: block; max-width: 120px; height: auto; border: 1px solid #ccc; margin: 0.5em 0; }
.nav { margin: 2em 0; }
.nav a { margin-right: 2em; }
.intro { margin: 2em 0; font-style: italic; }
.quote { margin: 1.5em 0; padding-left: 2em; border-left: 3px solid #ccc; font-style: italic; }
.hero { text-align: center; margin: 3em 0; }
.closing { margin: 3em 0; padding: 2em; background: #f9f9f9; border-radius: 8px; }
.warning-section { background: #fff3cd; border-left: 4px solid #ff9800; padding: 1em; margin: 2em 0; }
.compromised { background: #ffebee; border-left: 4px solid #f44336; }
.code-block { font-family: monospace; background: #f5f5f5; padding: 1em; margin: 1em 0; border-left: 3px solid #333; }

.github-corner::after {
  content:"" !important;
  background:none !important;
}
.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out;
}
@keyframes octocat-wave {
  0%, 100% { transform: rotate(0); }
  20%, 60% { transform: rotate(-25deg); }
  40%, 80% { transform: rotate(10deg); }
}
@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none;
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}