html{overflow:hidden;margin:0;padding:0;width:100%;height:100%}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0;min-width:320px;min-height:100vh;overflow:hidden}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.figma-clone{display:flex;flex-direction:column;position:fixed;inset:0;overflow:hidden;background-color:#1e1e1e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:#e0e0e0}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background-color:#2d2d2d;border-bottom:1px solid #3d3d3d;flex-shrink:0;z-index:100;height:48px;box-shadow:0 2px 4px #0003}.toolbar-left{display:flex;align-items:center;gap:16px;flex:1}.toolbar-right{display:flex;align-items:center;gap:12px}.shape-tools{display:flex;gap:4px;align-items:center;background-color:#3d3d3d;padding:4px;border-radius:8px}.separator{width:1px;height:24px;background-color:#555;margin:0 4px}.tool-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:none;background-color:transparent;color:#b0b0b0;cursor:pointer;border-radius:6px;transition:all .15s ease}.tool-button:hover:not(:disabled){background-color:#4d4d4d;color:#e0e0e0}.tool-button.active{background-color:#0d7df2;color:#fff}.tool-button:disabled{cursor:not-allowed;opacity:.3}.hint-message{font-size:13px;color:#909090;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ai-toggle-button{display:flex;align-items:center;gap:6px;padding:8px 12px;border:none;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;cursor:pointer;border-radius:6px;font-size:13px;font-weight:500;transition:all .15s ease;box-shadow:0 2px 4px #667eea4d}.ai-toggle-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px #667eea66}.ai-toggle-button:disabled{opacity:.4;cursor:not-allowed;background:linear-gradient(135deg,#555,#666);box-shadow:none}.online-users-section{display:flex;align-items:center;gap:6px;padding:6px 12px;background-color:#3d3d3d;border-radius:6px;font-size:13px;color:#b0b0b0;position:relative;cursor:pointer;transition:background-color .15s ease}.online-users-section:hover{background-color:#4d4d4d}.online-count{font-weight:600;color:#4ade80}.online-users-widget{position:absolute;top:calc(100% + 8px);right:0;width:250px;background-color:#2d2d2d;border-radius:8px;box-shadow:0 4px 16px #0000004d;z-index:110;padding:16px;border:1px solid #3d3d3d;color:#e0e0e0;text-align:left}.online-users-widget h3{margin:0 0 12px;font-size:14px;font-weight:600;border-bottom:1px solid #3d3d3d;padding-bottom:8px}.online-users-widget ul{list-style:none;padding:0;margin:0;max-height:200px;overflow-y:auto}.online-users-widget li{display:flex;justify-content:space-between;padding:6px 0;font-size:13px}.online-users-widget li span{color:#909090}.user-menu{display:flex;align-items:center;gap:8px}.username{font-size:13px;color:#e0e0e0;font-weight:500}.auth-button{padding:6px 12px;border:1px solid #4d4d4d;background-color:#3d3d3d;color:#e0e0e0;cursor:pointer;border-radius:6px;font-size:12px;transition:all .15s ease}.auth-button:hover{background-color:#4d4d4d;border-color:#5d5d5d}.canvas-container{flex:1;position:relative;overflow:hidden;cursor:grab;background-color:#2a2a2a;background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);background-size:var(--grid-size, 50px) var(--grid-size, 50px);background-position:var(--pan-x, 0px) var(--pan-y, 0px);min-height:0;touch-action:none;-webkit-user-select:none;user-select:none}.canvas-container:active{cursor:grabbing}.map-container{position:absolute;top:0;left:0;width:100%;height:100%}.canvas-container.shape-creation-mode{cursor:crosshair}.canvas-container.touching{cursor:grabbing}.canvas-content{width:100%;height:100%;position:relative}.shape{position:absolute;background-color:#0d7df24d;border:2px solid #0d7df2;box-sizing:border-box;transition:all .15s ease}.shape.selected{border-width:2px;border-color:#4ade80;background-color:#4ade8033;box-shadow:0 0 0 1px #4ade804d}.circle{border-radius:50%}.text{position:absolute;display:flex;align-items:center;justify-content:center;padding:8px;color:#e0e0e0;font-size:16px;-webkit-user-select:none;user-select:none;background-color:#0d7df21a;border:2px solid #0d7df2;box-sizing:border-box;transition:all .15s ease;word-wrap:break-word;overflow:hidden}.text.selected{border-color:#4ade80;background-color:#4ade801a;box-shadow:0 0 0 1px #4ade804d}.shape-tooltip{position:absolute;background-color:#1e1e1e;color:#e0e0e0;padding:6px 12px;border-radius:6px;font-size:12px;transform:translateY(-110%);z-index:20;white-space:nowrap;pointer-events:none;border:1px solid #4d4d4d;box-shadow:0 2px 8px #0000004d}.selection-box{position:absolute;border:2px solid #4ade80;box-sizing:border-box;pointer-events:none;z-index:15;border-radius:2px}.resize-handle{position:absolute;width:10px;height:10px;background-color:#4ade80;border:2px solid #1e1e1e;box-sizing:border-box;pointer-events:all;z-index:16;border-radius:2px;transition:all .15s ease}.resize-handle:hover{background-color:#22c55e;transform:scale(1.2)}.resize-handle.n{top:-5px;left:50%;transform:translate(-50%);cursor:ns-resize}.resize-handle.s{bottom:-5px;left:50%;transform:translate(-50%);cursor:ns-resize}.resize-handle.e{right:-5px;top:50%;transform:translateY(-50%);cursor:ew-resize}.resize-handle.w{left:-5px;top:50%;transform:translateY(-50%);cursor:ew-resize}.resize-handle.ne{top:-5px;right:-5px;cursor:nesw-resize}.resize-handle.nw{top:-5px;left:-5px;cursor:nwse-resize}.resize-handle.se{bottom:-5px;right:-5px;cursor:nwse-resize}.resize-handle.sw{bottom:-5px;left:-5px;cursor:nesw-resize}.resize-handle.n:hover,.resize-handle.s:hover{transform:translate(-50%) scale(1.2)}.resize-handle.e:hover,.resize-handle.w:hover{transform:translateY(-50%) scale(1.2)}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.auth-modal{background-color:#2d2d2d;border-radius:12px;padding:32px;width:90%;max-width:400px;box-shadow:0 20px 60px #00000080}.auth-modal h2{margin:0 0 24px;color:#e0e0e0;font-size:24px;font-weight:600}.auth-modal input{width:100%;padding:12px 16px;margin-bottom:16px;border:1px solid #4d4d4d;background-color:#1e1e1e;color:#e0e0e0;border-radius:8px;font-size:14px;box-sizing:border-box;transition:all .15s ease}.auth-modal input:focus{outline:none;border-color:#0d7df2;box-shadow:0 0 0 3px #0d7df21a}.modal-actions{display:flex;gap:12px;margin-top:24px}.modal-actions button{flex:1;padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease}.modal-actions button.primary{background-color:#0d7df2;color:#fff}.modal-actions button.primary:hover{background-color:#0b6bd6;transform:translateY(-1px);box-shadow:0 4px 12px #0d7df24d}.modal-actions button.secondary{background-color:#3d3d3d;color:#e0e0e0}.modal-actions button.secondary:hover{background-color:#4d4d4d}.error-message{margin-top:16px;color:#ff6b6b;font-size:13px;line-height:1.4}.ai-widget-panel{position:absolute;top:64px;right:16px;width:400px;max-height:calc(100vh - 80px);background-color:#2d2d2d;border-radius:12px;box-shadow:0 8px 32px #0006;z-index:90;display:flex;flex-direction:column;overflow:hidden}.ai-widget-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #3d3d3d;background:linear-gradient(135deg,#667eea1a,#764ba21a)}.ai-widget-header h3{margin:0;font-size:16px;font-weight:600;color:#e0e0e0}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;background-color:transparent;color:#b0b0b0;cursor:pointer;border-radius:6px;transition:all .15s ease}.close-button:hover{background-color:#3d3d3d;color:#e0e0e0}.ai-widget-content{padding:16px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;max-height:calc(100vh - 160px)}.ai-form{display:flex;flex-direction:column;gap:12px}.ai-form textarea{width:100%;padding:12px;border:1px solid #4d4d4d;background-color:#1e1e1e;color:#e0e0e0;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;box-sizing:border-box;transition:all .15s ease}.ai-form textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.ai-form-actions{display:flex;gap:8px;align-items:center}.ai-form select{flex:1;padding:10px 12px;border:1px solid #4d4d4d;background-color:#1e1e1e;color:#e0e0e0;border-radius:6px;font-size:13px;cursor:pointer;transition:all .15s ease}.ai-form select:focus{outline:none;border-color:#667eea}.send-button{padding:10px 20px;border:none;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;white-space:nowrap}.send-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.send-button:disabled{opacity:.6;cursor:not-allowed}.ai-response{padding:12px;background-color:#667eea1a;border-left:3px solid #667eea;border-radius:6px;font-size:13px;line-height:1.5;color:#e0e0e0}.ai-response strong{color:#667eea}.map-widget-panel{position:absolute;top:64px;right:16px;width:300px;background-color:#2d2d2d;border-radius:12px;box-shadow:0 8px 32px #0006;z-index:90;display:flex;flex-direction:column;overflow:hidden}.map-widget-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #3d3d3d}.map-widget-header h3{margin:0;font-size:16px;font-weight:600;color:#e0e0e0}.map-widget-content{padding:16px;display:flex;flex-direction:column;gap:16px}.map-toggle{display:flex;justify-content:space-between;align-items:center;font-size:14px}.switch{position:relative;display:inline-block;width:44px;height:24px;background-color:#4d4d4d;border-radius:12px;border:none;cursor:pointer;transition:background-color .2s ease;padding:0}.switch.on{background-color:#0d7df2}.switch .slider{position:absolute;top:2px;left:2px;width:20px;height:20px;background-color:#fff;border-radius:50%;transition:transform .2s ease}.switch.on .slider{transform:translate(20px)}.help-widget{background-color:#2d2d2d;border-radius:12px;padding:24px 32px;width:90%;max-width:400px;box-shadow:0 20px 60px #00000080;color:#e0e0e0}.help-widget h3{margin:0 0 20px;font-size:20px;font-weight:600;text-align:center}.help-widget ul{list-style:none;padding:0;margin:0 0 24px}.help-widget li{display:flex;align-items:center;gap:16px;padding:10px 0;font-size:14px;border-bottom:1px solid #3d3d3d}.help-widget li:last-child{border-bottom:none}.help-widget li span{font-weight:600;background-color:#1e1e1e;padding:4px 8px;border-radius:6px;border:1px solid #4d4d4d;min-width:20px;text-align:center;font-family:monospace}.help-reminder{background-color:#0d7df21a;border-left:3px solid #0d7df2;padding:12px;border-radius:6px;font-size:13px;line-height:1.5;margin-bottom:24px}.help-widget button{width:100%;padding:12px;border:none;border-radius:8px;background-color:#3d3d3d;color:#e0e0e0;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .15s ease}.help-widget button:hover{background-color:#4d4d4d}@media (max-width: 768px){.ai-widget-panel{width:calc(100vw - 32px);max-width:400px}.hint-message{display:none}.toolbar-left{gap:8px}.username{display:none}}.coords-widget{position:absolute;bottom:16px;right:16px;background-color:#2d2d2de6;border-radius:8px;padding:12px;z-index:90;font-size:12px;color:#b0b0b0;border:1px solid #3d3d3d;box-shadow:0 4px 16px #0000004d;pointer-events:none;display:flex;flex-direction:column;gap:10px;min-width:180px}.coords-section{display:flex;flex-direction:column;gap:4px}.coords-section strong{color:#e0e0e0;font-weight:600;padding-bottom:4px;border-bottom:1px solid #3d3d3d;margin-bottom:2px}.coords-section span{font-family:monospace}