.masonry-demo{max-width:1200px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.masonry-demo h1{text-align:center;margin-bottom:30px;color:#333}.demo-controls{background-color:#f5f5f5;padding:20px;border-radius:10px;margin-bottom:30px;display:flex;flex-wrap:wrap;gap:20px;box-shadow:0 2px 10px rgba(0,0,0,.05)}.control-group{display:flex;flex-direction:column;gap:15px;flex:1;min-width:250px}.demo-controls label{display:flex;flex-direction:column;gap:8px;font-weight:500}.demo-controls input[type=range]{width:100%;cursor:pointer}.demo-controls input[type=checkbox]{margin-right:8px}.demo-controls select{padding:8px;border-radius:4px;border:1px solid #ccc;background-color:white;cursor:pointer}.demo-controls button{padding:10px 15px;background-color:#4a6cf7;color:white;border:none;border-radius:4px;font-weight:500;cursor:pointer;transition:background-color .2s;align-self:flex-start}.demo-controls button:hover{background-color:#3a5ce6}.demo-description{margin-bottom:20px;background-color:#e9f0ff;padding:12px;border-radius:6px;border-left:4px solid #4a6cf7}.masonry-container{margin-bottom:30px;padding:10px;background-color:#ffffff;border-radius:10px;box-shadow:0 3px 15px rgba(0,0,0,.08)}.masonry-item{border-radius:8px;padding:15px;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 8px rgba(0,0,0,.1)}.masonry-item:hover{transform:translateY(-3px);box-shadow:0 5px 15px rgba(0,0,0,.1)}.item-number{font-size:1.5rem;font-weight:700;color:rgba(0,0,0,.5);text-shadow:0 1px 2px rgba(255,255,255,.4)}.demo-footer{text-align:center;padding:20px;color:#666;font-style:italic}@media (max-width:768px){.demo-controls{flex-direction:column;gap:15px}.control-group{min-width:auto}}