#gensie-demo { margin: 1.5rem 0 2rem; }
#gensie-demo .gd-step { display: flex; gap: .9rem; align-items: flex-start; margin: 1.4rem 0; }
#gensie-demo .gd-num {
  flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--md-primary-fg-color); color: var(--md-primary-bg-color);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem;
}
#gensie-demo .gd-body { flex: 1; min-width: 0; }
#gensie-demo .gd-label { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--md-default-fg-color--light); margin: .8rem 0 .25rem; }
#gensie-demo textarea, #gensie-demo input[type="text"] {
  width: 100%; box-sizing: border-box; padding: .55rem .65rem; border-radius: .3rem;
  border: 1px solid var(--md-default-fg-color--lightest); background: var(--md-default-bg-color);
  color: var(--md-default-fg-color); font: inherit; font-size: .75rem;
}
#gensie-demo textarea#gd-schema { font-family: var(--md-code-font-family); font-size: .68rem; }
#gensie-demo textarea:focus, #gensie-demo input:focus { outline: 2px solid var(--md-accent-fg-color); outline-offset: 1px; }
#gensie-demo .gd-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .2rem; }
#gensie-demo .gd-chip {
  border: 1px solid var(--md-default-fg-color--lightest); background: var(--md-default-bg-color);
  color: var(--md-default-fg-color); border-radius: 999px; padding: .25rem .8rem; font-size: .7rem; cursor: pointer;
}
#gensie-demo .gd-chip[aria-pressed="true"] { border-color: var(--md-accent-fg-color); color: var(--md-accent-fg-color); font-weight: 700; }
#gensie-demo .gd-details { margin-top: .6rem; }
#gensie-demo .gd-details summary { cursor: pointer; color: var(--md-accent-fg-color); font-weight: 600; font-size: .75rem; }
#gensie-demo .gd-pipelines { border: 0; padding: 0; margin: .3rem 0 .8rem; }
#gensie-demo .gd-pipelines label { display: block; font-size: .72rem; margin: .3rem 0; cursor: pointer; }
#gensie-demo .gd-hint { font-size: .65rem; color: var(--md-default-fg-color--light); margin-top: .3rem; }
#gensie-demo .gd-hint.gd-bad { color: var(--md-typeset-del-color, #c62828); }
#gensie-demo .gd-error { color: #c62828; font-size: .72rem; margin-top: .5rem; min-height: 1em; }
[data-md-color-scheme="slate"] #gensie-demo .gd-error,
[data-md-color-scheme="slate"] #gensie-demo .gd-hint.gd-bad { color: #ef9a9a; }
#gensie-demo pre#gd-output {
  margin: .2rem 0 0; padding: .7rem; border-radius: .3rem; background: var(--md-code-bg-color);
  color: var(--md-code-fg-color); font-size: .68rem; white-space: pre-wrap; word-break: break-word;
}
#gensie-demo .gd-null { background: #fff4e0; color: #8a4b00; border-radius: .15rem; padding: 0 .15rem; font-weight: 700; }
[data-md-color-scheme="slate"] #gensie-demo .gd-null { background: #3a2c12; color: #ffb74d; }
#gensie-demo button[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 600px) { #gensie-demo .gd-step { gap: .6rem; } }

/* Direction B adjustments */
#gensie-demo .gd-num { background: none; border: 1px solid var(--gx-line2); border-radius: 0; color: var(--gx-acc); font: 500 .62rem "Geist Mono", monospace; }
#gensie-demo .gd-chip { border-radius: 0; font-family: "Geist Mono", monospace; font-size: .62rem; }
#gensie-demo input[type="radio"] { accent-color: var(--gx-acc); }
#gensie-demo textarea, #gensie-demo input[type="text"] { border-radius: 0; background: var(--gx-surface); }
#gensie-demo pre#gd-output { border: 1px solid var(--gx-line2); border-radius: 0; }