:root{--demo-bg: #070b14;--demo-panel: rgba(255, 255, 255, .04);--demo-border: rgba(255, 255, 255, .09);--demo-text: #e8eefc;--demo-muted: #93a3c0;--demo-accent: #7dd3fc;--demo-good: #34d399;--demo-ok: #fbbf24;--demo-bad: #f87171}*{box-sizing:border-box}body{margin:0;background:radial-gradient(1100px 620px at 12% -8%,rgba(56,189,248,.16),transparent 60%),radial-gradient(900px 520px at 92% 6%,rgba(129,140,248,.14),transparent 60%),var(--demo-bg);color:var(--demo-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}.demo-root{max-width:1280px;margin:0 auto;padding:28px 22px 56px}.demo-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}.demo-brand{display:flex;align-items:center;gap:14px}.demo-logo{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#38bdf8,#818cf8);color:#04121f;font-size:20px;font-weight:700}.demo-brand h1{margin:0;font-size:24px;letter-spacing:-.02em}.demo-brand p{margin:2px 0 0;font-size:13.5px;color:var(--demo-muted)}.demo-repo-link{color:var(--demo-accent);text-decoration:none;font-size:14px;font-weight:600;padding:9px 15px;border:1px solid var(--demo-border);border-radius:10px;background:var(--demo-panel);transition:border-color .15s,background .15s}.demo-repo-link:hover{border-color:#7dd3fc80;background:#7dd3fc14}.demo-banner{border:1px solid var(--demo-border);border-left:3px solid var(--demo-accent);background:var(--demo-panel);border-radius:12px;padding:14px 18px;font-size:14px;line-height:1.62;color:#c6d3ea;margin-bottom:20px}.demo-banner strong{color:var(--demo-text)}.demo-banner code{background:#7dd3fc21;color:var(--demo-accent);padding:1px 6px;border-radius:5px;font-size:12.5px}.demo-inline-btn{background:none;border:none;border-bottom:1px dashed var(--demo-accent);color:var(--demo-accent);font:inherit;padding:0;cursor:pointer}.demo-stage{display:grid;grid-template-columns:1fr 1fr 300px;gap:16px;align-items:start}.demo-panel{border:1px solid var(--demo-border);background:var(--demo-panel);border-radius:14px;padding:14px}.demo-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.demo-panel-head h2{margin:0;font-size:15px;font-weight:650;letter-spacing:.01em}.demo-tag{font-size:11.5px;color:var(--demo-muted);border:1px solid var(--demo-border);border-radius:999px;padding:3px 10px;white-space:nowrap}.demo-tag.live{color:var(--demo-good);border-color:#34d39966;background:#34d3991a}.demo-canvas-wrap{position:relative;aspect-ratio:4 / 3;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#ffffff09,#fff0)}.demo-canvas,.demo-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.demo-video{object-fit:cover;transform:scaleX(-1);opacity:0}.demo-video.visible{opacity:1}.demo-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#070b14b8;font-size:14px;color:var(--demo-muted)}.demo-readout{border:1px solid var(--demo-border);background:var(--demo-panel);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:16px}.demo-score{text-align:center;padding:12px 0 10px;border-radius:12px;background:#ffffff08;border:1px solid var(--demo-border)}.demo-score-value{font-size:52px;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--demo-muted);transition:color .2s}.demo-score.good .demo-score-value{color:var(--demo-good)}.demo-score.ok .demo-score-value{color:var(--demo-ok)}.demo-score.bad .demo-score-value{color:var(--demo-bad)}.demo-score-label{margin-top:6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--demo-muted)}.demo-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.demo-stats>div{border:1px solid var(--demo-border);border-radius:10px;padding:9px 10px;text-align:center}.demo-stat-value{display:block;font-size:21px;font-weight:650;font-variant-numeric:tabular-nums}.demo-stat-label{display:block;margin-top:2px;font-size:11px;color:var(--demo-muted)}.demo-feedback h3,.demo-limbs h3{margin:0 0 8px;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--demo-muted);font-weight:650}.demo-feedback p{margin:0;font-size:14px;line-height:1.5;color:var(--demo-muted);min-height:42px}.demo-feedback p.active{color:var(--demo-text)}.demo-limb{display:grid;grid-template-columns:54px 1fr 26px;align-items:center;gap:8px;margin-bottom:6px}.demo-limb-label{font-size:12px;color:var(--demo-muted)}.demo-limb-track{height:6px;border-radius:999px;background:#ffffff12;overflow:hidden}.demo-limb-fill{height:100%;border-radius:999px;background:var(--demo-muted);transition:width .12s linear,background .2s}.demo-limb-fill.good{background:var(--demo-good)}.demo-limb-fill.ok{background:var(--demo-ok)}.demo-limb-fill.bad{background:var(--demo-bad)}.demo-limb-value{font-size:12px;text-align:right;font-variant-numeric:tabular-nums;color:var(--demo-muted)}.demo-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.demo-btn{font:inherit;font-size:13px;font-weight:550;padding:9px 10px;border-radius:9px;border:1px solid var(--demo-border);background:#ffffff08;color:var(--demo-text);cursor:pointer;transition:background .15s,border-color .15s,opacity .15s}.demo-btn:hover:not(:disabled){background:#ffffff14}.demo-btn.primary{border-color:#7dd3fc80;background:#7dd3fc21;color:var(--demo-accent)}.demo-btn:disabled{opacity:.55;cursor:default}.demo-error{margin:0;font-size:12.5px;line-height:1.5;color:var(--demo-ok)}.demo-footer{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;padding-top:20px;border-top:1px solid var(--demo-border)}.demo-footer h3{margin:0 0 7px;font-size:13px;font-weight:650}.demo-footer p{margin:0;font-size:13.5px;line-height:1.65;color:var(--demo-muted)}.demo-footer a{color:var(--demo-accent)}@media(max-width:1080px){.demo-stage{grid-template-columns:1fr 1fr}.demo-readout{grid-column:1 / -1}.demo-controls{grid-template-columns:repeat(4,1fr)}}@media(max-width:720px){.demo-root{padding:20px 14px 40px}.demo-stage,.demo-footer{grid-template-columns:1fr}.demo-controls{grid-template-columns:1fr 1fr}}