.comms-demo{padding:clamp(18px,3vw,32px);overflow:hidden;margin:0 0 24px!important}.comms-demo-heading{justify-content:space-between;align-items:start;gap:16px;display:flex}.comms-demo-heading h3{margin:8px 0 0;font-size:clamp(20px,2.2vw,26px);font-weight:650}.comms-demo-heading .tag{white-space:nowrap;font-size:12px}.comms-demo-scene{background-image:radial-gradient(var(--border) 1px, transparent 1px);background-size:18px 18px;height:438px;margin:24px 0 12px;position:relative}.comms-demo-staging{border:1px solid var(--border);background:var(--background);border-radius:10px;justify-content:space-between;gap:10px;height:89px;padding:10px 14px;font-size:14px;font-weight:650;display:flex;position:absolute;inset:0 0 auto}.comms-demo-channel-note{color:var(--muted-foreground);font-size:12px;font-weight:400}.comms-demo-session{border:1px dashed var(--primary);background:color-mix(in srgb, var(--primary) 3%, var(--background));border-radius:12px;position:absolute;inset:120px 0 0}.comms-demo-session-label{color:var(--muted-foreground);letter-spacing:.08em;font-size:12px;position:absolute;top:12px;left:14px}.comms-demo-command{border:1px solid var(--border);background:var(--background);border-radius:8px;justify-content:center;align-items:start;gap:8px;width:230px;height:70px;padding-top:9px;font-size:14px;display:flex;position:absolute;top:247px;left:50%;transform:translate(-50%)}.comms-demo-command.is-speaking{border-color:var(--primary);box-shadow:0 0 24px color-mix(in srgb, var(--primary) 12%, transparent)}.comms-demo-squads{top:335px;grid-template-columns:repeat(3,minmax(0,1fr));display:grid;position:absolute;inset-inline:0}.comms-demo-squad{border:1px solid var(--border);background:var(--background);text-align:center;border-radius:8px;height:90px;margin:0 7px;padding:8px 3px}.comms-demo-squad-label{font-size:14px;font-weight:650;display:block}.comms-demo-squad-note{color:var(--muted-foreground);margin-top:2px;font-size:11px;display:block}.comms-demo-session,.comms-demo-home,.comms-demo-command,.comms-demo-squad{opacity:0;visibility:hidden;transition:opacity .55s,visibility .55s}.comms-demo-scene .is-created{opacity:1;visibility:visible}.comms-demo-person{z-index:1;border-radius:50%;place-items:center;width:20px;height:20px;margin-top:-10px;margin-left:-10px;font-size:11px;font-weight:750;transition:left 1.15s cubic-bezier(.4,0,.2,1),top 1.15s cubic-bezier(.4,0,.2,1);display:grid;position:absolute}.comms-demo .is-commander{color:var(--background);background:var(--primary);border:2px solid var(--primary);border-radius:5px}.comms-demo .is-leader{color:var(--primary);background:var(--background);border:2px solid var(--primary)}.comms-demo .is-member{background:var(--muted-foreground);border:2px solid var(--background)}.comms-demo-legend{color:var(--muted-foreground);flex-wrap:wrap;gap:12px 24px;font-size:13px;display:flex}.comms-demo-legend>span{align-items:center;gap:7px;display:inline-flex}.comms-demo-legend i{border-radius:50%;place-items:center;width:17px;height:17px;font-size:10px;font-style:normal;font-weight:700;display:inline-grid}.comms-demo-caption{min-height:96px;margin-top:22px}.comms-demo-caption strong{font-size:17px}.comms-demo-caption p{color:var(--muted-foreground);max-width:78ch;margin:8px 0 0;font-size:16px;line-height:1.65}.comms-demo-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;display:flex}.comms-demo-phases{flex-wrap:wrap;gap:5px;max-width:100%;display:flex}.comms-demo-phases button{border:1px solid var(--border);width:36px;height:36px;color:var(--muted-foreground);cursor:pointer;font:inherit;background:0 0;border-radius:50%;flex:0 0 36px;font-size:14px}.comms-demo-phases button[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:var(--background)}.comms-demo-controls .buttons{gap:8px;margin:0}.comms-demo-controls .button{min-height:36px;color:var(--foreground);border-color:var(--border);background:0 0;gap:6px;margin:0}.comms-demo-controls button:focus-visible{outline:2px solid var(--primary);outline-offset:3px}.comms-demo-reduced .comms-demo-person,.comms-demo-reduced .comms-demo-scene>div,.comms-demo-reduced .comms-demo-squad{transition:none}@media (prefers-reduced-motion:reduce){.comms-demo-person,.comms-demo-session,.comms-demo-home,.comms-demo-command,.comms-demo-squad{transition:none}}@media (max-width:500px){.comms-demo-heading{flex-direction:column;gap:8px}.comms-demo-channel-note{text-align:right;max-width:150px}.comms-demo-squad{margin-inline:4px}.comms-demo-legend{gap:10px;font-size:12px}.comms-demo-caption{min-height:146px}}.comms-demo-home{border:1px solid var(--border);background:var(--background);border-radius:8px;justify-content:center;align-items:start;gap:8px;width:180px;height:70px;padding-top:9px;font-size:14px;display:flex;position:absolute;top:150px;left:50%;transform:translate(-50%)}.comms-demo-modes{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.comms-demo-modes button{border:1px solid var(--border);background:var(--background);min-height:44px;color:var(--foreground);font:inherit;cursor:pointer;border-radius:8px;padding:10px 18px}.comms-demo-modes button[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:var(--background)}.comms-demo-modes button:focus-visible{outline:2px solid var(--primary);outline-offset:3px}.comms-demo-scene-leaders{height:350px}.comms-demo-scene-leaders .comms-demo-command{top:170px}.comms-demo-scene-leaders .comms-demo-squads{top:245px}.comms-demo-squad.is-speaking{border-color:var(--primary);box-shadow:0 0 24px color-mix(in srgb, var(--primary) 12%, transparent)}.comms-demo-empty{z-index:2;text-align:center;border:1px solid var(--border);background:var(--background);border-radius:8px;gap:8px;padding:20px;display:grid;position:absolute;inset:155px 16px auto}.comms-demo-empty span{color:var(--muted-foreground);font-size:13px}
