.field-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 1.5rem; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.field-flow li { background: var(--wash); padding: 1.4rem; }
.field-flow span { display: block; color: var(--teal); font: .76rem/1.6 var(--mono); margin-bottom: .6rem; }
.field-flow strong { display: block; font-size: 1.1rem; }
.field-flow p { margin-top: .7rem; color: var(--muted); }
.field-demo { margin-top: 1.5rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line); background: var(--wash); }
.field-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field-controls label { display: block; margin-bottom: .4rem; font-weight: 600; }
.field-controls select, .field-controls input { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid #64858b; border-radius: 0; background: white; color: var(--night); font: inherit; }
.field-controls input[aria-invalid="true"] { border: 2px solid #9f2c20; }
.field-help { margin-top: .6rem; color: var(--muted); font-size: .88rem; }
.field-error { color: #94291e; font-weight: 600; margin-top: .6rem; }
.field-error:empty { display: none; }
.field-build { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.2rem; margin-top: 1.4rem; }
.field-build > div, .field-controls > div { min-width: 0; }
.field-build .code-example { margin-top: 0; }
.field-build .code-example pre { font-size: .85rem; padding: 1rem; }
.field-descriptor { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0; padding: 1rem; background: white; border: 1px solid var(--line); }
.field-descriptor dt { color: var(--muted); font: .8rem/1.6 var(--mono); }
.field-descriptor dd { margin: .35rem 0 0; }
.field-descriptor strong { font: 600 1.65rem/1.5 var(--mono); color: var(--teal); }
.field-descriptor span { display: block; color: var(--muted); font-size: .78rem; }
.field-runtime { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.field-runtime h3 { margin: 0 0 .75rem; font-size: 1.15rem; }
.field-bitstream { display: flex; flex-wrap: wrap; gap: .45rem .75rem; padding: 1rem; background: var(--night-deep); color: #bacdd1; font: 1rem/1.8 var(--mono); }
.field-bit-group { display: inline-flex; }
.field-bit-group > span { display: inline-block; min-width: .75em; text-align: center; }
.field-bit-read { background: #174b40; color: #8df6bd; }
.field-bit-next { background: #e6ac27; color: #16272d; outline: 1px solid #e6ac27; }
.field-progress-line { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.field-progress-line progress { flex: 1 1 8rem; height: 12px; accent-color: var(--teal); }
.field-progress-line span { font: .88rem/1.5 var(--mono); }
.field-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1rem; }
.field-actions button { min-height: 44px; padding: .65rem 1rem; background: white; border: 1px solid var(--teal); color: var(--teal); font: 600 .93rem/1.5 "Segoe UI", Arial, sans-serif; cursor: pointer; }
.field-actions button:nth-child(2) { background: var(--teal); color: white; }
.field-actions button:hover:not(:disabled) { filter: brightness(.92); }
.field-actions button:disabled { opacity: .48; cursor: default; }
.field-demo :is(input, select, button):focus-visible { outline: 3px solid #b57b00; outline-offset: 3px; }
.field-output { padding: 1rem; background: white; border-left: 3px solid var(--teal); }
.field-output p { margin-top: .7rem; }
.field-output code { display: block; font-size: 1.03rem; line-height: 1.9; overflow-wrap: anywhere; }
.field-output > span { display: block; color: var(--muted); font-size: .8rem; margin-bottom: .35rem; }
.field-static-bytes { color: var(--teal); font: 600 1.1rem/1.8 var(--mono); }
@media (max-width: 680px) {
  .field-flow, .field-controls, .field-build { grid-template-columns: 1fr; }
  .field-flow li { padding: 1.1rem; }
  .field-descriptor strong { font-size: 1.5rem; }
}