/* demo pane — scoped */
#demo-dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none}
#demo-dialog::backdrop{background:rgba(28,26,23,.45)}
.demo-pane{position:fixed;inset:0;margin:0 0 0 auto;width:min(850px,90vw);height:100dvh;background:#faf7f1;color:#1c1a17;border-left:1px solid #80571f;display:flex;flex-direction:column;font:14px/1.5 system-ui,sans-serif}
.demo-pane.demo-full{width:100vw}
@media(max-width:640px){.demo-pane{width:100vw}}
.demo-head{display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-bottom:1px solid #d8d2c6}
.demo-head h2{font-size:1rem;margin:0 auto 0 0;font-family:system-ui,sans-serif}
.demo-btn{font:inherit;background:#fff;border:1px solid #80571f;color:#1c1a17;padding:.35rem .7rem;cursor:pointer;border-radius:0;min-height:44px;min-width:44px}
.demo-btn:hover{background:#f1ece2}
.demo-btn:focus-visible{outline:2px solid #80571f;outline-offset:2px}
.demo-btn[disabled]{opacity:.45;cursor:default}
.demo-close{min-width:44px;min-height:44px}
.demo-body{flex:1;overflow:auto;padding:.9rem 1rem}
.demo-note{font-size:.75rem;color:#6b6459;padding:.4rem .9rem;border-top:1px solid #d8d2c6}
.demo-tabs{display:flex;gap:.4rem;padding:.5rem .9rem;border-bottom:1px solid #d8d2c6}
.demo-tab[aria-selected=true]{background:#80571f;color:#fff}
.demo-field{display:block;margin:.5rem 0}
.demo-field span{display:block;font-size:.8rem;color:#6b6459}
.demo-field input,.demo-field select{font:inherit;padding:.3rem;border:1px solid #b9b1a2;background:#fff;width:9em}
.demo-field input:focus-visible,.demo-field select:focus-visible{outline:2px solid #80571f;outline-offset:1px}
.demo-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end;margin:.4rem 0}
.demo-status{min-height:1.3em;font-size:.85rem;color:#80571f}
.demo-table{border-collapse:collapse;width:100%;font-size:.82rem;margin:.5rem 0}
.demo-table th,.demo-table td{border:1px solid #d8d2c6;padding:.25rem .45rem;text-align:left}
.demo-table th{background:#f1ece2}
.demo-flow{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:.5rem 0;font-size:.8rem}
.demo-flow b{border:1px solid #80571f;padding:.15rem .5rem;background:#fff;font-weight:normal}
.demo-flow i{font-style:normal;color:#80571f}
.demo-pre{background:#fff;border:1px solid #d8d2c6;padding:.6rem;font:.78rem/1.5 monospace;white-space:pre-wrap;overflow:auto;max-height:14em}
.demo-details{margin:.5rem 0;font-size:.85rem}
.demo-details summary{cursor:pointer;color:#80571f}
.demo-hint{font-size:.78rem;color:#6b6459;margin:.3rem 0}
.demo-steps{display:flex;flex-direction:column;gap:.4rem;margin:.6rem 0}
.demo-step{display:flex;gap:.5rem;align-items:baseline}
.demo-step .n{width:6.5em;font-size:.78rem;color:#6b6459;flex:none}
.demo-step button{font:inherit;font-size:.82rem;text-align:left}
.demo-step p{margin:0;font-size:.82rem;color:#1c1a17}
.demo-credit{font-size:.78rem;color:#6b6459;margin-top:.8rem}
.demo-credit a{color:#80571f}