.cs-demo{flex-direction:column;gap:.75rem;margin:1.5rem 0;display:flex}.cs-demo-stage{border:1px solid var(--vocs-border-color-primary);border-radius:var(--vocs-radius-lg);background-color:var(--vocs-background-color-surface);padding:1rem}.cs-demo-stage-split{grid-template-columns:minmax(0,1fr);gap:1rem;display:grid}@media (width>=720px){.cs-demo-stage-split{grid-template-columns:minmax(0,14rem) minmax(0,1fr)}}.cs-demo-controls{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.cs-demo-divider{background-color:var(--vocs-border-color-primary);align-self:stretch;width:1px}.cs-demo-label{font-size:var(--vocs-text-sm);font-weight:var(--vocs-font-weight-medium);color:var(--vocs-text-color-muted)}.cs-demo-note{font-size:var(--vocs-text-sm);color:var(--vocs-text-color-muted);margin:0;line-height:1.55}.cs-toggle,.cs-number{font-size:var(--vocs-text-sm);color:var(--vocs-text-color-primary);cursor:pointer;align-items:center;gap:.4rem;display:inline-flex}.cs-number{cursor:default;color:var(--vocs-text-color-muted)}.cs-number input,.cs-select{font:inherit;font-size:var(--vocs-text-sm);color:var(--vocs-text-color-primary);background-color:var(--vocs-background-color-primary);border:1px solid var(--vocs-border-color-primary);border-radius:var(--vocs-radius-sm);padding:.15rem .4rem}.cs-number input{width:4.5rem}.cs-panel{min-width:0}.cs-panel-title{font-family:var(--vocs-font-family-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--vocs-text-color-muted);margin:0 0 .6rem;font-size:.75rem}.cs-list{flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none;display:flex}.cs-row{flex-wrap:wrap;align-items:center;gap:.4rem;min-height:2rem;display:flex}.cs-stack{flex-direction:column;gap:.6rem;display:flex}.cs-item{font-size:var(--vocs-text-sm);color:var(--vocs-text-color-primary);border-radius:var(--vocs-radius-sm);background-color:var(--vocs-background-color-surfaceMuted);justify-content:space-between;align-items:center;gap:.5rem;padding:.35rem .5rem;display:flex}.cs-item-active{font-weight:var(--vocs-font-weight-semibold);color:var(--vocs-color-accent)}.cs-item-placeholder{color:var(--vocs-text-color-muted);border:1px dashed var(--vocs-border-color-primary);border-radius:var(--vocs-radius-sm);font-style:italic;font-size:var(--vocs-text-sm);background-color:#0000;margin:0;padding:.35rem .5rem}.cs-chip,.cs-button{font:inherit;border-radius:var(--vocs-radius-sm);border:1px solid var(--vocs-border-color-primary);background-color:var(--vocs-background-color-primary);color:var(--vocs-text-color-primary);cursor:pointer;padding:.2rem .5rem;font-size:.75rem;line-height:1.4}.cs-chip-runtime{border-style:dashed;border-color:var(--vocs-color-accent);color:var(--vocs-color-accent);cursor:default}.cs-card{border:1px solid var(--vocs-border-color-primary);border-radius:var(--vocs-radius-md);background-color:var(--vocs-background-color-surfaceMuted);padding:.7rem .8rem}.cs-card-title{font-size:var(--vocs-text-sm);font-weight:var(--vocs-font-weight-semibold);margin:0 0 .2rem}.cs-card p:last-child,.cs-failed span{margin:0}.cs-muted{font-size:var(--vocs-text-sm);color:var(--vocs-text-color-muted)}.cs-failed{font-size:var(--vocs-text-sm);border:1px solid var(--vocs-border-color-destructive-tint);border-radius:var(--vocs-radius-md);color:var(--vocs-color-destructive);flex-wrap:wrap;align-items:center;gap:.6rem;padding:.7rem .8rem;display:flex}.cs-log{border:1px solid var(--vocs-border-color-primary);border-radius:var(--vocs-radius-md);padding:.7rem .8rem}.cs-log-head{justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.4rem;display:flex}.cs-log ul{font-family:var(--vocs-font-family-mono);color:var(--vocs-text-color-muted);margin:0;padding-left:1.1rem;font-size:.75rem}