@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@400&display=swap");@import url("https://fonts.googleapis.com/icon?family=Material+Icons");:root{--background-color:#f0f2f5;--note-yellow:#fffeca;--note-shadow:rgba(0,0,0,.1);--ui-accent:#2c2c2c;--ui-background:#fff;--minimap-bg:hsla(0,0%,100%,.8);--minimap-border:#e0e0e0;--minimap-viewport:rgba(44,44,44,.2);--connector-color:#5a67d8}body{font-family:Kalam,cursive;background-color:var(--background-color);margin:0;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}#canvas{transform-origin:0 0}#canvas,#connector-layer,#note-layer{position:absolute;width:100%;height:100%}#connector-layer{pointer-events:none;overflow:visible}.connector-line{stroke:var(--connector-color);stroke-width:2;stroke-linecap:round}.note{position:absolute;min-width:220px;min-height:220px;background-color:var(--note-yellow);box-shadow:0 4px 12px var(--note-shadow);cursor:default;transition:transform .1s ease-out,box-shadow .1s ease-out,opacity .3s,border-color .2s,background-color .3s,max-height .3s ease-out;display:flex;flex-direction:column;border-radius:4px;user-select:none;border:2px solid transparent}.note.selected-for-connection{border-color:var(--connector-color);box-shadow:0 0 0 4px rgba(90,103,216,.3)}.note.dimmed{opacity:.2;transform:scale(.95)}.note.highlighted{opacity:1;transform:scale(1.05)}.note:hover{transform:scale(1.05);box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:4!important}.note .drag-handle{position:absolute;top:0;left:0;width:100%;height:30px;cursor:move}.note.dragging{transform:scale(1.1);box-shadow:0 10px 30px rgba(0,0,0,.2)}.note-content{flex-grow:1;padding:15px;padding-top:30px;font-size:18px;line-height:1.4;color:#333;user-select:text;overflow-x:hidden;word-wrap:break-word}.note-content:focus{outline:none}.note-content ul{padding-left:25px;margin:0}.note[data-collapsed=true]{max-height:50px;text-overflow:ellipsis;min-width:auto;min-height:auto}.note[data-collapsed=false]{min-width:220px;min-height:220px}.note[data-collapsed=true] .note-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:15px}.note[data-collapsed=true] .note-toolbar{display:none}.note-content::-webkit-scrollbar{width:10px}.note-content::-webkit-scrollbar-track{background:transparent;margin-top:5px;margin-bottom:5px}.note-content::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,rgba(0,0,0,.2));border-radius:5px;border:2px solid transparent;background-clip:content-box}.note-content::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-color,rgba(0,0,0,.4))}.note-toolbar{display:flex;align-items:center;padding:4px;background-color:rgba(0,0,0,.05);border-top:1px solid rgba(0,0,0,.08);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;overflow:hidden;flex-wrap:nowrap;min-height:20px}.note-content:focus~.note-toolbar,.note:hover .note-toolbar{opacity:1;visibility:visible}.toolbar-btn{font-family:Material Icons;font-size:20px;background:none;border:none;cursor:pointer;width:32px;height:32px;color:#555;border-radius:4px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background-color:rgba(0,0,0,.1)}.toolbar-btn.selected{background-color:rgba(0,0,0,.2)}.toolbar-color-picker{appearance:none;width:24px;height:24px;border:none;padding:0;background:none;cursor:pointer;border-radius:4px;margin:0 4px}.toolbar-color-picker::-webkit-color-swatch-wrapper{padding:0}.toolbar-color-picker::-webkit-color-swatch{border-radius:4px;border:1px solid rgba(0,0,0,.1)}.toolbar-color-picker:hover{transform:scale(1.1)}.delete-btn{position:absolute;top:-10px;right:-10px;width:24px;height:24px;background:var(--ui-accent);color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:sans-serif;font-weight:700;opacity:0;transition:opacity .2s;z-index:3}.note:hover .delete-btn{opacity:1}.collapse-btn{position:absolute;top:-10px;left:-10px;width:24px;height:24px;background:var(--ui-accent);color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:Material Icons;font-size:18px;opacity:0;transition:opacity .2s;z-index:3}.note:hover .collapse-btn{opacity:1}.resize-handle{position:absolute;bottom:0;right:0;width:15px;height:15px;background:rgba(0,0,0,.2);cursor:se-resize;border-bottom-right-radius:4px}.note:hover .resize-handle{background:rgba(0,0,0,.4)}#minimap{position:fixed;bottom:20px;right:20px;width:200px;height:150px;background-color:var(--minimap-bg);border:1px solid var(--minimap-border);border-radius:8px;box-shadow:0 4px 12px var(--note-shadow);z-index:6;overflow:hidden;backdrop-filter:blur(5px);cursor:pointer}#minimap-viewport{position:absolute;border:1px solid var(--ui-accent);background:var(--minimap-viewport);z-index:2}.minimap-dot{position:absolute;width:6px;height:6px;border-radius:50%;z-index:1}#context-menu{position:fixed;display:none;background:var(--ui-background);border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,.2);padding:10px;z-index:7;flex-direction:column;gap:8px}.color-picker-label{font-family:sans-serif;font-size:12px;color:#555;display:flex;align-items:center;justify-content:space-between}input[type=color]{appearance:none;width:24px;height:24px;border:none;padding:0;background:none;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border-radius:50%;border:1px solid #ccc}.color-picker-wrapper{position:relative;display:flex;align-items:center;justify-content:center}#canvas-color-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0}#top-ui{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:5}.search-container{display:flex;align-items:center;background-color:var(--ui-background);padding:8px 15px;border-radius:30px;box-shadow:0 4px 12px var(--note-shadow)}.search-container i{color:#999}#search-bar{border:none;outline:none;background:transparent;font-family:sans-serif;font-size:16px;margin-left:8px;width:250px}.ui-controls{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:5}.ui-button{width:60px;height:60px;border-radius:50%;border:none;background-color:var(--ui-background);color:var(--ui-accent);font-size:28px;box-shadow:0 4px 12px var(--note-shadow);cursor:pointer;transition:transform .1s ease;display:flex;align-items:center;justify-content:center}.ui-button:active{transform:scale(.9)}.ui-button .material-icons{font-size:24px}