.demo-scenes,.demo-entry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:24px 0;border-bottom:1px solid #dce2df}
.demo-scenes form{display:flex;gap:12px;align-items:end}
.demo-scenes form .field{flex:1;min-width:0}
.demo-entry .demo-qr,[data-demo-customer-output] .demo-qr{display:block;width:168px;height:168px;margin:12px 0}
.demo-order-materials{padding:24px 0}
.demo-material-row{padding:20px 0;border-bottom:1px solid #dce2df}
.demo-material-row>div:first-child{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:12px}
.demo-material-row span,.demo-material-row small{color:#58625d;overflow-wrap:anywhere}
.demo-code-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:16px}
.demo-code-pair .demo-qr{display:block;width:156px;height:156px}
.demo-code-pair a,.demo-code-pair small{display:block;margin-top:8px}
.demo-code-pair a{min-height:44px;display:flex;align-items:center;gap:8px}
.demo-entry form{max-width:420px}
.demo-entry>div>a{margin:0 8px 8px 0}
.demo-tools .button{min-height:44px}
.demo-tools .demo-qr{max-width:100%}
.demo-tools h2 svg,.demo-tools h3 svg{width:20px;height:20px;vertical-align:middle}
.demo-tools .button svg,.demo-code-pair a svg{width:18px;height:18px;flex-shrink:0}
@media(max-width:640px){.demo-scenes,.demo-entry{grid-template-columns:minmax(0,1fr);gap:20px}.demo-scenes form{flex-direction:column;align-items:stretch}.demo-code-pair{gap:12px}.demo-code-pair .demo-qr{width:132px;height:132px}.demo-material-row>div:first-child{display:grid;gap:6px}}