.demo-head{border-bottom:1px solid var(--line);background:var(--card)}.demo-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px}.logo span{color:var(--accent);font-size:14px}.demo-page{max-width:1200px;padding-bottom:48px}.demo-intro{max-width:780px;margin:32px 0 20px}.demo-intro h1{font-size:clamp(28px,5vw,44px)}.demo-intro p{color:var(--muted)}.demo-notice{background:var(--soft);border-left:3px solid var(--accent);border-radius:12px;padding:16px;font-size:14px;line-height:1.6;margin:20px 0}.demo-controls{display:flex;flex-wrap:wrap;align-items:end;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin:20px 0}.demo-controls[hidden],#welcome[hidden]{display:none}label{display:block;font-size:14px;font-weight:600}select{display:block;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px;margin:8px 0;max-width:100%;font:inherit}button:disabled{opacity:.6;cursor:wait}#welcome{max-width:700px}#welcome h2{font-size:26px}#welcome select{width:100%}#welcome button{margin:12px 0}#crm{--crm-text:var(--ink);margin:24px 0}.demo-next{margin:36px 0}.demo-next h2{font-size:26px}.demo-next p{margin:16px 0}.demo-next .btn{margin:0 12px 12px 0}#message:not(:empty){padding:14px;background:var(--soft);border-radius:12px;margin:16px 0;overflow-wrap:anywhere}a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}@media(max-width:480px){.demo-head .wrap{flex-wrap:wrap}.demo-controls label{width:100%}.demo-controls select{width:100%}}
