html,body{height:100%;margin:0;padding:0}#root{height:100%;margin:0;font-family:monospace}.object-tool-button{background:#333;color:#fff;border:1px solid #555;border-radius:3px;padding:4px 6px;margin:0 1px;cursor:pointer;transition:all .2s ease;font-size:12px;min-width:24px;text-align:center;position:relative}.object-tool-button:not(.delete-button){color:#fff;text-shadow:0 0 3px rgba(0,0,0,.8)}.object-tool-button:hover{background:#444;border-color:#666}.object-tool-button.active{background:#007acc;border-color:#007acc;color:#fff}.object-tool-button.delete-button{background:#dc3545!important;border-color:#dc3545!important;color:#fff!important}.object-tool-button.delete-button:hover{background:#c82333!important;border-color:#bd2130!important}.object-ui-content{display:flex;align-items:center;gap:2px;padding:4px;background:#000000e6;border-radius:4px;border:1px solid #444}.text-object-container{position:relative;border-radius:4px;overflow:hidden}.resize-arrow{position:absolute;right:0;top:50%;transform:translateY(-50%);width:20px;height:20px;background:#000000b3;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:3px;font-size:12px;cursor:ew-resize;-webkit-user-select:none;user-select:none}.resize-arrow:hover{background:#000000e6}#root{margin:0;padding:0;width:100%;height:100%}canvas{width:100vw!important;height:100vh!important}.app-container{height:100vh;position:relative}.hidden{display:none}.controls{position:absolute;z-index:1}.ui-overlay{position:fixed;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;background-color:#000c;padding:10px;border-radius:8px;z-index:1000}.menu-button-container{position:fixed;top:20px;left:20px;z-index:2000}.menu-button{width:40px;height:40px;border-radius:4px;background-color:#000c;color:#fff;border:none;cursor:pointer;font-size:24px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.menu-button:hover{background-color:#000000e6}.sidebar-menu{position:fixed;top:70px;left:0;height:calc(100vh - 70px);width:250px;background-color:#000c;z-index:1900;transform:translate(-100%);transition:transform .3s ease-in-out}.sidebar-menu.open{transform:translate(0)}.menu-content{padding:20px;color:#fff}.shape-button{width:40px;height:40px;border:2px solid #333;border-radius:4px;background-color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px}.shape-button:hover{background-color:#f0f0f0}.object-ui{background:#000;border-radius:4px;padding:5px;display:flex;gap:5px;box-shadow:0 2px 10px #0000001a;transform:translate(-50%,-100%);pointer-events:auto!important;z-index:999999;position:relative}.object-tool-button{width:28px;height:28px;padding:4px;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;z-index:999999}.object-tool-button:hover{background:#f0f0f0}.object-tool-button.active{background-color:#e3f2fd;border-color:#2196f3;color:#1976d2}.object-tool-button select{background:#fff;color:#000;border:none;width:100%;height:100%;cursor:pointer;font-size:14px}.object-tool-button select:focus{outline:none}.object-tool-button select option{background:#fff;color:#000}.object-ui-container{pointer-events:all!important;-webkit-user-select:none;user-select:none;white-space:nowrap}.object-ui-content{padding:0;display:flex;gap:4px}.canvas-container>div{pointer-events:none}.face-ui-container{pointer-events:all!important;-webkit-user-select:none;user-select:none;white-space:nowrap}.face-ui-content{background:#000;padding:6px;border-radius:4px;box-shadow:0 0 10px #0003;display:flex;gap:4px}.face-tool-button{width:28px;height:28px;padding:4px;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;z-index:999999}.face-tool-button:hover{background:#f0f0f0}.header-input{font-family:inherit;font-size:14px;padding:4px 8px;border:1px solid #ccc;border-radius:4px;outline:none;width:200px;background:#fff}.header-input:focus{border-color:#2196f3;box-shadow:0 0 0 2px #2196f31a}.arrow-helper{pointer-events:auto!important}.text-object-container{position:relative}.resize-arrow{position:absolute;right:-35px;top:20%;transform:translateY(-50%);width:5px;height:5px;background:#00000080;color:#ff0;font-size:34px;display:flex;align-items:center;justify-content:center;cursor:ew-resize;border-radius:4px;caret-color:transparent}.border-menu{position:absolute;top:100%;left:73.5%;background:#000;border-radius:4px;padding:4px;display:flex;flex-direction:column;gap:4px;margin-top:4px}.border-menu-item{width:28px;height:28px;padding:4px;border:1px solid #ccc;border-radius:4px;background:#fff;color:#000;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:monospace}.border-menu-item:hover{background:#f0f0f0}.connection-status-indicator{transition:all .3s ease;animation:fadeIn .3s ease}.connection-status-indicator.hiding{opacity:0;transform:translateY(-10px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.status-dot{transition:background-color .3s ease}.status-dot[data-status=connecting]{animation:pulse 1s infinite alternate}@keyframes pulse{0%{opacity:.6;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}.active-tool{background-color:#4caf50!important;color:#fff!important;border:1px solid #45a049!important}.face-tool-button[title="Enable Camera"]:hover,.face-tool-button[title="Disable Camera"]:hover{background-color:#e7f5fd}.current-cell-info{margin-bottom:20px;padding:10px;background-color:#ffffff1a;border-radius:4px;font-size:14px}.cell-coordinates{font-family:monospace;font-weight:700;color:#4caf50}.template-section{margin-bottom:20px}.template-toggle-button{width:100%;padding:10px;background-color:#4caf50cc;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;text-align:left;transition:background-color .2s}.template-toggle-button:hover{background-color:#4caf50}.template-dropdown{margin-top:10px;background-color:#ffffff1a;border-radius:4px;padding:15px}.template-config{display:flex;flex-direction:column;gap:12px}.config-group{display:flex;flex-direction:column;gap:4px}.config-group label{font-size:12px;color:#ccc;font-weight:700}.config-group select,.config-group input{padding:6px 8px;border:1px solid #555;border-radius:4px;background-color:#ffffffe6;color:#333;font-size:14px}.config-group select:focus,.config-group input:focus{outline:none;border-color:#4caf50;box-shadow:0 0 0 2px #4caf5033}.create-template-button{margin-top:10px;width:100%;padding:10px;background-color:#2196f3;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:700;transition:background-color .2s}.create-template-button:hover{background-color:#1976d2}.markdown-section{margin-bottom:20px}.markdown-upload-button{width:100%;padding:10px;background-color:#ff9800cc;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;transition:background-color .2s}.markdown-upload-button:hover:not(:disabled){background-color:#ff9800}.markdown-upload-button:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 768px) or (pointer: coarse){canvas{width:100vw!important;height:100vh!important;position:fixed!important;top:0!important;left:0!important}.ui-overlay{right:10px;padding:15px;gap:15px}.ui-overlay button{min-height:44px;min-width:44px;padding:12px 16px;font-size:16px}.menu-button{width:50px;height:50px;font-size:20px}.menu-button-container{top:15px;left:15px}.ui-overlay label{font-size:14px;font-weight:600}.ui-overlay input,.ui-overlay select{min-height:40px;font-size:16px;padding:8px 12px}.color-picker-container{transform:scale(1.2);transform-origin:center}.ui-overlay,.menu-container{font-size:14px;line-height:1.4}@media (max-width: 480px){.ui-overlay{right:5px;padding:10px}.menu-button-container{top:10px;left:10px}}}@media (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2){canvas{image-rendering:optimizeSpeed;image-rendering:-webkit-optimize-contrast}}*{touch-action:manipulation}body{-webkit-overflow-scrolling:touch;overflow:hidden}.record-button-container{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:1000}.record-button{display:flex;align-items:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,#ff4757,#ff3742);color:#fff;border:none;border-radius:25px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #ff47574d;min-width:120px;justify-content:center}.record-button:hover{background:linear-gradient(135deg,#ff3742,#ff2f3a);transform:translateY(-2px);box-shadow:0 6px 20px #ff475766}.record-button:active{transform:translateY(0);box-shadow:0 2px 10px #ff47574d}.record-button.recording{background:linear-gradient(135deg,#ff6b7a,#ff4757);animation:pulse 1.5s infinite}.record-button.recording:hover{background:linear-gradient(135deg,#ff5722,#ff4757)}.record-icon{font-size:16px;line-height:1}.record-icon.recording{animation:blink 1s infinite}.record-text{font-size:14px;line-height:1}@keyframes pulse{0%{box-shadow:0 4px 15px #ff47574d}50%{box-shadow:0 4px 15px #ff475799}to{box-shadow:0 4px 15px #ff47574d}}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:.5}}@media (max-width: 768px){.record-button{padding:10px 16px;font-size:12px;min-width:100px}.record-icon{font-size:14px}.record-text{font-size:12px}}.content-editable-placeholder:empty:before{content:attr(data-placeholder);color:#999;font-style:italic;pointer-events:none}.content-editable-placeholder:focus:empty:before{color:#ccc}