/* LucidCairn v4: editorial engineering focus + an illustrative, viewport-driven agent run.
   No animation is required to read the content. */
#systems .systems-grid {
  grid-template-columns: minmax(0, 47%) minmax(0, 50%);
  gap: 3%;
  align-items: start;
}
#systems .systems-editorial { min-width: 0; }
#systems .systems-editorial h2 {
  max-width: 590px;
  font-size: clamp(47px, 4.2vw, 66px);
  line-height: 1.12;
}
#systems .systems-editorial .section-intro {
  max-width: 505px;
  margin-top: 25px;
}
#systems .focus-areas { margin-top: 51px; }
#systems .focus-heading {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 17px;
}
#systems .focus-heading .label {
  flex: 0 0 auto;
  color: var(--copper);
  font-size: 10px;
  margin: 0;
  letter-spacing: .055em;
}
#systems .focus-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #a78c6b88, transparent);
}
#systems .focus-domain-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
}
#systems .focus-domain {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  min-height: 140px;
  padding: 19px 19px 17px;
  background: linear-gradient(145deg, #233530e6, #182725e8);
  border: 1px solid #4c66605e;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .35s ease, background-color .35s ease;
}
#systems .focus-domain::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 38px;
  height: 1px;
  background: #c7a47a;
  opacity: .75;
}
#systems .focus-index {
  font: 9px/1.5 var(--mono);
  letter-spacing: .05em;
  color: #8eaaa0;
}
#systems .focus-domain strong {
  color: #f0eadd;
  font: clamp(20px, 2.1vw, 27px)/1.14 var(--serif);
  font-weight: 400;
  letter-spacing: -.012em;
  overflow-wrap: normal;
}
#systems .focus-domain > span:last-child {
  font: 12px/1.55 var(--sans);
  color: #b8c7bc;
}
#systems .focus-areas.is-in-view .focus-domain {
  animation: focus-entry .65s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--domain-order, 0) * 95ms);
}
#systems .focus-domain:nth-child(1) { --domain-order: 0; }
#systems .focus-domain:nth-child(2) { --domain-order: 1; }
#systems .focus-domain:nth-child(3) { --domain-order: 2; }
#systems .focus-domain:nth-child(4) { --domain-order: 3; }
@keyframes focus-entry {
  from { opacity: .6; transform: translate3d(0,12px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

/* A compact dark instrument panel, not a stack of corporate workflow boxes. */
#systems .harness-flow {
  --run-progress: 0;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(17px, 2.7vw, 28px);
  display: block;
  border: 1px solid #50645d;
  border-radius: 8px;
  background: radial-gradient(ellipse at 100% 0, #64755d23, transparent 54%), #162626;
  box-shadow: 0 24px 65px #060f1040, inset 0 1px #d7dbad12;
}
#systems .harness-flow > .harness-heading {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  margin: 0 0 21px;
  color: #d0d8cb;
}
#systems .harness-heading > .label {
  color: #c7aa86;
  font-size: 10px;
  letter-spacing: .09em;
}
#systems .harness-heading > strong {
  color: #f0e9db;
  font: clamp(25px, 2.6vw, 34px)/1.14 var(--serif);
  font-weight: 400;
}
#systems .harness-console {
  overflow: hidden;
  border: 1px solid #53696085;
  border-radius: 6px;
  background: linear-gradient(158deg, #1c302e, #111f20 76%);
}
#systems .harness-console-bar {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
  border-bottom: 1px solid #546d6245;
  color: #95ada2;
  font: 10px/1.3 var(--mono);
  letter-spacing: .015em;
}
#systems .harness-console-bar > span:nth-child(2) {
  min-width: 0;
  overflow-wrap: anywhere;
}
#systems .harness-console-mode {
  flex-shrink: 0;
}
#systems .harness-window-lights { display: flex; gap: 4px; }
#systems .harness-window-lights i {
  width: 5px;
  height: 5px;
  border: 1px solid #819688bb;
  border-radius: 50%;
}
#systems .harness-window-lights i:first-child { background: #cba57c; border-color: #cba57c; }
#systems .harness-console-mode {
  margin-left: auto;
  border: 1px solid #8d9e897d;
  border-radius: 2px;
  padding: 2px 5px;
  color: #c1c9b7;
  font-size: 9px;
}
#systems .harness-objective {
  display: grid;
  gap: 5px;
  padding: 18px 19px 20px;
  border-bottom: 1px solid #53706350;
}
#systems .harness-objective small {
  color: #caa782;
  font: 9px/1.2 var(--mono);
  letter-spacing: .09em;
}
#systems .harness-objective p {
  color: #eee8db;
  font: clamp(21px, 2.2vw, 29px)/1.2 var(--serif);
  max-width: 370px;
}
#systems .harness-timeline {
  --trace-fill: 0;
  position: relative;
  padding: 12px 10px 13px 15px;
}
#systems .harness-timeline::before,
#systems .harness-timeline::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 40px;
  bottom: 40px;
  left: 37px;
  width: 1px;
}
#systems .harness-timeline::before { background: #74908660; }
#systems .harness-timeline::after {
  background: linear-gradient(#b8d5b9, #d6aa73);
  box-shadow: 0 0 12px #d6aa7370;
  transform-origin: 50% 0;
  transform: scaleY(var(--trace-fill));
  transition: transform .6s cubic-bezier(.22,.75,.25,1);
}
#systems .harness-trace {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 33px minmax(0,1fr) 9px;
  align-items: center;
  gap: 12px;
  padding: 12px 13px 12px 5px;
  min-height: 71px;
  border: 1px solid transparent;
  border-radius: 5px;
  transition: background .4s ease, border-color .4s ease, transform .4s ease;
}
#systems .harness-trace + .harness-trace { margin-top: 3px; }
#systems .harness-step-index {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #638179;
  border-radius: 50%;
  background: #1a302e;
  color: #9bb1a7;
  font: 10px var(--mono);
  transition: color .4s,border-color .4s,background .4s;
}
#systems .harness-step-description { display: grid; min-width: 0; gap: 4px; }
#systems .harness-step-description strong {
  color: #b7c7bb;
  font: 18px/1.2 var(--serif);
  font-weight: 400;
  transition: color .4s ease;
}
#systems .harness-step-description > span {
  color: #92aca0;
  font: 11px/1.45 var(--sans);
}
#systems .harness-step-light {
  width: 6px;
  height: 6px;
  border: 1px solid #688176;
  border-radius: 50%;
  transition: border-color .4s, background .4s, box-shadow .4s;
}
#systems .harness-flow[data-run-step="0"] { --run-progress: 0.08; }
#systems .harness-flow[data-run-step="1"] { --run-progress: 0.35; }
#systems .harness-flow[data-run-step="2"] { --run-progress: 0.67; }
#systems .harness-flow[data-run-step="3"] { --run-progress: 1; }
#systems .harness-flow .harness-timeline { --trace-fill: var(--run-progress); }
#systems .harness-flow[data-run-step="0"] [data-harness-stage="0"],
#systems .harness-flow[data-run-step="1"] [data-harness-stage="1"],
#systems .harness-flow[data-run-step="2"] [data-harness-stage="2"],
#systems .harness-flow[data-run-step="3"] [data-harness-stage="3"] {
  border-color: #b9a07a73;
  background: linear-gradient(90deg, #94744f27, #39584b17);
  transform: translate3d(3px,0,0);
}
#systems .harness-flow[data-run-step="0"] [data-harness-stage="0"] .harness-step-index,
#systems .harness-flow[data-run-step="1"] [data-harness-stage="1"] .harness-step-index,
#systems .harness-flow[data-run-step="2"] [data-harness-stage="2"] .harness-step-index,
#systems .harness-flow[data-run-step="3"] [data-harness-stage="3"] .harness-step-index {
  background: #d3b085;
  border-color: #ead7b8;
  color: #1a2928;
}
#systems .harness-flow[data-run-step="0"] [data-harness-stage="0"] .harness-step-description strong,
#systems .harness-flow[data-run-step="1"] [data-harness-stage="1"] .harness-step-description strong,
#systems .harness-flow[data-run-step="2"] [data-harness-stage="2"] .harness-step-description strong,
#systems .harness-flow[data-run-step="3"] [data-harness-stage="3"] .harness-step-description strong { color: #fff0d6; }
#systems .harness-flow[data-run-step="0"] [data-harness-stage="0"] .harness-step-light,
#systems .harness-flow[data-run-step="1"] [data-harness-stage="1"] .harness-step-light,
#systems .harness-flow[data-run-step="2"] [data-harness-stage="2"] .harness-step-light,
#systems .harness-flow[data-run-step="3"] [data-harness-stage="3"] .harness-step-light {
  background: #ead1ac;
  border-color: #f3e1c8;
  box-shadow: 0 0 10px #d7ae7fa8;
}
#systems .harness-flow.is-playing[data-run-step="0"] [data-harness-stage="0"] .harness-step-light,
#systems .harness-flow.is-playing[data-run-step="1"] [data-harness-stage="1"] .harness-step-light,
#systems .harness-flow.is-playing[data-run-step="2"] [data-harness-stage="2"] .harness-step-light,
#systems .harness-flow.is-playing[data-run-step="3"] [data-harness-stage="3"] .harness-step-light {
  animation: harness-breathe 1.8s ease-in-out infinite;
}
@keyframes harness-breathe {
  50% { box-shadow: 0 0 14px #e6c291b0; }
}
#systems .harness-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-top: 1px solid #536d5f5e;
  color: #adc0b0;
  font: 9px/1.2 var(--mono);
  letter-spacing: .05em;
}
#systems .harness-status-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #c7ac7f;
}
#systems .harness-run-count {
  margin-left: auto;
  color: #f2d3ac;
  font-variant-numeric: tabular-nums;
}
#systems .harness-annotation {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  justify-content: space-between;
  margin-top: 17px;
}
#systems .harness-annotation p {
  font: 11px/1.65 var(--sans);
  color: #afc0b2;
  max-width: 350px;
  min-width: 0;
}
#systems .harness-replay {
  flex-shrink: 0;
  min-width: 68px;
  min-height: 40px;
  padding: 7px 9px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: 1px solid #9eaf9a72;
  border-radius: 4px;
  background: #2a3934;
  color: #eedcc5;
  font: 11px var(--mono);
  touch-action: manipulation;
}
#systems .harness-replay:not(:disabled):active { transform: scale(.96); }
#systems .harness-replay:disabled { opacity: .5; cursor: not-allowed; }
@media (min-width: 901px) {
  #systems .focus-domain:hover { border-color: #bd9c787d; }
}
@media (max-width: 1100px) {
  #systems .systems-grid { grid-template-columns: minmax(0, 46%) minmax(0, 51%); }
  #systems .focus-domain { padding: 15px 13px; min-height: 151px; }
  #systems .focus-domain strong { font-size: 23px; }
}
@media (max-width: 900px) {
  #systems .systems-grid { grid-template-columns: 1fr; gap: 32px; }
  #systems .systems-editorial h2 { max-width: 640px; }
  #systems .focus-areas { margin-top: 32px; }
  #systems .focus-domain-list { max-width: 720px; }
  #systems .focus-domain { min-height: 118px; }
  #systems .harness-flow { width: 100%; max-width: 720px; }
}
@media (max-width: 600px) {
  #systems .systems-editorial h2 { font-size: clamp(39px,9.5vw,53px); }
  #systems .systems-editorial .section-intro { margin-top: 18px; font-size: 16px; }
  #systems .focus-areas { margin-top: 30px; }
  #systems .focus-domain-list { gap: 9px; }
  #systems .focus-domain { padding: 13px 12px 14px; min-height: 127px; gap: 7px; }
  #systems .focus-domain strong { font-size: clamp(21px,5.4vw,25px); line-height: 1.13; }
  #systems .focus-domain > span:last-child { font-size: 11px; line-height: 1.47; }
  #systems .harness-flow { padding: 17px 13px; }
  #systems .harness-flow > .harness-heading { margin-bottom: 15px; }
  #systems .harness-heading > strong { font-size: 28px; }
  #systems .harness-console-bar { padding: 11px 12px; gap: 9px; font-size: 9px; }
  #systems .harness-objective { padding: 16px 15px; }
  #systems .harness-objective p { font-size: 23px; }
  #systems .harness-timeline { padding: 8px 7px 9px 10px; }
  #systems .harness-timeline::before,#systems .harness-timeline::after { left: 32px; top: 32px; bottom: 32px; }
  #systems .harness-trace { grid-template-columns: 31px minmax(0,1fr) 6px; gap: 9px; padding: 9px 9px 9px 4px; min-height: 63px; }
  #systems .harness-step-description strong { font-size: 18px; }
  #systems .harness-step-description > span { font-size: 11px; }
  #systems .harness-annotation { gap: 10px; }
}
@media (max-width: 360px) {
  #systems .focus-domain-list { grid-template-columns: 1fr; gap: 10px; }
  #systems .focus-domain { padding: 14px; min-height: 0; }
  #systems .focus-domain strong { font-size: 21px; }
  #systems .harness-console-bar { letter-spacing: -.035em; gap: 6px; }
  #systems .harness-console-mode { padding-inline: 3px; }
  #systems .harness-trace { gap: 6px; }
}
/* Explicitly preserve the full static illustration when animation is disabled. */
@media (prefers-reduced-motion: reduce) {
  #systems .focus-domain { animation: none !important; }
  #systems .harness-flow, #systems .harness-flow *,
  #systems .harness-flow::before, #systems .harness-flow::after {
    animation: none !important;
    transition: none !important;
  }
}
.motion-off #systems .focus-domain { animation: none !important; }
.motion-off #systems .harness-flow,
.motion-off #systems .harness-flow * { animation: none !important; transition: none !important; }