body{margin:0;padding:0;text-align:left;font-family:Geist Mono;font-size:12px;overflow-x:hidden}.resizable-panels-container{display:flex;width:100vw;height:60vh;background:#f0f0f0;position:relative}.panel{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid #ccc;position:relative}.video-panel,.audio-panel,.text-panel{flex:1;min-width:100px}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#333;color:#fff;font-weight:700;font-size:14px;border-bottom:1px solid #ccc}.panel-title{flex:1}.panel-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0;width:24px;height:24px;line-height:20px;display:flex;align-items:center;justify-content:center}.panel-close:hover{background:#fff3;border-radius:3px}.panel-content{flex:1;overflow:auto;padding:10px}.resize-handle{width:5px;background:#999;cursor:ew-resize;flex-shrink:0;transition:background .2s}.resize-handle:hover{background:#666}.resize-handle.dragging{background:#333}#decoded-text-display{font-family:Times New Roman,Times,serif;font-size:26pt;line-height:1.4;white-space:pre-wrap;word-break:break-word;padding:10px;height:100%;overflow:auto;cursor:text;outline:none;position:relative;z-index:2;background:transparent}#decoded-text-display:focus{background:#fffef8e6}.binary-background{position:absolute;inset:0;font-family:Courier New,monospace;font-size:11pt;line-height:1.4;white-space:pre-wrap;word-break:break-all;padding:10px;color:#ddd;pointer-events:none;overflow:auto;z-index:1;opacity:0;transition:opacity .3s}.binary-background.visible{opacity:1}.panel-content{position:relative}.mode-toggle{display:flex;align-items:center;gap:6px;cursor:pointer}.mode-toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;width:40px;height:20px;background:#ccc;border-radius:10px;cursor:pointer;transition:background .3s;border:none}.mode-toggle input[type=checkbox]:checked{background:#333}.mode-toggle input[type=checkbox]:after{content:""}.toggle-label{font-size:11px;white-space:nowrap;color:#666}.panel-toggles{position:fixed;top:10px;right:10px;display:flex;gap:5px;z-index:1000}.panel-toggle{padding:8px 12px;font-size:12px;background:#333;color:#fff;border:none;cursor:pointer;border-radius:3px}.panel-toggle:hover{background:#555}.audio-controls{display:flex;flex-direction:column;gap:8px}.camera-controls{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px}.camera-controls select{max-width:220px}.main-container{display:flex;justify-content:left;align-items:flex-start;gap:4px;flex-wrap:wrap}.conversion-info{flex:0 1 auto;max-width:600px;text-align:left}#canvas-container{cursor:crosshair;border:1px solid black;display:block;position:relative;width:100%;height:auto}#pixel-highlight{position:absolute;left:0;top:0;width:0;height:0;border:1px solid white;background:#fff3;pointer-events:none;display:none;mix-blend-mode:difference}.spectrogram-info{margin-top:.5em;font-size:.9em;color:#888;font-family:monospace;letter-spacing:.05em}#canvas-container canvas{width:100%!important;height:auto!important;max-width:100%;display:block;position:relative;z-index:1;pointer-events:auto}.brush-btn.active{font-weight:700;text-decoration:underline}#decoded-text{font-family:monospace;white-space:pre-wrap;word-break:break-all;max-height:300px;overflow:auto;text-align:left;border:1px solid black;padding:10px;margin:20px auto;max-width:800px;font-size:24px}.conversion-table{border-collapse:collapse}.conversion-table th,.conversion-table td{border:1px solid black;padding:5px}.conversion-table .pixel-vis{font-family:monospace}#app{max-width:1280px;margin:0 auto;padding:2rem}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em #f7df1eaa)}.card{padding:2em}.read-the-docs{color:#888}.drawing-controls,.right-column{display:flex;flex-direction:column;gap:4px}.text-coordinates{padding:8px 12px;font-size:12px;color:#666;border-top:1px solid #ddd;background:#fafafa;font-family:Geist Mono,monospace}#text-coordinates{font-weight:700}button{border:1px solid transparent;display:flex;width:fit-content;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#afafaf;cursor:pointer;transition:border-color .25s}button:hover{background-color:#000;color:#fff}select{padding:.6em 1.2em;font-size:1em;font-family:inherit;background-color:#afafaf;border:1px solid transparent;cursor:pointer;transition:border-color .25s}select:hover{background-color:#000;color:#fff}.header{font-family:Times New Roman,Times,serif;padding-left:4px}.header h1{margin:0}