.postit{position:absolute;width:200px;min-height:200px;padding:1.5rem 1rem 1rem;box-shadow:0 4px 6px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06);cursor:move;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-family:Permanent Marker,Comic Sans MS,cursive,sans-serif;font-size:14px;line-height:1.6;z-index:10;transition:box-shadow .2s ease,transform .1s ease;transform:rotate(-1deg);animation:postitAppear .3s ease}.postit:nth-child(2n){transform:rotate(1.5deg)}.postit:nth-child(3n){transform:rotate(-.5deg)}.postit--dragging{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);transform:rotate(0deg) scale(1.05);z-index:100;cursor:-webkit-grabbing;cursor:grabbing}.postit:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.postit--yellow{background:linear-gradient(135deg,#fef3c7,#fde68a)}.postit--pink{background:linear-gradient(135deg,#fce7f3,#fbcfe8)}.postit--blue{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}.postit--green{background:linear-gradient(135deg,#d1fae5,#a7f3d0)}.postit--white{background:linear-gradient(135deg,#fff,#f3f4f6)}.postit__delete{position:absolute;top:.25rem;right:.25rem;width:20px;height:20px;border:none;background:rgba(0,0,0,.1);color:rgba(0,0,0,.5);border-radius:50%;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s ease;font-family:Arial,sans-serif;padding:0}.postit:hover .postit__delete{opacity:1}.postit__delete:hover{background:rgba(220,38,38,.8);color:#fff;transform:scale(1.1)}.postit__content{min-height:160px;white-space:pre-wrap;word-wrap:break-word;color:rgba(0,0,0,.8);pointer-events:none}.postit__textarea{width:100%;height:160px;border:none;background:transparent;font-family:inherit;font-size:inherit;line-height:inherit;color:rgba(0,0,0,.8);resize:none;outline:none;cursor:text}.postit__textarea::placeholder{color:rgba(0,0,0,.3)}@keyframes postitAppear{0%{opacity:0;transform:translateY(-20px) rotate(-5deg) scale(.9)}to{opacity:1;transform:translateY(0) rotate(-1deg) scale(1)}}.postit:before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:60px;height:20px;background:hsla(0,0%,100%,.3);box-shadow:0 1px 2px rgba(0,0,0,.1),inset 0 1px 0 hsla(0,0%,100%,.5);border-radius:2px;opacity:.6}.tape{height:30px;position:relative;opacity:.85;box-shadow:0 2px 4px rgba(0,0,0,.1),inset 0 1px 0 hsla(0,0%,100%,.3);pointer-events:none}.tape--classic{border-radius:2px}.tape--washi{border-radius:1px;opacity:.7}.tape--masking{border-radius:1px;opacity:.9}.tape--torn{-webkit-clip-path:polygon(0 20%,2% 10%,5% 5%,8% 15%,12% 8%,15% 12%,20% 5%,25% 10%,30% 8%,35% 12%,40% 6%,45% 10%,50% 8%,55% 12%,60% 6%,65% 10%,70% 8%,75% 12%,80% 5%,85% 10%,90% 8%,95% 12%,98% 10%,100% 15%,100% 85%,98% 90%,95% 88%,90% 92%,85% 90%,80% 95%,75% 88%,70% 92%,65% 90%,60% 94%,55% 88%,50% 92%,45% 90%,40% 94%,35% 88%,30% 92%,25% 90%,20% 95%,15% 88%,10% 92%,5% 95%,2% 90%,0 80%);clip-path:polygon(0 20%,2% 10%,5% 5%,8% 15%,12% 8%,15% 12%,20% 5%,25% 10%,30% 8%,35% 12%,40% 6%,45% 10%,50% 8%,55% 12%,60% 6%,65% 10%,70% 8%,75% 12%,80% 5%,85% 10%,90% 8%,95% 12%,98% 10%,100% 15%,100% 85%,98% 90%,95% 88%,90% 92%,85% 90%,80% 95%,75% 88%,70% 92%,65% 90%,60% 94%,55% 88%,50% 92%,45% 90%,40% 94%,35% 88%,30% 92%,25% 90%,20% 95%,15% 88%,10% 92%,5% 95%,2% 90%,0 80%)}.tape--beige{background:linear-gradient(180deg,#f5f1e8,#e8dfc8)}.tape--white{background:linear-gradient(180deg,#fff,#f0f0f0)}.tape--blue{background:linear-gradient(180deg,#bfdbfe,#93c5fd)}.tape--pink{background:linear-gradient(180deg,#fbcfe8,#f9a8d4)}.tape--yellow{background:linear-gradient(180deg,#fef3c7,#fde68a)}.tape--green{background:linear-gradient(180deg,#d1fae5,#a7f3d0)}.tape--dots:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,0,0,.1) 1px,transparent 0);background-size:6px 6px}.tape--stripes:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 8px)}.tape--grid:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 0),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 0);background-size:6px 6px}.tape--floral:before{content:"✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿";position:absolute;inset:0;display:flex;align-items:center;justify-content:space-around;font-size:12px;color:rgba(0,0,0,.2);padding:0 8px;overflow:hidden}.tape:after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.03' /%3E%3C/svg%3E");border-radius:inherit;pointer-events:none}.doodle{display:inline-block;pointer-events:none;opacity:.8;animation:doodleDraw .8s ease forwards}.doodle svg{width:100%;height:100%;display:block}.doodle:hover{opacity:1;animation:doodleWiggle .5s ease}@keyframes doodleDraw{0%{opacity:0;transform:scale(.9)}to{opacity:.8;transform:scale(1)}}@keyframes doodleWiggle{0%,to{transform:rotate(0deg)}25%{transform:rotate(2deg)}75%{transform:rotate(-2deg)}}