:root{--note-bg-color:#ffffffe6;--note-bg-gradient:linear-gradient(135deg,#fff,#f5f5f5);--note-shadow:0 6px 20px #00000014;--note-shadow-active:0 10px 30px #00000026;--body-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--btn-gradient:linear-gradient(135deg,#89f7fe,#66a6ff)}.quotes-wall-container{-webkit-user-select:none;user-select:none;will-change:transform;backface-visibility:hidden;contain:layout style paint;background-color:#fff;background-image:radial-gradient(#d0d0d0 1px,#0000 1px);background-size:20px 20px;width:100%;height:calc(100vh - 64px);position:relative;overflow:hidden}#notes-container{cursor:grab;will-change:transform;touch-action:none;contain:layout style paint;backface-visibility:hidden;pointer-events:auto;width:100%;height:calc(100vh - 64px);padding:20px;transition:transform .1s ease-out;position:relative;overflow:visible;transform:translateZ(0)}#notes-container.panning{cursor:grabbing}.note{background:var(--note-bg-gradient);width:300px;min-height:200px;box-shadow:var(--note-shadow);cursor:grab;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);touch-action:none;will-change:transform;contain:layout style paint;backface-visibility:hidden;pointer-events:auto;border:1px solid #ffffff80;border-radius:12px;padding:20px;transition:all .3s,transform .1s;position:absolute;overflow:hidden;transform:translateZ(0)}.note:hover{box-shadow:var(--note-shadow-active);z-index:100;transform:scale(1.02)rotate(0)!important}.note:active{cursor:grabbing;box-shadow:var(--note-shadow-active);z-index:1000;transition:transform .2s,box-shadow .2s;transform:scale(1.05)!important}.note.dragging{opacity:.8;z-index:1000;will-change:transform;pointer-events:auto;cursor:grabbing;-webkit-user-select:none;user-select:none;transition:none;transform:rotate(5deg)scale(1.05)translateZ(0);box-shadow:8px 8px 20px #00000040}.note.snapped{border:1px solid #64c8ff4d;box-shadow:0 0 15px #64c8ff80}.note.collision{border:1px solid #ff64644d;box-shadow:0 0 15px #ff646480}.note-content{color:#333;white-space:pre-wrap;word-wrap:break-word;text-overflow:ellipsis;-webkit-line-clamp:10;pointer-events:none;-webkit-user-select:text;user-select:text;-webkit-box-orient:vertical;flex:1;margin:0;font-size:14px;line-height:1.4;display:-webkit-box;overflow:hidden}.note-textarea{width:100%;height:100%;min-height:160px;font-family:var(--body-font);color:#333;resize:none;word-wrap:break-word;white-space:pre-wrap;-webkit-user-select:text;user-select:text;background:0 0;border:none;outline:none;padding:0;font-size:1rem;line-height:1.6}#add-note-container{z-index:2000;width:90%;max-width:450px;position:fixed;bottom:30px;left:50%;transform:translate(-50%)}#add-note-form{background:#fff;border-radius:12px;gap:10px;padding:10px;transition:box-shadow .3s;display:flex;box-shadow:0 5px 20px #0000001a}#add-note-form:focus-within{box-shadow:0 8px 25px #00000026}#note-input{width:100%;font-size:1.08rem;font-family:var(--body-font);color:#333;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#ffffffeb url("data:image/svg+xml;utf8,<svg width='24' height='24' fill='%238ec5fc' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='10'/></svg>") 14px/22px 22px no-repeat;border:2.5px solid #e0c3fc;border-radius:14px;outline:none;padding:14px 18px 14px 44px;transition:border .3s,box-shadow .3s,transform .2s;box-shadow:0 4px 18px #a0a0ff21}#note-input:focus{border:2.5px solid #8ec5fc;transform:scale(1.04);box-shadow:0 8px 32px #66a6ff2e}#note-input::placeholder{color:#b8b8d1;opacity:.7;letter-spacing:1px;font-style:italic}#add-note-form button{background:var(--btn-gradient);color:#fff;cursor:pointer;border:none;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;transition:all .3s cubic-bezier(.68,-.55,.27,1.55);display:flex;position:relative;overflow:hidden;box-shadow:0 4px 10px #66a6ff66}#add-note-form button:hover{transform:scale(1.08)translateY(-2px);box-shadow:0 6px 15px #66a6ff80}#add-note-form button:active{animation:.4s btnRipple}@keyframes btnRipple{0%{box-shadow:0 0 #66a6ff4d}70%{box-shadow:0 0 0 12px #66a6ff1a}to{box-shadow:0 0 #66a6ff00}}#add-note-form button svg{width:24px;height:24px}.reset-view-button{color:#fff;cursor:pointer;z-index:10;background-color:#0009;border:none;border-radius:8px;padding:8px 12px;font-size:12px;transition:background-color .3s;position:absolute;bottom:20px;right:20px}.reset-view-button:hover{background-color:#000c}#loading-spinner{z-index:3000;justify-content:center;align-items:center;width:64px;height:64px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#loading-spinner .spinner{background:0 0;border:6px solid #e0c3fc;border-top-color:#8ec5fc;border-radius:50%;width:64px;height:64px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width:768px){.note{width:250px;min-height:150px}#add-note-container{width:95%;bottom:20px}#notes-container{padding:10px}}