:root{--bg-color: #121212;--text-color: #ffffff;--primary-color: #4CAF50;--secondary-color: #2196F3;--surface-color: #1e1e1e;--border-radius: 8px}[data-theme=light]{--bg-color: #f5f5f5;--text-color: #121212;--primary-color: #4CAF50;--secondary-color: #2196F3;--surface-color: #ffffff}*{box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:20px;background-color:var(--bg-color);color:var(--text-color);display:flex;justify-content:center;align-items:center;min-height:100vh;transition:background-color .3s,color .3s}#app{width:100%;max-width:1200px;display:flex;flex-direction:column;align-items:center;gap:20px}h1{margin:0;font-size:2.5rem;color:var(--text-color)}.controls{display:flex;gap:15px;flex-wrap:wrap;justify-content:center;align-items:center;background:var(--surface-color);padding:15px;border-radius:var(--border-radius);box-shadow:0 4px 6px #0000004d;transition:background-color .3s}label{display:flex;align-items:center;gap:5px}select{padding:8px;border-radius:4px;border:1px solid #444;background:var(--bg-color);color:var(--text-color);font-size:1rem}button{padding:8px 16px;border:none;border-radius:4px;background-color:var(--primary-color);color:#fff;cursor:pointer;font-size:1rem;transition:background-color .3s}button:hover{filter:brightness(1.1)}.controls button{display:inline-flex;align-items:center;gap:6px}.controls button svg{fill:currentColor;flex-shrink:0;display:block}button.btn-active{background-color:var(--secondary-color)}.webcam-container{position:relative;width:100%;max-width:960px;aspect-ratio:16/9;background:#000;border-radius:var(--border-radius);overflow:hidden;box-shadow:0 10px 20px #00000080;display:flex;justify-content:center;align-items:center}.webcam-container.pseudo-fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;max-width:none;border-radius:0;z-index:9999;background:var(--bg-color)}video{width:100%;height:100%;object-fit:contain;transition:transform .3s ease}.flip-horizontal{transform:scaleX(-1)}.flip-vertical{transform:scaleY(-1)}.flip-horizontal.flip-vertical{transform:scale(-1)}.button-container{display:flex;gap:15px;justify-content:center;background:var(--surface-color);padding:10px 20px;border-radius:50px;transition:opacity .5s ease,background-color .3s;margin-top:20px}.button-container.fullscreen-controls{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:10000;background:#1e1e1ecc;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);margin-top:0}.button-container.hide-controls{opacity:0;pointer-events:none}.button-container button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;padding:0}.button-container svg{fill:#fff}#debug-overlay{position:absolute;top:10px;right:10px;background:#000c;color:#0f0;padding:15px;border-radius:var(--border-radius);font-family:Courier New,monospace;font-size:.85rem;z-index:10;max-width:300px;pointer-events:none}#debug-overlay h3{margin:0 0 10px;color:#fff;border-bottom:1px solid #444;padding-bottom:5px}#error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;text-align:center;font-size:1.2rem;z-index:5;background:#000000b3;padding:20px;border-radius:var(--border-radius);width:80%;max-width:400px}.debug-table{width:100%;border-collapse:collapse}.debug-table td{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.1)}.debug-item{margin-bottom:8px}@media(max-width:768px){h1{font-size:1.8rem}.controls{flex-direction:column;align-items:stretch}select{width:100%}.button-container{width:90%;justify-content:space-around}.button-container.fullscreen-controls{bottom:15px}.webcam-container{width:100%}}#grid-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.grid-thirds{background-image:linear-gradient(to right,transparent 33.3%,rgba(255,255,255,.4) 33.3%,rgba(255,255,255,.4) calc(33.3% + 1px),transparent calc(33.3% + 1px),transparent 66.6%,rgba(255,255,255,.4) 66.6%,rgba(255,255,255,.4) calc(66.6% + 1px),transparent calc(66.6% + 1px)),linear-gradient(to bottom,transparent 33.3%,rgba(255,255,255,.4) 33.3%,rgba(255,255,255,.4) calc(33.3% + 1px),transparent calc(33.3% + 1px),transparent 66.6%,rgba(255,255,255,.4) 66.6%,rgba(255,255,255,.4) calc(66.6% + 1px),transparent calc(66.6% + 1px))}.grid-phi{background-image:linear-gradient(to right,transparent 38.2%,rgba(255,255,255,.4) 38.2%,rgba(255,255,255,.4) calc(38.2% + 1px),transparent calc(38.2% + 1px),transparent 61.8%,rgba(255,255,255,.4) 61.8%,rgba(255,255,255,.4) calc(61.8% + 1px),transparent calc(61.8% + 1px)),linear-gradient(to bottom,transparent 38.2%,rgba(255,255,255,.4) 38.2%,rgba(255,255,255,.4) calc(38.2% + 1px),transparent calc(38.2% + 1px),transparent 61.8%,rgba(255,255,255,.4) 61.8%,rgba(255,255,255,.4) calc(61.8% + 1px),transparent calc(61.8% + 1px))}.grid-crosshair{background-image:linear-gradient(to right,transparent 50%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.5) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(to bottom,transparent 50%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.5) calc(50% + 1px),transparent calc(50% + 1px))}.grid-4x4{background-image:linear-gradient(to right,transparent 25%,rgba(255,255,255,.3) 25%,rgba(255,255,255,.3) calc(25% + 1px),transparent calc(25% + 1px),transparent 50%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.3) calc(50% + 1px),transparent calc(50% + 1px),transparent 75%,rgba(255,255,255,.3) 75%,rgba(255,255,255,.3) calc(75% + 1px),transparent calc(75% + 1px)),linear-gradient(to bottom,transparent 25%,rgba(255,255,255,.3) 25%,rgba(255,255,255,.3) calc(25% + 1px),transparent calc(25% + 1px),transparent 50%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.3) calc(50% + 1px),transparent calc(50% + 1px),transparent 75%,rgba(255,255,255,.3) 75%,rgba(255,255,255,.3) calc(75% + 1px),transparent calc(75% + 1px))}.control-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.grid-menu{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:var(--surface-color);border:1px solid rgba(255,255,255,.1);border-radius:var(--border-radius);padding:5px 0;margin-bottom:15px;box-shadow:0 4px 10px #00000080;white-space:nowrap;z-index:20}.grid-menu:before{content:"";position:absolute;top:100%;left:0;width:100%;height:20px}.grid-menu:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:6px;border-style:solid;border-color:var(--surface-color) transparent transparent transparent}.control-wrapper:hover .grid-menu{display:block}.grid-option{padding:8px 16px;cursor:pointer;transition:background-color .2s;color:var(--text-color)}.grid-option:hover{background-color:#ffffff1a}