.landing{display:flex;align-items:center;justify-content:center;min-height:100vh}.landing-content{text-align:center;padding:2rem}.landing-title{font-size:4rem;font-weight:700;margin-bottom:1rem;background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.landing-subtitle{font-size:1.25rem;color:var(--text-secondary);margin-bottom:3rem}.create-room-btn{background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);color:#fff;border:none;padding:1rem 2.5rem;font-size:1.1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:transform .2s,box-shadow .2s}.create-room-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px var(--shadow-color)}.create-room-btn:active{transform:translateY(0)}.landing-divider{display:flex;align-items:center;margin:2rem 0;color:var(--text-muted);font-size:.9rem}.landing-divider:before,.landing-divider:after{content:"";flex:1;height:1px;background:var(--border-color)}.landing-divider span{padding:0 1rem}.join-form{display:flex;gap:.75rem;justify-content:center}.join-input{padding:.75rem 1rem;font-size:1rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-surface);color:var(--text-primary);width:200px;text-align:center;letter-spacing:.1em}.join-input:focus{outline:none;border-color:var(--accent-primary)}.join-input::placeholder{letter-spacing:normal;color:var(--text-muted)}.join-btn{padding:.75rem 1.5rem;font-size:1rem;font-weight:500;border:1px solid var(--accent-primary);border-radius:8px;background:transparent;color:var(--accent-primary);cursor:pointer;transition:background .2s,color .2s}.join-btn:hover{background:var(--accent-primary);color:#000}.join-error{color:var(--accent-danger);font-size:.85rem;margin-top:.75rem}.toolbar{position:fixed;top:16px;left:50%;transform:translate(-50%);height:48px;background:var(--bg-toolbar);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:12px;z-index:1000;box-shadow:0 4px 20px var(--shadow-color);transition:background .3s,border-color .3s}.toolbar-content{display:flex;align-items:center;gap:1.5rem;height:100%;padding:0 1.25rem}.toolbar-brand{font-weight:600;font-size:1rem;background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.toolbar-divider{width:1px;height:24px;background:var(--border-color)}.toolbar-room{display:flex;align-items:center;gap:.5rem;position:relative}.room-label{color:var(--text-muted);font-size:.85rem}.room-id{background:#4fc3f726;color:var(--accent-primary);padding:.25rem .6rem;border-radius:4px;font-size:.85rem;letter-spacing:.05em;cursor:pointer;transition:background .2s}.room-id:hover{background:#4fc3f740}.copied-toast{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:.75rem;background:var(--accent-primary);color:#000;padding:.25rem .5rem;border-radius:4px;font-size:.7rem;font-weight:600;white-space:nowrap}.leave-btn{background:transparent;color:var(--accent-danger);border:1px solid rgba(255,82,82,.5);padding:.35rem .85rem;font-size:.8rem;font-weight:500;border-radius:6px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}.leave-btn:hover{background:var(--accent-danger);color:#fff;border-color:var(--accent-danger)}.theme-toggle{background:transparent;border:none;font-size:1.25rem;cursor:pointer;padding:.25rem;line-height:1;transition:transform .2s}.theme-toggle:hover{transform:scale(1.15)}.toolbar-presence{display:flex;align-items:center;gap:.5rem}.connection-status{width:8px;height:8px;border-radius:50%;background:var(--accent-danger);transition:background .3s}.connection-status.connected{background:#4caf50}.connection-status.disconnected{background:var(--accent-danger);animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.user-count{font-size:.8rem;color:var(--text-secondary)}.leave-dropdown{position:relative}.leave-btn-dropdown{display:flex;align-items:center;gap:.35rem}.leave-menu{position:absolute;top:100%;right:0;margin-top:.5rem;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 20px var(--shadow-color);overflow:hidden;min-width:200px;z-index:1001}.leave-menu-item{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:.75rem 1rem;background:transparent;border:none;cursor:pointer;text-align:left;transition:background .2s}.leave-menu-item:hover{background:#ffffff0d}.leave-menu-item:not(:last-child){border-bottom:1px solid var(--border-color)}.menu-item-title{font-size:.85rem;font-weight:500;color:var(--text-primary)}.menu-item-desc{font-size:.7rem;color:var(--text-muted);margin-top:.2rem}.leave-menu-item-danger .menu-item-title{color:var(--accent-danger)}.leave-menu-item-danger:hover{background:#ff52521a}.toolbar-expiry{display:flex;align-items:center;gap:.5rem}.expiry-label{color:var(--text-muted);font-size:.8rem}.expiry-time{background:#ff980033;color:#ffb74d;padding:.2rem .5rem;border-radius:4px;font-size:.8rem;font-weight:600;font-family:monospace}.canvas-object{position:absolute;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px;cursor:move;-webkit-user-select:none;user-select:none;transition:box-shadow .2s,border-color .2s,background .3s}.canvas-object:hover{border-color:var(--accent-primary);box-shadow:0 4px 20px var(--shadow-color)}.canvas-object.dragging{box-shadow:0 8px 30px var(--shadow-color);border-color:var(--accent-primary);z-index:1000;opacity:.95}.canvas-object.dragging .object-toolbar{opacity:0!important;pointer-events:none}.canvas-object.resizing{z-index:1000}.canvas-object.editing,.canvas-object.editing-title{cursor:text}.object-titlebar{display:flex;align-items:center;padding:.4rem .6rem;background:#0009;border-bottom:1px solid var(--border-color);border-radius:8px 8px 0 0;min-height:28px}[data-theme=light] .object-titlebar{background:#ffffffd9}.title-text{font-size:.75rem;font-weight:500;color:var(--text-secondary);cursor:move;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.1rem 0}.title-text:hover{color:var(--text-primary)}.title-input{flex:1;background:transparent;border:none;outline:none;font-size:.75rem;font-weight:500;color:var(--text-primary);font-family:inherit;padding:.1rem 0;width:100%}.title-input::placeholder{color:var(--text-muted)}.resize-handle{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:se-resize;opacity:0;transition:opacity .2s}.resize-handle:before{content:"";position:absolute;bottom:4px;right:4px;width:8px;height:8px;border-right:2px solid rgba(139,233,253,.6);border-bottom:2px solid rgba(139,233,253,.6)}[data-theme=light] .resize-handle:before{border-color:#0000004d}.canvas-object:hover .resize-handle,.canvas-object.resizing .resize-handle{opacity:1}.object-toolbar{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;z-index:10}.canvas-object:hover .object-toolbar{opacity:1;transform:translateY(0)}.toolbar-btn{width:28px;height:28px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .2s;box-shadow:0 2px 8px var(--shadow-color)}.toolbar-btn:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--accent-primary);transform:scale(1.1)}.toolbar-btn-danger:hover{background:var(--accent-danger);color:#fff;border-color:var(--accent-danger)}[data-theme=light] .toolbar-btn{box-shadow:0 2px 8px #0000001a}.object-image{display:flex;flex-direction:column;overflow:hidden;border-radius:8px;cursor:zoom-in}.object-image img{width:100%;height:auto;max-height:300px;object-fit:cover;border-radius:0 0 8px 8px;transition:opacity .2s}.object-image:hover img{opacity:.9}.object-label{padding:.5rem;font-size:.75rem;color:var(--text-muted);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background:var(--bg-tertiary);border-radius:0 0 8px 8px}.object-file{display:flex;align-items:center;gap:.75rem;padding:1rem}.file-icon{font-size:2rem}.file-info{flex:1;min-width:0}.file-name{font-size:.85rem;color:var(--text-primary);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.file-size{font-size:.7rem;color:var(--text-muted);margin-top:.25rem}.object-note{padding:.75rem;min-height:80px}.note-content{color:var(--text-primary);font-size:.9rem;line-height:1.4;white-space:pre-wrap;word-break:break-word}.note-placeholder{color:var(--text-muted);font-size:.85rem;font-style:italic;opacity:.7}.object-note textarea{width:100%;height:100%;min-height:60px;background:transparent;border:none;color:var(--text-primary);font-size:.9rem;font-family:inherit;line-height:1.4;resize:none;outline:none}.canvas-object.note{background:#3d3a2e;border-color:#ffeb3b80}[data-theme=light] .canvas-object.note{background:#fffde7;border-color:#f9a82580}.canvas-object.note:hover{border-color:var(--accent-warning)}.canvas-object.image{padding:0;background:transparent}.canvas-object.file{background:#2a3540;border-color:#4fc3f766}[data-theme=light] .canvas-object.file{background:#e3f2fd;border-color:#0288d166}.canvas-object.file:hover{border-color:var(--accent-primary)}.canvas-object.code{background:#1e1e2e;border-color:#8be9fd33;padding:0;overflow:hidden}[data-theme=light] .canvas-object.code{background:#f8f8f8;border-color:#00000026}.canvas-object.code:hover{border-color:#8be9fd80}[data-theme=light] .canvas-object.code:hover{border-color:#0000004d}.object-code{display:flex;flex-direction:column;height:100%;overflow:hidden}.code-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:#0003;border-bottom:1px solid rgba(255,255,255,.1)}[data-theme=light] .code-header{background:#0000000d;border-bottom:1px solid rgba(0,0,0,.1)}.code-language{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#8be9fd}[data-theme=light] .code-language{color:#0288d1}.code-content{flex:1;overflow:auto;padding:.75rem}.code-content pre{margin:0;font-family:Fira Code,Consolas,Monaco,monospace;font-size:.8rem;line-height:1.5;white-space:pre;width:max-content;min-width:100%}.code-content code{font-family:inherit;background:transparent!important;display:block}.code-content textarea{width:100%;height:100%;min-height:100px;background:transparent;border:none;color:#f8f8f2;font-family:Fira Code,Consolas,Monaco,monospace;font-size:.8rem;line-height:1.5;resize:none;outline:none;white-space:pre;overflow-wrap:normal;overflow:hidden}.canvas-object.editing .code-content{overflow:hidden}.canvas-object.editing .code-content textarea{overflow:auto}[data-theme=light] .code-content textarea{color:#1a1a2e}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#6272a4}.token.punctuation{color:#f8f8f2}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#ff79c6}.token.boolean,.token.number{color:#bd93f9}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#50fa7b}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.class-name{color:#f1fa8c}.token.keyword{color:#ff79c6}.token.regex,.token.important{color:#ffb86c}[data-theme=light] .token.comment,[data-theme=light] .token.prolog,[data-theme=light] .token.doctype,[data-theme=light] .token.cdata{color:#6a737d}[data-theme=light] .token.punctuation{color:#24292e}[data-theme=light] .token.property,[data-theme=light] .token.tag,[data-theme=light] .token.constant,[data-theme=light] .token.symbol,[data-theme=light] .token.deleted{color:#d73a49}[data-theme=light] .token.boolean,[data-theme=light] .token.number{color:#005cc5}[data-theme=light] .token.selector,[data-theme=light] .token.attr-name,[data-theme=light] .token.string,[data-theme=light] .token.char,[data-theme=light] .token.builtin,[data-theme=light] .token.inserted{color:#22863a}[data-theme=light] .token.operator,[data-theme=light] .token.entity,[data-theme=light] .token.url,[data-theme=light] .language-css .token.string,[data-theme=light] .style .token.string,[data-theme=light] .token.variable{color:#24292e}[data-theme=light] .token.atrule,[data-theme=light] .token.attr-value,[data-theme=light] .token.function,[data-theme=light] .token.class-name{color:#6f42c1}[data-theme=light] .token.keyword{color:#d73a49}[data-theme=light] .token.regex,[data-theme=light] .token.important{color:#e36209}.lightbox-overlay{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:2000;padding:2rem;cursor:zoom-out}.lightbox-close{position:absolute;top:1rem;right:1rem;width:40px;height:40px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}.lightbox-close:hover{background:#fff3;transform:scale(1.1)}.lightbox-content{display:flex;flex-direction:column;align-items:center;max-width:90vw;max-height:90vh;cursor:default}.lightbox-content img{max-width:100%;max-height:calc(90vh - 3rem);object-fit:contain;border-radius:4px;box-shadow:0 10px 50px #00000080}.lightbox-caption{margin-top:1rem;color:#ffffffb3;font-size:.9rem;text-align:center}.canvas-container{position:fixed;inset:0;overflow:hidden;background:var(--bg-primary);cursor:grab;transition:background .3s}.canvas-container.panning{cursor:grabbing}.canvas-grid{position:absolute;inset:0;background-image:linear-gradient(to right,var(--grid-color) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-color) 1px,transparent 1px);pointer-events:none}.canvas-content{position:absolute;top:0;left:0;transform-origin:0 0}.drop-overlay{position:absolute;inset:0;background:#4fc3f71a;border:3px dashed var(--accent-primary);display:flex;align-items:center;justify-content:center;pointer-events:none}.drop-message{background:var(--bg-toolbar);color:var(--accent-primary);padding:1.5rem 3rem;border-radius:12px;font-size:1.25rem;font-weight:600}.canvas-container.drag-over{cursor:copy}.view-controls{position:fixed;bottom:20px;right:20px;display:flex;align-items:center;gap:.5rem;background:var(--bg-toolbar);padding:.4rem .6rem;border-radius:8px;border:1px solid var(--border-color);transition:background .3s,border-color .3s}.view-btn{background:transparent;color:var(--text-secondary);border:1px solid var(--border-color);padding:.3rem .6rem;font-size:.75rem;font-weight:500;border-radius:4px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}.view-btn:hover:not(:disabled){background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.view-btn:disabled{opacity:.4;cursor:not-allowed}.zoom-indicator{color:var(--text-muted);font-size:.8rem;font-family:monospace;min-width:3.5rem;text-align:center}.canvas-hint{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--bg-toolbar);color:var(--text-muted);padding:.5rem 1rem;border-radius:6px;font-size:.75rem;border:1px solid var(--border-color);white-space:nowrap;transition:background .3s,border-color .3s}.room-closed-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:2000}.room-closed-modal{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:12px;padding:2rem;text-align:center;max-width:400px;box-shadow:0 8px 32px #0006}.room-closed-modal h2{margin:0 0 1rem;color:var(--text-primary);font-size:1.5rem}.room-closed-modal p{margin:0 0 1.5rem;color:var(--text-secondary);font-size:1rem}.room-closed-btn{background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);color:#000;border:none;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:transform .2s,box-shadow .2s}.room-closed-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px var(--shadow-color)}.app{min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0a12;--bg-secondary: #1a1a2e;--bg-tertiary: #16213e;--bg-surface: rgba(30, 30, 45, .95);--bg-toolbar: rgba(20, 20, 35, .95);--text-primary: #ffffff;--text-secondary: #aaaaaa;--text-muted: #666666;--accent-primary: #4fc3f7;--accent-secondary: #7c4dff;--accent-danger: #ff5252;--accent-warning: #ffeb3b;--border-color: rgba(255, 255, 255, .1);--border-color-hover: rgba(255, 255, 255, .2);--grid-color: rgba(255, 255, 255, .03);--shadow-color: rgba(0, 0, 0, .3);--landing-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)}[data-theme=light]{--bg-primary: #f5f5f7;--bg-secondary: #ffffff;--bg-tertiary: #e8e8ed;--bg-surface: rgba(255, 255, 255, .95);--bg-toolbar: rgba(255, 255, 255, .95);--text-primary: #1a1a2e;--text-secondary: #555555;--text-muted: #888888;--accent-primary: #0288d1;--accent-secondary: #5e35b1;--accent-danger: #d32f2f;--accent-warning: #f9a825;--border-color: rgba(0, 0, 0, .1);--border-color-hover: rgba(0, 0, 0, .2);--grid-color: rgba(0, 0, 0, .05);--shadow-color: rgba(0, 0, 0, .1);--landing-gradient: linear-gradient(135deg, #e8e8ed 0%, #f5f5f7 100%)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--landing-gradient);min-height:100vh;color:var(--text-primary);transition:background .3s,color .3s}#root{min-height:100vh}