.terminal-stage {
  --terminal: #f7f9ff;
  --terminal-raised: #f6f9fe;
  --input: #dde9f9;
  --footer: #c6daf5;
  --chrome: #c6daf5;
  --chrome-border: #b8cae3;
  --border: #e5e7eb;
  --text: #55585f;
  --emphasis: #1a1a1a;
  --muted: #66686e;
  --faint: #7a7c82;
  --tool: #315388;
  --success: #5fb167;
  --strategist: #4795e0;
  --scout: #5fb167;
  --diagnosis: #c86158;
  --autosynth: #fa8334;
  --action: #fa8334;
  position: relative;
  padding: 0;
  overflow: hidden;
  background: transparent;
  user-select: none;
}

.terminal-window {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1.6px solid var(--border);
  border-radius: 15px;
  background: var(--terminal);
  box-shadow:
    0 10px 28px rgb(50 83 136 / 8%),
    0 1px 3px rgb(50 83 136 / 6%);
  color: var(--text);
  font-family: 'Geist Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 13.9px;
  letter-spacing: -0.01em;
}

.terminal-titlebar {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  left: 0;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--chrome-border);
  background: var(--chrome);
}

.terminal-lights {
  display: flex;
  align-items: center;
  gap: 9px;
}

.terminal-light {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 12%);
}

.terminal-light.close {
  background: #ff5f57;
}
.terminal-light.minimize {
  background: #febc2e;
}
.terminal-light.maximize {
  background: #28c840;
}

.terminal-transcript {
  position: absolute;
  inset: 66px 14px 111px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 8px;
  scroll-behavior: smooth;
  scrollbar-color: #c6daf5 transparent;
  scrollbar-width: thin;
  user-select: text;
  overscroll-behavior: contain;
}

.terminal-transcript::-webkit-scrollbar {
  width: 7px;
}
.terminal-transcript::-webkit-scrollbar-track {
  background: transparent;
}
.terminal-transcript::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background: #c6daf5;
}

