.demo-note{font-size:12px;color:var(--muted);margin:0 0 8px}
.demo-layout #epc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.demo-layout #epc>.panel{border-width:0!important;border-radius:0;padding:0;margin:0;box-shadow:none;background:transparent}
.demo-layout #epc .key-section{border:0;padding-top:8px;margin-top:0}
.demo-layout #epc .panel-head{padding:6px 10px;background:var(--input);border-left:4px solid var(--muted);margin-bottom:6px}
.demo-layout #epc .step-complete .panel-head{border-left-color:var(--green)}
.demo-layout #epc .step-incomplete .panel-head{border-left-color:var(--red)}
.demo-layout #epc .epc-settings{display:block;max-width:480px}
.demo-control-band{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:20px;padding:12px 0}
.demo-layout .demo-control-band .bridge{margin:0;height:48px}
.demo-layout .demo-control-band .bridge::before{height:44px;width:30px}
.demo-controls{max-width:620px;margin-left:auto;width:100%}
.demo-control-grid{display:flex;gap:14px;justify-content:flex-end;align-items:end}.demo-control-grid>label{flex:1}.demo-control-title{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}
.demo-layout #epc>.bridge{margin:8px 0;height:30px}
@media(max-width:650px){.demo-control-band{grid-template-columns:36px minmax(0,1fr);gap:10px}.demo-control-grid{flex-wrap:wrap}.demo-control-grid>label{flex-basis:140px}.demo-layout #epc{padding:12px}}
.demo-layout #epc>.panel{border:2px solid var(--line)!important;border-radius:9px;padding:12px;margin:0;background:var(--input)}.demo-layout #epc>.panel.step-complete{border-color:var(--green)!important}.demo-layout #epc>.panel.step-incomplete{border-color:var(--red)!important}.demo-layout #epc .panel-head{background:transparent;padding:0 0 7px;border-left:0;border-bottom:1px solid var(--line)}

.demo-controls{max-width:850px}.demo-control-grid>label{display:flex;align-items:center;gap:10px}.demo-control-grid>label>span{margin:0;white-space:nowrap}.demo-control-grid>label>select{min-width:120px;flex:1;width:auto}.demo-control-grid>label:has(#prefix){flex:0 1 550px}
@media(max-width:650px){.demo-control-grid>label{flex-basis:100%;flex-wrap:wrap}.demo-control-grid>label>select{min-width:120px}.demo-control-grid>label>span{white-space:normal}}