.header{background:#f3edf7;box-shadow:0 1px 3px 0 rgba(0,0,0,.3),0 4px 4px 0 rgba(0,0,0,.25);position:relative;overflow:hidden}.header-main{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}.header-main button{color:#49454f}.header-main button,.header-main h1{font-size:22px;font-weight:500}.header-main img{cursor:pointer}.header-main input{width:85%;color:#9d9d9d;font-size:16px}.notes{margin-top:30px;position:relative}.notes-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.notes-nav h2{font-weight:400;font-size:22px}.notes-nav button{display:flex;align-items:center;gap:12px;padding:16px 20px 16px 16px;border-radius:16px;background:var(--m-3-read-only-light-surface-3,linear-gradient(0deg,rgba(103,80,164,.11) 0,rgba(103,80,164,.11) 100%),#fffbfe);box-shadow:0 1px 3px 0 rgba(0,0,0,.3),0 4px 8px 3px rgba(0,0,0,.15);cursor:pointer;color:#6750a4;font-size:14px;font-weight:500}@media(max-width:768px){.notes-nav button{display:none}}.notes-item{padding:16px;border-radius:16px;background:var(--m-3-read-only-light-surface-1,linear-gradient(0deg,rgba(103,80,164,.05) 0,rgba(103,80,164,.05) 100%),#fffbfe);box-shadow:0 1px 3px 1px rgba(0,0,0,.15),0 1px 2px 0 rgba(0,0,0,.3);height:175px;overflow:auto;position:relative}@media(max-width:768px){.notes-item{height:auto;padding-right:40px}}.notes-item h3{font-weight:500;font-size:16px;line-height:24px;word-break:break-all}.notes-item span{color:#cac4d0;font-size:14px;margin-bottom:16px;letter-spacing:.25px;display:block}@media(max-width:768px){.notes-item span{margin-bottom:9px}}.notes-item p{word-break:break-all;font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;margin-bottom:17px}@media(max-width:768px){.notes-item p{margin-bottom:0}}.notes-item-controls{display:flex;justify-content:flex-end}@media(max-width:768px){.notes-item-controls{display:none}}.notes-item__dots{position:absolute;top:16px;right:10px;display:none;cursor:pointer;padding:10px 16px}@media(max-width:768px){.notes-item__dots{display:block}}.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.notes-grid.column{grid-template-columns:none}.btn{display:flex;align-items:center;gap:8px;padding:10px 12px;letter-spacing:.1px;font-weight:500;font-size:14px;transition:.2s;border-radius:5px}.btn:first-child{color:#6750a4}.btn:first-child:hover{background:#e6ddff}.btn:last-child{color:#cf1b1b}.btn:last-child:hover{background:#ffe1e1}.modal{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:100;background:rgba(0,0,0,.3)}.modal-enter-active,.modal-leave-active{transition:.2s linear}.modal-enter-from,.modal-leave-to{opacity:0;transform:scale(1.2)}.modal-content{padding:24px;border-radius:28px;background:linear-gradient(0deg,rgba(103,80,164,.11),rgba(103,80,164,.11)),#fffbfe;width:312px}.modal-content h3{font-size:24px;margin-bottom:16px;line-height:32px;font-weight:400}.modal-content label{display:flex;flex-direction:column;margin-bottom:16px}.modal-content label input{width:100%;border-bottom:1px solid #1c1b1f;padding-bottom:9px;font-size:16px;color:#000}.modal-content label input::-moz-placeholder{color:#000}.modal-content label input::placeholder{color:#000}.modal-content label span{color:#6750a4;font-size:12px;line-height:16px;letter-spacing:.4px}.modal-btns{display:flex;justify-content:end;flex-direction:row-reverse}.dropdown{position:fixed;background:#fff;box-shadow:0 2px 6px 2px rgba(0,0,0,.15),0 1px 2px 0 rgba(0,0,0,.3);border-radius:10px;overflow:hidden}.dropdown__content{padding:8px 0}.dropdown__content ul li{cursor:pointer;display:flex;gap:16px;padding:8px 12px;border-bottom:1px solid #eee}.dropdown__content ul li:last-child{border-bottom:0}*{padding:0;margin:0;box-sizing:border-box;outline:none;text-decoration:none;border:none;background:none;list-style:none;font-family:system-ui}.container{max-width:1140px;width:100%;margin:0 auto;padding:0 15px}button{cursor:pointer}.addNote{position:fixed;bottom:30px;right:30px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;z-index:100;border-radius:16px;background:linear-gradient(0deg,rgba(103,80,164,.11),rgba(103,80,164,.11)),#fffbfe;box-shadow:0 1px 3px 0 rgba(0,0,0,.3),0 4px 8px 3px rgba(0,0,0,.15)}