:root { color-scheme: dark; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body, #player { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
#player { position: relative; }
video { display: block; width: 100%; height: 100%; object-fit: contain; }
header { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px 28px; color: #fff; background: linear-gradient(#0009, transparent); pointer-events: none; }
#camera-name { font-size: 14px; font-weight: 600; text-shadow: 0 1px 4px #000; }
#live { position: absolute; right: 16px; bottom: 16px; z-index: 2; border-radius: 4px; background: #b91c1c; padding: 4px 7px; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; box-shadow: 0 1px 4px #0008; pointer-events: none; }
#misolas-link { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: #0005; box-shadow: 0 0 0 1px #ffffff38; pointer-events: auto; transition: background .2s ease, transform .2s ease; }
#misolas-link:hover { background: #0009; transform: scale(1.05); }
#misolas-link:focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; }
#misolas-link img { display: block; width: 31px; height: 31px; object-fit: contain; }
#notice { position: absolute; inset: 48px 0 48px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 16px; text-align: center; background: #0008; pointer-events: none; }
#message { margin: 0; font-size: 14px; line-height: 1.5; }
#action { pointer-events: auto; border: 1px solid #ffffff60; border-radius: 6px; padding: 10px 18px; background: #fff; color: #111; cursor: pointer; font: inherit; }
#action:focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; }
[hidden] { display: none !important; }
noscript { position: absolute; inset: 40% 16px auto; text-align: center; }