/* Base reset and typography */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Fira Code', monospace;
  background: black;
  color: #33ff33;
  overflow: hidden;
}

/* 2-column layout wrapper */
.layout-shell {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
}

/* Left: Terminal pane */
.terminal-pane {
  width: 480px; /* Increased width */
  background: black;
  color: #33ff33;
  padding: 2rem 1rem 2rem 2rem;
  overflow-y: auto;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  flex-shrink: 0;
  box-sizing: border-box;
  white-space: pre-wrap; /* Keeps ASCII lines intact */
  font-family: 'Fira Code', monospace;
}


/* Right: Page content overlay */
.page-pane {
  flex-grow: 1;
  padding: 2rem;
  overflow-y: auto;
  box-sizing: border-box;
  background: transparent;
}

/* Terminal output display */
.terminal-output {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.1rem;
}

.prompt-path {
  margin-right: 0.5rem;
  font-style: italic;
  color: #66ff66;
}

.prompt {
  margin-right: 0.5rem;
}

/* Invisible input field for capturing keyboard */
.hidden-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  height: 0;
}

/* Blinking block cursor */
.cursor-block {
  display: inline-block;
  width: 0.6ch;
  height: 1.2em;
  background-color: #33ff33;
  margin-left: 2px;
  animation: blink 1s step-end infinite;
  vertical-align: bottom;
}

pre.ascii-welcome {
  margin: 0 0 1rem 0;
  white-space: pre;
  overflow: hidden;
}

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

/* Responsive stacking: terminal on top */
@media (max-width: 768px) {
  .layout-shell {
    flex-direction: column;
  }

  .terminal-pane {
    width: 100%;
    height: 50vh;
  }

  .page-pane {
    height: 50vh;
  }
}
@media (max-width: 900px) {
  .layout-shell {
    flex-direction: column;
  }

  .terminal-pane {
    width: 100%;
    height: 50vh;
  }

  .page-pane {
    height: 50vh;
  }
}