/* Dev — IT engineering & AI, light theme (variant 1 palette) */

body.dev-variant .logo-mark {
  font-size: 0.75rem;
  letter-spacing: -0.04em;
}

/* Subtle circuit traces on grid */
body.dev-variant .grid-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Cpath d='M0 120 H180 V200 H360 V80 H600' fill='none' stroke='%23e0e0e0' stroke-width='1'/%3E%3Cpath d='M0 280 H120 V320 H280 V240 H480 V300 H600' fill='none' stroke='%23ececec' stroke-width='1'/%3E%3Ccircle cx='180' cy='120' r='3' fill='%23f05a1a' opacity='0.5'/%3E%3Ccircle cx='360' cy='80' r='3' fill='%23f05a1a' opacity='0.35'/%3E%3Ccircle cx='280' cy='320' r='3' fill='%23b8b8b8'/%3E%3C/svg%3E");
  background-size: 600px 400px;
  opacity: 0.6;
  mask-image: radial-gradient(ellipse 70% 55% at 65% 25%, black 10%, transparent 70%);
  pointer-events: none;
}

/* Terminal hero visual */
.terminal-window {
  width: min(380px, 100%);
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.65rem 1rem;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gray-300);
}

.terminal-dot:nth-child(1) { background: #ff5f57; }
.terminal-dot:nth-child(2) { background: #febc2e; }
.terminal-dot:nth-child(3) { background: #28c840; }

.terminal-title {
  margin-left: 0.5rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--gray-500);
}

.terminal-body {
  padding: 1.25rem 1.25rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--gray-700);
}

.terminal-line { display: block; }

.t-prompt { color: var(--orange); }
.t-cmd { color: var(--black); }
.t-out { color: var(--gray-500); }
.t-ok { color: var(--orange); }
.t-dim { color: var(--gray-300); }

.terminal-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--orange);
  vertical-align: text-bottom;
  animation: cursor-blink 1.1s step-end infinite;
}

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

/* Stack chips under terminal */
.stack-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
  justify-content: center;
}

.stack-chip {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--gray-700);
  background: var(--white);
  border: 1px solid var(--gray-100);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
}

/* AI node graph for project */
.node-graph {
  height: 80px;
  background: var(--gray-50);
  border-radius: 8px;
  border: 1px solid var(--gray-100);
  overflow: hidden;
}

.node-graph svg { width: 100%; height: 100%; }

.graph-node {
  fill: var(--white);
  stroke: var(--gray-300);
  stroke-width: 1;
}

.graph-node-core {
  fill: var(--orange);
  stroke: none;
  filter: drop-shadow(0 0 6px var(--orange-glow));
}

.graph-edge {
  stroke: var(--gray-300);
  stroke-width: 1;
}

.graph-edge-hot {
  stroke: var(--orange);
  stroke-opacity: 0.45;
}

/* Pipeline dev icons */
.pipe-icon-dev {
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--orange);
  margin-bottom: 0.75rem;
  font-weight: 500;
}

/* Architecture mini diagram in about */
.arch-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 1.5rem;
  max-width: 260px;
}

.arch-row {
  display: flex;
  gap: 6px;
}

.arch-block {
  flex: 1;
  height: 28px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.arch-block-accent {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-glow);
}

/* Wider variant bar */
.variant-bar {
  flex-wrap: wrap;
  max-width: 260px;
  justify-content: center;
}