:root{--canvas-opacity: 1;--clr-text: #e0dcdd;--clr-text-light: #fff;--clr-text-dark: #aaa;--clr-text-darkest: #666;--clr-accent: #f60;--clr-grip: #ffaf50;--clr-bkg: #333;--clr-bkg-dark: #282828;--clr-bkg-darkest: #141414;--clr-bkg-light: #444}*{margin:0;padding:0;touch-action:none}body{overflow:hidden;font-family:Arial,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}canvas{opacity:var(--canvas-opacity)}button{-webkit-appearance:none;-moz-appearance:none;appearance:none}.hidden{display:none!important}.spacer{flex-grow:1}#ui{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none}#ui *{pointer-events:auto}#loadingWrap{position:fixed;bottom:120px;left:50%;transform:translate(-50%);width:380px;display:flex;flex-direction:column;padding:16px}#loadingWrap>#loadingText{font-size:18px;color:var(--clr-text-light);text-align:center;text-shadow:0 0 4px rgba(0,0,0,.5)}#loadingWrap>#loadingBar{width:100%;height:10px;margin-top:8px;border-radius:4px;overflow:hidden}#controlsWrap{position:absolute;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column}#controlsWrap.faded-in{visibility:visible;opacity:1;transition:opacity .5s ease-out}#controlsWrap.faded-out{visibility:hidden;opacity:0;transition:visibility 0s .5s,opacity .5s ease-out}#buttonsContainer{display:flex;gap:8px}.controlButton{width:40px;height:40px;padding:0;margin:0;border:0;cursor:pointer;color:var(--clr-text);background-color:transparent}.controlButton:hover{color:var(--clr-text-light)}.controlButton>svg{display:block;margin:auto}.controlButton>svg>g.stroke{fill:none;stroke:#000;stroke-width:2;stroke-linejoin:round;opacity:.4}.controlButton>svg>g.fill{fill:currentColor;stroke:none}.controlButton.toggle{background:linear-gradient(90deg,transparent 0%,transparent 50%,var(--clr-accent) 50%,var(--clr-accent) 100%);background-size:200% 100%;background-position:100% 0%;background-repeat:no-repeat;transition:background-position .1s ease-in-out}.controlButton.toggle.left{margin-right:-4px;border-radius:4px 0 0 4px}.controlButton.toggle.left:not(.active){background-position:0% 0%}.controlButton.toggle.right{margin-left:-4px;margin-right:20px;border-radius:0 4px 4px 0}.controlButton.toggle.right:not(.active){background-position:200% 0%}#settingsPanel{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 70px);padding:10px;border-radius:8px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:14px;color:var(--clr-text);background-color:var(--clr-bkg)}.settingsRow{display:flex;gap:4px;width:100%}.settingsRow>button{flex-grow:1;padding:10px 20px;border:0;cursor:pointer;color:var(--clr-text);background-color:var(--clr-bkg-darkest)}.settingsRow>button:hover{color:var(--clr-text-light)}.settingsRow>div{padding:8px;cursor:pointer;color:var(--clr-text-dark)}.settingsRow>div.checkMark{width:16px}.settingsRow>div.checkMark:not(.active){color:var(--clr-bkg)}.settingsRow>div:hover{color:var(--clr-text)}.divider{width:100%;height:1px;margin:8px 0;background-color:var(--clr-text-darkest)}#infoPanel{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0006;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}#infoPanelContent{position:absolute;top:40px;left:50%;transform:translate(-50%);min-height:280px;min-width:320px;padding:8px;border-radius:24px;display:flex;flex-direction:column;color:var(--clr-text);background-color:#333c}#tabs{display:flex;gap:16px;padding:8px;border-radius:22px;background-color:var(--clr-bkg-dark)}.tab{padding:8px;border-radius:16px;cursor:pointer;flex-grow:1;text-align:center;font-weight:700;font-size:14px;color:var(--clr-text);transition:background-color .25s ease}.tab:hover,.tab.active{background-color:var(--clr-bkg-light)}#infoPanels{padding:16px}#infoPanels h1{font-size:14px;font-weight:700;padding:0 0 6px;color:var(--clr-text-light)}.control-item{display:flex;justify-content:space-between;gap:32px;line-height:1.5}.control-action{text-align:left}.control-key{text-align:right}.control-spacer{border-bottom:1px dashed #666;margin:10px 0}#tooltip{display:none;position:absolute;border-radius:4px;padding:4px;font-size:12px;color:var(--clr-text);background-color:var(--clr-bkg-dark)}#cameraInfoPanel{position:fixed;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));min-width:280px;padding:16px;border-radius:12px;display:flex;flex-direction:column;gap:12px;pointer-events:auto;color:var(--clr-text);background-color:#333333d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 4px 12px #0000004d}#cameraInfoPanel>h1{font-size:16px;font-weight:700;color:var(--clr-text-light);margin-bottom:4px}.camera-info-item{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:6px 0;border-bottom:1px solid rgba(102,102,102,.3)}.camera-info-item:last-child{border-bottom:none}.camera-info-label{font-weight:700;color:var(--clr-text);min-width:70px;font-size:13px}.camera-info-value{font-family:Courier New,monospace;font-size:12px;color:var(--clr-text-light);text-align:right;word-break:break-all}#brandingWrap{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 56px);display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background-color:#fff;color:var(--clr-text-dark);text-decoration:none;font-size:13px;transition:color .2s ease,background-color .2s ease}#brandingWrap:hover{color:var(--clr-text-light);background-color:#3339}#brandingWrap .branding-text{line-height:1}#brandingWrap .branding-app-logo{display:block;object-fit:contain;vertical-align:middle}#brandingWrap .branding-app-logo{width:auto;height:28px}