.substitution-demo { display: grid; gap: .6em; margin: 1.5em 0; text-align: left; }
.substitution-demo input, .substitution-demo select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; border: 1px solid #777; padding: .6em; font-size: 1rem; background: #fff; color: #222; }
.substitution-demo input { font-family: monospace; }
.substitution-demo .substitution-help { margin: .2em 0; color: #444; font-size: .9em; }
.substitution-controls { display: flex; flex-wrap: wrap; gap: .5em; }
.substitution-controls button { min-height: 44px; padding: .5em .8em; border: 1px solid #777; background: #f2f2f2; color: #222; cursor: pointer; font-size: 1rem; }
.substitution-controls button:hover:not(:disabled) { background: #e5e5e5; }
.substitution-controls button:disabled { cursor: default; color: #555; background: #eee; }
.substitution-demo [data-status] { margin: .3em 0; min-height: 1.5em; }
.substitution-demo [data-status].is-error { color: #9a2929; }
@font-face { font-family: "CMU Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/cmu/cmu-serif-500-roman.woff2") format("woff2"); }
@font-face { font-family: "CMU Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/cmu/cmu-serif-500-italic.woff2") format("woff2"); }
.substitution-trace { list-style: none; padding: 0; margin: .8em 0 0; color: #000; font-family: "CMU Serif", serif; text-align: center; }
.substitution-trace li { margin: 0; }
.substitution-trace .trace-edge { position: relative; height: 50px; margin: .2em 0; }
.substitution-trace .trace-edge svg { display: block; margin: 0 auto; }
.substitution-trace .trace-rule { position: absolute; top: 50%; left: calc(50% + 16px); transform: translateY(-50%); font-variant-caps: small-caps; font-size: 1.1rem; white-space: nowrap; }
.substitution-trace .trace-term { font-size: 1.4rem; line-height: 1.35; overflow-wrap: anywhere; }
.substitution-rules .figure-body, .substitution-capture .figure-body { max-width: 100%; overflow-x: auto; }