<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="theme-color" content="#000000">
    <title>ELYWARE Video Mixer — Output</title>
    <link rel="icon" type="image/svg+xml" href="/static/brand/video-mixer-mark.svg">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/brand/video-mixer-icon-32.png">
    <style>
        * { margin: 0; padding: 0; }
        html, body {
            width: 100%; height: 100%;
            background: #000;
            overflow: hidden;
            cursor: none;
        }
        body.show-cursor { cursor: default; }
        canvas {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
        }
        #status {
            position: fixed;
            top: 10px;
            right: 10px;
            color: #555;
            font: 12px/1 monospace;
            pointer-events: none;
            transition: opacity 0.5s;
        }
        #status.connected { color: #44dd66; }
    </style>
</head>
<body>
    <canvas id="output-canvas"></canvas>
    <div id="status">Waiting for mixer...</div>
    <script src="/static/js/transitions.js?v=4.1"></script>
    <script src="/static/js/visuals.js?v=4.1"></script>
    <script src="/static/js/output.js?v=4.1"></script>
</body>
</html>
