.guest-demo{position:relative;padding:32px;margin:48px 0;scroll-margin-top:110px}.demo-heading{display:flex;align-items:start;gap:24px;justify-content:space-between}.demo-heading h2{font-size:clamp(28px,4vw,40px);margin:12px 0}.demo-heading p,.demo-bottom p{color:var(--soft);line-height:1.65;margin:0}.demo-badge{flex-shrink:0;border:1px solid #c4a5ff66;border-radius:30px;padding:9px 12px;font-size:12px;background:#b48aff18}.demo-disclosure{font-size:12px;line-height:1.7;color:#d5cce3;border-bottom:1px solid #ffffff25;padding-bottom:20px}.demo-steps{display:flex;flex-wrap:wrap;gap:16px 28px;list-style:none;padding:0;font-size:13px;margin:24px 0}.demo-steps span{color:#d7baff;margin-right:6px}.demo-tools{display:flex;align-items:end;gap:14px;flex-wrap:wrap}.demo-tools label{display:block;font-size:13px;margin-bottom:8px}.demo-tools select,.demo-tools input{font:inherit;color:white;background:#19132fe6;border:1px solid #ffffff40;border-radius:14px;padding:12px;width:100%;min-height:46px}.demo-search{flex:1;min-width:150px}.demo-tools button{font-family:inherit;cursor:pointer;min-height:46px}.demo-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0}.demo-summary>div{border:1px solid #ffffff25;border-radius:18px;background:#ffffff07;padding:18px}.demo-summary strong{font-size:30px;display:block}.demo-summary span{font-size:12px;color:var(--soft)}.demo-sync{padding:14px 16px;background:#b7a0ff15;border:1px solid #c8aaff35;border-radius:14px;font-size:14px;line-height:1.5;min-height:70px;display:flex;align-items:center;margin-bottom:20px}.demo-boards{display:grid;grid-template-columns:1fr 1fr;gap:18px}.demo-board{min-width:0;border:1px solid #ffffff25;border-radius:22px;background:#151027bd;padding:20px;transition:border-color .25s,box-shadow .25s}.demo-board.is-operating{border-color:#c6a2ffb0;box-shadow:0 0 0 2px #b68aff15,inset 0 1px 0 #ffffff30}.demo-board header{display:flex;justify-content:space-between;align-items:center;gap:8px}.demo-board h3{font-size:24px;margin:8px 0}.demo-board .tag{font-size:10px;letter-spacing:.12em}.demo-connection{font-size:11px;color:#a7edca;white-space:nowrap}.demo-gate-count{color:var(--soft);font-size:12px;line-height:1.6;min-height:38px}.demo-guests{list-style:none;margin:0;padding:0;display:grid;gap:8px}.demo-guest{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #ffffff15;border-radius:12px;padding:12px;background:#ffffff04}.demo-guest strong{font-weight:500;font-size:14px;display:block}.demo-guest span{display:block;font-size:11px;color:#bdb2d1;margin-top:5px}.demo-guest.has-arrived{background:#47cc8d12;border-color:#79e3ad40}.demo-guest.has-arrived span{color:#a7edca}.demo-guest button{flex-shrink:0;padding:9px 10px;min-height:40px;background:#d9c5ff;color:#211437;border:0;border-radius:10px;font:inherit;font-size:11px;cursor:pointer}.demo-guest button:disabled{opacity:.45;cursor:default}.demo-guest button:not(:disabled):hover{background:#eee2ff}.demo-empty{padding:20px;color:var(--soft);line-height:1.6}.demo-bottom{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:26px}.demo-bottom h3{font-size:17px}.demo-bottom p,.demo-bottom li{font-size:13px;line-height:1.7}.demo-bottom ol{padding-left:18px;color:var(--soft)}.demo-tools input:focus-visible,.demo-tools select:focus-visible{outline:2px solid #d9c5ff;outline-offset:3px}@media(max-width:800px){.demo-boards{grid-template-columns:1fr}.demo-heading{flex-direction:column;gap:12px}.demo-summary{grid-template-columns:repeat(2,1fr)}.guest-demo{padding:22px}.demo-bottom{grid-template-columns:1fr;gap:10px}.demo-board{padding:16px}.demo-tools>div{flex:1 1 100%}}@media(prefers-reduced-motion:reduce){.demo-board{transition:none}}
