/* =============================================
   about.css — Terminal + about text section
   ============================================= */

#about {
  padding: 100px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ── Terminal window ── */
.terminal {
  background: var(--bg0);
  border: 1px solid var(--bg2);
  position: relative;
}
.terminal-bar {
  background: var(--bg1);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--bg2);
}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red    { background: var(--red-b); }
.dot.yellow { background: var(--yellow-b); }
.dot.green  { background: var(--green-b); }
.terminal-title {
  font-size: 11px;
  color: var(--fg2);
  margin-left: auto;
  letter-spacing: 2px;
}
.terminal-body {
  padding: 24px;
  font-size: 12px;
  line-height: 2;
  min-height: 320px;
}

/* Syntax highlight classes */
.t-line    { display: block; }
.t-prompt  { color: var(--green-b); }
.t-cmd     { color: var(--yellow-b); }
.t-out     { color: var(--fg2); }
.t-key     { color: var(--blue-b); }
.t-val     { color: var(--aqua-b); }
.t-comment { color: var(--bg3); }
.t-cursor  {
  display: inline-block;
  width: 10px; height: 14px;
  background: var(--yellow-b);
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

/* ── About text side ── */
.about-p {
  font-size: 13px;
  color: var(--fg1);
  line-height: 2.2;
  margin-bottom: 20px;
}
.highlight-box {
  background: var(--bg);
  border-left: 3px solid var(--yellow-b);
  padding: 16px 20px;
  margin-top: 30px;
  font-size: 12px;
  color: var(--fg2);
  line-height: 1.8;
}

@media (max-width: 900px) {
  #about {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px 24px;
  }
}