@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --background: #06090f;
  --border: #263243;
  --text: #dfe7f0;
  --muted: #738094;
  --green: #a9ff9a;
  --blue: #85b9ff;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  background: radial-gradient(circle at 16% 4%, rgba(40, 89, 131, .18), transparent 29rem), radial-gradient(circle at 88% 90%, rgba(21, 75, 76, .1), transparent 31rem), var(--background);
  font-family: Manrope, sans-serif;
}

.page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, .94fr) minmax(360px, 1.06fr);
  gap: clamp(2rem, 9vw, 12rem);
  align-items: start;
  padding: calc(clamp(1.5rem, 4vh, 3rem) + 25px) clamp(1.5rem, 6vw, 7rem);
}

.intro { max-width: 540px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 21px; color: var(--green); font: 12px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 31px; height: 1px; background: currentColor; }
h1 { margin: 0; font-size: clamp(3.1rem, 7vw, 6.5rem); font-weight: 500; letter-spacing: -.075em; line-height: .94; }
h1 em { display: block; color: #7992b3; font-style: normal; }
.intro p { max-width: 390px; margin: 29px 0 0; color: var(--muted); font-size: clamp(.95rem, 1.4vw, 1.08rem); line-height: 1.75; }
.status { display: flex; align-items: center; gap: 9px; margin-top: 38px; color: #93a0b2; font: 12px 'DM Mono', monospace; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 100%; background: var(--green); box-shadow: 0 0 0 4px rgba(169, 255, 154, .1), 0 0 15px rgba(169, 255, 154, .65); }

.terminal-shell {
  justify-self: end;
  width: min(100%, 640px);
  min-height: 250px;
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(15, 23, 35, .94), rgba(7, 12, 20, .98));
  box-shadow: 0 28px 75px rgba(0, 0, 0, .37), inset 0 1px rgba(255, 255, 255, .035);
  transition: min-height 700ms cubic-bezier(.22, 1, .36, 1);
}

.terminal-bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid rgba(126, 148, 176, .15); background: rgba(255, 255, 255, .018); }
.dots { display: flex; gap: 7px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: #536176; }
.dots i:nth-child(1) { background: #fa7d73; }
.dots i:nth-child(2) { background: #f5c364; }
.dots i:nth-child(3) { background: #74d281; }
.terminal-name { color: #8d9aae; font: 12px 'DM Mono', monospace; }
.terminal { flex: 1; min-height: 205px; padding: 20px; overflow: hidden; font: 14px/1.78 'DM Mono', monospace; transition: opacity 260ms ease; }
.line { min-height: 25px; white-space: pre-wrap; word-break: break-word; }
.prompt { color: var(--green); }
.path { color: var(--blue); }
.command { color: #d8e0ea; }
.output { padding-left: 1.25rem; color: #8795a9; }
.cursor { display: inline-block; width: 8px; height: 16px; margin-left: 3px; vertical-align: -3px; background: var(--green); animation: blink 900ms steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 760px) {
  body { overflow: auto; }
  .page { grid-template-columns: 1fr; gap: 3.7rem; padding: 2rem 1.4rem 3.5rem; }
  .terminal-shell { justify-self: stretch; max-height: 490px; min-height: 270px !important; }
  h1 { font-size: clamp(3.4rem, 17vw, 5.5rem); }
}