:root {
  --night:#101927;
  --panel:#172235;
  --panel-light:#1c2a40;
  --line:#2d3a4f;
  --muted:#9aa7bb;
  --white:#f4f6f8;
  --blue:#94b8ff;
  --mint:#83d3b4;
  --amber:#f0c989;
  --sans:"Segoe UI",Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  min-height:100vh;
  margin:0;
  background:var(--night);
  color:var(--white);
  font-family:var(--sans);
  font-size:14px
}
.skip-link {
  position:absolute;
  top:-50px;
  left:12px;
  z-index:10;
  padding:10px;
  background:#fff;
  color:#101927
}
.skip-link:focus {
  top:12px
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
.sim-header {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(20px,5.8vw,86px);
  border-bottom:1px solid #ffffff12
}
.sim-brand {
  width:176px;
  display:block
}
.sim-brand img {
  display:block;
  width:100%;
  height:auto;
  filter:brightness(0) invert(1);
  opacity:.94
}
.sim-header nav {
  display:flex;
  align-items:center;
  gap:25px;
  color:#c4cedc;
  font-size:11px
}
.sim-header nav>a:hover,.sim-footer a:hover {
  color:var(--blue)
}
.header-contact {
  padding:11px 13px;
  border:1px solid #75839a77;
  color:#eef2f8
}
.header-contact span {
  margin-left:10px;
  color:var(--blue)
}
.sim-main {
  width:min(1320px,calc(100% - 56px));
  margin:0 auto;
  padding:57px 0 27px
}
.sim-intro {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:45px;
  margin-bottom:34px
}
.eyebrow {
  margin:0 0 11px;
  color:var(--blue);
  font-size:9px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase
}
.sim-intro .eyebrow {
  display:flex;
  align-items:center;
  gap:8px
}
.sim-intro .eyebrow>span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 4px #83d3b41e
}
.sim-intro h1 {
  margin:0;
  font-size:clamp(39px,5.1vw,66px);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.045em
}
.sim-intro h1 em {
  color:var(--blue);
  font-style:normal
}
.intro-copy {
  max-width:560px;
  margin:17px 0 0;
  color:#b3bfd0;
  font-size:12px;
  line-height:1.75
}
.offline-notice {
  width:min(390px,40%);
  display:flex;
  gap:12px;
  padding:15px;
  border:1px solid #36504f;
  border-radius:6px;
  background:#16282b
}
.offline-icon {
  width:28px;
  height:28px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#203d3b;
  color:var(--mint);
  font-size:13px
}
.offline-notice strong {
  color:#c5eddf;
  font-size:10px
}
.offline-notice p {
  margin:5px 0 0;
  color:#aebdbd;
  font-size:9px;
  line-height:1.65
}
.sim-workspace {
  display:grid;
  grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);
  align-items:start;
  gap:16px
}
.enquiry-panel,.workflow-panel,.output-panel {
  min-width:0;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--panel);
  box-shadow:0 12px 38px #00000014
}
.enquiry-panel,.workflow-panel {
  padding:21px
}
.panel-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#8190a7;
  font-size:8px;
  font-weight:700;
  letter-spacing:.13em
}
.sample-pill {
  padding:6px 7px;
  border:1px solid #50614d;
  border-radius:3px;
  color:#b5d5a7;
  font-size:7px;
  letter-spacing:.07em
}
.enquiry-panel h2,.workflow-heading h2,.output-heading h2 {
  margin:14px 0 5px;
  font-size:18px;
  font-weight:600;
  letter-spacing:-.02em
}
.panel-copy {
  margin:0 0 17px;
  color:var(--muted);
  font-size:10px;
  line-height:1.65
}
.enquiry-panel label {
  display:block;
  margin:12px 0 6px;
  color:#cbd3df;
  font-size:9px;
  font-weight:600
}
.enquiry-panel input,.enquiry-panel select,.enquiry-panel textarea {
  width:100%;
  min-width:0;
  min-height:37px;
  padding:9px 10px;
  border:1px solid #39475c;
  border-radius:4px;
  outline:none;
  background:#101a29;
  color:#eef2f8;
  font-size:10px
}
.enquiry-panel textarea {
  min-height:78px;
  resize:vertical;
  line-height:1.55
}
.enquiry-panel input:focus,.enquiry-panel select:focus,.enquiry-panel textarea:focus {
  border-color:#81a9f2;
  box-shadow:0 0 0 3px #86aaff1b
}
.enquiry-panel option {
  background:#152134
}
.form-divider {
  display:flex;
  align-items:center;
  gap:9px;
  margin:18px 0 5px;
  color:#78869c;
  font-size:8px
}
.form-divider::before,.form-divider::after {
  height:1px;
  flex:1;
  background:#ffffff13;
  content:""
}
.input-note {
  margin:9px 0 0;
  color:#7f8da3;
  font-size:8px;
  line-height:1.5
}
.form-actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:16px
}
.run-button,.reset-button {
  min-height:39px;
  padding:0 13px;
  border-radius:4px;
  font-size:9px;
  font-weight:700;
  cursor:pointer
}
.run-button {
  border:1px solid #9bc2ff;
  background:#a9c7ff;
  color:#142239
}
.run-button:hover {
  background:#c4d8ff
}
.run-button span {
  margin-right:7px;
  font-size:8px
}
.run-button:disabled {
  opacity:.6;
  cursor:wait
}
.reset-button {
  border:1px solid #45536a;
  background:transparent;
  color:#d2d8e2
}
.reset-button:hover {
  border-color:#9aabc4;
  background:#202f44
}
.workflow-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px
}
.workflow-heading h2 {
  margin:14px 0 0
}
.workflow-heading>span {
  margin-top:11px;
  color:#91a0b6;
  font-size:9px
}
.execution-state {
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border:1px solid #3b4a60;
  border-radius:3px;
  color:#b7c2d1;
  font-size:7px;
  font-weight:700;
  letter-spacing:.08em
}
.execution-state i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#758297
}
.execution-state[data-state="running"] i {
  background:var(--amber);
  box-shadow:0 0 0 4px #f0c9891d;
  animation:pulse 1s infinite
}
.execution-state[data-state="complete"] i {
  background:var(--mint);
  box-shadow:0 0 0 4px #83d3b41d
}
.workflow-list {
  position:relative;
  display:grid;
  gap:7px;
  margin:0;
  padding:0;
  list-style:none
}
.workflow-node {
  position:relative;
  min-width:0;
  min-height:57px;
  display:grid;
  grid-template-columns:28px 31px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:1px solid #324056;
  border-radius:5px;
  background:#19263a;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease
}
.workflow-node.is-running {
  z-index:1;
  transform:translateX(3px);
  border-color:#d3ad6d;
  background:#2b2d35;
  box-shadow:0 0 0 3px #f0c98914
}
.workflow-node.is-complete {
  border-color:#3f7968;
  background:#1b302f
}
.workflow-node.is-review {
  border-color:#557493;
  background:#1c3042
}
.node-index {
  color:#77879d;
  font-size:8px;
  font-weight:700;
  letter-spacing:.05em
}
.node-icon {
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:1px solid #3b4d66;
  border-radius:5px;
  color:#b2c7e7;
  font-size:12px
}
.workflow-node.is-running .node-icon {
  border-color:#a88958;
  color:var(--amber)
}
.workflow-node.is-complete .node-icon {
  border-color:#568877;
  color:var(--mint)
}
.workflow-node.is-review .node-icon {
  border-color:#5d819d;
  color:#a8d2f0
}
.node-copy {
  min-width:0;
  display:grid;
  gap:4px
}
.node-copy strong {
  overflow:hidden;
  color:#e4e9f1;
  font-size:9px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap
}
.node-copy small {
  overflow:hidden;
  color:#8694aa;
  font-size:8px;
  text-overflow:ellipsis;
  white-space:nowrap
}
.node-status {
  padding:5px 7px;
  border:1px solid #3c4b61;
  border-radius:3px;
  color:#96a3b6;
  font-size:7px;
  white-space:nowrap
}
.is-running .node-status {
  border-color:#78623c;
  color:#f0cd8f
}
.is-complete .node-status {
  border-color:#3a725e;
  color:#8fd7b7
}
.is-review .node-status {
  border-color:#42647d;
  color:#a8d2f0
}
.sim-progress {
  height:3px;
  overflow:hidden;
  margin-top:15px;
  border-radius:4px;
  background:#29364b
}
.sim-progress span {
  width:0;
  height:100%;
  display:block;
  background:linear-gradient(90deg,#83d3b4,#94b8ff);
  transition:width .35s ease
}
.workflow-footnote {
  margin:11px 0 0;
  color:#8e9bb0;
  font-size:8px
}
.workflow-footnote span {
  color:#b3d3ef;
  font-weight:700
}
.output-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:16px;
  margin-top:16px
}
.output-panel {
  padding:18px 20px
}
.output-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.output-heading .eyebrow {
  margin-bottom:0;
  font-size:8px
}
.output-heading h2 {
  margin:5px 0 0;
  font-size:16px
}
.log-count {
  color:#8190a7;
  font-size:8px
}
.log-list {
  max-height:185px;
  display:grid;
  align-content:start;
  gap:8px;
  overflow:auto;
  margin:15px 0 0;
  padding:0;
  list-style:none
}
.log-entry {
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:10px;
  padding:8px 9px;
  border-left:2px solid #577bb6;
  background:#1a283d
}
.log-entry time {
  color:#93b8f8;
  font-family:Consolas,monospace;
  font-size:8px
}
.log-entry span {
  color:#c7d0dd;
  font-size:9px;
  line-height:1.55
}
.result-mark {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid #3b4d66;
  border-radius:50%;
  color:var(--blue);
  font-size:13px
}
.result-empty {
  margin:17px 0 3px;
  color:#8f9db2;
  font-size:10px;
  line-height:1.65
}
.result-summary {
  margin-top:15px
}
.result-summary[hidden] {
  display:none
}
.summary-lead {
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:13px;
  border-bottom:1px solid #ffffff15
}
.summary-avatar {
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#30405a;
  color:#d6e3fa;
  font-size:9px;
  font-weight:700
}
.summary-lead>span:last-child {
  display:grid;
  gap:4px
}
.summary-lead strong {
  font-size:10px
}
.summary-lead small {
  color:#9cabc0;
  font-size:8px
}
.result-summary ul {
  display:grid;
  gap:10px;
  margin:14px 0;
  padding:0;
  list-style:none
}
.result-summary li {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:10px;
  font-size:8px
}
.result-summary li>span {
  color:#9cabc0
}
.result-summary li>strong {
  color:#cfe6dc;
  font-size:8px;
  text-align:right
}
.summary-note {
  margin:12px 0 0;
  padding:9px;
  border:1px solid #3a4a60;
  border-radius:4px;
  color:#aebbd0;
  font-size:8px;
  line-height:1.55
}
.sim-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:22px;
  padding-top:15px;
  border-top:1px solid #ffffff16;
  color:#8996aa;
  font-size:8px
}
.sim-footer a {
  color:#becce0
}
.sim-footer a span {
  margin-left:6px;
  color:var(--blue)
}
.sim-header a:focus-visible,.sim-footer a:focus-visible,.run-button:focus-visible,.reset-button:focus-visible {
  outline:2px solid #98b9f2;
  outline-offset:3px
}
@keyframes pulse {
  50% {
    box-shadow:0 0 0 6px #f0c98910
  }
}
@media(max-width:950px) {
  .sim-intro {
    align-items:flex-start;
    flex-direction:column;
    gap:20px
  }
  .offline-notice {
    width:min(100%,540px)
  }
  .sim-workspace {
    grid-template-columns:1fr 1.2fr
  }
  .enquiry-panel,.workflow-panel {
    padding:17px
  }
  .workflow-node {
    grid-template-columns:24px 27px minmax(0,1fr);
    gap:8px
  }
  .node-status {
    grid-column:3;
    justify-self:start
  }
  .node-copy strong,.node-copy small {
    white-space:normal
  }
  .output-grid {
    grid-template-columns:1fr 1fr
  }
}
@media(max-width:700px) {
  .sim-header {
    height:65px;
    padding:0 18px
  }
  .sim-brand {
    width:142px
  }
  .sim-header nav {
    gap:11px;
    font-size:9px
  }
  .header-contact {
    padding:9px
  }
  .sim-main {
    width:calc(100% - 34px);
    padding-top:37px
  }
  .sim-intro {
    margin-bottom:22px
  }
  .sim-intro h1 {
    font-size:clamp(38px,10vw,55px)
  }
  .intro-copy {
    font-size:11px
  }
  .offline-notice {
    padding:12px
  }
  .sim-workspace,.output-grid {
    grid-template-columns:1fr
  }
  .workflow-panel {
    order:-1
  }
  .workflow-node {
    grid-template-columns:26px 30px minmax(0,1fr) auto
  }
  .node-status {
    grid-column:auto;
    justify-self:auto
  }
  .node-copy strong,.node-copy small {
    white-space:normal
  }
  .enquiry-panel,.workflow-panel {
    padding:17px
  }
  .output-panel {
    padding:16px
  }
  .sim-footer {
    align-items:flex-start;
    flex-direction:column
  }
}
@media(max-width:400px) {
  .sim-header {
    padding:0 12px
  }
  .sim-brand {
    width:121px
  }
  .sim-header nav {
    gap:7px;
    font-size:8px
  }
  .header-contact {
    padding:8px 7px
  }
  .header-contact span {
    margin-left:3px
  }
  .sim-main {
    width:calc(100% - 24px)
  }
  .workflow-node {
    grid-template-columns:22px 25px minmax(0,1fr);
    gap:7px;
    padding:8px
  }
  .node-icon {
    width:24px;
    height:24px
  }
  .node-copy strong {
    font-size:8px
  }
  .node-status {
    grid-column:3
  }
  .panel-topline {
    font-size:7px
  }
  .sample-pill {
    font-size:6px
  }
  .form-actions {
    gap:7px
  }
  .run-button,.reset-button {
    padding:0 10px;
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important
  }
}