.term-line {
  min-height: 1.5em;
  color: var(--text);
  font-weight: 400;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.term-line.line-enter {
  animation: line-enter 144ms ease-out both;
}

@keyframes line-enter {
  from {
    opacity: 0.35;
    transform: translateY(0.2em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.agent-block {
  display: block;
}
.agent-block .agent-child {
  margin-left: 0;
}

.term-line.strong {
  color: var(--emphasis);
  font-weight: 600;
}
.term-line strong {
  color: var(--emphasis);
  font-weight: 600;
}
.term-line.dim {
  color: var(--muted);
}
.term-line.status {
  color: var(--muted);
  margin-top: 0.35em;
}
.term-line.gap-before {
  margin-top: 0.72em;
}
.term-line.live {
  font-variant-numeric: tabular-nums;
}

.glyph,
.branch {
  color: var(--faint);
}
.main-dot {
  color: var(--emphasis);
}
.tool-dot {
  color: var(--success);
}
.tool-name {
  color: var(--tool);
  font-weight: 650;
}
.success {
  color: var(--success);
}
.tool-text {
  color: var(--action);
  font-weight: 700;
}
.message-glyph {
  color: var(--tool);
}
.working {
  color: var(--scout);
}

.activity-dot.is-active,
.active-status .activity-glyph {
  animation: activity-blink 720ms steps(1, end) infinite;
}

.activity-dot.is-complete {
  color: var(--success);
}

@keyframes activity-blink {
  0%,
  54% {
    opacity: 1;
  }
  55%,
  100% {
    opacity: 0.22;
  }
}

.stream-cursor {
  display: inline-block;
  width: 0.48em;
  height: 1em;
  margin-left: 0.12em;
  vertical-align: -0.12em;
  background: currentColor;
  animation: activity-blink 620ms steps(1, end) infinite;
}

.role {
  font-weight: 650;
}
.role.strategist,
.dot.strategist {
  color: var(--strategist);
}
.role.scout,
.dot.scout {
  color: var(--scout);
}
.role.diagnosis,
.dot.diagnosis {
  color: var(--diagnosis);
}
.role.autosynth,
.dot.autosynth {
  color: var(--autosynth);
}

.terminal-prompt {
  position: absolute;
  right: 18px;
  bottom: 50px;
  left: 18px;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--input);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.prompt-chevron {
  margin-right: 12px;
  color: var(--tool);
  font-weight: 650;
}

.prompt-placeholder {
  color: var(--tool);
}

.prompt-cursor {
  width: 0.58em;
  height: 1.25em;
  margin-left: 3px;
  background: var(--tool);
  animation: cursor-blink 1.05s steps(1, end) infinite;
}

@keyframes cursor-blink {
  0%,
  48% {
    opacity: 1;
  }
  49%,
  100% {
    opacity: 0;
  }
}

.terminal-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: var(--footer);
  font-size: 12.83px;
  font-weight: 400;
  line-height: 1;
  z-index: 2;
}

.footer-model {
  color: var(--tool);
}
.footer-model span {
  color: var(--tool);
  opacity: 0.62;
}
.footer-session {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.footer-session[hidden],
.jump-latest[hidden] {
  display: none;
}
.goal-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tool);
}
.goal-dot {
  color: #42c978;
  font-size: 10px;
}
.context-status {
  color: var(--tool);
}

.jump-latest {
  position: absolute;
  right: 26px;
  bottom: 103px;
  z-index: 4;
  padding: 7px 11px;
  border: 1px solid #b8cae3;
  border-radius: 999px;
  background: rgb(248 249 254 / 95%);
  box-shadow: 0 7px 20px rgb(50 83 136 / 12%);
  color: var(--tool);
  font:
    650 0.82em/1.1 SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  cursor: pointer;
}

.demo-controls {
  position: absolute;
  top: 50%;
  right: 10px;
  display: flex;
  gap: 3px;
  transform: translateY(-50%);
}

.demo-control {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: #2e568e;
  cursor: pointer;
  opacity: 0.92;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.demo-control:hover {
  background: rgb(255 255 255 / 32%);
  box-shadow: none;
  opacity: 1;
}
.demo-control:active {
  background: rgb(255 255 255 / 44%);
  box-shadow: none;
  transform: scale(0.92);
}
.demo-control:disabled {
  background: transparent;
  box-shadow: none;
  color: #36a866;
  cursor: default;
  opacity: 0.9;
  transform: none;
}
.control-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.icon-play,
.icon-complete {
  display: none;
}
.demo-control.is-paused .icon-pause,
.demo-control.is-complete .icon-pause {
  display: none;
}
.demo-control.is-paused .icon-play,
.demo-control.is-complete .icon-complete {
  display: block;
}
.demo-control:focus-visible,
.jump-latest:focus-visible,
.terminal-transcript:focus-visible {
  outline: 2px solid #3569ad;
  outline-offset: 3px;
}

.fallback-media {
  width: 100%;
}

@media (max-width: 640px) {
  .terminal-stage {
    padding: 0;
  }

  .terminal-window {
    border-radius: 12px;
    font-size: 11px;
  }

  .terminal-titlebar {
    height: 48px;
    padding: 0 12px;
  }
  .terminal-light {
    width: 12px;
    height: 12px;
  }
  .terminal-lights {
    gap: 6px;
  }
  .terminal-transcript {
    inset: 60px 8px 104px 13px;
  }
  .term-line {
    word-break: break-word;
    white-space: normal;
  }
  .terminal-prompt {
    right: 10px;
    bottom: 46px;
    left: 10px;
    height: 46px;
    padding: 0 12px;
  }
  .terminal-footer {
    height: 34px;
    padding: 0 12px;
    font-size: 10px;
  }
  .footer-session {
    gap: 9px;
  }
  .context-status {
    display: none;
  }
  .demo-control {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
  .jump-latest {
    right: 15px;
    bottom: 89px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-transcript {
    scroll-behavior: auto;
  }
  .term-line.line-enter,
  .activity-dot.is-active,
  .active-status .activity-glyph,
  .stream-cursor,
  .prompt-cursor {
    animation: none;
  }
  .demo-controls {
    transition: none;
  }
}