/* Root variables for consistent theming across the page. */
    :root{
      --bg:#050607;
      --panel:#07100a;
      --accent:#4cff4c;
      --muted:#6f776f;
      --mono: 'Courier New', Courier, monospace;
    }
    /* Universal selector to ensure box-sizing is consistent and set basic body styles with a radial gradient background. */
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:radial-gradient(ellipse at center,var(--bg) 0%,#000 70%);color:var(--accent);font-family:var(--mono);}

  
    body::before{
      content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(0,0,0,0.02) 1px, transparent 4px);background-size:100% 4px;mix-blend-mode:overlay;opacity:.9}

    /* Wrapper class for centering content vertically and horizontally with padding. */
    .wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:3rem}
    /* Card class for the main content container, with styling for a glassmorphic, shadowed box. */
    .card{width:100%;max-width:920px;padding:2.25rem;border-radius:0px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);box-shadow:0 6px 30px rgba(0,0,0,0.6);border:1px solid rgba(76,204,76,0.06);backdrop-filter:blur(3px)}

    /* Logo styling with size, spacing. */
    .logo{font-size:36px;letter-spacing:2px;margin:0 0 0.5rem;display:flex;align-items:center}

    /* Pre tag for ASCII art, preserving whitespace and formatting. */
    pre.ascii{margin:0;font-size:10px;line-height:10px;color:var(--muted);opacity:.9}

    /* Headline*/
      h1 {
        font-size: 42px;
        margin: 0 0 0.5rem;
        color: var(--accent);
        text-align: left;
        text-shadow:
          0 0 4px var(--accent),
          0 0 10px rgba(76,204,76,0.4);
        letter-spacing: 1px;
        font-weight: 400;
      }

/* Subtext / tagline  */
.lead {
  color: var(--muted);
  margin: 0 0 1.25rem;
  text-align: right;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-shadow: 0 0 2px rgba(76,204,76,0.1);
}


    .terminal {
      background: #000;
      color: #00ff00;
      padding: 1rem;
      border: 1px solid #003300;
      font: 14px/1.4 'Courier New', monospace;
      }

    .terminal p {
      margin: 0;
    }

    .terminal p::before {
      content: "$ ";
      color: #00ff00;
    }

    /* Footer text styling. */
    footer{margin-top:1.25rem;color:var(--muted);font-size:10px}

    /*   CRT Flicker   */
    @keyframes flicker {
      0%   { opacity: 1; }
      2%   { opacity: 0.3; }
      5%   { opacity: 0.9; }
      8%   { opacity: 0.2; }
      10%  { opacity: 0.8; }
      13%  { opacity: 0.4; }
      20%  { opacity: 1; }
      28%  { opacity: 0.6; }
      42%  { opacity: 0.95; }
      60%  { opacity: 0.5; }
      75%  { opacity: 1; }
      90%  { opacity: 0.7; }
      100% { opacity: 1; }
    }

    .card {
      animation: flicker 1.6s infinite;
      animation-timing-function: steps(80);
    }

    /* Responsive media query for smaller screens. */
    @media (max-width:520px){h1{font-size:28px}.logo{font-size:20px}}

    /* Additional positioning for card and wrap. */
    .card {
      position: relative;
      z-index: 2;
    }
    .wrap {
      position: relative;
      z-index: 2;
    }

    /* ===== Status Indicator (red glow) ===== */
    .status-glow {
      color: #ff2e2e;
      font-size: 16px;
      text-align: right;
      font-family: 'Share Tech Mono', 'Roboto Mono', monospace;
      text-shadow:
        0 0 5px #ff2e2e,
        0 0 10px #ff2e2e,
        0 0 20px #ff2e2e,
        0 0 40px #ff0000;
      animation: glowPulse 1.8s infinite;
    }

    @keyframes glowPulse {
      0%, 100% {
        text-shadow: 0 0 6px #ff2e2e, 0 0 20px #ff0000;
        opacity: 0.9;
      }
      50% {
        text-shadow: 0 0 2px #ff2e2e, 0 0 8px #ff0000;
        opacity: 0.7;
      }
}
      pre.ascii {
  margin: 0;
  font-size: 10px;
  line-height: 10px;
  color: var(--muted);
  white-space: pre;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.4),
    0 0 8px rgba(255, 255, 255, 0.25);
}

/* ===== Mobile Optimization ===== */
@media (max-width: 520px) {
  /* Headline smaller */
  h1 {
    font-size: 24px;
  }

  /* Logo smaller */
  .logo {
    font-size: 18px;
    letter-spacing: 1px;
  }

  /* Card padding smaller */
  .card {
    padding: 1rem;
    margin: 0 0.5rem;
  }

  /* Terminal smaller font */
  .terminal {
    font-size: 12px;
    padding: 0.75rem;
  }

  /* ASCII art smaller */
  pre.ascii {
    font-size: 6px;
    line-height: 6px;
  }

  /* Lead / tagline smaller */
  .lead {
    font-size: 12px;
    text-align: center;
  }

  /* Status indicator smaller */
  .status-glow {
    font-size: 14px;
    text-align: center;
  }

  /* Reduce wrap padding */
  .wrap {
    padding: 1rem;
  }

  /* Prevent horizontal overflow */
  body, html {
    overflow-x: hidden;
  }
}