:root {
  --bg: #ffffff;
  --text: #111111;
  --link: #0060df;
  --code-bg: #f5f5f5;      /* light gray for light mode */
  --code-text: #1e1e1e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #f0f0f0;
    --link: #80bfff;
    --code-bg: #2a2a2a;    /* darker block for dark mode */
    --code-text: #d4d4d4;
  }
}
body {
  background-color: var(--bg);
  color: var(--text);
}
a {
  color: var(--link);
}
pre {
  background: var(--code-bg);
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
}
code {
  font-family: 'Courier New', monospace;
  color: var(--code-text);
  font-size: 0.9rem;
}
.spinner {
  width: 10px;
  height: 10px;
  border: 4px solid color-mix(in srgb, var(--text) 15%, transparent);
  border-top-color: var(--text);
  border-right-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}  

/* Comment */
.dot-spinner::after {
  content: '';
  width: 2ch;
  display: inline-block;
  animation: dots 1.8s steps(4, end) infinite;
}  
@keyframes dots {
 0% { content: ''; }
 25% { content: '.'; }
 50% { content: '..'; }
 75% { content: '...'; }
}

.joe::after {
  content: '#';
  width: 2ch;
  display: inline-block;
  animation: joe 1.3s steps(4, end) infinite;
}
@keyframes joe {
  0% { content: ''; }
  25% { content: 'j'; }
  50% { content: 'o'; }
  75% { content: 'e'; }
}

.matrix::after {
  content:'_';
  width: 2ch;
  display: inline-block;
  animation: matrix 1.9s steps(4, end) infinite;
}

@keyframes matrix {
  0% { content: '_'; }
  25% { content: ''; }
  50% { content: '_'; }
  75% { content: ''; }
}