.dev-stream {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #244f63;
  border-radius: 10px;
  background: #030a11;
  color: #51c9f2;
  box-shadow: inset 0 0 35px #0a284726;
  font-family: Consolas, "SFMono-Regular", monospace;
  transition: border-color .18s, box-shadow .18s;
}
.dev-stream.is-running {
  border-color: #52cdf4;
  box-shadow: 0 0 22px #2caffc20, inset 0 0 40px #0b3e5529;
}
.dev-stream__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-bottom: 1px solid #183545;
  background: #0b1723;
  color: #90afc4;
  font-size: 10px;
  letter-spacing: 1.4px;
}
.dev-stream__bar i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: #3e6171;
}
.dev-stream__status { color: #698796; letter-spacing: .8px; }
.is-running .dev-stream__status { color: #75ffc1; }
.is-running .dev-stream__bar i { background: #75ffc1; box-shadow: 0 0 9px #75ffc1; }
.dev-stream__viewport {
  position: relative;
  height: 292px;
  padding: 12px 13px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, #00122219 3px, #00122219 4px);
  font-size: 10px;
  line-height: 15px;
  text-shadow: 0 0 5px #20b9f62e;
  contain: layout paint;
}
.dev-stream__line {
  height: 15px;
  white-space: pre;
  overflow: hidden;
}
.dev-stream__line.is-success { color: #76e4b0; }
.dev-stream__line.is-dim { color: #417d98; }
.dev-stream__line.is-fresh { animation: dev-stream-line-in .34s ease-out both; }
@keyframes dev-stream-line-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}
.dev-stream__cursor { height: 15px; color: #67dcff; animation: dev-stream-caret 1s steps(2, jump-none) infinite; }
.dev-stream__jump {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  padding: 3px 10px;
  border: 1px solid #2a6b87;
  border-radius: 999px;
  background: #04141fdd;
  color: #7fd8f7;
  font: inherit;
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
  animation: dev-stream-jump-pulse 1.2s ease-in-out infinite;
}
@keyframes dev-stream-jump-pulse { 50% { box-shadow: 0 0 12px #2caffc66; } }
.dev-stream__footer {
  display: flex;
  justify-content: space-between;
  padding: 7px 13px;
  border-top: 1px solid #163143;
  color: #3f697d;
  font-size: 9px;
  letter-spacing: 1px;
}
@keyframes dev-stream-caret { to { opacity: 0; } }
.dev-stream__viewport::-webkit-scrollbar { width: 5px; }
.dev-stream__viewport::-webkit-scrollbar-thumb { background: #1d4a60; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  .dev-stream { transition: none; }
  .dev-stream__cursor { animation: none; }
  .dev-stream__line.is-fresh { animation: none; }
  .dev-stream__jump { animation: none; }
}