:root{color:#e9f3ef;background:#10191b;font-family:ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}button,textarea{font:inherit}button{color:#102219;cursor:pointer;background:#a1f0c0;border:none;padding:12px 18px;font-weight:700}button:hover{background:#c9ffdc}button:focus-visible,textarea:focus-visible{outline-offset:2px;outline:3px solid #63baff}a{color:#a1f0c0}.demo-shell{max-width:1060px;margin:0 auto;padding:28px 24px 60px}.demo-header{border-bottom:1px solid #36514c;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:22px;display:flex}.demo-eyebrow{color:#9fd7b7;letter-spacing:.1em;text-transform:uppercase;font-size:12px}h1{margin:12px 0 6px;font-size:clamp(28px,5vw,42px)}p{color:#b3c5bf;line-height:1.55}.demo-status{background:#47352d;border:1px solid #92765a;flex-shrink:0;padding:10px 13px;font-size:13px}.demo-status.connected{background:#213e30;border-color:#427e58}.demo-invite{background:#18292a;border:1px solid #37534e;justify-content:space-between;align-items:center;gap:22px;margin:24px 0 28px;padding:20px;display:flex}.demo-invite p{max-width:630px;margin:5px 0 0;font-size:14px}label{margin:0 0 10px;font-weight:650;display:block}textarea{color:#f0f8f3;resize:vertical;background:#142122;border:1px solid #5a7670;width:100%;min-height:min(55vh,520px);padding:23px;font-size:17px;line-height:1.7}textarea:disabled{opacity:.55}footer{color:#9aafa8;justify-content:space-between;margin-top:10px;font-size:13px;display:flex}.demo-warning{background:#282821;border-left:3px solid #d8a36e;margin-top:32px;padding:18px 20px}.demo-warning p{margin-top:8px;font-size:14px}.demo-error{color:#ffd3d3;background:#402328;border:1px solid #ce7171;padding:12px 14px}@media (width<=640px){.demo-header,.demo-invite{flex-direction:column;align-items:stretch}.demo-shell{padding:18px 14px 40px}}.demo-diagnostics{color:#b9cfc4;border:1px solid #36514c;flex-wrap:wrap;gap:10px 20px;margin-top:18px;padding:12px 16px;font-size:13px;display:flex}.demo-diagnostics strong{color:#a1f0c0;margin-right:5px}.demo-diagnostics p{width:100%;margin:4px 0;font-size:13px}.inspector{background:#152324;border:1px solid #41625c;margin-top:24px}.inspector>summary{cursor:pointer;color:#c6f6db;padding:16px 20px;font-weight:700}.inspector-body{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px;display:grid}.inspector-card{background:#1b2c2d;border:1px solid #344d49;min-width:0;padding:16px}.inspector-card h2{margin:0 0 16px;font-size:19px}.inspector-card h2 small{color:#a4c9b7;font-size:13px;font-weight:400}.inspect-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;display:grid}.inspect-grid div{border-bottom:1px solid #344d49;min-width:0;padding-bottom:8px}.inspect-grid dt{color:#a2c1b4;font-size:12px}.inspect-grid dd{overflow-wrap:anywhere;margin:5px 0 0;font-size:14px}.inspect-actions{flex-wrap:wrap;gap:8px;margin-top:18px;display:flex}.inspector button{padding:9px 12px}.inspector button:disabled{opacity:.55;cursor:not-allowed}.secondary-button{color:#f0f8f3;background:#34534c;border:1px solid #567e72}.secondary-button:hover{background:#456e62}.inspector-note{color:#b3c5bf;font-size:13px;line-height:1.5}.inspect-client-list{max-height:210px;margin:0;padding:0;list-style:none;overflow-y:auto}.inspect-client-list li{border-bottom:1px solid #36514c;flex-wrap:wrap;align-items:baseline;gap:8px;padding:10px 0;font-size:13px;display:flex}.peer-dot{background:#8ab99d;flex-shrink:0;width:8px;height:8px;display:inline-block}.inspect-join-form{gap:9px;display:grid}.inspect-join-form label{margin:0;font-size:13px}.inspect-join-form input,.log-toolbar select{color:#e4f1e9;min-width:0;font:inherit;background:#101b1b;border:1px solid #537b70;padding:10px}.inspect-join-form input:focus-visible,.log-toolbar select:focus-visible{outline-offset:2px;outline:3px solid #63baff}.log-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.log-toolbar h2{margin:0}.log-toolbar label{align-items:center;gap:6px;margin:0;display:flex}.inspect-log{background:#10191b;border:1px solid #344d49;height:260px;margin-top:14px;padding:8px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;overflow-y:auto}.inspect-log-entry{overflow-wrap:anywhere;border-bottom:1px solid #253935;grid-template-columns:auto 45px minmax(0,1fr);gap:9px;padding:6px 0;display:grid}.inspect-log-entry time{color:#9cb3a9}.inspect-log-entry.log-warn strong{color:#e9ca91}.inspect-log-entry.log-error strong{color:#ffabab}.inspect-log-entry.log-info strong{color:#98ebba}@media (width<=750px){.inspector-body,.inspect-grid{grid-template-columns:1fr}.inspector-card{padding:12px}}