@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

  :root {
    --crt-bg: #000000;
    --crt-green: #33ff33;
    --crt-dim: #1a881a;
    --crt-dark: #093309;
    --crt-scanline: rgba(18, 16, 16, 0.4);
    --font-stack: "VT323", monospace;
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--crt-bg);
    color: var(--crt-green);
    font-family: var(--font-stack);
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: 0.5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* Fullscreen frame with scanline overlay and zero borders */
  #crt-frame {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    background: #000000;
    overflow: hidden;
  }

  #crt-frame::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, var(--crt-scanline) 50%);
    background-size: 100% 3px;
    z-index: 10;
    pointer-events: none;
    opacity: 0.8;
  }

  #output {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scroll-behavior: smooth;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  #output::-webkit-scrollbar {
    width: 8px;
  }
  #output::-webkit-scrollbar-track {
    background: #000;
  }
  #output::-webkit-scrollbar-thumb {
    background: var(--crt-dark);
  }

  .log-line {
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 2px;
  }

  .text-dim { color: var(--crt-dim); }
  .text-bright { color: #80ff80; font-weight: bold; }
  .text-err { color: #ff5555; }

  .post-entry {
    margin: 6px 0;
    padding: 2px 0;
  }
  .post-meta {
    font-size: 20px;
    color: var(--crt-dim);
    margin-bottom: 2px;
  }
  .post-content {
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* CLI Input and In-line Cursor Positioning */
  #cli-row {
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
    flex-shrink: 0;
    position: relative;
    cursor: default;
  }

  #prompt-label {
    white-space: nowrap;
    margin-right: 8px;
    font-weight: normal;
    color: var(--crt-green);
  }

  #input-mirror-container {
    position: relative;
    display: block;
    flex: 1;
    white-space: normal;
    word-break: break-all;
    min-width: 0;
  }

  #text-render-before, #text-render-after {
    white-space: pre-wrap;
    color: var(--crt-green);
  }

  #cursor-char {
    display: inline-block;
    background-color: var(--crt-green);
    color: #000000;
    line-height: 1.1;
    animation: blink 1s steps(2, start) infinite;
  }

  @keyframes blink {
    to {
      background-color: transparent;
      color: var(--crt-green);
    }
  }

  #cmd-input {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    cursor: default;
  }

.help-block { white-space: pre-wrap; }

html { -webkit-text-size-adjust: 100%; }
#cmd-input { font-size: 16px; } /* prevents iOS zoom on focus */

@media (max-width: 600px) {
  html, body { font-size: 18px; }
  #crt-frame { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .post-meta { font-size: 16px; }
  #prompt-label { margin-right: 6px; }
}

@media (max-width: 380px) {
  html, body { font-size: 16px; }
  .help-block { font-size: 14px; }
}

@media (display-mode: standalone) {
  body { overscroll-behavior: none; }
}

#output, #crt-frame { overflow-x: hidden; max-width: 100%; }
#output * { overflow-wrap: anywhere; }

/* honeypot: invisible to humans, bots fill it */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }