/* Dense service scenes: working surfaces instead of empty placeholder diagrams. */
.scene-fde,
.scene-product,
.scene-lines,
.scene-codex {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(223, 230, 221, .58)),
    var(--paper);
}

.scene-bar,
.scene-status,
.scene-label,
.fde-rail,
.fde-stream small,
.stream-card em,
.scene-fde-core small,
.core-tags i,
.core-meter em,
.browser-bar,
.page-hero small,
.module-grid b,
.product-phone small,
.product-stack b,
.line-card span,
.line-card em,
.editor-tabs,
.editor-status,
.agent-card small,
.agent-card b,
.terminal-line {
  font-family: var(--mono);
}

.scene-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .08em;
}

.scene-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}

.scene-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.fde-board,
.product-board,
.line-board,
.codex-board {
  min-height: 0;
  flex: 1;
}

.fde-board {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 148px;
  gap: 10px;
}

.fde-rail {
  display: grid;
  gap: 6px;
}

.fde-rail span {
  padding: 8px;
  display: grid;
  align-content: space-between;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, .7);
}

.fde-rail span.is-active {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.fde-rail b,
.fde-rail em {
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
}

.fde-stream {
  display: grid;
  gap: 7px;
}

.stream-card {
  padding: 8px 9px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .76);
}

.stream-card > i {
  width: 20px;
  height: 20px;
  border: 5px solid var(--accent);
  border-radius: 50%;
}

.stream-card span,
.agent-card span {
  min-width: 0;
  display: grid;
}

.stream-card small,
.agent-card small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .05em;
}

.stream-card strong,
.agent-card b {
  overflow: hidden;
  color: var(--ink);
  font-size: 10px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-card em {
  padding: 3px 5px;
  border-radius: 4px;
  color: var(--muted);
  background: var(--warm);
  font-size: 8px;
  font-style: normal;
}

.stream-card.is-accent {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.stream-card.is-accent strong {
  color: #fff;
}

.stream-card.is-accent small,
.stream-card.is-accent em {
  color: var(--sage);
  background: rgba(255, 255, 255, .1);
}

.scene-fde-core {
  padding: 13px;
  display: grid;
  align-content: start;
  gap: 9px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(145deg, #2b2b28, #151513);
}

.scene-fde-core small {
  color: var(--sage);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
}

.scene-fde-core strong {
  color: #fff;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.02;
}

.core-tags,
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.core-tags i,
.chip-row i {
  padding: 4px 5px;
  border-radius: 4px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  font-size: 8px;
  font-style: normal;
}

.core-tags i:first-child,
.chip-row i:first-child {
  color: #171717;
  background: var(--accent);
}

.core-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .13);
}

.core-meter i {
  width: 68%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--accent);
}

.core-meter em {
  display: block;
  margin-top: 2px;
  color: var(--sage);
  font-size: 8px;
  font-style: normal;
  line-height: 1.25;
}

/* Product engineering workspace. */
.product-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 9px;
}

.product-browser {
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
}

.browser-bar {
  height: 26px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 8px;
}

.browser-bar span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warm);
}

.browser-bar span:first-child {
  background: var(--accent);
}

.browser-bar em {
  margin-left: auto;
  font-style: normal;
}

.browser-body {
  min-height: 176px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
}

.browser-nav {
  padding: 10px 8px;
  display: grid;
  align-content: start;
  gap: 10px;
  color: #fff;
  background: var(--ink);
}

.browser-nav strong {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .05em;
}

.browser-nav i {
  width: 100%;
  height: 5px;
  display: block;
  border-radius: 99px;
  background: rgba(255, 255, 255, .18);
}

.browser-nav i:nth-child(2) {
  width: 72%;
  background: var(--accent);
}

.browser-main {
  min-width: 0;
  padding: 10px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  background: var(--ivory);
}

.page-hero {
  padding: 10px;
  display: grid;
  gap: 5px;
  border-radius: 7px;
  background: var(--sage);
}

.page-hero small {
  color: #58705c;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .05em;
}

.page-hero strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.05;
}

.page-hero span {
  width: 62%;
  height: 5px;
  display: block;
  border-radius: 99px;
  background: rgba(23, 23, 23, .18);
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.module-grid span {
  min-height: 38px;
  padding: 7px;
  display: grid;
  align-content: space-between;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.module-grid i {
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 50%;
  background: var(--accent);
}

.module-grid b {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
}

.product-phone {
  width: 72px;
  height: 158px;
  padding: 8px 6px;
  align-self: center;
  justify-self: end;
  display: grid;
  align-content: start;
  gap: 7px;
  border: 3px solid var(--ink);
  border-radius: 17px;
  background: #171717;
  box-shadow: 0 9px 18px rgba(23, 23, 23, .14);
}

.phone-speaker {
  width: 24px;
  height: 4px;
  margin: 0 auto;
  display: block;
  border-radius: 99px;
  background: rgba(255, 255, 255, .45);
}

.phone-screen {
  padding: 8px 6px;
  display: grid;
  gap: 6px;
  border-radius: 10px;
  background: var(--paper);
}

.product-phone small {
  color: var(--muted);
  font-size: 7px;
  font-weight: 700;
}

.product-phone strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
}

.phone-screen i {
  height: 7px;
  display: block;
  border-radius: 99px;
  background: var(--warm);
}

.phone-screen i:last-child {
  background: var(--accent-soft);
}

.product-stack {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: 6px;
}

.product-stack span {
  flex: 1;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .74);
}

.product-stack i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.product-stack b {
  color: var(--ink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .05em;
}

/* Five anonymous product lines. */
.line-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.line-card {
  min-width: 0;
  padding: 10px;
  display: grid;
  grid-template-rows: auto auto 1fr 1fr auto;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
}

.line-card:nth-child(5) {
  grid-column: 2 / 4;
}

.line-card span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
}

.line-card strong {
  min-width: 0;
  color: var(--ink);
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: .01em;
}

.line-card i {
  height: 6px;
  display: block;
  border-radius: 99px;
  background: var(--warm);
}

.line-card i + i {
  width: 72%;
  background: var(--sage);
}

.line-card em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  text-transform: uppercase;
}

.line-card.is-accent {
  color: #471b0e;
  background: var(--accent);
  border-color: var(--accent);
}

.line-card.is-accent span,
.line-card.is-accent strong,
.line-card.is-accent em {
  color: inherit;
}

.line-card.is-accent i {
  background: rgba(255, 255, 255, .62);
}

.line-card.is-accent i + i {
  background: rgba(23, 23, 23, .25);
}

/* Codex training workbench. */
.codex-board {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 106px;
  gap: 8px;
}

.codex-tasks,
.codex-side,
.codex-editor {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.codex-tasks {
  padding: 7px;
  display: grid;
  align-content: start;
  gap: 6px;
  background: rgba(255, 255, 255, .76);
}

.codex-tasks span {
  padding: 7px 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 650;
}

.codex-tasks span.is-active {
  color: #fff;
  background: var(--ink);
}

.codex-tasks i {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.codex-editor {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: #fff;
  background: #171717;
}

.editor-tabs {
  height: 26px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: var(--sage);
  font-size: 8px;
}

.editor-tabs span:first-child {
  color: #fff;
}

.editor-lines {
  padding: 11px 10px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.editor-lines i {
  width: 78%;
  height: 5px;
  display: block;
  border-radius: 99px;
  background: rgba(255, 255, 255, .16);
}

.editor-lines i:nth-child(2n) {
  width: 55%;
  margin-left: 12px;
  background: rgba(255, 107, 64, .8);
}

.editor-lines i:nth-child(3n) {
  width: 68%;
  margin-left: 24px;
  background: rgba(223, 230, 221, .65);
}

.editor-status {
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: var(--sage);
  font-size: 8px;
}

.editor-status span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.editor-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.editor-status b {
  color: #fff;
  font-size: 8px;
}

.codex-side {
  padding: 7px;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr)) auto;
  gap: 6px;
  background: var(--sage);
}

.agent-card {
  padding: 6px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(23, 23, 23, .1);
  border-radius: 5px;
  background: rgba(255, 255, 255, .66);
}

.agent-card > i {
  width: 15px;
  height: 15px;
  border: 4px solid var(--accent);
  border-radius: 50%;
}

.agent-card.is-accent {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.agent-card.is-accent b {
  color: #fff;
}

.terminal-line {
  padding: 6px;
  overflow: hidden;
  border-radius: 5px;
  color: #fff;
  background: #2b2b28;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .fde-board {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .scene-fde-core {
    min-height: 92px;
    grid-column: 1 / -1;
  }

  .line-card {
    padding: 8px 7px;
  }

  .line-card strong {
    overflow-wrap: normal;
    word-break: normal;
    font-size: 8px;
  }

  .agent-card {
    padding: 6px 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .agent-card small {
    font-size: 6px;
  }

  .agent-card b {
    overflow: visible;
    font-size: 8px;
    white-space: normal;
  }

  .codex-board {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .codex-side {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .terminal-line {
    grid-column: 1 / -1;
  }
}