/* --- CSS VARIABLES --- */
    :root {
      --bg: #0b0b0b;
      --primary: #00ff66;
      --dim: #1faa6b;
      --amber: #ffb000;
      --red: #ff4d4d;
      --cyan: #00e5ff;
      --font-mono: 'Courier New', Courier, monospace;
    }

    /* --- GLOBAL & CRT EFFECTS --- */
    body, html {
      margin: 0;
      padding: 0;
      background-color: var(--bg);
      color: var(--primary);
      font-family: var(--font-mono);
      font-size: 19.6px;
      line-height: 1.4;
      height: 100%;
      overflow-x: hidden;
    }

    /* Scanline Overlay */
    body::before {
      content: " ";
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
      z-index: 999;
      background-size: 100% 2px, 3px 100%;
      pointer-events: none;
    }

    /* Subtle Screen Flicker & Glow */
    .terminal {
      padding: 20px;
      max-width: 900px;
      margin: 0 auto;
      text-shadow: 0 0 3px rgba(0, 255, 102, 0.4);
      animation: flicker 0.15s infinite;
    }

    @keyframes flicker {
      0% { opacity: 0.98; }
      50% { opacity: 1; }
      100% { opacity: 0.99; }
    }

    /* --- UTILITY CLASSES --- */
    .prompt {
      color: var(--dim);
      font-weight: bold;
      margin-right: 8px;
    }
    
    .prompt-user {
      color: var(--primary);
    }
    
    .prompt-dir {
      color: var(--cyan);
    }

    .cursor {
      display: inline-block;
      width: 8px;
      height: 14px;
      background-color: var(--primary);
      animation: blink 1s step-end infinite;
      vertical-align: middle;
      margin-left: 2px;
    }

    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    .accent-amber { color: var(--amber); }
    .accent-red { color: var(--red); }
    .accent-cyan { color: var(--cyan); }
    .dim-text { color: var(--dim); }

    a {
      color: var(--cyan);
      text-decoration: none;
    }
    
    a:hover {
      background-color: var(--cyan);
      color: var(--bg);
      text-shadow: none;
    }

    /* --- LAYOUT SECTIONS --- */
    .section {
      margin-bottom: 30px;
    }

    .ascii-line {
      color: var(--dim);
      margin: 10px 0;
    }

    /* Nav Menu */
    .nav-menu {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-top: 10px;
    }
    
    .nav-item {
      display: inline-block;
      width: fit-content;
      cursor: pointer;
    }
    
    .nav-item:hover {
      background-color: var(--primary);
      color: var(--bg);
      text-shadow: none;
    }

    /* Ricing Showcase */
    .rice-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      margin-top: 15px;
    }

    .rice-card {
      border: 1px solid var(--dim);
      padding: 10px;
      position: relative;
    }
    
    .rice-card:hover {
      border-color: var(--primary);
      box-shadow: 0 0 8px rgba(0, 255, 102, 0.2);
    }

    .rice-img-container {
      width: auto;
      height: auto;
      border: 1px dashed var(--dim);
      margin: 10px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--dim);
      background: rgba(31, 170, 107, 0.05);
    }

    /* Social Links */
    .social-link {
      display: flex;
      gap: 15px;
      margin: 5px 0;
    }
    
    .social-link .key {
      width: 100px;
    }

    /* Footer */
    #footer {
      border-top: 1px solid var(--dim);
      padding-top: 10px;
      margin-top: 40px;
      font-size: 12px;
    }
    img {
      max-width: 100%;
      height: 100%@;
    }