*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:       #0a0e0a;
      --bg2:      #0f140f;
      --green:    #39ff14;
      --green-dim:#1a7a00;
      --green-mid:#26bf00;
      --amber:    #ffb700;
      --red:      #ff3c3c;
      --white:    #d4e8d4;
      --border:   #1c2e1c;
      --font:     ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    }

    html, body {
      height: 100%;
      background: var(--bg);
      color: var(--green);
      font-family: var(--font);
      font-size: 14px;
      line-height: 1.6;
      overflow: hidden;
    }

    /* scanline overlay */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0,0,0,0.07) 2px,
        rgba(0,0,0,0.07) 4px
      );
      pointer-events: none;
      z-index: 100;
    }

    /* vignette */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.7) 100%);
      pointer-events: none;
      z-index: 99;
    }

    #terminal {
      display: flex;
      flex-direction: column;
      height: 100vh;
      max-width: 900px;
      margin: 0 auto;
      padding: 0 16px;
    }

    /* title bar */
    #titlebar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 0 8px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .dot { width: 10px; height: 10px; border-radius: 50%; }
    .dot-r { background: #ff5f57; }
    .dot-y { background: #febc2e; }
    .dot-g { background: #28c840; }
    #titlebar span {
      margin-left: 8px;
      color: var(--green-mid);
      font-size: 12px;
      letter-spacing: 0.1em;
    }

    /* output area */
    #output {
      flex: 1;
      overflow-y: auto;
      padding: 16px 0 8px;
      scrollbar-width: thin;
      scrollbar-color: var(--green-dim) transparent;
    }
    #output::-webkit-scrollbar { width: 4px; }
    #output::-webkit-scrollbar-thumb { background: var(--green-dim); }

    .line { white-space: pre-wrap; word-break: break-word; margin-bottom: 2px; }
    .line-cmd { color: var(--white); }
    .line-cmd::before { content: 'kruvax@shell:~$ '; color: var(--green); }
    .line-out { color: var(--green-mid); }
    .line-err { color: var(--red); }
    .line-info { color: var(--amber); }
    .line-accent { color: var(--green); font-weight: 700; }
    .line-dim { color: var(--green-dim); }
    .line-blank { height: 0.8em; }

    /* ascii art */
    .ascii {
      color: var(--green);
      font-size: 12px;
      line-height: 1.2;
      margin-bottom: 4px;
    }

    /* input row */
    #inputrow {
      display: flex;
      align-items: center;
      padding: 8px 0 14px;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
      gap: 8px;
    }
    #prompt { color: var(--green); white-space: nowrap; user-select: none; }
    #input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      color: var(--white);
      font-family: var(--font);
      font-size: 14px;
      caret-color: var(--green);
    }

    /* boot animation */
    .boot-line {
      animation: fadein 0.1s ease forwards;
      opacity: 0;
    }
    @keyframes fadein { to { opacity: 1; } }

    /* blink cursor effect on welcome */
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
    .blink { animation: blink 1s step-end infinite; }