*, *::before, *::after { box-sizing: border-box; }
    html { background:#000; }
    body {
      margin:0;
      color:#f4f4f4;
      font-family: system-ui, sans-serif;
      min-height:100vh;
      overflow-x:hidden; /* guard against edge bleed */
    }

    /* Use a centered page wrapper */
    .page {
      max-width: 800px;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;  /* or remove this line entirely */
  justify-content: flex-start; /* optional */
  text-align: left;
  min-height: 100vh;
    }

.page { width: min(100%, 100vw); }


    h1 {
      font-size: 2.25rem!important;
      margin-bottom: 0.25em;
    }

    p {
      font-size: 1.25rem;
      margin-bottom: 1px;
font-weight:300;
font-family: 'Lato', sans-serif;
    }

    .tagline {
      opacity: 0.85;
font-family: 'Lato', sans-serif;
font-weight:700;
    }

    footer {
      font-size: 0.875rem;
      color:#666;
 margin:60px 0 40px 0; 
text-align:center 
}

.roboto { font-family: 'Roboto Mono', monospace; color:#15a538;
  font-size: 1.5rem; }

/* Thin */
.thin-text {
  font-weight: 100;
}

/* Medium */
.medium-text {
  font-weight: 500;
}
.footer-icons { 
display: flex; gap: 10px; margin: 20px 0 0 0; justify-content: center; align-items: center; }

.footer-icons a { text-decoration: none }

.footer-icons a:hover { opacity:0.75 }

@keyframes crtFlicker {
  0%, 3% {
    opacity: 0.92;
    filter: drop-shadow(0 0 2px #15a538) drop-shadow(0 0 8px #15a538);
  }
  6% {
    opacity: 0.97;
    filter: drop-shadow(0 0 3px #a5152a) drop-shadow(0 0 6px #a5152a);
  }
  9% {
    opacity: 0.90;
    filter: drop-shadow(0 0 2px #15a538) drop-shadow(0 0 5px #15a538);
  }
  12% {
    opacity: 0.94;
    filter: drop-shadow(0 0 4px #a5152a) drop-shadow(0 0 7px #a5152a);
  }
  15% {
    opacity: 0.91;
    filter: drop-shadow(0 0 1px #15a538) drop-shadow(0 0 6px #15a538);
  }
  18% {
    opacity: 0.95;
    filter: drop-shadow(0 0 4px #a5152a) drop-shadow(0 0 9px #a5152a);
  }
  20% {
    opacity: 0.89;
    filter: drop-shadow(0 0 2px #15a538) drop-shadow(0 0 5px #15a538);
  }

  /* Hold (80% of the cycle) */
  21%, 100% {
    opacity: 0.96;
    filter: drop-shadow(0 0 3px #15a538) drop-shadow(0 0 8px #15a538);
  }
}

.crt {
  animation: crtFlicker 4s infinite;
  color: #15a538;
}
#floppy img { margin-top:20px }

.cursor {
  display: inline-block;
  color: #15a538;
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

h3 { margin:40px 0 0 0; text-align:left }
p { text-align:left }

p.interpunct { text-align: center; color: #333; margin: 40px 0 0 0; }

blockquote {
  border-left: 4px solid #15a538; /* accent for ManOS vibe */
  padding: .2rem 1rem 1.5rem 1.5rem;
  margin: 1.25rem 0 .25rem 0;
  color: #ffffff;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  position: relative;
max-width: 800px;
}
p.caption { font-size: 14px;
    color: #666; text-align:center }
.illustration img {width:400px;margin-top:20px}

@media (max-width: 480px) {
  .page { width: 100%; max-width: none; padding: 0 12px; }
  h1 { font-size: 1.75rem; }
  p  { font-size: 1.0625rem; }
.illustration img {width:320px}
}
p strong {
font-weight: 600;
    font-style: italic;
    color: #15a538;
    text-shadow: 1px 1px 2px #444;
}