.livestream-spotlight{border-top:1px solid var(--border);background:radial-gradient(ellipse at 10% 45%,var(--product-accent-soft),transparent 55%),var(--page-background)}.livestream-demo,.livestream-dialog{--live-hub: #84569f;--live-ink: #272525;--live-muted: #6c6565;--live-light: #a59c9c;--live-card: #fff;--live-card-muted: #fafafa;--live-bg: #eeecec;--live-border: #e6e3e3;--live-shadow: 0 4px 34px rgba(0, 0, 0, .04), 0 3px 4px rgba(0, 0, 0, .1);color:var(--live-ink);font-family:var(--font-family-body);color-scheme:light}[data-theme=dark] :is(.livestream-demo,.livestream-dialog){--live-ink: #e6e6e6;--live-muted: #aaa;--live-light: #999;--live-card: #2e2e2e;--live-card-muted: #262626;--live-bg: #1a1a1a;--live-border: #3a3a3a;color-scheme:dark}.livestream-demo{display:grid;grid-template-columns:196px minmax(0,1fr);margin-top:46px;overflow:hidden;border:1px solid var(--live-border);border-radius:8px;background:var(--live-card);box-shadow:0 28px 80px #2819321f}.livestream-sidebar{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;padding:26px 12px 0;background:var(--live-card);box-shadow:0 4px 34px #0000001a}.livestream-brand{display:flex;align-items:center;justify-content:space-between;padding:0 12px 24px}.livestream-brand>b{font-size:19px;letter-spacing:.18em}.livestream-brand>svg{color:var(--live-muted)}.livestream-workspace{display:flex;align-items:center;gap:12px;padding:12px 6px 18px;border-bottom:1px solid var(--live-border)}.livestream-workspace-mark{position:relative;display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:7px;color:var(--live-hub);background:#84569f1f;font-size:16px;font-weight:600}.livestream-workspace-mark>span{position:absolute;right:-5px;bottom:-5px;display:grid;place-items:center;width:17px;height:17px;border:2px solid var(--live-card);border-radius:5px;color:#fff;background:var(--live-hub);font-size:8px}.livestream-workspace>div,.livestream-profile>div{display:flex;flex-direction:column;gap:3px;font-size:12px}.livestream-workspace small,.livestream-workspace>div>span,.livestream-profile small{color:var(--live-muted);font-size:10px}.livestream-nav-section>p{margin:22px 10px 8px;color:var(--live-light);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.livestream-nav-section ul{margin:0;padding:0;list-style:none}.livestream-nav-section li{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 10px;border-radius:4px;font-size:12px}.livestream-nav-section li>svg{flex-shrink:0;color:var(--live-light)}.livestream-nav-section li.is-active{color:var(--live-hub);background:#84569f1a;font-weight:600}.livestream-nav-section li.is-active>svg{color:inherit}.livestream-nav-section li>small{margin-left:auto;padding:3px 5px;border:1px solid var(--live-border);border-radius:4px;color:var(--live-light);font-size:9px}.livestream-profile{display:flex;align-items:center;gap:10px;margin:auto -12px 0;padding:18px 22px;border-top:1px solid var(--live-border)}.livestream-profile>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--live-hub);background:#84569f1f;font-size:10px}.livestream-demo-main{min-width:0;background:linear-gradient(var(--live-card),var(--live-bg) 200px)}.livestream-demo-gradient{height:6px;background:var(--brand-gradient)}.livestream-demo-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:36px 24px 24px}.livestream-demo-heading h3{font-family:var(--font-family-body);font-size:28px;line-height:36px;letter-spacing:-.035em}.livestream-demo-heading p{color:var(--live-muted);font-size:13px;line-height:24px}.livestream-demo-label{padding:5px 8px;border:1px solid var(--live-border);border-radius:4px;color:var(--live-muted);font-size:9px}.livestream-controls{display:flex;align-items:center;flex-wrap:wrap;padding:0 24px;background:var(--live-card-muted);box-shadow:var(--live-shadow)}.livestream-controls>label{display:flex;align-items:center;gap:10px;min-width:0;min-height:60px;padding:0 16px;border-right:1px solid var(--live-border);color:var(--live-muted)}.livestream-controls .livestream-search{flex:1 1 180px;padding-left:0}.livestream-search input,.livestream-select select,.livestream-page-size select{width:100%;min-width:0;padding:0;border:0;color:var(--live-ink);background:transparent;font-size:12px}.livestream-search input{height:36px}.livestream-select select{max-width:120px;height:36px}.livestream-controls svg{flex-shrink:0}.livestream-density{display:flex;margin-left:auto;border:1px solid var(--live-border);border-radius:4px}.livestream-density button{display:grid;place-items:center;width:36px;height:32px;padding:0;border:0;border-right:1px solid var(--live-border);color:var(--live-light);background:transparent;cursor:pointer}.livestream-density button:last-child{border:0}.livestream-density button[aria-pressed=true]{color:var(--live-hub);background:#84569f1a}.livestream-demo :is(button,input,select):focus-visible,.livestream-dialog button:focus-visible{outline:2px solid var(--live-hub);outline-offset:3px}.livestream-demo-body{padding:30px 24px 24px}.livestream-camera-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-height:720px;overflow-y:auto;padding:0 4px 8px;scrollbar-width:thin;scrollbar-color:var(--live-light) transparent}.livestream-camera-grid[data-columns="1"]{grid-template-columns:minmax(0,1fr)}.livestream-camera-grid[data-columns="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.livestream-camera-grid[data-columns="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}.livestream-camera{min-width:0;margin:0;overflow:hidden;border-radius:4px;background:var(--live-card-muted);box-shadow:var(--live-shadow)}.livestream-camera figcaption{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:42px;padding:10px 12px;background:var(--live-card);box-shadow:0 1px 1px #00000012}.livestream-camera figcaption b{overflow:hidden;font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.livestream-camera-status{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;padding:4px 6px;border-radius:999px;color:var(--live-ink);background:#5fab6d33;font-size:8px;font-weight:500;text-transform:uppercase}.livestream-camera-status:before{width:6px;height:6px;border-radius:50%;background:#5fab6d;content:""}.is-offline .livestream-camera-status{background:var(--live-bg)}.is-offline .livestream-camera-status:before{background:var(--live-light)}.livestream-camera-image{position:relative;display:grid;aspect-ratio:16 / 9;overflow:hidden;color:#fff;background:#171717}.livestream-camera-image img{width:100%;height:100%;object-fit:cover}.livestream-camera-name,.livestream-stream-mode,.livestream-expand{position:absolute;display:inline-flex;align-items:center;padding:5px;border:1px solid rgba(255,255,255,.15);border-radius:10px;color:#fff;background:#0000004d;box-shadow:0 4px 16px #00000040;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity .2s ease}.livestream-camera-name{top:10px;left:10px;max-width:50%;overflow:hidden;padding:7px 8px;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.livestream-stream-mode{top:10px;right:10px;gap:2px;padding:4px}.livestream-stream-mode button{padding:4px 5px;border:1px solid transparent;border-radius:6px;color:#ffffffb3;background:transparent;font-size:8px;font-weight:600;cursor:pointer}.livestream-stream-mode button[aria-pressed=true]{border-color:#ffffff59;color:#fff;background:#fff3}.livestream-stream-mode i{width:5px;height:5px;margin:0 3px;border-radius:50%;background:#5fab6d}.livestream-expand{right:10px;bottom:10px;padding:7px;cursor:pointer}.livestream-camera:is(:hover,:focus-within) :is(.livestream-camera-name,.livestream-stream-mode,.livestream-expand),.livestream-camera:first-child :is(.livestream-stream-mode,.livestream-expand){opacity:1}.livestream-camera-id{position:absolute;bottom:8px;left:8px;padding:3px 4px;border-radius:3px;color:#fff;background:#0000008c;font-family:monospace;font-size:8px}.livestream-offline{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;color:var(--live-muted);background:var(--live-card-muted);font-size:10px;line-height:1.5;text-align:center}.livestream-offline b{color:var(--live-ink);font-size:13px}.livestream-offline>svg{color:var(--live-light)}.livestream-pagination,.livestream-pages{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}.livestream-pagination{justify-content:space-between;gap:12px;margin-top:24px;color:var(--live-muted);font-size:10px}.livestream-page-size select{width:auto;height:32px;padding:0 8px;border:1px solid var(--live-border);border-radius:4px;background:var(--live-card);font-size:11px}.livestream-pages button{display:grid;place-items:center;min-width:28px;height:30px;padding:0 7px;border:1px solid var(--live-border);border-bottom-width:2px;border-radius:4px;color:var(--live-ink);background:var(--live-card);font-size:11px;font-weight:600;cursor:pointer}.livestream-pages button[aria-current=page]{border-color:var(--live-hub);color:#fff;background:var(--live-hub)}.livestream-pages button:disabled{opacity:.45;cursor:not-allowed}.livestream-pages button:not(:disabled):hover{border-color:var(--live-hub)}.livestream-empty{padding:60px 20px;color:var(--live-muted);font-size:13px;text-align:center}.livestream-dialog{width:min(1000px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;overflow-y:auto;border:1px solid var(--live-border);border-radius:8px;background:var(--live-card)}.livestream-dialog::backdrop{background:#000000b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.livestream-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px}.livestream-dialog-heading h3{font-family:var(--font-family-body);font-size:14px;line-height:1.5}.livestream-dialog-heading button{flex-shrink:0;padding:5px;border:0;border-radius:4px;color:var(--live-ink);background:var(--live-bg);cursor:pointer}.livestream-dialog>img{width:100%;height:auto}.livestream-dialog>p{display:flex;align-items:center;gap:8px;padding:14px 16px;color:var(--live-muted);font-size:12px}.livestream-demo-note{margin-top:18px;color:var(--text-secondary);font-size:.78rem;line-height:1.7;text-align:center}.livestream-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:48px}.livestream-benefits article{padding-top:22px;border-top:1px solid var(--border)}.livestream-benefits article>span{color:var(--product-accent);font-size:.73rem;font-weight:700}.livestream-benefits h3{margin-top:14px;font-size:1.1rem}.livestream-benefits p{margin-top:12px;color:var(--text-secondary);font-size:.88rem;line-height:1.8}@media(max-width:1100px){.livestream-demo{grid-template-columns:176px minmax(0,1fr)}.livestream-controls{padding:0 16px}.livestream-controls .livestream-search{flex-basis:calc(100% - 155px)}.livestream-density{order:-1;margin:12px 0 12px auto}.livestream-controls .livestream-search{order:-2}.livestream-controls>.livestream-select{flex:1;border-top:1px solid var(--live-border)}.livestream-camera-grid,.livestream-camera-grid[data-columns="4"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.livestream-benefits{gap:22px}}@media(max-width:700px){.livestream-demo{grid-template-columns:minmax(0,1fr)}.livestream-sidebar{display:none}.livestream-demo-heading{padding:24px 16px}.livestream-demo-heading h3{font-size:24px}.livestream-demo-body{padding:24px 16px}.livestream-camera-grid,.livestream-camera-grid[data-columns="2"],.livestream-camera-grid[data-columns="4"]{grid-template-columns:minmax(0,1fr)}.livestream-camera-grid{max-height:650px}.livestream-stream-mode,.livestream-expand{opacity:1}.livestream-benefits{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.livestream-camera-name,.livestream-stream-mode,.livestream-expand{transition:none}}