*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#000;color:#f4f6f8;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.screen{position:relative;width:100%;height:100%;background:#000}
video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;background:#000;outline:none}
[hidden]{display:none!important}
.notice{position:absolute;top:50%;left:50%;width:75%;max-width:760px;padding:30px 34px;text-align:center;transform:translate(-50%,-50%);background:rgba(12,12,12,.96);border:1px solid #3c3725;border-radius:18px}
.wordmark{font-weight:700;font-size:30px;letter-spacing:-1.6px;margin:0 0 24px}
.wordmark span,.hud-brand span{color:#c9aa00}
h1{margin:0 0 16px;font-size:32px;font-weight:600;line-height:1.2}
.notice p{margin:10px 0;color:#c7c7c7;font-size:20px;line-height:1.4}
.pairing-code{display:inline-block;margin:15px 0 8px;padding:14px 25px;min-width:220px;border-radius:10px;background:#c9aa00;color:#090909;font-family:monospace;font-size:60px;font-weight:700;letter-spacing:10px;text-indent:10px}
.notice .notice-device{font-size:15px;color:#a3a3a3;margin-top:20px}
.notice .gesture-hint{display:inline-block;padding:12px 20px;margin-top:22px;border:2px solid #c9aa00;border-radius:8px;color:#c9aa00;font-size:22px;font-weight:600}
.hud{position:absolute;left:3%;bottom:4%;min-width:260px;max-width:70%;padding:15px 19px;background:rgba(12,12,12,.90);border:1px solid rgba(201,170,0,.35);border-radius:10px;opacity:1;visibility:visible;transition:opacity .3s;pointer-events:none}
.hud.is-hidden{opacity:0;visibility:hidden}
.hud-top{font-size:15px;line-height:24px;color:#ededed;white-space:nowrap}
.hud-brand{font-size:21px;font-weight:700;letter-spacing:-1px;margin-right:16px}
.status-dot{display:inline-block;width:7px;height:7px;margin:0 7px 2px 0;border-radius:50%;background:#929292}
.status-dot.good{background:#c9aa00}.status-dot.warning{background:#f3c86b}.status-dot.error{background:#f59384}
.device-name{font-size:16px;margin-top:7px;font-weight:600}
.video-name{font-size:14px;margin-top:5px;max-width:720px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#c4c4c4}
.sync-detail{font-size:12px;margin-top:8px;color:#aaa}
@media(min-width:1600px){.notice{max-width:1000px;padding:45px}.wordmark{font-size:42px}h1{font-size:44px}.notice p{font-size:26px}.pairing-code{font-size:84px;min-width:310px}.notice .notice-device{font-size:20px}.hud{padding:20px 25px}.hud-top{font-size:20px;line-height:32px}.hud-brand{font-size:29px}.device-name{font-size:22px}.video-name{font-size:19px}.sync-detail{font-size:16px}}
@media(max-width:700px){.notice{width:90%;padding:24px 18px}.wordmark{font-size:25px;margin-bottom:18px}h1{font-size:25px}.notice p{font-size:16px}.pairing-code{font-size:44px;min-width:190px}.hud{left:4%;bottom:4%;max-width:92%;padding:12px 14px}.hud-top{font-size:12px}.hud-brand{font-size:18px}.device-name{font-size:14px}.video-name{font-size:12px}.sync-detail{font-size:11px}}

.symmetry-logo{display:block;width:260px;max-width:80%;height:auto;margin:0 auto 22px;padding:12px 18px;background:#f5f5f1;border-radius:4px}.brand-caption{font-size:11px;font-weight:700;letter-spacing:2px;color:#c9aa00}.notice h1{text-transform:uppercase;font-weight:800;letter-spacing:.6px}.hud-brand{font-size:17px;letter-spacing:1px}@media(min-width:1600px){.symmetry-logo{width:340px}.brand-caption{font-size:15px}.hud-brand{font-size:23px}}