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

:root {
  --bg:         #010409;
  --term-bg:    #0d1117;
  --bar-bg:     #161b22;
  --text:       #e6edf3;
  --muted:      #8b949e;
  --dim:        #484f58;
  --prompt:     #3fb950;
  --cmd-color:  #79c0ff;
  --key:        #d2a8ff;
  --string:     #a5d6ff;
  --warn:       #e3b341;
  --link:       #58a6ff;
  --border:     #30363d;
  --chip-bg:    #21262d;
  --chip-hover: #2d333b;
  --chip-text:  #cdd9e5;
  --inset-bg:   #090e15;

  --ff: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;
  --fs: 13.5px;
  --lh: 1.65;
}

[data-theme="light"] {
  --bg:         #f6f8fa;
  --term-bg:    #ffffff;
  --bar-bg:     #f0f2f5;
  --text:       #1f2328;
  --muted:      #636c76;
  --dim:        #9198a1;
  --prompt:     #116329;
  --cmd-color:  #0550ae;
  --key:        #8250df;
  --string:     #0a3069;
  --warn:       #9a6700;
  --link:       #0969da;
  --border:     #d0d7de;
  --chip-bg:    #f0f2f5;
  --chip-hover: #e6e8eb;
  --chip-text:  #1f2328;
  --inset-bg:   #f0f4f8;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff);
  font-size: var(--fs);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}


/* ── LAYOUT ─────────────────────────────────────────────────── */
.terminal {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 900px;
  margin: 0 auto;
  border-inline: 1px solid var(--border);
  background: var(--term-bg);
  color: var(--text);
  font-family: var(--ff);
  font-size: var(--fs);
  line-height: var(--lh);
}

/* ── TITLE BAR ───────────────────────────────────────────────── */
.t-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem 1.25rem;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.t-title {
  flex: 1;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.t-loc {
  font-size: 12px;
  color: var(--dim);
}

/* ── OUTPUT ──────────────────────────────────────────────────── */
.t-output {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.t-output::-webkit-scrollbar { width: 5px; }
.t-output::-webkit-scrollbar-track { background: transparent; }
.t-output::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── INPUT ROW ───────────────────────────────────────────────── */
.t-input-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 2rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.t-input-prompt { color: var(--prompt); font-weight: 600; user-select: none; }
.t-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--cmd-color);
  font-family: var(--ff);
  font-size: var(--fs);
  outline: none;
  caret-color: var(--prompt);
}
.t-input::placeholder { color: var(--dim); }

/* ── CHIPS ───────────────────────────────────────────────────── */
.t-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .6rem 2rem;
  border-top: 1px solid var(--border);
  background: var(--bar-bg);
  flex-shrink: 0;
}

.t-chips__label {
  font-size: 11px;
  color: var(--dim);
  margin-right: .15rem;
}

.chip {
  font-family: var(--ff);
  font-size: 11px;
  padding: .2em .7em;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  color: var(--chip-text);
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  text-decoration: none;
  display: inline-block;
  line-height: 1.7;
}
.chip:hover { background: var(--chip-hover); border-color: var(--muted); text-decoration: none; }
.chip--link  { color: var(--link); }
.chip--util  { color: var(--dim); }
.chip--util:hover { color: var(--muted); }

/* ── OUTPUT ELEMENTS ─────────────────────────────────────────── */

.out-cmd {
  display: flex;
  gap: .55em;
  margin-top: 1.5rem;
  margin-bottom: .2rem;
}
.out-cmd:first-child { margin-top: 0; }
.out-cmd__prompt { color: var(--prompt); }
.out-cmd__text   { color: var(--cmd-color); }

.out-line         { }
.out-line--muted  { color: var(--muted); }
.out-line--dim    { color: var(--dim); }
.out-line--green  { color: var(--prompt); }
.out-line--warn   { color: var(--warn); }
.out-line--key    { color: var(--key); }

.out-blank { height: .9em; }

.out-block { margin: .15rem 0; }

/* Inline clickable command reference */
.inline-cmd {
  color: var(--cmd-color);
  cursor: pointer;
  border-bottom: 1px dashed var(--dim);
}
.inline-cmd:hover { color: var(--link); border-color: var(--link); }

/* Section header */
.s-head {
  color: var(--prompt);
  font-weight: 600;
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.s-head::after {
  content: '';
  flex: 1;
  max-width: 260px;
  height: 1px;
  background: var(--border);
}

/* Key–value */
.kv { display: flex; gap: 1.5rem; line-height: 1.9; }
.kv__k { color: var(--key); min-width: 11ch; }
.kv__v { color: var(--text); }

/* Git-log commits */
.commits { padding-left: .25rem; }
.commit {
  border-left: 2px solid var(--border);
  padding-left: 1.25rem;
  padding-bottom: 1.75rem;
}
.commit:last-child { padding-bottom: 0; }
.commit__hash  { color: var(--warn); font-size: 11.5px; margin-bottom: .2rem; }
.commit__title { color: var(--text); font-weight: 600; font-size: 14px; }
.commit__meta  { color: var(--muted); font-size: 12px; margin-bottom: .45rem; }
.commit__body  { color: var(--muted); max-width: 58ch; line-height: 1.75; }
.commit__tags  { margin-top: .55rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.tag {
  font-size: 11px;
  padding: .1em .6em;
  border: 1px solid var(--border);
  color: var(--dim);
  border-radius: 3px;
}

/* Stack tree */
.stack-group { margin-bottom: 1.1rem; }
.stack-group__name { color: var(--key); margin-bottom: .3rem; }
.stack-item { color: var(--dim); padding-left: .25rem; }
.stack-item span { color: var(--muted); }
.stack-item::before { content: '├── '; }
.stack-item:last-child::before { content: '└── '; }
.stack-item:last-child span { color: var(--text); }

/* Projects */
.project {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: .75rem;
  background: var(--inset-bg);
}
.project__path  { color: var(--dim); font-size: 12px; margin-bottom: .35rem; }
.project__title { color: var(--string); font-weight: 600; margin-bottom: .45rem; font-size: 14px; }
.project__desc  { color: var(--muted); max-width: 60ch; line-height: 1.75; margin-bottom: .55rem; }
.project__meta  { display: flex; flex-wrap: wrap; gap: .4rem .25rem; column-gap: 2rem; }
.project__label { color: var(--key); }
.project__value { color: var(--dim); }
.project__links { margin-top: .55rem; display: flex; gap: 1rem; }
.project__link  { color: var(--link); font-size: 12px; }
.project__link:hover { text-decoration: underline; }

/* Principles */
.principle { display: flex; gap: .75rem; padding: .25rem 0; }
.principle__arrow { color: var(--prompt); }
.principle__text  { color: var(--text); }

/* Contact */
.contact-row { display: flex; align-items: baseline; gap: 1.5rem; padding: .25rem 0; }
.contact-key { color: var(--key); min-width: 9ch; }
.contact-val { color: var(--link); }
.contact-val:hover { text-decoration: underline; }

/* Blinking cursor */
.cursor {
  display: inline-block;
  width: .6em;
  height: 1em;
  background: var(--prompt);
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --fs: 12px; }
  .terminal { border-inline: none; }
  .t-output { padding: 1rem 1.25rem .75rem; }
  .t-input-row, .t-chips { padding-inline: 1.25rem; }
  .t-loc { display: none; }
}