.cue-demo-section{max-width:1100px;margin:24px auto 36px;padding:24px;border:1px solid #eed7ee;border-radius:24px;background:linear-gradient(135deg,#fff8fe,#f5f4ff);box-shadow:0 16px 44px #55326816}
.cue-demo-head h2{margin:8px 0 6px;color:#34214e}.cue-demo-head p{margin:0 0 18px;color:#654f6d;line-height:1.6}
.cue-demo{padding:16px;border:1px solid #e5d5e9;border-radius:18px;background:#fff}
.cue-demo-choices,.cue-demo-roles,.cue-demo-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.cue-demo-choices button,.cue-demo-roles button,.cue-demo-controls button{min-height:42px;padding:8px 12px;border:1px solid #d8bddc;border-radius:12px;background:#fff;color:#3a2b49;cursor:pointer}
.cue-demo-choices button[aria-pressed=true],.cue-demo-roles button[aria-pressed=true]{background:#e74797;color:#fff;border-color:#e74797}
.cue-demo-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:14px}
.cue-demo-screen{min-height:255px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;border-radius:16px;background:#0a0710;color:#fff}
.cue-demo-screen span{color:#ffb8de;font-size:.85rem}.cue-demo-screen strong{font-size:1.9rem}.cue-demo-screen p{min-height:70px;margin:0;line-height:1.5;color:#f8eefd}
.cue-demo-side{padding:18px;border-radius:16px;background:#f8eafa;color:#34214e}.cue-demo-side h3{margin:10px 0}.cue-demo-side>p:not(.cue-demo-note){font-size:1.08rem;line-height:1.65}.cue-demo-note{border-top:1px solid #e7cfeb;padding-top:10px;color:#78436f}
.cue-demo-controls{margin:14px 0}.cue-demo-controls input{flex:1 1 180px;min-width:120px;accent-color:#db3e91}.cue-demo-disclaimer{font-size:.84rem;color:#795f7c;margin:0}
.cue-trace{margin:12px 0;padding:14px;border:1px solid #e4cbe8;border-radius:14px;background:#fff8fe;color:#34214e}.cue-trace>p{font-size:.85rem;color:#705675}.cue-trace-current{font-weight:700;padding:12px;border-radius:10px;background:#f5def1}.cue-trace ol{list-style:none;margin:12px 0 0;padding:0;max-height:210px;overflow:auto}.cue-trace li{display:flex;gap:12px;padding:9px;border-bottom:1px solid #eee1ed}.cue-trace li.active{background:#fae3f2;border-left:3px solid #de4595}.cue-trace time{white-space:nowrap;font-weight:700}.cue-trace-missing{padding:12px;border-radius:10px;background:#fff2e8;color:#684932}
@media(max-width:650px){.cue-demo-section{margin:16px 10px;padding:14px}.cue-demo{padding:10px}.cue-demo-body{grid-template-columns:1fr}.cue-demo-screen{min-height:200px}.cue-demo-side{padding:14px}.cue-demo-choices button{flex:1 1 100%}.cue-demo-roles button{flex:1 1 44%}}