#app{padding:20px}h1{font-size:20px;margin-bottom:12px}.tile-wall{display:flex;flex-direction:column;gap:2px}.tile-row{display:flex;gap:2px;height:12px}.tile{height:12px;border-radius:2px}body{margin:0;font-family:sans-serif}.container{padding:16px;position:relative}.controls{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;align-items:center}.controls label{display:flex;flex-direction:column;gap:4px;font-size:14px}.controls input{width:80px}.controls button{align-self:flex-end;padding:8px 12px;cursor:pointer}.ruler-wrapper{position:relative;margin-left:40px;margin-top:40px}.tile-wall{display:flex;flex-direction:column;background:#f9f9f9;position:relative;gap:var(--4e64c751);box-shadow:inset 0 0 0 1px #ccc}.tile-row{display:flex}.tile{border-radius:2px;box-sizing:border-box}.ruler{position:absolute;background-color:transparent;pointer-events:none}.ruler.top,.ruler.bottom{height:20px;left:0;right:0}.ruler.top{top:-20px}.ruler.bottom{bottom:-20px}.ruler.left,.ruler.right{width:20px;top:0;bottom:0}.ruler.left{left:-20px}.ruler.right{right:-20px}.tick{position:absolute;width:1px;height:100%;background:#666}.tick-vert{position:absolute;height:1px;width:100%;background:#666}.bold{background:#000!important;width:2px;height:100%}.bold.tick-vert{height:2px;width:100%}.tiling-mode-container{width:100%;max-width:100vw;box-sizing:border-box}.tiling-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:10px;background-color:#f0f0f0;border-radius:8px}.tiling-controls button{padding:10px 15px;border:1px solid #ccc;background-color:#fff;border-radius:5px;cursor:pointer}.tiling-controls button:disabled{opacity:.5;cursor:not-allowed}.tiling-row-info{font-weight:700;font-size:1.2em}.tiling-row-scrollable{overflow-x:auto;white-space:nowrap;padding-bottom:15px;border:1px solid #ddd;background-color:#f9f9f9}.tiling-row-content{display:inline-flex;padding:10px}.tiling-tile-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px}.tiling-tile{height:120px;display:flex;align-items:center;justify-content:center;font-size:2.5em;font-weight:700;border-radius:4px;box-shadow:0 2px 4px #0000001a}.tiling-tile-number{font-size:1em;font-weight:500;color:#333}
