:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#08111f;color:#e8eef7}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 80% 0,#17375c55,transparent 36%),#08111f}header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px clamp(18px,4vw,54px);background:#08111fe8;border-bottom:1px solid #ffffff12;backdrop-filter:blur(16px)}h1{font-size:clamp(1.4rem,2vw,2rem);margin:3px 0 0}.eyebrow{font-size:.68rem;letter-spacing:.18em;color:#55c6ff}.controls{display:flex;gap:10px}input,select{border:1px solid #ffffff1c;border-radius:10px;background:#101d2e;color:#e8eef7;padding:10px 12px}input{width:min(260px,40vw)}.grid{display:grid;gap:18px;padding:24px clamp(18px,4vw,54px)}.cols-1{grid-template-columns:1fr}.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}.card{overflow:hidden;border:1px solid #ffffff12;border-radius:16px;background:#0e1928;box-shadow:0 20px 45px #0005}.video-wrap{position:relative;aspect-ratio:16/9;background:#02060b}video{width:100%;height:100%;object-fit:contain}.state{position:absolute;top:12px;left:12px;display:flex;gap:7px;align-items:center;border-radius:999px;background:#08111fbd;padding:6px 9px;font-size:.72rem}.state i{width:7px;height:7px;border-radius:50%;background:#f1a23c}.online .state i{background:#39d98a;box-shadow:0 0 10px #39d98a}.card footer{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}.card h2{font-size:.98rem;margin:0}.card p{font-size:.78rem;color:#8392a8;margin:3px 0 0}.card button{border:0;border-radius:9px;background:#19283b;color:#fff;font-size:1.2rem;padding:6px 10px;cursor:pointer}@media(max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){header{align-items:stretch;flex-direction:column}.controls{display:grid;grid-template-columns:1fr 1fr}input{width:100%}.grid{grid-template-columns:1fr}}
.footer {
  text-align: center;
  padding: 18px;
  color: #8fa2bc;
  font-size: 0.8rem;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(8,16,29,.65);
}