:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #07110e;
  color: #e7f5ed;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgba(54, 211, 153, .13), transparent 38rem),
    #07110e;
}

.shell { width: min(960px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0; }
header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.brand { display: flex; align-items: end; gap: 22px; }
.logo { display: block; flex: none; transition: transform .17s ease; }
.logo:hover { transform: scale(1.04); }
.logo img { display: block; height: clamp(64px, 11vw, 96px); width: auto; }
h1 { margin: 0; font: 600 clamp(2rem, 7vw, 4.5rem)/.95 Georgia, serif; letter-spacing: -.04em; }
.eyebrow { margin: 0 0 8px; color: #73dbaa; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.status { color: #9aafa5; font-size: .86rem; }
.status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #e5b567; }
.status.ready::before { background: #52e09c; box-shadow: 0 0 12px #52e09c; }
.status.failed::before { background: #ff7373; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
button { border: 1px solid #29463b; border-radius: 7px; background: #10231c; color: #cfe5d9; padding: 9px 13px; font: inherit; cursor: pointer; }
button:hover:not(:disabled) { border-color: #52ba89; background: #173126; }
button:disabled { cursor: wait; opacity: .45; }

.terminal { min-height: 520px; max-height: 68vh; overflow: auto; border: 1px solid #234035; border-radius: 12px; background: rgba(5, 14, 11, .88); box-shadow: 0 24px 80px rgba(0, 0, 0, .28); }
.output { padding: 20px 22px 4px; }
pre { margin: 0 0 14px; white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.65 "SFMono-Regular", Consolas, monospace; color: #d5e9df; }
pre.input { color: #72d9a7; }
pre.error { color: #ff9494; }
.prompt-row { position: sticky; bottom: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px; padding: 12px 14px; border-top: 1px solid #1d352c; background: #0a1712; }
.prompt-row label { padding-top: 8px; color: #54df9d; font: 700 15px monospace; }
textarea { width: 100%; min-height: 36px; max-height: 180px; resize: none; overflow-y: auto; border: 0; outline: 0; background: transparent; color: #f0fbf5; font: 15px/1.45 "SFMono-Regular", Consolas, monospace; padding: 7px 0; }
.prompt-row button { color: #08140f; background: #61dca0; border-color: #61dca0; font-weight: 700; }
.hint { margin: 10px 2px 0; color: #6f887d; font-size: .78rem; }

@media (max-width: 600px) {
  .shell { width: min(100% - 20px, 960px); padding: 24px 0; }
  header { align-items: start; flex-direction: column; gap: 12px; }
  .terminal { min-height: 65vh; }
}