:root{--panel:#101012bd;--line:#ffffff17;--text:#ececee;--muted:#8c8c93;--accent:#fff;--rec:#ff3b30;font-family:-apple-system,BlinkMacSystemFont,Inter,Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--text);background:#000;margin:0;overflow:hidden}button,input{font:inherit;color:inherit}#app{background:#050506;place-items:center;display:grid;position:fixed;inset:0}#frame{line-height:0;position:relative}#scene{touch-action:none;display:block}#panel{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(18px)saturate(1.2);z-index:5;border-radius:16px;flex-direction:column;gap:12px;width:276px;max-height:calc(100% - 32px);padding:16px;font-size:12.5px;transition:opacity .25s,transform .25s;display:flex;position:fixed;top:16px;left:16px;overflow:auto}#panel header{align-items:center;gap:11px;display:flex}#panel .mark{color:#fff;place-items:center;width:34px;height:42px;display:grid}#panel .mark svg{width:100%;height:100%}#panel h1{letter-spacing:.01em;margin:0;font-size:15px;font-weight:650}#panel header p{color:var(--muted);margin:2px 0 0;font-size:11.5px}#panel button{border:1px solid var(--line);cursor:pointer;background:#ffffff0d;border-radius:9px;padding:8px 10px;transition:background .15s,border-color .15s}#panel button:hover{background:#ffffff1a}#panel button.primary{color:#0b0b0c;background:#f4f4f5;border-color:#0000;padding:10px;font-weight:600}#panel button.primary:hover{background:#fff}#panel button.primary.on{color:var(--text);border-color:var(--line);background:#ffffff14}#panel button:disabled{opacity:.5;cursor:progress}.chips{flex-wrap:wrap;gap:6px;display:flex}.chips span{border:1px solid var(--line);color:var(--muted);border-radius:99px;padding:3px 8px 3px 18px;font-size:11px;position:relative}.chips span:before{content:"";background:#3a3a3f;border-radius:50%;width:6px;height:6px;margin-top:-3px;transition:background .2s,box-shadow .2s;position:absolute;top:50%;left:7px}.chips span.on{color:var(--text)}.chips span.on:before{background:#4cd964;box-shadow:0 0 6px #4cd964}.group{flex-direction:column;gap:6px;display:flex}.group>label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;justify-content:space-between;font-size:11px;display:flex}.group output{text-transform:none;letter-spacing:0;color:var(--text)}.seg{border:1px solid var(--line);background:#00000059;border-radius:10px;gap:3px;padding:3px;display:flex}#panel .seg button{color:var(--muted);background:0 0;border:0;border-radius:7px;flex:1;padding:6px 4px}#panel .seg button.on{color:var(--text);background:#ffffff24}.room-only{justify-content:space-between;align-items:center;gap:8px;margin-top:2px;display:none}body.room .room-only{display:flex}.room-only .inline{cursor:pointer;align-items:center;gap:8px;display:flex}.room-only input{accent-color:#f4f4f5;width:14px;height:14px;margin:0}#panel .room-only button{padding:5px 9px;font-size:11.5px}.toggles{gap:7px;display:grid}.toggles label{cursor:pointer;align-items:center;gap:8px;display:flex}.toggles input{accent-color:#f4f4f5;width:14px;height:14px;margin:0}.toggles kbd{color:var(--muted);border:1px solid var(--line);border-radius:4px;margin-left:auto;padding:1px 5px;font:600 10px ui-monospace,Menlo,monospace}input[type=range]{accent-color:#f4f4f5;width:100%}.row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.rec-btn{justify-content:center;align-items:center;gap:7px;display:flex}.rec-btn b{background:var(--rec);border-radius:50%;width:9px;height:9px}.rec-btn.on{background:#ff3b3029!important;border-color:#ff3b3099!important}.rec-btn.on b{border-radius:2px;animation:1s steps(2,end) infinite blink}#status{color:var(--muted);min-height:2.9em;margin:0;line-height:1.45}#status.err{color:#ff8a80}.keys{color:#5d5d64;margin:0;font-size:11px}#pip{aspect-ratio:16/9;border:1px solid var(--line);z-index:5;background:#111;border-radius:14px;width:248px;display:none;position:fixed;bottom:16px;right:16px;overflow:hidden;box-shadow:0 10px 30px #0006}#pip.show{display:block}#pip video,#pip canvas{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}#pip.mirror video,#pip.mirror canvas{transform:scaleX(-1)}#meter{background:#ffffff26;border-radius:2px;height:3px;position:absolute;bottom:7px;left:8px;right:8px;overflow:hidden}#meter i{background:#fff;width:0;height:100%;display:block}body.clean #panel{opacity:0;pointer-events:none;transform:translate(-12px)}body.clean #pip{display:none}body.clean{cursor:none}#toast{border:1px solid var(--line);opacity:0;pointer-events:none;z-index:6;background:#101012cc;border-radius:99px;padding:8px 14px;font-size:12px;transition:opacity .3s,transform .3s;position:fixed;bottom:24px;left:50%;transform:translate(-50%,10px)}#toast.show{opacity:1;transform:translate(-50%)}#viewfinder{pointer-events:none;color:#ffffffeb;letter-spacing:.06em;text-shadow:0 1px 2px #00000073;font:600 12px/1 ui-monospace,SF Mono,Menlo,monospace;position:absolute;inset:0}#viewfinder[hidden]{display:none}.corner{filter:drop-shadow(0 1px 1px #0006);border:2px solid #ffffffe6;width:28px;height:28px;position:absolute}.corner.tl{border-bottom:0;border-right:0;top:22px;left:22px}.corner.tr{border-bottom:0;border-left:0;top:22px;right:22px}.corner.bl{border-top:0;border-right:0;bottom:22px;left:22px}.corner.br{border-top:0;border-left:0;bottom:22px;right:22px}.vf-top,.vf-bottom{justify-content:space-between;align-items:center;display:flex;position:absolute;left:36px;right:36px}.vf-top{top:34px}.vf-bottom{bottom:34px}.vf-rec{align-items:center;gap:8px;display:flex}.vf-rec b{background:#ffffff80;border-radius:50%;width:10px;height:10px}#viewfinder.live .vf-rec b{background:var(--rec);animation:1s steps(2,end) infinite blink}.vf-cross{opacity:.6;background:linear-gradient(#fff,#fff) 50%/100% 1.5px no-repeat,linear-gradient(#fff,#fff) 50%/1.5px 100% no-repeat;width:18px;height:18px;margin:-9px;position:absolute;top:50%;left:50%}#vfMeter{background:#ffffff40;border-radius:3px;width:90px;height:5px;overflow:hidden}#vfMeter i{background:#fff;width:0;height:100%;display:block}@keyframes blink{50%{opacity:.2}}@media (max-width:640px){#panel{width:auto;max-height:55%;right:16px}#pip{width:150px}}