.demo{max-width:1200px;margin:auto;padding:1.25rem clamp(1rem,4vw,2.5rem) 2.5rem}
.demo-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2.3rem}
.demo-head a{color:var(--ink-2);text-decoration:none;font-size:.85rem}
.demo-head .demo-brand{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;font-weight:700;color:var(--ink)}
.demo-seal{display:grid;place-items:center;background:var(--shu);color:var(--paper);width:26px;height:26px;border-radius:6px;font-size:.8rem}
.demo-intro h1{font-size:clamp(1.55rem,3vw,2.15rem);line-height:1.4;letter-spacing:.02em;margin:.4rem 0 .7rem}
.demo-intro p{color:var(--ink-3);margin:0 0 1.5rem}
.demo-room{display:grid;grid-template-columns:minmax(0,2.45fr) minmax(240px,1fr);gap:1.25rem;align-items:start}
.demo-main{min-width:0}
.demo-avatar{border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden;background:var(--surface);box-shadow:var(--sh-2)}
.demo-picture{position:relative;aspect-ratio:16/9;background:#e9ede6}
.demo-picture canvas,.demo-picture video{display:block;width:100%;height:100%;object-fit:contain}
.demo-picture [hidden],.demo-camera [hidden]{display:none}
.demo-badge{position:absolute;top:.8rem;left:.8rem;background:#24332de8;color:#fff;border-radius:30px;padding:.22rem .7rem;font-size:.72rem}
.demo-captions{padding:1.15rem 1.3rem;min-height:155px}
.demo-progress{color:var(--shu-ink);font-size:.75rem;font-weight:650}
.demo-captions #caption{font-size:1rem;color:var(--ink);margin:.35rem 0}
.demo-captions #question{font-size:.85rem;color:var(--ink-3);margin:.35rem 0 0}
.demo-side{display:grid;gap:1rem}
.demo-side .panel{padding:1rem}
.demo-side h2{font-size:.9rem;margin:0 0 .65rem;display:flex;align-items:center;gap:.5rem}
.demo-local{font-size:.68rem;color:var(--ink-3);font-weight:400}
.demo-camera{aspect-ratio:16/9;background:var(--surface-2);border-radius:var(--r-s);overflow:hidden;display:grid;place-items:center;margin-bottom:.85rem}
.demo-camera video{width:100%;height:100%;object-fit:cover}
.demo-camera p{color:var(--ink-3);font-size:.8rem;text-align:center;line-height:1.8;margin:.7rem}
.demo-self button{width:100%;justify-content:center;font-size:.8rem}
.demo-meter{display:flex;align-items:center;gap:.6rem;margin-top:.65rem;font-size:.72rem;color:var(--ink-3)}
.demo-meter meter{width:100%;height:12px;min-width:0}
.demo-meter label{white-space:nowrap}
.demo-self .meta{font-size:.72rem;margin:.4rem 0 0}
.demo-note p{font-size:.8rem;color:var(--ink-3);line-height:1.8;margin:.5rem 0 0}
.demo-controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1.3rem 0 0}
.demo-controls button{min-height:44px}
.demo-controls #status{font-size:.8rem;color:var(--ink-3);margin-left:.4rem}
.demo-error{color:var(--bad);background:var(--bad-wash);padding:.75rem 1rem;border-radius:var(--r-s);font-size:.85rem}
a:focus-visible{outline:2px solid var(--shu);outline-offset:4px}
@media(max-width:760px){
  .demo-head{margin-bottom:1.6rem}
  .demo-room{grid-template-columns:minmax(0,1fr)}
  .demo-side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-captions{min-height:145px;padding:1rem}
  .demo-controls #status{width:100%;margin:.25rem 0 0}
}
@media(max-width:480px){.demo-side{grid-template-columns:minmax(0,1fr)}.demo-intro p{font-size:.85rem}.demo-head a{font-size:.75rem}}