@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Kalam:wght@400;700&display=swap";:root{--bg-primary:#131313;--bg-secondary:#16213e;--bg-surface:#0f3460;--bg-surface-hover:#1a4a7a;--text-primary:#e8e8e8;--text-secondary:#a0a0b0;--accent:#413f6a;--accent-hover:#55538a;--border:#ffffff14;--shadow:0 8px 32px #0006;--glass:#0f346099;--glass-border:#ffffff1a;--radius:12px;--radius-sm:8px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg-primary);width:100%;height:100%;color:var(--text-primary);font-family:Inter,sans-serif;overflow:hidden}.app{flex-direction:column;width:100%;height:100%;display:flex;position:relative}.canvas-container{cursor:crosshair;flex:1;position:relative}.canvas-container canvas{will-change:contents;contain:strict;width:100%;height:100%;display:block}.text-editor-input{z-index:50;background:0 0;border:none;outline:none;min-width:1px;margin:0;padding:0;font-family:Kalam,cursive;line-height:1}.toolbar{border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:100;background:#222328;align-items:center;gap:6px;padding:8px 12px;display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%)}.toolbar-divider{background:var(--border);width:1px;height:24px;margin:0 4px}.tool-btn-indicator{border-radius:var(--radius-sm);background:var(--accent);z-index:0;pointer-events:none;height:36px;transition:transform .22s cubic-bezier(.34,1.3,.64,1),width .22s cubic-bezier(.34,1.3,.64,1);position:absolute;top:8px;left:0}.tool-btn{z-index:1;border-radius:var(--radius-sm);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;font-size:16px;transition:background-color .15s,color .15s,transform .1s;display:flex;position:relative}.tool-btn:hover{color:var(--text-primary);background:#ffffff14}.tool-btn:active{transform:scale(.88)}.tool-btn.active{color:#fff;background:0 0}.tool-btn.active:hover{background:0 0}.sidebar{border:1px solid var(--glass-border);border-radius:var(--radius);width:200px;box-shadow:var(--shadow);z-index:100;background:#222328;flex-direction:column;gap:12px;padding:16px;display:flex;position:absolute;top:16px;left:16px}.sidebar-section{flex-direction:column;gap:8px;display:flex}.sidebar-label{color:var(--text-secondary);font-size:12px;font-weight:500}.sidebar-swatches{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.sidebar-divider{background:var(--border);height:1px}.sidebar-stroke-widths{gap:8px;display:flex;position:relative}.stroke-width-indicator{border-radius:var(--radius-sm);background:var(--accent);z-index:0;pointer-events:none;height:32px;transition:transform .22s cubic-bezier(.34,1.3,.64,1),width .22s cubic-bezier(.34,1.3,.64,1);position:absolute;top:0;left:0}.stroke-width-btn{z-index:1;border-radius:var(--radius-sm);background:var(--bg-surface);cursor:pointer;border:none;justify-content:center;align-items:center;width:36px;height:32px;transition:background-color .15s,transform .1s;display:flex;position:relative}.stroke-width-btn:hover{background:var(--bg-surface-hover)}.stroke-width-btn:active{transform:scale(.9)}.stroke-width-btn.active,.stroke-width-btn.active:hover{background:0 0}.stroke-width-line{background:var(--text-primary);border-radius:2px;width:20px}.export-btn{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;white-space:nowrap;background:0 0;justify-content:center;align-items:center;gap:6px;padding:8px 14px;font-family:Inter,sans-serif;font-size:13px;font-weight:500;transition:all .15s;display:flex}.export-btn:hover{background:var(--bg-surface-hover)}.export-btn:active{transform:scale(.96)}.color-btn{cursor:pointer;border:2px solid #0000;border-radius:50%;width:24px;height:24px;transition:transform .15s cubic-bezier(.34,1.3,.64,1),border-color .15s,box-shadow .15s}.color-btn:hover{transform:scale(1.2)}.color-btn:active{transform:scale(.92)}.color-btn.active{border-color:#fff;transform:scale(1.1);box-shadow:0 0 8px #ffffff4d}.share-btn{border-radius:var(--radius-sm);background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;justify-content:center;align-items:center;gap:6px;padding:8px 14px;font-family:Inter,sans-serif;font-size:13px;font-weight:500;transition:all .15s;display:flex}.share-btn:hover{background:var(--accent-hover);box-shadow:0 0 16px #e9456066}.share-btn:active{transform:scale(.96)}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0009;justify-content:center;align-items:center;width:100%;height:100%;animation:.2s fadeIn;display:flex;position:fixed;top:0;left:0}.modal{background:var(--bg-secondary);border:1px solid var(--glass-border);border-radius:var(--radius);min-width:400px;box-shadow:var(--shadow);padding:28px;animation:.2s scaleIn}.modal h2{margin-bottom:16px;font-size:18px;font-weight:600}.modal-link{align-items:center;gap:8px;display:flex}.modal-link input{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);outline:none;flex:1;padding:10px 14px;font-family:Inter,monospace;font-size:13px}.modal-link input:focus{border-color:var(--accent)}.copy-btn{border-radius:var(--radius-sm);background:var(--accent);color:#fff;cursor:pointer;border:none;padding:10px 16px;font-family:Inter,sans-serif;font-size:13px;font-weight:500;transition:all .15s}.copy-btn:hover{background:var(--accent-hover)}.modal-close{text-align:right;margin-top:16px}.modal-close button{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;background:0 0;padding:6px 14px;font-family:Inter,sans-serif;font-size:13px;transition:all .15s}.modal-close button:hover{background:var(--bg-surface);color:var(--text-primary)}.back-to-content-btn{background:var(--glass);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-sm);box-shadow:var(--shadow);color:var(--text-primary);cursor:pointer;z-index:100;align-items:center;gap:6px;padding:8px 14px;font-family:Inter,sans-serif;font-size:13px;font-weight:500;transition:all .15s;display:flex;position:absolute;bottom:16px;right:16px}.back-to-content-btn:hover{background:var(--bg-surface-hover)}.zoom-controls{background:var(--glass);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-sm);box-shadow:var(--shadow);z-index:100;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;bottom:16px;left:16px}.zoom-btn{width:28px;height:28px;color:var(--text-primary);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;font-size:16px;line-height:1;transition:background-color .15s,transform .1s;display:flex}.zoom-btn:hover{background:var(--bg-surface-hover)}.zoom-btn:active{transform:scale(.88)}.zoom-percent{min-width:44px;color:var(--text-primary);text-align:center;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px 4px;font-family:Inter,sans-serif;font-size:13px;font-weight:500;transition:background-color .15s,transform .1s}.zoom-percent:hover{background:var(--bg-surface-hover)}.zoom-percent:active{transform:scale(.94)}.room-badge{background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text-secondary);z-index:100;align-items:center;gap:10px;padding:6px 8px 6px 14px;font-size:12px;display:flex;position:absolute;bottom:64px;left:16px}.room-badge .dot{background:#2ecc71;border-radius:50%;width:8px;height:8px;margin-right:6px;animation:2s infinite pulse;display:inline-block}.leave-btn{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;background:0 0;padding:4px 10px;font-family:Inter,sans-serif;font-size:12px;font-weight:500;transition:all .15s}.leave-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}