:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: #000; overflow: hidden; font-family: system-ui, sans-serif; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px; width: 100vw; height: 100vh; background: #000; }
.card { position: relative; min-width: 0; min-height: 0; overflow: hidden; cursor: pointer; background: #050505; }
.feed { width: 100%; height: 100%; object-fit: cover; display: block; background: #050505; }
iframe.feed { border: 0; }
.preview { width: 100%; height: 100%; display: grid; place-items: center; color: #66717a; font-size: clamp(14px, 2vw, 24px); background: linear-gradient(135deg, #151515, #080808); }
.label { position: absolute; top: 0; left: 0; padding: clamp(10px, 1.5vw, 22px); font-size: clamp(16px, 2.3vw, 32px); font-weight: 600; text-shadow: 0 2px 5px #000; background: linear-gradient(135deg, #000b, transparent 75%); pointer-events: none; }
.card:focus-visible { outline: 4px solid #fff; outline-offset: -4px; }
.card.maximized { position: fixed; inset: 0; z-index: 2; width: 100vw; height: 100vh; cursor: default; }
.close { display: none; position: fixed; z-index: 3; top: 18px; right: 24px; width: 52px; height: 52px; border: 0; border-radius: 50%; background: #000b; color: #fff; font-size: 38px; line-height: 1; cursor: pointer; }
.close.visible { display: block; }
.close:focus-visible { outline: 3px solid #fff; }
.grid.has-maximized .card:not(.maximized) { display: none; }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(0, 1fr)); } }